/**
 * Archivo: header_static.css
 * Proyecto: Teletristadio
 * Versión: TT-HEADER-CSS-2026.08.16-01
 * Fecha de versión: 2026-08-16
 *
 * Funciones principales:
 * - Define la presentación visual de la cabecera común de Teletristadio.
 * - Mantiene una altura fija de 55 píxeles.
 * - Organiza la cabecera en tres zonas simétricas: izquierda, centro y derecha.
 * - Reserva la zona izquierda para la futura navegación/hamburguesa.
 * - Mantiene centrado el logotipo SVG independientemente de los controles laterales.
 * - Muestra el logotipo con un máximo de 300 x 45 píxeles y permite su reducción
 *   proporcional cuando el ancho disponible es menor.
 * - Aísla el enlace del logotipo de los estilos globales aplicados a enlaces de texto.
 * - Define el tamaño fijo del botón y de los iconos de cambio de tema.
 * - Carga los SVG propios de sol y luna mediante máscaras CSS.
 * - Aplica un hover luminoso a los iconos de cambio de tema.
 * - Utiliza fondo y color de sombra definidos por las variables del tema.
 * - Mantiene la misma geometría de sombra en ambos temas y cambia solo su color.
 */

.cabecera,
.cabecera * {
    box-sizing: border-box;
}

.cabecera {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #000000;
    background: var(--header-background);
    box-shadow: 4px 4px 8px 3px var(--header-shadow-color);
}

.cabecera-inner {
    display: grid;
    grid-template-columns: minmax(40px, 1fr) minmax(0, 300px) minmax(40px, 1fr);
    width: 100%;
    max-width: 900px;
    height: 100%;
    margin: 0 auto;
    padding: 0 8px;
    align-items: center;
    column-gap: 6px;
}

.cabecera-slot {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: center;
}

.cabecera-slot-left {
    justify-content: flex-start;
}

.cabecera-slot-right {
    justify-content: flex-end;
}

.cabecera-brand {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.header-logo-link,
.header-logo-link:hover {
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: 300px;
    height: 45px;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    transition: none;
}

.header-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 45px;
    filter: drop-shadow(0 4px 1px rgba(0, 0, 0, 0.35));
}

/* Botón de cambio de tema */
.theme-toggle {
    display: inline-flex;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid var(--theme-toggle-border-color);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--theme-toggle-icon-color);
    background: var(--theme-toggle-background);
    line-height: 1;
    cursor: pointer;
}

.theme-icon {
    display: none;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: filter 0.15s ease;
}

.theme-toggle:hover .theme-icon {
    filter: brightness(1.20) saturate(1.15);
}

.theme-icon-sun {
    mask-image: url('/assets/img/ui/icons/sun.svg');
    -webkit-mask-image: url('/assets/img/ui/icons/sun.svg');
}

.theme-icon-moon {
    mask-image: url('/assets/img/ui/icons/moon.svg');
    -webkit-mask-image: url('/assets/img/ui/icons/moon.svg');
}

/* Modo oscuro predeterminado: se muestra el sol. */
.theme-toggle .theme-icon-sun {
    display: inline-block;
}

.theme-toggle .theme-icon-moon {
    display: none;
}

/* Modo claro: se muestra la luna. */
:root[data-theme="light"] .theme-toggle .theme-icon-sun {
    display: none;
}

:root[data-theme="light"] .theme-toggle .theme-icon-moon {
    display: inline-block;
}