/* ==========================================================================================
   TORRIJA LEAGUE - CENTRAL DESIGN SYSTEM
   Athletic Editorial Dark Pro Architecture
   Inspired by & unified with the Home Menu visual standard
   ========================================================================================== */

/* ------------------------------------------------------------------------------------------
   1. TOKENS MAESTROS DEL SISTEMA (:root)
   ------------------------------------------------------------------------------------------ */
:root {
    /* Superficies y Fondos Base (OLED Black Canvas) */
    --tl-bg-base: #0A0A0C;
    --tl-bg-surface: #141416;
    --tl-bg-surface-elevated: #18181B;
    --tl-bg-surface-high: #202024;
    --tl-bg-glass: rgba(10, 10, 12, 0.94);
    --tl-bg-card-hover: #1C1C20;

    /* Bordes y Separadores Hairline */
    --tl-border-subtle: rgba(255, 255, 255, 0.08);
    --tl-border-medium: rgba(255, 255, 255, 0.14);
    --tl-border-bright: rgba(255, 255, 255, 0.28);
    --tl-border-neon: rgba(204, 255, 0, 0.40);

    /* Acentos Deportivos y Marca */
    --tl-neon-volt: #CCFF00;
    --tl-neon-glow: rgba(204, 255, 0, 0.35);
    --tl-color-win: #10B981;
    --tl-color-win-pen: #059669;
    --tl-color-loss: #EF4444;
    --tl-color-draw: #4B5563;
    --tl-color-neutral: #9CA3AF;

    /* Jerarquía Tipográfica de Color */
    --tl-text-primary: #FFFFFF;
    --tl-text-secondary: #9CA3AF;
    --tl-text-muted: #6B7280;
    --tl-text-dim: rgba(255, 255, 255, 0.38);

    /* Familias Tipográficas */
    --tl-font-headline: 'Moderniz', 'Anton', sans-serif;
    --tl-font-scoreboard: 'Barge-Black', 'Anton', sans-serif;
    --tl-font-football: 'Coolvetica', sans-serif;
    --tl-font-tech: 'Space Grotesk', -apple-system, sans-serif;
    --tl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Radios de Curvatura */
    --tl-radius-badge: 4px;
    --tl-radius-card: 8px;
    --tl-radius-thumb: 10px;
    --tl-radius-pill: 20px;
    --tl-radius-full: 9999px;

    /* Sombras y Luces */
    --tl-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.60);
    --tl-shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.75);
    --tl-shadow-neon: 0 0 14px rgba(204, 255, 0, 0.35);

    /* Sobreescritura limpia de variables heredadas para que nada vuelva al blanco */
    --neon: #CCFF00 !important;
    --bg: #0A0A0C !important;
    --card: #141416 !important;
    --pill-bg: #18181B !important;
    --text: #FFFFFF !important;
    --text-dim: #9CA3AF !important;
    --border: rgba(255, 255, 255, 0.08) !important;
    --profile-bg: #0A0A0C !important;
}

/* ------------------------------------------------------------------------------------------
   2. LIENZO Y ESTRUCTURA GLOBAL
   ------------------------------------------------------------------------------------------ */
body {
    background-color: var(--tl-bg-base) !important;
    color: var(--tl-text-primary) !important;
    font-family: var(--tl-font-body) !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

#app-container {
    background-color: var(--tl-bg-base) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    position: relative !important;
}

