/* =========================================================
   Boletín digital: modal para compartir, colores de marca y
   carrusel móvil.
   ========================================================= */

/* ---- Modal centrado ----
   style.min.css trae un centrado antiguo (.modal:before + .modal-dialog
   inline-block) que anula el .modal-dialog-centered de Bootstrap 5. */
#shareModal { text-align: initial; }
#shareModal:before { content: none; display: none; }
#shareModal .modal-dialog { display: flex; vertical-align: initial; }

/* ---- Color de marca ---- */
.btn-marca,
.btn-marca-outline {
    border: 1px solid var(--color-primario, #bf0d0d);
    transition: background-color .2s, color .2s, border-color .2s;
}
.btn-marca { background-color: var(--color-primario, #bf0d0d); color: #fff; }
.btn-marca:hover,
.btn-marca:focus { background-color: #9a0a0a; border-color: #9a0a0a; color: #fff; }

.btn-marca-outline { background-color: transparent; color: var(--color-primario, #bf0d0d); }
.btn-marca-outline:hover,
.btn-marca-outline:focus { background-color: var(--color-primario, #bf0d0d); color: #fff; }

.btn-marca:focus,
.btn-marca-outline:focus {
    border-color: var(--color-primario, #bf0d0d);
    box-shadow: 0 0 0 .2rem rgba(191, 13, 13, .25);
}

.link-marca { color: var(--color-primario, #bf0d0d); text-decoration: none; }
.link-marca:hover,
.link-marca:focus { color: #9a0a0a; text-decoration: underline; }

/* ---- Tarjetas ----
   boletin.css carga antes que style.min.css: se usa más especificidad.
   La portada se adapta a su columna en vez del ancho fijo de dflip/style.min. */
.boletin-carrusel ._df_thumb {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 1.5rem auto 0;
}
.boletin-carrusel h4 { margin-bottom: .25rem !important; line-height: 1.25; }

/* ---- Puntos + paginador: apilados y centrados ---- */
.boletin-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}
.boletin-nav .pagination { margin: 0; }

/* ---- Tablet y laptop: más aire entre tarjetas ---- */
@media (min-width: 768px) {
    .boletin-carrusel { --bs-gutter-x: 2rem; justify-content: center; }
    .boletin-nav { margin-top: 1rem; }
}
@media (min-width: 1200px) {
    .boletin-carrusel { --bs-gutter-x: 2.5rem; }
}

/* ---- Carrusel solo en móvil (< 768px) ----
   Scroll horizontal con "snap": se ve un boletín y asoma el siguiente. */
@media (max-width: 767.98px) {
    .boletin-carrusel {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .boletin-carrusel::-webkit-scrollbar { display: none; }
    .boletin-carrusel > [class*="col-"] {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
    }
    .boletin-carrusel > [class*="col-"] > .mb-5 { margin-bottom: 1rem !important; }
    .boletin-carrusel ._df_thumb { max-width: 300px; }

    /* Área táctil de 24px; el punto visible se dibuja con ::before */
    .boletin-dots { display: flex; align-items: center; }
    .boletin-dots button {
        display: flex; align-items: center; justify-content: center;
        min-width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
    }
    .boletin-dots button::before {
        content: ""; width: 8px; height: 8px; border-radius: 50%;
        background-color: #ccc; transition: width .2s, background-color .2s;
    }
    .boletin-dots button.active::before { width: 22px; border-radius: 4px; background-color: var(--color-primario, #bf0d0d); }
}