/* =========================================================
   SITEx - Secretaria de Extension UNICEN
   Estilos que en el mockup de Stitch estaban en un <style> inline.
   Solo se cargan en el archive de "experiencia" (ver includes/frontend.php).
   ========================================================= */

/* FIX CRITICO - root font-size del theme.
   Hestia (o algun reset que trae) pone font-size:62.5% en <html>, para
   que SUS estilos calculen 1rem = 10px en vez de los 16px reales del
   navegador. El problema: practicamente todas las clases de Tailwind que
   usamos son en rem (text-*, p-*, gap-*, rounded-*, max-w-*, h-12, etc,
   todo excepto lo que pusimos como text-[Npx] literal) - "rem" siempre
   se calcula contra <html>, sin importar que tan adentro este anidado el
   elemento, asi que NO se puede arreglar poniendole un font-size a
   #sitex-content nada mas. Resultado sin este fix: todo (texto, padding,
   bordes redondeados, anchos de columna) sale un 37.5% mas chico de lo
   que las clases dicen (18px de un text-lg terminan en 11.25px en
   pantalla - la cuenta exacta: 62.5% x 16px = 10px, y 1.125rem x 10px =
   11.25px).
   No tocamos header.php del theme (no depender/no modificar el theme es
   un principio del proyecto, y ademas <html> ya esta abierto para cuando
   este archivo carga). En cambio, neutralizamos el font-size de <html>
   con un selector relacional, scopeado para que SOLO aplique cuando el
   <body> es una pagina nuestra (body.unicen-sitex, ver
   includes/frontend.php -> sitex_body_class()) - el resto del sitio
   sigue con el 62.5% de Hestia intacto.
   :has() tiene soporte amplio en navegadores modernos (Chrome/Edge/Safari
   desde 2023, Firefox desde 2024). En un navegador viejo sin soporte esta
   regla simplemente no aplica (se queda con el bug actual, no empeora
   nada) - por eso NO hace falta un fallback en JS. */
html:has(body.unicen-sitex) {
  font-size: 16px;
  /* scroll-behavior: anima el salto de los anclas del hero (#explorar, ver
     templates/archive-experiencia.php) en vez del salto instantaneo
     nativo. scroll-padding-top: en el sitio publico no hay nada fijo
     arriba de la ventana durante el scroll (el navbar de Hestia se va
     con el scroll normal - ver el comentario de "#sitex-tabs-bar" mas
     abajo, mismo criterio), asi que 0. La UNICA excepcion real es la
     admin bar de WordPress (logueado) - se contempla aparte mas abajo
     (html.admin-bar), igual que con #sitex-tabs-bar. */
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

html.admin-bar:has(body.unicen-sitex) {
  scroll-padding-top: 32px;
}

@media (max-width: 782px) {
  html.admin-bar:has(body.unicen-sitex) {
    scroll-padding-top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.unicen-sitex) {
    scroll-behavior: auto;
  }
}

/* El navbar del theme real es "fixed-top" (queda flotando sobre el
   contenido en vez de empujarlo hacia abajo) y ademas achica su alto al
   hacer scroll. Compensamos con padding-top en NUESTRO wrapper (no en
   body/#page, que son del theme) para que el contenido no arranque
   tapado por el navbar. El valor = alto real del navbar (medido en el
   inspector) + un margen de respiro, para que no quede pegado. Si el
   navbar del theme cambia de alto en el futuro, ajustar estos valores.
   OJO: esto es solo para el ARRANQUE de la pagina (sin scrollear todavia)
   - una vez que se empieza a scrollear el navbar del theme deja de estar
   fijo/visible (ver el comentario de "#sitex-tabs-bar" mas abajo), por
   eso el sticky de las tabs NO reusa este mismo valor como offset. */
#sitex-content {
  padding-top: 72px;
}

/* Tipografia global: v0 aplica su fuente una sola vez en la raiz (via
   variable CSS heredada) y todo el arbol la hereda sola. Nuestro markup
   no puede depender de que cada elemento tenga una clase font-* propia
   encima (eso es justamente lo que generaba texto con dos fuentes
   distintas mezcladas segun el elemento) - se fuerza una unica vez aca,
   scopeado a #sitex-content, y de ahi la heredan todos los hijos
   (incluidos <input>/<select>/<button>, que por default de los
   navegadores NO heredan font-family del body y hay que pedirselo aparte). */
#sitex-content,
#sitex-content input,
#sitex-content select,
#sitex-content button,
#sitex-content textarea {
  font-family: "Roboto Flex", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@media (max-width: 768px) {
  #sitex-content {
    padding-top: 64px; /* navbar mobile mas chico + respiro */
  }
}

/* Hestia trae estilos "Material Design" para <input> (solo linea
   inferior, sin borde completo, ver el buscador del header del theme).
   Forzamos que el buscador de proyecto tenga el mismo borde en caja que
   los <select> de al lado, en vez de heredar ese estilo del theme.
   v4: paso de #unicen-buscar-texto (id) a .unicen-buscar-texto (clase) -
   desde que Organizaciones es una tab en la misma pagina que Experiencias
   (ver templates/archive-experiencia.php) hay DOS buscadores en el
   documento, cada uno con su propio id unico
   (#unicen-buscar-texto-experiencias / -organizaciones) pero compartiendo
   esta misma clase para que ambos reciban el estilo con una sola regla.
   v11: Hestia (Bootstrap por debajo) le agrega a este <input>, al vuelo,
   una clase ".form-group" a su div contenedor (el que en el markup tiene
   "relative lg:flex-1") con margin-bottom:15px + padding-bottom:7px, y al
   <input> en si un margin-bottom:7px - nada de esto sale de nuestro CSS
   ni del markup, lo mete el theme. Resultado: el buscador quedaba unos
   px mas abajo que los <select> de al lado, desalineados en la fila de
   filtros. margin:0 aca lo resuelve para el <input>; el padding/margin
   del div contenedor se resuelve aparte, ver ".unicen-buscar-wrapper"
   mas abajo. */
