/*
 * EL CABEZAL · LIQUID GLASS
 * Capa sensorial: conserva paleta, tipografía, proporciones y estructura.
 * Incluye fallback sólido para navegadores sin backdrop-filter.
 */
:root {
    --glass-surface: rgba(247, 245, 243, 0.72);
    --glass-surface-strong: rgba(247, 245, 243, 0.88);
    --glass-line: rgba(255, 255, 255, 0.58);
    --glass-shadow: 0 18px 50px rgba(30, 30, 70, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --glass-blur: 20px;
    --glass-saturate: 126%;
}

html {
    background: #e8e5e2;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: min(52vw, 680px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
    opacity: .34;
}

body::before {
    top: -24vw;
    right: -14vw;
    background: radial-gradient(circle, rgba(30, 30, 70, .24), transparent 68%);
}

body::after {
    bottom: -32vw;
    left: -18vw;
    background: radial-gradient(circle, rgba(255, 255, 255, .92), transparent 66%);
}

.site-header,
.app-bottom-bar,
.search-sheet,
.mobile-menu-sheet,
.subscribe-modal-content,
.share-sheet,
.reader-dialog,
.header-profile-menu,
.desktop-login-menu {
    background-color: var(--glass-surface-strong);
    border-color: var(--glass-line);
    box-shadow: var(--glass-shadow);
}

.about-card,
.contact-panel,
.form-card,
.profile-card,
.news-paper-card,
.magazine-card,
.provider-card,
.event-card,
.builder-block,
.cover-shell,
.home-news-card,
.home-calendar-preview,
.cabezal-guide-book,
.admin-body .admin-card,
.admin-body .table-wrap,
.admin-body .builder-studio,
.admin-body .synapse-panel {
    background-color: var(--glass-surface);
    border-color: var(--glass-line);
    box-shadow: var(--glass-shadow);
}

.btn,
button,
input,
select,
textarea,
.site-nav a {
    -webkit-tap-highlight-color: transparent;
}

.btn,
.site-header button,
.app-bottom-bar a,
.mobile-menu-nav a {
    transform: translateZ(0);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header,
    .app-bottom-bar,
    .search-sheet,
    .mobile-menu-sheet,
    .subscribe-modal-content,
    .share-sheet,
    .reader-dialog,
    .header-profile-menu,
    .desktop-login-menu,
    .about-card,
    .contact-panel,
    .form-card,
    .profile-card,
    .news-paper-card,
    .magazine-card,
    .provider-card,
    .event-card,
    .builder-block,
    .cover-shell,
    .home-news-card,
    .home-calendar-preview,
    .cabezal-guide-book,
    .admin-body .admin-card,
    .admin-body .table-wrap,
    .admin-body .builder-studio,
    .admin-body .synapse-panel {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    }
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover,
    .news-paper-card:hover,
    .magazine-card:hover,
    .provider-card:hover,
    .admin-body .admin-card:hover {
        box-shadow: 0 22px 58px rgba(30, 30, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .82);
    }
}

@media (max-width: 760px) {
    :root {
        --glass-blur: 16px;
    }

    .site-header {
        padding-top: max(.8rem, env(safe-area-inset-top));
    }

    .app-bottom-bar,
    .admin-bottom-nav {
        padding-bottom: max(.45rem, env(safe-area-inset-bottom)) !important;
    }

    .mobile-menu-sheet {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    button,
    .admin-card,
    .news-paper-card,
    .magazine-card {
        transition-duration: .01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --glass-surface: rgba(247, 245, 243, .96);
        --glass-line: rgba(30, 30, 70, .38);
    }
}