/* ═══════════════════════════════════════════════════════════════════════════
 *  Setcero Simulator v2 — Mobile-First App Design System
 *  Horizontal Slider + Sticky Summary + Action Sheet
 * ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Gidolinya';
  src: url('../assets/fonts/gidolinya.woff2') format('woff2'),
       url('../assets/fonts/gidolinya.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Setcero no tiene modo oscuro: una sola línea gráfica (crema + terracota),
   igual en todo computador. "only light" además impide que Chrome oscurezca la
   página por su cuenta (auto dark theme). No reintroducir paletas oscuras acá:
   la paleta categórica de más abajo está validada contra ESTA superficie. */
:root {
  color-scheme: only light;
  --paper: #faf9f6;
  --card: #ffffff;
  --card-low: #f1f0ee;
  --chip: #e8e7e5;
  --stage: #f2f0ec;
  --ink: #1d1c1a;
  --ink-2: #6d675f;
  --line: rgba(29, 28, 26, 0.16);
  --line-soft: rgba(29, 28, 26, 0.07);
  --accent-solid: #3d3935;
  --on-accent: #ffffff;
  --terra: #d97757;
  --on-terra: #ffffff;
  --terra-soft: rgba(217, 119, 87, 0.15);
  /* Terracota utilizable como fondo con texto encima: --terra con blanco da
     3.12:1 y falla AA para texto pequeño. Esta da 5.3:1. */
  --terra-ink: #a8452a;

  --sc-success: #006d39;
  --sc-success-bg: #e6f4ed;
  --sc-warning: #b45309;
  --sc-warning-bg: #fbeee0;
  --sc-danger: #eb445a;
  --sc-danger-bg: #fde8eb;
  /* Tinta SOLO para TEXTO sobre fondo teñido. Los tokens base fallan AA ahí:
     --sc-danger (#eb445a) da 3.25:1 sobre --sc-danger-bg y --sc-warning (#b45309)
     da 4.40:1 sobre el suyo, con texto de 11px que no califica como grande.
     Estas dan 5.36:1 y 5.48:1. Los base siguen usándose en bordes y rellenos. */
  --sc-danger-ink: #be123c;
  --sc-warning-ink: #9a4a08;
  /* ── Paleta categórica ────────────────────────────────────────────────────
     Identifica CATEGORÍAS del torneo. Es multi-tono a propósito: la rampa de un
     solo tono que había antes (terracota al 10–52% de alfa) falla los cuatro
     checks del validador — el peor par adyacente daba ΔE 2.1 en visión normal,
     con piso duro 15, o sea indistinguible incluso con visión de color completa.
     Un tono único codifica MAGNITUD, no identidad.

     Este orden arranca en naranja por cercanía con la terracota de la marca y
     está validado en ambos modos: peor par adyacente CVD ΔE 9.1 claro / 8.4
     oscuro; visión normal 19.6 / 19.3. Tres tonos en claro quedan bajo 3:1
     contra la superficie, lo que exige "relieve": cada muestra va SIEMPRE
     pegada al nombre de su categoría, y la tabla de categorías es la vista de
     tabla. No reordenar ni re-escalonar sin volver a correr el validador. */
  --cat-1: #eb6834;
  --cat-2: #1baf7a;
  --cat-3: #eda100;
  --cat-4: #e87ba4;
  --cat-5: #008300;
  --cat-6: #4a3aa7;
  --cat-7: #e34948;
  --cat-8: #2a78d6;


  --shadow-paper: 0 4px 24px rgba(29, 28, 26, 0.05);
  --font-family: 'Gidolinya', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Debe calzar con el alto real de .site-nav (60px): es el punto donde se
     ancla el resumen pegajoso. Con 52 se le escondían 8 px bajo la barra. */
  --header-h: 60px;
  /* Alto de la franja compacta del resumen (la usa su propio min-height). */
  --summary-h: 48px;
  /* Alto de TODO lo que queda pegado arriba: franja compacta + medidor. Solo lo
     consume el offset de scroll; ver syncStickyHeights() en app.js. */
  --summary-stack-h: 82px;
  /* Alto del stepper. Es constante mientras no cambie el breakpoint, así que el
     resumen puede anclarse a él sin recalcular nada al expandirse. El valor real
     lo mide syncStickyHeights() en app.js; esto es solo el punto de partida. */
  --stepper-h: 90px;
  /* Alto de la franja fija de acción. Lo mide syncStickyHeights() en app.js; el
     valor de partida cubre el caso móvil, que es el más alto. */
  --action-bar-h: 64px;
}

