/*
 * diptico.css
 * Sistema de layout compartido para los 15 dípticos del atlas.
 * Importar en cada atlas/territorios/*.html junto con tokens.css
 *
 * Uso:
 *   <link rel="stylesheet" href="../diptico.css">
 *
 * Depende de:
 *   ../../design-system/tokens/build/tokens.css
 */

/* ─── Fuentes ──────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* ─── Reset mínimo ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Contenedor editorial global ──────────────────────────────────────────── */

.atlas-page {
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--mapa-tierra-exterior);
}

/* ─── Root del díptico ─────────────────────────────────────────────────────── */

.diptico {
  width: 100%;
  max-width: 1600px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  font-family: 'Source Serif 4', serif;
  background: var(--background-page);
  color: var(--text-color-primary);
}

/* ─── Tema verde oscuro — territorios con alta presión minera ─────────────── */

.diptico.diptico--tema-verde {
  --background-page: #1a3028;
  --background-subtle: #163025;
  --text-color-primary: rgba(220, 242, 230, 0.92);
  --text-color-secondary: rgba(190, 225, 205, 0.65);
  --border-subtle: rgba(255, 255, 255, 0.08);
}

.diptico.diptico--tema-verde,
.diptico.diptico--tema-verde .diptico__info {
  background-color: #1a3028;
  color: rgba(220, 242, 230, 0.92);
}

.diptico.diptico--tema-verde .stat {
  background-color: #17402A;
  color: rgba(220, 242, 230, 0.92);
}

.diptico.diptico--tema-verde .stat__valor {
  color: rgba(235, 250, 240, 1);
}

.diptico.diptico--tema-verde .stat__label {
  color: rgba(190, 225, 205, 0.65);
}

.diptico.diptico--tema-verde .diptico__narrativa {
  color: rgba(220, 242, 230, 0.92);
}

.diptico.diptico--tema-verde .concesion-card__nombre {
  color: #1a1a18;
}

.diptico.diptico--tema-verde .concesion-card__empresa {
  color: #5a5a58;
}

/* tema-verde: sin fondo en card activa — texto mantiene color del tema */

/* ─── Layouts ─────────────────────────────────────────────────────────────── */

.diptico[data-layout="A"] {
  grid-template-columns: 50fr 50fr;
}

.diptico[data-layout="B"] {
  grid-template-columns: 50fr 50fr;
}

.diptico[data-layout="C"] {
  grid-template-columns: 50fr 50fr;
}

.diptico[data-layout="C"] .diptico__concesiones--mapa {
  padding: 5px;
}

.diptico[data-layout="D"] {
  grid-template-columns: 50fr 50fr;
}

.diptico[data-layout="D"] .concesiones-lista {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.diptico[data-layout="D"] .concesion-card {
  display: block;
  padding: 6px 2px;
}

.diptico[data-layout="D"] .concesion-card__nombre {
  font-size: 10px;
  line-height: 1.2;
}

.diptico[data-layout="D"] .concesion-card__empresa {
  font-size: 9px;
  line-height: 1.25;
  margin-top: 1px;
}

.diptico[data-layout="D"] .diptico__concesiones--mapa {
  padding: 5px;
}

/* ─── Layout E — 7 columnas de concesiones ──────────────────────────────────── */

.diptico[data-layout="E"] {
  grid-template-columns: 50fr 50fr;
}

.diptico[data-layout="E"] .concesiones-lista {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.diptico[data-layout="E"] .concesion-card {
  display: block;
}

.diptico[data-layout="E"] .concesion-card__nombre {
  font-size: 10px;
  line-height: 1.2;
}

.diptico[data-layout="E"] .concesion-card__empresa {
  font-size: 9px;
  line-height: 1.25;
  margin-top: 1px;
}

/* ─── Panel izquierdo — mapa ───────────────────────────────────────────────── */

.diptico__mapa {
  grid-column: 1;
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--mapa-tierra-exterior);
  padding: 0px;
}

.mapa-editorial {
  width: min(100%, 920px);
  margin-inline: auto;
}

.mapa-stack {
  position: relative;
  width: 100%;
  /* aspect-ratio inyectado dinámicamente por render-diptico.js según breakpoint */
  aspect-ratio: 927 / 980;
  /* fallback desktop */
}

.mapa-raster,
.mapa-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mapa-raster {
  object-fit: fill;
}

.mapa-overlay {
  pointer-events: none;
}

.mapa-editorial svg {
  width: 100%;
  height: auto;
  display: block;
}

.mapa-editorial object {
  width: 100%;
  height: 100%;
  display: block;
}

.concesion-svg {
  fill-opacity: 0.35;
  stroke-width: 2;
  cursor: pointer;
}

.concesion-svg:hover {
  fill-opacity: 0.55;
}

/* Leyenda de concesiones superpuesta en el mapa */
.diptico__leyenda-mapa {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.75rem 1rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
}

.diptico__leyenda-mapa-titulo {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-color-secondary);
  margin-bottom: 0.5rem;
}

.leyenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
  color: var(--text-color-primary);
}

.leyenda-item__patron {
  width: 24px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Norte y escala */
.diptico__norte {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 28px;
  opacity: 0.75;
}

.diptico__escala {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  color: var(--text-color-primary);
  opacity: 0.75;
}

/* Insets (recuadros de detalle) */
.inset-detalle {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 0.5px solid var(--border-subtle);
  padding: 0.75rem;
  border-radius: var(--radius-md, 8px);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-color-primary);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.inset-detalle__titulo {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
}

.inset-detalle__escala {
  font-size: 10px;
  color: var(--text-color-secondary);
}

#detalle_norte {
  top: 1.5rem;
  left: 1.5rem;
}

#detalle_sur {
  bottom: 5rem;
  left: 1.5rem;
}

