/*
 * Inter autoalojada, en vez del @import a fonts.googleapis.com que había aquí.
 *
 * Un @import en la primera línea de la hoja es la peor forma de cargar una
 * fuente: el navegador tiene que bajar y parsear style.css ANTES de descubrir
 * que necesita otra hoja, y esa otra hoja aún referencia un tercer dominio
 * (fonts.gstatic.com) para el fichero. Son tres viajes de red encadenados,
 * cada uno con su DNS y su TLS, y hasta que no acaban no hay primer pintado.
 * En móvil eso era medio segundo largo de pantalla en blanco.
 *
 * Sirviéndola desde nuestro dominio es un solo fichero por una conexión que ya
 * está abierta. Además es la versión variable: un único woff2 de 48 KB cubre
 * del peso 400 al 900, donde antes se pedían siete ficheros sueltos.
 *
 * font-display: swap deja pintar el texto con la fuente del sistema mientras
 * llega, en vez de dejarlo invisible.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
    --primary: #FF4A44;
    --primary-dark: #D81845;
    --secondary: #1A1A2E;
    --accent: #0F3460;
    --success: #00D9A3;
    --warning: #FFB800;
    --danger: #FF4A44;
    --bg-primary: #01010B;
    --bg-secondary: #17171d;
    --bg-card: #222532;
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8D1;
    --border: #2b2b35;
    --radio: 6px;

    /* Dos anchos para toda la web, y no uno por página.
       Hasta el 2026-09-14 cada pantalla tenía el suyo (Mercado 800, Actividad
       1000, Clasificación 1200, Inicio y Ruleta 1400) y al cambiar de pestaña
       la web "saltaba". Lectura: listas de una columna (Clasificación,
       Actividad). Trabajo: lo que se usa a dos columnas (Inicio, Mercado,
       Ruleta). Mi Equipo va aparte con su diseño propio. */
    --ancho-lectura: 880px;
    --ancho-trabajo: 1200px;
}

html {
    scrollbar-width: none;
    /* Sin esto, el WebView de la app Android nota el rebote elástico al
       llegar arriba del todo y su SwipeRefreshLayout lo confunde con el
       gesto de "tirar para refrescar", recargando la página con cualquier
       scroll normal. En navegador no cambia nada visible. */
    overscroll-behavior-y: contain;
}

html::-webkit-scrollbar {
    display: none;
}

/*
 * Barra de desplazamiento, por defecto en TODO lo que scrollea por dentro.
 *
 * La del navegador (html) va oculta desde siempre, pero cualquier caja con
 * overflow propio -modales, tablas, listas, desplegables- se quedaba con la
 * barra nativa de Windows: 17 px, gris claro, con sus dos flechas y su canal
 * blanco. Sobre fondo oscuro canta muchísimo, y no era cosa de una pantalla:
 * salía en media web porque nadie la había estilado salvo el chat.
 *
 * Aquí va el estilo por defecto para todas. Lo que ya trae el suyo -chat,
 * ficha de jugador, calendario- gana por especificidad y no se toca.
 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .3);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Las flechas de los extremos: en Windows son dos cuadrados grises que no
   pinta nadie en una web oscura, y encima estiran la barra a lo ancho. */
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary) !important;
    color: var(--text-primary);
    min-height: 100vh;
    overscroll-behavior-y: contain;
}


.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radio);
    padding: 24px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.card-gradient {
    background: var(--primary);
    border: none;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Grid */
.grid {
    display: grid;
    gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 968px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Stat Card */
.stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
}

.stat-icon {
    font-size: 48px;
    opacity: 0.5;
}

/* Buttons */
.btn {
    padding: 12px 24px;
    border-radius: var(--radio);
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    justify-content: center;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--accent);
}

.btn-success {
    background: var(--success);
    color: var(--bg-primary);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radio);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 74, 68, 0.1);
}

/*
 * En móvil los campos suben a 16px.
 *
 * No es estética: iOS Safari hace zoom automático al enfocar cualquier campo
 * con menos de 16px, y al salir no deshace el zoom, así que el resto de la
 * navegación se queda descuadrada. Con 16px no se dispara.
 *
 * Antes esto quedaba medio tapado porque varias páginas llevaban
 * user-scalable=no; ese apaño bloqueaba el zoom a todo el mundo, incluido quien
 * lo necesita para leer, y las versiones modernas de iOS lo ignoran igualmente.
 */
@media (max-width: 767px) {

    .form-input,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px;
    }

    /*
     * Altura mínima táctil. Los botones se quedaban en 40 px, por debajo de los
     * 44 que recomiendan tanto Apple como las pautas de accesibilidad, y en una
     * web que se usa casi toda desde el móvil eso son fallos de pulsación.
     * Los campos ya llegaban a 44 por su padding.
     */
    .btn {
        min-height: 44px;
    }
}

.form-input::placeholder {
    color: var(--text-secondary);
}

