@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Enlace "saltar al contenido": invisible hasta recibir foco con Tab. */
.skip-link {
    position: absolute;
    left: -9999px;
    transition: none;   /* sin animar 'left': debe aparecer al instante */
    top: 0;
    z-index: 3000;
    padding: 10px 18px;
    background: #0e668d;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    }

.skip-link:focus {
    left: 0;
    }

/* ESTILOS BÁSICOS */

:root {
    --color-blue: #0e668d;
    --color-green: #a7ce39;
    --color-light-blue: #e9f2f8;
    --color-medium-blue: #2d82b3;
    --color-dark-blue: #0e4a6d;
    --color-teal: #1b7188;
    --color-red: #eb1e24;
    --color-dark-gray: #444444;
    --color-text-gray: #555555;
    }

* {
    box-sizing: border-box;
    }

body {
    margin: 0;
    padding: 0;
    font-family: 'Sora', sans-serif;
    overflow-x: hidden;
    background-color: #f8f9fa;
    }

/* ESTILOS DE NAVEGACIÓN */

.navbar {
    background: transparent !important;
    position: absolute;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    }

.navbar .navbar-brand img {
    width: 300px;
    height: auto;
    transition: width 0.3s ease;
    }

.navbar .navbar-nav .nav-link {
    color: white !important;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    }

.navbar .navbar-nav .nav-link:hover {
    transform: translateY(-2px);
    }

.navbar .navbar-nav .nav-link.active {
    font-weight: 700;
    }

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.8) !important;
    }

.navbar-collapse.collapse.show,
.navbar-collapse.collapsing {
    background: rgba(14, 102, 141, 0.85);
    border-radius: 10px;
    }

/* ESTILOS DE HEADER */

.header {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    }

.header_background-image-wrapper {
    display: none;
    }

.header-content {
    position: relative;
    padding: 0 0; /*antes 50px en y*/
    margin: 0 auto;
    width: 80%;
    color: white;
    text-align: left;
    background-color: #20525d;
    }

/* Fondo sólido detrás del header-content que cubre todo el ancho */

.header-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #20525d;
    z-index: -1;
    }

.header-content img {
    width: 26vw;
    max-width: 400px;
    min-width: 150px;
    height: auto;
    }

.header-content h1 {
    font-size: 4.5rem;
    margin-bottom: 5px;
    font-weight: 700;
    }

.header-content h2 {
    font-size: 2.7rem;
    font-weight: normal;
    }

.title-container-parent {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    }

.header-description {
    font-size: 1.3rem;
    line-height: 1.5;
    }

/* GRID DE INFORMACIÓN */

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
    }

.info-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    min-width: 0;   /* la tarjeta no crece más que su columna por la ilustración */
    padding: 15px;
    /* Casi blanco, como la página del PDF para la que se dibujaron las
       ilustraciones: antes, blanco al 50 % sobre el teal daba un gris verdoso
       donde se perdían los trazos claros. */
    background: #f3f6f6;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

/* Hover: el mismo fondo (así nada cambia de contraste), solo elevación y un
   borde del color de acento. */
.info-item:hover,
.info-item--active {
    transform: translateY(-4px);
    border-color: #54bfba;
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.5);
    }

/* La ilustración (26vw en .header-content img) cabe siempre dentro de la
   tarjeta: antes, por debajo de ~1540 px de ancho se salía del borde y la
   rejilla desbordaba su contenedor (y la página, en torno a 1024 px). */
.info-item img {
    max-width: 100%;
    }

.info-item h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    font-weight: bold;
    }

.info-item p {
    font-size: 1rem;
    color: #24363b;
    margin: 0;
    }

h3.header-fact {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    }

h3 span {
    font-size: 0.55em;
    font-weight: normal;
    }

/* SECCIÓN ARRECIFE */

  .arrecife-section {
    background-color: #0e4a6d;
    color: white;
    padding: 0px 0;
    position: relative;
    overflow: hidden;
  }

  .arrecife-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #20525d, #20525da6, #0e4a6d);
    z-index: 1;
  }

.arrecife-container {
    position: relative;
    z-index: 2;
    }

.arrecife-img {
    border-radius: 10px;
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    }

.arrecife-text {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 300;
    }

.arrecife-text strong {
    font-weight: 600;
    }

.arrecife-text a {
    color: #4ecdc4;
    text-decoration: none;
    transition: color 0.3s ease;
    }

.arrecife-text a:hover {
    color: #a7ce39;
    text-decoration: underline;
    }

.arrecife-text-column h3,
.arrecife-text-column h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color:#54bfba;
    }

/* ESTILOS DEL MAPA */

/* La sección mide como mucho 1000px y nunca más que el viewport (menos un
   margen pequeño), para que el panel completo quepa sin desplazar la página.
   La segunda declaración (svh) gana donde se soporta. */
.maps-section {
    width: 100%;
    overflow: hidden;
    height: min(1000px, calc(100vh - 2rem));
    height: min(1000px, calc(100svh - 2rem));
    }

#mini-map {
    width: 100%;
    height: min(1000px, calc(100vh - 2rem));
    height: min(1000px, calc(100svh - 2rem));
    border: none;
    pointer-events: auto;
    }

.segment-container {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    width: 300px;
    max-height: 350px;
    overflow: hidden;
    z-index: 1000;
    }

.segment {
    width: 100%;
    }

.segment .title {
    padding: 8px;
    font-weight: bold;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
    }

.segment .map {
    width: 100%;
    height: 300px;
    }

.leaflet-bottom {
    bottom: 8px !important;
    }

.leaflet-control-scale-line {
    position: relative;
    height: 2px !important;
    border: none !important;
    color: white !important;
    border-top: none !important;
    line-height: 1.8 !important;
    padding: 2px 5px 1px !important;
    white-space: nowrap !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.8) !important;
    text-shadow: none !important;
    font-size: 1.3em !important;
    }

.leaflet-bottom .leaflet-control {
    margin-bottom: 16px !important;
    }

.roseta-wrapper {
    width: 100%;
    }

.roseta {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

.roseta.visible {
    opacity: 1;
    transform: scale(1);
    }

.roseta svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    }

.roseta[style*="display: block"] {
    display: block !important;
    }

.central-text {
    text-anchor: middle;
    dominant-baseline: central;
    font-size: 68px;
    font-weight: bold;
    fill: white;
    }

.info-container {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 804px;
    max-width: 90%;
    z-index: 1000;
    transition: all 0.3s ease;
    bottom: 0px !important;
    max-height: calc(100% - 40px);
    overflow: auto;
    color:white;
    }

#indicadores_info_desc_div {
    display: flex;
    flex-direction: column;
    flex: 1;
    }

#indicadores_info_desc_div > .d-flex.justify-content-center:last-child {
    margin-top: auto;
    padding-top: 20px;
    padding-bottom: 15px;
    }

h3.nombre-isla:not(.mb-0) {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #0e668d;
    }

.island-buttons-container {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 10px;
    max-width: 90%;
    z-index: 1010;
    }

.island-title {
    font-size: 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    }

.island-button {
    border: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-shadow: none;
    }

.island-button:hover {
    /* transform: scale(1.05); */
    font-weight: bolder;
    }

.btn-bg-ap {
    color: white;
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #007a50;
    }

.btn-bg-ap:hover {
    background-color: #007a50;
    color: white;
    }

.btn-bg-am {
    background-color: #a8ce38;
    color: #363636;
    /* background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #a8ce38; */
    }

.btn-bg-am:hover {
    background-color: #a8ce38;
    color: #363636;
    }

.btn-bg-b {
    background-color: #fedc1c;
    color: #363636;
    /* background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #fedc1c; */
    }

.btn-bg-b:hover {
    background-color: #fedc1c;
    color: #363636;
    }

.btn-bg-cp {
    background-color: #f5931f;
    color: #363636;
    /* background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #f5931f; */
    }

.btn-bg-cp:hover {
    background-color: #f5931f;
    color: #363636;
    }

.btn-bg-cm {
    background-color: #eb1e24;
    color: white;
    /* background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #eb1e24; */
    }

.btn-bg-cm:hover {
    background-color: #eb1e24;
    color: white;
    }

.btn-bg-nd {
    background-color: #a5a8ab;
    color: #363636;
    /* background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #363636; */
    }

.btn-bg-nd:hover {
    background-color: #a5a8ab;
    color: #363636;
    }

.manita {
    cursor: pointer;
    }

/* CASOS DE ÉXITO */

.casos-exito-section {
    padding: 80px 0;
    background-color: #fff;
    }

.banner {
    height: 180px;
    width: 100%;
    cursor: pointer;
    transition: all 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: background 0.5s ease;
    }

.banner:hover::before {
    background: rgba(0, 0, 0, 0.2);
    }

.banner-1 {
    background: url('https://lanresc.mx/media/public/photos/ALC_2c8ecc3651ac421d902adf4cb105f485.jpg') center/cover no-repeat;
    }

.banner-2 {
    background: url('https://lanresc.mx/media/public/photos/ALC_5e61a5f0ea1c446c9464aa89c63955df.jpg') center/cover no-repeat;
    }

.banner-3 {
    background: url('https://lanresc.mx/media/public/photos/ALC_a3953016f94e48aa8aeb90442b6f42c4.jpg') center/cover no-repeat;
    }