#detalle_concesion {
  top: 1.5rem;
  left: 1.5rem;
}

/* ─── Panel derecho — editorial ────────────────────────────────────────────── */

.diptico__info {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem;
  overflow-y: auto;
  border-left: 0.5px solid var(--border-subtle);
  padding-top: 0;
  /* el banner absorbe el espacio superior */
}

/* ─── Header del territorio ────────────────────────────────────────────────── */

.diptico__header {
  position: relative;
  margin: -2.5rem -2rem 2rem;
  /* sangra hasta los bordes del panel */
  padding: 8.5rem 2rem 1.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 140px;
  overflow: hidden;
  background-color: var(--color-brand-green-900);
  /* fallback sin banner */
}


.diptico__header-texto {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

/* Logo flotante sobre el mapa — arriba a la derecha */
.diptico__logo-mapa {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: none;
}

.diptico__logo-mapa[src]:not([src=""]) {
  display: block;
}

/* Con banner: textos en blanco con sombra suave para legibilidad */
.diptico__header--con-banner .diptico__kicker {
  color: rgba(255, 255, 255, 0.90);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.diptico__header--con-banner .diptico__titulo {
  color: #F4A700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.diptico__header--con-banner .diptico__subtitulo {
  color: rgba(255, 255, 255, 0.90);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.diptico__kicker {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-main);
  margin-bottom: 0.5rem;
}

.diptico__titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-color-primary);
  letter-spacing: -0.02em;
}

/* ── Fila título + selector de territorio ─────────────────────────────────
 *
 * #nav-contador (el <select> real, con todas las opciones de territorio)
 * vive ACÁ, no en la barra de abajo — el picker nativo del navegador
 * siempre se ancla a donde está físicamente el <select>, así que si
 * queremos que se abra "desde el título", el <select> tiene que estar acá.
 * La barra de abajo se queda con un contador de solo texto (.atlas-nav__contador).
 *
 * Es un <select> nativo de verdad (teclado, screen readers, todo gratis),
 * solo que appearance:none + un tamaño de 26px lo hacen ver como un
 * botón-ícono circular en vez de un dropdown con texto.
 * ─────────────────────────────────────────────────────────────────────────── */

.diptico__titulo-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}

.diptico__titulo-selector {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--border-default, var(--border-subtle));
  background-color: var(--background-subtle);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235d5d57' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: transparent; /* solo queremos ver el ícono, no el texto de la opción elegida */
  overflow: hidden;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.diptico__titulo-selector option {
  color: #1f2521; /* las opciones de la lista sí deben verse — color:transparent
                      de arriba solo es para ocultar el texto del control cerrado */
  background: #ffffff;
}

