/* ==========================================================================
   RETA — reta-app.css · LA FUENTE DE FORMA
   AKL-2026-RETA-FORMA-001 · ancho canónico 393px · rejilla de 4px

   Esto NO es una descripción de la app: es la app. Code importa este archivo
   tal cual y no vuelve a inventar un número. Si una medida no está aquí,
   no existe — se pide, no se improvisa.

   Orden: system → doctrine → adoption → feature. Este archivo es *system*.
   El color y la tipografía viven en colors_and_type.css; aquí vive la
   geometría: espaciado, radios, alturas, tamaños por rol.

   Los tokens llevan prefijo --rg-* (reta geometry) a propósito: los --r-* y
   --space-* de colors_and_type.css son la escala genérica del design system
   y se quedan intactos. Estos son los valores de PRODUCTO, medidos a 393.
   ========================================================================== */

@import url("colors_and_type.css");

:root {
  /* ─── Lienzo ───
     393 = Pixel / iPhone 16. Canon sellado. Todo lo de abajo se midió aquí. */
  --rg-w: 393px;
  --rg-gutter: 20px;          /* margen lateral · contenido útil = 353px */

  /* ─── Rejilla de 4 ───
     Ningún espaciado fuera de esta escala. Si hace falta 15px, es 16. */
  --rg-1:  4px;
  --rg-2:  8px;
  --rg-3: 12px;
  --rg-4: 16px;
  --rg-5: 20px;
  --rg-6: 24px;
  --rg-7: 28px;
  --rg-8: 32px;
  --rg-10: 40px;
  --rg-12: 48px;

  /* Separaciones por rol — no elegir a ojo entre --rg-2 y --rg-3 */
  --rg-gap-list: 10px;        /* entre tarjetas hermanas de una lista */
  --rg-gap-tight: 8px;        /* dentro de una tarjeta */
  --rg-gap-section: 24px;     /* entre bloques de una pantalla */

  /* ─── Radios por rol ───
     Cuatro valores. Una tarjeta nunca tiene un radio distinto a otra. */
  --rg-r-card: 18px;          /* tarjeta de primer nivel */
  --rg-r-inner: 12px;         /* cualquier cosa DENTRO de una tarjeta */
  --rg-r-field: 12px;
  --rg-r-seg: 12px;           /* contenedor del segmentado */
  --rg-r-seg-in: 9px;         /* pastilla activa del segmentado */
  --rg-r-pill: 999px;         /* botones, chips, avatares, marcas */
  --rg-r-head: 0 0 18px 18px; /* encabezado de liga en crema */
  --rg-r-sheet: 24px 24px 0 0;
  --rg-r-court: 6px;

  /* ─── Alturas por rol ───
     44px es el piso de hit target y no se negocia. */
  --rg-tap: 44px;
  --rg-h-head: 56px;          /* encabezado anclado */
  --rg-h-btn: 52px;           /* acción principal */
  --rg-h-btn-sm: 40px;        /* acción secundaria en línea */
  --rg-h-btn-card: 44px;      /* acción dentro de una tarjeta · piso de tap */
  --rg-h-field: 52px;
  --rg-h-chip: 36px;
  --rg-h-seg: 40px;
  --rg-h-row: 60px;           /* fila de tabla / lista con dos líneas */
  --rg-h-row-sm: 52px;        /* fila de una línea */
  --rg-h-nav: 64px;           /* menú normal · Regla del menú */
  --rg-h-nav-slim: 50px;      /* dentro de la jornada · iconos sin etiqueta */
  --rg-av: 32px;
  --rg-av-sm: 24px;
  --rg-av-lg: 44px;

  /* ─── Relleno por rol ─── */
  --rg-pad-card: 16px;
  --rg-pad-card-lg: 20px;
  --rg-pad-row-y: 12px;
  --rg-pad-row-x: 14px;

  /* ─── Tipografía por rol, medida a 393 ───
     Derivada de la anatomía a 1/0.70. Sus mockups están a 0.70× de estos
     valores: nunca copiar un número de ahí.
     v2 (2026-08-10): la escala alta subió. Los niveles bajos estaban bien y
     los altos venían encogidos ~15%, que es lo que aplanaba la jerarquía. */
  --rg-t-hero: 40px;          /* título de pantalla · editorial itálica */
  --rg-t-hero-sm: 30px;       /* el mismo rol, nombre largo (>18 caracteres) */
  --rg-t-h1: 34px;            /* variante display del hero */
  --rg-t-h2: 24px;            /* nombre de liga en encabezado crema */
  --rg-t-bar: 18px;           /* título en barra de pantalla anidada */
  --rg-t-name: 20px;          /* nombre en fila o tarjeta */
  --rg-t-body: 16px;
  --rg-t-meta: 14px;          /* secundario, sede, fecha */
  --rg-t-cap: 12px;           /* kicker en versalitas · piso absoluto */
  --rg-t-nav: 11px;
  --rg-t-num: 23px;           /* puntos en tabla */
  --rg-t-num-lg: 37px;        /* marcador */

  --rg-lh-tight: 0.98;
  --rg-lh-head: 1.15;
  --rg-lh-body: 1.45;
  --rg-ls-cap: 0.16em;
  --rg-ls-head: -0.015em;

  /* ─── Filete y elevación ─── */
  --rg-hair: 1px;
  --rg-sh-card: 0 1px 3px rgba(0, 0, 0, 0.22);
  --rg-sh-float: 0 10px 30px rgba(0, 0, 0, 0.38);
  --rg-sh-nav: 0 -1px 0 var(--border-subtle);

  /* ─── Zona segura del sistema operativo ───
     La muesca y la barra de gestos no son decisión de diseño, pero SÍ son
     medidas — y por lo tanto viven aquí, no en un envelope de componente.
     El hero es lo primero que toca el borde superior: sin esto el título
     queda pegado a la barra de estado. */
  --rg-safe-top: env(safe-area-inset-top, 0px);
  --rg-safe-bot: env(safe-area-inset-bottom, 0px);
  /* Espacio que el contenido deja bajo el menú cuando la nav va fija. */
  --rg-clear-nav: calc(var(--rg-h-nav) + var(--rg-safe-bot) + var(--rg-4));
  --rg-clear-nav-slim: calc(var(--rg-h-nav-slim) + var(--rg-safe-bot) + var(--rg-4));
}