.banner-content {
    display: none;
    padding: 30px;
    opacity: 0;
    transition: opacity 1s ease;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

.banner-expanded {
    height: 350px;
    position: relative;
    transform-origin: left top;
    }

.active-content {
    display: block;
    opacity: 1;
    }

.hidden-banner {
    height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
    display: none !important;
    }

.banner-container {
    transition: all 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

.banner-text {
    position: relative;
    z-index: 2;
    transition: opacity 0.8s ease;
    font-size: 1.8rem;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    }

.banner-content h2 {
    color: #0e668d;
    margin-bottom: 20px;
    font-weight: 600;
    }

.banner-content p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    }

.btn-custom {
    background-color: #0e668d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    }

.btn-custom:hover {
    background-color: #0a4f6d;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(14, 102, 141, 0.3);
    color: white;
    }

/* ALACRANES A TRAVÉS DEL TIEMPO */

.alacranes-header {
    position: relative;
    overflow: hidden;
    background-color: #e9f2f8;
    }

.alacranes-image {
    height: 400px;
    background-position: center;
    background-size: cover;
    position: relative;
    }

.alacranes-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    }

.alacranes-title {
    padding: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
    }

.alacranes-title h1 {
    color: #0e668d;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    }

.alacranes-title h2 {
    color: #0e668d;
    font-weight: 400;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    }

.timeline {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    }

.timeline-line {
    height: 2px;
    background-color: #a7ce39;
    flex-grow: 1;
    position: relative;
    }

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #a7ce39;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }

.dot-1 {
    left: 20%;
    }

.dot-2 {
    left: 40%;
    }

.dot-3 {
    left: 60%;
    }

.dot-4 {
    left: 80%;
    }

/* TODO ESTÁ CONECTADO */

.conectado-section {
    background-color: #fffef8;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    }

/* .conectado-title {
    color: #0e668d;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    } */

.conectado-text {
    color: #0e668d;
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 15px;
    }

.conectado-img {
    width: 130%;
    height: auto;
    border-radius: 5px;
    }

/* BLANQUEAMIENTO DE CORALES */

.coral-section {
    position: relative;
    overflow: hidden;
    }

.bg-custom-green {
    background-color: var(--color-green);
    }

.bg-custom-teal {
    background-color: var(--color-teal);
    color: white;
    opacity: 0.95;
    }

.coral-info {
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 10;
    width: 50%;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    }

.coral-image-container {
    height: 100%;
    min-height: 500px;
    /* Se retira la background-image: el archivo ../img/arrecife_blanqueamiento.jpg
       no existe en el repositorio (y .coral-image-container no se usa en las
       plantillas). Su referencia rompía collectstatic con el manifest storage. */
    background-size: cover;
    background-position: center;
    }

/* TARJETA DE REPORTE */

.report-section {
    padding: 4rem 0;
    background-color: #fff;
    }

.report-title {
    color: var(--color-blue);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 0.3rem;
    }

.report-subtitle {
    color: var(--color-green);
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    }

.report-content {
    color: #2a6086;
    font-size: 0.95rem;
    line-height: 1.5;
    }

.report-content p {
    font-size: 1.3rem;
    }

.report-image {
    border-radius: 4px;
    overflow: hidden;
    }

.report-image img {
    width: 100%;
    height: auto;
    display: block;
    }

/* TUS ACCIONES PUEDEN HACER LA DIFERENCIA */

.eco-section {
    padding: 4rem 0;
    background-color: #e9f2f8;
    }

/* .eco-title {
    color: var(--color-blue);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 3rem;
    } */

.eco-icon {
    /* background-color: var(--color-green); */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    flex-shrink: 0;
    }

.eco-icon svg {
    width: 60px;
    height: 60px;
    fill: var(--color-blue);
    }

.eco-text {
    color: var(--color-blue);
    font-size: 1.4rem;
    line-height: 1.4;
    }

.eco-action {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    }

.eco-action-link {
    color: var(--color-blue);
    text-decoration: none;
    }

.eco-action-link:hover {
    text-decoration: underline;
    }

/* RECOMENDACIONES */

.recommendation-section {
    padding: 3rem 0;
    background-color: #e9f2f8;
    }

.recommendation-item {
    display: flex;
    margin-bottom: 1.8rem;
    align-items: flex-start;
    }

.recommendation-marker {
    flex-shrink: 0;
    width: 280px;
    height: auto;
    margin-right: 1rem;
    margin-top: 0.10rem;
    text-align: center;
    }

.recommendation-text {
    color: #525252;
    font-size: 1.4rem;
    line-height: 1.4;
    }

.recommendation-text .temporalidad {
    color: #19678d;
    }

.image-comparison-container {
    position: relative;
    width: 100%;
    height: 967px;
    overflow: hidden;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    }

.image-comparison-before,
.image-comparison-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    }

.image-comparison-after {
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
    }

.image-comparison-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color: #fff;
    cursor: col-resize;
    z-index: 10;
    transform: translateX(-2px);
    }

.image-comparison-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 3px solid #0d6efd;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: col-resize;
    z-index: 11;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

.image-comparison-handle::before,
.image-comparison-handle::after {
    content: "";
    position: absolute;
    background-color: #0d6efd;
    }

.image-comparison-handle::before {
    width: 2px;
    height: 15px;
    transform: translateX(-5px);
    }

.image-comparison-handle::after {
    width: 2px;
    height: 15px;
    transform: translateX(5px);
    }

.comparison-label {
    position: absolute;
    bottom: 20px;
    padding: 5px 15px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 9;
    }

.before-label {
    right: 20px;
    }

.after-label {
    left: 20px;
    }

/* PARTICIPANTES */

.participants-section {
    padding: 3rem 0;
    /* background-color: #e9f2f8; */
    background-color: #fffef8;
    }

.workshop-year {
    color: var(--color-medium-blue);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 2rem;
    }

.participants-image {
    width: 100%;
    border-radius: 0.375rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem;
    }

/* Escritorio (columnas lado a lado): la imagen acompaña a la lista. Al llegar
   arriba, justo debajo de los menús flotantes, se queda fija mientras dura la
   lista y al terminar se va con ella. Si es más alta que la pantalla, primero
   se recorre completa y se fija con su borde inferior a la vista: ese tope lo
   calcula tarjeta_reporte_scripts_v2.js en --participantes-tope. */
@media (min-width: 992px) {
    .participants-image {
        position: sticky;
        top: var(--participantes-tope, 5rem);
    }
}

.participants-list {
    color: var(--color-medium-blue);
    font-size: 0.95rem;
    line-height: 1.5;
    }

.participants-name {
    font-weight: 600;
    }

.participants-affiliation {
    color: #5a5a5a;
    }

/* AGRADECIMIENTOS E INSTITUCIONES */

.acknowledgments-section {
    background-color: #fffef8;
    }

.institutions-section {
    padding: 3rem 0;
    background-color: #e9f2f8;
    }

.acknowledgments-content {
    background-color: var(--color-light-blue);
    padding: 2rem;
    border-radius: 0.375rem;
    line-height: 1.6;
    color: #31708f;
    font-size: 1.2rem;
    }

/* Mobile meadia query for acknowledgments */

/* FOOTER: estilos en footer.css (compartidos con la portada) */

.section-title {
    color: #0e668d;
    font-weight: 700;
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
    word-break: break-word; /* Permite romper palabras largas */
    overflow-wrap: break-word;
    max-width: 100%;
    }

/* MEDIA QUERIES GENERALES */

/* Media Queries para tablets específico de corales */

.coral-title {
    margin-bottom: 0rem !important;
    }

/* Clases para sección de indicarores */

/* Estilos para las categorías de ecosistemas */

.ecosystem-category {
    margin-bottom: 30px;
    /* padding: 15px; */
    border-radius: 10px;
    /* background-color: #f9f9f9; */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    }

.ecosystem-category h3 {
    color: #2c5e1a;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 8px;
    /* border-bottom: 2px solid #e0e0e0; */
    }

.ecosystem-content {
    display: flex;
    align-items: center;
    }

.ecosystem-text {
    flex: 3;
    padding-right: 20px;
    }

.ecosystem-text span {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #333;
    }

.ecosystem-icon-large {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-60px;
    }

.ecosystem-icon-large img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    padding: 0px;
    /* background-color: rgba(255, 255, 255, 1); */
    /* box-shadow: 0 0 15px rgba(0,0,0,0.1); */
    }

/* Mantener los estilos existentes para los íconos pequeños */

.ecosystem-icons {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
    }

.ecosystem-icon-container {
    text-align: center;
    margin: 10px;
    }

.ecosystem-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    }

.ecosystem-icon img {
    width: 35px;
    height: 35px;
    }

.ecosystem-label {
    font-size: 12px;
    font-weight: 500;
    }

/* Colores específicos para cada categoría (opcional) */

.ecosystem-category:nth-child(1) h3 {
    color: #8D7C31; /* Color para Ecosistemas y paisajes */
    }

.ecosystem-category:nth-child(2) h3 {
    color: #573874; /* Color para Manejo y gobernanza */
    }

.ecosystem-category:nth-child(3) h3 {
    color: #ad2081; /* Color para Economía */
    }

.ecosystem-category:nth-child(4) h3 {
    color: #005c8e; /* Color para Hidrología */
    }

.ecosystem-category:nth-child(5) h3 {
    color: #346d6c; /* Color para Biodiversidad */
    }

/* ==== Inline overrides & additions merged into tr_virtual.css ==== */

/* Header background image enhancements from inline */

.header-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* La franja final de la foto se funde con el fondo del contenedor (el
       color con el que arranca la numeralia, #20525d por omisión; Tabasco,
       Veracruz y Yucatán ponen el suyo), en vez de cortarse en seco. La franja
       mide como mucho 200 px (o el 24 % de la foto si es más baja), para que
       en una portada vertical como la de la integral se funda solo el mar del
       final y no el collage que queda detrás del título. */
    -webkit-mask-image: linear-gradient(to bottom, #000 max(76%, calc(100% - 200px)), rgba(0, 0, 0, 0.55) max(90%, calc(100% - 80px)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 max(76%, calc(100% - 200px)), rgba(0, 0, 0, 0.55) max(90%, calc(100% - 80px)), transparent 100%);
    }

/* Header-image in mobile */

/* Fade-in-bottom animation */

.fade-in-bottom {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
    transition-delay: 0s;
    }

.fade-in-bottom.is-visible {
    opacity: 1;
    transform: translateY(0);
    }

/* Parallax & Arrecife layout (updated) */

.parallax-image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 858px;
    }

.parallax-image {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    opacity: 1;
    pointer-events: none;
    }

.parallax-image--primary {
    opacity: 1;
    transition: opacity 0.8s ease;
    z-index: 1;
    }

.parallax-image--secondary {
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 2;
    }

/* Cuando el container tiene la clase activa */

.parallax-image-container.unops-visible .parallax-image--primary {
    opacity: 0;
    }

.parallax-image-container.unops-visible .parallax-image--secondary {
    opacity: 1;
    }

.parallax-figure {
    position: absolute;
    width: 100%;
    left: 0;
    margin: 0;
    pointer-events: none;
    }

.parallax-figure .parallax-image {
    position: static; /* ya no absolute, fluye dentro del figure */
    display: block;
    width: 100%;
    height: auto;
    }

.parallax-caption {
    display: block;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    }

.arrecife-section {
    padding: 0;
    }

.arrecife-text-column {
    padding: 60px 60px;
    }

.arrecife-image-column {
    padding: 0;
    }

/* Left panel grid + buttons */

.left-panel-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 20px;
    width: 100%;
    max-width: 800px;
    z-index: 1000;
    }

.buttons-section {
    padding: 12px;
    border-radius: 8px 8px 0 0;
    overflow: visible;
    }

.buttons-section .w-100 .island-button {
    font-size: 1.1rem;
    padding: 0.3rem 0.5rem;
    transform-origin: center;
    }

.island-button.active_btn {
    font-weight: bold;
    margin: 0;
    }

/* Button sizing helpers */

