/* ============================================================
   travi — "Plastilina" Design System
   Claymorphism + paleta pastel · light/dark · spring motion
   Misma estructura de selectores que la v. anterior (no rompe JS)
   ============================================================ */

/* --- Design Tokens (DARK = "clay at night") --- */
:root {
  --bg:           #09090b;
  --bg-elevated:  #101114;
  --bg-card:      #0e0f12;
  --bg-hover:     #1a1c21;
  --sidebar-bg:   #0c0d10;
  --border:       #212429;
  --text:         #f4f5f6;
  --text-dim:     #9ca2aa;
  --text-muted:   #60666f;
  --accent:       #1fc98a;
  --accent-rgb:   31,201,138;
  --accent-ink:   #052b19;
  --accent-2:     #4da3ff;
  --accent-2-rgb: 77,163,255;
  --danger:       #ff5d6c;
  --danger-rgb:   255,93,108;
  --warning:      #ffb74a;
  --radius:       16px;
  --radius-lg:    22px;
  --radius-xl:    26px;
  --font-display: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:    'JetBrains Mono','IBM Plex Mono',monospace;
  --font-body:    'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Clay material */
  --clay-out:     0 10px 26px -8px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.28);
  --clay-out-lg:  0 18px 42px -12px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);
  --clay-in:      inset 0 2px 3px rgba(255,255,255,.09), inset 0 -3px 7px rgba(0,0,0,.34);
  --clay-in-soft: inset 0 1px 2px rgba(255,255,255,.07), inset 0 -2px 4px rgba(0,0,0,.24);
  --clay-pressed: inset 0 5px 12px rgba(0,0,0,.45), inset 0 -1px 2px rgba(255,255,255,.05);
  --glass:        rgba(9,9,11,.78);
  --blob-a:       rgba(31,201,138,.04);
  --blob-b:       rgba(255,255,255,.03);

  --shadow:       var(--clay-out-lg);
  --shadow-sm:    var(--clay-out);
  --transition:   220ms cubic-bezier(.22,1,.36,1);
  --spring:       cubic-bezier(.34,1.56,.64,1);
  --sidebar-w:    260px;
  --right-w:      320px;
  --surface:      #17191d;
}

[data-theme="light"] {
  --bg:          #fbfbfa;
  --bg-elevated: #ffffff;
  --bg-card:     #ffffff;
  --bg-hover:    #efefec;
  --sidebar-bg:  #f6f6f4;
  --border:      #e6e6e2;
  --text:        #0d0e10;
  --text-dim:    #54595f;
  --text-muted:  #8b9097;
  --accent:      #0d9f6e;
  --accent-rgb:  13,159,110;
  --accent-ink:  #03301d;
  --accent-2:    #2e6fe8;
  --accent-2-rgb:46,111,232;
  --danger:      #e14b60;
  --danger-rgb:  225,75,96;
  --warning:     #e78f2e;

  --clay-out:     0 10px 24px -8px rgba(44,62,88,.20), 0 2px 6px rgba(44,62,88,.08);
  --clay-out-lg:  0 20px 44px -14px rgba(44,62,88,.26), 0 4px 10px rgba(44,62,88,.08);
  --clay-in:      inset 0 2px 3px rgba(255,255,255,.95), inset 0 -3px 7px rgba(44,62,88,.10);
  --clay-in-soft: inset 0 1px 2px rgba(255,255,255,.85), inset 0 -2px 4px rgba(44,62,88,.07);
  --clay-pressed: inset 0 5px 12px rgba(44,62,88,.18), inset 0 -1px 2px rgba(255,255,255,.65);
  --glass:        rgba(249,251,253,.74);
  --blob-a:       rgba(15,174,109,.09);
  --blob-b:       rgba(46,111,232,.10);

  --shadow:      var(--clay-out-lg);
  --shadow-sm:   var(--clay-out);
  --surface:     #f2f6fa;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 85% -10%, var(--blob-b), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, var(--blob-a), transparent 55%);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  transition: background-color var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
a { color: var(--accent-2); text-decoration: none; }
img { max-width: 100%; display: block; }
button,input,select,textarea { font-family: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(var(--accent-2-rgb),.55); outline-offset: 2px; border-radius: 6px; }

/* Scrollbar de plastilina */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================================
   SIDEBAR LAYOUT — panel de arcilla flotante
   ============================================================ */
body.sidebar-layout { display: flex; }

#app-header {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: relative;
}

