/* Lato: la tipografía real del sitio viejo (confirmada leyendo el HTML
   guardado, --bs-body-font-family), no Nunito (era una aproximación visual
   de cuando no teníamos el CSS fuente). Pesos reales: 400 y 700 (no hay
   600 ni 800 — docs/07-diseno-frontend.md). */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lato/lato-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/lato/lato-700.woff2') format('woff2');
}

:root {
    /* Paleta: docs/07-diseno-frontend.md */
    --color-marino: #254f7f;
    --color-marino-oscuro: #012a5e;
    --color-celeste: #24b0e1;
    --color-rojo: #c93737;
    --color-amarillo: #ffd52b;
    --color-boton: #456894;
    --color-boton-hover: #35516f;
    --color-naranja: #cd6935;
    --color-fondo: #f6f7f9;
    --color-superficie: #ffffff;
    --color-texto: #212529;
    --color-texto-tenue: #6c757d;
    --color-negro: #000000;
    --color-espacio: #2e4c6b;

    --radio-chico: 0.375rem;
    --radio-grande: 1rem;
    --sombra-tarjeta: 0 4px 16px rgba(33, 37, 41, 0.08);
}

* {
    box-sizing: border-box;
}

/* Mismos anchos y márgenes que el ".container" real de Bootstrap del sitio
   viejo (confirmado en el HTML guardado): el buscador, el mapa, "Quiénes
   somos" y "La propuesta" están todos dentro de un .container ahí, así que
   comparten el mismo ancho y el mismo margen izquierdo/derecho — acá se
   logra con una sola clase en vez de repetir el valor en cada uno. */
.mapa-container {
    width: 100%;
    margin: 0 auto;
    padding-inline: 0.75rem;
    max-width: 540px;
}

@media (min-width: 768px) {
    .mapa-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .mapa-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .mapa-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .mapa-container {
        max-width: 1320px;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Encabezado */

.mapa-header {
    padding-block: 1rem;
    background: var(--color-superficie);
}

.mapa-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mapa-header-logo {
    height: 2.75rem;
}

.mapa-header-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.mapa-header-link {
    color: var(--color-texto);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
}

.mapa-header-link:hover {
    color: var(--color-marino);
}

.mapa-header-login {
    color: var(--color-boton);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.mapa-header-login:hover {
    color: var(--color-boton-hover);
}

/* Selector de idioma: solo abre/cierra el menú, no traduce nada (módulo 9) */

.mapa-idioma {
    position: relative;
}

.mapa-idioma-boton {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-texto);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.mapa-idioma-boton:hover {
    color: var(--color-marino);
}

.mapa-idioma-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 8rem;
    flex-direction: column;
    background: var(--color-superficie);
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra-tarjeta);
    padding: 0.5rem;
    z-index: 10;
}

/* Mismo motivo que .mapa-modal: [hidden] y esta regla tienen la misma
   especificidad, así que sin el :not() "display: flex" le gana al [hidden]
   del navegador y el menú queda visible siempre. */
.mapa-idioma-menu:not([hidden]) {
    display: flex;
}

.mapa-idioma-opcion {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radio-chico);
    color: var(--color-texto);
    text-decoration: none;
    font-size: 0.9rem;
}

.mapa-idioma-opcion:hover {
    background: var(--color-fondo);
}

/* Menú de usuario con sesión iniciada: copia del sitio viejo (avatar
   Bootstrap bg-primary con la inicial, badge text-bg-success "ADMIN" y
   desplegable con "Panel de Control" y "Cerrar la Sesión"). */

.mapa-usuario-boton {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-boton);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.mapa-usuario-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #0d6efd;
    color: #ffffff;
    font-size: 0.8rem;
}

.mapa-usuario-admin {
    padding: 0.35em 0.65em;
    border-radius: 50rem;
    background: #198754;
    color: #ffffff;
    font-size: 0.75em;
    line-height: 1;
}

