/* --------------------------------------------------------------------------
   El atributo hidden por encima de todo
   --------------------------------------------------------------------------
   Un selector de clase o de id pesa más que [hidden], así que una regla de
   display puede dejar visible un elemento marcado como oculto. Esto lo zanja
   para todo el documento.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ==========================================================================
   SiMMBA — explorador de sitios
   Hereda tokens y encabezado de styles.css. Aquí solo va lo propio.
   ========================================================================== */

.pagina-explorar {
  background: var(--cream);
  overflow: hidden;               /* el scroll vive dentro de los paneles */
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Rejilla general
   -------------------------------------------------------------------------- */

.explorador {
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) 1fr;
  height: 100svh;
  padding-top: var(--header-h);
}

.principal {
  display: grid;
  grid-template-rows: minmax(14rem, 42fr) minmax(18rem, 58fr) auto;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   Barra lateral: jerarquía
   -------------------------------------------------------------------------- */

.arbol {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--navy-dark);
  color: var(--cream);
  border-right: 1px solid rgba(144, 216, 216, 0.2);
}

.arbol-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0.75rem;
}

.arbol-cabecera h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.arbol-cerrar {
  display: none;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cream);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 0.25rem;
}

.arbol-buscar { padding: 0 1.25rem 0.9rem; }

.arbol-buscar input {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(144, 216, 216, 0.28);
  border-radius: 4px;
}
.arbol-buscar input::placeholder { color: rgba(252, 240, 228, 0.5); }

.arbol-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.75rem 1rem;
  font-size: 0.9rem;
}

.arbol-lista ul { list-style: none; margin: 0; padding: 0; }
.arbol-lista li { margin: 0; }

/* Un botón por nodo: región, arrecife y sitio comparten estructura y se
   distinguen por sangría y peso, no por adornos. */
.nodo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 0.42rem 0.5rem;
  cursor: pointer;
}
.nodo:hover { background: rgba(144, 216, 216, 0.12); }

.nodo[aria-current="true"] {
  background: rgba(72, 201, 176, 0.2);
  color: #fff;
}

.nodo-region    { font-weight: 800; font-size: 0.95rem; }
.nodo-subregion { font-weight: 700; padding-left: 1.1rem; }
.nodo-arrecife  { font-weight: 600; padding-left: 2rem; }
.nodo-anio      { font-weight: 600; padding-left: 2.9rem; color: var(--foam); font-size: 0.86rem; }
.nodo-sitio     { font-weight: 400; padding-left: 3.9rem; color: rgba(252, 240, 228, 0.88); }

.nodo .flecha {
  width: 0.62rem; height: 0.62rem;
  flex: none;
  transition: transform .18s ease;
}
.nodo[aria-expanded="true"] .flecha { transform: rotate(90deg); }
.nodo[aria-expanded="false"] + ul { display: none; }

.nodo .cuenta {
  margin-left: auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--foam);
  background: rgba(144, 216, 216, 0.14);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.nodo .sin-datos {
  margin-left: auto;
  color: var(--coral);
  font-size: 0.85rem;
}

.arbol-pie {
  margin: 0;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(144, 216, 216, 0.2);
}

.btn-volver {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-dark);
  background: var(--foam);
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.btn-volver:hover { background: #B4E6E6; }

.arbol-abrir { display: none; }

/* --------------------------------------------------------------------------
   Mapa
   -------------------------------------------------------------------------- */

.zona-mapa {
  position: relative;
  min-height: 0;
  background: var(--navy-dark);
}

#mapa { position: absolute; inset: 0; }

.leaflet-container {
  background: #06131b;
  font-family: var(--font);
}

/* Migas: dónde estás dentro de los cuatro niveles */
.migas {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  max-width: calc(100% - 1.5rem);
}

.migas button,
.migas span {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 35, 56, 0.82);
  color: var(--cream);
  backdrop-filter: blur(6px);
}
.migas button { cursor: pointer; }
.migas button:hover { background: rgba(0, 96, 144, 0.9); }
.migas span { background: var(--coral); color: var(--navy-dark); }

