/* ==========================================================================
   GO-LATIN 2.0 · shell.css
   Shell del ecosistema FC con el Design System: menú superior, ticker de partidos,
   menú flotante inferior (barra, submenús y hoja "Más").

   Aislamiento: TODOS los selectores empiezan con [data-gl="fc"]. LoginDisplay se
   comparte con F1, pero en F1 el contenedor .page no tiene data-gl → F1 queda igual.
   Los selectores con atributo ganan en especificidad a los <style> de cada componente,
   así no hace falta modificar su CSS original (rollback = quitar este archivo).
   ========================================================================== */

/* ==========================================================================
   1. MENÚ SUPERIOR
   ========================================================================== */
[data-gl="fc"] .user-nav-bar {
    height: 64px;
    background: transparent;
    border-bottom: 0;
    box-shadow: var(--gl-shell-shadow);
}

/* El vidrio va en la capa de fondo (.user-nav-fx) y no en la barra: si la barra tuviera
   backdrop-filter, el submenú del usuario que sobresale se vería transparente. */
[data-gl="fc"] .user-nav-fx {
    background:
        linear-gradient(180deg, var(--gl-surface-reflection-soft), transparent),
        var(--gl-shell-background);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Línea inferior luminosa (cian → magenta), en lugar del borde plano */
[data-gl="fc"] .user-nav-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gl-cyan-rgb), 0.55) 20%, rgba(var(--gl-magenta-rgb), 0.45) 80%, transparent);
    pointer-events: none;
}

/* Menos ruido visual: se quitan las líneas glitch animadas del fondo */
[data-gl="fc"] .user-nav-fx::before,
[data-gl="fc"] .user-nav-fx::after {
    display: none;
}

[data-gl="fc"] .brand-logo {
    height: clamp(48px, 5vw, 60px);
    filter: drop-shadow(0 0 10px rgba(var(--gl-cyan-rgb), 0.3));
}

[data-gl="fc"] .nav-divider {
    background: linear-gradient(180deg, transparent, var(--gl-border-strong), transparent);
    box-shadow: none;
}

[data-gl="fc"] .social-icon-link {
    border-radius: var(--gl-radius-md);
}

[data-gl="fc"] .social-icon-link:hover,
[data-gl="fc"] .social-icon-link:focus-visible {
    background-color: var(--gl-surface-reflection);
    border-color: var(--gl-border);
}

[data-gl="fc"] .social-icon-link i {
    color: var(--gl-text-secondary);
    filter: none;
}

[data-gl="fc"] .social-title {
    color: var(--gl-text);
    font-size: var(--gl-text-xs);
    text-shadow: none;
}

[data-gl="fc"] .social-handle {
    color: var(--gl-text-dim);
}

/* Botón del usuario: píldora de vidrio */
[data-gl="fc"] .user-menu-trigger {
    border-color: var(--gl-border-strong);
    background: var(--gl-surface-reflection-soft);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

[data-gl="fc"] .user-menu-trigger:hover,
[data-gl="fc"] .user-menu-trigger.is-open {
    border-color: var(--gl-border-accent);
    background: rgba(var(--gl-cyan-rgb), 0.08);
    box-shadow: var(--gl-glow-cyan);
}

[data-gl="fc"] .user-greeting small {
    color: var(--gl-text-muted);
}

[data-gl="fc"] .user-chevron {
    color: var(--gl-text-muted);
}

/* Submenú del usuario = dropdown de vidrio del sistema */
[data-gl="fc"] .user-dropdown {
    border: 1px solid var(--glass-border-glow);
    border-radius: var(--gl-radius-lg);
    background:
        radial-gradient(14rem 8rem at 100% 0, rgba(var(--gl-magenta-rgb), 0.12), transparent 70%),
        var(--glass-background-solid);
    box-shadow: var(--gl-shadow-lg), var(--gl-glow-cyan);
}

[data-gl="fc"] .user-dropdown-item {
    border-radius: var(--gl-radius-sm);
    color: var(--gl-text-secondary);
    font-size: var(--gl-text-sm);
}

[data-gl="fc"] .user-dropdown-item:hover,
[data-gl="fc"] .user-dropdown-item:focus-visible {
    background: rgba(var(--gl-cyan-rgb), 0.08);
    color: var(--gl-text);
}

/* Cerrar sesión: acción secundaria, discreta */
[data-gl="fc"] .logout-link {
    border-color: var(--gl-border-strong);
    color: var(--gl-text-secondary);
    font-size: var(--gl-text-xs);
}

[data-gl="fc"] .logout-link i {
    color: var(--gl-danger);
}

[data-gl="fc"] .logout-link:hover {
    border-color: rgba(var(--gl-danger-rgb), 0.6);
    background: rgba(var(--gl-danger-rgb), 0.1);
    box-shadow: none;
    color: #fff;
}

/* ==========================================================================
   2. TICKER DE PARTIDOS (estilo live center)
   ========================================================================== */
[data-gl="fc"] .ticker-bar {
    min-height: 46px;
    border-bottom: 0;
    background:
        linear-gradient(180deg, var(--gl-ticker-scrim), transparent),
        var(--gl-ticker-background);
    box-shadow: var(--gl-ticker-shadow);
}

[data-gl="fc"] .ticker-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gl-border);
    pointer-events: none;
}

