/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Admin Layout
   Extraído de header.php
═══════════════════════════════════════════════ */
:root {
    --blue:         #2563EB;
    --blue-soft:    #60A5FA;
    --blue-glow:    rgba(37,99,235,.4);
    --blue-light:   rgba(37,99,235,.15);
    --red:          #EF4444;
    --red-light:    rgba(239,68,68,.15);
    --gold:         #F59E0B;
    --green:        #10B981;
    --bg:           #020617;
    --bg-gradient:  linear-gradient(135deg,#020617 0%,#0f172a 100%);
    --card:         rgba(15,23,42,.95);
    --card-hover:   rgba(30,41,59,.95);
    --border:       rgba(255,255,255,.08);
    --border-light: rgba(255,255,255,.12);
    --radius-lg:    24px;
    --radius-md:    16px;
    --radius-sm:    12px;
    --font:         'Inter', sans-serif;
    --shadow:       0 8px 32px rgba(0,0,0,.3);
    --shadow-hover: 0 20px 60px rgba(0,0,0,.5);

    /* aliases legado */
    --color-primary:       #2563EB;
    --color-primary-light: #60A5FA;
    --color-primary-dark:  #1D4ED8;
    --color-accent:        #EF4444;
    --color-bg:            #020617;
    --color-bg-light:      #0F172A;
    --font-main:           'Inter', sans-serif;
    --th-bg:        #020617;
    --th-surface:   #0F172A;
    --th-surface2:  rgba(15,23,42,.95);
    --th-surface3:  rgba(30,41,59,.8);
    --th-border:    rgba(255,255,255,.08);
    --th-border2:   rgba(255,255,255,.12);
    --th-text:      #F8FAFC;
    --th-text2:     #E2E8F0;
    --th-muted:     #94A3B8;
    --th-muted2:    #64748B;
    --th-muted3:    #475569;
    --th-input-bg:  rgba(2,6,23,.9);
    --th-hover:     rgba(255,255,255,.05);
    --th-hover2:    rgba(255,255,255,.03);
    --th-shadow:    rgba(0,0,0,.4);
    --gradient-bg:  linear-gradient(135deg,#020617 0%,#0f172a 100%);

    /* sidebar */
    --sb-w:           260px;
    --sb-bg:          #070e1d;
    --sb-border:      rgba(255,255,255,.06);
    --sb-item-h:      42px;
    --sb-active-bg:   rgba(37,99,235,.16);
    --sb-active-bd:   #2563EB;
    --sb-hover-bg:    rgba(255,255,255,.04);
    --topbar-h:       58px;
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg-gradient); color:#fff; min-height:100vh; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }

/* ═══════════════════════════════════════════════
   ADMIN LAYOUT
═══════════════════════════════════════════════ */
.admin-layout { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.sidebar {
    width: var(--sb-w);
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 300;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.08) transparent;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }

.sb-logo { display:flex; align-items:center; gap:12px; padding:20px 20px 18px; border-bottom:1px solid var(--sb-border); flex-shrink:0; }
.sb-logo img { height:34px; width:auto; }
.sb-logo-name { font-size:.82rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase; background:linear-gradient(135deg,#fff,var(--blue-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sb-close { display:none; margin-left:auto; background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; padding:4px; font-size:1.2rem; border-radius:8px; transition:all .2s; }
.sb-close:hover { color:#fff; background:rgba(255,255,255,.08); }

.sb-nav { flex:1; padding:12px 0; }
.sb-section { margin-bottom:4px; }
.sb-section-label { padding:12px 20px 6px; font-size:.65rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.25); }

.sb-item { display:flex; align-items:center; gap:11px; height:var(--sb-item-h); padding:0 18px; margin:2px 10px; border-radius:10px; font-size:.84rem; font-weight:500; color:rgba(255,255,255,.5); cursor:pointer; transition:all .18s; position:relative; white-space:nowrap; }
.sb-item i { font-size:1rem; width:20px; text-align:center; flex-shrink:0; opacity:.8; }
.sb-item:hover { background:var(--sb-hover-bg); color:rgba(255,255,255,.85); }
.sb-item:hover i { opacity:1; }
.sb-item.active { background:var(--sb-active-bg); color:var(--blue-soft); font-weight:700; }
.sb-item.active i { opacity:1; color:var(--blue-soft); }
.sb-item.active::before { content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:3px; height:22px; background:var(--sb-active-bd); border-radius:0 3px 3px 0; }
.sb-item.live-item { color:#FCA5A5; }
.sb-item.live-item i { color:#EF4444; }
.sb-item.live-item:hover { background:rgba(239,68,68,.08); }

.sb-divider { height:1px; background:var(--sb-border); margin:8px 20px; }

.sb-footer { padding:14px 16px; border-top:1px solid var(--sb-border); flex-shrink:0; }
.sb-user { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; cursor:default; margin-bottom:8px; }
.sb-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:#fff; flex-shrink:0; letter-spacing:-.5px; }
.sb-user-info { flex:1; min-width:0; }
.sb-user-name { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-user-role { font-size:.7rem; color:rgba(255,255,255,.35); font-weight:500; text-transform:capitalize; }
.sb-logout { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; font-size:.82rem; font-weight:600; color:rgba(239,68,68,.7); transition:all .18s; cursor:pointer; border:1px solid rgba(239,68,68,.12); background:rgba(239,68,68,.05); }
.sb-logout:hover { background:rgba(239,68,68,.12); color:#FCA5A5; border-color:rgba(239,68,68,.25); }
.sb-logout i { font-size:.95rem; }

/* ── Overlay mobile ── */
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:290; }
.sb-overlay.open { display:block; }

/* ── Main wrap ── */
.main-wrap { flex:1; margin-left:var(--sb-w); min-height:100vh; display:flex; flex-direction:column; }

/* ── Topbar ── */
.topbar { height:var(--topbar-h); background:rgba(7,14,29,.95); border-bottom:1px solid var(--sb-border); display:flex; align-items:center; padding:0 24px; gap:14px; position:sticky; top:0; z-index:200; backdrop-filter:blur(20px); flex-shrink:0; }
.topbar-toggle { display:none; background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; padding:6px; font-size:1.4rem; border-radius:8px; transition:all .2s; line-height:1; }
.topbar-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }
.topbar-title { font-size:.95rem; font-weight:700; color:rgba(255,255,255,.8); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar-camp { display:flex; align-items:center; gap:7px; padding:6px 14px; border-radius:20px; font-size:.78rem; font-weight:600; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.25); color:var(--blue-soft); }
.topbar-home { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:10px; font-size:.78rem; font-weight:600; border:1px solid var(--border); background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); transition:all .2s; }
.topbar-home:hover { background:rgba(255,255,255,.09); color:#fff; }

/* ── Content ── */
.container { flex:1; padding:28px 28px 60px; max-width:100%; }

/* ═══════════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════════ */
.page-heading { margin-bottom:28px; }
.page-heading h1, .page-title { font-size:clamp(1.3rem,3vw,1.9rem); font-weight:900; background:linear-gradient(135deg,#fff 0%,var(--blue-soft) 50%,var(--red) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:6px; letter-spacing:-.3px; display:block; }
.page-heading .ph-sub { font-size:.88rem; color:rgba(255,255,255,.45); font-weight:500; }
.page-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.section-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.section-header h2 { display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:800; color:rgba(255,255,255,.9); }
.section-header h2 i { color:var(--blue); background:rgba(37,99,235,.1); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:.9rem; }
.section-divider { flex:1; height:1px; background:var(--border); }

.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--blue),var(--red)); }
.card:hover { transform:translateY(-4px); background:var(--card-hover); border-color:var(--border-light); box-shadow:var(--shadow-hover); }

.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }

.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-blue  { background:rgba(37,99,235,.18);  color:#93C5FD; border:1px solid rgba(37,99,235,.3); }
.badge-green { background:rgba(16,185,129,.15); color:#34D399; border:1px solid rgba(16,185,129,.25); }
.badge-red   { background:rgba(239,68,68,.15);  color:#FCA5A5; border:1px solid rgba(239,68,68,.25); }
.badge-gold  { background:rgba(245,158,11,.15); color:#FCD34D; border:1px solid rgba(245,158,11,.25); }
.badge-muted { background:rgba(148,163,184,.12);color:#94A3B8; border:1px solid rgba(148,163,184,.2); }

.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-sm); font-size:.88rem; font-weight:700; cursor:pointer; transition:all .2s; border:none; font-family:var(--font); text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:#1d4ed8; transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.35); }
.btn-danger  { background:var(--red);  color:#fff; }
.btn-danger:hover  { background:#dc2626; transform:translateY(-1px); }
.btn-ghost { background:rgba(255,255,255,.06); border:1px solid var(--border-light); color:rgba(255,255,255,.7); }
.btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }
.btn-sm { padding:7px 14px; font-size:.8rem; }
.btn-lg { padding:13px 28px; font-size:.95rem; }

.form-group { margin-bottom:18px; }
.form-label { display:block; margin-bottom:7px; font-size:.82rem; font-weight:600; color:var(--th-muted); }
.form-input,.form-select,.form-textarea { width:100%; padding:11px 14px; background:rgba(2,6,23,.8); border:1px solid var(--border); border-radius:var(--radius-sm); color:#fff; font-size:.9rem; font-family:var(--font); transition:border-color .2s; outline:none; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.form-input::placeholder { color:rgba(255,255,255,.3); }
.form-select option { background:#0F172A; }

.alert { padding:14px 18px; border-radius:var(--radius-sm); font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.alert-success { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); color:#34D399; }
.alert-error   { background:rgba(239,68,68,.12);  border:1px solid rgba(239,68,68,.25);  color:#FCA5A5; }
.alert-warning { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); color:#FCD34D; }
.alert-info    { background:rgba(37,99,235,.1);   border:1px solid rgba(37,99,235,.25);  color:#93C5FD; }

.table-wrap { overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:12px 16px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.45); background:rgba(37,99,235,.08); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.data-table td { padding:12px 16px; font-size:.88rem; border-bottom:1px solid rgba(255,255,255,.04); color:rgba(255,255,255,.85); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,.02); }

.empty-state { text-align:center; padding:48px 20px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.empty-state i { font-size:3rem; color:var(--blue-soft); opacity:.4; margin-bottom:16px; display:block; }
.empty-state p { opacity:.55; font-size:.95rem; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ═══════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.6); }
    .sb-close { display: flex; }
    .main-wrap { margin-left: 0; }
    .topbar-toggle { display: flex; }
    .container { padding: 20px 16px 48px; }
}
@media (max-width: 640px) {
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar-camp span { display: none; }
    .page-heading h1, .page-title { font-size: 1.3rem; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}