/* Encabezado flotante compartido: el mismo botón redondo de vidrio que usa la
   Biblia, en todas las páginas, y el logo de la app en escritorio.

   La franja del encabezado sigue ocupando su lugar (sticky), así que el
   contenido no se mueve. Lo único que se ve es el botón y, en pantallas
   grandes, el logo. */

.header.mobile-header {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible;
    pointer-events: none;
    z-index: 300;
}

.header.mobile-header .mobile-header-blur,
.header.mobile-header .desktop-header-blur {
    display: none !important;
}

.header.mobile-header > .container {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
}

.header.mobile-header .logo,
.header.mobile-header .mobile-reading-context {
    display: none;
}

.header.mobile-header .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    pointer-events: auto;
}

/* Botón del menú: círculo de vidrio */
.header.mobile-header .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    color: #d5eaff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}

.header.mobile-header .mobile-menu-toggle:active { transform: scale(0.94); }
.header.mobile-header .mobile-menu-toggle:hover { background: rgba(0, 0, 0, 0.28); }

.header.mobile-header .mobile-menu-toggle:focus-visible {
    outline: 2px solid #aad8ff;
    outline-offset: 3px;
}

.header.mobile-header .mobile-menu-toggle svg { width: 22px; height: 22px; }

.header.mobile-header .menu-line {
    transform-origin: 12px 12px;
    transition: transform 200ms ease, opacity 200ms ease;
}

.header.mobile-header.menu-open .menu-line-top { transform: translateY(6px) rotate(45deg); transform-origin: 12px 6px; }
.header.mobile-header.menu-open .menu-line-middle { opacity: 0; }
.header.mobile-header.menu-open .menu-line-bottom { transform: translateY(-6px) rotate(-45deg); transform-origin: 12px 18px; }

/* Botón del tema, del mismo material pero más chico */
.header.mobile-header .header-actions .icon-button {
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    color: #d5eaff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.95rem;
}

.header.mobile-header .header-actions .icon-button:hover {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(174, 215, 250, 0.45);
}

/* El menú se abre como tarjeta debajo del botón, en cualquier tamaño */
.header.mobile-header nav {
    position: absolute !important;
    top: calc(100% + 10px);
    right: max(14px, env(safe-area-inset-right, 0px));
    left: auto !important;
    bottom: auto;
    transform: none !important;
    pointer-events: none;
}

.header.mobile-header .nav-links {
    position: static !important;
    display: grid !important;
    gap: 4px;
    box-sizing: border-box;
    width: min(240px, calc(100vw - 28px));
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 22px !important;
    background: rgba(8, 12, 20, 0.80) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35) !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 220ms ease, visibility 180ms;
}

.header.mobile-header.menu-open nav { pointer-events: auto; }

.header.mobile-header.menu-open .nav-links {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.header.mobile-header .nav-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    color: #e5f1ff !important;
    font-size: 14px;
    text-align: left;
}

.header.mobile-header .nav-links a.active,
.header.mobile-header .nav-links a:hover {
    background: rgba(184, 221, 255, 0.10);
    color: #b8ddff !important;
}

/* Escritorio: además del botón, el logo de la app en una cápsula de vidrio */
@media (min-width: 821px) {
    .header.mobile-header .logo {
        display: inline-flex;
        align-items: center;
        max-width: min(60vw, 520px);
        margin: 0;
        padding: 10px 18px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.18);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: #e5f1ff !important;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: auto;
    }

    .header.mobile-header .logo a {
        color: inherit !important;
        text-decoration: none;
    }

    .header.mobile-header .mobile-menu-toggle { display: inline-flex !important; }
}

html:not(.dark) .header.mobile-header .mobile-menu-toggle,
html:not(.dark) .header.mobile-header .header-actions .icon-button,
html:not(.dark) .header.mobile-header .logo {
    border-color: rgba(0, 0, 0, 0.10);
    background: rgba(255, 255, 255, 0.72);
    color: #1d1d1f !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

html:not(.dark) .header.mobile-header .nav-links {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}

html:not(.dark) .header.mobile-header .nav-links a { color: #1d1d1f !important; }

html:not(.dark) .header.mobile-header .nav-links a.active,
html:not(.dark) .header.mobile-header .nav-links a:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #0b63c5 !important;
}

@media (prefers-reduced-motion: reduce) {
    .header.mobile-header .nav-links,
    .header.mobile-header .menu-line,
    .header.mobile-header .mobile-menu-toggle { transition: none; }
}

/* En pantallas muy grandes styles.css no pinta el botón de tres rayas hecho con
   un span, así que aquí se dibuja y se convierte en equis al abrir. */
@media (min-width: 1441px) and (min-height: 851px) {
    .header.mobile-header .mobile-menu-toggle > span {
        position: relative;
        display: block;
        width: 18px;
        height: 1.8px;
        border-radius: 2px;
        background: currentColor;
        transition: background 200ms ease;
    }

    .header.mobile-header .mobile-menu-toggle > span::before,
    .header.mobile-header .mobile-menu-toggle > span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: currentColor;
        transition: transform 200ms ease;
    }

    .header.mobile-header .mobile-menu-toggle > span::before { transform: translateY(-6px); }
    .header.mobile-header .mobile-menu-toggle > span::after { transform: translateY(6px); }
    .header.mobile-header.menu-open .mobile-menu-toggle > span { background: transparent; }
    .header.mobile-header.menu-open .mobile-menu-toggle > span::before { transform: rotate(45deg); }
    .header.mobile-header.menu-open .mobile-menu-toggle > span::after { transform: rotate(-45deg); }
}

/* El botón del menú lleva el logo de la app; al abrirlo se vuelve una equis. */
.header.mobile-header .mobile-menu-toggle {
    position: relative;
}

.header.mobile-header .mobile-menu-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27px;
    height: 27px;
    margin: -13.5px 0 0 -13.5px;
    background: url("logo-padded.png?v=20260925-zion1") center / contain no-repeat;
    filter: drop-shadow(0 0 0.4rem rgba(44, 147, 255, 0.34));
    opacity: 1;
    transition: opacity 180ms ease, transform 180ms ease;
}

.header.mobile-header.menu-open .mobile-menu-toggle::before {
    opacity: 0;
    transform: scale(0.82);
}

/* Las rayas solo aparecen como equis mientras el menú está abierto. */
.header.mobile-header .mobile-menu-toggle svg,
.header.mobile-header .mobile-menu-toggle > span {
    opacity: 0;
    transition: opacity 180ms ease;
}

.header.mobile-header.menu-open .mobile-menu-toggle svg,
.header.mobile-header.menu-open .mobile-menu-toggle > span {
    opacity: 1;
}

/* Páginas cuyo botón son tres rayas hechas con un span: ahí la equis se dibuja
   aquí, porque styles.css no la pinta en todos los tamaños. */
.header.mobile-header .mobile-menu-toggle > span {
    position: relative;
    display: block;
    width: 18px;
    height: 1.8px;
    border-radius: 2px;
    background: transparent !important;
}

.header.mobile-header .mobile-menu-toggle > span::before,
.header.mobile-header .mobile-menu-toggle > span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: currentColor !important;
}

.header.mobile-header.menu-open .mobile-menu-toggle > span::before { transform: rotate(45deg) !important; }
.header.mobile-header.menu-open .mobile-menu-toggle > span::after { transform: rotate(-45deg) !important; }

/* La estrella ya va en el botón, así que la cápsula del nombre queda sin ella. */
.header.mobile-header .logo::before {
    display: none !important;
}