.pantalla {
    background-color: var(--tl-bg-base) !important;
    color: var(--tl-text-primary) !important;
    padding-bottom: 72px !important;
    min-height: 100vh;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------
   3. PERFILADO NÍTIDO Y UNIFICADO DE ESCUDOS (1.5px White Drop-Shadow Contour)
   ------------------------------------------------------------------------------------------ */
.tl-crest,
.pcv2-escudo,
.escudo-tabla,
.team-card-crest,
.of-team-escudo,
.escudo-overlap-img {
    filter: 
        drop-shadow(1.5px 0 0 #FFFFFF) 
        drop-shadow(-1.5px 0 0 #FFFFFF) 
        drop-shadow(0 1.5px 0 #FFFFFF) 
        drop-shadow(0 -1.5px 0 #FFFFFF) 
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65)) !important;
    object-fit: contain !important;
    background: transparent !important;
}

.basic-team-crest {
    filter: 
        drop-shadow(0.75px 0 0 #FFFFFF) 
        drop-shadow(-0.75px 0 0 #FFFFFF) 
        drop-shadow(0 0.75px 0 #FFFFFF) 
        drop-shadow(0 -0.75px 0 #FFFFFF) 
        drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)) !important;
    object-fit: contain !important;
    background: transparent !important;
}

/* ------------------------------------------------------------------------------------------
   4. COMPONENTES MAESTROS REUTILIZABLES
   ------------------------------------------------------------------------------------------ */
/* Tarjeta estándar atlética */
.tl-card {
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: var(--tl-radius-card) !important;
    padding: 14px !important;
    margin: 8px 12px 12px 12px !important;
    box-sizing: border-box !important;
    box-shadow: var(--tl-shadow-card) !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
}

.tl-card:active {
    transform: scale(0.985) !important;
}

/* Botón Primario Píldora (Blanco puro, alto contraste Nike) */
.tl-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 9px 18px !important;
    border-radius: var(--tl-radius-pill) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}

.tl-btn-primary:active {
    transform: scale(0.97) !important;
}

/* Botón Secundario Neón (Píldora oscura con borde y texto Neón Volt) */
.tl-btn-neon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: var(--tl-bg-surface) !important;
    color: var(--tl-neon-volt) !important;
    border: 1px solid rgba(204, 255, 0, 0.35) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 7px 15px !important;
    border-radius: var(--tl-radius-pill) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tl-btn-neon:hover {
    background: var(--tl-neon-volt) !important;
    color: #000000 !important;
    border-color: var(--tl-neon-volt) !important;
    box-shadow: var(--tl-shadow-neon) !important;
    transform: translateY(-1px) !important;
}

.tl-btn-neon:active {
    transform: scale(0.97) !important;
}

/* Botón Píldora Oscuro Sutil */
.tl-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--tl-bg-surface) !important;
    color: var(--tl-text-primary) !important;
    border: 1px solid var(--tl-border-medium) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: var(--tl-radius-pill) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tl-btn-secondary:hover {
    background: var(--tl-bg-surface-elevated) !important;
    border-color: var(--tl-border-bright) !important;
}

.tl-btn-secondary:active {
    transform: scale(0.97) !important;
}

/* Headers de sección y kickers */
.tl-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 14px 10px 14px !important;
}

.tl-section-title {
    font-family: var(--tl-font-headline) !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.tl-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--tl-text-secondary) !important;
}

.tl-dot-neon {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--tl-neon-volt) !important;
    box-shadow: 0 0 8px rgba(204, 255, 0, 0.7) !important;
    flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------------------------------
   5. UNIFICACIÓN: TEMPORADA ACTUAL / LEAGUE (#winter25)
   ------------------------------------------------------------------------------------------ */
#winter25 {
    background: var(--tl-bg-base) !important;
}

/* Barra superior de temporada */
.league-season-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 14px 10px 14px !important;
    background: transparent !important;
}

.league-season-badge {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--tl-text-muted) !important;
    margin-bottom: 2px !important;
}

