/* «La deriva» — recorrido por las definiciones del Caribe. Prefijo dv-.
   Usa solo los tokens del atlas (--cream, --gray, --line, --bg-deep, --ink-line,
   --gold, --ff-*) y la paleta «Mar y coral» de la capa (--qc-*). Ningún color propio. */

/* El botón vive dentro de .seg.base del propio atlas y hereda sus estilos
   (rojo sobre transparente, #a8281f al estar pulsado). Aquí solo se añade el
   punto dorado con que el sitio marca una capa encendida, igual que #caribesBtn. */
#derivaBtn{ position:relative; }
#derivaBtn.activo::after{ content:""; position:absolute; top:4px; right:5px; width:6px; height:6px;
  border-radius:50%; background:var(--gold); }

/* línea de avance entre paso y paso: sin ella la pieza parece detenida */
.dv-avance{ position:absolute; left:0; top:22px; height:2px; width:0; background:var(--qc-dentro);
  opacity:.75; pointer-events:none; border-radius:2px; }
@media (prefers-reduced-motion: reduce){ .dv-avance{ display:none; } }

/* estela: el anillo del estado anterior se ensancha y se apaga sobre el mapa.
   La escala va por transform, no por el atributo r, que no todos los navegadores
   interpolan. transform-box:fill-box hace que el centro del círculo sea el origen. */
.dv-estela-capa{ pointer-events:none; }
.dv-estela{ opacity:.8; transform-box:fill-box; transform-origin:center;
  transform:scale(1); /* la estela es la única excepción declarada: un lento y dos tercios, para que se lea como rastro y no como parpadeo */
  transition:opacity calc(var(--mov-lento,.72s) * 1.6) var(--curva-llegada,cubic-bezier(.16,1,.3,1)), transform calc(var(--mov-lento,.72s) * 1.6) var(--curva-llegada,cubic-bezier(.16,1,.3,1)); }
.dv-estela-capa.va .dv-estela{ opacity:0; transform:scale(1.5); }
@media (prefers-reduced-motion: reduce){ .dv-estela-capa{ display:none; } }

.dv-btn.dv-oleaje[aria-pressed="true"]{ background:var(--qc-dentro); color:var(--bg-deep); border-color:var(--qc-dentro); }

.dv-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:640;
  background:rgba(5,6,4,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  color:var(--cream); font-family:var(--ff-body);
  padding:.5rem .9rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  display:grid; grid-template-columns:minmax(0,1fr); gap:.4rem; font-size:.86rem; max-height:40vh; overflow:auto;
}
.dv-barra[hidden]{ display:none; }

