.mapa-page {
  padding: 32px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   Barra de campus (ficha IU-003)
   -----------------------------------------------------------------------------
   El mapa dibuja un campus por vez y esto es lo que lo elige. Son enlaces y no
   un desplegable con JavaScript: cada campus queda en su propia URL, se puede
   compartir y el botón «atrás» vuelve al anterior.

   El seleccionado no se distingue solo por el color de fondo: lleva
   `aria-current="page"` y peso tipográfico propio, que es lo que pide
   RNF-USA-002 (#24) —el estado nunca se comunica únicamente con color—.
-------------------------------------------------------------------------------- */

.mapa-campus-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.mapa-campus-tab {
  padding: 8px 16px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  font-weight: 500;
  color: #4A4A68;
  text-decoration: none;
}

.mapa-campus-tab:hover {
  background: #F2F4F9;
}

.mapa-campus-tab--activo {
  background: #14306B;
  color: white;
  font-weight: 600;
}

.mapa-campus-tab:focus-visible {
  outline: 3px solid #1A237E;
  outline-offset: 2px;
}

.mapa-main-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  margin-bottom: 24px;
  /* Cada tarjeta con su alto natural: el lienzo lo fija su relación de aspecto
     y la barra lateral su contenido. Estirarlas a la más alta dejaba media
     tarjeta en blanco bajo el mapa. */
  align-items: start;
}

.mapa-map-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  /* Sin recorte: el globo de detalle del marcador se sale del lienzo hacia
     arriba, y con `overflow: hidden` la tarjeta lo cortaba. El aspecto
     redondeado del mapa lo da `.mapa-lienzo-fondo`, que sí se recorta. */
  overflow: visible;
  /* Un marco blanco alrededor del lienzo. Hace falta porque el lienzo toma la
     forma del campus y rara vez coincide con la de la tarjeta: sin el marco, el
     blanco sobrante se lee como un hueco y con él, como el paspartú de un
     cuadro. */
  padding: 16px;
}

.mapa-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 420px;
  padding: 48px 32px;
  text-align: center;
  gap: 12px;
}

.mapa-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 8px 0 0;
}

.mapa-empty-desc {
  font-size: 14px;
  color: #8E8EA0;
  max-width: 360px;
  line-height: 1.6;
  margin: 0;
}

.mapa-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mapa-legend-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 20px;
}

.mapa-legend-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 0 0 16px;
}

.mapa-legend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mapa-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mapa-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mapa-legend-label {
  font-size: 14px;
  font-weight: 500;
  color: #4A4A68;
}

.mapa-devices-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 20px;
  flex: 1;
}

.mapa-devices-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 0 0 16px;
}

.mapa-devices-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  gap: 8px;
}

.mapa-devices-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 8px 0 0;
}

.mapa-devices-empty-desc {
  font-size: 13px;
  color: #8E8EA0;
  line-height: 1.5;
  margin: 0;
}

.mapa-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mapa-summary-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mapa-summary-value {
  font-size: 28px;
  font-weight: 700;
  color: #1A1A2E;
}

.mapa-summary-label {
  font-size: 13px;
  color: #8E8EA0;
  font-weight: 500;
}


/* -----------------------------------------------------------------------------
   El lienzo del mapa (ficha IU-003)
   -----------------------------------------------------------------------------
   No hay librería de cartografía: `Eco\Cartografia` proyecta la latitud y la
   longitud de cada dispositivo a un porcentaje, y aquí se posicionan sobre un
   rectángulo de proporción fija. El porqué de no usar Leaflet está escrito en
   esa clase.

   `aspect-ratio` repite la constante RELACION de la proyección. Las dos tienen
   que decir lo mismo: si el lienzo se dibujara con otra proporción, la escala
   común que reparte la proyección entre los dos ejes dejaría de proteger las
   distancias y el mapa saldría estirado.
-------------------------------------------------------------------------------- */