/* v19: ".unicen-buscar-unidades" se suma a esta misma regla - es el
   buscador nuevo de "Unidades participantes" (tab Experiencias, ver
   templates/archive-experiencia.php), que tiene que verse IDENTICO a
   este buscador de "nombre o codigo" (mismo icono, mismos colores/
   bordes). Clase separada a proposito, NO la misma clase
   ".unicen-buscar-texto" puesta dos veces en el documento: assets/
   experiencias.js hace contenedor.querySelector(".unicen-buscar-texto")
   asumiendo que hay UN SOLO campo con esa clase por panel (el de
   "nombre o codigo") - si el buscador de unidades compartiera esa misma
   clase, ese querySelector podria engancharse con el campo equivocado. */
.unicen-buscar-texto,
.unicen-buscar-unidades {
  border: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  background-color: #ffffff !important;
  background-image: none !important; /* Hestia simula su "linea inferior" con un degrade de fondo, no un borde */
  box-shadow: none !important;
  margin: 0 !important;
}
.unicen-buscar-texto:focus,
.unicen-buscar-unidades:focus {
  border-color: #f47920 !important; /* secondary (paleta v2) */
  background-image: none !important;
  box-shadow: none !important;
  outline: none;
}

/* Contenedor del buscador (icono de lupa + <input>, ver
   ".unicen-buscar-texto" arriba para el detalle de por que hace falta
   este reset): mismo problema de Hestia agregando margin/padding al
   vuelo via su propia clase ".form-group", pisado aca. */
.unicen-buscar-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Selector de "Edicion" (sitex_render_selector_edicion(), el unico
   <form> de toda la pagina - ver templates/archive-experiencia.php):
   Hestia le agrega margin-bottom por default a cualquier <form> "suelto"
   (no es la clase ".form-group" de arriba, es el tag <form> en si). Sin
   este reset, ese <form> media ~22px mas de alto que los <div> de al
   lado (tema/localidad) - con align-items:stretch (default de CSS
   Grid) eso estiraba TODA la fila de selects a esa altura mayor,
   desalineando el buscador (que no tenia ese margin de mas) contra el
   resto de los filtros. */
.unicen-selector-edicion {
  margin: 0 !important;
  padding: 0 !important;
}

/* Boton "Limpiar filtros" (tab Experiencias, ver templates/archive-
   experiencia.php): mismo problema (y misma solucion) que
   ".unicen-hero-btn-outline" mas abajo en este archivo - Hestia le pisa a
   cualquier <button> "suelto" su propio border-width/style (0/none,
   reset tipico de boton) con mas especificidad que la utilidad "border"
   de Tailwind, asi que forzar solo el color no alcanza si el grosor
   queda en 0. Se fuerza el shorthand completo (no solo border-color). */
.unicen-limpiar-filtros {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important; /* border-subtle */
  color: #1b1b1c !important; /* on-surface */
  box-shadow: none !important;
  margin: 0 !important;
}
.unicen-limpiar-filtros:hover,
.unicen-limpiar-filtros:focus {
  border-color: #1f3d7d !important; /* primary */
  color: #1f3d7d !important; /* primary */
}

/* Utilidades propias de "mostrar recien a partir de cierto ancho"
   (equivalentes a las utilidades "hidden md:block/flex/inline" de
   Tailwind) - hacen falta porque Bootstrap (Hestia por debajo) trae SU
   PROPIA clase ".hidden { display: none !important; }" (utilidad clasica
   de Bootstrap 3), que choca DE NOMBRE con la de Tailwind. La de
   Bootstrap tiene !important y la de Tailwind no, asi que Bootstrap
   siempre gana pase lo que pase - un elemento con "hidden md:block" queda
   permanentemente oculto, el "md:block" nunca llega a aplicarse ni
   siquiera en desktop (bug real, encontrado en produccion: la foto del
   hero desaparecia incluso en pantallas grandes).
   El sentido inverso ("mostrar por default, ocultar recien a partir de
   cierto ancho", ej. "md:hidden") NO tiene este problema: esa clase
   escapada (".md\:hidden") no coincide con ".hidden" de Bootstrap, asi
   que ese patron se puede seguir usando con las utilidades de Tailwind
   sin problema - estas 3 de aca abajo son solo para el sentido "oculto
   por default, visible desde md" (768px, mismo breakpoint que "md:" en
   toda la pagina). */
.unicen-desktop-block,
.unicen-desktop-flex,
.unicen-desktop-inline {
  display: none !important;
}
@media (min-width: 768px) {
  .unicen-desktop-block {
    display: block !important;
  }
  .unicen-desktop-flex {
    display: flex !important;
  }
  .unicen-desktop-inline {
    display: inline !important;
  }
}

