/* ══════════════════════════════════════════════════════
   BulonSys — mobile.css
   Responsive completo: landing + prototipos app interna
   Agregar <link> DESPUÉS de bulonsys-base.css e index.css
   ══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   TOKENS MÓVILES: mínimo scroll horizontal, tap targets
   ───────────────────────────────────────────────────── */
:root {
  --tap: 44px;          /* altura mínima tap target */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─────────────────────────────────────────────────────
   TABLET (≤ 1024px)
   ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* ── LANDING: hero dos columnas → una ── */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-left .eyebrow,
  .hero-left h1,
  .hero-left p {
    text-align: center;
  }
  .hero-actions {
    justify-content: center;
  }

  /* ── PRICING: dos columnas → una ── */
  .pricing-section {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ── FICHA PRODUCTO: aside lateral → arriba ── */
  .ficha-layout {
    grid-template-columns: 1fr;
  }
  .ficha-aside {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* ── DETALLE LAYOUT ── */
  .detail-layout {
    grid-template-columns: 1fr;
  }

  /* ── CLIENTES DETALLE ── */
  .cli-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────
   MÓVIL GRANDE (≤ 768px)
   ───────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ══ LANDING HEADER ══ */
  header {
    padding: 1rem 1.25rem;
  }
  .header-pill { display: none; }

  /* ══ LANDING HERO ══ */
  .hero {
    padding: 3rem 1.25rem 2.5rem;
  }
  .hero h1 {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    letter-spacing: -1px;
  }
  .hero p {
    font-size: 15px;
    max-width: 100%;
  }

  /* CTA card dentro del hero */
  .cta-card {
    border-radius: 14px;
    padding: 22px 18px 18px;
  }
  .cta-btn-wa,
  .cta-btn-mail {
    min-height: var(--tap);
    font-size: 15px;
  }

  /* ══ SECTION HEADER (landing) ══ */
  .sec-hd {
    padding: 2rem 1.25rem 1rem;
  }

  /* ══ CARDS GRID (módulos) ══ */
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 1.5rem;
  }

  /* ══ FEATURES GRID en modal ══ */
  .feat-grid {
    grid-template-columns: 1fr;
  }

  /* ══ MODAL: más compacto ══ */
  .modal-hd,
  .modal-body {
    padding: 1.25rem;
  }
  .modal-title { font-size: 18px; }

  /* ══ FOOTER ══ */
  footer {
    padding: 1.5rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* ══ APP: TOPBAR ══ */
  .topbar {
    padding: 0 1rem;
  }
  .topbar-module { display: none; }
  .topbar-btn:not(.topbar-btn-accent) { display: none; }

  /* ══ APP: SIDEBAR OCULTO ══ */
  .sidebar,
  .cli-nav { display: none; }

  /* ══ APP: MAIN ══ */
  .main {
    padding: 1rem;
  }
  .cli-content { padding: 1rem; }

  /* ══ APP: PAGE HEADER ══ */
  .page-hd {
    flex-direction: column;
    gap: 12px;
  }
  .page-title { font-size: 19px; }
  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* ══ APP: STATS / METRICS ══ */
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }
  .metrics-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* ══ TABLA CLIENTES: ocultar columnas secundarias ══ */
  .cli-table thead th:nth-child(n+4),
  .cli-table tbody td:nth-child(n+4) {
    display: none;
  }
  /* Hacer scroll horizontal en tablas que no se pueden colapsar */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ══ MOVIMIENTOS CC: simplificar ══ */
  .mov-cc-row {
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
    padding: 8px 1rem;
  }
  .mov-saldo { display: none; }

  /* ══ TOOLBAR / FILTERS ══ */
  .toolbar,
  .cli-toolbar,
  .filters-bar {
    gap: 6px;
  }
  .search-box { max-width: 100%; flex: 1; }

  /* ══ PRICING TABLE ══ */
  .pt-hours { display: none; }

  /* ══ FICHA PRODUCTO: specs ══ */
  .specs-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ══ CONTACT MODAL ══ */
  .contact-modal { max-width: 100%; }
  .cf-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cf-full { grid-column: 1; }

  /* ══ PACK CARDS ══ */
  .pricing-packs { gap: 12px; }
  .pack-card { padding: 16px 18px; }

  /* ══ METRICS MODAL ══ */
  .metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────
   MÓVIL PEQUEÑO (≤ 480px)
   ───────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ══ LANDING ══ */
  header { padding: 0.9rem 1rem; }
  .logo-sub { display: none; }

  .hero { padding: 2.5rem 1rem 2rem; }
  .hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
    letter-spacing: -0.5px;
  }
  .hero p { font-size: 14px; }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-actions a,
  .hero-actions button {
    width: 100%;
    justify-content: center;
    min-height: var(--tap);
  }

  /* Botones CTA card: full width en móvil pequeño */
  .cta-btn-wa,
  .cta-btn-mail {
    width: 100%;
  }

  /* ══ APP: TOPBAR ══ */
  .topbar { gap: 8px; }
  .topbar-logo-name { font-size: 14px; }

  /* ══ STATS: una sola columna ══ */
  .stats-row { grid-template-columns: 1fr; }
  .metrics-row { grid-template-columns: 1fr 1fr; }

  /* ══ PAGE TITLE ══ */
  .page-title { font-size: 17px; letter-spacing: -0.5px; }

  /* ══ TABS: scroll horizontal ══ */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }

  /* ══ BTN: tap target ══ */
  .btn { min-height: 36px; }
  .btn-lg { min-height: var(--tap); }

  /* ══ TOPBAR BOTÓN ACENTO ══ */
  .topbar-btn-accent { padding: 6px 14px; font-size: 12px; }

  /* ══ FOOTER LANDING ══ */
  footer { padding: 1.25rem 1rem; }
  .f-tags { gap: 6px; }
  .f-tag { font-size: 9px; padding: 3px 8px; }

  /* ══ FICHA PRODUCTO: specs ══ */
  .specs-grid { grid-template-columns: 1fr; }

  /* ══ PRICING TABLE: ocultar precio, mostrar sólo módulo ══ */
  .pt-price { min-width: 70px; font-size: 12px; }

  /* ══ MODAL: casi full screen ══ */
  .overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-hd { padding: 1rem; }
  .modal-body { padding: 1rem; }

  /* ══ CONTACT FORM ══ */
  .cf-checks { gap: 6px; }
  .cf-check-item { font-size: 12px; padding: 5px 8px; }

  /* ══ COBRO PANEL ══ */
  .cobro-saldo-val { font-size: 26px; letter-spacing: -1px; }
  .payment-methods { grid-template-columns: 1fr 1fr; gap: 5px; }

  /* ══ SAFE AREA: iPhone con notch/home bar ══ */
  .topbar { padding-top: max(0px, env(safe-area-inset-top)); }
  footer,
  .topbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .main, .cli-content {
    padding-bottom: calc(1rem + var(--safe-b));
  }
}

/* ─────────────────────────────────────────────────────
   MÓVIL MUY PEQUEÑO (≤ 360px) — dispositivos chicos
   ───────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.6rem; }
  .cta-title { font-size: 17px; }
  .page-title { font-size: 16px; }
  .stat-val, .metric-val { font-size: 18px; }
  .topbar-logo-name { display: none; }   /* solo ícono BS en pantallas muy chicas */
  .pack-cta, .cf-submit, .cta-btn-wa { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────
   UTILIDADES GLOBALES
   ───────────────────────────────────────────────────── */

/* Evita que nada rompa el ancho en móvil */
img, video, iframe, table { max-width: 100%; }

/* Scroll horizontal suave en tablas sin colapsar */
.table-wrap, .tabs {
  -webkit-overflow-scrolling: touch;
}

/* Focus visible (accesibilidad táctil) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}