/* ═══════════════════════════════════════════════════════════════
   DeltaGuard — Mobile & PWA Styles
   Responsive breakpoint: ≤768px
   iPhone safe-area: env(safe-area-inset-*)
═══════════════════════════════════════════════════════════════ */

/* ── Safe area: notch y Dynamic Island (iPhone 13 Pro Max, 14, 15…) ── */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* El header sticky ocupa el area del notch — añadir padding-top equivalente */
@supports (padding-top: env(safe-area-inset-top)) {
  header {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION DOCK — oculto en desktop, visible en mobile
   [DG-482] Píldora flotante de vidrio (Liquid Glass) con iconos de línea.
   Vidrio líquido: capa clara poco desenfocada + orilla con más refracción y luz.
   [DG-484] menuHome.js lo mueve con el scroll (transform en línea, píxel a píxel).
════════════════════════════════════════════════════════════════ */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  /* Casi pegado a la barra de inicio del iPhone, como los docks de iOS 26 (WhatsApp ≈ 22 pt
     del borde): la zona segura (34 pt) menos 12; sin zona segura, 10 px */
  bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 12px));
  z-index: 1000;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  will-change: transform;
}

/* Cuerpo del vidrio: casi transparente y poco desenfocado, como el dock de iOS 26/WhatsApp:
   lo de detrás se lee, suavizado. El desenfoque va en una capa propia (no en el nav) para
   que la orilla pueda leer el mismo fondo y refractarlo aparte. */
#mobile-bottom-nav::before,
#mobile-bottom-nav::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}
#mobile-bottom-nav::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(14, 22, 34, 0.26);
  backdrop-filter: blur(3px) saturate(170%);
  -webkit-backdrop-filter: blur(3px) saturate(170%);
}
/* Orilla: más desenfoque y más luz solo en los extremos redondeados y en el canto de arriba
   y abajo, como la luz que se dobla en el borde de un cristal grueso */
