/* ══════════════════════════════════════════════════════════════════════
   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; } }


/* ── 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; }
}