/* v21 (columna del mapa del HERO, templates/archive-experiencia.php):
   mismo patron defensivo que ".unicen-desktop-block" de arriba (clase
   propia con !important, no "hidden lg:block" de Tailwind - choca con
   ".hidden" de Bootstrap por el mismo motivo explicado arriba), con un
   breakpoint mas alto que el resto: visible recien desde "lg" (1024px),
   no desde "md" (768px) - el mapa necesita mas aire que la foto de
   campus que reemplaza, que si se conformaba con "md".
   v21.5: se saca ".unicen-hero-cards-block" (existia para las 4 cards
   de navegacion superpuestas al mapa, visibles recien desde "xl" -
   esas cards se probaron y se sacaron del todo, ver el docblock de
   archive-experiencia.php) - ".unicen-hero-mapa-block" sigue igual,
   sigue siendo la que controla el mapa en si. */
.unicen-hero-mapa-block {
  display: none !important;
}
@media (min-width: 1024px) {
  .unicen-hero-mapa-block {
    display: block !important;
  }
}

/* !important en background-color: en produccion algo con la misma
   especificidad (un solo selector de clase) esta ganando el empate por
   orden de carga y pisando este fondo con blanco - el sitio corre
   Elementor (ver el admin bar: "Editar con Elementor"), que suele inyectar
   su propio "body { background: ... }" a nivel global/tema. Con !important
   nos aseguramos de ganar sin depender del orden en que carguen las
   hojas de estilo. Si en produccion sigue sin verse #f8fafc despues de
   este cambio, el problema es de cache (revisar que experiencias.css
   realmente se haya actualizado en el servidor - se versiona por
   filemtime(), ver includes/frontend.php - y purgar cualquier plugin/CDN
   de cache), no de esta regla. */
body.unicen-sitex {
  background-color: #f8fafc !important;
  color: #1b1b1c;
  /* overflow-x:hidden: era un safeguard del hero full-bleed, ya dado de
     baja (ver CHANGELOG.md, v18). Se deja como red de seguridad, scopeado
     solo a nuestras paginas, por si algo a futuro vuelve a generar
     overflow horizontal invisible. */
  overflow-x: hidden;
}

/* Contenedor padre de las tabs (v3): sticky + fondo blur estilo v0.
   FIX: antes "top" tenia el mismo valor que el padding-top de
   #sitex-content (72px/64px), asumiendo que ese espacio quedaba ocupado
   por el navbar de Hestia FIJO durante el scroll - pero el navbar de
   Hestia NO es fixed (se va con el scroll normal, esos 72px son solo la
   altura que ocupa en el arranque de la pagina, sin scrollear). Con
   top:72px, mientras se scrolleaba quedaba un espacio vacio de ~72px
   reservado arriba de las tabs, sin nada fijo ahi para justificarlo
   (reportado en produccion: "queda un espacio entre el contenedor y la
   parte superior"). top:0 arregla el sitio publico (nada fijo arriba,
   tiene que pegarse justo al borde de la ventana).
   La UNICA barra que si es fixed de verdad, siempre, es la admin bar de
   WordPress (visible solo si estas logueado) - WP le agrega la clase
   "admin-bar" al <html> cuando esa barra esta presente (nucleo de
   WordPress, no es nada nuestro), asi que la contemplamos aparte mas
   abajo para que ahi si las tabs se peguen debajo de ella y no debajo. */
#sitex-tabs-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(248, 250, 252, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Admin bar de WP presente (logueado): 32px de alto en desktop, 46px en
   mobile (breakpoint propio de WordPress, 782px - no es el 768px que
   usamos para nuestro propio layout responsive, son dos cosas distintas
   que coinciden por casualidad de estar cerca). */
html.admin-bar #sitex-tabs-bar {
  top: 32px;
}
@media (max-width: 782px) {
  html.admin-bar #sitex-tabs-bar {
    top: 46px;
  }
}

/* =========================================================
   HERO v3 (templates/archive-experiencia.php) - rediseño sobre un mockup
   nuevo de v0 (hero-banner.tsx). Ver el punto "v15" del changelog al
   principio de ese archivo para el resumen completo.
   ========================================================= */

/* Full-bleed: el <section> del hero necesita ocupar el ancho COMPLETO de
   la ventana, no el ancho del contenido - pero get_header() (Hestia) abre
   de fondo su propio contenedor Bootstrap (.container, con max-width)
   alrededor de <main id="sitex-content">, asi que un simple "width:100%"
   se hubiera quedado corto contra el ancho real de la pantalla en
   cualquier resolucion mas ancha que ese contenedor.
   FIX (reemplaza la version anterior con position:relative + left:50% +
   right:50% + margin:-50vw): esa combinacion dejaba un corrimiento visible
   de unos pixels hacia la izquierda (gap visible en el margen DERECHO,
   reportado en produccion) - "left"/"right" en un elemento relative se
   calculan contra el ancho del CONTENEDOR (el de Hestia), mientras que
   "margin:-50vw" se calcula contra el ancho de la VENTANA; mezclar ambas
   referencias en la misma cuenta no cancela limpio. La formula de abajo
   (SOLO margin, sin left/right/position) usa una unica cuenta consistente
   -"50% de mi propio ancho de contenedor menos 50vw"- que es la tecnica
   estandar para este truco y no depende de conocer el ancho del
   contenedor de Hestia.
   Nota tecnica: 100vw en algunos navegadores incluye el ancho de la
   scrollbar vertical (que "width:100%" no incluye), lo que puede generar
   unos pocos pixels de overflow horizontal invisible. Se neutraliza mas
   abajo con "overflow-x:hidden" en body.unicen-sitex (scopeado SOLO a
   nuestras paginas, no afecta al resto del sitio). */
/* Cinta de logos de organizaciones participantes (fila "Participan" del
   hero): loop horizontal infinito. La lista de logos en el PHP se manda
   duplicada (2 vueltas seguidas) para que translateX(-50%) - la mitad del
   ancho total, que es exactamente el final de la 1ra vuelta/inicio de la
   2da copia identica - no deje salto visible al reiniciar el loop. */