/* ── Tratamientos del color de categoría ──────────────────────────────────
   El tono pleno de --cat-* es correcto como identidad pero grita en superficies
   grandes. Estas tres derivaciones son el vocabulario:

     --cat-tint  fondo de una superficie que lleva texto encima (chips, celdas
                 del calendario, muestras). Es el tratamiento del reporte, que es
                 el más sobrio y el que manda.
     --cat-edge  su borde, para que la superficie tenga contorno propio cuando el
                 tinte queda bajo 3:1 contra la tarjeta.
     --cat-fill  marca de datos delgada sin texto (segmentos del medidor, barras
                 de peso). Va más saturado que el tinte porque a 4–10px de alto un
                 22% desaparece, pero por debajo del tono pleno.

   Se resuelven por herencia: quien define --cat en su style los obtiene. */
:where([style*="--cat"]) {
  --cat-tint: color-mix(in srgb, var(--cat, var(--chip)) 22%, var(--card));
  --cat-edge: color-mix(in srgb, var(--cat, var(--chip)) 48%, transparent);
  --cat-fill: color-mix(in srgb, var(--cat, var(--chip)) 68%, var(--card));
}

/* ── Base ─────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .brand-text, .display-num, .verdict-headline {
  font-family: var(--font-family);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── App Navigation Header (Official Setcero Website Match) ────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
  height: 60px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--ink);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nav-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nav-link:hover, .nav-link.active {
  color: var(--terra);
  font-weight: 700;
}

.nav-cta {
  background: var(--terra, #e05e38);
  color: #ffffff !important;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(224, 94, 56, 0.25);
}

.nav-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .nav-inner { padding: 0 12px; gap: 6px; }
  .nav-logo svg { height: 24px !important; }
  .nav-links { gap: 8px; }
  .nav-link { font-size: 12px; }
  .nav-cta { padding: 5px 10px; font-size: 12px; }
}

.icon-btn {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.icon-btn:hover {
  background: var(--card-low);
  color: var(--ink);
}

/* ── Sticky Summary Card ──────────────────────────────────────────── */
.summary-card {
  position: sticky;
  /* Directo bajo el header: el stepper ya no es pegajoso, así que el veredicto
     sube y libera 90 px de pantalla en cada desplazamiento. */
  top: var(--header-h);
  z-index: 80;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.summary-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  min-height: var(--summary-h);
  gap: 8px;
  cursor: pointer;
}

.summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.summary-facts {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

/* Cada cifra es un dato con su etiqueta, no parte de una frase. Sin separadores:
   el `·` de Gidolinya se lee como guion y se come el espacio de al lado. */
.fact {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border-radius: 6px;
}

.fact-val {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fact.accent .fact-val { color: var(--terra-ink); }

.fact-label {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1;
}

/* Motion: la cifra que cambió da un salto corto. Es lo que cierra el circuito
   causa-efecto — mover el slider de canchas y ver reaccionar SOLO "canchas". */
@keyframes fact-bump {
  0%   { transform: none; }
  35%  { transform: translateY(-3px) scale(1.06); }
  100% { transform: none; }
}

.fact.bump {
  animation: fact-bump 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .fact.bump { animation: none; }
}

/* ── Veredicto vivo ──────────────────────────────────────────────── */
.verdict-strip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.verdict-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--sc-success-bg);
  color: var(--sc-success);
  white-space: nowrap;
}

.verdict-pill.tight {
  background: var(--sc-warning-bg);
  color: var(--sc-warning-ink);
}

.verdict-pill.over {
  background: var(--sc-danger-bg);
  color: var(--sc-danger-ink);
}

/* Sin partidos que agendar: no hay nada que juzgar, así que tampoco color. */
.verdict-pill.empty {
  background: var(--chip);
  color: var(--ink-2);
}

/* La razón, o la medida que lo arregla. Se recorta antes de empujar el layout:
   la barra fija no puede cambiar de alto al mover un control. */
