/* ================================================================
   SISTEMA DE DISEÑO "La Apuesta" (Bloque 6, rediseño visual)
   ================================================================
   Todo color/tipografía/radio/sombra/espaciado usado en cualquier
   pantalla debe salir de las variables de este bloque, nunca un
   valor suelto repetido por el archivo -- así se puede propagar el
   look a pantallas nuevas sin reescribir nada de aquí.

   Los grupos marcados "FUNCIONAL" tienen un significado fijo para
   el jugador en TODA la app: 1er lugar = oro, 2do lugar = plata,
   semáforo de aciertos = verde/rojo/gris, flechas de movimiento =
   verde/rojo, calificación al Acumulado = morado. No cambian de
   color entre pantallas ni se mezclan entre sí.

   Aplicado a TODA la app (Bloque 6.3, ver README): encabezado
   (src/Layout.php), Inicio, Apuestas, matriz, posiciones, general,
   marcadores, perfil, login/registro y el panel de admin comparten
   este mismo archivo -- variables, tarjetas, botones, tablas, chips
   y tipografía son un solo sistema, no hay pantallas con "look viejo"
   pendiente. La optimización específica para pantallas anchas
   (aprovechar el espacio horizontal) queda para un paso posterior.
   ================================================================ */

:root {
    /* --- Paleta base: fondo y tarjetas ---------------------------- */
    --color-bg: #dcdcdc;            /* fondo general de la app */
    --color-surface: #ffffff;       /* tarjetas, formularios, barras internas */
    --color-surface-muted: #eeeeef; /* paneles secundarios DENTRO de una tarjeta blanca */
    --color-text: #1c1f26;          /* texto principal */
    --color-muted: #63676e;         /* texto secundario / hints */
    --color-border: #d6d8db;        /* bordes de tarjetas, tablas, inputs */

    /* --- Acento principal: teal. Encabezado, títulos, botones
       primarios, enlaces -- el color que "es" la marca. */
    --color-primary: #317a8b;
    --color-primary-dark: #235968;  /* hover / fondos oscuros del propio teal (menú móvil) */
    --color-primary-light: #e3eef1; /* fondo tenue para resaltados suaves (selección, chips) */

    /* --- Resalte: naranja. SOLO para la llamada a apostar y lo que
       debe saltar a la vista (pick elegido). Se usa con moderación
       a propósito -- el gris/blanco predomina en toda la pantalla. */
    --color-accent: #ffba5a;
    --color-accent-dark: #a56415;    /* variante de texto/ícono sobre fondo claro */
    --color-accent-contrast: #3a2205;/* texto legible ENCIMA de un fondo --color-accent */

    /* --- Tipografía (Google Fonts, cargadas en Layout.php) -------- */
    --font-heading: 'Oswald', 'Segoe UI', sans-serif; /* títulos, encabezados, cifras tipo marcador */
    --font-body: 'Nunito', 'Segoe UI', sans-serif;    /* texto, datos, tablas, formularios */

    /* --- Radios y sombras ------------------------------------------ */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 3px rgba(20, 24, 29, 0.09), 0 1px 2px rgba(20, 24, 29, 0.06);
    --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.15);

    /* --- Espaciado (escala usada en tarjetas/paneles nuevos) ------- */
    --space-xs: 0.35rem;
    --space-sm: 0.6rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;

    /* --- Estados de formulario/alertas (libres, no atados a reglas) */
    --color-success-bg: #e6f4ea;
    --color-success-text: #1e7a34;
    --color-error-bg: #fdecea;
    --color-error-text: #b3261e;

    /* --- Estado de pago del jugador (chips de index.php/profile.php):
       vars PROPIAS, deliberadamente separadas de success/error de arriba
       -- esas las reusa el semáforo de aciertos (FUNCIONAL, ver abajo) y
       no queremos que un ajuste de tono aquí lo mueva sin querer. */
    --color-status-ok-bg: #e1f2ee;
    --color-status-ok-text: #1f7a63;
    --color-status-warn-bg: #fff4e0;
    --color-status-warn-text: #8a5a00;

    /* ============================================================
       FUNCIONAL -- significado fijo en toda la app (Bloque 6.3):
       ============================================================ */

    /* 1er/2do lugar (posiciones semanales, tabla general): ORO/PLATA de
       medalla -- antes eran azul/rojo "provisionales", este es el esquema
       definitivo. Van siempre junto a 🥇/🥈 en el texto (ver PHP), el color
       no tiene que cargar solo con el significado. */
    --color-podium-first-bg: #fbf0cf;
    --color-podium-first-solid: #96730a;
    --color-podium-second-bg: #e9edf2;
    --color-podium-second-solid: #55697a;

    /* Fila propia en tablas ("esta eres tú"): teal suave + barrita
       izquierda + chip "TÚ" (ver .chip--self) -- SOLO cuando la fila no es
       además 1er/2do lugar. Si es podio, el oro/plata de arriba gana solo
       (misma especificidad, pero .matrix-row--first/--second se declaran
       DESPUÉS en este archivo y ganan por orden de cascada); el chip "TÚ"
       se agrega aparte en el marcado, sin depender del color de fondo. Ya
       no existe un tono "combinado" self+podio (antes amarillo+azul/rojo):
       el amarillo chocaba visualmente con el oro nuevo. */
    --color-self-bg: var(--color-primary-light);

    /* Semáforo de aciertos: reusa success/error de arriba (verde/rojo) + gris muted */

    /* Flechitas de movimiento: verde/rojo */
    --color-arrow-up: #1e7a34;
    --color-arrow-down: #b3261e;

    /* Califica al Acumulado: morado */
    --color-qualify-bg: #ece3fb;
    --color-qualify-text: #6a3fb5;
    --color-self-qualify-bg: #ddc7f7;

    /* --- No funcional, pero con guiño deportivo: pastel de tendencia
       de picks (away/home) -- armonizado con la paleta, sin usar el
       naranja de CTA para no competir con él. */
    --color-chart-a: #2f7a8b;
    --color-chart-b: #dba15b;

    /* Segundo pastel de picks.php (tendencia EXTERNA, momio de la casa):
       violeta/salvia, distintos del par teal/arena de arriba y del naranja
       de CTA, para que nunca se confunda con la tendencia de la quiniela. */
    --color-chart-c: #7a5ba6;
    --color-chart-d: #9bb35c;

    /* --- Juego de división: chip teal discreto (mismo lenguaje que
       .chip--open) en su propio par de variables -- antes era morado y
       chocaba con el acento naranja de CTA/pick elegido. */
    --color-divisional-bg: var(--color-primary-light);
    --color-divisional-text: var(--color-primary);

    /* --- Escala de color de los puntos en la matriz semanal (Bloque 6.4):
       naranja -> café, un tono FIJO por escalón de ScoreEngine.php
       (1.001..1.006, ver ese archivo -- match(true) con 6 ramas fijas).
       Declaradas aparte de --color-accent de arriba a propósito: la matriz
       necesita 6 tonos distinguibles entre sí y --color-accent es un solo
       color reservado para la CTA de apostar (matrix_point_tier(),
       matriz.php, solo traduce el punto YA calculado a esta paleta). */
    --color-point-1001-bg: #ffe6bf;
    --color-point-1001-text: #8a6320;
    --color-point-1002-bg: #ffcf8a;
    --color-point-1002-text: #83570f;
    --color-point-1003-bg: #f2ab5c;
    --color-point-1003-text: #6e3d05;
    --color-point-1004-bg: #d98b3f;
    --color-point-1004-text: #ffffff;
    --color-point-1005-bg: #b06a2c;
    --color-point-1005-text: #ffffff;
    --color-point-1006-bg: #7d4a20;
    --color-point-1006-text: #ffffff;
    --color-point-zero-bg: #eef0f2;
    --color-point-zero-text: var(--color-muted);

    /* Franjas alternas MUY suaves de la matriz -- variable propia porque
       ninguna tabla existente las usaba (las demás tablas sticky se quedan
       en fondo blanco parejo, ver README Bloque 6.4). */
    --color-row-stripe: #f4f5f6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.01em;
}

a {
    color: var(--color-primary);
}

/* Números "tipo marcador" -- cifras que deben saltar a la vista dentro
   de una tarjeta (posición, puntos, montos de bolsa/premios). Teal por
   default; la variante --accent es SOLO para lo que de verdad urge
   (ej. cuántas apuestas te faltan), uso puntual a propósito. */
.stat-highlight {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}

