/* =========================================================================
   GIWA Terminal — diseño: noche profunda con aurora, vidrio, y luz que late con el mercado.
   ========================================================================= */
:root {
  --bg: #06080d; --bg2: rgba(14, 19, 28, .72); --panel: rgba(15, 20, 30, .62); --panel-s: #0f141e; --panel2: rgba(28, 36, 50, .7);
  --line: rgba(120, 140, 170, .12); --line2: rgba(120, 140, 170, .2);
  --tx: #eef3f8; --tx2: #9ba8b8; --tx3: #66738a;
  --up: #14f195; --up-bg: rgba(20, 241, 149, .12); --dn: #ff4d6d; --dn-bg: rgba(255, 77, 109, .12);
  --a1: #22d3ee; --a2: #8b5cf6; --a3: #14f195; --ac: #14f195; --warn: #fbbf24; --blue: #60a5fa;
  --grad: linear-gradient(135deg, var(--a1), var(--a2));
  --grad-up: linear-gradient(135deg, #14f195, #22d3ee);
  --grad-dn: linear-gradient(135deg, #ff4d6d, #f97316);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 14px; --blur: blur(14px) saturate(140%);
  --sombra: 0 10px 40px rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font: 13px/1.45 Inter, system-ui, -apple-system, Segoe UI, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
/* aurora de fondo: tres luces que se mueven lento */
body::before, body::after { content: ""; position: fixed; z-index: -2; pointer-events: none; filter: blur(90px); opacity: .5; border-radius: 50%; }
body::before { width: 60vw; height: 60vw; left: -15vw; top: -25vw; background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 65%); animation: aurora1 26s ease-in-out infinite alternate; }
body::after { width: 55vw; height: 55vw; right: -15vw; top: 10vh; background: radial-gradient(circle, rgba(139, 92, 246, .32), transparent 65%); animation: aurora2 32s ease-in-out infinite alternate; }
.fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, .55), transparent 70%); }
.fondo::after { content: ""; position: absolute; width: 50vw; height: 50vw; left: 30vw; bottom: -30vw; border-radius: 50%; filter: blur(100px);
  background: radial-gradient(circle, rgba(20, 241, 149, .18), transparent 65%); animation: aurora1 38s ease-in-out infinite alternate-reverse; }
@keyframes aurora1 { to { transform: translate(18vw, 12vh) scale(1.15); } }
@keyframes aurora2 { to { transform: translate(-16vw, 18vh) scale(.9); } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.up { color: var(--up); } .dn { color: var(--dn); } .mut { color: var(--tx3); } .mut2 { color: var(--tx2); }
::selection { background: rgba(34, 211, 238, .3); }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 140, 170, .25) transparent; }

/* ---------- barra superior ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 18px;
  background: rgba(6, 8, 13, .72); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: -.3px; white-space: nowrap; }
.logo b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.logo-mark { position: relative; width: 28px; height: 28px; border-radius: 9px; background: conic-gradient(from 0deg, var(--a1), var(--a2), var(--a3), var(--a1)); animation: giro 8s linear infinite; }
.logo-mark::after { content: ""; position: absolute; inset: 2px; border-radius: 7px; background: #0a0e16 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 21l6-7 4 3 8-9' stroke='%2314f195' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
@keyframes giro { to { filter: hue-rotate(360deg); } }
.red { font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 3px 9px; border-radius: 20px; background: rgba(251, 191, 36, .1); color: var(--warn); border: 1px solid rgba(251, 191, 36, .25); white-space: nowrap; }
.red.main { background: var(--up-bg); color: var(--up); border-color: rgba(20, 241, 149, .3); }
.nav { display: flex; gap: 2px; }
.nav a { color: var(--tx2); font-weight: 600; padding: 7px 12px; border-radius: 9px; transition: .2s; }
.nav a:hover { color: var(--tx); background: rgba(255, 255, 255, .04); }
.nav a.on { color: var(--tx); background: rgba(255, 255, 255, .06); box-shadow: inset 0 -2px 0 var(--a1); }
.buscar { position: relative; flex: 1; max-width: 440px; margin-left: auto; }
.buscar input { width: 100%; height: 38px; padding: 0 36px 0 38px; border-radius: 11px; border: 1px solid var(--line2); background: rgba(15, 20, 30, .7); outline: none; transition: .2s; }
.buscar::before { content: ""; position: absolute; left: 13px; top: 12px; width: 14px; height: 14px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba8b8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.buscar input:focus { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 4px rgba(34, 211, 238, .1); }
.buscar kbd { position: absolute; right: 9px; top: 9px; font: 11px var(--mono); color: var(--tx3); border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px; }
.top-der { display: flex; align-items: center; gap: 14px; }
.eth { font-family: var(--mono); color: var(--tx2); white-space: nowrap; font-size: 12px; }
.vivo { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--tx2); white-space: nowrap; font-weight: 600; }
.vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--tx3); }
.vivo.ok i { background: var(--up); animation: latido 2s ease-out infinite; }
.vivo.mal i { background: var(--dn); }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(20, 241, 149, .6); } 100% { box-shadow: 0 0 0 9px rgba(20, 241, 149, 0); } }
.btn-wallet { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line2); background: rgba(15, 20, 30, .7); font-weight: 700; font-size: 12px; color: var(--tx); white-space: nowrap; transition: .2s; }
.btn-wallet:hover { border-color: rgba(34, 211, 238, .5); }
.btn-wallet.cta { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 24px rgba(139, 92, 246, .35); }
.btn-wallet.cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-wallet .wdot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px var(--up); }
.btn-wallet .wdot.externa { background: var(--blue); box-shadow: 0 0 10px var(--blue); }

/* ---------- cinta de trades en vivo ---------- */
.cinta { position: sticky; top: 58px; z-index: 25; height: 36px; overflow: hidden; border-bottom: 1px solid var(--line); background: rgba(6, 8, 13, .55); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 80px), transparent); }
.cinta-in { display: flex; gap: 8px; align-items: center; height: 100%; padding: 0 18px; white-space: nowrap; }
.cinta-vacia { color: var(--tx3); font-size: 11px; }
.tape { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 4px; border-radius: 20px; border: 1px solid var(--line); background: rgba(20, 26, 38, .8); font-size: 11px; cursor: pointer; flex: none; animation: entraTape .5s cubic-bezier(.2, .9, .3, 1.3); transition: border-color .2s; }
.tape:hover { border-color: var(--line2); }
.tape .ti { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #06080d; flex: none; }
.tape .ti img { width: 100%; height: 100%; object-fit: cover; }
.tape b { font-weight: 700; }
.tape.b { border-color: rgba(20, 241, 149, .35); box-shadow: 0 0 14px rgba(20, 241, 149, .12); } .tape.b .lado { color: var(--up); }
.tape.s { border-color: rgba(255, 77, 109, .35); box-shadow: 0 0 14px rgba(255, 77, 109, .12); } .tape.s .lado { color: var(--dn); }
.tape .lado { font-weight: 800; font-size: 10px; letter-spacing: .3px; }
.tape .mono { color: var(--tx2); }
@keyframes entraTape { from { opacity: 0; transform: translateX(-24px) scale(.8); } }

main { padding: 14px 18px 26px; animation: aparece .35s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
.hist { background: linear-gradient(90deg, rgba(251, 191, 36, .14), rgba(251, 191, 36, .05)); color: var(--warn); font-weight: 600; font-size: 12px; text-align: center; padding: 7px 16px; border-bottom: 1px solid rgba(251, 191, 36, .2); }
.hist[hidden] { display: none; }

/* ---------- filtros ---------- */
.filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2); backdrop-filter: var(--blur); color: var(--tx2); font-weight: 600; font-size: 12px; transition: .2s; }
.chip:hover { color: var(--tx); border-color: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.chip.on { color: var(--tx); border-color: transparent; background: linear-gradient(var(--panel-s), var(--panel-s)) padding-box, var(--grad) border-box; border: 1px solid transparent; box-shadow: 0 4px 18px rgba(34, 211, 238, .15); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--tx2); font-weight: 600; cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--a1); width: 15px; height: 15px; }