[data-gl="fc"] .ticker-controls {
    gap: var(--gl-space-2);
    padding: 0 var(--gl-space-3);
    border-right: 1px solid var(--gl-border);
    background: linear-gradient(90deg, rgba(var(--gl-cyan-rgb), 0.07), transparent);
    box-shadow: none;
}

/* Con el DS el icono viejo se reemplaza por la etiqueta "Marcadores" */
[data-gl="fc"] .ticker-legacy-icon {
    display: none !important;
}

[data-gl="fc"] .ticker-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gl-text);
    font-size: var(--gl-text-xs);
    font-weight: var(--gl-weight-heavy);
    letter-spacing: var(--gl-tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

[data-gl="fc"] .ticker-label i {
    color: var(--gl-cyan);
}

/* Filtros del ticker como selects de vidrio */
[data-gl="fc"] .ticker-select {
    min-height: 32px;
    max-width: 160px;
    padding: 0.2rem 1.8rem 0.2rem 0.65rem;
    border: 1px solid var(--gl-border-strong);
    border-radius: var(--gl-radius-sm);
    background-color: var(--gl-surface-reflection-soft);
    color: var(--gl-text);
    font-family: var(--gl-font-body);
    font-size: var(--gl-text-xs);
    font-weight: var(--gl-weight-bold);
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: none;
    transition: border-color var(--gl-duration-base) ease, background-color var(--gl-duration-base) ease;
}

[data-gl="fc"] .ticker-select:hover,
[data-gl="fc"] .ticker-select:focus {
    border-color: var(--gl-border-accent);
    background-color: rgba(var(--gl-cyan-rgb), 0.08);
    box-shadow: none;
}

[data-gl="fc"] .ticker-select option {
    background: var(--gl-bg-secondary);
    color: var(--gl-text);
}

/* Desvanecido en ambos lados: el marcador entra y sale suave */
[data-gl="fc"] .ticker-wrap {
    padding: 0.3rem 0;
    mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 94%, transparent 100%);
}

[data-gl="fc"] .ticker-empty {
    display: flex;
    min-height: 38px;
    align-items: center;
    padding-inline: 1rem;
    color: var(--gl-text-secondary);
    font-size: var(--gl-text-xs);
    letter-spacing: 0.02em;
}

[data-gl="fc"] .ticker-empty strong {
    margin-left: 0.25rem;
    color: var(--gl-text);
    font-weight: var(--gl-weight-heavy);
}

[data-gl="fc"] .ticker-match {
    gap: 0.6rem;
    margin: 0 0.25rem;
    padding: 0.25rem 1rem;
    border: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: var(--gl-radius-pill);
    transition: background-color var(--gl-duration-fast) ease, border-color var(--gl-duration-fast) ease;
}

[data-gl="fc"] .ticker-match:hover {
    border-color: var(--gl-border);
    background-color: var(--gl-surface-reflection-soft);
}

[data-gl="fc"] .ticker-team {
    gap: 0.4rem;
    color: var(--gl-text);
    font-size: var(--gl-text-xs);
    font-weight: var(--gl-weight-heavy);
}

[data-gl="fc"] .ticker-logo {
    width: 22px;
    height: 22px;
    filter: none;
}

