.atlas-info-panel {
    display: none;
    position: absolute;
    top: 33px;
    left: 13px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: auto;
    z-index: 1000;
}

.contenedor-mapa {
    position: relative;
    margin-top: 61px;
}

.atlas-info-panel .panel-inner {
    padding: 16px;
    font-family: sans-serif;
    line-height: 1.4;
    border-radius: 20px;
}

.atlas-info-panel .panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
}

.atlas-info-panel h3 {
    margin-top: 0;
}

.atlas-info-panel a {
    text-decoration: none;
}

.atlas-info-panel a:hover {
    text-decoration: underline;
}

.card-detalle {
    max-width: 400px;
    height: 100vh;
}

.card-detalle .card-header {
    position: relative;
    background: url('../img/Rectangle.png') center/cover no-repeat;
    height: auto !important;
    padding-top: 7px;
    padding-bottom: 20px;
}

.card-detalle .card-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(195, 32, 51, 0.6) 4.76%, #312EBC 93.19%);
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
    opacity: 0.92;
    z-index: 2;
    pointer-events: none;
}

.card-detalle .btn-cerrar {
    position: absolute;
    top: 7px;
    right: 23px;
    z-index: 3;
    width: 42px;
    height: 42px;
    padding: 0;
    background: #fff;
    border: none;
    border-radius: 50%;
}

.card-detalle .btn-link {
    position: absolute;
    top: 62px;
    right: 15px;
    z-index: 3;
    width: 75px !important;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    flex-wrap: wrap;
    color: #fff;
}

.card-detalle .btn-link img {
    width: 43px;
    height: 43px;

}

.card-detalle .header-content {
    position: relative;
    top: 7px;
    left: 18px;
    z-index: 3;
    color: #fff;
    width: 72%;
}

.card-detalle .header-content h5,
.card-detalle .header-content p {
    margin: 0;
    line-height: 1.2;
}

.card-detalle .header-content p {
    font-size: 0.875rem;
}

button.btn-cerrar {
    background-color: transparent !important;
}

.card.card-detalle {
    /* Ancho mínimo de 421px (tamaño original), pero se expande hasta
       max-width según el contenido más ancho (ej: nombre de especialidad
       largo) para evitar que el texto se corte en dos líneas. */
    width: max-content;
    min-width: 421px;
    max-width: 600px;
    max-height: 557px;
}

.titulo-card-iniciativa {
    font-family: Poppins;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px !important;
    letter-spacing: 0%;
    text-align: left;
    color: #fff;
}

.parrafo-span-head {
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #fff;
}

.parrafo-span-head span {
    font-family: Poppins;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #fff;
}

a.btn-link:hover {
    color: #fff;
    text-decoration: none;
}

/* Aplica a tu contenedor scrollable */
.overflow-auto {
    /* Firefox: scrollbar fino sin flechas */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .3) transparent;
}

/* WebKit (Chrome, Safari, Edge) */
.overflow-auto::-webkit-scrollbar {
    width: 8px;
    /* grosor */
    height: 8px;
}

.overflow-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-auto::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .3);
}

.overflow-auto::-webkit-scrollbar-button {
    display: none;
    /* oculta flechas */
    height: 0;
    width: 0;
}

.titulo-texto-descripcion {
    font-family: Poppins;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
    letter-spacing: 0%;
    color: #462BA7;
}

.texto-descripcion {
    font-family: Poppins;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    color: #000000;
    margin-bottom: 25px;
}

.cuerpo-detalle-institucion {
    padding: 10px 13px 6px 13px;
}

.titulo-texto-dimensiones {
    font-family: Poppins;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #462BA7;
    margin-top: 20px;
    margin-bottom: 10px;
}

.lista-especialidades {
    margin: 0 0 4px 0;
    padding-left: 0;
    list-style: none;
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #1D2345;
}

.lista-especialidades li {
    margin-bottom: 4px;
}

/* Especialidad seleccionada en el filtro: se destaca dentro de la lista
   del panel de detalle. */
.especialidad-destacada {
    background-color: #EFEAFB;
    border-radius: 6px;
    padding: 3px 8px;
    margin: -3px -8px 4px -8px;
    color: #462BA7;
}

