/* ──────────────────────────────────────────────────────────────────────────
   Noticias — área de imagen
   - .noticia-card             → tamaño FIJO 551x420 (home)
   - .noticia-card-fullwidth   → ancho 100% del card, alto 300 (listado /noticias)

   La imagen NO se estira: usa object-fit:contain para mostrarse íntegra y los
   espacios vacíos se rellenan con la misma imagen escalada y borrosa (técnica
   "blur fill" — produce un fondo del color predominante de la foto).
   La URL se pasa al CSS via la custom property --noticia-bg desde el PHP.

   Importante: overflow:hidden vive en el <a> (no en .blog-image) para que el
   badge .date pueda seguir sobresaliendo (en card-style7 el .date está
   posicionado con bottom:-15px y antes quedaba clippeado).
   ────────────────────────────────────────────────────────────────────────── */

.noticia-card .blog-image {
    position: relative;
    width: 551px;
    height: 420px;
    min-height: 420px;
    flex-shrink: 0; /* el card es flex column; sin esto el blog-image puede achicarse */
}

/* Encadenado para sumar specificity y ganarle a cualquier .card-styleX
   .blog-image del template que pudiera traer el ancho default. */
.noticia-card.noticia-card-fullwidth .blog-image {
    width: 100%;
    height: 300px;
    min-height: 300px;
}

.noticia-card .blog-image > a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f4f4f4; /* fallback si la imagen no carga */
}

/* Fondo: la misma imagen, escalada para llenar (cover) y muy borrosa.
   transform:scale(1.15) oculta los bordes claros del blur. */
.noticia-card .blog-image > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noticia-bg);
    background-size: cover;
    background-position: center;
    filter: blur(25px);
    transform: scale(1.15);
    z-index: 0;
}

/* Foreground: imagen real, contenida sin deformación. */
.noticia-card .blog-image > a > img,
.noticia-card .blog-image img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   Noticias — cards de altura uniforme con bajada difuminada (solo /noticias)
   La fila del Bootstrap ya estira las columnas (align-items:stretch default),
   entonces basta con que la card crezca al 100% de su columna y que el
   card-body sea un flex column para repartir el espacio.
   ────────────────────────────────────────────────────────────────────────── */

.noticia-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.noticia-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* La bajada toma todo el espacio sobrante del card-body. Si el texto excede
   ese espacio se recorta con overflow:hidden y se desvanece gradualmente
   con un mask-image (el degradado afecta al contenido pintado: si el texto
   es más corto que el box, simplemente no se ve el fade). */
.noticia-card .noticia-excerpt {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    margin-bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

/* ──────────────────────────────────────────────────────────────────────────
   Lista estilo 9 invertida — número a la izquierda, texto a la derecha
   ────────────────────────────────────────────────────────────────────────── */

.list-style9-reverse li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    position: relative;
    margin-bottom: 8px;
}

.list-style9-reverse li span {
    position: static;
    width: auto;
    height: auto;
    line-height: normal;
    flex-shrink: 0;
    border: none;
    background-color: transparent;
    order: -1;
}

.list-style9-reverse li a {
    flex-grow: 1;
    text-align: right;
}

.list-style9-reverse li:hover {
    background-color: #f7b035;
    border-color: #f7b035;
}

.list-style9-reverse li:hover a {
    color: #ffffff;
}

.list-style9-reverse li:hover span {
    color: #ffffff;
}

/* ──────────────────────────────────────────────────────────────────────────
   Tarjetas de autoridades — card-body naranja con texto blanco
   ────────────────────────────────────────────────────────────────────────── */

.card-body-orange {
    background-color: #f7b035 !important;
    color: #ffffff !important;
}

.card-body-orange h4,
.card-body-orange .h5 {
    color: #ffffff !important;
}

