:root {
    --bg: #0a0f1e;
    --bg2: #111827;
    --sidebar: #0d1424;
    --accent: #0303B5;
    --accent2: #1a56db;
    --accent-glow: rgba(3, 3, 181, 0.25);
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --text: #f1f5f9;
    --text2: #94a3b8;
    --border: rgba(255,255,255,0.07);
    --glass: rgba(17, 24, 39, 0.8);
    --card: rgba(255,255,255,0.04);
    --radius: 12px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at 10% 10%, rgba(3,3,181,0.12) 0, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(16,185,129,0.06) 0, transparent 50%);
    background-attachment: fixed;
}

/* ── LOGIN ─────────────────────────────── */
.login-wrap {
    position: fixed; inset:0;
    display: flex; align-items:center; justify-content:center;
    background: var(--bg);
    background-image: radial-gradient(ellipse at 20% 30%, rgba(3,3,181,0.18) 0, transparent 55%);
    z-index: 9999;
}
.login-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    width: 100%; max-width: 380px;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(3,3,181,0.15);
}
.login-logo {
    display:flex; justify-content:center; margin-bottom:1.5rem;
}
.login-logo img { height: 52px; }
.login-card h2 {
    text-align:center; font-size:1.1rem; color:var(--text2);
    margin-bottom:1.75rem; font-weight:400;
}
.field { margin-bottom:1.25rem; }
.field label { display:block; font-size:.78rem; color:var(--text2); margin-bottom:.4rem; letter-spacing:.05em; text-transform:uppercase; }
.field input {
    width:100%; padding:.7rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 8px; color:var(--text);
    font-size:.95rem; outline:none; transition:border .2s;
}
.field input:focus { border-color: var(--accent2); }
.btn-login {
    width:100%; padding:.8rem; margin-top:.5rem;
    background: var(--accent); color:white;
    border:none; border-radius:9px; font-size:1rem;
    font-weight:600; cursor:pointer; transition:background .2s, box-shadow .2s;
}
.btn-login:hover { background:var(--accent2); box-shadow:0 0 20px var(--accent-glow); }
.login-err { color:var(--danger); font-size:.82rem; text-align:center; margin-top:.75rem; min-height:1.1em; }

/* ── LAYOUT ─────────────────────────────── */
.app { display:flex; min-height:100vh; }

.sidebar {
    width: 230px; flex-shrink:0;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    display:flex; flex-direction:column;
    padding: 1.5rem 1rem 1rem;
}
.sb-logo { display:flex; justify-content:center; margin-bottom:2rem; }
.sb-logo img { height:40px; filter:brightness(1.1); }

.sb-status {
    display:flex; align-items:center; gap:.5rem;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius:8px; padding:.5rem .75rem;
    margin-bottom:1.75rem;
    font-size:.78rem; color:var(--success);
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--success); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.sb-nav { list-style:none; flex:1; }
.sb-nav li {
    padding:.7rem 1rem; margin-bottom:.3rem;
    border-radius:9px; cursor:pointer;
    color:var(--text2); font-weight:500; font-size:.9rem;
    display:flex; align-items:center; gap:.6rem;
    transition:all .2s;
}
.sb-nav li:hover { background:rgba(255,255,255,0.05); color:var(--text); }
.sb-nav li.active { background:var(--accent); color:white; box-shadow:0 4px 14px var(--accent-glow); }
.sb-nav li.danger { color:var(--danger); margin-top:auto; }
.sb-nav li.danger:hover { background:rgba(239,68,68,0.08); }

.sb-footer {
    padding-top:1rem; border-top:1px solid var(--border);
    text-align:center; font-size:.7rem; color:var(--text2); line-height:1.6;
}

/* ── MAIN ─────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 2rem; border-bottom:1px solid var(--border);
    background:rgba(10,15,30,0.6); backdrop-filter:blur(10px);
    position:sticky; top:0; z-index:100;
}
.topbar h1 { font-size:1.15rem; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:.75rem; }
.date-pill {
    background:var(--card); border:1px solid var(--border);
    padding:.35rem .9rem; border-radius:20px;
    font-size:.78rem; color:var(--text2);
}
.btn-export {
    padding:.45rem .9rem; border-radius:8px; font-size:.8rem; font-weight:600;
    cursor:pointer; border:1px solid var(--border); background:var(--card);
    color:var(--text); transition:all .2s; display:flex; align-items:center; gap:.4rem;
}
.btn-export:hover { border-color:var(--accent2); color:white; }

.content { flex:1; padding:1.75rem 2rem; overflow-y:auto; }

/* ── TABS ─────────────────────────────── */
.tab { display:none; animation:fadeUp .3s ease; }
.tab.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── KPI CARDS ─────────────────────────── */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.kpi {
    position:relative; overflow:hidden;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.35rem 1.35rem 1.1rem;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kpi:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.25); border-color:rgba(255,255,255,0.15); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.kpi-label { font-size:.72rem; color:var(--text2); text-transform:uppercase; letter-spacing:.07em; display:flex; align-items:center; gap:.4rem; }