/* ==========================================================================
   ESQUELETO · encabezado y menú anclados, solo el contenido se desliza
   Excepciones a propósito: la final y la coronación se llevan el papel entero.
   ========================================================================== */

.r-app { width: 100%; max-width: var(--rg-w); margin: 0 auto; font-family: var(--font-body); color: var(--fg-1); background: var(--bg-primary); }
/* FICHA-02 · AKL-2026-RETA-CANON-PANTALLAS-001 · LOTE C · el cascarón se ancla
   de verdad. Esta hoja ya declaraba «encabezado y menú anclados, solo el
   contenido se desliza», pero la geometría no lo cumplía: con `height: 100%`
   sobre un padre sin altura, el alto lo decidía el contenido, `.r-main` crecía
   con él (un ítem flex trae `min-height: auto`, así que no se encoge por
   debajo de su contenido) y quien scrolleaba era el documento entero. El
   `overflow: hidden` de aquí no recortaba nada porque la caja ya era tan alta
   como su contenido. Resultado: el hero y el encabezado se iban hacia arriba.
   `100dvh` (no `vh`) porque la barra del navegador móvil come alto y `dvh` ya
   lo descuenta. */
.r-screen { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; overflow: hidden; position: relative; }
.r-screen[data-mode="light"] { background: var(--bg-primary); }

.r-head { flex: 0 0 auto; min-height: var(--rg-h-head); display: flex; align-items: center; gap: var(--rg-3); padding: var(--rg-safe-top) var(--rg-gutter) 0; }
.r-head__title { font-family: var(--font-display); font-weight: 700; font-size: var(--rg-t-bar); letter-spacing: var(--rg-ls-head); line-height: var(--rg-lh-head); }
.r-head__sub { font-size: var(--rg-t-meta); color: var(--fg-3); margin-top: 2px; }

/* El HERO abre las pantallas de nivel raíz y las de formulario: kicker con
   pelota + título editorial. Es el rol que le da jerarquía a la pantalla; sin
   él todo queda del mismo peso. La barra .r-head es para pantallas anidadas,
   donde el título ya no es el protagonista sino el rastro de dónde estás. */
