/* SICOP — sistema de diseño tomado de sicop_mockup.html v0.4 (branding Grupo HYCSA) */
:root{
  color-scheme:light;
  --surface-1:#FFFFFF; --page:#F5F4F0;
  --ink-1:#292929; --ink-2:#54565A; --ink-3:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(41,41,41,.10);
  --s1:#54565A; --s2:#FACD01; --s3:#292929;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --good-text:#006300;
  --side:#292929; --side-ink:#f2f2f0; --side-mut:#9a9a96; --side-act:#3a3a3c;
  --brand:#FACD01;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --surface-1:#1a1a19; --page:#0d0d0d;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
    --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
    --s1:#A7A9AD; --s3:#FFFFFF;
    --good-text:#0ca30c;
    --side:#1c1c1c;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --surface-1:#1a1a19; --page:#0d0d0d;
  --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
  --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
  --s1:#A7A9AD; --s3:#FFFFFF;
  --good-text:#0ca30c;
  --side:#1c1c1c;
}

*{box-sizing:border-box} html,body{margin:0;min-height:100%}
body{
  font:14px/1.45 Calibri,"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--page); color:var(--ink-1);
  display:flex; min-height:100vh;
}
aside{
  width:228px; flex:0 0 228px; background:var(--side); color:var(--side-ink);
  display:flex; flex-direction:column; padding:18px 12px; gap:2px;
  position:sticky; top:0; height:100vh;
}
.logo{display:flex;gap:10px;align-items:center; font-weight:700; font-size:17px; padding:4px 10px 2px}
.logo small{display:block; font-weight:400; font-size:11px; color:var(--side-mut); margin-top:1px}
.logo .marca{color:var(--brand);letter-spacing:1.1px;font-weight:600}
.logo .cuadro{background:#fff;border-radius:9px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px}
nav{margin-top:16px; display:flex; flex-direction:column; gap:2px}
nav a{
  text-decoration:none; padding:9px 10px; border-radius:8px; color:var(--side-mut);
  font-size:13.5px; display:flex; align-items:center; gap:9px;
}
nav a:hover{background:rgba(255,255,255,.06); color:var(--side-ink)}
nav a.act{background:var(--side-act); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--brand)}
.side-foot{margin-top:auto; padding:10px; font-size:11.5px; color:var(--side-mut); border-top:1px solid rgba(255,255,255,.08)}
.side-foot a{color:var(--side-ink)}

main{flex:1; min-width:0; padding:20px 26px 40px; max-width:1180px}
.topbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.topbar h1{font-size:19px; margin:0}
.chip{font-size:11.5px; padding:3px 10px; border-radius:99px; border:1px solid var(--ring); background:var(--surface-1); color:var(--ink-2)}
.chip.mock{border-color:var(--warn); color:var(--ink-1)}
.spacer{flex:1}
.btn{
  font:inherit; font-size:12.5px; padding:6px 12px; border-radius:8px; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--ring); color:var(--ink-1); text-decoration:none; display:inline-block;
}
.btn.primary{background:var(--brand); border-color:transparent; color:#292929; font-weight:700}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.card{grid-column:span 12; background:var(--surface-1); border:1px solid var(--ring); border-radius:12px; padding:16px 18px}
.card h2{font-size:13px; margin:0 0 2px; font-weight:600}
.card .sub{font-size:11.5px; color:var(--ink-3); margin:0 0 10px}
@media(min-width:880px){
  .c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}
}
.tile .label{font-size:12px; color:var(--ink-2)}
.tile .value{font-size:30px; font-weight:600; margin:2px 0 0}
.tile .value small{font-size:14px; font-weight:400; color:var(--ink-3)}
.tile .delta{font-size:12px; margin-top:3px; color:var(--ink-2)}
.neg{color:var(--crit); font-weight:600}
.pos{color:var(--good-text); font-weight:600}
.note{font-size:11.5px; color:var(--ink-3); margin-top:10px}
svg text{font-family:Calibri,"Helvetica Neue",Helvetica,Arial,sans-serif}