.diptico__titulo-selector:hover {
  background-color: var(--background-page);
  border-color: var(--brand-main, #205736);
  transform: translateY(1px);
}

.diptico__titulo-selector:focus-visible {
  outline: 2px solid var(--brand-main, #205736);
  outline-offset: 2px;
}

/* Con banner: título sobre foto — el control necesita su propio tratamiento
   translúcido (mismo criterio que kicker/subtítulo, que ya pasan a blanco
   con sombra en este contexto), más una flecha clara en vez de oscura. */
.diptico__header--con-banner .diptico__titulo-selector {
  border-color: rgba(255, 255, 255, 0.55);
  background-color: rgba(0, 0, 0, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.92)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.diptico__header--con-banner .diptico__titulo-selector:hover {
  background-color: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Tema oscuro sin banner: flecha oscura invisible sobre fondo verde —
   mismo patrón de override que el resto de .diptico--tema-verde.
   (Si además hay banner, la regla de banner ya puso una flecha clara
   también — no hay conflicto visual aunque gane una u otra). */
.diptico.diptico--tema-verde .diptico__titulo-selector {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(190,225,205,0.65)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.diptico__subtitulo {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-color-secondary);
}

/* ─── Estadísticas rápidas ─────────────────────────────────────────────────── */

.diptico__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 2rem;
}

.stat {
  background: var(--background-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.75rem;
}

.stat__valor {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 27px;
  font-weight: 600;
  color: var(--text-color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat__label {
  font-size: 14px;
  color: var(--text-color-secondary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ─── Panel informativo de concesiones sobre mapa ─────────────────────────── */

.diptico__concesiones--mapa {
  position: absolute;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 5;
  width: min(760px, calc(100% - 48px));
  max-height: min(42vh, 360px);
  overflow: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.diptico__concesiones--mapa .diptico__seccion-titulo {
  margin-bottom: 8px;
}

.diptico__toggle-concesiones {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0;
  gap: 8px;
}

/* Botón de tour inline — empujado a la derecha automáticamente */
.diptico__toggle-concesiones .btn-tour-narrativo {
  margin-top: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.diptico__toggle-concesiones span {
  display: none;
}

@media (max-width: 767px) {
  .diptico__toggle-concesiones span {
    display: inline;
    font-size: 9px;
    color: var(--text-color-tertiary);
  }
}

.concesiones-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 0;
}

.concesion-card {
  border: 0.5px solid var(--border-subtle);
  border-radius: 5px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.72);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.concesion-card__patron {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* .concesion-card__patron-img eliminado — los patrones se renderizan
 * con SVG data URI vía .patron-{pais}. No hay <img> en el DOM. */

.concesion-card__nombre {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-color-primary);
}

.concesion-card__empresa {
  font-size: 10px;
  line-height: 1.25;
  color: var(--text-color-secondary);
  margin-top: 1px;
}

.concesion-card__badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Badges por país */
.badge-china {
  background: #fff0ee;
  color: #dd3519;
}

.badge-canada {
  background: #f3f7ee;
  color: #4a6b2a;
}

.badge-colombia {
  background: #f5f3ff;
  color: #4c1d95;
}

.badge-nacional {
  background: #eef1fc;
  color: #263fa8;
}

.badge-reserva {
  background: color-mix(in srgb, var(--concesion-tipo-reserva) 15%, white);
  color: var(--concesion-tipo-reserva);
}

/* ─── Patrones visuales por país (leyenda + concesion-card) ──────────────────
 *
 * SVG data URI por país — geometría exacta del archivo Illustrator
 * (patron-china.svg). Todas las líneas comparten la misma trayectoria;
 * el color del stroke es el hex del token de país hardcodeado en el URI.
 *
 * viewBox 75×76 · stroke-width 5 · 5 líneas · espaciado ~30.7px
 * Líneas: de (-78.3,95.9)→(48.6,-40.6) repetidas cada 30.7px en X
 *
 * ⚠️  Los colores están hardcodeados en el SVG data URI porque currentColor
 * no hereda CSS dentro de background-image. Si cambias un token en
 * tokens.css, actualiza también el hex en el data URI de ese país.
 *
 * background-color añade el tinte de fondo semitransparente.
 *
 * .patron-reserva: sin líneas — mantiene sólido semitransparente.
 * ─────────────────────────────────────────────────────────────────────────── */

/* China — #dd3519 */
.patron-china {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 76'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect x='2.5' y='2.7' width='70.1' height='70.7' rx='7.2' ry='7.2'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Cline stroke='%23dd3519' stroke-width='5' stroke-miterlimit='10' x1='-78.3' y1='95.9' x2='48.6' y2='-40.6'/%3E%3Cline stroke='%23dd3519' stroke-width='5' stroke-miterlimit='10' x1='-47.5' y1='95.9' x2='79.4' y2='-40.6'/%3E%3Cline stroke='%23dd3519' stroke-width='5' stroke-miterlimit='10' x1='-16.8' y1='95.9' x2='110.1' y2='-40.6'/%3E%3Cline stroke='%23dd3519' stroke-width='5' stroke-miterlimit='10' x1='14' y1='95.9' x2='140.9' y2='-40.6'/%3E%3Cline stroke='%23dd3519' stroke-width='5' stroke-miterlimit='10' x1='44.7' y1='95.9' x2='171.7' y2='-40.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-color: color-mix(in srgb, var(--concesion-pais-china) 12%, transparent);
}

/* Canadá — #739b50 */
.patron-canada {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 76'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect x='2.5' y='2.7' width='70.1' height='70.7' rx='7.2' ry='7.2'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Cline stroke='%23739b50' stroke-width='5' stroke-miterlimit='10' x1='-78.3' y1='95.9' x2='48.6' y2='-40.6'/%3E%3Cline stroke='%23739b50' stroke-width='5' stroke-miterlimit='10' x1='-47.5' y1='95.9' x2='79.4' y2='-40.6'/%3E%3Cline stroke='%23739b50' stroke-width='5' stroke-miterlimit='10' x1='-16.8' y1='95.9' x2='110.1' y2='-40.6'/%3E%3Cline stroke='%23739b50' stroke-width='5' stroke-miterlimit='10' x1='14' y1='95.9' x2='140.9' y2='-40.6'/%3E%3Cline stroke='%23739b50' stroke-width='5' stroke-miterlimit='10' x1='44.7' y1='95.9' x2='171.7' y2='-40.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-color: color-mix(in srgb, var(--concesion-pais-canada) 12%, transparent);
}

/* Colombia — #5b21b6 */
.patron-colombia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 76'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect x='2.5' y='2.7' width='70.1' height='70.7' rx='7.2' ry='7.2'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Cline stroke='%235b21b6' stroke-width='5' stroke-miterlimit='10' x1='-78.3' y1='95.9' x2='48.6' y2='-40.6'/%3E%3Cline stroke='%235b21b6' stroke-width='5' stroke-miterlimit='10' x1='-47.5' y1='95.9' x2='79.4' y2='-40.6'/%3E%3Cline stroke='%235b21b6' stroke-width='5' stroke-miterlimit='10' x1='-16.8' y1='95.9' x2='110.1' y2='-40.6'/%3E%3Cline stroke='%235b21b6' stroke-width='5' stroke-miterlimit='10' x1='14' y1='95.9' x2='140.9' y2='-40.6'/%3E%3Cline stroke='%235b21b6' stroke-width='5' stroke-miterlimit='10' x1='44.7' y1='95.9' x2='171.7' y2='-40.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-color: color-mix(in srgb, var(--concesion-pais-colombia) 12%, transparent);
}

/* Nacional — #263fa8 */
.patron-nacional {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 76'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect x='2.5' y='2.7' width='70.1' height='70.7' rx='7.2' ry='7.2'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Cline stroke='%23263fa8' stroke-width='5' stroke-miterlimit='10' x1='-78.3' y1='95.9' x2='48.6' y2='-40.6'/%3E%3Cline stroke='%23263fa8' stroke-width='5' stroke-miterlimit='10' x1='-47.5' y1='95.9' x2='79.4' y2='-40.6'/%3E%3Cline stroke='%23263fa8' stroke-width='5' stroke-miterlimit='10' x1='-16.8' y1='95.9' x2='110.1' y2='-40.6'/%3E%3Cline stroke='%23263fa8' stroke-width='5' stroke-miterlimit='10' x1='14' y1='95.9' x2='140.9' y2='-40.6'/%3E%3Cline stroke='%23263fa8' stroke-width='5' stroke-miterlimit='10' x1='44.7' y1='95.9' x2='171.7' y2='-40.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-color: color-mix(in srgb, var(--concesion-pais-nacional) 12%, transparent);
}

/* Reserva — sin líneas; sólido, color café (--concesion-tipo-reserva) */
.patron-reserva {
  background: var(--concesion-tipo-reserva);
}

/* ─── Narrativa / contexto ─────────────────────────────────────────────────── */

.diptico__narrativa {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-color-primary);
  margin-bottom: 2rem;
}

.diptico__narrativa p+p {
  margin-top: 0.75rem;
}

/* ─── Concesión Minera ──────────────────────────────────────────────────────── */

/* ─── Bloque concesión minera ───────────────────────────────────────────────
 *
 * Colores hardcodeados — no hereda del tema para garantizar legibilidad
 * tanto en tema claro como en tema verde oscuro.
 * El override .diptico--tema-verde adapta el fondo al contexto oscuro.
 * ─────────────────────────────────────────────────────────────────────────── */

.diptico__concesion-minera {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: #fdf6f0;
  border: 1px solid rgba(215, 98, 14, 0.20);
  border-left: 3px solid #d7620e;
  border-radius: 0 6px 6px 0;
}

.concesion-minera-titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #d7620e;
  margin-bottom: 0.625rem;
}

.concesion-minera-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #2c2c2a;
}

/* Tema verde: fondo semitransparente sobre oscuro, texto claro adaptado */
.diptico--tema-verde .diptico__concesion-minera {
  background: rgba(255, 246, 236, 0.07);
  border-color: rgba(215, 98, 14, 0.35);
  border-left-color: #d7620e;
}

.diptico--tema-verde .concesion-minera-body {
  color: rgba(255, 235, 210, 0.88);
}

/* ─── Fuente ───────────────────────────────────────────────────────────────── */

.diptico__fuente {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  color: var(--text-color-secondary);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.diptico__fuente-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  flex-shrink: 0;
  display: none;
}

.diptico__fuente-logo[src]:not([src=""]) {
  display: block;
}

.diptico__fuente strong {
  color: var(--text-color-primary);
  font-weight: 500;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet landscape: conservar díptico */
@media (min-width: 768px) and (max-width: 977px) {
  .diptico[data-layout="A"] {
    grid-template-columns: 50fr 50fr;
  }

  .diptico__mapa {
    height: auto;
    position: relative;
    padding: 0px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .mapa-editorial {
    width: min(100%, 760px);
  }

  .diptico__info {
    grid-column: 2;
    border-left: 0.5px solid var(--border-subtle);
    border-top: none;
    padding: 2rem 1.5rem;
    overflow-y: auto;
  }

  .diptico__concesiones--mapa {
    width: min(620px, calc(100% - 32px));
    max-height: 38vh;
    left: 16px;
    bottom: 16px;
    padding: 10px;
  }

  .concesiones-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: stack */
@media (max-width: 767px) {
  .atlas-page {
    padding-inline: 0;
    justify-content: center;
  }

  .diptico,
  .diptico[data-layout="A"],
  .diptico[data-layout="B"],
  .diptico[data-layout="C"],
  .diptico[data-layout="D"],
  .diptico[data-layout="E"] {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: auto;
  }

  .diptico__mapa,
  .diptico__info {
    grid-column: 1;
    width: 100%;
  }

  .diptico__mapa {
    grid-row: 1;
    position: relative;
    height: auto;
    padding: 0px;
    overflow: hidden;
  }

  .mapa-editorial {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .diptico__concesiones--mapa {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-height: none;
    margin-top: 12px;
    padding: 10px;
    background: white;
    backdrop-filter: none;
  }

  .concesiones-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diptico__concesiones--mapa.is-collapsed .concesiones-lista {
    display: none;
  }

  .concesion-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding: 8px 10px;
  }

  .concesion-card__badge {
    display: none;
  }

  .concesion-card__nombre {
    font-size: 11px;
  }

  .concesion-card__empresa {
    font-size: 9px;
  }

  .mapa-editorial object {
    width: 100%;
    display: block;
  }

  .diptico__info {
    grid-row: 2;
    border-left: none;
    border-top: 0.5px solid var(--border-subtle);
    padding: 0;
    overflow-y: visible;
  }

  /* Header sin banner — padding propio */
  .diptico__header {
    margin: 0 0 1.5rem;
    min-height: 100px;
    padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 1.5rem) 1.75rem;
  }

  /* Header con banner — full width sin restricciones */
  .diptico__header--con-banner {
    padding: 0;
    min-height: 180px;
    margin: 0;
  }

  /* Logo flotante sobre el mapa — arriba a la derecha */
  .diptico__logo-mapa {
    width: 60px;
    height: 50px;
  }

  .diptico__logo-mapa {
    top: 3rem;
  }

  .diptico__header--con-banner .diptico__header-texto {
    padding: 1.5rem clamp(1rem, 5vw, 1.5rem);
    align-self: flex-end;
  }

  /* Padding en hijos del panel editorial — no en el contenedor */
  .diptico__stats,
  .diptico__narrativa,
  .diptico__fuente {
    padding-inline: clamp(1rem, 5vw, 1.5rem);
  }

  .diptico__stats {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.5rem;
  }

  .diptico__narrativa {
    margin-top: 1rem;
  }

  .diptico__fuente {
    padding-bottom: 1.5rem;
  }
}

/* Ocultar leyenda HTML para Waupasa Twi ya que está integrada en el SVG */
body[data-territorio="03-waupasa-twi"] .diptico__leyenda-mapa {
  display: none;
}

@media (max-width: 480px) {
  .diptico__concesiones--mapa {
    padding: 8px;
  }

  .concesiones-lista {
    gap: 5px;
  }

  .concesion-card {
    padding: 2px;
  }

  .diptico__stats {
    grid-template-columns: 1fr 1fr;
  }

  .diptico__titulo {
    font-size: 18px;
  }

  .diptico__leyenda-mapa {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 0.75rem;
    width: 100%;
  }
}

/* ─── Print / PDF ──────────────────────────────────────────────────────────── */

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }

  .diptico {
    min-height: 0;
    height: 100vh;
    width: 100vw;
    grid-template-columns: 50fr 50fr;
    page-break-inside: avoid;
  }

  .diptico__mapa {
    position: relative;
    height: 100%;
  }

  .diptico__info {
    overflow: visible;
    font-size: 12px;
  }

  .diptico__narrativa {
    font-size: 12px;
  }

  .stat__valor {
    font-size: 27px;
  }
}

.mapa-svg-inline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.mapa-svg-inline svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ─── Interactividad mapa SVG inline ─────────────────────────────────────── */

#mapa-svg-inline [id] {
  transition: opacity 160ms ease, filter 160ms ease;
}

.concesion--atenuada {
  opacity: 0.18;
}

.concesion-card {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    opacity 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

/* ── Estado activo base ───────────────────────────────────────────────────── */

.concesion-card--activa {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-width: 1.5px;
}

/* texto y badge mantienen su color — el borde cromático da el feedback */

/* ── Activo por país (sombra cromática) ─────────────────────────────────────
 *
 * El border-color exacto (tono individual de la ESCALAS_PAIS) lo inyecta
 * inyectarCSSConcesiones() en render-diptico.js — un selector por concesión
 * usando data-svg-id. Cada concesión recibe el mismo tono que anima su
 * border en el SVG.
 *
 * Aquí solo queda el box-shadow con el tono genérico del país, para que la
 * sombra tenga coherencia cromática sin necesitar el color exacto.
 * ─────────────────────────────────────────────────────────────────────────── */

/* China — sombra roja */
.concesion-card--activa[data-pais="china"] {
  box-shadow: 0 4px 12px rgba(221, 53, 25, 0.28);
}

/* Canadá — sombra verde */
.concesion-card--activa[data-pais="canada"] {
  box-shadow: 0 4px 12px rgba(40, 122, 40, 0.28);
}

/* Nacional — sombra azul */
.concesion-card--activa[data-pais="nacional"] {
  box-shadow: 0 4px 12px rgba(38, 63, 168, 0.28);
}

/* Reserva — sombra café */
.concesion-card--activa[data-pais="reserva"] {
  box-shadow: 0 4px 12px rgba(107, 58, 42, 0.28);
}

/* Colombia — sombra violeta */
.concesion-card--activa[data-pais="colombia"] {
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.28);
}

/* ── Estado atenuado ──────────────────────────────────────────────────────── */

.concesion-card--atenuada {
  opacity: 0.35;
}

.pais-btn--activo {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
}

/* ── Banderas de países sin concesiones en este territorio ──────────────────
 *
 * Marcada por marcarPaisesSinConcesiones() en render-diptico.js. Sin esto,
 * las 5 banderas de la leyenda se ven igual de "presentes" sin importar
 * cuántos países realmente aparecen en el mapa — confuso en territorios
 * mono o bipaís (Rama y Kriol, Creole de Bluefields, Wangki Li, etc.).
 * Combina opacidad + escala de grises para que el contraste se note incluso
 * entre banderas de colores parecidos.
 * ─────────────────────────────────────────────────────────────────────────── */

.pais-btn--sin-concesiones {
  opacity: 0.32;
  filter: grayscale(85%);
  pointer-events: none;
}

.mapa-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: rgba(17, 20, 17, 0.9);
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.mapa-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─── Stroke animado en concesiones — REEMPLAZA el bloque anterior ────────────
 *
 * El SVG actual usa estos IDs de border para Waupasa Twi:
 *   #border   → el-encanto-i
 *   #border1  → columbus
 *   #border2  → el-encanto-ii
 *   #border3  → caribe
 *   #border4  → caribe
 *   #border5  → yulu-awaskira
 *   #border6  → reserva-minera
 *   #border7  → walpa-tara
 *   #border8  → vanessa
 *   #border9  → puerto-cabezas
 *
 * Nota: Illustrator puede reasignar estos IDs en cada export.
 * Auditar con:
 *   grep -o 'id="border[^\"]*"' mapas-svg/03-waupasa-twi/desktop-03-Waupasa-Twi.svg | sort
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. Estado base: todos los borders invisibles en reposo ─────────────────── */

/* ── Estado base: todos los borders de concesión invisibles en reposo ────────
 * IDs estables — nombrados manualmente en Illustrator como border-{svg_id}
 * Seguros ante re-export. No requieren auditoría posterior.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Reposo: gris translúcido — el color vivo llega desde el bloque
 * "Bordes de concesiones: gris en reposo, color en hover" al final del archivo.
 * Este selector solo mantiene propiedades de infraestructura. */
[id^="border-"]:not([id^="border-china"]):not([id^="border-canada"]):not([id^="border-colombia"]):not([id^="border-nicaragua"]):not([id^="border-reserva"]:not([id="border-reserva-minera"])) {
  pointer-events: none;
  will-change: stroke-dashoffset;
}




/* ── 2. Keyframe único para todos ────────────────────────────────────────────── */

@keyframes dash-concesion {
  to {
    stroke-dashoffset: -200;
  }
}


/* ── Animación de borders por concesión ───────────────────────────────────────
 *
 * ✅ SISTEMA DINÁMICO ACTIVO — los colores y animaciones se inyectan
 * automáticamente desde render-diptico.js via inyectarCSSConcesiones().
 *
 * Las escalas de color por país y los dasharray viven en ESCALAS_PAIS
 * y DASH_PAIS en render-diptico.js.
 *
 * Para cambiar un color específico: usar color_override en data-territorios.js.
 * Para cambiar la paleta de un país: editar ESCALAS_PAIS en render-diptico.js.
 * Para agregar una concesión nueva: agregar svg_id en data-territorios.js.
 * Nunca más tocar este archivo para concesiones.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── 9. Drop-shadow coloreado por país ───────────────────────────────────────── */
/*
 * Reemplaza el drop-shadow negro genérico.
 * Se aplica al grupo concesión completo.
 */

.concesion--activa {
  opacity: 1;
  filter: none;
}

#china .concesion--activa {
  filter: drop-shadow(0 0 9px rgba(169, 46, 38, 0.55));
}

#canada .concesion--activa {
  filter: drop-shadow(0 0 9px rgba(135, 69, 29, 0.50));
}

#nicaragua .concesion--activa {
  filter: drop-shadow(0 0 9px rgba(38, 63, 168, 0.50));
}

#reserva-minera .concesion--activa {
  filter: drop-shadow(0 0 7px rgba(107, 58, 42, 0.45));
}