.r-hero { flex: 0 0 auto; padding: calc(var(--rg-safe-top) + var(--rg-4)) var(--rg-gutter) var(--rg-3); }
/* Cuando el hero va debajo de una barra, la zona segura ya la absorbió ella. */
.r-head + .r-hero { padding-top: 0; }
.r-hero__title { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: var(--rg-t-hero); line-height: var(--rg-lh-tight); letter-spacing: -0.005em; margin: var(--rg-2) 0 0; }
.r-hero__title--sm { font-size: var(--rg-t-hero-sm); }
.r-hero__title--display { font-family: var(--font-display); font-style: normal; font-weight: 800; font-size: var(--rg-t-h1); letter-spacing: var(--rg-ls-head); }
.r-hero__sub { font-size: var(--rg-t-body); line-height: var(--rg-lh-body); color: var(--fg-3); margin: var(--rg-2) 0 0; text-wrap: pretty; }
.r-hero + .r-main { padding-top: var(--rg-2); }
.r-head__end { margin-left: auto; display: flex; align-items: center; gap: var(--rg-2); }

/* Encabezado de liga en crema — es cromo, no tarjeta de énfasis. Cuenta como
   la superficie crema de la pantalla: no poner otra debajo. */
.r-head--liga { display: block; background: var(--crema); color: var(--verde-corcuera); border-radius: var(--rg-r-head); padding: var(--rg-3) var(--rg-gutter) var(--rg-4); }
.r-head--liga .r-head__title { font-size: var(--rg-t-h2); }
.r-head--liga .r-head__sub { color: rgba(22, 57, 31, 0.62); }
.r-head__row { display: flex; align-items: center; gap: var(--rg-3); }

.r-back { width: var(--rg-av); height: var(--rg-av); flex: 0 0 auto; border: 0; border-radius: var(--rg-r-pill); background: var(--accent-tint); color: inherit; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.r-head--liga .r-back { background: rgba(22, 57, 31, 0.10); }

/* `min-height: 0` es la mitad que faltaba del ancla: sin él, el scroller
   nunca se encoge y `overflow-y: auto` no llega a activarse. */
.r-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--rg-4) var(--rg-gutter) var(--rg-6); display: flex; flex-direction: column; gap: var(--rg-gap-list); }
.r-main--center { justify-content: center; }
/* Con la nav fija (fuera del flujo), el contenido le deja su hueco. En el
   esqueleto de esta hoja la nav va en flujo y no hace falta. */
.r-main--nav-fija { padding-bottom: var(--rg-clear-nav); }
.r-main--nav-fija-slim { padding-bottom: var(--rg-clear-nav-slim); }
.r-section { display: flex; flex-direction: column; gap: var(--rg-gap-list); }
.r-section + .r-section { margin-top: var(--rg-gap-section); }

/* ==========================================================================
   MENÚ · siempre hay menú; lo que cambia es cuánto ocupa
   Ligas · [acción del nivel] · Perfil
   ========================================================================== */

.r-nav { flex: 0 0 auto; height: var(--rg-h-nav); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; background: var(--bg-nav); box-shadow: var(--rg-sh-nav); padding-bottom: var(--rg-safe-bot); }
.r-nav--slim { height: var(--rg-h-nav-slim); }
.r-nav__item { min-height: var(--rg-tap); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--fg-3); cursor: pointer; font-family: var(--font-body); }
.r-nav__item[aria-current="page"] { color: var(--fg-1); }
.r-nav__icon { font-size: 18px; line-height: 1; font-style: normal; }
.r-nav__label { font-size: var(--rg-t-nav); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; }
.r-nav--slim .r-nav__label { display: none; }
.r-nav--slim .r-nav__icon { font-size: 19px; }
.r-nav__item:disabled { opacity: 0.38; cursor: default; }

/* ==========================================================================
   TARJETAS · un radio, un relleno. Hermanas idénticas, siempre.
   ========================================================================== */

