:root{
  color-scheme: light;
  --bg:#f2f5f2; --surface:#ffffff; --surface-2:#f7faf8;
  --linea:#dde4df; --linea-fuerte:#c6d2ca;
  --texto:#16211b; --suave:#5f7067; --tenue:#8a9a91;
  --verde-900:#0e3c23; --verde-700:#14663a; --verde-600:#1d7a47;
  --verde-100:#e2efe7; --verde-050:#eff6f1;
  --alerta:#a8331c; --alerta-bg:#fdeae6;
  --ambar:#7d5410; --ambar-bg:#fcf2dd;
  --sombra:0 1px 2px rgba(14,60,35,.06), 0 1px 10px rgba(14,60,35,.04);
  --r:10px;
  --f: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Colores de serie y de estado. Validados contra fondo blanco con el script
     de la guía de visualización (separación bajo daltonismo y contraste).
     No son decorativos: --s1/--s2 identifican series, --est-* identifican estado
     y SIEMPRE van acompañados de texto, nunca el color solo. */
  --s1:#2a78d6; --s2:#eb6834;
  --div-pos:#2a78d6; --div-neg:#e34948;
  --grid:#e1e0d9; --eje:#c3c2b7; --mudo:#898781;
  --est-ok:#0ca30c; --est-war:#fab219; --est-ser:#ec835a; --est-crit:#d03b3b;
}
/* Tema claro por decisión de NBM (25-09-2026): el software va en blanco, como la app
   original. La paleta oscura queda escrita pero solo se activa a pedido, poniendo
   data-theme="dark" en el elemento raíz. Ya no sigue el tema del sistema. */