.sidebar {
  position: fixed;
  top: 12px; left: 12px; bottom: 12px;
  width: calc(var(--sidebar-w) - 16px);
  height: auto;
  background: var(--sidebar-bg);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--clay-in-soft), var(--clay-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 50;
  transition: background var(--transition), box-shadow var(--transition);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 12px 20px;
  gap: 4px;
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-xl);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  transition: background var(--transition), transform var(--transition);
}
.sidebar-brand:hover { background: var(--bg-hover); }
.sidebar-brand:hover img { transform: rotate(-6deg) scale(1.08); }
.sidebar-brand img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.35), var(--clay-out);
  transition: transform 300ms var(--spring);
}

/* Nav links */
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 600;
  transition: background var(--transition), color var(--transition),
              transform 260ms var(--spring), box-shadow var(--transition);
  position: relative;
}
.sidebar-link:hover {
  background: var(--bg-hover);
  color: var(--text);
  transform: translateX(4px);
}
.sidebar-link.active {
  color: var(--accent-ink);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.95), rgba(var(--accent-rgb),.8));
  font-weight: 800;
  box-shadow: var(--clay-in-soft), 0 6px 16px -6px rgba(var(--accent-rgb),.55);
}
.sidebar-link .s-icon { font-size: 1.25rem; width: 26px; text-align: center; flex-shrink: 0; }

/* New trade CTA — hidden, link is in nav */
.sidebar-cta { display: none; }

/* Divider */
.sidebar-divider { height: 1px; background: var(--border); margin: 10px 4px; }

/* Auth section */
.sidebar-auth-out {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}

/* User card */
.sidebar-user {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  transition: background var(--transition), box-shadow var(--transition);
}
.sidebar-user-card:hover { background: var(--bg-hover); box-shadow: var(--clay-in-soft); }
.sidebar-uname { font-weight: 700; font-size: .88rem; }
.sidebar-logout {
  display: block;
  font-size: .74rem;
  color: var(--text-dim);
  transition: color var(--transition);
}
.sidebar-logout:hover { color: var(--danger); }

/* Controls */
.sidebar-controls {
  display: flex;
  gap: 6px;
  padding-top: 10px;
}
.sidebar-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.sidebar-footer a,
.sidebar-footer span {
  font-size: .7rem;
  color: var(--text-dim);
  text-decoration: none;
  opacity: .7;
}
.sidebar-footer a:hover { opacity: 1; text-decoration: underline; }
.sidebar-ctrl-btn {
  flex: 1;
  background: var(--surface);
  border: none;
  border-radius: 999px;
  padding: 9px 6px;
  color: var(--text);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: var(--clay-in-soft);
  transition: background var(--transition), transform 200ms var(--spring), box-shadow var(--transition);
}
.sidebar-ctrl-btn:hover { background: var(--bg-hover); transform: translateY(-1px); }
.sidebar-ctrl-btn:active { box-shadow: var(--clay-pressed); transform: translateY(0) scale(.97); }

/* Page body */
.page-body {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   MOBILE BOTTOM NAV — dock flotante de arcilla
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 10px; left: 12px; right: 12px;
  height: 62px;
  background: var(--glass);
  border: none;
  border-radius: 999px;
  box-shadow: var(--clay-in-soft), var(--clay-out-lg);
  z-index: 50;
  align-items: stretch;
  justify-content: space-around;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  color: var(--text-dim);
  font-size: .6rem;
  font-weight: 700;
  padding: 6px;
  transition: color var(--transition), transform 300ms var(--spring);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 999px;
}
.bnav-item .bnav-icon {
  font-size: 1.3rem;
  line-height: 1;
  padding: 3px 14px;
  border-radius: 999px;
  transition: background var(--transition), box-shadow var(--transition), transform 300ms var(--spring);
}
.bnav-item.active, .bnav-item:hover { color: var(--accent); }
.bnav-item.active { transform: translateY(-2px); }
.bnav-item.active .bnav-icon {
  background: rgba(var(--accent-rgb),.16);
  box-shadow: var(--clay-in-soft);
}

/* Floating action button — bola de plastilina */
.fab {
  position: fixed;
  bottom: 86px;
  right: 18px;
  width: 54px; height: 54px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),1), rgba(var(--accent-rgb),.82));
  color: var(--accent-ink);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  box-shadow: var(--clay-in-soft), 0 10px 26px -6px rgba(var(--accent-rgb),.6);
  z-index: 40;
  transition: transform 300ms var(--spring), box-shadow var(--transition);
}
.fab:hover {
  transform: scale(1.08) rotate(90deg);
  box-shadow: var(--clay-in-soft), 0 14px 34px -6px rgba(var(--accent-rgb),.7);
}
.fab:active { transform: scale(.92); box-shadow: var(--clay-pressed); }

