/*
   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;
    --header-bg: linear-gradient(135deg, #0d2116 0%, #133422 100%);
    --header-text: #f1f5f9;
    --signo-1: #60a5fa;
    --signo-x: #fbbf24;
    --signo-2: #22d3ee;
    --bar-1: #60a5fa;
    --bar-x: #fbbf24;
    --bar-2: #22d3ee;
    --chip-bg: #475569;
    --chip-text: #f8fafc;
}

: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;
    --bar-1: #00ffff;
    --bar-x: #ffff00;
    --bar-2: #ff00ff;
    --chip-bg: #ffffff;
    --chip-text: #000000;
}

@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 {
    font-size: 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;
}