.verdict-note {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Al cambiar de estado la tarjeta late una vez. Sin esto el usuario puede
   arrastrar un slider y no registrar que acaba de dejar de ser viable. */
@keyframes verdict-flip {
  0%   { background: var(--card); }
  22%  { background: var(--verdict-flash, var(--card)); }
  100% { background: var(--card); }
}

.summary-card.flip {
  animation: verdict-flip 0.75s ease-out;
}

.summary-card.level-ok    { --verdict-flash: var(--sc-success-bg); }
.summary-card.level-tight { --verdict-flash: var(--sc-warning-bg); }
.summary-card.level-over  { --verdict-flash: var(--sc-danger-bg); }
.summary-card.level-empty { --verdict-flash: var(--card); }

/* Texto solo para lectores de pantalla: el veredicto se anuncia desde acá, no
   desde la píldora (ver el comentario de announceVerdict en app.js). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .summary-card.flip { animation: none; }
}

/* ── Medidor de ocupación ────────────────────────────────────────── */
.capacity-meter {
  padding: 0 16px 9px;
}

.meter-track {
  position: relative;
  height: 10px;
  border-radius: 100px;
  background: var(--card-low);
  /* El fondo solo da 1.14:1 contra la tarjeta, así que con ocupación baja la
     pista desaparecía y el relleno quedaba flotando sin referencia. WCAG 1.4.11
     pide 3:1 para gráficos necesarios para entender el estado. */
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.meter-segments {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Un segmento por categoría, en la misma escala terracota que el calendario de
   canchas. El tono no es decorativo: identifica la categoría en las dos
   pantallas, así que se lee "la 3ra se está comiendo el cupo" sin leyenda. */
.meter-seg {
  height: 100%;
  background: var(--cat-fill, var(--chip));
  /* Separador del color de la superficie, 2px: es el espaciador que pide la guía
     de visualización entre rellenos apilados, para que dos categorías vecinas no
     se lean como una sola mancha. */
  border-right: 2px solid var(--card);
  transition: width 0.12s linear;
  transform-origin: left center;
}

.meter-seg:last-child { border-right: none; }

/* El color de un segmento NO cambia con el veredicto. Antes se le sumaba alfa
   según el estado, así que la misma categoría cambiaba de tono al pasar de
   "alcanza" a "no alcanza" — y eso rompe justo la premisa de que el color
   identifica la categoría en todas las pantallas. El veredicto lo comunican la
   píldora, la nota, la marca del límite y el latido de la tarjeta. */

/* popIn del lenguaje de motion de la marca (Diseno/Motion): una categoría nueva
   entra creciendo, no aparece de golpe. */
@keyframes meter-seg-in {
  from { transform: scaleX(0.7); opacity: 0; }
  to   { transform: scaleX(1);   opacity: 1; }
}

.meter-seg.popin {
  animation: meter-seg-in 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

/* Dónde quedó el cupo cuando la carga se pasó. Es la lectura del desborde: se ve
   cuánto sobresale, en vez de un porcentaje mayor a 100. */
.meter-limit {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--card);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .meter-seg.popin { animation: none; }
}

.meter-legend {
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  /* Si envuelve a dos líneas, --summary-stack-h queda obsoleto y el offset de
     scroll deja un hueco. Se mantiene en una línea. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-pairs {
  color: var(--terra);
  font-weight: 700;
}

.summary-toggle {
  background: none;
  border: none;
  color: var(--ink-2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.2s;
  flex-shrink: 0;
}

.summary-toggle:hover {
  background: var(--card-low);
}

.summary-toggle.expanded {
  transform: rotate(180deg);
}

.summary-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 16px;
}

.summary-detail.open {
  max-height: 400px;
  padding: 0 16px 14px;
}

/* El resumen crece en flujo al expandirse, así que debería correr el contenido de
   abajo. No lo hacía por el SCROLL ANCHORING del navegador: al detectar que algo
   creció por encima del viewport, Chrome ajusta el scrollTop para mantener estable
   lo que se está viendo — y el resultado es que el panel se dibuja encima. Con el
   anclaje desactivado el crecimiento se traduce en el desplazamiento esperado.
   El costo es nulo acá: no hay contenido que se cargue de forma diferida arriba,
   que es el caso para el que existe el anclaje. */
body {
  overflow-anchor: none;
}

@media (prefers-reduced-motion: reduce) {
  .summary-detail { transition: none; }
}

/* Detalle: dato → valor. Reemplaza la fila de KPIs y el listado con checks, que
   entre los dos repetían tres veces los días y dos veces los turnos. */
.summary-specs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}

.spec-row:last-child { border-bottom: none; }

.spec-row dt {
  font-size: 11.5px;
  color: var(--ink-2);
  flex-shrink: 0;
}

.spec-row dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Las categorías van con su muestra de color: es lo que le da significado a los
   segmentos del medidor y a la grilla del calendario. */
.spec-row dd:has(.spec-cat) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: flex-end;
}

.spec-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  white-space: nowrap;
}

.cat-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
  /* Tinte + borde, igual que los chips del reporte: es el tratamiento sobrio, y
     el borde le da contorno propio a los tonos que quedan bajo 3:1 en claro. */
  background: var(--cat-tint, var(--chip));
  box-shadow: inset 0 0 0 1px var(--cat-edge, var(--line));
}

/* Celda del nombre en la tabla de categorías: la muestra queda a la izquierda del
   campo, alineada con el color que esa categoría tiene en el medidor y en el
   calendario de canchas. */
.cat-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-name-cell .cat-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

/* ── Fila de categoría ───────────────────────────────────────────────
   La tabla dejó de ser "nombre, número y una ×": cada categoría muestra la
   estructura que va a tener y cuánto pesa sobre la carga del torneo. */
.cat-cell-name { vertical-align: top; }

/* La estructura real, en el idioma del torneo: "4 grupos de ~3 · clasifican 8". */
.cat-structure {
  display: block;
  margin: 3px 0 0 20px;
  font-size: 10.5px;
  color: var(--ink-2);
  line-height: 1.3;
}