/* Numeralia sobre el mapa */
.numeralia-mapa {
  position: absolute;
  right: 0.75rem;
  bottom: 1.6rem;
  z-index: 500;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
  gap: 1px;
  background: rgba(144, 216, 216, 0.22);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.numeralia-mapa > div {
  background: rgba(0, 35, 56, 0.86);
  padding: 0.5rem 0.75rem;
}

.numeralia-mapa dt {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--foam);
  line-height: 1.25;
}

.numeralia-mapa dd {
  margin: 0.1rem 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.numeralia-mapa .unit { font-size: 0.55em; font-weight: 600; color: var(--foam); }

/* Marcadores */
.marcador-arrecife {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 3px rgba(248, 112, 72, 0.3);
}
.marcador-sitio {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--foam);
  border: 2px solid var(--navy-dark);
}
.marcador-sitio.es-activo {
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(248, 112, 72, 0.35);
}

.leaflet-tooltip.tt {
  background: rgba(0, 35, 56, 0.94);
  border: 1px solid rgba(144, 216, 216, 0.35);
  color: var(--cream);
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.5rem 0.65rem;
  border-radius: 5px;
  box-shadow: none;
}
.leaflet-tooltip.tt::before { display: none; }
.tt strong { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; }

/* Cada dato en su renglón: en línea se leían pegados, «9 modelosAños: 2024». */
.tt .tt-dato {
  display: block;
  color: var(--foam);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Panel inferior: visor y datos
   -------------------------------------------------------------------------- */

.zona-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
  min-height: 0;
  border-top: 1px solid rgba(0, 60, 96, 0.25);
}

.visor {
  position: relative;
  min-height: 0;
  background: var(--navy-dark);
  display: grid;
  place-items: center;
}

.visor-lienzo { position: absolute; inset: 0; z-index: 1; }
.visor-lienzo iframe,
.visor-lienzo canvas { width: 100%; height: 100%; border: 0; display: block; }

/* El visor se monta con sus medidas reales desde el primer instante y se
   mantiene transparente hasta que avisa que la nube ya está en pantalla.
   Montarlo dentro de un contenedor con display:none lo dejaba midiendo
   cero, y Potree encuadra la cámara con esa medida: la nube cargaba, pero
   quedaba fuera de cuadro. */
.visor-lienzo { transition: opacity 0.3s ease; }
.visor-lienzo.esta-entrando { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .visor-lienzo { transition: none; }
}

.visor-vacio {
  position: relative;
  z-index: 2;
  max-width: 32ch;
  padding: 2rem;
  text-align: center;
  color: rgba(252, 240, 228, 0.72);
  font-size: 0.9rem;
}
/* Aviso de que la descarga va lenta. Se añade DEBAJO del mensaje de carga
   sin reemplazarlo: informar no es cancelar. */
.visor-vacio .nota-demora {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: rgba(252, 240, 228, 0.55);
}

.visor-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.4rem;
}

.datos {
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--cream-deep);
  border-left: 1px solid rgba(0, 60, 96, 0.2);
  font-size: 0.88rem;
}

.datos-vacio, .pendiente {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.datos h2 {
  font-size: 1.2rem;
  margin-bottom: 0.15rem;
}
.datos h3 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 1.5rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(0, 60, 96, 0.18);
}

.sitio-alt {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.demo-aviso {
  background: var(--coral);
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  margin-bottom: 0.9rem;
}

.ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.85rem;
  margin: 0;
  font-size: 0.83rem;
}
.ficha dt { color: var(--ink-soft); font-weight: 600; }
.ficha dd { margin: 0; }

