/* =========================================================
   RECONOCIMIENTOS EN FORMULARIO - BANNER DE ALTURA CONTROLADA
   Cargar DESPUÉS de:
   - reconocimientos.css
   - reconocimientos_formulario.css
   ========================================================= */

:root {
    --rec-banner-h-desktop: 410px;
    --rec-banner-h-tablet: 380px;
    --rec-banner-h-mobile: 430px;
}

/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

#registro .registro-reconocimientos-wrap {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

#registro #reconocimientos {
    width: 100%;
    padding: 0;
    background: transparent;
}

#registro .reconocimientos-swiper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* =========================================================
   BANNER FIJO EN ESCRITORIO
   ========================================================= */

#registro .reconocimiento-spotlight {
    display: grid;
    grid-template-columns: minmax(235px, 0.78fr) minmax(0, 1.35fr);

    width: 100%;
    height: var(--rec-banner-h-desktop);
    min-height: 0 !important;
    max-height: var(--rec-banner-h-desktop);

    overflow: hidden;

    border-radius: 18px;
}

/* =========================================================
   COLUMNA DE INFORMACIÓN
   ========================================================= */

#registro .reconocimiento-spotlight__info {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 24px 22px;

    overflow: hidden;
}

#registro .reconocimiento-meta {
    margin-bottom: 9px;
}

#registro .reconocimiento-title {
    margin: 0;

    font-size: clamp(1.45rem, 2vw, 2.05rem);
    line-height: 1.06;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

#registro .reconocimiento-text {
    margin-top: 11px;

    font-size: 13px;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

#registro .reconocimiento-stats {
    margin-top: 12px;
}

#registro .reconocimiento-gallery-btn {
    margin-top: 12px;
}

/* =========================================================
   MOSAICO: SIEMPRE DEL MISMO ALTO QUE EL BANNER
   ========================================================= */

#registro .reconocimiento-spotlight__gallery {
    min-width: 0;
    min-height: 0;

    height: 100%;

    padding: 7px;

    overflow: hidden;
}

#registro .reconocimiento-mosaico {
    width: 100%;
    height: 100% !important;

    min-width: 0;
    min-height: 0 !important;
    max-height: 100%;

    gap: 6px;

    overflow: hidden;
}

#registro .mosaico-item {
    min-width: 0;
    min-height: 0;

    height: 100%;

    overflow: hidden;

    border-radius: 9px;
}

/*
 * La imagen jamás define el alto.
 * Siempre llena el espacio que le asigna el grid.
 */
#registro .mosaico-item img {
    display: block;

    width: 100%;
    height: 100% !important;

    max-width: 100%;
    max-height: 100%;

    object-fit: cover;
    object-position: center;

    overflow: hidden;
}

/* =========================================================
   DISTRIBUCIÓN DE FOTOS
   ========================================================= */

/* 1 foto */
#registro .mosaico-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* 2 fotos */
#registro .mosaico-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 3 fotos */
#registro .mosaico-3 {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#registro .mosaico-3 .mosaico-item-1 {
    grid-row: 1 / 3;
}

/* 4 o más */
#registro .mosaico-4 {
    grid-template-columns: 1.55fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#registro .mosaico-4 .mosaico-item-1 {
    grid-row: 1 / 3;
}

#registro .mosaico-4 .mosaico-item-2 {
    grid-column: 2 / 4;
}

/* =========================================================
   LAPTOP / RESOLUCIONES INTERMEDIAS
   ========================================================= */

@media (min-width: 992px) and (max-width: 1250px) {

    #registro .reconocimiento-spotlight {
        grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr);

        height: var(--rec-banner-h-tablet);
        max-height: var(--rec-banner-h-tablet);
    }

    #registro .reconocimiento-spotlight__info {
        padding: 20px 18px;
    }

    #registro .reconocimiento-title {
        font-size: 1.55rem;
    }

    #registro .reconocimiento-text {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }

    #registro .reconocimiento-stats span {
        padding: 5px 7px;
        font-size: 10px;
    }

    #registro .reconocimiento-gallery-btn {
        padding: 7px 10px;
        font-size: 10.5px;
    }
}

/* =========================================================
   TABLET Y CELULAR
   ========================================================= */

