/* ═══════════════════════════════════════════════════════════════════════
 * UMBRAL · CLUB — sistema de diseño de la instancia EL COLISEO.
 *
 * TESIS: la estela inscrita.
 * Lo romano entra por la letra, el registro y la regla grabada; nunca por
 * el disfraz. La portada es monumental; el software operativo es silencioso.
 * Ambos comparten tokens, tipografía, ritmo y foco: son un producto, no dos.
 *
 * TRES VOCES TIPOGRÁFICAS, cada una con un trabajo:
 *   inscripción  → la marca y los registros. Capitales de origen lapidario.
 *   atlética     → la estructura: horas, etiquetas, cifras del cuadrante.
 *   evidencia    → monoespaciada. Identificadores, códigos y sellos: el nivel
 *                  técnico tiene su propio registro visual para no invadir el
 *                  humano. Que se distinga la lectura de la prueba.
 *
 * EL ORO ES JERARQUÍA Y ACCIÓN. Nunca es texto corrido ni decoración.
 * LA TEXTURA vive detrás de la portada y jamás detrás de un dato.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Sustrato: carbón cálido en escalones, no negro plano ───────────── */
  --ink:      #0A0A0B;   /* fondo de página */
  --pit:      #0F0F11;   /* fondo alterno de registro */
  --surface:  #16161A;   /* superficie */
  --raised:   #1E1E23;   /* superficie elevada */
  --ridge:    #27272E;   /* superficie de evidencia */

  /* ── Líneas: la regla grabada ──────────────────────────────────────── */
  --line:        #24242B;
  --line-strong: #35353E;
  --line-gold:   rgba(212, 165, 68, 0.42);

  /* ── Tinta ─────────────────────────────────────────────────────────── */
  --bone:     #F4F0E8;   /* texto principal   */
  --bone-dim: #D2CCC0;   /* texto secundario  */
  --muted:    #A29D94;   /* texto terciario   */
  --faint:    #8F8A81;   /* apoyo: identificadores y contadores. Medido AA. */

  /* ── Marca ─────────────────────────────────────────────────────────── */
  --gold:        #D4A544;
  --gold-bright: #F0C463;
  --gold-deep:   #A87F2C;
  --bronze:      #8A6A32;
  --blood:       #EA4055;   /* subido dos veces: #C41230 y #E0243F no llegaban a AA */
  --gold-ink:    #120E04;   /* tinta sobre oro */

  /* ── Estado. Cada uno legible sobre --ink y sobre --surface ────────── */
  --ok:      #6FCB5B;
  --ok-dim:  rgba(111, 203, 91, 0.14);
  --warn:    #F0A93A;
  --warn-dim:rgba(240, 169, 58, 0.13);
  --stop:    #F2596E;
  --stop-dim:rgba(242, 89, 110, 0.13);
  --info:    #7FB6E8;
  --info-dim:rgba(127, 182, 232, 0.13);

  /* ── Tipografía ─────────────────────────────────────────────────────
   * Inscripción: las capitales de Palatino descienden de la letra grabada
   * romana. Es la referencia culta, no el cartel. Cadena a Georgia y a la
   * serif del sistema para que ninguna máquina se quede sin voz.
   * Atlética: Bahnschrift es la DIN que acompaña a Windows desde 10; en
   * macOS y Linux cae en las condensadas de cada casa. Industrial y precisa,
   * lo contrario de una tipografía de cartel.                             */
  --font-inscription: "Palatino Linotype", Palatino, "Book Antiqua",
                      "URW Palladio L", "P052", Georgia, "Times New Roman", serif;
  --font-athletic:    "Bahnschrift", "DIN Alternate", "Archivo Narrow",
                      "Franklin Gothic Medium", "Liberation Sans Narrow",
                      "Arial Narrow", system-ui, sans-serif;
  --font-body:        "Segoe UI Variable Text", "Segoe UI", -apple-system,
                      BlinkMacSystemFont, "Helvetica Neue", "Noto Sans",
                      "Liberation Sans", Arial, sans-serif;
  --font-evidence:    ui-monospace, "Cascadia Mono", "SF Mono", "Consolas",
                      "DejaVu Sans Mono", monospace;

  /* Escala. El cuerpo arranca en 16px y no baja: el acabado premium no se
     consigue encogiendo la letra. 13px es el suelo absoluto y sólo lo pisa
     la capa de evidencia, que es monoespaciada y de lectura puntual. */
  --t-evidence: 0.8125rem;  /* 13px */
  --t-label:    0.875rem;   /* 14px */
  --t-dense:    0.9375rem;  /* 15px  · tablas operativas */
  --t-body:     1rem;       /* 16px  · suelo del cuerpo */
  --t-body-lg:  1.0625rem;  /* 17px */
  --t-lede:     clamp(1.0625rem, 1.6vw, 1.3125rem);
  --t-h3:       1.1875rem;
  /* El suelo del clamp se apoya en `vw` a propósito: una palabra larga sin
     punto de corte —«Crosstraining»— a 36px no cabe en 360px y empuja la
     página entera fuera del eje. El titular encoge antes que desbordar. */
  --t-h2:       clamp(1.5rem, 6vw, 2.75rem);
  --t-h1:       clamp(1.75rem, 7vw, 3.5rem);
  --t-hero:     clamp(3.25rem, 12vw, 9rem);
  --t-numeral:  clamp(2.5rem, 6vw, 4rem);

  /* ── Ritmo ──────────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4.5rem;
  --sp-9: 7rem;
  --register: clamp(3.5rem, 9vh, 6.5rem);   /* aire entre registros */
  --measure: 66ch;
  --measure-tight: 46ch;

  /* La piedra no tiene esquinas redondas. Sólo el control las insinúa. */
  --r-0: 0;  --r-1: 2px;  --r-2: 4px;

  --tap: 44px;   /* diana táctil mínima */

  --shadow-lift: 0 1px 0 rgba(255,255,255,0.03), 0 12px 32px rgba(0,0,0,0.55);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══ Base ═════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` tiene que ganar SIEMPRE. La regla del navegador es de
   especificidad mínima, así que cualquier `.clase { display: ... }` la pisa
   sin avisar: con esto puesto, un boton `.btn` marcado como oculto se
   quedaba visible. En el lector eso significaba ofrecer «abrir la puerta»
   debajo de una denegación. No es cosmética: es la puerta. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* la barra fija no puede tapar el destino */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* ninguna superficie desborda el eje horizontal */
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--gold-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 140ms var(--ease);
}
a:hover { color: var(--bone); }

/* El foco es una promesa de accesibilidad, no un adorno: se ve siempre y
   se ve igual en toda la experiencia. */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold); color: var(--gold-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Saltar al contenido: primer tabulador de cada página. */
.skip {
  position: absolute; left: var(--sp-4); top: -100%;
  z-index: 100; background: var(--gold); color: var(--gold-ink);
  padding: var(--sp-3) var(--sp-5); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-label);
  text-decoration: none;
}
.skip:focus { top: var(--sp-3); color: var(--gold-ink); }

.wrap { width: min(1280px, calc(100% - 3rem)); margin-inline: auto; }
.wrap--narrow { width: min(880px, calc(100% - 3rem)); margin-inline: auto; }

/* ═══ Tipografía ═══════════════════════════════════════════════════════ */

.inscription {
  font-family: var(--font-inscription);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  line-height: 1.02;
  margin: 0;
}

/* El antetítulo es la marca del registro: pequeño, grabado, con su regla. */
.eyebrow {
  font-family: var(--font-athletic);
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: var(--gold);
  flex: none; opacity: 0.75;
}
.eyebrow--plain::before { display: none; }

h1, h2, h3, h4 { margin: 0; }

/* Red de seguridad: ningún titular puede sacar la página del eje horizontal
   porque le haya tocado un nombre de disciplina sin puntos de corte. */
.h1, .h2, .h3, .hero__wordmark, .greeting, .day__name,
.next-up__what, .verdict__headline, .kiosk__mark, .foot__brand {
  overflow-wrap: break-word;
}

.h1 { font-family: var(--font-inscription); font-size: var(--t-h1);
      text-transform: uppercase; letter-spacing: 0.045em; line-height: 1.04;
      font-weight: 700; margin: 0; }
/* `balance` reparte las líneas del titular en vez de dejar una huérfana; con
   un salto manual encima, el resultado era una escalera de cuatro renglones. */
.h2 { font-family: var(--font-inscription); font-size: var(--t-h2);
      text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.08;
      font-weight: 700; margin: 0 0 var(--sp-3);
      text-wrap: balance; max-width: 22ch; }
.h3 { font-family: var(--font-athletic); font-size: var(--t-h3);
      text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.3;
      font-weight: 600; color: var(--bone); margin: 0 0 var(--sp-4); }

/* Rótulo de bloque operativo: la voz atlética, no la lapidaria. */
.block-label {
  font-family: var(--font-athletic);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  display: flex; align-items: baseline; gap: var(--sp-3);
}
.block-label__count {
  font-family: var(--font-evidence); font-size: var(--t-evidence);
  color: var(--faint); letter-spacing: 0;
}

.lede { font-size: var(--t-lede); color: var(--bone-dim);
        max-width: var(--measure); line-height: 1.55; margin: 0; }
.prose { max-width: var(--measure); color: var(--bone-dim); }
.prose p { margin: 0 0 var(--sp-4); }
.fine { font-size: var(--t-label); color: var(--muted); max-width: var(--measure); }

/* Cifra editorial: el dato como titular. */
.numeral {
  font-family: var(--font-athletic);
  font-size: var(--t-numeral);
  font-weight: 700;
  line-height: 0.95;
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

/* ═══ Registros: la estela ═════════════════════════════════════════════
 * Cada sección de la portada es un registro numerado. El número romano
 * aparece SÓLO aquí; usarlo en cualquier otro sitio lo convertiría en
 * decoración y la referencia dejaría de significar nada.                  */

.register {
  padding-block: var(--register);
  border-top: 1px solid var(--line);
  position: relative;
}
.register--pit { background: var(--pit); }
.register__head { margin-bottom: var(--sp-6); }
.register__num {
  position: absolute; top: calc(var(--register) - 0.35em); right: 0;
  font-family: var(--font-inscription); font-weight: 700;
  font-size: clamp(4rem, 13vw, 11rem); line-height: 1;
  color: var(--bone); opacity: 0.035; letter-spacing: 0.02em;
  pointer-events: none; user-select: none;
  padding-right: clamp(0.5rem, 3vw, 3rem);
}

/* ═══ Barra de aplicación ══════════════════════════════════════════════ */

.appbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 10, 11, 0.92);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.appbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 4rem;
}
.appbar__mark {
  font-family: var(--font-inscription); font-weight: 700;
  font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding-right: var(--sp-3);
}
.appbar__mark:hover { color: var(--gold-bright); }
.appbar__mark span {
  font-family: var(--font-body); font-size: var(--t-evidence);
  letter-spacing: 0.1em; color: var(--muted); text-transform: none;
  font-style: italic; margin-left: var(--sp-3); font-weight: 400;
}
.appbar nav { display: flex; gap: var(--sp-1); align-items: center; }
.appbar nav a {
  font-family: var(--font-athletic);
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; font-weight: 600;
  min-height: var(--tap); display: inline-flex; align-items: center;
  padding-inline: var(--sp-3); border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.appbar nav a:hover { color: var(--bone); }
.appbar nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

/* ═══ Portada monumental ═══════════════════════════════════════════════ */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.25rem, 8vh, 6rem) clamp(2.5rem, 7vh, 4.5rem);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

/* Piedra: veta, grano y luz cenital. Sólo aquí, sólo detrás del título. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(130% 85% at 22% -10%, rgba(212, 165, 68, 0.20), transparent 58%),
    radial-gradient(90% 70% at 85% 110%, rgba(138, 106, 50, 0.13), transparent 62%),
    repeating-linear-gradient(97deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(2deg, rgba(0,0,0,0.32) 0 2px, transparent 2px 9px),
    var(--ink);
}
/* Grano: le quita el plano digital a la superficie sin pedir ningún fichero. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.hero__wordmark {
  font-family: var(--font-inscription);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 44px rgba(212,165,68,0.16);
  text-wrap: balance;
}
.hero__byline {
  font-family: var(--font-inscription);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  color: var(--bone); letter-spacing: 0.03em;
  margin: var(--sp-3) 0 0;
}
.hero__claim {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--bone); line-height: 1.4;
  max-width: 26ch; margin: var(--sp-5) 0 0;
  text-wrap: balance;
}
.hero__prop {
  color: var(--bone-dim); font-size: var(--t-body-lg);
  max-width: 44ch; margin: var(--sp-4) 0 0; line-height: 1.6;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Los hechos: la barra de datos duros bajo la portada. */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-gold);
}
.fact dt {
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0; font-weight: 600;
}
.fact dd {
  margin: var(--sp-1) 0 0; font-size: var(--t-body-lg); color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.fact dd b { font-family: var(--font-athletic); font-weight: 700;
             font-size: 1.35rem; color: var(--gold); }

/* Panel «hoy» de la portada: prueba viva, no promesa. */
.hero__today {
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(30,30,35,0.9), rgba(15,15,17,0.9));
  padding: var(--sp-5);
  box-shadow: var(--shadow-lift);
}
.hero__today h2 {
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 var(--sp-4); font-weight: 600;
}

/* ═══ Controles ════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-athletic); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-size: var(--t-label);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--gold); border-radius: var(--r-1);
  background: var(--gold); color: var(--gold-ink);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              border-color 150ms var(--ease), transform 150ms var(--ease);
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright);
             color: var(--gold-ink); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: rgba(212,165,68,0.14); color: var(--gold-bright); }
.btn--quiet { background: transparent; color: var(--bone); border-color: var(--line-strong); }
.btn--quiet:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--danger { background: transparent; color: var(--stop); border-color: rgba(242,89,110,0.45); }
.btn--danger:hover { background: var(--stop-dim); color: var(--stop); border-color: var(--stop); }
/* La acción compacta existe para las tablas densas del operador, donde el
   ratón es preciso. En cuanto el dedo entra en juego vuelve a la diana
   completa: ahorrar seis píxeles no compensa fallar un botón. */
.btn--sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); font-size: var(--t-evidence); }
@media (pointer: coarse), (max-width: 900px) {
  .btn--sm { min-height: var(--tap); padding-inline: var(--sp-4); }
}
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
  background: transparent; color: var(--muted); border-color: var(--line-strong);
}

/* ═══ Formularios ══════════════════════════════════════════════════════ */

label {
  display: block; font-family: var(--font-athletic);
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-dim); margin-bottom: var(--sp-2); font-weight: 600;
}
input, select, textarea {
  font: inherit; font-size: var(--t-body); width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3);
  background: var(--surface); color: var(--bone);
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
textarea { min-height: 5rem; font-family: var(--font-evidence); font-size: var(--t-evidence); }
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold); background: var(--raised); outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 2px;
}
select { appearance: none; padding-right: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field { margin-bottom: var(--sp-4); }
.field__hint { font-size: var(--t-label); color: var(--muted); margin: var(--sp-2) 0 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-card {
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* ═══ Lenguaje de estado ═══════════════════════════════════════════════
 * Una pastilla, un significado. La forma no cambia entre superficies: si
 * el operador aprende a leerla en Control, ya sabe leerla en el lector.   */

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 0.2rem var(--sp-3); border-radius: var(--r-1);
  border: 1px solid var(--line-strong); color: var(--bone-dim);
  background: var(--raised); white-space: nowrap;
}
.pill::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: currentColor; border-radius: 50%;
}
/* El estado nunca se codifica sólo con color: cada pastilla lleva palabra. */
.pill--ok      { color: var(--ok);    border-color: rgba(111,203,91,0.45);  background: var(--ok-dim); }
.pill--warn    { color: var(--warn);  border-color: rgba(240,169,58,0.45);  background: var(--warn-dim); }
.pill--stop    { color: var(--stop);  border-color: rgba(242,89,110,0.45);  background: var(--stop-dim); }
.pill--info    { color: var(--info);  border-color: rgba(127,182,232,0.42); background: var(--info-dim); }
.pill--neutral { color: var(--muted); }
.pill--gold    { color: var(--gold);  border-color: var(--line-gold); background: rgba(212,165,68,0.10); }
.pill--sm { font-size: var(--t-evidence); padding: 0.1rem var(--sp-2); }

/* ═══ Aviso honesto ════════════════════════════════════════════════════ */

.notice {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--warn);
  background: var(--warn-dim);
  padding: var(--sp-4) var(--sp-5);
  color: var(--bone-dim);
  font-size: var(--t-body);
  border-radius: var(--r-1);
}
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice__title {
  display: block; font-family: var(--font-athletic);
  color: var(--warn); letter-spacing: 0.14em; text-transform: uppercase;
  font-size: var(--t-label); font-weight: 700; margin-bottom: var(--sp-2);
}
.notice--info { border-left-color: var(--info); background: var(--info-dim); }
.notice--info .notice__title { color: var(--info); }
.notice--ok { border-left-color: var(--ok); background: var(--ok-dim); }
.notice--ok .notice__title { color: var(--ok); }
.notice--quiet { border-left-color: var(--line-strong); background: var(--surface); }
.notice--quiet .notice__title { color: var(--muted); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-dim); }
.notice--warn .notice__title { color: var(--warn); }
.notice--stop { border-left-color: var(--stop); background: var(--stop-dim); }
.notice--stop .notice__title { color: var(--stop); }

/* Acta de un ciclo anterior. Se distingue de un aviso del runtime a propósito:
   una prueba histórica y el estado de esta instancia no pueden leerse igual. */
.record {
  border: 1px dashed var(--line-strong); border-left: 3px solid var(--ok);
  background: var(--pit); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-1); color: var(--bone-dim); font-size: var(--t-body);
}
.record__title {
  display: block; font-family: var(--font-athletic); color: var(--ok);
  letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--t-label);
  font-weight: 700; margin-bottom: var(--sp-2);
}
.record__when { font-family: var(--font-evidence); font-size: var(--t-evidence);
                color: var(--muted); }
.record > :last-child { margin-bottom: 0; }

/* ═══ Cajón de evidencia ═══════════════════════════════════════════════
 * La firma UX de UMBRAL. La evidencia no desaparece: se ordena. Arriba,
 * lo humano; debajo, a un clic, lo que lo demuestra.                      */

.evidence {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-1);
  margin-top: var(--sp-4);
}
.evidence > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  font-weight: 600;
}
.evidence > summary::-webkit-details-marker { display: none; }
.evidence > summary::after {
  content: "+"; margin-left: auto; font-family: var(--font-evidence);
  font-size: 1.05rem; color: var(--gold); line-height: 1;
}
.evidence[open] > summary::after { content: "−"; }
.evidence > summary:hover { color: var(--bone); }
.evidence__body {
  border-top: 1px solid var(--line);
  padding: var(--sp-4);
  background: var(--ridge);
}
/* La rejilla clave→valor de la capa técnica. Monoespaciada a propósito. */
.kv { display: grid; grid-template-columns: minmax(7rem, auto) 1fr;
      gap: var(--sp-2) var(--sp-4); margin: 0; }
.kv dt {
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; margin: 0;
}
.kv dd {
  margin: 0; font-family: var(--font-evidence); font-size: var(--t-evidence);
  color: var(--bone-dim); overflow-wrap: anywhere; line-height: 1.5;
}
.kv dd.is-empty { color: var(--faint); font-style: italic; }

/* Código en línea: identificadores y reason codes dentro de prosa. */
code, .code {
  font-family: var(--font-evidence); font-size: var(--t-evidence);
  background: var(--ridge); border: 1px solid var(--line);
  padding: 0.05em 0.4em; border-radius: var(--r-1); color: var(--bone-dim);
  overflow-wrap: anywhere;
}

/* ═══ Cuadrante · matriz de escritorio ═════════════════════════════════ */

.matrix-scroll {
  overflow-x: auto; border: 1px solid var(--line);
  background: var(--surface); scrollbar-width: thin;
}
table.matrix {
  border-collapse: collapse; width: 100%; min-width: 62rem;
  font-size: var(--t-dense);
}
table.matrix caption { text-align: left; padding: var(--sp-3) var(--sp-4);
  color: var(--muted); font-size: var(--t-label); }
table.matrix th {
  background: var(--ink); color: var(--bone);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; z-index: 2;
}
table.matrix th.is-today { color: var(--gold); }
table.matrix td {
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  padding: var(--sp-1); vertical-align: top; min-width: 8.5rem;
}
table.matrix td.is-today { background: rgba(212,165,68,0.035); }
table.matrix th.hour, table.matrix td.hour {
  background: var(--ink); font-family: var(--font-athletic);
  font-size: var(--t-label); font-weight: 600; color: var(--gold);
  white-space: nowrap; position: sticky; left: 0; z-index: 1;
  border-left: 0; letter-spacing: 0.05em; padding-inline: var(--sp-3);
}

/* La sesión: bloque sólido con el color real de su disciplina a la izquierda. */
.slot {
  display: block; padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1); background: var(--raised);
  border-left: 3px solid var(--accent, var(--gold));
  color: var(--bone); text-decoration: none; border-radius: 0 var(--r-1) var(--r-1) 0;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.slot:last-child { margin-bottom: 0; }
.slot__name { display: block; font-weight: 600; font-size: var(--t-dense);
              line-height: 1.3; color: var(--bone); }
.slot__seats {
  display: block; font-family: var(--font-athletic); font-size: var(--t-label);
  color: var(--muted); margin-top: 0.1rem; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.slot--full { opacity: 0.72; }
.slot--full .slot__seats { color: var(--warn); }
.slot--open { border-left-style: dashed; }

/* ═══ Cuadrante · agenda de móvil ══════════════════════════════════════
 * En estrecho la matriz semanal NO se encoge: se sustituye por la agenda
 * del día, que es como se lee un horario en la mano. Mismos datos, otra
 * arquitectura de información.                                            */

.agenda { display: none; }

.daybar {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-5);
  scroll-snap-type: x proximity; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.daybar::-webkit-scrollbar { display: none; }
.daybar a {
  scroll-snap-align: start; flex: none; text-decoration: none;
  min-width: 4.25rem; min-height: var(--tap);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-3); color: var(--bone-dim);
  font-family: var(--font-athletic); background: var(--surface);
}
.daybar a b { font-size: var(--t-label); letter-spacing: 0.12em;
              text-transform: uppercase; font-weight: 600; }
.daybar a span { font-size: 1.2rem; font-weight: 700; color: var(--bone);
                 font-variant-numeric: tabular-nums; line-height: 1.1; }
.daybar a.is-today { border-color: var(--gold); background: rgba(212,165,68,0.12); }
.daybar a.is-today b, .daybar a.is-today span { color: var(--gold); }

.day { margin-bottom: var(--sp-6); scroll-margin-top: 5.5rem; }
.day__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-gold); margin-bottom: var(--sp-3);
}
.day__name {
  font-family: var(--font-inscription); font-size: 1.3rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--bone); margin: 0;
}
.day__date { font-family: var(--font-athletic); font-size: var(--t-label);
             color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }

.session {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.session:last-child { border-bottom: 0; }
.session__time {
  font-family: var(--font-athletic); font-size: 1.15rem; font-weight: 700;
  color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.25;
}
.session__time small { display: block; font-size: var(--t-label);
                       color: var(--muted); font-weight: 400; }
.session__name {
  font-weight: 600; font-size: var(--t-body-lg); color: var(--bone);
  border-left: 3px solid var(--accent, var(--gold)); padding-left: var(--sp-3);
  line-height: 1.3;
}
.session__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
                 margin-top: var(--sp-2); padding-left: calc(var(--sp-3) + 3px); }
.session__seats { font-family: var(--font-athletic); font-size: var(--t-label);
                  color: var(--bone-dim); letter-spacing: 0.06em;
                  font-variant-numeric: tabular-nums; }
.session__seats.is-full { color: var(--warn); }
.session__seats.is-open { color: var(--muted); }

/* ═══ Disciplinas ══════════════════════════════════════════════════════ */

.disciplines { display: grid; gap: 0; }
.discipline {
  display: grid; grid-template-columns: minmax(11rem, 20%) 1fr auto;
  gap: var(--sp-5); padding-block: var(--sp-5);
  border-top: 1px solid var(--line); align-items: baseline;
  transition: background 160ms var(--ease);
}
.discipline:first-child { border-top: 1px solid var(--line-strong); }
.discipline:hover { background: var(--pit); }
.discipline__name {
  font-family: var(--font-athletic); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--t-body);
  color: var(--bone);
  border-left: 3px solid var(--accent, var(--gold)); padding-left: var(--sp-3);
}
.discipline__desc { color: var(--bone-dim); max-width: var(--measure);
                    font-size: var(--t-body); }
.discipline__age {
  font-family: var(--font-athletic); font-size: var(--t-label);
  color: var(--gold); white-space: nowrap; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══ Planes ═══════════════════════════════════════════════════════════ */

.plans { display: grid; gap: 0; }
.plan {
  display: grid; grid-template-columns: minmax(11rem, 20%) 1fr minmax(9rem, auto);
  gap: var(--sp-5); padding-block: var(--sp-5);
  border-top: 1px solid var(--line); align-items: center;
}
.plan:first-child { border-top: 1px solid var(--line-strong); }
.plan__name { font-family: var(--font-athletic); font-weight: 700;
              text-transform: uppercase; letter-spacing: 0.1em;
              font-size: var(--t-body); color: var(--bone); }
.plan__desc { color: var(--bone-dim); font-size: var(--t-body); }
.plan__fee { text-align: right; font-family: var(--font-athletic);
             font-size: 1.6rem; font-weight: 700; color: var(--gold);
             font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan__fee small { display: block; font-size: var(--t-label); color: var(--muted);
                   letter-spacing: 0.12em; text-transform: uppercase;
                   font-weight: 400; margin-top: 0.15rem; }
.plan__ask { font-family: var(--font-athletic); font-size: var(--t-body);
             color: var(--bone-dim); letter-spacing: 0.06em;
             text-transform: uppercase; text-align: right; font-weight: 600; }

/* ═══ Marta ════════════════════════════════════════════════════════════ */

.figure-block {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.figure-plate {
  position: relative; aspect-ratio: 4 / 5;
  border: 1px solid var(--line-gold);
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(212,165,68,0.16), transparent 60%),
    repeating-linear-gradient(93deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 7px),
    var(--pit);
  display: grid; place-items: center; overflow: hidden;
}
.figure-plate__initials {
  font-family: var(--font-inscription); font-weight: 700;
  font-size: clamp(4rem, 11vw, 8rem); letter-spacing: 0.12em;
  color: var(--gold); opacity: 0.46; line-height: 1;
}
.figure-plate__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(0deg, rgba(10,10,11,0.94), transparent);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.quote {
  font-family: var(--font-inscription); font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.4;
  color: var(--bone); margin: 0 0 var(--sp-5); max-width: 30ch;
  border-left: 2px solid var(--gold); padding-left: var(--sp-5);
}

/* ═══ Métricas operativas ══════════════════════════════════════════════ */

.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line);
  padding-block: var(--sp-5); margin-bottom: var(--sp-6);
}
/* Los rótulos no miden lo mismo y las cifras tienen que alinearse igual: sin
   un suelo común, una etiqueta de dos líneas baja su número y la fila deja de
   leerse de un vistazo. El suelo cubre dos líneas (2 × 1.6em); la nota, que sí
   es opcional, se va al fondo con `margin-top: auto` para no empujar nada. */
.metric { display: flex; flex-direction: column; }
.metric dt {
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin: 0; font-weight: 600; min-height: 3.2em;
}
.metric dd {
  margin: var(--sp-1) 0 0; font-family: var(--font-athletic);
  font-size: 2rem; font-weight: 700; color: var(--bone);
  font-variant-numeric: tabular-nums lining-nums; line-height: 1.1;
}
.metric dd.is-unknown { color: var(--faint); font-size: 1.15rem; font-weight: 400;
                        font-family: var(--font-body); font-style: italic; }
.metric dd.is-money { color: var(--gold); font-size: 1.6rem; }
.metric__note { margin: auto 0 0; padding-top: var(--sp-2);
                font-family: var(--font-athletic);
                font-size: var(--t-label); color: var(--muted);
                letter-spacing: 0.06em; }
.metric--headline dd { font-size: 2.75rem; color: var(--gold); }

/* ═══ Tablas operativas ════════════════════════════════════════════════ */

.table-shell { border: 1px solid var(--line); background: var(--surface);
               border-radius: var(--r-1); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-dense); }
table.data caption { text-align: left; padding: var(--sp-3) var(--sp-4);
  color: var(--muted); font-size: var(--t-label); }
table.data th {
  text-align: left; font-family: var(--font-athletic);
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-strong); font-weight: 600;
  background: var(--pit); white-space: nowrap;
}
table.data td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
                vertical-align: middle; color: var(--bone-dim); }
table.data td strong, table.data td b { color: var(--bone); font-weight: 600; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--raised); }
table.data .num { font-family: var(--font-athletic); font-variant-numeric: tabular-nums;
                  text-align: right; letter-spacing: 0.04em; }
table.data .t { font-family: var(--font-athletic); font-variant-numeric: tabular-nums;
                color: var(--bone-dim); white-space: nowrap; letter-spacing: 0.04em; }
table.data .right { text-align: right; }
table.data .empty { color: var(--muted); font-style: italic; }
.accent-mark { border-left: 3px solid var(--accent, var(--gold));
               padding-left: var(--sp-3); display: inline-block; }

/* Titular con marca de disciplina. NO usa `.accent-mark`: un `inline-block`
   con padding no encoge por debajo de su contenido, y en 360px eso empujaba
   la página entera 17px fuera del eje. El bloque sí encoge. */
.titled { border-left: 4px solid var(--accent, var(--gold));
          padding-left: var(--sp-4); display: block; }

/* Volver: es navegación, no prosa, así que tiene diana propia. */
.backlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); text-decoration: none;
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--gold);
}
.backlink:hover { color: var(--gold-bright); }

/* Ocupación: barra sobria que informa, no adorna. */
.occupancy { display: flex; align-items: center; gap: var(--sp-3); min-width: 8rem; }
.occupancy__bar { flex: 1; height: 5px; background: var(--line);
                  min-width: 3.5rem; border-radius: 3px; overflow: hidden; }
.occupancy__bar i { display: block; height: 100%; background: var(--gold); }
.occupancy--full .occupancy__bar i { background: var(--warn); }
.occupancy__n { font-family: var(--font-athletic); font-size: var(--t-label);
                color: var(--bone-dim); white-space: nowrap;
                font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ═══ Bitácora ═════════════════════════════════════════════════════════ */

.log { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.log li { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sp-4);
          padding-block: var(--sp-2); border-bottom: 1px solid var(--line);
          font-size: var(--t-label); align-items: baseline; }
.log__t { font-family: var(--font-evidence); font-size: var(--t-evidence);
          color: var(--muted); }
.log__e { font-family: var(--font-evidence); font-size: var(--t-evidence);
          color: var(--gold); }
.log__id { font-family: var(--font-evidence); font-size: var(--t-evidence);
           color: var(--faint); overflow-wrap: anywhere; }

/* ═══ Estados vacíos ═══════════════════════════════════════════════════ */

.empty-state {
  border: 1px dashed var(--line-strong); border-radius: var(--r-1);
  padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--muted);
  background: var(--pit);
}
.empty-state__title {
  display: block; font-family: var(--font-athletic); color: var(--bone-dim);
  font-size: var(--t-body-lg); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: var(--sp-2); font-weight: 600;
}
.empty-state p { margin: 0 auto; max-width: var(--measure-tight); font-size: var(--t-body); }

/* ═══ Tarjetas y disposición ═══════════════════════════════════════════ */

.card { border: 1px solid var(--line); background: var(--surface);
        border-radius: var(--r-1); padding: var(--sp-5); }
.card--accent { border-left: 3px solid var(--accent, var(--gold)); }
.card--quiet { background: var(--pit); }

.split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
         gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.split--even { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.split > *, .stack > * { min-width: 0; }
.stack > * + * { margin-top: var(--sp-5); }
.stack--tight > * + * { margin-top: var(--sp-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row--end { justify-content: flex-end; }
.grow { flex: 1 1 auto; }

/* ═══ Pie ══════════════════════════════════════════════════════════════ */

footer.foot {
  border-top: 1px solid var(--line); padding-block: var(--sp-7) var(--sp-6);
  color: var(--muted); font-size: var(--t-label); background: var(--pit);
}
.foot__brand { font-family: var(--font-inscription); font-size: 1.05rem;
               letter-spacing: 0.14em; text-transform: uppercase;
               color: var(--bone); margin: 0 0 var(--sp-2); font-weight: 700; }
.foot__brand em { font-style: italic; text-transform: none; letter-spacing: 0.03em;
                  color: var(--muted); font-size: var(--t-label); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
              gap: var(--sp-5) var(--sp-6); }
.foot p { margin: 0 0 var(--sp-2); max-width: var(--measure); line-height: 1.6; }
.foot__powered { font-family: var(--font-athletic); letter-spacing: 0.18em;
                 text-transform: uppercase; font-size: var(--t-label);
                 color: var(--muted); }
.foot__powered b { color: var(--gold); font-weight: 700; }

/* ═══ Lector · kiosco ══════════════════════════════════════════════════
 * Densidad mínima. Una sola cosa a la vez, en el tamaño en el que se lee
 * a un metro de la puerta.                                                */

.kiosk {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  max-width: 40rem; margin-inline: auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}
.kiosk__head { text-align: center; margin-bottom: var(--sp-5); }
.kiosk__mark {
  font-family: var(--font-inscription); font-weight: 700;
  font-size: 1.5rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 0;
}
.kiosk__where {
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin: var(--sp-2) 0 0;
}
.kiosk__stage {
  position: relative; aspect-ratio: 3 / 4; background: #000;
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  overflow: hidden;
}
.kiosk__stage video { width: 100%; height: 100%; object-fit: cover; }
.kiosk__reticle { position: absolute; inset: 0; display: grid; place-items: center;
                  pointer-events: none; }
.kiosk__reticle i {
  width: 64%; aspect-ratio: 1; border: 3px solid rgba(212,165,68,0.9);
  border-radius: var(--r-2);
}
.kiosk__say {
  text-align: center; font-size: var(--t-body-lg); color: var(--bone-dim);
  min-height: 3.5rem; margin: var(--sp-4) 0; line-height: 1.5;
}
.kiosk__controls { display: flex; gap: var(--sp-3); justify-content: center;
                   flex-wrap: wrap; }
.kiosk__controls .btn { flex: 1 1 9rem; }

/* El veredicto: lo primero y lo más grande. Humano, no reason code. */
.verdict { text-align: center; margin-top: var(--sp-5);
           border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.verdict__headline {
  font-family: var(--font-inscription); font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 3rem); line-height: 1.06;
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0;
  text-wrap: balance; color: var(--bone);
}
.verdict--allow .verdict__headline { color: var(--ok); }
.verdict--deny  .verdict__headline { color: var(--stop); }
.verdict--wait  .verdict__headline { color: var(--warn); }
.verdict__who { font-family: var(--font-athletic); font-size: 1.25rem;
                letter-spacing: 0.14em; text-transform: uppercase;
                color: var(--bone); margin: var(--sp-2) 0 0; }
.verdict__because { font-size: var(--t-body-lg); color: var(--bone-dim);
                    margin: var(--sp-3) auto 0; max-width: 34ch; line-height: 1.5; }
.verdict__passage { font-size: var(--t-body-lg); margin: var(--sp-4) 0 0;
                    color: var(--bone-dim); line-height: 1.5; }
.verdict__passage.is-ok { color: var(--ok); }
.verdict__passage.is-stop { color: var(--stop); }
.verdict .evidence { text-align: left; }
/* Mantenimiento: al fondo, callado y rotulado. Ni escondido ni compitiendo
   con la única acción que el kiosco necesita. */
.kiosk__diag { margin-top: auto; padding-top: var(--sp-6); }
.kiosk__diag > summary {
  cursor: pointer; list-style: none; text-align: center;
  min-height: var(--tap); display: flex; align-items: center;
  justify-content: center; gap: var(--sp-2);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; border-top: 1px solid var(--line);
}
.kiosk__diag > summary::-webkit-details-marker { display: none; }
.kiosk__diag > summary::after { content: "+"; font-family: var(--font-evidence);
                                color: var(--gold); }
.kiosk__diag[open] > summary::after { content: "−"; }
.kiosk__diag > summary:hover { color: var(--bone); }
.kiosk__diag-body { padding-top: var(--sp-4); }
.kiosk__diag-body .fine { text-align: center; margin: 0 auto var(--sp-4); }
.kiosk__selftest { margin-top: var(--sp-5); text-align: center; }
.kiosk__selftest img { width: min(60vw, 15rem); background: #fff;
                       padding: var(--sp-3); border-radius: var(--r-2);
                       margin-inline: auto; }

/* ═══ Superficie del socio ═════════════════════════════════════════════ */

.greeting {
  font-family: var(--font-inscription); font-size: var(--t-h1);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  color: var(--bone); margin: 0 0 var(--sp-3); line-height: 1.05;
}
.greeting em { font-style: italic; text-transform: none; color: var(--gold);
               letter-spacing: 0.02em; }
.status-line { display: flex; flex-wrap: wrap; gap: var(--sp-3);
               margin: 0 0 var(--sp-6); }

.next-up {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent, var(--gold));
  background: linear-gradient(110deg, var(--raised), var(--surface));
  padding: var(--sp-5);
}
.next-up__when { font-family: var(--font-athletic); font-size: var(--t-label);
                 letter-spacing: 0.18em; text-transform: uppercase;
                 color: var(--gold); margin: 0 0 var(--sp-2); font-weight: 600; }
.next-up__what { font-family: var(--font-inscription); font-size: 1.6rem;
                 font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
                 color: var(--bone); margin: 0; line-height: 1.15; }
.next-up__meta { font-family: var(--font-athletic); font-size: var(--t-body);
                 color: var(--bone-dim); margin: var(--sp-3) 0 0;
                 font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }

.pass-token {
  font-family: var(--font-evidence); font-size: var(--t-evidence);
  word-break: break-all; background: var(--ridge);
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  padding: var(--sp-4); color: var(--bone-dim); line-height: 1.6;
}

/* ═══ Adaptación ═══════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .figure-block { grid-template-columns: 1fr; }
  .figure-plate { aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero__today { order: 2; }

  /* La matriz semanal desaparece y entra la agenda: no se encoge una
     tabla de escritorio hasta hacerla ilegible, se cambia de estructura. */
  .matrix-scroll { display: none; }
  .agenda { display: block; }

  .discipline, .plan { grid-template-columns: 1fr; gap: var(--sp-2); }
  .discipline__age, .plan__fee, .plan__ask { text-align: left; }
  .plan__fee { font-size: 1.35rem; }
  .plan__fee small { display: inline; margin-left: var(--sp-2); }

  /* Las tablas operativas scrollean dentro de sí mismas: el cuerpo de la
     página nunca desborda. `thead` y `tbody` comparten min-width para que
     las columnas sigan alineadas al desplazar. */
  table.data { display: block; overflow-x: auto; }
  table.data thead, table.data tbody { display: table; width: 100%; min-width: 36rem; }

  .log li { grid-template-columns: 1fr; gap: 0; }
  .field-row { grid-template-columns: 1fr; }
  .wrap, .wrap--narrow { width: calc(100% - 2rem); }
  .register__num { font-size: clamp(3.5rem, 22vw, 7rem); }
}

@media (max-width: 640px) {
  .appbar__inner { min-height: 3.5rem; gap: var(--sp-2); }
  .appbar__mark { font-size: 0.95rem; letter-spacing: 0.06em; padding-right: 0; }
  .appbar__mark span { display: none; }
  .appbar nav { gap: 0; }
  .appbar nav a { padding-inline: var(--sp-2); letter-spacing: 0.05em;
                  font-size: var(--t-evidence); }
  .metrics { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sp-4); }
  .metric dd { font-size: 1.6rem; }
  .metric--headline dd { font-size: 2.1rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .kiosk__controls .btn { flex: 1 1 100%; }
  .quote { padding-left: var(--sp-4); }
}

/* La animación es un realce, nunca un requisito de lectura. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 720ms var(--ease-out) both; }
  .reveal-1 { animation-delay: 60ms; }
  .reveal-2 { animation-delay: 150ms; }
  .reveal-3 { animation-delay: 250ms; }
  .reveal-4 { animation-delay: 360ms; }
  .verdict { animation: verdict 380ms var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes verdict { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

@media print {
  .appbar, .hero::before, .hero::after, .btn { display: none; }
  body { background: #fff; color: #000; }
}


/* Salir vive en la barra y tiene que parecer navegación, no un botón de
   formulario del navegador: es un <button> porque cerrar sesión es un POST. */
.appbar__exit{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
}
.appbar__exit:hover{color:var(--gold)}

/* Campos de las dos puertas de acceso. */
.input{
  width:100%;max-width:22rem;margin-top:var(--sp-2);
  padding:.7rem .85rem;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
  color:var(--bone);font:inherit;
}
.input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}


/* ── Plegables ────────────────────────────────────────────────────────────
   Para lo que hace falta cuando hace falta: el listado de lectores, las
   cincuenta y una capacidades, el alta de una ficha. Ninguna de las tres es
   información de cada día, y las tres ocupaban espacio principal.

   Se usa <details> nativo y no JavaScript: funciona sin guion, se puede
   buscar con Ctrl+F dentro aunque esté cerrado en los navegadores que lo
   soportan, y no hay estado que se descuadre. */
.plegable{border:1px solid var(--line);border-radius:3px;background:var(--surface);
  margin-top:var(--sp-3)}
.plegable > summary{cursor:pointer;list-style:none;padding:.7rem .9rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font:500 .82rem/1.3 var(--font-sans, inherit);letter-spacing:.02em;color:var(--bone);
  transition:background .15s}
.plegable > summary::-webkit-details-marker{display:none}
.plegable > summary::before{content:"▸";color:var(--gold);margin-right:.5rem;
  display:inline-block;transition:transform .2s;font-size:.8em}
.plegable[open] > summary::before{transform:rotate(90deg)}
.plegable > summary:hover{background:var(--ridge)}
.plegable__cuenta{font:400 .74rem/1 var(--font-mono, ui-monospace, monospace);color:var(--bone-dim);
  letter-spacing:.02em;text-align:right}
.plegable__cuerpo{padding:.2rem .9rem 1rem;border-top:1px solid var(--line)}
.plegable--accion > summary::before{content:"+";font-size:1em;transform:none}
.plegable--accion[open] > summary::before{content:"−";transform:none}


/* ═══ Entrada · la apertura de las puertas ═════════════════════════════
   Implantada desde el prototipo aprobado `coliseo-door-intro-prototype-v1b.html`.
   Es la intro de la PORTADA: la cabecera queda quieta por encima y las hojas
   se abren debajo. No se ha traído nada más del prototipo —ni tipografías, ni
   copy, ni estructura—: eso habría sido rediseñar la identidad sellada en UX_G1.

   Los tiempos son los del prototipo y se dejan como variables por el mismo
   motivo por el que él las dejaba: la coreografía se juzga viéndola, y ajustarla
   no debería obligar a tocar seis reglas.                                    */
:root {
  --door-delay: 0.85s;
  --door-duration: 2.25s;
  --light-delay: 0.42s;
  --light-duration: 3.05s;
  --title-delay: 1.85s;
  --content-delay: 3.18s;
  --information-delay: 3.52s;
}

.doors { position: absolute; z-index: 50; inset: 0; pointer-events: none; }

.door {
  position: absolute; top: 0; bottom: 0; width: 50.25%;
  overflow: hidden; will-change: transform;
  background: linear-gradient(90deg, #090909 0%, #11100e 42%, #17130d 78%, #0b0a09 100%);
  box-shadow: 0 0 80px rgba(0,0,0,0.75);
}
/* Geometría abstracta: recuerda a una puerta enorme sin dibujarla. */
.door::before {
  content: ""; position: absolute; inset: 0; opacity: 0.72;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 83px,
                              rgba(190,147,64,0.08) 84px, transparent 85px),
    linear-gradient(90deg, rgba(255,255,255,0.018), transparent 18%,
                    transparent 80%, rgba(0,0,0,0.55));
  border: clamp(14px, 2vw, 30px) solid rgba(49,39,22,0.15);
}
/* El canto interior es la pieza que hace el efecto: la luz que se cuela. */
.door::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, rgba(133,85,17,0.15), var(--gold-bright) 25%,
                              #f8d675 52%, var(--gold-bright) 77%, rgba(133,85,17,0.15));
  box-shadow: 0 0 5px rgba(244,193,77,0.75), 0 0 18px rgba(223,154,36,0.65),
              0 0 42px rgba(191,121,19,0.4);
}
.door--left  { left: 0;  transform: translateX(0); }
.door--right { right: 0; transform: translateX(0);
  background: linear-gradient(-90deg, #090909 0%, #11100e 42%, #17130d 78%, #0b0a09 100%); }
.door--left::after  { right: 0; }
.door--right::after { left: 0; }

.seam {
  position: absolute; z-index: 55; left: 50%; top: 0; width: 2px; height: 100%;
  transform: translateX(-50%) scaleY(0.8); opacity: 0;
  background: linear-gradient(180deg, transparent, #d6a33b 17%, #fff0b1 52%,
                              #d6a33b 83%, transparent);
  box-shadow: 0 0 7px #e8b54d, 0 0 26px rgba(240,182,65,0.7), 0 0 60px rgba(200,124,18,0.45);
}
.light-bloom {
  position: absolute; z-index: 49; left: 50%; top: 50%; width: 10vw; height: 125vh;
  transform: translate(-50%, -50%) scaleX(0.04); opacity: 0; filter: blur(20px);
  background: radial-gradient(ellipse at center, rgba(255,226,148,0.52),
                              rgba(235,176,59,0.18) 32%, rgba(176,98,9,0.06) 52%,
                              transparent 74%);
}
.floor-light {
  position: absolute; z-index: 9; left: 50%; bottom: -15%; width: 80vw; height: 32vh;
  transform: translateX(-50%) scaleX(0.1); opacity: 0; filter: blur(18px);
  background: radial-gradient(ellipse at center, rgba(217,156,48,0.18) 0%,
                              rgba(134,77,9,0.07) 36%, transparent 68%);
}
.vignette {
  position: absolute; z-index: 20; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%,
                              rgba(0,0,0,0.08) 63%, rgba(0,0,0,0.38) 100%);
}

@keyframes openLeft {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-0.8%); }
  100% { transform: translateX(-96%); }
}
@keyframes openRight {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(0.8%); }
  100% { transform: translateX(96%); }
}
@keyframes seamIgnition {
  0%   { opacity: 0;    transform: translateX(-50%) scaleY(0.38); }
  28%  { opacity: 0.95; }
  67%  { opacity: 1;    transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0;    transform: translateX(-50%) scaleY(1); }
}
@keyframes bloomOpen {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scaleX(0.025); }
  20%  { opacity: 0.88; }
  55%  { opacity: 0.42; }
  100% { opacity: 0.11; transform: translate(-50%, -50%) scaleX(4.2); }
}
@keyframes floorReveal {
  0%   { opacity: 0;    transform: translateX(-50%) scaleX(0.1); }
  60%  { opacity: 0.75; }
  100% { opacity: 0.32; transform: translateX(-50%) scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .door--left  { animation: openLeft  var(--door-duration) cubic-bezier(.72,.03,.22,1)
                            var(--door-delay) forwards; }
  .door--right { animation: openRight var(--door-duration) cubic-bezier(.72,.03,.22,1)
                            var(--door-delay) forwards; }
  .seam        { animation: seamIgnition 1.55s cubic-bezier(.23,.75,.26,1) 0.18s forwards; }
  .light-bloom { animation: bloomOpen var(--light-duration) cubic-bezier(.18,.82,.18,1)
                            var(--light-delay) forwards; }
  .floor-light { animation: floorReveal 2.4s ease-out 1.05s forwards; }

  /* El contenido de la portada deja de aparecer a los 60 ms: ahora sigue a las
     hojas. Revelarlo antes lo dejaba detrás de una puerta cerrada, que es tanto
     como no animar nada. Los retardos son los del prototipo. */
  .hero .reveal-1 { animation-delay: var(--title-delay); }
  .hero .reveal-3 { animation-delay: var(--content-delay); }
  .hero .reveal-4 { animation-delay: var(--information-delay); }
}

/* Sin movimiento: las hojas nacen ABIERTAS. Dejarlas cerradas escondería la
   portada entera a quien pide que nada se mueva. */
@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;
  }
  html { scroll-behavior: auto; }
  .door--left  { transform: translateX(-96%); }
  .door--right { transform: translateX(96%); }
  .seam, .light-bloom { opacity: 0; }
  .floor-light { opacity: 0.32; transform: translateX(-50%) scaleX(1); }
  /* Quien pide menos movimiento no lo pide sólo para la portada. */
  .gbar { backdrop-filter: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   GESTIÓN · la superficie de trabajo (FI01)

   Misma piedra, otro oficio. La portada del club presenta; esto se usa ocho
   horas al día. Lo que cambia respecto de la web pública:

   · densidad alta — cabe más en pantalla sin encoger la letra por debajo
     del suelo de 16px que el sistema ya se había fijado;
   · cero animación de entrada — una herramienta que hace esperar es peor;
   · tablet primero — el mostrador de El Coliseo es una tablet, así que la
     rejilla y las dianas táctiles se dimensionan para el dedo, no para el
     ratón, y sólo se ensanchan en escritorio.

   Todas las medidas salen de los tokens de :root. Ni un color suelto.
   ═══════════════════════════════════════════════════════════════════════ */

.gwrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
  padding-block: var(--sp-5) var(--sp-8);
}
@media (min-width: 768px) { .gwrap { padding-inline: var(--sp-5); } }

/* ── Barra ─────────────────────────────────────────────────────────────
   Pegada arriba: en una tabla larga, perder la navegación al bajar obliga a
   subir del todo para cambiar de sección.                                */
.gbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.gbar__top {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: 1180px; margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
}
@media (min-width: 768px) { .gbar__top { padding-inline: var(--sp-5); } }

.gbar__mark {
  display: flex; flex-direction: column; gap: 1px;
  min-height: var(--tap); justify-content: center;
  text-decoration: none; color: var(--bone); line-height: 1.1;
  margin-right: auto; min-width: 0;
}
.gbar__mark b {
  font-family: var(--font-inscription);
  font-size: var(--t-body); letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gbar__mark span {
  font-family: var(--font-athletic);
  font-size: var(--t-label); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
}

.gbar__who { display: flex; align-items: center; gap: var(--sp-3); }
.gbar__role {
  font-size: var(--t-label); color: var(--muted);
  /* En móvil el rol cede el sitio: la salida y el enlace técnico se usan;
     el rol sólo se consulta. */
  display: none;
}
@media (min-width: 640px) { .gbar__role { display: inline; } }

.gbar__tech, .gbar__exit {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding-inline: var(--sp-3);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: transparent; color: var(--bone-dim);
  text-decoration: none; cursor: pointer;
}
.gbar__tech { border-color: var(--line-gold); color: var(--gold); }
.gbar__tech:hover, .gbar__exit:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ── Navegación ────────────────────────────────────────────────────────
   Una sola fila que se desplaza en horizontal DENTRO de su caja. Envolver a
   dos líneas empujaría el contenido hacia abajo en cada tamaño intermedio;
   el eje de la página no se mueve.                                        */
.gnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.gnav ul {
  display: flex; gap: var(--sp-1); list-style: none; margin: 0;
  max-width: 1180px; margin-inline: auto;
  padding: 0 var(--sp-4) var(--sp-2);
}
@media (min-width: 768px) { .gnav ul { padding-inline: var(--sp-5); } }
.gnav a {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: var(--tap); padding-inline: var(--sp-3);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.gnav a:hover { color: var(--bone); }
.gnav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Cabecera de sección ─────────────────────────────────────────────── */
.ghead { margin-bottom: var(--sp-5); }
.ghead--ficha {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-4);
}
.ghead__h1 {
  font-family: var(--font-inscription);
  /* El suelo del clamp se apoya en vw: un nombre largo sin punto de corte a
     tamaño fijo saca la página del eje en 360px. */
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  line-height: 1.1; margin: 0; color: var(--bone);
  overflow-wrap: anywhere;
}
.ghead__sub { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--t-body); }
.ghead__cifra { margin: 0; }
.gback { margin: 0 0 var(--sp-3); font-size: var(--t-label); color: var(--faint); }
.gback a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--muted);
}

/* ── Avisos ────────────────────────────────────────────────────────────
   Un borde grueso a la izquierda además del color: el estado no puede viajar
   sólo en el tono, o quien no distingue verde de rojo se queda sin el dato. */
.gnote {
  margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--line-strong);
  background: var(--surface); border-radius: var(--r-1);
  font-size: var(--t-body); color: var(--bone-dim);
}
.gnote--ok   { border-left-color: var(--ok);   background: var(--ok-dim); }
.gnote--stop { border-left-color: var(--stop); background: var(--stop-dim); }
.gnote--quiet{ border-left-color: var(--bronze); }
.gnote b { color: var(--bone); }

/* ── Rejilla y tarjetas ───────────────────────────────────────────────── */
.ggrid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-5);
}
@media (min-width: 720px)  { .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ggrid--ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  min-width: 0;   /* sin esto, una tabla ancha dentro de la rejilla la desborda */
}
.ggrid .gcard { margin-bottom: 0; }
.gcard--atencion { border-left: 3px solid var(--warn); }
.gcard--calma    { border-left: 3px solid var(--line-strong); }
.gcard--acciones { border-color: var(--line-strong); }
.gcard__h {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.gcard__cuenta { color: var(--faint); letter-spacing: 0.06em; }
.gcard__foot { margin: var(--sp-3) 0 0; font-size: var(--t-label); }
.gcard__nota {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-label); color: var(--muted); line-height: 1.5;
}
.gcard__nota b { color: var(--bone-dim); }

/* ── Listas ────────────────────────────────────────────────────────────── */
.glist { list-style: none; margin: 0; padding: 0; }
.glist__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.glist__row:first-child { border-top: 0; }
.glist--tight .glist__row { padding-block: var(--sp-2); }
.glist__main { color: var(--bone); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
a.glist__main { text-decoration: none; }
a.glist__main:hover { color: var(--gold-bright); text-decoration: underline; }
.glist__aside {
  flex: 1 1 100%; font-size: var(--t-label); color: var(--muted); line-height: 1.45;
}
@media (min-width: 640px) { .glist__aside { flex: 1 1 auto; } }
.glist__act { display: flex; gap: var(--sp-2); margin-left: auto; }

/* ── Acciones rápidas ─────────────────────────────────────────────────── */
.gacciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.gaccion {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding-inline: var(--sp-4);
  border: 1px solid var(--line-gold); border-radius: var(--r-1);
  background: var(--raised); color: var(--gold);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.gaccion:hover { background: var(--ridge); color: var(--gold-bright); border-color: var(--gold); }

/* ── Cifras ────────────────────────────────────────────────────────────── */
.gcifra {
  font-family: var(--font-athletic);
  font-size: var(--t-numeral); line-height: 1; margin: 0 0 var(--sp-3);
  color: var(--bone);
}
.gcifras { display: grid; gap: var(--sp-2); margin: 0; }
.gcifras > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding-block: var(--sp-1);
}
.gcifras dt { color: var(--muted); font-size: var(--t-label); }
.gcifras dd {
  margin: 0; font-family: var(--font-athletic); font-size: var(--t-body-lg);
  color: var(--bone);
}

/* ── Pares clave/valor de la ficha ─────────────────────────────────────── */
.gkv { display: grid; gap: var(--sp-3); margin: 0; }
@media (min-width: 480px) {
  .gkv { grid-template-columns: minmax(9rem, auto) 1fr; gap: var(--sp-2) var(--sp-4); }
}
.gkv dt { color: var(--muted); font-size: var(--t-label); }
.gkv dd { margin: 0; color: var(--bone-dim); overflow-wrap: anywhere; }

/* ── Clases ────────────────────────────────────────────────────────────── */
.gdia { margin-bottom: var(--sp-5); }
.gdia__h {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  margin: 0 0 var(--sp-2); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-athletic); font-size: var(--t-body);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone);
}
.gdia__h span { color: var(--muted); letter-spacing: 0.04em; text-transform: none; }
.gdia__h em { color: var(--gold); font-style: normal; letter-spacing: 0.1em; }
.gdia--hoy .gdia__h { border-bottom-color: var(--line-gold); }

.gclases { list-style: none; margin: 0; padding: 0; }
.gclase {
  display: grid; gap: var(--sp-1) var(--sp-4);
  grid-template-columns: 1fr;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .gclase {
    grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 14rem) auto;
    align-items: center;
  }
}
.gclase--off { opacity: 0.62; }
.gclase__hora {
  font-family: var(--font-athletic); font-size: var(--t-body-lg);
  color: var(--gold); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.gclase__que { min-width: 0; }
.gclase__que a { color: var(--bone); font-weight: 600; text-decoration: none; }
.gclase__que a:hover { color: var(--gold-bright); text-decoration: underline; }
.gclase__que em {
  display: block; font-style: normal; font-size: var(--t-label); color: var(--muted);
}
.gclase__plazas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.gclase__act { display: flex; gap: var(--sp-2); }

/* ── Cuadrante semanal de Gestión (FC04 C1) ───────────────────────────────
   UNA marca para dos formas. El DOM va ordenado POR DÍA, que es lo que el
   móvil necesita: cada día su encabezado y debajo sus franjas, una tras
   otra. A partir de 900 px las celdas se colocan en su fila y su columna con
   `--row`/`--col`, y la misma marca se lee como cuadrante.

   Colocar por variables y no por orden del DOM es lo que evita tener dos
   bloques de contenido —uno para móvil y otro para escritorio— que es como
   se acaba arreglando uno y dejando el otro mintiendo.                    */
.gcuad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }

/* Columna de horas: sólo tiene sentido cuando hay rejilla. En el móvil cada
   celda lleva su hora escrita, así que aquí estorbaría. */
.gcuad__hcol { display: none; }

.gcuad__dia {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-4) 0 0; padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-athletic); font-size: var(--t-body);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone);
}
.gcuad__dia span { color: var(--muted); letter-spacing: 0.04em; text-transform: none; }
.gcuad__dia em { color: var(--gold); font-style: normal; letter-spacing: 0.1em; }
.gcuad__dia--hoy { border-bottom-color: var(--line-gold); }

.gcuad__celda { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* Una celda vacía en el móvil sería una fila en blanco sin explicación. */
.gcuad__celda--vacia { display: none; }

.gcupo {
  border: 1px solid var(--line); border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-3); min-width: 0;
}
.gcupo--off { opacity: 0.62; }
.gcupo--llena { border-color: var(--line-gold); }
.gcupo__que {
  display: block; color: var(--bone); font-weight: 600; text-decoration: none;
  overflow-wrap: anywhere;
}
.gcupo__que:hover { color: var(--gold-bright); text-decoration: underline; }
.gcupo__meta {
  margin: var(--sp-1) 0 0; font-size: var(--t-label); color: var(--muted);
}
.gcupo__hora { color: var(--gold); font-variant-numeric: tabular-nums; }
.gcupo__plazas {
  margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
}
.gcupo__aviso {
  margin: var(--sp-1) 0 0; font-size: var(--t-label); color: var(--gold);
  letter-spacing: 0.02em;
}
.gcuad__pie { margin-top: var(--sp-4); }

@media (min-width: 900px) {
  .gcuad {
    grid-template-columns: 5rem repeat(var(--dias), minmax(0, 1fr));
    gap: var(--sp-2);
    align-items: stretch;
  }
  .gcuad__hcol {
    display: flex; align-items: flex-start; justify-content: flex-end;
    grid-column: 1; grid-row: var(--row);
    padding-top: var(--sp-2);
    font-family: var(--font-athletic); font-size: var(--t-label);
    color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  }
  .gcuad__hcol--esquina { border: 0; }
  .gcuad__dia { grid-column: var(--col); grid-row: 1; margin-top: 0; }
  .gcuad__celda { grid-column: var(--col); grid-row: var(--row); }
  .gcuad__celda--vacia {
    display: block;
    border-top: 1px dashed var(--line);
  }
  /* La hora ya está en la columna de la izquierda: repetirla en cada celda
     llenaría el cuadrante de ruido. Se conserva en el DOM porque es lo que
     hace legible el móvil. */
  .gcuad__celda .gcupo__hora { color: var(--muted); }
}

/* ── Tarifas (FC04 C1) ────────────────────────────────────────────────── */
.gtarifa__nota { margin: 0 0 var(--sp-3); color: var(--muted); }
.gtabla--tarifa td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gtarifa__fuente { color: var(--muted); overflow-wrap: anywhere; }

/* ── Búsqueda y filtros ───────────────────────────────────────────────── */
.gbusca { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gbusca input[type="search"] {
  flex: 1 1 16rem; min-width: 0; min-height: var(--tap);
  padding: 0 var(--sp-3);
  background: var(--pit); color: var(--bone);
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  font-family: var(--font-body); font-size: var(--t-body);
}
.gbusca input[type="search"]:focus-visible { border-color: var(--gold); }

.gfiltros, .gvistas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.gfiltro {
  display: inline-flex; align-items: center; min-height: 38px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); text-decoration: none;
  font-size: var(--t-label); white-space: nowrap;
}
.gfiltro:hover { color: var(--bone); border-color: var(--line-strong); }
.gfiltro.is-on {
  color: var(--gold-ink); background: var(--gold); border-color: var(--gold);
  font-weight: 600;
}
.gvistas .grow { flex: 1 1 auto; }

/* ── Tablas ────────────────────────────────────────────────────────────
   El desbordamiento vive DENTRO de su caja. La página nunca se desplaza en
   horizontal, que es lo que rompe la lectura en un móvil.                 */
.gtabla-shell {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-1);
}
.gtabla { width: 100%; border-collapse: collapse; font-size: var(--t-dense); }
.gtabla th, .gtabla td {
  padding: var(--sp-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.gtabla thead th {
  position: sticky; top: 0; background: var(--raised);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  font-weight: 400;
}
.gtabla tbody th { font-weight: 600; color: var(--bone); white-space: normal; }
.gtabla tbody th a { color: var(--bone); text-decoration: none; }
.gtabla tbody th a:hover { color: var(--gold-bright); text-decoration: underline; }
.gtabla td { color: var(--bone-dim); }
.gtabla tbody tr:last-child th, .gtabla tbody tr:last-child td { border-bottom: 0; }
.gtabla tbody tr.is-atencion { background: var(--warn-dim); }
.gtabla__sub { display: block; font-style: normal; font-size: var(--t-label); color: var(--faint); }
.gtabla__hora { font-variant-numeric: tabular-nums; color: var(--gold); }
.gtabla .right { text-align: right; }

/* ── Formularios ──────────────────────────────────────────────────────── */
.gform__grid {
  display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .gform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gform__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gform .field { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
.gform .field label { font-size: var(--t-label); color: var(--muted); }
.gform .field__hint { color: var(--faint); }
.gform input, .gform select {
  min-height: var(--tap); width: 100%; padding: 0 var(--sp-3);
  background: var(--pit); color: var(--bone);
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  font-family: var(--font-body); font-size: var(--t-body);
}
.gform input:focus-visible, .gform select:focus-visible { border-color: var(--gold); }

/* ── Acciones agrupadas ───────────────────────────────────────────────── */
.gacts { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.gacts--row { flex-direction: column; }
@media (min-width: 720px) { .gacts--row { flex-direction: row; align-items: flex-start; gap: var(--sp-5); } }
.gacts form { display: flex; flex-direction: column; gap: var(--sp-1); }
.gacts .fine { color: var(--muted); }

/* ── Lo que no se deshace ──────────────────────────────────────────────
   Plegado y con confirmación dentro. Un botón de baja al mismo nivel que
   «guardar» se pulsa por inercia.                                         */
.gpeligro { border: 1px solid var(--stop); border-radius: var(--r-1); }
.gpeligro > summary {
  min-height: var(--tap); display: flex; align-items: center;
  padding-inline: var(--sp-3); cursor: pointer;
  color: var(--stop); font-family: var(--font-athletic);
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
}
.gpeligro > div { padding: 0 var(--sp-3) var(--sp-3); }
.gpeligro p { color: var(--bone-dim); font-size: var(--t-label); line-height: 1.55; }

/* ── Secreto de un solo uso ───────────────────────────────────────────── */
.gsecreto {
  margin-bottom: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--gold); border-radius: var(--r-2);
  background: var(--raised);
}
.gsecreto h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.gsecreto__valor {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-evidence);
  font-size: clamp(1.375rem, 6vw, 2rem); letter-spacing: 0.12em;
  color: var(--gold-bright); overflow-wrap: anywhere;
}
.gsecreto__valor--largo { font-size: var(--t-body); letter-spacing: 0.02em; }
.gsecreto p { margin: 0; color: var(--bone-dim); font-size: var(--t-label); }

/* ── Hueco de producto ────────────────────────────────────────────────── */
.ghueco {
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong); border-radius: var(--r-2);
  background: var(--surface); max-width: var(--measure);
  margin-bottom: var(--sp-5);
}
.ghueco__que { margin: 0 0 var(--sp-3); font-size: var(--t-body-lg); color: var(--bone); }
.ghueco p { color: var(--bone-dim); line-height: 1.6; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.gfoot {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5);
  color: var(--muted); font-size: var(--t-label);
}
.gfoot p { margin: 0 0 var(--sp-1); }

/* Una pastilla con una frase dentro sacaba la página del eje en 375 px.
   `white-space: nowrap` es correcto para un estado de dos palabras y sólo
   deja de serlo aquí, así que la excepción vive aquí y no en el componente. */
.gwrap .pill { white-space: normal; overflow-wrap: anywhere; }

/* ── Foco ──────────────────────────────────────────────────────────────
   Un anillo que se ve sobre carbón. Sin esto, recorrer la ficha con el
   teclado es adivinar dónde está uno.                                     */
.gwrap :focus-visible, .gbar :focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: var(--r-1);
}


/* ── Entrenamiento · FC04 C2 ────────────────────────────────────────────
   Una pantalla que se usa de pie, con el movil en el suelo y las manos con
   magnesio. De ahi los objetivos tipograficos grandes, el area de toque
   holgada y una sola accion principal por vista.                          */
.tr-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-5) 0;
}
.tr-lista { list-style: none; padding: 0; margin: var(--sp-5) 0; }
.tr-lista > li { margin-bottom: var(--sp-4); }

/* El kilaje. Es el numero que se mira antes de cargar la barra, asi que es
   el numero mas grande de la pantalla y no compite con nada. */
.tr-carga {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 700; line-height: 1.1;
  color: var(--gold-bright);
  margin: var(--sp-2) 0 0;
}
.tr-kv { margin: var(--sp-3) 0 0; }

.tr-card--hoy { border-color: var(--gold); }
.tr-actual { border-color: var(--gold); }

/* El descanso. Pegado arriba para que se vea sin desplazar la pagina
   mientras se anda por la sala. */
.tr-timer {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  border: 1px solid var(--gold); border-radius: var(--r-2);
  background: var(--ink-raised, rgba(10,10,11,0.94));
}
.tr-timer__rotulo { color: var(--muted); font-size: var(--t-label); }
.tr-timer__n {
  font-size: clamp(1.5rem, 6vw, 2rem); font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
}
.tr-timer--fin { border-color: var(--ok, var(--gold)); }

.tr-form { margin-top: var(--sp-5); }
.tr-form__grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
/* Un campo numerico de entrenamiento se teclea con el pulgar y de pie: el
   area de toque manda sobre la densidad. */
.tr-form__grid input, .tr-form__grid select { min-height: 48px; font-size: 1.05rem; }
.tr-hechas { margin: var(--sp-5) 0; }
.tr-resumen { margin: var(--sp-5) 0; }
.tr-h1 { margin-bottom: var(--sp-1); }