/* SPRINT_RESPONSIVE_V1 - CSS responsive global FiberGlobal OS
   Aplica solo a viewport <= 768px. Desktop intacto. */

/* ============ MOBILE (≤ 768px) ============ */
@media (max-width: 768px) {

  /* Sidebar: oculto por default, slide-in con .open */
  #sidebar, .sb, [id*="sidebar"]:not(#cmdk-modal) {
    transform: translateX(-100%);
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
  }
  #sidebar.open, .sb.open, [id*="sidebar"].open {
    transform: translateX(0);
  }

  /* Overlay sidebar */
  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 998;
  }
  #sidebar-overlay.open { display: block; }

  /* Botón hamburger global (lo crea el JS) */
  #fg-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 42px;
    height: 42px;
    background: #fff;
    color: #1a2744;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    line-height: 1;
  }
  #fg-nav-toggle:active { transform: scale(.95); }

  /* Container principal: pierde el margen del sidebar */
  .container, .content, .main, [class*="page-content"] {
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 60px !important; /* espacio para el toggle */
    max-width: 100% !important;
  }

  /* Forms: 1 columna en mobile */
  .form-row,
  .form-grid,
  .opts,
  .grid-2,
  .row-2,
  .two-cols {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Cards y boxes: padding reducido */
  .card, .box, .panel, .stat-card, .cuenta-box {
    padding: 14px !important;
    margin-bottom: 12px !important;
  }

  /* Stat cards: full width stack */
  .stat-card, .cuenta-box, .kpi-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Forms: inputs y selects más grandes (anti-zoom iOS) */
  .form-input, .form-select, .search-input,
  input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="tel"], input[type="password"],
  select, textarea {
    font-size: 16px !important;
  }

  /* Botones */
  .btn {
    padding: 11px 18px !important;
    font-size: 14px !important;
    min-height: 44px; /* touch target */
  }
  /* Botones en flex container: wrap */
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* Tablas con scroll horizontal */
  table {
    font-size: 12px !important;
    min-width: 100%;
  }
  th, td {
    padding: 6px 5px !important;
    white-space: nowrap;
  }
  .table-wrap, .table-scroll, [style*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* cli-info / row de info: stack vertical */
  .cli-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .cli-saldo {
    text-align: left !important;
    width: 100%;
  }

  /* CmdK hero: más chico */
  #cmdk-hero {
    margin: 12px 0 16px !important;
    padding: 11px 16px !important;
    max-width: 100% !important;
  }
  #cmdk-hero .cmdk-shortcut {
    display: none;
  }

  /* CmdK modal mobile */
  #cmdk-modal {
    width: 96vw !important;
  }
  #cmdk-overlay {
    padding-top: 6vh !important;
  }

  /* Modales / overlays */
  .modal, .ov, [class*="overlay"] > [class*="content"] {
    max-width: 96vw !important;
    width: 96vw !important;
    margin: 12px !important;
  }

  /* Headers de página */
  h1, .page-title { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }

  /* Topbar / header */
  .topbar, .top-bar, .header-bar {
    padding: 8px 12px !important;
    flex-wrap: wrap;
  }

  /* Listas y resultados con scroll */
  .results, .dropdown-results {
    max-height: 240px !important;
  }
}

/* ============ MOBILE small (≤ 480px) ============ */
@media (max-width: 480px) {
  body { font-size: 13px; }

  /* Container: padding aún menor */
  .container, .content, .main, [class*="page-content"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Cards aún más compactas */
  .card, .box, .panel { padding: 12px !important; }

  /* Botones full width en steps */
  .step-actions .btn,
  [style*="justify-content:flex-end"] .btn {
    width: 100%;
  }
}

/* ============ Print ============ */
@media print {
  #fg-nav-toggle, #sidebar, #sidebar-overlay, #cmdk-hero, #cmdk-overlay {
    display: none !important;
  }
}