.especialidad-destacada strong {
    color: #462BA7;
}

/* Líneas grises que separan el resumen (matrícula en especialidades /
   dual) de la lista de especialidades, y esa lista de los datos de
   contacto. Más gruesa y de un gris más oscuro para que se note bien. */
.separador-panel {
    border: none;
    border-top: 2px solid #B7B5BE;
    margin: 4px 0 16px 0;
}

.dimension-texto span {
    margin-bottom: 0;
    font-family: Poppins;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #1D2345;

}

.dimension-texto {
    margin-bottom: 4px;
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #1D2345;
}

/* Texto de resumen (matrícula en especialidades / formación dual): mismo
   tamaño y color que el resto del panel (especialidades, correo, etc).
   Va después de .dimension-texto a propósito, para que su margen gane
   en la cascada. */
.texto-resumen-panel {
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #1D2345;
    margin-bottom: 4px;
}

.texto-resumen-panel:first-of-type {
    margin-top: 4px;
}

.objetivo-texto {
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #1D2345;
}

.objetivo-texto span {
    font-family: Poppins;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #1D2345;
}

.boton-ver-mas {
    font-family: Poppins;
    font-weight: 400;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: right;
    color: #193768 !important;
    margin-top: 7px;
}

.contendor-btn-dimensiones {
    text-align: right;
}

#mapa-chile {
    height: 728px;
}

.contenedor-mapa-completo {
    display: flex;
}

.contenedor-filtros {
    width: 37%;
    margin-top: 61px;
    /* Mismo alto que el mapa (#mapa-chile / .contenedor-mapa), para que las
       dos columnas queden parejas en vez de que el panel sea más alto o
       más bajo que el mapa. */
    height: 88vh;
    min-height: 600px;
    max-height: 720px;
}

.contenedor-mapa {
    width: 63%;
}

.icon-title {
    margin-right: 10px;
}

.titulo-filtros-concoe {
    font-family: Poppins;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0%;
    color: #193768;
    margin-top: 23px;
    margin-right: 19px;
    margin-left: 23px;
}

.bajada-filtro-selecciona {
    font-family: Poppins;
    font-weight: 700;
    font-size: 18px;
    line-height: 40px;
    letter-spacing: 0%;
    color: #193768;
    margin-left: 20px;
    margin-right: 19px;
    margin-top: 12px;
}

/* Filtros: Región, Comuna y Dependencia apiladas en filas, una debajo
   de la otra (antes Región/Comuna iban lado a lado y había un cuarto
   filtro de Institución que se eliminó). */
.filtros-lista {
    padding: 0 19px 0 20px;
}

.fila-filtro {
    margin-bottom: 8px;
}

/* Filtros de a dos por fila: Región|Comuna, Rama|Sector,
   Especialidad|Dependencia. En pantallas muy angostas (celular) se
   apilan en una sola columna para que los select no queden apretados. */
.fila-filtro-doble {
    display: flex;
    gap: 12px;
}

.fila-filtro-doble .fila-filtro {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .fila-filtro-doble {
        flex-direction: column;
        gap: 0;
    }
}

.fila-filtro .titulo-input-filtro {
    font-family: Poppins;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #1D2345;
    margin-bottom: 5px;
}

.fila-filtro select,
#region,
#comuna {
    margin-top: 5px;
    width: 100%;
    height: 40px;
    padding: 10px !important;
    border: 1px solid var(--Disabled, #D4D2D5);
    border-radius: 4px;
    margin-bottom: 8px;
}

.contenedor-resultados {
    border-top: 1px solid #D4D2D5;
}

.titulo-resultados {
    font-family: Poppins;
    font-weight: 600;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 0%;
    color: #231F7F;
    margin-top: 11px;
    margin-left: 20px;
    display: flex;
    align-items: center;
}

.nombre-iniciativa {
    font-family: Poppins;
    font-weight: 600;
    font-size: 18px;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: left;
    margin-left: 20px;
    color: #474756;
    margin-bottom: 0;
}

.item-resultado {
    border-bottom: 1px solid #D4D2D5;
    position: relative;
}