.buttons-section .flex-fill.island-button {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.buttons-section .flex-fill.island-button:first-child {
    margin-left: 0;
    }

.buttons-section .flex-fill.island-button:last-child {
    margin-right: 0;
    }

/* Participants stats: participantes por sector, por género e instituciones */

.stats-container {
    margin-top: 2rem; width: 100%;
    }

.stats-chart {
    margin: 0;
    }

.stats-chart .segment-title {
    display: block; margin: 0 0 0.4rem 0;
    }

/* Bajo la de sector: género a la mitad de su ancho e instituciones a la mitad
   de la de género; los extremos quedan alineados con la barra de arriba. */
.stats-fila-secundaria {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-top: 2.25rem;
    }

.stats-chart-generos {
    flex: 0 0 50%;
    }

.stats-chart-instituciones {
    flex: 0 0 25%;
    }

/* Números arriba y etiquetas abajo, al inicio de su segmento. Un segmento
   angosto se ensancha lo que necesite su texto (y los anchos le ceden ese
   espacio), así que los textos no se enciman. */
.number-segments-container,
.label-segments-container {
    display: flex; width: 100%;
    }

.number-segments-container {
    margin-bottom: 4px;
    }

.label-segments-container {
    margin-top: 6px;
    }

.number-segment,
.label-segment {
    flex-grow: 0; flex-shrink: 1; min-width: max-content; padding-right: 0.6rem; display: flex; align-items: flex-end;
    }

.segment-title {
    font-size: 1.2rem; font-weight: bold; color: #0e668d; margin-left: 5px;
    }

.number {
    font-size: 1.2rem; font-weight: 700; line-height: 1;
    }

.stats-bar {
    display: flex; height: 40px; width: 100%; border-radius: 4px; overflow: hidden;
    }

.color-segment {
    height: 100%;
    }

/* Separación del color del fondo entre segmentos. */
.color-segment + .color-segment {
    border-left: 2px solid #fffef8;
    }

.sector-label {
    font-size: 0.9rem; white-space: nowrap;
    }

/* Números y etiquetas: el tono de su barra, oscurecido (mismo matiz) cuando
   hace falta para leerse sobre el fondo crema (contraste de al menos 4.5:1).
   Las barras conservan el color original. */
.academico-number { color: #0c7f8f; }       /* barra #008697 */
.gubernamental-number { color: #996c0b; }   /* barra #f8b217 */
.osc-number { color: #6270ad; }             /* barra #7280bf */
.privado-number { color: #108526; }         /* barra #3ea648 */
.comunidad-number { color: #b55a2c; }       /* barra #f29164 */
.sin-informacion-number { color: #707070; }
.mujeres-number { color: #6371ad; }         /* barra #7381bf */
.hombres-number { color: #47419a; }
.instituciones-number { color: #006a43; }

.academico-segment { background-color: #008697; }
.gubernamental-segment { background-color: #f8b217; }
.osc-segment { background-color: #7280bf; }
.privado-segment { background-color: #3ea648; }
.comunidad-segment { background-color: #f29164; }
.sin-informacion-segment { background-color: #707070; }
.mujeres-segment { background-color: #7381bf; }
.hombres-segment { background-color: #47419a; }
.instituciones-segment { background-color: #006a43; }

/* Pantallas angostas: un grupo por estadística, con una barra por categoría
   del largo de su valor respecto al mayor del grupo. Se le resta lo que
   ocupan el número y la etiqueta, para que siempre quepan a su derecha. */
.mobile-stats {
    display: none; width: 100%;
    }

.mobile-stats-group {
    margin: 0 0 1.75rem 0;
    }

.mobile-stats-group:last-child {
    margin-bottom: 0;
    }

.mobile-stats-group .segment-title {
    display: block; margin: 0 0 0.75rem 0;
    }

.mobile-stat-row {
    display: flex; align-items: center; margin-bottom: 10px;
    }

.mobile-stat-bar {
    flex: none; height: 26px; margin-right: 10px; border-radius: 3px; min-width: 4px;
    width: calc((100% - 11rem) * var(--relativo) / 100);
    }

.mobile-stat-number {
    font-size: 1.5rem; font-weight: 700; margin-right: 8px; line-height: 1;
    }

.mobile-stat-label {
    font-size: 1rem; color: #444;
    }

/* Indicadores gallery (consolidated) */

.indicadores-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    /* align-items: center; */
    padding: 15px;
    min-height: 100px;
    /* margin-top: 20px; */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    }

/* Ítem de indicador: botón con círculo de color, insignia de letra y nombre
   (misma estructura en escritorio y móvil; ver crearItemIndicador en el JS). */
.indicador-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 104px;
    padding: 6px 0 4px;
    background: none;
    border: 0;
    font: inherit;
    color: #333;
    cursor: pointer;
    border-radius: 12px;
    opacity: 1;
    }

.indicador-item:hover {
    opacity: 1;
    }

.indicador-circulo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.35s ease, transform 0.3s ease, box-shadow 0.3s ease, outline-color 0.3s ease;
    }

.indicador-circulo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    }

/* Indicador sin icono: aro punteado en lugar de una imagen rota */
.indicador-sin-icono {
    display: block;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, 0.85);
    }

.indicador-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100px;
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
    }

.indicador-item.selected .indicador-nombre {
    font-weight: 600;
    color: #0e668d;
    }

/* Indicador trix container rounded shadow */

.indicador_trix_container {
    border-radius: 88px !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px !important;
    }

/* Círculo de la calificación en la cabecera del panel móvil: no se encoge
   con un nombre largo (antes el SVG se angostaba y el nombre se comía un
   pedazo del círculo). En pantallas muy angostas el círculo y el nombre se
   reducen un poco para que el nombre tenga sitio; el viewBox del SVG escala
   el círculo y la letra juntos. */
#indicador_trix_mobile {
    flex: none;
    }

@media (max-width: 380px) {
    #indicador_trix_mobile {
        width: 72px;
        height: 72px;
        }

    /* Si el nombre se parte, en renglones parejos (sin un «de» suelto) */
    #indicador_trix_container_mobile .nombre-isla {
        font-size: 1.05rem;
        text-wrap: balance;
        }
    }

/* Nuevo esquema de indicadores (info panel) */

.info-panel-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* CAMBIAR de center a flex-start */
    gap: 20px;
    width: 100%;
    max-width: 860px;
    z-index: 1000;
    position: absolute;
    top: 0; /* Mantener top: 0, el JS lo sobrescribirá */
    left: 0;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
    /* El contenedor cubre toda la columna izquierda; solo el panel blanco
       recibe clics, para que el mapa siga siendo usable debajo de él. */
    pointer-events: none;
    }

.island-info-container {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Nunca más alto que su contenedor: el contenido se desplaza dentro del
       panel y la página no se mueve al abrir una ficha. */
    max-height: 100%;
    overflow-y: auto;
    pointer-events: auto;
    }

/* Degradado inferior fijo: avisa que hay más contenido dentro del panel. */
.island-info-container::after {
    content: '';
    display: block;
    position: sticky;
    bottom: 0;
    height: 28px;
    margin-top: -28px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
    pointer-events: none;
    }

.island-image-container {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    width: 250px;
    max-height: auto;
    overflow: hidden;
    z-index: 1000;
    }

.island-image-wrapper {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    }

.island-image-title {
    padding: 10px; margin: 0; font-size: 1rem; font-weight: 600; color: #0e668d;
    background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; text-align: center;
    }

.island-static-image {
    width: 100%; height: auto; object-fit: cover; cursor: pointer; transition: transform 0.3s ease;
    }

.island-static-image:hover {
    transform: scale(1.05);
    }

/* Buttons section adjustments already declared above */

/* Clasificaciones */

.clasificaciones-container {
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    }

.clasificacion-item {
    display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all 0.3s ease; opacity: 0.7;
    /* Es un <button>: sin estilos de formulario */
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    }

.clasificacion-item.active {
    opacity: 1;
    }

.clasificacion-item:not(.active) {
    opacity: 1;
    }

/*0.8*/

.clasificacion-circle {
    position: relative;
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding: 4px;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.2); */
    }

.clasificacion-item.active .clasificacion-circle {
    transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

.clasificacion-item.active .clasificacion-label {
    font-weight: 600; color: #0e668d; font-size: 0.9em;
    }

.clasificacion-circle img {
    width: 100%; height: 100%; object-fit: contain;
    }

.clasificacion-label {
    display: block;
    font-size: 0.75rem; text-align: center; margin-top: 20px; color: #333; max-width: 90px; line-height: 1.2;
    }

/* Responsive adjustments for info panel & indicators */

.horizontal-timeline-wrapper {
    position: relative;
    height: 100%;
    width: max-content;
    min-width: 100%;
    padding: 20px 0;
    user-select: none; /* También en el wrapper */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    }

/* Asegurar que los elementos hijos tampoco sean seleccionables */

.horizontal-timeline-container * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    }

.explicacion-escala {
    font-size: 0.85rem;
    color: #0e668d;
    background: none;
    border: 0;
    padding: 4px 8px;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    overflow-x: hidden;
    }

.licencia a {
    color: #d4d4d4;
    text-decoration: none;
    font-weight: 600;
    }

.expandable-text {
    display: inline;
    position: relative;
    }

.expandable-text .hidden-text {
    display: none; /* Cambiado de inline a none */
    opacity: 0;
    transition: opacity 0.4s ease;
    }

.expandable-text.expanded .hidden-text {
    display: inline; /* Mostrar cuando esté expandido */
    opacity: 1;
    }

.expandable-text.expanding .hidden-text {
    display: inline;
    animation: fadeIn 1s ease forwards;
    }

.expandable-text.collapsing .hidden-text {
    animation: fadeOut 0.4s ease forwards;
    }

.expand-toggle {
    display: inline;
    margin-left: 5px;
    padding: 2px 0px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    /* border-bottom: 1px solid #0e668d; */
    opacity: 0.8;
      text-decoration: underline !important;

    }

.expand-toggle:hover {
    color: #0a4f6d;
    border-bottom-color: #0a4f6d;
    opacity: 1;
    transform: translateY(-1px);
    }

.expand-toggle:active {
    transform: scale(0.95);
    }

/* Animación para el ícono de flecha */

.expand-toggle .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    }

.expand-toggle.expanded .arrow {
    transform: rotate(180deg);
    }

/* Estilos para listas colapsables en móvil */

.collapsible-section {
    margin-bottom: 1rem;
    }

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem;
    background-color: rgba(14, 102, 141, 0.1);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    transition: background-color 0.3s ease;
    }

.collapsible-header:hover {
    background-color: rgba(14, 102, 141, 0.15);
    }

.collapsible-header strong {
    flex: 1;
    color: #0e668d;
    }

.collapsible-icon {
    font-size: 1.2rem;
    color: #0e668d;
    font-weight: bold;
    transition: transform 0.3s ease;
    }

.collapsible-icon.open {
    transform: rotate(180deg);
    }

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    }

.collapsible-content.open {
    max-height: 2000px;
    }

/* Mostrar normalmente en escritorio */

/* Estilos para el modal de escala */

.modal-escala-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    }

.modal-escala-overlay.show {
    opacity: 1;
    }

.modal-escala-content {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    }

.modal-escala-overlay.show .modal-escala-content {
    transform: scale(1);
    }

.modal-escala-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10;
    line-height: 1;
    padding: 5px 10px;
    }

.modal-escala-close:hover {
    color: #0e668d;
    transform: rotate(90deg);
    }

.modal-escala-header {
    /* background: linear-gradient(135deg, #0e668d, #1b7188); */
    color: #ed7026;
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    }

.modal-escala-header h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    }

/* Integral: nota bajo el título (las calificaciones son relativas entre estados) */
.modal-escala-nota {
    margin: 0.6rem 0 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    }

.modal-escala-body {
    padding: 30px;
    }

.escala-explicacion {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    gap: 15px;
    }

.color-indicator {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.7em;
    font-weight: bolder;
    color: white;
    }

.color-indicator.muy-mala {
    background-color: #9b1b2e;
    }

.color-indicator.mala {
    background-color: #f26627;
    }

.color-indicator.regular {
    background-color: #e3be29;
    }

.color-indicator.buena {
    background-color: #0bb493;
    }

.color-indicator.muy-buena {
    background-color: #016942;
    }

.escala-explicacion p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    }

.calificacion-general {
    margin-top: 30px;
    padding: 20px;
    background-color: #e9f2f8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    }

.calificacion-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #FFD700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

.calificacion-general p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #0e668d;
    }

/* El icono de información acompaña al texto de la pregunta */

.explicacion-escala svg {
    width: 14px;
    height: 14px;
    }

/* Animación de pulso para el trigger */

.explicacion-escala::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #0e668d;
    transition: width 0.3s ease;
    }

