/* =============================================================
   SIG V1 — Capa de adaptación a dispositivos móviles
   Se carga DESPUÉS de estilos.css. Solo sobreescribe layout
   (no cambia colores ni iconos). Punto de corte: 768px.
   Objetivo: que todo el sistema se vea y se use en un celular
   sin que el contenido se monte, se corte o desborde.

   Reglas aplicadas:
   - Requiere <meta name="viewport" content="width=device-width,
     initial-scale=1.0"> en index.php (ya presente).
   - Una sola columna por debajo de 768px (nada de 2–3 columnas).
   - Botones a lo ancho, fáciles de tocar con el pulgar.
   - Zona táctil / botones: 48×48 px, 8–16 px de separación.
   - Texto normal: 16 px (nunca < 14 px; < 16 px hace zoom en iOS).
   - Títulos: 20–28 px.  Campos de formulario: alto 48 px.
   - Se oculta lo decorativo / no esencial en campo.
   ============================================================= */

/* ============================================================
   PWA — Indicador de conexión y avisos (toasts).
   FUERA de la media query: la app puede quedarse sin conexión
   también en escritorio, y sin estas reglas los elementos que
   inyecta pwa-ui.js se verían como texto suelto sin estilo.
   ============================================================ */
#pwa-status-indicator{
  display:flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:4px;
  font-size:12px; font-weight:500; line-height:1;
}
.pwa-status-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  animation:pwa-pulse 2s infinite;
}
.pwa-status-online{background-color:rgba(76,175,80,0.12);}
.pwa-status-online .pwa-status-dot{background-color:#4caf50;}
.pwa-status-offline{background-color:rgba(244,67,54,0.12);}
.pwa-status-offline .pwa-status-dot{background-color:#f44336;animation:pwa-pulse-warn 1s infinite;}
@keyframes pwa-pulse{0%,100%{opacity:1}50%{opacity:0.6}}
@keyframes pwa-pulse-warn{0%,100%{opacity:1}50%{opacity:0.3}}

.pwa-toast-container{
  position:fixed; bottom:16px; right:16px; z-index:99999;
  max-width:320px; pointer-events:none;
}
.pwa-toast{
  padding:12px 16px; border-radius:6px; margin-bottom:8px;
  font-size:14px; font-weight:500; color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  pointer-events:all; word-break:break-word;
}
.pwa-toast-success{background-color:#4caf50;}
.pwa-toast-warning{background-color:#ff9800;}
.pwa-toast-error{background-color:#f44336;}
.pwa-toast-info{background-color:#2196f3;}

@media (max-width:768px){

  /* ---- 1. Sin desplazamiento horizontal de la página ---- */
  html,body{max-width:100vw;overflow-x:hidden;}
  *{-webkit-tap-highlight-color:rgba(10,30,80,.15);}

  /* La "ventana" de escritorio ocupa la altura real del móvil
     (100dvh evita el salto por la barra del navegador). */
  .window{height:100vh;height:100dvh;width:100%;overflow:hidden;}

  /* ---- 2. Ocultar lo decorativo / no esencial ---- */
  .title-bar,
  .menu-grid-brand,
  .brand-corner-logo,
  .login-deco-squares,
  .menu-grid .mod-tile-3d::after{display:none!important;}

  /* ---- 3. Encabezado del módulo ---- */
  .app-header{flex-wrap:wrap;}
  .header-title{
    font-size:clamp(20px,5.5vw,28px);   /* título: 20–28 px */
    letter-spacing:1px;
    padding:10px 6px;
    order:3;
    flex-basis:100%;
    text-align:center;
    white-space:normal;
  }
  .header-back-btn{
    font-size:16px;min-height:48px;
    padding:12px 18px;border-right:none;
  }
  .exit-btn-header,.save-btn-header{
    font-size:14px;padding:0 16px;min-height:48px;
  }

  /* ---- 4. Barra de estado inferior ---- */
  .status-bar{flex-wrap:wrap;gap:6px 16px;padding:10px 14px;}
  .status-item,.status-version{font-size:14px;}

  /* ---- 5. Menú principal: UNA columna ---- */
  .menu-grid-wrap{padding:14px 12px;gap:16px;}
  .menu-grid{
    --tile-col:1fr;
    grid-template-columns:1fr!important;
    gap:12px;max-width:100%;
  }
  .menu-section-title{font-size:16px;}
  /* El tile con imagen conserva su icono idéntico (object-fit:cover);
     se le da proporción ancha para que no se deforme. */
  .mod-tile{min-height:64px;}
  .mod-tile-3d{aspect-ratio:16/6;min-height:0;}
  .menu-grid .mod-tile-3d:hover,
  .mod-tile:hover{transform:none;}

  /* ---- 6. Layouts de 2/3 columnas → una sola columna ---- */
  .three-col,
  .submenu-split,
  .submenu-tiles,
  .submenu-content-block,
  .seg-grid,
  .mant-grid{
    display:flex!important;
    flex-direction:column!important;
    flex:1 1 auto!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden;
    padding:12px!important;
    gap:12px!important;
  }
  .submenu-tiles .mod-tile,
  .seg-grid .seg-card{width:100%;min-height:88px;}
  .mant-grid .mant-card{min-height:100px;}
  .panel,.center-panel{width:100%;}

  /* ---- 6 bis. SUBMENÚS: mismo trato que el menú principal ----
     Cualquier rejilla de mosaicos dentro de un módulo (hubs de SIG, Laboratorio,
     Mantenimiento, RRHH, Reportes, Capacitación, Obras, Ambiental…) pasa a una
     sola columna, con el mosaico ancho y bajo, igual que el menú de inicio.
     Antes solo el menú principal estaba adaptado y los submenús seguían en
     2–4 columnas: los textos se cortaban y había que hacer zoom. */
  .iso9001-hub-grid,
  .iso-menu-grid,
  .submenu-tiles,
  .cards-grid,
  .tiles-grid,
  [class*="hub-grid"],
  [class*="cards-grid"]{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    max-width:100%!important;
    padding:12px!important;
    align-content:start;
  }
  /* Tarjeta de submenú: ancha, baja, texto legible y sin recortes. */
  .iso9001-hub-card,
  .iso-card,
  .submenu-tiles .mod-tile,
  .cards-grid > *,
  [class*="hub-card"]{
    width:100%!important;
    min-height:76px!important;
    aspect-ratio:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:12px!important;
    text-align:left!important;
    padding:12px 14px!important;
    box-sizing:border-box;
  }
  .iso9001-hub-card-top,
  .iso9001-hub-card-icono,
  .iso-card-icono{flex:0 0 auto;margin:0!important;font-size:26px!important;}
  .iso9001-hub-card-nombre,
  .iso-card-nombre{
    flex:1 1 auto;font-size:15px!important;line-height:1.25!important;
    margin:0!important;white-space:normal!important;overflow:visible!important;
  }
  .iso9001-hub-card-sub,
  .iso-card-sub{font-size:12px!important;margin:0!important;}
  /* Contador/porcentaje: a la derecha, no debajo. */
  .iso9001-hub-card-pct,
  .iso-card-pct{flex:0 0 auto;margin:0!important;font-size:13px!important;}
  /* Sin efectos de hover/3D en táctil (no hay puntero). */
  .iso9001-hub-card:hover,
  .iso-card:hover,
  [class*="hub-card"]:hover{transform:none!important;box-shadow:none!important;}

  /* ---- 7. Tablas: scroll horizontal táctil dentro de su caja ---- */
  [class*="table-wrap"],
  .dm-table-wrap,
  .um-insp-table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  table{max-width:none;}

  /* ---- 8. Barras de herramientas / filtros → apiladas ---- */
  .inv-toolbar,.calib-toolbar,.seg-toolbar,.pg-toolbar,
  .um-toolbar,.capseg-matriz-toolbar,.salida-subheader{
    padding:12px!important;
    gap:12px!important;              /* separación táctil 8–16 px */
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .inv-toolbar > *,.seg-toolbar > *,.calib-toolbar > *,
  .um-toolbar > *,.um-toolbar-search,.um-toolbar-btns,
  .pg-toolbar > *{width:100%;min-width:0;flex:0 0 auto;}
  .um-toolbar-btns{display:flex;flex-wrap:wrap;gap:8px;}

  /* ---- 9. Formularios ---- */
  .salida-form{margin:10px 12px 0;padding:12px;}
  .salida-row{flex-direction:column;align-items:stretch;gap:12px;}
  .salida-row > *{width:100%;}
  .sf-label{min-width:0;}
  .umchk-row,.umchk-firmas-form,
  .dm-col-2,.dm-col-3,.dm-col-13,.dm-col-31,
  .pg-membrete,.pg-mb-datos,.admin-form-row{
    grid-template-columns:1fr!important;
    display:grid!important;
  }
  .admin-form-row label{text-align:left;}
  .form-label,.login-error,.status-item{font-size:16px;}
  .screen{font-size:16px;}

  /* ---- 10. Zona táctil y tipografía (estándar iOS/Android) ----
     Texto 16 px mín. · Campo de formulario 48 px · Botón 48×48. */
  input,select,textarea,
  .btn,button:not(.tb-btn):not(.mod-tile):not(.mod-tile-3d):not(.eye-btn){
    font-size:16px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,textarea,
  .btn,button:not(.tb-btn):not(.mod-tile):not(.mod-tile-3d):not(.eye-btn):not(.tb-cls){
    min-height:48px;
  }
  textarea{min-height:96px;}
  input[type="checkbox"],input[type="radio"]{min-width:22px;min-height:22px;}

  /* ---- 11. Botones: se ADAPTAN al ancho del celular ----
     Antes cada botón de barra ocupaba el 100% y una barra con 8 botones
     (Almacén, Laboratorio, RRHH…) se convertía en una columna larguísima.
     Ahora fluyen en filas y se reparten el ancho: 2 por fila en pantallas
     normales, 1 por fila si el texto es largo, sin dejar de cumplir los
     48 px de alto táctil. */
  .inv-toolbar,.seg-toolbar,.calib-toolbar,.um-toolbar,.pg-toolbar,
  .capseg-matriz-toolbar,.salida-subheader,.modal-btns,.sub-cfg-btns,
  .um-toolbar-btns,.login-btns{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  .inv-toolbar button,.seg-toolbar button,.calib-toolbar button,
  .um-toolbar button,.pg-toolbar button,.capseg-matriz-toolbar button,
  .salida-subheader button,.modal-btns button,.sub-cfg-btns button,
  .um-toolbar-btns button,
  .calib-btn,.seg-btn,.inv-btn,.pg-btn,.sub-cfg-btn{
    flex:1 1 calc(50% - 8px)!important;   /* 2 por fila; 1 si no entra */
    min-width:132px;
    width:auto!important;
    padding:0 10px!important;
    font-size:14px!important;             /* baja de 16 -> entra el texto */
    line-height:1.15!important;
    white-space:normal!important;         /* el rótulo largo hace 2 renglones */
    word-break:break-word;
    text-align:center;
    display:inline-flex!important;
    align-items:center;justify-content:center;
  }
  /* Buscadores y selects de la barra: siempre a lo ancho, arriba de los botones. */
  .calib-search,.inv-search,.seg-search,.um-toolbar-search,
  .inv-toolbar input,.seg-toolbar input,.calib-toolbar input,
  .inv-toolbar select,.seg-toolbar select,.calib-toolbar select{
    flex:1 1 100%!important;width:100%!important;min-width:0!important;
  }
  /* Botones de acción dentro de tablas (✏️ 🗑 📎 ⬇️): compactos, no a lo ancho. */
  td .calib-btn,td button,td .dw-btn,
  .seg-table td button,.doc-master-table td button{
    flex:0 0 auto!important;width:auto!important;
    min-width:40px;min-height:40px;padding:4px 8px!important;font-size:13px!important;
  }
  /* Botones grandes de formulario (Guardar / Cancelar) sí a lo ancho. */
  .login-btn,.modal-btn{flex:1 1 100%!important;width:100%!important;}
  /* Widget de documentos: sus botones también se adaptan. */
  .dw-wrap .dw-btn{min-height:44px;font-size:14px;}
  .dw-wrap .dw-inp{height:46px;font-size:16px;}

  /* ---- 12. Modales a pantalla casi completa ---- */
  .modal-overlay,.cfg-overlay{padding:12px;}
  .modal-box{max-width:94vw;width:94vw;padding:24px 20px;}
  [class*="modal"] [class*="-box"],
  [class*="modal"] [class*="-panel"],
  [class*="modal"] [class*="-content"],
  .cfg-box{
    max-width:96vw!important;
    width:96vw!important;
    max-height:90vh!important;
    overflow-y:auto!important;
  }

  /* ---- 13. Login ---- */
  #screen-login{flex-direction:column!important;overflow-y:auto;}
  .login-left,.login-right{width:100%!important;flex:0 0 auto!important;}
  .login-left{padding:24px 20px;}
  .login-right{padding:24px 20px 40px;}

  /* ---- 14. Unidades: hub de categorías como lista compacta ----
     En el celular las 19 categorías salían como banners con la imagen a pantalla
     completa (icono "gigante"), imposible de recorrer. Se fuerzan a fila:
     icono chico 42×42 + etiqueta al lado, igual que el menú principal. */
  #screen-unidades-hub .submenu-tiles,
  #screen-unidades-hub .submenu-split{
    display:flex!important;flex-direction:column!important;gap:10px!important;
    padding:12px!important;overflow-y:auto!important;
  }
  #screen-unidades-hub .submenu-tiles .mod-tile,
  #screen-unidades-hub .submenu-tiles .mod-tile-3d{
    width:100%!important;min-height:58px!important;aspect-ratio:auto!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;
    gap:12px!important;text-align:left!important;padding:10px 14px!important;
  }
  #screen-unidades-hub .submenu-tiles .mod-tile-icon,
  #screen-unidades-hub .submenu-tiles .mod-tile-icon-img{
    position:static!important;inset:auto!important;
    flex:0 0 42px!important;width:42px!important;height:42px!important;
    border-radius:9px!important;overflow:hidden!important;
  }
  #screen-unidades-hub .submenu-tiles .mod-tile-icon-img img{
    width:100%!important;height:100%!important;object-fit:cover!important;border-radius:9px!important;
  }
  #screen-unidades-hub .submenu-tiles .mod-tile-label,
  #screen-unidades-hub .submenu-tiles .mod-tile-3d .mod-tile-label{
    display:block!important;position:static!important;flex:1 1 auto!important;
    font-size:15px!important;font-weight:700!important;line-height:1.25!important;
    white-space:normal!important;text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
  }

  /* ---- 14 bis. Unidades: pantalla de búsqueda/tabla usable en celular ---- */
  #screen-unidades .um-toolbar{flex-wrap:wrap!important;gap:8px!important;padding:10px 12px!important;}
  #screen-unidades .um-toolbar-search{width:100%!important;}
  #screen-unidades .reg-search-input{flex:1 1 auto!important;min-width:0!important;font-size:16px!important;height:44px!important;}
  #screen-unidades .um-toolbar-btns{flex-wrap:wrap!important;gap:6px!important;}
  #screen-unidades .um-tbtn{flex:1 1 46%!important;min-height:44px!important;font-size:13px!important;}
  #screen-unidades .um-table-area{overflow:auto!important;-webkit-overflow-scrolling:touch;}

  /* (Las reglas .pwa-* se movieron fuera de esta media query, arriba.) */
}

/* =============================================================
   15. MENÚ PRINCIPAL EN CELULAR — cuadrícula de 3 íconos por fila
   -------------------------------------------------------------
   Pedido del usuario (23-09-2026): en el teléfono el menú se ve
   con las secciones colapsadas (solo el título) y, al abrir una,
   sus módulos salen como ICONOS en cuadrícula de 3 columnas con
   el nombre debajo — en vez de la lista vertical tipo WhatsApp
   que dejaba css/rediseno/iconos.css.
   Se escribe con #screen-menu para ganarle en especificidad a
   iconos.css (que se carga después) sin tocar ese archivo, y
   SOLO afecta al menú principal: los submenús siguen igual.
   ============================================================= */
@media (max-width:768px){

  /* Cuadrícula: 3 columnas iguales, sin desbordes a 375 px. */
  #screen-menu .menu-grid,
  .screen .menu-grid,
  .screen .submenu-tiles,
  .screen .mant-tiles,
  .screen .iso-menu-grid,
  #screen-unidades-hub .submenu-tiles,
  #screen-sst-checklist-um .submenu-tiles{
    display:grid!important;
    grid-auto-rows:min-content!important;
    grid-template-rows:none!important;
    align-content:start!important;
    justify-content:stretch!important;
    flex:1 1 auto!important;
    padding:12px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    max-width:100%!important;
  }

  /* Sección cerrada: la cuadrícula se oculta. Hay que repetirlo con la
     misma especificidad (#screen-menu) porque la regla equivalente de
     css/responsive.css pierde contra el display:grid de arriba. */
  #screen-menu .menu-section.rsp-cerrada > .menu-grid{display:none!important;}

  /* Cada módulo: tarjeta vertical (ícono arriba, nombre debajo). */
  #screen-menu .menu-grid .mod-tile,
  #screen-menu .menu-grid .mod-tile-3d,
  #screen-menu .menu-grid .mod-tile:not(:has(img)),
  .screen .submenu-tiles .mod-tile,
  .screen .submenu-tiles .mod-tile-3d,
  .screen .mant-tiles .mod-tile,
  .screen .mant-tiles .mod-tile-3d,
  .screen .iso-menu-grid .mod-tile,
  #screen-unidades-hub .submenu-tiles .mod-tile,
  #screen-unidades-hub .submenu-tiles .mod-tile-3d{
    width:100%!important;
    min-width:0!important;
    aspect-ratio:auto!important;
    height:auto!important;
    min-height:104px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:10px 4px 8px!important;
    background:linear-gradient(160deg,#1f4fae,#0f2c72)!important;
    border:1px solid #2a5ec2!important;
    border-radius:14px!important;
    overflow:hidden!important;
    animation:none!important;   /* sin retardos: la sección se abre al toque */
  }

  /* Ícono: 52 px (área táctil holgada dentro de un botón de ~104 px). */
  #screen-menu .menu-grid .mod-tile-icon,
  #screen-menu .menu-grid .mod-tile-icon-img,
  #screen-menu .menu-grid .mod-tile:not(:has(img)) .mod-tile-icon,
  .screen .submenu-tiles .mod-tile-icon,
  .screen .submenu-tiles .mod-tile-icon-img,
  .screen .mant-tiles .mod-tile-icon,
  .screen .mant-tiles .mod-tile-icon-img,
  .screen .iso-menu-grid .mod-tile-icon,
  .screen .iso-menu-grid .mod-tile-icon-img,
  #screen-unidades-hub .submenu-tiles .mod-tile-icon,
  #screen-unidades-hub .submenu-tiles .mod-tile-icon-img{
    position:static!important;
    inset:auto!important;
    flex:0 0 52px!important;
    width:52px!important;
    height:52px!important;
    border-radius:12px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:30px!important;            /* mosaicos con emoji */
    background:rgba(255,255,255,.06)!important;
  }
  #screen-menu .menu-grid .mod-tile-icon-img img,
  .screen .submenu-tiles .mod-tile-icon-img img,
  .screen .mant-tiles .mod-tile-icon-img img,
  .screen .iso-menu-grid .mod-tile-icon-img img,
  #screen-unidades-hub .submenu-tiles .mod-tile-icon-img img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center!important;
    border-radius:12px!important;transform:none!important;
  }

  /* Nombre debajo del ícono: letra clara sobre fondo azul oscuro. */
  #screen-menu .menu-grid .mod-tile .mod-tile-label,
  #screen-menu .menu-grid .mod-tile-3d .mod-tile-label,
  #screen-menu .menu-grid .mod-tile:not(:has(img)) .mod-tile-label,
  .screen .submenu-tiles .mod-tile .mod-tile-label,
  .screen .submenu-tiles .mod-tile-3d .mod-tile-label,
  .screen .mant-tiles .mod-tile .mod-tile-label,
  .screen .mant-tiles .mod-tile-3d .mod-tile-label,
  .screen .iso-menu-grid .mod-tile .mod-tile-label,
  #screen-unidades-hub .submenu-tiles .mod-tile-label,
  #screen-unidades-hub .submenu-tiles .mod-tile-3d .mod-tile-label{
    display:block!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1.2!important;
    text-align:center!important;
    letter-spacing:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    hyphens:auto;
  }

  /* Los módulos sin permiso se ocultan con style="display:none" desde
     sigAplicarPermisosMenu(): el !important de arriba le ganaba al estilo
     en línea, así que se respeta explícitamente. */
  #screen-menu .menu-grid .mod-tile[style*="display:none"],
  #screen-menu .menu-grid .mod-tile[style*="display: none"],
  .screen .submenu-tiles .mod-tile[style*="display:none"],
  .screen .submenu-tiles .mod-tile[style*="display: none"],
  .screen .mant-tiles .mod-tile[style*="display:none"],
  .screen .mant-tiles .mod-tile[style*="display: none"]{display:none!important;}

  /* Título de sección: barra tocable con el indicador ▸/▾ a la derecha. */
  #screen-menu .menu-section-title.rsp-toggle{
    position:relative;
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    padding-right:36px!important;
  }
}

/* =============================================================
   16. HUBS CON REGLA POR ID — 3 íconos por fila (23-09-2026)
   css/responsive.css fija por id (#screen-almacen, #screen-rrhh…)
   2 columnas hasta 768 px y 1 sola hasta 480 px, y por cargarse
   DESPUÉS le ganaba al bloque 15. Se repite aquí con el id MÁS
   la clase .screen para ganar en especificidad sin tocar ese
   archivo; así estos hubs quedan igual que los demás: 3 por fila.
   ============================================================= */
@media (max-width:768px){
  .screen#screen-almacen .submenu-tiles,
  .screen#screen-mantenimiento .submenu-tiles,
  .screen#screen-mant-amarilla .submenu-tiles,
  .screen#screen-laboratorio .submenu-tiles,
  .screen#screen-rrhh .submenu-tiles{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}