/* ============================================================================
   comun.css — CAPA 0.5 "réplica mejorada" de los 3 tableros Tableau de la DIE.
   Pedido de Julián 2026-09-05: MISMO contenido y comportamiento que la Capa 0
   (../replica-fiel/) — mismos datos, mismas solapas, mismos KPIs, mismos huecos
   declarados — pero con las mejoras VISUALES ya trabajadas en la Capa 1+
   (chart-kit + tokens-die + observaciones de interacción resueltas).

   Orden de carga (el proyecto pisa al kit — regla de tokens-die.css):
     1. ../chart-kit/chart-kit.css      (mecanismo, clases .ck-*)
     2. ../tokens-die.css               (paleta institucional Manual BA 2021)
     3. este archivo                    (layout propio de la variante)

   Qué NO hay acá: nada del look Tableau calcado (eso es la Capa 0) y nada de
   contenido nuevo (Predios en T1, indicadores extra, ejes honestos desde 0 —
   eso es la Capa 1+). Los ejes recortados de T3 se CONSERVAN como en la Capa 0,
   pero se ANUNCIAN con un callout de escala (mejora de aclaración, no de dato).
   ========================================================================== */

body{
  margin:0; background:var(--ck-lienzo); color:var(--ck-tinta);
  font-family:var(--ck-fuente); font-size:var(--ck-fs-body); line-height:1.45;
}


/* ---- Acento magenta (acordado en el meet del 2026-11-10 [01:08:58]) ------------------
   PROVISORIO: #c4007a es un valor de trabajo elegido por contraste (5,79:1 sobre blanco,
   cumple AA para texto). NO es el magenta oficial: falta el hex del manual de marca,
   que Virginia o Comunicación deben pasar. Reemplazarlo es cambiar esta única línea.
   Rol acotado: solo acción/selección (solapa activa, indicador elegido, foco).
   Los datos siguen con la paleta categórica de tokens-die.css. */
:root{
  --acento-magenta:#c4007a;
  --acento-magenta-suave:#fbe6f2;
  --ck-accion:var(--acento-magenta);
  --turquesa-texto:#00798a;      /* turquesa oscurecido para TEXTO (el #00aec3 da 2,68:1 sobre blanco) */
  --ck-tenue:#5f6975;            /* texto terciario: el #9da5b1 del kit da 2,48:1; este da más de 5:1 (AA) */
}
:focus-visible{ outline:3px solid var(--acento-magenta); outline-offset:2px; }

/* ---- Página: columna centrada estilo Capa 1+ -------------------------- */
.hoja{ max-width:900px; margin:0 auto; padding:var(--ck-sp-5) var(--ck-sp-4) 64px; }
header.cabecera{ margin-bottom:var(--ck-sp-4); }
header.cabecera h1{ font-size:1.45rem; margin:0 0 var(--ck-sp-1); letter-spacing:-.01em; }
header.cabecera h1 .acento{ color:var(--turquesa-texto); }
header.cabecera .bajada{ color:var(--ck-suave); font-size:var(--ck-fs-caption); margin:0; }

