/* firmador-visionplayas -- panel de auditoria
   Sistema: admin dashboard genérico (Minimalism & Swiss Style, vía skill
   ui-ux-pro-max). Sidebar oscura + contenido claro, tipografía Inter/JetBrains
   Mono, paleta slate + verde de estado. Deliberadamente familiar, no a medida. */

/* Fuentes vendorizadas localmente (solo subconjunto 'latin', cubre español)
   -- antes usaban @import a fonts.googleapis.com, que dispara decenas de
   requests externos (uno por rango de idioma x peso) y podia colgar la
   carga de pagina en redes con salida lenta/restringida a Google. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/panel/static/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/panel/static/fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/panel/static/fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/panel/static/fonts/inter-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/panel/static/fonts/jetbrainsmono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/panel/static/fonts/jetbrainsmono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/panel/static/fonts/jetbrainsmono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --text: #0F172A;
  --text-muted: #64748B;
  --border: #E2E8F0;

  /* Sidebar en el navy real de marca (no un slate generico) -- mismo tono
     que el panel izquierdo del login, para que ambas pantallas se sientan
     de la misma app. */
  --sidebar-bg: #113b6d;
  --sidebar-fg: rgba(255, 255, 255, 0.65);
  --sidebar-fg-activo: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --marca-verde: #40be8f;

  --accent: #16A34A;
  --accent-bg: #DCFCE7;
  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --gris-bg: #F1F5F9;

  --fuente-ui: "Inter", -apple-system, sans-serif;
  --fuente-dato: "JetBrains Mono", monospace;

  --radio: 10px;
  --sombra-suave: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fuente-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.icon { width: 16px; height: 16px; flex-shrink: 0; }

/* -- layout: sidebar + contenido -- */

.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.app-main {
  /* Los items de grid tienen min-width:auto por defecto -- sin esto,
     el contenido de esta columna (en particular el canvas de Chart.js
     en el dashboard, que tiene ancho intrinseco propio via su atributo
     width) puede definir un minimo mayor al ancho real disponible, la
     columna 1fr crece para acomodarlo, el ResizeObserver de Chart.js ve
     un contenedor mas grande y agranda el canvas de nuevo -- un bucle
     que estira TODO el dashboard, no solo la tarjeta del grafico. Mismo
     bug de fondo que min-width:0 en .tarjeta-grafico, un nivel mas
     arriba en el arbol. */
  min-width: 0;
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Sin esto, el sidebar (item de grid junto a .app-main) estira su altura
     hasta igualar la fila completa del grid -- que es tan alta como el
     contenido MAS LARGO de .app-main. En paginas cortas no se nota, pero
     en el Dashboard (varias graficas, pagina larga) el footer con
     margin-top:auto terminaba pegado al final de esa altura enorme, muy
     por debajo del viewport, obligando a hacer scroll para verlo. Fijarlo
     al viewport hace que el footer siempre quede abajo de lo visible,
     sin importar cuanto mida el contenido de al lado. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  margin-bottom: 14px;
  border-radius: 12px;
  text-decoration: none;
}

.sidebar .marca-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 5px 9px;
}
.sidebar .marca-logo img { height: 30px; width: auto; display: block; }

.sidebar .marca-texto {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.sidebar .menu-etiqueta {
  padding: 0 10px;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--sidebar-fg);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar nav a .icon { color: inherit; }

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-fg-activo);
}

.sidebar nav a.activo {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-fg-activo);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--marca-verde);
}
.sidebar nav a.activo .icon { color: var(--marca-verde); }


.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sidebar-border);
}
.sidebar-footer form { display: contents; }

.sidebar-footer .avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(64, 190, 143, 0.2);
  color: var(--marca-verde);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-footer-texto { flex: 1; min-width: 0; line-height: 1.25; }
.sidebar-footer-texto .nombre {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer-texto .rol {
  margin: 0;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boton-salir {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
}
.boton-salir:hover { color: #fff; }
.boton-salir .icon { width: 16px; height: 16px; }

/* -- barra superior + contenido -- */

.topbar {
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 26px;
}

.topbar h1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.indicador-vivo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.indicador-vivo .punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.indicador-vivo.caido { color: var(--text-muted); }
.indicador-vivo.caido .punto { background: var(--text-muted); box-shadow: 0 0 0 3px var(--gris-bg); }

.contenido { padding: 20px 24px; }

/* -- barra de filtros horizontal -- */

.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.campo-filtro { display: flex; flex-direction: column; gap: 4px; }
.campo-filtro label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.campo {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--card);
  font-family: var(--fuente-ui);
  font-size: 13px;
  color: var(--text);
  min-width: 160px;
}
.campo:focus { border-color: var(--accent); }

/* -- tabla -- */

.tabla-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
}

table.tabla-registro {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla-registro thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--gris-bg);
}

