/* ═══════════ Kairós · sistema de diseño (claro) ═══════════ */
:root{
  --fondo:#F6F7FA; --papel:#FFFFFF; --linea:#E7E9F0; --linea2:#F0F2F7;
  --tinta:#0E1425; --tinta2:#5B6478; --tinta3:#98A1B5;
  --azul:#090055; --azul-s:#EDECFA;
  --oro:#F2B138; --oro-s:#FEF4E2; --oro-o:#B67C0E;
  --verde:#12A150; --verde-s:#E7F7EE;
  --naranja:#E4761B; --naranja-s:#FDF0E3;
  --rojo:#DC2626; --rojo-s:#FDECEC;
  --azulito:#1668B8; --azulito-s:#EEF6FE;
  --r:14px; --r-s:10px;
  --sombra:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fondo);color:var(--tinta);
  font:14px/1.55 Inter,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.gb{font-family:Gabarito,system-ui,sans-serif;letter-spacing:-.02em}
h1,h2,h3{font-family:Gabarito,system-ui,sans-serif;letter-spacing:-.02em}

/* ── estructura ── */
.app{display:grid;grid-template-columns:72px 1fr;height:100vh;overflow:hidden}
.app.bandeja{grid-template-columns:72px 316px 1fr 300px}
main{overflow-y:auto}
.pag{padding:30px 34px 60px;max-width:1320px}
.enc{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}
.enc h1{font-size:30px;font-weight:700}
.enc .saludo{font-size:14px;color:var(--tinta2);margin-top:3px}

/* ── riel ── */
.riel{background:var(--papel);border-right:1px solid var(--linea);
  display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:5px}
.riel .logo{width:34px;height:34px;margin-bottom:16px}
.riel .logo svg{width:34px;height:34px;fill:var(--oro)}
.riel a{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  color:var(--tinta3);position:relative}
.riel a:hover{background:var(--fondo);color:var(--tinta2)}
.riel a.on{background:var(--azul);color:#fff}
.riel a .pt{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--oro);border:2px solid var(--papel)}
.riel .sep{width:26px;height:1px;background:var(--linea);margin:9px 0}
.riel .yo{margin-top:auto;width:34px;height:34px;border-radius:50%;background:#D9DEF0;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--azul)}

/* ── piezas ── */
.card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra)}
.card .hd{padding:15px 18px;border-bottom:1px solid var(--linea);display:flex;
  justify-content:space-between;align-items:center}
.card .hd h3{font-size:15px;font-weight:650}
.card .cuerpo{padding:18px}
.g{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g2,.g3,.g4{grid-template-columns:1fr}}

.btn{border:0;border-radius:9px;padding:9px 16px;font:600 13.5px Inter,sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.btn-p{background:var(--azul);color:#fff}
.btn-o{background:var(--oro);color:#3C2A00}
.btn-s{background:var(--papel);color:var(--tinta);border:1px solid var(--linea)}
.btn-s:hover{border-color:var(--tinta3)}
.btn.g{padding:11px 20px;font-size:14.5px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:2px 9px;border-radius:20px;white-space:nowrap}
.p-ia{background:var(--azul-s);color:var(--azul)}
.p-hum{background:#F1F3F8;color:var(--tinta2)}
.p-urg{background:#FCE4C7;color:var(--oro-o)}
.p-ok{background:var(--verde-s);color:var(--verde)}
.p-mal{background:var(--rojo-s);color:var(--rojo)}
.p-camp{background:var(--azulito-s);color:var(--azulito)}

.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;
  padding:5px 9px 5px 12px;border-radius:8px;background:var(--papel);border:1px solid var(--linea)}
.chip i{color:var(--tinta3);cursor:pointer;font-style:normal}

.av{border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;flex:none;
  width:38px;height:38px;font-size:12.5px}
.av.s{width:30px;height:30px;font-size:11px}

.kpi{padding:18px}
.kpi .n{font-family:Gabarito;font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.kpi .l{font-size:13px;color:var(--tinta2);margin-top:1px}
.kpi .d{font-size:12px;font-weight:600;margin-top:9px}

.aviso{display:flex;gap:12px;align-items:flex-start;padding:14px 17px;border-radius:12px;
  background:var(--papel);border:1px solid var(--linea);font-size:13.5px;box-shadow:var(--sombra)}
.aviso.urg{background:var(--oro-s);border-color:#F6D9A0}
.aviso.mal{background:var(--rojo-s);border-color:#F7C9C9}
.aviso .ico{font-size:17px;line-height:1.2}
.aviso b{font-weight:650}
.aviso .cta{margin-left:auto;color:var(--azul);font-weight:600;white-space:nowrap;font-size:13px}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta3);font-weight:700;padding:11px 18px;border-bottom:1px solid var(--linea)}
td{padding:13px 18px;border-bottom:1px solid var(--linea2);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--fondo)}

.barra{height:7px;background:var(--linea);border-radius:5px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:5px}
.fila{display:flex;align-items:center;gap:11px;font-size:13px;padding:6px 0}
.fila .et{width:96px;color:var(--tinta2)}
.fila .bx{flex:1}
.fila .v{width:46px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--tinta2)}
.vacio{padding:34px;text-align:center;color:var(--tinta3);font-size:13.5px}

label{display:block;font-size:12px;color:var(--tinta2);font-weight:600;margin:14px 0 6px}
input[type=text],select,textarea{width:100%;background:var(--papel);border:1px solid var(--linea);
  border-radius:10px;padding:10px 13px;font:inherit;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul)}

/* ── iconos ── */
.ic{width:21px;height:21px;display:block}
.ic.s{width:17px;height:17px}
.ic.g{width:26px;height:26px}
.riel a .ic{width:21px;height:21px}
.aviso .ico{display:grid;place-items:center;color:var(--tinta2);flex:none}
.aviso.urg .ico{color:var(--oro-o)}
.aviso .cta{display:inline-flex;align-items:center;gap:5px}

/* ── responsiva de las pantallas de app ── */
@media(max-width:760px){
  .app,.app.bandeja{grid-template-columns:1fr;height:auto;overflow:visible}
  .riel{flex-direction:row;justify-content:flex-start;gap:2px;padding:10px 12px;
    border-right:0;border-bottom:1px solid var(--linea);overflow-x:auto;
    position:sticky;top:0;z-index:30}
  .riel .logo{margin:0 8px 0 0}
  .riel .sep{width:1px;height:26px;margin:0 6px}
  .riel .yo{margin:0 0 0 auto}
  .pag{padding:20px 16px 48px}
  .enc{flex-direction:column;align-items:stretch;gap:14px}
  .enc h1{font-size:24px}
  .enc>div:last-child{display:flex;flex-wrap:wrap;gap:8px}
  .card table{min-width:640px}
  .card:has(table){overflow-x:auto}
  .kan{padding-left:16px;padding-right:16px}
  /* tarjetas con acción al lado: el botón se va abajo, no se sale */
  .cx{flex-wrap:wrap}
  .cx .t{flex:1 1 100%}
  .cx>.btn{width:100%;justify-content:center}
  .medidor .et{flex-wrap:wrap;gap:2px}
  .dos{grid-template-columns:1fr}
}
/* que ninguna tabla rompa el ancho de la página */
.card{overflow-x:auto}