/* ============================================================
   MOBILE TOP BAR — material translúcido
   ============================================================ */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  z-index: 90;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.mob-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
}
.mob-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.mob-menu-hint {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 5px;
  opacity: .55;
}
.mob-menu-hint span {
  display: block;
  width: 13px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: opacity var(--transition);
}
.mob-menu-hint span:nth-child(2) { width: 9px; }
.mob-avatar-btn:hover .mob-menu-hint { opacity: .9; }

.mob-icon-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--transition), transform 260ms var(--spring);
}
.mob-icon-btn:hover { background: var(--bg-hover); }
.mob-icon-btn:active { transform: scale(.9); }

/* ============================================================
   DRAWER OVERLAY
   ============================================================ */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,16,26,.55);
  z-index: 100;
  opacity: 0;
  transition: opacity 260ms ease;
  backdrop-filter: blur(3px);
}
.drawer-overlay.open {
  display: block;
  opacity: 1;
}

/* ============================================================
   LEFT DRAWER (mobile) — lámina de arcilla
   ============================================================ */
.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 80vw;
  max-width: 300px;
  background: var(--sidebar-bg);
  border: none;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  box-shadow: var(--clay-out-lg);
  z-index: 110;
  transform: translateX(-100%);
  transition: transform 380ms cubic-bezier(.32,.72,0,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer.open { transform: translateX(0); }
.drawer-inner {
  display: flex;
  flex-direction: column;
  padding: 24px 0 120px;
  min-height: 100%;
}
.drawer-user {
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drawer-uname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.drawer-handle { font-size: .82rem; color: var(--text-dim); }
.drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 999px;
  margin: 2px 12px;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.drawer-link:hover { background: var(--bg-hover); }
.drawer-link.active {
  color: var(--accent-ink);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.95), rgba(var(--accent-rgb),.8));
  font-weight: 700;
  box-shadow: var(--clay-in-soft), 0 6px 16px -6px rgba(var(--accent-rgb),.5);
}
.d-icon { font-size: 1.25rem; width: 28px; text-align: center; }
.drawer-controls {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.drawer-ctrl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  background: none;
  border-radius: 999px;
  margin: 2px 12px;
  cursor: pointer;
  transition: background var(--transition);
  width: calc(100% - 24px);
  text-align: left;
}
.drawer-ctrl:hover { background: var(--bg-hover); }

/* ============================================================
   FEED LAYOUT (index + backtest)
   ============================================================ */
.feed-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}
.feed-center {
  flex: 1;
  max-width: 600px;
  min-width: 0;
  min-height: 100vh;
}
.feed-right {
  width: var(--right-w);
  flex-shrink: 0;
  padding: 16px 16px 16px 24px;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

/* ============================================================
   PAGE HEADER (sticky column header) — cristal pastel
   ============================================================ */
.page-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="light"] .page-header {
  background: var(--glass);
}
.page-header h2 { font-size: 1.15rem; font-weight: 800; }

/* ============================================================
   COMPOSE BOX
   ============================================================ */
.compose-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: none;
  background: transparent;
}
.compose-input-fake {
  flex: 1;
  background: var(--surface);
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--clay-pressed);
  transition: box-shadow var(--transition), color var(--transition), background var(--transition);
}
.compose-input-fake:hover { color: var(--text); background: var(--bg-hover); }

/* ============================================================
   FILTER TABS — píldoras de arcilla
   ============================================================ */
.filter-tabs {
  display: flex;
  border-bottom: none;
  background: transparent;
  position: sticky;
  top: 53px;  /* below page-header */
  z-index: 15;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 12px;
  gap: 4px;
}
.filter-tabs::-webkit-scrollbar { display: none; }

/* Override old pill-group inside filter-tabs */
.filter-tabs .pill-group { display: flex; gap: 2px; }
.filter-tabs { justify-content: space-between; }
#sort-filter { border-left: 2px solid var(--border); padding-left: 8px; }
.filter-tabs button,
.filter-tab {
  flex: 1;
  min-width: 80px;
  padding: 10px 12px;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: none;
  border-radius: 999px;
  transition: color var(--transition), background var(--transition),
              box-shadow var(--transition), transform 240ms var(--spring);
  white-space: nowrap;
}
.filter-tabs button.active,
.filter-tab.active {
  color: var(--accent-ink);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.95), rgba(var(--accent-rgb),.78));
  border-bottom-color: transparent;
  font-weight: 800;
  box-shadow: var(--clay-in-soft), 0 5px 14px -5px rgba(var(--accent-rgb),.55);
}
.filter-tabs button:hover,
.filter-tab:hover { background: var(--bg-hover); color: var(--text); }
.filter-tabs button.active:hover,
.filter-tab.active:hover { color: var(--accent-ink); background: linear-gradient(180deg, rgba(var(--accent-rgb),.95), rgba(var(--accent-rgb),.78)); }