/* Sugerencia de cupo "redondo": grupos parejos y llave sin previas. */
.cat-tidy {
  display: block;
  margin: 4px 0 0 20px;
  font-size: 10.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.cat-tidy-chip {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 1px;
  border: 1px solid var(--terra);
  border-radius: 100px;
  background: none;
  color: var(--terra);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cat-tidy-chip:hover {
  background: var(--terra);
  color: #fff;
}

/* Nombre del patrón activo dentro del título de la sugerencia de horario. */
.ss-preset-tag {
  font-weight: 500;
  color: var(--ink-2);
  font-size: 11px;
}

.cat-cell-matches { vertical-align: top; }

.cat-matches {
  display: block;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cat-breakdown {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-2);
  line-height: 1.3;
}

/* Cuánto de la carga total se lleva esta categoría, en su propio color: la misma
   lectura del medidor del resumen, desglosada por categoría. */
.cat-share {
  display: block;
  margin-top: 5px;
  height: 4px;
  border-radius: 100px;
  background: var(--card-low);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
}

.cat-share-fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--cat-fill, var(--chip));
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* La × pasa a ser un botón con área táctil real, no un glifo suelto. */
.btn-delete-cat {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-delete-cat:hover {
  background: var(--sc-danger-bg);
  color: var(--sc-danger-ink);
}

/* Sin override para oscuro: la muestra usa --cat, y los tokens --cat-1..8 ya
   traen sus propios pasos escalonados para la superficie oscura. */

/* ── Container (Mobile-First Frame) ────────────────────────────────── */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 0 40px;
  /* Al cambiar de paso se hace scrollIntoView sobre este contenedor. Sin este
     margen el scroll lo lleva a y=0, justo detrás del header y el resumen, que
     son sticky: el inicio del paso quedaba tapado. El stepper ya no cuenta —
     scrollea con la página. */
  scroll-margin-top: calc(var(--header-h) + var(--summary-stack-h));
}

/* ── Bracket Stepper Indicator (4 nodes) ──────────────────────────── */
/* El stepper NO se queda pegado: entre header (52), stepper (90) y resumen (92)
   se comían 234 px fijos —el 35% de un teléfono de 667— y el primer control del
   paso quedaba enterrado bajo la barra al desplazarse. El resumen sí se queda,
   porque el veredicto es lo único que hay que tener a la vista todo el tiempo;
   el stepper es navegación ocasional y cada paso ya dice "Paso N de 4" en su
   propia cabecera. */
.stepper-section {
  z-index: 90;
  background: var(--paper);
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.stepper-bracket {
  background: var(--stage);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 12px 8px;
  position: relative;
  overflow: hidden;
}

.bracket-nodes {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.node-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--ink-2);
  transition: color 0.25s ease, transform 0.2s ease;
  flex: 1;
}

.node-item:active {
  transform: scale(0.95);
}

.node-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.3s cubic-bezier(0.3, 1.2, 0.4, 1);
  position: relative;
  z-index: 3;
}

.node-item.active .node-dot {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--on-terra, #ffffff) !important;
  font-weight: 800;
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--terra-soft), 0 3px 8px rgba(217, 119, 87, 0.35);
}

.node-item.completed .node-dot {
  background: var(--card);
  border: 2.5px solid var(--terra);
  color: var(--terra);
  font-weight: 800;
}

.node-label {
  font-size: 9.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 600;
}

.node-item.active .node-label {
  color: var(--ink);
  font-weight: 700;
}

/* Bracket SVG Lines — Dynamically Centered via JS */
.bracket-svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 1;
  pointer-events: none;
}

.bracket-line-bg {
  stroke: var(--line-soft);
  stroke-width: 2.5;
  fill: none;
}

.bracket-line-active {
  stroke: var(--terra);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  /* El trazo se revela con dashoffset — la llave que se dibuja, firma de
     movimiento de la marca. Antes se animaba `x2`, un atributo geométrico cuya
     transición no está garantizada en todos los navegadores. */
  transition: stroke-dashoffset 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .bracket-line-active { transition: none; }
}