.league-season-name {
    font-family: var(--tl-font-headline) !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.league-editions-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    color: var(--tl-text-secondary) !important;
    padding: 6px 12px !important;
    border-radius: var(--tl-radius-pill) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.league-editions-pill:hover {
    background: var(--tl-bg-surface-elevated) !important;
    border-color: var(--tl-border-medium) !important;
    color: #FFFFFF !important;
}

.league-editions-pill:active {
    transform: scale(0.96) !important;
}

/* Submenú segmentado de 3 pestañas: PARTIDOS / CLASIFICACIÓN / ESTADÍSTICAS */
.sub-menu-container {
    padding: 6px 12px 14px 12px !important;
}

.sub-menu {
    display: flex !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: 24px !important;
    padding: 4px !important;
    gap: 4px !important;
}

.btn-sub {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 20px !important;
    color: var(--tl-text-secondary) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
}

.btn-sub.active {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.btn-sub:not(.active):hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Carrusel de Fechas / Rondas */
.rondas-wrapper {
    padding: 0 12px 14px 12px !important;
}

.scroll-horizontal {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 2px 0 !important;
}

.scroll-horizontal::-webkit-scrollbar {
    display: none !important;
}

.btn-ronda {
    flex-shrink: 0 !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: 20px !important;
    color: var(--tl-text-secondary) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-ronda.active {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.02) !important;
}

.btn-ronda:not(.active):hover {
    border-color: var(--tl-border-medium) !important;
    color: #FFFFFF !important;
}

/* Tarjetas de Partido en Winter (.partido-card-v2) */
.partido-card-v2 {
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: var(--tl-radius-card) !important;
    margin: 0 12px 10px 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
    box-shadow: var(--tl-shadow-card) !important;
}

.partido-card-v2:hover {
    border-color: var(--tl-border-medium) !important;
}

.partido-card-v2:active {
    transform: scale(0.985) !important;
}

.pcv2-teams {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.pcv2-team-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.pcv2-escudo {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    flex-shrink: 0 !important;
}

.pcv2-nombre {
    font-family: var(--tl-font-football) !important;
    font-size: 0.96rem !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    letter-spacing: 0.02em !important;
}

.pcv2-gol {
    font-family: var(--tl-font-scoreboard) !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    min-width: 20px !important;
    text-align: right !important;
}

.pcv2-gol.ai-gol {
    color: var(--tl-color-loss) !important;
}

.pcv2-estado-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

/* Badges de estado de partido */
.estado-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    border-radius: var(--tl-radius-pill) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

.estado-final {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--tl-text-secondary) !important;
    border: 1px solid var(--tl-border-subtle) !important;
}

.estado-directo {
    background: rgba(204, 255, 0, 0.12) !important;
    color: var(--tl-neon-volt) !important;
    border: 1px solid rgba(204, 255, 0, 0.4) !important;
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.25) !important;
}

.estado-hora {
    background: var(--tl-bg-surface-elevated) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--tl-border-subtle) !important;
}

.estado-confirmar {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #F59E0B !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Partido especial: Descanso / BYE */
.partido-card-v2.bye-partido {
    opacity: 0.65 !important;
    background: var(--tl-bg-surface) !important;
    border-left: 3px solid var(--tl-border-medium) !important;
}

.bye-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.70rem !important;
    color: var(--tl-text-muted) !important;
    font-family: var(--tl-font-tech) !important;
}

/* Día de descanso completo */
.descanso-block {
    padding: 0 12px !important;
}

.descanso-card {
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: var(--tl-radius-card) !important;
    padding: 24px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
}

.descanso-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--tl-bg-surface-elevated) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tl-text-secondary) !important;
    font-size: 1.1rem !important;
    margin-bottom: 4px !important;
}