/* Responsive */

/* INSTITUCIONES PARTICIPANTES - RESPONSIVE GRID */

.institutions-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    }

.institution-item {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    }

.institution-item img {
    height: 50px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    }

.institution-item img:hover {
    transform: scale(1.2);
    }

/* Responsive breakpoints */

/* SECCIÓN DE DESCARGAS */

.downloads-section {
    padding: 4rem 0;
    background-color: #e9f2f8;
    }

.downloads-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    }

.download-button {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background-color: white;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    }

.download-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(14, 102, 141, 0.2);
    text-decoration: none;
    }

.download-icon {
    width: 50px;
    height: 50px;
    background-color: #0e668d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    }

.download-button:hover .download-icon {
    background-color: #a7ce39;
    transform: scale(1.1);
    }

.download-icon svg {
    width: 24px;
    height: 24px;
    color: white;
    }

.download-text {
    flex: 1;
    }

.download-text h4,
.download-text h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0e668d;
    transition: color 0.3s ease;
    }

.download-button:hover .download-text h4,
.download-button:hover .download-text h3 {
    color: #0a4f6d;
    }

.download-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    }

/* Responsive */

/* ===== LOADER ===== */

.site-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0e668d 0%, #1b7188 50%, #0e4a6d 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    }

.site-loader.loaded {
    opacity: 0;
    visibility: hidden;
    }

.loader-content {
    text-align: center;
    position: relative;
    }

.loader-logo {
    width: 280px;
    height: auto;
    /* animation: float 3s ease-in-out infinite; */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 2;
    }

.loader-text {
    margin-top: 30px;
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 1px;
    animation: pulse 2s ease-in-out infinite;
    }

/* Animaciones */

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    }

/* Responsive */

/* Indicadores */

.indicador-titulo {
    color: #0c5777;
    font-weight: 600;
    font-size: 1.3em;
    }

.indicator-icon {
    transition: transform 0.3s ease;
    /* cursor: pointer; */
    }

.indicator-icon:hover,
.indicator-icon:active {
    transform: scale(1.1);
    }

/* NUEVO ESQUEMA PARA DESCRIPCIÓN DE INDICADORES */

.indicador-description-panel {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    /* Sin fondo, sin sombra, sin border-radius */
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: #333;
    /* Altura mínima constante para evitar que el contenedor se estire/achique */
    min-height: 150px;
    /* Fade in suave */
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
    }

/* Animación fade in */

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

/* Animación fade out */

.indicador-description-panel.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
    }

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

/* Cabecera de la ficha: el título ocupa el ancho y el circulito de la
   calificación va montado sobre la línea de color, pegado al borde derecho.
   El hueco de la derecha (ancho del chip + 8 px de separación) evita que el
   título quede debajo de él; el JS pone el ancho real en --ficha-chip-ancho
   porque la píldora "s/d" es más ancha que el circulito de 24 px. El margen
   inferior deja sitio a la mitad del circulito, que sobresale de la caja. */
.indicador-description-header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 8px;
    padding-right: calc(var(--ficha-chip-ancho, 24px) + 8px);
    gap: 15px;
    }

/* La línea de color va en ::after (y no como border-bottom) para que termine
   justo antes del circulito en vez de pasar por debajo. El JS fija su color
   en --ficha-color (el de la calificación o gris si no hay dato). */
.indicador-description-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: calc(var(--ficha-chip-ancho, 24px) + 8px);
    bottom: 0;
    height: 3px;
    background: var(--ficha-color, #9e9e9e);
    }

.indicador-description-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
    color: #0e668d;
    }

.indicador-description-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    }

/* Estado seleccionado para desktop */

.indicador-item.selected {
    z-index: 10;
    opacity: 1;
    }

.indicador-item.selected .indicador-circulo {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

/* ============================================================
MÓVIL - Leyenda con descripción
============================================================ */

/* Estado seleccionado para móvil */

/* ============================================================
RESPONSIVE
============================================================ */

/* ============================================================
MEJORAS ADICIONALES - Cursor pointer
============================================================ */

.indicador-item:active,
.indicador-item-mobile:active {
    transform: scale(0.95);
    }

/* ========================================
HISTORIAS DE ÉXITO
======================================== */

.historias-exito-section {
    padding: 80px 0;
    background-color: #fffef8;
    }

.historia-item {
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

.historia-banner {
    height: 250px;
    width: 100%;
    background-size: cover;
    /* background-position: 0px -440px; */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

.historia-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: background 0.4s ease;
    }

.historia-banner:hover .historia-banner-overlay {
    background: rgba(0, 0, 0, 0.2);
    }

.historia-banner-title {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: opacity 0.4s ease;
    }

.historia-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* background-color: #fff; */
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    transition: max-height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.6s ease,
    padding 0.6s ease;
    padding: 0 30px;
    }

.historia-item.expanded .historia-content {
    /* Sin tope de altura: la tarjeta crece con su texto. Los valores fijos
       que había aquí y en los breakpoints recortaban las historias largas,
       porque el alto que ocupa el párrafo depende del ancho de su columna. */
    max-height: none;
    opacity: 1;
    padding: 30px;
    }

.historia-item.expanded .historia-banner-title {
    opacity: 0.9;
    }

.historia-imagen-container {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

.historia-imagen {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: cover;
    display: block;
    }

.historia-texto {
    color: wheat;
    line-height: 1.6;
    }

.historia-texto p {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #fff;
    }

.historia-texto p:last-child {
    margin-bottom: 0;
    }

.text-white {
    color: white;
    }

/* Responsive para Historias de Éxito */

/* ==========================================
MODIFICACIONES PARA MAPA EN MÓVIL
==========================================*/

/* Sección del mapa móvil */

.mobile-map-section {
    margin-bottom: 30px;
    background: #f8f9fa;
    }

#mini-map-mobile {
    width: 100%;
    height: 450px;
    border: none;
    z-index: 1;
    }

/* Sección de indicadores móvil */

.indicadores-section-mobile {
    padding: 20px 0;
    background: white;
    }

.island-info-container-mobile {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-top: 20px;
    }

/* Ajustes para la caja de texto en móvil */

/* Ajustes para los círculos de clasificación móvil */

.clasificacion-circle-mobile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

.clasificacion-circle-mobile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

.clasificacion-label-mobile {
    font-size: 0.7rem;
    text-align: center;
    color: #333;
    line-height: 1.2;
    margin-top: 5px;
    }

.clasificacion-item-mobile {
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s ease;
    }

.clasificacion-item-mobile:hover,
.clasificacion-item-mobile.active {
    opacity: 1;
    }

.clasificacion-item-mobile.active .clasificacion-circle-mobile {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }

/* Galería de indicadores móvil */

.indicadores-gallery-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 6px 0;
    min-height: 100px;
    }

.indicador-item-mobile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* border: 2px solid white; */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

.indicador-item-mobile:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }

.indicador-item-mobile.selected {
    /* border: 3px solid #0e668d; */
    transform: scale(1.15);
    }

/* Leyenda del indicador móvil */

.indicador-leyenda-mobile {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    /* border-left: 4px solid #0e668d; */
    }

.indicador-leyenda-mobile span {
    display: block;
    }

#indicador-leyenda-text {
    font-weight: bold;
    color: #0e668d;
    margin-bottom: 5px;
    }

#indicador-leyenda-descripcion {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    }

/* Esconder el panel desktop en móvil */

/* Ajustes para pantallas pequeñas */

/* ========================================
CAJA DE TEXTO SOBRE EL MAPA
======================================== */

/* Leyendas del mapa */

.map-legend {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 12px;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    justify-content: space-evenly;
    }

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    }

.legend-color {
    width: 50px;
    height: 12px;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    border-radius: 3px;
    flex-shrink: 0;
    }

.legend-color2 {
    width: 45px;
    height: 4px;
    background: repeating-linear-gradient(
    to right,
    #bebebe 0 8px,      /* tramo de color */
    transparent 8px 12px /* tramo transparente */
    );
    border-radius: 3px;
    }

.legend-label {
    font-size: 0.85rem;
    color: #333;
    /* font-weight: 500; */
    line-height: 1.3;
    }

/* Responsive para leyendas */

/* Subregiones en el mapa */

.subregion-tooltip {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #2196F3;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

.subregion-tooltip::before {
    border-top-color: #2196F3;
    }

/* Transiciones suaves en polígonos SVG (Leaflet) */

#mini-map .leaflet-pane {
    pointer-events: auto;
    }

/* Etiquetas permanentes de subregión en el mapa */

.subregion-permanent-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    pointer-events: none;
    }

.subregion-permanent-label span {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #1a3a4a;
    text-shadow:
    -1px -1px 0 rgba(255,255,255,0.9),
    1px -1px 0 rgba(255,255,255,0.9),
    -1px  1px 0 rgba(255,255,255,0.9),
    1px  1px 0 rgba(255,255,255,0.9),
    0    0  6px rgba(255,255,255,0.7);
    white-space: nowrap;
    letter-spacing: 0.3px;
    }