/* Desplegable con los valores del .dropdown-menu / .dropdown-item de
   Bootstrap del sitio viejo: blanco con borde, cada opción en una línea con
   su ícono a la izquierda. */
.mapa-usuario-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 10;
    min-width: 10rem;
    padding: 0.5rem 0;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
    background: #ffffff;
}

.mapa-usuario-menu form {
    margin: 0;
}

.mapa-usuario-opcion {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.2rem 1rem;
    border: none;
    background: none;
    color: #212529;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.mapa-usuario-opcion:hover {
    background: #e9ecef;
}

.mapa-usuario-opcion svg {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
}

/* Banda hero: docs/07-diseno-frontend.md — imagen real del sitio viejo
   (gradiente + pines + puntos ya vienen en el archivo, hero-bg-real.jpg),
   altura y padding tomados de la regla .hero-section real del HTML
   guardado (max-height: 400px, padding: 50px 20px). */

.mapa-banda {
    display: flex;
    align-items: center;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mapa-banda-titulo {
    margin: 0;
    max-width: 26rem;
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
}

@media (min-width: 40rem) {
    .mapa-banda-titulo {
        font-size: 3rem;
    }
}

/* Buscador */

.mapa-buscador {
    padding-block: 1.5rem;
}

.mapa-buscador-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Filtros de la búsqueda avanzada (solo autenticados). */

.mapa-busqueda-avanzada {
    margin-top: 1rem;
}

.mapa-busqueda-avanzada-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.mapa-busqueda-avanzada-selects .mapa-buscador-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.mapa-busqueda-avanzada-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    border: none;
}

.mapa-busqueda-avanzada-etiquetas legend {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0;
    color: var(--color-texto-tenue);
    font-size: 0.9rem;
}

.mapa-filtro-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-texto);
    font-size: 0.9rem;
    cursor: pointer;
}

.mapa-filtro-etiqueta input {
    accent-color: var(--color-boton);
}

/* Resultados de la búsqueda, entre el buscador y el mapa. */

.mapa-resultados {
    padding-block: 0 1.5rem;
}

.mapa-resultados-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.mapa-resultados-cantidad {
    margin: 0;
    color: var(--color-texto-tenue);
    font-weight: 700;
}

.mapa-resultados-limpiar {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-boton);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.mapa-resultados-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.mapa-buscador-input {
    flex: 1 1 20rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e5e9;
    border-radius: var(--radio-chico);
    background: var(--color-superficie);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-texto);
}

.mapa-buscador-input::placeholder {
    color: var(--color-texto-tenue);
}

.mapa-boton {
    padding: 0.85rem 1.75rem;
    border: none;
    border-radius: var(--radio-chico);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
    cursor: pointer;
}

.mapa-boton-primario {
    background: var(--color-boton);
}

.mapa-boton-primario:hover {
    background: var(--color-boton-hover);
}

.mapa-boton-secundario {
    background: var(--color-naranja);
}

.mapa-boton-secundario:hover {
    background: #b55a2c;
}

/* Mapa */

.mapa-contenedor {
    height: 70vh;
    min-height: 24rem;
    /* "Espacio" alrededor del globo. MapLibre deja transparente lo que no es
       globo, así que se ve el fondo del contenedor. Color medido en la
       captura del sitio viejo (fondo por defecto del globo de Mapbox). */
    background: var(--color-espacio);
}

/* Modales */

.mapa-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(33, 37, 41, 0.5);
}

/* [hidden] y esta regla tienen la misma especificidad; sin el :not(),
   "display: flex" en .mapa-modal le gana al [hidden] del navegador porque
   viene después en la cascada, y el modal queda visible siempre. */
.mapa-modal:not([hidden]) {
    display: flex;
}

.mapa-modal-panel {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-superficie);
    border-radius: var(--radio-grande);
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(33, 37, 41, 0.25);
}

.mapa-modal-cerrar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 9999px;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.mapa-modal-cerrar:hover {
    background: #e2e5e9;
}

