/* =======================================================================
   MAPA ILUSTRADO CAS. Modulo compartido: este archivo mas shared/js/mapa.js.
   Se monta solo en cualquier <div data-mapa-cas></div> de la pagina.

   Dos temas:
     data-mapa-cas            tema oscuro, el original
     data-mapa-cas="claro"    tema claro, para secciones de fondo blanco

   Los colores de marca salen de brand.css. Los tonos propios del dibujo
   viven aca como tokens --m-*, para que cada pagina los pueda ajustar.
   ======================================================================= */

.mapa-cas {
  /* ---------- tema oscuro ---------- */
  --m-radio: 24px;
  --m-sombra: 0 2px 6px rgba(34, 34, 34, .06), 0 22px 46px rgba(34, 34, 34, .13);

  --m-fondo: #0E1409;          /* el verde de marca llevado casi al negro */
  --m-curva: #4E7A2A;
  --m-curva-suave: #35521D;
  --m-ruta: #2E3A25;
  --m-ruta-linea: #7E8C72;

  --m-deco: #6F9152;           /* vacas y arboles: presentes, nunca protagonistas */
  --m-zona: #9AA694;           /* 7.3:1 sobre el fondo */
  --m-zona-chica: #7F8B79;     /* 5.2:1 sobre el fondo */
  --m-ruta-txt: #A8B5A1;       /* 8.3:1 sobre el fondo */

  --m-pin: var(--verde);
  --m-pin-borde: none;
  --m-pin-aro: var(--verde);
  --m-pulso: var(--verde);
  --m-halo: .22;

  --m-caja: var(--blanco);
  --m-caja-txt: #1E2A14;       /* 15.6:1 sobre la caja */
  --m-caja-sub: #55624B;       /* 6.5:1 sobre la caja */

  --m-boton: rgba(255, 255, 255, .95);
  --m-boton-hover: var(--blanco);
  --m-boton-txt: #1E2A14;
  --m-boton-sombra: 0 8px 24px rgba(0, 0, 0, .35);

  position: relative;
  border: 0;
  border-radius: var(--m-radio);
  overflow: hidden;
  background: var(--m-fondo);
  box-shadow: var(--m-sombra);
  margin-bottom: 2.5rem;
  aspect-ratio: 16 / 9;
}

/* ---------- tema claro ----------
   El verde del manual da 2.3:1 sobre blanco: no puede llevar texto chico.
   Todo el texto va en gris oscuro y el verde queda para pines y trazos. */
.mapa-cas--claro {
  --m-sombra: 0 1px 2px rgba(34, 34, 34, .05), 0 18px 38px -18px rgba(34, 34, 34, .22);

  --m-fondo: var(--blanco);
  --m-curva: #A9D07F;          /* el verde de marca aclarado, solo trazo */
  --m-curva-suave: #C9E2AE;
  --m-ruta: var(--linea);
  --m-ruta-linea: #97A092;

  --m-deco: #97B37A;
  --m-zona: var(--texto-suave);        /* 6.0:1 sobre blanco */
  --m-zona-chica: var(--texto-suave);  /* 6.0:1 sobre blanco */
  --m-ruta-txt: var(--texto-suave);    /* 6.0:1 sobre blanco */

  --m-pin: var(--verde);
  --m-pin-borde: var(--verde-oscuro);  /* el borde da los 3:1 que el relleno no llega */
  --m-pin-aro: var(--verde-oscuro);    /* 3.7:1 sobre blanco */
  --m-pulso: var(--verde);
  --m-halo: .14;

  --m-caja: var(--negro);
  --m-caja-txt: var(--blanco);         /* 15.9:1 sobre la caja */
  --m-caja-sub: #C6CCC1;               /* 9.7:1 sobre la caja */

  --m-boton: var(--negro);
  --m-boton-hover: #3A3E35;
  --m-boton-txt: var(--blanco);
  --m-boton-sombra: 0 8px 22px rgba(34, 34, 34, .18);

  border: 1px solid var(--linea);
}

@media (max-width: 700px) { .mapa-cas { aspect-ratio: 4 / 5; } }

.mapa-cas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mapa-cas .m-fondo { fill: var(--m-fondo); }
.mapa-cas .m-halo-a { stop-color: var(--m-pulso); stop-opacity: var(--m-halo); }
.mapa-cas .m-halo-b { stop-color: var(--m-pulso); stop-opacity: 0; }
.mapa-cas .m-curva { fill: none; stroke: var(--m-curva); stroke-width: 1.2; opacity: .42; }
.mapa-cas .m-curva-suave { stroke: var(--m-curva-suave); opacity: .5; }
.mapa-cas .m-ruta { fill: none; stroke: var(--m-ruta); stroke-width: 9; stroke-linecap: round; }
.mapa-cas .m-ruta-linea { fill: none; stroke: var(--m-ruta-linea); stroke-width: 1.6; stroke-dasharray: 10 9; stroke-linecap: round; opacity: .75; }
.mapa-cas .m-ruta-menor { stroke-width: 6; }
/* ---------- el campo: vacas, monte y pasto ---------- */
.mapa-cas .m-deco-relleno { fill: var(--m-deco); }
.mapa-cas .m-deco-hueco { fill: var(--m-fondo); }
.mapa-cas .m-deco { opacity: .62; }