.stat-highlight--accent {
    color: var(--color-accent-dark);
}

/* Pastilla pequeña reutilizable (conteos, estatus cortos) -- base de
   .chip--open/--closed (picks.php) y reusable a futuro sin CSS nuevo. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.chip--open {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.chip--closed {
    background: var(--color-surface-muted);
    color: var(--color-muted);
}

/* Eliminado de Survivor (Bloque S2, tablero "quién sigue vivo" y matriz):
   mismos tonos que `.badge--atrasado`/`.alert--error` (--color-error-*) para
   que "esto es malo" se lea igual en toda la app, sin inventar un rojo
   nuevo. */
.chip--eliminated {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

/* Indicador EN VIVO de "pendiente de eliminación" en la matriz de Survivor
   (survivor_matriz.php): mismos tonos que `.chip--eliminated` -- MISMO color,
   no uno nuevo -- pero con menor opacidad para distinguirlo a simple vista
   del estatus OFICIAL (ese chip no lleva opacidad reducida). Se calcula al
   vuelo por celda (juego ya final + equipo elegido perdió), nunca escribe en
   `survivor_status`; solo el cierre de semana existente confirma la
   eliminación oficial. */
.chip--eliminated-pending {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    opacity: 0.65;
}

/* Identifica la fila propia en tablas (matriz, posiciones, general): solido
   en vez de pastel para que se note igual sobre fondo blanco, teal suave
   (self) u oro/plata (podio) -- ver comentario de --color-self-bg arriba. */
.chip--self {
    background: var(--color-primary);
    color: #fff;
}

.container {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem;
}

/* ================================================================
   Layout responsivo de escritorio (Bloque 6.5) -- SOLO en pantallas
   grandes, ver README. La app es mobile-first: TODO lo de aqui vive
   detras de min-width:1024px (breakpoint propio, mas ancho que los
   700px que ya usaba el header para el texto de marca) para que el
   celular/tablet angosto se quede exactamente como estaba aprobado,
   sin ningun cambio. Dos anchos segun el tipo de pantalla (el mismo
   <main class="container"> de siempre, ver Layout.php):
     - Lectura/formularios (Inicio, perfil, registro, login, cambiar
       contraseña): se queda con la clase `.container` sola, cap
       comodo de ~960px -- no tiene sentido estirar un formulario o un
       parrafo a todo el ancho de un monitor.
     - Tablas/datos (matriz, general/acumulado, posiciones,
       marcadores, y las pantallas de admin que son sobre todo una
       tabla): agregan el modificador `.container--wide` (parametro
       `$wide` de render_header(), src/Layout.php) para un cap mas
       amplio -- mas columnas visibles de la tabla sin tanto scroll
       horizontal. La matriz sigue con su propio sticky Jugador/Total
       + scroll horizontal interno para cuando ni el ancho amplio
       alcance (ver .table-wrap--sticky/.matrix-table, sin cambios).
   ================================================================ */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .container--wide {
        max-width: 1300px;
    }
}

/* Encabezado */

.site-header {
    background: var(--color-primary);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-header);
}

.site-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    max-width: 640px;
    margin: 0 auto;
}

/* La barra superior es la misma para toda la app (Layout.php no sabe
   todavia que pagina va a renderizar el <main> de abajo, ver Bloque 6.5
   arriba), asi que en desktop usa el cap ancho siempre -- que nunca se
   sienta mas angosta que el contenido de las paginas de tabla. Regla
   aparte (no dentro de la del ancho de `.container` de arriba) porque
   tiene que ir DESPUES de la base `.site-header__bar` de este mismo
   selector para ganarle en cascada (misma especificidad exacta). */