/* ── 10. Accesibilidad ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [id^="border-"] {
    animation: none !important;
    stroke-dasharray: 6 6 !important;
  }
}

@media (max-width: 767px) {
  [id^="border-"] {
    animation: none !important;
    stroke-dasharray: 6 6 !important;
  }
}


/* ── NOTA: border IDs actuales del SVG ────────────────────────────────────────
 *
 * Mapa actual de border IDs Waupasa Twi:
 *   #border   → el-encanto-i
 *   #border1  → columbus
 *   #border2  → el-encanto-ii
 *   #border3  → caribe
 *   #border4  → caribe
 *   #border5  → yulu-awaskira
 *   #border6  → reserva-minera
 *   #border7  → walpa-tara
 *   #border8  → vanessa
 *   #border9  → puerto-cabezas
 *
 * Si se re-exporta desde Illustrator, auditar con:
 *   grep -o 'id="border[^"]*"' mapas-svg/03-waupasa-twi/desktop-03-Waupasa-Twi.svg | sort
 *
 * Esta versión ya no depende de selectores obsoletos sobre Nicaragua.
 * Si Illustrator reasigna los IDs, vuelve a auditar y actualiza este bloque.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ─── area-hover-target: nunca debe pintar su propio stroke ──────────────────
 *
 * Illustrator a veces hereda 'stroke' en la misma clase compartida que define
 * el fill-opacity:0 del hit area (ver victoria/01-rama-kriol). Si el hit area
 * dibuja un stroke sólido encima del border real, tapa por completo el
 * stroke-dasharray animado de border-{svg_id}, aunque la animación CSS esté
 * funcionando correctamente. area-hover-target debe ser invisible siempre:
 * sin fill visible (fill-opacity:0) y sin stroke visible.
 * ─────────────────────────────────────────────────────────────────────────── */

