/* ============================================================
   PerizIAl - Mobile Fixes Layer (v2 - defensive, non-aggressive)
   ------------------------------------------------------------
   Capa defensiva que solo actúa en viewports <=768px.
   Desktop NO se ve afectado.
   IMPORTANTE: NO tocamos sidebars ni elementos interactivos;
   los templates ya gestionan sus propios toggles con Tailwind.
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- 1. Overflow horizontal global (prevención) ---------- */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ---------- 2. Wrappers con overflow-x-auto funcionan mejor ---------- */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- 3. Media sin desbordar ---------- */
  img:not(.no-mobile-fix),
  video:not(.no-mobile-fix),
  iframe:not(.no-mobile-fix) {
    max-width: 100%;
    height: auto;
  }
  canvas:not(.no-mobile-fix) {
    max-width: 100%;
  }

  /* ---------- 4. Tablas sin wrapper: scroll horizontal defensivo ----------
     Solo actúa sobre tablas SIN clase (w-full) ni wrapper explícito.
     Tablas con overflow-x-auto como parent quedan intactas. */
  .pz-content table:not([class*="w-full"]):not(.no-mobile-fix) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ---------- 5. A4 / anchos fijos físicos (preview facturas) ---------- */
  [style*="width: 210mm"],
  [style*="width:210mm"],
  [style*="max-width: 210mm"],
  [style*="max-width:210mm"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- 6. Inputs: evita zoom automático de iOS ---------- */
  input:not([type="checkbox"]):not([type="radio"]):not(.no-mobile-fix):not(.pin-input),
  select:not(.no-mobile-fix),
  textarea:not(.no-mobile-fix) {
    font-size: 16px;
  }

  /* ---------- 7. PIN inputs (portal/pinAccess) ---------- */
  .pin-input {
    width: calc((100vw - 5rem) / 6) !important;
    max-width: 52px !important;
    min-width: 32px !important;
    height: 58px !important;
    font-size: 22px !important;
    padding: 0 !important;
  }

  /* ---------- 8. Modales: que quepan en viewport ----------
     Solo aplica a modales con .modal-overlay que envuelve un único hijo div. */
  .modal-overlay > div:only-child {
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 1.5rem);
    margin: 0.75rem auto;
  }

  /* ---------- 9. Tap highlight consistente ---------- */
  a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(79, 123, 255, 0.15);
  }

  /* ---------- 10. Touch targets mínimos para botones de icono pequeños ---------- */
  button.pz-icon-btn,
  a.pz-icon-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* ---------- 11. Texto muy grande: evita desborde ---------- */
  .text-5xl { font-size: clamp(1.875rem, 8vw, 3rem) !important; }
  .text-6xl { font-size: clamp(2rem, 10vw, 3.75rem) !important; }
  .text-7xl { font-size: clamp(2.25rem, 12vw, 4.5rem) !important; }

  /* ---------- 12. Canvas 3D con opción de ocultar via atributo ---------- */
  canvas[data-mobile="hide"] {
    display: none !important;
  }

  /* ---------- 13. Tablas dentro de cards compactas ---------- */
  .pz-glass table, .glass table {
    font-size: 0.85rem;
  }

  /* ---------- 14. Helpers opt-in para ocultar/mostrar ---------- */
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: revert !important; }
  .stack-on-mobile { flex-direction: column !important; }
  .wrap-on-mobile { flex-wrap: wrap !important; }
  .full-on-mobile { width: 100% !important; }
}

/* ============================================================
   Safe area (notch/status bar) — aplica a todas las pantallas
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   Breakpoint extra-small (iPhone SE, <=375px)
   ============================================================ */
@media (max-width: 375px) {
  .pin-input {
    width: calc((100vw - 4rem) / 6) !important;
    height: 52px !important;
    font-size: 20px !important;
  }
  .hide-on-xs { display: none !important; }
}

/* ============================================================
   Helpers visibilidad: desktop/mobile-only
   ============================================================ */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}

/* ============================================================
   UX Polish: touch feedback y smooth scroll (todas las pantallas)
   ============================================================ */
html { scroll-behavior: smooth; }

/* Mejor tap feedback: sin delay de 300ms, evita halos gris en iOS */
* { -webkit-tap-highlight-color: transparent; }
a:active, button:active, [role="button"]:active {
  transition: transform 0.08s ease-out;
}

/* Reduce motion si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Mobile floating buttons (FAB): respetar safe-area
   ============================================================ */
@media (max-width: 768px) {
  .fab, [class*="fab-"], .floating-action {
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
  }

  /* Inputs: cursor text más grueso para precisión touch */
  input, textarea, select, [contenteditable="true"] {
    caret-color: #4f7bff;
  }

  /* Scrollbars más finos en móvil */
  ::-webkit-scrollbar { width: 4px; height: 4px; }

  /* Focus ring visible para navegación con teclado externo */
  *:focus-visible {
    outline: 2px solid #4f7bff;
    outline-offset: 2px;
  }

  /* Evitar que el teclado iOS empuje layout fijo */
  @supports (height: 100dvh) {
    .h-screen { height: 100dvh; }
    .min-h-screen { min-height: 100dvh; }
  }

  /* Touch targets accesibles para links inline pequeños */
  a.touch-expand::after {
    content: '';
    position: absolute;
    inset: -8px;
  }
  a.touch-expand { position: relative; }
}