.tabla-registro tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease;
}
.tabla-registro tbody tr:last-child { border-bottom: none; }
.tabla-registro tbody tr:hover { background: var(--gris-bg); }
.tabla-registro tbody tr:focus-visible { outline-offset: -2px; }

.tabla-registro td {
  padding: 11px 16px;
  vertical-align: middle;
}

.celda-clave {
  font-family: var(--fuente-dato);
  font-size: 12.5px;
  color: var(--text);
}

.celda-tipo { color: var(--text-muted); white-space: nowrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; }
.badge.verde { background: var(--accent-bg); color: var(--accent); }
.badge.ambar { background: var(--warning-bg); color: var(--warning); }
.badge.rojo { background: var(--danger-bg); color: var(--danger); }
.badge.gris { background: var(--gris-bg); color: var(--text-muted); }
.badge.ambar-webhook { background: var(--warning-bg); color: var(--warning); animation: parpadeo-webhook 2s ease-in-out infinite; }
@keyframes parpadeo-webhook { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.celda-meta {
  font-family: var(--fuente-dato);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.celda-detalle-error {
  /* A diferencia de .celda-meta (pensada para textos cortos tipo "150ms"
     que nunca deben partirse), esto muestra mensajes de excepcion reales
     que pueden ser muy largos -- sin el corte de linea, el texto en una
     sola linea estiraba la tabla entera mas alla del ancho de su
     contenedor (.tabla-wrap tiene overflow:hidden, no scroll). */
  font-family: var(--fuente-dato);
  font-size: 11.5px;
  color: var(--danger);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 420px;
}

.titulo-seccion {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}


.marca-revisado {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.vacio {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-muted);
}
.vacio strong {
  display: block;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}

/* -- panel lateral de detalle -- */

.capa-detalle { display: none; }
.capa-detalle.abierta { display: block; }

.superposicion {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 40;
}

.panel-detalle {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 92vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 50;
  overflow-y: auto;
  box-shadow: -12px 0 28px rgba(15, 23, 42, 0.16);
}

.panel-detalle .encabezado-panel {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: 0;
  background: var(--card);
}

.panel-detalle .celda-clave { font-size: 14px; }

.panel-detalle .cerrar {
  border: none;
  background: var(--gris-bg);
  width: 28px;
  height: 28px;
  border-radius: var(--radio);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-detalle .cerrar:hover { color: var(--text); background: var(--border); }

.seccion-panel { padding: 16px 22px; border-bottom: 1px solid var(--border); }
.seccion-panel h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.paso-pipeline {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radio);
  color: var(--text-muted);
  background: var(--gris-bg);
  border: 1px solid var(--border);
}
.paso-pipeline.hecho { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.paso-pipeline.actual { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.paso-pipeline.fallo { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.flecha-pipeline { color: var(--border); padding: 0 4px; font-size: 12px; }

.tabs-xml { display: flex; gap: 6px; margin-bottom: 10px; }
.tab-xml {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
}
.tab-xml.activo { background: var(--text); color: #fff; border-color: var(--text); }

.bloque-xml {
  font-family: var(--fuente-dato);
  font-size: 11.5px;
  background: #0F172A;
  color: #CBD5E1;
  padding: 12px;
  border-radius: var(--radio);
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.historial-item {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12.5px;
}
.historial-item:last-child { border-bottom: none; }
.historial-item .hora { font-family: var(--fuente-dato); color: var(--text-muted); white-space: nowrap; }

.zona-acciones {
  background: var(--gris-bg);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: 14px;
}
.zona-acciones h3 { color: var(--text-muted); }
.fila-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.boton:hover { border-color: var(--text-muted); background: var(--gris-bg); }
.boton.primario { background: var(--accent); color: #fff; border-color: var(--accent); }
.boton.primario:hover { background: #15803D; border-color: #15803D; }
.boton.peligro { background: var(--card); color: var(--danger); border-color: var(--danger); }
.boton.peligro:hover { background: var(--danger-bg); }

.campo-inline { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.campo-inline label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

.texto-ayuda {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: normal;
}

.oculto { display: none; }

/* -- pagina de certificado -- */

.tarjeta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: 20px 22px;
  max-width: 640px;
  margin-bottom: 18px;
}

.tarjeta h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.fila-dato {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.fila-dato:last-child { border-bottom: none; }
.fila-dato .etiqueta { color: var(--text-muted); font-weight: 500; font-size: 12px; }
.fila-dato .valor { font-family: var(--fuente-dato); }

.zona-carga {
  border: 1.5px dashed var(--border);
  border-radius: var(--radio);
  padding: 18px;
  text-align: center;
  background: var(--gris-bg);
  margin-bottom: 14px;
}
.zona-carga input[type="file"] { font-family: var(--fuente-ui); font-size: 13px; }

.tabla-scroll {
  overflow-x: auto;
  /* la tarjeta tiene padding lateral -- si la tabla es mas ancha que el
     espacio disponible, esto le da scroll horizontal en vez de dejarla
     salirse por encima del borde de la tarjeta. */
  margin: 0 -22px;
  padding: 0 22px;
}

.tabla-historial { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 12.5px; }
.tabla-historial th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--gris-bg);
}
.tabla-historial td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-family: var(--fuente-dato); }

.mensaje-confirmacion {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: var(--radio);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
}
.mensaje-error {
  display: flex; align-items: center; gap: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radio);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
}

/* -- paginacion (Historico) -- */

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.paginacion-controles { display: flex; align-items: center; gap: 10px; }
.paginacion-controles .campo { min-width: 70px; padding: 5px 8px; font-size: 12.5px; }
.paginacion-actual { color: var(--text); font-weight: 600; white-space: nowrap; }
.paginacion-controles .boton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.paginacion-controles .boton:disabled:hover { border-color: var(--border); background: var(--card); }

/* -- Dashboard -- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.alerta-rezagadas {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 11px 14px;
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger); border-radius: 10px;
  font-size: 14px; font-weight: 500;
}
.alerta-rezagadas .alerta-icono { display: inline-flex; }
.alerta-rezagadas .alerta-icono .icon { width: 18px; height: 18px; }
.alerta-rezagadas .alerta-link {
  margin-left: auto; color: var(--danger); font-weight: 600;
  text-decoration: underline; white-space: nowrap;
}
.rango-custom { flex-direction: row; align-items: flex-end; gap: 8px; }
.rango-custom .campo { min-width: 140px; }
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--sombra-suave);
  padding: 16px;
}

.kpi-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--accent-bg);
  color: var(--accent);
}
.kpi.rojo .kpi-icono { background: var(--danger-bg); color: var(--danger); }
.kpi.ambar .kpi-icono { background: var(--warning-bg); color: var(--warning); }
.kpi-icono .icon { width: 17px; height: 17px; }

.kpi .kpi-etiqueta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

.kpi .kpi-valor {
  font-family: var(--fuente-dato);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.kpi.verde .kpi-valor { color: var(--accent); }
.kpi.rojo .kpi-valor { color: var(--danger); }
.kpi.ambar .kpi-valor { color: var(--warning); }

.rejilla-graficos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 1080px) {
  .rejilla-graficos { grid-template-columns: 1fr; }
}

/* Los graficos de barras horizontales (por estado, por tipo) tienen
   etiquetas de categoria largas ("Consultando autorización", "Liquidación
   de compras") -- metidos en una columna angosta (1fr de un 2fr/1fr), a
   Chart.js no le alcanza el ancho para dibujar la etiqueta completa y la
   corta contra el borde del canvas (solo se veia entera si se hacia zoom
   out, que reduce el tamaño de fuente). Estos graficos van uno abajo del
   otro a todo el ancho en vez de compartir columna. */
.pila-graficos {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.tarjeta-grafico {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 16px 18px;
  /* min-width/min-height: 0 pisa el "auto" por defecto de los items de
     grid -- sin esto, Chart.js (responsive + maintainAspectRatio:false)
     puede entrar en un loop de resize que hace crecer el canvas sin
     parar: el grid deja que el contenido (el canvas) defina un minimo
     mayor, el ResizeObserver de Chart.js ve un contenedor "mas grande" y
     agranda el canvas para llenarlo, lo que vuelve a agrandar el minimo,
     etc. Es el bug documentado de Chart.js dentro de CSS grid/flex. */
  min-width: 0;
  min-height: 0;
}

.tarjeta-grafico h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.tarjeta-grafico .lienzo-wrap {
  position: relative;
  height: 260px;
  width: 100%;
  overflow: hidden;
}

.tarjeta-grafico .lienzo-wrap.chico { height: 200px; }
.tarjeta-grafico .lienzo-wrap.alto { height: 340px; }

.tabla-salud-sri { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla-salud-sri th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--border);
}
.tabla-salud-sri td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--border);
}
.tabla-salud-sri tr:last-child td { border-bottom: none; }