/* =====================================================================
   WERP · Base: reset, estructura y responsive
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-ui);
  font-size: var(--t-14);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--f-titulos); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--t-22); font-weight: 700; }
h2 { font-size: var(--t-18); font-weight: 700; }
h3 { font-size: var(--t-15); font-weight: 500; }
p  { margin: 0; }

a { color: var(--laton); text-decoration: none; }
a:hover { color: var(--laton-claro); }

img, svg { display: block; }

::selection { background: var(--laton); color: var(--laton-tinta); }

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: #D6D0C2 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #D6D0C2; border-radius: 6px; border: 2px solid var(--fondo); }
*::-webkit-scrollbar-track { background: transparent; }

/* Foco visible con teclado (accesibilidad) */
:focus-visible { outline: 2px solid var(--laton-oscuro); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   Pantalla de arranque
   --------------------------------------------------------------------- */
.arranque {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--e-3);
}
.arranque-logo { width: 180px; height: auto; }
.arranque-texto { color: var(--texto-mudo); font-size: var(--t-13); }

/* ---------------------------------------------------------------------
   Estructura general: lateral + principal
   --------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--ancho-lateral) 1fr;
  min-height: 100vh;
}

.lateral {
  background: var(--lateral-fondo);
  border-right: 1px solid var(--linea);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.lateral-marca {
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-bottom: 1px solid var(--linea-suave);
}
.marca-logo { width: 150px; height: auto; }
.marca-sub {
  margin-top: 8px;
  font-family: var(--f-datos); font-size: 10px; letter-spacing: 0.18em;
  color: var(--laton-texto); text-transform: uppercase;
}
/* Firma de marca: hilo de latón bajo el logotipo */
.lateral-marca::after {
  content: ""; display: block; height: 2px; margin-top: var(--e-4);
  background: var(--hilo-laton); border-radius: 2px;
}

.lateral-nav { flex: 1; overflow-y: auto; padding: var(--e-3) var(--e-3) var(--e-5); }

.nav-grupo {
  margin: var(--e-5) var(--e-2) var(--e-2);
  font-family: var(--f-datos); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texto-mudo);
}
.nav-item {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; padding: 9px var(--e-3); margin: 2px 0;
  border: 0; border-radius: var(--radio-sm);
  background: transparent; color: var(--texto-suave);
  font: inherit; text-align: left; cursor: pointer;
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav-item:hover { background: var(--superficie-2); color: var(--texto); }
.nav-item.activo {
  background: var(--laton-velo); color: var(--laton-texto);
  box-shadow: inset 2px 0 0 var(--laton);
}
.nav-item.proximo { cursor: default; color: var(--texto-mudo); }
.nav-item.proximo:hover { background: transparent; color: var(--texto-mudo); }
.nav-item .prox-badge {
  margin-left: auto; font-family: var(--f-datos); font-size: 9px;
  letter-spacing: .08em; color: var(--texto-mudo);
  border: 1px solid var(--linea); border-radius: 4px; padding: 1px 5px;
}

.lateral-pie {
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--linea-suave);
  font-family: var(--f-datos); font-size: 11px; color: var(--texto-mudo);
}
/* LA MARCA DE PRUEBAS (D-130). En rojo y con fondo, no en gris como el
   resto del pie: tiene que verse sin buscarla. Solo sale en las
   direcciones de pruebas, así que en producción esta regla no pinta
   nada. */
