/* Paleta común. Las reglas de componentes públicos requieren .public-page. */
.public-page,
.private-page {
    --public-background: #F3EEE4;
    --public-surface: #FFFCF7;
    --public-surface-soft: #F7F2E8;
    --public-ink: #202326;
    --public-accent: #FFC400;
    --public-accent-hover: #E6B000;
    --public-accent-text: #705500;
    --public-muted: #59564F;
    --public-border: #D8CEBD;
    --public-control-border: #8B8172;
    --public-focus: #795B00;
    --public-surface-hover: #FFF5D6;
    --public-ink-rgb: 32, 35, 38;
    --public-muted-rgb: 89, 86, 79;
    --public-surface-rgb: 255, 252, 247;
}

.public-page {
    /* Bootstrap 5.3: las variables se heredan únicamente en estas vistas. */
    --bs-body-bg: var(--public-surface);
    --bs-body-color: var(--public-ink);
    --bs-body-color-rgb: var(--public-ink-rgb);
    --bs-secondary-color: var(--public-muted);
    --bs-secondary-color-rgb: var(--public-muted-rgb);
    --bs-tertiary-color: var(--public-muted);
    --bs-tertiary-color-rgb: var(--public-muted-rgb);
    --bs-tertiary-bg: var(--public-surface);
    --bs-tertiary-bg-rgb: var(--public-surface-rgb);
    --bs-light-rgb: var(--public-surface-rgb);
    --bs-dark-rgb: var(--public-ink-rgb);
    --bs-emphasis-color: var(--public-ink);
    --bs-emphasis-color-rgb: var(--public-ink-rgb);
    --bs-border-color: var(--public-border);
    --bs-link-color: var(--public-ink);
    --bs-link-hover-color: var(--public-accent-text);
    background-color: var(--public-background);
    color: var(--public-ink);
}

/* Superficies editoriales: no seleccionar imágenes, carruseles ni planos SVG. */
.public-page :is(.card, .home-event-card, .home-event-link, .row-featurette,
    .info-evento-box, .videos-container, .paso-card, .home-event-calendar,
    .home-event-notice, .home-event-panel, .ficha-acciones, .evento-movil-acciones) {
    background-color: var(--public-surface);
    color: var(--public-ink);
    border-color: var(--public-border);
}

/* Estas reglas anteriores y las utilidades Bootstrap ya usan !important. */
.public-page .info-evento-box {
    border-color: var(--public-border) !important;
}
.public-page .card.barra-card,
.public-page .card.barra-card .card-body {
    background-color: var(--public-surface) !important;
}
.public-page .precio { color: var(--public-accent-text); }

.public-page :is(.home-event-media, .home-event-photo-fallback, .ficha-foto-alternativa, .paso-img) {
    background-color: var(--public-background);
}
.public-page :is(.home-event-hours, .form-label) { color: var(--public-muted); }
.public-page :is(.home-event-weekday, .user-avatar) {
    background-color: var(--public-accent);
    color: var(--public-ink);
}
.public-page .home-event-notice { border-top-color: var(--public-accent); }
.public-page a:hover {
    background-color: var(--public-accent);
    color: var(--public-ink);
}
.public-page .home-event-link:hover {
    background-color: var(--public-surface-hover);
    border-color: var(--public-focus);
}

/* Mantener oscuros la cabecera y su menú móvil. */
.public-page .navbar.bg-dark,
.public-page #mainNavbarOffcanvas.text-bg-dark {
    background-color: var(--public-ink) !important;
}
.public-page .navbar :is(.nav-link, .navbar-brand):hover {
    color: var(--public-ink);
    background-color: var(--public-accent);
}
.public-page :is(.social-icon-navbar, .social-icon-contact):hover svg {
    background-color: var(--public-accent);
    fill: var(--public-ink);
}

/* Corregir el hover genérico de enlaces de carousel.css en botones Bootstrap:
   conservar el significado de success/danger/secondary y sus estados. */