/* Ficha de ubicación */

/* El ancho y alto máximos de cada logo los calcula LogoUbicacion::estiloFicha
   según su proporción, para que todos ocupen una superficie parecida. */
.mapa-ficha-logo {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto 1rem;
}

.mapa-ficha-imagen {
    width: 100%;
    border-radius: var(--radio-chico);
    margin-bottom: 0.75rem;
}

.mapa-modal-contenido h2 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-texto);
}

.mapa-ficha-descripcion {
    white-space: pre-line;
    color: var(--color-texto);
    line-height: 1.5;
}

.mapa-ficha-invitacion {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e5e9;
    color: var(--color-texto-tenue);
    font-size: 0.9rem;
}

.mapa-ficha-datos {
    margin: 1rem 0;
    display: grid;
    gap: 0.5rem;
}

.mapa-ficha-datos dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-tenue);
}

.mapa-ficha-datos dd {
    margin: 0;
    color: var(--color-texto);
}

.mapa-ficha-referentes {
    white-space: pre-line;
}

.mapa-ficha-datos a {
    color: var(--color-boton);
}

.mapa-ficha-contactar {
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
}

.mapa-ficha-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.mapa-etiqueta {
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: rgba(37, 79, 127, 0.1);
    color: var(--color-marino);
    font-size: 0.8rem;
    font-weight: 700;
}

.mapa-ficha-areas h3,
.mapa-ficha-relacionadas h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-texto);
    margin: 1rem 0 0.5rem;
}

.mapa-ficha-areas ul,
.mapa-ficha-relacionadas ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.mapa-ficha-areas li {
    color: var(--color-texto);
}

.mapa-ficha-areas li p {
    margin: 0.15rem 0 0;
    color: var(--color-texto-tenue);
    font-size: 0.9rem;
}

/* Tarjeta de organización: usada para "Agrupa a" / "Pertenece a" en la
   ficha, y para la lista de organizaciones de un cluster del mapa. */

.mapa-tarjeta-organizacion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: 1px solid #e2e5e9;
    border-radius: var(--radio-grande);
    background: var(--color-superficie);
    box-shadow: var(--sombra-tarjeta);
    color: var(--color-texto);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
}

.mapa-tarjeta-organizacion:hover {
    border-color: var(--color-marino);
}

/* Recuadro blanco con el logo entero adentro (object-fit: contain): el
   círculo de antes recortaba los logos anchos, que son casi la mitad. */
.mapa-tarjeta-organizacion-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0.2rem;
    flex-shrink: 0;
    border: 1px solid #e2e5e9;
    border-radius: 0.5rem;
    background: #ffffff;
}

.mapa-tarjeta-organizacion-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Logo de Mapa Comunitario en lugar del que falta, en escala de grises. */
.mapa-logo-defecto {
    filter: grayscale(1);
    opacity: 0.7;
}