#mobile-bottom-nav::after {
  backdrop-filter: blur(7px) saturate(150%) brightness(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(150%) brightness(1.15);
  -webkit-mask: linear-gradient(90deg, #000, transparent 11%, transparent 89%, #000),
                linear-gradient(180deg, #000, transparent 20%, transparent 80%, #000);
  mask: linear-gradient(90deg, #000, transparent 11%, transparent 89%, #000),
        linear-gradient(180deg, #000, transparent 20%, transparent 80%, #000);
}

/* Reflejos del canto: línea de luz arriba y abajo y brillo en los extremos */
#mobile-bottom-nav .mob-nav-inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  padding: 6px;
  justify-content: space-between;
  gap: 2px;
  border-radius: 29px;
  /* Curvatura de lente: el canto de arriba recoge luz, el de abajo se oscurece al doblarse
     el vidrio, y los extremos redondeados tienen un filo brillante con halo hacia dentro */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 3px 4px -2px rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -4px 5px -3px rgba(0, 0, 0, 0.30),
    inset 3px 0 2px -2px rgba(255, 255, 255, 0.35),
    inset -3px 0 2px -2px rgba(255, 255, 255, 0.35),
    inset 18px 0 14px -14px rgba(255, 255, 255, 0.18),
    inset -18px 0 14px -14px rgba(255, 255, 255, 0.18);
}

.mob-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 46px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 23px;
  cursor: pointer;
  color: rgba(226, 234, 245, 0.62);
  transition: color 0.2s, background 0.25s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.mob-nav-btn:active { transform: scale(0.92); }

.mob-nav-btn .mob-nav-icon { display: flex; line-height: 0; }

.mob-nav-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mob-nav-btn.active svg { stroke-width: 2.2; }

/* Color por bot en el elemento activo */
.mob-nav-btn[data-tab="hedge"].active         { color: #f87171; background: rgba(239, 68, 68, 0.16); }
.mob-nav-btn[data-tab="linear_hedger"].active { color: #22d3ee; background: rgba(6, 182, 212, 0.16); }
.mob-nav-btn[data-tab="trading"].active       { color: #fbbf24; background: rgba(245, 158, 11, 0.16); }
.mob-nav-btn[data-tab="insider"].active       { color: #c084fc; background: rgba(168, 85, 247, 0.16); }
.mob-nav-btn[data-tab="home"].active          { color: #34d399; background: rgba(16, 185, 129, 0.16); }

/* [DG-487] Burbuja deslizante: con ella, el fondo del activo lo pinta la burbuja (mismos
   colores) y el botón solo cambia el color del icono */
.mob-nav-burbuja {
  position: absolute;
  top: 0; left: 0;
  border-radius: 23px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.42s cubic-bezier(0.34, 1.32, 0.64, 1), background-color 0.3s, opacity 0.2s;
  will-change: transform;
}
.mob-nav-burbuja[data-tab="hedge"]         { background: rgba(239, 68, 68, 0.16); }
.mob-nav-burbuja[data-tab="linear_hedger"] { background: rgba(6, 182, 212, 0.16); }
.mob-nav-burbuja[data-tab="trading"]       { background: rgba(245, 158, 11, 0.16); }
.mob-nav-burbuja[data-tab="insider"]       { background: rgba(168, 85, 247, 0.16); }
.mob-nav-burbuja[data-tab="home"]          { background: rgba(16, 185, 129, 0.16); }
.mob-nav-inner.con-burbuja .mob-nav-btn { position: relative; z-index: 1; }
.mob-nav-inner.con-burbuja .mob-nav-btn.active { background: transparent; box-shadow: none; }

/* ── [DG-504] Lupa de cristal líquido (menuHome.js) ──
   Con el dedo puesto el dock crece un poco y toma un destello más blanco; al soltar vuelve.
   La escala va en la propiedad `scale` para no pisar el transform del scroll (DG-484). */
#mobile-bottom-nav {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background-color: rgba(255, 255, 255, 0);
  transition: scale 0.38s cubic-bezier(0.34, 1.5, 0.64, 1), background-color 0.3s, border-color 0.3s;
}
#mobile-bottom-nav.dg-lupa-on {
  scale: 1.04;
  background-color: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.26);
  transition: scale 0.32s cubic-bezier(0.34, 1.7, 0.64, 1), background-color 0.18s, border-color 0.18s;
}
#mobile-bottom-nav.dg-lupa-on .mob-nav-btn { transform: none; }
#mobile-bottom-nav.dg-lupa-on .mob-nav-burbuja,
#mobile-bottom-nav.dg-lupa-morf .mob-nav-burbuja { opacity: 0 !important; transition: none !important; }   /* [DG-526] la lupa ES la burbuja mientras dura */

/* Hueco con la forma de la lente en los iconos reales (se quita al soltar el dedo) */
#mobile-bottom-nav .mob-nav-inner.dg-lupa-hueco {
  -webkit-mask-image: var(--dg-hm), linear-gradient(#000, #000);
  mask-image: var(--dg-hm), linear-gradient(#000, #000);
  -webkit-mask-size: var(--dg-hw, 0) var(--dg-hh, 0), 100% 100%;
  mask-size: var(--dg-hw, 0) var(--dg-hh, 0), 100% 100%;
  -webkit-mask-position: var(--dg-hx, 0) var(--dg-hy, 0), 0 0;
  mask-position: var(--dg-hx, 0) var(--dg-hy, 0), 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* La lente (como el dock de WhatsApp en iOS 26): rectángulo de esquinas muy redondeadas, más
   ancho que alto, que sobresale del dock. Por dentro se ve el fondo oscuro y el cuerpo del dock
   refractados, de ahí las bandas oscuras con arcoíris de arriba y abajo; el canto es un filo
   fino y claro, sin anillo marcado */
.dg-lupa {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 16px 32px rgba(0, 0, 0, 0.12);
}
/* [DG-526] Tinte de la burbuja (color de la pestaña): se desvanece al crecer la lente */
.dg-lupa-tinte {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* Lo refractado: fondo de la página (#050b14) casi opaco, encima el cuerpo del dock */
.dg-lupa-ref {
  position: absolute;
  overflow: hidden;
  background: rgba(5, 11, 20, 0.86);
  filter: url(#dg-lupa-f);
}
.dg-lupa-silueta {
  position: absolute;
  top: 0; left: 0;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(220, 232, 248, 0.31), rgba(220, 232, 248, 0.23));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    inset 0 6px 6px -4px rgba(0, 0, 0, 0.32),
    inset 0 -6px 6px -4px rgba(0, 0, 0, 0.32);
  will-change: transform;
}
.dg-lupa-ref .dg-lupa-fila {
  position: absolute;
  top: 0; left: 0;
  box-shadow: none;
  border-radius: 0;
  will-change: transform;
}
/* Dentro de la lupa cada icono se ve con su color de seleccionado mientras pasa por encima */
.dg-lupa-fila .mob-nav-btn { color: #fff; }
.dg-lupa-fila .mob-nav-btn svg { stroke-width: 2.2; }
.dg-lupa-fila .mob-nav-btn[data-tab="hedge"]         { color: #f87171; }
.dg-lupa-fila .mob-nav-btn[data-tab="linear_hedger"] { color: #22d3ee; }
.dg-lupa-fila .mob-nav-btn[data-tab="trading"]       { color: #fbbf24; }
.dg-lupa-fila .mob-nav-btn[data-tab="insider"]       { color: #c084fc; }
.dg-lupa-fila .mob-nav-btn[data-tab="home"]          { color: #34d399; }
.dg-lupa::before,
.dg-lupa::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}
/* Canto: filo fino con un leve reflejo de colores */
.dg-lupa::before {
  padding: 1px;
  background: conic-gradient(from 210deg,
    rgba(255, 255, 255, 0.75), rgba(150, 210, 255, 0.55), rgba(255, 255, 255, 0.35),
    rgba(255, 170, 215, 0.50), rgba(255, 240, 180, 0.55), rgba(255, 255, 255, 0.75),
    rgba(160, 255, 225, 0.45), rgba(255, 255, 255, 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.7;
}
/* Brillo especular suave arriba y un poco de luz en el canto interior */
.dg-lupa::after {
  background: radial-gradient(60% 30% at 50% 6%, rgba(255, 255, 255, 0.14), transparent 75%);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255, 255, 255, 0.40),
    inset 0 -1px 1px -0.5px rgba(255, 255, 255, 0.22);
}

/* ── [DG-483] Menú Home (panel lateral estilo Facebook) ── */
.mh-menu { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 20px; color: #e2eaf5; }
.mh-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 2px; }
.mh-top h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.mh-x { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, 0.07); color: #cbd5e1; cursor: pointer; }
.mh-perfil { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); }
.mh-perfil img { width: 42px; height: 42px; border-radius: 50%; }
.mh-perfil b { display: block; font-size: 15px; color: #fff; }
.mh-perfil small, .mh-txt small { display: block; font-size: 12px; color: #7d97b3; font-weight: 500; }
.mh-atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mh-atajos button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.05); color: #e2eaf5;
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.mh-atajos button span { color: #38bdf8; display: flex; }
.mh-sec { margin: 6px 6px -2px; font-size: 12px; font-weight: 700; color: #7d97b3; text-transform: uppercase; letter-spacing: 0.06em; }
.mh-card { border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); }
.mh-fila { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 14px; border: none; background: transparent;
  color: #e2eaf5; cursor: pointer; text-align: left; }
.mh-fila + .mh-fila { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mh-fila:active, .mh-atajos button:active { background: rgba(255, 255, 255, 0.09); }
.mh-ico { display: flex; flex: none; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(56, 189, 248, 0.10); color: #7dd3fc; }
.mh-txt { min-width: 0; }
.mh-txt b { display: block; font-size: 14px; font-weight: 600; }
.mh-fila[data-accion="salir"] .mh-ico { background: rgba(239, 68, 68, 0.12); color: #f87171; }

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

  /* ── Activar bottom nav ── */
  #mobile-bottom-nav {
    display: flex;
    flex-direction: column;
  }

  /* ── Main content: padding bottom para no quedar bajo el dock ── */
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 14px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Ocultar tab bar del header — reemplazado por bottom nav ── */
  #main-tabs {
    display: none !important;
  }
  /* [DG-534] …y su franja (fondo, borde y relleno) que quedaba vacía bajo la cabecera */
  header > div:has(> #main-tabs) { display: none !important; }

  /* ── DG-35: Header 2 filas limpias ── */

  /* Fila 1: Logo | Radar (centro) | dot | Salir */
  header > div:first-child {
    height: auto !important;
    min-height: 44px !important;
    padding: 5px 14px 0 14px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 0 !important;
    /* justify-between → Logo izq, Radar centro, controles der */
  }

  /* Ticker oculto en fila 1 — aparece en fila 2 vía JS en #modern-header-switches */
  #ticker-bar {
    display: none !important;
  }

  /* Div derecho: gap reducido, logout siempre visible */
  header > div:first-child > div.flex.items-center.gap-4 {
    gap: 7px !important;
    align-items: center !important;
  }

  /* Radar: solo icono SVG, siempre visible */
  #hft-scan-btn .hft-btn-texts,
  #hft-scan-btn .hft-btn-bar {
    display: none !important;
  }
  #hft-status-bar {
    display: flex !important;
    align-items: center !important;
  }
  #hft-scan-btn {
    padding: 4px 6px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
  }

  /* Logout: ⏻ Salir (mostrar etiqueta) */
  header button[onclick="handleLogout()"] {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* [DG-534] El interruptor PROD va a la derecha de la primera fila (ya no hay fila 2) */
  #modern-header-switches {
    margin-left: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }
  header > div:first-child { padding-bottom: 5px !important; }

  /* Texto de cada toggle: visible pero compacto */
  #modern-header-switches > div > span {
    font-size: 0.55rem !important;
    letter-spacing: 0.04em !important;
  }

  /* Cada toggle: compacto */
  #modern-header-switches > div:not(#mob-ticker-row2) {
    padding: 4px 8px !important;
    gap: 5px !important;
  }

  header .mode-badge {
    display: none !important;
  }

  /* ── KPI Banner: 2 columnas en mobile ── */
  /* DG-137: KPI bar — 4 cols en una sola fila compacta en mobile */
  .max-w-screen-xl.mx-auto.px-5.py-3.grid {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 6px 10px !important;
    gap: 5px !important;
  }

  .kpi-card {
    padding: 5px 4px;
    border-radius: 7px;
  }

  .kpi-label {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
  }

  .kpi-value {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Cards ── */
  .card {
    border-radius: 12px;
  }

  /* ── Grids principales → columna única ── */
  .grid.grid-cols-1.lg\:grid-cols-5 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Analytics: KPI rows en 2 columnas ── */
  .grid.grid-cols-2.lg\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Analytics header: controles en columna ── */
  #wallet-analytics-dashboard > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Analytics KPI border-right en 2 cols */
  #wallet-analytics-dashboard .grid.grid-cols-2.lg\:grid-cols-5 > div:nth-child(2) {
    border-right: none;
  }

  /* DG-138: Bot Toolbars → fila horizontal compacta en mobile */
  [id$="-toolbar"] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  [id$="-toolbar"] > .flex-1 {
    display: none;
  }

  /* Botones de acción: solo mostrar el emoji, ocultar texto */
  [id$="-toolbar"] .btn-text {
    display: none;
  }

  [id$="-toolbar"] .am-trigger-btn {
    flex: 0 0 auto;
    padding: 6px 9px;
    min-height: 34px;
    font-size: 1rem;
    gap: 0;
  }

  [id$="-toolbar"] .am-trigger-btn svg {
    display: none;
  }

  /* DG-138 v2: input oculto en mobile — scan abre modal */
  [id$="-toolbar"] .toolbar-token-input {
    display: none !important;
  }

  /* Botón Escanear — solo icono SVG, compacto */
  [id$="-toolbar"] .flex.gap-2.items-center .btn {
    padding: 7px 10px !important;
    min-height: 34px !important;
  }

  /* ── Formulario Wallets: radio buttons en 2×2 ── */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Notification Center — optimización mobile ── */
  /* Tabs: solo emoji, ocultar etiqueta de texto */
  .nc-tab-label {
    display: none;
  }
  /* Filtros: apilar verticalmente para que no desborden */
  #nc-filters {
    flex-direction: column !important;
    gap: 6px !important;
  }
  #nc-filters select {
    width: 100%;
    font-size: 0.7rem;
  }

  /* ── Pool metrics row: 3 ítems por fila ── */
  .pool-metrics-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.5rem 0;
  }

  .pm-item {
    flex: 1 1 calc(33.33% - 8px);
    min-width: 80px;
    padding: 0 4px;
  }

  .pm-sep {
    display: none;
  }

  /* ── Tables: scroll horizontal suave ── */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Tablas: font size más pequeño */
  .dg-table {
    font-size: 0.75rem;
  }

  .dg-table th, .dg-table td {
    padding: 0.5rem 0.65rem;
  }

  /* ── Touch targets mínimo 44px ── */
  .btn, button.btn-primary, button.btn-ghost, button.btn-danger {
    min-height: 44px;
  }

  .am-trigger-btn {
    min-height: 38px;
    font-size: 11px;
  }

  /* ── Inputs más grandes en mobile ── */
  .dg-input {
    font-size: 16px !important; /* evita zoom automático en iOS */
    padding: 10px 12px;
    min-height: 44px;
  }

  /* ── Modales full-screen slide-up ── */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    padding: 20px 18px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 92vh !important;
    animation: mobileModalSlideUp 0.3s cubic-bezier(0.34, 1.15, 0.64, 1) !important;
  }

  @keyframes mobileModalSlideUp {
    from {
      transform: translateY(100%);
      opacity: 0.8;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Handle bar visual en modales móvil */
  .modal-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    margin: 0 auto 16px;
  }

  /* Modales que tienen su propio header (no necesitan el handle) */
  #history-modal .modal-box::before,
  #trade-detail-modal .modal-box::before {
    display: none;
  }

  /* Trade detail en mobile */
  #trade-detail-modal .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #trade-detail-modal .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Equity chart: altura más pequeña en mobile ── */
  #wad-equity-wrap {
    height: 150px !important;
  }

  /* ── Timeframe buttons: wrap y más pequeños ── */
  .flex.items-center.gap-2.flex-wrap {
    gap: 5px;
  }

  .am-tf-btn {
    font-size: 10px;
    padding: 5px 7px;
    min-height: 32px;
  }

  /* ── wad-breakdown: 2×2 ── */
  #wad-breakdown {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #wad-breakdown > div {
    border-right: none !important;
    border-bottom: 1px solid #1e3550 !important;
  }

  #wad-breakdown > div:last-child,
  #wad-breakdown > div:nth-last-child(2) {
    border-bottom: none !important;
  }

  /* ── Pool card header: compacto ── */
  .pool-card-header {
    padding: 0.8rem 1rem 0.7rem;
  }

  .pool-card-pair {
    font-size: 0.95rem;
  }

  /* ── Pool card actions: botones en 2 columnas ── */
  .pool-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .pool-card-actions .btn {
    justify-content: center;
    width: 100%;
  }

  /* ── Pool analytics: columna única ── */
  .pool-card-analytics .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── Historial avanzado table: scroll horizontal ── */
  #history-modal-content {
    overflow-x: auto;
  }

  /* ── Token Modal: inputs full width ── */
  #token-modal .flex.gap-2 {
    flex-direction: column;
  }

  /* ── Toasts y notificaciones: centrados arriba del dock ── */
  #toast-container,
  #global-toast-container {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    left: 12px !important;
    top: auto !important;
    max-width: none !important;
    width: auto !important;
    align-items: stretch;
  }

  /* Tamaño de notificaciones en mobile */
  #global-toast-container > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  .toast {
    border-radius: 12px !important;
    font-size: 13px !important;
    padding: 12px 14px !important;
    animation: mobileToastIn 0.28s ease !important;
  }

  .toast.out {
    animation: mobileToastOut 0.28s ease forwards !important;
  }

  @keyframes mobileToastIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes mobileToastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(12px); }
  }

  /* ── HFT scan button: oculto en mobile (ya no hay espacio) ── */
  #hft-status-bar {
    display: none !important;
  }

  /* ── Formulario añadir wallet: padding reducido ── */
  .card.p-6 {
    padding: 16px !important;
  }

  /* ── Ocultar botones demo en mobile (ahorran espacio) ── */
  .demo-buttons-wrapper {
    flex-direction: column;
    gap: 8px;
  }

  .demo-buttons-wrapper .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Production confirm modal ── */
  #prod-confirm-modal .flex.gap-3 {
    flex-direction: column;
  }

  /* ── Analytics modal buttons ── */
  .analytics-modal-inner .flex.flex-wrap.gap-2 {
    flex-direction: column;
  }

  /* ── Scroll snap en paneles ── */
  .tab-panel.active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Chart.js tooltips: más pequeños ── */
  canvas {
    max-width: 100% !important;
  }

  /* ── Typography: ajuste de escalas ── */
  .kpi-label {
    font-size: 0.58rem;
  }

  h2.text-sm {
    font-size: 0.8rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   BREAKPOINT EXTRA-PEQUEÑO — iPhone SE (≤390px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  #mobile-bottom-nav { left: 8px; right: 8px; }
  .mob-nav-btn { height: 42px; }

  .kpi-value {
    font-size: 0.9rem;
  }

  header > div:first-child span[style*="font-size:1rem"] {
    font-size: 0.85rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   DG-29 v2 — ANALYTICS: EQUITY / DONUT / CALENDARIO PNL — MOBILE
   Solo afecta ≤768px; el desktop no se toca.
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 0. CONTENEDOR RAÍZ: quitar overflow-hidden que corta el contenido ── */
  #wallet-analytics-dashboard {
    overflow: visible !important;
  }

  /* ── 1. Cabecera: título + botones en columna para que no se corten ── */
  #wallet-analytics-dashboard > div.p-4 {
    padding: 10px !important;
  }

  /* Fila título+botones: apilada en columna */
  #wallet-analytics-dashboard .flex.items-center.justify-between.mb-3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  /* El grupo de botones ocupa todo el ancho */
  #wallet-analytics-dashboard .flex.items-center.justify-between.mb-3 > div {
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
  }

  /* ── DG-31: Bot breakdown — valor $ y % apilados verticalmente ── */
  #wad-breakdown .wad-bf-card > div > .flex.items-end {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin-top: 2px !important;
  }
  #wad-breakdown .font-mono.text-xl {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }

  /* Cada botón con igual peso */
  #wad-btn-equity,
  #wad-btn-donut,
  #wad-btn-cal {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 5px 2px !important;
    font-size: 0.57rem !important;
    min-width: 0 !important;
  }

  /* ── 2. DONUT CHART ── */

  /* Grid 2-columnas → 1 columna, sin altura mínima forzada */
  #wad-donut-view .wdc-wrap {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Stage: sin overflow:hidden que recorta el donut */
  #wad-donut-view .wdc-stage {
    padding: 10px 12px 12px !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  /* donut-wrap: quitar flex:1 sin altura padre definida (colapsa en móvil);
     darle altura explícita para que el SVG se renderice bien */
  #wad-donut-view .donut-wrap {
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* donut-box: tamaño natural basado en el SVG */
  #wad-donut-view .donut-box {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* SVG del donut: ancho completo, altura automática por viewBox (720×480 → ratio 1.5)
     = 100% ancho → ~260px alto natural en iPhone. max-height acota en tablets */
  #wad-donut-view .donut-box svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    display: block !important;
  }

  /* Controles de filtro: 2 columnas en vez de 4 */
  #wad-donut-view .wdc-controls {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ctrl-pills: texto más pequeño para caber */
  #wad-donut-view .ctrl-pills .pill {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Summary (3 tarjetas KPI) → 1 columna para que los números sean legibles */
  #wad-donut-view .summary {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Tarjeta KPI: layout horizontal compacto */
  #wad-donut-view .sum-card {
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* Ícono de tarjeta: tamaño reducido */
  #wad-donut-view .sum-icon {
    width: 32px !important;
    height: 32px !important;
    flex: none !important;
  }

  /* Número principal — tamaño legible en móvil */
  #wad-donut-view .sum-value {
    font-size: 22px !important;
    letter-spacing: -0.02em !important;
  }

  #wad-donut-view .sum-label {
    font-size: 10px !important;
  }

  #wad-donut-view .sum-delta {
    font-size: 11px !important;
  }

  /* Título del donut */
  #wad-donut-view .donut-title {
    font-size: 15px !important;
  }

  /* ── Panel lateral (bot cards + breakdown): apilado bajo el stage ── */
  #wad-donut-view .wdc-side {
    border-left: none !important;
    border-top: 1px solid rgba(30, 53, 80, 0.7) !important;
    padding: 12px 12px 16px !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Bot cards: 3 columnas (ícono, meta, yoy) — spark oculto */
  #wad-donut-view .bot-card {
    grid-template-columns: 34px 1fr auto !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  /* Ícono del bot */
  #wad-donut-view .bot-icon {
    width: 34px !important;
    height: 34px !important;
  }

  /* Ocultar spark (minigráfico) — ilegible en pantallas pequeñas */
  #wad-donut-view .spark {
    display: none !important;
  }

  #wad-donut-view .bot-name {
    font-size: 12px !important;
  }

  #wad-donut-view .bot-pnl {
    font-size: 12px !important;
  }

  /* Breakdown diario: 3 celdas siguen en fila pero con padding reducido */
  #wad-donut-view .bd-cell {
    padding: 6px 4px 8px !important;
  }

  #wad-donut-view .bd-label {
    font-size: 9px !important;
  }

  /* Botón "Ver tabla" */
  #wad-donut-view .view-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  /* ── 3. CALENDARIO PNL ── */

  /* room: sin min-height:100vh y padding reducido */
  #wad-cal-view .room {
    min-height: 0 !important;
    padding: 6px 6px 14px !important;
    overflow: visible !important;
  }

  /* Quitar pseudo-overlay blur fijo */
  #wad-cal-view .room::before {
    display: none !important;
  }

  /* frame: quitar border-radius y overflow:hidden que recorta */
  #wad-cal-view .frame {
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* topbar: compacto */
  #wad-cal-view .topbar {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* title-row: apilar en columna */
  #wad-cal-view .title-row {
    padding: 8px 12px 6px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #wad-cal-view .title-row h1 {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #wad-cal-view .subtitle {
    font-size: 10px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* filter-actions: fila compacta */
  #wad-cal-view .filter-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: 100% !important;
  }

  /* ── GRID PRINCIPAL (280px + 1fr + 300px) → columna única ── */
  #wad-cal-view .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* Columnas: asegurar ancho completo y sin overflow horizontal */
  #wad-cal-view .col {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Orden: calendario (col 2) primero, métricas (col 1) segundo, actividad (col 3) tercero */
  #wad-cal-view .grid > .col:nth-child(1) { order: 2 !important; }
  #wad-cal-view .grid > .col:nth-child(2) { order: 1 !important; }
  #wad-cal-view .grid > .col:nth-child(3) { order: 3 !important; }

  /* Cards: padding compacto */
  #wad-cal-view .card {
    padding: 10px 10px !important;
    border-radius: 10px !important;
    overflow: visible !important;
  }

  /* Metric tiles */
  #wad-cal-view .metric {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
  }

  #wad-cal-view .metric .val {
    font-size: 16px !important;
  }

  #wad-cal-view .metric .lbl {
    font-size: 10px !important;
  }

  #wad-cal-view .metric .sub {
    font-size: 9.5px !important;
  }

  /* ── Calendario mensual ── */
  #wad-cal-view .cal-grid {
    gap: 3px !important;
  }

  /* Día de la semana (L M M J V S D) */
  #wad-cal-view .cal-dow {
    font-size: 8px !important;
    padding: 2px 1px !important;
    text-align: center !important;
  }

  /* Celda del día: cuadrada y compacta */
  #wad-cal-view .cal-cell {
    aspect-ratio: 1 / 1 !important;
    padding: 3px !important;
    border-radius: 5px !important;
    min-width: 0 !important;
  }

  /* Número del día */
  #wad-cal-view .cal-cell .d {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  /* PNL del día: solo visible si la celda es suficientemente grande */
  #wad-cal-view .cal-cell .p {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  /* Etiqueta (tag) del día: oculta en móvil */
  #wad-cal-view .cal-cell .tag {
    display: none !important;
  }

  /* ── Vista anual: 2 columnas (en vez de 4) ── */
  #wad-cal-view .year-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  #wad-cal-view .ytile {
    min-height: 72px !important;
    padding: 9px 10px !important;
  }

  #wad-cal-view .ytile .yname {
    font-size: 10px !important;
  }

  #wad-cal-view .ytile .yval {
    font-size: 17px !important;
    margin-top: 6px !important;
  }

  #wad-cal-view .ytile .ypct {
    font-size: 10px !important;
  }

  /* Mini-calendarios en vista anual detallada */
  #wad-cal-view .mdays {
    gap: 1px !important;
  }

  /* Popover de filtros: no se salga del borde */
  #wad-cal-view .popover {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 9999 !important;
  }

  /* Scorecard (barras de rendimiento): sin overflow */
  #wad-cal-view .prefs {
    overflow: hidden !important;
  }

  #wad-cal-view .pref {
    gap: 4px !important;
  }

  #wad-cal-view .pk {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 70px !important;
  }

  /* Chip de bot en title-row */
  #wad-cal-view .chip {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }

  /* Segmented control (Bots / Pools) */
  #wad-cal-view .seg button {
    font-size: 10px !important;
    padding: 4px 7px !important;
  }

  /* ── "Métrica Diaria" card — sección que desbordaba hacia la derecha ── */

  /* Fila superior (2 stats + botones): 3 cols → columna única */
  #wad-cal-view .daily-top {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Stats: mostrar en fila dentro de la columna */
  #wad-cal-view .daily-top .stat {
    display: flex !important;
    flex-direction: column !important;
  }

  #wad-cal-view .stat .v {
    font-size: 15px !important;
  }

  #wad-cal-view .stat .k {
    font-size: 10px !important;
  }

  #wad-cal-view .stat .s {
    font-size: 9.5px !important;
  }

  /* Botones de acción de la métrica diaria */
  #wad-cal-view .daily-top .filter-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  /* Gráfico de barras + prefs: 2 cols → columna única */
  #wad-cal-view .daily-charts {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Área de barras: altura reducida para móvil */
  #wad-cal-view .bars {
    height: 120px !important;
  }

  /* Ocultar tooltips de hover en móvil (no funcionan con touch) */
  #wad-cal-view .pref-tip {
    display: none !important;
  }

  /* row-h: fila título+control → puede wrappear */
  #wad-cal-view .row-h {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ── Cards de la col derecha (donut / gauge / gainers / desglose) ── */

  /* gauge: layout compacto */
  #wad-cal-view .gauge {
    gap: 8px !important;
  }

  #wad-cal-view .gauge .gv {
    font-size: 17px !important;
  }

  #wad-cal-view .gauge .gs {
    font-size: 10px !important;
  }

  /* Donut circular dentro del calendario: tamaño razonable en móvil */
  #wad-cal-view .donut-wrap svg {
    width: 80px !important;
    height: 80px !important;
  }

  /* Legend list: compacta */
  #wad-cal-view .legend-list {
    font-size: 10px !important;
    gap: 4px !important;
  }

  /* Gainer list */
  #wad-cal-view .gainer-list .li .n {
    flex: 0 0 45px !important;
    font-size: 10px !important;
  }

  #wad-cal-view .gainer-list .li .v {
    flex: 0 0 50px !important;
    font-size: 10px !important;
  }

  /* Desglose diario: barras más bajas */
  #wad-cal-view .daily-break .bars {
    height: 100px !important;
  }

  /* Footer: tamaño compacto */
  #wad-cal-view .footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    font-size: 10px !important;
  }
}

