/* =====================================================================
   RESTYLE FCJYDA — tipografía + elevación + color
   ---------------------------------------------------------------------
   Se enlaza el ÚLTIMO (después de app.css y app-ui.css), así que sus
   :root ganan a los anteriores y redefinen los TOKENS sin reescribir
   los miles de usos. Es aditivo y reversible: quitar el <link> de
   base.html revierte todo. No cambia maquetación, solo tipografía,
   color de líneas y sombras.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · TIPOGRAFÍA
   Inter (cuerpo) ya se carga vía fonts.css; aquí damos carácter a los
   titulares con Sora y cuadramos las cifras de las tablas.
   --------------------------------------------------------------------- */
:root {
  --font-display: 'Sora', Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.012em;
}
table {
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------
   2 · ELEVACIÓN
   Sombras más definidas y menos difusas (se acaba el "halo flotante").
   Alcanza a las tarjetas que usan sombra-token; el resto de sombras
   hardcodeadas queda para un refactor posterior con revisión visual.
   --------------------------------------------------------------------- */
:root {
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .05);
  --saas-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .05);
  --saas-shadow-hover: 0 4px 12px rgba(16, 24, 40, .10);
  --ui-shadow: 0 6px 18px rgba(16, 24, 40, .08);
}
/* Nota: la mayoría de sombras de tarjeta están hardcodeadas en reglas de alta
   especificidad (diseño bespoke). Crispar TODAS exige un refactor con revisión
   visual pantalla por pantalla; aquí solo se afinan las que usan token. */

/* ---------------------------------------------------------------------
   3 · COLOR
   Líneas más limpias y neutras (menos azul grisáceo) y texto secundario
   con algo más de contraste. Marca (rojo), acción (azul) y fondos se
   mantienen intactos a propósito: el cambio es de afinado, no de identidad.
   --------------------------------------------------------------------- */
:root {
  --line: #d9dde3;
  --line-soft: #ebeef2;
  --card-border: #e7e9ee;
  --muted: #5f6c7a;

  --saas-line: #e5e8ec;
  --saas-line-strong: #d4d9e0;
  --saas-muted: #5f6b78;

  --ui-line: #e3e8ef;
}

/* ---------------------------------------------------------------------
   4 · PORTAL KYUS — anchos fijos de la tabla de candidatos
   En escritorio el navegador repartía el ancho libremente y le daba el
   sobrante a la columna «Estado / acción» (gigante, con mucho blanco),
   apretando el resto. Con table-layout: fixed mandamos nosotros: el nombre
   se queda con el espacio grande y cada columna corta tiene su ancho justo.
   Solo escritorio; en móvil la tabla se muestra como tarjetas (max-width:760px).
   --------------------------------------------------------------------- */
@media (min-width: 761px) {
  .portal-kyu-candidates-table { table-layout: fixed; width: 100%; }
  .portal-kyu-candidates-table th:nth-child(2),
  .portal-kyu-candidates-table td:nth-child(2) { width: 64px; }   /* Edad */
  .portal-kyu-candidates-table th:nth-child(3),
  .portal-kyu-candidates-table td:nth-child(3) { width: 110px; }  /* Grado actual */
  .portal-kyu-candidates-table th:nth-child(4),
  .portal-kyu-candidates-table td:nth-child(4) { width: 118px; }  /* Fecha grado */
  .portal-kyu-candidates-table th:nth-child(5),
  .portal-kyu-candidates-table td:nth-child(5) { width: 110px; }  /* Siguiente */
  .portal-kyu-candidates-table th:nth-child(6),
  .portal-kyu-candidates-table td:nth-child(6) { width: 132px; }  /* Estado / acción */
}