.public-page .btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.public-page .btn-warning {
    --bs-btn-color: var(--public-ink);
    --bs-btn-bg: var(--public-accent);
    --bs-btn-border-color: var(--public-accent);
    --bs-btn-hover-color: var(--public-ink);
    --bs-btn-hover-bg: var(--public-accent-hover);
    --bs-btn-hover-border-color: var(--public-accent-hover);
    --bs-btn-active-color: var(--public-ink);
    --bs-btn-active-bg: var(--public-accent-hover);
    --bs-btn-active-border-color: var(--public-accent-hover);
    --bs-btn-disabled-color: var(--public-ink);
    --bs-btn-disabled-bg: var(--public-accent);
    --bs-btn-disabled-border-color: var(--public-accent);
}
.public-page .btn-outline-warning {
    --bs-btn-color: var(--public-accent-text);
    --bs-btn-border-color: var(--public-accent-text);
    --bs-btn-hover-color: var(--public-ink);
    --bs-btn-hover-bg: var(--public-accent);
    --bs-btn-hover-border-color: var(--public-accent-text);
    --bs-btn-active-color: var(--public-ink);
    --bs-btn-active-bg: var(--public-accent-hover);
    --bs-btn-active-border-color: var(--public-accent-text);
    --bs-btn-disabled-color: var(--public-muted);
    --bs-btn-disabled-border-color: var(--public-control-border);
}
.public-page .navbar .btn-outline-warning {
    --bs-btn-color: var(--public-accent);
    --bs-btn-border-color: var(--public-accent);
}
.public-page .ya-reserva-btn.hover-yellow:hover {
    background-color: var(--public-accent) !important;
    border-color: var(--public-accent-text) !important;
    color: var(--public-ink) !important;
}

/* El foco carbón funciona sobre crema, marfil y amarillo; el menú usa amarillo. */
.public-page :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--public-ink);
    outline-offset: 2px;
}
.public-page .navbar :is(a, button):focus-visible {
    outline-color: var(--public-accent);
    outline-offset: -3px;
}
.public-page :is(.form-control, .form-select) {
    background-color: var(--public-surface);
    color: var(--public-ink);
}
.public-page :is(.form-control, .form-select, .form-check-input):not(.is-invalid):not(.is-valid):not(.was-validated *) {
    border-color: var(--public-control-border);
}
.public-page :is(.form-control, .form-select):disabled {
    background-color: var(--public-background);
    color: var(--public-muted);
}
.public-page .form-control::placeholder { color: var(--public-muted); opacity: 1; }
.public-page .form-check-input:checked:not(.is-invalid):not(.is-valid):not(.was-validated *) {
    background-color: var(--public-ink);
    border-color: var(--public-ink);
}

/* Modales públicos y panel de Inicio comparten marfil, sin cambiar geometría,
   backdrop, z-index, scroll, safe-area ni el pie de acciones móvil. */
.public-page .modal-content {
    --bs-modal-bg: var(--public-surface);
    --bs-modal-color: var(--public-ink);
}
.public-page #cookieConsent {
    background-color: var(--public-surface) !important;
}
.public-page #cookieConsent button {
    background-color: var(--public-accent) !important;
    color: var(--public-ink) !important;
}
.public-page #cookieConsent button:hover {
    background-color: var(--public-accent-hover) !important;
}
.public-page #cookieConsent a { color: var(--public-ink); }

/* Programación de escritorio: solo presentación. Se conservan las columnas,
   anclas, alturas, scroll independiente, márgenes y espaciado existentes. */
@media (min-width: 768px) {
    .public-page.programacion-page .programacion-evento {
        background-color: var(--public-surface);
        border-color: var(--public-border);
        box-shadow: 0 6px 18px rgb(50 40 24 / 6%);
    }

    .public-page.programacion-page .programacion-evento :is(.info-evento-box, .videos-container) {
        background-color: var(--public-surface-soft);
        border-color: var(--public-border) !important;
        box-shadow: 0 2px 5px rgb(50 40 24 / 3%);
    }

    .public-page.programacion-page .programacion-indice .bg-body-tertiary {
        box-shadow: inset 0 0 0 1px var(--public-border);
    }

    .public-page.programacion-page .programacion-indice .list-unstyled > li > a {
        background-color: var(--public-surface);
        color: var(--public-ink);
    }

    .public-page.programacion-page .programacion-indice .list-unstyled > li > a:hover,
    .public-page.programacion-page .programacion-indice .list-unstyled > li > a:focus-visible {
        background-color: var(--public-surface-hover);
        box-shadow: inset 3px 0 var(--public-accent);
    }

    .public-page.programacion-page .programacion-indice .list-unstyled > li > a:focus-visible {
        outline: 3px solid var(--public-focus);
        outline-offset: -3px;
    }

    /* Encajar la foto original completa dentro de sus cajas actuales.
       No cambiar src, dimensiones, flotantes ni límites de altura. */
    .public-page.programacion-page .programacion-indice img,
    .public-page.programacion-page .programacion-evento .featurette-image {
        object-fit: contain;
    }
}