/* ── Breakpoint extra: ≤390px (iPhone SE, 12 mini…) ── */
@media (max-width: 390px) {
  /* PNL en la celda del día: oculto para ganar espacio */
  #wad-cal-view .cal-cell .p {
    display: none !important;
  }

  /* Número del día más grande al ganar el espacio del PNL */
  #wad-cal-view .cal-cell .d {
    font-size: 10px !important;
  }

  /* KPI cards del donut en columna (pantallas muy angostas) */
  #wad-donut-view .summary {
    grid-template-columns: 1fr !important;
  }

  /* Controles del donut: 1 columna */
  #wad-donut-view .wdc-controls {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   DG-27 — CALCULADORA INTERÉS COMPUESTO — SCROLL MOBILE
   El modal usa estilos inline; lo sobreescribimos aquí con !important
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Overlay: sin padding, alineado arriba para permitir altura completa */
  #compound-calc-modal {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  /* Panel interno: pantalla completa, scroll habilitado */
  #compound-calc-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Sub-modal "Cronograma" también full-screen dentro del modal */
  #compound-schedule-modal {
    border-radius: 0 !important;
  }

  /* Cabecera sticky del modal: compensar safe area */
  #compound-calc-modal > div > div:first-child {
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  }

  /* Grid de inputs: 1 columna en pantalla muy pequeña */
  #compound-calc-modal .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Resultado final: font más compacto */
  #calc-res-total-final {
    font-size: 1.5rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   DG-24 — FIX SCROLL HORIZONTAL WALLETS
   Wallet card reflowable: fila 1 = icon+nombre+badge+balance+acciones
                           fila 2 = bots asignados (full-width)
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Bloquear scroll horizontal a nivel de página */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Wallet card: wrap en 2 filas */
  .wallet-card-row {
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
    align-items: center !important;
  }

  /* nombre+dirección: quitar ancho fijo, dejar que crezca */
  .wallet-card-row > div:nth-child(2) {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 55px !important;
  }

  /* bots asignados → segunda fila, full width */
  .wallet-card-row > div:nth-child(4) {
    order: 10 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding-top: 5px !important;
    margin-top: 1px !important;
    border-top: 1px solid #1a2e45 !important;
    overflow: hidden !important;
  }

  /* balance: quitar separador izquierdo en mobile */
  .wallet-card-row > div:nth-child(5) {
    border-left: none !important;
    padding-left: 2px !important;
  }

  /* ── DG-25: Pool analytics — 2 cards por fila en mobile ── */
  .pool-card-analytics > .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* analytics-card: fuente más compacta */
  .analytics-card {
    min-width: 0 !important;
  }

  .ac-header {
    padding: 6px 8px !important;
  }

  .ac-body {
    padding: 6px 8px !important;
  }

  .akpi-block {
    padding: 4px 0 !important;
  }

  .akpi-label {
    font-size: 0.55rem !important;
  }

  .akpi-value {
    font-size: 0.82rem !important;
  }

  /* [DG-423] Detalle de Rebalanceo y Capital */
  .rb-det {
    font-size: 0.55rem !important;
  }
  .rb-val {
    font-size: 0.72rem !important;
  }
  /* [DG-462] 2 columnas y detalle debajo: ahora es la regla general de style.css */

  /* ── DG-26: Modales full-screen en mobile ── */
  .modal-overlay {
    align-items: flex-start !important;
    padding: 0 !important;
  }

  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    padding-top: calc(env(safe-area-inset-top, 12px) + 14px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: mobileModalFullIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* Sin barra de handle (ya no es bottom-sheet) */
  .modal-box::before {
    display: none !important;
  }

  @keyframes mobileModalFullIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ════════════════════════════════════════════════════════════════
   iOS SAFARI — touch / tap tweaks
════════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  /* Evita que Safari haga zoom en inputs */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Smooth momentum scroll */
  .overflow-y-auto, .overflow-x-auto, main {
    -webkit-overflow-scrolling: touch;
  }

  /* Face ID/Touch ID — asegura que el botón biométrico tenga suficiente área */
  .mob-nav-btn, button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ════════════════════════════════════════════════════════════════
   PULL-TO-REFRESH — indicador visual (PWA standalone)
════════════════════════════════════════════════════════════════ */
#dg-ptr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(17, 20, 26, 0.97) 0%, transparent 100%);
  padding-bottom: 8px;
  /* seguridad: el safe-area del notch no se superpone */
  padding-top: env(safe-area-inset-top, 0px);
  /* [DG-388] Tailwind pone border-box en todo: el alto (0–52 px, por JS) incluía el margen
     del notch y el icono quedaba escondido debajo. Con content-box el notch se SUMA al alto. */
  box-sizing: content-box;
}

