/* ============================================================
   mobile.css — Mobile-only overrides (max-width: 768px)
   ------------------------------------------------------------
   Cargado DESPUES de theme.css en todos los templates.
   No tocar estilos existentes — solo agregar reglas mobile.

   Opt-outs disponibles:
     .no-zoom-fix     → input que quiere mantener font chico
     .no-tap-min      → boton/link que NO debe forzar 44x44
     .no-font-min     → texto que puede ser <11px (legal, etc.)

   Patrones reusables:
     .mobile-fullscreen-modal           → modal fullscreen en mobile
     [data-mobile-fullscreen="true"]    → idem, via atributo
   ============================================================ */


/* ---------- 1. Safe-area variables (notch / home indicator) ----------
   Van FUERA del media query: en desktop env() devuelve 0px y no
   afecta. Asi cualquier template puede usar var(--safe-bottom) sin
   chequear viewport.
------------------------------------------------------------------------ */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}


/* ============================================================
   Mobile-only rules (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 2. iOS zoom fix ----------
     Safari iOS hace zoom-on-focus si el input tiene font-size < 16px.
     Es muy disruptivo. Forzamos 16px en todos los inputs salvo los
     que opten out con .no-zoom-fix.
  -------------------------------------- */
  input[type="text"]:not(.no-zoom-fix),
  input[type="email"]:not(.no-zoom-fix),
  input[type="tel"]:not(.no-zoom-fix),
  input[type="number"]:not(.no-zoom-fix),
  input[type="password"]:not(.no-zoom-fix),
  input[type="date"]:not(.no-zoom-fix),
  input[type="datetime-local"]:not(.no-zoom-fix),
  input[type="time"]:not(.no-zoom-fix),
  input[type="month"]:not(.no-zoom-fix),
  input[type="week"]:not(.no-zoom-fix),
  input[type="url"]:not(.no-zoom-fix),
  input[type="search"]:not(.no-zoom-fix),
  select:not(.no-zoom-fix),
  textarea:not(.no-zoom-fix) {
    font-size: 16px !important;
  }


  /* ---------- 3. Touch target minimum (44x44) ----------
     Apple HIG / Material Design recomiendan minimo 44x44 px tappable.
     Excluimos:
       - .cl-internal (Clerk widgets — tienen su propio sizing)
       - .no-tap-min (opt-out manual)
       - chips/badges/iconos sin click no listados aqui
  ------------------------------------------------------- */
  button:not(.cl-internal):not(.no-tap-min),
  .btn:not(.no-tap-min),
  .btn-sm:not(.no-tap-min),
  .nav-btn:not(.no-tap-min),
  .tab:not(.no-tap-min),
  .tab-btn:not(.no-tap-min),
  .sidebar-btn:not(.no-tap-min),
  .sidebar-btn-compact:not(.no-tap-min),
  a.btn:not(.no-tap-min),
  a.nav-link:not(.no-tap-min),
  a.tab-link:not(.no-tap-min) {
    min-height: 44px;
    min-width: 44px;
  }


  /* ---------- 4. Tap feedback (premium feel) ----------
     - Quitamos el highlight gris/azul default de mobile browsers.
     - Damos un opacity bump rapido en :active para feedback claro.
  ------------------------------------------------------- */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  button:active,
  a:active {
    opacity: 0.85;
    transition: opacity 0.1s ease;
  }


  /* ---------- 5. Min font-size en mobile ----------
     Texto <11px es ilegible a distancia de brazo. CSS no permite
     "max(11px, valor-actual)" dinamico, asi que aplicamos un
     baseline razonable y subimos los helpers de texto chico.
  --------------------------------------------------- */
  body {
    font-size: 14px;
  }

  small:not(.no-font-min),
  .small:not(.no-font-min),
  .text-xs:not(.no-font-min) {
    font-size: max(11px, 0.75rem);
  }


  /* ---------- 6. Reusable: fullscreen modal en mobile ----------
     Patron a aplicar a modales que en mobile deben tomar toda la
     pantalla (mejor UX que un dialog flotante chico).
     Uso:
       <div class="modal mobile-fullscreen-modal"> ...
       <div class="modal" data-mobile-fullscreen="true"> ...
  ----------------------------------------------------------------- */
  .mobile-fullscreen-modal,
  [data-mobile-fullscreen="true"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 9995;
    background: var(--bg-secondary, #1a1a1a);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

}