/* ══════════════════════════════════════════════════════════════════════
   AVBA — Capa común para teléfono y tablet

   Se carga al final del <head> de cada módulo, después de sus propios
   estilos, y sólo actúa dentro de media queries: en computadora no cambia
   nada. Lo que arregla son problemas que se repetían en todas las pantallas,
   medidos en un navegador real a 390, 820 y 1366 px de ancho.
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. Sin zoom al tocar un campo ─────────────────────────────────────
   iOS amplía la página cada vez que se toca un campo con letra menor a
   16 px, y hay que regresar con los dedos. Pasaba con los 571 campos del
   sistema. El !important es para ganarle a los tamaños escritos en línea. */
@media (max-width: 1024px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* ── 2. Barras de pestañas: un solo renglón que se desliza ─────────────
   En teléfono, unas barras se acomodaban en tres renglones y empujaban el
   contenido hacia abajo; otras se salían de la pantalla sin forma de
   alcanzar las últimas pestañas. Ahora todas son un renglón que se desliza
   con el dedo. js/movil.js agrega el degradado que avisa que hay más y
   centra la pestaña activa.
   Aquí no se toca el display: los submenús se esconden con style="display:
   none" desde el código de cada módulo, y forzarlo los dejaba todos visibles. */
@media (max-width: 768px) {
  .tabs-nav,
  .tabs-admin,
  .sub-nav,
  .tabs-sub,
  .sub-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .tabs-nav::-webkit-scrollbar,
  .tabs-admin::-webkit-scrollbar,
  .sub-nav::-webkit-scrollbar,
  .tabs-sub::-webkit-scrollbar,
  .sub-tabs::-webkit-scrollbar { display: none; }

  .tabs-nav > *,
  .tabs-admin > *,
  .sub-nav > *,
  .tabs-sub > *,
  .sub-tabs > * {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  /* Indicio de que hay más pestañas: se desvanece el borde que tiene
     contenido escondido. Las clases las pone js/movil.js. */
  .avba-mas-der {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .avba-mas-izq {
    -webkit-mask-image: linear-gradient(to left, #000 82%, transparent);
            mask-image: linear-gradient(to left, #000 82%, transparent);
  }
  .avba-mas-der.avba-mas-izq {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }
}


/* ── 3. Botones del tamaño de un dedo ──────────────────────────────────
   Había botones de 22 a 31 px de alto; el mínimo cómodo es 40. Sólo en
   pantallas táctiles, para no engordar la interfaz con mouse. Los botones
   con estilo escrito en línea (los que arman las listas desde JS) llevan la
   clase "tactil" para entrar aquí. */
@media (pointer: coarse) {
  .btn-ver, .btn-danger, .btn-edit, .btn-add-item, .tc-btn, .sub-btn,
  .btn-primary, .btn-sec, .btn-prim, .btn-logout, .btn-hdr, .btn-save,
  .btn-cancel, .btn-cancel2, .btn-filtrar, .btn-limpiar, .header-back,
  .btn-header-action, .header-logout, .dg-re, .btn-refresh, .toggle-pass,
  .btn-sm, .btn-doc, .acceso-btn, .ses-back-btn, .btn-add-email,
  .tactil {
    min-height: 40px;
  }
  .tactil { min-width: 40px; }
  .btn-refresh { min-width: 40px; }
  /* Los enlaces "Ver" de las tablas son inline-block: así el texto queda
     centrado en la nueva altura en lugar de pegado arriba. */
  a.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* La equis de cerrar era de 15×22 px: se agranda el área que responde
     sin agrandar el símbolo (en un botón el contenido ya va centrado). */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}


/* ── 4. Tablas que se deslizan de lado ─────────────────────────────────
   Las tablas anchas ya vivían dentro de contenedores con scroll; esto les
   da la inercia del dedo en iOS. */
@media (max-width: 768px) {
  .table-scroll,
  .tabla-wrap,
  .table-wrap,
  .tbl-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}


/* ── 5. Botón para volver al menú ──────────────────────────────────────
   Lo crea js/movil.js en el portal del cliente, donde el menú queda muy
   arriba del contenido. En teléfono y tablet, sólo cuando el menú ya no se
   ve; en computadora basta la rueda del mouse. */
.avba-ir-menu { display: none; }
@media (max-width: 1024px) {
  .avba-ir-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 22px;
    background: #0C447C;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(12, 68, 124, .35);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .avba-ir-menu--ver {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
@media print { .avba-ir-menu { display: none !important; } }


/* ── 5b. Botón para ir a las acciones de una ficha ─────────────────────
   Lo crea js/movil.js. Aparece abajo al centro mientras el pie de la ficha
   —donde están los botones de acción— no se ve, y lleva a él. */
.avba-ir-acciones { display: none; }
@media (max-width: 1024px) {
  .avba-ir-acciones {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 950;                 /* encima de la ficha (overlay: 200) */
    min-height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 22px;
    background: #0C447C;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(12, 68, 124, .35);
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .avba-ir-acciones--ver {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}
@media print { .avba-ir-acciones { display: none !important; } }


/* ── 6. Encabezado de las tablas de registros ──────────────────────────
   En Calidad y Certificaciones el título se apretaba en tres renglones junto
   a los botones de "Por cliente / Abrir todos / Cerrar todos". En teléfono
   el título va arriba a todo lo ancho y los botones debajo. */
@media (max-width: 600px) {
  .tabla-header { flex-wrap: wrap; row-gap: 10px; }
  .tabla-header > .tabla-title { flex: 1 0 100%; }
  .tabla-header > .tc-barra { margin-left: 0 !important; gap: 8px; }
}


/* ── 7. Modales: una sola zona que se desliza, no dos ──────────────────
   En Calidad y Certificaciones el modal se arma así:

       .overlay   ← se desliza (overflow-y: auto)
         .modal
           .modal-hdr
           .modal-tabs
           .modal-body    ← TAMBIÉN se desliza, topado a 55vh
           .modal-footer  ← aquí viven los botones

   En computadora no estorba, pero en teléfono el modal mide más que la
   pantalla —882 px contra 844 en uno de 390×844— y entonces hay que deslizar
   el overlay para llegar a los botones. El problema es que el cuerpo ocupa casi
   toda la pantalla y se lleva el gesto: tiene 469 px propios que recorrer antes
   de ceder, y al overlay le quedan 78. El dedo casi siempre cae sobre el
   cuerpo, así que el modal no se mueve y el pie no se alcanza. Se siente como
   si la ventana se hubiera trabado; cerrarla y volver a abrirla "lo arregla"
   porque reinicia las posiciones y el siguiente gesto cae distinto.

   En iOS es peor que en esta cuenta: ahí vh se mide contra la pantalla con la
   barra del navegador escondida, así que 55vh sale más alto de lo que se ve.

   La cura es quitar la de adentro: en teléfono y tablet el cuerpo deja de
   tener tope y de deslizarse, y el modal entero se recorre con el overlay. Un
   solo lugar donde deslizar, que es como la gente espera que funcione. */
@media (max-width: 1024px) {
  .overlay {
    overscroll-behavior: contain;   /* que no arrastre la página de atrás */
    /* El último botón no queda pegado al borde de la pantalla: ahí el
       navegador del iPhone usa los toques para sacar su barra. */
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }
  .modal-body {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Con una ventana abierta, la página de atrás se queda quieta.

     Antes también se deslizaba —141 px con el teléfono de lado— y quedaban
     dos zonas peleando por el mismo dedo: el overlay y la página. En el
     iPhone eso hace que el scroll se trabe al girar el teléfono y que un
     toque llegue a un lugar que ya no está donde se ve. Con la ficha de un
     registro ya enviado, ese lugar puede ser uno de los correos del cliente,
     y el navegador abre "Crear correo".

     Aquí también vivía -webkit-overflow-scrolling: touch. Desde iOS 13 el
     deslizamiento con inercia es el comportamiento normal y la propiedad ya
     no hace falta; lo único que aportaba era una capa de scroll aparte, que
     es justo la que se desacomoda con esos toques.

     El bloqueo ahora lo pone js/movil.js con la clase avba-ventana-abierta
     (sección 8), en todos los tamaños y para todas las ventanas, no sólo
     las que llevan la clase .overlay. */
}


/* ── 8. Cualquier ventana abierta, en cualquier pantalla ───────────────
   js/movil.js marca <html> con avba-ventana-abierta mientras haya una
   ventana emergente a la vista, la abra quien la abra: con la clase .open,
   con display por estilo o creada al vuelo. Antes el bloqueo sólo
   reconocía .overlay.open, así que el portal del cliente, el inspector y
   todas las pantallas en computadora dejaban moverse la página de atrás.

   En computadora, scrollbar-gutter guarda el lugar de la barra: sin él, al
   esconderla la página brincaba unos pixeles a la derecha cada vez que se
   abre una ventana. */
html { scrollbar-gutter: stable; }
html.avba-ventana-abierta,
html.avba-ventana-abierta body { overflow: hidden !important; }
html.avba-ventana-abierta #avba-cambio-rol,
html.avba-ventana-abierta .avba-ir-menu { display: none !important; }

/* Botón de cerrar: 44 px para el dedo sin cambiar cómo se ve. Los de las
   ventanas medían de 12 a 35 px y había que atinarles. js/movil.js los
   marca y calcula cuánto agrandar cada uno. */
@media (max-width: 1024px), (pointer: coarse) {
  .avba-cerrar-rel { position: relative; }
  .avba-cerrar::after {
    content: '';
    position: absolute;
    inset: calc(var(--avba-cerrar-extra, 8px) * -1);
  }
}

/* Botones secundarios dentro de las ventanas ("Seleccionar todo",
   "Ninguno", "Agregar hallazgo") medían 29 px: se tocaba el de al lado. */
@media (max-width: 1024px), (pointer: coarse) {
  /* :where() deja la regla sin peso: si la pantalla ya pidió más —las
     acciones de la ficha van a 44 px—, gana la pantalla. */
  :where(.overlay .modal) button:where(:not(.avba-cerrar):not(.modal-close)) { min-height: 36px; }
}

/* En computadora, la ficha con encabezado, cuerpo y pie: una sola zona que
   se desliza —el cuerpo— y el pie con los botones siempre a la vista.
   Antes el cuerpo se topaba en 55vh y, si la ficha medía más que la
   pantalla, también se deslizaba el fondo oscuro: dos barras, y los botones
   de acción podían quedar abajo de la pantalla. En teléfono no se toca: ahí
   el pie es demasiado alto para dejarlo fijo (sección 7). */
@media (min-width: 1025px) {
  .overlay > .modal:has(> .modal-body) {
    max-height: calc(100vh - 64px);   /* el overlay deja hasta 24 px arriba y abajo */
    display: flex;
    flex-direction: column;
  }
  .overlay > .modal:has(> .modal-body) > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  .overlay > .modal:has(> .modal-body) > :not(.modal-body) { flex-shrink: 0; }
}