[data-gl="fc"] .ticker-score,
[data-gl="fc"] .ticker-vs {
    min-width: 50px;
    padding: 0.15rem 0.5rem;
    border-radius: var(--gl-radius-xs);
    font-family: var(--gl-font-stats);
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: none;
}

[data-gl="fc"] .ticker-score {
    border: 1px solid var(--gl-border-accent);
    background: var(--gl-bg-inset);
    color: #fff;
    font-size: var(--gl-text-md);
}

[data-gl="fc"] .ticker-vs {
    border: 1px solid rgba(var(--gl-yellow-rgb), 0.35);
    background: rgba(var(--gl-yellow-rgb), 0.08);
    color: var(--gl-yellow);
    font-size: var(--gl-text-xs);
}

[data-gl="fc"] .ticker-phase {
    margin-left: 0.2rem;
    color: var(--gl-text-muted);
    font-size: 0.58rem;
}

/* ==========================================================================
   3. MENÚ FLOTANTE INFERIOR (barra, submenús y hoja "Más")
   ========================================================================== */
[data-gl="fc"] .fc-bar {
    border-color: var(--glass-border);
    border-radius: var(--gl-radius-xl);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 30px rgba(var(--gl-cyan-rgb), 0.1);
}

[data-gl="fc"] .fc-bar::before {
    background:
        linear-gradient(180deg, var(--gl-surface-reflection), transparent 60%),
        var(--glass-background-strong);
}

[data-gl="fc"] .fc-bottom-link {
    color: var(--gl-text-muted);
    border-radius: var(--gl-radius-md);
}

[data-gl="fc"] .fc-bottom-link:hover,
[data-gl="fc"] .fc-bottom-link.is-open {
    color: var(--gl-text);
    background-color: var(--gl-surface-reflection);
}

/* Liga, Galaxy y Bolt colorean el texto de enlaces por tema aunque no estén activos. */
[data-gl="fc"] .fc-bottom-link:not(.active):not(:hover):not(.is-open):has(> i.bi-people-fill),
[data-gl="fc"] .fc-bottom-link:not(.active):not(:hover):not(.is-open):has(> i.bi-twitch) {
    color: var(--gl-text-muted) !important;
}
/* Los temas pueden dar glow al enlace activo; iconos inactivos heredan el tono normal. */
[data-gl="fc"] .fc-bottom-link:not(.active) i {
    color: inherit;
    filter: none;
    text-shadow: none;
}

