/* Movil (< 768px): el sidebar pasa a panel lateral, cerrado por defecto,
 * que abre #nav-toggle (body.nav-open, ver setNavOpen() en index.html).
 * Cerrado = visibility: hidden, no solo transform: un elemento corrido
 * fuera de pantalla sigue siendo "visible" para Playwright y, peor, sigue
 * en el orden de Tab y para lectores de pantalla. */
@media (max-width: 767.98px) {
  .app-sidebar {
    width: min(280px, 85vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  body.nav-open .app-sidebar {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s ease;
  }
  body.nav-open .app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    background: rgba(15, 23, 42, 0.4);
  }

  .app-main { margin-left: 0; }

  .app-header { gap: 0.5rem; padding: 0 0.75rem; }
  .app-header__menu {
    display: inline-flex;
    flex-direction: column;
    /* stretch, no el 'center' que hereda de la regla base de button: en
     * columna, center encoge las 3 <span> (sin ancho propio) a 0px -- el
     * boton ocupaba su caja pero no dibujaba nada. */
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    width: 40px;
    padding: 0 10px;
    border-color: transparent;
    background: transparent;
  }
  .app-header__menu span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text);
  }
  .app-header__user { display: none; }
  /* Campana decorativa (sin backend): en 390px no hay lugar para ella. */
  .app-header__icon-btn { display: none; }
  /* Tecnico: con "Sincronizar ahora" + "Cerrar sesión" el titulo quedaba
   * cortado a "Mi..." (medido en 390px). Se oculta: cada pantalla ya
   * muestra su propio h1 justo debajo. Queda como espaciador (flex: 1). */
  body:has(#sync-now-btn:not([hidden])) .app-header__title { visibility: hidden; }
  .app-header__actions { gap: 0.25rem; }
  .app-header__actions button { padding: 0.35rem 0.6rem; font-size: 0.85rem; }

  #app { padding: 1rem; }
  h1 { font-size: 1.3rem; }

  /* Servicios */
  .scheduler-screen__new { width: 100%; justify-content: center; margin-left: 0; }
  .scheduler-screen__range-label { min-width: 0; }
  .scheduler-day-cell { min-height: 52px; padding: 0.3rem; }
  .scheduler-week-grid { grid-template-columns: minmax(0, 1fr); }
  .scheduler-week-column { min-height: 0; }
  .scheduler-status-select { margin-left: 0; }

  /* Usuarios: la tabla scrollea sola, la pagina no. */
  .users-table,
  .clients-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Historial: cada filtro ocupa su fila; la tabla scrollea dentro de su region. */
  .history-filter,
  .history-filter--action { flex: 1 1 100%; }
  .history-screen__clear { width: 100%; justify-content: center; }
  .history-pager { flex-direction: column; align-items: stretch; }
  .history-pager__nav { justify-content: space-between; }
  .history-detail dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }

  /* Trazabilidad: cada filtro ocupa su fila; la tabla scrollea dentro de su region. */
  .audit-filter,
  .audit-filter--action { flex: 1 1 100%; }
  .audit-screen__clear { width: 100%; justify-content: center; }
  .audit-pager { flex-direction: column; align-items: stretch; }
  .audit-pager__nav { justify-content: space-between; }

  /* Documentos: cada filtro ocupa su fila; los botones de la tarjeta pueden pasar a otra fila. */
  .documents-filter,
  .documents-filter--action { flex: 1 1 100%; }
  .documents-screen__clear { width: 100%; justify-content: center; }
  .documents-pager { justify-content: space-between; }

  /* Formulario de diagnostico */
  .field-report-form__chemical-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field-report-form__chemical-select { grid-column: 1 / -1; }
  .my-schedule-screen__report-btn { width: 100%; justify-content: center; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  body.nav-open .app-sidebar { transition: none; }
}