/* ================================================================
   archipielago.css — estilos y animaciones del mapa (archipielago.js)
   Las variables --arch-* se pueden cambiar desde la página que lo use.
   ================================================================ */
.arch {
  --arch-mar-1: #E0F8F4;
  --arch-mar-2: #B2EBE4;
  --arch-mar-3: #80DECF;
  --arch-arena: #F3E3BD;
  --arch-tinta: #0B5D63;        /* nombres, escala, barco */
  --arch-avance: #7FD3C3;       /* camino ya recorrido */
  --arch-bien: #2E9E5B;
  --arch-mal: #D9534F;
  --arch-actual: #F6B93B;
  position: relative;
  width: 100%;
}

.arch-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--arch-mar-1), var(--arch-mar-2) 55%, var(--arch-mar-3));
}

.arch-nota {
  margin: 8px 2px 0;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.8;
}
.arch-nota a { color: inherit; }

/* ── Islas ── */
.arch-oleaje {
  fill: none;
  stroke: #fff;
  stroke-width: 12px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: arch-aparecer 0.8s ease calc(var(--retraso) + 1.3s) forwards,
             arch-olas 4s ease-in-out calc(var(--retraso) + 2.1s) infinite;
}
.arch-tierra {
  stroke: none;
  opacity: 0;
  animation: arch-aparecer 0.9s ease calc(var(--retraso) + 1.1s) forwards;
}
/* Mientras se traza, la costa se ve oscura (como un lápiz) y luego queda arena. */
.arch-costa {
  fill: none;
  stroke: var(--arch-tinta);
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: arch-trazar 1.6s ease-in-out var(--retraso) forwards,
             arch-a-arena 0.6s ease calc(var(--retraso) + 1.4s) forwards;
}

/* ── Ruta del barco ── */
.arch-ruta {
  fill: none;
  stroke: var(--arch-tinta);
  stroke-opacity: 0.4;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: arch-aparecer 0.8s ease 1.8s forwards;
}

/* ── Camino y paradas ── */
.arch-camino-sombra,
.arch-camino,
.arch-camino-avance {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arch-camino-sombra {
  stroke: rgba(0, 0, 0, 0.15);
  opacity: 0;
  animation: arch-aparecer 0.6s ease 2.2s forwards;
}
.arch-camino {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: arch-trazar 1.4s ease-in-out 1.9s forwards;
}
.arch-camino-avance {
  stroke: var(--arch-avance);
  transition: stroke-dasharray 0.6s ease;
}
.arch-parada {
  stroke: #fff;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: arch-saltar 0.35s cubic-bezier(.3, 1.6, .5, 1) calc(2.4s + var(--n) * 0.06s) forwards;
  transition: fill 0.3s ease;
}
.arch-parada[data-estado="pendiente"] { fill: #fff; stroke: #9BB8B4; }
.arch-parada[data-estado="bien"] { fill: var(--arch-bien); }
.arch-parada[data-estado="mal"] { fill: var(--arch-mal); }
.arch-parada[data-estado="actual"] {
  fill: var(--arch-actual);
  animation: arch-saltar 0.35s cubic-bezier(.3, 1.6, .5, 1) calc(2.4s + var(--n) * 0.06s) forwards,
             arch-latir 1.4s ease-in-out calc(2.8s + var(--n) * 0.06s) infinite;
}

/* ── Nombres, escala, norte, barco ── */
.arch-nombre {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  fill: var(--arch-tinta);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: arch-aparecer 0.8s ease 1.6s forwards;
}
.arch-escala path {
  fill: none;
  stroke: var(--arch-tinta);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.arch-escala text,
.arch-norte text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  fill: var(--arch-tinta);
}
.arch-norte path { fill: var(--arch-tinta); }
.arch-escala, .arch-norte {
  opacity: 0;
  animation: arch-aparecer 0.8s ease 1.8s forwards;
}
.arch-barco {
  opacity: 0;
  animation: arch-aparecer 0.6s ease 2.4s forwards;
}
.arch-barco-fondo {
  fill: #fff;
  stroke: var(--arch-tinta);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.arch-barco-icono { fill: var(--arch-tinta); }

/* ── Animaciones ── */
@keyframes arch-trazar { to { stroke-dashoffset: 0; } }
@keyframes arch-aparecer { to { opacity: 1; } }
@keyframes arch-a-arena { to { stroke: var(--arch-arena); } }
@keyframes arch-olas { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes arch-saltar { to { transform: scale(1); } }
@keyframes arch-latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* Textos rehechos al cambiar el tamaño: sin repetir la entrada */
.arch-sin-intro * { animation: none !important; opacity: 1 !important; }

/* Sin animaciones si el usuario lo pidió en su sistema */
.arch-quieto *,
.arch-quieto *::before {
  animation: none !important;
}
.arch-quieto .arch-oleaje,
.arch-quieto .arch-tierra,
.arch-quieto .arch-ruta,
.arch-quieto .arch-camino-sombra,
.arch-quieto .arch-nombre,
.arch-quieto .arch-escala,
.arch-quieto .arch-norte,
.arch-quieto .arch-barco { opacity: 1; }
.arch-quieto .arch-costa,
.arch-quieto .arch-camino { stroke-dashoffset: 0; }
.arch-quieto .arch-costa { stroke: var(--arch-arena); }
.arch-quieto .arch-parada { transform: scale(1); }