/* ============================================
   NEUROAGENT — MOBILE BASE CSS
   Incluir en todos los HTML: <link rel="stylesheet" href="/mobile.css">
   Sprint M1 — 2026-04-12
   ============================================ */

/* RESET TÁCTIL */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* SAFE AREAS GLOBALES */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --tabbar-h:    64px;
}

/* CONTENIDO PRINCIPAL — espacio para tab bar */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  }

  /* Ocultar top nav desktop */
  nav.top-nav,
  .desktop-nav,
  header nav {
    display: none !important;
  }

  /* Contenedores */
  .container, .page-container, main {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    padding-top: max(16px, var(--safe-top));
  }

  /* Touch targets mínimos 44px */
  button, a, [role="button"],
  input[type="checkbox"], input[type="radio"],
  select {
    min-height: 44px;
    min-width: 44px;
  }

  /* Tipografía móvil */
  .label, .text-muted, .text-secondary { font-size: 12px; }
  .text-body { font-size: 14px; }
  .text-value { font-size: 16px; }
  .kpi-value { font-size: 28px; font-weight: 700; }

  /* Tablas → ocultar en móvil, usar cards */
  table.desktop-only { display: none; }

  /* Cards móvil */
  .card {
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
  }

  /* Grid desktop → stack vertical */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* KPI grid → 2 columnas máximo */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Modals → bottom sheet */
  .modal-overlay {
    align-items: flex-end !important;
  }
  .modal-content {
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-height: 85vh !important;
    overflow-y: auto;
  }
}

/* CONTENT VISIBILITY para scroll performance */
.wallet-row, .signal-card, .trade-row {
  content-visibility: auto;
  contain-intrinsic-size: 72px;
}

/* SCROLL SUAVE GLOBAL */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* OVERSCROLL */
body {
  overscroll-behavior-y: contain;
}

/* INPUTS — evitar zoom en iOS */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important; /* iOS no hace zoom si >= 16px */
    scroll-margin-bottom: 140px; /* keyboard avoidance */
  }
}

/* ACTIVE STATES táctiles */
button:active, a:active, [role="button"]:active {
  opacity: 0.7;
  transform: scale(0.97);
  transition: transform 0.1s, opacity 0.1s;
}

/* SKELETON LOADER CSS-only (no JS) */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2, #1C1C1F) 25%,
    var(--surface-3, #242428) 50%,
    var(--surface-2, #1C1C1F) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* PULSE DOT para estado LIVE */
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00D26A;
  animation: pulse-anim 2s infinite;
}
@keyframes pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* WALLET ADDRESS chip */
.wallet-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--surface-2, #1C1C1F);
  border: 1px solid var(--border, #2A2A2E);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.wallet-chip.copied {
  border-color: #00D26A;
  color: #00D26A;
}

/* SCORE BADGES */
.badge-elite  { background: #00D26A; color: #000; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.badge-pro    { background: #3B82F6; color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.badge-active { background: #FFB800; color: #000; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.badge-low    { background: #242428; color: #4A4A5A; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; }

/* ============================================
   BOTTOM SHEETS — Sprint M7
   Aplica al único modal real: copy-trading.html (.modal-overlay + .modal)
   ============================================ */

@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    overflow-y: auto;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    /* Drag handle visual via CSS */
    background-image: radial-gradient(
      ellipse 40px 4px at 50% 14px,
      rgba(255,255,255,0.18) 100%, transparent 100%
    );
    background-repeat: no-repeat;
  }
}

/* ============================================
   VIEW TRANSITIONS API — Sprint M6
   Progressive enhancement — no-op en browsers sin soporte
   ============================================ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 200ms ease-out both vt-fade-out;
}
::view-transition-new(root) {
  animation: 200ms ease-in both vt-fade-in;
}

@keyframes vt-fade-out {
  to { opacity: 0; transform: translateX(-16px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateX(16px); }
}

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}