/* ── Horizontal Slides Viewport ──────────────────────────────────── */
.slides-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  /* El alto lo fija app.js al del paso activo (syncViewportHeight): sin esto,
     todos los pasos comparten el alto del más largo (Jornadas) y los demás
     quedan con un vacío enorme al final. */
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.slides-track {
  display: flex;
  width: 100%;
  /* flex-start: cada slide con su alto natural; el default (stretch) los
     igualaba todos al más alto. */
  align-items: flex-start;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.slide {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

.slide-inner {
  /* El relleno inferior deja libre la franja fija de "Crear este torneo": sin él
     la píldora flotante tapaba el final de cada paso (el calendario de canchas
     quedaba cortado por la mitad). */
  padding: 22px 16px calc(var(--action-bar-h) + 20px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* ── Verdict Banner (compact, inside slide 1) ────────────────────── */
.verdict-banner {
  background: var(--stage);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-left: 4px solid var(--sc-success);
}

/* Los tres grados del veredicto, con el mismo código de color que la píldora de
   la barra fija — la clase la escribe `renderVerdict` desde el mismo objeto. */
.verdict-banner.level-ok    { border-left-color: var(--sc-success); }
.verdict-banner.level-tight { border-left-color: var(--sc-warning); }
.verdict-banner.level-over  { border-left-color: var(--sc-danger); }

.verdict-headline {
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 4px;
}

.verdict-highlight {
  color: var(--terra);
}

.verdict-subtitle {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
}

/* ── Touch Form Controls ─────────────────────────────────────────── */
.input-group {
  margin-bottom: 14px;
}

.input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.input-label {
  font-size: 13px;
  color: var(--ink-2);
}

.input-hint {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: -2px;
}

.slider-control {
  width: 100%;
  accent-color: var(--accent-solid);
  cursor: pointer;
  height: 8px;
  border-radius: 100px;
  margin: 4px 0;
}

.num-input {
  width: 80px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card-low);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}

.num-input:focus {
  outline: 2px solid var(--terra);
  background: var(--card);
}

/* Selector de formato del torneo. Misma píldora que .num-input para que la fila
   de etiqueta + control se lea igual que las de parejas y canchas. */
.select-input {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card-low);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.select-input:focus {
  outline: 2px solid var(--terra);
  background: var(--card);
}

/* Casilla del partido por el 3er puesto. El checkbox nativo mide 13px y quedaba
   diminuto al lado de las píldoras de .num-input / .select-input de la misma fila. */
.check-input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--terra);
  cursor: pointer;
  flex: none;
}

.check-input:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* ── Presets de horario ──────────────────────────────────────────── */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px;
}

.preset-chip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card-low);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.preset-chip:hover { background: var(--chip); }

.preset-chip.active {
  /* --terra-ink en vez de --terra: el par --terra/blanco da 3.12:1 y falla AA. */
  background: var(--terra-ink);
  border-color: var(--terra-ink);
  color: var(--on-terra);
}

.preset-custom {
  align-self: center;
  font-size: 11px;
  color: var(--ink-2);
  font-style: italic;
}

/* ── Horario sugerido ────────────────────────────────────────────── */
.schedule-suggestion {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--terra);
  border-radius: 0 12px 12px 0;
  background: var(--stage);
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* Cuando ningún horario alcanza, el color deja de ser una invitación. */
.schedule-suggestion.impossible {
  border-left-color: var(--sc-danger);
  background: var(--sc-danger-bg);
}

/* Cabe, pero a costa de jugar entre semana de día: sirve con condiciones. */
.schedule-suggestion.conditional {
  border-left-color: var(--sc-warning);
}

.ss-warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--sc-warning-bg);
  color: var(--sc-warning-ink);
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 600;
}

.ss-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.ss-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

.ss-apply {
  margin-top: 10px;
  padding: 8px 14px;
  border: none;
  border-radius: 100px;
  background: var(--terra-ink);
  color: var(--on-terra);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ss-apply:hover { filter: brightness(0.94); }

/* Dos salidas al mismo problema, una al lado de la otra: estirar el horario de
   todos los días, o abrir mañanas solo donde haga falta. */
.ss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ss-alt {
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid var(--terra-ink);
  border-radius: 100px;
  background: transparent;
  color: var(--terra-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ss-alt:hover { background: var(--terra-soft); }

/* ── Stepper de días ─────────────────────────────────────────────── */
.days-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card-low);
  padding: 2px;
}

.days-step {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.days-step:hover:not(:disabled) { background: var(--chip); }

.days-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.days-value {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Filas de jornada ────────────────────────────────────────────── */
.day-date {
  font-size: 11px;
  color: var(--ink-2);
}

/* El fin de semana se distingue porque es donde el horario razonable cambia. */
.day-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--terra-soft);
  color: var(--terra-ink);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Sugerencia junto al campo, solo cuando esa jornada se queda corta. */
.day-suggest {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  /* 10px sobre la tarjeta: --terra da 3.36:1, --terra-ink pasa AA. */
  color: var(--terra-ink);
}

/* Cantidad de días + atajo para volver al mínimo, en la misma fila. */
.days-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-inline-reset {
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--terra);
  cursor: pointer;
  text-decoration: underline;
}

/* La nota pasa a tono de advertencia cuando los días elegidos no alcanzan. */
.input-hint-warn {
  color: var(--sc-warning);
  font-weight: 600;
}

/* ── Levers / Suggestions ───────────────────────────────────────── */
.levers-card {
  background: var(--sc-warning-bg);
  border: 1px solid var(--sc-warning);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.levers-title {
  font-size: 13px;
  color: var(--sc-warning);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lever-item {
  background: var(--card);
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--ink);
}

/* ── Data Tables ─────────────────────────────────────────────────── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 8px 8px;
  background: var(--card-low);
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.data-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}

.table-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
}

.table-input:focus {
  outline: 2px solid var(--terra);
}

/* Category Actions */
.cat-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ── Financial Inputs ────────────────────────────────────────────── */
.fin-inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
}

.fin-inputs-3col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fin-inputs-3col .input-group:last-child {
  grid-column: span 2;
}

@media (min-width: 500px) {
  .fin-inputs-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fin-inputs-3col .input-group:last-child {
    grid-column: span 1;
  }
}

.input-group {
  margin-bottom: 14px;
  min-width: 0;
}

.input-with-prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--card-low);
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.input-prefix {
  padding: 6px 0 6px 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  flex-shrink: 0;
}