.r-card { background: var(--bg-card); border: var(--rg-hair) solid var(--border-subtle); border-radius: var(--rg-r-card); padding: var(--rg-pad-card); display: flex; flex-direction: column; gap: var(--rg-gap-tight); }
.r-card--lg { padding: var(--rg-pad-card-lg); }
.r-card--flat { background: var(--accent-tint); border-color: transparent; }
.r-card--dash { background: none; border-style: dashed; border-color: var(--border-medium); align-items: center; justify-content: center; min-height: 76px; color: var(--fg-3); font-family: var(--font-display); font-weight: 700; }
/* Rally · liga con caducidad. El punteado es su marca, no decoración. */
.r-card--rally { border-style: dashed; border-color: var(--border-medium); }

/* Una sola superficie de énfasis por pantalla. Invierte respecto a su fondo:
   crema sobre verde, verde sobre papel. Regla 3b + 9c. */
.r-card--enfasis { background: var(--crema); color: var(--verde-corcuera); border-color: transparent; }
[data-mode="light"] .r-card--enfasis { background: var(--verde-corcuera); color: var(--crema); }

.r-card__head { display: flex; align-items: flex-start; gap: var(--rg-3); }
.r-card__end { margin-left: auto; text-align: right; flex: 0 0 auto; }

/* ==========================================================================
   TEXTO POR ROL · el nombre dice el rol, no el tamaño
   ========================================================================== */

.r-kicker { font-size: var(--rg-t-cap); font-weight: 700; letter-spacing: var(--rg-ls-cap); text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: var(--rg-2); }
.r-kicker--live { color: var(--fg-1); }
.r-title { font-family: var(--font-display); font-weight: 800; font-size: var(--rg-t-h1); line-height: var(--rg-lh-tight); letter-spacing: var(--rg-ls-head); margin: 0; }
.r-title--cere { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: var(--rg-t-hero); }
/* FEEDBACK-001 B1 · mismo gesto editorial, momento en vez de ceremonia. */
.r-title--cere.r-title--sm { font-size: var(--rg-t-hero-sm); }
/* Pregunta de pique · la puerta (Pieza C). Mismo itálica editorial del hero,
   un escalón abajo: son tres preguntas seguidas, no un titular único — a 40px
   competirían entre sí en vez de leerse como lista. */