/* ---------- columnas ---------- */
.tabs-cols { display: none; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.col { position: relative; background: var(--panel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; height: calc(100vh - 168px); min-height: 480px; box-shadow: var(--sombra); overflow: hidden; container-type: inline-size; }
.col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c-acento, var(--grad)); opacity: .9; }
.col[data-col="new"] { --c-acento: linear-gradient(90deg, #22d3ee, #60a5fa); }
.col[data-col="bond"] { --c-acento: linear-gradient(90deg, #fbbf24, #f97316, #ff4d6d); }
.col[data-col="grad"] { --c-acento: linear-gradient(90deg, #14f195, #22d3ee); }
.col-h { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.col-h .ico { font-size: 15px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .25)); }
.col-h h2 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.col-h .sub { color: var(--tx3); font-size: 11px; font-weight: 500; }
.col-h .n { margin-left: auto; font: 600 11px var(--mono); color: var(--tx2); background: rgba(255, 255, 255, .05); border-radius: 8px; padding: 2px 8px; }
.col-h .pausa { font: 700 10px Inter, sans-serif; color: var(--warn); background: rgba(251, 191, 36, .12); padding: 3px 8px; border-radius: 10px; }
.col-h .pausa[hidden] { display: none; }
.lista { overflow-y: auto; flex: 1; padding: 6px; }
.vacio { padding: 44px 16px; text-align: center; color: var(--tx3); }

/* tarjeta */
.card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 11px; padding: 11px 11px; margin-bottom: 6px; border-radius: 12px; cursor: pointer;
  background: rgba(20, 27, 40, .55); border: 1px solid transparent; transition: transform .18s, background .18s, border-color .18s, box-shadow .18s; }
.card:hover { background: rgba(28, 37, 54, .75); border-color: color-mix(in srgb, var(--pc, #22d3ee) 45%, transparent); transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--pc, #22d3ee) 18%, transparent); }
.card.flash { animation: entra .7s cubic-bezier(.2, .9, .25, 1.15); }
.card.flash::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .09) 50%, transparent 80%); animation: barrido 1.1s ease-out forwards; }
@keyframes entra { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); opacity: 0; } }
.card.pulso-b { animation: pb 1.1s ease-out; } .card.pulso-s { animation: ps 1.1s ease-out; }
@keyframes pb { 0% { box-shadow: 0 0 0 1px rgba(20, 241, 149, .9), 0 0 28px rgba(20, 241, 149, .35); background: rgba(20, 241, 149, .1); } 100% { box-shadow: 0 0 0 1px transparent; } }
@keyframes ps { 0% { box-shadow: 0 0 0 1px rgba(255, 77, 109, .9), 0 0 28px rgba(255, 77, 109, .35); background: rgba(255, 77, 109, .1); } 100% { box-shadow: 0 0 0 1px transparent; } }
.av { position: relative; width: 56px; height: 56px; }
.av .img { position: relative; width: 56px; height: 56px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 19px; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); overflow: hidden;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc, #22d3ee) 55%, transparent), 0 6px 18px rgba(0, 0, 0, .35); }
.av .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0f141e; }
.av .pad { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 5px; white-space: nowrap; color: #06080d; max-width: 66px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.c-mid { min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.c-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.c-l1 .sym { font-weight: 800; font-size: 14px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; max-width: 11ch; }
.c-l1 .nom { color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; font-size: 12px; }
.cp { color: var(--tx3); padding: 0 2px; flex: none; transition: color .15s; } .cp:hover { color: var(--a1); }
.c-l2 { display: flex; align-items: center; gap: 10px; color: var(--tx2); font-size: 12px; white-space: nowrap; }
.age { color: var(--up); font-weight: 700; font-family: var(--mono); font-size: 12px; }
.ic { display: inline-flex; align-items: center; gap: 3px; }
.ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.soc { display: inline-flex; gap: 6px; } .soc a { color: var(--tx3); transition: color .15s; } .soc a:hover { color: var(--tx); }
.soc svg { width: 13px; height: 13px; fill: currentColor; }
.c-l3 { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--tx3); min-height: 14px; }
.bar { position: relative; flex: 1; max-width: 150px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #22d3ee, #14f195); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: brillo 2.2s ease-in-out infinite; }
.bar.caliente i { background: linear-gradient(90deg, #fbbf24, #f97316, #ff4d6d); box-shadow: 0 0 10px rgba(249, 115, 22, .6); }
@keyframes brillo { to { transform: translateX(100%); } }
.pc { color: var(--tx2); font-weight: 600; } .caliente + .pc { color: #fbbf24; }
.c-der { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
.mv { text-align: right; font-size: 12px; white-space: nowrap; line-height: 1.5; }
.mv b { font-family: var(--mono); font-weight: 700; font-size: 13px; transition: color .3s, text-shadow .3s; }
.mv .l { color: var(--tx3); margin-right: 4px; font-size: 11px; }
.mv b.sube { color: var(--up); text-shadow: 0 0 12px rgba(20, 241, 149, .7); } .mv b.baja { color: var(--dn); text-shadow: 0 0 12px rgba(255, 77, 109, .7); }
.comprar { display: inline-flex; align-items: center; gap: 4px; height: 27px; padding: 0 11px; border-radius: 8px; background: rgba(20, 241, 149, .1); color: var(--up); font-weight: 800; font-size: 12px; white-space: nowrap; border: 1px solid rgba(20, 241, 149, .25); cursor: pointer; font-family: inherit; transition: .18s; }
.comprar:hover { background: var(--grad-up); color: #06080d; border-color: transparent; box-shadow: 0 4px 16px rgba(20, 241, 149, .35); }
/* esqueleto mientras carga */
.esq { height: 78px; margin-bottom: 6px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .03) 25%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .03) 75%); background-size: 200% 100%; animation: esq 1.3s linear infinite; }
@keyframes esq { to { background-position: -200% 0; } }

/* ---------- ficha de token ---------- */
.tk-top { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--panel); backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--sombra); overflow: hidden; }
.tk-top::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 120px at 10% 0%, color-mix(in srgb, var(--pc, #22d3ee) 16%, transparent), transparent); pointer-events: none; }
.tk-id { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; }
.tk-id .av, .tk-id .av .img { width: 52px; height: 52px; }
.tk-id .t1 { display: flex; align-items: baseline; gap: 8px; }
.tk-id .t1 .sym { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.tk-id .t1 .nom { color: var(--tx2); }
.tk-id .t2 { display: flex; align-items: center; gap: 10px; color: var(--tx2); font-size: 12px; margin-top: 4px; flex-wrap: wrap; }
.ca { font: 12px var(--mono); color: var(--tx2); background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 7px; padding: 3px 9px; cursor: pointer; transition: .15s; word-break: break-all; }
.ca:hover { color: var(--tx); border-color: rgba(34, 211, 238, .5); }
.padlink { color: var(--tx2); font-weight: 700; } .padlink:hover { color: var(--a1); }
.tk-mc { position: relative; font: 800 30px var(--mono); letter-spacing: -1px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: filter .3s; }
.tk-mc.sube { filter: drop-shadow(0 0 14px rgba(20, 241, 149, .8)); } .tk-mc.baja { filter: drop-shadow(0 0 14px rgba(255, 77, 109, .8)); }
.stats { position: relative; display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.st { background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; min-width: 84px; }
.st .l { color: var(--tx3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .st .v { font: 700 13px var(--mono); margin-top: 2px; }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; }
.tk-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel { background: var(--panel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); }
.chart-bar { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tfs, .seg { display: flex; gap: 2px; background: rgba(0, 0, 0, .3); border-radius: 9px; padding: 3px; border: 1px solid var(--line); }
.tfs button, .seg button { height: 25px; padding: 0 10px; border-radius: 6px; color: var(--tx3); font-weight: 700; font-size: 12px; transition: .15s; }
.tfs button.on, .seg button.on { background: rgba(255, 255, 255, .09); color: var(--tx); box-shadow: inset 0 -2px 0 var(--a1); }
.tfs button:hover, .seg button:hover { color: var(--tx); }
.sep { flex: 1; }
.chart-info { font: 11px var(--mono); color: var(--tx3); width: 100%; order: 9; min-height: 14px; }
#chart { height: 460px; position: relative; }
.chart-vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tx3); }
.tabs { display: flex; gap: 4px; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.tabs button { height: 31px; padding: 0 13px; border-radius: 8px; font-weight: 700; color: var(--tx3); transition: .15s; }
.tabs button.on { color: var(--tx); background: rgba(255, 255, 255, .07); }
.tabla-w { max-height: 540px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { position: sticky; top: 0; z-index: 1; background: var(--panel-s); text-align: left; color: var(--tx3); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; font-family: var(--mono); }
tbody tr { transition: background .15s; } tbody tr:hover td { background: rgba(255, 255, 255, .025); }
tr.nuevo td { animation: filaNueva 1.4s ease-out; }
tr.nuevo td:first-child { box-shadow: inset 3px 0 0 var(--a1); }
@keyframes filaNueva { from { background: rgba(34, 211, 238, .16); } }
td a:hover { color: var(--a1); }
.tipo-b { color: var(--up); font-weight: 800; font-family: Inter, sans-serif; } .tipo-s { color: var(--dn); font-weight: 800; font-family: Inter, sans-serif; }
.num { text-align: right; } th.num { text-align: right; }
.tk-side { display: flex; flex-direction: column; gap: 14px; }
.box { background: var(--panel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--sombra); }
.box h3 { margin: 0 0 10px; font-size: 11px; color: var(--tx3); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cambios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.cambios button { background: rgba(0, 0, 0, .25); border-radius: 9px; padding: 8px 4px; text-align: center; border: 1px solid transparent; transition: .15s; }
.cambios button.on { border-color: var(--line2); background: rgba(255, 255, 255, .06); }
.cambios .l { color: var(--tx3); font-size: 11px; font-weight: 600; } .cambios .v { font: 700 12px var(--mono); margin-top: 2px; }
.vs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 11px; font-size: 11px; color: var(--tx3); }
.vs b { display: block; font: 700 12px var(--mono); color: var(--tx); margin-top: 2px; }
.bs { height: 6px; border-radius: 4px; background: var(--dn); overflow: hidden; margin-top: 9px; } .bs i { display: block; height: 100%; background: var(--grad-up); transition: width .6s; }
.nota { color: var(--tx3); font-size: 11px; margin-top: 8px; line-height: 1.5; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px; }
.kv:last-child { border-bottom: 0; } .kv .v { font-family: var(--mono); text-align: right; }
.seg-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg-g .c { background: rgba(0, 0, 0, .25); border-radius: 9px; padding: 9px; text-align: center; }
.seg-g .c .l { color: var(--tx3); font-size: 11px; font-weight: 600; } .seg-g .c .v { font: 700 13px var(--mono); margin-top: 2px; }
.desc { color: var(--tx2); font-size: 12px; line-height: 1.55; word-break: break-word; }
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.links a { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); color: var(--tx2); font-weight: 700; font-size: 12px; transition: .15s; }
.links a:hover { color: var(--tx); border-color: rgba(34, 211, 238, .5); }
.volver { color: var(--tx2); font-weight: 700; } .volver:hover { color: var(--tx); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--panel-s); border: 1px solid var(--line2); padding: 10px 18px; border-radius: 10px; font-weight: 700; transition: .25s; pointer-events: none; z-index: 80; box-shadow: var(--sombra); max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.on { opacity: 1; transform: translateX(-50%); }
.cargando { padding: 70px 20px; text-align: center; color: var(--tx3); }

/* ---------- wallet ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(2, 4, 8, .65); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: aparece .2s ease-out; }
.modal[hidden] { display: none; }
.modal-c { position: relative; width: 100%; max-width: 450px; max-height: calc(100vh - 32px); overflow: auto; background: rgba(13, 18, 28, .96); border: 1px solid var(--line2); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(139, 92, 246, .1); animation: entraModal .3s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes entraModal { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.modal-c h2 { margin: 0 0 2px; font-size: 18px; font-weight: 800; }
.modal-c h3 { margin: 8px 0 0; font-size: 11px; color: var(--tx3); text-transform: uppercase; letter-spacing: .5px; }
.modal-c p { margin: 0; font-size: 12px; line-height: 1.55; }
.modal-c input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); outline: none; transition: .15s; }
.modal-c input:focus { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 4px rgba(34, 211, 238, .1); }
.modal-c .x { position: absolute; right: 14px; top: 11px; font-size: 22px; color: var(--tx3); line-height: 1; } .modal-c .x:hover { color: var(--tx); }
.btn-p { width: 100%; height: 42px; border-radius: 11px; background: var(--grad-up); color: #06080d; font-weight: 800; font-size: 14px; transition: .18s; box-shadow: 0 6px 22px rgba(20, 241, 149, .25); }
.btn-p:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-p:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-p.venta { background: var(--grad-dn); color: #06080d; box-shadow: 0 6px 22px rgba(255, 77, 109, .25); }
.btn-s { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font-weight: 700; color: var(--tx2); transition: .15s; }
.btn-s:hover { color: var(--tx); border-color: rgba(34, 211, 238, .45); }
.lnk { font-size: 12px; font-weight: 700; color: var(--a1); padding: 4px 0; text-align: left; } .lnk.dn { color: var(--dn); }
.err { color: var(--dn); background: var(--dn-bg); border: 1px solid rgba(255, 77, 109, .25); border-radius: 9px; padding: 8px 11px; font-size: 12px; }
.w-addr { font-size: 12px; word-break: break-all; background: rgba(0, 0, 0, .35); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: .15s; }
.w-addr:hover { border-color: rgba(34, 211, 238, .5); }
.w-bal { display: flex; align-items: baseline; gap: 8px; } .w-bal b { font-size: 24px; }
.w-acc { display: flex; gap: 8px; flex-wrap: wrap; } .w-acc .btn-s { flex: 1; } .w-acc .btn-p { flex: 2; }
.w-otras { display: flex; flex-direction: column; gap: 6px; }
.w-o { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.w-o .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.w-aj { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; color: var(--tx2); }
.w-aj label { display: flex; flex-direction: column; gap: 4px; } .w-aj .full { grid-column: 1 / -1; }
.w-montos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.avisos { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 8px; max-width: min(390px, calc(100vw - 32px)); }
.aviso { background: rgba(13, 18, 28, .95); backdrop-filter: var(--blur); border: 1px solid var(--line2); border-left: 3px solid var(--blue); border-radius: 11px; padding: 11px 13px; font-weight: 700; font-size: 13px; transition: .3s; box-shadow: var(--sombra); animation: entraModal .3s ease-out; }
.aviso.ok { border-left-color: var(--up); } .aviso.mal { border-left-color: var(--dn); }
.aviso.fuera { opacity: 0; transform: translateX(20px); }
.aviso a { color: var(--a1); }

/* panel de compra/venta */
.trade { display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.trade::before { content: ""; position: absolute; inset: -1px; border-radius: var(--r); padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .45; pointer-events: none; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0, 0, 0, .35); border-radius: 11px; padding: 3px; }
.seg2 button { height: 36px; border-radius: 9px; font-weight: 800; color: var(--tx3); transition: .2s; }
.seg2 button.on.b { background: var(--up-bg); color: var(--up); box-shadow: inset 0 0 0 1px rgba(20, 241, 149, .3); }
.seg2 button.on.s { background: var(--dn-bg); color: var(--dn); box-shadow: inset 0 0 0 1px rgba(255, 77, 109, .3); }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button { height: 36px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); font: 700 12px var(--mono); color: var(--tx2); transition: .15s; }
.presets button:hover { color: var(--tx); transform: translateY(-1px); } .presets button.on { border-color: rgba(34, 211, 238, .7); color: var(--tx); box-shadow: 0 0 14px rgba(34, 211, 238, .2); }
.custom input { width: 100%; height: 38px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); outline: none; font-family: var(--mono); }
.custom input:focus { border-color: rgba(34, 211, 238, .6); }
.tr-q, .tr-bal { font-size: 12px; min-height: 16px; }
.tr-pie { display: flex; justify-content: space-between; font-size: 11px; }

/* portafolio */
.pf-top { display: flex; gap: 30px; flex-wrap: wrap; padding: 18px; margin-bottom: 14px; align-items: flex-end; }
.pf-top .mono { word-break: break-all; }
.big { font-size: 22px; font-weight: 800; }
.pf-row { cursor: pointer; }
.pf-tk { display: inline-flex; align-items: center; gap: 8px; font-family: Inter, sans-serif; }
.pf-tk .av, .pf-tk .av .img { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.mini { height: 27px; padding: 0 10px; margin-left: 4px; border-radius: 7px; font: 700 11px var(--mono); }
.mini.s { background: var(--dn-bg); color: var(--dn); } .mini.s:hover { background: var(--dn); color: #fff; }
.fab-trade { display: none; }

/* ---------- responsive ---------- */
@container (max-width: 400px) {
  .card { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; padding: 10px 9px; }
  .card .av, .card .av .img { width: 48px; height: 48px; font-size: 16px; }
  .card .c-l1 .nom { display: none; }
  .card .c-l2 { gap: 7px; }
  .card .comprar { padding: 0 8px; }
}
@container (max-width: 330px) {
  .card .soc { display: none; }
  .card .c-l3 > span:not(.bar):not(.up):not(.pc) { display: none; }
}
@media (max-width: 1100px) {
  .tk-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { margin-left: 0; width: 100%; }
  .fab-trade { display: inline-flex; align-items: center; gap: 6px; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; height: 46px; padding: 0 24px; border-radius: 23px; background: var(--grad-up); color: #06080d; font-weight: 800; box-shadow: 0 10px 30px rgba(20, 241, 149, .35); }
}
@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col { display: none; height: calc(100vh - 230px); }
  .col.on { display: flex; }
  .tabs-cols { display: flex; gap: 4px; margin-bottom: 11px; background: rgba(0, 0, 0, .3); border-radius: 11px; padding: 3px; border: 1px solid var(--line); }
  .tabs-cols button { flex: 1; height: 34px; border-radius: 8px; font-weight: 800; color: var(--tx3); }
  .tabs-cols button.on { background: rgba(255, 255, 255, .08); color: var(--tx); }
}
@media (max-width: 640px) {
  .top { gap: 8px; padding: 0 16px; }
  .nav, .eth, .vivo #vivo-t, .buscar kbd { display: none; }
  .logo { font-size: 14px; } .logo span:not(.logo-mark) { display: none; }
  main { padding: 10px 16px 20px; }
  #chart { height: 340px; }
  .tk-mc { font-size: 24px; }
  .btn-wallet .mono:first-of-type { display: none; }
  .w-aj { grid-template-columns: 1fr; }
  .cinta { top: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* buscador con sugerencias */
.sug { position: absolute; left: 0; right: 0; top: 44px; z-index: 50; background: rgba(13, 18, 28, .98); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--sombra); padding: 5px; max-height: 70vh; overflow: auto; animation: aparece .15s ease-out; }
.sug[hidden] { display: none; }
.sug-f { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 9px; cursor: pointer; }
.sug-f.on, .sug-f:hover { background: rgba(255, 255, 255, .06); }
.sug-f .av, .sug-f .av .img { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }
.sug-t { min-width: 0; display: flex; flex-direction: column; } .sug-t b { font-size: 13px; } .sug-t span { color: var(--tx3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-d { display: flex; flex-direction: column; align-items: flex-end; font: 600 12px var(--mono); } .sug-d .mut { font: 500 10px Inter, sans-serif; }
.sug-vacio { padding: 12px; color: var(--tx3); font-size: 12px; } .sug-vacio:empty { display: none; }
/* depositar */
.dep { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.dep-qr { background: #fff; border-radius: 12px; padding: 6px; } .dep-qr svg { display: block; width: 100%; height: auto; }
.dep-i { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.r-m { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
@media (max-width: 480px) { .dep { grid-template-columns: 1fr; } .dep-qr { max-width: 200px; } }

/* referidos */
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ref-hero { position: relative; padding: 26px; margin-bottom: 14px; overflow: hidden; }
.ref-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 220px at 0% 0%, rgba(139, 92, 246, .22), transparent), radial-gradient(500px 200px at 100% 100%, rgba(34, 211, 238, .16), transparent); pointer-events: none; }
.ref-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; align-items: center; }
.ref-h1 { font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; margin-bottom: 8px; }
.ref-hero p { margin: 0 0 16px; max-width: 620px; }
.ref-link { display: flex; gap: 8px; align-items: center; background: rgba(0, 0, 0, .35); border: 1px solid var(--line2); border-radius: 12px; padding: 6px 6px 6px 14px; max-width: 640px; }
.ref-link .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ref-link .btn-p { width: auto; padding: 0 18px; height: 38px; }
.ref-code { margin-top: 10px; font-size: 12px; }
.ref-qr { background: #fff; border-radius: 14px; padding: 8px; } .ref-qr svg { display: block; width: 100%; height: auto; }
.ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ref-stats .l { color: var(--tx3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.ref-stats .v { font: 800 24px var(--mono); margin: 4px 0 2px; }
.ref-stats .mut { font-size: 11px; }
.ref-por { margin-bottom: 14px; font-size: 13px; }
@media (max-width: 900px) { .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ref-top { grid-template-columns: 1fr; } .ref-qr { max-width: 170px; } .ref-h1 { font-size: 24px; } }

/* señales de riesgo */
.c-r { grid-column: 1 / -1; display: flex; gap: 5px; flex-wrap: wrap; min-height: 0; }
.c-r:empty { display: none; }
.rk { font: 700 10px var(--mono); padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .05); color: var(--tx2); border: 1px solid var(--line); white-space: nowrap; }
.rk.ok { color: #7ee2b8; background: rgba(20, 241, 149, .07); border-color: rgba(20, 241, 149, .18); }
.rk.med { color: #fbbf24; background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .25); }
.rk.mal { color: #ff6b85; background: rgba(255, 77, 109, .1); border-color: rgba(255, 77, 109, .3); }
.ficha-r { margin-top: 10px; }
/* filtros por columna */
.fbtn { margin-left: 6px; position: relative; width: 28px; height: 26px; border-radius: 7px; border: 1px solid var(--line2); color: var(--tx2); font-size: 13px; display: grid; place-items: center; }
.fbtn:hover, .fbtn.on { color: var(--tx); border-color: rgba(34, 211, 238, .5); }
.fbtn .fn { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--a1); color: #06080d; font: 800 9px Inter, sans-serif; display: grid; place-items: center; padding: 0 3px; }
.fbtn .fn:empty { display: none; }
.fpanel { position: absolute; left: 8px; right: 8px; top: 52px; z-index: 20; background: rgba(13, 18, 28, .98); border: 1px solid var(--line2); border-radius: 12px; padding: 12px; box-shadow: var(--sombra); animation: aparece .15s ease-out; }
.fpanel[hidden] { display: none; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; color: var(--tx2); }
.fgrid label { display: flex; flex-direction: column; gap: 3px; } .fgrid .full, .fgrid .chk { grid-column: 1 / -1; }
.fgrid .chk { flex-direction: row; align-items: center; gap: 7px; }
.fgrid input:not([type=checkbox]) { height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); outline: none; font-family: var(--mono); font-size: 12px; }
.fgrid input:focus { border-color: rgba(34, 211, 238, .6); }
.facc { display: flex; gap: 8px; margin-top: 10px; } .facc .btn-s { flex: 1; } .facc .btn-p { flex: 2; height: 38px; }
/* órdenes (Auto) */
.seg2.tres { grid-template-columns: 1fr 1fr 1fr; }
.seg2 button.on.a { background: rgba(96, 165, 250, .14); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .3); }
.blue { color: var(--blue); }
.auto { display: flex; flex-direction: column; gap: 10px; }
.au-now { font-size: 12px; }
.au-b { display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); border-radius: 10px; padding: 9px; }
.au-t { font-weight: 800; font-size: 12px; }
.au-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.au-f input, .au-f select { height: 32px; min-width: 0; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--tx); outline: none; font-family: var(--mono); font-size: 12px; }
.au-f .btn-s { height: 32px; }
.au-list { display: flex; flex-direction: column; gap: 5px; }
.au-o { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.au-o b, .au-o span:first-child { font-weight: 800; }

/* panel de trading estilo Axiom */
.tp-modos { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.tp-modos button { height: 30px; padding: 0 12px; font-weight: 700; color: var(--tx3); border-bottom: 2px solid transparent; }
.tp-modos button.on { color: var(--tx); border-bottom-color: var(--a1); }
.tp-bal { font-size: 12px; color: var(--tx2); }
.tp-in { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); cursor: text; transition: border-color .15s; }
.tp-in:focus-within { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 3px rgba(34, 211, 238, .08); }
.tp-in .l { font-size: 11px; font-weight: 800; color: var(--tx3); letter-spacing: .4px; }
.tp-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 700 15px var(--mono); color: var(--tx); }
.tp-in .u { font-weight: 800; color: var(--tx2); }
.tp-pre { display: grid; grid-template-columns: repeat(4, 1fr) 38px; gap: 0; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.tp-pre button, .tp-pre input { height: 36px; border: 0; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .02); font: 700 12px var(--mono); color: var(--tx2); text-align: center; min-width: 0; }
.tp-pre button:hover { color: var(--tx); background: rgba(255, 255, 255, .05); }
.tp-pre button.on { color: var(--tx); background: rgba(34, 211, 238, .12); }
.tp-pre input { color: var(--tx); outline: none; background: rgba(34, 211, 238, .06); }
.tp-pre .tp-ico { border-right: 0; font-size: 14px; }
.tp-ico.ok { color: var(--up); font-weight: 800; }
.tp-cfg { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tp-cfg button[data-slip] { color: var(--tx2); font: 700 12px var(--mono); padding: 2px 8px; border-radius: 6px; border: 1px dashed var(--line2); }
.tp-cfg button[data-slip]:hover { color: var(--tx); border-color: var(--a1); }
.tp-cfg input { width: 64px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); outline: none; font: 700 12px var(--mono); }
.tp-slider { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; align-items: center; }
.tp-slider input[type=range] { width: 100%; accent-color: var(--a2); }
.tp-slider .ticks { grid-column: 1; display: flex; justify-content: space-between; font: 600 10px var(--mono); color: var(--tx3); margin-top: -6px; }
.tp-reln { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); }
.tp-reln input { width: 100%; border: 0; background: none; outline: none; font: 700 13px var(--mono); color: var(--tx); text-align: right; }
.tp-pos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.tp-pos div { display: flex; flex-direction: column; gap: 2px; }
.tp-pos span { font-size: 10px; color: var(--tx3); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.tp-pos b { font: 700 12px var(--mono); }
.tp-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(0, 0, 0, .3); border-radius: 9px; padding: 3px; }
.tp-presets button { height: 28px; border-radius: 7px; font: 800 10px Inter, sans-serif; letter-spacing: .5px; color: var(--tx3); }
.tp-presets button.on { color: var(--a1); background: rgba(34, 211, 238, .1); }
.tr-barra { display: flex; justify-content: flex-end; padding: 6px 12px 0; }

/* barra: Deposit · saldo · perfil */
.btn-dep { height: 38px; padding: 0 16px; border-radius: 11px; background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 6px 20px rgba(99, 102, 241, .35); transition: .18s; }
.btn-dep:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-wallet .car { color: var(--tx3); font-size: 10px; }
.btn-perfil { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 12px Inter, sans-serif; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(139, 92, 246, .3); }
.hdr-w { position: relative; }
.drop { position: absolute; right: 0; top: 46px; z-index: 60; min-width: 280px; background: rgba(13, 18, 28, .98); border: 1px solid var(--line2); border-radius: 14px; padding: 14px; box-shadow: var(--sombra); animation: aparece .15s ease-out; display: flex; flex-direction: column; gap: 8px; }
.drop[hidden] { display: none; }
.dd-l { font-size: 11px; color: var(--tx3); font-weight: 700; } .dd-v { font-size: 26px; font-weight: 800; }
.dd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dd-row div { display: flex; flex-direction: column; gap: 2px; } .dd-row span { font-size: 11px; color: var(--tx3); }
.dd-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-p.azul { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; box-shadow: 0 6px 20px rgba(99, 102, 241, .3); }
.dd-link { font-size: 12px; font-weight: 700; color: var(--a1); text-align: center; }
.drop-p { min-width: 220px; padding: 8px; gap: 2px; }
.drop-p a, .drop-p button { text-align: left; padding: 9px 10px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--tx); }
.drop-p a:hover, .drop-p button:hover { background: rgba(255, 255, 255, .06); }
.pd-h { display: flex; flex-direction: column; padding: 6px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .pd-h span { font-size: 11px; color: var(--tx3); }
/* portafolio */
.pf-tabs { display: flex; align-items: center; gap: 18px; margin: 2px 0 14px; flex-wrap: wrap; }
.pf-t { font-size: 22px; font-weight: 800; color: var(--tx3); letter-spacing: -.4px; } .pf-t.on, .pf-t:hover { color: var(--tx); }
.pf-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; flex-wrap: wrap; }
.pf-bar select, .wl-f select { height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--tx); font-weight: 700; outline: none; }
.pf-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 14px; margin-bottom: 14px; }
.pf-bal .l { font-size: 11px; color: var(--tx3); font-weight: 600; margin-top: 8px; } .pf-bal .v { font: 800 24px var(--mono); } .pf-bal .v2 { font: 700 14px var(--mono); }
.pf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
#pf-graf { height: 230px; position: relative; }
.pf-perf .kv .v { font-family: var(--mono); font-weight: 700; }
.pto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.pf-dist { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 10px; background: rgba(255, 255, 255, .06); } .pf-dist i { display: block; height: 100%; }
.pf-low { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 14px; }
.pf-act .tabla-w { max-height: 520px; }
.wl-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wl-bar .btn-p { width: auto; height: 36px; padding: 0 16px; }
.wl-act { color: var(--up); text-shadow: 0 0 8px var(--up); }
.wl-n { cursor: pointer; } .wl-n:hover { color: var(--a1); }
.wl-acc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mini2 { height: 28px; padding: 0 10px; font-size: 11px; }
.wl-tr { margin-top: 14px; }
.wl-f { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; padding: 14px; align-items: end; }
.wl-f label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--tx3); font-weight: 700; }
.wl-f input { height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--tx); outline: none; font-family: var(--mono); }
.wl-f .btn-p { width: auto; padding: 0 22px; height: 38px; }
@media (max-width: 1200px) { .pf-grid { grid-template-columns: 1fr 1fr; } .pf-chart { grid-column: 1 / -1; order: 3; } .pf-low { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pf-grid { grid-template-columns: 1fr; } .wl-f { grid-template-columns: 1fr; } .btn-dep { display: none; } }
/* stats + holders + riesgo en una sola tarjeta */
.st-hold { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12px; }
.st-hold > span:first-child { margin-right: 4px; }

/* cuenta */
.ct-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); margin-bottom: 4px; }
.ct-tabs button { height: 36px; border-radius: 9px; font-weight: 800; color: var(--tx3); }
.ct-tabs button.on { background: rgba(255, 255, 255, .08); color: var(--tx); }
.ct-rec { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx2); cursor: pointer; }
.ct-rec input { width: 16px; height: 16px; accent-color: var(--a1); }
.ct-v1 { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; border: 1px dashed var(--line2); font-size: 12px; }
.ct-or { display: flex; align-items: center; gap: 10px; color: var(--tx3); font-size: 11px; } .ct-or::before, .ct-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ct-code { padding: 14px; border-radius: 12px; background: rgba(20, 241, 149, .07); border: 1px solid rgba(20, 241, 149, .35); font-size: 15px; font-weight: 800; text-align: center; letter-spacing: .5px; word-break: break-all; user-select: all; }
.sg-h { font-size: 12px; color: var(--tx3); margin: 8px 0 0; }
.sg-l { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.sg-s { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.sg-s > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .sg-s .mut2 { font-size: 11px; }
.chip-ok { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; color: var(--up); background: rgba(20, 241, 149, .12); }
#modal[data-fijo] .x { display: none; }

/* barra sin sesión */
.btn-reg { height: 38px; padding: 0 16px; border-radius: 11px; background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; font-weight: 800; font-size: 13px; }
.btn-reg[hidden], .btn-dep[hidden], .hdr-w[hidden] { display: none !important; }
.btn-wallet.btn-login { background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); color: var(--tx); font-weight: 800; }
.drop-p button, .drop-p a { display: flex; align-items: center; gap: 9px; } .drop-p svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pd-sep { height: 1px; background: var(--line); margin: 4px 0; }
/* Account and Security */
.as-card { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.as-av { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font: 800 18px Inter, sans-serif; color: #0b0f17; }
.as-id { display: flex; flex-direction: column; gap: 3px; } .as-id b { font-size: 16px; } .as-id span { font-size: 11px; }
.as-kv { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--tx3); padding-left: 14px; border-left: 1px solid var(--line); } .as-kv b { color: var(--tx); font-size: 13px; }
.as-cp { cursor: pointer; color: var(--a1) !important; }
.as-f { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.as-f > div { display: flex; flex-direction: column; gap: 3px; } .as-f b { font-size: 14px; } .as-f span { font-size: 12px; color: var(--tx3); }
.as-f .btn-s { width: auto; white-space: nowrap; padding: 0 14px; height: 34px; }
.as-dn b { color: var(--dn); } .dn-b { color: var(--dn) !important; border-color: rgba(255, 77, 109, .35) !important; background: rgba(255, 77, 109, .08) !important; }
.as-ses { background: none; border: 0; padding: 6px 2px 0; }
.modal-c:has(.as-card) { max-width: 640px; max-height: 88vh; overflow: auto; }
#bg-t { width: 100%; resize: vertical; min-height: 140px; padding: 12px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--tx); font: 14px Inter, sans-serif; outline: none; }
.bg-n { text-align: right; font-size: 11px; margin-top: -4px; }
@media (max-width: 600px) { .as-card { grid-template-columns: 48px 1fr; } .as-kv { border: 0; padding: 0; } .as-f { flex-direction: column; align-items: stretch; } }

/* ficha estilo Axiom */
.ico-b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--tx3); vertical-align: middle; }
.ico-b:hover { color: var(--tx); background: rgba(255, 255, 255, .07); }
.ico-b svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.tk-id .t2 a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -2px; }
.stats.ax { gap: 0; }
.stats.ax .st { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 2px 14px; min-width: 0; }
.stats.ax .st:first-child { border-left: 0; }
.stats.ax .st .l { text-transform: none; letter-spacing: 0; font-size: 11px; }
.am { color: #fbbf24; }
.chart-tools { display: flex; gap: 4px; margin-left: auto; }
.chart-tools button { height: 28px; padding: 0 9px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--tx3); border: 1px solid transparent; }
.chart-tools button:hover { color: var(--tx); background: rgba(255, 255, 255, .05); }
.chart-tools button.on { color: var(--a1); border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .08); }
.chart-panel:fullscreen { background: #07090d; display: flex; flex-direction: column; }
.chart-panel:fullscreen #chart { flex: 1; height: auto; }
.tabs-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-right: 10px; }
.tabs-row .tabs { border-bottom: 0; flex: 1; }
#tk-tabs button[data-n]::after { content: attr(data-n); color: var(--tx3); font-weight: 600; }
.seg-f button { height: 26px; font-size: 11px; }
.tg-dev, .tg-you, .tg-lp { display: inline-block; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 5px; margin-left: 4px; vertical-align: 1px; }
.tg-dev { color: #fbbf24; background: rgba(251, 191, 36, .14); } .tg-you { color: #60a5fa; background: rgba(96, 165, 250, .14); } .tg-lp { color: var(--tx2); background: rgba(255, 255, 255, .08); }
table.tw td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }
table.tw .sub { font-size: 10px; margin-top: 1px; }
table.tw .w-cell { white-space: nowrap; }
table.tw .rem { min-width: 150px; } table.tw .rem > div { display: flex; align-items: center; gap: 6px; font-size: 12px; }
table.tw .rem i { display: block; height: 3px; border-radius: 2px; margin-top: 5px; background: linear-gradient(90deg, #3b82f6, #22d3ee); }
.chip-p { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); color: var(--tx2); }
@media (max-width: 900px) { .stats.ax .st { padding: 2px 10px; } .chart-tools { margin-left: 0; } }

/* burbujas del gráfico (como Axiom) */
#chart-bub { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.bb { position: absolute; transform: translate(-50%, -50%); min-width: 28px; height: 28px; padding: 0 5px; border-radius: 14px; display: grid; place-items: center;
  font: 800 11px Inter, sans-serif; color: #fff; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); pointer-events: auto; cursor: default; }
.bb-b { background: #0f9f6e; } .bb-s { background: #e5334f; }
.bb-dev { border-color: #fbbf24; }
.bb-yo { min-width: 30px; height: 30px; border-radius: 15px; border-color: #fff; }

/* cabecera del token: todo junto a la izquierda, como Axiom */
.tk-top { justify-content: flex-start; gap: 22px; padding: 10px 16px; }
.tk-id .av, .tk-id .av .img { width: 44px; height: 44px; }
.tk-id .t1 .sym { font-size: 17px; }
.tk-mc { font-size: 24px; }
.stats.ax { margin-left: 4px; }
/* barra del gráfico */
.chart-bar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 6px 10px; scrollbar-width: none; }
.chart-bar::-webkit-scrollbar { display: none; }
.cb-mid { display: flex; align-items: center; gap: 2px; }
.cb { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; color: var(--tx2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cb:hover { background: rgba(255, 255, 255, .06); color: var(--tx); }
.cb svg, .draw-bar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cb.ic { padding: 0 7px; }
.cb.dual { color: var(--tx3); } .cb.dual b { color: #60a5fa; font-weight: 700; }
.cb-sep { width: 1px; height: 20px; background: var(--line2); margin: 0 4px; flex: none; }
.chart-tools { display: flex; gap: 2px; margin-left: auto; }
.chart-body { display: flex; }
.draw-bar { width: 42px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-right: 1px solid var(--line); }
.draw-bar button { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--tx3); }
.draw-bar button:hover { color: var(--tx); background: rgba(255, 255, 255, .06); }
.draw-bar button.on { color: #60a5fa; background: rgba(96, 165, 250, .12); }
.db-sep { width: 22px; height: 1px; background: var(--line2); margin: 4px 0; }
.chart-wrap { position: relative; flex: 1; min-width: 0; }
.leyenda { position: absolute; left: 10px; top: 8px; z-index: 4; pointer-events: none; font-size: 12px; color: var(--tx2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 90px); }
.leyenda > b { color: var(--tx); font-weight: 700; }
.leyenda span { font: 11.5px var(--mono); } .leyenda span b { font-weight: 600; margin: 0 6px 0 2px; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.chart-foot { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-top: 1px solid var(--line); font-size: 12px; }
.rangos, .esc { display: flex; gap: 2px; }
.rangos button, .esc button { height: 26px; padding: 0 8px; border-radius: 6px; color: var(--tx2); font-weight: 600; font-size: 12px; }
.rangos button:hover, .esc button:hover { color: var(--tx); background: rgba(255, 255, 255, .06); }
.esc button.on { color: #fff; background: #3b5bdb; }
.chart-foot .sep { flex: 1; }
.reloj { color: var(--tx2); font-size: 12px; margin-right: 6px; }
/* dibujos */
#chart-draw { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
#chart-draw.activo { pointer-events: all; cursor: crosshair; }
.dr-l { stroke: #60a5fa; stroke-width: 1.6; } .dr-h { stroke-dasharray: 6 4; }
.dr-p { fill: #0b0f17; stroke: #60a5fa; stroke-width: 1.6; }
.dr-t { fill: #60a5fa; font: 700 11px var(--mono); }
.dr-box.dr-up { fill: rgba(59, 130, 246, .16); } .dr-box.dr-dn { fill: rgba(255, 77, 109, .14); }
.dr-l.dr-up { stroke: #3b82f6; } .dr-l.dr-dn { stroke: #ff4d6d; }
.dr-lbl rect { fill: #3b82f6; } .dr-lbl.dr-dn rect { fill: #e5334f; } .dr-lbl text { fill: #fff; font: 700 11px Inter, sans-serif; }
.chart-panel:fullscreen .chart-body { flex: 1; } .chart-panel:fullscreen .chart-wrap { display: flex; } .chart-panel:fullscreen #chart { flex: 1; height: auto; }
@media (max-width: 760px) { .draw-bar { display: none; } .cb span { display: none; } .reloj { display: none; } }
@media (max-width: 1350px) { .cb span { display: none; } .cb { padding: 0 7px; } }

/* filtro por wallet */
.fw-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 6px 3px 10px; border-radius: 8px; background: rgba(96, 165, 250, .12); color: #93c5fd; max-width: 100%; }
.fw-chip a { font-family: var(--mono); color: #bfdbfe; overflow: hidden; text-overflow: ellipsis; }
.fw-chip svg, .ico-b[data-fw] svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.fw-chip button { width: 20px; height: 20px; border-radius: 5px; color: #93c5fd; } .fw-chip button:hover { background: rgba(255, 255, 255, .1); }
.bb-fw { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96, 165, 250, .35), 0 2px 8px rgba(0, 0, 0, .5); }

/* ===== tarjetas estilo Axiom Pulse: más grandes, más contraste, CA debajo de la foto ===== */
.card { grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; padding: 12px; align-items: start; }
.c-izq { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.av-ring { --p: 0; position: relative; padding: 3px; border-radius: 12px; background: conic-gradient(#22d3ee calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.av-ring.done { background: conic-gradient(#fbbf24 100%, #fbbf24 0); }
.av-ring .av, .av-ring .av .img { width: 64px; height: 64px; border-radius: 10px; }
.card .av .pad { font-size: 8.5px; }
.c-ca { font: 600 10.5px var(--mono); color: var(--tx3); padding: 1px 4px; border-radius: 5px; white-space: nowrap; }
.c-ca:hover { color: var(--tx); background: rgba(255, 255, 255, .07); }
.c-mid { gap: 7px; justify-content: flex-start; padding-top: 2px; }
.c-l1 .sym { font-size: 15.5px; color: #f3f6fb; max-width: 12ch; }
.c-l1 .nom { color: #8d99ad; font-size: 13px; }
.c-l2 { gap: 9px; color: #9aa6b8; font-size: 12.5px; flex-wrap: wrap; row-gap: 4px; }
.c-l2 .age { color: #2ee6a6; font-weight: 700; }
.c-l2 .ic svg, .lnk-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.lnk-x { color: #9aa6b8; display: inline-flex; } .lnk-x:hover { color: #fff; }
.c-pc { font: 700 11px var(--mono); color: #22d3ee; background: rgba(34, 211, 238, .1); padding: 1px 6px; border-radius: 6px; }
.c-pc.ok { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.card .c-r { grid-column: auto; margin-top: 1px; }
.c-der { align-items: flex-end; gap: 6px; }
.c-der .mv { display: flex; align-items: baseline; gap: 5px; }
.c-der .mv .l, .c-der .mv2 .l { color: #7c889b; font-size: 11px; font-weight: 600; }
.c-der .mv b { font: 700 13px var(--mono); color: #e8edf5; } .c-der .mv b.mc { font-size: 15px; color: #7dd3fc; }
.c-der .mv2 { display: flex; align-items: baseline; gap: 5px; } .c-der .mv2 b { font: 600 12px var(--mono); color: #c7d0dd; }
.card .comprar { height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; font-weight: 800; font-size: 12.5px; border: 0; margin-top: auto; }
.card .comprar svg { width: 12px; height: 12px; }
.rk { font-size: 11px; padding: 2px 7px; }
/* cabecera de columna: buscar + monto rápido */
.col-h { flex-wrap: wrap; row-gap: 6px; }
.col-q { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); flex: 1 1 140px; min-width: 0; margin-left: auto; }
.col-q svg { width: 13px; height: 13px; fill: none; stroke: var(--tx3); stroke-width: 2; flex: none; }
.col-q input { background: none; border: 0; outline: none; color: var(--tx); font-size: 12px; width: 100%; min-width: 0; }
.qb { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 8px; background: rgba(59, 130, 246, .1); border: 1px solid rgba(96, 165, 250, .3); color: #93c5fd; }
.qb svg { width: 12px; height: 12px; } .qb input { width: 52px; background: none; border: 0; outline: none; color: #e8edf5; font: 700 12px var(--mono); }
@media (max-width: 760px) { .card { grid-template-columns: 58px minmax(0, 1fr) auto; } .av-ring .av, .av-ring .av .img { width: 50px; height: 50px; } }
/* ===== Trending ===== */
.td-bar { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; flex-wrap: wrap; }
.td-h { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.td-bar .sep { flex: 1; }
.td-panel { padding: 0; }
.td-t { width: 100%; }
.td-t th { font-size: 11px; color: #7c889b; font-weight: 600; white-space: nowrap; }
.td-t th.ord { cursor: pointer; } .td-t th.ord:hover, .td-t th.on { color: #e8edf5; }
.td-t td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; font-size: 13px; }
.td-f { cursor: pointer; } .td-f:hover td { background: rgba(255, 255, 255, .03); }
.td-id { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.td-id .av, .td-id .av .img { width: 44px; height: 44px; }
.td-l1 { display: flex; align-items: baseline; gap: 6px; } .td-l1 b { font-size: 14px; color: #f3f6fb; } .td-l1 .nom { color: #8d99ad; font-size: 12px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-l2 { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-top: 3px; } .td-l2 .age { color: #2ee6a6; font-weight: 700; } .td-l2 .padn { font-weight: 700; font-size: 10.5px; }
.td-t .sub { font-size: 11px; margin-top: 2px; }
.am2 { color: #fbbf24; } .blue { color: #60a5fa; }
.td-r { max-width: 260px; } .td-r .rk { margin: 1px; }
.td-buy { height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; font-weight: 800; font-size: 12.5px; border: 0; white-space: nowrap; }
.td-buy svg { width: 12px; height: 12px; }

/* ===== legibilidad: menos brillo, sin resplandores, números en Inter tabular (como Axiom) ===== */
:root { --tx: #e4e9f0; --tx2: #a3adbd; --tx3: #7a869a; --mono: "Inter", system-ui, sans-serif; }
html, body { font-variant-numeric: tabular-nums; }
.up { color: #3ddc97; } .dn { color: #f47483; }
.mv b.sube, .mv b.baja { text-shadow: none; } .mv b.sube { color: #3ddc97; } .mv b.baja { color: #f47483; }
.tk-mc { background: none; -webkit-background-clip: initial; background-clip: initial; color: #e4e9f0; letter-spacing: -.5px; }
.tk-mc.sube { filter: none; color: #3ddc97; } .tk-mc.baja { filter: none; color: #f47483; }
.wl-act { text-shadow: none; }
.col-h .ico { filter: none; }
.c-l1 .sym { color: #eef2f7; } .c-l1 .nom { color: #93a0b3; }
.c-l2 { color: #a3adbd; } .c-l2 .age { color: #3ddc97; }
.c-der .mv b { color: #dfe5ee; } .c-der .mv b.mc { color: #8fd3f0; }
.rk { font-weight: 600; }
.rk.ok { color: #6fd6ab; background: rgba(61, 220, 151, .06); border-color: rgba(61, 220, 151, .16); }
.rk.med { color: #e8b74a; background: rgba(232, 183, 74, .07); border-color: rgba(232, 183, 74, .2); }
.rk.mal { color: #f47483; background: rgba(244, 116, 131, .08); border-color: rgba(244, 116, 131, .24); }
/* compra rápida en verde (como el botón de compra) */
.card .comprar, .td-buy { background: #0f9f6e; color: #fff; box-shadow: none; }
.card .comprar:hover, .td-buy:hover { background: #12b87f; }
/* monto rápido: más ancho para 0.001, 0.0005… */
.qb input { width: 74px; font-family: Inter, sans-serif; font-weight: 700; }

/* cabecera de columna FIJA: una sola línea, el "Paused" flota sin empujar nada */
.col-h { position: relative; flex-wrap: nowrap; gap: 8px; padding: 11px 12px; min-height: 52px; }
.col-h .sub { display: none; }
.col-h .n { margin-left: 0; }
.col-h .pausa { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 5; pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); background: #2a2210; }
.col-h .pausa[hidden] { display: none; }
.col-q { flex: 1 1 auto; min-width: 70px; margin-left: 4px; }
.col-h .qb { flex: none; }
.col-h .qb input { width: 62px; }
/* resultados de búsqueda que están en otra columna */
.col-otras { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.co-f { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--tx); }
.co-f:hover { background: rgba(255, 255, 255, .06); }
.co-f .av, .co-f .av .img { width: 36px; height: 36px; }
.co-f small { display: block; color: var(--tx3); font-size: 11px; margin-top: 1px; }

.td-panel { transition: opacity .15s; } .td-panel.td-cargando { opacity: .55; }
.td-t th[data-s] { user-select: none; }
/* Trending como GMGN: la tabla usa TODA la página y el scroll normal (sin caja con scroll propio);
   la fila de títulos queda fija debajo de la barra de arriba y la cinta */
.td-panel { overflow: visible; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
.td-panel .tabla-w { max-height: none; overflow: visible; }
.td-t th { top: 94px; z-index: 6; background: #0a0e15; }
.td-t tr td { border-bottom: 1px solid rgba(120, 140, 170, .08); }
@media (max-width: 1200px) { .td-panel .tabla-w { overflow-x: auto; } .td-t th { top: 0; } }

/* barra ★ / 📈 / ⚡ */
.cinta { display: flex; align-items: center; }
.wlb { display: flex; align-items: center; gap: 2px; padding: 0 8px 0 12px; height: 100%; border-right: 1px solid var(--line); flex: none; }
.wlb button { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--tx3); }
.wlb button:hover { color: var(--tx); background: rgba(255, 255, 255, .06); }
.wlb button.on { color: #fbbf24; background: rgba(251, 191, 36, .1); }
.wlb button[data-wlb="pos"].on { color: #60a5fa; background: rgba(96, 165, 250, .1); } .wlb button[data-wlb="live"].on { color: #3ddc97; background: rgba(61, 220, 151, .1); }
.wlb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.cinta-in, .wl-in { flex: 1; min-width: 0; overflow: hidden; }
.cinta-in[hidden], .wl-in[hidden] { display: none; }
.wl-in { display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 14px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.wl-in::-webkit-scrollbar { display: none; }
.wl-c { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx); flex: none; }
.wl-c:hover b { color: #fff; text-decoration: underline; }
.wl-c img, .wl-c i { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: block; }
.wl-c .mono { color: var(--tx2); }
.wl-v { color: var(--tx3); font-size: 12px; }
/* estrella de la ficha */
.tk-fav { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--tx3); flex: none; }
.tk-fav:hover { color: #fbbf24; background: rgba(251, 191, 36, .08); }
.tk-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tk-fav.on { color: #fbbf24; } .tk-fav.on svg { fill: #fbbf24; }

/* launchpads dentro del filtro de cada columna */
.fpads { padding: 12px 12px 4px; border-bottom: 1px solid var(--line); }
.fpads-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .fpads-h b { font-size: 12px; }
.fpads-l { display: flex; flex-wrap: wrap; gap: 6px; }
.fpad { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--tx3); border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); }
.fpad i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); opacity: .4; }
.fpad.on { color: var(--tx); border-color: color-mix(in srgb, var(--pc) 60%, transparent); background: color-mix(in srgb, var(--pc) 12%, transparent); } .fpad.on i { opacity: 1; }
.td-age { color: #3ddc97; font-weight: 700; }

/* tarjeta de PnL */
.share-pnl { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--tx2); vertical-align: middle; }
.share-pnl:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.share-pnl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-share { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; justify-content: center; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; font-size: 12px; color: var(--tx2); cursor: pointer; }
.modal-c:has(.pnl-prev) { max-width: 760px; }
.pnl-prev img { width: 100%; border-radius: 14px; display: block; border: 1px solid var(--line); }
.pnl-prev .cargando { aspect-ratio: 1200 / 630; display: grid; place-items: center; }
.pnl-acc { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; margin-top: 4px; }
.pnl-acc .btn-p, .pnl-acc .btn-s { width: auto; }

/* ===================== CELULAR ===================== */
html { overflow-x: hidden; }
.btn-menu { display: none; }
.fab-trade.oculto { opacity: 0; pointer-events: none; transform: translateY(20px); }
@media (max-width: 760px) {
  body { overflow-x: hidden; width: 100%; }
  .top { gap: 8px; padding: 0 12px; }
  .btn-menu { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--tx); flex: none; }
  .btn-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .logo span:not(.logo-mark), .red { display: none; }
  /* la navegación: panel que baja desde arriba */
  .nav { display: none; }
  .nav.abierta { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 58px; left: 0; right: 0; z-index: 70; padding: 10px 12px 14px; background: rgba(8, 11, 18, .98); border-bottom: 1px solid var(--line2); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
  .nav.abierta a { padding: 13px 14px; font-size: 16px; border-radius: 10px; }
  .buscar { flex: 1 1 auto; min-width: 0; max-width: none; margin-left: 0; }
  .buscar input { font-size: 16px; height: 36px; }
  .eth, .vivo #vivo-t, .buscar kbd { display: none; }
  .btn-reg, .btn-wallet { height: 34px; padding: 0 10px; font-size: 13px; }
  .btn-perfil { width: 34px; height: 34px; }
  .top-der { gap: 6px; }
  main { padding: 10px 12px 90px; }
  /* ventanas: centradas y del ancho de la pantalla */
  .modal { padding: 12px; place-items: center; }
  .modal-c { max-width: 100%; width: 100%; padding: 18px 16px; max-height: calc(100dvh - 24px); }
  .drop { position: fixed; top: 58px; right: 8px; left: auto; max-width: calc(100vw - 16px); }
  /* tarjetas: más aire para el nombre y los chips en fila */
  .card { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 11px 10px; }
  .av-ring .av, .av-ring .av .img { width: 50px; height: 50px; }
  .c-der .mv { flex-direction: column; align-items: flex-end; gap: 0; }
  .c-der .mv b.mc { font-size: 14px; }
  .card .comprar { height: 30px; padding: 0 10px; }
  .card .rk { font-size: 10px; padding: 1px 5px; }
  .col-h { flex-wrap: wrap; row-gap: 8px; }
  .col-q { order: 5; flex: 1 1 100%; margin-left: 0; }
  /* ficha del token: métricas en cuadrícula y botón Buy/Sell como barra abajo */
  .tk-top { gap: 12px; padding: 12px; }
  .stats.ax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; row-gap: 8px; }
  .stats.ax .st { padding: 2px 8px; border-left: 0; }
  .fab-trade { left: 12px !important; right: 12px; transform: none !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; justify-content: center; width: auto; transition: opacity .2s, transform .2s; }
  .fab-trade.oculto { transform: translateY(20px) !important; }
  #chart { height: 300px; }
  .chart-foot .rangos button { padding: 0 6px; }
  /* tablas anchas: se deslizan de lado dentro de su caja */
  .tabla-w { overflow-x: auto; }
  .td-id { min-width: 190px; }
}
@media (max-width: 760px) { .btn-reg, .btn-wallet { white-space: nowrap; } .buscar input { padding-left: 32px; } }
@media (max-width: 760px) { .tabs-row { overflow-x: auto; scrollbar-width: none; } .tabs-row::-webkit-scrollbar { display: none; } #tk-tabs { flex-wrap: nowrap; } #tk-tabs button { white-space: nowrap; flex: none; } .tk-der { flex: none; } }

.ref-sel { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ref-sel select { height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--tx); font-weight: 600; max-width: 100%; }

.ref-alias-box { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px dashed rgba(96, 165, 250, .4); background: rgba(96, 165, 250, .06); margin-top: 10px; }
.ref-alias-box .btn-p { width: auto; align-self: flex-start; padding: 0 16px; height: 36px; }
.al-w { height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--tx); font-size: 12px; }

.wl-marcas { white-space: nowrap; }
.wl-star { width: 26px; height: 26px; border-radius: 7px; color: var(--tx3); font-size: 15px; line-height: 1; }
.wl-star:hover { color: #fbbf24; background: rgba(251, 191, 36, .08); }
.wl-star.on { color: #fbbf24; text-shadow: none; }
.wl-n.wl-prim { color: #f59e0b; }

/* referidos: lo acumulado en la bóveda */
.ref-claim { padding: 16px; margin-bottom: 14px; }
.rc-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rc-top .l { font-size: 11px; color: var(--tx3); font-weight: 600; } .rc-top .v { font-size: 26px; font-weight: 800; }
.rc-bar { flex: 1; min-width: 160px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.rc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3ddc97, #22d3ee); }
.rc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.rc-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.rc-f span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-f .btn-p { width: auto; height: 32px; padding: 0 14px; } .rc-f .btn-p.off { opacity: .45; cursor: not-allowed; }
.rc-vacio { margin-top: 10px; font-size: 12px; }
@media (max-width: 760px) { .rc-f { grid-template-columns: 1fr auto; } .rc-f span { grid-column: 1 / -1; } }