/* ==========================================================================
   LOS CUARTOS (PLANUI U2c punto 3): el `<dialog id="cuarto">` con el sistema
   nuevo. La barra de abajo vive en shell.css; acá va el diálogo que abre:
   una capa en la noche del tono sobre el mundo (que se adivina detrás), la
   cabecera con las pestañas (las mismas de la barra, con su glifo) y el cuerpo
   en paneles del kit: Vos con su ficha y el radar de tu juego contra lo que
   pide tu línea, Temporada y Mundo en columnas, Carrera y Crónica.
   ========================================================================== */

/* --- El diálogo ------------------------------------------------------------ */
.cuarto {
  position: fixed; inset: var(--franja-alto) 0 0 0; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--ink);
  background:
    radial-gradient(70% 60% at 80% 0%, color-mix(in srgb, var(--tono-luz) 9%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--tono-noche) 90%, transparent), color-mix(in srgb, var(--tono-vacio) 96%, transparent) 60%);
  box-shadow: inset 0 1px 0 var(--filete);
  overflow: hidden;
}
.cuarto[open] { display: flex; flex-direction: column; animation: cuarto-entra 260ms var(--expo); }
@keyframes cuarto-entra { from { opacity: 0; transform: translateY(8px); } }
/* La franja queda a la vista (y quieta) arriba del cuarto: el velo no la tapa. */
.cuarto::backdrop { background: transparent; }
html[data-reducido] .cuarto[open] { animation: none; }
@media (prefers-reduced-motion: reduce) { .cuarto[open] { animation: none; } }

.cuarto-cabecera {
  display: flex; align-items: stretch; gap: 16px; flex: 0 0 auto; width: 100%; max-width: calc(var(--cuarto-ancho) + 2 * var(--margen)); height: 52px; margin: 0 auto; padding: 0 var(--margen);
  box-shadow: inset 0 -1px 0 var(--linea);
}
.cuarto-pestanas { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cuarto-pestanas::-webkit-scrollbar { display: none; }
.cuarto-pestanas .cuarto-boton[aria-selected="true"] { color: var(--ink); }
.cuarto-pestanas .cuarto-boton[aria-selected="true"]::after { transform: none; }
.cuarto-cerrar {
  all: unset; box-sizing: border-box; cursor: pointer; align-self: center; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; height: 32px; padding: 0 12px;
  border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--linea-fuerte); font: 600 11px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
  transition: background-color 140ms ease, color 140ms ease;
}
.cuarto-cerrar:hover { color: var(--ink); background: var(--luz-tenue); }
.cuarto-cerrar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cuarto-cerrar-x { display: none; }

.cuarto-cuerpo {
  flex: 1 1 auto; width: 100%; max-width: calc(var(--cuarto-ancho) + 2 * var(--margen)); margin: 0 auto; padding: 22px var(--margen) 40px;
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px;
}
/* Temporada y Mundo: sus paneles uno al lado del otro cuando entran; Vos, la ficha y el radar. */
@media (min-width: 900px) {
  .cuarto:is([data-cuarto="mundo"], [data-cuarto="temporada"]) .cuarto-cuerpo { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .cuarto[data-cuarto="vos"] .cuarto-cuerpo { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; }
}

/* --- Los paneles adentro: la superficie del kit --------------------------- */
.cuarto :is(.panel-contexto, .ficha-card, .cronica-anio, .carrera-bloque, .cuarto-radar) {
  position: relative; margin: 0; padding: 20px 22px; border: 0; border-radius: var(--r-panel);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--filete), 0 24px 60px -34px var(--sombra);
}
.cuarto .ficha-card--dorada { box-shadow: inset 0 0 0 1px var(--gold), 0 0 40px -12px var(--gold-glow); }
.cuarto .panel-contexto-titulo, .cuarto .carrera-bloque-titulo {
  margin: 0 0 14px; font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--luz-texto);
}
.cuarto-vacio { margin: 0; padding: 18px 20px; border-radius: var(--r-panel); color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--linea); }