.mapa-tarjeta-organizacion-texto {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.mapa-tarjeta-organizacion-nombre {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.mapa-tarjeta-organizacion-lugar {
    color: var(--color-texto-tenue);
    font-size: 0.85rem;
}

/* Modales de aviso de la búsqueda: invitación a sumarse (anónimos) y "No se
   encontraron resultados". Textos reales del sitio viejo. */

.mapa-modal-ficha {
    max-width: 48rem;
}

.mapa-modal-aviso {
    max-width: 26rem;
    text-align: center;
}

.mapa-modal-aviso-logo {
    height: 3rem;
    margin-bottom: 1rem;
}

.mapa-modal-aviso p {
    margin: 0 0 1.25rem;
    color: var(--color-texto);
    line-height: 1.5;
}

.mapa-lista {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Secciones de landing: Quiénes somos y La propuesta. Estructura real del
   HTML guardado: sección envoltorio bg-light (mismo --color-fondo de toda
   la página) + tarjeta blanca redondeada, con el pin "flotando" arriba por
   margin-top negativo. */

.mapa-seccion-envoltorio {
    padding-block: 3rem;
}

.mapa-seccion {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 1.5rem;
    background: var(--color-superficie);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-tarjeta);
}

.mapa-seccion-icono {
    width: 10rem;
    flex-shrink: 0;
    margin-top: -7.5rem;
}

.mapa-seccion-frase {
    display: block;
    max-width: min(70%, 18rem);
    margin-bottom: 0.75rem;
}

.mapa-seccion p {
    margin: 0 0 0.5rem;
    line-height: 1.5;
    color: var(--color-texto);
}

.mapa-propuesta-columnas {
    display: grid;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .mapa-propuesta-columnas {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 40rem) {
    .mapa-seccion {
        flex-direction: column;
        text-align: center;
    }

    .mapa-seccion-icono {
        margin-top: -5rem;
    }
}

/* Banda de oportunidades identificadas: una sola imagen (oportunidades.png,
   bajada de assets/img/Oportunidades.png del sitio original) — no hay
   círculos ni íconos hechos a mano, esa banda es un cartel armado en una
   imagen (docs/07-diseno-frontend.md). */

.mapa-oportunidades {
    width: 100%;
    aspect-ratio: 3836 / 1131;
    background-color: var(--color-fondo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Confían en nosotros (carrusel real de logos de ubicaciones) / Con el
   apoyo de / Adhieren (fijos) */

.mapa-carrusel,
.mapa-menciones {
    text-align: center;
    padding: 2rem 0;
}

.mapa-carrusel h2,
.mapa-menciones h2 {
    margin: 0 0 1.5rem;
    padding: 0 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-texto);
}

.mapa-fila-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 0 1.5rem;
}

.mapa-fila-logos img {
    max-height: 3.25rem;
    max-width: 10rem;
    width: auto;
}

.mapa-carrusel-viewport {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
}

.mapa-carrusel-pista {
    display: flex;
    width: max-content;
    animation: mapa-carrusel-desplazar 40s linear infinite;
}

.mapa-carrusel-viewport:hover .mapa-carrusel-pista {
    animation-play-state: paused;
}

.mapa-carrusel-logo {
    height: 3.5rem;
    width: 3.5rem;
    object-fit: contain;
    margin: 0 1.25rem;
    filter: grayscale(100%);
    transition: filter 0.2s;
}

.mapa-carrusel-logo:hover {
    filter: none;
}

@keyframes mapa-carrusel-desplazar {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* "¿Has oído sobre esta organización?": card horizontal de Bootstrap del
   sitio viejo (imagen col-md-4 con max-height 200px, cuerpo col-md-8).
   Al hacer clic abre la ficha, como un pin del mapa. */

.mapa-al-azar {
    padding-top: 50px;
}

.mapa-al-azar-titulo {
    margin: 1rem 0;
    color: var(--color-texto-tenue);
    text-align: center;
}

.mapa-al-azar-tarjeta {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
    background: var(--color-superficie);
    font: inherit;
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
}

.mapa-al-azar-tarjeta:hover .mapa-al-azar-nombre {
    color: var(--color-boton);
}

.mapa-al-azar-imagen {
    display: block;
    max-height: 200px;
    overflow: hidden;
}

.mapa-al-azar-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sin imagen representativa se muestra el logo: entero y con margen, no
   recortado de borde a borde como una foto. */
.mapa-al-azar-imagen-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.mapa-al-azar-imagen-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

.mapa-al-azar-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.mapa-al-azar-nombre {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}

.mapa-al-azar-descripcion {
    white-space: pre-line;
}

.mapa-al-azar-ver-mas {
    color: var(--color-boton);
    font-weight: 600;
    white-space: nowrap;
}

.mapa-al-azar-tarjeta:hover .mapa-al-azar-ver-mas {
    text-decoration: underline;
}

.mapa-al-azar-lugar {
    color: var(--color-texto-tenue);
    font-size: 0.875em;
}

@media (min-width: 768px) {
    .mapa-al-azar-tarjeta {
        flex-direction: row;
    }

    .mapa-al-azar-imagen {
        flex: 0 0 33.333%;
    }

    .mapa-al-azar-cuerpo {
        flex: 1;
    }
}

/* Prefooter: section.bg-black.d-none.d-lg-block del sitio viejo, con logo
   negativo + texto. En el viejo tenía el formulario "Ser parte" a la
   derecha; ahora ese formulario está solo en el panel lateral.
   Solo se muestra en escritorio (>= 992px), igual que el original. */

.mapa-prefooter {
    display: none;
}

@media (min-width: 992px) {
    .mapa-prefooter {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        padding-block: 3rem;
        background: var(--color-negro);
        color: #ffffff;
    }
}

.mapa-prefooter-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: 1.5rem 3rem;
}

.mapa-prefooter-logo {
    max-width: 200px;
}

.mapa-prefooter-texto {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}


/* Pie: real es bg-light con links de texto, sin isotipo
   (docs/07-diseno-frontend.md) */

.mapa-footer {
    padding: 1.5rem;
    background: var(--color-fondo);
    text-align: center;
}

.mapa-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.mapa-footer-link {
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

.mapa-footer-link:hover {
    color: var(--color-boton);
}

.mapa-footer-credito {
    margin: 0;
    color: var(--color-texto-tenue);
    font-size: 0.85rem;
}

/* "Ser parte": panel oculto (offcanvas) que abre el link del menú, con el
   formulario real del sitio viejo (serparte.html). Solo maqueta visual:
   ningún campo dispara una petición todavía (módulo 10). */

.mapa-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(33, 37, 41, 0.5);
}

.mapa-offcanvas:not([hidden]) {
    display: block;
}

.mapa-offcanvas-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 24rem;
    overflow-y: auto;
    background: var(--color-superficie);
    box-shadow: 0 0 40px rgba(33, 37, 41, 0.25);
}

.mapa-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e5e9;
}

.mapa-offcanvas-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-texto);
}