.kpi-live-dot { width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 2s infinite; flex-shrink:0; }
.kpi-val { font-size:2.1rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-val.blue { color:#60a5fa; }
.kpi-val.green { color:var(--success); }
.kpi-val.yellow { color:var(--warning); }
.kpi-val.red { color:var(--danger); }
.kpi-bottom { display:flex; align-items:flex-end; justify-content:space-between; margin-top:.6rem; }
.kpi-trend { display:flex; align-items:center; gap:.25rem; font-size:.74rem; font-weight:600; padding:.15rem .5rem; border-radius:20px; }
.kpi-trend.up { color:var(--success); background:rgba(16,185,129,0.12); }
.kpi-trend.down { color:var(--danger); background:rgba(239,68,68,0.12); }
.kpi-trend.flat { color:var(--text2); background:rgba(255,255,255,0.05); }
.kpi-sparkline { width:80px; height:28px; flex-shrink:0; }
.kpi-glow {
    position:absolute; top:-30px; right:-30px; width:90px; height:90px;
    border-radius:50%; opacity:.12; filter:blur(20px); pointer-events:none;
}
.kpi-glow.blue { background:#60a5fa; }
.kpi-glow.green { background:var(--success); }
.kpi-glow.yellow { background:var(--warning); }
.kpi-glow.red { background:var(--danger); }
@keyframes flashUpdate {
    0% { background-color: rgba(16,185,129,0.18); }
    100% { background-color: transparent; }
}
.kpi.flash { animation: flashUpdate 1.2s ease; }

/* ── CHARTS ─────────────────────────────── */
.charts-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.25rem; margin-bottom:1.75rem; }
.chart-box {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.25rem; height:320px;
    display:flex; flex-direction:column;
}
.chart-box h3 { font-size:.85rem; color:var(--text2); margin-bottom:1rem; font-weight:500; }
.chart-box canvas { flex:1; }

/* ── TABLA ─────────────────────────────── */
.toolbar {
    display:flex; gap:.75rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap;
}
.toolbar input, .toolbar select {
    padding:.55rem .9rem; background:var(--card);
    border:1px solid var(--border); border-radius:8px;
    color:var(--text); font-size:.85rem; outline:none; transition:border .2s;
}
.toolbar input { flex:1; min-width:200px; }
.toolbar input:focus, .toolbar select:focus { border-color:var(--accent2); }
.toolbar select option { background:var(--bg2); }

.tbl-wrap {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); overflow-x:auto;
}
table { width:100%; border-collapse:collapse; font-size:.83rem; }
thead tr { background:rgba(0,0,0,0.25); }
th {
    padding:.7rem 1rem; text-align:left;
    font-size:.72rem; color:var(--text2); font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
    border-bottom:1px solid var(--border); white-space:nowrap;
    cursor:pointer; user-select:none;
}
th:hover { color:var(--text); }
td {
    padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,0.04);
    color:var(--text); vertical-align:middle; white-space:nowrap;
    max-width:180px; overflow:hidden; text-overflow:ellipsis;
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,0.02); }

.badge-estado {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.25rem .7rem; border-radius:20px; font-size:.75rem; font-weight:600;
}
.badge-activo { background:rgba(16,185,129,0.15); color:var(--success); border:1px solid rgba(16,185,129,0.25); }
.badge-inactivo { background:rgba(239,68,68,0.12); color:var(--danger); border:1px solid rgba(239,68,68,0.2); }
.badge-lab {
    display:inline-block; padding:.2rem .65rem; border-radius:20px;
    font-size:.73rem; font-weight:600;
    background:rgba(3,3,181,0.15); color:#818cf8; border:1px solid rgba(99,102,241,0.25);
}

.btn-ver {
    padding:.35rem .85rem; border-radius:6px; font-size:.78rem; font-weight:600;
    background:rgba(3,3,181,0.15); color:#818cf8;
    border:1px solid rgba(99,102,241,0.3); cursor:pointer; transition:all .2s;
}
.btn-ver:hover { background:rgba(3,3,181,0.35); color:white; }

