/* ============================================================
   VIP CARGO — css/main.css  v2
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --navy:       #0B1D35;
  --navy-mid:   #122848;
  --navy-light: #1A3A60;
  --gold:       #C8920A;
  --gold-light: #E8AD20;
  --gold-pale:  #F5D980;
  --gold-bg:    rgba(200,146,10,.08);
  --white:    #FFFFFF;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  --success:   #059669; --success-bg:#ECFDF5;
  --warning:   #D97706; --warning-bg:#FFFBEB;
  --danger:    #DC2626; --danger-bg: #FEF2F2;
  --info:      #2563EB; --info-bg:   #EFF6FF;
  --purple:    #7C3AED; --purple-bg: #F5F3FF;
  --font-d: 'Playfair Display', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;
  --sh-xs: 0 1px 3px rgba(11,29,53,.06);
  --sh-sm: 0 2px 10px rgba(11,29,53,.09);
  --sh-md: 0 6px 24px rgba(11,29,53,.12);
  --sh-lg: 0 12px 48px rgba(11,29,53,.16);
  --sh-xl: 0 24px 72px rgba(11,29,53,.22);
  --sh-gold: 0 8px 32px rgba(200,146,10,.28);
  --r-sm:4px; --r:10px; --r-lg:18px; --r-xl:26px;
  --tr:.2s ease; --tr-s:.4s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--gray-900);background:var(--gray-50);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:var(--font-b);cursor:pointer}
input,select,textarea{font-family:var(--font-b)}
h1,h2,h3{font-family:var(--font-d);line-height:1.15}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3vw,2.8rem)}
h3{font-size:clamp(1.1rem,2vw,1.5rem)}
img{max-width:100%;display:block}

/* ── UTILS ───────────────────────────────────────────────── */
.hidden{display:none!important}
.w-full{width:100%}
.text-center{text-align:center}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
.text-muted{color:var(--gray-500)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.fw-700{font-weight:700}.fw-800{font-weight:800}
.fs-sm{font-size:.85rem}.fs-xs{font-size:.76rem}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.68rem 1.4rem;border-radius:var(--r);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all var(--tr);white-space:nowrap;line-height:1;font-family:var(--font-b)}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--sh-gold)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-mid);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--gray-300)}
.btn-outline:hover{border-color:var(--navy);background:var(--gray-50)}
.btn-ghost{background:transparent;color:var(--gray-600);border:1.5px solid var(--gray-200)}
.btn-ghost:hover{background:var(--gray-100)}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1eb85a}
.btn-email{background:var(--info);color:#fff}
.btn-sm{padding:.4rem .9rem;font-size:.8rem}
.btn-lg{padding:.85rem 2rem;font-size:1rem}
.btn-xl{padding:1rem 2.4rem;font-size:1.05rem;border-radius:var(--r-lg)}
.btn-icon{padding:.5rem .65rem}

/* ── CARDS ───────────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);border:1px solid var(--gray-100)}
.card-body{padding:1.5rem}
.card-header{padding:1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-family:var(--font-b);font-size:.95rem;font-weight:700;color:var(--navy)}
.card-footer{padding:1rem 1.5rem;border-top:1px solid var(--gray-100);background:var(--gray-50);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ── FORMS ───────────────────────────────────────────────── */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:.8rem;font-weight:700;color:var(--gray-700);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em}
.form-input{width:100%;padding:.7rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--r);font-size:.875rem;color:var(--gray-900);background:#fff;transition:all var(--tr);outline:none}
.form-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,29,53,.07)}
.form-input::placeholder{color:var(--gray-400)}
select.form-input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
textarea.form-input{resize:vertical;min-height:88px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.input-group{position:relative}
.input-group .form-input{padding-left:2.5rem}
.input-group i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--gray-400);font-size:.82rem;pointer-events:none}
.form-hint{font-size:.75rem;color:var(--gray-500);margin-top:.3rem}
.form-error{font-size:.82rem;color:var(--danger);margin-top:.3rem;display:none}
.form-error.show{display:block}

/* ── BADGES ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .65rem;border-radius:99px;font-size:.7rem;font-weight:700;white-space:nowrap}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-gray{background:var(--gray-100);color:var(--gray-600)}
.badge-navy{background:var(--navy);color:#fff}
.badge-gold{background:var(--gold-bg);color:var(--gold)}
.badge-purple{background:var(--purple-bg);color:var(--purple)}

/* ── TABLES ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.845rem}
table thead th{background:var(--gray-50);padding:.75rem 1rem;text-align:left;font-size:.7rem;font-weight:800;color:var(--gray-500);text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--gray-200);white-space:nowrap}
table tbody td{padding:.85rem 1rem;border-bottom:1px solid var(--gray-100);color:var(--gray-800);vertical-align:middle}
table tbody tr:last-child td{border-bottom:none}
table tbody tr:hover{background:var(--gray-50)}
.action-btns{display:flex;gap:.4rem}

/* ── MODALS ──────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(11,29,53,.6);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}
.modal{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-xl);width:100%;max-width:500px;max-height:92vh;overflow-y:auto;animation:slideUp .3s ease}
.modal-lg{max-width:680px}
.modal-header{padding:1.4rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.modal-header h3{font-family:var(--font-b);font-size:1rem;font-weight:700;color:var(--navy)}
.modal-body{padding:1.5rem}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--gray-100);display:flex;gap:.7rem;justify-content:flex-end;flex-wrap:wrap;background:var(--gray-50);border-radius:0 0 var(--r-xl) var(--r-xl)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:1.1rem;padding:.25rem;line-height:1;transition:color var(--tr);border-radius:var(--r-sm)}
.modal-close:hover{color:var(--gray-900);background:var(--gray-100)}

/* ── TOASTS ──────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.6rem;pointer-events:none}
.toast{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);padding:.85rem 1.1rem;display:flex;align-items:center;gap:.7rem;font-size:.84rem;font-weight:500;max-width:320px;animation:slideInRight .3s ease;border-left:3px solid var(--success);pointer-events:all}
.toast.error{border-color:var(--danger)}
.toast.info{border-color:var(--info)}
.toast.warn{border-color:var(--warning)}
.toast .toast-icon{color:var(--success);font-size:.95rem;flex-shrink:0}
.toast.error .toast-icon{color:var(--danger)}
.toast.info .toast-icon{color:var(--info)}
.toast.warn .toast-icon{color:var(--warning)}

/* ── LOADER ──────────────────────────────────────────────── */
.page-loader{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9998;transition:opacity .3s ease}
.page-loader.hidden{opacity:0;pointer-events:none}
.spinner{width:38px;height:38px;border:3px solid var(--gray-200);border-top-color:var(--gold);border-radius:50%;animation:spin .75s linear infinite}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--gray-400)}
.empty-state i{font-size:2.6rem;margin-bottom:.9rem;display:block;opacity:.4}
.empty-state h4{font-family:var(--font-b);font-size:.93rem;font-weight:600;color:var(--gray-500);margin-bottom:.3rem}
.empty-state p{font-size:.83rem}