/* --- Vos: el radar de tu juego --------------------------------------------- */
.cuarto-radar { display: grid; justify-items: center; gap: 14px; }
.cuarto-radar-k { justify-self: stretch; margin: 0; font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--luz-texto); }
.cuarto-radar svg { max-width: 100%; height: auto; }
.cuarto-radar-ley { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; font: 500 11px / 1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.cuarto-radar-ley span { display: inline-flex; align-items: center; gap: 8px; }
.cuarto-radar-ley i { width: 18px; height: 3px; border-radius: 2px; }
.cuarto-radar-vos { background: var(--live); }
.cuarto-radar-rol { background: var(--ink-mute); }
.cuarto-radar-lectura { justify-self: stretch; display: grid; gap: 6px; margin: 0; padding: 12px 0 0; list-style: none; box-shadow: inset 0 1px 0 var(--linea); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.cuarto-radar-lectura b { font-weight: 700; }

/* --- Ayuda -------------------------------------------------------------- */
.cuarto-ayuda { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 22px; margin: 0; }
.cuarto-ayuda dt { font: 700 13px / 1.3 var(--f-mono); letter-spacing: 0.06em; color: var(--luz-texto); }
.cuarto-ayuda dd { margin: 0; color: var(--ink-dim); }

/* --- Temporada: la tabla cerrada entre splits ------------------------------- */
.cuarto .panel-contexto--final { box-shadow: inset 0 0 0 1px var(--filete-fuerte); }
.cuarto .panel-contexto--final .panel-contexto-titulo { color: var(--gold); }
.cuarto-temporada-posicion { margin: 0; font: 900 32px / 1 var(--f-display); font-stretch: var(--ancho-numero); color: var(--ink); }

/* --- Crónica: por año y por split ------------------------------------------ */
.cronica { display: grid; gap: 12px; }
.cronica-anio { padding: 0; }
.cronica-anio-titulo { display: flex; align-items: baseline; gap: 14px; padding: 16px 22px; cursor: pointer; list-style: none; }
.cronica-anio-titulo::-webkit-details-marker { display: none; }
.cronica-anio-titulo::before { content: "▸"; color: var(--ink-mute); transition: transform 180ms var(--expo); }
.cronica-anio[open] > .cronica-anio-titulo::before { transform: rotate(90deg); }
.cronica-anio-titulo:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--r-panel); }
.cronica-anio-numero { font: 900 26px / 1 var(--f-display); font-stretch: var(--ancho-numero); font-variant-numeric: tabular-nums; color: var(--ink); }
.cronica-anio-nota { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-mute); }
.cronica-anio-cuerpo { display: grid; gap: 18px; padding: 0 22px 20px; }
.cronica-split-titulo { margin: 0 0 8px; padding-bottom: 6px; box-shadow: inset 0 -1px 0 var(--linea); font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--luz-texto); }
.cronica-lista { margin-top: 0; }

/* --- El celular: el cuarto a pantalla completa, las pestañas corren de costado ---- */
@media (max-width: 640px) {
  .cuarto { inset: var(--franja-alto) 0 0 0; }
  .cuarto-cabecera { gap: 8px; height: 48px; padding: 0 10px; }
  .cuarto-pestanas .cuarto-boton { padding: 0 8px; }
  .cuarto-pestanas .cuarto-boton .ln-ico { display: none; }
  /* el botón es una ✕ (el nombre accesible sigue siendo "Cerrar") y las pestañas entran enteras */
  .cuarto-cerrar { padding: 0 10px; }
  .cuarto-cerrar-texto, .cuarto-cerrar kbd { display: none; }
  .cuarto-cerrar-x { display: inline; }
  .cuarto-cuerpo { padding: 14px 10px 28px; gap: 12px; }
  .cuarto :is(.panel-contexto, .ficha-card, .carrera-bloque, .cuarto-radar) { padding: 16px; }
  .cuarto-ayuda { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cuarto-ayuda dd { margin-bottom: 10px; }
}