/* Search bar */
.search-bar, .filter-bar-search {
  padding: 10px 16px;
  background: transparent;
}
.search-input {
  width: 100%;
  padding: 11px 20px;
  border-radius: 999px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  box-shadow: var(--clay-pressed);
  transition: box-shadow var(--transition), background var(--transition);
}
.search-input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: var(--clay-pressed), 0 0 0 3px rgba(var(--accent-2-rgb),.28);
}

/* Hide old filter-bar wrapper */
.filter-bar { display: contents !important; }

/* ============================================================
   TRADE CARDS — tarjetas de arcilla flotantes
   ============================================================ */
.feed-grid { display: flex; flex-direction: column; gap: 14px; padding: 6px 12px 20px; }

.trade-card {
  background: var(--bg-card);
  border-bottom: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--clay-in-soft), var(--clay-out);
  padding: 16px 20px;
  transition: box-shadow var(--transition), transform 300ms var(--spring), background var(--transition);
  animation: slideUp .4s var(--spring) both;
  cursor: pointer;
  position: relative;
}
.trade-card:hover {
  background: var(--bg-card);
  transform: translateY(-3px);
  box-shadow: var(--clay-in-soft), var(--clay-out-lg);
}
.trade-card:hover .tc-pair { color: var(--accent-2); }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.trade-card:nth-child(1) { animation-delay:   0ms; }
.trade-card:nth-child(2) { animation-delay:  60ms; }
.trade-card:nth-child(3) { animation-delay: 120ms; }
.trade-card:nth-child(4) { animation-delay: 180ms; }
.trade-card:nth-child(5) { animation-delay: 240ms; }
.trade-card:nth-child(n+6) { animation-delay: 280ms; }

.tc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.tc-user-col { flex: 1; min-width: 0; }
.tc-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tc-username { font-weight: 700; font-size: .93rem; }
.tc-time {
  font-size: .78rem;
  color: var(--text-dim);
}
.tc-time::before { content: '·'; margin: 0 2px; }

.tc-pair {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  transition: color var(--transition);
}
.tc-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: .78rem;
}
.tc-stats .stat { display: flex; flex-direction: column; gap: 1px; }
.tc-stats .stat-label {
  color: var(--text-dim);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tc-stats .stat-value { font-weight: 600; }

/* ── Origin badge (TRADE REAL/BACKTEST/BOT/IMPORTADO/MANUAL) — compartido
   entre feed.js y cualquier otra vista que pinte tarjetas de trade ── */
.origin-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .04em; border-radius: 6px; padding: 3px 7px;
  vertical-align: middle;
}
.origin-badge svg { flex-shrink: 0; }
.ob-manual   { color: var(--text-dim); background: var(--bg-hover); border: 1px solid var(--border); }
.ob-imported { color: var(--accent-2); background: rgba(var(--accent-2-rgb),.1); border: 1px solid rgba(var(--accent-2-rgb),.3); }
.ob-backtest { color: var(--warning); background: rgba(231,143,46,.1); border: 1px solid rgba(231,143,46,.3); }
.ob-bot      { color: var(--accent); background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.3); }

/* ── Dato oculto por privacidad (candado) — mismo estilo en feed y detalle ── */
.privacy-hidden-value { color: var(--text-dim); }

.tc-notes {
  color: var(--text-dim);
  font-size: .9rem;
  margin-bottom: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.55;
}
.tc-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  overflow: hidden;
}
.tc-images img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  transition: transform 340ms var(--spring);
}
.tc-images img:hover { transform: scale(1.03); }
.tc-images.one img { height: 220px; border-radius: var(--radius); }

.tc-actions {
  display: flex;
  margin-top: 8px;
  padding-top: 2px;
}
.tc-action-btn,
.tc-actions button {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 999px;
  transition: color var(--transition), background var(--transition), transform 240ms var(--spring);
  font-family: inherit;
}
.tc-action-btn:hover,
.tc-actions button:hover {
  color: var(--accent-2);
  background: rgba(var(--accent-2-rgb),.1);
}
.tc-action-btn:active,
.tc-actions button:active { transform: scale(.92); }
.tc-action-btn.liked,
.tc-actions button.liked { color: var(--danger); }
.tc-action-btn.liked:hover,
.tc-actions button.liked:hover { background: rgba(var(--danger-rgb),.1); }

@keyframes likePop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5) rotate(-8deg); }
  60%  { transform: scale(.85); }
  100% { transform: scale(1); }
}
.like-anim { animation: likePop .45s var(--spring); }

