/*
   themes.css — Sistema de 3 diseños elegibles (blanco/oscuro/teletexto).

   El diseño "blanco" son los valores por defecto ya definidos en
   style.css (:root); este archivo solo redefine esos mismos tokens para
   :root[data-theme="oscuro"] y :root[data-theme="teletexto"], más los
   ajustes estructurales que teletexto necesita (sin redondeos, sin
   sombras, mayúsculas, líneas de puntos, barra "fastext"...) que no se
   pueden expresar solo con variables.

   Se carga el último en cada página, después de quiniela_table.css,
   pronostico-picker.css, seguimiento.css y auth.css — aunque en realidad
   no importa el orden: todas las reglas de aquí ganan por especificidad
   ([data-theme="x"] .clase pesa más que .clase sola), no por orden de
   carga.

   Selector de tema real: ver assets/js/theme-switcher.js.
*/

:root[data-theme="oscuro"] {
    --bg-gradient: linear-gradient(135deg, #12141a 0%, #1a1d26 100%);
    --card-bg: #1e2029;
    --glass-border: rgba(255, 255, 255, 0.12);
    --text-primary: #f1f5f9;
    --text-secondary: #97a2b5;
    --color-primary: #00e676;
    --color-primary-dark: #00c853;
    --btn-primary-text: #06210f;
    /* Mismo azul del logo que en Blanco: un fondo más oscuro dejaba el
       logo como un recuadro suelto. */
    --header-bg: #0000aa;
    --header-text: #f1f5f9;
    --signo-1: #60a5fa;
    --signo-x: #fbbf24;
    --signo-2: #22d3ee;
    --signo-1-text: #091e3a;
    --signo-x-text: #1a1402;
    --signo-2-text: #04242a;
    --bar-1: #60a5fa;
    --bar-x: #fbbf24;
    --bar-2: #22d3ee;
    --chip-bg: #475569;
    --chip-text: #f8fafc;
    --line: rgba(255, 255, 255, 0.10);
    --header-sub: rgba(241, 245, 249, 0.65);
    --avatar-text: #0000aa;
    --live: #fb7185;
    --live-bg: #2a1820;
    --ok: #4ade80;
    --boli: #7d9bff;
    --ko: #f87171;
    --pend: #3b4150;
    --pleno-bg: #2a2412;
    --pleno-text: #fcd34d;
}

:root[data-theme="teletexto"] {
    --bg-gradient: #000000;
    --card-bg: #000000;
    --glass-border: #00ffff;
    --text-primary: #ffffff;
    --text-secondary: #00ffff;
    --color-primary: #ffff00;
    --color-primary-dark: #cccc00;
    --btn-primary-text: #000000;
    --header-bg: #0000aa;
    --header-text: #ffff00;
    --font-family: 'Teletext50', 'Courier New', Courier, monospace;
    --signo-1: #00ffff;
    --signo-x: #ffff00;
    --signo-2: #ff00ff;
    --signo-1-text: #000000;
    --signo-x-text: #000000;
    --signo-2-text: #000000;
    --bar-1: #00ffff;
    --bar-x: #ffff00;
    --bar-2: #ff00ff;
    --chip-bg: #ffffff;
    --chip-text: #000000;
    --line: #00ffff;
    --header-sub: #ffffff;
    --avatar-text: #0000aa;
    --live: #ff0000;
    --live-bg: #000000;
    --ok: #00ff00;
    --boli: #00ff00;
    --ko: #ff0000;
    --pend: #444444;
    --pleno-bg: #000000;
    --pleno-text: #ffff00;
}

@font-face {
    font-family: 'Teletext50';
    src: url('../fonts/Teletext50.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* --- Teletexto: sin redondeos, sin sombras, bordes gruesos, todo en
   mayúsculas — el resto ya lo hacen las variables de arriba. --- */
[data-theme="teletexto"] * {
    border-radius: 0 !important;
    box-shadow: none !important;
}

[data-theme="teletexto"] body {
    font-weight: 700;
}

[data-theme="teletexto"] .glass-panel,
[data-theme="teletexto"] .qrows,
[data-theme="teletexto"] .diff-category-block,
[data-theme="teletexto"] .sg-card,
[data-theme="teletexto"] .partido-pronostico,
[data-theme="teletexto"] .jh-lugar,
[data-theme="teletexto"] .auth-card {
    border: 2px solid var(--glass-border);
}

[data-theme="teletexto"] h1,
[data-theme="teletexto"] h2,
[data-theme="teletexto"] .jornada-badge,
[data-theme="teletexto"] .temporada-badge,
[data-theme="teletexto"] .diff-cat-header,
[data-theme="teletexto"] .tab-btn,
[data-theme="teletexto"] .login-btn,
[data-theme="teletexto"] .btn-action,
[data-theme="teletexto"] .auth-btn,
[data-theme="teletexto"] .jh-num {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[data-theme="teletexto"] .logo-quiniela,
[data-theme="teletexto"] .logo-img,
[data-theme="teletexto"] .logo-bonoloto {
    background: #ffff00;
    padding: 2px;
}

/* Barra de estado tipo "página 100 100 LA1 fecha hora": ver
   .tx-statusbar en cada página (solo existe visualmente aquí). */
.tx-statusbar {
    display: none;
}

[data-theme="teletexto"] .tx-statusbar {
    display: flex;
    justify-content: space-between;
    background: #000;
    color: #fff;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 8px;
    letter-spacing: 0.03em;
}

[data-theme="teletexto"] .tx-statusbar span:nth-child(2) {
    color: #ffff00;
}

[data-theme="teletexto"] .tx-statusbar span:last-child {
    color: #00ffff;
}

[data-theme="teletexto"] header {
    border: none;
    padding: 0.9rem 0.9rem 1rem;
}

[data-theme="teletexto"] .logo-text h1 {
    /* La fuente de Teletexto es más ancha que la normal — se encoge un
       poco más fuerte que el clamp() base para que un título largo tenga
       las mismas posibilidades de caber en una línea. */
    font-size: clamp(1.05rem, 4.8vw, 1.65rem);
    letter-spacing: 0.02em;
    text-shadow: 2px 2px 0 #000066;
}

/* Barra "fastext" (Jornada Actual / Resultados Anteriores en index.php):
   colores clásicos rojo/verde/amarillo/cian de los mandos de teletexto,
   la activa en "vídeo inverso" en vez de subrayada. */
[data-theme="teletexto"] .tabs-nav {
    background: #000;
    border: none;
    gap: 0;
    margin-bottom: 0;
}

[data-theme="teletexto"] .tab-btn {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0.7rem 0.3rem;
    font-size: 0.72rem;
}

[data-theme="teletexto"] .tab-btn:nth-child(1) {
    color: #00ff00;
}

[data-theme="teletexto"] .tab-btn:nth-child(2) {
    color: #ffff00;
}

[data-theme="teletexto"] .tab-btn:nth-child(1).active {
    background: #00ff00;
    color: #000;
}

[data-theme="teletexto"] .tab-btn:nth-child(2).active {
    background: #ffff00;
    color: #000;
}

/* Líneas de puntos "Nacional......102", la seña de identidad del
   teletexto clásico — se generan solas con ::after, sin tocar el HTML. */
[data-theme="teletexto"] .jh-premio-cat,
[data-theme="teletexto"] .match-teams {
    display: flex;
    align-items: baseline;
}

[data-theme="teletexto"] .jh-premio-cat::after,
[data-theme="teletexto"] .match-teams::after {
    content: "";
    flex: 1;
    border-bottom: 3px dotted currentColor;
    margin: 0 5px 4px;
    opacity: 0.6;
}