/* ===========================================================================
   Dashboard ABN — hoja de estilos.
   Direccion: editorial analitico. Papel crema, tinta azul marino, numeracion de
   secciones. Los datos usan la paleta categorica validada (azul/naranja), que
   pasa los chequeos de daltonismo y contraste en el fondo claro.
   Se compromete con modo claro unico: color-scheme declarado, sin flip automatico.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Superficies e ink */
  --papel:        #faf8f4;
  --papel-hondo:  #f2efe8;
  --carta:        #fffefb;
  --tinta:        #14213d;
  --tinta-media:  #4a5568;
  --tinta-suave:  #8a8578;
  --linea:        #e4e0d6;
  --linea-fuerte: #cfc9ba;

  /* Series de datos — validadas con el script de la skill dataviz.
     Adyacentes: CVD ΔE 24.7 (protan), normal ΔE 33.6. Contraste >= 3:1. */
  --serie-1: #2a78d6;  /* google · ingreso del negocio */
  --serie-2: #eb6834;  /* meta   · inversion en pauta  */

  /* Estados — nunca se usan como serie, y siempre van con icono + texto */
  --critico:  #d03b3b;
  --atencion: #fab219;
  --bien:     #0ca30c;
  --critico-fondo:  #fdf2f2;
  --atencion-fondo: #fdf8ec;

  --radio: 3px;
  --sombra: 0 1px 2px rgba(20, 33, 61, .04), 0 4px 16px rgba(20, 33, 61, .04);
  --ancho: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Textura de papel: una trama diagonal muy tenue, no un color plano */
  background-image:
    repeating-linear-gradient(135deg, rgba(20,33,61,.012) 0 1px, transparent 1px 7px);
}

h1, h2, h3 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.mono, td.num, th.num, .kpi-valor, .chip, .tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

a { color: var(--serie-1); text-underline-offset: 3px; }

/* --- Cabecera ------------------------------------------------------------ */