.r-pique { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.32; margin: 0; }
.r-name { font-family: var(--font-display); font-weight: 700; font-size: var(--rg-t-name); line-height: var(--rg-lh-head); letter-spacing: var(--rg-ls-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-body { font-size: var(--rg-t-body); line-height: var(--rg-lh-body); color: var(--fg-2); margin: 0; text-wrap: pretty; }
.r-meta { font-size: var(--rg-t-meta); line-height: 1.35; color: var(--fg-3); }
.r-num { font-family: var(--font-display); font-weight: 800; font-size: var(--rg-t-num); line-height: 1; font-variant-numeric: tabular-nums; }
.r-num--lg { font-size: var(--rg-t-num-lg); }
.r-card--enfasis .r-meta, .r-card--enfasis .r-kicker, .r-head--liga .r-meta { color: rgba(22, 57, 31, 0.62); }
/* .r-title--cere y .r-body no fijan color propio (heredan) — pero la base
   `.ds-body, p { color: var(--fg-1) }` de colors_and_type.css les gana a esa
   herencia por ser un match directo sobre el <p>, así que dentro de la tarjeta
   invertida quedan crema-sobre-crema si no se listan aquí explícitamente. */
.r-card--enfasis .r-title--cere, .r-card--enfasis .r-body { color: var(--verde-corcuera); }

/* ==========================================================================
   LA PELOTA · Regla 8 v2 (AKL-2026-RETA-REGLA8-002 · 24-sep-2026)
   La pelota es objeto. El lima (#9DC313) va como relleno: puntos, pastillas,
   circulos, botones rellenos. Nunca como tinta de texto ni como linea o
   filete. Salvo el brillo lima: contorno de lima con resplandor, permitido
   UNICAMENTE en (1) indicadores de "en vivo / online" y (2) acciones de
   "compartir". Una sola definicion (.r-brillo-lima), reutilizada; ningun
   otro uso. El guard 3 del pre-commit solo la deja pasar dentro de esa clase.
   .r-brillo-lima: PENDIENTE — se define con los valores exactos de la Web de
   Descarga v2 de Design cuando llegue; no se aproxima antes.
   ========================================================================== */

.r-pelota { width: 10px; height: 10px; flex: 0 0 auto; border-radius: var(--rg-r-pill); background: var(--pelota); box-shadow: 0 0 0 var(--rg-hair) var(--pelota-edge); display: inline-block; }
.r-pelota--lg { width: 14px; height: 14px; }
/* Disco con número o letra dentro: la tinta encima es obligatoria. */
.r-pelota-disc { width: var(--rg-av-sm); height: var(--rg-av-sm); flex: 0 0 auto; border-radius: var(--rg-r-pill); background: var(--pelota); color: var(--pelota-ink); font-family: var(--font-display); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.r-mark { display: inline-flex; align-items: center; border-radius: var(--rg-r-pill); background: var(--pelota); color: var(--pelota-ink); font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; padding: 2px var(--rg-2); }
.r-mark--oro { background: var(--hot); color: var(--pelota-ink); }

/* ─── Candado · FREEMIUM v3 ───
   AKL-2026-RETA-FREEMIUM-001 · BRIEF-DSGN-001. RETA no tenía sistema de
   iconos SVG (el menú son glifos de texto) — este es el primero, y toma
   prestado el trazo "lock" ya sellado en Bloque 3 - Iconografía (viewBox
   24×24, stroke 1.6, el rango que ese documento reserva para "glyphs de
   estado"). Gate visual de Emmanuel PASADO 2026-08-14. */
.r-lock { width: 18px; height: 18px; flex: 0 0 auto; stroke: var(--fg-4); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.r-lock--sm { width: 14px; height: 14px; }

/* ==========================================================================
   FILAS · altura fija por rol. Una tabla no cambia de ritmo a media lista.
   ========================================================================== */

.r-list { display: flex; flex-direction: column; }
.r-row { min-height: var(--rg-h-row); display: flex; align-items: center; gap: var(--rg-3); padding: var(--rg-pad-row-y) var(--rg-pad-row-x); background: var(--bg-card); border: var(--rg-hair) solid var(--border-subtle); border-radius: var(--rg-r-card); }
.r-row--sm { min-height: var(--rg-h-row-sm); }
.r-list--table .r-row { background: none; border: 0; border-bottom: var(--rg-hair) solid var(--border-subtle); border-radius: 0; }
.r-list--table .r-row:last-child { border-bottom: 0; }
.r-row__pos { width: var(--rg-av-sm); flex: 0 0 auto; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--rg-t-meta); color: var(--fg-4); }
.r-row__body { flex: 1 1 auto; min-width: 0; }
.r-row__end { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: var(--rg-2); }
.r-chevron { flex: 0 0 auto; color: var(--fg-4); font-size: var(--rg-t-name); line-height: 1; }

/* Fila de liga · CICLO-001a. Tus ligas es una LISTA, no un muro de tarjetas:
   con siete u ocho grupos las tarjetas altas dejan de servir. El punto de
   pelota marca la que está jugando ahora; el punteado, el rally. */
.r-row--liga { gap: var(--rg-3); }
.r-row--liga .r-name { font-size: var(--rg-t-name); }
.r-row--liga .r-meta { margin-top: 2px; }
.r-row--rally { border-style: dashed; border-color: var(--border-medium); }
.r-row__status { font-size: var(--rg-t-meta); color: var(--fg-3); }
.r-row__status--viva { color: var(--fg-1); font-weight: 600; }

/* Tarjeta de liga · CICLO-001b · 2026-08-11.
   Sustituye la fila con acordeón: el inline no se sabía que existía, así que
   el código y el compartir quedaban escondidos detrás de un chevrón. Aquí todo
   está a la vista y las dos acciones son fijas.
   v2 (mismo día): la tarjeta COMPLETA es el destino — «Entrar» como botón era
   redundante y además chocaba con «Entrar con código», que es la acción
   opuesta (unirse a uno nuevo). Queda una sola acción secundaria, Compartir:
   entrar se hace siempre, compartir se hace una vez, y 50/50 del ancho le
   enseñaba al ojo que valían igual.
   El código es una credencial, no información: solo aparece cuando organizas
   tú — al que ya está dentro no le sirve.
   Conservamos .r-row--liga arriba: es la mitad de la salida acordada si la
   lista crece más allá de siete grupos — tarjeta para los activos, fila para
   los dormidos. */
.r-card--liga { display: flex; flex-direction: column; gap: var(--rg-gap-tight); padding: var(--rg-pad-card-lg); cursor: pointer; }
.r-liga__head { display: flex; align-items: center; gap: var(--rg-3); }
.r-liga__head .r-row__body { flex: 1 1 auto; min-width: 0; }
.r-liga__sede { font-size: var(--rg-t-meta); line-height: 1.35; color: var(--fg-2); }
.r-liga__meta { display: flex; align-items: center; gap: var(--rg-3); }
.r-liga__meta .r-meta { flex: 1 1 auto; min-width: 0; }
.r-code { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--rg-2); height: var(--rg-h-chip); padding: 0 var(--rg-3); border-radius: var(--rg-r-pill); background: var(--bg-elevated); color: var(--fg-2); font-family: var(--font-mono); font-size: var(--rg-t-meta); letter-spacing: 0.06em; }
.r-liga__actions { display: grid; grid-template-columns: 1fr; gap: var(--rg-2); margin-top: var(--rg-1); }
.r-liga__actions .r-btn { min-height: var(--rg-h-btn-card); font-size: var(--rg-t-body); padding: 0 var(--rg-3); }

/* Estado vivo · Regla 8. Lo que está pasando AHORA es lo único urgente de la
   pantalla, y la pelota es lo que marca pertenencia al juego — pero nunca es
   tinta: va como objeto relleno con --pelota-ink encima. */
.r-live { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--rg-r-pill); background: var(--pelota); color: var(--pelota-ink); font-size: var(--rg-t-cap); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Tu renglón en la tabla · 2026-08-11 (v2 CICLO-001c 2026-08-12).
   En ocho renglones no había nada que dijera cuál eres tú, y es la pantalla
   que más se mira. No lleva crema (la tabla no tiene énfasis autorizado):
   lleva un filete de pelota — objeto relleno, Regla 8.
   v2: el filete vive dentro del row (left: 0) con 4px extra de padding en
   el borde izquierdo. La versión previa lo ponía a left:-8px y en
   `.r-list--table` (que quita background/border/radius del row) el pseudo
   caía fuera del área visible del scroll — arreglo del rol, sin token nuevo. */
.r-row--tu { position: relative; padding-left: calc(var(--rg-pad-row-x) + 4px); }
.r-row--tu::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 62%; border-radius: var(--rg-r-pill); background: var(--pelota); }

/* ─── Congeladora · FREEMIUM v3 ───
   El candado no esconde — exhibe. Una fila congelada NO se oscurece: se queda
   con su nombre, su fecha y (si hubo coronación) su campeón, y solo pierde el
   detalle de más y el chevrón, por un candado. Oscurecerla sería esconder, no
   exhibir. Ver AKL-2026-RETA-FREEMIUM-001 · BRIEF-DSGN-001. */
.r-row--congelada { cursor: pointer; }

/* Fila velada · la tabla acumulada tras candado. La posición se queda (la
   tabla sigue viva y calculando); nombre y número se vuelven barra.
   Estructura sin dato — nunca blur, que no existe en este vocabulario.
   Sin shimmer tampoco: no está cargando, está congelada. */
.r-row--velada .r-row__pos { color: var(--fg-4); }
.r-ghost-bar { height: 10px; border-radius: var(--rg-1); background: var(--border-medium); }
.r-ghost-bar--name { width: 100px; height: 12px; }
.r-ghost-bar--meta { width: 66px; margin-top: 6px; }
.r-ghost-bar--num { width: 26px; margin-left: auto; }

/* ─── Piel Plus · FEEDBACK-002 SELLADO 2026-08-14 ───
   Filete = marcador PRIMARIO de superficie (cards, headers, filas) — existe si
   y solo si el creador del grupo tiene Plus vigente; nunca estilo suelto en el
   JSX. El anillo de contorno (objeto puntual, ~14-18px, sin relleno) es rol
   aparte, para cuando el filete no se lee — hoy solo el header de la ficha.
   Regla de oro v2: el estatus va en TRAZO, jamás en una palabra. */
.r-filete--plus { border-left: 3px solid var(--plus-gold); padding-left: calc(var(--rg-gutter) - 3px); }
.r-filete--plus.r-row, .r-filete--plus.r-card { border-radius: 0 var(--rg-r-inner) var(--rg-r-inner) 0; }
.r-filete--plus.r-card--liga { border-radius: 0 var(--rg-r-card) var(--rg-r-card) 0; }
/* `.r-list--table .r-row` resetea `border: 0` con especificidad 0,2,0 y le
   gana a `.r-filete--plus` (0,1,0) — sin esta línea el filete desaparece justo
   en la tabla, que es donde más se mira. Los mockups de Piel Plus no lo vieron
   porque pintaban el filete con estilo inline. */
.r-list--table .r-filete--plus { border-left: 3px solid var(--plus-gold); }

/* Puerta de entrada a un grupo nuevo · «Tengo un código». No es tarjeta
   punteada: el punteado ya es la marca del rally, y en la misma pantalla no
   puede significar dos cosas. Vive en /l como línea de texto — es la acción
   opuesta a entrar a un grupo tuyo, y por eso pesa distinto de las filas de
   arriba. */
.r-join { min-height: var(--rg-tap); display: flex; align-items: center; justify-content: center; font-size: var(--rg-t-body); color: var(--fg-2); }
.r-join b { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }

.r-avatar { width: var(--rg-av); height: var(--rg-av); flex: 0 0 auto; border-radius: var(--rg-r-pill); background: var(--bg-elevated); color: var(--fg-2); font-family: var(--font-display); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.r-avatar--sm { width: var(--rg-av-sm); height: var(--rg-av-sm); font-size: 10px; }
.r-avatar--ghost { background: none; border: var(--rg-hair) dashed var(--border-medium); color: var(--fg-4); }
.r-stack { display: flex; }
.r-stack .r-avatar + .r-avatar { margin-left: -8px; }

/* ==========================================================================
   ACCIONES · la crema es el acento. CTA = píldora crema, tinta verde.
   ========================================================================== */

.r-btn { min-height: var(--rg-h-btn); display: flex; align-items: center; justify-content: center; gap: var(--rg-2); padding: 0 var(--rg-5); border: var(--rg-hair) solid transparent; border-radius: var(--rg-r-pill); font-family: var(--font-display); font-weight: 700; font-size: var(--rg-t-bar); letter-spacing: var(--rg-ls-head); cursor: pointer; background: none; color: var(--fg-1); text-decoration: none; }
.r-btn--primary { background: var(--accent); color: var(--fg-on-accent); }
.r-btn--primary:hover { background: var(--accent-hover); }
.r-btn--ghost { border-color: var(--border-medium); color: var(--fg-2); }
.r-btn--sm { min-height: var(--rg-h-btn-sm); font-size: var(--rg-t-body); padding: 0 var(--rg-4); }
/* Acción secundaria dentro de una tarjeta plana · no compite con el CTA de
   pantalla. Vive en la banda de acumulación de Jornadas (Pieza A). */
.r-btn--soft { background: var(--bg-elevated); border-color: transparent; color: var(--fg-1); }
.r-btn:disabled { opacity: 0.42; cursor: default; }
.r-btn__hint { font-family: var(--font-body); font-weight: 500; font-size: var(--rg-t-meta); color: var(--fg-4); text-align: center; margin-top: var(--rg-2); }
[data-mode="light"] .r-btn--primary { background: var(--verde-corcuera); color: var(--crema); }

.r-actions { display: flex; flex-direction: column; gap: var(--rg-2); margin-top: var(--rg-2); }

.r-chips { display: flex; flex-wrap: wrap; gap: var(--rg-2); }
.r-chip { min-height: var(--rg-h-chip); display: inline-flex; align-items: center; padding: 0 var(--rg-4); border: var(--rg-hair) solid var(--border-line); border-radius: var(--rg-r-pill); background: none; color: var(--fg-3); font-size: var(--rg-t-meta); font-weight: 600; cursor: pointer; }
.r-chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--fg-on-accent); }