#mapa-svg-inline [id*="area-hover-target"] {
  stroke: none !important;
  pointer-events: all;
  fill: transparent;
}

/* columbus: rect pequeño tapado por el-encanto-i — necesita z-order manual */
#columbus {
  pointer-events: all;
}

#columbus #area-hover-target1 {
  pointer-events: all;
  opacity: 0;
}

#columbus>* {
  pointer-events: none;
}

/* ─── Animaciones de borde en banderas ───────────────────────────────────────
 *
 * PEGAR AL FINAL DE css/diptico.css
 * Reemplaza el bloque animaciones-banderas.css anterior completo.
 *
 * Trigger: clase .pais--activo en el grupo pais-* del SVG.
 * Se añade desde JS en dos casos:
 *   1. hover sobre concesión en el mapa → activa la bandera de su país
 *   2. hover sobre la bandera directamente → activa sus propias concesiones
 *
 * Técnica: stroke-dashoffset animado en compositor thread (GPU).
 * Sin repaint. Sin layout recalculado. Performance segura.
 *
 * Circunferencia: 2 × π × 28.4 ≈ 178.4px
 * ─────────────────────────────────────────────────────────────────────────── */

@keyframes borde-girar {
  to {
    stroke-dashoffset: -178.4;
  }
}

/* ── Estado base: bordes invisibles en reposo ──────────────────────────────── */
/*
 * IDs estables — nombrados manualmente en Illustrator.
 * No dependen del orden de layers → seguros ante reexport.
 */

