/* ===== YISUS SHOP EN EL TELÉFONO =====
   Lo que se ajusta en pantallas chicas en TODA la tienda. Va al final del
   <head> de cada página, después de sus propios estilos, para ganarles.
   Lo que es de una sola página (Mi cuenta, el pedido, el juego) vive en esa
   página. Si cambias este archivo, sube el ?v= donde se enlaza: el navegador
   guarda los .css 4 horas. */

/* Que el teléfono no agrande la letra por su cuenta al girar la pantalla. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Sin el recuadro gris que pone Android al tocar: cada botón ya tiene su efecto. */
a, button, [role="button"], label, summary { -webkit-tap-highlight-color: transparent; }

/* iPhone acerca la página cuando tocas un campo con letra de menos de 16 px
   (el ID, el correo, la clave de rastreo…) y no la regresa. Con 16 px no. */
@media (max-width: 820px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }
}

/* El logo trae su alto escrito en la etiqueta (style="height:39px"), que le
   gana a cualquier hoja: por eso aquí va con !important. */
@media (max-width: 720px) {
  .logo img { height: 32px !important; }
}

@media (max-width: 480px) {
  /* ── Barra de arriba ──
     Logo + "Iniciar sesión" + "Menú" no cabían: el botón terminaba fuera de
     la pantalla y TODA la página se podía mover de lado (y el teléfono la
     alejaba). Ahora el menú es solo el ícono y lo demás se compacta. */
  .navbar .navbar-inner { gap: 8px; }
  .logo img { height: 26px !important; }
  .nav-auth-mobile { height: 40px; padding: 0 12px; font-size: 12.5px; flex-shrink: 0; }
  .hamburger {
    width: 42px; height: 42px; padding: 0; gap: 0; flex-shrink: 0;
    justify-content: center; border-radius: 12px;
    font-size: 0;                      /* la palabra "Menú" se esconde, el ícono no */
  }

  /* ── Lo que se toca con el dedo: mínimo ~40 px ── */
  .qty-btn, #pp-menos, #pp-mas { min-width: 40px; min-height: 40px; }
  .btn-remove { min-width: 40px; min-height: 40px; }
  .yi-pie-cols a, .yi-pie-cols button { padding: 9px 0; margin-bottom: 0; }

  /* Los avisos de abajo, a lo ancho y sin quedar bajo la barra del iPhone. */
  #toast-container { left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ── Lo que se toca y se lee en el teléfono (medido página por página el 2026-10-19):
   botones y enlaces de menos de ~40 px de alto y letra de menos de 12 px ── */
@media (max-width: 640px) {
  a.logo { display: inline-flex; align-items: center; min-height: 40px; }
  /* portada: flechas del marco y los botones del fondo animado */
  .yi-marco-flecha { width: 40px !important; height: 40px !important; }
  .yi-ciudad-pausa { min-height: 36px !important; padding: 6px 12px !important; font-size: 12px !important; }
  .yi-fondo-tema button { min-height: 36px !important; font-size: 12px !important; }
  .yi-marco-tit, .yi-ojo, .yi-bento-ojo { font-size: 12px; }
  /* tienda: "Ver por categoría" */
  .yi-cab-fila > a { display: inline-flex; align-items: center; min-height: 40px; }
  /* juego: filtros, orden y tarjetas */
  .gfil-reset { min-height: 40px; padding-left: 12px; padding-right: 12px; }
  .gfil-cerrar { min-width: 40px; min-height: 40px; }
  .gfil-buscar input { min-height: 40px; }
  .gcat-orden select { min-height: 40px; }
  .gcat-orden label { display: inline-flex; align-items: center; min-height: 40px; }
  .qty-input { min-width: 44px; }
  .pcard-info { display: inline-flex; align-items: center; min-height: 40px; padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .ghero-badge, .pstat, .gfil-moneda { font-size: 12px; }
  .product-tag-badge { font-size: 11px; }
  /* producto: las migas de arriba */
  #crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
  /* términos: el índice */
  .tos-indice a { display: block; padding-top: 9px; padding-bottom: 9px; }
  /* entrar: ¿olvidaste tu contraseña? (su estilo va en la etiqueta) */
  #btn-olvide { min-height: 40px; padding: 8px 12px !important; }
  /* formulario de reposición y suscripciones */
  #borrar { min-height: 40px; }
  a.back { display: inline-flex; align-items: center; min-height: 40px; }
  /* Mi cuenta: Animación y Fondo, etiquetas chicas */
  .pf-btn, .pf-acc .yi-ciudad-pausa { min-height: 38px !important; }
  .rw-nuevo, .odesc { font-size: 12px; }
}

/* Teléfonos muy angostos (iPhone SE y parecidos): no cabe "Iniciar sesión"
   junto al logo; se queda en el menú (☰), que ya lo trae. */
@media (max-width: 350px) {
  .logo img { height: 23px !important; }
  .nav-auth-mobile { display: none !important; }
  .hamburger { margin-left: auto; }
}