/* ELIMINAR CUADRO DE SELECCIÓN AL HACER CLIC EN SUBREGIONES */

#mini-map .leaflet-overlay-pane path,
#mini-map-mobile .leaflet-overlay-pane path {
    outline: none !important;
    }

/* Eliminar outline también en el SVG contenedor */

#mini-map .leaflet-overlay-pane svg,
#mini-map-mobile .leaflet-overlay-pane svg {
    outline: none !important;
    }

/* Prevenir cualquier tipo de selección visual */

#mini-map .leaflet-overlay-pane *,
#mini-map-mobile .leaflet-overlay-pane *,
#mini-map .leaflet-marker-icon,
#mini-map-mobile .leaflet-marker-icon {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    }

/* Transiciones suaves en indicadores */

.indicador-item,
.indicador-item-mobile {
    transition: background-color 0.4s ease, transform 0.15s ease, box-shadow 0.2s ease;
    }

/* Etiquetas de sección en el panel */

.section-label-panel {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #5a6b80;
    margin: 0 0 12px 0;
    padding: 0;
    text-align: center;
    }

/* ====== BOTONES DE SUBREGIÓN ====== */

.subregion-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    }

.subregion-btn {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid #ccc;
    background-color: #e8e8e8;
    color: #666;
    transition: all 0.3s ease;
    white-space: nowrap;
    line-height: 1.3;
    }

.subregion-btn:hover {
    opacity: 1;
    transform: scale(1.03);
    }

.subregion-btn.active {
    border-color: rgba(0,0,0,0.25);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transform: scale(1.05);
    }

/* La insignia de letra del botón se estiliza con las demás, al final. */
.subregion-btn .btn-letra {
    margin-left: 6px;
    }

/* El botón no lleva la trama de .sin-dato (solo su letra lo indica) */
.subregion-btn.sin-dato {
    background-color: #e8e8e8 !important;
    background-image: none !important;
    }

.subregion-btn.sin-dato.active {
    background-color: #777777 !important;
    border-color: #777777;
    color: #fff;
    }

.subregion-btn-mobile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin: 8px 0;
    }

.detalle-boton {
    font-size: 0.9em !important;
    }

/* Label de subregión seleccionada */

.subregion-label {
    font-size: 1.2rem;
    color: #2196F3;
    margin: 2px 0 0 0;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    }

.subregion-label .subregion-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2196F3;
    display: inline-block;
    flex-shrink: 0;
    }

.subregion-label.subregion-activa {
    color: #0e668d;
    font-weight: 600;
    }

.subregion-label-mobile {
    font-size: 0.8rem;
    color: #2196F3;
    margin: -55px 0 10px 0;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    }

.subregion-label-mobile.subregion-activa {
    color: #0e668d;
    font-weight: 600;
    }

/* Botón para volver a calificaciones globales */

.btn-calificaciones-globales {
    position: absolute;
    /* top: 12px; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    margin-top: 8px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 2px solid #2196F3;
    color: #2196F3;
    padding: 6px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    white-space: nowrap;
    }

.btn-calificaciones-globales:hover {
    background: #2196F3;
    color: #fff;
    }

.btn-calificaciones-globales-mobile {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 10px auto;
    justify-content: center;
    font-size: 0.8rem;
    padding: 7px 14px;
    }

.trix-circle {
    width: 120px;       /* Equivalente al diámetro (radio 70 * 2) */
    height: 120px;
    border-radius: 50%; /* Esto convierte el cuadrado en círculo */
    display: flex;      /* Activa Flexbox */
    align-items: center;     /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    font-size: 56px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;     /* Evita espaciados extraños en la fuente */
    }

.indicador-dataset-link {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid #ccc;
    background-color: #e8e8e8;
    color: #666;
    transition: all 0.3s ease;
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
    margin-top: 0;
    }

.indicador-dataset-link:hover {
    opacity: 0.85;
    transform: scale(1.03);
    }

.subregion-button-message {
    margin-top: 16px;
    font-size: 0.9rem;
    color: #555;
    text-align: left;
    }

#instruccionesIndicador {
    font-size: 0.9rem;
    }

/* ============================================
PORTADA OVERLAY - Texto superpuesto sobre la imagen header
Los tamaños usan vw para escalar proporcionalmente con la imagen.
============================================ */

.header-image-container {
    position: relative;
    width: 100%;
    /* Lo que asoma bajo el fundido de la foto: el color de la numeralia */
    background-color: #20525d;
    }

.portada-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2% 12% 4% 27%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

/* --- Logos --- */

.portada-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 1.6vw, 1.7rem);
    margin-bottom: clamp(0.5rem, 0.9vw, 1.1rem);
    /* Fondo semitransparente que envuelve SOLO los iconos (fit-content),
       nunca se extiende hasta los bordes del viewport. */
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: clamp(0.35rem, 1vw, 0.6rem) clamp(0.65rem, 1.8vw, 1.05rem);
    background: rgba(16, 46, 54, 0.7);
    border-radius: clamp(0.6rem, 1.4vw, 1rem);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    }

.portada-logos img {
    height: clamp(34px, 5vw, 66px);
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    }

/* --- Línea horizontal + badge al final --- */

.portada-calificacion {
    --portada-badge-size: clamp(76px, 15vw, 180px);
    display: flex;
    align-items: center;
    gap: clamp(0.7rem, 1.2vw, 1.4rem);
    margin-bottom: clamp(0.9rem, 2vw, 2rem);
    position: relative;        /* agregar */
    /* Reserva el espacio del badge; la línea se mete 2px bajo el círculo
       para que no quede aire entre ambos. */
    padding-right: calc(var(--portada-badge-size) - 2px);
    }

.portada-linea {
    flex: 1;
    height: 4px;
    background-color: #4ab3d8;
    }

.portada-badge {
    position: absolute;        /* agregar */
    right: 0;                  /* agregar */
    width: var(--portada-badge-size);
    height: var(--portada-badge-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(40px, 8.3vw, 100px);
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.4);
    }

/* --- Título --- */

.portada-titulo {
    display: flex;
    flex-direction: column;
    }

.portada-label {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1.5rem, 5.6vw, 3rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.05;
    white-space: nowrap;
    color: #4ab3d8;
    margin: 0 0 clamp(0.2rem, 0.6vw, 0.55rem) 0;
    text-shadow: 1px 1px 4px rgba(80, 80, 80, 0.7), 0 0 8px rgba(80, 80, 80, 0.4);
    }

.portada-nombre {
    font-size: clamp(3rem, 9vw, 6.4rem);
    font-weight: 600;
    margin: 0 0 clamp(0.2rem, 0.5vw, 0.5rem) 0;
    line-height: 1;
    color: white;
    text-shadow: 1px 1px 6px rgba(80, 80, 80, 0.65), 0 0 12px rgba(80, 80, 80, 0.35);
    }

.portada-prefijo {
    font-size: clamp(1.4rem, 4.2vw, 2.8rem);
    font-weight: 400;
    line-height: 1.12;
    text-wrap: balance;
    margin: 0 0 clamp(0.15rem, 0.4vw, 0.45rem) 0;
    color: white;
    text-shadow: 1px 1px 4px rgba(80, 80, 80, 0.65), 0 0 8px rgba(80, 80, 80, 0.35);
    }

.portada-periodo {
    font-size: 4vw;
    font-weight: 300;
    margin: -50px;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
    text-shadow: 1px 1px 4px rgba(80, 80, 80, 0.65), 0 0 8px rgba(80, 80, 80, 0.35);
    }

/* --- Responsive: Móvil --- */

/* Semáforo */

.badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px; /* Espacio entre los niveles de la leyenda */
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 0;
    }

/* Nivel de la leyenda: plano, sin cápsula de color. El color del semáforo vive
   solo en el circulito de la letra, igual que en las demás insignias. */

.leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem; /* igual que las preguntas de ayuda */
    font-weight: 500;
    color: #333;
    line-height: 1;
    }


/* ============================================================
MEDIA QUERIES
============================================================ */




/* Pantallas muy grandes: el círculo de calificación crece un poco */
@media (min-width: 1600px) {
    .portada-calificacion {
        --portada-badge-size: 220px;
    }
    .portada-badge {
        font-size: 122px;
    }
    }


@media (min-width: 768px) {
    .collapsible-header {
        cursor: default;
        background-color: transparent;
        padding: 0;
        margin-bottom: 0;
    }

    .collapsible-header:hover {
        background-color: transparent;
    }

    .collapsible-icon {
        display: none;
    }

    .collapsible-content {
        max-height: none;
        overflow: visible;
    }

    /* Los logos de las instituciones solo se pliegan en móvil: en escritorio
       el «Ver las N instituciones» sobra */
    .institutions-section .collapsible-header {
        display: none;
    }
    }


@media (min-width: 768px) and (max-width: 1199.98px) {
    .coral-title {
      font-size: 2rem;
      padding: 1.5rem 1.5rem;
    }

    .coral-image-container {
      min-height: 300px;
    }

    .coral-info {
      /* width: 80%; */
      width: 100%;
      margin: 0px auto 0px;
      border-radius: 0px !important;
    }
    }


@media (max-width: 1400px) {
    .island-image-container { width: 280px; max-height: 320px; }
    .island-static-image { height: 250px; }

    .institutions-grid {
      grid-template-columns: repeat(6, 1fr);
      gap: 0px;
  }
    }


@media (max-width: 1200px) {
    .header-content h1 {
      font-size: 3.8rem;
    }

    .header-content h2 {
      font-size: 2.3rem;
    }

    .header-description {
      font-size: 1.2rem;
    }

    .coral-section {
        display: flex;
        flex-direction: column;
    }

    .coral-title {
        font-size: 1.8rem;
        text-align: center;
        padding: 1.2rem 1rem;
        max-width: 100%;
    }

    .title-container {
        padding: 0 !important;
    }

    .coral-info {
        position: relative;
        width: 100%; /*90%*/
        top: auto;
        left: auto;
        transform: none;
        margin: 0px auto 0px; /*-50px auto 20px;*/
        border-radius: 0px /*8px*/;
    }

    .coral-image-container {
        min-height: 220px;
    }

    .title-container,
    .image-container {
        width: 100%;
    }

    .info-panel-container { max-width: 740px; }
    .island-image-container { width: 250px; max-height: 300px; }
    .island-static-image { height: 230px; }
    .clasificacion-circle { width: 75px; height: 75px; }
    .indicador-item { width: 92px; }
    .indicador-circulo { width: 60px; height: 60px; }

    .institutions-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 0px;
  }
    .institution-item img { height: 50px; }
    .institution-item { height: 70px; }

    .map-text-title {
                font-size: 1.3rem;
            }

    .map-text-description {
                font-size: 0.9rem;
            }

    .map-legend {
                gap: 8px;
                padding: 10px;
            }

    .legend-color {
                width: 35px;
                height: 8px;
            }

    .legend-label {
                font-size: 0.8rem;
            }

    .desktop-stats { display: none; }
    .mobile-stats { display: block; }
    }


