/* chart-kit.css — v0.2.3 (2026-08-25 — + .ck-leyenda.ck-fila; v0.2.2: .ck-sr-solo endurecido con !important, ver §2)
   Capa de COMPONENTES visuales del sistema centralizado de charts de r33.
   Fuente canónica: _base/tools/chart-kit/ · Doc: _base/practices/sistema-de-charts-chartjs.md
   Contrato:
   - MECANISMO puro: cero datos, cero marca. Los colores/tipografía/espaciado entran
     por custom properties --ck-* que define CADA proyecto (capa r33: proyecto > base).
     Todo --ck-* tiene fallback neutro para que el kit renderice legible sin tokens.
   - Sin build step: se enlaza con <link rel="stylesheet"> desde file:// o HTTP local.
   - En repos consumidores anidados (pba-edu, pba-dashboard) va VENDORIZADO (copiado
     con este header intacto). NO editar la copia: editar la fuente y re-copiar.
   Nomenclatura: todo prefijado .ck- para no colisionar con el CSS propio de cada página. */

/* ---------- 1. Tokens con fallback neutro (el proyecto los pisa en su :root) ---------- */
:root{
  --ck-tinta:#1a2733;          /* texto principal */
  --ck-suave:#4d5761;          /* texto secundario — verificar ≥4.5:1 sobre --ck-papel */
  --ck-tenue:#5f6d7a;          /* texto terciario — ver nota de contraste en la practice §tokens */
  --ck-papel:#ffffff;          /* superficie de tarjeta */
  --ck-lienzo:#f6f8f9;         /* fondo de página */
  --ck-borde:#dfe6e9;
  --ck-accion:#1f5cd6;         /* color de controles activos (NUNCA usarlo como serie) */
  --ck-fs-caption:.8rem;
  --ck-fs-body:1rem;
  --ck-fs-h4:1.25rem;
  --ck-fs-h3:1.5625rem;
  --ck-sp-1:4px; --ck-sp-2:8px; --ck-sp-3:12px; --ck-sp-4:16px; --ck-sp-5:24px;
  --ck-r-caja:12px;
  --ck-r-pill:999px;
  --ck-sh-1:0 1px 2px rgba(0,0,0,.05);
  --ck-sh-2:0 8px 24px rgba(0,0,0,.09);
  --ck-fuente:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* --ck-fuente-datos (2026-09-02, experimento switcher variante T3 "fuente-datos-mono"):
     fuente EXCLUSIVA para cifras/datos (cifras de tabla, valores destacados de leyenda),
     separada de --ck-fuente (headings/body). Fallback = --ck-fuente → 0 cambio visual para
     cualquier consumidor que no la pise explícitamente (T1/T2, o T3 sin esta variante).
     Referente: todosobrelamora.vercel.app (IBM Plex Mono solo en nav/kicker/cifras, nunca
     prosa) — ver visual-design/research/estetica-institucional-moderna.md §2 Palanca 1.
     Quien la pisa: pba-edu/prototipos/embed-mode.css, SOLO bajo html[data-variante=
     "fuente-datos-mono"] — este archivo (chart-kit, genérico) no conoce IBM Plex Mono. */
  --ck-fuente-datos:var(--ck-fuente);
}

/* ---------- 2. Accesibilidad base (sr-only, skip link, foco) ---------- */
/* !important a propósito (v0.2.2): la utilidad DEBE ganarle a cualquier regla del consumidor
   — sin esto, `table.ck-datos{width:100%}` le ganaba por especificidad y una <table> además
   ignora width menor a su min-content salvo que deje de ser display:table. Caso real medido:
   #tablaSexo (T2 pba-edu) sr-only pero aportando 416px al scrollWidth en viewport 375px. */
.ck-sr-solo{position:absolute!important;display:block!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.ck-skip-link{position:absolute;left:-999px;top:0;background:var(--ck-tinta);color:#fff;
  padding:var(--ck-sp-2) var(--ck-sp-4);z-index:100;border-radius:0 0 6px 0}
.ck-skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ck-accion);outline-offset:2px;border-radius:6px}

/* ---------- 3. Tarjeta de indicador (KPI card) ---------- */
.ck-tarjeta{position:relative;background:var(--ck-papel);border:1px solid var(--ck-borde);
  border-radius:var(--ck-r-caja);padding:var(--ck-sp-4);box-shadow:var(--ck-sh-1);
  display:flex;flex-direction:column;gap:var(--ck-sp-3);font-family:var(--ck-fuente)}
.ck-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--ck-sp-4)}

/* entrada escalonada — regla aprendida en tablero-rico: la animación con `forwards`/`both`
   queda "en efecto" para siempre y en CSS gana sobre cualquier transition de hover en la
   misma propiedad (transform). Hay que soltarla al terminar (clase .asentada vía
   addEventListener('animationend'), la agrega ChartKit.animarEntrada()). */
.ck-tarjeta.ck-lista{animation:ck-entrar .38s ease forwards}
.ck-tarjeta.ck-asentada{animation:none;opacity:1;transform:none}
@keyframes ck-entrar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---------- 4. Contenedor de canvas (Chart.js exige altura explícita) ---------- */
.ck-chart{position:relative}                 /* setear height inline o por clase del proyecto */
.ck-chart canvas{max-width:100%}
.ck-donut-wrap{position:relative;height:150px}
.ck-donut-wrap canvas{max-height:150px}