/* ============================================================
   BADGES — caramelos
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: var(--clay-in-soft);
}
.badge-long     { background: rgba(var(--accent-rgb),.16);   color: var(--accent);   border: none; }
.badge-short    { background: rgba(var(--danger-rgb),.16);   color: var(--danger);   border: none; }
.badge-backtest { background: rgba(var(--accent-2-rgb),.16); color: var(--accent-2); border: none; }
[data-theme="light"] .badge-long     { color: #0b8a55; }
[data-theme="light"] .badge-short    { color: #c93a52; }
[data-theme="light"] .badge-backtest { color: #2558cc; }

/* Avatar */
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: var(--accent-ink);
  font-size: .92rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px var(--bg-elevated), var(--clay-out);
}
.avatar-sm { width: 34px; height: 34px; font-size: .78rem; overflow: hidden; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; border: 3px solid var(--bg-elevated); }

/* ============================================================
   RIGHT PANEL WIDGETS
   ============================================================ */
.right-widget {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--clay-in-soft), var(--clay-out);
  padding: 18px 20px;
  margin-bottom: 18px;
  animation: fadeIn .4s ease;
  transition: transform 300ms var(--spring), box-shadow var(--transition);
}
.right-widget:hover { transform: translateY(-2px); box-shadow: var(--clay-in-soft), var(--clay-out-lg); }
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.right-widget h3 { font-size: .93rem; font-weight: 800; margin-bottom: 14px; }
.right-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.right-stat {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--clay-pressed);
  padding: 12px;
  text-align: center;
}
.right-stat .rs-val {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}
[data-theme="light"] .right-stat .rs-val { color: #0b8a55; }
.right-stat .rs-lbl { font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.trending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.trending-item:last-child { border: none; padding-bottom: 0; }
.trending-pair { font-family: var(--font-mono); font-weight: 700; }
.trending-count { color: var(--text-dim); font-size: .75rem; }

/* ============================================================
   BUTTONS — plastilina que se aplasta
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 24px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),1), rgba(var(--accent-rgb),.8));
  color: var(--accent-ink);
  font-weight: 800;
  cursor: pointer;
  font-size: .9rem;
  font-family: inherit;
  box-shadow: var(--clay-in-soft), 0 8px 20px -6px rgba(var(--accent-rgb),.55);
  transition: transform 260ms var(--spring), box-shadow var(--transition), filter 150ms ease;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.btn:hover {
  filter: saturate(1.15);
  transform: translateY(-2px);
  box-shadow: var(--clay-in-soft), 0 12px 26px -6px rgba(var(--accent-rgb),.65);
}
.btn:active {
  transform: translateY(0) scale(.96);
  box-shadow: var(--clay-pressed);
  filter: saturate(.95);
}
.btn-outline {
  background: var(--bg-elevated);
  border: none;
  color: var(--text);
  box-shadow: var(--clay-in-soft), var(--clay-out);
}
.btn-outline:hover { background: var(--bg-hover); filter: none; box-shadow: var(--clay-in-soft), var(--clay-out-lg); }
.btn-outline:active { box-shadow: var(--clay-pressed); }
.btn-danger {
  background: linear-gradient(180deg, rgba(var(--danger-rgb),1), rgba(var(--danger-rgb),.8));
  color: #fff;
  box-shadow: var(--clay-in-soft), 0 8px 20px -6px rgba(var(--danger-rgb),.55);
}
[data-theme="light"] .btn-danger { color: #4a1220; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 18px; font-size: .8rem; }

/* ============================================================
   FORMS & CARDS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--clay-in-soft), var(--clay-out);
}

.auth-wrap { width: 100%; max-width: 400px; padding: 0 16px; }
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* When sidebar-layout wraps auth page */
.page-body .auth-page { min-height: 100vh; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text);
}
.auth-brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.35), var(--clay-out); }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: .82rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 700;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
  box-shadow: var(--clay-pressed);
  transition: box-shadow var(--transition), background var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: var(--clay-pressed), 0 0 0 3px rgba(var(--accent-2-rgb),.3);
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-dim);
  cursor: pointer;
}
.form-check input { width: auto; cursor: pointer; }

.error-msg {
  background: rgba(var(--danger-rgb),.12);
  color: var(--danger);
  border: none;
  box-shadow: var(--clay-in-soft);
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: .86rem;
  margin-bottom: 14px;
  display: none;
  animation: fadeIn .2s ease;
}
[data-theme="light"] .error-msg { color: #c93a52; }
.error-msg.show { display: block; }
.success-msg {
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent);
  border: none;
  box-shadow: var(--clay-in-soft);
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: .86rem;
  margin-bottom: 14px;
  display: none;
  animation: fadeIn .2s ease;
}
[data-theme="light"] .success-msg { color: #0b8a55; }
.success-msg.show { display: block; }

.file-drop {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--text-dim);
  font-size: .85rem;
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition), transform 240ms var(--spring);
}
.file-drop:hover { border-color: var(--accent-2); background: rgba(var(--accent-2-rgb),.06); transform: scale(1.01); }
.preview-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.preview-row img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: none;
  box-shadow: var(--clay-out);
}