/* ---- Barra de controles (selects + segmentados) ----------------------- */
.barra-control{
  display:flex; flex-wrap:wrap; gap:var(--ck-sp-3) var(--ck-sp-5);
  align-items:flex-end; margin:var(--ck-sp-4) 0;
}
.grupo-control{ display:flex; flex-direction:column; gap:var(--ck-sp-1); }
.grupo-control > label, .grupo-control > .etiqueta-grupo{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ck-suave);
}
select.rm-select{
  font-family:inherit; font-size:.9rem; color:var(--ck-tinta);
  background:var(--ck-papel); border:1px solid var(--ck-borde); border-radius:8px;
  padding:6px 30px 6px 10px; box-shadow:var(--ck-sh-1); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%234d5761'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}
select.rm-select:hover{ border-color:var(--ck-suave); }

/* ---- Solapas: segmentado del kit, tamaño cómodo ----------------------- */
.tabs-rm{ margin:var(--ck-sp-4) 0; }
.tabs-rm .ck-segmentado{ display:inline-flex; }
.tabs-rm .ck-segmentado button{ font-size:.85rem; padding:var(--ck-sp-2) var(--ck-sp-4); }

/* ---- Tarjetas / secciones --------------------------------------------- */
section.bloque{ margin-bottom:var(--ck-sp-5); }
.franja-cab{
  display:flex; align-items:center; gap:var(--ck-sp-3); flex-wrap:wrap;
  margin:0 0 var(--ck-sp-3);
}
.franja-cab h2{ margin:0; font-size:var(--ck-fs-h4); }
.franja-cab .contexto{ color:var(--ck-suave); font-size:var(--ck-fs-caption); }

/* ---- KPI (T1): tarjetas del kit con cifra grande y ⓘ en fila propia ---- */
.grilla-kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--ck-sp-4); }
.kpi .kicker{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ck-suave); display:flex; align-items:center; gap:var(--ck-sp-2);
}
.kpi .kicker .punto{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.kpi .cifra{
  font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums;
  font-family:var(--ck-fuente-datos); line-height:1.1; margin:2px 0 0;
}
.kpi .cifra.larga{ font-size:1.6rem; }              /* fuente adaptativa en números grandes */
.kpi .ctx{ color:var(--ck-suave); font-size:var(--ck-fs-caption); margin:0; }
/* "ⓘ en fila propia" (obs. Julián 2026-09-04 §4): la definición vive en una fila
   al pie de la tarjeta, no flotando sobre el número. */
.fila-info{
  margin-top:auto; padding-top:var(--ck-sp-2); border-top:1px solid var(--ck-borde);
  display:flex; align-items:center; gap:var(--ck-sp-2);
}
.btn-info{
  border:1px solid var(--ck-borde); background:var(--ck-lienzo); color:var(--ck-suave);
  border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:.8rem;
  font-weight:700; line-height:1; flex-shrink:0;
}
.btn-info:hover{ background:var(--ck-borde); color:var(--ck-tinta); }
.fila-info .que-es{ font-size:.72rem; color:var(--ck-tenue); }

/* "Dato no relevado" / hueco declarado — mismos TEXTOS que la Capa 0 */
.no-relevado{
  color:var(--ck-suave); font-size:var(--ck-fs-caption); background:var(--ck-lienzo);
  border:1px dashed var(--ck-borde); border-radius:8px; padding:var(--ck-sp-3); margin:var(--ck-sp-2) 0 0;
}
.sin-extraer{
  font-size:var(--ck-fs-caption); color:#6b5314; background:#fdf6e7;
  border:1px dashed #b0873b; border-radius:8px; padding:var(--ck-sp-3); line-height:1.45;
}

/* ---- Popover (cierra bien: click afuera, ✕ y Escape — obs. §popover) --- */
.popover{
  position:absolute; z-index:40; max-width:360px; background:var(--ck-papel);
  border:1px solid var(--ck-borde); border-radius:var(--ck-r-caja);
  box-shadow:var(--ck-sh-2); padding:var(--ck-sp-4); font-size:var(--ck-fs-caption);
  line-height:1.5; color:var(--ck-tinta);
}
.popover .cerrar{
  float:right; border:0; background:none; cursor:pointer; font-size:1rem;
  color:var(--ck-suave); margin:-4px -4px 0 var(--ck-sp-2);
}
.popover .cerrar:hover{ color:var(--ck-tinta); }
.popover table{ border-collapse:collapse; margin-top:var(--ck-sp-2); }
.popover th{ text-align:left; padding:4px 12px; background:var(--ck-lienzo);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ck-suave); }
.popover td{ padding:2px 12px; border-bottom:1px solid var(--ck-borde); }
.popover td.reg{ font-weight:700; text-align:center; vertical-align:middle; border-bottom:0; }

/* ---- Charts ------------------------------------------------------------ */
.ck-chart{ height:340px; }
.ck-chart.chico{ height:300px; }

/* callout de escala (tooltips/avisos honestos de escala — obs. §escala):
   reusa .ck-callout-eje del kit; acá solo el margen. */
.ck-callout-eje{ margin-top:var(--ck-sp-3); }

/* ---- Tabla por nivel y modalidad (T2): tabla del kit ------------------- */
table.ck-datos td.grupo{ text-align:left; font-weight:700; }
table.ck-datos td.cat{ text-align:left; color:var(--ck-suave); padding-left:var(--ck-sp-5); }
table.ck-datos tr.total td{ font-weight:700; border-bottom:2px solid var(--ck-tinta); }

