/* Armazón: barra superior, barra lateral de módulos y área de trabajo. */
#app {
  display: grid;
  grid-template-columns: var(--lateral-ancho) 1fr;
  grid-template-rows: var(--topbar-alto) 1fr;
  grid-template-areas: "topbar topbar" "lateral trabajo";
  height: 100vh;
  transition: grid-template-columns 0.18s ease;
}
#app.plegado { grid-template-columns: var(--lateral-plegado) 1fr; }

/* -- barra superior ------------------------------------------------------ */
#topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
  z-index: 20;
}

.marca { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.marca-icono { font-size: 22px; color: var(--acento); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-size: 14px; }
.marca-texto small { color: var(--texto-3); font-size: 11px; }

.campo-estacion { display: flex; align-items: center; gap: 8px; }
.campo-estacion > span { color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.campo-estacion select {
  background: var(--fondo-3);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 6px 10px;
  min-width: 150px;
}

.reloj { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.reloj-hora { font-family: var(--mono); font-size: 19px; letter-spacing: 0.04em; }
.reloj-etiqueta { color: var(--texto-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; }

.controles-tiempo { display: flex; align-items: center; gap: 8px; }
/* El atributo hidden tiene que ganar a los display de arriba: si no, los
   botones de velocidad seguían saliendo en tiempo real. */
[hidden] { display: none !important; }
.controles-tiempo button,
.velocidades button {
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 5px 9px;
  cursor: pointer;
  color: var(--texto-2);
}
.controles-tiempo button:hover, .velocidades button:hover { border-color: var(--acento-apagado); color: var(--texto); }
.velocidades { display: flex; gap: 4px; }
.velocidades button.activa { background: var(--acento-apagado); border-color: var(--acento); color: #fff; }

.conexion { display: flex; align-items: center; gap: 7px; color: var(--texto-3); font-size: 11px; }
.conexion .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.conexion.viva .punto { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.conexion.viva .texto { color: var(--ok); }
.conexion.caida .punto { background: var(--alerta); }
.conexion.caida .texto { color: var(--alerta); }

.usuario { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); }
.usuario[hidden] { display: none; }
.usuario button {
  padding: 3px 9px; border-radius: 5px; border: 1px solid var(--borde);
  background: transparent; color: var(--texto-2); cursor: pointer; font-size: 11px;
}

/* -- barra lateral ------------------------------------------------------- */
#lateral {
  grid-area: lateral;
  display: flex;
  flex-direction: column;
  background: var(--fondo-2);
  border-right: 1px solid var(--borde);
  overflow: hidden;
  z-index: 15;
}

#menu-modulos { flex: 1; overflow-y: auto; padding: 10px 0 16px; }

.grupo-titulo {
  padding: 14px 16px 6px;
  color: var(--texto-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#app.plegado .grupo-titulo { opacity: 0; height: 18px; padding: 6px 0 0; }

.item-modulo {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--texto-2);
  border-left: 3px solid transparent;
}
.item-modulo:hover { background: var(--fondo-3); color: var(--texto); }
.item-modulo.activo {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.14), transparent);
  border-left-color: var(--acento);
  color: #fff;
}
.item-modulo .icono { width: 20px; text-align: center; font-size: 15px; flex: 0 0 20px; }
.item-modulo .nombre { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-modulo .marca-estado { font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); }
.item-modulo.bloqueado { color: var(--texto-3); }
.item-modulo.bloqueado .nombre { opacity: 0.75; }
#app.plegado .item-modulo .nombre,
#app.plegado .item-modulo .marca-estado { display: none; }

.pie-lateral {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-3);
  font-size: 10px;
}
.pie-lateral button {
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  width: 26px; height: 24px;
  cursor: pointer;
  color: var(--texto-2);
}
#app.plegado .pie-lateral span { display: none; }

/* -- área de trabajo ----------------------------------------------------- */
#trabajo { grid-area: trabajo; position: relative; overflow: hidden; }

#lienzo { position: absolute; inset: 0; background: #0d1b2a; }

/* El panel flota sobre el mapa: no captura el ratón salvo en sus hijos, para
   que se pueda seguir girando el mapa por los huecos. */
#panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  padding: 14px;
  gap: 12px;
  overflow: hidden;
}
#panel > * { pointer-events: auto; }
/* La fila de paneles ocupa toda el área: si captura el ratón tapa el mapa y no
   se puede mover, rotar ni acercar. Solo deben capturarlo las tarjetas. */
#panel > .fila-paneles { pointer-events: none; }
#panel > .fila-paneles > * { pointer-events: auto; }

/* Módulos que no usan el mapa: ocupan todo y hacen scroll. */
#trabajo.sin-mapa #lienzo { visibility: hidden; }
#trabajo.sin-mapa #panel { background: var(--fondo); overflow-y: auto; pointer-events: auto; }

.cargando {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(11, 16, 22, 0.92);
  transition: opacity 0.25s ease;
}
.cargando[hidden] { display: none; }
.cargando-caja { width: 280px; text-align: center; color: var(--texto-2); }
.cargando-barra { height: 3px; background: var(--borde); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.cargando-barra i {
  display: block; height: 100%; width: 40%;
  background: var(--acento);
  animation: avance 1.1s ease-in-out infinite;
}
@keyframes avance {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}