/* ═══════════════════════════════════════════════════════════════
   Lineage II KOF — King of Fight (Minecraft SOC Admin)
   custom.css — Yacaré v15
   Tema: Dark Gothic con acentos carmesí/rojo sangre + SOC Admin UI
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800;900&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════
   VARIABLES & THEME
   ═══════════════════════════════════════ */
:root,
[data-theme="dark"] {
    /* Core palette */
    --kof-bg-deep:      #06060c;
    --kof-bg-main:      #0a0a14;
    --kof-bg-surface:   #10101e;
    --kof-bg-card:      #14142a;
    --kof-bg-elevated:  #1a1a32;

    --kof-border:       rgba(255,255,255,0.06);
    --kof-border-light: rgba(255,255,255,0.10);
    --kof-border-glow:  rgba(190,40,40,0.25);

    --kof-text:         #e2e8f0;
    --kof-text-muted:   #8892a4;
    --kof-text-dim:     #4a5568;

    --kof-red:          #c41e1e;
    --kof-red-bright:   #ef4444;
    --kof-red-glow:     rgba(196,30,30,0.35);
    --kof-gold:         #d4a039;
    --kof-gold-dim:     rgba(212,160,57,0.15);
    --kof-purple:       #7c3aed;
    --kof-green:        #22c55e;
    --kof-amber:        #f59e0b;

    --kof-gradient:     linear-gradient(135deg, #c41e1e 0%, #7c1a1a 50%, #2d0a0a 100%);
    --kof-gradient-nav: linear-gradient(135deg, rgba(196,30,30,0.85), rgba(45,10,10,0.95));
    --kof-gradient-gold:linear-gradient(135deg, #d4a039, #8b6914);

    --kof-glass:        rgba(14,14,28,0.75);
    --kof-glass-border: rgba(255,255,255,0.08);
    --kof-glass-blur:   blur(16px) saturate(1.4);

    --kof-shadow:       0 8px 32px rgba(0,0,0,0.55);
    --kof-shadow-red:   0 4px 24px rgba(196,30,30,0.20);
    --kof-shadow-glow:  0 0 40px rgba(196,30,30,0.15);

    --kof-radius:       10px;
    --kof-radius-lg:    16px;
    --kof-radius-xl:    20px;

    --kof-font-display: 'Cinzel', 'Palatino Linotype', 'Times New Roman', serif;
    --kof-font-ui:      'Rajdhani', 'Segoe UI', system-ui, sans-serif;

    /* SOC ADMIN MAPPING (Variables nativas del Admin) */
    --bg-main: var(--kof-bg-deep); 
    --text-main: var(--kof-text); 
    --text-muted: var(--kof-text-muted);
    --footer-bg: rgba(10,10,20,0.85); 
    --footer-brd: rgba(255,255,255,0.08); 
    --badge-bg: rgba(255,255,255,0.05);
}

[data-theme="light"] {
    --kof-bg-deep:      #e8e4df;
    --kof-bg-main:      #f0ece6;
    --kof-bg-surface:   #f5f1ec;
    --kof-bg-card:      #ffffff;
    --kof-bg-elevated:  #ffffff;

    --kof-border:       rgba(0,0,0,0.08);
    --kof-border-light: rgba(0,0,0,0.12);
    --kof-border-glow:  rgba(196,30,30,0.20);

    --kof-text:         #1a1a2e;
    --kof-text-muted:   #5a5a72;
    --kof-text-dim:     #8888a0;

    --kof-glass:        rgba(255,255,255,0.80);
    --kof-glass-border: rgba(0,0,0,0.08);

    /* SOC ADMIN MAPPING LIGHT */
    --bg-main: var(--kof-bg-deep); 
    --text-main: var(--kof-text); 
    --text-muted: var(--kof-text-muted);
    --footer-bg: rgba(255,255,255,0.85); 
    --footer-brd: rgba(0,0,0,0.08); 
    --badge-bg: rgba(0,0,0,0.03);
}

/* ═══════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body, .kof-body {
    font-family: var(--kof-font-ui);
    background-color: var(--kof-bg-deep);
    color: var(--kof-text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Fondo ambiental */
body::before, .kof-body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background: radial-gradient(ellipse 900px 600px at 15% 20%, rgba(196,30,30,0.08), transparent 60%),
                radial-gradient(ellipse 800px 500px at 85% 80%, rgba(124,58,237,0.06), transparent 60%);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ═══════════════════════════════════════
   SOC ADMIN UI ELEMENTS
   ═══════════════════════════════════════ */

/* Pestañas del Menú Central */
.fluent-tab { padding:8px 16px; border-radius:12px; color:var(--text-muted); font-weight:700; font-size:.85rem; text-decoration:none; transition:all .2s; border:1px solid transparent; display:inline-flex; align-items:center; white-space:nowrap; gap:6px; }
.fluent-tab:hover { background:var(--badge-bg); color:var(--text-main); }
.fluent-tab.active { background:var(--kof-gradient); color:#fff!important; box-shadow:var(--kof-shadow-red); border-color: rgba(196,30,30,.5); }

.tabs-scroll { overflow-x:auto; scrollbar-width:none; }
.tabs-scroll::-webkit-scrollbar { display:none; }
.tb-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.navline { height:3px; background:var(--kof-gradient-gold); opacity: 0.8; }

/* LEDs Status */
.led { width:8px; height:8px; border-radius:50%; display:inline-block; }
.led-on { background:#10b981; box-shadow:0 0 6px rgba(16,185,129,.6); }
.led-off { background:#64748b; opacity:.4; }
.led-warn { background:#f59e0b; box-shadow:0 0 6px rgba(245,158,11,.5); }
@keyframes ledPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.led-pulse { animation:ledPulse 2s infinite; }

/* Modales y utilidades (Z-INDEX CORREGIDO) */
.swal2-container, #invOverlay, #profileOverlay { z-index: 99999 !important; }
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1055 !important; }

/* Footer Admin */
.site-footer { background-color:var(--footer-bg)!important; border-top-color:var(--footer-brd)!important; backdrop-filter:blur(16px); }
.site-footer .border-bottom { border-bottom-color:var(--footer-brd)!important; }
.badge-security { background-color:var(--badge-bg); padding:8px 12px; border-radius:10px; border:1px solid var(--footer-brd); color:var(--text-main)!important; font-size:.8rem; display:inline-flex; align-items:center; gap:8px; }
.agency-logo { height:38px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.1)); transition:transform .3s; }
.agency-logo:hover { transform:scale(1.05); }

/* Dropdown User Menu */
[data-theme="dark"] .dropdown-menu { background:rgba(20,20,42,.98); border-color:var(--footer-brd); }
[data-theme="dark"] .dropdown-item { color:#f8fafc; }
[data-theme="dark"] .dropdown-item:hover { background:rgba(255,255,255,.05); }
[data-theme="dark"] .dropdown-divider { border-color:var(--footer-brd); }

/* Botón de Logs en el header */
.btn-logs { 
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; 
    border-radius: 10px; padding: 6px 12px; font-size: 0.85rem; font-weight: bold; 
    transition: all 0.2s; text-decoration: none; display: flex; align-items: center; gap: 6px; 
}
.btn-logs:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; transform: scale(1.05); }
.btn-logs.active { background: #ef4444; color: #fff; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); border-color: #ef4444; }

/* ═══════════════════════════════════════
   SCROLLBAR GLOBAL
   ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--kof-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--kof-text-dim); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--kof-red); }