.mapa-lienzo {
  position: relative;
  /* La forma la fija el campus dibujado: la vista pasa `--relacion` con lo que
     devolvió `Cartografia::proyectar()`. El 1.65 de reserva es la del mockup,
     por si algún día se pinta el lienzo sin esa variable. */
  aspect-ratio: var(--relacion, 1.65);
  /* El tope de alto y el `max-width` que lo acompaña trabajan juntos: sin el
     segundo, un campus más alto que ancho daría un lienzo de 800 × 700 y
     empujaría el resumen fuera de la pantalla. Con los dos, el mapa se estrecha
     hasta caber en 520 px de alto y queda centrado en la tarjeta —el campus lo
     llena de borde a borde, que es el punto, y la página no crece—. */
  max-width: calc(470px * var(--relacion, 1.65));
  max-height: 470px;
  margin: 0 auto;
}

/* El fondo va en un elemento propio, y no en `.mapa-lienzo`, porque es lo único
   que se recorta: así los marcadores y sus globos pueden salirse del borde sin
   que el redondeo los corte. */
.mapa-lienzo-fondo {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background-color: #EDF1F7;
  /* Retícula de referencia. Es decoración declarada como tal: no representa
     calles ni edificios de la Universidad, que no están en los datos. Lo único
     que dice el mapa sobre el terreno es dónde está cada dispositivo. */
  background-image:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 56px);
}

.mapa-zona {
  position: absolute;
  border-radius: 14px;
  background: rgba(46, 125, 50, 0.1);
  border: 1px dashed rgba(46, 125, 50, 0.35);
}

/* El rótulo va *sobre* la zona y no dentro: una zona con un solo dispositivo
   mide lo que la holgura le da, y un nombre como «Campus Ignacio Domeyko»
   dentro de ese cuadrado se monta encima de su propio marcador. */
.mapa-zona-nombre {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  /* Verde muy oscuro sobre el fondo claro: 8,9:1, por encima del 4,5:1 que
     exige WCAG 2.1 AA (SRS §2.5.8). */
  color: #1B4B1E;
  text-shadow: 0 0 3px #EDF1F7, 0 0 3px #EDF1F7;
}

/* -----------------------------------------------------------------------------
   Marcadores
   -----------------------------------------------------------------------------
   Cada marcador es un enlace de lectura a la ficha del dispositivo. No se
   arrastra ni se crea desde aquí: la posición se administra en Gestión de
   Dispositivos (ficha IU-003).

   Es un `<a>` y no un `<div>` con un `click` justamente para no escribir
   JavaScript: el navegador ya le da foco con el tabulador, lo activa con Enter
   y lo abre en otra pestaña con el clic central.
-------------------------------------------------------------------------------- */

.mapa-punto {
  position: absolute;
  /* `left`/`top` los pone la vista en porcentaje; la traslación corrige el
     punto de anclaje para que el centro del círculo caiga en la coordenada y
     no su esquina superior izquierda. */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  z-index: 1;
}

.mapa-punto-marca {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease-out;
}

.mapa-punto-rotulo {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1A1A2E;
  /* Halo blanco: el rótulo cae sobre la mancha del campus o sobre la retícula,
     y sin él pierde contraste justo encima de una línea. */
  text-shadow: 0 0 3px white, 0 0 3px white;
  white-space: nowrap;
}

/* Los cuatro estados de RF-DIS-001, con la paleta de las insignias del listado
   (`Devices.css`). El color no informa solo: el estado va escrito en el globo,
   en el nombre accesible del enlace y en la insignia del listado lateral. */