#border-china circle,
#border-canada circle,
#border-nicaragua circle,
#border-colombia circle,
#border-reserva circle {
  opacity: 0;
  will-change: stroke-dashoffset;
  transition: stroke-dasharray 200ms ease, opacity 200ms ease;
}

/* ── Estado activo: aparece y anima al hover ───────────────────────────────── */

#pais-china.pais--activo #border-china circle,
#pais-canada.pais--activo #border-canada circle,
#pais-nicaragua.pais--activo #border-nicaragua circle,
#pais-colombia.pais--activo #border-colombia circle,
#pais-reserva.pais--activo #border-reserva circle {
  opacity: 1;
  stroke-dasharray: 8 6;
  stroke-dashoffset: 0;
  animation: borde-girar 4s linear infinite;
}

/* ── Velocidades por país ───────────────────────────────────────────────────── */

#pais-china.pais--activo #border-china circle {
  animation-duration: 3s;
}

#pais-canada.pais--activo #border-canada circle {
  animation-duration: 4s;
}

#pais-nicaragua.pais--activo #border-nicaragua circle {
  animation-duration: 4.5s;
}

#pais-colombia.pais--activo #border-colombia circle {
  animation-duration: 4.5s;
}

#pais-reserva.pais--activo #border-reserva circle {
  animation-duration: 6s;
  stroke-dasharray: 4 10;
}