p.titulo-inicitiva-res {
    margin-bottom: 0;
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #474756;
    margin-bottom: 5px;
    margin-left: 20px;
}

p.titulo-inicitiva-res span {
    color: #474756;
    font-weight: 600;
}

.sitio-web-url-result {
    position: absolute;
    top: 12px;
    right: 52px;
    text-align: center;
    text-decoration: none;
    font-family: Poppins;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #2670E0;
}

.sitio-web-url-result img {
    margin-bottom: 4px;
}

.contenedor-filtros {
    width: 37%;
    margin-top: 61px;
    height: 88vh;
    min-height: 600px;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    /* Nunca dejar que el contenido (lista de resultados larga) se
       desborde visualmente fuera de esta columna hacia las secciones
       siguientes de la página. */
    overflow: hidden;
}

.contenedor-resultados {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    /* Para que el scroll no tape contenido */
    margin-top: 20px;
    /* Puedes ajustar este margen si quieres separar más los filtros de los resultados */
}

.leaflet-control-attribution.leaflet-control {
    display: none;
}

.filtro-plegable {
    display: none;

}

/* Versión desktop */
.contenedor-filtros {
    /* Tus estilos normales para desktop */
}

.drawer-handle {
    display: none;
}

/* .contenedor-filtros es flex-column, pero su hijo directo real es
   .drawer-content (no .contenedor-resultados). Sin esta regla,
   .drawer-content queda con alto automático y el flex:1 de
   .contenedor-resultados no tiene ningún efecto: si el contenido de
   arriba (filtros + chips) es alto, el final de la lista de resultados
   queda recortado por el overflow:hidden de .contenedor-filtros, sin
   forma de hacer scroll hasta verlo. Al forzar aquí altura 100% y
   flex-column, .contenedor-resultados sí ocupa el espacio restante real
   y scrollea internamente dentro de él. */
@media (min-width: 1200px) {
    .drawer-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }
}

/* La lista de resultados llena el espacio que sobra dentro de
   .contenedor-filtros (que ahora mide lo mismo que el mapa) y scrollea
   internamente en vez de tener un alto fijo en píxeles. */
.contenedor-resultados {
    flex: 1;
    min-height: 0;
    /* Respaldo: si algún ancho de pantalla no respeta el alto de
       .contenedor-filtros (flex), esto evita que la lista se estire sin
       límite y empuje el resto de la página hacia abajo. */
    max-height: 45vh;
    overflow-y: auto;
    padding-right: 10px;
    padding-bottom: 12px;
}