/* ============================================================
   PROFILE
   ============================================================ */
.profile-banner {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.profile-banner-placeholder {
  width: 100%;
  height: 180px;
  background:
    radial-gradient(400px 200px at 20% 100%, rgba(var(--accent-rgb),.25), transparent 60%),
    radial-gradient(500px 240px at 85% 0%, rgba(var(--accent-2-rgb),.3), transparent 60%),
    var(--surface);
}
.profile-head {
  padding: 12px 20px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.profile-avatar-wrap { margin-top: -38px; margin-bottom: 10px; }
.profile-name { font-size: 1.2rem; font-weight: 800; margin-bottom: 2px; }
.profile-bio { color: var(--text-dim); font-size: .9rem; margin-bottom: 14px; }
.stats-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.stat-box .num { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; }
.stat-box .lbl { font-size: .72rem; color: var(--text-dim); }

/* ============================================================
   COMMENTS
   ============================================================ */
.comment { display: flex; gap: 10px; margin-bottom: 14px; animation: slideUp .3s var(--spring); }
.comment .bubble {
  background: var(--surface);
  border: none;
  border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--clay-in-soft);
  padding: 10px 14px;
  font-size: .88rem;
  flex: 1;
}
.comment .bubble .cu { font-weight: 700; font-size: .82rem; margin-bottom: 2px; }

/* ============================================================
   SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-lg);
}
.skeleton-card {
  border-bottom: none;
  padding: 20px;
  height: 160px;
  margin: 0 12px 14px;
  box-shadow: var(--clay-in-soft);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   TOAST
   ============================================================ */
#toast {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(.94);
  background: var(--bg-elevated);
  border: none;
  color: var(--text);
  padding: 13px 24px;
  border-radius: 999px;
  box-shadow: var(--clay-in-soft), var(--clay-out-lg);
  opacity: 0;
  transition: opacity 240ms ease, transform 340ms var(--spring);
  z-index: 200;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.online-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.5); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); }
}
.stat-pos { color: var(--accent) !important; }
.stat-neg { color: var(--danger) !important; }
[data-theme="light"] .stat-pos { color: #0b8a55 !important; }
[data-theme="light"] .stat-neg { color: #c93a52 !important; }
.text-dim    { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.text-danger { color: var(--danger); }
.mono        { font-family: var(--font-mono); }
.hero        { display: none !important; } /* old hero hidden */

/* Empty state */
.empty-state-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}
.empty-state-msg .e-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state-msg p { font-size: .95rem; }

/* Admin panel */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }

/* Container fallback for non-feed pages */
.container { max-width: 700px; margin: 0 auto; padding: 24px 20px; }

/* Page entrance */
.page-body { animation: fadeIn .25s ease; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Pantallas grandes: ocultar panel derecho --- */
@media (max-width: 1100px) {
  .feed-right { display: none; }
  .feed-center { border-right: none; }
}

/* --- Tablet / sidebar compacto (900px) --- */
@media (max-width: 900px) {
  :root { --sidebar-w: 76px; }

  /* Sidebar: solo iconos */
  .sidebar-link .s-label,
  .sidebar-brand .brand-text,
  .sidebar-auth-out,
  .sidebar-user-card .sidebar-uname,
  .sidebar-user-card .sidebar-logout,
  #nav-logged-in .sidebar-divider:first-of-type { display: none; }

  .sidebar { top: 10px; left: 10px; bottom: 10px; width: calc(var(--sidebar-w) - 14px); }
  .sidebar-brand { justify-content: center; padding: 12px 4px; }
  .sidebar-link  { justify-content: center; padding: 14px 4px; gap: 0; border-radius: var(--radius); }
  .sidebar-link:hover { transform: none; }
  .sidebar-user-card { justify-content: center; padding: 10px 4px; }
  .sidebar-controls { justify-content: center; flex-direction: column; gap: 4px; }
  .sidebar-ctrl-btn { flex: none; width: 42px; padding: 8px 4px; font-size: .7rem; }
  .sidebar-inner { padding: 12px 6px 16px; gap: 2px; }

  /* Tooltip en hover para los iconos */
  .sidebar-link { position: relative; }
  .sidebar-link .s-icon { font-size: 1.3rem; }
}

/* --- Tablet landscape: feed más ancho --- */
@media (min-width: 601px) and (max-width: 900px) {
  .feed-center { max-width: 100%; }
  .feed-layout { justify-content: flex-start; }
  .page-header h2 { font-size: 1.05rem; }
  .tc-stats { gap: 14px; }
  .tc-images img { height: 110px; }
}

/* --- Móvil (≤600px): sidebar oculto, bottom nav, topbar, drawer --- */
@media (max-width: 600px) {
  #app-header { width: 0 !important; flex: none; }
  .sidebar { display: none !important; }
  body.sidebar-layout { display: block; }
  .page-body { width: 100%; max-width: 100vw; overflow-x: hidden; padding-bottom: 84px; padding-top: 52px; }
  .bottom-nav { display: flex; }
  .mobile-topbar { display: flex; }
  .fab { display: flex; }

  /* Feed */
  .feed-layout { display: block; width: 100%; }
  .feed-center { border-left: none; border-right: none; max-width: 100%; width: 100%; }
  .feed-right { display: none; }
  .feed-grid { padding: 6px 10px 20px; gap: 12px; }
  .trade-card { max-width: 100%; overflow: hidden; }

  /* Page header */
  .page-header { padding: 12px 16px; }
  .page-header h2 { font-size: 1rem; }

  /* Filter tabs */
  .filter-tabs { overflow-x: auto; scrollbar-width: none; padding: 6px 10px; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tabs button,
  .filter-tab { min-width: 70px; padding: 10px 8px; font-size: .82rem; }

  /* Barra de búsqueda */
  .search-bar { padding: 8px 12px; }
  .search-input { padding: 10px 16px; font-size: .88rem; }

  /* Trade cards */
  .trade-card { padding: 14px 14px; }
  .tc-stats { gap: 10px; flex-wrap: wrap; }
  .tc-stats .stat-label { font-size: .62rem; }
  .tc-stats .stat-value { font-size: .8rem; }
  .tc-pair { font-size: 1rem; }
  .tc-notes { font-size: .86rem; -webkit-line-clamp: 2; }
  .tc-images img { height: 100px; }
  .tc-images.one img { height: 180px; }
  .tc-actions button { font-size: .78rem; padding: 6px 2px; }
  .avatar { width: 36px; height: 36px; font-size: .82rem; }

  /* Compose */
  .compose-card { padding: 10px 14px; gap: 8px; }
  .compose-input-fake { font-size: .9rem; }

  /* Auth pages */
  .auth-page { padding: 16px; align-items: flex-start; padding-top: 40px; }
  .auth-wrap { max-width: 100%; }
  .card { padding: 20px 18px; border-radius: var(--radius-lg); }
  .auth-brand { font-size: 1.1rem; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; } /* evita zoom en iOS */

  /* Container genérico */
  .container { padding: 16px 14px; }

  /* Admin */
  .admin-wrap { padding: 16px 12px; }

  /* Profile */
  .profile-banner,
  .profile-banner-placeholder { height: 130px; }
  .profile-head { padding: 8px 14px 14px; }
  .profile-avatar-wrap { margin-top: -28px; }
  .avatar-lg { width: 56px; height: 56px; font-size: 1.2rem; }
  .profile-name { font-size: 1rem; }
  .profile-bio { font-size: .84rem; }
  .stats-grid { gap: 16px; }
  .stat-box .num { font-size: 1rem; }
  .stat-box .lbl { font-size: .68rem; }

  /* Toast más arriba del bottom nav */
  #toast { bottom: 88px; font-size: .82rem; padding: 10px 18px; }

  /* Modal / crop */
  .crop-modal { padding: .8rem; }

  /* Botones más grandes para touch */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .bnav-item { min-height: 44px; }
}

/* --- Móvil pequeño (≤380px) --- */
@media (max-width: 380px) {
  .filter-tabs button,
  .filter-tab { min-width: 60px; font-size: .76rem; padding: 10px 6px; }
  .tc-stats { gap: 8px; }
  .trade-card { padding: 12px; }
  .bnav-item { font-size: .56rem; }
  .bnav-item .bnav-icon { font-size: 1.15rem; }
  .tc-actions button { font-size: .72rem; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#lightbox.open { display: flex; }
.lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,13,22,.86);
  backdrop-filter: blur(8px);
  animation: fadeIn .2s ease;
}
.lb-content {
  position: relative;
  z-index: 1;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn .3s var(--spring);
}
@keyframes scaleIn {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
#lb-img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  object-fit: contain;
  cursor: zoom-out;
}
.lb-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  background: var(--bg-elevated);
  border: none;
  border-radius: 50%;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--clay-in-soft), var(--clay-out);
  transition: background var(--transition), transform 240ms var(--spring);
  z-index: 2;
}
.lb-close:hover { background: var(--bg-hover); transform: scale(1.1) rotate(90deg); }
.tc-images img { cursor: zoom-in; }

/* ============================================================
   CAPA DE MOTION "PLASTILINA"
   (activada por js/motion.js — no rompe nada sin JS)
   ============================================================ */

/* Sheen que sigue al cursor en tarjetas (solo desktop / pointer fine) */
@media (hover: hover) and (pointer: fine) {
  .trade-card, .right-widget, .card {
    --mx: 50%;
    --my: 50%;
  }
  .trade-card::after, .right-widget::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx) var(--my),
                rgba(var(--accent-2-rgb),.09), transparent 65%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
  }
  .trade-card:hover::after, .right-widget:hover::after { opacity: 1; }
  .right-widget { position: relative; }
}