@keyframes sitex-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.animate-sitex-marquee {
  animation: sitex-marquee 28s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-sitex-marquee {
    animation: none;
  }
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* Tabs v2: segmented control tipo "pill" (ver mockup de v0), reemplaza al
   viejo estilo de subrayado. Control total del estado hover/activo/border
   para que el theme padre no lo pise con su propio estilo de <button> por
   defecto - Hestia trae border/box-shadow propios con su color de marca
   (se veian bordes rosados en las tabs no-activas hasta forzar esto con
   !important). */
.unicen-tabs button.unicen-tab {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0.5rem !important; /* Hestia puede traer su propio radius de <button> por defecto */
  color: #1f3d7d; /* primary, atenuado via opacity abajo */
  opacity: 0.7;
}
.unicen-tabs button.unicen-tab:hover:not(.active-tab) {
  background: #ffffff !important;
  color: #1f3d7d !important;
  opacity: 1;
}
.unicen-tabs button.unicen-tab.active-tab {
  background: #1f3d7d !important; /* primary */
  color: #ffffff !important;
  opacity: 1;
}
/* Reset defensivo para cualquier <button>/<select>/<input> dentro de
   #sitex-content: Hestia (y en general cualquier theme parent) suele
   traer su propio border/box-shadow/outline de foco en estos elementos
   con su color de marca. Sin esto, cada control nuevo que agreguemos va
   a heredar ese estilo salvo que lo pisemos a mano uno por uno (como paso
   con las tabs de arriba). Va DESPUES de la regla de tabs para no romper
   ese !important puntual, pero ANTES de que Tailwind aplique sus propias
   utilidades (que ya vienen con !important implicito por el orden de
   carga del script de Tailwind CDN, cargado antes que este archivo). */
#sitex-content button,
#sitex-content input,
#sitex-content select {
  box-shadow: none !important;
}
#sitex-content button:focus,
#sitex-content input:focus,
#sitex-content select:focus {
  box-shadow: none !important;
}

/* Mismo problema que el buscador de texto de arriba (.unicen-buscar-texto),
   pero en los <select>: Hestia (Bootstrap por debajo) les mete su propia
   flechita nativa via background-image + su propio appearance, que queda
   superpuesta con nuestro icono "expand_more" puesto a mano (position:
   absolute en el template). Resultado: dos flechitas, ninguna centrada del
   todo. Forzamos que el <select> quede "en blanco" (sin flecha nativa) para
   que el unico icono visible sea el nuestro. */
#sitex-content select {
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* input[type="search"] trae decoraciones nativas propias del navegador
   (boton de limpiar, padding/border-radius de "campo de busqueda" en
   WebKit) que lo desalineaban levemente respecto a los <select> de al
   lado, aun compartiendo la misma clase h-12. Se anulan para que se
   comporte como un input de texto comun. */
#sitex-content input[type="search"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
#sitex-content input[type="search"]::-webkit-search-decoration,
#sitex-content input[type="search"]::-webkit-search-cancel-button,
#sitex-content input[type="search"]::-webkit-search-results-button,
#sitex-content input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
}

/* Titulos de card: si el nombre de la experiencia es muy largo, lo
   truncamos a 2 lineas con puntos suspensivos para que todas las cards
   mantengan la misma altura y los elementos de abajo queden alineados */
.unicen-card__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

/* Asunto especifico de card: mismo criterio que el titulo de arriba,
   tope de 2 lineas para que todas las cards mantengan la misma altura. */
.unicen-card__asunto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card oculta por el filtro/paginacion en JS */
.unicen-card[hidden] {
  display: none;
}

/* Panel de tab (Experiencias/Organizaciones) oculto por experiencias.js
   al cambiar de tab - mismo motivo que la regla de arriba: sin esto,
   algun estilo de Tailwind/Hestia con mas especificidad puede pisar el
   [hidden] nativo del navegador y el panel "oculto" seguiria ocupando
   lugar en pantalla. */
.unicen-tab-panel[hidden] {
  display: none;
}

/* Boton CTA de card (pastilla solida naranja) - "Descargar Informe" en
   Territorios, "Abrir ficha" en Experiencias y "Ver experiencias" en
   Organizaciones comparten el mismo tamaño/color (mismas utilidades de
   Tailwind puestas a mano en cada template: bg-secondary + text-white +
   rounded-lg + px-4/py-2.5 + text-xs uppercase - ver los 3 lugares que
   usan esta clase). Esta clase NO agrega esas utilidades (siguen en el
   markup) - solo pisa el a:hover que trae Hestia, que mete su propio
   color de texto (un magenta/rosado de marca del theme) con mas
   especificidad que la utilidad text-white de Tailwind. Sin esto el
   texto del boton cambiaba de color al pasar el mouse aunque el fondo
   siguiera naranja. Mismo problema (y mismo tipo de solucion) que
   .unicen-modal__experiencia-boton mas abajo. */