/* Barras de cobertura: la longitud es el dato, el color solo agrupa. */
.barra {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 0.2rem 0.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.82rem;
}
.barra-nombre { line-height: 1.3; }
.barra-nombre em { font-style: italic; }
.barra-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-riel {
  grid-column: 1 / -1;
  height: 7px;
  background: rgba(0, 60, 96, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.barra-valor { height: 100%; background: var(--ocean); border-radius: 999px; }
.barra[data-grupo="coral"]  .barra-valor { background: var(--coral); }
.barra[data-grupo="alga"]   .barra-valor { background: #4E9A5B; }
.barra[data-grupo="blando"] .barra-valor { background: var(--cyan); }
.barra[data-grupo="abiotico"] .barra-valor { background: #B49A6A; }

/* --------------------------------------------------------------------------
   Contexto
   -------------------------------------------------------------------------- */

.contexto {
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem;
  border-top: 1px solid rgba(0, 60, 96, 0.2);
  background: var(--cream);
}
.contexto h2 { font-size: 1.1rem; }
.contexto p { font-size: 0.9rem; max-width: 68ch; }

/* --------------------------------------------------------------------------
   Responsivo: la barra lateral se convierte en cajón
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .explorador { grid-template-columns: 1fr; }

  .arbol {
    position: fixed;
    inset: var(--header-h) auto 0 0;
    width: min(88vw, 21rem);
    z-index: 900;
    transform: translateX(-102%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0, 20, 34, 0.5);
  }
  .arbol.esta-abierto { transform: none; }
  .arbol-cerrar { display: block; }

  .arbol-abrir {
    display: block;
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 600;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--navy-dark);
    background: var(--foam);
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
  }

  .migas { top: 3.25rem; }

  .principal { grid-template-rows: 60svh auto auto; }
  .zona-panel { grid-template-columns: 1fr; }
  .visor { min-height: 22rem; }
  .datos { border-left: 0; border-top: 1px solid rgba(0, 60, 96, 0.2); }
  .numeralia-mapa { left: 0.75rem; right: 0.75rem; grid-template-columns: repeat(4, 1fr); }
  .numeralia-mapa dd { font-size: 1.05rem; }
}

@media (max-width: 34rem) {
  .numeralia-mapa { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .arbol { transition: none; }
}

/* --------------------------------------------------------------------------
   Cita y agradecimientos del sitio
   -------------------------------------------------------------------------- */

.badge-doi {
  display: inline-block;
  line-height: 0;
  margin-bottom: 0.7rem;
}
.badge-doi img { height: 20px; width: auto; }

.cita-sitio,
.gracias {
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.85rem;
  background: rgba(0, 60, 96, 0.07);
  border-left: 3px solid var(--ocean);
  border-radius: 0 4px 4px 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.gracias { border-left-color: var(--foam); }

.btn-copiar {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn-copiar:hover { background: var(--navy); color: var(--cream); }

/* --------------------------------------------------------------------------
   Estados del visor
   -------------------------------------------------------------------------- */

/* Espera: no es un error, así que no usa el color de alerta. */
.visor-vacio.esta-esperando {
  color: var(--cream);
  max-width: 34ch;
}
.visor-vacio.esta-esperando .visor-titulo { color: var(--foam); }

.visor-vacio.esta-esperando::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 2px solid rgba(144, 216, 216, 0.35);
  background:
    radial-gradient(circle at 50% 58%, var(--foam) 0 18%, transparent 19%);
}

/* Carga: el mismo disco, girando despacio. */
.visor-vacio.esta-cargando { color: rgba(252, 240, 228, 0.8); }

.visor-vacio.esta-cargando::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 2px solid rgba(144, 216, 216, 0.25);
  border-top-color: var(--coral);
  animation: girar 1s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .visor-vacio.esta-cargando::before { animation: none; }
}

/* Nota de campo del sitio: observación del equipo, no un dato medido. */
.sitio-nota {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: rgba(0, 60, 96, 0.06);
  border-left: 3px solid var(--foam);
  border-radius: 0 4px 4px 0;
}

/* --------------------------------------------------------------------------
   Referencias del mapa: norte y escala
   -------------------------------------------------------------------------- */

.mapa-referencias {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: rgba(0, 35, 56, 0.86);
  border: 1px solid rgba(144, 216, 216, 0.22);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  color: var(--cream);
}

.rosa-norte svg { width: 1.4rem; height: 1.6rem; display: block; }

.escala { display: flex; flex-direction: column; gap: 0.2rem; }

.escala-texto {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foam);
  line-height: 1;
}

/* La barra representa la distancia: los topes marcan dónde empieza y acaba. */
.escala-barra {
  display: block;
  height: 6px;
  min-width: 2rem;
  border: 1px solid var(--cream);
  border-top: 0;
  transition: width .25s ease;
}

/* --------------------------------------------------------------------------
   Controles de Leaflet a la izquierda, bajo las migas
   -------------------------------------------------------------------------- */

.leaflet-top.leaflet-left { top: 3rem; }

.leaflet-control-zoom a {
  background: rgba(0, 35, 56, 0.88);
  color: var(--cream);
  border-color: rgba(144, 216, 216, 0.25);
  backdrop-filter: blur(6px);
}
.leaflet-control-zoom a:hover { background: rgba(0, 96, 144, 0.92); color: #fff; }

.leaflet-control-attribution {
  background: rgba(0, 35, 56, 0.8);
  color: rgba(252, 240, 228, 0.7);
  font-size: 0.65rem;
}
.leaflet-control-attribution a { color: var(--foam); }

/* --------------------------------------------------------------------------
   Arrecife anunciado pero sin datos
   -------------------------------------------------------------------------- */

.nodo-anio .cuenta { font-size: 0.68rem; }

.nodo.es-proximo {
  cursor: default;
  color: rgba(252, 240, 228, 0.55);
  padding-left: 2rem;
  font-weight: 600;
}
.nodo.es-proximo:hover { background: transparent; }

.proximo {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--navy-dark);
  background: var(--foam);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .leaflet-top.leaflet-left { top: 6rem; }
  /* En pantalla estrecha la numeralia ocupa todo el ancho abajo,
     así que las referencias suben por encima de ella. */
  .mapa-referencias { bottom: 8.5rem; }
}

/* --------------------------------------------------------------------------
   Contexto: descripción y referencias del ANP
   -------------------------------------------------------------------------- */

.contexto-anp {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ocean);
  margin-bottom: 0.5rem;
}

.enlaces-anp {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.enlaces-anp a,
.enlace-pendiente {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  text-decoration: none;
}

.enlaces-anp a {
  color: var(--navy);
  background: rgba(0, 60, 96, 0.08);
  border: 1px solid rgba(0, 60, 96, 0.22);
}
.enlaces-anp a:hover { background: var(--navy); color: var(--cream); }

/* Recurso anunciado pero aún no publicado: se ve que existe, no engaña. */
.enlace-pendiente {
  color: var(--ink-soft);
  border: 1px dashed rgba(0, 60, 96, 0.3);
  cursor: default;
}

/* ==========================================================================
   Con modelo cargado: el visor toma el protagonismo
   --------------------------------------------------------------------------
   Sin modelo, el mapa manda y el panel inferior es una franja de apoyo.
   En cuanto se carga una nube, la proporción se invierte: el mapa queda como
   referencia de contexto y el visor crece hasta ser casi cuadrado, que es la
   forma en que se navega cómodo en tres dimensiones.
   ========================================================================== */

body.con-modelo .principal {
  /* El visor puede pasar del alto de la ventana: la página crece y se
     desplaza, en lugar de comprimirlo todo para que quepa. La descripción
     del ANP baja y se lee después, que es su papel. */
  grid-template-rows:
    clamp(8rem, 18svh, 14rem)     /* mapa: queda como referencia */
    clamp(42rem, 88svh, 68rem)    /* visor: el protagonista */
    auto;                          /* contexto: fluye debajo */
}

/* El panel de datos se estrecha para que el lienzo gane ancho y se acerque
   a una proporción cuadrada. Crece en alto con la fila, así que la ficha
   completa se ve sin desplazarse. */
body.con-modelo .zona-panel {
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
}

body.con-modelo .visor { min-height: 42rem; }

/* La transición ayuda a entender que el espacio se redistribuyó, en vez de
   que la página parezca haber saltado. */
.principal, .zona-panel {
  transition: grid-template-rows .45s ease, grid-template-columns .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .principal, .zona-panel { transition: none; }
}

@media (max-width: 60rem) {
  body.con-modelo .principal {
    grid-template-rows: 26svh clamp(28rem, 70svh, 40rem) auto;
  }
  body.con-modelo .zona-panel { grid-template-columns: 1fr; }
  body.con-modelo .visor { min-height: 28rem; }
}

/* --------------------------------------------------------------------------
   Medallas de método
   --------------------------------------------------------------------------
   VPI y segmentación se declaran por separado y con color distinto porque
   son estimaciones con propiedades estadísticas distintas: no se suman ni
   se comparan sin más.
   -------------------------------------------------------------------------- */

.medallas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.1rem;
}

.medalla {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid;
  cursor: help;
}

/* Aplicado: verde. Los dos métodos comparten color porque lo que distingue
   uno de otro es su nombre, no un matiz que haya que memorizar. */
.med-vpi,
.med-seg  { color: #0B5C4A; background: rgba(72, 201, 176, 0.22); border-color: rgba(11, 92, 74, 0.35); }

.med-temp { color: #8A4B12; background: rgba(230, 160, 60, 0.2);  border-color: rgba(138, 75, 18, 0.35); }

/* Ausente: gris y sin peso. Se lee, pero no compite con lo que sí está. */
.med-no {
  color: var(--ink-soft);
  background: transparent;
  border-color: rgba(0, 60, 96, 0.22);
  border-style: dashed;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Resumen de un área
   -------------------------------------------------------------------------- */

#resumenAmbito h2 { font-size: 1.1rem; margin-bottom: 0.15rem; }

.resumen-alcance {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

/* Colores de las categorías que faltaban */
.barra[data-grupo="cca"]   .barra-valor { background: #C4628A; }
.barra[data-grupo="ciano"] .barra-valor { background: #7A6BB5; }

/* En vistas amplias los sitios se solapan: punto más chico y borde más fino
   para que se distingan unos de otros en vez de fundirse. */
.marcador-sitio.es-lejano {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}

/* Categorías fuera de las siete principales: color neutro, para que no
   compitan visualmente con corales y algas. */
.barra[data-grupo="otro"] .barra-valor { background: #8C9AA5; }

/* --------------------------------------------------------------------------
   Serie temporal de un punto
   --------------------------------------------------------------------------
   Solo aparece si el punto se remuestreó. Permite saltar entre años sin
   volver al árbol, que es la comparación que justifica el remuestreo.
   -------------------------------------------------------------------------- */

.serie {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0 0 1.1rem;
  padding: 0.25rem;
  background: rgba(0, 60, 96, 0.08);
  border: 1px solid rgba(0, 60, 96, 0.18);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.serie button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.serie button:hover:not(:disabled) { background: rgba(0, 60, 96, 0.12); color: var(--navy); }
.serie button:disabled { opacity: 0.3; cursor: default; }

.serie .serie-flecha { font-size: 1rem; line-height: 1; padding: 0.1rem 0.4rem; }

.serie .es-actual {
  background: var(--ocean);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Categorías destacadas y taxones por grupo
   -------------------------------------------------------------------------- */

/* Corales duros, macroalgas, CCA y algas filamentosas llevan la barra más
   gruesa y el nombre en negrita: son las cuatro que se leen primero. */
.barra.es-destacada .barra-nombre { font-weight: 700; color: var(--navy); }
.barra.es-destacada .barra-riel { height: 10px; }

.grupo-taxones { margin-bottom: 1.1rem; }

.grupo-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(0, 60, 96, 0.12);
}

.grupo-taxones.es-destacada .grupo-titulo {
  color: var(--navy);
  border-bottom-color: rgba(0, 60, 96, 0.3);
}

.grupo-suma { font-variant-numeric: tabular-nums; }

.grupo-resto {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Descarga de coberturas
   -------------------------------------------------------------------------- */

.zona-descarga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid rgba(0, 60, 96, 0.2);
  background: var(--cream-deep);
}

.btn-descargar {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cream);
  background: var(--ocean);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-descargar:hover { background: var(--navy); color: var(--cream); }
.btn-descargar.es-grande { font-size: 1rem; padding: 0.8rem 1.8rem; margin-bottom: 0.5rem; }

.descarga-nota { font-size: 0.8rem; color: var(--ink-soft); }

.dlg-ancho { width: min(100% - 2rem, 52rem); max-height: 88vh; overflow-y: auto; }

.sel-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.sel-columnas h3 {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(0, 60, 96, 0.18);
}

.sel-lista {
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.4rem;
  font-size: 0.85rem;
}

.sel-arrecife { margin-bottom: 0.9rem; }

.sel-todos {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  padding: 0.25rem 0;
  cursor: pointer;
}
.sel-todos.es-inerte { cursor: default; color: var(--ink-soft); }

.sel-todos > span { display: flex; align-items: center; gap: 0.4rem; flex: 1; }

.sel-cuenta {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ocean);
  background: rgba(0, 96, 144, 0.12);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
}

.sel-sitio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.18rem 0 0.18rem 1.3rem;
  cursor: pointer;
}
.sel-sitio:hover { background: rgba(0, 60, 96, 0.05); }

/* Sin análisis: se ven, no se pueden elegir. Ocultarlos escondería cuánto
   falta por hacer, que es información útil. */
.sel-sitio.es-inerte {
  display: block;
  color: var(--ink-soft);
  cursor: help;
  text-decoration: underline dotted rgba(0, 60, 96, 0.35);
  text-underline-offset: 3px;
}

.sel-lista.es-inerte { opacity: 0.75; }

.sel-aviso {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.5;
  background: rgba(72, 201, 176, 0.14);
  border-left: 3px solid var(--cyan);
  border-radius: 0 4px 4px 0;
}

.sel-conteo {
  margin-right: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.citas { margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: 0.8rem; line-height: 1.5; }
.citas li { margin-bottom: 0.4rem; }

.dlg-acciones { align-items: center; }

/* Esqueleto y escombro: color hueso, distinto del verde de las algas para
   que se lea como sustrato muerto y no como cobertura viva. */
.barra[data-grupo="esqueleto"] .barra-valor { background: #C8B49A; }

/* Aviso de texto generado: distingue una sugerencia de un párrafo redactado. */
.gracias-nota {
  margin: 0 0 0.45rem;
  font-size: 0.73rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Incertidumbre
   --------------------------------------------------------------------------
   La banda sobre el riel hace que el ancho de la barra deje de leerse como
   un valor exacto: es una estimación con margen, y así se ve.
   -------------------------------------------------------------------------- */

.barra-riel { position: relative; }

.barra-ic {
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: rgba(0, 35, 56, 0.55);
  border-left: 2px solid rgba(0, 35, 56, 0.7);
  border-right: 2px solid rgba(0, 35, 56, 0.7);
  box-sizing: content-box;
  pointer-events: none;
}

.barra-ic-txt {
  font-weight: 500;
  font-size: 0.85em;
  color: var(--ink-soft);
}

.nota-ic {
  margin: -0.35rem 0 0.7rem;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Cambio entre años
   -------------------------------------------------------------------------- */

.tabla-cambio {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.tabla-cambio th {
  text-align: right;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--ink-soft);
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid rgba(0, 60, 96, 0.25);
}
.tabla-cambio th:first-child { text-align: left; }

.tabla-cambio td {
  text-align: right;
  padding: 0.3rem 0.35rem;
  border-bottom: 1px solid rgba(0, 60, 96, 0.1);
}
.tabla-cambio td:first-child { text-align: left; }

/* Solo se resalta lo que se sostiene estadísticamente. */
.tabla-cambio tr.es-claro td { font-weight: 700; }
.tabla-cambio tr.es-claro td:first-child { color: var(--navy); }

.tabla-cambio .cambio.sube { color: #0B6E4F; }
.tabla-cambio .cambio.baja { color: var(--coral-text); }

.tabla-cambio abbr {
  text-decoration: none;
  cursor: help;
  color: var(--ocean);
}

/* --------------------------------------------------------------------------
   Pantalla completa
   --------------------------------------------------------------------------
   El contenedor del iframe pasa a ocupar la pantalla. Sin esto conservaría
   su altura de rejilla y quedaría una franja con el resto en negro.
   -------------------------------------------------------------------------- */

#visorLienzo:fullscreen,
#visorLienzo:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: var(--navy-dark);
}
#visorLienzo:fullscreen iframe { width: 100%; height: 100%; }

/* Nota del formato en el diálogo de descarga: quien recibe el archivo
   debe saber en qué estándar viene y cómo se calculó el porcentaje. */
.dl-nota {
  margin: 0.2rem 0 1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dl-nota code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(0, 60, 96, 0.08);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Sitio relacionado y margen de la coordenada
   --------------------------------------------------------------------------
   Cuando un cuadro no se pudo relocalizar, el levantamiento nuevo es un
   sitio distinto aunque comparta coordenada. Decirlo donde se lee la ficha
   evita que alguien los compare entre años creyendo que son el mismo.
   -------------------------------------------------------------------------- */

.sitio-relacion {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--navy);
  background: rgba(0, 96, 144, 0.1);
  border-left: 3px solid var(--ocean);
  border-radius: 0 4px 4px 0;
}

/* El margen no compite con la cifra: es contexto, no el dato. */
.ficha .margen {
  color: var(--ink-soft);
  font-size: 0.9em;
  white-space: nowrap;
}

/* Serie temporal: se declara en todos los años del punto, no solo en el
   último. Estando en 2021 hay que poder saber que existe un 2022. */
.med-serie {
  color: #1A4D7A;
  background: rgba(0, 96, 144, 0.14);
  border-color: rgba(26, 77, 122, 0.35);
}

/* --------------------------------------------------------------------------
   Comparador de años
   --------------------------------------------------------------------------
   Dos visores lado a lado. Cada uno conserva su propia cámara: no se
   sincronizan a propósito, porque al comparar uno suele querer mirar zonas
   distintas en cada año.
   -------------------------------------------------------------------------- */

.serie-comparar {
  margin-left: 0.3rem;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--cream) !important;
  background: var(--ocean) !important;
  padding: 0.25rem 0.7rem !important;
}
.serie-comparar:hover { background: var(--navy) !important; }

.comparador {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(144, 216, 216, 0.25);
  z-index: 4;
}

.comp-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--navy-dark);
}

.comp-barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: rgba(0, 35, 56, 0.9);
  border-bottom: 1px solid rgba(144, 216, 216, 0.2);
}

.comp-rotulo {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cream);
}

.comp-anio {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy-dark);
  background: var(--foam);
  border: 0;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}

.comp-cerrar {
  margin-left: auto;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(144, 216, 216, 0.3);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}
.comp-cerrar:hover { background: var(--coral); color: var(--navy-dark); border-color: var(--coral); }

.comp-lienzo { min-height: 0; }
.comp-lienzo iframe { width: 100%; height: 100%; border: 0; display: block; }

/* En pantalla estrecha, uno encima del otro: dos paneles de 20 cm de ancho
   no dejan ver nada. */
@media (max-width: 62rem) {
  .comparador { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Soltar el sitio abierto
   --------------------------------------------------------------------------
   Sin esto, una vez abierto un modelo no había forma de cerrarlo y el panel
   se quedaba ocupando la pantalla mientras uno quería navegar el mapa.
   -------------------------------------------------------------------------- */

#datosContenido { position: relative; }

.sitio-cerrar {
  position: absolute;
  right: 0;
  top: 0;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(0, 60, 96, 0.25);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.sitio-cerrar:hover { background: var(--coral); color: var(--cream); border-color: var(--coral); }

/* El tooltip no debe tragarse el clic en lo que hay debajo. */
.leaflet-tooltip.tt { pointer-events: none; }

/* --------------------------------------------------------------------------
   La barra de navegación, por encima del mapa
   --------------------------------------------------------------------------
   Leaflet coloca sus paneles en z-index 400 a 700 y crea contexto propio, así
   que el submenú de «Explora y reconoce» se desplegaba detrás del satelital.
   -------------------------------------------------------------------------- */

/* Solo se sube el z-index. La barra es «fixed» y cambiarle el position la
   desanclaba del borde superior, dejando una franja vacía en su lugar. */
.site-header { z-index: 1200; }
.main-nav .submenu { z-index: 1300; }

/* El mapa pasa a su propio contexto de apilamiento para que los paneles de
   Leaflet, que van de 400 a 700, no se cuelen por encima de la barra. */
.zona-mapa { position: relative; z-index: 0; }

/* Unir cámaras: se enciende después de alinear los dos modelos a mano, que
   es cuando comparar la misma zona entre años empieza a tener sentido. */
.comp-sync {
  margin-left: auto;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(144, 216, 216, 0.4);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
}
.comp-sync:hover { background: rgba(144, 216, 216, 0.18); }

.comp-sync.es-activo {
  color: var(--navy-dark);
  background: var(--foam);
  border-color: var(--foam);
}

/* Con el botón de unir, el de cerrar ya no necesita empujarse solo. */
.comp-cerrar { margin-left: 0.4rem; }

/* Confirmación breve al copiar un enlace: aparece y se va sola, sin
   interrumpir lo que se estaba mirando. */
.aviso-corto {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2000;
  margin: 0;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-dark);
  background: var(--foam);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 35, 56, 0.3);
  opacity: 0;
  pointer-events: none;
}
.aviso-corto.se-ve { animation: avisoCorto 2.6s ease forwards; }

@keyframes avisoCorto {
  0%   { opacity: 0; transform: translate(-50%, 8px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-corto.se-ve { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Pie del explorador
   --------------------------------------------------------------------------
   Más compacto que el de la portada: aquí la pantalla ya está ocupada por el
   mapa, el visor y la ficha, y el pie es referencia, no presentación.
   -------------------------------------------------------------------------- */

.pie-exp {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, auto) minmax(16rem, auto);
  gap: 1.6rem 2.5rem;
  align-items: start;
  padding: 2rem 1.6rem 1.4rem;
  background: var(--navy-dark);
  color: var(--cream);
  border-top: 1px solid rgba(144, 216, 216, 0.2);
}

.pie-exp h2 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foam);
}

.pie-exp-marca { display: flex; align-items: center; gap: 0.8rem; }
.pie-exp-marca img { flex: none; }
.pie-exp-nombre { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; }
.pie-exp-full { margin: 0.1rem 0 0; font-size: 0.78rem; color: rgba(252, 240, 228, 0.65); }

.btn-contacto-exp {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy-dark);
  background: var(--foam);
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.btn-contacto-exp:hover { background: var(--cream); }

.pie-exp-correo { margin: 0.5rem 0 0; font-size: 0.82rem; }
.pie-exp-correo a { color: var(--foam); }

.pie-exp-aliados ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie-exp-aliados img { height: 1.9rem; width: auto; opacity: 0.85; }
.pie-exp-aliados a:hover img { opacity: 1; }

.pie-exp-legal {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  padding-top: 1rem;
  font-size: 0.72rem;
  color: rgba(252, 240, 228, 0.45);
  border-top: 1px solid rgba(144, 216, 216, 0.12);
}

@media (max-width: 62rem) {
  .pie-exp { grid-template-columns: 1fr; gap: 1.4rem; }
}