@media (max-width: 1199px) {
    .contenedor-resultados {
        /* En este ancho .contenedor-filtros pasa a height:auto (el panel
           se acomoda debajo del mapa como "drawer"), así que un max-height
           en % no sirve de nada (no hay una altura de referencia). Se usa
           un valor fijo para que la lista siempre scrollee en vez de
           estirar toda la página. */
        max-height: 45vh;
    }

    .drawer-handle {
        display: block;
    }

    .contenedor-mapa-completo {
        position: relative;
        flex-direction: column;
        height: 680px;
        margin-bottom: 102px;
        /* Apilar elementos verticalmente */
    }

    .contenedor-filtros {
        width: 100%;
        order: 2;
        /* Filtros segundo en móvil */
        margin-top: 20px;
        /* Espacio entre mapa y filtros */
        height: auto;
        /* Altura automática */
    }

    .contenedor-mapa {
        width: 100%;
        order: 1;
        /* Mapa primero en móvil */
        height: 605px;
        /* Ajustar espacio superior */
    }

    /* Ajustar elementos internos para móvil */
    .row-contenedor-regiones {
        flex-direction: column;
        gap: 0;
    }

    #region,
    #comuna,
    .contenedor-instituciones select,
    .contenedor-dimension select {
        width: 100% !important;
    }

    .contenedor-resultados {
        max-height: 400px;
        /* Limitar altura resultados */
    }

    .contenedor-mapa {
        min-height: 724px;
        max-height: 724px;
        height: 724px;
    }

    #mapa-chile {
        min-height: 605px;
        max-height: 605px;
        height: 605px;
        /* Altura más apropiada para móvil */
    }

    .filtro-plegable {
        display: flex;
        justify-content: center;
    }

    .drawer {
        position: absolute;
        bottom: calc(-100% + 119px);
        left: 0;
        width: 100%;
        height: 50vh;
        background: white;
        z-index: 1000;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .drawer.active {
        bottom: 0;
        height: 65%;
    }

    .drawer-handle {
        text-align: center;
        position: absolute;
        bottom: -102px;
        left: 0;
        width: 100%;
        height: 119px;
        z-index: 1001;
        cursor: pointer;
        display: flex;
        transition: all 0.3s ease;
        border-radius: 20px 20px 0 0;
        background-color: #fff !important;
        gap: 0 !important;
        flex-wrap: wrap;
        justify-content: center;

    }

    .drawer-handle .handle-content {
        font-family: Poppins;
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0%;
        text-align: center;
        color: #474756;
        padding-left: 42px;
        padding-right: 61px;
        width: 100%;

    }

    .drawer-content {
        padding: 20px;
        height: calc(100% - 60px);
        overflow-y: auto;
    }

    .contenedor-mapa {
        height: calc(100vh - 119px);
        transition: height 0.3s ease;
    }

    .drawer.active~.contenedor-mapa {
        height: 40vh;
    }

    .drawer-handle {
        transition: all 0.3s ease;
        opacity: 1;
        pointer-events: all;
    }

    .drawer-handle.hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
    }

    .contenedor-filtros {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contenedor-filtros:not(.active) {
        transform: translateY(calc(100% - 119px));
    }

    .contenedor-filtros.active {
        transform: translateY(0);
    }

    .barra-home-filtro {
        width: 71px;
        height: 8px;
        border-radius: 50px;
        background-color: #D4D2D5;
        margin-top: 18px;
    }

    .drawer.active {
        bottom: 0;
        height: 60vh;
    }

    .drawer-content {
        padding: 0;
    }

    .titulo-filtros-concoe {
        display: none;
    }

    .bajada-filtro-selecciona {
        font-family: Poppins;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0%;
        margin-left: 19px;
        margin-right: 23px;
        margin-top: 14px;
        margin-bottom: 11px;
    }

    .row-contenedor-regiones {
        margin: 0;
        padding: 0 19px;
    }

    .atlas-info-panel {
        width: 100%;
        height: 680px;
        z-index: 1002;
    }

    .card.card-detalle {
        width: 100%;
        height: 680px;
        min-height: 680px;
        max-height: 680px;
    }

    .atlas-info-panel {
        top: 0;
        left: 0;
    }

    /* --- Panel de filtros fijo en mobile (reemplaza el drawer) ---
       En vez del panel deslizante que se abría/cerraba (fuente de varios
       bugs), en mobile Región/Comuna/Dependencia quedan siempre visibles,
       en flujo normal, en un bloque de alto fijo justo debajo del mapa.
       Al filtrar, solo se filtran los marcadores del mapa: no se muestra
       el listado de liceos TP debajo. Todo con !important para ganarle
       de forma segura a las reglas del drawer declaradas más arriba. */
    .drawer-handle {
        display: none !important;
    }

    .filtro-plegable {
        display: none !important;
    }

    .contenedor-mapa-completo {
        height: auto !important;
        margin-bottom: 0 !important;
    }

    .contenedor-mapa {
        height: 605px !important;
        min-height: 605px !important;
        max-height: 605px !important;
    }

    .contenedor-filtros.drawer {
        position: static !important;
        transform: none !important;
        transition: none !important;
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        box-shadow: none !important;
        border-top: none !important;
    }

    .drawer-content {
        height: 100% !important;
        padding: 20px !important;
        overflow-y: auto !important;
    }

    .contenedor-resultados {
        display: none !important;
    }
}

/* Nota: el viejo breakpoint 1199px-1410px que forzaba alturas y anchos fijos
   (788px, 247px, selects de 200px) se eliminó porque quedó obsoleto tras el
   rediseño de filtros; ahora en ese rango de ancho se usan las mismas reglas
   base (vh) que en el resto de anchos de escritorio, evitando que el bloque
   del mapa se vea distinto solo por el ancho de la ventana. */

.item-resultado {
    cursor: pointer;
}