/* ---------- 5. Leyenda HTML propia (no la de Chart.js — ver practice §leyenda) ---------- */
.ck-leyenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--ck-sp-2);font-size:var(--ck-fs-caption)}
.ck-leyenda li{display:flex;align-items:baseline;gap:var(--ck-sp-2)}
.ck-leyenda .ck-punto{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ck-leyenda .ck-nombre{color:var(--ck-suave);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;flex:1}
.ck-leyenda strong{font-variant-numeric:tabular-nums;font-size:var(--ck-fs-h4);color:var(--ck-tinta);
  font-family:var(--ck-fuente-datos)}
.ck-leyenda li.ck-excluido{opacity:.4}
/* v0.2.3: variante horizontal para series temporales (leyenda arriba del gráfico) */
.ck-leyenda.ck-fila{flex-direction:row;flex-wrap:wrap;gap:var(--ck-sp-2) var(--ck-sp-4)}
.ck-leyenda.ck-fila .ck-nombre{flex:none}

/* ---------- 6. Control segmentado (toggle de vista / filtro) ---------- */
.ck-segmentado{display:flex;border:1px solid var(--ck-borde);border-radius:var(--ck-r-pill);
  overflow:hidden;background:var(--ck-lienzo)}
.ck-segmentado button{border:0;background:transparent;padding:var(--ck-sp-2) var(--ck-sp-4);
  font-size:var(--ck-fs-caption);cursor:pointer;color:var(--ck-suave);font-family:inherit;
  font-weight:600;transition:background .15s ease,color .15s ease}
.ck-segmentado button[aria-pressed="true"]{background:var(--ck-accion);color:#fff}
.ck-segmentado button:not([aria-pressed="true"]):hover{background:var(--ck-borde)}
.ck-segmentado button:disabled{opacity:.45;cursor:not-allowed}
.ck-segmentado button:disabled:hover{background:transparent}

/* ---------- 7. Tabla de datos accesible (espejo obligatorio del canvas) ---------- */
table.ck-datos{border-collapse:collapse;width:100%;font-size:var(--ck-fs-caption);
  font-family:var(--ck-fuente)}
table.ck-datos caption{text-align:left;color:var(--ck-suave);margin-bottom:var(--ck-sp-2)}
table.ck-datos th{text-align:right;border-bottom:2px solid var(--ck-tinta);
  padding:var(--ck-sp-2) var(--ck-sp-3);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ck-suave)}
table.ck-datos th:first-child,table.ck-datos td:first-child{text-align:left}
table.ck-datos td{text-align:right;border-bottom:1px solid var(--ck-borde);
  padding:var(--ck-sp-2) var(--ck-sp-3);font-variant-numeric:tabular-nums;
  font-family:var(--ck-fuente-datos)}
table.ck-datos tbody tr:hover{background:var(--ck-lienzo)}

/* ---------- 8. Procedencia técnica (progressive disclosure, componente ya probado) ---------- */
.ck-procedencia{margin-top:var(--ck-sp-4)}
.ck-procedencia summary{cursor:pointer;font-size:var(--ck-fs-caption);font-weight:700;
  color:var(--ck-suave);padding:var(--ck-sp-2) 0;list-style:none}
.ck-procedencia summary::-webkit-details-marker{display:none}
.ck-procedencia summary::before{content:"▸ ";color:var(--ck-accion)}
.ck-procedencia[open] summary::before{content:"▾ "}
/* minmax(0,1fr) + min-width:0 + break-word: fix real del overflow a 320px (WCAG 1.4.10),
   hallazgo adversarial 2026-08-19 — NO simplificar a `max-content 1fr`. */
.ck-procedencia dl{margin:var(--ck-sp-2) 0 0;display:grid;
  grid-template-columns:max-content minmax(0,1fr);gap:var(--ck-sp-2) var(--ck-sp-4);
  font-size:var(--ck-fs-caption);color:var(--ck-suave)}
.ck-procedencia dt{font-weight:700;color:var(--ck-tinta)}
.ck-procedencia dd{margin:0;overflow-wrap:break-word;min-width:0}
@media (max-width:480px){
  .ck-procedencia dl{grid-template-columns:1fr}
  .ck-procedencia dt{margin-top:var(--ck-sp-2)}
}

/* ---------- 9. Badges de honestidad del dato ---------- */
.ck-badge-ejemplo{font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:#8a5a00;background:#fff4d6;border:1px solid #f0d69a;
  border-radius:var(--ck-r-pill);padding:2px var(--ck-sp-2)}
.ck-fecha-dato{font-size:.68rem;color:var(--ck-tenue);margin:var(--ck-sp-1) 0 0}
.ck-callout-eje{font-size:var(--ck-fs-caption);color:var(--ck-suave);
  background:var(--ck-lienzo);border-left:3px solid var(--ck-accion);
  padding:var(--ck-sp-2) var(--ck-sp-3);border-radius:0 6px 6px 0}

/* ---------- 10. Estados de carga / error / vacío ---------- */
.ck-skeleton{background:linear-gradient(90deg,#00000008 25%,#00000012 37%,#00000008 63%);
  background-size:400% 100%;animation:ck-esqueleto 1.4s ease infinite;border-radius:var(--ck-r-caja)}
@keyframes ck-esqueleto{0%{background-position:100% 0}100%{background-position:0 0}}
.ck-error{color:#8a1f1f;font-size:var(--ck-fs-body)}
.ck-vacio{color:var(--ck-suave);font-size:var(--ck-fs-body);text-align:center;
  padding:var(--ck-sp-5);border:1px dashed var(--ck-borde);border-radius:var(--ck-r-caja)}

/* ---------- 11. Movimiento reducido: SIEMPRE al final, gana por orden ---------- */
@media (prefers-reduced-motion:reduce){
  .ck-tarjeta.ck-lista{animation:none;opacity:1;transform:none}
  .ck-skeleton{animation:none}
  .ck-segmentado button{transition:none}
}