.card-body-orange span {
    color: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Tarjetas de autoridades — imagen con margen superior y sombra en card
   ────────────────────────────────────────────────────────────────────────── */

.card-style6 {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-style6 .team-image {
    margin-top: 20px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Navbar fondo blanco permanente
   ────────────────────────────────────────────────────────────────────────── */

.navbar-default {
    background-color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.22) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Header style2 — menú raíz con mismo color que desplegables
   ────────────────────────────────────────────────────────────────────────── */

.header-style2 .navbar-nav > li > a {
    color: #6f6f6f !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Header style2 — hover naranja para menú raíz y desplegables
   ────────────────────────────────────────────────────────────────────────── */

.header-style2 .navbar-nav > li > a:hover,
.header-style2 .navbar-nav li a:hover {
    color: #f7b035 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Header style2 — dropdowns con ancho automático.
   En vez de fijar min-width como el plugin (225px / 200px que cortaban
   "Lotería de la Provincia" a dos líneas), dejamos que cada lista crezca al
   ancho del item más largo. white-space:nowrap impide que el texto wrappee.
   El submenú de 2do nivel se ancla al borde derecho del item padre con
   left:100% (en vez del margin-left:200px fijo del plugin, que asume un
   primer nivel de ~225px).
   Solo aplica en escritorio: bajo 992px el plugin convierte el menú en
   acordeón a 100% de ancho.
   ────────────────────────────────────────────────────────────────────────── */

@media screen and (min-width: 992px) {
    .header-style2 .navbar-nav li > ul {
        min-width: 0;
    }

    .header-style2 .navbar-nav li > ul a {
        white-space: nowrap;
    }

    .header-style2 .navbar-nav > li > ul > li.has-sub {
        position: relative;
    }

    .header-style2 .navbar-nav > li > ul > li.has-sub > ul {
        margin-left: 0;
    }

    .header-style2 .navbar-nav > li > ul > li.has-sub:hover > ul {
        left: 100%;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Page Title Section — overlay con gradiente (transparente arriba, oscuro abajo)
   ────────────────────────────────────────────────────────────────────────── */

.page-title-section {
    position: relative;
}

.page-title-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    z-index: 1;
    pointer-events: none;
}

.page-title-section::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 -5px 0 rgba(255, 255, 255, 0.5), 0 -10px 0 rgba(255, 255, 255, 0.25);
}

.page-title-section h1 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.page-title-section > * {
    position: relative;
    z-index: 2;
}

/* ──────────────────────────────────────────────────────────────────────────
   Navbar Logo Shield — protege el logo del overlay del menú en mobile.
   Solo visible bajo el breakpoint de navbar-expand-lg (<992px); en escritorio
   no hay menú colapsado por lo que el degradado no debe mostrarse.
   ────────────────────────────────────────────────────────────────────────── */

.navbar-logo-shield {
    display: none;
}

@media (max-width: 991.98px) {
    .navbar-logo-shield {
        display: block;
        position: absolute;
        right: 50px;
        top: 13px;
        width: 50px;
        height: 45px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        z-index: 12399993;
        pointer-events: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   AI Chat Bot — botón flotante + ventana de chat
   Color institucional del chatbot: #40A5DD
   ────────────────────────────────────────────────────────────────────────── */

.chat-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #40A5DD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2147483646;
    transition: all 0.3s ease;
}

.chat-floating-btn:hover {
    background-color: #2d8cc4;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.chat-floating-btn i {
    color: white;
    font-size: 26px;
}

/* Backdrop oscurecedor (solo aparece en móvil — ver media query). */
.chat-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2147483646;
    animation: chatBackdropIn 0.25s ease;
}

@keyframes chatBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.chat-modal {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 380px;
    height: 560px;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    max-height: calc(var(--chat-vh, 100dvh) - 60px);
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 2147483647;
    overflow: hidden;
    animation: chatSlideUp 0.3s ease;
}

.chat-modal.active {
    display: flex;
    flex-direction: column;
}

@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.chat-modal-header {
    background-color: #40A5DD;
    color: white;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.chat-avatar {
    width: 42px;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.chat-header-text {
    min-width: 0;
}

.chat-header-text h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.chat-header-text p {
    margin: 2px 0 0 0;
    font-size: 12px;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.chat-modal-close:hover {
    opacity: 0.8;
}

/* Área scrolleable de mensajes */
.chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    background-color: #f7f7fb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-bubble {
    max-width: 80%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    animation: chatBubbleIn 0.2s ease;
}

@keyframes chatBubbleIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble p {
    margin: 0;
    white-space: pre-wrap;
}

.chat-bubble p + p {
    margin-top: 4px;
}

.chat-bubble-time {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1;
    opacity: 0.5;
    text-align: right;
}

.chat-modal-header {
    transition: background-color 0.5s ease;
}

#chatTitle,
#chatStatus {
    transition: opacity 0.5s ease-in;
}

.chat-modal-header.chat-header-transitioning {
    background-color: #95a0aa;
}

#chatTitle.chat-title-hidden,
#chatStatus.chat-status-hidden {
    opacity: 0;
}

.chat-bubble-bot {
    background-color: #ffffff;
    color: #333;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-bubble-user {
    background-color: #6FBCDF;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

/* Aviso de transferencia entre asistentes */
.chat-transferencia {
    align-self: center;
    max-width: 80%;
    font-size: 12px;
    color: #5b7a96;
    background-color: rgba(64, 165, 221, 0.10);
    border: 1px dashed rgba(64, 165, 221, 0.45);
    border-radius: 999px;
    padding: 5px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    animation: chatBubbleIn 0.2s ease;
}

.chat-transferencia i {
    color: #40A5DD;
    font-size: 13px;
}

/* Indicador "escribiendo..." */
.chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
}

.chat-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #b9b9b9;
    animation: chatTyping 1.2s infinite ease-in-out;
}

.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatTyping {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Input fijo abajo */
.chat-input-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #eee;
    background-color: #fff;
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    min-height: 38px;
    max-height: 96px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 18px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.chat-input:focus {
    outline: none;
    border-color: #40A5DD;
}

.chat-input:disabled {
    background-color: #f3f3f3;
    cursor: not-allowed;
}

.chat-send-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: #40A5DD;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background-color 0.2s, transform 0.1s;
}

.chat-send-btn:hover:not(:disabled) {
    background-color: #2d8cc4;
}

.chat-send-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.chat-send-btn:disabled {
    background-color: #a5d4ee;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 480px) {
    .chat-floating-btn {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
    }

    .chat-floating-btn i {
        font-size: 24px;
    }

    .chat-modal {
        width: auto;
        height: calc(100vh - 10px);
        height: calc(100dvh - 10px);
        height: calc(var(--chat-vh, 100dvh) - 10px);
        max-height: calc(100vh - 10px);
        max-height: calc(100dvh - 10px);
        max-height: calc(var(--chat-vh, 100dvh) - 10px);
        bottom: 5px;
        right: 5px;
        left: 5px;
    }

    /* Backdrop oscurece y bloquea la interacción con la página atrás (solo móvil). */
    .chat-modal-backdrop.active {
        display: block;
    }

    body.chat-modal-open {
        overflow: hidden;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Resultados de Quiniela / Sorteos
   Cards uniformes (height:100% sobre col Bootstrap) con header en color
   primario y tabla 2 columnas (1°-10° / 11°-20°). La fila "primera" resalta
   la cabeza del sorteo, que es el dato más buscado.
   ────────────────────────────────────────────────────────────────────────── */

.quiniela-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.quiniela-card-header {
    background: #f7b035;
    color: #fff;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.quiniela-card-header h4 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.quiniela-card-header .quiniela-sorteo-id {
    font-size: 13px;
    opacity: 0.9;
    font-weight: 500;
}

.quiniela-card-header .quiniela-sorteo-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    gap: 2px;
}

.quiniela-card-header .quiniela-sorteo-fecha {
    font-size: 12px;
    opacity: 0.85;
    font-weight: 400;
}

.quiniela-card-body {
    padding: 14px 18px 18px;
    flex-grow: 1;
}

.quiniela-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
}

.quiniela-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    font-size: 15px;
}

.quiniela-table tr:last-child td {
    border-bottom: none;
}

.quiniela-table td.pos {
    color: #999;
    font-size: 12px;
    font-weight: 600;
    width: 32px;
    text-align: right;
    padding-right: 10px;
}

.quiniela-table td.num {
    font-weight: 700;
    color: #222;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.quiniela-table tr.primera td.num {
    color: #f7b035;
    font-size: 17px;
}

.quiniela-table tr.primera td {
    background: #fff8f1;
}

/* ──────────────────────────────────────────────────────────────────────────
   Fortunata — grid 5x4 con números de 2 cifras
   Reutiliza .quiniela-card como contenedor; sólo el cuerpo cambia.
   En pantallas chicas baja a 4 columnas para que cada celda mantenga un tamaño
   legible (las celdas son cuadradas-ish con número grande).
   ────────────────────────────────────────────────────────────────────────── */

.fortunata-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

@media (max-width: 575px) {
    .fortunata-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
}

.fortunata-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 6px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fortunata-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.fortunata-cell .pos {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    line-height: 1;
    margin-bottom: 6px;
}

.fortunata-cell .num {
    font-size: 26px;
    font-weight: 700;
    color: #222;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 1px;
}

.fortunata-cell.primera {
    background: #fff8f1;
    border-color: #f7b035;
}

.fortunata-cell.primera .num {
    color: #f7b035;
}

/* ──────────────────────────────────────────────────────────────────────────
   Quini 6 — bolillas circulares
   Cada modalidad muestra 6 bolillas con números 00-45.
   ────────────────────────────────────────────────────────────────────────── */

.quini6-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 14px 4px;
}

.quini6-ball {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #f7b035;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #f7b035;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(247, 176, 53, 0.15);
    transition: transform 0.15s ease;
}

.quini6-ball:hover {
    transform: scale(1.06);
}

@media (max-width: 380px) {
    .quini6-ball {
        width: 48px;
        height: 48px;
        font-size: 17px;
    }
    .quini6-balls {
        gap: 8px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Quiniela en la home
   Sección destacada con la leyenda obligatoria (Ley 1087-Q), las 3 modalidades
   del día y 3 CTAs (sorteo en vivo / comprobar ticket / ver todos).
   Reutiliza .quiniela-card de /juegos/sorteos/resultados; sólo agrega un
   "skin" más vistoso (gradiente en el header, sombra más marcada, hover) y
   los botones grandes de acción.
   ────────────────────────────────────────────────────────────────────────── */

.quiniela-home {
    padding-top: 60px;
}

.quiniela-home-warning {
    background: linear-gradient(135deg, #2aa063, #1d7a48);
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 14px 18px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(29, 122, 72, 0.25);
    margin-bottom: 35px;
    text-transform: uppercase;
}

.quiniela-home-heading {
    text-align: center;
    margin-bottom: 35px;
}

.quiniela-home-heading h2 small {
    font-size: 60%;
    font-weight: 400;
    font-style: italic;
}

/* Variante "home" de la card: gradiente en el header, sombra más marcada
   para destacar sobre el fondo claro de la home, y micro-elevación al hover. */
.quiniela-card-home {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
}

.quiniela-card-home:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(247, 176, 53, 0.22);
}

.quiniela-card-home .quiniela-card-header {
    background: linear-gradient(135deg, #f7b035, #e89515);
    padding: 16px 22px;
}

.quiniela-card-home .quiniela-card-header h4 {
    font-size: 17px;
    text-transform: uppercase;
}

.quiniela-card-home .quiniela-card-body {
    padding: 8px 18px 14px;
}

.quiniela-card-home .quiniela-table td {
    padding: 7px 6px;
    font-size: 14.5px;
}

/* Botones de acción debajo de las 3 cards. Diseño "pill" alto con icono,
   pensado para tocarse cómodamente en mobile y para tener peso visual en
   desktop. Cada uno tiene su color para diferenciar la acción.            */
.quiniela-home-cta {
    margin-top: 10px;
}

.quiniela-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.quiniela-home-btn:hover,
.quiniela-home-btn:focus {
    transform: translateY(-2px);
    color: #fff;
    filter: brightness(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.quiniela-home-btn i {
    font-size: 18px;
}

.quiniela-home-btn-live  { background: linear-gradient(135deg, #d9342b, #a82318); }
.quiniela-home-btn-check { background: linear-gradient(135deg, #2aa063, #1d7a48); }
.quiniela-home-btn-more  { background: linear-gradient(135deg, #40A5DD, #2784bc); }

@media (max-width: 575px) {
    .quiniela-home-warning {
        font-size: 12px;
        padding: 12px 14px;
    }
    .quiniela-home-btn {
        font-size: 13.5px;
        padding: 14px 16px;
    }
}

/* Fondo gris suave para Noticias Institucionales en la home — separa
   visualmente la sección de la quiniela (que termina con los CTAs en blanco)
   sin pelearse con el resto del template. Bajamos el padding-top para acercar
   el título a los CTAs y que el corte de color no quede tan lejos del heading. */
.noticias-home-bg {
    background-color: #eef0f2;
    padding-top: 70px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Botones (.butn) — esquinas más redondeadas en todo el sitio.
   El template trae border-radius:3px (styles.css); subimos a 8px para suavizar
   el look. Se aplica a todas las variantes (.butn, .butn.border, .butn.small,
   .butn.medium, etc.) ya que comparten el selector base.
   ────────────────────────────────────────────────────────────────────────── */

.butn {
    border-radius: 8px;
}

/* Submit del formulario de contacto: borde fino negro semitransparente para
   diferenciar visualmente este CTA. Sólo aplica al botón del quform. */
.quform-submit-inner .butn {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Variante destructiva (.butn.danger) — el template no la trae; la usamos
   para acciones tipo "Anular" en los wizards de turnos. */
.butn.danger {
    background-color: #c0392b;
    color: #fff;
}
.butn.danger:hover,
.butn.danger:focus,
.butn.danger:active {
    background-color: #8e2a20;
    color: #fff;
}

/* Chip naranja con forma de píldora — replica el estilo de `.section-heading4 span`
   pero pensado para usarse como link/etiqueta autónomo (proveedores, etc.). */
.chip {
    display: inline-block;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #f7b035;
    border-radius: 10rem;
    letter-spacing: 2px;
    text-indent: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.6;
}
.chip:hover,
.chip:focus,
.chip:active {
    color: #fff;
    background: #e5a02d;
    text-decoration: none;
}

/* =========================================================================
   Secciones de portada (home) — bloques administrables desde
   /admin → Institucional → Portada. Cada sección es uno de tres tipos:
   galería (imagen grande + tira de miniaturas), noticia (imagen + bajada
   + link) o anuncio (imagen fija con el nombre sobreimpreso, sin tira ni
   rotación — reutiliza el wrapper de galería). El título del bloque viene
   del campo `titulo` de la tabla `secciones`.
   ========================================================================= */
.portada-seccion + .portada-seccion {
    padding-top: 0 !important;
}

/* =========================================================================
   Carousel de galería (portada) — REESCRITO 2026-06-19, restructurado 2026-06-19
   ─────────────────────────────────────────────────────────────────────────
   Estructura:
     .portada-galeria-carousel        tarjeta naranja (toda la sección)
       └ .portada-galeria-top         fila 1: stage izq + texto der (flex, gap 30px, padding 30px)
       │    └ .pg-stage               imagen grande (40% ancho, 280px alto, esquinas redondeadas)
       │    └ .portada-galeria-body   fecha + título en blanco a la derecha
       └ .pg-strip                    fila 2: franja celeste full-width con thumbs
            └ .pg-strip-inner
                 └ .pg-thumb x N      miniaturas 110x70

   Mismo "shape" que la tarjeta de noticia/anuncio (imagen 40% izq + texto der).
   La franja celeste va flush-bottom sin border-radius propia ni gap superior;
   hereda las esquinas redondeadas del wrapper vía overflow:hidden.
   ========================================================================= */
.portada-galeria-carousel {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #f7b035;
    box-sizing: border-box;
}

.portada-galeria-top {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    box-sizing: border-box;
}

.portada-galeria-body {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}
.portada-galeria-fecha {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 10px;
}
.portada-galeria-titulo {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.portada-galeria-bajada {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    margin: 10px 0 0;
    opacity: 0.95;
}

/* ─── Stage: imagen grande (columna izq de la fila 1) ──────────────────── */
.portada-galeria-carousel .pg-stage {
    flex: 0 0 40%;
    max-width: 40%;
    position: relative;
    height: 280px;
    padding: 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
    border-radius: 8px;
}
.portada-galeria-carousel .pg-stage-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 600ms ease;
}
.portada-galeria-carousel .pg-stage-img.is-active {
    opacity: 1;
}

/* ─── Flechas prev/next sobre la imagen grande ────────────────────────── */
.portada-galeria-carousel .pg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, transform .15s ease;
    z-index: 2;
}
.portada-galeria-carousel .pg-nav:hover,
.portada-galeria-carousel .pg-nav:focus-visible {
    background: rgba(0, 0, 0, 0.6);
    outline: none;
    transform: translateY(-50%) scale(1.06);
}
.portada-galeria-carousel .pg-nav-prev { left: 12px; }
.portada-galeria-carousel .pg-nav-next { right: 12px; }

/* ─── Strip: franja celeste con miniaturas ────────────────────────────────
   Layout BULLETPROOF — todo con !important porque venimos arrastrando bugs
   y no queremos que NINGÚN estilo del template (styles.css, bootstrap,
   defaults de <button>) lo pise:
   - .pg-strip: altura FIJA 110px, flex con align-items:center
   - .pg-thumb: 110x70, vertically-centered en la franja
   - Sin overflow-x:auto → sin scrollbar fantasma robando 6-16px verticales
   - 20px de cyan arriba y 20px abajo de cada thumb (110-70 = 40, ÷ 2)      */
.portada-galeria-carousel .pg-strip {
    background: #40A5DD !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Sin border-radius ni margin-top: la strip va flush-bottom y hereda las
       esquinas redondeadas del wrapper (overflow:hidden). */
}

.portada-galeria-carousel .pg-strip-inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 10px 12px !important;
    margin: 0 !important;
}

/* Reset agresivo del <button> nativo: el browser le mete font-size, line-height
   y padding default que pueden agrandar la altura real del thumb más allá de
   los 70px declarados. */
.portada-galeria-carousel .pg-thumb {
    flex: 0 0 110px !important;
    width: 110px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: border-color .15s ease;
    /* Reset de defaults de <button> que distorsionan el box sizing */
    font: inherit;
    line-height: 0;
    box-sizing: border-box !important;
    appearance: none;
    -webkit-appearance: none;
    vertical-align: top;
}
.portada-galeria-carousel .pg-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
.portada-galeria-carousel .pg-thumb:hover {
    border-color: #fff;
}
.portada-galeria-carousel .pg-thumb.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

@media (max-width: 767.98px) {
    .portada-galeria-top {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .portada-galeria-carousel .pg-stage {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        height: 220px;
    }
    .portada-galeria-titulo { font-size: 1.4rem; }
}
@media (max-width: 575.98px) {
    .portada-galeria-carousel .pg-thumb {
        flex-basis: 80px !important;
        width: 80px !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }
    .portada-galeria-carousel .pg-nav { width: 36px; height: 36px; font-size: 1rem; }
}

/* =========================================================================
   Tarjeta celeste de noticia (portada) — mismo tamaño y "shape" que el marco
   naranja del carousel de galería, pero con imagen a la izquierda y bloque
   de texto (fecha · título · bajada) a la derecha. Padding simétrico en el
   marco para que ni la imagen ni el texto queden pegados a los bordes.
   ========================================================================= */
.portada-noticia-card {
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #40A5DD;
    padding: 30px;
    box-sizing: border-box;
}
.portada-noticia-card-img {
    flex: 0 0 40%;
    max-width: 40%;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}
.portada-noticia-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portada-noticia-card-body {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}
.portada-noticia-card-fecha {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 10px;
}
.portada-noticia-card-titulo {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
}
.portada-noticia-card-bajada {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.95;
}
@media (max-width: 767.98px) {
    .portada-noticia-card {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .portada-noticia-card-img {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        height: 220px;
    }
    .portada-noticia-card-titulo { font-size: 1.4rem; }
}

/* =========================================================================
   Tarjeta naranja de anuncio (portada) — mismo "shape" que la celeste de
   noticia (imagen izquierda + texto derecha, padding simétrico de 30px),
   pero en el naranja institucional para distinguir visualmente el tipo.
   ========================================================================= */
.portada-anuncio-card {
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #f7b035;
    padding: 30px;
    box-sizing: border-box;
}
.portada-anuncio-card-img {
    flex: 0 0 40%;
    max-width: 40%;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}
.portada-anuncio-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portada-anuncio-card-body {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}
.portada-anuncio-card-fecha {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 10px;
}
.portada-anuncio-card-titulo {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.portada-anuncio-card-bajada {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    margin: 10px 0 0;
    opacity: 0.95;
}
@media (max-width: 767.98px) {
    .portada-anuncio-card {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .portada-anuncio-card-img {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        height: 220px;
    }
    .portada-anuncio-card-titulo { font-size: 1.4rem; }
}

/* Wrapper <a> generado cuando la galería tiene `destino` cargado: hereda
   color del texto, sin subrayado, cursor pointer en toda el área.
   (Anuncio y noticia usan el patrón "stretched link" — ver más abajo). */
a.portada-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a.portada-link:hover {
    color: inherit;
    text-decoration: none;
}

/* =========================================================================
   Sección de anuncio con `destino`: el link cubre TODA la <section> (incluso
   el padding pt-5/pb-5 y los costados del container), no solamente la
   imagen. Patrón "stretched link" — la <section> se vuelve contexto de
   posicionamiento y un <a> vacío absoluto inset:0 captura los clicks por
   encima del resto del contenido.
   ========================================================================= */
.portada-seccion-stretched {
    position: relative;
}
.portada-section-link {
    position: absolute;
    inset: 0;
    z-index: 3; /* arriba de .pg-title (1) y de .pg-nav (2) */
    cursor: pointer;
}
.portada-section-link:focus-visible {
    outline: 2px solid #179BD7;
    outline-offset: -4px;
}

/* =========================================================================
   Franja de miniaturas de la galería asociada a una noticia (detalle).
   Aparece pegada debajo del hero en /institucional/noticia. Comparte el look
   del strip del carousel de portada (`.pg-strip`) pero con su propio scope
   para no acoplar dos componentes que pueden evolucionar por separado.
   ========================================================================= */
.noticia-galeria-strip {
    width: 100%;
    max-width: 856px;
    background: #40A5DD;
    box-sizing: border-box;
    /* Scrolleable por touch en móvil pero SIN barra visible — la navegación
       primaria son las flechas sobre el hero; el scroll horizontal es solo un
       canal secundario para que el thumb activo se autocentre sin saltos. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legacy */
    display: flex;
    align-items: center;
    scroll-behavior: smooth;
}
.noticia-galeria-strip::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.noticia-galeria-strip-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 auto;
}

/* ─── Flechas prev/next sobre el hero del detalle de noticia ──────────── */
.noticia-hero .ng-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, transform .15s ease;
    z-index: 2;
}
.noticia-hero .ng-nav:hover,
.noticia-hero .ng-nav:focus-visible {
    background: rgba(0, 0, 0, 0.6);
    outline: none;
    transform: translateY(-50%) scale(1.06);
}
.noticia-hero .ng-nav-prev { left: 12px; }
.noticia-hero .ng-nav-next { right: 12px; }
@media (max-width: 575.98px) {
    .noticia-hero .ng-nav { width: 36px; height: 36px; font-size: 1rem; }
}
/* Reset agresivo de defaults del <button> nativo para que la altura real
   coincida con los 70px declarados (mismo problema que `.pg-thumb`). */
.noticia-galeria-strip .ng-thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: border-color .15s ease;
    font: inherit;
    line-height: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    vertical-align: top;
}
.noticia-galeria-strip .ng-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}
.noticia-galeria-strip .ng-thumb:hover { border-color: #fff; }
.noticia-galeria-strip .ng-thumb.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
@media (max-width: 575.98px) {
    .noticia-galeria-strip .ng-thumb {
        flex-basis: 80px;
        width: 80px;
        height: 54px;
        min-height: 54px;
        max-height: 54px;
    }
}