#dg-ptr .dg-ptr-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
}

#dg-ptr .dg-ptr-icon {
  width: 18px;
  height: 18px;
  color: #38bdf8;
  transition: transform 0.05s linear, color 0.15s ease;
  flex-shrink: 0;
}

/* Listo para soltar: icono se vuelve verde */
#dg-ptr.dg-ptr-ready .dg-ptr-icon {
  color: #4ade80;
}
#dg-ptr.dg-ptr-ready .dg-ptr-track {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.35);
}

/* Girando mientras recarga */
#dg-ptr.dg-ptr-spinning .dg-ptr-icon {
  animation: dg-ptr-spin 0.55s linear infinite;
  color: #4ade80;
}
#dg-ptr.dg-ptr-spinning .dg-ptr-track {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
}

@keyframes dg-ptr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════
   [DG-327] SIN DESENFOQUE DE FONDO EN PANTALLAS TÁCTILES
   backdrop-filter (tarjetas .card, barra inferior, avisos, modales) obliga
   al iPhone a desenfocar lo que hay detrás en cada fotograma de scroll. Con
   decenas de tarjetas y gráficos agota la memoria gráfica de la pestaña y
   Safari la recarga de golpe. Todos esos elementos ya tienen fondos casi
   opacos, así que visualmente apenas cambia. Gana también a los estilos en
   línea puestos por JS (!important).