@media (min-width: 1024px) {
    .site-header__bar {
        max-width: 1300px;
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
}

.brand-logo {
    height: 38px;
    width: auto;
    display: block;
}

/* Texto "La Apuesta" junto al conejo: oculto en pantallas angostas a
   propósito (el nombre completo no cabe cómodo junto al logo, avatar y
   menú en ~375px) -- ahí se queda solo el conejo como marca. */
.brand-text {
    display: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    color: #f2f8fa; /* blanco cálido, no #fff puro, para que se sienta "tinta sobre teal" */
    white-space: nowrap;
}

@media (min-width: 700px) {
    .brand-text {
        display: block;
    }
}

.site-header__user {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    margin-right: auto;
}

.avatar-mini {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.site-header__name {
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.site-header__user-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Estatus de Pick'em (posicion en la tabla general) y, mas adelante,
   Survivor (semana + vidas) -- ver src/Layout.php. Pildoras discretas debajo
   del nombre; Survivor solo se imprime cuando exista ese dato (hoy nunca). */
.site-header__status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.site-header__status {
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

.site-header__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: block;
}

/* Accesos rápidos del encabezado (Pick'em/Survivor/Admin, ver src/Layout.php):
   viven DENTRO de `.site-header__right`, a la derecha del botón ☰ en
   celular -- ese espacio quedó libre ahí porque "Cerrar sesión" se sacó de
   esta fila (ver `.nav-logout--header`/`.nav-logout--menu` más abajo). En
   escritorio (`.nav-toggle` ya oculto) quedan junto a "Cerrar sesión", que
   sigue en su lugar de siempre. `flex-wrap` evita que se encimen en un
   viewport angosto con muchos accesos (jugador admin: 2 accesos + Admin).
   Son el ÚNICO acceso a Pick'em/Survivor desde que se sacaron del menú
   desplegable (`.site-nav` ya no los lista, ver src/Layout.php) -- por eso
   cada uno lleva su propio color (`.header-quicklink--pickem`/`--survivor`/
   `--admin` abajo) en vez del gris translúcido genérico de antes, para
   que se reconozcan de un vistazo sin depender del texto. */
.site-header__quicklinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Forma/tipografía comunes a los 3 accesos rápidos -- el color de cada uno
   (fondo + texto) es SIEMPRE de su variante (`--pickem`/`--survivor`/
   `--admin` abajo), nunca de esta regla base, para que se vean como grupo
   consistente pero cada quiniela/rol quede clara de un vistazo, sin leer
   el texto. */
.header-quicklink {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Pick'em: gris de la paleta base (`--color-bg`, el mismo #DCDCDC del
   fondo general de la app) con tinta oscura -- neutro a propósito, Pick'em
   no tiene un color de identidad propio como sí lo tiene Survivor. */
.header-quicklink--pickem {
    background: var(--color-bg);
    color: var(--color-text);
}

.header-quicklink--pickem:hover {
    background: #cfcfcf;
}

/* Survivor: naranja de esa quiniela (mismo acento que la franja de "modo
   Survivor" de abajo) para que se reconozca de un vistazo. */
.header-quicklink--survivor {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.header-quicklink--survivor:hover {
    background: #ffc978;
}

/* Admin: gris OSCURO (`--color-muted`, ya usado para texto secundario en
   toda la app) -- distinto del gris claro de Pick'em y del naranja de
   Survivor, pero sigue leyéndose como "neutro/de sistema", no como una
   tercera quiniela. */
.header-quicklink--admin {
    background: var(--color-muted);
    color: #fff;
}

.header-quicklink--admin:hover {
    background: #52565c;
}

/* "Cerrar sesión" en DOS lugares (mismo <form>, ver src/Layout.php): en
   escritorio se queda en el encabezado (`--header`) donde siempre estuvo;
   en celular se oculta de ahí (ya no cabe junto a los accesos rápidos de
   arriba) y aparece como ÚLTIMA opción del menú ☰ (`--menu`). Cada uno se
   apaga en el breakpoint que no le toca -- nunca se ven los dos a la vez. */
.nav-logout--menu {
    display: none;
}

.nav-link--logout {
    color: #fff;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.25rem 0 0.25rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.site-nav {
    display: none;
    flex-direction: column;
    background: var(--color-primary-dark);
    padding: 0.5rem 1rem 1rem;
}

.site-nav.open {
    display: flex;
}

.site-nav a,
.site-nav .nav-link {
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    width: 100%;
}

/* Indicador de seccion activa (Bloque S1.1, toda la app): subrayado visible
   para saber siempre en que pantalla se esta parado, no solo el negrita de
   arriba (facil de pasar por alto). Teal (`--color-primary-light`, un tono
   claro de la MISMA familia teal -- un teal solido se perderia contra el
   fondo teal del propio header/menu) para los enlaces que quedan en el
   menu (Inicio/Mi perfil/Marcadores/Matriz Pick'em/Acumulado Pick'em) --
   "Pick'em"/"Survivor" ya no viven aqui (son los accesos rapidos del
   encabezado, ver `.header-quicklink`), asi que ya no hace falta la
   variante naranja que llevaba "Survivor" cuando todavia era un enlace de
   este menu; la identidad de Survivor la sigue anunciando la franja de
   abajo. */
.site-nav a.active {
    font-weight: 700;
    border-bottom: 3px solid var(--color-primary-light);
}

/* Franja de "modo Survivor" (Bloque S1.2): cruza TODO el ancho del header,
   no solo el contenido -- por eso es HERMANA de `.site-header__bar`/`.site-nav`
   (ambas con max-width propio) y no hija de ninguna, ver src/Layout.php. Solo
   se imprime cuando $active === 'survivor' (nunca se renderiza en las demas
   secciones, no queda ni siquiera transparente ocupando espacio) -- el resto
   del header sigue exactamente igual que siempre. */
.site-header__mode-stripe {
    height: 4px;
}

.site-header__mode-stripe--survivor {
    background: var(--color-accent);
}

.nav-link--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.nav-logout {
    margin: 0;
    padding: 0;
}

/* Va DESPUES de `.nav-logout` a proposito (misma especificidad de una sola
   clase -- necesita ganar en cascada para sobreescribir el margin:0). El
   botón en sí (`.nav-link--logout-menu`) ya hereda el look de fila vertical
   de `.site-nav a, .site-nav .nav-link` (border-bottom, padding, ancho
   completo) por traer también la clase `.nav-link` -- ese selector base
   tiene MAYOR especificidad (`.site-nav .nav-link`, dos clases) que una
   sola clase suelta, por eso el separador de arriba usa el mismo prefijo
   `.site-nav` para empatar especificidad y ganar por orden en la cascada. */
@media (max-width: 699px) {
    .nav-logout--header {
        display: none;
    }

    .nav-logout--menu {
        display: block;
        margin-top: 0.5rem;
    }

    .site-nav .nav-link--logout-menu {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
}

@media (min-width: 700px) {
    .nav-toggle {
        display: none;
    }

    .site-nav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        background: none;
        padding: 0;
    }

    .site-nav a,
    .site-nav .nav-link {
        border: none;
        width: auto;
        padding: 0.25rem 0;
    }
}

/* El <nav> de enlaces (Inicio/Pick'em/.../Survivor) es HERMANO de
   `.site-header__bar`, no esta dentro (ver src/Layout.php) -- por eso el
   ajuste de ancho/padding de `.site-header__bar` de arriba no le
   alcanzaba. En >=700px se vuelve fila (regla de arriba) con
   `padding:0`, asi que sin este ajuste queda pegado al borde IZQUIERDO
   de la pantalla en vez de alinearse con el resto del header/contenido
   -- "Inicio" al ras (Bloque 6.6). Mismo cap ancho que `.site-header__bar`
   (1300px) + padding lateral para que respire, SOLO en escritorio
   (min-width:1024px, no en el rango 700-1023px que ya traia esta vista). */
@media (min-width: 1024px) {
    .site-nav {
        max-width: 1300px;
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Tarjetas y formularios */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card--narrow {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* `.card--narrow` normalmente se queda en 420px en TODOS los anchos --
   login, registro, cambiar contraseña, y las tarjetas chicas de
   sub-formularios dentro de paginas de tabla (ej. "agregar jugador" en
   admin/players.php) SI deben seguir angostas siempre, es el look
   correcto para un formulario corto. Pero perfil, planes de pago y
   configuracion (admin/plans.php, admin/settings.php) usan
   `.card--narrow` para la pagina COMPLETA, no un sub-formulario -- ahi
   se veian angostas como en celular aunque hubiera pantalla grande
   (Bloque 6.6). Este modificador adicional (compuesto con
   `.card--narrow`, mayor especificidad que le gana sin depender del
   orden en el archivo) suelta ese tope SOLO en escritorio, para usar el
   ancho comodo de lectura del `.container` que lo rodea (960px, Bloque
   6.5). `.card--narrow` en si no se toca -- el resto de sus usos sigue
   angosto siempre. */
@media (min-width: 1024px) {
    .card--narrow.card--wide-page {
        max-width: none;
    }
}

.auth-brand {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 1rem;
}

.auth-brand__logo {
    height: 64px;
    width: auto;
    display: block;
}

.card__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.card h1 {
    margin-top: 0;
    font-size: 1.3rem;
}

.card h2 {
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--color-primary);
}

.card h3 {
    margin: 1.1rem 0 0.3rem;
    font-size: 1rem;
}

/* Secciones colapsables dentro de una tarjeta (ej. Reglamento en profile.php):
   minimizadas por defecto (<details> sin "open"), se despliegan con clic en
   el titulo. */
.collapsible summary {
    cursor: pointer;
    list-style: none;
}

.collapsible summary::-webkit-details-marker {
    display: none;
}

.collapsible summary::before {
    content: "▸ ";
    color: var(--color-muted);
}

.collapsible[open] summary::before {
    content: "▾ ";
}

.collapsible .collapsible__title {
    display: inline;
}

.collapsible > div {
    margin-top: 0.75rem;
}

form label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0.85rem 0 0.3rem;
}

form label.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="file"],
form input[type="number"],
form input[type="date"],
form input[type="search"],
form select,
form textarea {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: #fff;
    color: var(--color-text);
    font-family: inherit;
}

form input:disabled {
    background: var(--color-bg);
    color: var(--color-muted);
}

.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Llamada a la acción de apostar -- naranja, la ÚNICA familia de botones
   que lo usa (ver README, Bloque 6). No usar --btn--cta para acciones
   genéricas (guardar, iniciar sesión, etc.), esas siguen siendo teal. */
.btn--cta {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
}

.hint {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.hint--error {
    color: var(--color-error-text);
}

.plan-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.65rem 0.8rem;
    margin: 0.4rem 0;
    cursor: pointer;
    font-weight: 400;
}

.plan-option input {
    margin-top: 0.2rem;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* "Pendiente" en los chips de estado de pago (index.php/profile.php) es un
   aviso normal, no un error -- ámbar, no rojo (ver --color-status-warn-*). */
.badge--pendiente {
    background: var(--color-status-warn-bg);
    color: var(--color-status-warn-text);
}

.badge--reportado {
    background: var(--color-status-warn-bg);
    color: var(--color-status-warn-text);
}

.badge--confirmado {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.badge--atrasado {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

/* "Al corriente" es un verde/teal calmado propio (--color-status-ok-*), no
   el verde del semáforo de aciertos -- ver comentario de esas vars arriba. */
.badge--al_corriente {
    background: var(--color-status-ok-bg);
    color: var(--color-status-ok-text);
}

.badge--sin_plan {
    background: #eef0f2;
    color: var(--color-muted);
}

/* "Programado" (admin/resultados.php, admin/games.php): un juego que
   todavia no cerro por ninguna via, ni kickoff ni finalizacion -- estado
   neutro/normal, no un aviso ni un exito, por eso usa el mismo par teal
   suave de `.chip--open` (identidad de "abierto" ya establecida en la app)
   en vez de reusar el ambar de --reportado (ese ya significa "reabierto",
   un estado que SI amerita atencion) o el verde de --confirmado (ese ya
   significa "finalizado"). */
.badge--programado {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Marcadores: juego con marcador parcial de ESPN, todavia no final. */
.badge--en_juego {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

/* 1er/2do lugar semanal: mismo oro/plata FUNCIONAL que usa la matriz y
   posiciones.php para el podio, ver variables al inicio del archivo. Van
   junto a 🥇/🥈 en el texto (ver PHP), no dependen solo del color. */
.badge--first {
    background: var(--color-podium-first-bg);
    color: var(--color-podium-first-solid);
}

.badge--second {
    background: var(--color-podium-second-bg);
    color: var(--color-podium-second-solid);
}

.avatar-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--color-border);
}

.team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 0.35rem;
}

/* Alertas */

.alert {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.alert--success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.alert--error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.alert--info {
    background: #eef2f7;
    color: var(--color-text);
}

/* Aviso del admin en Inicio (setting 'aviso_inicio'): acento teal en vez del
   gris genérico de .alert--info, para que se sienta parte del tablero y no
   una alerta de formulario cualquiera. Clase propia (no se toca
   .alert--info) para no afectar los demás avisos informativos de la app. */
.alert--aviso {
    background: var(--color-primary-light);
    border: 1px solid rgba(49, 122, 139, 0.25);
    color: var(--color-text);
}

/* Tablas */

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th, td {
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Listados (jugadores, control de pagos, pendientes, grupos, matriz…):
   encabezado y 1ra columna (identifica al jugador) fijos al hacer scroll, en
   todos los anchos de pantalla. El scroll (vertical Y horizontal) queda
   contenido dentro de .table-wrap--sticky, nunca hay que ir al fondo de la
   pagina para encontrar la barra horizontal. REGLA UNICA reutilizada por
   TODAS las tablas de listado (matriz.php, admin/players.php, pagos.php,
   pending.php, faltantes.php, groups.php, games.php, weeks.php…) — cualquier
   tabla nueva solo necesita envolverse en <div class="card table-wrap
   table-wrap--sticky"> para heredar el fix completo, sin tocar CSS de nuevo. */

.table-wrap--sticky {
    max-height: 75vh;
    overflow: auto;
    /* SIN esto, el padding de 1.25rem que trae .card en el MISMO div (todas
       las tablas combinan ambas clases en un solo elemento) deja un "pasillo"
       en el borde superior/izquierdo donde el scroll SI hace overflow visible
       (overflow:auto recorta al padding-box, y el padding-box incluye ese
       pasillo) pero el header/columna sticky (top:0 / left:0, pegados al
       borde del padding-box) no llegan a cubrirlo — ahi se alcanzaba a ver el
       contenido de las filas de abajo "asomado" antes de que el sticky lo
       tape. Confirmado con un repro aislado: quitando este padding, el
       header/columna sticky quedan exactamente al ras del área de scroll y
       el hit-test (elementsFromPoint) ya no encuentra ninguna celda del
       cuerpo por encima de ellos. El respiro visual se repone abajo, por
       celda (th/td) y para el mensaje de "sin resultados". */
    padding: 0;
}

/* Mensaje de "no hay resultados" (unico contenido de estos divs cuando no
   hay tabla que mostrar): recupera el padding que .table-wrap--sticky quitó. */
.table-wrap--sticky > p {
    padding: 1.25rem;
    margin: 0;
}

/* border-collapse: separate (en vez de collapse) + box-shadow en vez de
   border-bottom: con collapse, los bordes se COMPARTEN entre celdas
   vecinas y el fondo opaco de una celda sticky no alcanza a cubrir el
   borde de la celda de al lado — se veian letras de las filas de abajo
   "transparentandose" a traves de esa rendija al hacer scroll. */
.table-wrap--sticky table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap--sticky th,
.table-wrap--sticky td {
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--color-border);
    background-color: var(--color-surface);
}

.table-wrap--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-wrap--sticky tbody td:first-child,
.table-wrap--sticky thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* La celda esquina (cruce de fila Y columna fijas) va por encima de ambas. */
.table-wrap--sticky thead th:first-child {
    z-index: 3;
}

td.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    white-space: normal;
}

td.actions form {
    display: inline;
    margin: 0;
}

/* Inicio: rejilla del tablero en escritorio (Bloque 6.5) -- en mobile
   `.dashboard-grid` es un <div> sin estilo propio (index.php), las
   tarjetas siguen apiladas exactamente igual que siempre gracias al
   margin-bottom de `.card`. Solo en desktop (min-width:1024px, mismo
   breakpoint que el resto de este bloque) se vuelve una rejilla de 2-3
   columnas -- auto-fit/minmax en vez de un numero fijo de columnas
   para que se acomode solo segun cuantas tarjetas haya esa semana (con
   aviso del admin son 4; sin aviso, 3). Aviso y los mensajes de "no
   participa"/"sin semana publicada" llevan `.dashboard-grid__full`
   porque son texto largo o una tarjeta unica -- no tiene caso partirlos
   en columnas angostas. */
@media (min-width: 1024px) {
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .dashboard-grid > .card {
        margin-bottom: 0;
    }

    .dashboard-grid__full {
        grid-column: 1 / -1;
    }
}

/* Tablero de control de pagos */

.stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.stat-tile {
    flex: 1 1 150px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
}

.stat-tile__value {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
}

.stat-tile__label {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.stat-tile--accent {
    background: #fff4e0;
    border-color: #f0c580;
}

.stat-tile--accent .stat-tile__value {
    color: #8a5a00;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.filter-tabs a {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}

.filter-tabs a.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Mensaje para WhatsApp (admin/faltantes.php, admin/faltantes_survivor.php):
   textarea de solo lectura + botón "Copiar". Vive FUERA de un <form> real
   (no hay nada que enviar), por eso trae su propio estilo de input en vez
   de depender de `form textarea` (arriba, solo aplica dentro de formularios). */
.whatsapp-box textarea {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-text);
    background: #fff;
    resize: vertical;
    margin-bottom: 0.6rem;
}

.reported-list {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.reported-item {
    background: #fff4e0;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    white-space: normal;
}

/* Menu de admin */

.admin-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-menu a {
    display: block;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg);
    border-radius: 6px;
    text-decoration: none;
}

/* Separador entre grupos del panel de administrador (admin/index.php, ver
   admin_menu_groups() en src/Layout.php -- Semanas/Resultados — Survivor —
   Jugadores/Faltantes/Pendientes/Grupos/Planes/Pagos/Avatares —
   Configuración): una línea horizontal simple entre cada `.admin-menu`
   consecutivo, mismo espíritu que `.nav-dropdown__sep` (ya eliminado junto
   con el dropdown) pero sobre fondo claro de tarjeta en vez del teal del
   encabezado. */
.admin-menu__sep {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.9rem 0;
}

/* Apuestas (picks.php) y matriz publica (matriz.php) */

.game-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.85rem;
    margin: 0.75rem 0;
}

.game-card--divisional {
    border-color: #a9c8d1;
}

.game-card__meta {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* Discreta a propósito (Bloque 6): antes era una etiqueta solida morada,
   ahora es un chip pastel teal (mismo lenguaje que .chip--open) para no
   competir con la eleccion del equipo ni con el naranja de CTA/pick elegido. */
.badge--divisional {
    background: var(--color-divisional-bg);
    color: var(--color-divisional-text);
}

.matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: stretch;
}

/* Rejilla de equipos de Survivor (survivor.php, Bloque S1): a diferencia de
   `.matchup` de arriba (2 equipos + "@" de UN juego), aquí son TODOS los
   equipos que juegan la semana en una sola rejilla que se acomoda sola --
   `.team-pick`/`.team-logo-lg` de arriba se reusan tal cual (mismo lenguaje
   visual "logos grandes" que Apuestas). Columnas más anchas en escritorio
   para aprovechar el tope de logo más grande del Bloque 6.7 (240px) en vez
   de quedarse en columnas angostas que lo desperdiciarían. */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

.matchup__vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* El logo es lo primero que se ve (la gente elige por logo, no por texto):
   casi llena la tarjeta; abreviatura y record quedan chicos, el record casi
   decorativo. La seleccion tiene que notarse sin leer nada: borde teal +
   fondo sombreado + palomita naranja (unico lugar del CTA de "pick elegido").
   Tarjeta grande y prominente a proposito, EN CUALQUIER tamaño de pantalla
   (Bloque 6.7 -- sin media query, a diferencia del logo de Marcadores mas
   abajo que solo crecio en escritorio en el Bloque 6.6): elegir el equipo es
   LA accion principal de esta pantalla, tiene que ser comoda de tocar/ver
   tanto en celular como en computadora. */

.team-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.7rem 0.5rem;
    cursor: pointer;
    background: var(--color-surface);
}

.team-pick input {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    margin: 0;
}

.team-pick.is-picked {
    border-color: var(--color-primary);
    border-width: 3px;
    background: var(--color-primary-light);
    box-shadow: 0 0 0 2px rgba(49, 122, 139, 0.18);
}

.team-pick--locked {
    cursor: default;
}

/* Opcion bloqueada en Survivor (survivor.php, Bloque S1): equipo ya usado en
   otra semana o con su juego ya cerrado -- a diferencia de `.team-pick--locked`
   (que es un estado neutro, "se acabo el tiempo", sin necesidad de explicar
   nada mas), aqui SI hay que decir por que no se puede elegir
   (`.team-pick__record` como motivo, ver survivor.php), asi que se atenua
   visualmente para que se note de un vistazo que no es una opcion valida. */
.team-pick--disabled {
    cursor: default;
    opacity: 0.55;
    background: var(--color-surface-muted);
}

.team-pick__check {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* `aspect-ratio:1/1` fuerza el MISMO cuadro para todos, sin importar el
   tamaño real del archivo -- los logos de 1-Logos_Blanco_fondo (Survivor)
   son 300x300 parejos, pero algunos traen mas "aire" (relleno) dentro del
   propio PNG que otros, asi que sin este cuadro fijo + `object-fit:contain`
   se verian de tamaños distintos entre si; `display:block` (un <img> es
   inline por default) evita el hueco de unos pixeles debajo que deja el
   line-height del texto vecino, y `margin:0 auto` centra aunque el padre
   algun dia deje de ser flex/grid. Compartida por Apuestas (picks.php),
   Marcadores (marcadores.php) y Survivor (survivor.php/survivor_matriz.php,
   vía `.team-pick .team-logo-lg` mas abajo) -- un solo lugar para "logos
   parejos" en toda la app. */
.team-logo-lg {
    display: block;
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

/* Logos un poco mas grandes SOLO en escritorio (Bloque 6.6) -- clase
   compartida por Apuestas (picks.php) y Marcadores (marcadores.php, ver
   comentario mas abajo), asi que el mismo ajuste beneficia a las dos
   pantallas a la vez. `aspect-ratio:1/1` + `object-fit:contain` de
   arriba ya evitan cualquier deformacion, solo cambia el tope de ancho
   -- en celular no se toca. */
@media (min-width: 1024px) {
    .team-logo-lg {
        max-width: 200px;
    }
}

/* El logo DENTRO de `.team-pick` (Bloque 6.7) crece mas alla del tope
   compartido de arriba, EN CUALQUIER pantalla -- `.team-pick` lo usan
   Apuestas (picks.php) Y Survivor (survivor.php, Bloque S1), nunca
   Marcadores (usa `.scoreboard-team`), asi que esto no cambia el tamaño del
   logo en Marcadores ni en celular ahi. */
.team-pick .team-logo-lg {
    max-width: 200px;
}

@media (min-width: 1024px) {
    .team-pick .team-logo-lg {
        max-width: 240px;
    }
}

.team-pick__abbr {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.1;
}

.team-pick__record {
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 1.1;
    color: var(--color-muted);
}

/* Marcadores (marcadores.php): reusa .game-card/.matchup/.team-logo-lg de
   arriba (mismo look que picks.php), pero sin nada de "elegir" -- solo
   despliega equipo, marcador (si ya hay resultado) y una version compacta
   del estado del juego. */

/* Encabezado de Marcadores (titulo + boton "Actualizar") con las pestañas
   de semana justo debajo: el margin-top generico de .btn empujaba el boton
   hasta el borde inferior de .card__header y .filter-tabs (sin margin-top)
   arrancaba pegada a el, en cualquier ancho. Solo para esta combinacion:
   el boton sin ese margen (queda centrado con el titulo en escritorio y en
   su propio renglon en celular) y aire fijo antes de las pestañas. */
.scoreboard-header {
    margin-bottom: 0.9rem;
}

.scoreboard-header .btn {
    margin-top: 0;
}

.scoreboard-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}

.scoreboard-team__abbr {
    font-weight: 700;
    font-size: 0.85rem;
}

.scoreboard-team__score {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
}

/* El marcador del equipo que gano se resalta con el mismo verde de "acertaste"
   (.scoreboard-pick--win) -- de un vistazo se ve quien gano sin leer nada. */
.scoreboard-team__score--winner {
    color: var(--color-success-text);
}

/* Semaforo de la apuesta propia: neutro antes de que el juego tenga
   resultado (no hay nada que calificar todavia), verde/rojo/gris despues
   (acerto / fallo / no aposto). Mismos tonos que ya usa la app para
   confirmado/error, para no inventar una paleta nueva. */
.scoreboard-pick {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
}

.scoreboard-pick--win {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.scoreboard-pick--loss {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.scoreboard-pick--none {
    background: var(--color-bg);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

/* Empate (Bloque 6.7, ver marcadores.php): ni acierto ni fallo -- mismo gris
   neutro que `.scoreboard-pick--none` a propósito (no es un veredicto sobre
   la apuesta del jugador, es que el juego no tuvo ganador), clase aparte
   para que el texto/emoji de "Empate" tenga su propio selector. */
.scoreboard-pick--tie {
    background: var(--color-bg);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

.scoreboard-pick--neutral {
    background: #eef2f7;
    color: var(--color-text);
}

/* Emoji del semaforo (configurable en admin/settings.php): grande y legible
   a proposito -- reemplaza al texto "Acertaste/Fallaste/No apostaste" en
   juego final, se lee de un vistazo sin tener que leer nada. */
.scoreboard-pick__emoji {
    font-size: 1.6rem;
    line-height: 1;
    vertical-align: middle;
    margin-right: 0.3rem;
}

/* Tendencia de picks (picks.php): pastel chico + conteo, agregada y sin decir
   quien eligio que (mismo picks_team_counts_for_week() de siempre, ver
   matriz.php). A proposito discreta -- va DEBAJO del matchup, mas chica y
   apagada que el resto de la tarjeta, para no competir con la eleccion del
   equipo (eso es lo que importa arriba). Circulo con conic-gradient armado en
   PHP (dos colores fijos --color-chart-a/b, sin relacion con los equipos
   reales -- 32 equipos no alcanzan para un color fijo por franquicia). */
.pick-trend {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pick-trend__pie {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pick-trend__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.7rem;
    font-size: 0.72rem;
    color: var(--color-muted);
}

.pick-trend__swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 0.25rem;
}

.pick-trend__swatch--a {
    background: var(--color-chart-a);
}

.pick-trend__swatch--b {
    background: var(--color-chart-b);
}

.pick-trend__swatch--c {
    background: var(--color-chart-c);
}

.pick-trend__swatch--d {
    background: var(--color-chart-d);
}

/* Las dos tendencias en fila: la de la quiniela a la izquierda y la EXTERNA
   (momio de la casa, --color-chart-c/d) del lado contrario. El separador
   que antes llevaba .pick-trend sola pasa a esta fila. En celular, si no
   caben, la externa baja a su propio renglon. */
.pick-trends {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
}

.pick-trends .pick-trend {
    margin: 0;
    padding: 0;
    border-top: none;
}

/* Mas especifico que la regla de arriba (que le quita el margen a ambas):
   la externa siempre del lado derecho, tambien cuando baja de renglon. */
.pick-trends .pick-trend--external {
    margin-left: auto;
}

.pick-trend__source {
    margin: 0.15rem 0 0;
    font-size: 0.65rem;
    color: var(--color-muted);
}

.matrix-cell--hidden {
    color: var(--color-muted);
    font-style: italic;
}

.matrix-cell--none {
    color: var(--color-muted);
}

.matrix-player__name {
    font-weight: 700;
    font-size: 1rem;
}

.matrix-player__group {
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* Encabezado de juego en la matriz: titulo + punto de division (si aplica) +
   conteo de tendencia, siempre en el mismo numero de renglones para que
   todos los encabezados queden alineados igual, tengan o no juego de
   division (antes, "División" agregaba un renglon extra solo en esos
   juegos, descuadrando la altura del <th> frente a sus vecinos). */
.matrix-game-title {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

/* Marca de división: rombo "◆" naranja discreto (Bloque 6.4, diseño
   aprobado) -- antes era un punto solido teal (Bloque 6.3), pero el
   rediseño de la matriz pidió naranja explícitamente. Tinta
   --color-accent-dark (NO el naranja sólido --color-accent de la CTA de
   apostar, para que siga siendo "discreto" junto al título del juego).
   Tooltip nativo (title) para quien pueda hacer hover; la leyenda fija
   arriba de la tabla (.matrix-legend) cubre a quien no pueda (celular). */
.matrix-divisional-dot {
    display: inline-block;
    color: var(--color-accent-dark);
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
    cursor: help;
}

.matrix-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
}

/* Filtro por jugador de matriz.php: desplegable con buscador y casillas.
   La lista tiene alto maximo con scroll propio (70+ jugadores). */
.matrix-player-filter {
    margin-top: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
}

.matrix-player-filter summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
}

.matrix-player-filter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.matrix-player-filter__actions .btn {
    margin-top: 0.5rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

.matrix-player-filter__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    column-gap: 1rem;
    max-height: 18rem;
    overflow-y: auto;
    margin-top: 0.6rem;
}

form .matrix-player-filter__list label.checkbox {
    margin: 0.3rem 0;
}

/* label.checkbox es display:flex y le ganaria al atributo `hidden` del buscador. */
.matrix-player-filter__list label[hidden] {
    display: none;
}

/* Conteo de tendencia (cuantos van a cada equipo): mas chico que el resto de
   los ".hint" del encabezado, es un dato secundario junto al titulo del
   juego. */
.matrix-trend {
    font-size: 0.7rem;
}

/* .table-wrap--sticky pinta el fondo por CELDA (no por fila, ver seccion de
   Tablas arriba) para que las celdas sticky no dejen ver las de abajo al
   hacer scroll. Teal suave = "esta eres tú", sin relación con el podio --
   la barrita a la izquierda (mismo teal, ver regla `:not` más abajo) refuerza
   la identificación cuando el oro/plata de podio no aplica. */
.table-wrap--sticky tr.matrix-row--self td {
    background-color: var(--color-self-bg);
}

/* Posiciones semanales (Bloque 5B/6.3): 1er/2do lugar de la semana, oro/plata
   FUNCIONALES del inicio del archivo. Mismo mecanismo de siempre -- el fondo
   se pinta por celda (td). Respeta la regla de empates: si hay 3+ en 1er
   lugar no existe fila --second (ver picks_week_standings() en
   src/StandingsRepo.php). Declaradas DESPUÉS de `.matrix-row--self` arriba
   a propósito: con la misma especificidad, el oro/plata gana por orden de
   cascada cuando una fila es propia Y de podio a la vez -- ya no hace falta
   un tercer tono "combinado" (ver comentario de --color-self-bg al inicio
   del archivo). La etiqueta "TÚ" (`.chip--self`) identifica la fila propia
   en el marcado, no en el color. */
.table-wrap--sticky tr.matrix-row--first td {
    background-color: var(--color-podium-first-bg);
}

.table-wrap--sticky tr.matrix-row--second td {
    background-color: var(--color-podium-second-bg);
}

/* Barrita de acento a la izquierda para la fila propia, SOLO cuando no es
   además 1er/2do lugar (el oro/plata ya es suficiente acento por sí solo).
   border-left real (no box-shadow) porque es el borde exterior de la tabla,
   sin celda vecina de la que "robarle" pixeles -- no tiene el problema de
   transparencia que sí tienen border-bottom/-right en celdas sticky. */
.table-wrap--sticky tr.matrix-row--self:not(.matrix-row--first):not(.matrix-row--second) td:first-child {
    border-left: 4px solid var(--color-primary);
}

.matrix-row--first td.matrix-total-cell {
    color: var(--color-podium-first-solid);
    font-weight: 700;
}

.matrix-row--second td.matrix-total-cell {
    color: var(--color-podium-second-solid);
    font-weight: 700;
}

/* Premio en $ de la semana (picks_week_standings()['prize'], ver
   StandingsRepo.php) junto al Total: dato secundario, mismo tamaño chico que
   el resto de los ".hint" de esta columna ("1er lugar"/"2do lugar"). */
.matrix-prize {
    font-weight: 600;
}

/* Quiniela Acumulado (Bloque 5C, ver src/AcumuladoRepo.php): color
   distintivo (morado) para quien califica -- MISMO mecanismo de "fondo por
   celda" que el resto de esta seccion, en las dos pestañas de /general.php
   ("Todos" y "Acumulado"). Combo con fila propia = tono mas saturado, mismo
   patron que matrix-row--self.matrix-row--first/second de arriba. */
.table-wrap--sticky tr.standings-row--qualifies td {
    background-color: var(--color-qualify-bg);
}

.table-wrap--sticky tr.matrix-row--self.standings-row--qualifies td {
    background-color: var(--color-self-qualify-bg);
}

.standings-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-qualify-bg);
    border: 1px solid var(--color-qualify-text);
    vertical-align: middle;
    margin-right: 0.3rem;
}

/* Flechitas de movimiento (standings_movement_arrow(), src/Layout.php):
   verde/rojo/gris, chicas, junto a la posicion. */
.standings-arrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
}

.standings-arrow--up {
    color: var(--color-arrow-up);
}

.standings-arrow--down {
    color: var(--color-arrow-down);
}

.standings-arrow--same {
    color: var(--color-muted);
}

/* Bolsa del Acumulado (pestaña "Acumulado" de /general.php): total
   destacado + desglose por semana de postemporada en lista chica, mismo
   patron visual que el resto de bolsas de la app (index.php, posiciones.php). */
.acumulado-pool {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.acumulado-pool__total {
    font-size: 1rem;
}

.acumulado-pool__breakdown {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* Linea de corte del 30% en la pestaña "Acumulado" de /general.php:
   separador discreto entre quien califica y quien no, dentro de la misma
   tabla. */
tr.acumulado-cutoff td {
    padding: 0.3rem 0.6rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-qualify-text);
    background: var(--color-surface);
    border-top: 2px dashed var(--color-qualify-text);
    border-bottom: 2px dashed var(--color-qualify-text);
}

/* Columna TOTAL fija a la derecha, SOLO en la matriz semanal (Bloque 5B):
   mismo mecanismo que la columna "Jugador" fija a la izquierda (arriba,
   .table-wrap--sticky tbody td:first-child), pero del lado derecho.
   .matrix-table acota el selector a esta tabla nada mas -- las demas tablas
   sticky (jugadores, pagos, pendientes, grupos, posiciones, general…)
   no llevan esa clase y no se ven afectadas. */
.matrix-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: inset 1.5px 0 0 var(--color-border), inset 0 -1.5px 0 var(--color-border);
}

.matrix-table th:last-child {
    right: 0;
    z-index: 3;
    box-shadow: inset 1.5px 0 0 var(--color-border);
}

/* ================================================================
   Rediseño visual de la matriz semanal (Bloque 6.4) — SOLO
   presentación (ver README). Reemplaza el logo por texto (equipo en
   Oswald/tinta), agrega la escala de color de puntos, líneas de
   columna más marcadas, franjas alternas muy suaves y el colapso de
   "sin apuesta esta semana" para quien no jugó ningún juego -- todo
   sobre el mismo marcado sticky de siempre (.table-wrap--sticky /
   .matrix-table). No toca ninguna otra tabla de la app.
   ================================================================ */

/* Columnas alineadas y centradas -- la columna Jugador (1a) se queda a la
   izquierda, es texto identificador, no un dato tabular que se compare
   visualmente entre filas como sí lo son los picks y el total. Mismas
   reglas agregan las líneas de fila Y columna marcadas (1.5px, más
   gruesas que el resto de tablas sticky de la app -- 1px, ver regla base
   arriba -- SOLO aquí para no cambiar el look de jugadores/pagos/
   pendientes/grupos/posiciones/general). */
.matrix-table th,
.matrix-table td,
.survivor-matrix-table th,
.survivor-matrix-table td {
    text-align: center;
    box-shadow: inset 0 -1.5px 0 var(--color-border), inset -1.5px 0 0 var(--color-border);
}

.matrix-table th:first-child,
.matrix-table td:first-child,
.survivor-matrix-table th:first-child,
.survivor-matrix-table td:first-child {
    text-align: left;
}

/* Matriz de Survivor (Bloque S4.1, ver README): MISMO look de rejilla que
   `.matrix-table` de arriba (centrado + líneas marcadas), pero SIN fijar la
   última columna -- ahí no hay columna Total que fijar del lado derecho
   como en Pick'em, solo semanas; fijarla habría "pegado" la última semana
   visible a la derecha sin ningún motivo. En celular solo quedan fijos la
   1a columna (jugador) y el encabezado, heredado de `.table-wrap--sticky`
   tal cual (mismo fondo opaco por celda que ya trae esa clase base). */

/* Equipo elegido: SOLO texto (Oswald, tinta) -- sin logo/cuadrito de
   color, el único color de la celda es el chip de punto de abajo (ver
   .matrix-point-chip). Los logos siguen usándose en Apuestas y
   Marcadores; esto es exclusivo de la matriz para bajar el ruido visual
   de hasta 16 colores de equipo distintos compitiendo con la escala de
   puntos en la misma pantalla. */
.matrix-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.matrix-pick__team {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text);
}

/* Chip de punto ganado / "0" de fallo: mismo componente para ambos (ver
   matrix_point_tier(), matriz.php) para que ocupen el MISMO nivel
   vertical dentro de la celda (equipo arriba vía .matrix-pick, esto
   abajo, ambos centrados) y la fila no "brinque" de tamaño entre acierto
   y fallo. Un color fijo por escalón de ScoreEngine.php, tono café mientras
   más difícil el acierto (ver variables --color-point-*). */
.matrix-point-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.4;
    white-space: nowrap;
}

.matrix-point-chip--1001 { background: var(--color-point-1001-bg); color: var(--color-point-1001-text); }
.matrix-point-chip--1002 { background: var(--color-point-1002-bg); color: var(--color-point-1002-text); }
.matrix-point-chip--1003 { background: var(--color-point-1003-bg); color: var(--color-point-1003-text); }
.matrix-point-chip--1004 { background: var(--color-point-1004-bg); color: var(--color-point-1004-text); }
.matrix-point-chip--1005 { background: var(--color-point-1005-bg); color: var(--color-point-1005-text); }
.matrix-point-chip--1006 { background: var(--color-point-1006-bg); color: var(--color-point-1006-text); }

.matrix-point-chip--zero {
    background: var(--color-point-zero-bg);
    color: var(--color-point-zero-text);
    font-weight: 600;
}

/* Leyenda de la escala de puntos, fija arriba de la tabla (mismo patrón que
   .matrix-legend de la marca de división, misma razón: quien no puede hacer
   hover/no lee un tooltip por chip la necesita visible de entrada). */
.matrix-point-legend-label {
    margin: 0.6rem 0 0;
    font-weight: 700;
}

.matrix-point-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin: 0.35rem 0 0;
}

.matrix-point-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* Fila "sin apuesta esta semana": picks_week_standings()['participated']
   (src/StandingsRepo.php, regla del no-apostador -- NO se recalcula aquí,
   solo se lee) en false colapsa los <td> de todos los juegos en UNO solo
   con colspan, en vez de repetir "Sin apuesta" en cada columna de juego. */
.matrix-cell--noweekbet {
    color: var(--color-muted);
    font-style: italic;
    text-align: center;
}

/* Franjas alternas MUY suaves en filas sin significado especial -- las
   filas de podio (oro/plata) y la propia (teal) ya tienen su color
   FUNCIONAL, que siempre debe ganar, por eso se excluyen aquí en vez de
   depender del orden de cascada. */
.table-wrap--sticky tr.matrix-row--even:not(.matrix-row--first):not(.matrix-row--second):not(.matrix-row--self) td {
    background-color: var(--color-row-stripe);
}

/* Total con peso visual: cifra grande en Oswald (mismo lenguaje que
   .stat-highlight), el $ del premio y la medalla quedan chicos debajo
   (heredan .hint/.badge, sin cambios). */
.matrix-total-cell__value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
}

/* ================================================================
   Matriz en celular (ver README): las dos columnas fijas (Jugador a
   la izquierda, Total a la derecha) crecian a su ancho natural y se
   comian casi toda la pantalla, dejando uno o dos juegos visibles en
   medio. SOLO en <700px (mismo breakpoint que el menu del header) y
   SOLO en .matrix-table -- escritorio y la matriz de Survivor no
   cambian. El sticky (left/right/top) no se toca: estas reglas solo
   cambian anchos, tamaños y el acomodo DENTRO de las celdas.
   (Ajuste: las reglas de nombre/grupo iban sin el prefijo .matrix-table
   y alcanzaban tambien a Survivor, Posiciones y Acumulado; ya van
   prefijadas y cada una de esas tablas tiene su propio bloque abajo.)
   ================================================================ */
@media (max-width: 699px) {
    .matrix-table th:first-child,
    .matrix-table td:first-child,
    .matrix-table th:last-child,
    .matrix-table td:last-child {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    /* Jugador: tope de ancho en el contenido (no en el <td>: en una tabla
       con table-layout:auto el max-width de la celda no se respeta igual
       en todos los navegadores). Flex para que SOLO el texto del nombre se
       trunque con "…" y el chip "TÚ" se vea siempre completo; el nombre
       completo queda en el `title` (matriz.php). */
    .matrix-table .matrix-player__name {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        max-width: 7rem;
        font-size: 0.9rem;
    }

    .matrix-table .matrix-player__name-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .matrix-table .matrix-player__name .chip--self {
        flex-shrink: 0;
    }

    .matrix-table .matrix-player__group {
        max-width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Total: cifra mas chica y premio + medalla en UN renglon debajo (en
       vez de tres renglones apilados); la medalla queda solo como 🥇/🥈
       (el texto "1er/2do lugar" sigue en el `title`, y el oro/plata de la
       fila ya lo dice). */
    .matrix-total-cell__value {
        font-size: 1rem;
    }

    .matrix-total-cell br {
        display: none;
    }

    .matrix-total-cell .matrix-prize {
        font-size: 0.75rem;
    }

    .matrix-total-cell .badge {
        padding: 0 0.2rem;
        font-size: 0.75rem;
        background: none;
    }

    .matrix-badge-text {
        display: none;
    }
}

/* ================================================================
   Matriz de Survivor en celular (ver README): mismo problema que el
   bloque de arriba -- la columna Jugador crecia a su ancho natural (el
   chip "Eliminado — Semana N (definitivo)", sin wrap, la forzaba a
   ~225px) y dejaba lugar para una sola semana. SOLO <700px y SOLO
   .survivor-matrix-table: escritorio y Pick'em no cambian. Aqui no hay
   columna Total ni sticky nuevo; solo anchos y tamaños DENTRO de la
   primera columna, con el mismo mecanismo que .matrix-table (tope en
   el contenido, nunca en el <td>; "…" en el <span> del nombre, que
   lleva el nombre completo en `title`, survivor_matriz.php).
   ================================================================ */
@media (max-width: 699px) {
    .survivor-matrix-table th:first-child,
    .survivor-matrix-table td:first-child {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .survivor-matrix-table .matrix-player__name {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        max-width: 7rem;
        font-size: 0.9rem;
    }

    .survivor-matrix-table .matrix-player__name-text {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .survivor-matrix-table .matrix-player__name .chip--self {
        flex-shrink: 0;
    }

    .survivor-matrix-table .matrix-player__group {
        max-width: 7rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* "Vida N · resurrecciones": corto, solo mas chico. */
    .survivor-matrix-table .survivor-life {
        font-size: 0.75rem;
    }

    /* Chip de eliminado de la columna Jugador: se parte en renglones dentro
       del mismo tope de 7rem en vez de forzar el ancho de la columna. */
    .survivor-matrix-table td:first-child .chip--eliminated {
        display: inline-block;
        max-width: 7rem;
        padding: 0.15rem 0.5rem;
        border-radius: 0.6rem;
        font-size: 0.7rem;
        line-height: 1.25;
        white-space: normal;
    }

    /* Chips de la celda de semana ("✕ Eliminación" / "✕ Pendiente de
       eliminación"): mismo trato, con un tope un poco menor para no
       ensanchar la columna de la semana mas alla del logo + equipo. Siguen
       en su propio renglon (display:block de .survivor-elim-chip),
       centrados con margin auto. */
    .survivor-matrix-table .survivor-elim-chip {
        max-width: 6rem;
        margin-left: auto;
        margin-right: auto;
        padding: 0.15rem 0.5rem;
        border-radius: 0.6rem;
        font-size: 0.7rem;
        line-height: 1.25;
        white-space: normal;
    }
}

/* ================================================================
   Posiciones (posiciones.php) y Acumulado (general.php): nombre junto
   al avatar sin salto de renglon. Antes era un style="" en linea en
   general.php; como clase, las reglas de celular de abajo pueden
   cambiarle el display.
   ================================================================ */
.standings-player__name {
    display: inline-block;
    vertical-align: middle;
}

/* Posiciones y Acumulado en celular: mismo tope que .matrix-table
   (nombre y grupo en 7rem, "…" en el <span> del nombre, con el nombre
   completo en `title`). Antes heredaban las reglas SUELTAS de la matriz
   pero sin el <span> propio, asi que el nombre largo se desbordaba sobre
   la columna Total. SOLO <700px y SOLO .standings-table. */
@media (max-width: 699px) {
    .standings-table .matrix-player__name {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        max-width: 7rem;
        font-size: 0.9rem;
    }

    /* Acumulado: el nombre va al lado del avatar, no debajo. */
    .standings-table .standings-player__name {
        display: inline-flex;
    }

    .standings-table .matrix-player__name-text {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .standings-table .matrix-player__name .chip--self {
        flex-shrink: 0;
    }

    .standings-table .matrix-player__group {
        max-width: 7rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* ================================================================
   Identidad visual de Survivor -- invierte el acento respecto a
   Pick'em: ahi el teal (--color-primary) es el color protagonista, aqui
   es el naranja (--color-accent/-dark). El gris/blanco de base NO
   cambia, mismo sistema -- solo titulos, boton principal y el
   resaltado del equipo elegido, para que la pantalla "se sienta otra
   quiniela" sin dejar de ser la misma app.

   TODO va scopeado a `.survivor-theme` (envuelve TODO el contenido de
   survivor.php, incluidas las vistas de candado/sin-semana-publicada,
   ver ese archivo) para no tocar ni un pixel de Pick'em -- ninguna
   regla de aqui redefine `.team-pick`/`.btn--primary`/`.card h2` a
   secas, todas van prefijadas por `.survivor-theme` (selector compuesto,
   mayor especificidad que la regla base -- gana sin depender del orden
   en el archivo) o reusan una clase YA existente pensada para esto
   (`.btn--cta`: fondo naranja + `--color-accent-contrast` como texto
   legible, la MISMA combinacion que pedia "cuida la legibilidad si el
   naranja sobre blanco cuesta leerse"). */
.survivor-theme h1 {
    color: var(--color-accent-dark);
}

.survivor-theme .card h2 {
    color: var(--color-accent-dark);
}

.survivor-theme .stat-highlight {
    color: var(--color-accent-dark);
}

.survivor-theme a {
    color: var(--color-accent-dark);
}

/* Resaltado del equipo elegido: mismo mecanismo que `.team-pick.is-picked`
   de Apuestas (borde + fondo + sombra), pero en naranja -- Apuestas
   conserva su teal de siempre porque esta regla nunca aplica ahi
   (`.survivor-theme` solo envuelve survivor.php). */
.survivor-theme .team-pick.is-picked {
    border-color: var(--color-accent-dark);
    background: #fff1dc;
    box-shadow: 0 0 0 2px rgba(165, 100, 21, 0.22);
}

/* El tema de arriba (Bloque S1, "aplicado a medias") no tocaba el radio
   nativo del selector de equipo: sin `accent-color`, el navegador lo pinta
   con su acento por defecto (no el teal de la app, pero tampoco el naranja
   de Survivor) -- se nota sobre todo al lado del check naranja de arriba.
   Alcance scopeado a `.survivor-theme` a proposito: el radio de Apuestas
   (picks.php, MISMO `.team-pick input`) no se toca, sigue con el acento por
   defecto del navegador de siempre. */
.survivor-theme .team-pick input[type="radio"] {
    accent-color: var(--color-accent-dark);
}

/* Encabezados de conferencia/division del selector de equipos (agrupado
   de equipos elegibles, ver survivor.php): conferencia en naranja con
   linea inferior, division chica en mayusculas grises -- jerarquia clara
   sin saturar de color cada nivel (division no necesita ser "protagonista",
   solo organizar). Selectores compuestos con el elemento (h2/h3) para
   igualar la especificidad de `.card h2`/`.card h3` y ganarles siempre,
   sin depender de donde caiga esta regla en el archivo. */
.card h2.survivor-conf-title {
    margin: 1.5rem 0 0.25rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--color-accent);
    color: var(--color-accent-dark);
    font-size: 1.1rem;
}

.card h2.survivor-conf-title:first-child {
    margin-top: 0;
}

.card h3.survivor-div-title {
    margin: 0.75rem 0 0.5rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Matriz de Survivor (survivor_matriz.php): reusa `.table-wrap--sticky`/
   `.matrix-row--self` tal cual (mismo diseño que la matriz de Pick'em), solo
   el resaltado de la fila propia cambia de teal a naranja -- fondo lavado
   (`#fff1dc`, MISMO tono que `.survivor-theme .team-pick.is-picked` de
   arriba, para no inventar un tercer naranja) + barrita izquierda + chip
   "TÚ". Selectores compuestos (`:not(...)` incluidos donde la regla base
   los tiene) para igualar/superar su especificidad y ganar siempre sin
   depender del orden en el archivo -- no hay podio/1er-2do lugar en
   Survivor que ya distinga la fila de otra forma. */
.survivor-theme .table-wrap--sticky tr.matrix-row--self td {
    background-color: #fff1dc;
}

.survivor-theme .table-wrap--sticky tr.matrix-row--self:not(.matrix-row--first):not(.matrix-row--second) td:first-child {
    border-left: 4px solid var(--color-accent-dark);
}

.survivor-theme .chip--self {
    background: var(--color-accent-dark);
    color: #fff;
}

/* Fila eliminada en la matriz de Survivor (survivor_matriz.php): TODO el
   CONTENIDO atenuado (incluido el chip de eliminación en la columna
   Jugador y en la celda de la semana donde cayó, `.chip--eliminated`
   reusado) -- "esto ya no cuenta" se lee de un vistazo. El color rojo del
   chip sigue siendo identificable atenuado; no hace falta reforzarlo por
   separado.
   IMPORTANTE: la opacidad va en los HIJOS de la celda (`td > *`), NUNCA en
   el `td` mismo -- ponerla en el `td` también vuelve translúcido su
   background-color (el mismo que hace opaca a la columna/encabezado fijos
   en celular, ver `.table-wrap--sticky th/td` arriba), y entonces el texto
   de las columnas que se deslizan por DEBAJO de la columna o el
   encabezado fijos se alcanzaba a transparentar en cualquier fila
   eliminada. Con la opacidad en los hijos, el `td` se queda 100% opaco y
   el efecto de atenuado se ve exactamente igual. */
.survivor-theme .table-wrap--sticky tr.matrix-row--eliminated td > * {
    opacity: 0.6;
}

.survivor-elim-chip {
    display: block;
    margin-top: 0.3rem;
}

/* ==========================================================================
   Módulo Dinero (solo administrador): cifras, montos y estados de cobranza.
   Reusa .card / .stat-tile / .table-wrap / .badge / .filter-tabs; aquí solo
   lo que no existía (montos alineados, colores de signo, rejilla de bolsas).
   ========================================================================== */
.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dinero-pos { color: var(--color-success-text); }
.dinero-neg { color: var(--color-error-text); }
.dinero-warn { color: var(--color-status-warn-text); }
.dinero-muted { color: var(--color-muted); }

/* "Cubierto a mano, sin movimiento en Nu": se distingue del dinero que sí entró. */
.badge--manual {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.dinero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.8rem;
}

/* Fila de un movimiento anulado en la lista de Nu: tachado y atenuado. */
tr.dinero-row--anulado td {
    text-decoration: line-through;
    color: var(--color-muted);
}

textarea.dinero-paste {
    width: 100%;
    min-height: 12rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
}

/* Bloque plegable de un jugador/abono dentro de una tabla de asignación. */
.dinero-inline-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.dinero-inline-form input[type="text"],
.dinero-inline-form input[type="number"] {
    width: auto;
    max-width: 9rem;
}

/* El <select> de "Tipo" en la tabla de vista previa de "Pegar movimientos de
   Nu": "form select { width:100% }" (arriba) lo encoge al ancho minimo que
   calcula el layout automatico de <table>, y ese minimo alcanza apenas para
   la flechita, sin espacio para el texto de la opcion elegida. Le damos un
   ancho minimo fijo; la tabla ya tiene scroll horizontal propio (.table-wrap)
   asi que no rompe nada mas. */
.dinero-tipo-select {
    min-width: 11rem;
}

.dinero-check {
    font-size: 1.05rem;
    line-height: 1;
}

/* ==========================================================================
   Estadísticas externas de ESPN (nfl_posiciones.php, nfl_rating.php): solo
   informativas. Reusan .table-wrap--sticky (columna Equipo fija) y la
   rejilla centrada de las matrices; aquí solo lo propio.
   ========================================================================== */
.nfl-stats-table th,
.nfl-stats-table td {
    text-align: center;
    white-space: nowrap;
}

.nfl-stats-table th:first-child,
.nfl-stats-table td:first-child {
    text-align: left;
}

/* Renglón separador de división (AFC Este, ...). */
.table-wrap--sticky tr.nfl-stats-division td {
    background: var(--color-surface-muted);
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nfl-stats-team {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nfl-stats-team__rank {
    min-width: 1.1rem;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.nfl-stats--up {
    color: var(--color-arrow-up);
}

.nfl-stats--down {
    color: var(--color-arrow-down);
}

@media (max-width: 699px) {
    /* En celular basta la abreviatura; el nombre completo alarga la
       columna fija y deja sin espacio a los números. */
    .nfl-stats-team__name {
        display: none;
    }
}