/* Navigation shared visually with PipbukSite. */
.top-strip, .app-header {
    --violet: #784dfe;
    --violet-dark: #5f34e0;
    --violet-tint: rgba(120, 77, 254, .1);
    --ink: #0a0a0a;
    --line: rgba(10, 10, 10, .12);
    font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.top-strip { background: var(--violet); color: #fff; text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .03em; padding: .5rem 1rem; }
.app-header { padding: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); box-shadow: none; color: var(--ink); }
.app-header-inner { max-width: 1200px; padding: .9rem 1.5rem; gap: 1.75rem; flex-wrap: nowrap; }
.app-header .brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.app-header .brand-logo { display: block; height: 34px; width: auto; }
.app-header .app-nav { margin-left: auto; gap: 1.75rem; flex-wrap: nowrap; }
.app-header-right { margin-left: 0; }
.app-header .app-nav a, .app-header .nav-dropdown-toggle { color: var(--ink); font-size: .95rem; font-weight: 500; }
.app-header .app-nav > a, .app-header .nav-dropdown-toggle { padding: 0; border-radius: 0; min-height: 44px; display: flex; align-items: center; }
.app-header .app-nav > a:hover, .app-header .nav-dropdown-toggle:hover, .app-header .nav-dropdown-toggle[aria-expanded="true"] { background: none; color: var(--violet); }
.app-header .nav-dropdown-toggle { gap: .5rem; }
.app-header .nav-dropdown-menu { top: 100%; left: -12px; right: auto; min-width: 230px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px #32245a12; }
.app-header .nav-dropdown-menu a { padding: 12px; border-radius: 8px; }
.app-header .nav-dropdown-menu a:hover, .app-header .user-menu-dropdown a:hover { background: var(--violet-tint); color: var(--violet); }
.app-header .user-menu-toggle { min-height: 44px; gap: .4rem; padding: 0; color: var(--ink); font: 500 .95rem "Montserrat", sans-serif; }
.app-header .user-menu-toggle:hover, .app-header .user-menu-toggle[aria-expanded="true"] { background: none; color: var(--violet); }
.app-header .avatar { width: 28px; min-width: 28px; height: 28px; aspect-ratio: 1; object-fit: cover; border: 0; background: var(--violet-tint); color: var(--violet-dark); font-size: .8rem; }
.app-header .user-menu-chevron { color: currentColor; }
.app-header .user-menu-dropdown { border-color: var(--line); box-shadow: 0 12px 32px #32245a12; }
.app-header .user-menu-dropdown > a { display: flex; align-items: center; gap: .65rem; }
.app-header .user-menu-dropdown > a > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.app-header .nav-toggle { width: 44px; height: 44px; }
.app-header .nav-toggle-bars, .app-header .nav-toggle-bars::before, .app-header .nav-toggle-bars::after { width: 22px; background: var(--ink); }
.app-header .nav-toggle-bars::before { top: -7px; }
.app-header .nav-toggle-bars::after { top: 7px; }
@media (min-width: 721px) {
    .app-header .app-nav[hidden] { display: flex; }
}
@media (max-width: 720px) {
    .app-header-inner { gap: .75rem; }
    .app-header-right { margin-left: auto; }
    .app-header .nav-toggle { display: inline-flex; order: 3; }
    .app-header .app-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; padding: .5rem 1.5rem 1rem; border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px #0a0a0a14; max-height: calc(100dvh - 110px); overflow-y: auto; }
    .app-header .app-nav[hidden] { display: none; }
    .app-header .app-nav:not([hidden]) { display: flex; }
    .app-header .app-nav > a, .app-header .nav-dropdown-toggle { padding: .75rem 0; border-bottom: 1px solid var(--line); }
    .app-header .nav-dropdown { width: 100%; }
    .app-header .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
    .app-header .nav-dropdown-menu { position: static; min-width: 0; max-width: none; margin: 8px 0; background: var(--violet-tint); border: 0; box-shadow: none; }
    .app-header .nav-dropdown-menu a { border-bottom: 0; }
}
@media (max-width: 380px) {
    .app-header-inner { padding-inline: 1rem; }
    .app-header .user-menu-label { display: none; }
}
.app-nav > a.nav-admin-link { border: 1px solid #d0bfff; color: var(--violet-dark); }
.app-nav > a.nav-admin-link:hover { background: var(--violet-tint); }

/* Pie de página del sitio: Editorial, Tienda y (solo admins) Panel admin. */
.site-footer { margin-top: 4rem; padding: 2.2rem 1.5rem 1.6rem; border-top: 1px solid var(--line); background: #fff; }
.site-footer-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem 2rem; }
.site-footer-brand { display: flex; align-items: center; gap: 1.25rem; }
.site-footer-brand img { display: block; height: 28px; width: auto; }
.site-footer-brand p { margin: 0; padding-left: 1.25rem; border-left: 1px solid var(--line); font: italic .95rem Georgia, serif; color: #9a92a8; }
.site-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem; }
.site-footer-links a { color: #4c4658; font-size: .88rem; text-decoration: none; }
.site-footer-links a:hover { color: var(--violet-dark); }
.site-footer-instagram { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.site-footer-instagram svg { flex-shrink: 0; }
.site-footer-links .site-footer-admin { padding: .4rem .85rem; border: 1px solid #d0bfff; border-radius: 999px; color: var(--violet-dark); }
.site-footer-links .site-footer-admin:hover { background: var(--violet-tint); }
.site-footer-note { max-width: 1160px; margin: 1.6rem auto 0; padding-top: 1rem; border-top: 1px solid #f0edf5; color: #9a92a8; font-size: .72rem; }
@media (max-width: 540px) {
    .site-footer-inner { flex-direction: column; align-items: flex-start; }
    .site-footer-brand p { display: none; }
}

/* Navegación móvil tipo app, compartida por todas las páginas de lectores. */
.mobile-tab-bar, .mobile-menu-heading, .app-header .app-nav > .mobile-extra-link { display: none; }
.app-header .app-nav > a > svg { display: none; }
@media (max-width: 720px) {
    body:has(.mobile-tab-bar) { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    html:has(.mobile-tab-bar) { scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
    .app-header { position: sticky; top: 0; z-index: 30; }
    .app-header-inner { min-height: 64px; padding: .5rem 1rem; gap: .75rem; }
    .app-header .brand-logo { height: 29px; }
    .app-header .user-menu-toggle { min-width: 60px; height: 44px; justify-content: center; gap: .25rem; padding: 0 .4rem; border: 1px solid #e8e0f2; border-radius: 999px; background: #faf7ff; }
    .app-header .avatar { width: 32px; height: 32px; }
    .app-header .user-menu-label { display: none; }
    .app-header .user-menu-chevron { display: inline-block; color: var(--violet); }
    .app-header .user-menu-toggle[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }
    .mobile-tab-bar { position: fixed; inset: auto 0 0; z-index: 50; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .15rem; padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e9e1f3; background: #fffffff5; box-shadow: 0 -4px 24px #291b4a0a; backdrop-filter: blur(16px); font-family: 'Montserrat', sans-serif; }
    .mobile-tab-bar > a, .mobile-tab-bar > button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .25rem; min-height: 58px; min-width: 0; padding: .35rem .1rem; border: 0; border-radius: 12px; background: transparent; color: #756b89; font: 500 .6rem/1.2 'Montserrat', sans-serif; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobile-tab-bar svg { width: 23px; height: 23px; }
    .mobile-tab-bar > [aria-current], .mobile-tab-bar > .is-current, .mobile-tab-bar > [aria-expanded='true'] { color: #7543ed; background: #f0e9ff; font-weight: 700; }
    .mobile-tab-bar > :focus-visible { outline: 2px solid #8051ff; outline-offset: -2px; }
    .app-header .app-nav { position: fixed; inset: auto .65rem calc(82px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 170px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 1rem; border: 1px solid #e7dff2; border-radius: 22px; background: #fff; box-shadow: 0 -8px 50px #23103e26; }
    .app-header .app-nav:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .mobile-menu-heading { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 0 .6rem; color: #171344; font-size: .85rem; }
    .mobile-menu-heading button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f6f1fc; color: #6c5c84; font-size: 1.6rem; cursor: pointer; }
    .app-header .app-nav > a { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .7rem; border: 1px solid #eee7f5; border-radius: 12px; color: #5b506e; font-size: .75rem; background: #fcfaff; }
    .app-header .app-nav > a > svg { display: block; width: 21px; height: 21px; flex-shrink: 0; color: #8051ff; }
    .app-header .app-nav > a[aria-current] { color: #7040e6; background: #f0e8ff; border-color: #d4bfff; }
    .app-header .app-nav > .mobile-extra-link { display: flex; grid-column: 1 / -1; }
    .app-header .user-menu-dropdown { position: fixed; top: 72px; right: .65rem; left: .65rem; width: auto; min-width: 0; max-height: calc(100dvh - 165px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; border-radius: 18px; padding: .6rem; }
    .app-header .user-menu-dropdown a { min-height: 48px; display: flex; align-items: center; border-radius: 10px; }
    .app-header .user-menu-info { overflow-wrap: anywhere; }
}