/* Estado inicial de los reveals por scroll (solo si JS marcó la página) */
html.js-motion .reveal-pending {
  opacity: 0;
  transform: translateY(16px) scale(.98);
}
html.js-motion .reveal-in {
  animation: clayPopIn 560ms var(--spring) both;
}
@keyframes clayPopIn {
  0%   { opacity: 0; transform: translateY(16px) scale(.97); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Squish de arcilla reutilizable (lo dispara motion.js con WAAPI) */
@keyframes claySquish {
  0%   { transform: scale(1); }
  35%  { transform: scale(.94, .96); }
  70%  { transform: scale(1.03, 1.01); }
  100% { transform: scale(1); }
}

/* --- Evitar animaciones en reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js-motion .reveal-pending { opacity: 1; transform: none; }
}

/* Transparencia reducida: superficies sólidas */
@media (prefers-reduced-transparency: reduce) {
  .page-header, .mobile-topbar, .bottom-nav { background: var(--bg-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- Safe area para notch (iOS) --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav { padding-bottom: 0; bottom: calc(10px + env(safe-area-inset-bottom)); height: 62px; }
  .page-body  { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .fab        { bottom: calc(86px + env(safe-area-inset-bottom)); }
  #toast      { bottom: calc(88px + env(safe-area-inset-bottom)); }
}


/* ============================================================
   RED DE SEGURIDAD RESPONSIVE (móvil) — jul 2026
   Evita que contenedores/componentes de ancho fijo se salgan del
   viewport y queden recortados. Solo aplica en <=600px.
   ============================================================ */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  .page-body [class$="-page"] { width: 100%; max-width: 100%; box-sizing: border-box; }
  .page-body [class*="-wrap"],  .page-body [class*="-card"],
  .page-body [class*="-box"],   .page-body [class*="-panel"],
  .page-body [class*="-strip"], .page-body [class*="-grid"],
  .page-body [class*="-row"],   .page-body [class*="-content"],
  .page-body [class*="-hero"],  .page-body section, .page-body article {
    max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  .page-body [class*="-grid"] { grid-template-columns: 1fr; }
  .page-body [class$="-tabs"], .page-body .profile-tabs,
  .page-body .dt-tabs, .page-body .tab-group {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
  }
  .page-body table { display: block; overflow-x: auto; max-width: 100%; }
  .page-body img, .page-body canvas, .page-body svg, .page-body video { max-width: 100%; }
}


/* ============================================================
   SAFE AREA SUPERIOR (iOS standalone) — jul 2026
   En la app instalada la web ocupa hasta el borde (viewport-fit=cover
   + status-bar-style black-translucent), asi que las barras fijas
   quedaban DEBAJO del reloj/bateria. Se compensa con el inset.
   En Android/escritorio env() = 0px -> no cambia nada.
   ============================================================ */
:root { --safe-top: env(safe-area-inset-top, 0px); }
@media (max-width: 600px) {
  .mobile-topbar {
    height: calc(52px + var(--safe-top));
    padding-top: var(--safe-top);
  }
  .page-body { padding-top: calc(52px + var(--safe-top)); }
}

/* ── Travi: badges junto al nombre (exchange + verificado) ── */
.tvb-ex{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-left:5px;object-fit:cover}
.tvb-ex.tvb-fb{display:inline-grid;place-items:center;font-size:.55rem;font-weight:800;color:#fff;line-height:1;font-family:var(--font-display)}
.tvb-ver{width:15px;height:15px;color:var(--accent);vertical-align:-3px;margin-left:3px}

/* TRAVI MOTION */
.btn, .btn-sm, .px-btn, button.profile-tab-btn, .pill-group button {
  transition: transform 140ms cubic-bezier(.23,1,.32,1), background 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}
.btn:active, .btn-sm:active, .px-btn:active, .pill-group button:active { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) {
  .trade-card { transition: transform 160ms cubic-bezier(.23,1,.32,1), box-shadow 200ms ease; }
  .trade-card:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}