.marca-pruebas {
  display: inline-block;
  padding: 0 5px; border-radius: 3px;
  background: var(--peligro, #b3261e); color: #fff;
  font-weight: 700; letter-spacing: .08em;
}

/* --- Zona principal --- */
.principal { display: flex; flex-direction: column; min-width: 0; }

.superior {
  height: var(--alto-superior);
  display: flex; align-items: center; gap: var(--e-4);
  padding: 0 var(--e-6);
  border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(8px);
}
.superior-titulo { font-family: var(--f-titulos); font-weight: 500; color: var(--texto-suave); }
.superior-derecha { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }
.superior-correo { color: var(--texto-suave); font-size: var(--t-13); }

.vista { flex: 1; padding: var(--e-6); min-width: 0; }
/* MENSAJES ARRANCA MÁS ARRIBA (v0.63.0). La zona de contenido deja 24 px
   por encima del título en todos los módulos, y está bien: un título
   pegado a la barra de arriba se lee mal. En Mensajes ese hueco no lo usa
   nadie —la pantalla entera está peleando por el alto— y Javier pidió
   subirlo. Doce píxeles, que siguen separando, y otros doce que se lleva
   la lista de conversaciones.
   La marca la pone el módulo al montarse y **la quita el chasis** en cada
   cambio de pantalla, como `vista-a-medida`. */
.vista.vista-mensajes { padding-top: var(--e-3); }

/* ---------------------------------------------------------------------
   UNA PANTALLA QUE NO HACE SCROLL, PORQUE LO HACEN SUS PARTES (v0.54.0)
   ---------------------------------------------------------------------
   La pone el módulo que la necesita —hoy solo Mensajes— y se la quita al
   salir. Lo que hace es dos cosas: decirle a la zona de contenido que
   mide EXACTAMENTE lo que queda de pantalla debajo de la barra de
   arriba, y que no desborda. A partir de ahí, quien tiene que hacer
   scroll lo pide para sí mismo.

   `dvh` y no `vh`: en el móvil la barra del navegador aparece y
   desaparece, y con `vh` el borde de abajo se queda debajo de ella —lo
   último de la lista no se puede tocar nunca—.

   `min-height: 0` en la sección hace el trabajo de verdad y es la parte
   que se olvida siempre: sin eso, un hijo con contenido largo dentro de
   un flex se niega a encogerse por debajo de su contenido, el alto que
   se acaba de fijar se desborda por abajo y volvemos al principio. --- */
.vista.vista-a-medida {
  /* `flex: none` NO ES DECORACIÓN, ES LA LÍNEA QUE HACE QUE ESTO
     FUNCIONE, y la primera versión de este arreglo se la dejó fuera. La
     zona de contenido vive dentro de un flex en columna con `flex: 1`, o
     sea `flex-basis: 0`, y en un flex la base MANDA SOBRE `height`: el
     alto que se acaba de escribir aquí se ignoraba entero, la caja
     crecía con su contenido hasta 3.000 píxeles y el documento seguía
     haciendo scroll exactamente igual que antes. Se veía idéntico en el
     código y no arreglaba nada.

     Lo pilló `comprobar-scroll-mensajes.mjs` a la primera. Es la razón
     de que esa comprobación exista: un reparto de altos no se puede leer,
     hay que medirlo en un navegador. */
  flex: none;
  height: calc(100dvh - var(--alto-superior));
  overflow: hidden;
  display: flex; flex-direction: column;
}
.vista.vista-a-medida > * { min-height: 0; flex: 1; display: flex; flex-direction: column; }

/* Cabecera estándar de módulo: "placa" con código grabado */
.modulo-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-5);
}
.placa-codigo {
  font-family: var(--f-datos); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; color: var(--laton-texto); text-transform: uppercase;
  margin-bottom: var(--e-1);
}
.modulo-sub { color: var(--texto-mudo); font-size: var(--t-13); margin-top: 3px; }
.modulo-acciones { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Responsive: móvil y tableta
   --------------------------------------------------------------------- */
.velo-movil {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(35, 30, 20, .35); backdrop-filter: blur(2px);
}
.btn-menu { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; z-index: 100; width: min(300px, 84vw);
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: var(--sombra-2);
  }
  .lateral.abierto { transform: translateX(0); }
  .velo-movil.visible { display: block; }
  .btn-menu { display: inline-flex; }
  .superior { padding: 0 var(--e-4); }
  .superior-correo { display: none; }
  .vista { padding: var(--e-4); }
}