/* ── MODAL FICHA ─────────────────────────── */
.modal-bg {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
    z-index:1000; align-items:center; justify-content:center;
}
.modal-bg.open { display:flex; animation:fadeUp .25s; }
.modal-box {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:20px; padding:2rem; width:90%; max-width:700px;
    max-height:90vh; overflow-y:auto; position:relative;
}
.modal-close {
    position:absolute; top:1rem; right:1.25rem;
    font-size:1.4rem; color:var(--text2); cursor:pointer; background:none; border:none;
}
.modal-close:hover { color:var(--text); }
.modal-title { font-size:1.2rem; font-weight:700; color:#818cf8; }
.modal-header-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; padding-right:2rem; }
.btn-mipres {
    padding:.5rem 1rem; border-radius:8px; font-size:.82rem; font-weight:600;
    background:rgba(3,3,181,0.15); color:#818cf8; border:1px solid rgba(99,102,241,0.35);
    cursor:pointer; transition:all .2s; white-space:nowrap;
}
.btn-mipres:hover { background:rgba(3,3,181,0.3); color:white; transform:translateY(-1px); }
.btn-mipres.disabled { background:rgba(255,255,255,0.04); color:var(--text2); border-color:var(--border); cursor:default; }
.btn-mipres.disabled:hover { transform:none; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.modal-field label { font-size:.7rem; color:var(--text2); text-transform:uppercase; letter-spacing:.07em; display:block; margin-bottom:.3rem; }
.modal-field p { font-size:.9rem; color:var(--text); }
.modal-field.full { grid-column:span 2; }
.modal-field input, .modal-field select, .modal-field textarea {
    width:100%; padding:.55rem .8rem;
    background:rgba(255,255,255,0.05); border:1px solid var(--border);
    border-radius:7px; color:var(--text); font-size:.88rem; outline:none; transition:border .2s;
    font-family:'Outfit',sans-serif;
}
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus { border-color:var(--accent2); }
.modal-field input:disabled, .modal-field select:disabled, .modal-field textarea:disabled {
    opacity:.5; cursor:not-allowed;
}
.modal-field textarea { resize:vertical; min-height:80px; max-height:150px; }
.modal-field select option { background:var(--bg2); }
.mipres-img { width:100%; border-radius:10px; border:1px solid var(--border); margin-top:.5rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:.75rem; margin-top:1.5rem; }
.btn-save {
    padding:.6rem 1.4rem; background:var(--accent); color:white;
    border:none; border-radius:8px; font-weight:600; font-size:.9rem;
    cursor:pointer; transition:background .2s;
}
.btn-save:hover { background:var(--accent2); }
.btn-cancel {
    padding:.6rem 1.2rem; background:transparent; color:var(--text2);
    border:1px solid var(--border); border-radius:8px; font-size:.9rem;
    cursor:pointer; transition:all .2s;
}
.btn-cancel:hover { color:var(--text); border-color:var(--text2); }

/* ── MONITOR ─────────────────────────────── */
.monitor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.monitor-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.25rem;
}
.monitor-card h4 { font-size:.72rem; color:var(--text2); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.5rem; }
.monitor-val { font-size:1.6rem; font-weight:700; }
.log-stream {
    background:#050a14; border:1px solid var(--border);
    border-radius:var(--radius); padding:1rem; height:380px;
    overflow-y:auto; font-family:'Courier New',monospace; font-size:.78rem;
}
.log-line { padding:.2rem 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.log-line.ok { color:#34d399; }
.log-line.err { color:#f87171; }
.log-line.info { color:#60a5fa; }
.log-line.warn { color:#fbbf24; }
.log-time { color:var(--text2); margin-right:.5rem; }

/* ── SETTINGS ─────────────────────────────── */
.settings-box {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.75rem; max-width:450px;
}
.settings-box h2 { font-size:1rem; margin-bottom:.4rem; }
.settings-box p { font-size:.83rem; color:var(--text2); margin-bottom:1.5rem; }

/* ── LOADER ─────────────────────────────── */
.loader { display:flex; flex-direction:column; align-items:center; justify-content:center; height:40vh; }
.spinner { width:36px; height:36px; border:3px solid rgba(255,255,255,0.08); border-left-color:var(--accent2); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:1rem; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── PROGRAM TABS ─────────────────────────── */
.lab-tabs { display:flex; gap:.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.lab-tab {
    padding:.45rem 1.1rem; border-radius:8px; font-size:.83rem; font-weight:600;
    background:var(--card); color:var(--text2); border:1px solid var(--border);
    cursor:pointer; transition:all .2s;
}
.lab-tab:hover { color:var(--text); }
.lab-tab.active { background:var(--accent); color:white; border-color:var(--accent); box-shadow:0 4px 14px var(--accent-glow); }

/* ── SCROLLBAR ─────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:99px; }

/* ── TEMA CLARO ───────────────────────────── */
body.light-theme {
    --bg: #f4f5f7;
    --bg2: #ffffff;
    --sidebar: #ffffff;
    --accent: #0303B5;
    --accent2: #1a56db;
    --accent-glow: rgba(3, 3, 181, 0.15);
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --text: #111827;
    --text2: #6b7280;
    --border: rgba(0,0,0,0.1);
    --glass: rgba(255, 255, 255, 0.9);
    --card: #ffffff;
}
body.light-theme {
    background-image:
        radial-gradient(ellipse at 10% 10%, rgba(3,3,181,0.04) 0, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(16,185,129,0.03) 0, transparent 50%);
}
body.light-theme .kpi,
body.light-theme .chart-box,
body.light-theme .tbl-wrap,
body.light-theme .monitor-card,
body.light-theme .settings-box {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body.light-theme .sidebar { border-right: 1px solid var(--border); }
body.light-theme thead tr { background: rgba(0,0,0,0.03); }
body.light-theme .log-stream { background: #0d1117; }

.theme-toggle {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--border);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all .2s;
}
.theme-toggle:hover { border-color: var(--accent2); transform: scale(1.05); }

/* ── CHECKBOX DEPARTAMENTOS ─────────────────── */
#uf_departamentos label:hover { color: var(--text); }
#uf_departamentos input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }