/* ==========================================================================
   BERNAL & OLIVEROS — responsive.css  (cargar el ÚLTIMO, después de ops.css)
   Celular, tablet y escritorio. Corrige además dos choques que había:
   - polish.css dejaba el menú "sticky" también en celular (rompía el cajón).
   - command.css (cargado después de styles.css) pisaba el padding móvil de .main.
   ========================================================================== */

/* base segura */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
.main { min-width: 0; }
.main > * { min-width: 0; }
@supports (height: 100dvh) { .sidebar { height: 100dvh; max-height: 100dvh; } }

/* áreas táctiles cómodas en pantallas táctiles */
@media (pointer: coarse) {
  .btn, .nav-item, .soc-tab, .soc-chip, .lux-close-btn, .cmd-btn { min-height: 44px; }
  input, select, textarea { font-size: 16px; }          /* evita el zoom automático de iOS */
}

/* ------------------------------------------------ TABLET (≤ 1100px) */
@media (max-width: 1100px) {
  #appView { grid-template-columns: 240px 1fr; }
  .main { padding: 30px 28px; }
  .fd-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ------------------------------------------------ CELULAR / TABLET CHICA (≤ 900px) */
@media (max-width: 900px) {
  #appView { grid-template-columns: 1fr; }

  /* menú = cajón lateral (anula el "sticky" de polish.css) */
  .sidebar {
    position: fixed !important;
    inset: 40px auto 0 0;
    top: 40px;
    width: min(300px, 86vw);
    height: auto !important;
    max-height: none !important;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.16,1,.3,1);
    z-index: 90;
    box-shadow: 14px 0 40px rgba(0,0,0,.6);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar .sidebar-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* fondo oscuro detrás del cajón (lo crea responsive.js) */
  .nav-backdrop {
    position: fixed; inset: 40px 0 0 0; z-index: 80; background: rgba(0,0,0,.6);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .main { padding: 22px 16px 40px; max-width: 100%; }

  /* barra superior compacta */
  .luxury-top-strip { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .luxury-strip-left .strip-label, .luxury-strip-left .strip-sep { display: none; }
  .quantum-badge { font-size: 9.5px; padding: 3px 8px; }

  /* cabecera de cada vista */
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 22px; }
  .page-title { font-size: 24px; line-height: 1.2; }

  /* tablas: desplazamiento horizontal en vez de romper la página */
  .main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* formularios de búsqueda: campo arriba, botón abajo, ancho completo */
  .main :is(.search-row, .search-bar, .inline-form, .field-row, .form-row) { flex-direction: column; align-items: stretch; gap: 10px; }
  .main :is(.search-row, .search-bar, .inline-form) .btn { width: 100%; }
  .main .field-shell, .main .field input, .main input[type="text"], .main input[type="password"] { max-width: 100%; }

  /* tarjetas / paneles */
  .panel, .customer-card, .settings-card { padding-left: 18px; padding-right: 18px; }
  .settings-layout { grid-template-columns: 1fr; }
  .main :is(.stats-grid, .chain-summary, .stat-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* clientes */
  #customerResult { max-width: 100%; }
  #customerResult .customer-card { padding: 20px 18px 24px; }
  #customerResult .customer-row { grid-template-columns: 1fr; gap: 4px; }
  #customerResult .customer-row > :last-child { text-align: left; }
  .lux-m-card { min-width: 0; max-width: none; flex: 1 1 100%; border-radius: 8px; }
  .lux-m-card.sel::after { display: none; }
  .fd-grid { grid-template-columns: 1fr; gap: 36px; }
  .fd-btns .btn { flex: 1 1 auto; }

  /* movimientos globales */
  #recentMovementsList summary { grid-template-columns: 16px 1fr; row-gap: 4px; }
  #recentMovementsList summary > :nth-child(n+3) { grid-column: 2; }

  /* lockdown */
  .ld-stage { padding: 18px 14px; }
  .ld-codebar { flex-wrap: wrap; gap: 12px 16px; }
  .ld-count { margin-left: 0; }
  .ld-console { grid-template-columns: 1fr; justify-items: center; gap: 26px; }
  .ld-dock { width: 100%; align-items: center; text-align: center; }
  .ld-bay { width: 100%; max-width: 360px; }
  .ld-plate::after { display: none; }

  /* defensas / centro de mando */
  .cmd-top-right { flex-wrap: wrap; gap: 14px; }
  .cmd-authrow { flex-direction: column; align-items: stretch; }
  .cmd-authrow .cmd-btn, .cmd-authrow .cmd-field { width: 100%; }

  /* paleta y avisos */
  .denied-toast { left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: none; }
}

/* ------------------------------------------------ CELULAR (≤ 560px) */
@media (max-width: 560px) {
  .main { padding: 18px 12px 36px; }
  .page-title { font-size: 21px; }
  .main :is(.stats-grid, .chain-summary, .stat-grid) { grid-template-columns: 1fr; }
  .ld-code { font-size: 24px; letter-spacing: .1em; }
  .ld-key { width: 130px; }
  .ld-big { width: 112px; height: 112px; }
  .ld-ov-title { font-size: clamp(22px, 9vw, 34px); letter-spacing: .06em; text-align: center; padding: 0 14px; }
  .ld-ov-sub { padding: 0 18px; font-size: 13px; }
  .fd-head h3 { letter-spacing: .16em; }
  .lux-close-btn { width: 100%; justify-content: center; }
  .lux-result-bar { justify-content: stretch; }
  #recentMovementsList :is(b, strong) { font-size: 16px; }
}

/* ------------------------------------------------ MUY CHICO (≤ 380px) */
@media (max-width: 380px) {
  .main { padding: 14px 10px 32px; }
  .luxury-strip-left .strip-mono { font-size: 10px; }
  .quantum-badge { display: none; }
}

/* ------------------------------------------------ PANTALLAS MUY GRANDES */
@media (min-width: 1700px) {
  .main { max-width: 1680px; }
}

/* ------------------------------------------------ CELULAR HORIZONTAL (poca altura) */
@media (max-height: 520px) and (orientation: landscape) {
  .sidebar-header .brand-subtitle { display: none; }
  .ld-bay { height: 150px; }
}