/* Estilos del front publico (S1-126, spec dev/aligerar-publicas.md).
   Archivo ESTATICO: el layout lo pide con asset_versioned() (?v=fecha del archivo) y el navegador lo guarda
   un año (public/.htaccess). Antes iba en linea dentro de cada pagina (web/partials/style.blade.php, que hoy
   conserva en linea solo las fuentes con version y los colores de la configuracion, y despues pide este archivo).
   Sin Blade: aca un arroba es CSS literal. Va en el mismo lugar de la cascada que antes. */
    .text-color-1{
        color: var(--color-texto-1);
    }

    .bg-color-1{
        background-color: var(--color-texto-1);
    }

    .bg-tertiary{
        background-color: var(--color-terciario);
    }

    .text-color-2{
        color: var(--color-texto-2);
    }
    
    .q-field__label, .q-field__native, .q-field__marginal, .q-checkbox__inner, .q-field__focusable-action {
        color: var(--color-texto-1)
    }

    .q-table td, .q-table th, .q-table thead, .q-table tr {
        border-color: var(--color-secundario);
    }

    .line-primary .q-table td, .line-primary .q-table th, .line-primary .q-table thead, .line-primary .q-table tr {
        border-color: var(--color-primario);
    }

    .q-menu {
        background-color: var(--color-secundario);
        color: var(--color-texto-1);
    }

    /* SCROLL STYLE - START */
    body::-webkit-scrollbar, .scroller::-webkit-scrollbar, *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    body::-webkit-scrollbar-track-piece, .scroller::-webkit-scrollbar-track-piece, *::-webkit-scrollbar-track-piece  {
        background-color: #504f52;
    }

    body::-webkit-scrollbar-thumb:vertical, .scroller::-webkit-scrollbar-thumb:vertical, *::-webkit-scrollbar-thumb:vertical {
        height: 30px;
        background-color: #121317d5;
    }

    body::-webkit-scrollbar-thumb:horizontal, .scroller::-webkit-scrollbar-thumb:horizontal, *::-webkit-scrollbar-thumb:horizontal {
        height: 30px;
        background-color: #121317d5;
    }

    body, .scroller ,{
        overflow-y: auto;
        scrollbar-color: #121317d5 #504f52;
    }


    /* 
    body::-webkit-scrollbar, .scroller::-webkit-scrollbar, *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    body::-webkit-scrollbar-track-piece, .scroller::-webkit-scrollbar-track-piece {
        background-color: var(--color-secundario);
    }

    body::-webkit-scrollbar-thumb:vertical, .scroller::-webkit-scrollbar-thumb:vertical {
        height: 30px;
        background-color: #504f52;
    }

    body::-webkit-scrollbar-thumb:horizontal, .scroller::-webkit-scrollbar-thumb:horizontal,   {
        height: 30px;
        background-color: #504f52;
    }


    */
    * {
        scrollbar-color: #504f52 var(--color-secundario);
    }


    /* SCROLL STYLE - END */

    a:hover {
        text-decoration: none;
        color: var(--color-terciario);
    }

    #app_header, #app_footer {
        min-height: 50px;
        background-color: var(--color-primario);
    }

    #app_header .row, #app_footer .row, .q-field.row , 
    .q-field__control.row,
    .q-field__control-container.row ,[class*=".q-field__"].row, .q-item.row {
        margin: 0;
    }

    #app_header .col, #app_footer .col, #app_header .col-auto, #app_footer .col-auto {
        padding: 0;
    }

    #app_header a, #app_footer a , a.q-item{
        text-decoration: none;
    }      

    .q-field__inner.col, .q-field.col, .q-field.col-auto{
        padding: 0;
    }
    #app_footer {
        position: fixed;
        bottom: 0;
        left: 0;
        min-width: 100vw;
        max-width: 100vw;
        /* Por encima de TODO el contenido de la pagina (regla de Joel: nada tapa la
           barra). El contenido sticky mas alto del sitio va en 2000 (pestanas de las
           fichas, header de Quasar, barras replicadas); con 500 las pestanas sticky
           de la ficha le pasaban por arriba. 3000 les gana con margen y queda bien
           DEBAJO de los overlays de Quasar (q-dialog 6000, notify 9500): las ayudas
           "i", el share y cualquier modal siguen tapando la barra al abrirse. */
        z-index: 3000;
        padding: 0;
    }

    /* ===== ESCALA DE CAPAS DEL SITIO (de abajo hacia arriba) =====
       Para que no vuelva la guerra de z-index. Todo sticky/fixed nuevo entra en uno
       de estos niveles, con aire entre si:

         contenido y detalles decorativos ....... auto / 1-10
         stickies INTERNOS de pagina ............ 50   (pestanas de torneo y fichas,
                                                        encabezados de rankings, galeria)
         HEADER superior del sitio .............. 2000 (.q-header, lo trae Quasar; al
                                                        header no se le superpone NADA
                                                        del contenido)
         barra flotante inferior (celular) ...... 3000 (#app_footer)
         overlays de Quasar ..................... 6000 (q-dialog) / 9500 (notify)

       La regla que causaba el bug: los stickies internos iban TAMBIEN en 2000 y, por
       venir despues en el DOM, al empatar le pintaban por encima al header. Ahora van
       en 50: siempre por debajo. Los offsets de los stickies usan --barra-superior
       para pegarse JUSTO debajo del header, nunca pisandolo. */

    #app_header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 15;
    }

    .app_menu_tab:hover, .app_menu_tab.selected {
        color: var(--color-terciario) !important;
    }

    .menu-verificacion-jugador {
        border-radius: 4px;
        margin: 4px;
    }

    .menu-verificacion-jugador:hover {
        color: var(--color-texto-1) !important;
    }

    .q-btn__content.row {
        margin: 0;
    }

    #header-nav-menu, #app_header {
        display: flex;
    }

    #footer-nav-menu, #app_footer {
        display: none;
    }

    /* ===== Barra superior del front publico =====
       Dos bloques: la marca a la izquierda y todo lo operativo agrupado a la derecha.
       Con space-between alcanza; el grid de tres columnas que habia antes existia para
       centrar el logo, y el logo ya no va al centro.

       Alto fijo de 64px: es el que alimenta las tres declaraciones de --barra-superior,
       mas abajo en este archivo, de donde cuelgan las barras sticky del resto del sitio.
       Si cambia, cambian las tres. El id le gana en especificidad al display:flex que
       trae .q-toolbar de Quasar, asi que no hace falta !important. */
    #header-barra {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 64px;
    }

    /* --- Marca --- */
    /* La imagen la elige el admin: puede ser el wordmark horizontal ('logo_header_liga')
       o, mientras no haya ninguno cargado, el logo cuadrado de siempre. Por eso se
       dimensiona por ALTO y el ancho queda libre:

         height fija     -> la barra mide siempre lo mismo, no importa que suban
         width: auto     -> la proporcion original se respeta, nunca se deforma
         max-width       -> tope de seguridad: un archivo muy apaisado no puede empujar
                            la navegacion fuera de la pantalla
         object-fit      -> si alguna vez el ancho topea, la imagen se ajusta adentro en
                            vez de estirarse

       48px de alto deja 8px de aire arriba y abajo en la barra de 64px. Un wordmark 3:1
       a esa altura mide 144px de ancho, holgado contra el tope de 200px. */
    .header-logo {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        /* Un respiro contra el borde: el padding del q-toolbar solo no alcanzaba y el
           logo quedaba mordiendo el margen izquierdo de la pagina. */
        margin-left: 8px;
    }
    .header-logo img {
        display: block;
        height: 48px;
        width: auto;
        max-width: 200px;
        object-fit: contain;
    }

    /* --- Bloque operativo de la derecha --- */
    #header-derecha {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-width: 0;
    }

    /* Selector de serie: herramienta, no identidad. Se le saco el borde dorado -que lo
       ponia al nivel del CTA- y quedo como texto con su etiqueta delante. El dorado en
       esta barra ahora significa una sola cosa: la accion, y el subrayado del activo. */
    .header-serie {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
    }
    .header-serie-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        white-space: nowrap;
    }
    .header-serie-btn {
        font-size: 13px;
        padding: 0 4px;
    }

    /* Separa la herramienta de la navegacion sin dibujar una caja. */
    .header-divisor {
        width: 1px;
        height: 22px;
        background-color: rgba(255, 255, 255, 0.18);
        flex-shrink: 0;
    }

    /* --- Navegacion --- */
    /* Un solo grupo, con el mismo gap entre los cuatro. Antes se partia en dos mitades
       alrededor del logo y se leia como dos menus distintos. */
    .header-nav-grupo {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .header-nav-label {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        /* El borde transparente reserva el lugar de la linea del activo: sin esto, el
           texto salta 2px al pasar de una seccion a otra. */
        border-bottom: 2px solid transparent;
        padding-bottom: 2px;
        white-space: nowrap;
        transition: border-color .15s ease;
    }
    .header-nav-label--activo {
        border-bottom-color: var(--dorado-claro);
    }
    .header-link:hover .header-nav-label {
        border-bottom-color: rgba(232, 198, 90, 0.45);
    }

    /* --- Accion --- */
    /* Ingresar ya no es una pildora. Tenia fondo dorado pleno y texto navy, y sobre el
       Azul Centenario cantaba: se leia como un aviso pegado a la barra y no como parte
       del menu. Ahora usa .header-link, igual que las cuatro secciones, y hereda de
       ellas color, tamaño, hover y espaciado; lo unico propio es un punto dorado
       delante del texto.

       Se fueron con la pildora sus tres reglas (.header-cta, su :hover y el override
       del label) y el ajuste de padding de la franja 1001-1200px: sin fondo ni radio no
       quedaba nada que declarar. El contenedor .header-cta-zona de main.blade.php sigue,
       que ese solo agrupa y no pinta.

       Un punto y no un subrayado: la linea dorada bajo la etiqueta ya significa otra
       cosa en esta barra -es la marca de seccion activa, .header-nav-label--activo-, y
       usarla tambien como adorno permanente de Ingresar hacia que pareciera que uno
       esta parado ahi. El punto no colisiona con ningun estado.

       Va como ::before y NO se toca el display del label. .header-nav-label es
       inline-block y comparte esa caja con los otros cuatro items; pasarlo a inline-flex
       para centrar el punto le cambiaria la linea base y lo correria un pixel respecto de
       Inicio, Torneos, Historicos y Galeria. Con vertical-align: middle el punto se
       centra contra el texto sin tocar la caja: 6px entran holgados en la linea de 19.5px
       (15px x 1.3 de line-height), asi que tampoco suma altura.

       Este item NO apaga el borde del activo ni el del hover: los conserva igual que las
       cuatro secciones, para que su comportamiento sea el mismo. Lo unico propio es el
       punto. */
    .header-nav-label--accion::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 6px;
        border-radius: 50%;
        background-color: var(--dorado);
        vertical-align: middle;
        transition: background-color .15s ease;
    }
    /* Hover discreto: el punto sube del dorado medio al claro. Se elige el color y no el
       tamaño a proposito: agrandar el punto correria el texto y la fila entera bailaria
       al pasar el mouse. El fondo y el color del texto no se tocan, que es justo lo que
       hacia la pildora vieja. */
    .header-link:hover .header-nav-label--accion::before {
        background-color: var(--dorado-claro);
    }

    /* Linea dorada al pie de TODO el header. Va en .q-header y no en el toolbar para
       que quede una sola: con banda de aviso vigente el header es toolbar + banda, y
       puesta en el toolbar la linea partia el header por el medio.

       Convive con el box-shadow de 'q-header elevated' sin tocarlo: el borde se pinta
       en el limite del elemento y la sombra se proyecta hacia afuera, por debajo, asi
       que la linea queda nitida por encima del degradado.

       OJO: estos 2px se suman por fuera del alto del toolbar (el header no tiene alto
       fijo), y por eso --barra-superior los cuenta aparte. */
    .q-header {
        border-bottom: 2px solid rgba(232, 198, 90, 0.35);
    }

    /* Franja intermedia (1001-1200px): la marca, la herramienta, los cuatro links y la
       pildora entran justos. La barra NO puede envolver a dos lineas -su alto alimenta
       --barra-superior y partirla descolocaria las barras sticky de todo el sitio-, asi
       que se achica en vez de envolver: letra 15->14px, logo 48->40px, menos aire y la
       etiqueta "SERIE" se va, que es la unica pieza prescindible del conjunto. */
    @media (min-width: 1001px) and (max-width: 1200px) {
        #header-barra {
            gap: 0.5rem;
            padding-left: 8px;
            padding-right: 8px;
        }
        #header-derecha {
            gap: 0.6rem;
        }
        .header-logo img {
            height: 40px;
        }
        .header-serie-label {
            display: none;
        }
        .header-nav-label {
            font-size: 14px;
        }
        .header-nav-grupo .q-btn {
            padding-left: 8px;
            padding-right: 8px;
        }
    }

    .custom-card {
		background-color: var(--color-primario);
		border-radius: 10px;
		color: var(--color-texto-1);
		margin-bottom: 1rem;
		overflow: hidden;
	}

	.custom-card-titulo {
		border-bottom: 1px solid var(--color-secundario);
		background-color: var(--color-primario);
		color: var(--color-texto-1);
		padding: 3px .5rem;
		font-weight: bold;
		font-size: 16px;
	}

	.custom-card-contenido {
		padding: 1rem .5rem;
		color: var(--color-texto-1);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
	}

    .q-field--standout.q-field--highlighted .q-field__native,
    .q-field--standout.q-field--highlighted .q-field__input,
    .q-field--standout.q-field--highlighted .q-field__append,
    .q-date__header {
        color: var(--color-texto-1) !important;
    }


    a, a:visited {
        text-decoration: none;
    }

    @media (max-width: 1000px) {
        #header-nav-menu {
            display: none;
        }

        #app_footer {
            display: flex;
        }
        /* El toolbar SOLO se muestra cuando ya fue teleportado adentro de la barra.
           Nace dentro del layout (el <teleport> de main.blade.php) y recien al montar
           Vue se muda a #app_footer: con el selector suelto de antes se dibujaba
           incrustado en el medio del contenido mientras Vue no montara (la captura de
           Joel). Los dos ids le ganan al display:none global de este archivo. */
        #app_footer #footer-nav-menu {
            display: flex;
        }

        /* ===== Barra inferior flotante (pildora de vidrio) =====
           Despegada de los bordes y redondeada, estilo capsula. El vidrio es el navy
           del sitio (#05141F) al 75% + blur; el contenedor lleva el look y recorta las
           esquinas, y el toolbar de adentro se vuelve transparente y pierde su sombra
           (su .bg-primary !important pintaria un rectangulo solido sobre el vidrio;
           el id le gana en especificidad con el mismo !important). Los iconos, labels
           y estado activo no se tocan. */
        #app_footer {
            left: 12px;
            right: 12px;
            bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* el gesto del iPhone queda debajo */
            min-width: 0;
            max-width: none;
            width: auto;
            border-radius: 999px;
            overflow: hidden; /* recorta el toolbar (y el ::before del vidrio) a la capsula */
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, .08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
            /* Estabilizador de fixed en iOS: capa de composicion propia. */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        /* OJO: el vidrio (fondo + blur) va en un ::before interno y NO en el elemento
           fijo. WebKit/iOS tiene un bug conocido donde position:fixed + backdrop-filter
           EN EL MISMO elemento rompe el anclaje al viewport: la barra viajaba con el
           contenido y quedaba incrustada en el medio de la pagina. El ::before es capa
           interna de la barra (no un ancestro), absoluto sobre toda la capsula, detras
           del contenido (z-index -1 dentro del stacking context que #app_footer ya crea
           por fixed + z-index), y el overflow:hidden lo recorta a la curva. */
        #app_footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background-color: rgba(5, 20, 31, .75);
            -webkit-backdrop-filter: blur(14px); /* iOS/Safari */
            backdrop-filter: blur(14px);
        }
        /* Sin blur (navegadores viejos, con o sin prefijo) el 75% quedaria lavado sobre
           contenido claro: casi opaco y listo. */
        @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
            #app_footer::before {
                background-color: rgba(5, 20, 31, .95);
            }
        }
        #footer-nav-menu {
            background: transparent !important;
            box-shadow: none;
        }
        /* ===== Barra solo iconos + compactacion minimalista =====
           Decision de Joel: en celular la barra lleva SOLO ICONOS, siempre — las
           etiquetas quedan fuera de este ancho en ambos estados (en escritorio la
           barra ni existe, asi que no pierden nada). El estado compacto es apenas
           mas bajo (min-height 50 -> 44), sin animar anchos ni ocultar contenido:
           el JS del layout solo pone/saca .nav-compacta. Los botones no bajan de
           44px: zona tactil tocable en ambos estados. */
        /* Solo el TEXTO de la etiqueta se oculta. OJO: no usar ".text-center" como
           selector — Quasar se la pone tambien al wrapper interno de cada q-btn
           (q-btn__content text-center ...) y ocultarla dejaba la barra VACIA, iconos
           incluidos. La clase propia viene de _nav_items.blade.php. */
        #app_footer .app_menu_tab-etiqueta {
            display: none; /* las etiquetas Inicio/Torneos/... no van en celular */
        }
        #app_footer .app_menu_tab .q-icon {
            font-size: 24px; /* protagonistas ahora que van solos */
        }
        #app_footer {
            transition: min-height .2s ease;
        }
        #app_footer #footer-nav-menu {
            transition: min-height .2s ease;
            justify-content: space-evenly; /* 5 iconos bien repartidos */
        }
        #app_footer .app_menu_tab {
            min-height: 44px;
        }
        #app_footer.nav-compacta {
            min-height: 44px;
        }
        #app_footer.nav-compacta #footer-nav-menu {
            min-height: 44px; /* pisa el min-height de 50px que .q-toolbar trae de Quasar */
        }
        /* Con la barra flotando, el final de la pagina queda detras de la capsula: el
           pie del sitio abre ese hueco para que el ultimo contenido siempre se pueda
           scrollear a la vista. 142 = los 64 esteticos de siempre + 78 de barra
           (50 de capsula + 12 de margen + aire); mas el safe-area del iPhone.
           `footer.` adelante: la base de .footer-sitio se declara MAS ABAJO en este
           archivo y a igual especificidad le ganaria a este media por orden. */
        footer.footer-sitio {
            padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px));
        }

        /* Celular: se va todo lo que no es marca ni contexto. Los cuatro links y el
           Acceso siguen disponibles en la barra de abajo, que aparece en este mismo
           breakpoint (#footer-nav-menu, con sus iconos).

           No hace falta reordenar nada ni estirar el contenedor del selector: con
           space-between el logo queda a la izquierda y la serie contra el borde derecho,
           que es donde tiene que estar. */
        .header-nav-grupo,
        .header-cta-zona,
        .header-divisor {
            display: none;
        }
        /* La barra baja 4px en celular: con los links afuera queda solo marca y serie,
           y los 64px de escritorio se veian pesados en una pantalla chica.
           OJO: este alto tiene su propio juego de --barra-superior, mas abajo en este
           archivo, despues de las declaraciones globales. Si cambia uno, cambian los dos. */
        #header-barra {
            min-height: 60px;
        }

        /* Mismo wordmark que en escritorio, apenas mas bajo para acompañar la barra: 44px
           dejan los mismos 8px de aire arriba y abajo que los 48 sobre 64. El tope de
           ancho tambien baja, que esta barra es mucho mas angosta. */
        .header-logo img {
            height: 44px;
            max-width: 150px;
        }
    }

    /* ===== PALETA DE MARCA (front publico) - inicio ===== */
    /* Aplica los colores del manual de marca solo al front publico (incluye login y paginas de error).
       No modifica el selector de colores del admin: sobrescribe la paleta unicamente en estas paginas.
       Azul Centenario #00649C = titulos/acentos/enlaces | Azul Electrico #007BB0 = botones de accion
       Azul Profundo #05141F = fondo general | Blanco #FFFFFF = texto sobre fondos oscuros */
    :root {
        /* Variables propias del front (usadas por #app_header, .custom-card, etc.) */
        --color-primario: #05141F;
        --color-terciario: #00649C;
        --color-texto-1: #FFFFFF;

        /* ----- Tokens de la linea premium del perfil de equipo -----
           Estos doce valores ya estaban en uso, pero como hex literales repetidos
           dentro de la linea de tiempo de experiencia (informacion.blade.php). Se
           declaran aca para que la grilla de cromos de la plantilla los consuma sin
           duplicarlos: el dia que cambie el dorado se toca un solo lugar.
           Los valores son identicos a los que ya pintaba la linea de tiempo, asi que
           declararlos no cambia el aspecto de ninguna pantalla por si solo.

           Van en este :root y no en el global porque este bloque esta acotado al
           front publico: la partial se incluye solo desde el layout del front, y el
           admin conserva su propio selector de colores. */

        /* Dorados: escala de acento. Oscuro = arranque de gradiente y trazos
           apagados | Medio = bordes y glow | Claro = texto y realces. */
        --dorado-oscuro: #8A6F14;
        --dorado: #C9A227;
        --dorado-claro: #E8C65A;

        /* Plata: gris claro frio de acento (portada: grupo de la serie). Debe leerse
           claramente mas gris que el blanco de las etiquetas (#E8EEF2) y distinto
           del celeste #7FB2D4. */
        --plata: #C6CFD8;

        /* Navys: escala de profundidad. Fondo = pagina y paneles | Panel = cabeceras
           y degradados | Card = superficie de tarjeta | Hueco = rebajes y vacios. */
        --navy-fondo: #05141F;
        --navy-panel: #071a28;
        --navy-card: #0A2233;
        --navy-hueco: #0e1f2c;

        /* Borde neutro para separar superficies donde el dorado seria demasiado. */
        --borde-neutro: #3a4a58;

        /* Textos sobre navy, de mayor a menor jerarquia. */
        --texto-alto: #E8EEF2;
        --texto-medio: #7FB2D4;
        --texto-bajo: #6D8598;
        --texto-apagado: #55697B;
    }

    /* Overrides directos de clase/elemento (color literal). Se usa este enfoque en
       lugar de sobrescribir las variables --q-* porque Quasar las fija por JS con
       prioridad sobre el elemento raiz. Como este <style> se carga despues de
       quasar.css, estas reglas ganan por orden de origen. */

    /* Fondo general de la pagina: el contenedor de contenido usa bg-secondary. */
    body,
    .q-page-container {
        background-color: #05141F !important;
    }

    /* El navy llega HASTA ABAJO DE TODO, siempre: html tambien navy (es lo que asoma
       en el overscroll de iOS y en cualquier hueco de layout) y body a viewport
       completo — dvh mide el viewport dinamico del celular (URL bar que aparece y
       desaparece); vh queda de fallback para navegadores viejos. */
    html {
        background-color: #05141F;
    }
    body {
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* El pie del sitio (footer.blade.php), ya EN FLUJO y sin <q-footer> de por medio:
       fondo navy propio (antes lo ponia un inline con --color-primario) y el aire
       inferior de siempre. En celular el media de arriba agranda ese padding para
       dejar hueco a la barra flotante, con la zona del safe-area navy tambien. */
    .footer-sitio {
        background-color: #05141F;
        padding-bottom: 64px;
    }

    /* Superficies de marca (headers, footer, cards y paneles). */
    .bg-primary {
        background-color: #05141F !important;
    }

    /* Titulos, enlaces de acento y item activo del menu de navegacion. */
    .text-accent {
        color: #00649C !important;
    }

    /* ----- Botones de accion (web publica) en Azul Electrico ----- */
    /* Todos los botones de accion, consistentes en toda la web:
       - .q-btn.q-btn--standard: q-btn SOLIDOS. Los del header/menu son 'flat'
         (q-btn--flat), asi que quedan excluidos y NO se toca .q-header.
       - .serie-2: links estilados como boton en la pantalla de seleccion de serie
         (Copas LDR, Martes Nocturno, Domingo, Verificacion Jugador, Partidos del Dia...).
       - a[style*="border-radius: 50%"]: iconos sociales circulares (Youtube, etc.),
         que traen su fondo oscuro inline (por eso se veian negros).
       Los links de texto "Ver mas" (a.ver-mas-publicacion) NO son botones: no se tocan. */
    .q-btn.q-btn--standard,
    .serie-2 {
        background-color: #007BB0 !important;
        color: #FFFFFF !important;
    }

    /* ----- Iconos de redes sociales (web publica): circulo con borde fino, no relleno ----- */
    /* Se sacan de la regla de botones rellenos de arriba. Fondo transparente, borde blanco
       fino e icono blanco, para que se vean discretos como links y NO como botones de accion.
       Son los <a> circulares con border-radius:50% inline (Facebook, Instagram, Youtube,
       WhatsApp...). El transparent !important tambien tapa el background-color inline. */
    a[style*="border-radius: 50%"] {
        background-color: transparent !important;
        color: #FFFFFF !important;
        /* Achica el area clickeable (inline traia min 3.5rem) a algo acorde al logo,
           y junta los iconos reduciendo el margen (inline traia margin-left .5rem).
           El logo (fab fa-2x) conserva su tamano. */
        min-width: 0 !important;
        min-height: 0 !important;
        padding: .25rem !important;
        margin: .3rem !important;
    }

    /* ----- Jerarquia en /seleccionar-serie: acciones secundarias (Grupo B) en CONTORNO ----- */
    /* Grupo A (dias/series) queda relleno con la regla de arriba. Grupo B (Verificacion
       Jugador, Busco Equipo, Preinscripcion, Jugadores y Partidos del Dia) pasa a outline:
       fondo transparente, borde Azul Electrico, letra blanca; se ve de segundo nivel.
       Las series (Grupo A) son .serie-2 pelada dentro de .col-xs-6, sin q-mx-xs ni ese href,
       por eso NO se tocan. Mayor especificidad que .serie-2 => sobrescribe solo al Grupo B. */
    .serie-2.q-mx-xs,
    .serie-2[href*="partidos_del_dia"] {
        background-color: transparent !important;
        border: 2px solid #007BB0 !important;
        color: #FFFFFF !important;
    }

    /* ----- Barra de navegacion superior (.q-header del layout publico) ----- */
    /* El header visible es un QHeader (<header class="q-header">) con un QToolbar
       transparente: sin fondo propio dejaba ver el body (#05141F) y se veia oscuro.
       'id="app_header"' NO existe en el DOM, por eso se apunta a .q-header. Solo la
       barra superior: el footer es .q-footer y no se toca. */

    /* 1) Fondo de la barra: Azul Centenario, sobre el header y su toolbar. */
    .q-header,
    .q-header .q-toolbar {
        background-color: #00649C !important;
    }

    /* 2) Texto e iconos de todos los items en Blanco, para leerse sobre el azul. */
    .q-header,
    .q-header .q-btn,
    .q-header .q-icon {
        color: #FFFFFF !important;
    }

    /* 3) Item activo: blanco tambien, pero se distingue con negrita. Selector propio
          de la barra: NO se modifica la regla .text-accent global (titulos de seccion). */
    .q-header .text-accent {
        color: #FFFFFF !important;
        font-weight: 700 !important;
    }

    /* 3b) Subrayado sutil solo en la etiqueta de texto del item activo (no en el icono). */
    .q-header .text-accent:not(.q-icon) {
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }

    /* ----- Banner de estadisticas de la liga (home y seleccion de serie) ----- */
    /* Los contenedores .estadisticas-xs / .estadisticas-xl solo los usa este banner,
       en ambas pantallas. Se le quita el fondo azul propio para que se vea el fondo
       general oscuro (#05141F) y no compita con el Azul Centenario de la barra superior.
       Numeros en Azul Centenario; etiquetas e iconos en Blanco. Se scopea bajo los
       contenedores para NO afectar las estadisticas de otras paginas. */
    .estadisticas-xs,
    .estadisticas-xl {
        background-color: transparent !important;
    }

    /* Numeros grandes: Blanco (mejor lectura sobre el fondo oscuro). Cubre el banner
       y la franja de la serie (p.ej. "Domingo": 470, 28, 24, 1600, 6895), en ambas
       pantallas, porque todos son .estadistica-valor bajo estos contenedores. */
    .estadisticas-xs .estadistica-valor,
    .estadisticas-xl .estadistica-valor {
        color: #FFFFFF !important;
    }

    /* Etiquetas e iconos: Blanco, para leerse sobre el fondo oscuro. */
    .estadisticas-xs .estadistica-label,
    .estadisticas-xl .estadistica-label,
    .estadisticas-xs .estadistica-titulo,
    .estadisticas-xl .estadistica-titulo,
    .estadisticas-xs .estadistica .fas,
    .estadisticas-xl .estadistica .fas {
        color: #FFFFFF !important;
    }

    /* ----- "Ultimos Resultados": nombres de equipo siempre en Blanco ----- */
    /* El equipo ganador recibe la clase global .text-positive (verde). Se neutraliza
       SOLO dentro del carrusel (swiper-slide) para que todos los nombres queden en
       blanco, sin distinguir ganador. text-positive fuera de los swipers (otras
       paginas) no se toca; y este es el unico swiper que la usa. */
    swiper-slide .text-positive {
        color: #FFFFFF !important;
    }
    /* ===== PALETA DE MARCA (front publico) - fin ===== */

    /* ===== Alto de la barra superior fija ===== */
    /* Donde termina el header fijo, o sea desde donde tiene que pegar cualquier barra
       sticky de abajo. No es una constante: el header es un <q-header> que contiene el
       <q-toolbar> y, cuando hay aviso vigente, la banda .ldr-aviso.

         64px  toolbar (lo fija #header-barra mas arriba en este archivo)
       +  2px  linea dorada al pie del .q-header, que se suma por fuera del toolbar
       + 33px  banda de aviso (32px de alto + 1px de borde inferior)
       + env(safe-area-inset-top)  el notch del iPhone, que Quasar ya suma al toolbar

       El env() va con fallback 0px: en escritorio y en Android no suma nada.

       Antes esto era un `top: 50px` escrito a mano en el <q-tabs> de show_torneo, que
       daba por sentado un header de 50px. Con la banda visible el header mide 99px, asi
       que la barra pegaba 33px mas arriba de donde debia y tapaba el aviso al scrollear.

       Los tres valores de abajo van atados al min-height de #header-barra: si aquel
       cambia, estos tambien. */
    :root {
        --barra-superior: calc(env(safe-area-inset-top, 0px) + 66px);
    }

    /* Con la banda en el DOM el header es mas alto. Si el navegador no soporta :has(),
       la variable se queda en los 66px de arriba, que es el comportamiento anterior. */
    html:has(.ldr-aviso) {
        --barra-superior: calc(env(safe-area-inset-top, 0px) + 99px);
    }

    /* El usuario cerro la banda: vuelve a mandar el toolbar solo. Va DESPUES del :has()
       a proposito: las dos reglas tienen la misma especificidad y gana la ultima. */
    html.ldr-aviso-cerrado {
        --barra-superior: calc(env(safe-area-inset-top, 0px) + 66px);
    }

    /* Celular: la barra mide 60px en vez de 64 (ver el media query de mas arriba), asi
       que las tres declaraciones se recalculan con ese numero. Van DESPUES de las
       globales a proposito: tienen la misma especificidad y, si fueran antes, las de
       arriba las pisarian y las barras sticky quedarian 4px mas abajo de donde va.

         60px  toolbar en celular
       +  2px  linea dorada al pie del .q-header
       + 33px  banda de aviso, cuando esta vigente                    -> 62px / 95px */
    @media (max-width: 1000px) {
        :root {
            --barra-superior: calc(env(safe-area-inset-top, 0px) + 62px);
        }

        html:has(.ldr-aviso) {
            --barra-superior: calc(env(safe-area-inset-top, 0px) + 95px);
        }

        /* Mismo orden que arriba: la de "aviso cerrado" va despues de la de :has(). */
        html.ldr-aviso-cerrado {
            --barra-superior: calc(env(safe-area-inset-top, 0px) + 62px);
        }
    }
    /* ===== Alto de la barra superior fija - fin ===== */

    /* ===== Banda de aviso (front publico) ===== */
    /* Banda oscura full-width, con el dorado como acento (borde inferior + pildora
       del CTA). Ocupa todo el ancho del header, sin radio. */
    .ldr-aviso {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 32px;
        padding: 0 4px 0 44px;
        background: #0A2233;
        color: #E4D6A8;
        border-bottom: 1px solid rgba(201, 162, 39, .45);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }
    .ldr-aviso__contenido {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1 1 auto;
        min-width: 0; /* permite el ellipsis dentro del flex */
        overflow: hidden;
        white-space: nowrap;
    }
    .ldr-aviso__texto {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: .04em;
        color: #E4D6A8;
    }
    .ldr-aviso__cta {
        flex: 0 0 auto;
        background: #C9A227;
        color: #05141F;
        font-size: 11px;
        font-weight: 500;
        padding: 3px 10px;
        border-radius: 999px;
        text-decoration: none;
        white-space: nowrap;
    }
    .ldr-aviso__cta:hover {
        background: #D9B435;
    }
    .ldr-aviso__cta:focus {
        outline: none;
    }
    .ldr-aviso__cta:focus-visible {
        outline: 2px solid #E4D6A8;
        outline-offset: 2px;
    }
    /* La X: glifo chico y tenue, pero la zona de toque no baja de 40x30. */
    .ldr-aviso__cerrar {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 30px;
        height: 30px;
        padding: 0;
        background: transparent;
        border: 0;
        color: rgba(228, 214, 168, .5);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
    }
    .ldr-aviso__cerrar:hover {
        color: rgba(228, 214, 168, .85);
    }
    @media (max-width: 599px) {
        .ldr-aviso {
            height: 30px;
            padding: 0 4px 0 12px;
        }
        .ldr-aviso__contenido {
            justify-content: flex-start;
        }
        .ldr-aviso__cta {
            padding: 2px 8px;
        }
    }
    /* Anti-parpadeo: el script del <head> pone esta clase en <html> si el aviso ya
       fue cerrado, para ocultarlo antes del primer pintado. */
    html.ldr-aviso-cerrado .ldr-aviso {
        display: none !important;
    }
    /* ===== Banda de aviso (front publico) - fin ===== */

    /* ===== Disco detras del escudo (front publico) ===== */
    /* Disco tenue detras del escudo: separa a los escudos oscuros del fondo sin
       recurrir a un blanco duro. Vivia en el @push('css') de /equipos; se promueve
       aca para reusarlo en el perfil de equipo.
       El alfa base (0.07) esta calculado para los fondos oscuros del perfil
       (#05141F / #121317). El listado /equipos usa el modificador, que conserva su
       alfa original (0.06), calculado contra el #0A2233 de su tarjeta: con esos dos
       valores el disco se percibe igual de marcado en ambos fondos. */
    .escudo-disco {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.07);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    .escudo-disco-img {
        width: 66px;
        height: 66px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Listado /equipos: alfa original, sobre el #0A2233 de la tarjeta. */
    .escudo-disco--listado {
        background-color: rgba(255, 255, 255, 0.06);
    }

    @media (max-width: 599px) {
        .escudo-disco { width: 72px; height: 72px; }
        .escudo-disco-img { width: 54px; height: 54px; }
    }
    /* ===== Disco detras del escudo (front publico) - fin ===== */

    /* ===== Franja de sponsors (global, arriba del footer) =====
       dev/franja-sponsors-footer-global.md

       Los estilos viven aca y no en un @push('css') del footer: el layout
       (web/layouts/web.blade.php) resuelve @stack('css') en el <head> e incluye esta
       partial recien despues, pero al footer lo incluye mas abajo todavia. Lo que se
       empuje desde el footer llega tarde y no se imprime nunca.

       Los rgba() son los mismos tokens de siempre expresados con alfa, igual que en
       partidos.blade.php: rgba(201,162,39) es --dorado (#C9A227) y rgba(0,100,156) es
       el Azul Centenario (#00649C). No hay ningun color nuevo. */
    .sponsors-franja {
        /* Dos capas. Arriba, el velo del Fixture: transparente en los extremos y pleno
           en el 70% central. Va sobre la franja entera y no sobre la fila porque la fila
           ahora esta limitada al 80%: si el velo viajara con ella, el halo cortaria en
           seco justo donde termina la fila en vez de apagarse contra los bordes.
           Abajo, el mismo degradado que .pt-card de la pestaña Partidos y que
           .info-camino, para que la franja se lea como una superficie mas de la familia. */
        background-image:
            linear-gradient(
                to right,
                transparent 0%,
                rgba(0, 100, 156, .12) 15%,
                rgba(0, 100, 156, .12) 85%,
                transparent 100%
            ),
            linear-gradient(160deg, var(--navy-panel) 0%, var(--navy-fondo) 100%);
        border-top: 1px solid rgba(201, 162, 39, .30);
        border-bottom: 1px solid rgba(201, 162, 39, .30);
        padding: .9rem 1rem;
        /* Red de seguridad: si algun logo de proporcion extrema empujara la fila mas
           alla del ancho, se recorta aca en vez de dar scroll horizontal a la pagina. */
        overflow: hidden;
    }

    .sponsors-franja__fila {
        /* La fila se limita al 80% de la franja y se centra. Ese 80% esta coordinado con
           el velo azul de .sponsors-franja, que va pleno entre el 15% y el 85%: si la
           fila usara todo el ancho, los logos de las puntas caerian sobre el degradado
           que se apaga.

           OJO con el orden de las declaraciones: el `margin: 0` que habia al final pisaba
           el `margin-left/right: auto` de arriba, asi que la caja del 80% quedaba pegada
           a la izquierda y todo el sobrante se acumulaba a la derecha (en 1920px el grupo
           de logos quedaba 189px corrido). Por eso ahora va una sola declaracion,
           `margin: 0 auto`, y no dos que compiten.

           space-evenly y no center: reparte el sobrante en huecos iguales, incluidos los
           de las puntas, asi el grupo queda centrado y ocupando el ancho para CUALQUIER
           cantidad de logos. Con center, cuando hay menos logos de los que entran, el
           sobrante se junta todo afuera y la fila se lee como un bloque chico en el medio
           de una barra vacia. Los logos ya no pueden crecer para llenar el hueco: la
           altura tope del clamp (104px) se alcanza a los 1300px de viewport.

           El gap sigue actuando de minimo: cuando la fila se comprime manda el, no
           space-evenly, asi que los logos nunca se pegan. */
        max-width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        gap: clamp(.6rem, 3vw, 2.5rem);
        list-style: none;
        padding: .5rem 0;
    }

    /* min-width: 0 es lo que habilita que flex comprima los items por debajo de su
       ancho natural. Sin eso la fila desbordaria en vez de achicarse. */
    .sponsors-franja__item {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .sponsors-franja__link {
        text-decoration: none;
        display: flex;
        min-width: 0;
    }

    .sponsors-franja__logo {
        /* Manda la ALTURA y no el ancho: asi todos los logos comparten la misma altura
           optica y el ancho lo resuelve cada proporcion. object-fit evita ademas que se
           deformen cuando flex tiene que comprimir la fila.

           El clamp es generoso a proposito: es la unica palanca para agrandar los logos
           sin tocar el gap. El piso (52px) manda en celular, donde 8vw se queda corto;
           el techo (104px) manda de 1300px para arriba. En el medio crece con la
           pantalla. Ojo: cuando la fila entra en compresion, la altura final pasa a
           depender solo del ancho disponible y de las proporciones de los logos, asi
           que subir el clamp no la empuja mas alla del tope del 80%. */
        /* La escala por sponsor (50-150%, admin) llega como --sponsor-escala inline desde
           el footer y multiplica la altura base: la escala cambia el ESPACIO REAL del
           logo (no solo lo pintado, como haria un transform), asi space-evenly reparte
           parejo sin huecos al achicar ni solapes al agrandar. Sin la var (escala 100)
           el default 1 deja el clamp intacto. */
        height: calc(clamp(52px, 8vw, 104px) * var(--sponsor-escala, 1));
        width: auto;
        max-width: 100%;
        object-fit: contain;
        display: block;
        /* Colores reales y plena opacidad: cada logo se muestra tal como se subio
           (el filtro blanco anterior arruinaba los logos que ya venian en blanco).
           El emparejado visual lo sigue dando la altura compartida de arriba. */
    }

    /* En celular el tope del 80% desperdiciaria un quinto de una pantalla ya angosta:
       la fila usa todo el ancho y el piso del clamp hace el resto. */
    @media (max-width: 599px) {
        .sponsors-franja__fila {
            max-width: 100%;
        }
    }
    /* ===== Franja de sponsors - fin ===== */

    /* ===== Fila de accesos rapidos del footer =====
       dev/rediseno-navegacion-barra-menu-footer.md

       Los seis destinos que antes vivian en el menu hamburguesa. Reusa el lenguaje
       visual de los circulos de redes sociales que estan justo abajo, para que las
       dos filas se lean como la misma familia. */
    .footer-accesos {
        /* Asimetrico a proposito: arriba poco, para que la fila quede pegada al borde
           dorado inferior de la franja de sponsors; abajo mas, para separarla de las
           redes. Ese padding-bottom se suma al padding-top: 1.5rem que el bloque de
           redes trae inline, asi que el aire real entre las dos filas es mayor. */
        padding: .9rem 1rem 1.25rem;
    }

    .footer-accesos__fila {
        display: flex;
        /* Con wrap, a diferencia de .sponsors-franja__fila: son seis items con texto
           y en celular no entran en una sola linea. Que envuelvan es el comportamiento
           buscado, no una concesion. */
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(.5rem, 2.5vw, 1.5rem);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer-accesos__item {
        /* Ancho fijo por item: es lo que alinea los circulos entre si aunque las
           etiquetas midan distinto ("Busco Equipo" contra "Verificacion Jugador").
           Sin esto, cada columna se ensancha con su texto y los circulos quedan
           desparejos. El piso de 4.75rem entra cuatro veces en una pantalla de 360px. */
        flex: 0 0 auto;
        width: clamp(4.75rem, 20vw, 6.5rem);
    }

    .footer-accesos__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        text-decoration: none;
        color: var(--color-texto-1);
        transition: color .15s ease;
    }

    .footer-accesos__icono {
        /* Mismo circulo que las redes sociales: 3.5rem y fondo secundario. */
        background-color: var(--color-secundario);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 3.5rem;
        min-height: 3.5rem;
        transition: background-color .15s ease;
    }

    /* Material Icons y Font Awesome traen tamanos de fabrica distintos: sin esto,
       el reloj de Torneos Anteriores y el escudo de Equipos se ven mas chicos que
       los iconos de Material. Se igualan los dos en 1.5rem. */
    .footer-accesos__icono i,
    .footer-accesos__icono .material-icons {
        font-size: 1.5rem;
        line-height: 1;
    }

    .footer-accesos__texto {
        font-size: .75rem;
        line-height: 1.25;
        text-align: center;
        /* Las etiquetas de dos palabras envuelven dentro del ancho del item en vez
           de empujarlo. */
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Celular: UNA fila de 5 columnas parejas. Con "Preinscripción" fuera de la
       botonera los numeros cierran: a 360px la celda mide (360 - 24 de padding - 16
       de gaps) / 5 = 64px y la palabra mas larga que queda ("Anteriores", ~52px a
       11px) entra sin guiones; todo quiebra natural en <= 2 lineas. Cuando la
       botonera tenia 6, la sexta parte daba 51-63px y "Preinscripción" (~73px) no
       entraba digna en ningun ancho — por eso entonces fue 3+3.
       minmax(0, 1fr): sin el, el minimo auto de la grilla desborda (leccion repetida
       del resto del sitio). Circulos de 46px: zona tactil valida.
       OJO: si el flag verificacion_jugadores esta apagado quedan 4 items y la quinta
       columna queda vacia a la derecha; se acepta (el flag esta prendido). */
    @media (max-width: 599px) {
        .footer-accesos {
            padding: .75rem .75rem 1rem;
        }
        .footer-accesos__fila {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: .6rem .25rem;
        }
        .footer-accesos__item {
            width: auto;
        }
        .footer-accesos__icono {
            min-width: 46px;
            min-height: 46px;
            width: 46px;
            height: 46px;
        }
        .footer-accesos__icono i,
        .footer-accesos__icono .material-icons {
            font-size: 20px;
        }
        .footer-accesos__texto {
            font-size: 11px;
            /* Con 64px por celda las palabras enteras entran: quiebre natural por
               palabra, sin guiones silabicos. */
            hyphens: none;
        }
    }

    .footer-accesos__link:hover {
        color: var(--color-terciario);
    }

    .footer-accesos__link:hover .footer-accesos__icono {
        background-color: var(--color-primario);
    }
    /* ===== Fila de accesos rapidos del footer - fin ===== */

    /* ===== Organizacion + Informacion del footer =====
       Escritorio: replica exacta de los estilos inline que tenia el bloque (lado a
       lado con space-evenly, mismos margenes y tipografia): alla no cambia nada.
       Celular: el flex con wrap las apilaba y cada una quedaba centrada por su
       cuenta; abajo el media las pasa a dos columnas parejas y alineadas. */
    .footer-secciones {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .footer-seccion {
        padding: 1.5rem 0;
        margin: 0 1rem;
    }
    .footer-seccion__titulo {
        color: var(--color-terciario);
        font-weight: bold;
        font-size: 17px;
    }
    .footer-seccion__lista {
        display: flex;
        flex-direction: column;
        padding-left: 16px; /* el q-pl-md que llevaba el bloque original */
    }

    @media (max-width: 599px) {
        /* Dos columnas 50/50 con gap: titulos a la misma altura (el grid alinea las
           dos celdas arriba) y listas a la IZQUIERDA dentro de su columna. */
        .footer-secciones {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0 16px;
            padding: 0 16px;
        }
        .footer-seccion {
            margin: 0;
            padding: 1.25rem 0 1rem;
        }
        .footer-seccion__titulo {
            margin-bottom: 6px;
        }
        .footer-seccion__lista {
            padding-left: 0;
            font-size: 13px;
            line-height: 1.45;
            text-align: left;
        }
        /* Los textos largos ("Quiero trabajar en la Liga") hacen wrap natural dentro
           de su media columna; la letra no baja de 13px. */
        .footer-seccion__lista > div {
            padding: 2px 0;
        }
        /* Links con zona tactil digna sin apretujarse entre si. */
        .footer-seccion__lista a {
            padding: 6px 0;
        }
    }
    /* ===== Organizacion + Informacion del footer - fin ===== */

    /* ===== Barras fijas del torneo =====
       dev/rediseno-entrada-torneos-divisionales.md

       Un solo sticky para las dos barras (divisionales + pestanas internas), en vez de
       uno por barra. Con dos, el top de la segunda seria "--barra-superior + alto de la
       primera": un numero acoplado que se rompe el dia que la barra de divisionales
       cambie de alto. Envueltas, ese offset lo resuelve el flujo normal.

       El z-index es el nivel "stickies internos" de la escala de capas (ver el bloque
       ESCALA DE CAPAS arriba en este archivo): por encima del contenido que scrollea,
       SIEMPRE por debajo del header. Antes iba en 2000 como el .q-header y, por venir
       despues en el DOM, el empate lo pintaba encima del header al scrollear.

       Por /torneos/{id} adentro hay una sola barra y el contenedor pega igual. */
    #show_torneo .torneo-barras {
        position: -webkit-sticky;
        position: sticky;
        top: var(--barra-superior);
        z-index: 50;
    }

    /* ===== Pestanas de divisional (/torneos-actuales) =====
       dev/rediseno-entrada-torneos-divisionales.md

       Van entre el encabezado azul de la serie y el bloque del torneo. Solo se dibujan
       cuando se entra por /torneos-actuales; por /torneos/{id} no existen. */
    .divisional-tabs {
        /* Misma superficie que .cromo, .pt-card y .sponsors-franja: el velo azul del
           Fixture sobre el degradado navy. No hay color nuevo, son los mismos tokens.
           El velo va con los extremos apagados, igual que en la franja de sponsors: es
           una tira ancha y el halo tiene lugar para nacer y morir contra los bordes. */
        background-image:
            linear-gradient(
                to right,
                transparent 0%,
                rgba(0, 100, 156, .12) 15%,
                rgba(0, 100, 156, .12) 85%,
                transparent 100%
            ),
            linear-gradient(160deg, var(--navy-panel) 0%, var(--navy-fondo) 100%);
        border-bottom: 1px solid rgba(201, 162, 39, .30);
        /* El aire de arriba y abajo no es decorativo: overflow-x recorta tambien en
           vertical, asi que sin ese margen el hover que levanta la pestana y su sombra
           saldrian cortados. */
        padding: .7rem .75rem .65rem;
        /* La fila puede desbordar en series con muchas divisionales (Copas LDR tiene 7):
           scroll horizontal propio en vez de romper el ancho de la pagina. */
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .divisional-tabs__fila {
        display: flex;
        flex-wrap: nowrap;
        /* stretch: todas las pestanas de la fila miden igual de alto aunque una tenga el
           nombre mas largo. */
        align-items: stretch;
        justify-content: flex-start;
        gap: .45rem;
        list-style: none;
        margin: 0;
        padding: 0;
        min-width: min-content;
    }

    .divisional-tabs__item {
        flex: 0 0 auto;
        display: flex;
    }

    /* Cada pestana es una carta de la misma familia que el cromo de la plantilla:
       borde dorado tenue, esquinas redondeadas y relieve por sombra. En reposo va
       apagada -sin fondo propio, deja ver el degradado del riel- y solo la activa se
       enciende. El borde de 1px lo llevan las tres (reposo, hover y activa) para que
       ninguna se mueva un pixel al cambiar de pestana. */
    .divisional-tabs__link {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        padding: .5rem .8rem;
        text-decoration: none;
        color: var(--texto-bajo);
        white-space: nowrap;
        border-radius: 10px;
        border: 1px solid rgba(201, 162, 39, .16);
        background-color: transparent;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease,
                    color .15s ease, background-color .15s ease;
    }

    .divisional-tabs__link:hover {
        transform: translateY(-2px);
        color: var(--texto-alto);
        border-color: rgba(201, 162, 39, .45);
        background-color: var(--navy-hueco);
        box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
    }

    .divisional-tabs__link.is-activa {
        color: var(--texto-alto);
        background-image:
            linear-gradient(
                to right,
                rgba(0, 100, 156, .12) 0%,
                rgba(0, 100, 156, .12) 100%
            ),
            linear-gradient(160deg, var(--navy-panel) 0%, var(--navy-fondo) 100%);
        border-color: rgba(201, 162, 39, .55);
        /* La misma sombra del cromo en hover: negro para el relieve y un halo dorado
           muy bajo para el brillo. */
        box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 14px rgba(232, 198, 90, .18);
    }

    /* Filete dorado macizo sobre el borde superior de la activa. Va en un ::before
       posicionado y no en el border para que no empuje el contenido ni cambie la
       altura de la pestana. */
    .divisional-tabs__link.is-activa::before {
        content: '';
        position: absolute;
        top: 0;
        left: 14%;
        right: 14%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background-color: var(--dorado);
    }

    /* Escudo: dorado apagado en reposo y encendido en la activa. Es el mismo salto de
       la escala de dorados que usa la linea de tiempo de experiencia. */
    .divisional-tabs__icono {
        font-size: .95rem;
        line-height: 1;
        color: var(--dorado-oscuro);
        transition: color .15s ease;
    }

    .divisional-tabs__link:hover .divisional-tabs__icono {
        color: var(--dorado);
    }

    .divisional-tabs__link.is-activa .divisional-tabs__icono {
        color: var(--dorado-claro);
    }

    .divisional-tabs__texto {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .22rem;
    }

    .divisional-tabs__nombre {
        font-size: .82rem;
        font-weight: bold;
        line-height: 1.15;
        letter-spacing: .01em;
        /* Hereda el color del link para que reposo, hover y activa cambien juntos. */
        color: inherit;
    }

    /* Chip de estado. Neutro por defecto (torneo terminado) y encendido cuando esta en
       juego, que es la unica lectura que importa de un vistazo. */
    .divisional-tabs__chip {
        font-size: .62rem;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: .18rem .45rem;
        border-radius: 999px;
        color: var(--texto-bajo);
        background-color: rgba(160, 170, 180, .12);
        border: 1px solid var(--borde-neutro);
    }

    .divisional-tabs__chip.is-en-juego {
        background-color: rgba(46, 160, 90, .20);
        border-color: rgba(46, 160, 90, .55);
        color: #7ee0a4;
    }

    /* En celular el riel es lo primero que se ve: se le baja el acolchado para que no
       se coma la altura util, y el scroll horizontal sigue haciendo su trabajo. */
    @media (max-width: 480px) {
        .divisional-tabs {
            padding: .6rem .5rem .55rem;
        }

        .divisional-tabs__link {
            padding: .45rem .65rem;
            gap: .4rem;
        }
    }
    /* ===== Pestanas de divisional - fin ===== */

    /* ===== Linea del torneo =====
       dev/rediseno-entrada-torneos-divisionales.md

       Reemplaza la copa grande del encabezado. Va entre las pestanas internas de
       show_torneo y la tabla, y se dibuja igual por los dos caminos que llegan a esa
       vista: /torneos-actuales (sin divisional, ya esta en la pestana de arriba) y
       /torneos/{id} desde Torneos Anteriores (con divisional). */
    #show_torneo .torneo-linea {
        display: flex;
        flex-wrap: wrap;
        /* baseline y no center: el nombre, el dia y el chip tienen tamanos distintos y
           lo que los alinea a la vista es el renglon del texto, no la caja. */
        align-items: baseline;
        /* flex-start y no space-between: el chip va PEGADO al dia, en la misma fila, no
           empujado contra el borde derecho. */
        justify-content: flex-start;
        gap: .35rem .5rem;
        padding: .5rem .75rem;
        /* Tinte de Azul Centenario sobre el Azul Profundo del fondo, no
           --color-secundario: esa variable sigue siendo el gris #292a2e (la paleta de
           marca del front solo pisa primario, terciario y texto-1), y un gris aca
           cortaria en dos una pantalla que es toda azul. Mismo tinte que usa la
           pestana de divisional activa. */
        background-color: rgba(0, 100, 156, .14);
        /* Filete de acento: separa la linea de la tabla de abajo. Arriba no hace falta,
           la barra de pestanas ya corta sola. */
        border-bottom: 2px solid var(--color-terciario);
    }

    #show_torneo .torneo-linea__nombre {
        font-size: 1rem;
        font-weight: bold;
        line-height: 1.2;
        color: var(--color-texto-1);
    }

    /* Dia y divisional: mismo renglon que el nombre pero un escalon abajo en jerarquia. */
    #show_torneo .torneo-linea__dato {
        font-size: .8rem;
        line-height: 1.2;
        color: var(--color-texto-1);
        opacity: .75;
    }

    #show_torneo .torneo-linea__sep {
        font-size: .8rem;
        line-height: 1.2;
        color: var(--color-texto-1);
        opacity: .45;
    }

    /* Chip de estado. Solo se dibuja por /torneos/{id} (Torneos Anteriores), que es el
       camino sin pestanas: entrando por /torneos-actuales el estado ya esta en la pestana
       activa. Mismos valores que el chip de las pestanas, para que "En juego" se lea igual
       en los dos lugares. */
    #show_torneo .torneo-linea__chip {
        flex: 0 0 auto;
        font-size: .65rem;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: .25rem .55rem;
        border-radius: 999px;
        color: var(--texto-bajo);
        background-color: rgba(160, 170, 180, .12);
        border: 1px solid var(--borde-neutro);
    }

    #show_torneo .torneo-linea__chip.is-en-juego {
        background-color: rgba(46, 160, 90, .20);
        border-color: rgba(46, 160, 90, .55);
        color: #7ee0a4;
    }
    /* ===== Linea del torneo - fin ===== */

    /* ===== Grilla de equipos del torneo (pestaña Posiciones) =====
       dev/rediseno-seccion-equipos-torneo.md

       Flex con wrap y no grid, por la misma razon que .plantel-grilla (los cromos): cuando
       la ultima fila queda incompleta sus items tienen que quedar centrados, y con grid no
       se puede recentrar la ultima linea. El precio es que hay que decirle cuantas columnas
       entran, y eso lo resuelve --eq-cols, que calcula el Blade a partir del total real de
       equipos del torneo (de 2 a 24 segun el torneo, lo mas comun 7 u 8). */
    #show_torneo .eq-grilla {
        --eq-gap: .5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: var(--eq-gap);
        width: 100%;
    }

    #show_torneo .eq-grilla__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Ancho de columna fijo por calculo, sin crecer ni encoger: si los items crecieran,
           la ultima fila incompleta estiraria los suyos y quedarian mas anchos que los de
           arriba. Es el mismo flex-basis que usa .cromo. */
        flex: 0 0 calc((100% - (var(--eq-cols) - 1) * var(--eq-gap)) / var(--eq-cols));
        /* El proyecto no tiene box-sizing global: sin esto el padding se sumaria al ancho
           calculado y entraria un item menos por fila. */
        box-sizing: border-box;
        padding: .35rem .15rem;
        text-decoration: none;
        border-radius: 10px;
        border: 1px solid transparent;
        transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
    }

    #show_torneo .eq-grilla__item:hover {
        transform: translateY(-2px);
        border-color: rgba(201, 162, 39, .45);
        background-color: var(--navy-hueco);
    }

    /* Reduce el disco global (90px) al tamaño de esta grilla, igual que hace .pt-lado__disco
       en la pestaña Partidos. El escudo ocupa el 89% del disco, la misma proporcion que
       alla: el disco esta para despegar del fondo a los escudos oscuros, no para rodearlos
       de aire. */
    #show_torneo .eq-grilla__disco {
        width: 56px;
        height: 56px;
        margin-bottom: .3rem;
        flex-shrink: 0;
    }

    #show_torneo .eq-grilla__disco .escudo-disco-img {
        width: 50px;
        height: 50px;
    }

    /* Sigla de 3 caracteres (equipos.nombre_abreviado). Al ser de ancho fijo no hace falta
       recortar nada: todas las columnas miden lo mismo y los escudos quedan alineados sin
       ayuda. El nombre completo obligaba a reservar dos renglones y desalineaba la fila. */
    #show_torneo .eq-grilla__sigla {
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: .04em;
        text-align: center;
        color: var(--texto-alto);
    }

    @media (max-width: 599px) {
        /* En celular manda la otra cuenta de columnas: con 10 equipos son 2 filas de 5 y no
           una sola fila de escudos diminutos. */
        #show_torneo .eq-grilla__item {
            flex-basis: calc((100% - (var(--eq-cols-mini) - 1) * var(--eq-gap)) / var(--eq-cols-mini));
            padding: .3rem .1rem;
        }

        #show_torneo .eq-grilla__disco {
            width: 44px;
            height: 44px;
            margin-bottom: .25rem;
        }

        #show_torneo .eq-grilla__disco .escudo-disco-img {
            width: 39px;
            height: 39px;
        }

        #show_torneo .eq-grilla__sigla {
            font-size: 11px;
        }
    }
    /* ===== Grilla de equipos del torneo - fin ===== */

    /* ===== Sub-pestanas con colores de marca (Goleadores / Imbatibles) =====
       Vivian dentro de show_torneo_tabs/lideres.blade.php. Se subieron aca porque el Inicio
       usa el mismo selector en celular y las dos pantallas tienen que verse igual. */
    .lideres-subtabs {
        background-color: #0A2233;
        border-radius: 8px;
    }
    .lideres-subtabs .q-tab { color: #7FB2D4; }                       /* inactivo: celeste */
    .lideres-subtabs .q-tab--active { color: #C9A227; }               /* activo: dorado */
    .lideres-subtabs .q-tab__indicator { background-color: #C9A227; } /* subrayado dorado */
    /* ===== Sub-pestanas con colores de marca - fin ===== */

    /* ===== Pop-up "agregar a inicio" (PWA) =====
       Card del q-dialog de web/partials/pwa_install.blade.php (incluido en el layout
       publico y en seleccionar_serie; este archivo cubre los dos heads de una vez).
       Card navy de marca con boton de accion en Azul Electrico. */
    .ldr-pwa-card {
        background-color: var(--navy-card);
        color: var(--texto-alto);
        border: 1px solid var(--borde-neutro);
        border-radius: 12px;
        width: 90vw;
        max-width: 340px;
    }
    .ldr-pwa-logo {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }
    .ldr-pwa-subtitulo { color: var(--texto-medio); }
    .ldr-pwa-icono-paso { color: var(--texto-medio); }
    /* Boton de accion en Azul Electrico. El color literal (y no una var) sigue la regla
       general de botones de accion de este archivo, que tambien usa #007BB0 literal. */
    .ldr-pwa-boton {
        background-color: #007BB0 !important;
        color: #FFFFFF !important;
        border-radius: 8px;
    }
    .ldr-pwa-ahora-no { color: var(--texto-bajo); }

    /* ===== Pop-up "agregar a inicio" (PWA) - fin ===== */

/* ===== Íconos sueltos pasados a SVG (S1-126, public/quasar/js/iconos-web.js) =====
   El <i class="material-icons"> o <i class="fab fa-x"> queda con sus clases (el CSS de cada página le sigue
   llegando) y adentro va el <svg>, del mismo tamaño que el glifo: 1em de alto (y en las marcas, su ancho). */
.ldr-icono-svg__svg {
    display: block;
    width: 1em;
    height: 1em;
}
.ldr-icono-svg.fab::before {
    content: none !important;
}
/* El glifo de Font Awesome baja 1/8 de em de la línea de base (descent 64 de 512): el svg en bloque no. */
.ldr-icono-svg--marca {
    vertical-align: -0.125em;
}