.tope {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 244, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.tope-fila {
  max-width: var(--ancho); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.marca { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.marca strong { font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600; }
.marca span { font-size: 12px; color: var(--tinta-suave); letter-spacing: .06em; text-transform: uppercase; }

.nav-links { display: flex; gap: 6px; }
.nav-links a {
  font-size: 13px; padding: 6px 12px; border-radius: var(--radio);
  color: var(--tinta-media); text-decoration: none; border: 1px solid transparent;
}
.nav-links a:hover { background: var(--papel-hondo); border-color: var(--linea); }
.nav-links a.activo { background: var(--tinta); color: #fff; }

/* Badge de frescura de datos */
.estado {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--tinta-media);
  padding: 5px 11px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--carta);
}
.pulso {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bien);
  box-shadow: 0 0 0 0 rgba(12,163,12,.5); animation: latir 2.4s infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(12,163,12,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(12,163,12,0); }
  100% { box-shadow: 0 0 0 0 rgba(12,163,12,0); }
}
.estado.recargando .pulso { background: var(--atencion); }

/* --- Filtros ------------------------------------------------------------- */

.filtros {
  max-width: var(--ancho); margin: 0 auto;
  padding: 0 24px 14px;
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600;
}
.campo select, .campo input {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  padding: 7px 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--carta); color: var(--tinta); min-width: 140px;
}
.campo select:focus-visible, .campo input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--serie-1); outline-offset: 2px;
}
.btn {
  font-family: inherit; font-size: 13px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--carta); color: var(--tinta);
}
.btn:hover { background: var(--papel-hondo); }
.btn-primario { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-primario:hover { background: #22345c; }

/* --- Estructura ---------------------------------------------------------- */

main { max-width: var(--ancho); margin: 0 auto; padding: 8px 24px 80px; }

section { margin-top: 52px; scroll-margin-top: 130px; }
.rotulo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600; margin-bottom: 8px;
}
.rotulo b {
  font-family: "IBM Plex Mono", monospace; color: var(--tinta);
  background: var(--papel-hondo); padding: 2px 7px; border-radius: 2px; font-weight: 500;
}
section > h2 { font-size: 27px; margin-bottom: 6px; }
.bajada { color: var(--tinta-media); max-width: 68ch; margin: 0 0 22px; font-size: 14.5px; }

.carta {
  background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  min-width: 0;   /* deja que la carta achique dentro de un grid */
}
/* minmax(0,·) en vez de 1fr a secas: sin eso los items de grid no bajan del ancho de
   su contenido y un canvas de Chart.js nunca achica al reducir la ventana. */
.grilla { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- KPIs ---------------------------------------------------------------- */

.bloque-kpi { padding: 18px 20px; border-left: 3px solid var(--linea-fuerte); }
.bloque-kpi.negocio { border-left-color: var(--serie-1); }
.bloque-kpi.pauta   { border-left-color: var(--serie-2); }
.kpi-rotulo {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.kpi-valor { font-size: 27px; font-weight: 500; line-height: 1.25; margin-top: 5px; letter-spacing: -.02em; }
.kpi-pie { font-size: 12px; color: var(--tinta-media); margin-top: 3px; }

.titulo-grupo {
  display: flex; align-items: baseline; gap: 10px;
  margin: 26px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--linea);
}
.titulo-grupo h3 { font-size: 17px; }
.titulo-grupo span { font-size: 12.5px; color: var(--tinta-suave); }

/* Nota sobre las dos escalas de revenue: es la decision analitica central */
.nota {
  border-left: 3px solid var(--serie-2); background: var(--papel-hondo);
  padding: 13px 16px; font-size: 13.5px; color: var(--tinta-media);
  border-radius: 0 var(--radio) var(--radio) 0; margin-top: 16px;
}
.nota strong { color: var(--tinta); }

/* --- Alertas ------------------------------------------------------------- */

.alerta {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
}
.alerta:last-child { border-bottom: 0; }
.alerta-icono { font-size: 15px; line-height: 1.5; }
.alerta-tit { font-weight: 600; font-size: 14.5px; }
.alerta-det { font-size: 13px; color: var(--tinta-media); margin-top: 2px; }
.alerta-cob {
  font-family: "IBM Plex Mono", monospace; font-size: 20px; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.alerta-cob small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); font-family: "IBM Plex Sans", sans-serif; }
.sev-critica .alerta-cob { color: var(--critico); }
.sev-critica { background: var(--critico-fondo); }
.sev-atencion .alerta-cob { color: #9a6b04; }
.sev-atencion { background: var(--atencion-fondo); }

.resumen-alertas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--linea-fuerte); background: var(--carta);
  display: inline-flex; align-items: center; gap: 7px;
}
.chip b { font-size: 14px; }
.chip.critica  { border-color: var(--critico);  color: var(--critico);  background: var(--critico-fondo); }
.chip.atencion { border-color: #d9a017; color: #9a6b04; background: var(--atencion-fondo); }

.plegable > summary {
  cursor: pointer; padding: 13px 18px; font-size: 13.5px; color: var(--tinta-media);
  border-top: 1px solid var(--linea); list-style: none;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: "▸ "; color: var(--tinta-suave); }
.plegable[open] > summary::before { content: "▾ "; }
.plegable > summary:hover { background: var(--papel-hondo); }

/* --- Graficos ------------------------------------------------------------ */

.panel { padding: 18px 20px 20px; }
.panel h3 { font-size: 16px; }
.panel .sub { font-size: 12.5px; color: var(--tinta-suave); margin: 2px 0 14px; }
.lienzo { position: relative; height: 260px; width: 100%; min-width: 0; }
.lienzo.alto { height: 320px; }
.lienzo > canvas { max-width: 100%; }

/* Leyenda propia: identidad nunca queda solo en el color, siempre lleva texto */
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; color: var(--tinta-media); }
.leyenda i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

/* --- Tablas -------------------------------------------------------------- */

.tabla-scroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600; padding: 11px 12px;
  border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap;
  background: var(--carta); position: sticky; top: 0;
}
thead th.orden { cursor: pointer; user-select: none; }
thead th.orden:hover { color: var(--tinta); }
thead th.activa { color: var(--tinta); }
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papel-hondo); }
td.num, th.num { text-align: right; }
.tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 2px;
  background: var(--papel-hondo); color: var(--tinta-media); white-space: nowrap;
}
.punto { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.riesgo-critico  { color: var(--critico); font-weight: 600; }
.riesgo-atencion { color: #9a6b04; font-weight: 600; }

/* Barra dentro de celda: magnitud relativa sin gastar un grafico entero */
.barra-celda { position: relative; min-width: 88px; }
.barra-celda .relleno {
  position: absolute; inset: 0 auto 0 0; background: rgba(42,120,214,.13);
  border-radius: 2px;
}
.barra-celda span { position: relative; }

/* --- Carga de archivos --------------------------------------------------- */

.zona-carga {
  border: 1.5px dashed var(--linea-fuerte); border-radius: var(--radio);
  padding: 26px 20px; text-align: center; background: var(--carta);
  transition: background .15s, border-color .15s;
}
.zona-carga.encima { border-color: var(--serie-1); background: #f2f7fd; }
.zona-carga p { margin: 0 0 4px; font-size: 14px; }
.zona-carga small { color: var(--tinta-suave); font-size: 12.5px; }
.resultado-carga { margin-top: 14px; font-size: 13px; }
.resultado-carga .ok    { color: #0a7a0a; }
.resultado-carga .error { color: var(--critico); }

/* --- Documento de hallazgos ---------------------------------------------- */

.doc { max-width: 78ch; margin: 0 auto; }
.doc h2 { font-size: 30px; margin-top: 46px; }
.doc h3 { font-size: 19px; margin-top: 32px; }
.doc p { color: var(--tinta-media); }
.doc li { color: var(--tinta-media); margin-bottom: 7px; }
.doc strong { color: var(--tinta); }
.doc .carta { padding: 20px 24px; margin: 20px 0; }
.doc .carta.tabla-scroll { padding: 0; }
.doc pre { max-width: 100%; }
.doc code {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  background: var(--papel-hondo); padding: 1px 5px; border-radius: 2px; color: var(--tinta);
}
.doc pre {
  background: var(--papel-hondo); padding: 14px 16px; border-radius: var(--radio);
  overflow-x: auto; font-size: 12.5px; border-left: 3px solid var(--linea-fuerte);
}
.doc pre code { background: none; padding: 0; }
.veredicto {
  border-left: 3px solid var(--serie-1); background: #f3f7fd;
  padding: 15px 18px; border-radius: 0 var(--radio) var(--radio) 0; margin: 18px 0;
}
.veredicto p:last-child { margin-bottom: 0; }
.cifra {
  font-family: "IBM Plex Mono", monospace; font-size: 30px; color: var(--tinta);
  display: block; line-height: 1.2; letter-spacing: -.02em;
}

hr.regla { border: 0; border-top: 1px solid var(--linea); margin: 42px 0; }

.pie {
  max-width: var(--ancho); margin: 0 auto; padding: 26px 24px 50px;
  border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: 12.5px;
}

.cargando { color: var(--tinta-suave); font-size: 13px; padding: 22px; text-align: center; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  main, .tope-fila, .filtros, .pie { padding-left: 16px; padding-right: 16px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  section > h2 { font-size: 23px; }
  .kpi-valor { font-size: 23px; }
  .campo select, .campo input { min-width: 0; width: 100%; }
  .campo { flex: 1 1 140px; }
  .alerta { grid-template-columns: auto 1fr; }
  .alerta-cob { grid-column: 2; text-align: left; }
  .lienzo { height: 230px; }
  .marca span { display: none; }
}

@media print {
  .tope, .filtros, .zona-carga, .nav-links { display: none; }
  body { background: #fff; }
  .carta { box-shadow: none; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .pulso { animation: none; }
  * { transition: none !important; }
}