/* RESPONSIVE MOBILE — inicio
 * Modal autenticación (login / registro / forgot).
 * Solo ≤1024px. Desktop ≥1025px: estilos del <style> en LISTADO/modal-auth.php.
 * A1/A2/A3/A4 — táctiles, 16px iOS, teclado visualViewport.
 * RESPONSIVE MOBILE — fin (cabecera) */

@import url("../tokens/kasalia-rwd-tokens.css");

@media (max-width: 1024px) {
  /* RESPONSIVE MOBILE — inicio */

  #modal-overlay.modal-overlay.rwd-auth-vv {
    top: 0;
    right: 0;
    left: 0;
    bottom: auto;
    height: var(--rwd-auth-vv-h, 100dvh);
    transform: translateY(var(--rwd-auth-vv-top, 0px));
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: var(--rwd-space-xs);
    padding-bottom: max(var(--rwd-space-xs), env(safe-area-inset-bottom, 0px));
  }

  #modal-overlay.rwd-auth-vv .modal-auth {
    max-height: none;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* animation:none: el @keyframes fadeIn global (search-styles/map) deja scale(0.95)
     y encoge el hit-target por debajo de 44px. Solo MQ. */
  #modal-overlay .modal-auth {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    animation: none;
    transform: none;
  }

  #modal-overlay .modal-auth h2 {
    padding-right: var(--rwd-touch-target-min);
  }

  /* !important: vence font-size: 0.97em !important del aislamiento del modal.
     Sin 16px iOS hace zoom al enfocar (A2). */
  #modal-overlay .modal-auth input[type="text"],
  #modal-overlay .modal-auth input[type="email"],
  #modal-overlay .modal-auth input[type="password"],
  #modal-overlay .modal-auth input[type="tel"],
  #modal-overlay .modal-auth select {
    font-size: var(--rwd-font-base) !important;
    line-height: var(--rwd-line-height-base);
    min-height: var(--rwd-touch-target-min);
    padding: var(--rwd-space-xs) var(--rwd-space-sm);
  }

  #modal-overlay .modal-auth .modal-close {
    top: 0;
    right: 0;
    width: var(--rwd-touch-target-min);
    height: var(--rwd-touch-target-min);
    min-width: var(--rwd-touch-target-min);
    min-height: var(--rwd-touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--rwd-font-lg);
    line-height: 1;
    padding: 0;
  }

  #modal-overlay .modal-auth .auth-btn,
  #modal-overlay .modal-auth .auth-social-btn {
    min-height: var(--rwd-touch-target-min);
    padding-top: var(--rwd-space-xs);
    padding-bottom: var(--rwd-space-xs);
    box-sizing: border-box;
  }

  #modal-register .phone-prefix select,
  #modal-register #register-phone {
    height: var(--rwd-touch-target-min);
    min-height: var(--rwd-touch-target-min);
  }

  /* RESPONSIVE MOBILE — fin */
}