/* Paleta y tipografia iguales a las del informe de efectividad, para que la
   aplicacion y el informe se lean como una sola cosa. */
:root{
  color-scheme: light dark;
  --surface:#fcfcfb; --plano:#f9f9f7; --tinta:#0b0b0b; --tinta-2:#52514e;
  --tinta-3:#898781; --grilla:#e1e0d9; --borde:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --bien:#0ca30c; --alerta:#fab219; --critico:#d03b3b;
}
@media (prefers-color-scheme:dark){
  :root{--surface:#1a1a19; --plano:#0d0d0d; --tinta:#fff; --tinta-2:#c3c2b7;
    --tinta-3:#898781; --grilla:#2c2c2a; --borde:rgba(255,255,255,.10);
    --s1:#3987e5; --s2:#d95926;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--plano);color:var(--tinta);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--s1)}
h1{font-size:24px;margin:0 0 4px} h2{font-size:17px;margin:28px 0 12px;font-weight:650}
.sub{color:var(--tinta-2);font-size:14px;margin:0 0 22px}

header{background:var(--surface);border-bottom:1px solid var(--borde);
  position:sticky;top:0;z-index:10}
nav{max-width:1200px;margin:0 auto;padding:0 18px;display:flex;align-items:center;
  gap:4px;flex-wrap:wrap;min-height:56px}
nav .marca{font-weight:680;margin-right:18px;white-space:nowrap}
nav .marca small{display:block;font-weight:400;font-size:11.5px;color:var(--tinta-3)}
nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--tinta-2);
  font-size:14.5px;white-space:nowrap}
nav a:hover{background:var(--plano);color:var(--tinta)}
nav a.activo{background:var(--s1);color:#fff}
nav .fin{margin-left:auto}

main{max-width:1200px;margin:0 auto;padding:26px 18px 70px}
.tarjeta{background:var(--surface);border:1px solid var(--borde);border-radius:12px;
  padding:18px 20px;margin-bottom:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.tile .k{font-size:11.5px;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
.tile .v{font-size:28px;font-weight:640;margin:6px 0 2px;line-height:1.1}
.tile .n{font-size:12.5px;color:var(--tinta-3)}

.aviso{border-radius:10px;padding:13px 16px;margin-bottom:12px;font-size:14.5px;
  background:var(--surface);border:1px solid var(--borde);border-left:4px solid var(--alerta)}
.aviso.ok{border-left-color:var(--bien)} .aviso.error{border-left-color:var(--critico)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--grilla);vertical-align:middle}
th{color:var(--tinta-2);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-wrap{overflow-x:auto}
tr:hover td{background:color-mix(in srgb,var(--s1) 4%,transparent)}

button,.boton{font:inherit;font-size:14px;padding:9px 16px;border-radius:9px;
  border:1px solid var(--borde);background:var(--surface);color:var(--tinta);
  cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.boton:hover{border-color:var(--s1)}
.boton.principal,button.principal{background:var(--s1);color:#fff;border-color:var(--s1)}
.boton.chico{padding:5px 10px;font-size:13px}
.boton.wa{background:#25d366;border-color:#25d366;color:#0b0b0b;font-weight:600}

input,select,textarea{font:inherit;font-size:14px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--borde);background:var(--plano);color:var(--tinta);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--s1);outline-offset:-1px}
label{display:block;font-size:12.5px;color:var(--tinta-2);margin-bottom:4px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.campo{margin-bottom:12px}
.ayuda{font-size:12.5px;color:var(--tinta-3);margin-top:4px}

.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;
  font-weight:600;border:1px solid var(--borde)}
.chip.A{background:color-mix(in srgb,var(--bien) 18%,transparent)}
.chip.B{background:color-mix(in srgb,var(--alerta) 22%,transparent)}
.chip.C{background:color-mix(in srgb,var(--critico) 15%,transparent)}
.chip.vencido{background:color-mix(in srgb,var(--critico) 15%,transparent)}
.chip.mes{background:color-mix(in srgb,var(--alerta) 22%,transparent)}
/* Avance de una campana: ya salio todo / va por la mitad. */
.chip.hecho{background:color-mix(in srgb,var(--bien) 18%,transparent)}
.chip.curso{background:color-mix(in srgb,var(--alerta) 22%,transparent)}

.barras{display:flex;align-items:flex-end;gap:5px;height:130px;margin:6px 0 4px}
.barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
.barra i{display:block;width:100%;background:var(--s1);border-radius:4px 4px 0 0;min-height:2px}
.barra b{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.barra span{font-size:10.5px;color:var(--tinta-3);writing-mode:vertical-rl;transform:rotate(180deg)}
.barra.baja i{background:var(--s2)}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.filtros .campo{margin:0;min-width:150px}
.mensaje{font-size:12.5px;color:var(--tinta-2);max-width:420px;line-height:1.4}
.mini{font-size:12px;color:var(--tinta-3)}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.barra-guardar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--borde);
  padding:12px 0;margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Los botones no se parten en cuatro renglones: leerlos es la mitad de entenderlos. */
.barra-guardar button{white-space:nowrap}
/* La vista previa del mensaje ocupa un renglon y nada mas. Con el texto completo
   adentro de la celda cada fila medía unos 300 px y entraba una sola por
   pantalla; envuelto en varios renglones seguia comiendose la lista. Se abre
   desde el triangulo cuando hace falta leerlo. */
.mensaje summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:300px;cursor:pointer}
.mensaje details[open] summary{white-space:normal}
/* Las columnas cortas no tienen por que partir el nombre en tres renglones. */
td .chip, .tabla-wrap td{vertical-align:top}
.centro{max-width:420px;margin:12vh auto}
.oculto{display:none}
@media (max-width:760px){ .mensaje{display:none} nav .marca small{display:none} }