/* ===================== HITEC Dashboard · estilos ===================== */
:root{
  --navy:#0B1F3A; --navy2:#13294B; --steel:#1E3A5F; --steel2:#2C5282;
  --bg:#EEF2F7; --card:#FFFFFF; --line:#E2E8F0; --line2:#CBD5E1;
  --text:#16202E; --muted:#64748B; --muted2:#94A3B8;
  --red:#E2001A; --red-soft:#FDE7E9; --amber:#E8A300; --green:#1F9D55;
  --shadow:0 1px 2px rgba(16,32,55,.06),0 4px 16px rgba(16,32,55,.06);
  --radius:12px;
  --c1:#13294B; --c2:#2C5282; --c3:#E2001A; --c4:#E8A300; --c5:#0E7C7B; --c6:#7C5CBF; --c7:#64748B; --c8:#3B7DD8;
  --ff:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--ff);color:var(--text);background:var(--bg);font-size:14px;line-height:1.45}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer}
code{background:#0b1f3a0d;padding:1px 6px;border-radius:5px;font-size:.86em}
.muted{color:var(--muted)} .small{font-size:.82rem}
.row-gap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Botones */
.btn{border:1px solid var(--line2);background:#fff;color:var(--text);padding:8px 14px;border-radius:9px;font-weight:600;font-size:.86rem;transition:.15s}
.btn:hover{border-color:var(--steel2);box-shadow:var(--shadow)}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:#c2001a}
.btn-ghost{background:transparent;border-color:var(--line2)}
.btn-sm{padding:6px 11px;font-size:.8rem}
.btn-block{width:100%}
.link-btn{background:none;border:none;color:var(--steel2);font-weight:600;font-size:.8rem;text-decoration:underline}

/* ===================== LOGIN ===================== */
.login-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 70% -10%,#1c3a63 0%,var(--navy) 55%,#081627 100%);padding:24px}
.login-card{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:38px 40px;width:100%;max-width:440px;text-align:center}
.login-brand{display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  background:linear-gradient(135deg,var(--navy2) 0%,var(--navy) 100%);border-radius:14px;padding:22px 20px}
.login-logo{height:58px;width:auto;max-width:100%}
.login-title{font-size:1.22rem;color:var(--navy);line-height:1.25}
.login-dept{color:var(--red);font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 0}
.login-sub{color:var(--muted);font-size:.85rem;margin:6px 0 22px}
.login-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.login-form label{font-size:.78rem;font-weight:600;color:var(--steel);display:flex;flex-direction:column;gap:6px}
.login-form input{padding:11px 13px;border:1px solid var(--line2);border-radius:10px;font-size:.95rem}
.login-form input:focus{outline:none;border-color:var(--steel2);box-shadow:0 0 0 3px #2c528222}
.login-error{background:var(--red-soft);color:#a30015;border-radius:9px;padding:9px 12px;font-size:.82rem;font-weight:600}
.login-foot{margin-top:22px}
.conf-badge{display:inline-block;background:var(--navy);color:#fff;font-size:.7rem;letter-spacing:.12em;padding:5px 12px;border-radius:20px;text-transform:uppercase}
.login-hint{color:var(--muted2);font-size:.76rem;margin-top:12px}
.login-bg-note{color:#ffffff66;font-size:.72rem;margin-top:26px;letter-spacing:.08em}

/* ===================== APP SHELL ===================== */
.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#dbe5f1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:18px 18px 14px;border-bottom:1px solid #ffffff14}
.sidebar-brand img{height:38px;width:auto;max-width:100%}
.sidebar-brand .cap{font-size:.7rem;color:#9fb3cc;letter-spacing:.06em;text-transform:uppercase}
.nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:3px;overflow:auto}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#c4d3e6;padding:9px 12px;border-radius:9px;font-size:.86rem;font-weight:600}
.nav-item .ni{width:18px;text-align:center;opacity:.8}
.nav-item:hover{background:#ffffff12;color:#fff}
.nav-item.active{background:var(--red);color:#fff}
.nav-item.active .ni{opacity:1}
.sidebar-foot{padding:12px;border-top:1px solid #ffffff14}
.user-chip{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--steel2);color:#fff;display:grid;place-items:center;font-weight:700}
.user-chip strong{display:block;color:#fff;font-size:.84rem}
.user-chip span{font-size:.72rem;color:#9fb3cc}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid var(--line)}
.topbar-title h2{font-size:1.18rem;color:var(--navy)}
.topbar-sub{font-size:.76rem;color:var(--muted)}
.topbar-actions{display:flex;gap:8px}

/* Filtros */
.filterbar{padding:14px 24px;background:#fff;border-bottom:1px solid var(--line)}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.filter-grid label{font-size:.7rem;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;display:flex;flex-direction:column;gap:4px}
.filter-grid select{padding:7px 8px;border:1px solid var(--line2);border-radius:8px;font-size:.82rem;background:#fff;max-width:100%}
.filter-actions{display:flex;gap:8px;margin-top:11px;align-items:center}
.search-input{flex:1;min-width:200px;padding:8px 12px;border:1px solid var(--line2);border-radius:9px;font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;font-size:.74rem;padding:4px 7px 4px 11px;border-radius:16px}
.chip b{font-weight:600;opacity:.7;text-transform:uppercase;font-size:.64rem;letter-spacing:.05em}
.chip button{background:#ffffff2e;border:none;color:#fff;width:16px;height:16px;border-radius:50%;line-height:1;font-size:.8rem}
.chip button:hover{background:var(--red)}

.serie-note{padding:8px 24px;background:#fbfdff;border-bottom:1px solid var(--line);font-size:.78rem;color:var(--steel)}
.serie-note strong{color:var(--red)}

/* Vistas */
.views{padding:22px 24px 60px;flex:1}
.view{display:flex;flex-direction:column;gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:1100px){.grid-2{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head h3{font-size:.98rem;color:var(--navy)}
.chart-wrap{position:relative;height:260px}
.chart-wrap.tall{height:380px}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--steel2);border-radius:11px;padding:13px 15px;box-shadow:var(--shadow);min-height:92px;display:flex;flex-direction:column;justify-content:space-between}
.kpi.kpi-accent{border-left-color:var(--red)}
.kpi.kpi-warn{border-left-color:var(--amber)}
.kpi-label{font-size:.72rem;color:var(--muted);font-weight:600;line-height:1.25}
.kpi-value{font-size:1.7rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;word-break:break-word;line-height:1.05}
.kpi-value.sm{font-size:1.05rem;line-height:1.2}
.kpi-sub{font-size:.7rem;color:var(--muted2)}

/* Lectura ejecutiva */
.exec-read .exec-text{font-size:.93rem;line-height:1.6;color:#27313f;max-height:200px;overflow:auto}
.exec-text b{color:var(--navy)}

/* Tablas mini / full */
.table-mini{overflow:auto;max-height:420px}
.table-mini table,.table-full table{width:100%;border-collapse:collapse;font-size:.8rem}
.table-mini th,.table-full th{position:sticky;top:0;background:var(--navy);color:#fff;text-align:left;padding:8px 10px;font-size:.72rem;font-weight:600;white-space:nowrap;cursor:pointer;z-index:1}
.table-mini td,.table-full td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.table-mini tr:hover td,.table-full tr:hover td{background:#f5f8fc}
.table-full{overflow:auto;max-height:62vh}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:1px 7px;border-radius:11px;font-size:.68rem;font-weight:700}
.tag-red{background:var(--red-soft);color:#a30015}
.tag-amber{background:#fdf1d6;color:#8a6400}
.tag-green{background:#dcf2e6;color:#15703c}
.tag-gray{background:#eef2f7;color:#5b6b7e}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.pager button{border:1px solid var(--line2);background:#fff;border-radius:7px;padding:5px 10px;font-size:.8rem}
.pager button.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Matrices / heatmap */
.matrix-wrap{overflow:auto}
.matrix-wrap table{border-collapse:collapse;font-size:.78rem}
.matrix-wrap th,.matrix-wrap td{border:1px solid var(--line);padding:6px 9px;text-align:center;white-space:nowrap}
.matrix-wrap th{background:var(--navy);color:#fff;position:sticky;top:0}
.matrix-wrap td.rowh{background:#f3f6fb;font-weight:700;text-align:left;position:sticky;left:0}
.matrix-wrap td.cell{font-weight:700;color:#16202e}

/* Mapa */
.map-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.map-toolbar select{padding:7px 10px;border:1px solid var(--line2);border-radius:8px}
.map-layout{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media(max-width:1100px){.map-layout{grid-template-columns:1fr}}
.map-container{height:560px;border-radius:var(--radius);border:1px solid var(--steel);box-shadow:var(--shadow);background:#0B1F3A;overflow:hidden}
.leaflet-container{background:#0B1F3A}
.map-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;max-height:560px;overflow:auto}
.map-panel-empty{color:var(--muted);font-size:.86rem;text-align:center;padding:30px 10px}
.map-panel h4{margin:0 0 4px;color:var(--navy)}
.mp-metric{font-size:2rem;font-weight:800;color:var(--red);line-height:1}
.mp-sec{margin-top:14px}
.mp-sec h5{margin:0 0 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mp-sec ul{margin:0;padding-left:16px}
.mp-sec li{font-size:.82rem;margin:2px 0}
.legend{line-height:1.5;font-size:.74rem;color:#16202e;background:rgba(255,255,255,.94);padding:8px 11px;border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.legend b{color:var(--navy)}
.legend i{width:14px;height:14px;display:inline-block;margin-right:6px;opacity:.95;border:1px solid #0002;vertical-align:-2px}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form-grid label{font-size:.72rem;font-weight:700;color:var(--steel);display:flex;flex-direction:column;gap:4px}
.form-grid input,.form-grid select{padding:8px 10px;border:1px solid var(--line2);border-radius:8px;font-size:.84rem}
.form-actions{margin-top:14px;display:flex;gap:10px}
.form-msg{margin-top:10px;font-size:.82rem}
.form-msg .ok{color:var(--green);font-weight:700}
.form-msg .err{color:var(--red);font-weight:700}
.form-msg ul{margin:6px 0 0;padding-left:18px}
.warn-box{margin-top:12px;background:#fff8e6;border:1px solid #f0d488;border-radius:9px;padding:11px 13px;font-size:.8rem;color:#6b5200}
.csv-preview{margin-top:12px;overflow:auto;max-height:300px}
.csv-preview table{font-size:.74rem;border-collapse:collapse;width:100%}
.csv-preview th,.csv-preview td{border:1px solid var(--line);padding:4px 7px;white-space:nowrap}
.csv-preview tr.bad td{background:var(--red-soft)}
.csv-summary{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;font-size:.84rem}
.csv-summary b{font-size:1.1rem}

/* Calidad */
.quality-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.semaforo{display:flex;align-items:center;gap:12px;min-width:210px}
.semaforo .light{width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 4px #0001}
.semaforo-green .light{background:var(--green)} .semaforo-amber .light{background:var(--amber)} .semaforo-red .light{background:var(--red)}
.semaforo .s-text strong{display:block;font-size:1.05rem;color:var(--navy)}
.semaforo .s-text span{font-size:.78rem;color:var(--muted)}
.quality-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;flex:1}
.qk{background:#f7fafd;border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.qk b{font-size:1.3rem;color:var(--navy);display:block}
.qk span{font-size:.72rem;color:var(--muted)}
.quality-list{display:flex;flex-direction:column;gap:8px}
.q-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:9px}
.q-item .q-count{font-weight:800}
.reco-list{margin:0;padding-left:20px;line-height:1.7}

/* Info / docs / admin */
.info-list{display:flex;flex-direction:column;gap:7px}
.info-list .row{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:5px 0;font-size:.85rem}
.info-list .row b{color:var(--navy)}
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.code-box{background:var(--navy);color:#cfe0f5;padding:12px;border-radius:9px;overflow:auto;font-size:.78rem;margin-top:10px}
.docs{font-size:.86rem;line-height:1.6}
.docs h4{color:var(--navy);margin:14px 0 4px}
.docs ol,.docs ul{margin:4px 0;padding-left:20px}
.docs code{font-size:.82em}

/* Toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px;box-shadow:0 10px 30px #0004;font-size:.86rem;z-index:9999}

.admin-only{display:none}
body.is-admin .admin-only{display:flex}