.fin-input {
  border: none;
  background: transparent;
  padding: 8px 8px 8px 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  flex: 1;
}

.fin-input:focus {
  outline: none;
}

.input-with-prefix:focus-within {
  outline: 2px solid var(--terra);
  background: var(--card);
}

/* Financial Results */
.fin-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
}

.fin-result-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.fin-result-card {
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.fin-result-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-2);
}

.fin-result-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.fin-result-sub {
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 1px;
}

/* Semantic colors for financial cards */
.fin-income {
  background: var(--sc-success-bg);
}

.fin-income .fin-result-val {
  color: var(--sc-success);
}

.fin-rent {
  background: var(--card-low);
}

.fin-costs {
  background: var(--card-low);
}

.fin-net {
  background: var(--sc-success-bg);
}

.fin-net.negative {
  background: var(--sc-danger-bg);
}

.fin-net .fin-result-val {
  color: var(--sc-success);
}

.fin-net.negative .fin-result-val {
  color: var(--sc-danger);
}

/* Recommended Setcero Plan Card */
.plan-recommendation-card {
  margin-top: 14px;
  padding: 16px 14px;
  border-radius: 14px;
  background: var(--card-low);
  border: 1.5px solid var(--terra);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

/* `display: flex` le gana al `display: none` que el navegador aplica a [hidden].
   Sin esta regla, apagar SHOW_SETCERO_PLAN no ocultaba nada: la tarjeta seguía
   a la vista con los valores de ejemplo del HTML ("Abono Pro · $50.000/mes"),
   que además nunca se actualizan porque con el plan apagado no se cotiza. */
.plan-recommendation-card[hidden] {
  display: none;
}

.plan-rec-header {
  display: flex;
  align-items: center;
}

.plan-rec-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--terra);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.plan-rec-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-rec-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}

.plan-rec-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--terra);
}

/* Precio de lista, tachado al lado del precio de lanzamiento. */
.plan-rec-strike {
  margin-left: 6px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: line-through;
}

.plan-rec-desc {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
  margin: 0;
}

.plan-rec-desc + .plan-rec-desc {
  margin-top: 8px;
}

/* La cifra de Setcero contra el arriendo de canchas: es la comparación que
   hace entendible el precio, así que se separa del detalle del pase. */
.plan-rec-equiv {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft, rgba(30, 27, 24, 0.07));
}

.plan-rec-equiv[hidden] {
  display: none;
}

/* ── Primary & Secondary Buttons ─────────────────────────────────── */
.btn-primary {
  width: 100%;
  min-height: 48px;
  background: var(--accent-solid);
  color: var(--on-accent);
  padding: 12px 20px;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, opacity 0.2s ease;
  margin-top: 16px;
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Distinct Primary CTA button for creating tournament vs step navigation */
.btn-handoff, #btn-handoff-bottom {
  background: var(--terra, #e05e38) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 6px 20px rgba(224, 94, 56, 0.38) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
}

.btn-handoff:hover, #btn-handoff-bottom:hover {
  background: #c84d2a !important;
  box-shadow: 0 8px 24px rgba(224, 94, 56, 0.5) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  flex: 1;
  min-height: 40px;
  background: var(--card-low);
  color: var(--ink);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s ease;
}

.btn-secondary:active {
  transform: scale(0.98);
}

.btn-ghost {
  flex: 0;
  background: none;
  border: none;
  color: var(--ink-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 12px;
  white-space: nowrap;
}

.btn-ghost:hover {
  color: var(--ink);
}

/* ── FAB "Crear este torneo en Setcero" ──────────────────────────── */
/* Botón circular fijo abajo a la derecha. Colapsado ocupa solo 56px y no tapa
   el contenido; al tocarlo se despliega la etiqueta con el texto completo. */
.handoff-fab {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 10px;
}

.handoff-fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--terra, #e05e38);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(224, 94, 56, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  flex: none;
}

