:root{
  --navy:#1F3C85;
  --navy-800:#162C63;
  --navy-100:#E4EAF7;
  --papel:#FBFAF7;
  --blanco:#fff;
  --tinta:#1A1C22;
  --tinta-70:#54586A;
  --tinta-40:#8A8FA3;
  --linea:#E2E1DC;
  --verde-ok:#177245;
  --verde-bg:#E7F4EC;
  --ambar:#9A6700;
  --ambar-bg:#FFF6E0;
  --naranja:#B4530A;
  --naranja-bg:#FDEEE0;
  --rojo:#B3261E;
  --rojo-bg:#FBE9E7;
  --sombra:0 1px 2px rgba(26,28,34,.06), 0 4px 14px rgba(26,28,34,.06);
  --radio:10px;
}
*{box-sizing:border-box}
/* Una clase con display: propio le gana al [hidden] del navegador; esto lo evita. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--papel); color:var(--tinta);
  font-family:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.45;
}
button,input,select,textarea{font:inherit;color:inherit}

/* Barra superior */
.barra{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 18px; background:var(--blanco);
  border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:20;
}
.marca{display:flex;align-items:center;gap:10px;flex-shrink:0}
.marca img{height:30px;width:auto}
.marca-txt{display:flex;flex-direction:column;line-height:1.2}
.marca-txt strong{color:var(--navy);font-size:14px}
.marca-txt span{color:var(--tinta-40);font-size:11px}
.tabs{display:flex;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto}
.hoy{margin-left:auto}
.tab{
  background:none;border:none;padding:8px 14px;border-radius:8px;
  color:var(--tinta-70);cursor:pointer;font-weight:500;white-space:nowrap;
}
.tab:hover{background:var(--navy-100);color:var(--navy)}
.tab.activo{background:var(--navy);color:#fff}
.hoy{color:var(--tinta-40);font-size:12px;white-space:nowrap}
.sesion{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sesion .quien{display:flex;flex-direction:column;line-height:1.25;text-align:right;margin-right:2px}
.sesion .quien strong{font-size:12.5px;color:var(--tinta)}
.sesion .quien span{font-size:11px;color:var(--tinta-40)}

main{max-width:1240px;margin:0 auto;padding:22px}

/* Bloques */
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:18px;margin-bottom:18px;
}
.tarjeta h2{margin:0 0 4px;font-size:15px;color:var(--navy)}
.tarjeta .sub{color:var(--tinta-40);font-size:12px;margin:0 0 14px}
.rejilla{display:grid;gap:14px}
.r4{grid-template-columns:repeat(4,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.r4{grid-template-columns:repeat(2,1fr)}.r3,.r2{grid-template-columns:1fr}}

/* Indicadores */
.kpi{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:15px 16px;box-shadow:var(--sombra)}
.kpi .etq{color:var(--tinta-40);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.kpi .val{font-size:24px;font-weight:650;color:var(--navy);margin-top:5px;letter-spacing:-.02em}
.kpi .pie{color:var(--tinta-70);font-size:11.5px;margin-top:3px}
.kpi.alerta .val{color:var(--rojo)}
.kpi.bien .val{color:var(--verde-ok)}

/* Tablas: nunca deben empujar el ancho de la pagina */
.tarjeta table,.modal table{display:block;overflow-x:auto;white-space:normal}
table{width:100%;border-collapse:collapse;min-width:640px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--navy);background:var(--navy-100);padding:9px 10px;font-weight:600;
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
td{padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:top}
tbody tr:hover{background:#F7F9FD}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini{font-size:11.5px;color:var(--tinta-70)}
.vacio{padding:26px;text-align:center;color:var(--tinta-40)}

/* Etiquetas de estado */
.chip{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.chip.gris{background:#EEEEF2;color:var(--tinta-70)}
.chip.navy{background:var(--navy-100);color:var(--navy)}
.chip.verde{background:var(--verde-bg);color:var(--verde-ok)}
.chip.ambar{background:var(--ambar-bg);color:var(--ambar)}
.chip.naranja{background:var(--naranja-bg);color:var(--naranja)}
.chip.rojo{background:var(--rojo-bg);color:var(--rojo)}

/* Botones */
.btn{
  background:var(--navy);color:#fff;border:none;padding:8px 15px;
  border-radius:8px;cursor:pointer;font-weight:550;
}
.btn:hover{background:var(--navy-800)}
.btn.sec{background:var(--blanco);color:var(--navy);border:1px solid var(--navy)}
.btn.sec:hover{background:var(--navy-100)}
.btn.tenue{background:none;color:var(--tinta-70);border:1px solid var(--linea)}
.btn.tenue:hover{background:#F2F2F0;color:var(--tinta)}
.btn.peligro{background:none;color:var(--rojo);border:1px solid var(--rojo)}
.btn.peligro:hover{background:var(--rojo-bg)}
.btn.chico{padding:4px 10px;font-size:12px;border-radius:6px}
.acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}

/* Formularios */
label{display:block;font-size:12px;color:var(--tinta-70);margin-bottom:4px;font-weight:500}
input,select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--linea);
  border-radius:8px;background:var(--blanco);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy-100);border-color:var(--navy)}
textarea{resize:vertical;min-height:62px}
.campo{margin-bottom:12px}

/* Modal */
.modal-fondo{
  position:fixed;inset:0;background:rgba(26,28,34,.42);
  display:flex;align-items:flex-start;justify-content:center;padding:34px 18px;z-index:50;overflow:auto;
}
.modal{
  background:var(--papel);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.24);
  width:100%;max-width:940px;padding:22px;
}
.modal h3{margin:0 0 16px;color:var(--navy);font-size:16px}

/* Aviso flotante */
.aviso{
  position:fixed;right:20px;bottom:20px;background:var(--navy);color:#fff;
  padding:11px 16px;border-radius:9px;box-shadow:var(--sombra);z-index:80;max-width:380px;
}
.aviso.error{background:var(--rojo)}

/* Barras del embudo */
.barra-embudo{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.barra-embudo .nom{width:118px;font-size:12px;color:var(--tinta-70)}
.barra-embudo .pista{flex:1;background:#F0F0EE;border-radius:5px;height:20px;overflow:hidden}
.barra-embudo .relleno{height:100%;background:var(--navy);border-radius:5px;min-width:2px}
.barra-embudo .cifra{width:132px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}

.leyenda-legal{
  background:var(--ambar-bg);border:1px solid #F0DFB4;color:#6B4A00;
  border-radius:9px;padding:11px 14px;font-size:12px;margin-bottom:18px;
}
.fila-items th{background:#F4F5F8}
.fila-items input{padding:6px 8px;font-size:12.5px}