.r-seg { display: flex; height: var(--rg-h-seg); padding: 3px; gap: 3px; border-radius: var(--rg-r-seg); background: rgba(22, 57, 31, 0.09); }
.r-seg__item { flex: 1 1 0; border: 0; border-radius: var(--rg-r-seg-in); background: none; color: rgba(22, 57, 31, 0.58); font-family: var(--font-display); font-weight: 700; font-size: var(--rg-t-body); cursor: pointer; }
.r-seg__item[aria-selected="true"] { background: var(--verde-corcuera); color: var(--crema); }

.r-field { width: 100%; height: var(--rg-h-field); padding: 0 var(--rg-4); border: var(--rg-hair) solid var(--border-line); border-radius: var(--rg-r-field); background: var(--bg-input); color: var(--fg-1); font-family: var(--font-body); font-size: var(--rg-t-body); }
.r-field::placeholder { color: var(--fg-4); }

/* ==========================================================================
   CANCHA Y MARCADOR
   ========================================================================== */

.r-court { display: flex; position: relative; min-height: 108px; border: var(--rg-hair) solid var(--border-medium); border-radius: var(--rg-r-court); }
.r-court::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: var(--rg-hair); background: var(--border-medium); }
.r-court__side { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rg-1); padding: var(--rg-3); text-align: center; }
/* La cancha es un selector, no una etiqueta · 2026-08-11.
   En la captura, el lado se elige y el teclado le pertenece a ese lado: se
   toca la pareja y luego el número. El lado activo se llena; el otro baja su
   marcador a --fg-3 y sigue siendo tocable para cambiar de lado.
   Sin crema: la captura no tiene énfasis autorizado (Regla 3b). */
