/* =============================================================
   JURIX — Mobile adapter v1
   Estilos responsive móvil/tablet añadidos sobre landing.css y styles.css.
   Cargar SIEMPRE después de los CSS principales para que las reglas ganen.
   ============================================================= */

/* ============================================
   1. ANTI-ZOOM iOS — inputs ≥16px global
   ============================================ */
@media (max-width: 1024px) {
  input, textarea, select,
  .field input, .field textarea, .field select,
  .cf-field input, .cf-field textarea, .cf-field select,
  .chat-input input, .rename-input {
    font-size: 16px !important;
  }
}

/* ============================================
   2. SAFE-AREA iOS — headers/footers fijos
   ============================================ */
.topbar {
  padding-top: env(safe-area-inset-top);
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
.footer {
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ============================================
   3. NAV PÚBLICA → HAMBURGUESA (≤980px)
   El JS inyecta .nav-toggle y .nav-overlay.
   landing.css:986 actualmente hace `display:none` a la nav,
   aquí restauramos su visibilidad como off-canvas.
   ============================================ */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 10px;
  position: relative;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink, #0e0e10);
  margin: 4px 0;
  transition: transform .2s ease, opacity .2s ease;
  border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,14,16,.45);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* La .mobile-menu vive directamente en el body (insertada por JS), por lo que
   está fuera del stacking context del .topbar y los clicks no son interceptados
   por el overlay. */
.mobile-menu {
  display: none;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 320px);
  height: 100vh;
  background: #fff;
  padding: max(72px, env(safe-area-inset-top) + 56px) 24px max(24px, env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 9995;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(14,14,16,.18);
  gap: 6px;
  margin: 0;
}
.mobile-menu.open { transform: translateX(0); }
/* Estilos para los enlaces de navegación (no .btn) — tipografía limpia */
.mobile-menu a:not(.btn),
.mobile-menu .link:not(.btn) {
  padding: 14px 18px;
  border-radius: 10px;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  width: 100%;
  color: var(--ink, #0e0e10);
  text-decoration: none;
  font-weight: 500;
}
.mobile-menu a:not(.btn):hover,
.mobile-menu a:not(.btn):focus-visible,
.mobile-menu .link:not(.btn):hover,
.mobile-menu .link:not(.btn):focus-visible {
  background: var(--bg-2, #f7f7f9);
}
/* Los .btn (Entrar / Probar demo) mantienen sus colores originales:
   .btn-dark: bg negro + color blanco
   .btn-ghost-light: transparente + color tinta
   .btn-violet: violeta + color blanco
   No tocamos color/background; solo aseguramos layout y tamaño correctos. */
.mobile-menu .btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}
.mobile-menu .mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e8e8ec);
}
.mobile-menu .mobile-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

@media (max-width: 980px) {
  /* mostrar el botón hamburguesa — fixed al body (no dentro de stacking del topbar) */
  .nav-toggle {
    display: inline-flex !important;
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top) + 10px);
    right: max(14px, env(safe-area-inset-right) + 10px);
    z-index: 9999 !important;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(14,14,16,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* mostrar la mobile-menu (en desktop sigue oculta con display:none) */
  .mobile-menu { display: flex !important; }

  /* topbar: ocultar la nav original y las actions, todo va en el menú móvil */
  .topbar nav { display: none !important; }
  .topbar .actions { display: none !important; }
  .topbar-inner { padding-right: 60px; /* hueco para botón hamburguesa */ }
}

/* ============================================
   4. SIDEBAR AUTENTICADA → DRAWER (≤1024px)
   styles.css:558 actualmente hace `display:none` a la sidebar.
   Aquí la restauramos como drawer y añadimos topbar móvil.
   ============================================ */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top) + 8px);
  left: max(12px, env(safe-area-inset-left) + 8px);
  z-index: 9999;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--border, #e2e2df);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(17,17,16,.08);
  cursor: pointer;
  padding: 10px;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink, #111110);
  margin: 4px 0;
  transition: transform .2s ease, opacity .2s ease;
  border-radius: 2px;
}
.sidebar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sidebar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sidebar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,16,.45);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  /* mostrar el botón hamburguesa de sidebar */
  .app .sidebar-toggle { display: inline-flex; }

  /* layout app: ya no es 252px + 1fr, todo es 1 columna */
  .app {
    grid-template-columns: 1fr !important;
  }

  /* sobreescribir el display:none de styles.css:559 */
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: min(80vw, 280px) !important;
    height: 100vh !important;
    background: var(--paper, #fff) !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 9995 !important;
    padding-top: max(20px, env(safe-area-inset-top) + 12px) !important;
    box-shadow: 8px 0 32px rgba(17,17,16,.18);
    overflow-y: auto;
    margin: 0 !important;
  }
  .sidebar.open { transform: translateX(0); }

  /* main content: hueco para el botón hamburguesa */
  .main {
    padding: max(64px, env(safe-area-inset-top) + 56px) 16px 24px !important;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-header h1 { font-size: 1.45rem; }
}