.mapa-cas .m-zona { fill: var(--m-zona); font-size: 14px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.mapa-cas .m-zona-chica { font-size: 11.5px; letter-spacing: .3em; fill: var(--m-zona-chica); }
.mapa-cas .m-ruta-txt { fill: var(--m-ruta-txt); font-size: 12px; font-weight: 700; letter-spacing: .3em; }
.mapa-cas .m-pin-punto { fill: var(--m-pin); stroke: var(--m-pin-borde); stroke-width: 2; }
.mapa-cas .m-pin-aro { fill: none; stroke: var(--m-pin-aro); stroke-width: 2; }
.mapa-cas .m-pulso { fill: var(--m-pulso); opacity: .28; transform-origin: center; transform-box: fill-box; }
.mapa-cas .m-etiqueta-caja { fill: var(--m-caja); }
.mapa-cas .m-etiqueta-txt { fill: var(--m-caja-txt); font-size: 17px; font-weight: 700; }
.mapa-cas .m-etiqueta-sub { fill: var(--m-caja-sub); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; }
.mapa-cas .m-pin { transform-origin: center; transform-box: fill-box; }
/* Punto de origen: sigue en el mapa como referencia, pero ya no es una sede */
.mapa-cas .m-pin--viejo .m-pin-aro { stroke-width: 2; stroke-dasharray: 4 4; opacity: .6; }
.mapa-cas .m-etiqueta--vieja .m-etiqueta-caja { fill: none; }
.mapa-cas .m-etiqueta--vieja .m-etiqueta-txt { fill: var(--m-zona); font-weight: 700; }
.mapa-cas .m-etiqueta--vieja .m-etiqueta-sub { fill: var(--m-zona); opacity: .75; }

.mapa-botones {
  position: absolute; left: clamp(1rem, 2.2vw, 1.6rem); right: clamp(1rem, 2.2vw, 1.6rem);
  bottom: clamp(1rem, 2.2vw, 1.6rem);
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.mapa-boton {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--m-boton); color: var(--m-boton-txt); text-decoration: none;
  font-weight: 700; font-size: .92rem; border-radius: 999px; padding: .65rem 1.15rem;
  box-shadow: var(--m-boton-sombra); transition: transform .25s ease, background .25s ease;
}
.mapa-boton:hover { background: var(--m-boton-hover); transform: translateY(-2px); }
.mapa-boton:focus-visible { outline: 2px solid var(--m-pin-aro); outline-offset: 3px; }
.mapa-boton svg { position: static; width: 16px; height: 16px; flex: none; }
@media (max-width: 700px) { .mapa-boton { font-size: .82rem; padding: .55rem .95rem; gap: .45rem; } }

/* Animaciones del mapa. Arrancan cuando el JS agrega .m-vivo */
.mapa-cas .m-curva { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mapa-cas.m-vivo .m-curva { animation: m-dibujar 2.4s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes m-dibujar { to { stroke-dashoffset: 0; } }

.mapa-cas .m-pin { opacity: 0; }
.mapa-cas.m-vivo .m-pin { animation: m-caer .9s cubic-bezier(.2,1.5,.5,1) .55s forwards; }
@keyframes m-caer { 0% { opacity: 0; transform: translateY(-26px) scale(.85); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }

.mapa-cas .m-deco { opacity: 0; }
.mapa-cas.m-vivo .m-deco { animation: m-brotar 1s cubic-bezier(.2,.9,.3,1) forwards; }
/* La copa y la cola se mueven despacio, como si corriera aire */
.mapa-cas .m-deco-copa, .mapa-cas .m-deco-cola { transform-box: fill-box; }
.mapa-cas.m-vivo .m-deco-copa { transform-origin: 50% 100%; animation: m-mecer 7s ease-in-out infinite; }
.mapa-cas.m-vivo .m-deco-cola { transform-origin: 0 0; animation: m-mecer 4.5s ease-in-out infinite .8s; }
/* Solo opacidad: el transform del grupo lo usa el SVG para ubicar la figura */
@keyframes m-brotar { from { opacity: 0; } to { opacity: .62; } }
@keyframes m-mecer { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.mapa-cas .m-etiqueta { opacity: 0; }
.mapa-cas.m-vivo .m-etiqueta { animation: m-aparecer .7s ease-out 1.1s forwards; }
@keyframes m-aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.mapa-cas.m-vivo .m-pulso { animation: m-latir 3.4s ease-out infinite; }
.mapa-cas.m-vivo .m-pulso-2 { animation-delay: 1.7s; }
@keyframes m-latir { 0% { transform: scale(.4); opacity: .38; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }

.mapa-cas .m-zona, .mapa-cas .m-ruta-txt { opacity: 0; }
.mapa-cas.m-vivo .m-zona, .mapa-cas.m-vivo .m-ruta-txt { animation: m-aparecer .8s ease-out .9s forwards; }

/* Sin dibujado, sin rebote y sin pulso: todo visible de entrada */
@media (prefers-reduced-motion: reduce) {
  .mapa-cas .m-curva { stroke-dasharray: none; stroke-dashoffset: 0; }
  .mapa-cas .m-pin, .mapa-cas .m-etiqueta, .mapa-cas .m-zona, .mapa-cas .m-ruta-txt { opacity: 1; }
  .mapa-cas .m-deco { opacity: .92; }
  .mapa-cas.m-vivo .m-curva, .mapa-cas.m-vivo .m-pin, .mapa-cas.m-vivo .m-etiqueta,
  .mapa-cas.m-vivo .m-pulso, .mapa-cas.m-vivo .m-zona, .mapa-cas.m-vivo .m-ruta-txt,
  .mapa-cas.m-vivo .m-deco, .mapa-cas.m-vivo .m-deco-copa, .mapa-cas.m-vivo .m-deco-cola { animation: none; }
  .mapa-cas .m-pulso { opacity: .2; }
  .mapa-boton { transition: none; }
  .mapa-boton:hover { transform: none; }
}