/*
 * Portada pública (/): próximos eventos, casos de éxito y su modal.
 * Spec: docs/livewire/L1-portada-spec-ui.md. Se carga en css_after (después de Bootstrap y OneUI).
 * TODO valor en px: el layout fija html{font-size:9pt} (root 12px), un rem acá no es 16px.
 * Ojo con OneUI: `.content p{margin-bottom:...}` (0,1,1) le gana a una clase sola; los <p> de la
 * portada que fijan margen van con dos clases.
 */

:root {
    --portada-gris: #4C5155;
    --portada-violeta: #AFA6D6;
    --portada-tinta: #373737;
    --portada-carga: #ECEAF5;
    --portada-foco-claro: #5B4E9A;   /* 6,99:1 sobre blanco */
    --portada-foco-oscuro: #FFFFFF;  /* 8,0:1 sobre #4C5155 */
    --portada-fuente-titulos: "Source Sans Pro", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Secciones: reciben foco por programa (anclas), pero no son paradas del Tab ni dibujan anillo. */
[id^="landing-contenedor-"]:focus {
    outline: none;
}

/* ===================== Próximos eventos ===================== */

.landing-eventos-titulo {
    font-family: var(--portada-fuente-titulos);
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    margin: 0 0 6px;
    letter-spacing: normal;
}

/* Estado sin eventos / sin resultados: texto blanco en itálica sobre la banda gris. */
.landing-eventos-vacio {
    font-family: var(--portada-fuente-titulos);
    font-weight: 500;
    font-style: italic;
    color: #fff;
    text-align: center;
    padding: 108px 0 114px;
}
.landing-eventos-vacio .landing-eventos-vacio__titulo {
    font-size: 18px;
    line-height: 21.6px;
    margin: 0 0 6px;
}
.landing-eventos-vacio .landing-eventos-vacio__texto {
    font-size: 21px;
    line-height: 25.2px;
    margin: 0;
}
.landing-eventos-vacio a,
.landing-eventos-vacio a:hover {
    color: #fff;
    text-decoration: underline;
}
.landing-eventos-vacio a:focus-visible {
    outline: 3px solid var(--portada-foco-oscuro);
    outline-style: solid !important; /* oneui.css: a:focus{outline-style:none !important} */
    outline-offset: 2px;
    border-radius: 2px;
}
.landing-eventos-vacio--busqueda {
    padding: 48px 0 60px;
}
.landing-eventos-vacio__titulo [data-eventos-consulta] {
    overflow-wrap: anywhere;
}
.landing-eventos-vacio__accion {
    font: inherit;
    color: #fff;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0 4px;
    min-height: 44px;
    cursor: pointer;
}
.landing-eventos-vacio__accion:focus {
    outline: none;
}
.landing-eventos-vacio__accion:focus-visible {
    outline: 3px solid var(--portada-foco-oscuro);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Buscador: el anillo va en la píldora, no en el input. */
.landing-eventos-buscador:focus-within {
    outline: 3px solid var(--portada-foco-oscuro);
    outline-offset: 2px;
}
.landing-eventos-buscador .form-control:focus {
    box-shadow: none;
}

/* Filtro: el ítem del slider es display:flex y le ganaría a [hidden]. */
[data-evento-item][hidden] {
    display: none !important;
}
/* Sin resultados: se ocultan las dos listas. No con [hidden]: d-md-block/d-md-none (!important) empatan y ganan por orden. */
.landing-eventos.is-sin-resultados .landing-eventos-lista-mobile,
.landing-eventos.is-sin-resultados .landing-eventos-slider {
    display: none !important;
}

/* Foco de "VER DETALLES": la tarjeta tiene overflow:hidden, el anillo va hacia adentro. */
.evento-boton-vanna:focus-visible {
    outline: 3px solid var(--portada-foco-oscuro) !important;
    outline-offset: -6px;
    box-shadow: none;
}

/* Slider casero (flexbox + overflow-x + scroll-snap). Las flechas hacen scrollBy desde public/js/portada.js. */
.landing-eventos-slider {
    position: relative;
    padding: 0 56px;
}
.landing-eventos-slider-container {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 8px 0 16px 0;
    gap: 18px;
    overflow-x: auto;
    /* Centrada sin JS (sin saltos al cargar); `safe` vuelve al inicio si desborda. Safari < 17.6 descarta
       `safe` y se queda con flex-start: lo cubre la clase .is-centrado que pone portada.js. */
    justify-content: safe center;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.landing-eventos-slider-container::-webkit-scrollbar {
    display: none;
}
.landing-eventos-slider.is-centrado .landing-eventos-slider-container {
    justify-content: center;
}
.landing-eventos-slider-item {
    flex: 0 0 calc((100% - 36px) / 3);
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
}
.landing-eventos-slider-item .carta-evento-vanna {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
@media (max-width: 1199.98px) {
    .landing-eventos-slider-item {
        flex-basis: calc((100% - 18px) / 2);
    }
}
@media (max-width: 991.98px) {
    .landing-eventos-slider {
        padding: 0 48px;
    }
    .landing-eventos-slider-item {
        flex-basis: 100%;
    }
}

.landing-eventos-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: #4a4a4a;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.landing-eventos-slider-nav[hidden] {
    display: none !important;
}
.landing-eventos-slider-nav:hover {
    background: #f5f5f5;
    transform: translateY(-50%) scale(1.06);
}
.landing-eventos-slider-nav:focus {
    outline: none;
}
.landing-eventos-slider-nav:focus-visible {
    outline: 3px solid var(--portada-foco-oscuro);
    outline-offset: 2px;
}
/* aria-disabled y no disabled: con disabled, llegar al final con el foco en la flecha lo tiraba a <body>. */
.landing-eventos-slider-nav[aria-disabled="true"],
.landing-eventos-slider-nav[aria-disabled="true"]:hover {
    opacity: .4;
    cursor: default;
    box-shadow: none;
    background: #ffffff;
    transform: translateY(-50%);
}
.landing-eventos-slider-nav-prev {
    left: 4px;
}
.landing-eventos-slider-nav-next {
    right: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .landing-eventos-slider-container {
        scroll-behavior: auto;
    }
    .landing-eventos-slider-nav {
        transition: none;
    }
}

/* ===================== Casos de éxito ===================== */

/* El <p> de antes pasó a <h2>: mismo aspecto (el tamaño lo sigue dando header-vanna-1 con !important). */
.casos-exito-titulo {
    font-family: inherit;
    line-height: 1.6;
    letter-spacing: normal;
}

/* Tile = botón real. El cuadrado (25vw / 20vw / 15vw) lo da .caso-exito-contenedor-vanna. */
.caso-exito-boton {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--portada-carga);
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.caso-exito-boton--sin-imagen {
    background: var(--portada-gris);
}
.caso-exito-boton__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Replica el <p> de OneUI de antes (.content p: 12px <768, 22,5px >=768). */
.caso-exito-boton__etiqueta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    display: block;
    text-align: center;
    line-height: 1.6;
    margin: 0 0 12px;
}
@media (min-width: 768px) {
    .caso-exito-boton__etiqueta {
        margin-bottom: 22.5px;
    }
}
.caso-exito-boton__etiqueta .badge {
    max-width: 70%;
}
/* En reposo, mosaico violeta; en hover y en foco de teclado se destapa el color con la etiqueta. */
.caso-exito-boton:hover .caso-exito-boton__img--violeta,
.caso-exito-boton:focus-visible .caso-exito-boton__img--violeta {
    opacity: 0;
}
/* Foco: doble anillo hacia adentro por encima de las fotos (un outline queda tapado o se corta en el borde). */
.caso-exito-boton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}
.caso-exito-boton:focus {
    outline: none;
}
.caso-exito-boton:focus-visible::after {
    border: 3px solid var(--portada-foco-claro);
    box-shadow: inset 0 0 0 3px #fff;
}

/* Durante la transición los tiles se mueven bajo el cursor: un doble clic en "ver más" abría un modal. */
#collapseCasosExito.collapsing {
    pointer-events: none;
}