/* ============================================
   5. INPUTS DE BÚSQUEDA — quitar min-width fijos en móvil
   Combate los inline `min-width: 260-320px` en cases.html,
   documents.html, case.html, dashboard.html.
   ============================================ */
@media (max-width: 768px) {
  .topbar input[type="search"],
  .topbar input[type="text"],
  .page-header input[type="search"],
  .page-header input[type="text"],
  input[placeholder*="Buscar"],
  input[placeholder*="buscar"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Filas con search + filtros: apilar verticalmente */
  .page-header > div,
  .toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ============================================
   6. TABLAS — wrap con scroll horizontal (audit, devices)
   y cards apiladas (documents) en móvil.
   ============================================ */
@media (max-width: 768px) {
  /* Default: scroll horizontal para cualquier <table> sin wrapper. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* documents.html: convertir docs-table en cards apiladas. */
  .docs-table { display: block; border: 0; background: transparent; box-shadow: none; }
  .docs-table thead { display: none; }
  .docs-table tbody, .docs-table tr { display: block; width: 100%; }
  .docs-table tr {
    background: var(--paper, #fff);
    border: 1px solid var(--border, #e2e2df);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
  }
  .docs-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 !important;
    border: 0 !important;
    font-size: .92rem;
  }
  .docs-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ink-3, #666662);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    flex-shrink: 0;
  }
  .docs-table td:first-child { font-weight: 600; padding-top: 0 !important; }
  .docs-table td:first-child::before { display: none; }
}

/* ============================================
   7. GRIDS — colapsar a 1 columna en móvil
   ============================================ */
@media (max-width: 768px) {
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .features-grid, .feat-grid, .sources-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  /* profile.html inline grid 2-col → 1 col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .cf-row2 { grid-template-columns: 1fr !important; }
}

/* ============================================
   8. TOUCH TARGETS — mínimo 44×44 px
   ============================================ */
@media (max-width: 768px) {
  a.btn, button.btn, .btn,
  .topbar nav .link,
  .sidebar nav a,
  .tabs a,
  .dropdown-menu button,
  .sidebar .logout-btn,
  .quick-opts button,
  button[type="submit"],
  button[type="button"] {
    min-height: 44px;
  }

  /* CTA full-width en móvil */
  .auth-card .btn,
  .auth-card .google-btn,
  .cta-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   9. HERO LANDING — más aire en móvil
   ============================================ */
@media (max-width: 640px) {
  .hero { padding: 24px 0 48px; }
  .hero-figure { max-width: 360px; }
  .robi-card { display: none; } /* ahorra espacio en pantalla pequeña */
  .announce-bar { font-size: .8rem; padding-left: 16px; padding-right: 36px; }
  .announce-bar a { display: inline-block; margin-top: 4px; }
  .container { padding: 0 16px; }
  .section-product { padding: 56px 0 64px; }
  .page-section { padding: 48px 0; }
  .footer .row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer nav { flex-wrap: wrap; }
}

/* ============================================
   10. APP-MOCKUP en móvil — colapsa sidebar interna
   landing.css:990 ya esconde la sidebar del mockup, refinamos.
   ============================================ */
@media (max-width: 768px) {
  .app-mockup .messages { padding: 16px; }
  .app-mockup .msg .bub { max-width: 92%; }
  .app-mockup .chat-header { flex-direction: column; gap: 10px; }
}

/* ============================================
   11. CHAT (assistant.html) en móvil
   ============================================ */
@media (max-width: 768px) {
  .chat-shell {
    height: calc(100vh - 120px);
    height: calc(100dvh - 120px); /* mejor con dynamic viewport */
  }
  .bubble { max-width: 94%; font-size: .92rem; }
  .chat-input { padding: 10px; }
  .chat-input .send { padding: .55rem .85rem; }
}

/* ============================================
   12. AUTH PAGES — padding razonable en móvil estrecho
   ============================================ */
@media (max-width: 480px) {
  .auth-shell { padding: 16px; }
  .auth-card { padding: 24px 18px; border-radius: 14px; }
  .auth-card h1 { font-size: 1.35rem; }
}

/* ============================================
   13. EVITAR SCROLL HORIZONTAL ACCIDENTAL
   Cinturón y tirantes — si algún elemento se escapa, no rompe.
   ============================================ */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

/* ============================================
   14. BLOQUEO DE SCROLL DEL BODY cuando un drawer/menú está abierto
   IMPORTANTE: NO usar touch-action:none en el body porque
   desactiva los gestos táctiles incluido el tap en los links
   del menú abierto en iOS.
   ============================================ */
body.menu-open {
  overflow: hidden;
}

/* ============================================
   15. REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}