.mapa-offcanvas-header .mapa-modal-cerrar {
    position: static;
}

.mapa-offcanvas-body {
    padding: 1.5rem;
}

.mapa-offcanvas-intro {
    margin: 0 0 1rem;
    color: var(--color-texto-tenue);
    font-size: 0.8rem;
    line-height: 1.5;
}

.mapa-offcanvas-body form {
    display: grid;
    gap: 1rem;
}

.mapa-serparte-campo label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-texto-tenue);
    font-size: 0.9rem;
}

.mapa-offcanvas-body textarea.mapa-buscador-input {
    resize: vertical;
    font-family: inherit;
}


.mapa-serparte-enviar {
    width: 100%;
}

/* Política de Uso de Datos: mismo offcanvas, pero sale desde abajo como el
   offcanvas-bottom del sitio viejo, a todo el ancho y con scroll propio. */

.mapa-offcanvas-panel-abajo {
    top: auto;
    right: 0;
    max-width: none;
    max-height: 60vh;
}

.mapa-politica {
    color: var(--color-texto);
    font-size: 0.875rem;
    line-height: 1.5;
}

.mapa-politica h5 {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
}

.mapa-politica h5:first-child {
    margin-top: 0;
}

.mapa-politica p,
.mapa-politica ul {
    margin: 0 0 0.5rem;
}

.mapa-politica ul {
    padding-left: 1.25rem;
}

.mapa-politica a {
    color: var(--color-boton);
}

/* "Ser parte" (módulo 10): campo trampa contra bots, fuera de la vista y
   del lector de pantalla; errores de envío; y aviso después de enviar, con
   el azul del toast del sitio viejo (#welcome-toast). */

.mapa-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mapa-serparte-errores {
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-radius: var(--radio-chico);
    background: rgba(201, 55, 55, 0.12);
    color: var(--color-rojo);
    font-size: 0.85rem;
}

