/* =============================================================
   SIG V1 — Capa responsive por dispositivo (2026-09-14)
   Se carga DESPUÉS de movil.css, rediseno/movil.css, portal.css,
   avatar.css, tema-oscuro.css y comunicados.css.
   Solo layout / tamaños: no cambia colores (respeta tema oscuro).

   Puntos de corte coherentes:
     celular   ≤ 480 px   (y hasta 768 px: lo cubre movil.css)
     tablet    481–1024 px (compacto pero completo)
     escritorio > 1024 px  (sin cambios de diseño)
   Además, reglas por TIPO de puntero (pointer:coarse) para que
   cualquier pantalla táctil tenga botones cómodos aunque sea ancha.
   ============================================================= */

/* ---------- 0. Todas las anchuras: arreglos de desborde reales ---------- */

/* Unidades Móviles y otras tablas .reg-table: el contenedor tenía
   overflow-x:hidden (overflow-y:auto) y la tabla de 2068 px quedaba
   CORTADA en tablet y laptop, sin forma de ver las columnas de la
   derecha. El scroll en ambos ejes vive en el mismo contenedor, así
   que el thead sticky sigue funcionando. */
.reg-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Contenedor que responsive.js asigna a tablas anchas sin caja con scroll. */
.rsp-scroll-x{overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%;}

/* Medios nunca más anchos que su caja (gráficos Chart.js, fotos, video). */
.screen img,.screen video,.screen canvas,.screen iframe{max-width:100%;}

/* Rejilla del portal: una columna 1fr no debe crecer con el contenido. */
.portal-col,.portal-card{min-width:0;}

/* Respeta el notch / barra de gestos en iPhone y Android (viewport-fit=cover). */
.app-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
.status-bar{padding-bottom:max(env(safe-area-inset-bottom),0px);}

/* ---------- 1. Tablet y laptop pequeña (≤ 1024 px) ---------- */
@media (max-width:1024px){
  /* Modales siempre dentro de la pantalla con scroll interno. */
  .cfg-box,.modal-box{max-width:96vw;max-height:94vh;max-height:94dvh;overflow-y:auto;}
  /* Pies de tabla con paginación: que bajen de renglón en vez de salirse. */
  .inv-footer{flex-wrap:wrap;gap:8px;}
  .inv-paginacion{flex-wrap:wrap;}
  /* Cabecera: los botones no se salen, pasan a otra fila. */
  .app-header{flex-wrap:wrap;row-gap:4px;}
}

/* ---------- 2. Celular y tablet vertical (≤ 768 px) ---------- */
@media (max-width:768px){
  /* estilos.css forzaba 3 columnas de 150 px con selectores de ID
     (#screen-rrhh, #screen-almacen, #screen-mantenimiento, …) que ganaban
     a movil.css: los mosaicos se salían 33 px por la derecha y quedaban
     cortados. Se pasa a 2 columnas fluidas, igual para todos. */
  #screen-almacen .submenu-tiles,
  #screen-mantenimiento .submenu-tiles,
  #screen-mant-amarilla .submenu-tiles,
  #screen-laboratorio .submenu-tiles,
  #screen-rrhh .submenu-tiles{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .submenu-tiles .mod-tile{min-width:0;}
  .submenu-tiles .mod-tile-label{overflow-wrap:anywhere;hyphens:auto;}

  /* Portal: el input de archivo tenía ancho mínimo y se salía 13 px. */
  .portal-actions input,.portal-evi-form input[type="text"]{max-width:100%;min-width:0;}
  .portal-actions input[type="file"]{flex:1 1 100%;}

  /* Evitar el zoom automático de iPhone: todo campo de texto ≥ 16 px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,textarea{font-size:16px!important;}

  /* Modales a pantalla completa con scroll interno. */
  .cfg-overlay,.modal-overlay{align-items:flex-start;}
  .cfg-box,.modal-box{max-height:calc(100dvh - 24px)!important;}

  /* Menú principal colapsable por sección (responsive.js pone la clase). */
  .menu-section-title.rsp-toggle{
    cursor:pointer;min-height:48px;margin-bottom:8px;padding-right:36px;
    user-select:none;-webkit-user-select:none;
  }
  .menu-section-title.rsp-toggle > .rsp-chev{
    position:absolute;right:8px;top:50%;transform:translateY(-60%);
    font-size:18px;line-height:1;transition:transform .2s;
  }
  .menu-section.rsp-cerrada .menu-section-title.rsp-toggle > .rsp-chev{transform:translateY(-60%) rotate(-90deg);}
  .menu-section.rsp-cerrada > .menu-grid{display:none!important;}
}

/* ---------- 3. Celular (≤ 480 px): una columna ---------- */
@media (max-width:480px){
  #screen-almacen .submenu-tiles,
  #screen-mantenimiento .submenu-tiles,
  #screen-mant-amarilla .submenu-tiles,
  #screen-laboratorio .submenu-tiles,
  #screen-rrhh .submenu-tiles{
    grid-template-columns:1fr!important;
  }
  .submenu-tiles .mod-tile-3d{min-height:64px;}
}

/* ---------- 4. Pantallas táctiles de cualquier tamaño ---------- */
@media (hover:none) and (pointer:coarse){
  .header-back-btn,.exit-btn-header,.save-btn-header,
  .um-tbtn,.inv-btn,.seg-btn,.calib-btn,.pg-btn,.portal-btn,.portal-tab{min-height:44px;}
  td button,td .dw-btn{min-width:40px;min-height:40px;}
  .mod-tile:hover,.mod-tile-3d:hover{transform:none;}
}

/* ---------- 5. Unidades Móviles: personal designado (autocompletar RR.HH.) ---------- */
.um-pd-wrap{position:relative;}
.um-pd-wrap .sub-cfg-input{width:100%;box-sizing:border-box;}
.um-pd-list{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:3000;max-height:280px;overflow-y:auto;
  background:#ffffff;border:1px solid #9fb3c8;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.um-pd-list > div{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:6px 10px;box-sizing:border-box;
  cursor:pointer;color:#1a2a3a;background:#ffffff;border-bottom:1px solid #e3e9f0;font-size:13px;line-height:1.3;}
.um-pd-list > div:hover,.um-pd-list > div.activo{background:#dcebfb;color:#0d1b2a;}
.um-pd-list .um-pd-nom{font-weight:600;}
.um-pd-list .um-pd-sub{font-size:11.5px;color:#3f4f60;}
.um-pd-list .um-pd-tag{font-size:10.5px;font-weight:700;color:#8a1c1c;background:#fde2e2;border-radius:4px;padding:0 5px;}
.um-pd-list .um-pd-baja .um-pd-nom{color:#4a4a4a;}
.um-pd-list > div.um-pd-vacio{cursor:default;color:#3f4f60;font-style:italic;}
html[data-theme="dark"] #um-personal-list > div.activo{background:#1d3f78!important;color:#ffffff!important;}
html[data-theme="dark"] #um-personal-list .um-pd-sub,
html[data-theme="dark"] #um-personal-list > div.um-pd-vacio{color:#c3cfdd!important;}
html[data-theme="dark"] #um-personal-list .um-pd-baja .um-pd-nom{color:#d0d6de!important;}
html[data-theme="dark"] #um-personal-list .um-pd-tag{color:#ffd0d0!important;background:#5a1f1f!important;}
/* Títulos de los recuadros de la ficha de unidad: en oscuro el azul #1a3e8a
   quedaba sobre fondo #1e293b (1,46:1). */
html[data-theme="dark"] #modal-um-form .sub-cfg-fieldset > legend{color:#bcd4ff!important;}