/* assets/css/map.css */

/* Tarjeta que contiene el mapa de amenazas */
.map-card{
  margin-top:1rem;
}

/* Contenedor visual del iframe Fortinet */
.forti-embed{
  position:relative;
  border:1px solid var(--line);
  border-radius:.6rem;
  overflow:hidden;
  background:#000;
}

/* Botón de modo interactivo */
.map-toggle-btn{
  position:absolute;
  top:.75rem;
  right:.75rem;
  z-index:3;
  background:rgba(0,0,0,.6);
  color:var(--acc);
  border:1px solid var(--acc);
  border-radius:.5rem;
  font-size:.7rem;
  font-weight:600;
  line-height:1.2;
  padding:.5rem .6rem;
  cursor:none; /* seguimos sin cursor nativo */
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:
    0 0 8px rgba(0,255,194,.4),
    0 0 30px rgba(0,255,194,.15);
}
.map-toggle-btn:hover,
.map-toggle-btn:focus{
  background:var(--acc);
  color:#001411;
  box-shadow:0 14px 40px rgba(0,255,194,.4);
  outline:none;
}

/* El iframe con el mapa Fortinet */
.forti-embed iframe{
  display:block;
  width:100%;
  height:650px;
  border:0;
  /* cursor:none ya lo forzamos inline en el HTML,
     pero lo repetimos aquí por coherencia */
  cursor:none;
}

/* Capa transparente encima del iframe.
   MODO PROTEGIDO (por defecto):
   - Captura ratón => el dron recibe mousemove, sigue vivo
   - Bloquea clicks en el iframe
   - Controla scroll
*/
.map-guard{
  position:absolute;
  inset:0;
  background:transparent;
  z-index:2;
  cursor:none;
  pointer-events:auto;
}

/* Cuando activamos el modo interactivo,
   quitamos los bloqueos:
   - .forti-embed.interactive hace que .map-guard
     ya no intercepte eventos.
   - El dron se quedará "quieto" cuando entres
     dentro del iframe porque ya no recibimos mousemove.
*/
.forti-embed.interactive .map-guard{
  pointer-events:none;
  /* en este modo el puntero sí entra al iframe,
     pero el iframe tiene cursor:none, así mantenemos
     estética sin cursor del sistema */
}