/* ── Accesibilidad ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  #pais-china.pais--activo #border-china circle,
  #pais-canada.pais--activo #border-canada circle,
  #pais-nicaragua.pais--activo #border-nicaragua circle,
  #pais-colombia.pais--activo #border-colombia circle,
  #pais-reserva.pais--activo #border-reserva circle {
    animation: none;
    stroke-dasharray: 8 6;
  }
}

/* ── Mobile: sin animación para preservar batería ─────────────────────────── */

@media (max-width: 767px) {

  #pais-china.pais--activo #border-china circle,
  #pais-canada.pais--activo #border-canada circle,
  #pais-nicaragua.pais--activo #border-nicaragua circle,
  #pais-colombia.pais--activo #border-colombia circle,
  #pais-reserva.pais--activo #border-reserva circle {
    animation: none;
    stroke-dasharray: 8 6;
  }
}

/* ─── Botón de animación narrativa ───────────────────────────────────────────
 *
 * Se inyecta dinámicamente por initAnimacionNarrativa().
 * Se posiciona debajo de la lista de concesiones en el panel del mapa.
 * Sin dependencias de tokens adicionales — usa los ya definidos.
 * ─────────────────────────────────────────────────────────────────────────── */

.btn-tour-narrativo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 5px 10px 5px 8px;
  border: 0.5px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--background-page);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  line-height: 1;
}

.btn-tour-narrativo:hover {
  background: var(--background-subtle);
  border-color: var(--border-default);
  color: var(--text-color-primary);
}

.btn-tour-narrativo--activo {
  background: var(--color-brand-green-900);
  border-color: var(--color-brand-green-900);
  color: #fff;
}

.btn-tour-narrativo--activo:hover {
  background: var(--color-brand-green-800);
  border-color: var(--color-brand-green-800);
  color: #fff;
}

/* Ocultar en mobile — el tour es para hover, no tiene sentido sin puntero */
@media (max-width: 767px) {
  .btn-tour-narrativo {
    display: none;
  }
}

/* ── area-main-hover: patrón flip visible solo al activar concesión ─────────
 *
 * Illustrator exporta area-main-hover con IDs numéricos (area-main-hover1,
 * area-main-hover2…) pero preserva data-name="area-main-hover".
 * Usamos [data-name] como selector estable ante re-exports.
 *
 * El primero (#area-main-hover) no tiene data-name — selector combinado.
 *
 * Estado actual (junio 2026):
 *   ✅ el-encanto-i   → #area-main-hover
 *   ✅ el-encanto-ii  → #area-main-hover1
 *   ✅ yulu-awaskira  → #area-main-hover2
 *   ✅ caribe         → #area-main-hover3
 *   ❌ columbus       → pendiente Illustrator
 *   ❌ reserva-minera → pendiente Illustrator
 *   ❌ walpa-tara     → pendiente Illustrator
 *   ❌ vanessa        → pendiente Illustrator
 *   ❌ puerto-cabezas → pendiente Illustrator
 * ─────────────────────────────────────────────────────────────────────────── */

#area-main-hover,
[data-name="area-main-hover"] {
  opacity: 0;
  transition: opacity 180ms ease;
}

.concesion--activa #area-main-hover,
.concesion--activa [data-name="area-main-hover"] {
  opacity: 1;
}

/* ─── Bordes de concesiones: gris en reposo, color en hover ─────────────────
 *
 * Estos estilos se inyectan vía diptico.css sobre el SVG inline.
 * El SVG exportado desde Illustrator no necesita modificarse manualmente
 * en cada reexportación — este bloque persiste aquí y aplica siempre.
 *
 * Los [id^="border-"] excluyen los grupos de bandera/leyenda (border-china,
 * border-canada, etc.) que tienen otro rol en el SVG.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Reposo: gris #4c4c4c al 33% para todos los border-* de concesiones */
#mapa-svg-inline [id^="border-"]:not([id="border-china"]):not([id="border-canada"]):not([id="border-colombia"]):not([id="border-nicaragua"]):not([id="border-reserva"]) {
  stroke: #4c4c4c !important;
  stroke-opacity: 0.53 !important;
  transition: stroke 160ms ease, stroke-opacity 160ms ease;
}

/* Hover / activo: restaura el color original del país */
/* ✅ Los colores específicos por concesión los inyecta render-diptico.js     */
/* Para cambiar colores: ver ESCALAS_PAIS en render-diptico.js                */
#mapa-svg-inline .concesion--activa [id^="border-"] {
  stroke-opacity: 1 !important;
}

/* ─── Ríos — presencia permanente ───────────────────────────────────────────
 *
 * Los ríos son contexto editorial crítico — muestran qué recursos hídricos
 * están dentro de las concesiones. Nunca se atenúan, ni con concesión activa.
 *
 * #rios  → sombra gris (#bcbcbc) — profundidad topográfica
 * #rios1 → canal azul (#0072bd)  — red hídrica principal
 * ─────────────────────────────────────────────────────────────────────────── */

#mapa-svg-inline #rios,
#mapa-svg-inline #rios1 {
  transition: filter 300ms ease;
}

/* Resplandor sutil permanente en el canal azul */
#mapa-svg-inline #rios1 {
  filter: drop-shadow(0 0 1.5px rgba(0, 114, 189, 0.45));
}


/* ─── Modo ocultar concesiones — botón ojo ───────────────────────────────────
 *
 * Clase aplicada a #mapa-svg-inline cuando el usuario activa el toggle de ojo.
 * Oculta patrones (area-main) y borders animados de concesiones.
 * Preserva: ríos, poblados, banderas, insets, raster base.
 * ─────────────────────────────────────────────────────────────────────────── */

#mapa-svg-inline.concesiones--ocultas [data-name="area-main"],
#mapa-svg-inline.concesiones--ocultas [id^="area-main"] {
  opacity: 0 !important;
  transition: opacity 220ms ease;
}

