/* app-header.css — avatar/"Iniciar sesión" + menú de tres rayas que abre
   un panel lateral (cuenta, acciones de la página, tema). Sustituye a los
   botones sueltos de .header-actions/.login-btn en la cabecera y a las
   pastillas flotantes de theme-switcher.js. Usa las variables de tema de
   style.css/themes.css, así que funciona igual en Blanco/Oscuro/Teletexto
   sin reglas propias por tema. */

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-avatar-chip {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.16);
    color: var(--header-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.app-login-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    color: var(--header-text);
    font-weight: 800;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.app-burger-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: var(--header-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.app-burger-btn svg {
    width: 22px;
    height: 22px;
}

.app-burger-btn .app-icon-close {
    display: none;
}

.app-burger-btn.open {
    background: rgba(255, 255, 255, 0.22);
}

.app-burger-btn.open .app-icon-burger {
    display: none;
}

.app-burger-btn.open .app-icon-close {
    display: block;
}

.app-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 15, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 999;
}

.app-drawer-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

body.app-drawer-locked {
    overflow: hidden;
}

.app-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 308px;
    max-width: 86vw;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 1000;
}

/* La sombra solo con el cajón abierto: cerrado (fuera de pantalla con
   translateX) la sombra hacia la izquierda seguía asomando como una franja
   gris en el borde derecho de todas las páginas (C-263). */
.app-drawer.open {
    transform: translateX(0);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
}

