/**
 * sedes.css — Sección pública "Sedes" (public/sedes.php): mapa de México
 * (app/helpers/mapa-mexico-estados.svg) con la tarjeta de detalle
 * flotando sobre su esquina superior derecha, y la lista de sedes a la
 * derecha del mapa. Al pasar el cursor/tocar un estado coloreado o una
 * fila de la lista se muestra el detalle de esa sede (ver
 * public/js/sedes.js). Reutiliza el mismo lenguaje visual "plano
 * técnico" oscuro de .tarjeta-contacto-info (components.css).
 */

.sedes-grid {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: 2.5rem;
  /* stretch (no "start"): la lista se estira para igualar el alto del
     mapa, que es la columna que manda (ver .sedes-panel/.sedes-lista). */
  align-items: stretch;
}

@media (max-width: 900px) {
  .sedes-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Mapa --- */

.sedes-mapa-tarjeta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radio-borde-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  background: linear-gradient(160deg, var(--color-blueprint), var(--color-primario-oscuro));
  padding: 1.75rem;
}

.sedes-mapa-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(94, 234, 212, 0.12) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(94, 234, 212, 0.12) 0 1px, transparent 1px 40px);
}

.mapa-mexico {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

.mapa-mexico-estado {
  fill: rgba(94, 234, 212, 0.1);
  stroke: rgba(94, 234, 212, 0.4);
  stroke-width: 0.8;
  transition: fill 0.15s ease;
}

.mapa-mexico-estado-activo {
  fill: var(--color-secundario);
  stroke: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.mapa-mexico-estado-activo:hover,
.mapa-mexico-estado-activo:focus-visible,
.mapa-mexico-estado-resaltado {
  fill: #eafbf0;
  outline: none;
}

.sedes-mapa-nota {
  position: relative;
  z-index: 1;
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  text-align: center;
}

/* --- Tarjeta de detalle: flota sobre la esquina superior derecha del
   mapa (no en el panel lateral, para no competirle espacio a la lista
   y dejar el mapa más grande). Fondo oscuro translúcido con desenfoque
   para que el texto siga siendo legible sin importar qué haya debajo
   (mar, estado en verde, estado resaltado en blanco). Empieza vacía en
   el markup (public/sedes.php) y :empty la oculta por completo hasta
   el primer hover/click — así no tapa esa esquina del mapa de entrada. */

.sedes-detalle {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  right: 1.25rem;
  width: min(280px, 48%);
  max-height: calc(100% - 2.5rem);
  overflow-y: auto;
  background-color: rgba(7, 18, 41, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--color-secundario);
  border-radius: var(--radio-borde-tarjeta);
  box-shadow: 0 8px 20px rgba(7, 18, 41, 0.45);
  padding: 1.25rem 1.4rem;
  color: rgba(255, 255, 255, 0.92);
}

.sedes-detalle:empty {
  display: none;
}

.sedes-detalle-estado {
  display: block;
  color: #7fd9a0;
}

.sedes-detalle-nombre {
  margin: 0.25rem 0 1rem;
  font-size: 1.15rem;
  color: #ffffff;
}

.sedes-detalle-datos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sedes-detalle-datos li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.sedes-detalle-datos svg {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  color: #7fd9a0;
}

/* Pantallas angostas: la tarjeta flotante encima del mapa quedaría muy
   apretada, así que vuelve al flujo normal (ancho completo, debajo del
   mapa) en vez de sobreponerse. */
@media (max-width: 640px) {
  .sedes-detalle {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 1.25rem;
  }
}

/* --- Panel lateral: lista de sedes --- */

.sedes-panel {
  display: flex;
  flex-direction: column;
  /* Alto real heredado del grid (align-items: stretch): iguala al del
     mapa. La lista (flex:1 abajo) es la única hija, así que ocupa todo
     ese alto y hace scroll interno si no caben todas las filas. */
  height: 100%;
}

.sedes-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sedes-fila {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 8px;
  background-color: var(--color-fondo);
  padding: 0.75rem 1rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sedes-fila:hover,
.sedes-fila:focus-visible,
.sedes-fila-resaltada {
  border-left-color: var(--color-secundario);
  /* Azul claro sólido (no un overlay traslúcido, que se veía apagado) y
     distinto del tinte de fondo de la sección, para que la selección no
     se pierda visualmente. */
  background-color: #dbe6fb;
  outline: none;
}

.sedes-fila-punto {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--color-secundario);
}

.sedes-fila-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.sedes-fila-texto strong {
  font-size: 0.95rem;
}

.sedes-fila-texto span {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}