#mapa-svg-inline.concesiones--ocultas [id^="border-"]:not([id="border-china"]):not([id="border-canada"]):not([id="border-colombia"]):not([id="border-nicaragua"]):not([id="border-reserva"]) {
  opacity: 0 !important;
  transition: opacity 220ms ease;
}

/* ─── Poblados — etiquetas y marcadores ──────────────────────────────────────
 *
 * Las etiquetas de texto (nombres de poblados) se agrupan dentro de #poblados
 * en Illustrator. Los triángulos marcadores van en #poblado-marcadores.
 * El halo blanco hace legibles los nombres sobre el raster del mapa.
 *
 * La cascada hace el trabajo: la regla general aplica halo a TODO path
 * dentro de #poblados, y la segunda regla (más específica) lo sobreescribe
 * solo para los triángulos dentro de #poblado-marcadores.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Halo blanco — etiquetas de texto de poblados */
#mapa-svg-inline #poblados path {
  fill: #1a1a1a;
  stroke: #fff;
  stroke-width: 6px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Triángulos marcadores — pisa la regla anterior */
#mapa-svg-inline #poblados [id^="poblado-marcadores"] path {
  fill: #56b79f;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* ─── Barra de navegación entre territorios ─────────────────────────────────
 *
 * position: fixed bottom — siempre visible sobre el contenido.
 * Tres zonas: inicio (izq) · prev+contador+next (centro) · placeholder (der)
 * El placeholder espeja el ancho del botón inicio para centrar el bloque central.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Navegación entre territorios ────────────────────────────────────────────
 *
 * Vive dentro de diptico__info (flex column), justo después de diptico__fuente.
 * No es fixed — se mantiene al fondo del panel derecho como parte del flujo.
 * ─────────────────────────────────────────────────────────────────────────── */

.atlas-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 2px;
  margin-top: 16px;
  border-top: 0.5px solid var(--border-subtle);
  flex-shrink: 0;
}

.atlas-nav__central {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Botones base — pill sutil, mismo patrón que .btn-tour-narrativo
   más abajo en este archivo: variables theme-aware (funcionan igual
   en tema claro y en .diptico--tema-verde), no tokens de botón sueltos. */

.atlas-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0.5px solid transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-color-secondary);
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
  user-select: none;
}

.atlas-nav__btn:hover {
  background: var(--background-subtle);
  border-color: var(--border-subtle);
  color: var(--text-color-primary);
}

/* Primer/último territorio */
.atlas-nav__btn--disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ── "Siguiente" — acción primaria. A propósito NO usa las variables
   de tema (no debe "mezclarse" con la página): es un acento de marca
   fijo, igual que el fondo de .stat más arriba en este mismo archivo,
   con el mismo peso visual que el botón "Siguiente" de la portada. */

.atlas-nav__btn--next {
  background: #205736;
  color: #ffffff;
  padding: 10px 18px 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.atlas-nav__btn--next:hover {
  background: #287e45;
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-1px);
}

.atlas-nav__btn--next:active {
  background: #17402a;
  transform: none;
}

.atlas-nav__btn--next.atlas-nav__btn--disabled {
  background: var(--background-subtle);
  color: var(--text-color-secondary);
  box-shadow: none;
}

/* ── Contador "01 / 12" — pill, mismo tratamiento que .btn-tour-narrativo ─── */

/* Los labels de prev/next son nombres de territorio y pueden ser largos
   ("Mayangna Sauni Arungka 'Matunbak'") — se truncan con ellipsis en vez
   de forzar scroll horizontal en pantallas angostas. `ch` aproxima el
   ancho de un carácter (no es una cuenta exacta de letras, pero es el
   equivalente correcto en CSS ya que el ancho real depende de la fuente). */
.atlas-nav__label {
  display: inline-block;
  max-width: 19ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Contador "01/18" — vuelve a ser texto plano, no interactivo.
   El selector real ahora vive junto al título (ver .diptico__titulo-selector
   más abajo) porque el picker nativo del navegador siempre se ancla a
   donde está el <select> en el layout — tenerlo acá abajo hacía que el
   picker se abriera lejos del ícono que lo disparaba. ─────────────────── */

.atlas-nav__contador {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-secondary);
  background: var(--background-subtle);
  border: 0.5px solid var(--border-subtle);
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  min-width: 52px;
  text-align: center;
}



/* ── Placeholder derecho (futuro hamburguesa) ────────────────────────────── */

.atlas-nav__placeholder {
  min-width: 64px;
}

/* ── Labels ocultos en viewports estrechos ───────────────────────────────── */

@media (max-width: 600px) {
  .atlas-nav__label {
    display: none;
  }
  .atlas-nav__btn {
    padding: 8px 10px;
  }
  .atlas-nav__btn--next {
    padding: 10px 12px;
  }
  .atlas-nav__placeholder {
    min-width: 32px;
  }
}

/* ── Barra flotante en mobile ─────────────────────────────────────────────
 *
 * En mobile el layout es una sola columna larga (mapa → stats → narrativa
 * → concesión → fuente → nav), y el nav quedaba al final del todo: había
 * que scrollear la página entera para pasar de territorio. Se fija abajo
 * como un tab-bar de app, siempre alcanzable.
 *
 * Mismo breakpoint (767px) donde el layout ya colapsa a una columna —
 * ver .diptico__info más arriba en este archivo.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .atlas-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--background-page); /* theme-aware: se adapta sola en .diptico--tema-verde */
    margin-top: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.16);
  }

  /* Reserva el espacio que el nav dejó de ocupar en el flujo normal al
     volverse fixed — si no, tapa la fuente/última concesión. */
  .diptico__info {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}