.app-drawer-account {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.app-drawer-account-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-drawer-account-info {
    flex: 1;
    min-width: 0;
}

.app-drawer-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-drawer-role {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.app-drawer-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

.app-drawer-logout {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc3545;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.app-drawer-logout svg {
    width: 15px;
    height: 15px;
}

/* Cerrar sesión va ahora en un <form> (POST + token CSRF) con un <button>
   en vez de un <a>: se quita el aspecto de botón nativo para que se vea
   igual que antes. */
.app-drawer-logout-form {
    margin: 0;
    flex-shrink: 0;
}

button.app-drawer-logout {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.app-drawer-cta {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.app-drawer-btn {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
}

.app-drawer-btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--btn-primary-text);
}

.app-drawer-btn-secondary {
    border: 1.5px solid var(--glass-border);
    color: var(--text-primary);
}

.app-drawer-nav {
    padding: 6px 0;
    flex-shrink: 0;
}

.app-drawer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.app-drawer-row svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.app-drawer-row-danger,
.app-drawer-row-danger svg {
    color: #dc3545;
}

/* La entrada de la página en la que estás (C-433): el mismo resalte verde
   que la muestra de tema activa, para que al abrir el menú se vea de un
   vistazo dónde estás. */
.app-drawer-row-activa,
.app-drawer-row-activa svg {
    color: var(--color-primary-dark);
}

.app-drawer-row-activa {
    background: var(--neon-green-dim);
}

/* Teletexto no tiene verdes: ahí "activo" es vídeo invertido, amarillo de
   fondo y texto negro, como los rótulos de la propia teletexto. */
[data-theme="teletexto"] .app-drawer-row-activa {
    background: var(--color-primary);
}

[data-theme="teletexto"] .app-drawer-row-activa,
[data-theme="teletexto"] .app-drawer-row-activa svg {
    color: #000000;
}

.app-drawer-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 20px;
    flex-shrink: 0;
}

/* Rótulos de los grupos del panel: "Esta página" y "Apariencia". */
.app-drawer-group-label,
.app-drawer-theme-label {
    padding: 14px 20px 8px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.app-drawer-theme-list {
    padding: 0 16px max(16px, env(safe-area-inset-bottom, 16px));
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.app-theme-swatch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.app-theme-swatch.active {
    background: var(--neon-green-dim);
}

.app-theme-swatch-color {
    width: 34px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding: 3px;
}

/* Con la franja azul en todos los temas, la muestra enseña esa franja
   arriba y el fondo de la página debajo, que es lo que cambia. */
.app-theme-swatch-color-blanco {
    background: linear-gradient(#0000aa 0 40%, #f4f5f7 40%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.app-theme-swatch-color-oscuro {
    background: linear-gradient(#0000aa 0 40%, #1e2029 40%);
}

.app-theme-swatch-color-teletexto {
    background: #0000aa;
}

.app-theme-swatch-teletexto-bar {
    width: 100%;
    height: 5px;
    background: #ffff00;
    border-radius: 1px;
}

.app-theme-swatch-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    flex: 1;
}

.app-theme-swatch-check {
    width: 19px;
    height: 19px;
    color: var(--color-primary-dark);
    display: none;
    flex-shrink: 0;
}

.app-theme-swatch.active .app-theme-swatch-check {
    display: block;
}


/* ============ FRANJA DE ARRIBA (toda la web) ============
   La cabecera de la portada nueva (C-300, quiniela/docs/REDISENO_UI.md)
   con el logo elegido (propuesta 5, C-304), ahora en todas las páginas:
   52 px con menú, logo, título y cuenta. En la portada lleva además las
   flechas de jornada y el punto de directo (jornada-lista.css pone la
   rejilla de tablet/PC con flechas). */


header.jl-franja {
    height: 52px;
    display: grid;
    grid-template-columns: 36px auto 30px minmax(0, 1fr) 30px 22px 40px;
    align-items: center;
    gap: 0;
    padding: 0 6px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--header-bg);
    color: var(--header-text);
}

.jl-franja button,
.jl-franja a.jl-avatar-link {
    background: none;
    border: 0;
    height: 40px;
    padding: 0;
    border-radius: var(--jl-radio, 10px);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.jl-franja button[disabled] {
    opacity: 0.3;
    cursor: default;
}

.jl-franja svg {
    width: 22px;
    height: 22px;
}

/* Logo «1X2 Viva La Quiniela» (14/10/2026): entero a la izquierda, 32 px
   de alto en el móvil y 44 px (2 px por píxel del dibujo) desde tablet. */
.jl-franja .jl-logo {
    display: block;
    height: 32px;
}

.jl-franja .jl-logo img {
    display: block;
    height: 100%;
    width: auto;
}

@media (min-width: 768px) {
    .jl-franja .jl-logo {
        height: 44px;
    }
}

[data-theme="teletexto"] .jl-franja .jl-logo img {
    background: none;
    padding: 0;
}

.jl-titulo {
    text-align: center;
    line-height: 1.05;
    min-width: 0;
}

.jl-titulo b {
    display: block;
    font-family: var(--jl-font-fila, 'Barlow Semi Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif);
    /* Baja con el ancho para que a 375 px quepa con el logo entero. */
    font-size: clamp(16px, 4.6vw, 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.jl-titulo small {
    font-size: 12px;
    color: var(--header-sub);
}

.jl-directo {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--live);
    justify-self: center;
    animation: jl-latido 1.6s infinite;
}

.jl-directo[hidden] {
    display: none;
}

.jl-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--header-text);
    color: var(--avatar-text);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

/* Sin sesión: el monigote de "tu cuenta" en vez de un "?", que parecía la
   ayuda. Lleva a iniciar sesión. */
.jl-avatar-entrar {
    overflow: hidden;
}

.jl-avatar-entrar svg {
    width: 22px;
    height: 22px;
    margin-top: 6px;
}

@keyframes jl-latido {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 70%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Fuera de la portada no hay flechas ni punto de directo: menú, logo,
   título de la página y cuenta. */
header.jl-franja.jl-franja-pagina {
    grid-template-columns: 36px auto minmax(0, 1fr) 40px;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.jl-franja-pagina .jl-titulo {
    text-align: left;
}

/* Un título largo (el nombre de una peña) pasa a dos líneas en vez de
   cortarse con "…" a la primera; solo si ni así cabe, se corta. */
.jl-franja-pagina .jl-titulo b {
    white-space: normal;
    line-height: 1.05;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

/* Fuera de la portada va dentro del .container de style.css: se come su
   sangría para ir de lado a lado, como en la portada. */
.container > header.jl-franja {
    margin: -2rem -2rem 1.5rem;
}

/* En pantalla ancha el .container ya no llega a los bordes (1200 px de
   contenido más su sangría): la franja se queda en esos 1200, como la de
   la portada y la peña (.jl-app). */
@media (min-width: 1265px) {
    .container > header.jl-franja {
        margin-inline: 0;
    }
}

@media (max-width: 768px) {
    .container > header.jl-franja {
        margin: -0.75rem -0.75rem 1rem;
    }
}

@media (max-width: 600px) {
    .container > header.jl-franja {
        margin: -0.5rem -0.5rem 0.75rem;
    }
}

[data-theme="teletexto"] .jl-titulo b {
    display: inline-block;
    transform: scaleY(1.45);
    transform-origin: 50% 70%;
    font-size: clamp(15px, 4.2vw, 18px);
    text-shadow: none;
}

[data-theme="teletexto"] .jl-titulo small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
}

/* Con inline-block (para estirarlo) el título ya no se cortaba con "…" y
   un nombre largo de peña se metía debajo del avatar. */
[data-theme="teletexto"] .jl-franja-pagina .jl-titulo b {
    max-width: 100%;
    vertical-align: top;
    display: -webkit-box;
}

/* En Teletexto, con dos líneas estiradas no cabría en los 52 px: se estira
   menos. */
[data-theme="teletexto"] .jl-franja-pagina .jl-titulo b {
    transform: scaleY(1.15);
    transform-origin: 50% 50%;
    font-size: clamp(14px, 3.9vw, 17px);
}