:root{
  --bg:#f4f6f9; --card:#fff; --tx:#1c2530; --sub:#63707e; --line:#dde4ec;
  --blue:#1f5fa8; --blue-lt:#e8f0fa; --green:#1a7f4b; --green-lt:#e6f5ed;
  --red:#b3261e; --red-lt:#fdecea; --amber:#8a5b00; --amber-lt:#fff4dc;
  --gray-lt:#eef1f5; --violet:#5b3fa8;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--tx);
  font:14px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--blue);text-decoration:none}
h1{font-size:17px;margin:0 0 10px}
h2{font-size:15px;margin:18px 0 8px}
h3{font-size:14px;margin:0 0 6px}
.mono,td.num,th.num{font-variant-numeric:tabular-nums}
.muted{color:var(--sub)}
.small{font-size:12px}
.tiny{font-size:11px}

/* ── barra superior ── */
.topbar{background:#12324f;color:#fff;padding:8px 10px;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;position:sticky;top:0;z-index:20;box-shadow:0 1px 4px #0002}
.topbar .brand{font-weight:700;font-size:15px;white-space:nowrap}
.topbar select{background:#1d4569;color:#fff;border:0;border-radius:6px;padding:5px 6px;
  font-size:13px;max-width:170px}
.topbar nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.topbar nav a{color:#cfe0f0;padding:5px 8px;border-radius:6px;font-size:13px;white-space:nowrap}
.topbar nav a.act,.topbar nav a:hover{background:#1d4569;color:#fff}
.topbar nav a.logout{color:#f5b7b1}

.container{max-width:1180px;margin:0 auto;padding:12px 10px 40px}

/* ── tarjetas ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;
  margin-bottom:12px}
.card.pad0{padding:0;overflow:hidden}
.card h2:first-child,.card h3:first-child{margin-top:0}
.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
@media(max-width:820px){.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g2,.g3,.g4,.g6{grid-template-columns:1fr}}

.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kpi .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--sub)}
.kpi .val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .sub{font-size:11px;color:var(--sub);margin-top:3px}
.kpi.ok .val{color:var(--green)} .kpi.bad .val{color:var(--red)} .kpi.warn .val{color:var(--amber)}
.kpi.click{cursor:pointer}
.kpi.click:hover{border-color:var(--blue);box-shadow:0 1px 6px #1f5fa822}

/* ── tablas ── */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--gray-lt);font-size:11px;text-transform:uppercase;color:var(--sub);
  letter-spacing:.02em;position:sticky;top:0;z-index:1}
td.num,th.num{text-align:right}
tbody tr:hover{background:#fafcfe}
tr.total td{background:var(--blue-lt);font-weight:700;border-top:2px solid var(--blue)}
tr.vencida td:first-child{box-shadow:inset 3px 0 0 var(--red)}
tr.parcial td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
td.wrap{white-space:normal;min-width:170px}
.desc{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── chips / badges ── */
.chip{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;
  background:var(--gray-lt);color:var(--sub)}
.chip.blue{background:var(--blue-lt);color:var(--blue)}
.chip.green{background:var(--green-lt);color:var(--green)}
.chip.red{background:var(--red-lt);color:var(--red)}
.chip.amber{background:var(--amber-lt);color:var(--amber)}
.chip.violet{background:#eee9fb;color:var(--violet)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.chips a{text-decoration:none}
.chips a:hover .chip{outline:1px solid var(--blue)}
.badge-n{display:inline-block;min-width:18px;text-align:center;background:var(--red);color:#fff;
  border-radius:9px;font-size:11px;padding:0 5px;margin-left:4px}

/* ── barra de progreso de antigüedad ── */
.aging-bar{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.aging-bar div{display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;
  font-weight:700;overflow:hidden;white-space:nowrap}
.aging-leyenda{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:11px;color:var(--sub)}
.aging-leyenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}

/* ── formularios ── */
form.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
label{font-size:11px;color:var(--sub);display:block;margin-bottom:2px;
  text-transform:uppercase;letter-spacing:.02em}
input[type=text],input[type=date],input[type=password],input[type=number],select,textarea{
  padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff;
  color:var(--tx);max-width:100%}
textarea{width:100%;min-height:52px}
button,.btn{padding:7px 12px;border:1px solid var(--blue);background:var(--blue);color:#fff;
  border-radius:7px;font-size:13px;cursor:pointer;white-space:nowrap;display:inline-block}
button.sec,.btn.sec{background:#fff;color:var(--blue)}
button.gray,.btn.gray{background:var(--gray-lt);color:var(--sub);border-color:var(--line)}
button.mini{padding:3px 8px;font-size:12px}
button:hover{filter:brightness(1.07)}
details.filtros{border:1px solid var(--line);border-radius:10px;background:var(--card);
  padding:8px 12px;margin-bottom:10px}
details.filtros summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--blue);
  list-style:none}
details.filtros summary::-webkit-details-marker{display:none}
details.filtros[open] summary{margin-bottom:10px}

/* ── avisos ── */
.flash{padding:8px 12px;border-radius:8px;margin-bottom:10px;font-size:13px;
  border:1px solid var(--line);background:#fff}
.flash.ok{background:var(--green-lt);border-color:#bfe3cf;color:#14563a}
.flash.error{background:var(--red-lt);border-color:#f3c8c4;color:#8f1c16}
.aviso{border-left:3px solid var(--amber);background:var(--amber-lt);padding:8px 10px;
  border-radius:0 8px 8px 0;font-size:12px;margin:8px 0;color:#5f4100}
.aviso.info{border-color:var(--blue);background:var(--blue-lt);color:#1a4a80}
.aviso.ok{border-color:var(--green);background:var(--green-lt);color:#14563a}

/* ── paginación ── */
.pagin{display:flex;gap:6px;align-items:center;justify-content:center;margin:12px 0;flex-wrap:wrap}
.pagin a,.pagin span{padding:5px 10px;border:1px solid var(--line);border-radius:7px;
  background:#fff;font-size:12px}
.pagin span.act{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ── progreso indexación ── */
#prog-wrap{display:none;margin:-4px 0 10px}
#prog-barra{height:8px;background:var(--gray-lt);border-radius:5px;overflow:hidden}
#prog-bar{height:100%;width:0;background:linear-gradient(90deg,#1f5fa8,#38a169);
  transition:width .3s}
#prog-txt{font-size:11px;color:var(--sub);margin-top:3px}

/* ── login ── */
.login{max-width:340px;margin:12vh auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px;box-shadow:0 4px 22px #0001}
.login h1{text-align:center;font-size:18px}
.login p{text-align:center;color:var(--sub);font-size:12px;margin-top:0}
.login input{width:100%;margin-bottom:10px}
.login button{width:100%}

/* ── detalle ── */
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font-size:12px}
dl.kv dt{color:var(--sub);text-transform:uppercase;font-size:10px;letter-spacing:.03em;
  padding-top:2px}
dl.kv dd{margin:0;font-variant-numeric:tabular-nums}
.hallazgo{border:1px solid var(--line);border-left:4px solid var(--sub);border-radius:8px;
  padding:8px 10px;margin-bottom:8px;background:#fff;font-size:12px}
.hallazgo.alta{border-left-color:var(--red);background:#fffafa}
.hallazgo.media{border-left-color:var(--amber);background:#fffdf7}
.hallazgo.baja{border-left-color:var(--blue)}
.hallazgo.just{border-left-color:var(--green);background:#f7fcf9}
.hallazgo b{font-size:13px}