/* Pegamento de layout, y nada más.
   Regla del proyecto: acá NO hay vidrio, ni colores, ni sombras propias. Sólo posición y
   tamaño. Todo lo visual sale de los componentes de Vidrio o de sus tokens citados por
   nombre (var(--v-…)), jamás por valor. */

body { margin: 0; min-height: 100vh; }

/* La columna de navegación de la consola. En móvil desaparece: manda el conmutador
   de vistas de la cabecera, que es el mismo control. */
.sp-lateral { width: 254px; flex: 0 0 254px; }   /* 232 + los 22px que suma el icono del NavItem: sin esto «Comando de incidentes» se recortaba */
@media (max-width: 900px) { .sp-lateral { display: none; } }

/* El conmutador se puede desbordar horizontalmente antes que romper la línea. */
.sp-tabs { overflow-x: auto; }

/* El mapa NO es una tarjeta: es el fondo de toda la consola.
   Lo pinta `VidrioRoot background=…`, que con `fullHeight` clava su `.v-root__bg` en
   `position: fixed; inset: 0`. Es la misma geometría que `.omap.ops-bg` en la consola
   municipal — mapa abajo, todo lo demás flotando encima. Y como cada superficie de
   Vidrio repinta la escena adentro de sí (`.v-glass__photo`), los paneles refractan el
   mapa de verdad en vez de un degradado inventado.

   La capa de marcas es el otro pedazo: va clavada al viewport igual que el fondo, por
   debajo del contenido, y en escritorio arranca donde termina el riel de paneles para
   que las marcas caigan sobre mapa despejado y no bajo un panel opaco. */
.sp-capa-mapa { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sp-sobre-mapa { position: relative; z-index: 1; }

/* En móvil el mapa se queda de fondo pero las marcas se van: los paneles apilados ocupan
   el ancho entero y las marcas sólo asoman entre tarjeta y tarjeta, que se lee como
   suciedad. La cola escrita del panel sigue diciendo lo mismo, y mejor. */
@media (max-width: 900px) { .sp-capa-mapa { display: none; } }

/* Riel y banda son el mismo acuerdo visto desde los dos lados: el contenido de la vista
   A se angosta a un riel y la capa de marcas arranca justo después. Los dos cortes están
   calculados contra `.v-container--lg` (máx. 1180px, centrado) más el lateral de 232px. */
@media (min-width: 901px)  { .sp-riel { max-width: 430px; } .sp-capa-mapa { left: 74%; } }
@media (min-width: 1280px) { .sp-capa-mapa { left: 58%; } }
.sp-marca { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }

/* Centro del recuadro de video mediado. */
.sp-video { display: flex; align-items: center; justify-content: center; height: 100%; }