@media (max-width: 992px) {
    .header-content {
      width: 90%;
    }

    .header-content h1 {
      font-size: 3.2rem;
    }

    .header-content h2 {
      font-size: 2rem;
    }

    .arrecife-text-column h3 {
    font-size: 1.5rem;
  }

    .info-grid {
      gap: 12px;
    }

    .arrecife-section,
    .conectado-section,
    .casos-exito-section {
      padding: 60px 0;
    }

    .section-header h2,
    .conectado-title {
      font-size: 2.2rem;
    }

    .banner {
      height: 160px;
    }

    .banner-text {
      font-size: 1.6rem;
    }

    .coral-title {
      font-size: 1.8rem;
      text-align: center;
      padding: 1.2rem 1rem;
      max-width: 100%;
    }

    .stats-container {
        flex-direction: column;
    }

    .stat-item {
        margin-bottom: 0.5rem;
        justify-content: center;
    }

    .left-panel-grid {
        max-width: 600px;
    }

    .segment-title { font-size: 1.3rem; }
    .number { font-size: 2.5rem; }

/* .institutions-grid { grid-template-columns: repeat(4, 1fr); gap: 0px; } */
    .institution-item { height: 65px; }
    .institution-item img { height: 45px; }

    .downloads-container {
        flex-direction: column;
        align-items: center;
    }

    .download-button {
        max-width: 100%;
        width: 100%;
    }

    .historia-banner {
              height: 160px;
          }

    .historia-banner-title {
              font-size: 1.6rem;
              padding: 15px;
          }

    .map-legend {
      flex-wrap: wrap;
      gap: 8px;
  }

    .legend-item {
      flex: 0 0 48%;
      flex-direction: row;
      gap: 8px;
  }

    .legend-color {
      width: 40px;
      height: 12px;
  }

    .legend-label {
      font-size: 0.75rem;
  }

    .mobile-map-section .col-12 {
        pointer-events: none;
    }
    .mobile-map-section #mini-map-mobile,
    .mobile-map-section #subregion-buttons-mobile {
        pointer-events: auto;
    }

    .info-panel-container {
      display: none !important;
  }

    .map-legend {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 2px;
            }

    .legend-item {
                flex-direction: column;
                text-align: center;
                gap: 5px;
            }

    .info-item--active {
      transform: translateY(-4px);
    }

/* .arrecife-section .arrecife-container {
        position: relative;
        min-height: 500px;
    }
    .arrecife-section .col-lg-5.order-md-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        padding: 0;
    }
    .parallax-image-container {
        height: 100%;
        width: 100%;
    }
    .arrecife-section .col-lg-7.order-md-2 {
        position: relative;
        z-index: 2;
        background-color: rgba(14, 74, 109, 0.3);
        color: white;
        padding: 30px;
        margin-top: 80px;
        border-radius: 10px;
    }
    .parallax-image {
        top: 120px;
        opacity: 0.4;
    } */
    .arrecife-image-column {
      display: none;
    }
    .maps-section {
        height: 100%;
    }
    }


@media (max-width: 768px) {
    .navbar .navbar-brand img {
      width: 90px;
    }

    .header-content {
      width: 90%;
    }

    .title-container-parent {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .header-content h1 {
      font-size: 2.5rem;
    }

    .header-content h2 {
      font-size: 1.6rem;
    }

    .header-description {
      font-size: 1.1rem;
    }

    .info-grid {
      gap: 10px;
    }

    .info-item {
      padding: 12px;
    }

    h3.header-fact {
      font-size: 1.8rem;
    }

    .arrecife-img {
      margin-bottom: 30px;
    }

    .order-md-1 {
      order: 2;
    }

    .order-md-2 {
      order: 1;
    }

    .arrecife-section,
    .conectado-section,
    .casos-exito-section {
      padding: 40px 0;
    }

    .banner-expanded {
      width: 100%;
      margin-bottom: 15px;
      height: 250px;
    }

    .banner-content-container {
      width: 100% !important;
    }

    .section-header h2,
    .conectado-title {
      font-size: 2rem;
    }

    .banner-text {
      font-size: 1.5rem;
    }

    .alacranes-header {
      flex-direction: column;
    }

    .alacranes-image {
      height: 250px;
    }

    .alacranes-title {
      padding: 1.5rem;
    }

    .alacranes-title h1 {
      font-size: 1.8rem;
    }

    .alacranes-title h2 {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
    }

    .eco-title {
      font-size: 1.8rem;
      text-align: center;
      margin-bottom: 2rem;
    }

    .eco-action {
      flex-direction: column;
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .eco-icon {
      margin-right: 0;
      margin-bottom: 1rem;
    }

    .recommendation-item {
      margin-bottom: 1.5rem;
    flex-direction: column;
    align-items: flex-start;

    }

    .recommendation-marker {
      width: 100%;
      /* max-width: 220px; */
      height: auto;
      margin-right: 0;
      margin-bottom: 0.75rem;
    }

    .recommendation-text {
      font-size: 1rem;
    }


    .logo-placeholder {
    width: 80px;
    height: 80px;
    }

    .logo-placeholder::after {
    width: 40px;
    height: 40px;
    }

    .left-panel-grid {
        max-width: 90%;
        grid-template-rows: auto auto;
        gap: 15px;
    }
    .island-info-container {
        /* max-height: calc(100vh - 450px); */
        max-height: 100vh;
      }

    .number { font-size: 2.2rem; }
    .color-segment { font-size: 0.8rem; }
    .stats-bar { height: 35px; }

    .indicadores-gallery { gap: 10px; padding: 10px; }
    .indicador-item { width: 50px; height: 50px; }

    .island-image-container { display: none; }
    .island-button { font-size: 1rem; padding: 0.25rem 0.5rem; height: 40px; }
    .info-panel-container { max-width: 90%; }
    .clasificacion-circle { width: 55px; height: 55px; padding: 10px; }
    .indicador-item { width: 50px; height: 50px; }
    .clasificacion-label { font-size: 0.65rem; }

    .institution-item { height: 55px; }
    .institution-item img { height: 50px; }
    .institutions-grid { gap: 10px; }

    .loader-logo {
        width: 120px;
    }

    .loader-text {
        font-size: 1rem;
        margin-top: 25px;
    }

    .indicador-description-panel {
    margin: 15px 10px;
    padding: 15px;
    min-height: 130px;
}

    .indicador-description-header h4 {
    font-size: 1.1rem;
}

    .indicador-description-text {
    font-size: 0.95rem;
}

    .historias-exito-section {
              padding: 60px 0;
          }

    .historia-banner {
              height: 200px;
          }

    .historia-banner-title {
              font-size: 1.5rem;
          }

    .historia-content {
              padding: 0 20px;
          }

    .historia-item.expanded .historia-content {
              padding: 25px 20px;
          }

    .historia-imagen {
              max-height: 250px;
              margin-bottom: 4px;
          }

    .historia-texto p {
              font-size: 0.95rem;
          }

    .figure-caption{
              font-size: 0.7rem;
          }

    #mini-map-mobile {
      height: 400px;
  }

    .subregion-permanent-label span {
                font-size: 9px;
            }

    /* ===== Header en móvil: layout en línea =====
       El círculo de calificación queda AL LADO del título (no encima), a la
       derecha en todas las tarjetas: el texto se pega a la izquierda, también
       en Campeche y Yucatán, que en escritorio van al revés.
       Se usa .header-image-container para ganar especificidad sobre las reglas
       base de cada tarjeta, que se cargan después. */
    .portada-linea {
        display: none;   /* la línea no se muestra en móvil */
    }

    .header-image-container .portada-overlay,
    .header-image-container .portada-overlay-veracruz,
    .header-image-container .portada-overlay-tabasco,
    .header-image-container .portada-overlay-campeche,
    .header-image-container .portada-overlay-yucatan {
        display: grid;
        align-items: center;
        align-content: center;
        column-gap: clamp(0.5rem, 2.5vw, 1rem);
        row-gap: clamp(0.4rem, 1.6vw, 1rem);
        padding: 0 5% 5%;
    }

    .header-image-container .portada-overlay,
    .header-image-container .portada-overlay-veracruz,
    .header-image-container .portada-overlay-tabasco,
    .header-image-container .portada-overlay-campeche,
    .header-image-container .portada-overlay-yucatan {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logos  logos"
            "titulo badge";
    }
    .header-image-container .portada-overlay .portada-titulo,
    .header-image-container .portada-overlay-veracruz .portada-titulo,
    .header-image-container .portada-overlay-tabasco .portada-titulo,
    .header-image-container .portada-overlay-campeche .portada-titulo,
    .header-image-container .portada-overlay-yucatan .portada-titulo {
        align-items: flex-start;
        text-align: left;
    }
    /* campeche.css y yucatan.css alinean también el rótulo a la derecha */
    .header-image-container .portada-overlay-campeche .portada-label,
    .header-image-container .portada-overlay-yucatan .portada-label {
        text-align: left;
    }

    .portada-logos {
        grid-area: logos;
        justify-self: center;
        justify-content: center;
    }
    .portada-calificacion {
        grid-area: badge;
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        justify-content: center;
    }
    /* Neutraliza el padding-left de las tarjetas invertidas (Campeche/Yucatán),
       que reservaba espacio para la línea (ya oculta en móvil). Mayor
       especificidad para ganar sin depender del orden de carga. */
    .header-image-container .portada-overlay-campeche .portada-calificacion,
    .header-image-container .portada-overlay-yucatan .portada-calificacion {
        padding: 0;
    }
    .portada-badge {
        position: static;
        margin: 0;
        width: clamp(76px, 21vw, 118px);
        height: clamp(76px, 21vw, 118px);
        font-size: clamp(42px, 12vw, 68px);
    }
    .portada-titulo {
        grid-area: titulo;
        min-width: 0;
    }
    /* Tamaños ajustados para que el título quepa junto al círculo */
    .portada-label {
        font-size: clamp(1rem, 4.6vw, 1.5rem);
        white-space: normal;
    }
    .portada-prefijo {
        font-size: clamp(0.95rem, 3.9vw, 1.5rem);
    }
    .portada-nombre {
        font-size: clamp(2rem, 10.5vw, 3rem);
    }
    }


@media (max-width: 576px) {
    .acknowledgments-content {
    font-size: 1rem;
    padding: 1rem 0;
    background-color: transparent;
  }
    .section-title{
    margin-bottom: 0px !important;
  }

    .navbar .navbar-brand img {
      width: 200px;
    }

    .header-content {
      width: 92%;
    }

    .header-content h1 {
      font-size: 2.2rem;
    }

    .header-content h2 {
      font-size: 1.4rem;
    }

    .header-content img {
      width: 90%;
    }

    .header-description {
      font-size: 1.2rem;
    }

    .info-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    h3.header-fact {
      font-size: 1.6rem;
    }

    .section-title {
        font-size: 1.8rem; /* Reducir de 2.4rem */
        word-wrap: break-word; /* Permite que las palabras se rompan */
        hyphens: auto; /* Habilita guiones para palabras largas */
        text-align: center;
      }

    .island-buttons-container {
      padding: 8px;
    }

    .island-button {
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
    }

    .island-title {
      font-size: 14px;
    }

    .banner {
      height: 140px;
    }

    .banner-text {
      font-size: 1.3rem;
    }

    .section-header h2 {
      font-size: 1.8rem;
    }

    .banner-content {
      padding: 20px;
    }

    .arrecife-text,
    .conectado-text {
      font-size: 1.2rem;
    }

    .info-container {
      width: 300px;
    }

    .workshop-year{
      text-align: center;
    }

    .coral-info{
      font-size: 1.2rem;
    }
    .report-content p{
      font-size: 1.2rem;
    }
    .info-item p {
      font-size: 1.2rem;
    }
    .eco-text {
      font-size: 1.2rem;
    }
    .recommendation-text{
      font-size: 1.2rem;
    }
    .ecosystem-text span{
      font-size: 1.2rem;
    }

    .header-image {
        width: 100%;
        height: auto;
    }

    .buttons-section .flex-fill.island-button {
        margin: 0 2px;
        font-size: 0.7rem;
        padding: 0.2rem 0.3rem;
    }

    .segment-title { font-size: 1.1rem; }
    .number { font-size: 1.8rem; }
    .stats-bar { height: 30px; }
    .color-segment { font-size: 0.7rem; padding: 0 2px; }

    .buttons-section { padding: 8px; }
    .island-button { font-size: 1rem; padding: 0.25rem 0.5rem; height: 40px; }
    .buttons-section .w-100 .island-button { font-size: 0.75rem; }
    .clasificacion-circle { width: 45px; height: 45px; padding: 8px; }
    .indicador-item { width: 45px; height: 45px; }

    .modal-escala-content {
        width: 95%;
        margin: 10px;
    }

    .modal-escala-header {
        padding: 20px;
    }

    .modal-escala-header h3 {
        font-size: 1.5rem;
    }

    .modal-escala-body {
        padding: 20px;
    }

    .escala-explicacion {
        /* flex-direction: column; */
        align-items: center;
        text-align: center;
    }

    .color-indicator {
        margin-top: 0;
    }

    .calificacion-general {
        flex-direction: column;
        text-align: center;
    }

    .escala-explicacion p,
    .calificacion-general p {
        font-size: 1rem;
    }

    .institution-item { height: 45px; }
    .institution-item img { height: 45px; }
    .institutions-grid { gap: 8px; }

    .download-button {
        padding: 15px 20px;
        min-width: auto;
    }

    .download-icon {
        width: 45px;
        height: 45px;
    }

    .download-icon svg {
        width: 22px;
        height: 22px;
    }

    .download-text h4,
    .download-text h3 {
        font-size: 1rem;
    }

    .download-text p {
        font-size: 0.85rem;
    }

    .loader-logo {
        width: 250px;
    }

    .loader-text {
        font-size: 0.9rem;
        margin-top: 20px;
    }

    .indicador-description-panel {
    padding: 12px;
    min-height: 120px;
}

    .indicador-description-header h4 {
    font-size: 1rem;
}

    .indicador-description-text {
    font-size: 0.9rem;
}

    #indicador-leyenda-text {
    font-size: 1rem;
}

    #indicador-leyenda-descripcion {
    font-size: 0.9rem;
}

    .historia-banner {
              height: 220px;
              background-position: center;
          }

    .historia-banner-title {
              font-size: 1.3rem;
              padding: 15px 10px;
          }

    .historia-content {
              padding: 0 15px;
          }

    .historia-item.expanded .historia-content {
              padding: 20px 15px;
          }

    .historia-imagen {
              max-height: 200px;
              object-position: center;

          }

    #mini-map-mobile {
      height: 350px;
  }

    .clasificacion-circle-mobile {
      width: 50px;
      height: 50px;
      padding: 8px;
  }

    .clasificacion-label-mobile {
      font-size: 0.65rem;
  }

    .indicador-item-mobile {
      width: 45px;
      height: 45px;
  }

  /* #indicador_trix_mobile {
      width: 70px;
      height: 70px;
  } */

    #indicador_trix_mobile text {
      font-size: 40px;
  }

    .nombre-isla {
      font-size: 1.2rem;
      color:#0e668d;
      margin: 0 10px 0 10px;
      /* padding: 0 47px 0 100px; */
      /* top: -80px; */
  }
    }