.r-court__side[aria-selected] { cursor: pointer; border-radius: var(--rg-r-court); }
.r-court__side[aria-selected="true"] { background: var(--bg-elevated); }
.r-court__side[aria-selected="false"] .r-score, .r-court__side[aria-selected="false"] .r-meta { color: var(--fg-3); }
.r-score { font-family: var(--font-editorial); font-style: italic; font-size: var(--rg-t-num-lg); line-height: 1; }
.r-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rg-2); }
.r-pad button { min-height: var(--rg-tap); border: var(--rg-hair) solid var(--border-line); border-radius: var(--rg-r-inner); background: var(--accent-tint); color: var(--fg-1); font-family: var(--font-display); font-weight: 700; font-size: var(--rg-t-name); cursor: pointer; }

/* Matriz de compañeros · celda cuadrada, encendida en pelota */
.r-matrix { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--rg-1); }
.r-matrix span { aspect-ratio: 1; border-radius: var(--rg-1); background: var(--accent-tint); }
.r-matrix span.is-played { background: var(--pelota); }
.r-matrix span.is-now { background: var(--crema); }

/* Trío de cifras · perfil e historia · 2026-08-11. Tres columnas iguales:
   son del mismo rango, y una rejilla evita que la más larga se coma a las
   otras. */
