/* =======================================================
   — Responsive overlay
   ======================================================= */
:root {
  --bp-sm: 768px;
  --nav-bg: #0b1420;
  --nav-active: #101a27;
  --nav-border: var(--border);
}

/* Ocultar cabeceras/menus superiores en móvil */
@media (max-width: 768px) {
  #main-tabs,
  .topbar,
  .header,
  #header-top,
  .wallet-group,
  #header-wallet,
  #header-balances {
    display: none !important;
  }
}

/* ---------- NAV superior móvil ---------- */
#ppro-topnav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 950;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  display: none;
  grid-template-columns: repeat(4, 1fr);
}
#ppro-topnav .tbtn,
#ppro-topnav .tabbtn{
  appearance: none; border: 0; background: transparent; color: #cfe1f7;
  padding: 10px 6px; cursor: pointer;
  display: grid; place-items: center; gap: 4px;
  font-size: 12px;
}
#ppro-topnav .tbtn .ico,
#ppro-topnav .tabbtn .ico{ font-size: 18px; line-height: 1; }
#ppro-topnav .tbtn.active,
#ppro-topnav .tabbtn.active{ background: var(--nav-active); border-radius: 10px; }
@media (max-width: 768px){ #ppro-topnav{ display:grid; } }

/* Body padding para no tapar contenido con la nav superior */
@media (max-width: 768px) {
  body.mobile-nav-up { padding-top: 58px; }
}

/* ---------- Footer wallet (móvil) ---------- */
#ppro-footer{
  position: fixed; left: 0; right: 0; bottom: 0;
  background:#0f1824; border-top:1px solid var(--border);
  padding: 8px 10px; z-index: 900; display:flex; align-items:center; gap:10px;
}
#ppro-footer .mob-wallet{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
#ppro-footer .pills{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#ppro-footer .pill{ background:#142033; border:1px solid var(--border); padding:4px 8px; border-radius:8px; font-size:12px; color:#cfe1f7; }
#ppro-footer .btn{ padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:#172331; color:#cfe7ff; cursor:pointer; font-size:12px; }
#ppro-footer .btn.hidden{ display:none; }
body { padding-bottom: 110px; } /* espacio para footer */

/* ---------- Tablas: ajustes generales ---------- */
@media (max-width: 768px) {
  table { table-layout: fixed; }
  th, td { padding: 12px 9px !important; }
}

/* ---------- MARKETS tarjetas ---------- */
.mk-cards { display: grid; gap: 10px; }
.mk-card { border:1px solid var(--border); border-radius:12px; background:#0f1824; padding:10px; }
.mkc-head{ display:flex; gap:10px; align-items:flex-start; }
.mkc-img { width:92px; height:64px; border-radius:10px; object-fit:cover; border:1px solid var(--border); background:#0d1117; }
.mkc-title{
  font-weight:600; line-height:1.25; max-height:3.75em; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}
.mkc-row{ margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mkc-actions{ align-items:center; }
.mkc-buttons{ display:flex; gap:8px; }
@media (max-width: 768px){ #tbl-markets{ display:none !important; } #mk-cards{ display:grid !important; } }

/* ---------- INSIDERS tarjetas ---------- */
.in-cards { display:grid; gap:10px; }
.in-card { border:1px solid var(--border); border-radius:12px; background:#0f1824; padding:10px; }
.inc-head{ display:flex; gap:10px; align-items:flex-start; }
.inc-img{ width:92px; height:64px; border-radius:10px; object-fit:cover; border:1px solid var(--border); background:#0d1117; }
.inc-title{
  font-weight:600; line-height:1.25; max-height:3.75em; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}
.inc-meta{ margin-top:6px; color:#9fb3c8; font-size:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inc-actions{ margin-top:8px; display:flex; gap:8px; align-items:center; justify-content:flex-end; }
@media (max-width: 768px){ #tbl-insiders{ display:none !important; } #in-cards{ display:grid !important; } }

/* ---------- MY TRADES (en móvil AHORA NO se oculta la tabla) ---------- */
.mt-cards { display:grid; gap:10px; } /* por si quieres volver a tarjetas */
.mt-card { border:1px solid var(--border); border-radius:12px; background:#0f1824; padding:10px; }
.mtc-head{ display:flex; gap:10px; align-items:flex-start; }
.mtc-img{ width:92px; height:64px; border-radius:10px; object-fit:cover; border:1px solid var(--border); background:#0d1117; }
.mtc-title{
  font-weight:600; line-height:1.25; max-height:3.75em; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}
.mtc-meta{ margin-top:6px; color:#9fb3c8; font-size:12px; }
.mtc-actions{ margin-top:8px; display:flex; gap:8px; align-items:center; justify-content:flex-end; }

/* IMPORTANTE: quitar la ocultación de la tabla en móvil */
@media (max-width: 768px){
  /* NO ocultamos #tbl-mytrades */
  #mt-cards{ display:none !important; } /* si prefieres no mostrar tarjetas por ahora */
}

/* ---------- Insiders tabla desktop: username estrecho, mercado ancho ---------- */
@media (min-width: 769px){
  /* Afinable con colgroup si lo necesitas */
}

/* ---------- Botones táctiles ---------- */
@media (max-width: 768px) {
  .btn, .btn-outlined, .btn-mini, .btn-action { min-height: 38px; touch-action: manipulation; }
}

/* ---------- Spinner (compartido) ---------- */
.spinner{ display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid #789; border-top-color:transparent; animation:spin 0.7s linear infinite; vertical-align:-2px; }
@keyframes spin{ to { transform:rotate(360deg); } }