/* ═══════════════════════════════════════════════════════════════════
   MOBILE-FIX.CSS — Adaptación móvil iOS/Android web
   Carga DESPUÉS de app.css, redesign-v3.css y chat-layout-patch.css
   para sobreescribir patologías de viewport, scroll y safe-area.
   ═══════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Dynamic Viewport Height (resuelve barra URL iOS Safari) ──
   100vh en iOS = altura con barra URL retraída → contenido tapado por
   la barra cuando aparece. dvh se ajusta dinámicamente al viewport
   visible real. svh (small) garantiza nunca pasarse. */
@supports (height: 100dvh) {
  html, body { height: 100dvh !important; }
  #mainLayout { height: 100dvh !important; }
  #mainContent { height: 100dvh !important; }
}

/* ── FIX 2: Modales bottom-sheet — usar dvh + safe-area ────────── */
@media (max-width: 768px) {
  .checkout-box,
  .pricing-modal,
  .exam-box,
  .grades-box,
  .parent-box,
  .group-box,
  #registerModal {
    max-height: 90dvh !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .grades-box { max-height: 92dvh !important; }
  .fc-modal,
  #factcheckBg .fc-modal { max-height: 95dvh !important; }
  .si-sheet { max-height: 88dvh !important; }

  /* Modales full-screen overlays: scroll contenido sin filtrar al body */
  #checkoutBg, #pricingBg, #examBg, #gradesBg, #parentBg,
  #groupBg, #registerBg, #fcBg, #factcheckBg, #siBg,
  #calBg, #mmBg, #resumenBg, #culturaBg, #evBg {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── FIX 3: Drawer accesible siempre + touch + safe-area ───────── */
.drawer-body {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: max(1.2rem, env(safe-area-inset-bottom)) !important;
}
.drawer {
  padding-top: env(safe-area-inset-top) !important;
  /* En mobile el drawer es 85vw — usar dvh para altura completa */
  height: 100dvh !important;
  max-height: 100dvh !important;
}
.drawer-overlay {
  height: 100dvh !important;
}

/* ── FIX 4: Header sticky + hamburguesa siempre alcanzable ─────── */
@media (max-width: 768px) {
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 250 !important;
    /* Notch iPhone: respetar safe-area pero sin romper altura fija */
    padding-top: env(safe-area-inset-top) !important;
    height: auto !important;
    min-height: calc(var(--capi-hdr-h, 50px) + env(safe-area-inset-top)) !important;
  }
  .hamburger {
    z-index: 251 !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ── FIX 5: Input bar — safe-area inferior (home indicator) ────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .input-bar {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom)) !important;
  }
}

/* ── FIX 6: Chat msgs containment (no pull-to-refresh accidental) ─ */
.chat-msgs,
#chatArea,
.app-view,
#view-progreso,
#view-practicar {
  overscroll-behavior-y: contain !important;
}

/* ── FIX 7: Touch optimization — eliminar delay 300ms iOS ──────── */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  .mbar-btn,
  .wc-card,
  .rk-tab,
  .gtab,
  .hamburger,
  .drawer-close,
  .hdr-icon-btn,
  .obra-card,
  [role="button"],
  [onclick] {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* Prevenir zoom iOS al focus en inputs (font-size:16px mínimo) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── FIX 8: ArtViewer panel mobile (segunda fila del grid) ─────── */
@media (max-width: 900px) {
  #artPanel {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 55dvh !important;
  }
  #appShell:has(#artPanel:not(.art-panel-hidden)),
  #appShell.art-active {
    grid-template-rows: 1fr 50dvh !important;
  }
}
@media (max-width: 600px) {
  #appShell:has(#artPanel:not(.art-panel-hidden)),
  #appShell.art-active {
    grid-template-rows: 1fr 55dvh !important;
  }
}

/* ── FIX 9: Lightbox imágenes (ArtViewer mobile) ───────────────── */
@media (max-width: 768px) {
  #lbImg {
    max-height: calc(100dvh - 130px) !important;
  }
}

/* ── FIX 10: Sala de Ideas modal full-screen mobile ─────────────── */
@media (max-width: 768px) {
  .si-bg {
    align-items: flex-end !important;
  }
  .si-sheet {
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── FIX 11: Verificador de Noticias (factcheckBg) ──────────────── */
@media (max-width: 768px) {
  #factcheckBg {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #factcheckBg .fc-modal,
  #factcheckBg > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 95dvh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}

/* ── FIX 12: Drop overlay (drag&drop foto) safe-area ──────────── */
.drop-ov {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

/* ── FIX 13: Botones de cierre (✕) más grandes en mobile ──────── */
@media (max-width: 768px) {
  .drawer-close,
  .grades-close button,
  .modal-close,
  [onclick*="close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    /* Apple HIG: target táctil mínimo 44pt */
  }
}

/* ── FIX 14: Mode bar (mbar) scroll horizontal smooth ─────────── */
@media (max-width: 768px) {
  .mbar {
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .mbar::-webkit-scrollbar { display: none !important; }
  .mbar-btn { scroll-snap-align: start !important; }
}

/* ── FIX 15: Body NUNCA bloquear scroll global involuntariamente ─
   Si por bug un modal se cierra sin limpiar body.style.overflow,
   el usuario quedaba sin poder scrollear. En mobile, garantizamos
   que body solo bloquea cuando una clase específica lo dice. */
@media (max-width: 768px) {
  body:not(.modal-open):not(.drawer-open) {
    /* Permitir scroll del body si no hay modal/drawer abierto */
    /* (no fuerza overflow:auto para no romper layout flex existente) */
  }
}

/* ── FIX 16: Tablet portrait (768–900px) — drawer también útil ─ */
@media (min-width: 769px) and (max-width: 900px) and (orientation: portrait) {
  /* En tablets verticales, conservar drawer accesible si sidebar oculta */
  .hamburger { display: flex !important; }
}