.unicen-btn-cta,
.unicen-btn-cta:hover,
.unicen-btn-cta:focus,
.unicen-btn-cta:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* "Conocer mas" del hero: a diferencia de los demas CTA del sitio (todos
   <a>), este paso a ser un <button> para poder abrir un modal sin navegar
   a ningun lado a la vez (ver el comentario en templates/archive-
   experiencia.php) - y un <button> sin este reset hereda el estilo "de
   fabrica" de Hestia (fondo/borde propios, box-shadow, hover con su color
   de marca), que pisaba el outlined naranja puesto con utilidades de
   Tailwind. Mismo tipo de problema (y misma solucion, !important) que
   ".unicen-tabs button.unicen-tab" mas abajo.
   FIX: forzar solo "border-color" no alcanzaba - en produccion el borde
   no se veia directamente (no era un problema de color equivocado, sino
   de que no habia borde visible en absoluto). Hestia le da a <button> su
   propio "border-width"/"border-style" (probablemente 0/none, reset tipico
   de boton) con mas especificidad que la utilidad "border" de Tailwind -
   sin forzar TAMBIEN width/style, el color correcto no alcanzaba a
   mostrarse porque el grosor del borde quedaba en 0. Se fuerza el
   shorthand completo para no depender de que ninguna de las 3 partes
   quede pisada por separado. */
.unicen-hero-btn-outline {
  background: none !important;
  border: 1px solid #f47920 !important; /* secondary */
  color: #f47920 !important;
  box-shadow: none !important;
}
.unicen-hero-btn-outline:hover,
.unicen-hero-btn-outline:focus {
  background-color: #f47920 !important; /* secondary */
  color: #ffffff !important;
}

/* =========================================================
   Modal generico (overlay + dialogo), compartido por dos modales:
     - "Organizaciones vinculadas" (single-experiencia.php)
     - "Experiencias vinculadas" (archive-experiencia.php, tab
       Organizaciones, boton "Ver experiencias")

   OJO: esta seccion faltaba por completo - el primer modal (single-
   experiencia.php) ya usaba estas clases (.unicen-modal, .unicen-modal__
   backdrop/dialog/header/cerrar/body/lista) pero nunca tuvieron CSS
   propio, asi que hasta ahora se "abria" sin overlay, sin centrado y sin
   tamaño fijo - quedaba como un bloque mas metido en el flujo normal de
   la pagina. Se corrige aca de una sola vez para los dos modales.

   Header fijo + body con scroll propio + ancho/alto FIJOS (no dependen
   de cuanto contenido tenga adentro - pedido explicito para el modal de
   "Experiencias vinculadas", pero aplica igual de bien al de
   Organizaciones). */
.unicen-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.unicen-modal[hidden] {
  display: none;
}

.unicen-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 91, 0.45); /* primary translucido */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.unicen-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 32rem; /* ancho fijo */
  height: 32rem; /* alto fijo - no crece/achica segun la cantidad de items */
  max-height: calc(100vh - 2rem); /* pero nunca mas alto que la pantalla (mobile) */
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(20, 40, 91, 0.25);
  overflow: hidden; /* el scroll va SOLO en .unicen-modal__body de abajo */
}

/* Modificador de ".unicen-modal__dialog" para el modal "Acerca de la
   plataforma" (boton "Conocer mas" del hero) - va SIEMPRE junto a la
   clase base en el markup (ver templates/archive-experiencia.php), nunca
   solo. El dialogo base de arriba tiene ancho/alto FIJOS pensados para
   una lista corta (Experiencias/Organizaciones vinculadas); este modal es
   texto corrido (3 parrafos) - le queda mejor mas ancho y con el alto
   segun el contenido (height:auto pisa el 32rem fijo de la regla base;
   misma especificidad, esta regla gana por ir despues en la hoja) en vez
   de espacio vacio de sobra o scroll innecesario. max-height se mantiene
   acotado a la pantalla, igual que el dialogo base. */
.unicen-modal__dialog--info {
  max-width: 42rem;
  height: auto;
  max-height: calc(100vh - 4rem);
}

