/* =========================================================
   Planeta Cierzo · capa de interfaz (móvil, accesibilidad,
   transiciones y modo oscuro). Se carga DESPUÉS de los demás
   CSS para poder ajustar reglas existentes.
   ========================================================= */

/* ───────── Accesibilidad ───────── */
:focus-visible {
    outline: 3px solid rgba(157, 43, 36, .55);
    outline-offset: 2px;
}

.pc-skip {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 20000;
    padding: .7rem 1rem;
    color: #fff;
    background: #211c19;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-200%);
}

.pc-skip:focus {
    transform: translateY(0);
}

main:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Objetivos táctiles de al menos 44 px en acciones habituales */
.share-button, .lugar-compartir-boton, .event-calendar-download, .event-calendar-google,
.favorito-evento-boton, .tag-volver, .page-back-button, .mis-favoritos-volver {
    min-height: 44px;
}

/* Bloqueo de scroll con diálogos / hojas abiertas */
html.pc-bloqueo {
    overflow: hidden;
}

/* ───────── Transición suave entre páginas (navegadores compatibles) ───────── */
@view-transition {
    navigation: auto;
}

::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .16s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* ───────── Barra inferior (móvil) ───────── */
.pc-bottomnav,
.pc-top-mas {
    display: none;
}

@media (max-width: 900px) {
    body:has(.pc-bottomnav) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .pc-bottomnav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 9000;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #fff;
        border-top: 1px solid #e6dccf;
        box-shadow: 0 -6px 24px rgba(20, 15, 12, .09);
    }

    .pc-bn {
        display: flex;
        min-height: 60px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        color: #5a5149;
        background: none;
        border: 0;
        font: inherit;
        font-size: .68rem;
        font-weight: 750;
        line-height: 1.1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .pc-bn svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pc-bn.activo {
        color: #9d2b24;
    }

    .pc-bn.activo svg {
        stroke-width: 2.4;
    }

    /* La barra superior queda solo con el logo; los accesos pasan abajo. */
    .menu-publico-principal .menu-publico-acceso.menu-publico-acceso,
    .menu-publico-principal .menu-publico-redes.menu-publico-redes {
        display: none !important;
    }

    .menu-publico-principal .menu-publico-principal-inner.menu-publico-principal-inner {
        display: flex !important;
        min-height: 54px !important;
        align-items: center;
        justify-content: space-between;
    }

    /* Botón «Más» (menú) de la barra superior y de la cabecera de portada */
    .pc-top-mas {
        display: grid;
        width: 46px;
        height: 46px;
        margin-left: auto;
        padding: 0;
        place-items: center;
        color: #211c19;
        background: none;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .pc-top-mas svg {
        width: 26px;
        height: 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .pc-top-mas-hero {
        position: absolute;
        top: .45rem;
        right: .55rem;
        z-index: 3;
        margin: 0;
        color: #fff;
        background: rgba(17, 17, 28, .55);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    /* En la portada el logo ya está en la cabecera. */
    .portada-hero-actual + .menu-publico-principal {
        display: none !important;
    }

    /* El botón de subir no debe quedar tapado por la barra. */
    .scroll-to-top.scroll-to-top {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ───────── Hoja «Más» y hojas inferiores ───────── */
dialog.pc-sheet {
    width: min(560px, 100%);
    max-width: 100%;
    max-height: 86dvh;
    margin: auto auto 0;
    padding: 0;
    overflow: auto;
    color: #211c19;
    background: #fff;
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(12, 10, 9, .3);
}

dialog.pc-sheet::backdrop {
    background: rgba(12, 10, 9, .55);
}

@media (min-width: 901px) {
    dialog.pc-sheet {
        margin: auto;
        border-radius: 22px;
    }
}

.pc-sheet-inner {
    display: grid;
    gap: 1.1rem;
    padding: 1rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
}

.pc-sheet-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pc-sheet-cabecera h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
}

.pc-sheet-cerrar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: inherit;
    background: #f3ece3;
    border: 0;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.pc-sheet-enlaces {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.pc-sheet-enlaces a {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: .7rem .9rem;
    color: inherit;
    background: #faf6f0;
    border: 1px solid #eadfd1;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
}

.pc-sheet-bloque {
    display: grid;
    gap: .55rem;
}

.pc-sheet-bloque > strong {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7a6f64;
}

.pc-segmentos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
}

.pc-segmentos button, .pc-sheet-accion {
    min-height: 46px;
    padding: .5rem .7rem;
    color: inherit;
    background: #faf6f0;
    border: 1px solid #eadfd1;
    border-radius: 12px;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
}

.pc-segmentos button[aria-pressed="true"] {
    color: #fff;
    background: #9d2b24;
    border-color: #9d2b24;
}

.pc-sheet-nota {
    margin: 0;
    color: #6d635a;
    font-size: .85rem;
}

/* ───────── Galería ampliada (JS) ───────── */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(12, 10, 9, .92);
}

.gallery-lightbox-content {
    position: relative;
    display: flex;
    width: min(1200px, 100%);
    height: calc(100dvh - 3rem);
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-content > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 3rem);
    object-fit: contain;
    touch-action: pan-y;
}

.gallery-lightbox-close, .gallery-lightbox-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 0;
    color: #fff;
    background: rgba(24, 21, 19, .76);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    cursor: pointer;
}

.gallery-lightbox-close { top: .75rem; right: .75rem; width: 48px; height: 48px; font-size: 1.7rem; }
.gallery-lightbox-nav { top: 50%; width: 52px; height: 52px; font-size: 2.2rem; transform: translateY(-50%); }
.gallery-lightbox-prev { left: .75rem; }
.gallery-lightbox-next { right: .75rem; }

.gallery-lightbox-counter {
    position: absolute;
    bottom: .75rem;
    left: 50%;
    padding: .4rem .75rem;
    color: #fff;
    background: rgba(24, 21, 19, .76);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    transform: translateX(-50%);
}

@media (max-width: 700px) {
    .gallery-lightbox { padding: .5rem; }
    .gallery-lightbox-content { height: calc(100dvh - 1rem); }
    .gallery-lightbox-content > img { max-height: calc(100dvh - 1rem); }
}

/* ───────── Filtros de la agenda: hoja inferior en móvil ───────── */
.pc-filtros-barra, .pc-filtros-cabecera, .pc-filtros-pie {
    display: none;
}

@media (max-width: 760px) {
    .pc-filtros-barra {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .6rem 0;
        background: #fff;
    }

    .pc-filtros-abrir {
        display: inline-flex;
        min-height: 46px;
        align-items: center;
        gap: .5rem;
        padding: .55rem 1.1rem;
        color: #fff;
        background: #211c19;
        border: 0;
        border-radius: 999px;
        font: inherit;
        font-weight: 850;
        cursor: pointer;
    }

    .pc-filtros-abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .pc-filtros-abrir .pc-punto { width: 9px; height: 9px; background: #e8a13b; border-radius: 50%; }
    .pc-filtros-resumen { color: #655d56; font-size: .9rem; font-weight: 700; }

    /* El panel de filtros solo se ve como hoja cuando está abierto. */
    .agenda-page .agenda-filters.agenda-filters { display: none; }

    body.pc-filtros-abiertos .agenda-page .agenda-filters.agenda-filters {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 15000;
        display: block;
        max-height: 88dvh;
        margin: 0;
        padding: 0 1rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
        overflow: auto;
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -14px 44px rgba(12, 10, 9, .35);
    }

    body.pc-filtros-abiertos::after {
        position: fixed;
        inset: 0;
        z-index: 14000;
        content: "";
        background: rgba(12, 10, 9, .55);
    }

    body.pc-filtros-abiertos .pc-filtros-cabecera {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0 .7rem;
        background: #fff;
    }

    .pc-filtros-cabecera strong { font-size: 1.15rem; font-weight: 900; }
    .pc-filtros-cabecera button {
        width: 44px; height: 44px; color: inherit; background: #f3ece3;
        border: 0; border-radius: 50%; font-size: 1.5rem; cursor: pointer;
    }

    body.pc-filtros-abiertos .pc-filtros-pie {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 15001;
        display: block;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #eadfd1;
    }

    .pc-filtros-pie button {
        width: 100%; min-height: 50px; color: #fff; background: #9d2b24;
        border: 0; border-radius: 14px; font: inherit; font-weight: 900; cursor: pointer;
    }

    /* Campos más cómodos en táctil (evita el zoom automático de iOS). */
    .agenda-filters input, .agenda-filters select { font-size: 16px; min-height: 46px; }
}

/* ───────── Instalación / varios ───────── */
[data-pc-install][hidden], [data-pc-install-ios][hidden] { display: none !important; }

/* ───────── Modo oscuro (beta) ─────────
   Se obtiene invirtiendo el documento y devolviendo a su color
   original las imágenes y vídeos. Es una solución global que no
   obliga a tocar cada hoja de estilos; conviene revisarla pantalla
   a pantalla antes de activarla por defecto. */
html[data-theme="dark"] {
    color-scheme: dark;
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] img,
html[data-theme="dark"] picture,
html[data-theme="dark"] video,
html[data-theme="dark"] canvas,
html[data-theme="dark"] iframe,
html[data-theme="dark"] .leaflet-container,
html[data-theme="dark"] [style*="background-image"],
html[data-theme="dark"] .pc-conservar-color {
    filter: invert(1) hue-rotate(180deg);
}

/* picture contiene una img que ya se corrige: no corregir dos veces. */
html[data-theme="dark"] picture img {
    filter: none;
}