/*
  Ajustes responsive del panel de aplicación (layout "start") y de las
  pantallas de login/recuperación. El resto de las hojas de estilo del
  tema (style.css, modulos.css, formularios.css) no tenían ni un solo
  @media — el layout de columnas fijas (menú lateral 16.6% + contenido
  83.3%, header con col-2/col-6/col-4) se mantenía igual sin importar el
  tamaño de pantalla.

  El colapsar/expandir el menú lateral YA estaba implementado en JS
  (gestionMenu/cerrarMenuLateral/abrirMenuLateral en
  themes/vojtasvoboda-vega/layouts/start.htm) pero solo pensado para
  escritorio: alterna entre menú 16.6% + contenido 83.3%, o menú oculto +
  contenido 100%. Aquí NO se reemplaza esa lógica (ya funciona, y venía
  rota por un bug aparte — ver el fix de `init()` en start.htm), solo se
  ajusta por CSS cómo se ve cada uno de esos dos estados en pantallas
  angostas: en vez de "empujar" el contenido, el menú abierto se muestra
  como un panel flotante encima del contenido.
*/

@media (max-width: 992px) {

  /*el menú abierto (JS le quita la clase "hide") se muestra como panel
  flotante en vez de ocupar 16.6% empujando el contenido*/
  .navigation:not(.hide) {
    width: 80vw;
    max-width: 300px;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
  }

  /*el contenido usa siempre el ancho completo: el menú superpone, no empuja*/
  #menuFicticio {
    display: none !important;
  }

  .body,
  #body {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .header .col-2.logo {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .header .col-6.menu-informacion {
    display: none;
  }

  .header .col-4.usuario {
    flex: 1 1 auto;
    width: auto;
  }

  .nombre-usuario-texto {
    max-width: 90px;
  }
}

@media (max-width: 576px) {
  .titulo-header {
    font-size: 14px;
  }

  .nombre-usuario-texto {
    display: none;
  }

  .menu-usuario-dropdown {
    right: -10px;
  }

  /*formulario de login/recuperación a ancho completo en celular*/
  .formulario-sesion {
    width: 92% !important;
  }
}

/*
  las tablas de los módulos (.tabla-modulo) no tenían contenedor con
  scroll horizontal: en pantallas angostas las columnas se aplastaban o
  desbordaban la página. Se envuelve el contenido en scroll horizontal
  sin tocar el ancho de cada tabla individual.
*/
@media (max-width: 768px) {
  .contenido-tabla-modulo {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabla-modulo {
    min-width: 640px;
  }
}

/*
  las secciones "row" con varias columnas fijas (col-6, col-4, col-3...)
  usadas en los formularios de los módulos no tenían breakpoint: se
  encimaban en pantallas angostas. Regla general conservadora que no
  rompe los layouts de escritorio (solo aplica por debajo de 576px) y
  apila cualquier columna intermedia a ancho completo.
*/
@media (max-width: 576px) {

  .section-formulario-sesion .col-8,
  .formulario-sesion .col-8 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}