/* ── AVATAR ──────────────────────────────────────────────── */
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-mid));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;user-select:none}
.avatar-lg{width:54px;height:54px;font-size:1.05rem}
.avatar-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy)}

/* ── LOGO COMPONENT ──────────────────────────────────────── */
.logo-img{height:36px;width:auto;object-fit:contain}
.logo-img-lg{height:50px}
.logo-name{color:#fff;font-family:var(--font-d);font-size:1.3rem;font-weight:900;letter-spacing:-.02em}
.logo-name span{color:var(--gold)}
.logo-box{width:40px;height:40px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--navy);font-size:1.1rem;flex-shrink:0}

/* ── STAT CARDS ──────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:1.1rem;margin-bottom:1.75rem}
.stat-card{background:#fff;border-radius:var(--r-lg);padding:1.35rem;border:1px solid var(--gray-100);box-shadow:var(--sh-sm);display:flex;align-items:center;gap:.9rem}
.stat-icon{width:48px;height:48px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.si-navy{background:rgba(11,29,53,.08);color:var(--navy)}
.si-gold{background:var(--gold-bg);color:var(--gold)}
.si-success{background:var(--success-bg);color:var(--success)}
.si-info{background:var(--info-bg);color:var(--info)}
.si-danger{background:var(--danger-bg);color:var(--danger)}
.si-warning{background:var(--warning-bg);color:var(--warning)}
.si-purple{background:var(--purple-bg);color:var(--purple)}
.stat-info .lbl{font-size:.76rem;color:var(--gray-500);font-weight:600;margin-bottom:.15rem;text-transform:uppercase;letter-spacing:.04em}
.stat-info .val{font-size:1.55rem;font-weight:800;color:var(--navy);line-height:1;font-family:var(--font-d)}

/* ── SEARCH BAR ──────────────────────────────────────────── */
.search-bar{display:flex;align-items:center;gap:.5rem;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--r);padding:.45rem .9rem;transition:all var(--tr)}
.search-bar:focus-within{border-color:var(--navy);background:#fff}
.search-bar input{border:none;background:none;outline:none;font-size:.845rem;color:var(--gray-900);width:190px;font-family:var(--font-b)}
.search-bar i{color:var(--gray-400);font-size:.8rem}

/* ── PROGRESS ────────────────────────────────────────────── */
.prog-bar{height:6px;background:var(--gray-200);border-radius:99px;overflow:hidden;margin-top:.3rem}
.prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .8s ease}

/* ── CONTENT EDITOR ──────────────────────────────────────── */
.ce-section{border:1.5px solid var(--gray-200);border-radius:var(--r);overflow:hidden;margin-bottom:1rem}
.ce-header{background:var(--gray-50);padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-bottom:1px solid var(--gray-200)}
.ce-header h4{font-family:var(--font-b);font-size:.875rem;font-weight:700;color:var(--navy)}
.ce-body{padding:1.1rem;display:none}
.ce-body.open{display:block}

/* ── FILTER TABS ─────────────────────────────────────────── */
.filter-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem}
.filter-tab{padding:.4rem .85rem;font-size:.79rem;font-weight:600;cursor:pointer;border:1.5px solid var(--gray-200);border-radius:var(--r);background:none;color:var(--gray-600);transition:all var(--tr);font-family:var(--font-b)}
.filter-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.filter-tab .cnt{background:rgba(255,255,255,.2);border-radius:99px;padding:.03rem .42rem;font-size:.68rem;margin-left:.15rem}
.filter-tab:not(.active) .cnt{background:var(--gray-200);color:var(--gray-600)}

/* ── USER ROW ────────────────────────────────────────────── */
.user-row{display:flex;align-items:center;gap:.7rem}
.user-row-name{font-size:.84rem;font-weight:600;color:var(--gray-900);line-height:1.2}
.user-row-email{font-size:.71rem;color:var(--gray-400)}

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

/* ── RESPONSIVE GLOBAL ───────────────────────────────────── */
@media(max-width:768px){
  .form-row{grid-template-columns:1fr}
  .modal{max-width:100%;margin:.5rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .btn-xl{padding:.85rem 1.75rem;font-size:.95rem}
}