@media (prefers-color-scheme: dark){
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#0e1512; --surface:#151e19; --surface-2:#1a241e;
    --linea:#26332c; --linea-fuerte:#35453b;
    --texto:#e7efe9; --suave:#9db0a5; --tenue:#75887d;
    --verde-900:#0b2e1b; --verde-700:#6fca96; --verde-600:#58bb83;
    --verde-100:#1d2f24; --verde-050:#17231c;
    --alerta:#ff9b83; --alerta-bg:#3a1b14;
    --ambar:#e5b968; --ambar-bg:#332713;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 1px 10px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0e1512; --surface:#151e19; --surface-2:#1a241e;
  --linea:#26332c; --linea-fuerte:#35453b;
  --texto:#e7efe9; --suave:#9db0a5; --tenue:#75887d;
  --verde-900:#0b2e1b; --verde-700:#6fca96; --verde-600:#58bb83;
  --verde-100:#1d2f24; --verde-050:#17231c;
  --alerta:#ff9b83; --alerta-bg:#3a1b14;
  --ambar:#e5b968; --ambar-bg:#332713;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 1px 10px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font-family:var(--f); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums}

/* ---------- cabecera ---------- */
.topbar{
  background:var(--verde-900); color:#eaf5ee;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 20px; padding-top:calc(12px + env(safe-area-inset-top,0px));
}
/* Isotipo de AA. Hereda el color del contenedor (fill="currentColor"), por eso
   se ve blanco en la barra verde y verde sobre fondo claro, con un solo archivo.
   La altura manda; el ancho sale solo de la proporción del trazado. */
.logo-aa{height:26px; width:auto; display:block; flex:0 0 auto}
.topbar .logo-aa{margin-right:-6px}
.logo-entrada{color:var(--verde-700); margin-bottom:18px}
.logo-entrada .logo-aa{height:56px; margin:0 auto}
@media (max-width:560px){
  .logo-aa{height:22px}
  .logo-entrada .logo-aa{height:44px}
}
.marca{font-size:19px; font-weight:700; letter-spacing:.01em; margin-right:4px}
.nav{display:flex; gap:2px; flex-wrap:wrap}
.nav button{
  font:inherit; font-size:13.5px; color:#b9d6c4; background:none; border:0;
  padding:6px 12px; border-radius:7px; cursor:pointer;
}
.nav button:hover{color:#fff; background:rgba(255,255,255,.08)}
.nav button[aria-current="page"]{background:rgba(255,255,255,.16); color:#fff; font-weight:600}
.topbar-fin{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.anios{display:flex; background:rgba(255,255,255,.1); border-radius:8px; padding:3px}
.anios button{
  font:inherit; font-size:13px; color:#b9d6c4; background:none; border:0;
  padding:5px 14px; border-radius:6px; cursor:pointer;
}
.anios button[aria-pressed="true"]{background:#fff; color:var(--verde-900); font-weight:700}
.btn-nueva{
  font:inherit; font-size:13.5px; font-weight:700; color:var(--verde-900);
  background:#fff; border:0; border-radius:8px; padding:9px 16px; cursor:not-allowed; opacity:.92;
}

/* ---------- barra de filtros ---------- */
.filtros{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--linea);
}
.buscar{
  flex:1 1 260px; max-width:420px; min-width:0;
  font:inherit; padding:8px 12px; border:1px solid var(--linea-fuerte);
  border-radius:8px; background:var(--surface-2); color:var(--texto);
}
.buscar:focus-visible{outline:2px solid var(--verde-600); outline-offset:1px}
.cuenta{color:var(--suave); font-size:13px}
.orden-wrap{margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--suave); font-size:13px}
select{
  font:inherit; font-size:13.5px; padding:7px 10px; border-radius:8px;
  border:1px solid var(--linea-fuerte); background:var(--surface); color:var(--texto);
}

/* ---------- lienzo ---------- */
.lienzo{padding:16px 20px 28px; display:flex; flex-direction:column; gap:14px}
.kpis{display:grid; grid-template-columns:1.35fr 1fr; gap:14px}
.card{background:var(--surface); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra)}
.kpi-abierto{display:grid; grid-template-columns:auto 1fr; gap:22px; padding:16px 18px; align-items:center}
.eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--suave)}
.gran-cifra{font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:2px 0 3px}
.sub{font-size:12.5px; color:var(--suave)}
.etapas{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.etapa{padding:2px 0 2px 14px; border-left:3px solid var(--linea-fuerte)}
.etapa[data-p="25"]{border-left-color:#7fa8c4}
.etapa[data-p="50"]{border-left-color:var(--verde-600)}
.etapa[data-p="75"]{border-left-color:#c9b070}
.etapa[data-p="90"]{border-left-color:var(--verde-900)}
:root[data-theme="dark"] .etapa[data-p="90"], :root:not([data-theme="light"]) .etapa[data-p="90"]{border-left-color:var(--verde-700)}
.etapa .nom{font-size:12.5px; color:var(--suave)}
.etapa .n{font-size:20px; font-weight:700; line-height:1.2}
.etapa .m{font-size:12.5px; color:var(--suave)}
.kpi-cerrado{display:grid; grid-template-columns:repeat(3,auto) 1fr; gap:20px; padding:16px 18px; align-items:center}
.cerr .nom{font-size:12.5px; color:var(--suave)}
.cerr .n{font-size:20px; font-weight:700; line-height:1.2}
.cerr.gana .n{color:var(--verde-700)}
.cerr.pierde .n{color:var(--alerta)}
.cerr .m{font-size:12.5px; color:var(--suave)}
.conv{text-align:right}
.conv .pct{font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.05}

/* ---------- cuerpo ---------- */
.cuerpo{display:grid; grid-template-columns:1.55fr 1fr; gap:14px; align-items:start}
.panel{background:var(--surface); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden}
.chips{display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--linea)}
.chip{
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--linea-fuerte); background:var(--surface); color:var(--suave);
  padding:6px 13px; border-radius:999px;
}
.chip:hover{border-color:var(--verde-600); color:var(--verde-700)}
.chip[aria-pressed="true"]{background:var(--verde-900); border-color:var(--verde-900); color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"], :root:not([data-theme="light"]) .chip[aria-pressed="true"]{background:var(--verde-700); border-color:var(--verde-700); color:#0b2e1b}
.chip.sep{margin-left:6px}
.chip.aviso{color:var(--ambar); border-color:var(--ambar); background:var(--ambar-bg)}
.chip.aviso[aria-pressed="true"]{background:var(--ambar); color:#fff; border-color:var(--ambar)}
.chip.grave{color:var(--alerta); border-color:var(--alerta); background:var(--alerta-bg)}
.chip.grave[aria-pressed="true"]{background:var(--alerta); color:#fff; border-color:var(--alerta)}
.tabla-wrap{overflow-x:auto; max-height:min(72vh,680px); overflow-y:auto}
table{width:100%; border-collapse:collapse; min-width:680px}
thead th{
  position:sticky; top:0; z-index:1; background:var(--surface);
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--suave);
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--linea-fuerte); white-space:nowrap;
}
thead th.der{text-align:right}
tbody tr{border-bottom:1px solid var(--linea); cursor:pointer}
tbody tr:hover{background:var(--verde-050)}
tbody tr[aria-selected="true"]{background:var(--verde-100); box-shadow:inset 3px 0 0 var(--verde-600)}
td{padding:9px 10px; vertical-align:middle}
td.cod{font-weight:700; color:var(--verde-700); white-space:nowrap}
.cli{font-weight:600}
.prj{font-size:12.5px; color:var(--suave)}
td.ing,td.tipo{font-size:12.5px; color:var(--suave); white-space:nowrap}
td.dias{text-align:right; white-space:nowrap}
td.dias.viejo{color:var(--alerta); font-weight:700}
td.monto{text-align:right; white-space:nowrap}
.monto .clp{font-weight:700}
.monto .uf{font-size:12px; color:var(--suave)}
.badge{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap}
.b25{background:var(--verde-050); color:var(--suave); border:1px solid var(--linea-fuerte)}
.b50{background:var(--verde-100); color:var(--verde-700); border:1px solid transparent}
.b90{background:var(--verde-900); color:#fff; border:1px solid transparent}
:root[data-theme="dark"] .b90, :root:not([data-theme="light"]) .b90{background:var(--verde-700); color:#0b2e1b}
.pie-tabla{padding:10px 14px; font-size:12.5px; color:var(--suave); border-top:1px solid var(--linea)}
.sin-monto{color:var(--ambar); font-size:11.5px; font-weight:700}

/* ---------- ficha ---------- */
.ficha{padding:16px 18px; display:flex; flex-direction:column; gap:14px}
.ficha-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ficha-cod{font-size:21px; font-weight:700; color:var(--verde-700)}
.ficha h2{font-size:17px; margin:0; line-height:1.3; text-wrap:balance}
.ficha .proj{color:var(--suave); font-size:13.5px; margin-top:1px}
.hr{height:1px; background:var(--linea)}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px}
.campo .k{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--suave)}
.campo .v{font-size:15px; font-weight:600; margin-top:2px}
.campo .v.grande{font-size:20px; font-weight:700; letter-spacing:-.01em}
.campo .v small{display:block; font-size:12.5px; font-weight:400; color:var(--suave)}
.campo .v.pendiente{color:var(--ambar)}
.caja{background:var(--surface-2); border:1px solid var(--linea); border-radius:8px; padding:12px 14px}
.acciones{display:flex; gap:8px; flex-wrap:wrap}
.acciones button{
  font:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:8px;
  border:1px solid var(--linea-fuerte); background:var(--surface); color:var(--tenue); cursor:not-allowed;
}
.acciones button.pri{background:var(--verde-050); border-color:var(--linea-fuerte)}
.nota-lectura{font-size:12px; color:var(--suave)}
.hist{border:1px dashed var(--linea-fuerte); border-radius:8px; padding:14px}
.hist-cab{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px}
.hist-cab .t{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--suave)}
.tag-no{font-size:11px; font-weight:700; background:var(--ambar-bg); color:var(--ambar); padding:2px 8px; border-radius:999px}
.hist p{margin:0; font-size:13px; color:var(--suave); line-height:1.5}
.pie{font-size:12px; color:var(--tenue); padding:0 2px}
.pie strong{color:var(--suave); font-weight:600}

@media (max-width:1080px){
  .kpis{grid-template-columns:1fr}
  .cuerpo{grid-template-columns:1fr}
  .tabla-wrap{max-height:none}
}
@media (max-width:620px){
  .topbar{padding-left:16px; padding-right:16px}
  .filtros{padding-left:16px; padding-right:16px}
  .lienzo{padding-left:16px; padding-right:16px}
  .kpi-abierto{grid-template-columns:1fr; gap:14px}
  .etapas{grid-template-columns:1fr 1fr; gap:12px 0}
  .kpi-cerrado{grid-template-columns:1fr 1fr; gap:14px}
  .conv{text-align:left}
  .campos{grid-template-columns:1fr}
  .gran-cifra{font-size:29px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- estados propios de la versión en vivo ---------- */
.aviso{
  margin:0; padding:10px 20px; font-size:13px;
  background:var(--ambar-bg); color:var(--ambar); border-bottom:1px solid var(--linea);
}
.centro{
  min-height:60vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; text-align:center; padding:40px 20px;
}
.centro h1{font-size:22px; margin:0; text-wrap:balance}
.centro p{margin:0; color:var(--suave); max-width:46ch; line-height:1.55}
.centro code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--surface-2); border:1px solid var(--linea); border-radius:6px; padding:2px 6px;
}
.btn-primario{
  font:inherit; font-size:14px; font-weight:700; color:#fff; background:var(--verde-900);
  border:0; border-radius:9px; padding:11px 22px; cursor:pointer;
}
:root[data-theme="dark"] .btn-primario, :root:not([data-theme="light"]) .btn-primario{
  background:var(--verde-700); color:#0b2e1b;
}
.btn-primario:hover{opacity:.92}
.btn-primario:focus-visible{outline:2px solid var(--verde-600); outline-offset:2px}
.error{
  border:1px solid var(--alerta); background:var(--alerta-bg); color:var(--alerta);
  border-radius:9px; padding:14px 16px; max-width:56ch; text-align:left; font-size:13.5px;
}
.error strong{display:block; margin-bottom:4px}
.quien{font-size:12.5px; color:#b9d6c4}
.cargando{padding:40px 20px; text-align:center; color:var(--suave)}

/* ---------- barras y rankings ---------- */
.barra{display:inline-block; height:8px; border-radius:2px; background:var(--verde-600); vertical-align:middle}
.barra.ambar{background:var(--ambar)}
.barra.alerta{background:var(--alerta)}
.bloques{padding:4px 18px 18px}
.bloque{padding:14px 0; border-top:1px solid var(--linea)}
.bloque:first-child{border-top:0}
.bloque h3{margin:0 0 10px}
.lineas{display:flex; flex-direction:column; gap:2px}
.linea{
  display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(60px,2fr) 46px 84px;
  gap:10px; align-items:center; padding:7px 8px; border-radius:6px;
}
.linea:hover{background:var(--verde-050)}
.lnom{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linea.ambar .lnom{color:var(--ambar)}
.linea.alerta .lnom{color:var(--alerta)}
.lbar{display:block; min-width:0}
.ln,.lm{text-align:right; font-size:13px}
.lm{font-weight:700}
.resumen-cab{padding:16px 18px}

/* ---------- mensual ---------- */
table.mensual td.mes{font-size:13px; color:var(--suave); width:44px; text-transform:none}
table.mensual .graf{width:48%; position:relative; padding-right:18px}
table.mensual .graf .barra{display:block; height:9px; margin:1px 0}
.barra.cot{background:var(--verde-600); opacity:.45}
.barra.adj{background:var(--verde-700)}
:root[data-theme="dark"] .barra.cot, :root:not([data-theme="light"]) .barra.cot{opacity:.35}
table.mensual tbody{position:relative}
table.mensual tbody tr .graf::after{
  content:""; position:absolute; top:0; bottom:0; left:calc(var(--obj)); width:2px;
  background:var(--verde-900); opacity:.55;
}
:root[data-theme="dark"] table.mensual tbody tr .graf::after,
:root:not([data-theme="light"]) table.mensual tbody tr .graf::after{background:var(--verde-700)}
table.mensual tr.vacio td{color:var(--tenue)}
table.mensual tfoot td{border-top:2px solid var(--linea-fuerte); font-weight:700; padding:10px}
.graf-h .leyenda{display:inline-flex; gap:12px; align-items:center; text-transform:none; letter-spacing:0; font-weight:400}
.sw{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px}
.sw.cot{background:var(--verde-600); opacity:.45}
.sw.adj{background:var(--verde-700)}
.sw.obj{background:var(--verde-900); width:3px; border-radius:0}
:root[data-theme="dark"] .sw.obj, :root:not([data-theme="light"]) .sw.obj{background:var(--verde-700)}
.meta-card{display:block; padding:16px 18px}
.pctcol{color:var(--suave)}
td.der,th.der{text-align:right}

/* ---------- clientes ---------- */
.mini{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 7px;
  border-radius:999px; margin-left:5px; white-space:nowrap;
}
.mini.ambar{background:var(--ambar-bg); color:var(--ambar)}
.mini.alerta{background:var(--alerta-bg); color:var(--alerta)}
.lista-cot{display:flex; flex-direction:column; gap:2px; max-height:52vh; overflow-y:auto}
.cot-item{padding:10px 2px; border-bottom:1px solid var(--linea)}
.cot-item:last-child{border-bottom:0}
.ci-cab{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ci-monto{margin-left:auto; font-weight:700; font-size:13.5px}
.ci-prj{font-size:13px; color:var(--suave); margin-top:2px}
.ci-meta{font-size:12px; color:var(--tenue); margin-top:2px}
.pendiente{color:var(--ambar)}

/* ---------- varios del armazón ---------- */
.btn-recargar{
  font:inherit; font-size:15px; line-height:1; color:#b9d6c4; background:rgba(255,255,255,.1);
  border:0; border-radius:8px; padding:8px 11px; cursor:pointer;
}
.btn-recargar:hover{color:#fff; background:rgba(255,255,255,.2)}
.sello{margin-top:4px}

/* ajustes de proporción */
.linea{grid-template-columns:minmax(110px,1fr) minmax(60px,1.5fr) 44px 82px}
.bloques{max-width:1100px}
.etapas.dos{grid-template-columns:repeat(2,1fr); gap:0 18px}
.etapas.dos .etapa .nom{white-space:nowrap}

/* ---------- portada de módulos ---------- */
/* Sin space-between: con el isotipo la barra tiene tres hijos y el reparto
   empujaba la marca al centro, que en el celular se salía de la pantalla.
   .topbar-fin ya se va a la derecha con su propio margin-left:auto. */
.portada-bar{justify-content:flex-start}
.portada{max-width:980px; margin:0 auto; padding:48px 20px 40px}
.portada h1{font-size:28px; margin:0 0 6px; letter-spacing:-.02em; text-wrap:balance}
.portada-sub{margin:0 0 28px; color:var(--suave); max-width:60ch; line-height:1.55}
.modulos{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.modulo{
  font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:5px;
  background:var(--surface); border:1px solid var(--linea); border-left:4px solid var(--verde-600);
  border-radius:var(--r); box-shadow:var(--sombra); padding:18px 20px; color:var(--texto);
}
.modulo:hover{border-color:var(--linea-fuerte); border-left-color:var(--verde-900); background:var(--verde-050)}
:root[data-theme="dark"] .modulo:hover{border-left-color:var(--verde-700)}
.modulo:focus-visible{outline:2px solid var(--verde-600); outline-offset:2px}
.mod-nombre{font-size:18px; font-weight:700; letter-spacing:-.01em}
.mod-desc{font-size:13px; color:var(--suave); line-height:1.45}
.mod-sitio{font-size:11px; color:var(--tenue); margin-top:4px}
.volver-mod{
  font:inherit; font-size:20px; line-height:1; color:#b9d6c4; background:rgba(255,255,255,.1);
  border:0; border-radius:8px; padding:4px 12px 7px; cursor:pointer; margin-right:-6px;
}
.volver-mod:hover{color:#fff; background:rgba(255,255,255,.2)}
.mini.apagado{background:var(--surface-2); color:var(--tenue); border:1px solid var(--linea)}
.mini{background:var(--verde-050); color:var(--suave); border:1px solid var(--linea)}


/* ===================== Pantallas de Proyectos y Flujo de caja =====================
   Agregado el 26-09-2026 con las dos pantallas aprobadas por NBM. */

.kpis.cuatro{grid-template-columns:repeat(4,1fr)}
.card.kpi-simple{padding:14px 18px; display:flex; flex-direction:column; justify-content:center}
.card.kpi-simple .gran-cifra{font-size:27px; margin-top:4px; line-height:1.1}
.card.kpi-simple.hero .gran-cifra{font-size:38px}
.card.kpi-simple .sub{font-size:12.5px; margin-top:3px}
.card.kpi-simple.mal{border-left:3px solid var(--alerta)}
.card.kpi-simple.mal .gran-cifra{color:var(--alerta)}
.card.kpi-simple.bien .gran-cifra{color:var(--verde-700)}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; align-items:start}
.panel.bloque-graf{padding:14px 18px 16px}
.panel.bloque-graf.ancho{margin-top:14px}
.bloque-graf .sub{margin:2px 0 12px; font-size:12.5px}
.graf-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.graf-cab .sub{margin:0}
.pie-nota{margin:12px 0 0; font-size:12.5px; color:var(--suave)}

.leyenda{display:inline-flex; gap:14px; align-items:center; margin-left:auto;
  font-size:12px; color:var(--suave); text-transform:none; letter-spacing:0; font-weight:400}
.leyenda i{font-style:normal; display:inline-flex; align-items:center; gap:6px}
.sw.s1{background:var(--s1)} .sw.s2{background:var(--s2)}
.sw.ok{background:var(--est-ok)} .sw.war{background:var(--est-war)}
.sw.ser{background:var(--est-ser)} .sw.crit{background:var(--est-crit)}
.sw.linea-ref{background:var(--verde-700); width:16px; height:3px; border-radius:2px}

/* Semáforo. El color va siempre con su texto al lado. */
.est{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap}
.est .pt{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.est.crit{color:#8f2323} .est.crit .pt{background:var(--est-crit)}
.est.ser{color:#8a4426}  .est.ser .pt{background:var(--est-ser)}
.est.war{color:var(--ambar)} .est.war .pt{background:var(--est-war)}
.est.ok{color:#0a7a0a}   .est.ok .pt{background:var(--est-ok)}

.ini{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--verde-100); color:var(--verde-900); font-size:10.5px; font-weight:700}

/* Barras horizontales de ranking */
.barrasH .hb{display:grid; grid-template-columns:158px 1fr 72px; align-items:center;
  gap:10px; margin-bottom:7px}
.barrasH .hb:last-child{margin-bottom:0}
.barrasH .lb{font-size:12.5px; color:var(--suave); text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barrasH .tr{height:15px; background:var(--surface-2); border-radius:4px; overflow:hidden}
.barrasH .fi{display:block; height:100%; border-radius:0 4px 4px 0}
.barrasH .vl{font-size:12.5px; font-weight:600; text-align:right}

/* SVG */
svg.graf{display:block; overflow:visible}
svg.graf .gl{stroke:var(--grid); stroke-width:1}
svg.graf .ax{fill:var(--mudo); font-size:11px}
svg.graf .axb{fill:var(--suave); font-size:11.5px; font-weight:600}
svg.graf .ref{stroke:var(--verde-700); stroke-width:2; stroke-dasharray:5 4; opacity:.75}
svg.graf .col rect{transition:opacity .12s}
svg.graf .col:hover rect{opacity:.82}

.tip{position:fixed; z-index:60; pointer-events:none; opacity:0;
  transform:translate(-50%,-115%); background:var(--texto); color:#fff; font-size:12px;
  padding:7px 10px; border-radius:7px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.25); transition:opacity .1s}
.tip .l{display:block; color:#a9bdb1; font-size:11px}

/* Avisos dentro de un panel */
.aviso-caja{display:block; padding:11px 13px; border-radius:8px; font-size:12.8px; margin:0 0 12px}
.aviso-caja b{display:block; margin-bottom:1px}
.aviso-caja.rojo{background:var(--alerta-bg); color:#7d2614}
.aviso-caja.ambar{background:var(--ambar-bg); color:var(--ambar)}
.aviso-caja.en-panel{margin:14px 18px 0}

/* Bitácora */
.bit{position:relative; padding-left:22px; margin-top:4px}
.bit:before{content:""; position:absolute; left:5px; top:6px; bottom:8px; width:2px; background:var(--linea)}
.bit .it{position:relative; padding:0 0 15px}
.bit .it:last-child{padding-bottom:0}
.bit .it:before{content:""; position:absolute; left:-17px; top:5px; width:10px; height:10px;
  border-radius:50%; background:var(--verde-600); box-shadow:0 0 0 2px var(--surface)}
.bit .it.viejo:before{background:var(--linea-fuerte)}
.bit .f{font-size:11.5px; color:var(--tenue)}
.bit .f b{color:var(--verde-700); font-weight:700; margin-left:6px}
.bit .it p{margin:2px 0 0; font-size:12.8px; color:var(--texto)}

.nuevo{margin-top:14px; padding:10px 12px; border:1px dashed var(--linea-fuerte);
  border-radius:8px; color:var(--tenue); font-size:12.5px; display:flex; align-items:center; gap:9px}
.nuevo button{margin-left:auto; background:var(--verde-700); color:#fff; font:inherit;
  font-weight:600; font-size:12px; padding:5px 12px; border:0; border-radius:7px; opacity:.55}

.tabla-wrap.compacta table{font-size:12.5px}
.tabla-wrap.compacta td{padding:7px 8px}
td.fuerte{font-weight:700}
td.mas{color:var(--tenue); font-size:12px}

@media (max-width:1100px){
  .kpis.cuatro{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .barrasH .hb{grid-template-columns:120px 1fr 66px}
}
@media (max-width:640px){ .kpis.cuatro{grid-template-columns:1fr} }

/* ---- Buscador dentro de la barra de chips (26-09-2026) ---- */
.buscar-campo{
  margin-left:auto; min-width:260px; flex:0 1 320px;
  font:inherit; font-size:12.5px; color:var(--texto);
  padding:6px 11px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--linea);
}
.buscar-campo::placeholder{color:var(--tenue)}
.buscar-campo:focus{outline:2px solid var(--verde-600); outline-offset:1px; background:var(--surface)}
.chips .leyenda{margin-left:14px}
.chips .cuenta{margin-left:14px; font-size:12px; color:var(--tenue); white-space:nowrap}

/* barra compacta dentro de una celda de tabla */
.mini-tr{display:block; height:10px; width:100%; background:var(--surface-2);
  border-radius:3px; overflow:hidden}
.mini-tr .fi{display:block; height:100%; border-radius:0 3px 3px 0}

/* .viejo marca "esto lleva demasiado tiempo" o "quedó bajo la línea".
   Estaba definido solo para td.dias, así que en Cobranza y Mensual el rojo
   que anunciaba el texto no se veía. (26-09-2026) */
td.num.viejo, td.viejo{color:var(--alerta); font-weight:700}

/* ---- Confirmación de escritura (fase 2, 26-09-2026) ---- */
.modal-fondo{position:fixed; inset:0; z-index:100; background:rgba(14,60,35,.42);
  display:grid; place-items:center; padding:24px}
.modal{background:var(--surface); border-radius:var(--r); max-width:720px; width:100%;
  padding:22px 24px; box-shadow:0 12px 44px rgba(0,0,0,.28); max-height:86vh; overflow:auto}
.modal h2{margin:0 0 6px; font-size:18px; letter-spacing:-.01em}
.modal p{margin:0 0 14px; font-size:13.5px; color:var(--suave)}
.modal table.cambios{width:100%; border-collapse:collapse; font-size:12.8px;
  min-width:0}   /* la regla global table{min-width:680px} desbordaba el modal */
.modal table.cambios th{text-align:left; font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tenue); font-weight:700;
  padding:7px 9px; border-bottom:1px solid var(--linea)}
.modal table.cambios td{padding:8px 9px; border-bottom:1px solid #eef2ef; vertical-align:top}
.modal td.antes{color:var(--suave); text-decoration:line-through; text-decoration-color:var(--linea-fuerte)}
.modal td.despues{font-weight:700; color:var(--verde-700)}
.modal .nuevo-val{color:var(--tenue); font-style:italic; text-decoration:none; display:inline-block}
.modal td.antes:has(.nuevo-val){text-decoration:none}
.modal-error{margin-top:12px; padding:10px 12px; border-radius:8px;
  background:var(--alerta-bg); color:#7d2614; font-size:12.8px}
.modal-botones{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.modal-botones button{font:inherit; font-size:13px; font-weight:600; padding:8px 16px;
  border-radius:8px; cursor:pointer; border:1px solid var(--linea-fuerte);
  background:var(--surface); color:var(--texto)}
.modal-botones button.pri{background:var(--verde-700); border-color:var(--verde-700); color:#fff}
.modal-botones button:disabled{opacity:.6; cursor:default}

/* formulario de alta dentro de una ficha */
.form-alta{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:12px}
.form-alta .ancho{grid-column:1 / -1}
.form-alta label{display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tenue); font-weight:700; margin-bottom:3px}
.form-alta input, .form-alta select, .form-alta textarea{
  width:100%; font:inherit; font-size:13px; color:var(--texto); padding:7px 10px;
  border-radius:8px; border:1px solid var(--linea-fuerte); background:var(--surface)}
.form-alta textarea{min-height:74px; resize:vertical}
.form-alta input:focus, .form-alta select:focus, .form-alta textarea:focus{
  outline:2px solid var(--verde-600); outline-offset:1px}
.form-alta .aviso-campo{font-size:11.5px; color:var(--alerta); margin-top:3px}
.form-alta .pista{font-size:11.5px; color:var(--tenue); margin-top:3px}

/* ---- Bitácora móvil (Proyectos › Mi bitácora) -------------------------- */
/* Una sola columna a propósito: esta pantalla se usa en el celular, de pie,
   y lo único que tiene que hacer es dejar anotar la novedad sin buscar nada. */
.cuerpo.uno{grid-template-columns:1fr}

.tarjetas{display:grid; gap:10px; margin-top:12px}
.tarjeta-bit{border:1px solid var(--linea); border-radius:12px; padding:12px 14px;
  background:var(--surface-2); display:grid; gap:6px}
.tarjeta-bit.abierta{border-color:var(--verde-700); box-shadow:0 0 0 2px var(--verde-050)}
.tb-cab{display:flex; align-items:center; gap:10px}
.tb-cab .cod{font-weight:700}
.tb-prj{font-weight:600; line-height:1.3}
.tb-meta{font-size:12.5px; color:var(--suave)}
.tb-ult{font-size:13px; color:var(--suave); line-height:1.45; border-left:2px solid var(--linea);
  padding-left:10px; margin-top:2px}
.tb-ult .num{white-space:nowrap}

/* El semáforo de días sin novedad. Los mismos cuatro tramos que la cartera,
   para que un color signifique lo mismo en las dos pantallas. */
.pill{margin-left:auto; font-size:11.5px; font-weight:700; padding:3px 10px;
  border-radius:999px; white-space:nowrap; color:#fff}
.pill.ok{background:var(--est-ok)} .pill.war{background:var(--est-war); color:#3a2a00}
.pill.ser{background:var(--est-ser)} .pill.crit{background:var(--est-crit)}

/* Botón de acción a lo ancho: en el celular es un blanco grande y sin ambigüedad. */
.anotar{width:100%; margin-top:6px; padding:11px 14px; font-size:15px}

.form-alta.compacto{margin-top:8px; gap:10px}
.form-alta.compacto textarea{min-height:76px}

/* Bloque plegable de campos opcionales del alta de proyecto. */
.mas-campos{border-top:1px solid var(--linea); padding-top:10px; margin-top:2px}
.mas-campos>summary{cursor:pointer; font-weight:600; font-size:13.5px; color:var(--suave);
  list-style:none; padding:4px 0}
.mas-campos>summary::-webkit-details-marker{display:none}
.mas-campos>summary::before{content:"▸ "; }
.mas-campos[open]>summary::before{content:"▾ "; }
.mas-campos .form-alta{margin-top:8px}

/* Casilla de verificación alineada con las etiquetas del resto del formulario. */
label.check{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px;
  cursor:pointer; padding-top:22px}
label.check input{width:auto; margin:0}

/* Ítem de lista sobre el que se puede hacer clic (cotizaciones pendientes). */
.cot-item.clic{cursor:pointer; border-radius:9px; transition:background .12s}
.cot-item.clic:hover{background:var(--verde-050)}
.cot-item.clic.sel{background:var(--verde-100); box-shadow:inset 3px 0 0 var(--verde-700)}

@media (max-width:620px){
  .tarjeta-bit{padding:12px}
  .tb-prj{font-size:15px}
}

/* La lista de adjudicadas sin proyecto puede ser larga (hoy son 5 de 2026, pero
   el histórico sin migrar llega a varias decenas). Se acota y se hace scroll en
   vez de estirar el panel: el formulario tiene que quedar siempre a la vista. */
.lista-alta{max-height:540px; overflow:auto}
/* En pantalla ancha las tarjetas no se estiran: una línea de 1200px es incómoda
   de leer y esta pantalla está pensada con forma de teléfono. */
.cuerpo.uno{max-width:780px; margin:0 auto}

/* ---- Etapa del proyecto ------------------------------------------------ */
/* Las etapas están escritas como "H. Redacción informe (sin anexo)": la letra
   ordena el avance de A a K y el texto lo nombra. Se separan para que la letra
   funcione como ficha compacta y el nombre pueda recortarse sin perder el orden.
   Es distinta del Estado, así que no reusa los tokens de estado. */
.etapa-let{display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; flex:none; border-radius:5px; font-style:normal;
  font-size:11px; font-weight:800; background:var(--verde-100); color:var(--verde-700);
  border:1px solid var(--linea-fuerte)}
.proj-etapa{font-size:12.5px; color:var(--suave); margin-top:3px}
.proj-etapa .apagado{color:var(--tenue)}
.tb-etapa{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--suave)}

/* En pantallas donde la tabla no alcanza, la etapa se reduce a la letra: el orden
   A→K se conserva y el nombre completo sigue en el title y en la ficha. Vale más
   dejar visible la columna de días sin novedad, que es el punto de la pantalla. */
/* La columna de etapa se queda con lo justo para la ficha de la letra: el ancho
   que libera se lo lleva la columna de días sin novedad, que es la que importa. */
th.et, td.et{width:1%; white-space:nowrap; padding-left:8px; padding-right:8px}
@media (max-width:1400px){ th.et{font-size:0} th.et::after{content:"Et."; font-size:11px} }
/* Con la columna de etapa la tabla de cartera pasó a 8 columnas y en pantallas
   medianas dejaba la de «sin novedad» fuera de vista. Se recorta el relleno en
   vez de sacar una columna: el dato que la pantalla existe para mostrar tiene
   que estar visible sin desplazar. */
@media (max-width:1500px){
  .tabla-wrap td, .tabla-wrap th{padding-left:7px; padding-right:7px}
}

/* La tabla de confirmación en el celular: cuatro columnas no caben en 390 px y
   quedaban cortadas justo en «valor nuevo», que es lo único que hay que leer
   antes de aprobar. Se apila en un bloque por cambio: arriba dónde y qué campo,
   abajo el antes y el después con su etiqueta. */
@media (max-width:560px){
  .modal .cambios, .modal .cambios tbody, .modal .cambios tr, .modal .cambios td{
    display:block; width:auto; min-width:0}
  .modal .cambios thead{display:none}
  .modal .cambios tr{border:1px solid var(--linea); border-radius:9px;
    padding:9px 11px; margin-bottom:8px}
  .modal table.cambios td{border:0; padding:0; overflow-wrap:anywhere}
  /* Sin tachado en el celular: el tachado se hereda hacia la etiqueta y no se
     puede quitar desde el hijo. La etiqueta «valor actual» ya dice lo mismo. */
  .modal table.cambios td.antes{text-decoration:none}

  /* Dónde: rótulo pequeño arriba. Campo: el título del bloque. */
  .modal .cambios td:nth-child(1){font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; color:var(--tenue); font-weight:700}
  .modal .cambios td:nth-child(2){font-weight:700; font-size:14.5px; margin-bottom:5px}
  .modal .cambios td:nth-child(1)::before, .modal .cambios td:nth-child(2)::before{
    content:none}

  /* Antes y después, cada uno con su etiqueta a la izquierda. */
  .modal .cambios td:nth-child(3), .modal .cambios td:nth-child(4){
    display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline;
    font-size:13.5px; padding:1px 0}
  .modal .cambios td:nth-child(3)::before, .modal .cambios td:nth-child(4)::before{
    content:attr(data-l); color:var(--tenue); font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
    min-width:82px}
}

/* Abono parcial: la línea bajo el total en la tabla de cobranza. Se pinta en
   ámbar y no en rojo porque tener un abono es mejor que no tener nada; lo que
   preocupa es el saldo, no el hecho de que esté parcial. */
.monto .abono{font-size:11.5px; color:var(--ambar); font-weight:600; margin-top:2px;
  white-space:nowrap}

/* ---- Salud de datos ---------------------------------------------------- */
/* Cada chequeo es una tarjeta con su conteo a la izquierda. El color del borde
   izquierdo es el semáforo: verde si no hay nada, ámbar si hay algo que mirar,
   rojo si conviene mirarlo hoy. El número va grande porque es lo que se lee
   primero al pasar la vista por la columna. */
.bloque-salud{margin-top:16px}
.bloque-salud>.eyebrow{margin:0 0 8px}
.chequeos{display:grid; gap:10px}

.chequeo{border:1px solid var(--linea); border-left-width:4px; border-radius:10px;
  background:var(--surface); padding:11px 14px}
.chequeo.ok{border-left-color:var(--est-ok); opacity:.72}
.chequeo.war{border-left-color:var(--est-war)}
.chequeo.crit{border-left-color:var(--est-crit)}

.ch-cab{display:flex; align-items:baseline; gap:11px}
.ch-cab[data-ch]{cursor:pointer}
.ch-n{font-size:22px; font-weight:700; min-width:34px; line-height:1.1}
.chequeo.ok .ch-n{color:var(--tenue)}
.chequeo.crit .ch-n{color:var(--est-crit)}
.ch-tit{font-weight:600; font-size:14.5px; line-height:1.35}
.ch-monto{margin-left:auto; font-weight:700; white-space:nowrap}
.ch-mas{font-size:12px; color:var(--verde-700); font-weight:600; white-space:nowrap;
  margin-left:10px}
.ch-monto + .ch-mas{margin-left:10px}
.ch-cab:not(:has(.ch-monto)) .ch-mas{margin-left:auto}
.ch-nota{font-size:12.5px; color:var(--suave); line-height:1.5; margin-top:5px;
  padding-left:45px}
.ch-lista{margin:10px 0 2px; padding-left:45px; list-style:decimal inside;
  max-height:340px; overflow:auto}
.ch-lista li{font-size:12.5px; line-height:1.65; color:var(--texto);
  font-variant-numeric:tabular-nums}
.ch-lista li:nth-child(odd){background:var(--surface-2)}

@media (max-width:620px){
  .ch-nota, .ch-lista{padding-left:0}
  .ch-cab{flex-wrap:wrap}
  .ch-monto{margin-left:0}
}