/* ============================================================
   Aplicativo de seguimiento de obras · estilos
   Clonados del mockup congelado (mockup_v2) para fidelidad total.
   ============================================================ */
:root{
  /* Identidad Cabildo */
  --teal:#84C1C6; --teal-borde:#5FA9AF; --teal-claro:#EDF6F7; --teal-medio:#CFE6E8;
  --petrol:#0F3D40; --petrol2:#16545A; --petrol3:#1E6B72;
  /* Semánticos */
  --ok:#4C9A3D; --ok-osc:#2F6424; --ok-claro:#EAF4E6;
  --warn:#E0A62B; --warn-osc:#8A6516; --warn-claro:#FBF3DF;
  --crit:#C0392B; --crit-osc:#7C241A; --crit-claro:#F9E8E6;
  --panel:#F5F8F8;
  --tinta:#101010; --g60:#585857; --g40:#868686; --g20:#C5C5C5; --g15:#D9D9D9; --g08:#EEEEEE;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Roboto',sans-serif;font-size:14px;color:var(--tinta);background:var(--panel)}
a{color:var(--petrol2);text-decoration:none}
h1,h2,h3{color:var(--petrol);font-weight:700}
h1{font-size:19px}
h3{font-size:14.5px;margin-bottom:10px}
.mini{font-size:11px;color:var(--g60)}
.mono{font-family:'Roboto Mono',monospace}
.num{text-align:right;font-family:'Roboto Mono',monospace;font-size:12.5px}

/* ---- Estructura: lateral + contenido (como el mockup) ---- */
.app{display:grid;grid-template-columns:228px 1fr;min-height:100vh}
aside{background:var(--petrol);color:#fff;padding:20px 0;position:sticky;top:0;height:100vh}
.aside-brand{padding:0 20px 14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px}
.aside-brand .b{font-weight:900;font-size:16.5px;line-height:1.2;color:#fff}
.aside-brand .b .dot{color:var(--teal)}
.aside-brand .s{font-family:'Roboto Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--teal-medio);margin-top:5px}
nav a{display:flex;align-items:center;gap:9px;padding:10px 20px;color:var(--teal-medio);font-size:13.5px;font-weight:500;cursor:pointer}
nav a:hover{background:rgba(255,255,255,.06);color:#fff}
nav a.on{background:rgba(255,255,255,.12);color:#fff;border-left:3px solid var(--teal);padding-left:17px}
.msep{height:1px;background:rgba(255,255,255,.14);margin:9px 14px}
main{padding:0 28px 40px}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--g15);
  margin-bottom:22px;background:var(--panel);position:sticky;top:0;z-index:5}
.topbar h1{flex:1}
.usuario{text-align:right;font-size:12.5px;line-height:1.3}
.usuario b{display:block;color:var(--petrol)}
.usuario span{color:var(--g60);font-size:11px}

/* ---- Tarjetas y pares clave-valor ---- */
.card{background:#fff;border:1px solid var(--g15);border-radius:10px;padding:16px 18px}
.kv{display:grid;grid-template-columns:46% 54%;row-gap:7px;font-size:13px}
.kv .k{color:var(--g60)}
.kv .v{color:var(--tinta);font-weight:500}
.dethead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.note{background:var(--teal-claro);border-left:3px solid var(--teal-borde);border-radius:7px;padding:9px 12px;
  font-size:12px;color:var(--petrol)}

/* ---- Tablas ---- */
table.list{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.list th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g60);
  padding:8px 10px;border-bottom:2px solid var(--teal-medio);background:var(--teal-claro)}
.list td{padding:9px 10px;border-bottom:1px solid var(--g08);vertical-align:middle}
.list tr:hover td{background:var(--teal-claro)}
.list th.num,.list td.num{text-align:right;font-family:'Roboto Mono',monospace;font-size:12.5px}
.total td{font-weight:700;border-top:2px solid var(--teal-medio);background:var(--teal-claro)!important}

/* ---- Chips (idénticos al mockup) ---- */
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2.5px 9px;border-radius:10px;white-space:nowrap}
.c-ok{background:var(--ok-claro);color:var(--ok-osc);border:1px solid var(--ok)}
.c-warn{background:var(--warn-claro);color:var(--warn-osc);border:1px solid var(--warn)}
.c-info{background:var(--teal-claro);color:var(--petrol);border:1px solid var(--teal-borde)}
.c-mut{background:var(--g08);color:var(--g60);border:1px solid var(--g20)}
.c-nav{background:var(--petrol);color:#fff;border:1px solid var(--petrol)}
.c-crit{background:var(--crit-claro);color:var(--crit-osc);border:1px solid var(--crit)}
.c-dorm{background:#EEF0F6;color:#5A6284;border:1px solid #C6CCE0}

/* ---- Filtros y botones ---- */
.searchrow{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.searchrow input,.searchrow select{padding:8px 11px;border:1px solid var(--g20);border-radius:7px;font-size:13px;background:#fff}
.searchrow input[type=search]{min-width:230px}
.btn{display:inline-block;border:none;border-radius:7px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer}
.btn-primary{background:var(--petrol2);color:#fff}
.btn-ghost{background:#fff;color:var(--petrol2);border:1px solid var(--petrol2)}
.btn-sm{padding:5px 11px;font-size:12px}

/* ---- Rejilla de la ficha ---- */
.fichagrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.fichagrid{grid-template-columns:1fr}.app{grid-template-columns:1fr}aside{position:static;height:auto}}

/* ---- Login (paleta del mockup) ---- */
.pantalla-login{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(160deg,var(--petrol),var(--petrol2))}
.tarjeta-login{background:#fff;padding:32px 30px;border-radius:12px;width:340px;
  box-shadow:0 18px 50px rgba(15,61,64,.35);display:flex;flex-direction:column;gap:14px}
.marca-login{font-weight:900;font-size:19px;color:var(--petrol);line-height:1.2}
.marca-login span{display:block;font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--g60);font-weight:400;margin-top:4px}
.tarjeta-login label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--petrol)}
.tarjeta-login input{padding:10px 12px;border:1px solid var(--g20);border-radius:7px;font-size:14px}
.tarjeta-login input:focus{outline:2px solid var(--teal)}
.btn-principal{margin-top:6px;padding:11px;border:0;border-radius:7px;background:var(--petrol2);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.btn-principal:hover{background:var(--petrol)}
.aviso-error{background:var(--crit-claro);color:var(--crit-osc);border:1px solid var(--crit);border-radius:7px;padding:9px 12px;font-size:13px}

/* ---- Fase 2.1 · fidelidad total con el mockup ---- */
.clicable{cursor:pointer}
.spacer{flex:1}
.sello{font-family:'Roboto Mono',monospace;font-size:10.5px;color:var(--g40)}
.userchip{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--g60)}
.av{width:30px;height:30px;border-radius:50%;background:var(--teal-claro);color:var(--petrol);
  font-weight:700;display:flex;align-items:center;justify-content:center;font-size:12px;border:1px solid var(--teal-medio)}
.mbadge{background:var(--crit);color:#fff;border-radius:9px;font-size:9.5px;font-weight:700;padding:1px 7px;margin-left:auto}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
.bar{height:9px;background:var(--g08);border-radius:5px;overflow:hidden;margin:5px 0 2px}
.bar i{display:block;height:100%;background:var(--petrol3);border-radius:5px}
.bar i.v{background:var(--ok)} .bar i.a{background:var(--warn)} .bar i.g{background:var(--crit)}
.kpi .lab{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--petrol3)}
.kpi .val{font-size:27px;font-weight:900;color:var(--petrol);margin-top:4px}
.kpi .val small{font-size:13px;font-weight:500;color:var(--g60)}
.kpi .sub{font-size:11.5px;color:var(--g60);margin-top:3px}
.kpi.warn .lab{color:var(--crit)}
.vchart{display:flex;align-items:flex-end;gap:9px;height:104px;margin-top:8px}
.vcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.vbar{width:100%;border-radius:4px 4px 0 0;position:relative;overflow:hidden;background:var(--petrol3)}
.vbar.past{background:var(--petrol3)}
.vbar.fut{background:var(--g15)}
.vbar i{position:absolute;left:0;right:0;bottom:0;background:var(--petrol3);display:block}
.vyr{font-size:10px;color:var(--g60)}
.vval{font-family:'Roboto Mono',monospace;font-size:9.5px;color:var(--g60)}
.leg{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:3px}
.brow{display:flex;justify-content:space-between;font-size:12px;color:var(--g60);margin-top:8px}
.tl{position:relative;margin:6px 0 0 8px;padding-left:22px;border-left:2px solid var(--g15)}
.ev{position:relative;padding:0 0 15px}
.ev::before{content:"";position:absolute;left:-30px;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--ok);border:2px solid #fff;box-shadow:0 0 0 2px var(--ok)}
.ev.prev::before{background:#fff;box-shadow:0 0 0 2px var(--g20)}
.f{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--g60)}
.note.warn{background:var(--crit-claro);border-left-color:var(--crit);color:var(--crit-osc)}
.note.amber{background:var(--warn-claro);border-left-color:var(--warn);color:var(--warn-osc)}