.leaflet-interactive {
    transition: fill 0.4s ease, stroke 0.4s ease, fill-opacity 0.4s ease, stroke-opacity 0.4s ease;
}

/* ============================================================
   MENÚ FLOTANTE SELECTOR DE TARJETAS DE REPORTE
   Fijo arriba a la derecha. Discreto, con el lenguaje visual del
   sitio. Siempre a la vista: la franja que ocupa se reserva con
   scroll-padding-top (ver "Anclas de sección").
   ============================================================ */

.tr-cardnav,
.tr-secnav {
    position: fixed;
    top: clamp(0.65rem, 1.4vw, 1.25rem);
    right: clamp(0.65rem, 1.4vw, 1.25rem);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: "Sora", sans-serif;
    }

/* --- Botones --- */

/* Fila de píldoras de cada menú (izquierda: inicio + secciones; derecha:
   tarjetas + idioma). */
.tr-cardnav-actions,
.tr-secnav-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    }

/* Píldoras secundarias (Inicio e idioma): mismo lenguaje que los dos
   desplegables pero atenuadas (menos borde, menos sombra, letra más ligera)
   para que "Secciones" y la tarjeta actual sean las acciones principales.
   El fondo no baja de 0.66 de opacidad: es el mínimo que conserva contraste AA
   del texto cuando la píldora pasa sobre las secciones claras (#f8f6e9). */
.tr-secnav-home,
.tr-cardnav-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(20, 52, 58, 0.66);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

.tr-secnav-home:hover,
.tr-secnav-home:focus-visible,
.tr-cardnav-lang:hover,
.tr-cardnav-lang:focus-visible {
    background: rgba(74, 179, 216, 0.92);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
    color: #ffffff;
    outline: none;
    }

.tr-secnav-home-icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    }

.tr-secnav-home-icon svg {
    width: 100%;
    height: 100%;
    }

.tr-secnav-home-label {
    white-space: nowrap;
    }

.tr-cardnav-toggle,
.tr-secnav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(20, 52, 58, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

.tr-cardnav-toggle:hover,
.tr-cardnav-toggle:focus-visible,
.tr-secnav-toggle:hover,
.tr-secnav-toggle:focus-visible {
    background: rgba(74, 179, 216, 0.92);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
    outline: none;
    }

.tr-cardnav.is-open .tr-cardnav-toggle,
.tr-secnav.is-open .tr-secnav-toggle {
    background: rgba(74, 179, 216, 0.95);
    border-color: rgba(255, 255, 255, 0.7);
    }

.tr-cardnav-toggle-icon,
.tr-secnav-toggle-icon {
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    }

.tr-cardnav-toggle-icon svg,
.tr-secnav-toggle-icon svg {
    width: 100%;
    height: 100%;
    }

.tr-cardnav-toggle-label,
.tr-secnav-toggle-label {
    white-space: nowrap;
    }

.tr-cardnav-toggle-caret,
.tr-secnav-toggle-caret {
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    transition: transform 0.25s ease;
    }

.tr-cardnav.is-open .tr-cardnav-toggle-caret,
.tr-secnav.is-open .tr-secnav-toggle-caret {
    transform: rotate(180deg);
    }

/* --- Panel desplegable --- */

.tr-cardnav-panel,
.tr-secnav-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: min(86vw, 290px);
    padding: 0.55rem;
    background: rgba(18, 48, 55, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    transform-origin: top right;
    transform: translateY(-8px) scale(0.97);
    opacity: 0;
    visibility: hidden;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

.tr-cardnav.is-open .tr-cardnav-panel,
.tr-secnav.is-open .tr-secnav-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    }

.tr-cardnav-heading,
.tr-secnav-heading {
    margin: 0.3rem 0.65rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7fcfe6;
    }

.tr-cardnav-list,
.tr-secnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }

.tr-cardnav-item,
.tr-secnav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.65rem;
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    }

.tr-cardnav-item:hover,
.tr-cardnav-item:focus-visible,
.tr-secnav-item:hover,
.tr-secnav-item:focus-visible {
    background: rgba(74, 179, 216, 0.18);
    color: #ffffff;
    outline: none;
    }

.tr-cardnav-item.is-current,
.tr-secnav-item.is-current {
    background: rgba(74, 179, 216, 0.14);
    }

.tr-cardnav-item-pin,
.tr-secnav-item-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: rgba(74, 179, 216, 0.22);
    color: #7fcfe6;
    }

.tr-cardnav-item.is-current .tr-cardnav-item-pin,
.tr-secnav-item.is-current .tr-secnav-item-num {
    background: #4ab3d8;
    color: #ffffff;
    }

.tr-cardnav-item-pin svg {
    width: 1rem;
    height: 1rem;
    }

.tr-cardnav-item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    }

.tr-cardnav-item-name,
.tr-secnav-item-name {
    font-weight: 600;
    font-size: 0.98rem;
    }