════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Sin desenfoque, el velo de los modales algo más oscuro para aislar el contenido */
  #global-dynamic-modal { background: rgba(0, 0, 0, 0.88) !important; }
  /* [DG-482] Única excepción: el dock de vidrio. Es una píldora pequeña (~60 px de alto),
     un solo desenfoque ligero que no se acerca al consumo de decenas de tarjetas */
  #mobile-bottom-nav::before {
    -webkit-backdrop-filter: blur(3px) saturate(170%) !important;
    backdrop-filter: blur(3px) saturate(170%) !important;
  }
  #mobile-bottom-nav::after {
    -webkit-backdrop-filter: blur(7px) saturate(150%) brightness(1.15) !important;
    backdrop-filter: blur(7px) saturate(150%) brightness(1.15) !important;
  }
  /* [DG-504] La lupa del dock: solo existe mientras hay un dedo sobre el dock */
  #mobile-bottom-nav .dg-lupa {
    -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
    backdrop-filter: blur(6px) saturate(140%) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   [DG-345] MÓVIL: APROVECHAR LOS LATERALES
   El price chart iba dentro de varias capas con margen propio (página 12 px,
   envoltorio .px-4 de la tarjeta 16 px, relleno del gráfico 12 px: ~41 px por
   lado). En pantallas estrechas se reducen para que el gráfico y su franja de
   información ocupen casi todo el ancho.