@media (max-width: 991.98px) {

    /*
     * El reconocimiento sigue teniendo un alto controlado.
     * Fotos arriba, información abajo.
     */
    #registro .reconocimiento-spotlight {
        grid-template-columns: 1fr;
        grid-template-rows: 62% 38%;

        height: var(--rec-banner-h-mobile);
        max-height: var(--rec-banner-h-mobile);

        min-height: 0 !important;
    }

    #registro .reconocimiento-spotlight__gallery {
        grid-row: 1;
        height: 100%;
    }

    #registro .reconocimiento-spotlight__info {
        grid-row: 2;

        justify-content: flex-start;

        padding: 14px 16px;

        overflow: hidden;
    }

    #registro .reconocimiento-meta {
        margin-bottom: 5px;
    }

    #registro .reconocimiento-title {
        font-size: 1.4rem;
        line-height: 1.05;

        -webkit-line-clamp: 2;
    }

    /*
     * En móvil la descripción completa no aporta tanto
     * y es lo que más hace crecer la tarjeta.
     */
    #registro .reconocimiento-text {
        margin-top: 7px;

        font-size: 11px;
        line-height: 1.35;

        -webkit-line-clamp: 2;
    }

    #registro .reconocimiento-stats {
        margin-top: 7px;
    }

    #registro .reconocimiento-stats span {
        padding: 4px 7px;
        font-size: 9.5px;
    }

    #registro .reconocimiento-gallery-btn {
        margin-top: 7px;
        padding: 6px 9px;
        font-size: 10px;
    }

    /*
     * En móvil usamos un mosaico mucho más estable:
     * portada grande arriba y 3 imágenes pequeñas abajo.
     */
    #registro .mosaico-4 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 64% 36%;
    }

    #registro .mosaico-4 .mosaico-item-1 {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    #registro .mosaico-4 .mosaico-item-2 {
        grid-column: 1;
        grid-row: 2;
    }

    #registro .mosaico-4 .mosaico-item-3 {
        grid-column: 2;
        grid-row: 2;
    }

    #registro .mosaico-4 .mosaico-item-4 {
        grid-column: 3;
        grid-row: 2;
    }

    #registro .mosaico-3 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 64% 36%;
    }

    #registro .mosaico-3 .mosaico-item-1 {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    #registro .mosaico-3 .mosaico-item-2 {
        grid-column: 1;
        grid-row: 2;
    }

    #registro .mosaico-3 .mosaico-item-3 {
        grid-column: 2;
        grid-row: 2;
    }

    #registro .mosaico-2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
}

/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 575.98px) {

    :root {
        --rec-banner-h-mobile: 400px;
    }

    #registro .registro-reconocimientos-wrap {
        padding-left: 4px;
        padding-right: 4px;
    }

    #registro .reconocimientos-header {
        margin-bottom: 12px;
    }

    #registro .reconocimientos-header h2 {
        font-size: 1.5rem;
    }

    #registro .reconocimientos-header p {
        font-size: 11px;
        line-height: 1.4;
    }

    /*
     * Más espacio a fotos y menos a texto.
     */
    #registro .reconocimiento-spotlight {
        grid-template-rows: 65% 35%;
    }

    #registro .reconocimiento-title {
        font-size: 1.25rem;
    }

    /*
     * Para ahorrar altura en teléfonos muy pequeños,
     * ocultamos descripción; la información completa
     * sigue estando en el reconocimiento/lightbox.
     */
    #registro .reconocimiento-text {
        display: none;
    }

    #registro .reconocimiento-stats {
        margin-top: 6px;
    }

    #registro .reconocimiento-gallery-btn {
        margin-top: 6px;
    }
}



/* =========================================================
   AJUSTE FINAL: TÍTULO SIEMPRE VISIBLE + FALLBACK GENÉRICO
   ========================================================= */

/*
 * En móvil damos un poco más de espacio a la información
 * para asegurar que el título no quede recortado.
 */
@media (max-width: 991.98px) {

    #registro .reconocimiento-spotlight {
        grid-template-rows: 56% 44%;
    }

    #registro .reconocimiento-spotlight__info {
        justify-content: flex-start;
        overflow: hidden;
    }

    #registro .reconocimiento-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;

        min-height: 2.15em;
        max-height: 2.15em;

        margin: 0;
    }

    /*
     * En móvil priorizamos título y controles.
     * La descripción puede desaparecer si el espacio es muy justo.
     */
    #registro .reconocimiento-text {
        -webkit-line-clamp: 1;
    }
}

@media (max-width: 575.98px) {

    #registro .reconocimiento-spotlight {
        grid-template-rows: 55% 45%;
    }

    #registro .reconocimiento-title {
        font-size: 1.28rem;

        min-height: 2.2em;
        max-height: 2.2em;
    }

    #registro .reconocimiento-text {
        display: none;
    }
}

/* =========================================================
   IMAGEN GENÉRICA CUANDO NO HAY RECONOCIMIENTOS
   ========================================================= */

#registro .reconocimiento-fallback {
    width: 100%;
    height: var(--rec-banner-h-desktop);

    overflow: hidden;

    border-radius: 18px;

    background: #eef1f4;
}

#registro .reconocimiento-fallback img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

@media (min-width: 992px) and (max-width: 1250px) {

    #registro .reconocimiento-fallback {
        height: var(--rec-banner-h-tablet);
    }
}

@media (max-width: 991.98px) {

    #registro .reconocimiento-fallback {
        height: var(--rec-banner-h-mobile);
    }
}

@media (max-width: 575.98px) {

    #registro .reconocimiento-fallback {
        height: 400px;
    }
}


/* =========================================================
   AJUSTE FINAL V3
   Título blanco cuando hay reconocimientos
   ========================================================= */

#registro .reconocimientos-header h2 {
    color: #ffffff !important;
}

#registro .reconocimientos-header p {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Refuerzo contra estilos globales */
#registro #reconocimientos .reconocimientos-header h2,
#registro #reconocimientos .reconocimientos-header p {
    opacity: 1 !important;
    visibility: visible !important;
}