/* ═══════════════════════════════════════════════════════════════
 * mobile-fixes.css — Optimización mobile · Structura Pro
 * v1.0 · 2026-05-23
 *
 * Bugs reportados por usuarios:
 *   1) Info cortada en celular (landing + app)
 *   2) Botón feedback mal ubicado (tapa contenido / bottom-nav)
 *   3) Tablas desbordan horizontalmente
 *   4) Modales se cortan
 *
 * Aplica a iPhone (iOS Safari) + Android (Chrome) en viewports 320-480px.
 * Respeta safe-area-inset (notch iPhone) y dynamic island.
 *
 * Carga DESPUÉS de ui-enhancements.css.
 * ═══════════════════════════════════════════════════════════════ */

/* ─── FIX #1 · Prevenir scroll horizontal accidental ─────── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Excepción: contenedores que SÍ necesitan scroll horizontal interno */
.table-scroll,
.h-scroll,
[data-h-scroll] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ─── FIX #2 · Tablas grandes con wrapper de scroll ──────── */
@media (max-width: 768px) {
  table { max-width: 100% !important; }
  .comp-table, .data-table, .budget-table, .aiu-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    min-width: 0 !important;
  }
  .comp-table thead, .comp-table tbody, .comp-table tr {
    display: table-row-group;
  }
  .comp-table { display: table !important; }
  /* Hint visual de scroll */
  .data-table, .budget-table, .comp-table {
    background-image: linear-gradient(to right, transparent 95%, rgba(240,165,0,.10));
  }
}

/* ─── FIX #3 · Botones flotantes (FAB) reposicionados ────── */
@media (max-width: 768px) {
  /* Botón Feedback (qa-fab) · sube para no chocar con bottom-nav */
  #qa-fab,
  .qa-fab,
  [id="qa-fab"] {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    z-index: 8500 !important;
  }

  /* Botón AI Copilot ✨ · oculto en mobile (se accede desde menú) */
  #aic-floating-btn { display: none !important; }

  /* PWA install button · respeta safe-area */
  .pwa-install-btn,
  #pwa-install-btn {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
  }

  /* Notifications bell badge bien ubicada */
  #notif-bell { top: 50% !important; }
}

@media (max-width: 480px) {
  /* En mobile MUY pequeño, fab más chico */
  #qa-fab, .qa-fab { width: 44px !important; height: 44px !important; font-size: 18px !important; }
}

/* ─── FIX #4 · Modales adaptados a mobile (bottom sheet) ── */
@media (max-width: 640px) {
  .modal-bg {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    animation: mobileSheetUp 280ms cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  }
  /* Drag handle visual en top del modal */
  .modal::before {
    content: '';
    display: block;
    width: 44px; height: 4px;
    background: var(--border2);
    border-radius: 4px;
    margin: -6px auto 14px;
  }
}
@keyframes mobileSheetUp {
  from { transform: translateY(100%); opacity: 0.4; }
  to   { transform: translateY(0);    opacity: 1;   }
}

/* ─── FIX #5 · Bottom nav respeta safe-area ──────────────── */
@media (max-width: 768px) {
  .bottom-nav,
  #bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .content,
  main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─── FIX #6 · Topbar respeta notch iPhone (safe-area-top) ── */
@media (max-width: 768px) {
  .topbar {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(54px + env(safe-area-inset-top, 0px)) !important;
    min-height: 54px;
  }
}

/* ─── FIX #7 · Texto que se sale del card ────────────────── */
@media (max-width: 480px) {
  .project-card,
  .card,
  .modal,
  .empty-state {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Email/URL largos rompan línea */
  .modal a[href^="mailto"],
  .modal a[href^="http"],
  .topbar [class*="email"] {
    word-break: break-all;
  }
}

/* ─── FIX #8 · Inputs touch-friendly (44px min iOS HIG) ──── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button:not(.btn-sm):not(.icon-btn) {
    min-height: 44px;
    font-size: 16px !important;  /* evita zoom automático en iOS al focus */
  }
  /* Excepción: form-input que tiene tamaño custom */
  .form-input.btn-sm { min-height: 36px; font-size: 13px !important; }
}

/* ─── FIX #9 · Landing · hero sin scroll horizontal ──────── */
@media (max-width: 768px) {
  .hero, .hero-inner, .pricing-grid, .problem-grid, .features-grid {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* CTA buttons full-width en mobile */
  .hero-actions a,
  .cta-actions a {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  /* Logos sponsors no desbordan */
  .logos-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── FIX #10 · Comparativo de planes scrollable en mobile ─ */
@media (max-width: 600px) {
  .comp-table {
    font-size: 11px !important;
  }
  .comp-table th, .comp-table td {
    padding: 6px 8px !important;
  }
}

/* ─── FIX #11 · Sidebar móvil con overlay ───────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    z-index: 9000;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.0, 0.0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 8999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .sidebar-overlay.active { opacity: 1; pointer-events: auto; }
  .main { width: 100vw !important; }
}

/* ─── FIX #12 · Long text wraps + ellipsis cuando es necesario ─ */
@media (max-width: 480px) {
  .project-card .project-title,
  .topbar-title,
  .nav-grp-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* h1, h2 del landing más chicos en mobile */
  .hero-title { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.1; }
  .section-title { font-size: clamp(22px, 6vw, 32px) !important; }
}

/* ─── FIX #13 · Modal feedback (qa.js) en mobile ─────────── */
@media (max-width: 600px) {
  #qa-feedback-bg .modal {
    padding: 18px 16px !important;
  }
  #qa-feedback-bg .modal-title {
    font-size: 16px !important;
  }
  /* Grid de Tipo + Severidad en mobile: stack vertical */
  #qa-feedback-bg div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── FIX #14 · Tap targets más grandes ──────────────────── */
@media (max-width: 768px) {
  a, button {
    -webkit-tap-highlight-color: rgba(240,165,0,.18);
  }
}

/* ─── FIX #15 · Imágenes responsive por defecto ──────────── */
img:not([width]):not([style*="width"]) {
  max-width: 100%;
  height: auto;
}