.handoff-fab-btn:hover {
  background: #c84d2a;
  box-shadow: 0 8px 24px rgba(224, 94, 56, 0.5);
}

.handoff-fab-btn:active { transform: scale(0.94); }

.handoff-fab-btn svg { transition: transform 0.25s ease; }
.handoff-fab.open .handoff-fab-btn svg { transform: rotate(45deg); }

/* La etiqueta nace oculta y se despliega hacia la izquierda del botón. */
.handoff-fab-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  border-radius: 100px;
  padding: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 13px;
  transition: max-width 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}

.handoff-fab.open .handoff-fab-label {
  max-width: 280px;
  opacity: 1;
  pointer-events: auto;
  padding: 0 18px;
}

/* Confirmación antes de salir hacia la app */
.handoff-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 28, 26, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.handoff-confirm-backdrop[hidden] { display: none; }

.handoff-confirm-card {
  background: var(--card);
  border-radius: 18px;
  padding: 22px 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.handoff-confirm-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--ink);
}

.handoff-confirm-card p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.handoff-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.handoff-confirm-actions .handoff-go {
  width: auto;
  min-height: 44px;
  margin-top: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 100px;
  font-size: 13px;
}

@media (min-width: 700px) {
  .handoff-fab {
    bottom: 26px;
    right: calc((100vw - 640px) / 2 - 90px);
  }

  /* En pantallas donde la columna ocupa casi todo, el FAB vuelve al borde. */
  @media (max-width: 860px) {
    .handoff-fab { right: 16px; }
  }

  .container {
    padding-bottom: 96px;
  }
}

/* ── Action Sheet (Bottom Sheet for Fine Tuning) ─────────────────── */
.action-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.3s ease;
}

.action-sheet-backdrop.visible {
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  max-width: 640px;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
  max-height: 85vh;
  overflow-y: auto;
}

.action-sheet.open {
  transform: translateY(0);
}

.action-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--chip);
  margin: 10px auto 0;
}

.action-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.action-sheet-title {
  font-size: 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.action-sheet-done {
  background: none;
  border: none;
  color: var(--terra);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}

.action-sheet-done:hover {
  background: var(--terra-soft);
}

.action-sheet-body {
  padding: 16px 20px 32px;
}

.as-input-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.as-input-group:last-of-type {
  border-bottom: none;
}

.as-label {
  font-size: 14px;
  color: var(--ink);
}

.as-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.as-input {
  width: 72px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-low);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}

.as-input:focus {
  outline: 2px solid var(--terra);
  background: var(--card);
}

.as-unit {
  font-size: 12px;
  color: var(--ink-2);
  min-width: 24px;
}

/* ── Duración del bloque de cancha ───────────────────────────────── */
.block-config {
  margin: 18px 0 0;
}

.block-config-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.block-config-field label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 5px;
}

.block-config-input {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 0 10px 0 12px;
}

.block-config-input:focus-within {
  border-color: var(--terra);
}

.block-config-input input {
  width: 100%;
  min-width: 0;
  border: none;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 0;
  outline: none;
}

.block-config-input span {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--ink-2);
}

.block-config-result {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 8px 0 0;
}

/* ── Calendario de canchas ───────────────────────────────────────── */
.calendar-block {
  margin: 20px 0 8px;
  padding: 16px 14px;
  background: var(--card-low);
  border-radius: 18px;
}

.calendar-title {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.calendar-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 4px 0 14px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.calendar-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.calendar-arrow:not(:disabled):hover {
  background: var(--chip);
}

.calendar-arrow:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

.calendar-day-info {
  flex: 1;
  display: grid;
  gap: 1px;
  text-align: center;
  min-width: 0;
}

.calendar-day-name {
  font-size: 14px;
  color: var(--ink);
}

.calendar-day-date {
  font-size: 11.5px;
  color: var(--ink-2);
  text-transform: capitalize;
}

.calendar-slider {
  margin: 12px 0 4px;
}

.calendar-slider:disabled {
  opacity: 0.3;
}

.calendar-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.calendar-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10.5px;
  background: var(--card);
}

.calendar-grid th,
.calendar-grid td {
  border: 1px solid var(--line-soft);
  padding: 6px 4px;
  text-align: center;
}