/* ---- Sexo (T2): barras horizontales simples ---------------------------- */
.sexo-fila{ display:flex; align-items:center; gap:var(--ck-sp-2); margin-top:var(--ck-sp-2);
  font-size:var(--ck-fs-caption); color:var(--ck-suave); }
.sexo-fila .etiqueta{ width:64px; flex-shrink:0; }
.sexo-fila .pista{ flex:1; background:var(--ck-lienzo); border-radius:var(--ck-r-pill); height:18px; }
.sexo-fila .barra{ display:block; height:18px; border-radius:var(--ck-r-pill); background:var(--estudiantes);
  min-width:2px; }
.sexo-fila.varones .barra{ background:var(--cargos); }
.sexo-fila .pct{ width:52px; text-align:right; font-variant-numeric:tabular-nums;
  font-family:var(--ck-fuente-datos); color:var(--ck-tinta); font-weight:700; }

/* ---- Sidebar de indicadores (T3) --------------------------------------- */
.grilla-t3{ display:grid; grid-template-columns:230px 1fr; gap:var(--ck-sp-4); align-items:start; }
.sidebar-ind{ display:flex; flex-direction:column; gap:var(--ck-sp-2); }
.grupo-ind{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ck-tenue); margin:var(--ck-sp-2) 0 0; }
.indicador-btn{
  text-align:left; border:1px solid var(--ck-borde); background:var(--ck-papel);
  color:var(--ck-tinta); border-radius:8px; padding:var(--ck-sp-2) var(--ck-sp-3);
  font-family:inherit; font-size:.85rem; cursor:pointer; box-shadow:var(--ck-sh-1);
  transition:background .15s ease,border-color .15s ease;
}
.indicador-btn:hover{ background:var(--ck-lienzo); }
.indicador-btn[aria-pressed="true"]{
  background:var(--acento-magenta-suave); border-color:var(--acento-magenta); font-weight:700;
}

/* ---- Leyendas HTML del kit en fila ------------------------------------- */
.ck-leyenda.ck-fila{ margin:var(--ck-sp-2) 0 var(--ck-sp-3); }

/* ---- Referencias de la Dirección (T1; en el original es el sidebar con foto y enlaces) ---- */
.ref-die{ background:var(--ck-papel); border:1px solid var(--ck-borde); border-radius:var(--ck-r-caja);
  box-shadow:var(--ck-sh-1); padding:var(--ck-sp-4); }
.ref-die .ref-h{ margin:0; font-size:var(--ck-fs-body); }
.ref-die .ref-nombre{ margin:var(--ck-sp-1) 0 var(--ck-sp-3); color:var(--ck-suave); font-size:var(--ck-fs-caption); }
.ref-die .ref-lista{ margin:0; padding-left:var(--ck-sp-5); font-size:.9rem; line-height:1.7; }
.ref-die a{ color:var(--acento-magenta); }
.ref-die small{ color:var(--ck-suave); }

/* ---- Pie de fuente ------------------------------------------------------ */
footer.fuente{
  margin-top:var(--ck-sp-5); color:var(--ck-tenue); font-size:.72rem; text-align:center;
}

/* ---- Responsive (mismo criterio 390px sin overflow que la Capa 0) ------- */
@media (max-width:760px){
  .grilla-t3{ grid-template-columns:1fr; }
  .sidebar-ind{ flex-direction:row; flex-wrap:wrap; }
  .sidebar-ind .indicador-btn{ flex:1 1 46%; min-width:0; }
  .grupo-ind{ flex-basis:100%; }
  .ck-chart{ height:300px; }
}
@media (max-width:480px){
  .hoja{ padding:var(--ck-sp-4) var(--ck-sp-3) 48px; }
  .sidebar-ind .indicador-btn{ flex-basis:100%; }
  .tabs-rm .ck-segmentado{ display:flex; flex-wrap:wrap; }
  .tabs-rm .ck-segmentado button{ flex:1 1 auto; }
  .barra-control{ gap:var(--ck-sp-2) var(--ck-sp-3); }
}