/* Celular / tablet angosta: la app se usa en sitio desde el teléfono. Solo actúa en pantallas de hasta 820 px; en computador no cambia nada. */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  /* En Safari de iPhone, 100vw no siempre coincide con el ancho real (por la barra de direcciones que se
     recoge): eso dejaba una rendija del fondo visible junto a la barra superior. overflow-x:hidden lo evita
     de raíz, pase lo que pase. */
  html, body { overflow-x: hidden; }
  body { overscroll-behavior-y: none; }
  /* 16 px en los campos: si no, el iPhone acerca la pantalla solo al tocar un campo */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  /* botones y enlaces de acción cómodos para el dedo */
  .btn { min-height: 40px; }
  .btn.sm { min-height: 36px; }
  /* barra superior: la ruta se recorta con «…» en vez de empujar el botón Salir fuera de la pantalla */
  .topbar { min-width: 0; width: 100%; gap: 8px; }
  .page-head { width: 100%; }
  #crumbs { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* cajas de cifras: dos por fila, nunca cuatro apretadas */
  .kpis, .kpis3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi .v { overflow-wrap: anywhere; }
  /* cabeceras de página y botones que se acomodan en varias líneas */
  .page-head { flex-wrap: wrap; gap: 8px; }
  .page-head .actions, .page-head .head-actions { flex-wrap: wrap; }
  /* nada se sale del ancho del teléfono (las tablas anchas se desplazan dentro de su caja) */
  #view, #modal { max-width: 100%; }
  #view table.dg { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* ventanas emergentes a casi toda la pantalla */
  dialog.dlg { width: calc(100% - 16px) !important; max-width: none !important; max-height: calc(100dvh - 16px); }
  /* zonas seguras del iPhone (muesca y barra inferior) al usar la app anclada */
  #view { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* El panel de notificaciones se abre pegado a la campana (right:0 respecto a ella), pero en celular la
     campana no siempre queda al borde derecho de verdad (después vienen "Reportar", el avatar y "Salir") y
     el panel se salía por la izquierda de la pantalla. Aquí se ancla al viewport, con margen a los dos lados. */
  .bell-panel { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; max-width: none; }
}
@media (max-width: 420px) {
  .kpis, .kpis3 { gap: 8px; }
  .kpi { padding: 12px; }
}