.casos-exito-ver-mas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}
.casos-exito-ver-mas:focus {
    box-shadow: 4px 5px 5px 0 rgba(48, 48, 48, .72); /* que el foco de Bootstrap no borre la sombra de marca */
}
.casos-exito-ver-mas:focus-visible {
    outline: 3px solid var(--portada-foco-claro);
    outline-offset: 2px;
}

/* ===================== Modal del caso ===================== */

.caso-exito-modal__imagen {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(420px, 60vh);
    object-fit: contain;
    margin: 0 auto;
}
.caso-exito-modal__descripcion {
    white-space: pre-line;
}
.caso-exito-modal__fechas {
    font-size: 12px;
}
/* El modal vive fuera de .content: se replican los márgenes de párrafo que tenía adentro. */
.caso-exito-modal .card-text:not(:last-child) {
    margin-bottom: 12px;
}
@media (min-width: 768px) {
    .caso-exito-modal .card-text:not(:last-child) {
        margin-bottom: 22.5px;
    }
}
/* Con el prefijo del modal: `button.close` de Bootstrap (0,1,1) pisa background/opacity de una clase sola. */
.caso-exito-modal .caso-exito-modal__cerrar {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--portada-tinta);
    opacity: 1;
    text-shadow: none;
}
.caso-exito-modal .caso-exito-modal__cerrar:hover,
.caso-exito-modal .caso-exito-modal__cerrar:not(:disabled):not(.disabled):hover {
    color: #000;
    opacity: 1;
}
/* Bootstrap baja la opacidad a .75 en foco (y con ella el anillo). */
.caso-exito-modal .caso-exito-modal__cerrar:not(:disabled):not(.disabled):focus {
    opacity: 1;
}
.caso-exito-modal__cerrar:focus {
    outline: none;
}
.caso-exito-modal__cerrar:focus-visible {
    outline: 3px solid var(--portada-foco-claro);
    outline-offset: 2px;
}
/* El × es absoluto: el título le reserva lugar donde lo tiene encima (columna de texto desde md, y en
   cualquier ancho cuando no hay imagen). Sin esto tapaba el final de títulos largos. */
@media (min-width: 768px) {
    .caso-exito-modal [data-caso-modal-titulo] {
        padding-right: 32px;
    }
}
.caso-exito-modal--sin-imagen [data-caso-modal-titulo] {
    padding-right: 32px;
}
#casoExitoModal:focus {
    outline: none;
}
.caso-exito-modal--sin-imagen [data-caso-modal-imagen-col] {
    display: none;
}
.caso-exito-modal--sin-imagen [data-caso-modal-texto-col] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0 !important;
}