/* OCÉANO CASINOS — Salas
   Mapa a la izquierda, tarjetas a la derecha. El mapa no decora: las nueve
   salas están sobre unos 900 km y tres de ellas son puertos del mismo río.
   Eso en una grilla no se ve. */

.oc-salas { background: var(--oc-paper-warm); }

.oc-salas__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.oc-salas__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}

/* ── El mapa ───────────────────────────────────────────── */
.oc-mapa {
  position: relative;
  margin: 0;
  align-self: stretch;
}
.oc-mapa__lienzo { position: relative; }
.oc-mapa__svg { width: 100%; height: auto; display: block; overflow: visible; }

.oc-mapa__pais   { fill: var(--oc-card); filter: drop-shadow(0 10px 24px rgba(19, 24, 52, 0.10)); }
.oc-mapa__reticula line { stroke: rgba(19, 24, 52, 0.10); stroke-width: 1; }
.oc-mapa__borde  { fill: none; stroke: rgba(19, 24, 52, 0.28); stroke-width: 1.1; stroke-linejoin: round; }
.oc-mapa__rio    { fill: none; stroke: var(--oc-iso-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }

.oc-mapa__halo   { fill: var(--oc-gold); opacity: 0.16; }
.oc-mapa__nucleo { fill: var(--oc-gold-ink); }

/* Las tres salas del Magdalena laten: es la historia que cuenta el mapa. */
.oc-mapa__pulso {
  fill: none;
  stroke: var(--oc-gold-ink);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.oc-js .is-in .oc-mapa__pulso {
  animation: oc-pulso 3.4s var(--ease-out) infinite;
  animation-delay: var(--delay, 0ms);
}
@keyframes oc-pulso {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.oc-mapa__punto { cursor: default; }
.oc-mapa__nucleo,
.oc-mapa__halo { transition: opacity var(--dur) var(--ease-out); }

/* Resaltado cruzado con las tarjetas */
.oc-salas__layout.is-marcando .oc-mapa__punto { opacity: 0.25; }
.oc-salas__layout.is-marcando .oc-mapa__punto.is-activo { opacity: 1; }
.oc-mapa__punto.is-activo .oc-mapa__halo { opacity: 0.42; }
.oc-mapa__punto { transition: opacity var(--dur) var(--ease-out); }

.oc-mapa__punto.is-apagado { opacity: 0.12; }

/* ── Rótulos ───────────────────────────────────────────── */
/* Van en HTML y no en <text> del SVG: dentro de un viewBox que se escala,
   14 px se convierten en 11 y dejan de cumplir el piso de legibilidad. */
.oc-mapa__rotulos {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.oc-mapa__rotulo {
  position: absolute;
  font-size: var(--text-xs);
  line-height: 1.22;
  color: var(--oc-ink-soft);
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
/* `--dy` separa los rótulos que caen encima de otro: a escala nacional Turbo
   y Apartadó están a ocho píxeles. */
.oc-mapa__rotulo--der {
  transform: translate(0, calc(-50% + var(--dy, 0px)));
  margin-left: 13px;
  text-align: left;
}
.oc-mapa__rotulo--izq {
  transform: translate(-100%, calc(-50% + var(--dy, 0px)));
  margin-left: -13px;
  text-align: right;
}
.oc-mapa__rotulo.is-activo { color: var(--oc-ink); font-weight: 600; }
.oc-salas__layout.is-marcando .oc-mapa__rotulo:not(.is-activo) { opacity: 0.3; }
.oc-mapa__rotulo.is-apagado { opacity: 0.15; }

.oc-mapa__pie {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--oc-ink-faint);
  max-width: 34ch;
}

/* ── Filtros ───────────────────────────────────────────── */
.oc-salas__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.oc-chip {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--oc-line);
  color: var(--oc-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.oc-chip:hover { color: var(--oc-ink); box-shadow: inset 0 0 0 1px var(--oc-ink); }
.oc-chip.is-active {
  background: var(--oc-ink);
  color: var(--oc-paper);
  box-shadow: none;
}

/* ── Tarjetas ──────────────────────────────────────────── */
.oc-salas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.oc-sala {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--oc-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.oc-sala:hover,
.oc-sala.is-activo { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.oc-sala::before {
  content: "";
  position: absolute;
  left: var(--space-6); right: var(--space-6); top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--oc-arc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.oc-sala:hover::before,
.oc-sala.is-activo::before { transform: scaleX(1); }

.oc-sala__zona {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--oc-gold-ink);
}
.oc-sala__nombre {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 36;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-flat);
  color: var(--oc-ink-faint);
}
.oc-sala__nombre strong { display: block; font-weight: 400; color: var(--oc-ink); }

/* La dirección abre Google Maps. Es el único enlace dentro de la tarjeta, y
   la tarjeta entera no lo es: hay tres salas sin dirección y una tarjeta que
   a veces enlaza y a veces no sería una trampa. */
.oc-sala__dir {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: start;
  min-height: 24px;   /* objetivo táctil mínimo, WCAG 2.5.8 */
  color: var(--oc-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: none;
  border-bottom: 1px solid var(--oc-line-soft);
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.oc-sala__dir:hover {
  color: var(--oc-ink);
  border-bottom-color: var(--oc-gold-ink);
}
.oc-sala__pin { flex: none; fill: var(--oc-gold-ink); }

.oc-sala__soc {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--oc-line-soft);
  font-size: var(--text-sm);
  color: var(--oc-ink-faint);
}

.oc-sala[hidden] { display: none; }
.oc-salas__vacio { margin-top: var(--space-7); color: var(--oc-ink-soft); }

/* ── Reparto ───────────────────────────────────────────── */
.oc-js .oc-carta {
  opacity: 0;
  transform: translateY(26px) rotate(-2.4deg);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--i) * 65ms);
}
.oc-js .oc-carta.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .oc-js .oc-carta { opacity: 1; transform: none; }
  .oc-js .is-in .oc-mapa__pulso { animation: none; }
}

@media (max-width: 1000px) {
  .oc-salas__layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .oc-mapa { max-width: 420px; margin-inline: auto; }
  .oc-mapa__pie { margin-inline: auto; text-align: center; max-width: 42ch; }
}

@media (max-width: 860px) {
  .oc-salas__head { grid-template-columns: 1fr; align-items: start; }
  .oc-salas__filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
  .oc-chip { flex: none; }
}