.tr-cardnav-item-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.tr-cardnav-item-current {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0e2e36;
    background: #7fcfe6;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    }

/* --- Idioma: misma píldora que "Inicio", solo con dos letras --- */

.tr-cardnav-lang {
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    }

/* El botón de tarjetas muestra el nombre de la tarjeta actual */
.tr-cardnav-toggle-label {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Texto solo para lectores de pantalla (propósito de un botón cuyo texto
   visible es un nombre, o "Secciones" mientras el botón muestra la activa). */
.tr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    }

/* --- Menú de secciones (esquina superior izquierda) --- */

.tr-secnav {
    left: clamp(0.65rem, 1.4vw, 1.25rem);
    right: auto;
    align-items: flex-start;
    }

.tr-secnav-panel {
    left: 0;
    right: auto;
    transform-origin: top left;
    }

/* El botón muestra la sección por la que se va pasando (tr_floatnav.js);
   mientras haya una, "Secciones" queda solo para lectores de pantalla. */
.tr-secnav-toggle-label {
    display: inline-flex;
    align-items: baseline;
    max-width: 14rem;
    }

.tr-secnav-toggle-current {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Once entradas: filas un poco más compactas que las del selector de tarjetas
   para que quepan sin scroll en la mayoría de pantallas. */
.tr-secnav-item {
    padding: 0.45rem 0.6rem;
    }

.tr-secnav-item-num {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    }

/* Los menús flotantes están siempre arriba: esa franja se reserva para todo
   lo que el navegador desplaza a la vista (saltos a una sección, anclas y el
   elemento que recibe el foco con Tab), así nada queda tapado por ellos. */
html {
    scroll-padding-top: 4.5rem;
    }

/* Si el mapa de indicadores sube por detrás de los menús, su zoom (y el chip,
   en .mapa-chip) bajan lo justo para quedar debajo de ellos. tr_floatnav.js
   pone --libre-menus en los elementos con data-libre-de-menus; con el mapa en
   su lugar vale 0 y nada se mueve. */
[data-libre-de-menus] .leaflet-top {
    transform: translateY(var(--libre-menus, 0px));
    }

/* Anclas de sección: no muestran anillo de foco al recibirlo por programa. */
.tr-seccion:focus {
    outline: none;
    }

/* Entre 481px y 767px caben los dos menús con etiqueta, pero el nombre de la
   sección activa se acorta para que no se toquen. */
@media (max-width: 767px) {
    .tr-secnav-toggle-label,
    .tr-cardnav-toggle-label {
        max-width: 7rem;
    }
    }

/* En pantallas pequeñas los botones quedan sólo con el icono (más discreto).
   Hasta 575px: con etiqueta, el menú de secciones y el de la derecha se tocan. */
@media (max-width: 575.98px) {
    .tr-cardnav-toggle-label,
    .tr-secnav-toggle-label,
    .tr-secnav-home-label {
        display: none;
    }
    .tr-cardnav-toggle,
    .tr-secnav-toggle,
    .tr-secnav-home {
        padding: 0.55rem;
    }
    }

@media (prefers-reduced-motion: reduce) {
    .tr-cardnav,
    .tr-cardnav-panel,
    .tr-cardnav-toggle,
    .tr-cardnav-toggle-caret,
    .tr-cardnav-lang,
    .tr-secnav,
    .tr-secnav-panel,
    .tr-secnav-toggle,
    .tr-secnav-toggle-caret,
    .tr-secnav-home {
        transition: none;
    }
    }

@media print {
    .tr-cardnav,
    .tr-secnav {
        display: none !important;
    }
    }

/* ============================================================
   HERRAMIENTA DE INDICADORES: foco de teclado, insignias de letra con el
   color del semáforo, "sin dato", modal de delimitación y chip del mapa
   ============================================================ */

/* Foco visible global al navegar con teclado (no aparece con el ratón). */
:focus-visible {
    outline: 3px solid #0e668d;
    outline-offset: 2px;
    }

.island-info-container:focus-visible {
    outline-offset: -3px;
    }

/* --- Insignias con la letra del semáforo ---
   Todas (círculos de grupo e indicador, botones de subregión, etiquetas del
   mapa y ficha) llevan el color de la calificación de fondo (que fija el JS en
   --letra-color), borde blanco y la letra siempre en blanco.
   El relleno asimétrico centra la TINTA de la letra, no su caja de línea: Sora
   deja la mayúscula algo alta y algo a la izquierda dentro del avance del
   glifo. Va en em para que sirva en todos los tamaños; los valores salen de la
   medición del recorrido (CENTRADO en recorrer_indicadores.py). */
.letra-insignia,
.btn-letra,
.mapa-letra,
.ficha-calif .badge-letra,
.leyenda-item .badge-letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.173em 0.022em 0 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--letra-color, #9e9e9e);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    line-height: 1;
    }

/* Insignia de los círculos de grupo e indicador: colgada del borde */
.letra-insignia {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    pointer-events: none;
    }

.letra-insignia:empty {
    display: none;
    }

.indicador-circulo .letra-insignia,
.clasificacion-circle-mobile .letra-insignia {
    width: 22px;
    height: 22px;
    font-size: 0.72rem;
    }

.btn-letra {
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
    }

/* Sin dato: trama gris en lugar de un color que parezca calificación */
.sin-dato {
    background-color: #e9e9e9 !important;
    background-image: repeating-linear-gradient(45deg, #ededed 0 6px, #d9d9d9 6px 12px) !important;
    }

/* La insignia "s/d" es una píldora más ancha, sin color ni trama */
.letra-insignia.sin-dato,
.btn-letra.sin-dato,
.mapa-letra.sin-dato,
.ficha-calif .badge-letra.sin-dato {
    width: auto;
    min-width: 24px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 999px;
    background: #f2f2f2 !important;
    background-image: none !important;
    border: 2px dashed #9e9e9e;
    box-shadow: none;
    color: #6b6b6b;
    font-size: 0.62rem;
    }

.trix-circle.sin-dato {
    color: #6b6b6b;
    }

/* --- Nivel de contorno (NA: No aplicable), solo en la integral ---
   El color va en el borde y en la letra, con el fondo transparente. Las
   insignias pequeñas que cuelgan de un círculo o van sobre el mapa llevan
   fondo blanco para no mezclarse con lo que tienen debajo. */
.letra-insignia.contorno,
.btn-letra.contorno,
.mapa-letra.contorno,
.ficha-calif .badge-letra.contorno,
.leyenda-item .badge-letra.contorno {
    background: #fff;
    border-color: var(--letra-color, #9e9e9e);
    color: var(--letra-color, #9e9e9e);
    box-shadow: none;
    }

.leyenda-item .badge-letra.contorno,
.ficha-calif .badge-letra.contorno {
    background: transparent;
    }

/* Dos letras (NA) en los circulitos de 20-24 px */
.letra-insignia.letra-larga,
.btn-letra.letra-larga,
.mapa-letra.letra-larga,
.ficha-calif .badge-letra.letra-larga,
.leyenda-item .badge-letra.letra-larga {
    font-size: 0.56rem;
    letter-spacing: -0.02em;
    padding-right: 0;
    }

.trix-circle.contorno {
    border: 4px solid var(--insignia-color, #9e9e9e);
    color: var(--insignia-color, #9e9e9e);
    }

.color-indicator.contorno {
    background-color: transparent;
    border: 3px solid var(--letra-color, #9e9e9e);
    color: var(--letra-color, #9e9e9e);
    box-shadow: none;
    }

.portada-badge.contorno {
    background-color: transparent;
    border: 0.35vw solid var(--insignia-color, #9e9e9e);
    color: var(--insignia-color, #9e9e9e);
    }

/* Cuerpo del modal de delimitación: texto corrido, alineado a la izquierda */
.modal-delimitacion-texto {
    text-align: left;
    color: #555;
    line-height: 1.6;
    }

.modal-delimitacion-texto p:last-child {
    margin-bottom: 0;
    }

/* Más ancho que los otros modales: el texto de cada zona ocupa varios
   párrafos largos. En pantallas chicas manda el 90-95 % del ancho. */
.modal-escala-content.modal-delimitacion-content {
    max-width: 900px;
    }

/* Integral: bajo el texto de «Regionalización», el nombre de la zona de la
   capa elegida como título, igual que el del modal (naranja) */
.delimitacion-zona-titulo {
    margin: 1.75rem 0 0.75rem;
    color: #ed7026;
    font-size: 1.8rem;
    font-weight: 700;
    }

/* Como .modal-escala-header h3 en móvil */
@media (max-width: 576px) {
    .delimitacion-zona-titulo {
        font-size: 1.5rem;
    }
    }

/* Icono de información como botón */
.icono-info {
    background: none;
    border: 0;
    padding: 0 2px;
    color: #8a9aae;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1;
    }

.icono-info:hover {
    color: #0e668d;
    }

/* Bloque de indicadores: se muestra al elegir grupo */
.bloque-indicadores[hidden] {
    display: none !important;
    }

/* Calificación en la ficha del indicador: solo el circulito de la letra (el
   nombre del nivel va en el title y en un texto para lector de pantalla). */
.ficha-calif {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
    }

.ficha-calif .badge-letra {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    }

/* La trama de .sin-dato va en la píldora "s/d", no en la caja que la envuelve */
.ficha-calif.sin-dato {
    background: none !important;
    }

/* En la ficha de escritorio el circulito va montado sobre la línea de la
   cabecera: pegado a su borde derecho y con su centro en el centro de la
   línea de 3 px (de ahí el 1,5 px que se le resta al medio alto). La ficha
   móvil no lleva esta cabecera y sigue con el chip en línea. */
.indicador-description-header .ficha-calif {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(calc(50% - 1.5px));
    }

.ficha-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    }

/* Chip sobre el mapa: qué se está pintando, con su jerarquía (ámbito, grupo e
   indicador). Va arriba y el JS lo centra en la franja que el panel deja a la
   vista (posicionarChipMapa). */
.mapa-chip {
    position: absolute;
    top: 14px;
    /* --libre-menus: ver la regla de [data-libre-de-menus] .leaflet-top */
    transform: translate(-50%, var(--libre-menus, 0px));
    z-index: 1000;
    pointer-events: auto;
    max-width: min(400px, 60vw);
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 15px;
    line-height: 1.3;
    color: #333;
    text-align: center;
    }

/* Línea de arriba, pequeña y en mayúsculas: "Mostrando" */
.mapa-chip-etiqueta {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5a6b80;
    }

/* La ruta de niveles (hereda el #333 del chip), a tres líneas como mucho */
.mapa-chip-ruta {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }

/* El último nivel es el que se está pintando */
.mapa-chip-ruta b {
    color: #0e668d;
    }

/* Etiqueta de cada subregión en el mapa: nombre + letra, centrada en el
   centroide sin caja fija (el marcador mide 0x0). */
.subregion-permanent-label span.subregion-label-texto {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    }

/* Subregión elegida: su etiqueta se destaca un poco */
.subregion-permanent-label.subregion-label-activa span.subregion-label-texto {
    font-size: 12px;
    }

.mapa-letra {
    width: 18px;
    height: 18px;
    font-size: 10px;
    text-shadow: none;
    letter-spacing: 0;
    }

.mapa-letra.sin-dato {
    min-width: 20px;
    font-size: 8px;
    }

.mapa-chip {
    font-family: 'Sora', sans-serif;
    }

/* Circulito de la leyenda: el color del semáforo llega en --letra-color desde
   un estilo en línea, como en el resto de las insignias. */
.leyenda-item .badge-letra {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
    }

/* Imágenes con variante para celular (<picture class="img-movil">, filtro
   url_movil): el <picture> no genera caja, así la imagen se acomoda igual que
   si no estuviera envuelta (flex, grid y reglas que la toman como hija). */
picture.img-movil {
    display: contents;
}