.calendar-grid thead th {
  font-size: 9.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Fila de agrupación: "Canchas" una sola vez, en lugar de repetir la palabra en
   cada columna (con 5 canchas en móvil las etiquetas quedaban cortadas). */
.calendar-group-row th {
  background: var(--card-low);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* El número solo: la columna puede ser angosta porque la palabra ya está arriba. */
.calendar-court-num {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.calendar-time {
  width: 82px;
  min-width: 82px;
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-2);
  text-align: left !important;
  white-space: nowrap;
}

.calendar-slot.used {
  /* Acá el color va DEBAJO de texto (la sigla de la categoría), así que el tono
     pleno taparía la letra: `color-mix` lo baja al 22% sobre la tarjeta y el
     borde al 45% mantiene la identidad legible. */
  background: var(--cat-tint, var(--chip));
  color: var(--ink);
  /* Sin anillo de color. En una grilla densa cada celda toca a cuatro vecinas, así
     que los bordes se suman y compiten con el propio dato: la tabla ya tiene su
     línea, y el tinte solo alcanza para identificar la categoría. El borde se
     reserva para los chips sueltos de la leyenda, donde sí define la forma. */
}

.calendar-slot.free {
  color: var(--ink-2);
  opacity: 0.4;
}

/* Contenido del turno: arriba la sigla de la categoría con la referencia del
   partido ("4ta A1"), abajo el cruce. El "vs" va en su propia línea porque con
   5 canchas en móvil la celda no da para una sola. */
.calendar-slot .slot-ref {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.calendar-slot .slot-cross {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.calendar-slot .slot-cross i {
  display: block;
  font-style: normal;
  opacity: 0.5;
}

/* Holgura: el turno está reservado pero no lleva partido. Es el margen de la
   agenda —lo que absorbe un atraso—, así que se muestra vacío y punteado en vez
   de pintado como juego: un colchón dibujado como partido es una promesa falsa. */
.calendar-slot.slack {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--cat, var(--chip)) 45%, transparent);
}

.calendar-slot .slot-slack {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.4;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-2);
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.calendar-chip {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 100px;
  font-size: 9.5px;
  color: var(--ink);
  background: var(--cat-tint, var(--chip));
  /* Más suave que --cat-edge: el chip es chico y un borde al 48% lo convierte en
     un contorno con relleno, en vez de una mancha de color con forma. */
  border: 1px solid color-mix(in srgb, var(--cat, var(--chip)) 30%, transparent);
}

/* Chip de la leyenda para el turno de holgura: mismo lenguaje que la celda. */
.calendar-chip.slack {
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ink-2) 45%, transparent);
}

/* En oscuro los tokens --cat-* ya traen su propio escalonado y `color-mix` usa
   --card del tema, así que el tinte se resuelve solo: sin override de alfa. */

/* ── Selector de margen de la agenda ─────────────────────────────── */
.as-help {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 4px 0 10px;
}

.margin-options {
  display: grid;
  gap: 8px;
}

.margin-option {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}

.margin-option:hover {
  background: var(--card-low);
}

.margin-option.active {
  border-color: var(--terra);
  background: var(--terra-soft);
}

.margin-option:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

.margin-option-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.margin-option-name {
  font-size: 14.5px;
  color: var(--ink);
}

.margin-option-tag {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terra);
  border: 1px solid var(--terra);
  border-radius: 100px;
  padding: 1px 7px;
}

.margin-option-detail {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ── Identificación opcional del torneo (alimenta el reporte) ────── */
.input-group-identity {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-low);
  border-radius: 14px;
}

.identity-row {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.input-optional {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  opacity: 0.7;
  margin-left: 5px;
}

.text-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.text-input::placeholder {
  color: var(--ink-2);
  opacity: 0.55;
}

.text-input:focus {
  outline: 2px solid var(--terra);
  outline-offset: -1px;
}

/* ── Botón del reporte ───────────────────────────────────────────── */
.btn-report {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.btn-report:hover {
  background: var(--card-low);
}

.btn-report:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* ── Reduced Motion Accessibility ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Simulaciones guardadas ──────────────────────────────────────────────
   Le dan sentido a la referencia que imprime el reporte: el código pasa de ser
   una huella para comparar copias en papel a resolver el escenario completo. */
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saved-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-low);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.saved-item:hover { background: var(--chip); }

.saved-ref {
  font-family: var(--rp-font-data, inherit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--terra-ink);
  white-space: nowrap;
}

.saved-desc {
  font-size: 11.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-date {
  font-size: 10px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Engranaje de "Ajuste fino" en la barra superior. */
.nav-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-low);
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-gear:hover {
  background: var(--chip);
  color: var(--ink);
}

/* ── Sorteo con cabezas de serie (Paso 3) ─────────────────────────────── */

.sorteo-panel {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.sorteo-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}

.sorteo-purpose {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 56ch;
}

.sorteo-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sorteo-seeds-group input {
  width: 90px;
}

.sorteo-meta {
  font-size: 0.8rem;
  color: var(--ink-2);
  margin: 4px 0 14px;
}

.sorteo-category {
  margin-bottom: 18px;
}

.sorteo-category-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.sorteo-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.sorteo-group {
  background: var(--card-low);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
}

.sorteo-group-name {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.sorteo-team-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sorteo-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--ink);
  padding: 3px 0;
}

.sorteo-team-tbd {
  color: var(--ink-2);
  font-style: italic;
}

.sorteo-seed-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--terra-ink);
  background: var(--terra-soft);
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
}