/* Mantener neutros los iconos de Jugadores y En vivo en temas con reglas de icono globales. */
[data-gl="fc"] .fc-bottom-link:not(.active) > i.bi-people-fill,
[data-gl="fc"] .fc-bottom-link:not(.active) > i.bi-twitch {
    color: var(--gl-text-muted) !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Activo: píldora de vidrio + indicador inferior */
[data-gl="fc"] .fc-bottom-link.active {
    color: var(--gl-cyan);
    background: linear-gradient(180deg, rgba(var(--gl-cyan-rgb), 0.12), rgba(var(--gl-cyan-rgb), 0.02));
    text-shadow: 0 0 10px rgba(var(--gl-cyan-rgb), 0.45);
}

[data-gl="fc"] .fc-bottom-link.active::after {
    width: 22px;
    background: linear-gradient(90deg, var(--gl-cyan), var(--gl-magenta));
}

[data-gl="fc"] .fc-bar-item.is-home .fc-bottom-link.active {
    background: transparent;
}

/* Submenús de la barra y hoja "Más" */
[data-gl="fc"] .fc-popover {
    border-color: var(--glass-border-glow);
    border-radius: var(--gl-radius-lg);
    background:
        radial-gradient(14rem 8rem at 0 0, rgba(var(--gl-magenta-rgb), 0.12), transparent 70%),
        var(--glass-background-solid);
    box-shadow: var(--gl-shadow-lg), var(--gl-glow-cyan);
}

[data-gl="fc"] .fc-popover-title {
    color: var(--gl-text-muted);
    letter-spacing: var(--gl-tracking-kicker);
}

[data-gl="fc"] .fc-menu-row {
    border-radius: var(--gl-radius-sm);
    color: var(--gl-text-secondary);
}

[data-gl="fc"] .fc-menu-row:hover {
    background-color: var(--gl-surface-reflection);
    color: var(--gl-text);
}

[data-gl="fc"] .fc-menu-row.active {
    border-left-color: var(--gl-cyan);
    background: linear-gradient(90deg, rgba(var(--gl-cyan-rgb), 0.14), transparent);
    color: var(--gl-text);
}

/* Opción con acceso cerrado temporalmente (p. ej. Plantilla Mundial) */
[data-gl="fc"] .fc-menu-row.is-locked {
    cursor: not-allowed;
    opacity: 0.6;
}

[data-gl="fc"] .fc-menu-row.is-locked:hover {
    background-color: transparent;
    color: var(--gl-text-secondary);
}

[data-gl="fc"] .fc-menu-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--gl-border-strong);
    border-radius: var(--gl-radius-pill);
    color: var(--gl-text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

[data-gl="fc"] .fc-menu-children {
    border-left-color: var(--gl-border-strong);
}

[data-gl="fc"] .fc-sheet {
    border-color: var(--glass-border-glow);
    background:
        radial-gradient(28rem 14rem at 0 0, rgba(var(--gl-magenta-rgb), 0.12), transparent 70%),
        radial-gradient(26rem 14rem at 100% 0, rgba(var(--gl-cyan-rgb), 0.1), transparent 70%),
        var(--glass-background-solid);
    box-shadow: var(--gl-sheet-shadow);
}

/* Menos ruido: sin scanlines en la hoja */
[data-gl="fc"] .fc-sheet::before {
    display: none;
}

[data-gl="fc"] .fc-sheet-header {
    border-bottom-color: var(--gl-border);
}

[data-gl="fc"] .fc-sheet-close {
    border-color: var(--gl-border-strong);
    border-radius: var(--gl-radius-md);
}

[data-gl="fc"] .fc-sheet-backdrop {
    background: rgba(2, 4, 8, 0.65);
}

/* ==========================================================================
   4. RESPONSIVO
   ========================================================================== */
@media (max-width: 768px) {
    [data-gl="fc"] .user-nav-bar {
        height: auto;
        min-height: 56px;
    }

    /* Ticker estilo app: filtros arriba (mitad y mitad) y marcadores abajo */
    [data-gl="fc"] .ticker-bar {
        flex-direction: column;
    }

    [data-gl="fc"] .ticker-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: var(--gl-space-2) var(--gl-space-3);
        border-right: 0;
        border-bottom: 1px solid var(--gl-border);
    }

    [data-gl="fc"] .ticker-label {
        display: none;
    }

    [data-gl="fc"] .ticker-select {
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    [data-gl="fc"] .ticker-label span {
        display: none;
    }
}

/* ---------- Encabezado más ligero en celular (solo FC) ----------
   Antes ocupaba 169 px fijos (barra de usuario 58 + ticker 111, con los filtros apilados) más la barra inferior:
   casi 30 % de la pantalla. Ahora los filtros del ticker se ocultan y el encabezado se desplaza con la página
   (la navegación sigue siempre visible en la barra inferior). */
@media (max-width: 640px) {
    [data-gl="fc"] main .top-row {
        position: relative;
        top: auto;
    }

    [data-gl="fc"] .ticker-controls {
        display: none;
    }
}

/* Ajuste responsivo del logo del encabezado FC */
@media (max-width: 768px) {
    [data-gl="fc"] .brand-logo {
        height: 46px;
    }
}
@media (max-width: 420px) {
    [data-gl="fc"] .brand-logo {
        height: 42px;
    }
}

/* Escala compartida de capas: no asignar valores aislados al shell. */
[data-gl="fc"] .user-nav-bar, [data-gl="fc"] .ticker-bar,
[data-gl="fc"] .fc-bottom-nav { z-index: var(--gx-z-fixed-menu); }
/* Eleva el contexto completo del encabezado mientras uno de sus paneles está abierto. */
[data-gl="fc"] .user-nav-bar:has(.user-dropdown),
[data-gl="fc"] .user-nav-bar:has(.gl-notification__panel) { z-index: var(--gx-z-floating-panel); }
[data-gl="fc"] .user-dropdown { z-index: var(--gx-z-floating-panel); }


[data-gl="fc"] .ticker-phase-name { color:var(--gl-text); }
[data-gl="fc"] .ticker-phase-name.is-elite { color:var(--gl-cyan); }

@media(max-width:560px){