.descanso-titulo {
    font-family: var(--tl-font-body) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.descanso-fecha {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.75rem !important;
    color: var(--tl-text-muted) !important;
}

/* ------------------------------------------------------------------------------------------
   6. TABLA DE CLASIFICACIÓN ATHLETIC PRO
   ------------------------------------------------------------------------------------------ */
.clas-subnav {
    display: flex !important;
    gap: 6px !important;
    padding: 0 12px 10px 12px !important;
}

.btn-clas-sub {
    flex: 1 !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: 20px !important;
    color: var(--tl-text-secondary) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 7px 10px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

.btn-clas-sub.active {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #FFFFFF !important;
    font-weight: 800 !important;
}

.btn-expand-details {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: 20px !important;
    color: var(--tl-neon-volt) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-expand-details:hover {
    border-color: var(--tl-neon-volt) !important;
}

.grupo-wrapper {
    margin-bottom: 16px !important;
}

.grupo-wrapper h3 {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    color: var(--tl-neon-volt) !important;
    margin: 8px 14px 6px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.grupo-wrapper h3::before {
    content: "●";
    font-size: 0.6rem;
    color: var(--tl-neon-volt);
}

.table-container {
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: var(--tl-radius-card) !important;
    margin: 0 12px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    box-shadow: var(--tl-shadow-card) !important;
}

.table-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: var(--tl-font-body) !important;
}

.table-container th {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--tl-text-muted) !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--tl-border-subtle) !important;
    text-align: center !important;
}

.table-container th:first-child {
    padding-left: 12px !important;
}

.table-container th:last-child {
    padding-right: 12px !important;
}

.table-container td {
    padding: 10px 8px !important;
    font-size: 0.78rem !important;
    color: var(--tl-text-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    text-align: center !important;
    transition: background-color 0.15s ease !important;
}

.table-container tr:last-child td {
    border-bottom: none !important;
}

.table-container tr:hover td {
    background-color: var(--tl-bg-surface-elevated) !important;
}

.table-container tr.pasa-ronda td:first-child {
    border-left: 3px solid var(--tl-neon-volt) !important;
}

.celda-equipo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
}

.celda-equipo .escudo-tabla {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-shrink: 0 !important;
}

.celda-equipo span {
    font-family: var(--tl-font-football) !important;
    font-size: 0.88rem !important;
    color: #FFFFFF !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ------------------------------------------------------------------------------------------
   7. UNIFICACIÓN: PÁGINA DE EQUIPOS (#teams)
   ------------------------------------------------------------------------------------------ */
#teams {
    background: var(--tl-bg-base) !important;
}

.teams-page-header {
    padding: 14px 14px 8px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.teams-page-badge {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--tl-text-muted) !important;
}

.teams-page-title {
    font-family: var(--tl-font-headline) !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

.teams-grid,
.teams-grid-dark {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 6px 12px 14px 12px !important;
    box-sizing: border-box !important;
}

.team-card-dark {
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: var(--tl-radius-card) !important;
    padding: 18px 12px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, background 0.18s ease !important;
    box-shadow: var(--tl-shadow-card) !important;
}

.team-card-dark:hover {
    background: var(--tl-bg-surface-elevated) !important;
    border-color: var(--tl-border-medium) !important;
    transform: translateY(-2px) !important;
}

.team-card-dark:active {
    transform: scale(0.97) !important;
}

.team-card-crest-wrap {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

.team-card-crest {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
}

.team-card-name {
    font-family: var(--tl-font-football) !important;
    font-size: 0.90rem !important;
    font-weight: normal !important;
    color: #FFFFFF !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------------------------------------------
   8. UNIFICACIÓN: GALERÍA DE FOTOS (#gallery)
   ------------------------------------------------------------------------------------------ */
#gallery {
    background: var(--tl-bg-base) !important;
}

.gallery-page-header {
    padding: 14px 14px 8px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.gallery-page-badge {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--tl-text-muted) !important;
}

.gallery-page-title {
    font-family: var(--tl-font-headline) !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

.gallery-grid-dark {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 6px 12px 14px 12px !important;
    box-sizing: border-box !important;
}

.gallery-album-card {
    position: relative !important;
    border-radius: var(--tl-radius-card) !important;
    overflow: hidden !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease !important;
    box-shadow: var(--tl-shadow-card) !important;
    aspect-ratio: 4 / 3 !important;
}

.gallery-album-card:hover {
    border-color: var(--tl-border-medium) !important;
    transform: translateY(-2px) !important;
}

.gallery-album-card:active {
    transform: scale(0.97) !important;
}

.gallery-album-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: brightness(0.78) !important;
    transition: transform 0.35s ease, filter 0.35s ease !important;
}

.gallery-album-card:hover .gallery-album-cover {
    transform: scale(1.04) !important;
    filter: brightness(0.9) !important;
}

.gallery-album-scrim {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(10, 10, 12, 0.85) 75%, #0A0A0C 100%) !important;
    pointer-events: none !important;
}

.gallery-album-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 12px 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    z-index: 2 !important;
}

.gallery-album-badge {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--tl-neon-volt) !important;
    text-transform: uppercase !important;
}

.gallery-album-title {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

.gallery-album-link {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: var(--tl-text-secondary) !important;
    margin-top: 2px !important;
}

/* ------------------------------------------------------------------------------------------
   8b. PESTAÑAS DE PERFIL DE EQUIPO (#perfil-equipo)
   ------------------------------------------------------------------------------------------ */
.team-tabs-container {
    display: flex !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: 24px !important;
    padding: 4px !important;
    margin: 14px 12px !important;
    gap: 4px !important;
}

.tab-team {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 20px !important;
    color: var(--tl-text-secondary) !important;
    font-family: var(--tl-font-tech) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
}

.tab-team.active {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ------------------------------------------------------------------------------------------
   8c. ESTADÍSTICAS Y RANKINGS ATHLETIC PRO
   ------------------------------------------------------------------------------------------ */
.stats-ranking-card,
.stat-card-row {
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    border-radius: var(--tl-radius-card) !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: var(--tl-shadow-card) !important;
}

.stat-card-row:hover {
    border-color: var(--tl-border-medium) !important;
}

/* ------------------------------------------------------------------------------------------
   9. UNIFICACIÓN: EDICIONES (#editions)
   ------------------------------------------------------------------------------------------ */
#editions {
    background: var(--tl-bg-base) !important;
}

.editions-list-horizontal {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
}

.card-edicion-horizontal {
    position: relative !important;
    border-radius: var(--tl-radius-card) !important;
    overflow: hidden !important;
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    height: 120px !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease !important;
    box-shadow: var(--tl-shadow-card) !important;
}

.card-edicion-horizontal:hover {
    border-color: var(--tl-border-medium) !important;
    transform: translateY(-2px) !important;
}

.card-edicion-horizontal:active {
    transform: scale(0.98) !important;
}

.card-edicion-horizontal img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.70) !important;
    transition: transform 0.35s ease, filter 0.35s ease !important;
}

.card-edicion-horizontal:hover img {
    transform: scale(1.03) !important;
    filter: brightness(0.85) !important;
}

.overlay-edicion {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.6) 60%, transparent 100%) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
}