.dv-fila{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.dv-ctrl{ display:flex; align-items:center; gap:.3rem; }
.dv-btn{
  border:1px solid var(--line); background:transparent; color:var(--cream);
  border-radius:999px; padding:.28rem .75rem; font:inherit; font-size:.82rem; cursor:pointer; line-height:1.3;
  transition:background var(--mov-rapido,.15s) var(--curva-llegada,cubic-bezier(.16,1,.3,1)), border-color var(--mov-rapido,.15s) var(--curva-llegada,cubic-bezier(.16,1,.3,1));
}
.dv-btn:hover{ background:rgba(226,221,206,.07); border-color:var(--ink-line); }
.dv-btn[aria-pressed="true"]{ background:var(--cream); color:var(--bg-deep); border-color:var(--cream); }
.dv-btn.dv-play{ min-width:6.4rem; font-family:var(--ff-mono); }
.dv-btn:focus-visible, .dv-tick:focus-visible, .dv-card:focus-visible, .dv-lugar:focus-visible{
  outline:2px solid var(--qc-dentro); outline-offset:2px; }
select.dv-btn{ background:var(--bg-deep); }

/* ----- línea de años ----- */
.dv-linea{ position:relative; height:34px; flex:1 1 300px; min-width:220px; }
.dv-linea::before{ content:""; position:absolute; left:0; right:0; top:22px; height:1px; background:var(--line); }
.dv-tick{
  position:absolute; top:14px; width:2px; height:9px; transform:translateX(-1px);
  background:var(--gray); opacity:.7; border:0; padding:0; cursor:pointer;
  transition:height var(--mov-rapido,.15s) var(--curva-vaiven,cubic-bezier(.65,0,.35,1)), top var(--mov-rapido,.15s) var(--curva-vaiven,cubic-bezier(.65,0,.35,1)), background var(--mov-rapido,.15s) var(--curva-llegada,cubic-bezier(.16,1,.3,1)), opacity var(--mov-rapido,.15s) var(--curva-llegada,cubic-bezier(.16,1,.3,1));
}
.dv-tick:hover{ background:var(--cream); opacity:1; height:15px; top:11px; }
.dv-tick[aria-current="true"]{ background:var(--qc-disputa); opacity:1; height:19px; top:8px; width:3px; }
.dv-anio{ position:absolute; top:0; transform:translateX(-50%); font-size:.68rem; color:var(--gray);
  font-family:var(--ff-mono); }

/* ----- narración: título y criterio en un solo renglón, la clave de estados al lado ----- */
.dv-fila-narra{ align-items:baseline; gap:.4rem 1.2rem; }
.dv-narra{ margin:0; flex:1 1 420px; min-width:0; line-height:1.4; }
.dv-titulo{ font-family:var(--ff-display); font-size:1.05rem; margin-right:.35rem; }
.dv-clave{ display:flex; gap:.25rem .8rem; flex-wrap:wrap; font-size:.74rem; color:var(--gray); }
.dv-clave > span{ display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.dv-titulo .dv-year{ font-family:var(--ff-mono); font-size:.8rem; color:var(--gray); margin-right:.5rem; }
.dv-criterio{ color:var(--gray); line-height:1.45; }

/* ----- cinta de cambios: una sola fila que se desliza, no un muro de fichas ----- */
.dv-cambios{ flex:1 1 420px; min-width:0; display:flex; align-items:center; gap:.6rem; }
.dv-cambios > .dv-rotulo{ flex:none; }
.dv-cinta{ display:flex; gap:.35rem; flex-wrap:nowrap; align-items:center; overflow-x:auto; min-width:0;
  scrollbar-width:thin; padding-bottom:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent); }
.dv-cinta > *{ flex:none; }
.dv-cinta .dv-nada{ color:var(--gray); font-style:italic; }
.dv-chip{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.76rem;
  border-radius:999px; padding:.14rem .55rem; border:1px solid var(--line);
}
.dv-chip b{ font-weight:500; }
.dv-chip i{ font-style:normal; color:var(--gray); }
.dv-pt{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block; }
.dv-pt[data-e="dentro"]{ background:var(--qc-dentro); }
.dv-pt[data-e="margen"]{ background:var(--qc-margen); }
.dv-pt[data-e="fuera"]{ background:none; border:1.5px solid var(--qc-fuera); }
.dv-pt[data-e="disputa"]{ background:var(--qc-disputa); }
.dv-pt[data-e="nada"]{ background:none; border:1px dashed var(--ink-line); }

/* ----- índice de parpadeo ----- */
.dv-indice{ display:grid; gap:.18rem; max-height:15rem; overflow:auto; padding-right:.2rem; }
.dv-lugar{
  display:grid; grid-template-columns:8.5rem 2rem 1fr; gap:.5rem; align-items:center;
  background:none; border:0; padding:.16rem .25rem; font:inherit; font-size:.78rem;
  text-align:left; cursor:pointer; border-radius:4px; color:var(--cream);
  transition:background var(--mov-rapido,.15s) var(--curva-llegada,cubic-bezier(.16,1,.3,1));
}
.dv-lugar:hover{ background:rgba(226,221,206,.07); }
.dv-lugar[aria-pressed="true"]{ background:rgba(226,221,206,.07); box-shadow:inset 2px 0 0 var(--qc-disputa); }
.dv-nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dv-num{ font-family:var(--ff-mono); color:var(--gray); text-align:right; }
.dv-perfil{ display:flex; gap:1px; height:13px; }
.dv-perfil span{ flex:1 1 auto; border-radius:1px; }
.dv-perfil span[data-e="dentro"]{ background:var(--qc-dentro); }
.dv-perfil span[data-e="margen"]{ background:var(--qc-margen); }
.dv-perfil span[data-e="fuera"]{ background:var(--qc-fuera); opacity:.5; }
.dv-perfil span[data-e="disputa"]{ background:var(--qc-disputa); }
.dv-perfil span[data-e="nada"]{ background:var(--line); }
.dv-perfil span[data-aqui="1"]{ outline:1px solid var(--cream); outline-offset:-1px; }
.dv-rotulo{ font-size:.74rem; color:var(--gray); letter-spacing:.06em; text-transform:uppercase; }
label.dv-rotulo{ position:static; }

/* ----- la pared ----- */
.dv-pared{
  position:fixed; inset:0; z-index:700; overflow:auto;
  padding:calc(1.2rem + env(safe-area-inset-top, 0px)) 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  background:var(--bg-deep); color:var(--cream); font-family:var(--ff-body);
}
.dv-pared[hidden]{ display:none; }
.dv-pared h2{ margin:.2rem 0 .1rem; font-family:var(--ff-display); font-size:1.4rem; font-weight:600; }
.dv-pared .dv-sub{ color:var(--gray); font-size:.85rem; margin:0 0 1.1rem; max-width:56ch; line-height:1.5; }
.dv-rejilla{ display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.dv-card{
  border:1px solid var(--line); border-radius:8px; padding:.5rem; background:none; cursor:pointer;
  color:var(--cream); font:inherit; text-align:left; display:grid; gap:.22rem;
  transition:border-color var(--mov-rapido,.15s) var(--curva-llegada,cubic-bezier(.16,1,.3,1)), transform var(--mov-rapido,.15s) var(--curva-vaiven,cubic-bezier(.65,0,.35,1));
}
.dv-card:hover{ border-color:var(--ink-line); transform:translateY(-2px); }
.dv-card svg{ width:100%; height:auto; display:block; }
.dv-card small{ font-size:.72rem; color:var(--gray); font-family:var(--ff-mono); }
.dv-card strong{ font-family:var(--ff-display); font-size:.95rem; font-weight:600; line-height:1.2; }
.dv-cerrar{ position:absolute; top:calc(1rem + env(safe-area-inset-top, 0px)); right:1rem; }

/* ----- cómo funciona -----
   Una tarjeta centrada sobre el mapa, con los mismos tokens del atlas. Se abre
   sola la primera vez que se enciende la deriva y después solo a petición. */
.dv-guia{ position:fixed; inset:0; z-index:720; display:grid; place-items:center;
  padding:1.2rem; background:rgba(5,6,4,.86); backdrop-filter:blur(3px); }
.dv-guia[hidden]{ display:none; }
.dv-guia-caja{ position:relative; width:100%; max-width:60ch; max-height:84vh; overflow:auto;
  background:var(--bg-deep); border:1px solid var(--line); border-radius:10px;
  padding:1.4rem 1.5rem 1.5rem; color:var(--cream);
  font-family:var(--ff-body); font-size:.88rem; line-height:1.58; }
.dv-guia h2{ margin:.1rem 3.5rem .6rem 0; font-family:var(--ff-display); font-size:1.4rem; font-weight:600; }
.dv-guia h3{ margin:1.05rem 0 .22rem; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold); font-weight:500; font-family:var(--ff-body); }
.dv-guia p{ margin:0; }
.dv-guia b{ font-weight:500; }
.dv-guia .dv-entrada{ color:var(--gray); margin:0 0 .2rem; }
.dv-guia .dv-nota{ color:var(--gray); font-size:.8rem; margin-top:1.1rem;
  border-top:1px solid var(--line); padding-top:.75rem; }
.dv-guia .dv-cierre{ margin-top:1.2rem; }
.dv-guia .dv-pt{ transform:translateY(1px); }

@media (max-width:780px){
  .dv-barra{ max-height:60vh; font-size:.82rem; }
  .dv-lugar{ grid-template-columns:7rem 1.8rem 1fr; }
}

@media (max-width:780px){
  .dv-guia{ padding:.8rem; }
  .dv-guia-caja{ padding:1.1rem 1.1rem 1.2rem; max-height:88vh; }
}


/* =====================================================================
   Lectura limpia (body.dv-modo)
   Mientras la deriva está encendida el mapa muestra lugares, no obras. Lo que
   no sirve para leer el paso se aquieta; nada se borra, y al cerrar la deriva
   el atlas vuelve tal cual estaba.
   ===================================================================== */

/* el mapa se encoge por encima de la barra en lugar de quedar tapado */
body.dv-modo main{ margin-bottom:min(var(--dv-alto,0px), 46vh); overflow:hidden; }
/* al encogerse el mapa, el lugar más al norte (Nueva Orleans) quedaba pegado al
   borde y su rótulo se cortaba: un respiro arriba, dentro del propio lienzo */
body.dv-modo #stage{ box-sizing:border-box; padding-top:22px; overflow:visible; }

/* las obras bajan a polvo: siguen ahí, se pueden pulsar, pero no compiten */
body.dv-modo #stage .node.obra{ opacity:.13; transition:opacity var(--mov-medio,.25s) var(--curva-llegada,cubic-bezier(.16,1,.3,1)); }
body.dv-modo #stage .node.obra:hover, body.dv-modo #stage .node.obra:focus-visible{ opacity:.9; }
/* los hilos y la trama son el argumento del atlas, no el de la deriva */
body.dv-modo #stage .hilos{ opacity:0; }
body.dv-modo #stage .trama{ opacity:.2 !important; }
/* la bruma queda como territorio, no como mancha */
body.dv-modo #stage .qc-bruma{ opacity:.42; }
body.dv-modo #stage .qc-bruma.qc-bruma-referida{ opacity:.26; }
/* aspas y anillos de la capa repiten lo que ahora dice la marca de cada lugar */
body.dv-modo #stage .qc-tacha,
body.dv-modo #stage .qc-anillo.qc-margen,
body.dv-modo #stage .qc-anillo.qc-disputa{ display:none; }
/* rótulos: se nombra lo que la definición nombra; lo que calla, calla */
body.dv-modo #stage .placelbl.qc-l-fuera{ opacity:.34; }
body.dv-modo #stage .placelbl.qc-l-nada{ opacity:0; }

/* una marca por lugar, con la gramática de la guía y de la pared */
.dv-marca{ stroke-width:1.2; vector-effect:non-scaling-stroke; pointer-events:none;
  transform-box:fill-box; transform-origin:center; }
.dv-m-dentro { fill:var(--qc-dentro);  fill-opacity:.95; stroke:var(--bg-deep); stroke-opacity:.9; }
.dv-m-margen { fill:var(--qc-margen);  fill-opacity:.9;  stroke:var(--bg-deep); stroke-opacity:.9; }
.dv-m-disputa{ fill:var(--qc-disputa); fill-opacity:.95; stroke:var(--bg-deep); stroke-opacity:.9; }
.dv-m-fuera  { fill:var(--bg-deep); fill-opacity:.6; stroke:var(--qc-fuera); stroke-width:1.4; }
.dv-m-nada   { fill:none; stroke:var(--gray); stroke-opacity:.45; stroke-dasharray:1.5 2.5; }
/* el lugar que acaba de cambiar llega con un pulso breve; el anillo de la estela marca de dónde viene */
.dv-llega{ animation:dv-llega var(--mov-lento,.72s) var(--curva-llegada,cubic-bezier(.16,1,.3,1)); }
@keyframes dv-llega{ from{ transform:scale(.35); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .dv-llega{ animation:none; } }

/* la columna de fenómenos y el agua se aparta sin desaparecer */
body.dv-modo #clave{ opacity:.3; transition:opacity var(--mov-medio,.25s) var(--curva-llegada,cubic-bezier(.16,1,.3,1)); }
body.dv-modo #clave:hover, body.dv-modo #clave:focus-within{ opacity:1; }
/* la barra y la leyenda de «¿Qué Caribe?» quedaban escondidas bajo la de la deriva:
   la deriva ya lleva sus propios mandos y su clave */
body.dv-modo #qcBarra, body.dv-modo #qcLeyenda{ display:none !important; }

@media (max-width:780px){
  .dv-clave{ display:none; }
  .dv-narra{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .dv-cambios{ flex-wrap:wrap; gap:.3rem; }
  /* en el teléfono los mandos van en una sola fila que se desliza: apilados ocupaban medio mapa */
  .dv-barra > .dv-fila:first-child{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .dv-barra > .dv-fila:first-child::-webkit-scrollbar{ display:none; }
  .dv-barra > .dv-fila:first-child > *{ flex-shrink:0; }
  .dv-barra > .dv-fila:first-child .dv-linea{ flex:0 0 230px; }
}

/* lectura referida: la misma marca, a media voz */
.dv-lugares.dv-referida .dv-marca{ opacity:.5; }
.dv-ref{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:.05rem .45rem; margin-right:.35rem; white-space:nowrap; }
/* rótulo propio para los nodos que todavía no anclan ninguna obra */
.dv-rotulo-lugar{ font-family:var(--ff-mono); fill:var(--gray); letter-spacing:.5px; pointer-events:none;
  paint-order:stroke; stroke:var(--bg-deep); stroke-width:3px; stroke-linejoin:round; }

/* la deriva rotula por su cuenta los nodos sin obras: el rótulo de la capa sobraría */
body.dv-modo #stage .qc-rotulo-vacio{ display:none; }