════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  main {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .pool-card .px-4:has(> [id^="range-bar-container-"]) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* [DG-346] Móvil: la tarjeta del pool llega al borde de la pantalla (sin margen de la
   página ni bordes laterales) y el envoltorio del gráfico no añade relleno */
@media (max-width: 520px) {
  main .pool-card {
    margin-left: -6px !important;
    margin-right: -6px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
  .pool-card .px-4:has(> [id^="range-bar-container-"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Los paneles de pestaña tienen overflow:auto y recortaban la tarjeta al salir del
     margen de la página: llegan al borde manteniendo su relleno interno */
  .tab-panel {
    margin-left: -6px !important;
    margin-right: -6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* [DG-347] Móvil: el acceso al centro de notificaciones sube a la esquina superior
   derecha (justo bajo la cabecera); a media pantalla tapaba la escala de precio */
@media (max-width: 520px) {
  #nc-trigger {
    top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   DG-431 — Rendimiento Global en celular: las listas de pools y de
   trades pasan de tabla (8 columnas amontonadas) a tarjetas.
════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #wad-trades-table { max-height: 70vh !important; overflow-x: hidden !important; }

  /* ── Pools: cada fila es una tarjeta ── */
  #wad-trades-table .pev-head { display: none !important; }
  #wad-trades-table .pev-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "id   st   gain"
      "date date gain"
      "inv  fee  tot";
    gap: 6px 10px;
    padding: 12px 14px !important;
    align-items: start !important;
  }
  #wad-trades-table .pev-row > span { padding: 0 !important; min-width: 0; }
  #wad-trades-table .pev-id   { grid-area: id; font-size: 0.8rem; }
  #wad-trades-table .pev-st   { grid-area: st; white-space: nowrap; }
  #wad-trades-table .pev-date { grid-area: date; font-size: 0.66rem; }
  #wad-trades-table .pev-gain { grid-area: gain; font-size: 0.8rem; align-self: center; }
  #wad-trades-table .pev-inv  { grid-area: inv; text-align: left !important; }
  #wad-trades-table .pev-fee  { grid-area: fee; text-align: left !important; }
  #wad-trades-table .pev-tot  { grid-area: tot; text-align: right !important; }
  #wad-trades-table .pev-arr  { display: none; }
  #wad-trades-table .pev-row [data-l]::before {
    content: attr(data-l);
    display: block;
    font-family: system-ui, sans-serif;
    font-size: 0.55rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #3d607a; margin-bottom: 2px;
  }
  #wad-trades-table .pev-row .pev-gain::before { text-align: right; }
  #wad-trades-table .pev-row .pev-inv,
  #wad-trades-table .pev-row .pev-fee,
  #wad-trades-table .pev-row .pev-tot { font-size: 0.68rem; padding-top: 6px !important; border-top: 1px dashed #13243a; }

  /* ── Trades: cada fila es una tarjeta ── */
  #wad-trades-table table thead { display: none; }
  #wad-trades-table table, #wad-trades-table tbody { display: block; width: 100%; }
  #wad-trades-table tr.tr-card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "pair side pnl"
      "bot  date pnl"
      "in   out  why";
    gap: 4px 10px;
    padding: 10px 14px;
    align-items: center;
  }
  #wad-trades-table tr.tr-card > td { padding: 0 !important; min-width: 0; max-width: none !important; }
  #wad-trades-table .tr-pair { grid-area: pair; }
  #wad-trades-table .tr-side { grid-area: side; }
  #wad-trades-table .tr-pnl  { grid-area: pnl; text-align: right; font-size: 0.85rem !important; }
  #wad-trades-table .tr-bot  { grid-area: bot; }
  #wad-trades-table .tr-date { grid-area: date; font-size: 0.62rem !important; }
  #wad-trades-table .tr-in   { grid-area: in; }
  #wad-trades-table .tr-out  { grid-area: out; }
  #wad-trades-table .tr-why  { grid-area: why; text-align: right; font-size: 0.62rem !important; }
  #wad-trades-table tr.tr-card [data-l]::before {
    content: attr(data-l) " ";
    font-family: system-ui, sans-serif;
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase; color: #3d607a;
  }
  #wad-trades-table .tr-pnl::before { display: block; }
}

/* [DG-487] En el móvil la página se desplaza dentro de #app-scroll y no en el documento: el
   dock queda en otra capa y recibe el toque aunque el contenido siga en inercia (con el
   scroll del documento, iOS gastaba ese toque en frenar). Sin position:fixed en la capa para
   no crear un contexto de apilamiento que encierre los z-index del contenido. */
@media (max-width: 768px) {
  html, body { height: 100%; overflow: hidden; }
  /* [DG-547] Sin el relleno de la zona segura en el body: con box-sizing border-box (Tailwind) se
     restaba del 100 % y #app-scroll terminaba 34 px antes del borde, dejando una franja sólida que
     tapaba la app y la barra de inicio. El contenido ya reserva su final (main: 72 px + zona segura) */
  body { padding-bottom: 0 !important; }
  #app-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* [DG-530] Cabecera: de momento sin las cotizaciones fijas (#ticker-bar en escritorio), sin el LED
   del servidor y sin el botón Salir (está en el menú ☰ → Cerrar sesión). El MOCK y el ticker
   móvil ya no se generan (app.js). */
#ticker-bar,
#server-dot,
header button[onclick="handleLogout()"] { display: none !important; }

/* [DG-531] La cabecera se esconde al bajar y vuelve con un scroll rápido hacia arriba (menuHome.js) */
@media (max-width: 768px) {
  header { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
  header.dg-cab-oculta { transform: translate3d(0, calc(-100% - 2px), 0); }
}