.mapa-punto--online .mapa-punto-marca { background: #2E7D32; }
.mapa-punto--alert .mapa-punto-marca { background: #E65100; }
.mapa-punto--offline .mapa-punto-marca { background: #C62828; }
.mapa-punto--degraded .mapa-punto-marca { background: #6A1B9A; }

.mapa-punto:hover,
.mapa-punto:focus-visible {
  /* Por encima de los vecinos: dos marcadores próximos se solapan, y el globo
     del que se está mirando tiene que quedar entero y encima. */
  z-index: 3;
}

.mapa-punto:hover .mapa-punto-marca,
.mapa-punto:focus-visible .mapa-punto-marca {
  transform: scale(1.25);
}

.mapa-punto:focus-visible {
  outline: 3px solid #1A237E;
  outline-offset: 4px;
  border-radius: 8px;
}

/* -----------------------------------------------------------------------------
   Globo de detalle
   -----------------------------------------------------------------------------
   Aparece con el puntero y **también con el foco del teclado**: la ficha exige
   que los marcadores sean accesibles por teclado, y un detalle que solo el
   ratón puede abrir no lo es.

   `visibility` acompaña a `opacity` para que el globo oculto no reciba el
   puntero. Su contenido está duplicado en el `aria-label` del enlace, así que
   va marcado `aria-hidden`: sin eso, un lector de pantalla leería el nombre del
   dispositivo dos veces.
-------------------------------------------------------------------------------- */

.mapa-punto-globo {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-out;
}

.mapa-punto:hover .mapa-punto-globo,
.mapa-punto:focus-visible .mapa-punto-globo {
  opacity: 1;
  visibility: visible;
}

.mapa-punto-nombre {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
  white-space: nowrap;
}

.mapa-punto-datos {
  font-size: 12px;
  color: #5A5A72;
  white-space: nowrap;
}

/* Aviso al pie del mapa cuando hay dispositivos que no se pudieron ubicar. La
   ficha exige que no desaparezcan sin decirlo. */
.mapa-lienzo-pie {
  margin: 0;
  padding: 14px 20px 16px;
  font-size: 13px;
  color: #5A5A72;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   Leyenda y listado lateral
-------------------------------------------------------------------------------- */

.mapa-legend-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* #6B6B80 y no el #8E8EA0 del resto de la aplicación: ese gris da 3,2:1
     sobre blanco y el criterio de accesibilidad del SRS (§2.5.8, WCAG 2.1 AA)
     pide 4,5:1. Este da 5,2:1. Se aplica solo a lo que esta ficha introduce;
     revisar los grises heredados es RNF-USA-001 (#23). */
  color: #6B6B80;
  margin: 0 0 10px;
}

.mapa-legend-group + .mapa-legend-list {
  margin-bottom: 18px;
}

.mapa-legend-list:last-child {
  margin-bottom: 0;
}

.mapa-legend-list + .mapa-legend-group {
  margin-top: 0;
}

/* La misma inicial que `Cartografia` pone bajo cada marcador, para que la
   leyenda explique un signo que se ve en el mapa y no uno inventado aquí. */
.mapa-legend-inicial {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #1A1A2E;
}

/* -----------------------------------------------------------------------------
   El listado lateral
   -----------------------------------------------------------------------------
   Es la alternativa textual obligatoria de la ficha, no un adorno, y por eso
   entra entero: alto máximo con desplazamiento propio, para que ningún
   dispositivo del campus quede fuera ni la página se estire por debajo del
   mapa.

   Los márgenes de `.eco-lista-item` se recortan porque vienen dimensionados
   para una tarjeta ancha —eran los de la vista anterior, donde el listado
   ocupaba todo el centro—: con ellos, en 300 px de barra lateral el nombre del
   dispositivo se parte en dos líneas.
-------------------------------------------------------------------------------- */

.mapa-devices-lista {
  max-height: 250px;
  overflow-y: auto;
}

.mapa-devices-card .eco-lista-item--enlace .eco-lista-enlace {
  padding: 8px 6px;
  gap: 2px 10px;
  border-radius: 8px;
}

.mapa-devices-card .eco-lista-item {
  border-top: none;
}

.mapa-devices-card .eco-lista-principal {
  font-weight: 600;
}

.mapa-devices-card .eco-lista-secundario {
  color: #6B6B80;
}

.mapa-devices-card .status-badge {
  padding: 3px 9px;
  font-size: 11px;
  white-space: nowrap;
  /* A la derecha y a caballo de las dos filas, como en el mockup: el nombre y
     su ubicación forman la columna izquierda y el estado queda enfrentado a
     los dos. Sin esto la insignia cae debajo del nombre y cada fila del
     listado ocupa el doble de alto. */
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}

.mapa-devices-vacio {
  font-size: 13px;
  color: #6B6B80;
  margin: 0;
}

/* Marca del dispositivo que está registrado pero no aparece sobre el mapa. */
.mapa-sin-ubicar {
  color: #6B6B80;
  font-style: italic;
}