.unicen-modal__header {
  flex: 0 0 auto; /* fijo: no se achica ni scrollea junto con el body */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.unicen-modal__cerrar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
/* !important: Hestia trae su propio estilo de <button> en hover (mete un
   color claro/blanco con mas especificidad que esta regla) - sin esto el
   icono "X" se volvia practicamente invisible sobre el fondo blanco del
   modal en vez de oscurecerse como se ve en el resto del sitio. Mismo
   problema (y misma solucion) que ".unicen-btn-cta"/".unicen-orgs-boton-ver-todas"
   mas arriba/abajo. */
.unicen-modal__cerrar:hover {
  background: #f1f5f9 !important;
  color: #1f3d7d !important;
}

.unicen-modal__body {
  flex: 1 1 auto; /* ocupa todo el alto que le deja el header fijo */
  overflow-y: auto; /* el scroll pasa aca */
  padding: 1rem 1.5rem 1.5rem;
}

.unicen-modal__lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.unicen-modal__vacio {
  padding: 2rem 0;
  text-align: center;
  color: #64748b;
}

/* Item de "Organizaciones vinculadas" (single-experiencia.php) */
.unicen-modal__org {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.unicen-modal__org--reservada .unicen-modal__org-nombre {
  font-style: italic;
  color: #64748b;
}

/* Item de "Experiencias vinculadas" (archive-experiencia.php): id +
   titulo a la izquierda, boton "Ver ficha" a la derecha. */
.unicen-modal__experiencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.unicen-modal__experiencia:hover {
  border-color: #f47920;
  background: #f8fafc;
}
.unicen-modal__experiencia-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.125rem;
}
.unicen-modal__experiencia-id {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.unicen-modal__experiencia-titulo {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: #1f3d7d;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unicen-modal__experiencia-boton {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1f3d7d;
  text-decoration: none;
  transition: color 0.15s ease;
}
.unicen-modal__experiencia-boton:hover {
  color: #f47920;
}

/* Bloquea el scroll de la pagina de fondo mientras el modal esta
   abierto - la clase ya la pone/saca experiencias.js, solo le faltaba
   el efecto. */
body.unicen-modal-abierto {
  overflow: hidden;
}

/* =========================================================
   Materiales y Recursos (ficha individual) - cada URL suelta se pinta
   como una fila tipo boton (icono + nombre + flecha), en vez de un
   parrafo con links pegados uno al lado del otro.
   ========================================================= */
.unicen-recurso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.unicen-recurso:hover {
  background: #f8fafc;
  border-color: #f47920;
  box-shadow: 0 1px 4px rgba(20, 40, 91, 0.08);
}

.unicen-recurso__icono {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 20px;
}

.unicen-recurso__label {
  flex: 1 1 auto;
  min-width: 0;
  color: #1f3d7d;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unicen-recurso__flecha {
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 18px;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.unicen-recurso:hover .unicen-recurso__flecha {
  color: #f47920;
}

/* Boton de descarga de PDF: misma fila, con acento naranja (antes verde)
   para diferenciarlo de los enlaces sueltos cargados como "materiales" -
   ahora es el primer item de la lista (ver templates/single-experiencia.php),
   el naranja lo destaca mejor en esa posicion que el verde. */
.unicen-recurso--pdf {
  border-color: rgba(244, 121, 32, 0.35);
  background: rgba(244, 121, 32, 0.04);
}

.unicen-recurso--pdf .unicen-recurso__icono {
  background: rgba(244, 121, 32, 0.14);
  color: #f47920;
}

.unicen-recurso--pdf:hover {
  background: rgba(244, 121, 32, 0.08);
  border-color: #f47920;
}

.unicen-recurso--pdf:hover .unicen-recurso__flecha {
  color: #f47920;
  transform: translateX(2px);
}

/* Estado "cargando" del boton de PDF (ver data-unicen-pdf-descarga en
   templates/single-experiencia.php y el bloque final de
   assets/experiencias.js) - mientras dompdf arma el archivo en el
   servidor. pointer-events:none es un segundo resguardo contra el doble
   click ademas del guard en JS (por si el click "extra" llega antes de
   que la clase se refleje). La flecha (margen derecho) es la que pasa a
   "progress_activity" + la utilidad "animate-spin" de Tailwind (ya
   cargado en esta pagina, ver includes/frontend.php) - no hace falta
   ninguna @keyframes propia aca. El icono de descarga de la izquierda
   se queda fijo siempre, no cambia mientras carga. */
.unicen-recurso--cargando {
  cursor: progress;
  opacity: 0.85;
  pointer-events: none;
}

/* Contacto (ficha individual, dentro de "Materiales y Recursos" - ver
   templates/single-experiencia.php): mail en texto plano + boton
   cuadrado para copiarlo al portapapeles, en vez del boton "Contactar al
   responsable" (mailto: suelto) que habia antes. */
.unicen-contacto-email__copiar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.unicen-contacto-email__copiar:hover {
  border-color: #f47920;
  color: #f47920;
  background: #f8fafc;
}

/* Feedback momentaneo al copiar (icono pasa a "check" via JS, ver
   experiencias.js) - reusa el mismo verde que ".unicen-recurso--pdf"
   usaba antes, antes de pasar a naranja, asi que sigue siendo una
   referencia visual conocida en el sitio para "accion completada". */
.unicen-contacto-email__copiar--ok {
  border-color: #2e9e45 !important;
  color: #2e9e45 !important;
  background: rgba(46, 158, 69, 0.08) !important;
}

/* "Ver todas (N)" (Organizaciones vinculadas, sidebar de la ficha
   individual - ver templates/single-experiencia.php): es un <button>
   sin ninguna clase de Tailwind puesta encima, asi que sin este reset
   hereda el <button> "de fabrica" de Hestia (fondo/borde/padding propios
   del theme, y color magenta/rosado de marca en hover - mismo problema
   que ".unicen-btn-cta" mas arriba, pisado con el mismo criterio:
   !important + los mismos estados repetidos). */
.unicen-orgs-boton-ver-todas {
  display: inline-flex;
  align-items: center;
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.unicen-orgs-boton-ver-todas,
.unicen-orgs-boton-ver-todas:hover,
.unicen-orgs-boton-ver-todas:focus,
.unicen-orgs-boton-ver-todas:visited {
  color: #f47920 !important;
  text-decoration: none !important;
}
.unicen-orgs-boton-ver-todas:hover,
.unicen-orgs-boton-ver-todas:focus {
  text-decoration: underline !important;
}

/* Lista de enlaces sueltos dentro de "Materiales y Recursos" (ficha
   individual - ver templates/single-experiencia.php): el boton
   "Descargar ficha en PDF" queda siempre visible/fijo arriba, fuera de
   este contenedor - solo los enlaces cargados como "materiales" (que
   pueden ser muchos, ver capturas de ejemplo con 8+) scrollean adentro
   de un alto fijo. 340px ~ 5 filas de ".unicen-recurso" (62px c/u +
   8px de gap entre ellas) antes de que aparezca el scroll - si el alto
   de cada fila cambia en el futuro, ajustar este numero a mano (no hay
   forma de calcularlo en CSS puro sin saber cuantas filas van a entrar). */
.unicen-materiales-scroll {
  max-height: 340px;
  overflow-y: auto;
}

/* Boton de pagina activa */
.unicen-pag-btn.is-activa {
  background: #1f3d7d;
  color: #ffffff;
  font-weight: 700;
}

.unicen-pag-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* =========================================================
   Tab "Mapas" (Mapbox GL JS, ver assets/mapa.js). Integracion 1:1 del
   mapa de Experiencias entregado originalmente (MapaFinalSE26/
   mapafinal.html) - ese archivo estaba pensado como pagina propia, con
   el mapa cubriendo TODO el body (position:absolute; top:0; bottom:0).
   Aca el mapa vive adentro de un panel de tab entre mas contenido, asi
   que el cambio real (no cosmetico, hace falta para que el mapa se vea)
   es contener todo dentro de un wrapper propio (position:relative +
   alto fijo) en vez de contra el body - ".unicen-mapa-map" y los
   overlays (info/filtros) quedan absolute contra ESE wrapper, mismos
   offsets que el original.

   Desde v22 la tab tiene DOS mapas, Experiencias (#unicen-mapa-wrapper)
   y Organizaciones (#unicen-mapa-organizaciones-wrapper, integrado
   sobre el archivo MapaOrganizaciones/organizaciones.html con el mismo
   criterio) - CASI todo este bloque son selectores por CLASE
   (".unicen-mapa-wrapper", ".unicen-mapa-filtros" y demas), asi que
   aplican a los dos wrappers sin tocar nada aca; los pocos selectores
   por ID que hay (contenedor de filtros + popups de Mapbox, mas abajo)
   quedan combinados explicitamente para los dos ids.

   Colores/tipografia de los overlays: el panel de filtros
   (".unicen-mapa-filtros" y relacionados) y los popups de Mapbox
   (contenido armado con Tailwind directo en
   generarPopupHtmlExperiencia()/generarPopupHtmlOrganizacion(),
   contenedor pisado via ".mapboxgl-popup-*" - ver mas abajo) ya estan
   homologados a la paleta de marca del resto del sitio (navy #1F3D7D /
   grises de tailwind-config.js) y heredan la tipografia Roboto Flex de
   #sitex-content. Los dos archivos entregados originalmente tenian
   colores propios (#0054c2 en vez de #1F3D7D) y tipografia/tamaños de
   icono sueltos - ya no queda nada de eso en ninguno de los dos mapas.

   El cartel flotante "Hacé clic en el ícono..." (".unicen-mapa-info" y
   relacionados) se eliminó (v24, a pedido) - el markup ya no existe en
   templates/archive-experiencia.php, y con el la referencia
   opciones.infoId/infoCerrarId en assets/mapa.js.
   ========================================================= */
.unicen-mapa-wrapper {
  position: relative;
  width: 100%;
  /* px, no rem: el alto de ESTE contenedor puntual lo lee Mapbox GL
     directo (getBoundingClientRect()) para dimensionar su canvas -
     tiene que ser un numero de pixeles confiable pase lo que pase con
     el font-size de <html> (ver el "FIX CRITICO" al principio de este
     archivo). El resto del bloque puede seguir en rem sin problema:
     esto no afecta la altura que Mapbox necesita medir. */
  height: 512px; /* 32rem @ 16px */
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid #e2e8f0; /* border-subtle */
  background-color: #f8fafc; /* surface-gray, mientras carga el mapa */
}

@media (min-width: 768px) {
  .unicen-mapa-wrapper {
    height: 608px; /* 38rem @ 16px */
  }
}

/* position:absolute + inset:0 NO alcanza aca: Mapbox GL JS pisa el
   `position` de su propio contenedor por JS (lo fuerza a "relative" al
   construir el mapa, sea cual sea el valor que tenia antes - se puede
   confirmar comparando el `position` computado de este div antes/
   despues de `new mapboxgl.Map()`). `inset` solo dimensiona bajo
   position:absolute/fixed - bajo "relative" solo desplaza, no estira -
   asi que sin un width/height explicitos este div colapsa a alto 0 en
   cuanto Mapbox toca el `position` (nada adentro esta en flujo normal
   para darle alto propio). width/height:100% no dependen de que
   position termine siendo relative o absolute, por eso son la parte
   que soluciona esto - inset:0 queda igual, no molesta. */
.unicen-mapa-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.unicen-mapa-filtros {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 280px;
  max-height: calc(100% - 32px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e2e8f0; /* border-subtle */
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(20, 40, 91, 0.14);
  /* Sin font-family/font-size propios: hereda Roboto Flex de
     #sitex-content (ver arriba en este mismo archivo) como el resto del
     sitio - antes tenia "sans-serif" a mano, que era la fuente que
     desentonaba con el resto de la UI. */
}

.unicen-mapa-filtros__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.unicen-mapa-filtros__header .material-symbols-outlined {
  font-size: 20px;
  color: #1f3d7d; /* primary */
}

.unicen-mapa-filtros__titulo {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f3d7d; /* primary */
}

/* Solo existe/se ve en mobile (ver media query mas abajo) - en desktop
   el panel esta siempre abierto, no hace falta cerrarlo. */
.unicen-mapa-filtros__cerrar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #41474f; /* on-surface-variant */
  cursor: pointer;
}

.unicen-mapa-filtros__cerrar:hover {
  background: #f0eded; /* surface-container */
}

.unicen-mapa-filtros__cerrar .material-symbols-outlined {
  font-size: 18px;
}

/* Selector combinado (2 ids) desde v22: el mapa de Organizaciones
   reusa este mismo contenedor de filtros, con su propio id
   ("unicen-mapa-organizaciones-filtros-contenedor") - misma regla para
   los dos en vez de duplicarla, ver templates/archive-experiencia.php. */
#unicen-mapa-filtros-contenedor,
#unicen-mapa-organizaciones-filtros-contenedor {
  overflow-y: auto;
  padding: 14px 16px 16px;
  /* Scrollbar prolijo (fino, redondeado, gris), mismo criterio de marca
     que el resto del panel en vez del scrollbar "de fabrica" del
     navegador. scrollbar-width/color: Firefox: los ::-webkit-* de abajo
     cubren Chrome/Safari/Edge. */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

#unicen-mapa-filtros-contenedor::-webkit-scrollbar,
#unicen-mapa-organizaciones-filtros-contenedor::-webkit-scrollbar {
  width: 6px;
}

#unicen-mapa-filtros-contenedor::-webkit-scrollbar-thumb,
#unicen-mapa-organizaciones-filtros-contenedor::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 999px;
}

.unicen-mapa-filtro-grupo {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.unicen-mapa-filtro-grupo:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.unicen-mapa-filtro-grupo__titulo {
  margin-bottom: 8px;
  color: #1f3d7d; /* primary - antes #111 (gris casi negro), sin relacion
                      con la paleta de marca */
  font-size: 13px;
  font-weight: 700;
  /* Sin text-transform: capitalize (a diferencia de antes): los labels
     de assets/mapa.js ya vienen bien escritos ("Tipo de experiencia"),
     ese transform los reescribia palabra por palabra ("Tipo De
     Experiencia"), que es justo la inconsistencia que se queria sacar. */
}

.unicen-mapa-filtro-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  color: #41474f; /* on-surface-variant */
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

.unicen-mapa-filtro-item input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  /* accent-color: forma mas simple y confiable de pintar el checkbox
     nativo (fondo/tilde) con el navy de marca, sin tener que armar un
     checkbox custom a mano con :before/:after. Soportado en todos los
     navegadores modernos (Chrome/Edge/Firefox/Safari 15.4+). */
  accent-color: #1f3d7d; /* primary */
  cursor: pointer;
}

/* Boton "Filtros" flotante: unico punto de entrada al panel en mobile
   (oculto por completo en desktop, ver media query - ahi el panel ya
   esta siempre visible). */
.unicen-mapa-filtros-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: #1f3d7d; /* primary */
  box-shadow: 0 4px 12px rgba(20, 40, 91, 0.35);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.unicen-mapa-filtros-toggle .material-symbols-outlined {
  font-size: 18px;
}

/* Mismo corte que ".unicen-mapa-wrapper" mas arriba (768px) - por debajo
   de eso el panel de filtros, fijo a 240px de ancho, ocupaba practicamente
   todo el mapa (alto 512px en mobile). Pasa a comportarse como un drawer:
   arranca cerrado (display:none) y el boton de arriba lo despliega
   ocupando la mayor parte del wrapper, con su propio boton de cierre. */
@media (max-width: 767px) {
  .unicen-mapa-filtros-toggle {
    display: inline-flex;
  }

  .unicen-mapa-filtros {
    display: none;
    top: 8px;
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: none;
  }

  .unicen-mapa-filtros.is-abierto {
    display: flex;
  }

  .unicen-mapa-filtros__cerrar {
    display: inline-flex;
  }
}

/* Popup de Mapbox al clickear un punto (ver generarPopupHtml() en
   assets/mapa.js): el CONTENIDO se arma con clases de Tailwind directo
   en el JS (mismo criterio que assets/experiencias.js con los botones
   de paginacion) - ya no hace falta CSS propio para eso (antes
   ".unicen-mapa-popup__titulo/__linea/__id", se sacan). Lo que si sigue
   necesitando CSS a mano es el CONTENEDOR que pone mapbox-gl.css
   (".mapboxgl-popup-content") y su boton de cierre nativo
   (".mapboxgl-popup-close-button") - vienen con un look generico
   (esquinas casi rectas, boton de cerrar chico, ~14px) que no es el que
   usa el resto del sitio para tarjetas/botones de cerrar.
   Selectores con el ancestro "#unicen-mapa-wrapper" (en vez de las
   clases de mapbox-gl solas) a proposito: le suman especificidad para
   pisar a mapbox-gl.css sin depender de en que orden haya quedado
   encolada cada hoja de estilos (ver includes/frontend.php). Desde v22
   se suma "#unicen-mapa-organizaciones-wrapper" a cada selector (mismo
   criterio, mismo estilo de popup para los dos mapas) en vez de
   duplicar el bloque entero. */
#unicen-mapa-wrapper .mapboxgl-popup-content,
#unicen-mapa-organizaciones-wrapper .mapboxgl-popup-content {
  padding: 0;
  border-radius: 16px;
  border: 1px solid #e2e8f0; /* border-subtle, mismo criterio que .unicen-card */
  box-shadow: 0 12px 28px rgba(20, 40, 91, 0.22);
  overflow: hidden;
}

/* Mismo tamaño/comportamiento que ".unicen-modal__cerrar" - el boton
   "de fabrica" de mapbox-gl.css es un simple <button> sin clase propia
   para engancharle estilos (por eso el selector apunta directo a
   ".mapboxgl-popup-close-button"), asi que se sobreescribe entero:
   posicion/tamaño/tipografia/hover. */
#unicen-mapa-wrapper .mapboxgl-popup-close-button,
#unicen-mapa-organizaciones-wrapper .mapboxgl-popup-close-button {
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  color: #64748b;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

#unicen-mapa-wrapper .mapboxgl-popup-close-button:hover,
#unicen-mapa-organizaciones-wrapper .mapboxgl-popup-close-button:hover {
  background: #f1f5f9 !important;
  color: #1f3d7d !important;
}