.titulo-edicion-hover {
    font-family: var(--tl-font-headline) !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

/* ------------------------------------------------------------------------------------------
   10. UNIFICACIÓN: DETALLE DE PARTIDO (#detalle-partido)
   ------------------------------------------------------------------------------------------ */
#detalle-partido {
    background: var(--tl-bg-base) !important;
}

.header-nav-inline {
    background: var(--tl-bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--tl-border-subtle) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.header-nav-inline h1 {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.90rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 !important;
}

.btn-volver-texto,
.btn-player-back,
.btn-volver-flotante {
    background: var(--tl-bg-surface-elevated) !important;
    border: 1px solid var(--tl-border-subtle) !important;
    color: #FFFFFF !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
}

.btn-volver-texto:active,
.btn-player-back:active,
.btn-volver-flotante:active {
    transform: scale(0.92) !important;
}

/* Scoreboard Hero en Detalle de Partido */
.of-match-header {
    background: var(--tl-bg-surface) !important;
    border-bottom: 1px solid var(--tl-border-subtle) !important;
    padding: 20px 14px 16px 14px !important;
    position: relative !important;
}

.of-header-scoreboard {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 380px !important;
    margin: 0 auto !important;
}

.of-team-side {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

.of-team-escudo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
}

.of-team-name {
    font-family: var(--tl-font-football) !important;
    font-size: 0.88rem !important;
    color: #FFFFFF !important;
    letter-spacing: 0.02em !important;
}

.of-score-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
}

.of-score-digits {
    font-family: var(--tl-font-scoreboard) !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
}

.of-status-sub {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--tl-text-secondary) !important;
    margin-top: 4px !important;
    text-transform: uppercase !important;
}

.of-date-sub {
    font-family: var(--tl-font-tech) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--tl-text-muted) !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
}

/* ------------------------------------------------------------------------------------------
   11. UNIFICACIÓN: NOTICIAS ARCHIVE & CREATOR (#noticias, #enviar-noticia)
   ------------------------------------------------------------------------------------------ */
#noticias {
    background: var(--tl-bg-base) !important;
}

.news-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 14px 10px 14px !important;
}

.news-section-main-title {
    font-family: var(--tl-font-headline) !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 !important;
}

/* Formulario de Enviar Noticia */
#enviar-noticia input[type="text"],
#enviar-noticia textarea,
#enviar-noticia select {
    background: var(--tl-bg-surface) !important;
    border: 1px solid var(--tl-border-medium) !important;
    border-radius: var(--tl-radius-card) !important;
    color: #FFFFFF !important;
    font-family: var(--tl-font-body) !important;
    font-size: 0.88rem !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

#enviar-noticia input[type="text"]:focus,
#enviar-noticia textarea:focus,
#enviar-noticia select:focus {
    border-color: var(--tl-neon-volt) !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.2) !important;
}