.r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rg-3); }
.r-stat__n { font-family: var(--font-display); font-weight: 800; font-size: var(--rg-t-num); line-height: 1; font-variant-numeric: tabular-nums; }
.r-stat__l { font-size: var(--rg-t-cap); font-weight: 700; letter-spacing: var(--rg-ls-cap); text-transform: uppercase; color: var(--fg-3); margin-top: var(--rg-1); }

/* Contador de congelados · Piezas A y B. Dos columnas cuando no hay coronas
   que anunciar todavía, solo lo que se acumula fuera de vista. */
.r-stats--2 { grid-template-columns: repeat(2, 1fr); }

/* Muelle de acción · 2026-08-11. La acción principal de una pantalla no puede
   vivir debajo del pliegue: va anclada sobre el menú, fuera del scroll. */
.r-dock { flex: 0 0 auto; padding: var(--rg-3) var(--rg-gutter); background: var(--bg-primary); box-shadow: 0 -1px 0 var(--border-subtle); }
.r-dock .r-actions { margin-top: 0; }

/* ==========================================================================
   A11Y · anillo de foco universal, se invierte sobre el acento
   ========================================================================== */

:where(.r-app) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--rg-1); }
:where(.r-app) .r-btn--primary:focus-visible, :where(.r-app) .r-chip[aria-pressed="true"]:focus-visible { outline-color: var(--verde-corcuera); }
.r-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }