/* ============================================================================
   replica-comun.css — CAPA 0 (imitación fiel) de los 3 tableros Tableau de la DIE.
   Pedido de Virginia, 2026-09-04. Ronda 2 de fidelidad VISUAL (2026-09-04 tarde).

   TODO valor de acá está MEDIDO sobre el tablero vivo (Playwright, 2026-09-04):
   getComputedStyle sobre el DOM del embed de Tableau + muestreo de píxel sobre las
   capturas de ../capturas/2026-09-04-replica-fiel/. Nada es "a ojo".

   Medidas de lienzo (dashboard fijo de Tableau, no responsive en el original):
     T1  630 × 820   borde 2px #00aec3
     T2  820 × 800   banda exterior #ddebf0, padding 3px
     T3  850 × 700   banda exterior #ddebf0, padding 3px

   TIPOGRAFÍA (decisión revisada el 2026-11-12, reemplaza la anterior):
   el workbook declara `font-family: Calibri` (T1/T2) y `Arial` (T3), SIN lista de
   respaldo, y en una máquina sin Calibri (Linux, Android) el navegador cae a una serif
   más ancha: el título se partía en dos líneas y "2026" caía sobre la banda "Año".
   Calibri es de Microsoft y no se puede redistribuir. Se incluye CARLITO (licencia libre
   SIL OFL, `fonts/LICENCIA-Carlito-OFL.txt`), diseñada con las MISMAS métricas que Calibri:
   en Windows se usa la Calibri real y en el resto Carlito, y el texto ocupa el mismo ancho
   en todos lados. Es lo que pedía la propuesta ("la tipografía se elige una sola vez y se
   ve igual en todos lados"). T3 (Arial) conserva su fuente: cae en una sans equivalente.

   Lo ÚNICO que se agrega respecto del original es responsividad (breakpoints
   ≤900/≤620px): el lienzo fijo se libera y las columnas se apilan. Es una de las dos
   razones del pedido de migración ("que se vea mejor en celulares").
   ========================================================================== */

@font-face{ font-family:"Carlito"; font-weight:400; font-style:normal; font-display:swap;
            src:url("fonts/carlito-400.woff2") format("woff2"); }
@font-face{ font-family:"Carlito"; font-weight:700; font-style:normal; font-display:swap;
            src:url("fonts/carlito-700.woff2") format("woff2"); }

:root{
  /* --- acentos institucionales (medidos: #00aec3 en T1/T3, #00aecd en algunos
         títulos de T2 — el workbook no es consistente y la réplica lo respeta) --- */
  --teal:            #00aec3;
  --teal-t2:         #00aecd;
  --celeste:         #aecddd;  /* barras Privado (T2) y Provincia (T3); bandas Año/Fuente de T1 */
  --linea-region:    #00b4c2;  /* línea "Región" del T3 (medida en la leyenda del vivo) */

  /* --- fondos de zona (medidos con getComputedStyle sobre .tab-zone-margin) --- */
  --banda-exterior:  #ddebf0;  /* marco de T2 y T3 */
  --franja-prov:     #e9f1f5;  /* banda + tarjetas TOTAL PROVINCIA (T1) */
  --franja-region:   #d0e3ea;  /* banda + tarjetas REGIÓN EDUCATIVA (T1) */
  --franja-distrito: #d9d9d9;  /* banda + tarjetas DISTRITO (T1) */

  /* --- solapas --- */
  --tab-inactiva-t2: #bab0ac;
  --tab-inactiva-t3: #b4b4b4;

  /* --- tintas (medidas) --- */
  --tinta-kpi:    #505050;  /* títulos y números de las tarjetas del T1 */
  --tinta-header: #898989;  /* "Dato no relevado", "Pertenece a…", títulos de gráfico T3 */
  --tinta-eje:    #666666;  /* rótulos de eje en T2/T3 */
  --tinta-tabla:  #333333;
  --gridline:     #f2f2f2;  /* gridlines del T2 (T3 no tiene) */
  --banding:      #f5f5f5;  /* banda alterna de la tabla del T2 */
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  /* ver nota de tipografía arriba: MISMA declaración que el workbook, sin fallback */
  font-family: Calibri, Carlito, sans-serif;
  color: var(--tinta-tabla);
  background: #fff;
  font-size: 14px;
}
body.arial{ font-family: Arial; }   /* T3: el workbook usa Arial, no Calibri */

/* ---- Lienzo ----------------------------------------------------------- */
/* width (no max-width) para clavar el ancho del dashboard original; la
   responsividad entra por media query, que es la única desviación permitida. */
.lienzo{ margin:0 auto; background:#fff; }
.lienzo-t1{ width:630px; border:2px solid var(--teal); }
.lienzo-t2{ width:820px; background:var(--banda-exterior); padding:3px; }
.lienzo-t3{ width:850px; background:var(--banda-exterior); padding:3px; }

/* ---- Solapas (T2/T3) --------------------------------------------------- */
/* En el original NO son pestañas con bordes: son 3 rectángulos planos separados
   por el fondo de la banda exterior. */
.tabs{ display:flex; }
.tab{
  border:0; cursor:pointer; font-family:inherit; color:#fff; text-align:center;
  background: var(--tab-inactiva-t2);
}
.tab[aria-selected="true"]{ background: var(--teal-t2); }

.tabs-t2{ gap:8px; padding:6px 9px 4px; }
.tabs-t2 .tab{ flex:1 1 0; height:24px; font-size:16px; font-weight:normal; line-height:24px; padding:0; }

.tabs-t3{ gap:8px; padding:8px 8px 4px; }
.tabs-t3 .tab{ flex:1 1 0; height:41px; font-size:14.7px; font-weight:bold; padding:0;
               background: var(--tab-inactiva-t3); }
.tabs-t3 .tab[aria-selected="true"]{ background: var(--teal); }

/* ---- Fila de filtros (T2/T3) ------------------------------------------- */
.filtros{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#fff; padding:4px 4px;
}
.filtros .etq{ color: var(--teal-t2); font-weight:bold; font-size:16px; }

/* Combo estilo Tableau: caja blanca de borde fino y un triángulo negro a la derecha.
   `appearance:none` + fondo SVG para que no salga el select nativo del sistema. */
select.combo{
  font-family:inherit; font-size:11px; font-weight:bold; color:#22292c;
  height:19px; padding:0 18px 0 5px; border:1px solid #999; background:#fff;
  appearance:none; -webkit-appearance:none; border-radius:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0h9L4.5 6z' fill='%23222'/></svg>");
  background-repeat:no-repeat; background-position:right 5px center;
}
select.combo::-ms-expand{ display:none; }

/* ---- Panel blanco (T2/T3) ---------------------------------------------- */
.panel{ background:#fff; }

/* ---- Títulos de vista (estilo Tableau: teal, peso mixto) --------------- */
.titulo-viz{ text-align:center; color:var(--teal); font-size:20px; font-weight:normal; margin:0; }
.titulo-viz b{ font-weight:bold; }
.subtitulo-viz{ text-align:center; color:var(--teal); font-size:16px; font-weight:normal; margin:0; }

/* ---- Pie de fuente ----------------------------------------------------- */
/* Medido: T1 lo pinta sobre #aecddd; T2/T3 lo dejan sobre la banda exterior.
   En los tres está CENTRADO — la versión anterior lo alineaba a la izquierda. */
.fuente{ font-size:12px; color:#3f4a52; text-align:center; }
.fuente-t1{ background:var(--celeste); height:35px; line-height:35px; font-size:11px; }
.fuente-t2, .fuente-t3{ padding:5px 4px; }

/* ---- Botón ⓘ ----------------------------------------------------------- */
/* Medido sobre el crop x8 del original: círculo de trazo oscuro (~1.6px) y una
   "i" sans oscura, NO la itálica serif que tenía la versión anterior. */
.info-btn{
  border:1.6px solid #1f1f1f; background:transparent; color:#1f1f1f; border-radius:50%;
  width:16px; height:16px; padding:0; cursor:pointer; font-family:Arial, sans-serif;
  font-size:11px; font-weight:bold; line-height:12px; display:inline-block; vertical-align:middle;
}
.info-btn.grande{ width:20px; height:20px; font-size:14px; line-height:16px;
                  font-family:Georgia, serif; font-style:italic; font-weight:normal; }

/* ---- Popover ⓘ / definiciones ------------------------------------------ */
.popover{
  position:absolute; z-index:30; max-width:340px; background:#fff;
  border:1px solid #999; box-shadow:0 2px 8px rgba(0,0,0,.25);
  padding:10px 12px; font-size:13px; line-height:1.4;
}
.popover .cerrar{ float:right; border:0; background:none; cursor:pointer; font-size:14px; }

/* ---- Aviso honesto de dato faltante en la réplica ---------------------- */
/* Para estados que el ORIGINAL sí muestra pero cuya serie no fue extraída del
   workbook. Nunca inventar datos: se declara el hueco. */
.sin-extraer{
  margin:14px; padding:14px; border:1px dashed #b0873b; background:#fdf6e7;
  color:#6b5314; font-size:13px; line-height:1.45; font-family:Arial, sans-serif;
}

/* ---- Responsive -------------------------------------------------------- */
/* ÚNICA desviación deliberada del original (que es un lienzo fijo y se achica
   entero en el celular hasta quedar ilegible). */
@media (max-width:760px){
  .lienzo-t1, .lienzo-t2, .lienzo-t3{ width:100%; }
  .tabs-t2, .tabs-t3{ flex-wrap:wrap; }
  .tabs-t2 .tab, .tabs-t3 .tab{ flex:1 1 200px; }
}
@media (max-width:620px){
  .tabs-t2 .tab, .tabs-t3 .tab{ flex:1 1 100%; }
  .titulo-viz{ font-size:17px; }
  .subtitulo-viz{ font-size:14px; }
  .filtros{ gap:5px; }
  .filtros .etq{ font-size:14px; }
}