/* pendiente de sprint */
.pend{border-style:dashed; text-align:center; padding:44px 20px; color:var(--ink-3)}
.pend b{color:var(--ink-1); font-size:15px}
.pend .badge{display:inline-block; background:var(--brand); color:#292929; font-weight:700; font-size:11px; border-radius:99px; padding:2px 10px; margin-top:10px}

/* login */
.login-body{display:flex; align-items:center; justify-content:center; background:var(--side)}
.login-card{background:var(--surface-1); border-radius:14px; padding:34px 36px; width:360px; box-shadow:0 10px 40px rgba(0,0,0,.35)}
.login-card h1{font-size:20px; margin:14px 0 2px}
.login-card p.sub{font-size:12px; color:var(--ink-3); margin:0 0 20px}
.login-card label{display:block; font-size:11.5px; font-weight:600; color:var(--ink-2); margin:12px 0 4px; text-transform:uppercase; letter-spacing:.6px}
.login-card input{width:100%; font:14px Calibri,"Helvetica Neue",Arial,sans-serif; padding:10px 11px; border:1px solid var(--axis); border-radius:8px; background:var(--surface-1); color:var(--ink-1)}
.login-card button{width:100%; margin-top:18px; padding:11px; font-weight:700; font-size:14px; background:var(--brand); color:#292929; border:none; border-radius:8px; cursor:pointer}
.login-error{background:rgba(208,59,59,.1); color:var(--crit); font-size:12.5px; border-radius:8px; padding:9px 12px; margin-top:14px; font-weight:600}
.barra-marca{height:5px; width:44px; background:var(--brand); border-radius:3px}

/* ---------- tablas y formularios (Sprint 1) ---------- */
table{width:100%; border-collapse:collapse; font-size:12.5px}
th{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3); text-align:left; padding:6px 8px; border-bottom:1px solid var(--axis); font-weight:600}
td{padding:7px 8px; border-bottom:1px solid var(--grid); font-variant-numeric:tabular-nums; color:var(--ink-2)}
td b{color:var(--ink-1)}
td.num,th.num{text-align:right}
tr:last-child td{border-bottom:none}
form.cap{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:8px; align-items:end}
form.cap label{font-size:11.5px; color:var(--ink-2); display:flex; flex-direction:column; gap:4px; font-weight:600}
form.cap input, form.cap select{font:13px Calibri,"Helvetica Neue",Arial,sans-serif; padding:8px 9px; border-radius:8px; border:1px solid var(--axis); background:var(--surface-1); color:var(--ink-1); width:100%}
form.cap .full{grid-column:1/-1}
input.mini{width:64px; font:13px Calibri,Arial,sans-serif; padding:5px 7px; border:1px solid var(--axis); border-radius:6px; background:var(--surface-1); color:var(--ink-1); text-align:right}
.btn.chico{font-size:11px; padding:3px 9px}
.btn.peligro{color:var(--crit); border-color:var(--crit)}
.flash{border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:14px}
.flash.ok{background:rgba(12,163,12,.12); color:var(--good-text)}
.flash.err{background:rgba(208,59,59,.12); color:var(--crit)}
.pill{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:10px}
.pill.on{background:rgba(12,163,12,.12); color:var(--good-text)}
.pill.off{background:rgba(208,59,59,.12); color:var(--crit)}
.metaval{font-weight:700; color:var(--ink-1)}
.acciones{display:flex; gap:6px; justify-content:flex-end}
.acciones form{display:inline}

.card{overflow-x:auto}

/* ---------- semáforo de equipos y bitácora de paros (Sprint 3) ---------- */
.status-row{display:flex; gap:10px; padding:8px 0; border-top:1px solid var(--grid); font-size:12.5px; align-items:flex-start}
.status-row:first-of-type{border-top:none}
.status-row b{font-weight:600}
.tag{font-size:10.5px; font-weight:700; letter-spacing:.4px; padding:2px 7px; border-radius:5px; color:#fff; display:inline-flex; gap:4px; align-items:center; white-space:nowrap}
.desc{color:var(--ink-2); font-size:11.5px}
.pill.warnp{background:rgba(250,178,25,.18); color:#8a6100}

/* medidores de avance financiero (Sprint 4) */
.meter{margin:10px 0 12px}
.m-head{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); margin-bottom:4px}
.m-track{height:8px; background:var(--grid); border-radius:99px; overflow:hidden}
.m-fill{height:100%; background:var(--s2); border-radius:99px; min-width:2px}
:root[data-theme="dark"] .pill.warnp{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill.warnp{color:var(--warn)} }