/* "Ser parte" en dos partes: datos personales, cómo se registra (radios) y,
   para una organización, sus datos y la ubicación a cargar con su mapa. */

/* El doble de ancho que los otros paneles laterales, con más aire. */
.mapa-offcanvas-panel-serparte {
    max-width: 48rem;
}

.mapa-offcanvas-panel-serparte .mapa-offcanvas-body {
    padding: 2rem 2.5rem 2.5rem;
}

.mapa-offcanvas-panel-serparte .mapa-offcanvas-intro {
    margin-bottom: 2rem;
    font-size: 0.875rem;
}

.mapa-offcanvas-panel-serparte form {
    gap: 1.5rem;
}

.mapa-offcanvas-panel-serparte .mapa-buscador-input {
    width: 100%;
    box-sizing: border-box;
}

.mapa-serparte-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 600px) {
    .mapa-offcanvas-panel-serparte .mapa-offcanvas-body {
        padding: 1.5rem 1rem;
    }

    .mapa-serparte-fila {
        grid-template-columns: 1fr;
    }
}

.mapa-serparte-titulo {
    margin: 0;
    padding: 0;
    color: var(--color-texto);
    font-size: 0.95rem;
    font-weight: 600;
}

.mapa-serparte-opciones {
    display: grid;
    gap: 0.5rem;
}

.mapa-serparte-opcion {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--color-texto);
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
}

.mapa-serparte-opcion input {
    flex: none;
    margin: 0.2rem 0 0;
    accent-color: var(--color-boton);
}

.mapa-serparte-bloque {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mapa-serparte-bloque[hidden] {
    display: none;
}

/* El legend no es parte de la grilla del fieldset: el gap no lo separa. */
.mapa-serparte-bloque > legend {
    margin-bottom: 1.5rem;
}

/* "Datos de la organización" separado de las opciones de arriba. */
[data-serparte-organizacion] {
    padding-top: 0.5rem;
}

.mapa-serparte-ayuda {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-texto-tenue);
    font-size: 0.75rem;
}

.mapa-serparte-mapa {
    position: relative;
}

.mapa-serparte-mapa-lienzo {
    height: 420px;
    border-radius: var(--radio-chico);
}

.mapa-serparte-mapa-buscador {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 5;
}

.mapa-serparte-mapa-buscador input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem 0.5rem 2rem;
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23757575%22 stroke-width=%222%22><circle cx=%2211%22 cy=%2211%22 r=%227%22/><path d=%22M21 21l-4.3-4.3%22/></svg>') no-repeat 0.5rem center / 1rem;
    color: #333;
    font-family: inherit;
    font-size: 0.9rem;
}

.mapa-serparte-mapa-buscador ul {
    max-height: 14rem;
    margin: 4px 0 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mapa-serparte-mapa-buscador li {
    padding: 0.45rem 0.75rem;
    color: #333;
    font-size: 0.85rem;
    line-height: 1.3;
    cursor: pointer;
}

.mapa-serparte-mapa-buscador li:hover,
.mapa-serparte-mapa-buscador li[aria-selected="true"] {
    background: #f0f2f5;
}

.mapa-serparte-mapa-buscador p {
    margin: 0.25rem 0 0;
    color: #fff;
    font-size: 0.75rem;
    text-shadow: 0 0 3px #000;
}

.mapa-aviso {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    z-index: 50;
    max-width: calc(100% - 2rem);
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    background: #3b82f6;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
    transition: opacity 0.5s;
}

/* "Historial de Búsqueda" (módulo 11): panel que baja desde arriba, como el
   offcanvas-top del sitio viejo, con dos columnas centradas. */

.mapa-offcanvas-panel-arriba {
    bottom: auto;
    right: 0;
    max-width: none;
    max-height: 70vh;
}

.mapa-historial {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.mapa-historial h5 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--color-texto);
}

.mapa-historial ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
}

.mapa-historial button {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-boton);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.mapa-historial button:hover {
    text-decoration: underline;
}