/* ============================================================
   Bodega VF · Móvil — base táctil
   Dueño: tarea B (letra 16px, sin zoom en iPhone) + C (toques ≥44px)
   NO editar desde otras tareas. Se carga DESPUÉS de app.css.
   ============================================================ */

/* Solo en pantalla angosta (teléfono/tablet) o cuando el puntero
   principal es el dedo: el escritorio queda igual que siempre. */
@media (max-width:900px), (pointer:coarse){

  /* ---------- B · letra de 16px en los campos ----------
     Safari en iPhone hace zoom automático al enfocar cualquier campo
     con letra menor a 16px y descoloca la pantalla.
     Lleva !important porque varias plantillas traen el tamaño en el
     atributo style (selects de 13px, vistas previas de 12px) y el
     estilo en línea le gana a cualquier hoja de estilo. */
  input, select, textarea{
    font-size:16px !important;
  }

  /* ---------- C · objetivos táctiles de 44x44 ---------- */

  /* Campos de texto y listas desplegables: alto cómodo para el dedo.
     Las casillas quedan excluidas aquí; se tratan más abajo. */
  input:not([type="checkbox"]):not([type="radio"]),
  select{
    min-height:44px;
  }
  textarea{ padding:12px }

  /* Casillas y radios: la casilla real pasa a medir 44x44 (área tocable
     completa) pero se dibuja a 24px en el centro, así se ve contenida.
     El margen negativo devuelve los 10px sobrantes de cada lado al flujo:
     la casilla queda en el mismo sitio de siempre y NO estira el alto de
     las filas de la tabla.
     Notas:
     · el tamaño lleva !important porque las plantillas traen
       style="width:15px/16px/18px" en línea, y el estilo en línea gana.
     · el navegador ignora el relleno en las casillas nativas; por eso se
       apaga la apariencia nativa (appearance:none) y se dibuja el recuadro
       con ::before, respetando los colores del tema. */
  input[type="checkbox"], input[type="radio"]{
    -webkit-appearance:none;appearance:none;
    box-sizing:border-box;position:relative;
    width:44px !important;
    height:44px !important;
    margin:-10px;              /* ocupa 24px en el flujo, se toca en 44px */
    padding:0;border:none;background:none;
    flex-shrink:0;cursor:pointer;vertical-align:middle;
  }
  /* recuadro visible de 24px, centrado en el área tocable */
  input[type="checkbox"]::before, input[type="radio"]::before{
    content:"";position:absolute;inset:10px;
    background:#0d1626;border:1px solid rgba(148,197,255,.35);
    border-radius:6px;transition:background .15s,border-color .15s;
  }
  input[type="radio"]::before{ border-radius:50% }
  input[type="checkbox"]:checked::before,
  input[type="radio"]:checked::before{
    background:var(--acento);border-color:var(--acento);
  }
  /* marca de verificación y punto del radio */
  input[type="checkbox"]:checked::after{
    content:"";position:absolute;left:18px;top:14px;width:7px;height:13px;
    border:solid #06121f;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
  }
  input[type="radio"]:checked::after{
    content:"";position:absolute;inset:17px;border-radius:50%;background:#06121f;
  }
  input[type="checkbox"]:focus-visible::before,
  input[type="radio"]:focus-visible::before{
    border-color:var(--acento);box-shadow:0 0 0 3px rgba(56,189,248,.15);
  }
  input[type="checkbox"]:disabled::before,
  input[type="radio"]:disabled::before{ opacity:.5 }

  /* Botones */
  .boton{
    min-height:44px;
    padding:12px 20px;
  }

  /* Ojito de mostrar/ocultar clave (va dentro del campo) */
  .clave-ojo{ width:44px;min-height:44px;font-size:19px }
  .clave-env input{ padding-right:48px }

  /* Cerrar la ventana emergente */
  .modal .cerrar{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* Enlaces del menú y accesos a otros sistemas GEP */
  nav a{ min-height:44px;padding:11px 14px }
  .fila-sistemas a{ min-height:44px }

  /* Opciones del autocompletar */
  .auto-lista div{ min-height:44px;padding:12px;align-items:center }

  /* Filas de tabla que se pueden tocar */
  tr.clic td{ padding-top:13px;padding-bottom:13px }
}