/* Alert */
.alert {
    padding: 16px;
    border-radius: var(--radio);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success {
    background: rgba(0, 217, 163, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
}

.alert-error {
    background: rgba(255, 74, 68, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.alert-info {
    background: rgba(15, 52, 96, 0.3);
    border: 1px solid var(--accent);
    color: var(--text-primary);
}

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: var(--bg-secondary);
}

.table th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.table tbody tr:hover {
    background: var(--bg-secondary);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.badge-admin {
    background: rgba(255, 74, 68, 0.2);
    color: var(--primary);
}

.badge-user {
    background: rgba(0, 217, 163, 0.2);
    color: var(--success);
}

.badge-linked {
    background: rgba(0, 217, 163, 0.2);
    color: var(--success);
}

.badge-unlinked {
    background: rgba(184, 184, 209, 0.2);
    color: var(--text-secondary);
}

/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }

/* Login Page */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--bg-primary) !important;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radio);
    padding: 48px;
    max-width: 450px;
    width: 100%;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    font-size: 72px;
    margin-bottom: 16px;
}

.login-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 8px;
}

.login-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================
   NAVBAR RESPONSIVE - ALTURA AUTO CON !IMPORTANT
   Reemplazar la sección de navbar en style.css
   ============================================ */

/* PREVENIR OVERFLOW GLOBAL — Solo max-width, NO overflow-x: hidden.
   overflow-x: hidden/clip en html o body rompe position: sticky en
   cualquier descendiente (Chrome, Safari, Firefox). */
html, body {
    max-width: 100vw !important;
    width: 100% !important;
}

/* ============================================
   NAVBAR BASE (Desktop)
   ============================================ */
.navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100vw;
    overflow: visible !important;
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* El alto lo manda la barra (--navbar-height, 64px en navbar.css), no este
       70 suelto: con los dos puestos, el contenedor sobresalía 3px por arriba
       y otros 3 por abajo de su propia barra. Antes no se notaba porque la
       regla de móvil de más abajo lo forzaba a "auto" con !important, y esa
       regla se ha retirado. */
    height: 100%;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.navbar-logo {
    font-size: 32px;
}

.navbar-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: visible !important;
}

.navbar-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    color: var(--success);
}

.navbar-balance-icon {
    font-size: 20px;
}

/* User Dropdown */
.user-dropdown {
    position: relative;
    overflow: visible !important;
}

.user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px;
    border-radius: 50px;
    transition: background 0.3s;
}

.user-dropdown-trigger:hover {
    background: var(--bg-card);
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.user-role {
    font-size: 12px;
    color: var(--text-secondary);
}

.dropdown-arrow {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.3s;
}

.user-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: none;
    z-index: 9999;
    padding: 8px;
}

.user-dropdown.active .user-dropdown-menu {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
}

.dropdown-item:hover {
    background: var(--bg-secondary);
}

.dropdown-item.danger {
    color: var(--danger);
}

.dropdown-item.danger:hover {
    background: rgba(255, 74, 68, 0.1);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Container con padding después de navbar */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* ============================================
   MÓVIL: 0-767px
   ============================================ */
@media (max-width: 767px) {
    /*
     * AQUÍ ESTABA LA BARRA SUPERIOR "GRANDE" DE MÓVIL, Y SE HA QUITADO.
     *
     * Eran una docena de reglas con !important que le forzaban
     * "height: auto", 16px de relleno, flex-wrap en dos filas y el avatar a
     * 40px. Consecuencia: la barra medía ~73px en vez de los 64 que declara
     * navbar.css, y el esqueleto de transición (navbar-mobile.php), que la
     * dibuja a 64 con el avatar a 34, no cuadraba con la barra que llegaba
     * después: al cargar la página el nombre y el avatar daban un salto.
     *
     * La mitad de esas reglas además apuntaba a clases que ya no existen en
     * ningún sitio (.navbar-brand, .navbar-logo, .navbar-title, .navbar-menu,
     * .navbar-balance): son de una barra anterior, y estaban ahí sin hacer
     * nada más que confundir.
     *
     * Lo que sí hacía falta se queda: ocultar el nombre junto al avatar, que
     * en un móvil no cabe, y el área táctil de 44px del propio avatar.
     */
    .user-dropdown-trigger {
        /* Altura mínima táctil: el avatar mide 34 y solo no llega a los 44
           que recomiendan las pautas. No agranda la barra, que es de alto
           fijo y centra su contenido. */
        min-height: 44px !important;
        align-items: center !important;
    }

    /* Ocultar info en móvil */
    .user-info {
        display: none !important;
    }

    .dropdown-arrow {
        display: none !important;
    }

    .user-dropdown-menu {
        right: 0 !important;
        min-width: 200px !important;
        max-width: 90vw !important;
    }

    .dropdown-item {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .container {
        padding: 20px 16px !important;
    }
}

/*
 * Aquí había dos bloques (tablet 768-1024 y escritorio 1025+) que le daban a
 * la barra tres alturas distintas —65px, 70px— y al avatar un tamaño más, 40.
 * Se han quitado por lo mismo que los de móvil: navbar.css declara una sola
 * altura (--navbar-height) y un solo avatar (38px), y el esqueleto de
 * transición está calcado de esas medidas. Con tres alturas según el ancho,
 * el esqueleto solo podía cuadrar en una de ellas.
 *
 * Lo único que se conserva es el relleno lateral, que sí crece con la
 * pantalla; vive en navbar.css junto al resto de la barra.
 */

/* ============================================================
   BARRA SUPERIOR: PEGAJOSA, NO FIJA
   ============================================================
   Aquí ponía "position: fixed !important" y, debajo, un
   "body { padding-top: 70px !important }" para reservarle el hueco.

   Por qué estaba mal: 70 px es un número a mano, y la barra NO mide
   siempre 70. En móvil la regla de más arriba le pone
   "height: auto !important" y el contenedor "padding: 16px", así que:

   - Medida a 390 px de ancho, la barra sale de 73 px: ya se comía 3 px
     del contenido.
   - En iOS, navbar.php le suma "padding-top: env(safe-area-inset-top)"
     para esquivar el notch. En un iPhone con isla dinámica son 59 px
     más: la barra pasa de 130 px y el hueco seguía siendo de 70, así
     que los primeros ~60 px del dashboard quedaban DETRÁS de la barra.
     Esto es lo que se veía desde la app de Capacitor.
   - ".navbar-container" lleva flex-wrap, o sea que con un nombre de
     usuario largo se parte en dos filas y crece igual.

   Con "sticky" la barra ocupa su propio hueco en el flujo, mida lo que
   mida: se acabó el número mágico y el desfase con la zona segura. El
   comentario que había aquí ya daba por hecho que era sticky —lo era en
   navbar.php— pero este bloque la forzaba a fixed diez líneas antes.

   Sticky se rompe si algún ancestro tiene overflow-x: hidden/clip. Por
   eso arriba solo se limita con max-width; no lo cambies.
   ============================================================ */
.navbar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* Ya en el flujo, el margen inferior de navbar.php/navbar-admin.php sí
   cuenta, y metería 2rem de aire que antes no había. Se anula para que
   la separación quede como estaba. */
.navbar {
    margin-bottom: 0 !important;
}

/* ============================================================
   ESTADOS VACÍOS
   ============================================================
   Cada pantalla resolvía por su cuenta el "aquí no hay nada":
   un <p> suelto, un <td colspan> o texto en color #666, que sobre
   las tarjetas da 2,61:1 de contraste y no llega ni de lejos al
   4,5:1 exigido. Los tokens del tema sí cumplen (--text-secondary
   son 7,72:1), así que basta con usarlos.

   Uso:
     <div class="empty-state">
       <div class="empty-state-icon">📭</div>
       <p class="empty-state-title">No hay actividad todavía</p>
       <p class="empty-state-text">Cuando alguien fiche o venda, aparecerá aquí.</p>
     </div>
   ============================================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 6px;
}

.empty-state-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 6px;
    /* El icono acompaña, no informa: se atenúa para que no compita con el
       texto, y se oculta a los lectores de pantalla con aria-hidden. */
    opacity: 0.55;
}

.empty-state-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 42ch;
}

/* Dentro de una tabla hace falta neutralizar el layout de la celda. */
td > .empty-state,
th > .empty-state {
    padding: 32px 16px;
}

.empty-state .btn {
    margin-top: 14px;
}

@media (max-width: 767px) {
    .empty-state {
        padding: 36px 18px;
    }

    .empty-state-icon {
        font-size: 38px;
    }
}

/* ============================================================
   FOCO VISIBLE PARA TECLADO
   ============================================================
   Nueve sitios ponen "outline: none" sobre elementos interactivos
   —el selector de jornada, el campo de puja, el buscador del grid,
   botones— y no dentro de :focus, sino en la regla base. Resultado:
   quien navega con teclado no ve nunca dónde está.

   Se restaura con :focus-visible, que el navegador activa SOLO en
   navegación por teclado. Al hacer clic con el ratón no aparece, que
   es justo lo que se intentaba evitar quitando el outline.

   Lleva !important, y no por pereza: ".gameweek-select {outline:none}"
   tiene la misma especificidad que ":focus-visible", y esos bloques van
   en <style> dentro de cada página, o sea DESPUÉS de esta hoja. A
   igualdad de especificidad gana el último, así que sin !important la
   anulación seguiría venciendo. Comprobado tabulando en el navegador:
   sin él, el <select> de jornada se queda en "outline: none".

   El riesgo habitual de !important no aplica aquí, porque :focus-visible
   solo se activa navegando con teclado.
   ============================================================ */

:focus-visible {
    outline: 3px solid var(--primary) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Sobre superficies rojas el outline rojo se pierde: se usa blanco. */
.btn-primary:focus-visible,
.btn-danger:focus-visible,
.card-gradient :focus-visible {
    outline-color: #FFFFFF !important;
}

/* Los campos ya marcan el foco con borde y sombra, así que ahí el
   outline solo añade ruido; se deja más fino. */
.form-input:focus-visible {
    outline-width: 2px !important;
    outline-offset: 1px !important;
}

/* Saltar al contenido: útil para teclado y lectores de pantalla.
   Solo aparece al tabular. */
.saltar-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--primary);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 0 0 12px 0;
    text-decoration: none;
}

.saltar-contenido:focus {
    left: 0;
}