/* styles.css — tema dark estilo Telegram / crypto */
:root {
  /* === Callouts design tokens — estilo terminal GMGN (dark casi-negro + verde eléctrico) === */
  /* Marca / acento */
  --brand-300: #4be3c4; --brand-500: #00d1a0; --brand-600: #00b389; --brand-700: #059073; --brand-900: #06382e;
  --green-300: #5ff08a; --green-500: #2ecc71;
  --blue-500: #3b82f6; --red-500: #f6465d; --gold-500: #f0b90b;
  /* Superficies estilo terminal (negro neutro por elevación, GMGN-like) */
  --bg: #0a0b0d;        /* fondo casi-negro */
  --bg-2: #131519;      /* surface-1: tarjetas/paneles */
  --bg-3: #1c1f26;      /* surface-2: inputs/elevado */
  --surface-3: #23272f; /* modales/dropdowns */
  --panel: #131519;
  --border: #24272e;
  --text: #eef1f4;
  --text-dim: #8b93a1;
  /* Alias de compatibilidad */
  --accent: var(--brand-500);
  --accent-2: var(--brand-300);
  --parrot-blue: var(--blue-500);
  --parrot-green: var(--green-500);
  --parrot-red: var(--red-500);
  --green: var(--green-500);
  --red: var(--red-500);
  --gold: var(--gold-500);
  --purple: #9b6cf0;
  /* Tipografía */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  /* Espaciado (base 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* Radios y sombras */
  --radius-sm: 10px; --radius: 15px; --radius-lg: 20px;
  --shadow: 0 10px 34px rgba(0,0,0,.42);
  --ring: 0 0 0 3px rgba(18,179,166,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background:
    radial-gradient(1000px 500px at 80% -8%, rgba(0,209,160,.06) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.boot { display: grid; place-items: center; height: 100vh; color: var(--text-dim); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: var(--accent-2); text-decoration: none; }

/* Scrollbars con acento tropical */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }

/* ---------- Layout app ---------- */
.shell { display: grid; grid-template-columns: 84px 340px 1fr; height: 100vh; overflow: hidden; }
.shell--full { grid-template-columns: 84px 1fr; }        /* rail + main (board, discovery, perfil…) */
.shell--3col { grid-template-columns: 84px 300px 1fr; }  /* rail + sidebar grupos + main (perfil canal) */

/* Tablet: colapsar sidebar de grupos en la vista 3-col */
@media (max-width: 1100px){
  .shell--3col { grid-template-columns: 84px 1fr; }
  .shell--3col .list-col { display: none; }
}
/* Móvil: rail delgado; en chat clásico alternar lista/main */
@media (max-width: 760px){
  .shell, .shell--full, .shell--3col { grid-template-columns: 56px 1fr; }
  .shell:not(.shell--full):not(.shell--3col) .main-col { display: none; }
  .shell.show-main .list-col { display: none; }
  .shell.show-main .main-col { display: flex; }
  .list-col { display: flex; }
}

/* Rail izquierdo (iconos de navegación) */
.rail {
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 8px;
}
.rail .logo { font-size: 26px; margin-bottom: 10px; }
.rail .logo-img { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 10px; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.rail button {
  width: 52px; height: 52px; border-radius: 14px; border: none;
  background: transparent; color: var(--text-dim); font-size: 22px;
  display: grid; place-items: center; transition: .15s;
}
.rail button:hover { background: var(--bg-3); color: var(--text); }
.rail button.active { background: var(--accent); color: #fff; }
.rail .spacer { flex: 1; }
.rail .me { width:46px;height:46px;border-radius:50%; background: linear-gradient(135deg,var(--accent),var(--purple)); display:grid;place-items:center;font-weight:700; }

/* Columna lista (canales / resultados) */
.list-col { background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.list-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.list-head h2 { font-size: 18px; font-weight: 700; }
.list-head p { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.search-box { margin: 12px 14px; }
.search-box input { width: 100%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 11px 14px; border-radius: 12px; font-size: 14px; }
.search-box input:focus { outline: none; border-color: var(--accent); }
.list-scroll { overflow-y: auto; flex: 1; padding: 6px; }

/* Item de canal */
.channel-item { display: flex; gap: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: .12s; }
.channel-item:hover { background: var(--bg-3); }
.channel-item.active { background: var(--accent); }
.channel-item.active .ci-sub, .channel-item.active .ci-time { color: rgba(255,255,255,.8); }
.ci-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; }
.channel-item.active .ci-avatar { background: rgba(255,255,255,.18); }
.ci-body { flex: 1; min-width: 0; }
.ci-top { display: flex; justify-content: space-between; align-items: baseline; }
.ci-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-time { font-size: 11px; color: var(--text-dim); }
.ci-sub { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; }
.badge.vip { background: rgba(245,196,81,.15); color: var(--gold); }
.badge.free { background: rgba(75,208,125,.15); color: var(--green); }
.badge.chain { background: rgba(51,144,236,.15); color: var(--accent-2); }

/* Columna principal */
.main-col { display: flex; flex-direction: column; overflow: hidden; }
.main-head { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-2); display: flex; align-items: center; gap: 12px; }
.main-head .back { display:none; background:none;border:none;color:var(--text);font-size:20px; }
@media (max-width: 1000px){ .main-head .back{ display:block; } }
.main-head .mh-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: 20px; }
.main-head .mh-title { font-weight: 700; }
.main-head .mh-sub { font-size: 12px; color: var(--text-dim); }
.main-body { flex: 1; overflow-y: auto; padding: 20px; background:
  linear-gradient(var(--bg), var(--bg)) ; }

/* Mensajes de chat */
.msg { max-width: 560px; margin-bottom: 14px; }
.msg .bubble { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.msg .author { font-size: 12px; color: var(--accent-2); font-weight: 600; margin-bottom: 4px; }
.msg .time { font-size: 10px; color: var(--text-dim); margin-top: 6px; text-align: right; }

/* Tarjeta de call */
.call-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.call-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.call-logo { font-size: 26px; }
.call-ticker { font-weight: 800; font-size: 16px; }
.call-ca { font-size: 11px; color: var(--text-dim); font-family: monospace; }
.side-pill { margin-left: auto; font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: 8px; }
.side-pill.BUY { background: rgba(75,208,125,.16); color: var(--green); }
.side-pill.SELL { background: rgba(255,92,92,.16); color: var(--red); }
.call-body { padding: 12px 14px; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.price-now { font-size: 22px; font-weight: 800; }
.chg { font-weight: 700; font-size: 13px; }
.chg.up { color: var(--green); } .chg.down { color: var(--red); }
.metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 10px 0; }
.metric { background: var(--bg-3); border-radius: 10px; padding: 8px 10px; }
.metric .k { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.metric .v { font-size: 13px; font-weight: 700; margin-top: 2px; }
.targets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tgt { font-size: 12px; padding: 4px 10px; border-radius: 8px; background: var(--bg-3); }
.tgt b { color: var(--text); }
.call-note { font-size: 13px; color: var(--text-dim); margin-top: 10px; font-style: italic; }

/* Composer */
.composer { border-top: 1px solid var(--border); padding: 12px 16px; background: var(--bg-2); display: flex; gap: 10px; }
.composer input { flex: 1; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px 14px; }
.composer input:focus { outline: none; border-color: var(--accent); }
.composer button { background: var(--accent); border: none; color: #fff; padding: 0 18px; border-radius: 12px; font-weight: 600; }

/* Locked (VIP gate) */
.locked { display: grid; place-items: center; height: 100%; text-align: center; padding: 30px; }
.locked .lock-card { max-width: 420px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.locked .lk-icon { font-size: 46px; }
.locked h3 { margin: 12px 0 8px; }
.locked p { color: var(--text-dim); font-size: 14px; }
.price-tag { font-size: 30px; font-weight: 800; margin: 16px 0; }
.price-tag span { font-size: 14px; color: var(--text-dim); font-weight: 500; }

/* Botones genéricos */
.btn { background: var(--accent); border: none; color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.btn { background: linear-gradient(135deg, var(--accent), var(--parrot-green)); border: none; color: #04231f; padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 14px; transition: transform .1s, box-shadow .15s, filter .15s; box-shadow: 0 4px 14px rgba(18,179,166,.28); }
.btn:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(18,179,166,.4); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.gold { background: linear-gradient(135deg, var(--gold), #ffce6a); color: #3a2c00; box-shadow: 0 4px 14px rgba(245,184,61,.3); }
.btn.green { background: linear-gradient(135deg, var(--parrot-green), #6fe39a); color: #063217; box-shadow: 0 4px 14px rgba(75,208,125,.3); }
.btn.ghost { background: var(--bg-3); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn.ghost:hover { border-color: var(--accent); filter: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
input:focus, select:focus, textarea:focus { box-shadow: var(--ring); }

/* ---------- Login ---------- */
.login-wrap { display: grid; place-items: center; height: 100vh; padding: 20px; }
.login-card { width: 100%; max-width: 400px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 34px; box-shadow: var(--shadow); }
.login-card .brand { font-size: 40px; text-align: center; }
.login-card .brand-img { display: block; width: 240px; max-width: 80%; margin: 0 auto 4px; }
.login-card h1 { text-align: center; font-size: 24px; margin: 8px 0 6px; }
.login-card .tagline { text-align: center; color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
.login-card label { font-size: 12px; color: var(--text-dim); }
.login-card input { width: 100%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 13px 14px; border-radius: 12px; margin: 6px 0 16px; font-size: 15px; }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card .btn { width: 100%; }
.social-row { display: flex; gap: 10px; margin-bottom: 16px; }
.social-row button { flex: 1; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 11px; border-radius: 12px; font-weight: 600; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 12px; margin: 4px 0 16px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- Discovery / Launchpad / Portfolio (contenido genérico) ---------- */
.page { padding: 26px 30px; overflow-y: auto; height: 100vh; width: 100%; }
.page h1 { font-size: 26px; margin-bottom: 4px; }
.page .sub { color: var(--text-dim); margin-bottom: 22px; }
.big-search { display: flex; gap: 10px; margin-bottom: 24px; max-width: 640px; }
.big-search input { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 15px 18px; border-radius: 14px; font-size: 15px; }
.big-search input:focus { outline: none; border-color: var(--accent); }

.card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.token-head { display: flex; align-items: center; gap: 14px; }
.token-head .logo { font-size: 40px; }
.token-head .tname { font-weight: 800; font-size: 20px; }
.token-head .tca { font-family: monospace; font-size: 11px; color: var(--text-dim); }
.token-head .tprice { margin-left: auto; text-align: right; }
.token-head .tprice .p { font-size: 24px; font-weight: 800; }

.callout-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; margin-top: 10px; background: var(--bg-3); }
.callout-row .av { font-size: 24px; }
.callout-row .who { font-weight: 700; }
.callout-row .meta { font-size: 12px; color: var(--text-dim); }
.callout-row .go { margin-left: auto; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px){ .grid-2 { grid-template-columns: 1fr; } }
.field { margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--text-dim); display: block; margin-bottom: 6px; }
.field input, .field select { width: 100%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 11px 13px; border-radius: 10px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }

.progress { height: 10px; background: var(--bg-3); border-radius: 20px; overflow: hidden; margin: 10px 0; }
.progress > div { height: 100%; background: linear-gradient(90deg,var(--accent),var(--green)); }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; }
.stat { background: var(--bg-3); border-radius: 12px; padding: 14px 18px; flex: 1; min-width: 150px; }
.stat .k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; }
.stat .v { font-size: 22px; font-weight: 800; margin-top: 4px; }

.pill-row { display:flex; gap:8px; flex-wrap: wrap; margin-top: 8px; }
.tag { font-size: 11px; background: var(--bg-3); color: var(--text-dim); padding: 3px 10px; border-radius: 20px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow); z-index: 50; font-size: 14px; }
.empty { color: var(--text-dim); text-align: center; padding: 40px; }
.flash { animation: flash .5s ease; }
@keyframes flash { 0%{ background: rgba(51,144,236,.15);} 100%{ background: transparent; } }

/* ---------- Home dashboard (estilo DexScreener) ---------- */
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.home-tools { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.home-tools #chSearch { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 11px 16px; border-radius: 12px; font-size: 14px; min-width: 280px; }
.home-tools #chSearch:focus { outline: none; border-color: var(--accent); }
.chip-row { display: flex; gap: 8px; }
.chip { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); padding: 7px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.chip:hover { color: var(--text); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.board-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px){ .board-stats { grid-template-columns: repeat(2,1fr); } }
.bstat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.bstat .k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
.bstat .v { font-size: 20px; font-weight: 800; margin-top: 4px; }

.table-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
table.board { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 1000px; }
table.board thead th { position: sticky; top: 0; background: var(--bg-3); color: var(--text-dim); font-weight: 600; text-align: right; padding: 12px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; border-bottom: 1px solid var(--border); z-index: 1; }
table.board thead th.grp, table.board thead th.rank { text-align: left; }
table.board th.sortable { cursor: pointer; user-select: none; }
table.board th.sortable:hover { color: var(--text); }
table.board th.sortable.active { color: var(--accent-2); }
table.board th.sortable::after { content: " " attr(data-arrow); color: var(--accent-2); }

table.board tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
table.board tbody tr:hover { background: var(--bg-3); }
table.board tbody td { padding: 12px 14px; text-align: right; white-space: nowrap; vertical-align: middle; }
table.board td.rank { text-align: left; color: var(--text-dim); font-weight: 700; width: 40px; }
table.board td.grp { text-align: left; }
.grp-cell { display: flex; align-items: center; gap: 12px; }
.grp-av { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.grp-name { font-weight: 700; font-size: 14px; }
.grp-name .ver { color: var(--accent); font-size: 11px; }
.grp-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sub-tag { color: var(--green); }
.num.pos { color: var(--green); font-weight: 700; }
.num.neg { color: var(--red); font-weight: 700; }
.num.best { color: var(--gold); font-weight: 800; }
.winrate { font-weight: 700; }
td.spark svg { display: block; margin-left: auto; }
.btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 9px; }

/* ---------- Chat split (chat + panel de monedas promocionadas) ---------- */
.chat-split { display: grid; grid-template-columns: 1fr 320px; flex: 1; overflow: hidden; }
@media (max-width: 1100px){ .chat-split { grid-template-columns: 1fr; } .promo-panel { display: none; } }
.chat-main { display: flex; flex-direction: column; overflow: hidden; }
.promo-panel { border-left: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; overflow: hidden; }
.promo-head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.promo-head .cnt { background: var(--bg-3); color: var(--text-dim); font-size: 11px; padding: 2px 9px; border-radius: 20px; }
.promo-list { overflow-y: auto; padding: 8px; }
.promo-item { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.promo-item:hover { background: var(--bg-3); }
.pi-logo { font-size: 24px; }
.pi-top { display: flex; align-items: center; gap: 6px; }
.pi-ticker { font-weight: 700; font-size: 13.5px; }
.pi-chain { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.pi-price { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pi-price .chg { font-size: 11px; }
.pi-spark svg { display: block; }
.pi-roi { text-align: right; font-weight: 800; font-size: 13px; }
.pi-roi .roi-lbl { display: block; font-size: 9px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; }
.pi-roi.pos { color: var(--green); } .pi-roi.neg { color: var(--red); }

/* ---------- Token detail ---------- */
.chart-box { background: var(--bg-3); border-radius: 12px; padding: 20px; margin: 16px 0; display: grid; place-items: center; }
.chart-box svg { width: 100%; height: auto; }
.sec-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sec { font-size: 12px; padding: 5px 12px; border-radius: 20px; font-weight: 600; }
.sec.ok { background: rgba(75,208,125,.15); color: var(--green); }
.sec.bad { background: rgba(255,92,92,.15); color: var(--red); }
.v.pos { color: var(--green); } .v.neg { color: var(--red); }

/* ---------- Mini-logos de blockchain ---------- */
.chain-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px 2px 6px; border-radius: 20px; background: var(--bg-3); color: var(--text); margin-right: 4px; text-transform: none; letter-spacing: 0; }
.chain-mini .cm-logo { font-size: 12px; line-height: 1; }
.chain-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; background: color-mix(in srgb, var(--cc) 18%, transparent); vertical-align: middle; }
.grp-sub .chain-mini { margin-top: 2px; }
.mh-title .chain-mini { vertical-align: middle; }

/* trending / boosted */
.t\+ { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle; }
.t\+.fire { background: rgba(255,120,40,.16); color: #ff8f4d; }
.t\+.boost { background: rgba(245,196,81,.16); color: var(--gold); }

/* performance multi-timeframe */
.perf-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 16px; }
.perf-cell { background: var(--bg-3); border-radius: 10px; padding: 10px; text-align: center; }
.perf-cell .k { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.perf-cell .v { font-size: 15px; font-weight: 800; margin-top: 3px; }

/* buys/sells bar */
.bs-bar { margin: 16px 0; }
.bs-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.bs-track { height: 10px; border-radius: 20px; overflow: hidden; background: var(--red); }
.bs-buy { height: 100%; background: var(--green); }

/* copy button + socials + online */
.copy-btn { background: none; border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; padding: 0 4px; }
.copy-btn:hover { color: var(--accent-2); }
.tag.soc { cursor: pointer; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin: 0 3px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(75,208,125,.2); }
.sec.warn { background: rgba(245,196,81,.15); color: var(--gold); }

/* ---------- Tabs público/VIP en el chat ---------- */
.tier-tabs { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.tier-tab { background: transparent; border: none; color: var(--text-dim); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.tier-tab:hover { background: var(--bg-3); color: var(--text); }
.tier-tab.active { background: var(--bg-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.badge.priv { background: rgba(155,108,240,.16); color: var(--purple); }
.vip-gate { flex: 1; display: grid; place-items: center; padding: 30px; overflow-y: auto; }
.vip-gate .lock-card { max-width: 420px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; text-align: center; box-shadow: var(--shadow); }

/* Selector de destino público/VIP en el composer */
.post-tier { background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.post-tier:focus { outline: none; border-color: var(--accent); }

/* ---------- Perfil (usuario / canal) ---------- */
.profile-hero { display: flex; gap: 20px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.ph-avatar { width: 92px; height: 92px; border-radius: 24px; background: linear-gradient(135deg, var(--accent), var(--purple)); display: grid; place-items: center; font-size: 46px; flex-shrink: 0; box-shadow: var(--shadow); }
.ph-info { flex: 1; min-width: 0; }
.ph-name { font-size: 24px; font-weight: 800; }
.ph-name .ver { color: var(--accent); font-size: 14px; }
.ph-name-input { font-size: 22px; font-weight: 800; background: transparent; border: none; border-bottom: 1px dashed var(--border); color: var(--text); padding: 2px 0; width: 100%; max-width: 340px; }
.ph-name-input:focus { outline: none; border-bottom-color: var(--accent); }
.ph-handle { color: var(--text-dim); font-size: 13px; margin: 6px 0; }
.ph-bio { width: 100%; max-width: 480px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 12px; margin-top: 6px; resize: vertical; min-height: 44px; font-family: inherit; font-size: 13px; }
.ph-bio:focus { outline: none; border-color: var(--accent); }
.ph-actions { display: flex; gap: 8px; margin-top: 12px; }
.me.active-me { box-shadow: 0 0 0 3px var(--accent); }

.wallet-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.wallet-row:last-child { border-bottom: none; }
.wr-k { color: var(--text-dim); }
.wr-v { font-weight: 600; } .wr-v.mono { font-family: monospace; font-size: 12px; }
.connect-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.wc { background: var(--bg-3); border: 1px solid var(--border); color: var(--text); }
.btn.wc:hover { border-color: var(--accent); }
.btn.tg { background: #229ED9; color: #fff; }
.btn.tg:hover { background: #1b8ec4; }

/* ---------- Bandeja de aprobación ---------- */
.promo-req .req-status { margin-left: auto; font-size: 12px; font-weight: 700; }
.status-pending { color: var(--gold); } .status-approved { color: var(--green); } .status-rejected { color: var(--red); }
.promo-req.approved { opacity: .75; } .promo-req.rejected { opacity: .6; }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 100; backdrop-filter: blur(3px); }
.modal { width: 100%; max-width: 460px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.modal-x { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.modal-x:hover { color: var(--text); }
.promo-cost { background: var(--bg-3); border-radius: 10px; padding: 12px 14px; margin: 8px 0 16px; font-size: 14px; }
.promo-cost b { color: var(--gold); font-size: 16px; }
.promo-cost span { color: var(--text-dim); font-size: 12px; }
.tag.soc { cursor: pointer; text-decoration: none; }
.tag.soc:hover { background: var(--accent); color: #fff; }
.tag.soc.src { background: rgba(75,208,125,.16); color: var(--green); }

/* ================================================================
   Pase de diseño (designer-skills): tipografía de marca, jerarquía,
   affordance y foco accesible. Aplicado sobre los tokens de tokens.md
   ================================================================ */

/* Tipografía de marca en títulos (Space Grotesk) */
h1, .page h1, .ph-name, .ph-name-input, .login-card h1,
.tname, .grp-name, .call-ticker, .modal-head h3,
.list-head h2, .bstat .v, .stat .v, .metric .v {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.page h1 { font-size: 28px; line-height: 1.15; }
.page .sub { font-size: 15px; }
body { font-size: 15px; }

/* Foco accesible visible en todo elemento interactivo (critique-affordance) */
button:focus-visible, a:focus-visible, [data-ch]:focus-visible, .chip:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm);
}

/* CTA único: dentro de una tarjeta/modal solo el .btn primario lleva glow;
   los ghost quedan claramente secundarios (critique-affordance) */
.card .btn.ghost, .modal .btn.ghost { box-shadow: none; }

/* Superficies por elevación (dark-mode-design): modales más claros que cards */
.modal { background: var(--surface-3); }

/* RItmo: tarjetas con padding consistente derivado del spacing scale */
.card { padding: var(--sp-5); }

/* Metadata monoespaciada consistente */
.tca, .call-ca, .wr-v.mono, .grp-av + .grp-info .mono { font-family: var(--font-mono); }

/* Micro-motion: entrada suave de tarjetas y filas (aesthetic-usability) */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card, .bstat, .stat, .promo-item { animation: rise .28s ease both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Badges: legibilidad (uppercase tracking) */
.badge { letter-spacing: .4px; }

/* Hover de fila de tabla más claro (affordance de clickable) */
table.board tbody tr { position: relative; }
table.board tbody tr:hover { box-shadow: inset 3px 0 0 var(--brand-500); }

/* Enlaces de la app con color de marca coherente */
a { color: var(--brand-300); }
a:hover { color: var(--brand-500); }

/* ---------- Chat embebido en el perfil de canal (una sola vista) ---------- */
.cp-chat-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.cp-chat-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-weight: 700; font-family: var(--font-display); }
.cp-chat-card .tier-tabs { background: transparent; }
.cp-body { max-height: 460px; overflow-y: auto; padding: var(--sp-4); }
.cp-chat-card .composer { border-top: 1px solid var(--border); }
.cp-chat-card .vip-gate { padding: var(--sp-8); }

/* ---------- Layout perfil de canal: perfil+chat | monedas promocionadas ---------- */
.cp-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-5); align-items: start; }
@media (max-width: 1150px){ .cp-layout { grid-template-columns: 1fr; } .cp-promo { display: none; } }
.cp-promo { position: sticky; top: 0; border: 1px solid var(--border); border-radius: var(--radius); border-left: 1px solid var(--border); max-height: calc(100vh - 40px); }
.cp-promo .promo-head { border-radius: var(--radius) var(--radius) 0 0; }

/* Avatar de canal con imagen + botón editar (estilo Telegram) */
.cp-avatar { position: relative; overflow: visible; }
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.avatar-edit { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg-2); background: var(--brand-500); color: #04231f; font-size: 13px; display: grid; place-items: center; cursor: pointer; }
.avatar-edit:hover { background: var(--brand-300); }

/* Botón comprar en promociones y call-cards */
.pi-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pi-roi { font-weight: 800; font-size: 12px; }
.btn.pi-buy { padding: 4px 10px; font-size: 11px; border-radius: 8px; box-shadow: none; }
.buy-quote { background: var(--bg-3); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 4px 0 10px; }
.buy-presets { display: flex; gap: 6px; }
.buy-presets .btn { flex: 1; }

/* ---------- Logo de moneda real (imagen) ---------- */
.coin-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--bg-3); }
.call-logo .coin-img { width: 26px; height: 26px; }
.grp-av .coin-img { width: 42px; height: 42px; }
.pi-logo .coin-img { width: 24px; height: 24px; }
.token-head .logo .coin-img { width: 40px; height: 40px; }

/* ================= FOMO ELEMENTS ================= */

/* Ticker de actividad en vivo */
.live-ticker { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, rgba(18,179,166,.12), rgba(75,208,125,.06)); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; margin-bottom: 16px; overflow: hidden; }
.lt-fixed { display: flex; align-items: center; gap: 10px; flex-shrink: 0; border-right: 1px solid var(--border); padding-right: 12px; }
.lt-live { color: var(--red); font-weight: 800; font-size: 12px; white-space: nowrap; animation: blink 1.5s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.lt-watch { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.lt-viewport { flex: 1; overflow: hidden; }
.lt-track { display: inline-flex; gap: 14px; align-items: center; white-space: nowrap; animation: ticker 45s linear infinite; }
.live-ticker:hover .lt-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lt-item { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.lt-item b { color: var(--text); font-weight: 600; }
.lt-item.call b { color: var(--brand-300); }
.lt-buy { cursor: pointer; color: var(--brand-300) !important; }
.lt-buy:hover { text-decoration: underline; }
.lt-item .chg { font-size: 11px; }
.lt-dot { color: var(--border); }
@media (prefers-reduced-motion: reduce){ .lt-track { animation: none; } }

/* King of the Hill */
.koh-banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(245,184,61,.14), rgba(155,108,240,.10)); border: 1px solid rgba(245,184,61,.3); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.koh-tag { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 14px; flex-shrink: 0; }
.koh-item { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 10px; border-radius: 10px; transition: background .12s; flex: 1; }
.koh-item:hover { background: rgba(255,255,255,.05); }
.koh-av { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: 20px; overflow: hidden; }
.koh-av .coin-img { width: 40px; height: 40px; }
.koh-name { font-weight: 700; font-size: 14px; }
.koh-sub { font-size: 11px; color: var(--text-dim); }
.koh-pnl { margin-left: auto; font-weight: 800; font-size: 16px; }
.koh-pnl.pos { color: var(--green); } .koh-pnl.neg { color: var(--red); }
.koh-divider { width: 1px; align-self: stretch; background: rgba(245,184,61,.3); }
@media (max-width: 800px){ .koh-divider, .koh-tk { display: none; } }

/* Momentum badges */
.mb { font-size: 12px; margin-left: 4px; }
.mb.koh { filter: drop-shadow(0 0 4px rgba(245,184,61,.6)); }
.mb.fire { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .5; transform: scale(1.15); } }

/* Toast FOMO (esquina) */
.fomo-toast { position: fixed; right: 20px; bottom: 20px; background: var(--surface-3); border: 1px solid var(--brand-500); color: var(--text); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: 13px; z-index: 60; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; max-width: 320px; }
.fomo-toast.show { opacity: 1; transform: none; }
.fomo-toast b { color: var(--brand-300); }

/* ================= HEADER GLOBAL ================= */
.app-wrap { display: flex; flex-direction: column; height: 100vh; }
.topbar { height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 18px; padding: 0 18px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.app-wrap .shell { height: auto; flex: 1; min-height: 0; }
.tb-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }
.tb-logo { width: 34px; height: 34px; border-radius: 9px; }
.tb-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.tb-search { flex: 1; max-width: 520px; position: relative; }
.tb-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .6; }
.tb-search input { width: 100%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 9px 14px 9px 34px; border-radius: 10px; font-size: 13.5px; }
.tb-search input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.tb-wallet { display: flex; flex-direction: column; align-items: flex-end; cursor: pointer; line-height: 1.2; }
.tb-usdc { font-weight: 700; font-size: 13px; color: var(--green); }
.tb-sol { font-size: 11px; color: var(--text-dim); }
.tb-avatar { width: 38px; height: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--brand-500), var(--purple)); font-size: 18px; display: grid; place-items: center; cursor: pointer; }
.tb-avatar.active-me { box-shadow: 0 0 0 3px var(--brand-500); }
.rail-logout { width: 52px; height: 44px; border-radius: 12px; border: none; background: transparent; color: var(--text-dim); font-size: 18px; }
.rail-logout:hover { background: var(--bg-3); color: var(--red); }
@media (max-width: 700px){ .tb-name, .tb-wallet { display: none; } }

/* ================= CREAR CANAL (rediseño) ================= */
.create-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ch-hero-ic { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-500), var(--purple)); display: grid; place-items: center; font-size: 30px; box-shadow: var(--shadow); }
.create-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
@media (max-width: 1000px){ .create-grid { grid-template-columns: 1fr; } .create-preview { display: none; } }
.create-form { display: flex; flex-direction: column; gap: 16px; }
.card-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.ct-ic { font-size: 16px; }

/* chips seleccionables */
.chip-select { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-select .chip { background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim); }
.chip-select .chip.active { background: rgba(18,179,166,.15); border-color: var(--brand-500); color: var(--text); }

/* segmented control */
.seg { display: inline-flex; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.seg-btn { background: transparent; border: none; color: var(--text-dim); padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.seg-btn.active { background: var(--brand-500); color: #04231f; }

/* switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; cursor: pointer; }
.switch { appearance: none; width: 44px; height: 24px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 20px; position: relative; cursor: pointer; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: transform .15s, background .15s; }
.switch:checked { background: var(--brand-500); border-color: var(--brand-500); }
.switch:checked::after { transform: translateX(20px); background: #04231f; }

/* social inputs */
.social-inputs { display: flex; flex-direction: column; gap: 10px; }
.si-row { display: flex; align-items: center; gap: 10px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.si-row:focus-within { border-color: var(--brand-500); }
.si-ic { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.si-row input { flex: 1; background: transparent; border: none; color: var(--text); padding: 11px 0; font-size: 13.5px; }
.si-row input:focus { outline: none; box-shadow: none; }

.or-divider { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 12px; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tg-connect { border-color: rgba(34,158,217,.3); }

/* preview */
.create-preview { position: sticky; top: 12px; }
.cpv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 8px; }
.cpv-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.cpv-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cpv-av { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-500), var(--purple)); display: grid; place-items: center; font-size: 24px; }
.cpv-name { font-weight: 700; font-size: 15px; }
.cpv-handle { font-size: 12px; color: var(--text-dim); }
.cpv-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }

/* ================= MEJORAS FOMO (P0/P1/P2) ================= */

/* No-leídos */
.unread-dot { position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.rail button { position: relative; }
.ci-unread { position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-500); border: 2px solid var(--bg-2); }
.ci-avatar { position: relative; }

/* King of the Hill: botón comprar */
.koh-buy { flex-shrink: 0; margin-left: 10px; }

/* Frescura / timing */
.fresh-badge { font-size: 10px; font-weight: 800; background: rgba(75,208,125,.18); color: var(--green); padding: 1px 6px; border-radius: 6px; margin-left: 4px; animation: pulse 1.6s infinite; }
.called-ago { color: var(--gold); font-weight: 600; }

/* Social proof + reacciones */
.social-proof { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.buyers { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.reactions { display: flex; gap: 6px; }
.rx { background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 3px 9px; font-size: 12px; cursor: pointer; transition: transform .12s; }
.rx:hover { border-color: var(--brand-500); }
.rx.reacted { transform: scale(1.25); }
.rx b { color: var(--text-dim); font-weight: 700; }

/* Acciones de la call-card */
.cc-actions { display: flex; gap: 8px; margin-top: 10px; }
.cc-actions .cc-buy { flex: 1; }
.cc-share { flex-shrink: 0; padding: 0 14px; }

/* Track record */
.track-record { margin-top: 16px; }
.tr-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 12px; }
.tr-stat { background: var(--bg-3); border-radius: 10px; padding: 10px; text-align: center; }
.tr-stat .k { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.tr-stat .v { font-size: 15px; font-weight: 800; margin-top: 3px; }
.tr-list { display: flex; flex-direction: column; gap: 4px; }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.tr-row:hover { background: var(--bg-3); }
.tr-tk { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; flex: 1; }
.tr-logo.coin-img { width: 20px; height: 20px; }
.tr-time { font-size: 11px; color: var(--text-dim); }
.tr-roi { font-weight: 800; font-size: 13px; min-width: 60px; text-align: right; }
.tr-roi.pos { color: var(--green); } .tr-roi.neg { color: var(--red); }

/* Feedback post-compra + confeti */
.buy-success { text-align: center; }
.buy-done { padding: 10px 0; }
.bd-emoji { font-size: 46px; animation: pop .4s ease; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.confetti-bit { position: absolute; top: -10px; width: 8px; height: 8px; border-radius: 2px; animation: fall 1.4s ease-in forwards; z-index: 200; }
@keyframes fall { to { top: 100%; opacity: 0; } }

/* Contexto del modal difundir */
.promo-ctx { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 4px 0 10px; }
.pc-stat { background: var(--bg-3); border-radius: 10px; padding: 8px; text-align: center; }
.pc-stat .k { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.pc-stat .v { font-size: 14px; font-weight: 700; margin-top: 2px; }
.pc-stat .v.pos { color: var(--green); } .pc-stat .v.neg { color: var(--red); }

/* ================= ESTÉTICA TERMINAL (GMGN-like) ================= */
/* Números tabulares/mono en tablas y métricas — legibilidad de trader */
table.board td.num, .metric .v, .stat .v, .bstat .v, .koh-pnl, .pi-price, .pi-roi, .tr-roi, .price-now, .perf-cell .v {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
/* Tabla más compacta y con líneas finas (densidad de terminal) */
table.board { font-size: 13px; }
table.board tbody td { padding: 10px 14px; }
table.board thead th { font-size: 10.5px; letter-spacing: .5px; }
/* Filas cebra sutiles */
table.board tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }

/* Toggle Quick Buy */
.qb-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); margin-top: 10px; cursor: pointer; }
.qb-toggle input { accent-color: var(--brand-500); }

/* Acento verde eléctrico en CTAs de compra (GMGN vibe) */
.btn.green { box-shadow: 0 0 0 1px rgba(46,204,113,.2), 0 4px 14px rgba(46,204,113,.25); }
.side-pill.BUY { background: rgba(46,204,113,.16); color: var(--green-500); }

/* ================= RESPONSIVE MÓVIL ================= */
@media (max-width: 760px){
  .rail { width: 56px; padding: 10px 0; }
  .rail button, .rail .logo-img { width: 44px; height: 44px; }
  .topbar { gap: 10px; padding: 0 10px; }
  .tb-search { max-width: none; }
  .page { padding: 16px 12px; }
  .home-head { flex-direction: column; gap: 12px; }
  .home-tools { align-items: stretch; width: 100%; }
  .home-tools #chSearch { min-width: 0; width: 100%; }
  .board-stats { grid-template-columns: repeat(2,1fr); }
  .koh-banner { flex-wrap: wrap; }
  /* vista de canal: apilar todo en una columna */
  .cp-layout { grid-template-columns: 1fr; }
  .cp-promo { display: block; position: static; max-height: none; margin-top: 16px; }
  .create-grid, .grid-2 { grid-template-columns: 1fr; }
  .tr-summary, .perf-row, .promo-ctx { grid-template-columns: repeat(2,1fr); }
  .stat-row { flex-direction: column; }
  .cp-body { max-height: 380px; }
  .modal { max-width: 94vw; }
  .live-ticker { display: none; } /* el ticker ocupa mucho en móvil */
}
@media (max-width: 480px){
  .board-stats { grid-template-columns: 1fr; }
  .tb-name { display: none; }
}

/* TP/SL en compra */
.tpsl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Wallet P&L */
.pnl-head { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pnl-tag { font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.pnl-tag.smart_money { background: rgba(46,204,113,.16); color: var(--green-500); }
.pnl-tag.jeet { background: rgba(246,70,93,.16); color: var(--red-500); }
.pnl-tag.trader { background: var(--bg-3); color: var(--text-dim); }

/* ================================================================
   PASE UI/UX PROFESIONAL (designer-skills: loading-states,
   feedback-patterns, animation-principles, interfaces-that-feel,
   visual-hierarchy, aesthetic-usability)
   ================================================================ */

/* --- Tokens de motion (animation-principles) --- */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 90ms; --dur-short: 180ms; --dur-med: 320ms;
}

/* --- Skeletons con shimmer (loading-states) --- */
.skeleton { position: relative; overflow: hidden; background: var(--bg-3); border-radius: 8px; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sk-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.sk-line { height: 12px; border-radius: 6px; }
.sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w25 { width: 25%; }
.sk-stack { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-card { height: 84px; border-radius: var(--radius); margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce){ .skeleton::after { animation: none; } }

/* --- Empty states (interfaces-that-feel: invitational voice) --- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; gap: 8px; }
.empty-state .es-emoji { font-size: 44px; opacity: .9; margin-bottom: 4px; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.empty-state h3 { font-family: var(--font-display); font-size: 17px; }
.empty-state p { color: var(--text-dim); font-size: 13.5px; max-width: 320px; }
.empty-state .btn { margin-top: 10px; }

/* --- Entradas escalonadas de listas (stagger, animation-principles) --- */
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise-in var(--dur-med) var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:0ms}.stagger > *:nth-child(2){animation-delay:40ms}
.stagger > *:nth-child(3){animation-delay:80ms}.stagger > *:nth-child(4){animation-delay:120ms}
.stagger > *:nth-child(5){animation-delay:160ms}.stagger > *:nth-child(6){animation-delay:200ms}
.stagger > *:nth-child(7){animation-delay:240ms}.stagger > *:nth-child(8){animation-delay:280ms}
@media (prefers-reduced-motion: reduce){ .stagger > * { animation: none; } }

/* --- Botones: feedback de press (micro-interaction) --- */
.btn { transition: transform var(--dur-micro) var(--ease-out), filter var(--dur-short), box-shadow var(--dur-short); }
.btn:active:not(:disabled) { transform: scale(0.96); }
.chip, .tier-tab, .rx, .seg-btn { transition: all var(--dur-short) var(--ease-out); }
.chip:active, .rx:active { transform: scale(0.94); }

/* --- Filas de tabla: hover con leve elevación --- */
table.board tbody tr { transition: background var(--dur-short), box-shadow var(--dur-short); }

/* --- Precio en vivo: pulso al actualizar (más suave que flash) --- */
@keyframes price-pulse { 0%{ color: var(--brand-300);} 100%{ color: inherit; } }
.price-now.flash, [data-price].flash { animation: price-pulse .6s var(--ease-out); }

/* --- Toasts: entrada con spring-out (feedback-patterns) --- */
.toast { animation: toast-in var(--dur-med) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --- Focus visible accesible global --- */
:where(button, a, input, select, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* --- Jerarquía: números grandes en stats con mejor tracking --- */
.stat .v, .bstat .v { letter-spacing: -0.02em; }

/* contenedor de carga en páginas full */
.page-load { animation: rise-in var(--dur-med) var(--ease-out); }
.skeleton-list { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }