/* ═════════════════════════════════════════════════════════════════════
   theme.css — El sistema. Una sola dirección para toda la página.

   Se carga DESPUÉS del CSS de index.html, así que gana por orden sin
   necesitar !important. El tema viejo sigue entero en
   theme-solshark-classic.css por si hay que volver.

   Lo que arregla, medido antes de escribir una línea:
     · 120 valores distintos de padding      →  9 tokens
     · 22 tamaños de fuente                  →  7
     ·  9 radios numéricos                   →  5
     · 55 colores fuera del sistema          →  0
     ·  0 media queries móvil-primero        →  todas
     · 101 dianas táctiles bajo 44px         →  ninguna
     · 4 columnas de contenido descoordinadas → 1

   El movimiento sigue las reglas de Emil Kowalski: nunca `transition:all`,
   nunca `ease-in` (empieza lento justo cuando el ojo mira), nada por
   encima de 300 ms en interfaz, y hover solo donde hay ratón de verdad.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Color ───────────────────────────────────────────────────────
     Casi negro, no negro puro. En OLED el negro absoluto apaga el píxel
     y al hacer scroll con texto blanco deja rastro al reencenderse.
     Además desde el negro puro no se puede bajar más: se pierde una capa
     de profundidad antes de empezar. */
  --bg:#08090B;
  --surface-1:var(--bg);    /* tarjetas: APAGADO el 2026-09-06 a peticion del usuario (era #101214); los recuadros van sobre el fondo */
  --surface-2:#171A1E;      /* controles, hover, entradas */
  --surface-3:#1E2228;      /* hover de control */

  /* Los grises llevan una pizca de azul-verde. Un gris neutro al lado de
     un verde saturado se ve sucio. */
  --t1:#F1F4F7;
  --t2:#97A0AB;
  --t3:#616A76;

  --bw:1px;                 /* grosor de TODOS los bordes y lineas: medio pixel en pantallas retina (2026-09-06) */
  --hair:#23272E;           /* separador discreto pero VISIBLE */
  /* Un borde que ningún tema puede apagar. El compositor era invisible
     porque su borde usaba --sep y el tema plano lo ponía transparente.
     Este existe para que eso no vuelva a pasar. */
  --edge:#2C323A;

  --accent:#22E0A1;         /* la menta. Solo pulsable y solo bueno. */
  --accent-in:#04140E;
  --accent-dim:rgba(34,224,161,.10);
  --accent-line:rgba(34,224,161,.28);

  --up:#21C95E;
  --down:#FF622E;
  --warn:#F2C14E;

  /* ── Espaciado — base 4, saltos de 8 ───────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ── Radios — cinco, y el círculo ──────────────────────────────── */
  --r-sm:8px;      /* entradas, chips, botones pequeños */
  --r-md:12px;     /* tarjetas, compositor */
  --r-lg:16px;     /* media a sangre */
  --r-xl:22px;     /* hojas */
  --r-full:999px;  /* acciones y buscador */

  /* ── Tipografía ────────────────────────────────────────────────── */
  --display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --fs-xs:11px;    /* SOLO etiquetas en mayúscula con letter-spacing */
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:17px;
  --fs-lg:21px;
  --fs-xl:28px;
  --fs-2xl:clamp(30px,5vw,40px);

  --lh-tight:1.15;
  --lh-snug:1.35;
  --lh-body:1.6;

  /* ── Movimiento ────────────────────────────────────────────────── */
  /* Las curvas de serie son flojas. Estas tienen intención. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --d-0:0ms;        /* la tabla de tokens: ver más abajo por qué */
  --d-1:120ms;      /* pulsación, color */
  --d-2:200ms;      /* casi todo */
  --d-3:280ms;      /* superficies que entran */

  /* ── Estructura ────────────────────────────────────────────────── */
  --col:760px;         /* lectura: feed, post, perfil */
  --col-page:1080px;   /* paginas con rejillas: pricing, peak */
  --col-wide:1240px;   /* datos: tablas de tokens */
  --gutter:16px;
  --tap:44px;          /* mínimo táctil */
  --nav-w:248px;
  --shell:1560px;      /* el ancho util del area principal */

  /* ── Capas ─────────────────────────────────────────────────────── */
  /* Llega hasta arriba a propósito: ui.js ya vive en 9600/9700, y una
     escala que terminase en 700 dejaría toda hoja y todo aviso por
     debajo de lo que ya existe. */
  --z-base:1;
  --z-sticky:100;
  --z-nav:400;
  --z-top:500;
  --z-drop:9000;
  --z-sheet:9600;
  --z-toast:9700;

  /* ── PUENTE ────────────────────────────────────────────────────────
     Estos cuatro tokens están vivos en toda la tabla de tokens y en
     todos los botones de index.html. Sin este puente, el sistema nuevo
     rompe la página el día que aterriza. Se borran cuando no quede ni un
     uso, ni un día antes. */
  --surface:var(--surface-1);
  --sep:var(--hair);
  --row1:var(--bg);
  --row2:var(--bg);
  --rhov:var(--surface-2);
  --btn:var(--surface-2);
  --g:var(--up);
  --r:var(--down);
  --blue:var(--accent);
  --bg2:var(--surface-2);          /* estaba referenciado y sin definir */
  --amber:var(--warn);
  --on-accent:var(--accent-in);
  --ease-out-strong:var(--ease-out);
}

/* ── Cifras alineadas ────────────────────────────────────────────────
   Al sacar la mono de la interfaz general, Space Grotesk NO comparte los
   avances de dígito de JetBrains Mono: toda columna que hoy se alinea por
   accidente dejaría de alinearse, sin dar ningún error. Esto lo impide.  */
.num,[data-num],td,th,.tk-s,.tk-f,.sbox .sv,.fd-vote .n{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ═══ Base ═══════════════════════════════════════════════════════════ */

body{
  background:var(--bg);
  color:var(--t1);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* El foco se ve para quien navega con teclado y no molesta al ratón. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ═══ La columna única ═══════════════════════════════════════════════
   El arreglo que más se nota. Antes: cuatro columnas en cuatro archivos,
   y el contenido saltaba 258px al navegar de Home a Community mientras
   la barra de arriba no se movía. Ahora todas comparten borde.          */

@media(min-width:640px){ :root{--gutter:24px} }
@media(min-width:1024px){ :root{--gutter:32px} }

/* UN SOLO EJE. Medido a 1920px, habia TRES bordes izquierdos: el banner
   en 200, la tabla en 425 y el feed en 680. La causa era que cada vista
   se centraba con margin-inline:auto dentro de un area de 1720px,
   mientras el banner ocupaba todo el ancho.

   Ahora todo cuelga del mismo borde. La columna de lectura no se centra:
   se pega a la izquierda como en Reddit, y el sitio que sobra a su
   derecha es donde vive el riel — no un hueco muerto. */

/* La lateral y el hueco que deja eran dos numeros distintos: .mn tenia
   margin-left:200px fijo mientras la lateral medía 248. Cuarenta y ocho
   pixeles de contenido quedaban DEBAJO del menu. Una sola fuente. */
.sb{width:var(--nav-w)}
/* El margen que reserva la lateral SOLO donde la lateral esta anclada. Sin
   media query esta regla —que llega la ultima— le ganaba a
   `@media(max-width:1400px){.mn{margin-left:0}}` de index.html:957, y entre
   1024 y 1400px la pagina dejaba 248px de columna vacia a la izquierda con
   el menu convertido en cajon y fuera de pantalla. Las media queries no
   suman especificidad; el orden decide, y theme.css siempre va detras. */
.mn{padding-top:var(--dexbar-h)}
@media(min-width:768px){ .mn{margin-left:var(--nav-w)} }   /* el menu es columna fija desde tablet (2026-09-06) */
@media(max-width:767px){ .mn{margin-left:0} }

/* El casco: todo lo que va dentro del area principal comparte este ancho
   y este margen. En pantallas muy anchas el conjunto se centra como una
   pieza, no cada parte por su cuenta. */
.top,.banner,.ct{
  /* width:100% no sobra: son hijos de un flex en columna, y con solo
     margin-inline:auto la caja se encoge hasta su contenido y se centra
     ahi. Medido: .ct acababa en 824px de ancho en vez de 1560. */
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.banner{border-radius:var(--r-md)}

/* Las vistas ya no se centran: heredan el borde del casco. */
#fd,.pg,#view-feed,#view-tprofit,#view-txns,#view-safety,#view-detail,#view-profile{
  margin-inline:0;
  padding-inline:0;
  max-width:none;
}
#fd,.pg{padding-block:var(--s6) var(--s9)}

/* Dos anchos distintos porque son dos cosas distintas. El feed es una
   columna de LECTURA y pide medida corta. Las paginas de contenido
   (pricing, peak) llevan rejillas de cinco columnas y tarjetas en
   fila: a 760px se aprietan. */
#fd{max-width:var(--col)}
.pg{max-width:var(--col-page)}

/* Pero dentro de una pagina ancha, el TEXTO sigue atado a su medida.
   Una linea de 1080px no se lee: al saltar de renglon el ojo pierde
   cual era. Esto es lo que separa una pagina compuesta de un bloque de
   texto estirado. */
.pg h1,.pg h2,.pg .lede,.pg .sec,.pg p,.pg .pg-note{max-width:65ch}

/* ═══ Barra superior ═════════════════════════════════════════════════ */

.top{
  gap:var(--s3);
  padding-inline:var(--gutter);
  min-height:56px;
  background:var(--bg);
  border-bottom:var(--bw) solid var(--hair);
}

/* El buscador: píldora completa, altura táctil, sin borde en reposo. */
.sr input,
.busca{
  height:var(--tap);
  border-radius:var(--r-full);
  background:var(--surface-2);
  border:1px solid transparent;
  padding-inline:var(--s4);
  font-size:var(--fs-sm);
  color:var(--t1);
  transition:border-color var(--d-2) var(--ease-out),
             background-color var(--d-2) var(--ease-out);
}
.sr input:focus{
  border-color:var(--accent);
  background:var(--surface-1);
  outline:none;
}

/* ═══ Pulsables ══════════════════════════════════════════════════════
   Se hunden al pulsar. Es la señal más barata de que la interfaz oyó, y
   en móvil —donde no hay hover— muchas veces es la única que hay.       */

button,.tbtn,.dt-chip,.pill,.ni,.fd-acts button,.try-ai,.tb-btn{
  transition:transform var(--d-1) var(--ease-out),
             background-color var(--d-1) var(--ease-out),
             color var(--d-1) var(--ease-out),
             border-color var(--d-1) var(--ease-out);
}
button:active,.tbtn:active,.dt-chip:active,.pill:active,
.fd-acts button:active,.try-ai:active,.tb-btn:active{
  transform:scale(.97);
}

/* Hover solo donde hay puntero fino. En táctil el hover se dispara al
   tocar y deja el estado pegado. */
@media(hover:hover) and (pointer:fine){
  .ni:hover{background:var(--surface-2);color:var(--t1)}
  .pill:hover{background:var(--surface-3);color:var(--t1)}
}

/* LA EXCEPCIÓN: la tabla de tokens se actualiza por WebSocket y tiene
   quince columnas. Cualquier transición en el hover de fila se percibe
   como lag, no como suavidad. Es el único sitio donde animar empeora. */
.rw,.rw:hover,.tbl .rw{transition-duration:var(--d-0)}

/* ═══ Menú lateral ═══════════════════════════════════════════════════ */

.sb{width:var(--nav-w);padding:var(--s2);gap:2px}

.sb .lbl,.nav-sec{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--t3);
  padding:var(--s4) var(--s3) var(--s1);
}

.sb .ni{
  display:flex;align-items:center;gap:var(--s3);
  min-height:40px;padding:0 var(--s3);
  border-radius:var(--r-sm);
  color:var(--t2);
  font-size:var(--fs-sm);
  font-weight:500;
}
.sb .ni.on{
  background:var(--accent-dim);
  color:var(--accent);
  font-weight:600;
}
.sb .ni svg{width:18px;height:18px;flex:0 0 auto;stroke-width:1.8;opacity:.9}
.sb .sep{background:var(--hair);margin-block:var(--s3)}

/* ═══ Píldoras de acción — la gramática de Reddit ════════════════════
   Todo lo que se PULSA es píldora. Todo lo que CONTIENE lleva 12-16px.
   Es la regla que hace que la página se lea amable sin tocar la paleta. */

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);
  min-height:36px;padding:0 var(--s3);
  border-radius:var(--r-full);
  background:var(--surface-2);
  color:var(--t2);
  border:none;cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);font-weight:500;
}
.pill.on{background:var(--accent);color:var(--accent-in);font-weight:700}
.pill svg{width:16px;height:16px;flex:0 0 auto}

/* La diana puede ser mayor que lo que se ve: así no se pierde densidad
   y se falla mucho menos. */
.pill::before{
  content:'';position:absolute;inset:-4px;
}
.pill{position:relative}

/* ═══ Sin movimiento ═════════════════════════════════════════════════
   1ms y no 0s: con 0s los callbacks de transitionend no llegan a
   dispararse y hay código que espera por ellos. Y arrastrar con el dedo
   NO es animación, es manipulación directa — apagarla rompe el control
   en vez de proteger a nadie. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
}
[data-dragging],[data-dragging] *{transition:none!important}

/* ═══ Dianas ═════════════════════════════════════════════════════════
   Medido antes: 78 elementos pulsables por debajo de 44 px, el menor de
   18. El mínimo de iOS son 44 y lleva quince años siéndolo.

   El truco para no perder densidad: la diana crece SIN que el elemento
   ocupe más sitio. Un pseudo-elemento absoluto y transparente extiende el
   área sensible por fuera de la caja visible. Se ve igual, se falla mucho
   menos. Va en ::before porque varias píldoras ya usan ::after.          */

.fd-who .quien,
.fd-vote button,
.try-ai,.tb-btn,
.mbtn,.w-btn,.dt-chip,.tbtn{
  position:relative;
}
.fd-who .quien::before,
.fd-vote button::before,
.try-ai::before,.tb-btn::before,
.mbtn::before,.w-btn::before{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:max(100%,44px);
  height:44px;
  transform:translate(-50%,-50%);
  /* No pinta nada: solo recoge el dedo. */
}

/* Y donde SÍ cabe crecer de verdad, se crece: en el menú lateral hay
   sitio de sobra y 40 px en un móvil se falla. */
@media(max-width:767px){
  .sb .ni{min-height:var(--tap)}
  .fd-vote button{min-height:36px;width:36px}
}

/* La barra superior: 56 px de alto dan para botones de 40, y con la
   extensión llegan a 44 de diana. */
.try-ai,.tb-btn{min-height:40px;border-radius:var(--r-full);padding-inline:var(--s4)}


/* ═══ Móvil ══════════════════════════════════════════════════════════
   Medido antes: la barra superior ocupaba 149 px partida en TRES filas,
   con el buscador relegado al fondo. En una pantalla de 844 px eso son
   285 px de cromo —un tercio— antes de ver una sola palabra.

   El buscador es la acción principal de la casa, así que en móvil manda:
   ocupa el ancho que sobra y todo lo demás se aparta. El contador de
   tokens y el selector de idioma no desaparecen, se mueven a donde
   corresponde: el menú. */
@media(max-width:767px){
  .top{
    flex-wrap:nowrap;
    gap:var(--s2);
    min-height:56px;
    padding-block:var(--s2);
  }
  /* Orden por defecto alto para TODOS los hijos: así los que no tienen
     clase —que los hay— no se cuelan delante del buscador. Antes dos DIV
     sin nombre con order:0 lo dejaban en ancho CERO. */
  .top > *{order:5}
  .top > .mbtn{order:1;flex:0 0 auto}
  .top > .hd-logo{order:2;flex:0 0 auto}
  .top > .sr{order:3;flex:1 1 auto;min-width:0}
  .top > .hd-acciones,.top > #w-wrap{order:6;flex:0 0 auto}

  /* Fuera de la barra lo que no es una acción. El contador de tokens es
     información ambiental y el idioma es un ajuste: los dos viven mejor
     en el menú, que en móvil es adonde se va a buscar. */
  .top > .top-spacer,.try-ai,.tb-btn{display:none}

  /* La wallet, en icono. El texto ocupa 110px para decir algo que el
     icono ya dice. */
  .w-btn{padding-inline:var(--s3)}
  .w-btn #w-btn-text{display:none}

  /* El banner ocupa mucho para lo que dice. */
  .banner{font-size:var(--fs-sm);padding-block:var(--s2)}

  /* Menos aire arriba: en móvil cada píxel antes del contenido se paga. */
  #fd,.pg{padding-block:var(--s5) var(--s8)}
  #fd h1{font-size:var(--fs-xl)}
  #fd .lede{font-size:var(--fs-base);margin-bottom:var(--s4)}

  /* La media a sangre del borde de la pantalla: en móvil el margen
     lateral en una imagen es sitio desperdiciado. */
  .fd-card,.fd-media{
    margin-inline:calc(var(--gutter) * -1);
    border-radius:0;
  }
}

/* La barra de DEX se sale por la derecha en móvil. No es un error de
   maquetación: son doce venues y no caben. Lo correcto es que se
   desplace, no que se corte. */
.dexbar,.dex-strip,.strip{
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.dexbar::-webkit-scrollbar,.dex-strip::-webkit-scrollbar,.strip::-webkit-scrollbar{display:none}
/* Y que nada empuje el ancho de la página. */
/* SOLO en html, y con `clip`. En `body`, overflow-x:hidden lo convierte en
   contenedor de scroll —la norma sube el otro eje a `auto`— y eso se traga
   cualquier position:sticky de dentro: la barra de venues se iba con la
   pagina en vez de quedarse bajo la cabecera. Medido: top -640 con 700 de
   scroll, cuando deberia ser 60. `clip` recorta igual pero no crea
   contenedor, que es justo lo que hace falta. Ya habia un aviso de esto en
   index.html:101 y esta regla lo habia deshecho. */
html{overflow-x:clip}

/* El banner ocupaba tres líneas y 130 px para decir una frase, con la ✕
   montada encima del texto. En móvil se queda en una línea con puntos
   suspensivos: quien quiera leerlo entero, pulsa. */
@media(max-width:767px){
  .banner{
    display:flex;align-items:center;gap:var(--s2);
    /* flex-start y no center: centrado, el contenido desborda por los DOS
       lados y corta el principio de la frase — se leia "HBOARD" en vez de
       "TOKEN DASHBOARD". Empezando por la izquierda, lo que se pierde es
       el final, que es donde los puntos suspensivos avisan. */
    justify-content:flex-start;
    min-height:40px;padding-block:0;padding-right:var(--s2);
    font-size:var(--fs-sm);line-height:1.2;
    white-space:nowrap;overflow:hidden;
  }
  .banner > *{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }
  /* Quien centraba y recortaba era .banner-center, no el banner. Con
     justify-content:center el texto desborda por los DOS lados y se pierde
     el principio de la frase; alineado a la izquierda, lo que se corta es
     el final, que es donde los puntos suspensivos avisan. */
  .banner-center{
    justify-content:flex-start!important;
    flex:1 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;
  }
  /* La ✕ deja de montarse sobre el texto: se reserva su sitio al final. */
  .banner .x,.banner .close,.banner button:last-child{
    position:static!important;flex:0 0 auto;margin-left:var(--s2);
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  }
}

/* El atajo ⌘K se montaba sobre el texto del buscador en pantallas
   estrechas. En movil no hay teclado fisico: el atajo sobra. */
@media(max-width:767px){
  .sr .kbd,.sr [class*=kbd],.sr kbd{display:none}
  .sr input{padding-right:var(--s4)}
}

/* ═══ LA GRAMÁTICA DE LAS FORMAS ═════════════════════════════════════

   Medido en Home: de 15 tipos de control, solo DOS eran pildora. Trece
   no, y la mayoria estaban a 0px —completamente cuadrados— incluido el
   boton de conectar wallet. Una pagina con doce pildoras y veintisiete
   cuadrados no tiene una forma: tiene dos, peleandose.

   La regla, y no admite excepciones:

     Lo que se PULSA es pildora.
     Lo que CONTIENE lleva 12 o 16.
     Lo que es una PERSONA es circulo.

   Es de donde sale la sensacion amable de Reddit, y no del color.       */

/* ── Se pulsa → pildora ─────────────────────────────────────────── */
button,
select,
[role="button"],
.tbtn, .tbtn-solo, .pg-btn, .flt, .trend-tf, .trend-grp, .tgrp,
.fbox, .dt-chip, .bc, .rx-btn, .ss-chip, .mbtn, .w-btn,
.dt-bs button, .dt-presets button, .tp-tabs button, .dt-tf-sel button,
.dt-txn-tabs button, .dt-cfg button, .fab-buy, .fab-sell,
.sr-clear, .banner button, .w-drop-row{
  border-radius:var(--r-full);
}

/* Las que llevan icono solo quedan redondas del todo. */
.mbtn, .sr-clear, .banner .x{ border-radius:50% }

/* ── Contiene → 12 o 16 ─────────────────────────────────────────── */
.sbox, .stats-box, .tgrp, .trend-grp,
.tp-panel, .tp-row > *, .sr-drop, .w-drop, .dt-panel,
.pnl-card, .tpv-card, .ss-card{
  border-radius:var(--r-md);
}
.tbl, .dt-chart, .tpv-heat{ border-radius:var(--r-lg) }

/* ── Es una persona o un token → circulo ────────────────────────── */
.tk-b, .tk-img, .w-avatar, .rw img, .sr-item img, .tp-legend-dot{
  border-radius:50%;
}

/* ── Excepciones deliberadas ────────────────────────────────────── */
/* Las filas de una tabla NO se redondean: son una retícula, y redondear
   cada celda rompe la lectura en columna que es su unica razon de ser. */
.rw, .rw *, .tbl thead, .tbl th, .tbl td,
.dt-txn-row, .pnl-trade-row, .tpr-row{
  border-radius:0;
}
/* Salvo lo que dentro de la fila es una persona o un boton. */
.rw img, .rw .fav, .rw button{ border-radius:50% }

/* Los grupos de botones pegados: solo se redondean los extremos, para
   que se lean como UNA pieza segmentada y no como tres pastillas
   sueltas que casualmente se tocan. */
.tgrp > button, .trend-grp > button, .dt-tf-sel > button, .tp-tabs > button{
  border-radius:0;
}
.tgrp > button:first-child, .trend-grp > button:first-child,
.dt-tf-sel > button:first-child, .tp-tabs > button:first-child{
  border-start-start-radius:var(--r-full);
  border-end-start-radius:var(--r-full);
}
.tgrp > button:last-child, .trend-grp > button:last-child,
.dt-tf-sel > button:last-child, .tp-tabs > button:last-child{
  border-start-end-radius:var(--r-full);
  border-end-end-radius:var(--r-full);
}
.tgrp > button:only-child, .trend-grp > button:only-child{
  border-radius:var(--r-full);
}

/* ── Y la altura, que va con la forma ───────────────────────────── */
/* Una pildora de 21px de alto no es una pildora, es una raya. Medido:
   los selectores de tiempo estaban a 21px y los filtros a 25. */
.tbtn, .flt, .trend-tf, .pg-btn, .w-btn, .dt-chip, .fbox,
.tp-tabs button, .dt-tf-sel button, .bc{
  min-height:32px;
  padding-inline:var(--s3);
}
@media(max-width:767px){
  .tbtn, .flt, .pg-btn, .w-btn{ min-height:36px }
}

/* El selector de idioma. Sus dos botones se generaban con el estilo
   escrito en linea desde i18n.js, y un estilo en linea gana a cualquier
   hoja: eran los ultimos dos cuadrados de 4px de toda la pagina. */
.ss-lang{display:flex;gap:var(--s1);align-items:center;flex:0 0 auto}
.ss-lang-btn{
  min-height:28px;padding:0 var(--s3);
  border-radius:var(--r-full);
  border:var(--bw) solid var(--hair);
  background:transparent;color:var(--t2);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  position:relative;
}
.ss-lang-btn::before{content:'';position:absolute;inset:-8px}
.ss-lang-btn.on{
  background:var(--accent);color:var(--accent-in);border-color:transparent;
}
@media(hover:hover) and (pointer:fine){
  .ss-lang-btn:not(.on):hover{background:var(--surface-2);color:var(--t1)}
}

/* Los distintivos —New, Try free— tambien son pildoras. Eran los ultimos
   elementos de la pagina fuera del sistema.

   Los selectores llevan el peso que hace falta y no !important: las
   reglas viejas son `.sb .lbl .try` y `.sr kbd`, o sea tres clases y dos
   selectores. Empatar la especificidad es la forma limpia de ganar; el
   !important es una deuda que la proxima regla tendra que pagar. */
.badge, .try, .ss-badge, .ss-badge-g, .tag, .flair, .dt-dead-tag, .sr-ext,
.sb .lbl .try, .sb a.ni .badge, .ni .badge,
.sr kbd, kbd{
  border-radius:var(--r-full);
  padding-inline:var(--s2);
}

/* ═════════════════════════════════════════════════════════════════════
   CABECERA, LOGO, MENÚ LATERAL Y MENÚ DE PERFIL

   Rehechos con la anatomía de Reddit, que no es una cuestión de gusto:
   es que resuelve tres cosas a la vez —marca, búsqueda y cuenta— en 56
   píxeles de alto, y las tres se encuentran donde el ojo ya las busca.

   El cambio de fondo: el logo estaba DENTRO del menú lateral, así que en
   móvil desaparecía con él. La marca no puede irse.
   ═════════════════════════════════════════════════════════════════════ */

/* ── La cabecera ─────────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;gap:var(--s3);
  min-height:56px;
  background:var(--bg);
  border-bottom:var(--bw) solid var(--hair);
  position:sticky;top:var(--dexbar-h);z-index:var(--z-top);
}

/* ── El logo ─────────────────────────────────────────────────────── */
.hd-logo{
  display:flex;align-items:center;gap:var(--s2);
  flex:0 0 auto;text-decoration:none;
  padding:var(--s1) var(--s2);
  border-radius:var(--r-full);
  margin-left:calc(var(--s2) * -1);
  transition:background-color var(--d-1) var(--ease-out);
}
.hd-logo img{
  width:30px;height:30px;flex:0 0 auto;
  /* El logo no se redondea: es una marca, y recortarla la cambia. */
  border-radius:0;
}
.hd-logo span{
  font-family:var(--display);
  font-size:var(--fs-md);font-weight:700;
  letter-spacing:-.02em;color:var(--t1);
  /* Sin mayúsculas forzadas: la marca se escribe como se escribe. */
  text-transform:none;
}
@media(hover:hover) and (pointer:fine){
  .hd-logo:hover{background:var(--surface-2)}
}
/* En movil se queda la marca sin el nombre: el buscador manda. */
@media(max-width:767px){
  .hd-logo span{display:none}
  .hd-logo{margin-left:0;padding:var(--s1)}
}

/* ── El buscador ─────────────────────────────────────────────────── */
.sr{
  flex:1 1 auto;min-width:0;max-width:640px;
  margin-inline:auto;         /* centrado de verdad, como en Reddit */
  position:relative;
}
.sr input{
  width:100%;height:40px;
  border-radius:var(--r-full);
  background:var(--surface-2);
  border:1px solid transparent;
  padding-inline:var(--s5) var(--s4);
  font-size:var(--fs-sm);color:var(--t1);
}
.sr > svg{
  position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--t3);pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .sr input:hover{background:var(--surface-3)}
}
.sr input:focus{border-color:var(--accent);background:var(--surface-1)}

/* ── Botones de icono de la cabecera ─────────────────────────────── */
/* Sin fondo en reposo, redondos al pasar por encima. Es lo que hace que
   una fila de cinco iconos se lea como una fila y no como cinco cajas. */
.hd-ico{
  width:38px;height:38px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:none;background:none;
  color:var(--t2);cursor:pointer;position:relative;text-decoration:none;
}
.hd-ico svg{width:20px;height:20px;stroke-width:1.8}
.hd-ico::before{content:'';position:absolute;inset:-3px}
@media(hover:hover) and (pointer:fine){
  .hd-ico:hover{background:var(--surface-2);color:var(--t1)}
}
/* El contador de tokens se fue al pie del menu lateral: sus reglas de aqui
   apuntaban a un elemento que ya no existe y hacian creer, al leerlas, que
   .top-r seguia gobernando el punto de estado. */
.top-spacer{display:none}

/* ── El menú lateral ─────────────────────────────────────────────── */
.sb{
  width:var(--nav-w);
  padding:var(--s3) var(--s2) var(--s8);
  gap:1px;
  border-right:var(--bw) solid var(--hair);
  overflow-y:auto;overscroll-behavior:contain;
}
.sb::-webkit-scrollbar{width:0}

/* Encabezado de sección: pequeño, en mayúsculas, muy espaciado. Es lo
   que convierte diecinueve enlaces seguidos en cuatro grupos legibles. */
.sb .lbl,.sb-com .nav-sec{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--mono);
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);
  padding:var(--s5) var(--s3) var(--s2);
}
.sb .sep{
  height:1px;background:var(--hair);
  margin:var(--s3) var(--s3);
}

.sb .ni,.sb-com a{
  display:flex;align-items:center;gap:var(--s3);
  min-height:40px;padding-inline:var(--s3);
  border-radius:var(--r-sm);
  color:var(--t2);
  font-size:var(--fs-sm);font-weight:500;
  text-decoration:none;cursor:pointer;
}
.sb .ni svg,.sb-com a svg{
  width:20px;height:20px;flex:0 0 auto;
  stroke-width:1.7;opacity:.9;
}
/* El peso de los selectores iguala al de la regla vieja (.sb a.ni.on).
   Y el activo es un relleno SUTIL con una barra de acento, no la fila
   entera teñida: 248px de verde saturado gritan, y el menu es lo que
   menos deberia gritar de la pantalla. */
.sb a.ni.on,.sb .ni.on,.sb-com a.on{
  background:var(--surface-2);
  color:var(--t1);font-weight:600;
}
/* El activo lleva una barra de acento a la izquierda: se distingue de un
   simple hover sin teñir la fila entera de verde. */
.sb .ni.on{position:relative}
.sb .ni.on::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:var(--r-full);background:var(--accent);
}
@media(hover:hover) and (pointer:fine){
  .sb .ni:hover,.sb-com a:hover{background:var(--surface-2);color:var(--t1)}
}
.sb .ni .badge{
  margin-left:auto;
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:2px var(--s2);border-radius:var(--r-full);
  background:var(--accent-dim);color:var(--accent);
}

/* En móvil la lateral es un panel que entra desde el borde, no una
   columna encogida. Y con velo detrás, para que se entienda que hay algo
   abierto encima y no que la pagina se ha movido sola. */
@media(max-width:767px){
  .sb{
    position:fixed;inset:var(--dexbar-h) auto 0 0;
    z-index:var(--z-nav);
    transform:translateX(-100%);
    transition:transform var(--d-3) var(--ease-drawer);
    box-shadow:0 0 60px rgba(0,0,0,.6);
    background:var(--bg);
  }
  .sb.open{transform:none}
  .sb .ni,.sb-com a{min-height:var(--tap)}
}

/* ═════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA — la corrección de fondo

   Medido en la pagina: JetBrains Mono en 546 elementos, Space Grotesk en
   132. El OCHENTA POR CIENTO de la interfaz estaba en monoespaciada. Por
   eso se siente tecnica y dura en vez de amable: una mono es una fuente
   para columnas de cifras, no para leer.

   La causa es index.html:56, un selector gigante cuya intencion era
   "datos en mono" pero que se llevo por delante `.rw span` (cada celda de
   cada fila), y con el todos los botones y etiquetas.

   Reddit no usa webfont para la interfaz. Su panel de DevTools dice
   `.AppleSystemUIFont`, o sea la del sistema — y eso ademas encaja con lo
   que se pidio: que la web se sienta una extension del iPhone. La fuente
   del iPhone ES la del sistema.

   Reparto:
     · Sistema      → todo el texto de interfaz
     · Space Grotesk→ logo y titulos. Es la voz de la marca.
     · JetBrains    → SOLO cifras, precios, direcciones y horas. Lo que
                      tiene que alinearse en columna.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  --sys:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --sans:var(--sys);
  --display:'Space Grotesk',var(--sys);
  /* El texto de Reddit no es blanco puro: rgb(219,228,233), un gris con
     una pizca de azul. Blanco puro sobre casi negro cansa a las horas. */
  --t1:#DBE4E9;
  --t1-fuerte:#F4F8FA;   /* titulos y cifras, donde si hace falta peso */
}

body,input,textarea,select,button{
  font-family:var(--sys);
  /* -0.028px de tracking, medido en Reddit. Apenas se ve y es justo lo
     que impide que el texto se lea suelto a tamaños pequeños. */
  letter-spacing:-.01em;
}

/* Se deshace el selector gigante de index.html:56. La mono vuelve a ser
   lo que debia: la fuente de los numeros. */
.tk-s,.tk-f,.rw span,.hd span,.sbox .sl,.pg-btn,.pg-info,.bc,
.ds-label,.try-ai,.tb-btn,.pill,.tbtn,.sr-item-stats,.detail-pair,
.ds-info-row,.sr input,.banner,.ov-tab,.flt,.sr-item-ph{
  font-family:var(--sys);
}

/* Y aqui SI, porque son cifras que se comparan en columna. */
.num,[data-num],
.sbox .sv,.ds-val,.sr-item-price,.sr-item-mint,
.rw .price,.rw .mcap,.rw .liq,.rw .vol,.rw .age,
.fd-vote .n,.fd-out,.fd-snap,.mn-yo span,
.ss-lang-btn,.nav-sec,.sb .lbl,.eyebrow{
  font-family:var(--mono);
  letter-spacing:0;
}

/* Titulos: la voz de la marca. */
h1,h2,h3,h4,#fd h1,.pg h1,.pg h2,.fd-perfil h2{
  font-family:var(--display);
  letter-spacing:-.025em;
}

/* Cuerpo de interfaz: 14/20, como Reddit. */
.sb .ni,.sb-com a,.mn-fila,.fd-acts button,.fd-sorts button{
  font-size:14px;line-height:20px;
}

/* ═══ EL LOGO ════════════════════════════════════════════════════════
   Reddit escribe su marca en minusculas, con peso alto y el tracking muy
   cerrado. No es capricho: en minuscula la palabra tiene perfil —subidas
   y bajadas— y se reconoce de un vistazo mejor que en mayusculas, que
   son todas del mismo alto. Se aplica el mismo tratamiento a la nuestra
   con la fuente de la casa.                                            */
.hd-logo span{
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.045em;
  text-transform:lowercase;
  color:var(--t1-fuerte);
  line-height:1;
}

/* ═══ FONDOS ═════════════════════════════════════════════════════════
   Medido: DIECINUEVE fondos distintos. Los que sobran son restos de
   antes —un blanco translucido al 6%, un indigo del badge viejo, verdes
   y ambares sueltos— y ninguno responde al tema.                       */
.sb .lbl .try,.badge,.kbd,.sr kbd,
.dt-chip,.bc,.tbtn,.pill,.flt{
  background:var(--surface-2);
}
.sb a.ni .badge,.ni .badge{
  background:var(--accent-dim);color:var(--accent);
}
/* El blanco translucido al 6% aparecia en 26 sitios: sobre negro casi
   puro da un gris impredecible que cambia segun lo que tenga debajo. */
[style*="rgba(255,255,255,.06)"],[style*="rgba(255, 255, 255, 0.06)"]{
  background:var(--surface-2)!important;
}

/* ═══ LA BARRA DE DEX ═════════════════════════════════════════════════
   Medido: barra de 40px de alto, padding 0, gap 0, y dentro chips de 39.
   Un pixel de margen. Por eso los chips se tocan entre si, tocan los
   bordes y chocan con la cabecera: no es un problema de estilo, es que
   no hay aire ninguno.

   Ademas es la primera fila de la pagina. Lo primero que se ve no puede
   ser lo mas apretado.                                                 */

:root{ --dexbar-h:52px }

.pills{
  height:var(--dexbar-h);
  display:flex;align-items:center;
  gap:var(--s2);
  padding-inline:var(--gutter);
  /* Doce venues no caben en pantallas medias: se desplaza, no se corta. */
  overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;
  border-bottom:var(--bw) solid var(--hair);
  background:var(--bg);
}
.pills::-webkit-scrollbar{display:none}

.pills .pill{
  flex:0 0 auto;
  height:32px;min-height:32px;
  padding-inline:var(--s3);
  gap:var(--s2);
  background:transparent;
  color:var(--t2);
  font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;
}
.pills .pill img{width:16px;height:16px;border-radius:50%;flex:0 0 auto}
.pills .pill.on{background:var(--surface-2);color:var(--t1);font-weight:600}
@media(hover:hover) and (pointer:fine){
  .pills .pill:not(.on):hover{background:var(--surface-1);color:var(--t1)}
}

/* ═══ CABECERA Y BANNER ══════════════════════════════════════════════ */

/* Vertical simetrico. Estaba en 12 arriba y 10 abajo: cuatro pixeles de
   diferencia que no se ven pero se notan, porque el contenido queda
   sistematicamente alto dentro de su propia barra. */
.top{
  padding-block:var(--s2);
  min-height:60px;
}

/* El banner se estiraba 1352px con el texto centrado en medio: leia como
   una cinta, no como un aviso. Ahora el CONTENIDO tiene su propia
   medida y se alinea con el resto de la pagina en vez de flotar. */
.banner{
  min-height:44px;
  padding-block:var(--s2);
  margin-top:var(--s3);
}
.banner-center{
  max-width:var(--col-page);
  margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
  gap:var(--s3);
  font-size:13px;
  letter-spacing:.01em;
}
.banner .x{margin-left:var(--s3)}

/* ═════════════════════════════════════════════════════════════════════
   UN SOLO MENÚ LATERAL

   El de Home y el de Community eran dos, con cinco diferencias medidas:
   tracking del encabezado 1.32px vs 0, padding 0/12 vs 8/12, gap 12 vs 9,
   fuente 14 vs 13, icono 20 vs 16 — y Home llevaba ademas una barra de
   acento que Community no tiene.

   La causa: las reglas viejas usan `.sb a.ni`, que pesa mas que mi
   `.sb .ni`. Este bloque iguala el peso y gobierna los dos a la vez. A
   partir de aqui son el mismo menu con opciones distintas, que es
   exactamente lo que se pidio.

   Se toma el de Community como referencia porque es el que estaba bien.
   ═════════════════════════════════════════════════════════════════════ */

/* Encabezado de grupo */
.sb .lbl,
.sb-com .nav-sec{
  display:flex;align-items:center;gap:var(--s2);
  /* La medida es la de Community: 16 arriba y 4 abajo. Home iba a 24/8 y
     los dos menus se leian distintos aunque tuvieran las mismas opciones. */
  padding:var(--s4) var(--s3) var(--s1);
  margin:0;
  font-family:var(--mono);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--t3);
  line-height:1;
}

/* Fila */
.sb a.ni,.sb .ni,
.sb-com a{
  display:flex;align-items:center;
  gap:var(--s3);
  min-height:40px;
  padding:0 var(--s3);
  border-radius:var(--r-sm);
  font-family:var(--sys);
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:20px;
  letter-spacing:-.01em;
  color:var(--t2);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),
             color var(--d-1) var(--ease-out);
}

/* Icono */
.sb a.ni svg,.sb .ni svg,
.sb-com a svg{
  width:20px;height:20px;
  flex:0 0 auto;
  stroke-width:1.7;
  opacity:.9;
}

/* Activo. Relleno y peso, nada mas. La barra de acento la tenia solo
   Home, y era justo lo que hacia que los dos menus no se parecieran. */
.sb a.ni.on,.sb .ni.on,
.sb-com a.on{
  background:var(--surface-2);
  color:var(--t1);
  font-weight:600;
}
.sb a.ni.on::before,.sb .ni.on::before{content:none}

@media(hover:hover) and (pointer:fine){
  .sb a.ni:hover,.sb .ni:hover,.sb-com a:hover{
    background:var(--surface-1);
    color:var(--t1);
  }
}

/* Contenedor */
.sb,.sb-com{
  display:flex;flex-direction:column;
  gap:2px;
  padding:var(--s2) var(--s2) var(--s8);
}

/* Distintivos: mismo tratamiento en los dos. */
.sb a.ni .badge,.sb .ni .badge,.sb-com a .badge{
  margin-left:auto;
  font-family:var(--mono);
  font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px var(--s2);
  border-radius:var(--r-full);
  background:var(--accent-dim);
  color:var(--accent);
}
.sb .lbl .try{
  font-family:var(--mono);
  font-size:9px;font-weight:700;
  letter-spacing:.08em;
  padding:3px var(--s2);
  border-radius:var(--r-full);
  background:var(--surface-2);
  color:var(--t2);
  text-transform:uppercase;
}

@media(max-width:1023px){
  .sb a.ni,.sb .ni,.sb-com a{min-height:var(--tap)}
}

/* ═══ DOS AJUSTES DE ALINEACIÓN ══════════════════════════════════════ */

/* EL BANNER. Su TEXTO respetaba el margen, pero su caja verde iba de
   borde a borde (248→1600) mientras las tarjetas de debajo estaban
   dentro (280→1568). El bloque de color sobresalia 32px por cada lado.
   Con un fondo, lo que se ve es la caja, no el texto: el margen tiene
   que ir por fuera. */
.banner{
  margin-inline:var(--gutter);
  padding-inline:var(--s4);
  width:auto;
  max-width:none;
}

/* EL MENÚ LATERAL. .sb-com es un <nav> DENTRO de nav.sb, asi que sumaba
   su padding al del padre: los items de Community quedaban en x=16 y los
   de Home en x=8.

   El usuario prefiere el de Community, y tiene razon: con 16 el item
   activo no toca el borde del panel y la fila respira. A 8 la pastilla
   roza la pared y se lee apretada.

   Asi que el inset de los DOS pasa a 16, y el de dentro deja de sumar. */
.sb{padding:var(--s2) var(--s4) var(--s8)}
.sb-com{padding:0;gap:2px}
/* ═════════════════════════════════════════════════════════════════════
   UNA SOLA CABECERA

   La barra de venues estaba encima del logo. Dos barras apiladas leian
   como dos cabeceras, y la de arriba —que solo filtra una tabla— le
   disputaba el primer sitio a la marca.

   Ahora: cabecera arriba (marca, buscador, cuenta) y el filtro de venues
   abajo, dentro del contenido, junto a la tabla que gobierna.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  --hd-h:60px;                    /* la cabecera, y ya no hay otra */
  --dexbar-h:52px;                /* alto de la fila de venues, ya en el contenido */
  --chrome-h:var(--hd-h);
  --rail-w:32px;                  /* lo que queda del menu cuando se pliega */
  --sr-w:620px;                   /* medida del buscador */

  /* Los separadores de Reddit se ven; los nuestros habia que buscarlos. */
  --hair:#2A3038;
  --edge:#39414B;
}

.top{
  position:fixed;top:0;left:0;right:0;
  z-index:var(--z-top);
  height:var(--hd-h);min-height:var(--hd-h);
  max-width:none;margin:0;
  padding-inline:var(--gutter);
  padding-block:0;
  background:var(--bg);
  border-bottom:var(--bw) solid var(--hair);
  gap:var(--s2);
}

/* Reparto en tres columnas: marca, buscador, acciones.
   Con el buscador anclado al centro por `position:absolute` quedaba fuera
   del reparto, y en cuanto la wallet se conectaba —el saldo suma 150px—
   el grupo de la derecha se le metia debajo. Medido: "Peak" recortado a
   "rkAI". Con rejilla no hay solape posible: las columnas de los lados
   crecen lo que pida su contenido y la del medio cede, en ese orden.
   Y mientras haya holgura las dos laterales valen igual, que es lo que
   deja el buscador en el centro de la PAGINA y no del hueco. */
.top{
  display:grid;
  grid-template-columns:minmax(auto,1fr) minmax(0,var(--sr-w)) minmax(auto,1fr);
  gap:var(--s3);
}
.top > .hd-logo,.top > .mbtn{grid-column:1;grid-row:1;justify-self:start}
.top > .sr{grid-column:2;grid-row:1}
.top > .hd-acciones{
  grid-column:3;grid-row:1;justify-self:end;
  display:flex;align-items:center;gap:var(--s2);
}
.top > .top-spacer,.hd-acciones .top-spacer{display:none}

/* El logo se alinea con el menu lateral: mismo ancho, mismo eje. */
.hd-logo{
  width:calc(var(--nav-w) - var(--gutter));
  flex:0 0 auto;
  margin:0;padding:0;
}
.hd-logo span{
  font-size:24px;
  color:#FFFFFF;          /* blanco, sin matices: es la marca */
}
/* El logotipo ATH va en linea y toma el color del tema con currentColor.
   36px de alto, medido en okx.com el 2026-09-17: su cabecera son 48px y su
   logo 82x36. Aqui la cabecera son 72px, asi que el mismo logo ocupa el 50%
   en vez del 75% de ellos, y respira mas. El ancho sale solo de la
   proporcion del logo (1376x496 = 2,77), que no se deforma nunca: a 36px de
   alto son ~100px de ancho, y la caja del logo mide 236px (--nav-w menos el
   canal), asi que entra de sobra. */
.hd-marca{
  height:36px;width:auto;display:block;
  color:#FFFFFF;
}
@media(max-width:767px){ .hd-marca{height:30px} }
@media(hover:hover) and (pointer:fine){
  .hd-logo:hover{background:none;opacity:.85}
}

/* ── El buscador ──────────────────────────────────────────────────────
   Centrado en la PAGINA, no en el hueco que dejan los lados. Anclarlo al
   centro del viewport es lo unico que aguanta que la marca crezca o que
   aparezca un icono mas a la derecha: con `margin:auto` cualquier cambio
   en un extremo lo descoloca. */
.sr{
  position:relative;
  /* El ancho va aqui, explicito. Sin el, la columna de la rejilla se
     dimensionaba por el ancho intrinseco del <input> —20 caracteres, 232px—
     y las dos laterales se repartian el resto. El buscador salia centrado
     pero del tamano de una caja de comentario. */
  width:var(--sr-w);
  max-width:100%;
  min-width:0;
  margin-inline:auto;
}
.sr input{
  width:100%;height:40px;
  border-radius:var(--r-full);
  background:var(--surface-2);
  border:1px solid transparent;
  font-family:var(--sys);
  font-size:var(--fs-sm);color:var(--t1);
  /* Simetrico: el texto se centra de verdad solo si los dos lados miden
     igual, aunque a la izquierda haya marca y a la derecha no haya nada. */
  padding-inline:42px;
  text-align:center;
}
/* Al escribir vuelve a la izquierda: una direccion de 44 caracteres
   centrada se lee peor, y el cursor deja de saltar con cada tecla. */
.sr input:focus{text-align:left}
.sr > svg{display:none}         /* la lupa sobra si esta la marca */
.sr kbd{display:none}           /* el atajo sigue vivo; el cartel no hacia falta */

/* La marca, dentro del buscador. En Reddit el circulo naranja vive ahi:
   convierte una caja de texto en SU caja de busqueda. Va en un circulo del
   color de la pagina porque el logo trae fondo propio y sobre el gris de
   la caja se leia como un parche negro pegado encima. */
.sr-mark{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  box-sizing:border-box;
  width:28px;height:28px;
  padding:5px;
  border-radius:50%;
  background:var(--bg);
  object-fit:contain;
  z-index:1;pointer-events:none;
}

/* ── La fila de acciones ──────────────────────────────────────────────
   Reddit: iconos sueltos, UNA sola cosa con nombre, y la cuenta al final.
   Nosotros teniamos cinco lenguajes de boton distintos en 400px de ancho:
   losa verde, pastilla fantasma, chip mono, dos micro-pastillas y otra
   losa verde. Todo a la misma altura y el mismo idioma. */
.top .try-ai,.top .tb-btn{
  font-family:var(--sys);
  text-transform:none;letter-spacing:0;
  font-size:13.5px;font-weight:600;
  height:38px;min-height:38px;
  border-radius:var(--r-full);
  border:none;
  gap:var(--s2);
  transition:background-color var(--d-1) var(--ease-out),
             color var(--d-1) var(--ease-out);
}
/* Peak es la unica accion con nombre, como el "Create" de Reddit. */
.top .try-ai{
  background:var(--surface-2);color:var(--t1);
  padding-inline:var(--s3) var(--s4);
}
.top .try-ai svg{color:var(--accent)}
/* Community va sin texto: el nombre ya lo lleva el menu lateral, y
   repetirlo aqui es gastar la fila en algo que ya esta dicho. */
.top .tb-btn.hd-solo{
  width:38px;padding:0;background:none;color:var(--t2);
  justify-content:center;
}
.top .tb-btn.hd-solo span{display:none}
.top .hd-accion svg{width:20px;height:20px}
@media(hover:hover) and (pointer:fine){
  .top .try-ai:hover{background:var(--surface-3);opacity:1}
  .top .tb-btn.hd-solo:hover{background:var(--surface-2);color:var(--t1);opacity:1}
}

/* El idioma baja a 30px: es un ajuste, no una accion, y a la misma altura
   que los botones competia con ellos. El contador de tokens ya no esta
   aqui —se fue al pie del menu, junto a lo que ya contaba lo mismo. */
.ss-lang-btn{height:30px;min-height:30px;min-width:34px}

/* ── La cuenta ────────────────────────────────────────────────────────
   Sin wallet, el circulo de perfil ES donde se pide la conexion: no hay
   dos botones peleandose por la misma accion. Con wallet, el saldo se
   queda a la vista —esto es un sitio de trading— y el circulo pasa a ser
   el menu, como el avatar de Reddit. */
#w-wrap{display:flex;align-items:center;gap:var(--s2)}

.w-btn:not(.connected){
  width:38px;height:38px;min-height:38px;padding:0;
  border-radius:50%;
  background:none;color:var(--t2);
  border:var(--bw) solid var(--hair);
  justify-content:center;
  font-family:var(--sys);
}
/* El texto no se borra, se esconde: sigue nombrando el boton para quien
   navega con lector de pantalla. */
.w-btn:not(.connected) #w-btn-text{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* El retrato por defecto de la casa: el mismo que llevan las filas de
   trades de quien no tiene foto. Un monigote generico decia "no hay nadie";
   este dice "todavia no eres nadie AQUI", que es lo que de verdad pasa. El
   punto apagado de al lado es quien cuenta que no hay conexion. */
/* Sin overflow:hidden: la imagen ya se recorta sola con su border-radius, y
   recortar el boton se llevaba por delante el ::before que le da los 44px
   de zona pulsable. Medido: el area caia de 44x44 a 38x38. */
.w-btn:not(.connected){background:var(--surface-2)}
.w-btn:not(.connected) .w-ico-perfil{
  width:100%;height:100%;display:block;
  border-radius:50%;object-fit:cover;
}
@media(hover:hover) and (pointer:fine){
  /* A pantalla completa de imagen, cambiar el fondo no se ve: el aviso de
     "esto se pulsa" lo da el borde y un punto de velo sobre la cara. */
  .w-btn:not(.connected):hover{border-color:var(--edge);opacity:1}
  .w-btn:not(.connected):hover .w-ico-perfil{opacity:.82}
}
.w-ico-perfil{transition:opacity var(--d-1) var(--ease-out)}
.w-btn.connected{
  height:34px;min-height:34px;
  border-radius:var(--r-full);
  background:var(--surface-2);border:none;color:var(--t1);
  padding-inline:var(--s3);
  text-transform:none;letter-spacing:0;
}
.w-btn.connected .w-ico-perfil{display:none}

.w-avatar{width:38px;height:38px;border:var(--bw) solid var(--hair)}

/* El punto de estado: verde conectado, apagado si no. Es el mismo gesto
   que el punto verde del avatar de Reddit, contando algo que aqui si
   importa saber de un vistazo. */
.hd-estado{
  position:absolute;right:-1px;bottom:1px;
  width:11px;height:11px;border-radius:50%;
  background:var(--t3);
  border:2px solid var(--bg);
  pointer-events:none;
  transition:background-color var(--d-2) var(--ease-out);
}
body.wallet-on .hd-estado{background:var(--accent)}

/* ═══ LA BARRA DE VENUES, EN SU SITIO ═════════════════════════════════
   Filtra la tabla de tokens y nada mas, asi que vive con ella: en la fila
   del banner, dentro del contenido y con los mismos margenes laterales
   que todo lo demas.
   ═════════════════════════════════════════════════════════════════════ */
.pills{
  position:static;
  width:100%;max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--dexbar-h);
  background:transparent;
  border-bottom:none;
}
/* La franja de venues + banner se queda pegada bajo la cabecera. */
.topbar-fixed{top:var(--hd-h);border-bottom:var(--bw) solid var(--hair)}

/* Todo arranca por debajo de la unica cabecera. */
.sb{top:var(--chrome-h)}
.mn{padding-top:var(--chrome-h)}

/* ═══ EL CARRIL ═══════════════════════════════════════════════════════
   Plegar no es lo mismo que quitar. Reddit deja una franja: el menu se va
   pero su sitio no, asi la pagina no se descoloca y queda un borde al que
   volver. Acercar el raton lo asoma; retirarlo lo devuelve. El boton de
   tres rayas es lo unico que lo deja fijo.

   Ancho medido en Reddit: 32px. Es una linea con sitio para el boton, no
   una columna. Con 56 se comia el doble de pagina sin ensenar nada mas.

   TODO ESTO VIVE SOLO POR ENCIMA DE 1400px, y el numero no es mio: es donde
   index.html:956 convierte la lateral en un cajon con hamburguesa. Plegar
   una columna que ya no esta anclada no significa nada, y mis reglas
   —`body.sb-plegado .sb`, dos clases— le ganaban por especificidad a
   `.sb.open`, que solo tiene dos tambien pero llega antes. Resultado
   medido: en movil el cajon dejaba de abrirse y el carril se comia los
   toques de los 32px de la izquierda.
   ═════════════════════════════════════════════════════════════════════ */
@media(min-width:1401px){
  .sb-toggle{
    position:fixed;
    top:calc(var(--chrome-h) + (var(--dexbar-h) - 32px) / 2);
    left:calc(var(--nav-w) - 16px);
    z-index:calc(var(--z-nav) + 1);
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    border:var(--bw) solid var(--hair);
    background:var(--bg);
    color:var(--t2);
    cursor:pointer;
    transition:left var(--d-3) var(--ease-drawer),
               background-color var(--d-1) var(--ease-out),
               color var(--d-1) var(--ease-out);
  }
  .sb-toggle svg{width:16px;height:16px}

  .sb-carril{
    position:fixed;top:var(--chrome-h);left:0;bottom:0;
    width:var(--rail-w);
    border-right:var(--bw) solid var(--hair);
    z-index:90;                     /* por debajo del panel, que va a 100 */
    display:none;
  }

  /* Plegado, la lateral sale del orden de tabulacion. Con solo
     translateX(-100%) sus 19 enlaces seguian siendo enfocables fuera de
     pantalla: el foco desaparecia de la vista y no habia forma de saber
     donde estaba. La visibilidad se retrasa lo que dura el deslizamiento
     para no cortarlo a medias. */
  body.sb-plegado .sb{
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform var(--d-3) var(--ease-drawer),
               visibility 0s linear var(--d-3);
  }
  body.sb-plegado .sb-carril{display:block}
  body.sb-plegado .mn{margin-left:var(--rail-w)}
  body.sb-plegado .sb-toggle{left:calc(var(--rail-w) - 16px)}

  /* Asomado: vuelve FLOTANDO. No empuja el contenido, porque mover la
     pagina bajo el raton de quien solo pasaba por ahi es peor que no
     ensenar el menu. El boton viaja con el borde del panel. */
  body.sb-plegado.sb-asomado .sb{
    transform:none;
    visibility:visible;
    transition:transform var(--d-3) var(--ease-drawer),visibility 0s;
    border-right:var(--bw) solid var(--hair);
    box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  body.sb-plegado.sb-asomado .sb-toggle{left:calc(var(--nav-w) - 16px)}

  .sb{transition:transform var(--d-3) var(--ease-drawer)}
  .mn{transition:margin-left var(--d-3) var(--ease-drawer)}
}
/* Por debajo de 1400 la lateral es un cajon: ni boton de plegar ni carril. */
@media(max-width:1400px){
  .sb-toggle,.sb-carril{display:none}
}

/* ═══ LOS ICONOS ══════════════════════════════════════════════════════
   Los de Reddit pesan mas. Los nuestros iban a 1.7 de trazo Y con un 90%
   de opacidad: dos rebajas sobre la misma linea, y a 20px eso se queda en
   pelo. Sube el trazo, se va el velo, y las puntas se redondean —que es
   la mitad de por que los suyos se ven mas solidos sin verse duros.
   ═════════════════════════════════════════════════════════════════════ */
.sb a.ni svg,.sb .ni svg,.sb-com a svg,
.top .hd-accion svg,.hd-ico svg,.w-btn svg,
.sb-toggle svg,.mbtn svg{
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
}
/* En el menu de cuenta los iconos van a 24px: ahi 2.1 empasta los trazos
   que se cruzan, asi que se queda un punto por debajo. */
.mn-fila svg{stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── Movil ────────────────────────────────────────────────────────── */
/* A 1400 aparece la hamburguesa (index.html:957). La rejilla mandaba el
   logo y la hamburguesa a la MISMA celda —los dos en columna 1, fila 1— y
   se dibujaban uno encima del otro: medido a 1280, ambos en x=32 y el icono
   tapando la 's' de ath. Aqui vuelve la fila, que es lo que sabe poner
   dos cosas seguidas. */
@media(max-width:1400px){
  .top{display:flex}
  .top > .hd-logo{width:auto;flex:0 0 auto}
  .top > .mbtn{flex:0 0 auto}
  .top > .sr{width:auto;max-width:none;flex:1 1 auto;min-width:0}
}
@media(max-width:767px){
  .sb{inset:var(--chrome-h) auto 0 0}
}
@media(max-width:767px){
  /* .try-ai y .tb-btn ya estan en display:none desde 1100px por
     index.html:144. Escribirles aqui tamanos era CSS muerto. */
  .hd-logo span{display:inline;font-size:18px}
  .sr-mark{width:24px;height:24px;left:5px;padding:4px}
  /* En 200px de campo, centrar el texto lo deja bailando. A la izquierda. */
  .sr input{padding-inline:34px var(--s3);text-align:left;font-size:14px}
}
@media(max-width:479px){
  /* En telefono la palabra cuesta 67px para repetir lo que la marca del
     buscador ya dice a cuatro dedos de distancia. Se va y el campo respira.
     Con width:auto el enlace se encoge a cero limpiamente; era la caja de
     232px con la palabra escondida lo que dejaba el buscador en 19px. */
  .hd-logo span{display:none}
  .hd-logo{padding:0}
}
@media(prefers-reduced-motion:reduce){
  .sb,.mn,.sb-toggle,.hd-estado{transition:none}
}

/* ═══ EL PULSO, AL PIE DEL MENU ═══════════════════════════════════════
   Estado y recuento no son acciones: se consultan, no se pulsan. Arriba
   ocupaban sitio de barra y competian con lo que si se pulsa; abajo estan
   donde se van a mirar, y el numero de 24h les hace de vecino natural.

   Y es un grupo mas del menu, no un pie aparte: mismo encabezado de grupo,
   mismo margen lateral de 12px que las filas de navegacion, misma escala.
   Fuera el `margin-top:auto` que lo empujaba al fondo dejando un hueco de
   250px, y fuera la linea separadora: aqui los grupos los separa su titulo,
   y meter ademas una raya era un segundo idioma para lo mismo.
   ═════════════════════════════════════════════════════════════════════ */
.sb-ft{margin-top:0;padding:0}
.sb-ft .row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:32px;
  padding-inline:var(--s3);
  font-size:13px;
  color:var(--t3);
}
/* Ojo con el `> span:last-child`: el valor de Status no es hijo directo de
   la fila —va dentro de .sb-ft-est, con el punto— asi que caia en el gris
   de .sb-ft .row y quedaba mas apagado que sus dos vecinos. */
/* Las tres filas, un solo color de valor. Hay que llegar a (0,3,1) para
   ganarle a `.sb-ft .row span:last-child` de index.html:94: con un selector
   mas flojo solo cambiaba la fila cuyo valor va anidado y las otras dos se
   quedaban grises. */
.sb-ft .row > span:last-child,
.sb-ft .row > :last-child > span{
  color:var(--t1);font-weight:600;
  /* Cifras que cambian solas: sin tabulares, el ancho baila a cada tick. */
  font-variant-numeric:tabular-nums;
}
.sb-ft-est{display:inline-flex;align-items:center;gap:var(--s2)}

/* ═══ EL TOKEN ABIERTO, DENTRO DEL BUSCADOR ═══════════════════════════
   Reddit mete la comunidad en la barra cuando entras en ella. Lo que vale
   no es el adorno: es que la barra deja de decir solo "aqui se busca" y
   pasa a decir DONDE estas. Es el punto de la pantalla al que vuelve la
   vista y estaba diciendo una sola cosa.

   Con el chip puesto la barra cambia de estructura: deja de ser una caja
   con el texto centrado y pasa a ser una fila —lupa, chip, texto—. Centrar
   un texto al que le come la izquierda un chip de ancho variable solo se
   puede hacer midiendo en JS, y eso se desincroniza en cuanto cambia el
   simbolo. Aqui lo resuelve el reparto, no la aritmetica.
   ═════════════════════════════════════════════════════════════════════ */
.sr-ambito{
  display:none;align-items:center;gap:6px;
  flex:0 0 auto;max-width:200px;min-width:0;
  height:28px;padding-inline:4px;
  border-radius:var(--r-full);
  background:var(--surface-3);
  font-size:13px;color:var(--t1);
}
.sr-ambito img{
  width:20px;height:20px;flex:0 0 auto;
  border-radius:50%;object-fit:cover;background:var(--surface-2);
}
.sr-ambito b{
  font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sr-ambito-x{
  flex:0 0 auto;width:22px;height:22px;min-height:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:50%;
  color:var(--t2);cursor:pointer;
}
/* `.sr svg` en index.html:114 es un selector de DESCENDENCIA con
   position:absolute;left:10px. Atrapaba tambien el icono de esta X y lo
   mandaba al borde izquierdo, encima de la lupa: la X se veia donde no
   estaba y el boton, donde no se veia. Aqui se le devuelve su sitio. */
.sr .sr-ambito-x svg{
  position:static;transform:none;
  width:13px;height:13px;
  color:currentColor;
}
@media(hover:hover) and (pointer:fine){
  .sr-ambito-x:hover{background:var(--surface-2);color:var(--t1)}
}

body.con-ambito .sr{
  display:flex;align-items:center;gap:var(--s2);
  height:40px;
  border-radius:var(--r-full);
  background:var(--surface-2);
  border:1px solid transparent;
  padding-inline:var(--s3) var(--s4);
}
body.con-ambito .sr:focus-within{background:var(--surface-1);border-color:var(--edge)}
body.con-ambito .sr-mark{display:none}
/* La lupa vuelve: con el chip delante, la marca ya no puede decir "esto se
   busca" porque el sitio de la izquierda lo ocupa el token. */
body.con-ambito .sr > svg{
  display:block;position:static;transform:none;
  width:17px;height:17px;flex:0 0 auto;color:var(--t3);
}
body.con-ambito .sr-ambito{display:flex}
body.con-ambito .sr input{
  flex:1 1 auto;width:auto;min-width:0;height:100%;
  background:none;border:none;
  padding:0;text-align:left;
}
body.con-ambito .sr input:hover,
body.con-ambito .sr input:focus{background:none;border-color:transparent}

@media(max-width:767px){
  /* En 250px de campo no caben la lupa Y el chip. Gana el chip: dice donde
     estas, que es lo que la lupa no sabe decir. */
  .sr-ambito{max-width:104px}
  body.con-ambito .sr{padding-inline:var(--s2) var(--s3);gap:6px}
  body.con-ambito .sr > svg{display:none}
}

/* ═══ SOBRIO ══════════════════════════════════════════════════════════
   La menta se queda donde SIGNIFICA algo: el chart, el punto de conexion y
   las cifras que suben o bajan. En un control no significa nada —un boton
   no es mas pulsable por ser verde— y repetida en doce sitios deja de ser
   un acento para ser el fondo.

   Dos papeles, los mismos que en Reddit y en iOS:

   - Accion principal: pastilla BLANCA con texto oscuro. Una por pantalla.
     El blanco es el color mas escaso que hay sobre un fondo oscuro, y por
     eso no hace falta gritar para que se vea.
   - Seleccionado de un segmentado: superficie un escalon mas clara. Es
     relieve, no color: dice "estas aqui" sin competir con la accion.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  --pri:#F2F4F7;
  --pri-hov:#FFFFFF;
  --pri-act:#DCE2E9;
  --sobre-pri:#0B0D10;

  --sel:#333A43;
  --sobre-sel:#FFFFFF;
}

/* ── Lo seleccionado ────────────────────────────────────────────────── */
.tp-tabs button.on,
.tpr-amts button.on,
.tbtn.on,
.tbtn-solo.on,
.trend-tf.on,
.dt-tf-sel button.on,
.dt-txn-tabs button.on,
.ss-mode.on,
.ss-chip.on,
.txn-filters button.on,
.pf-tabs button.on,
.ss-lang-btn.on,
.ov-tab{
  background:var(--sel);
  color:var(--sobre-sel);
  border-color:var(--sel);
  font-weight:600;
}
/* pg-on nacio con tres !important; para quitarle el verde hay que igualarlo. */
.pg-btn.pg-on{
  background:var(--sel)!important;
  color:var(--sobre-sel)!important;
  border-color:var(--sel)!important;
}

/* ── La accion principal ────────────────────────────────────────────── */
.ds-btn,.dt-wallet,.dt-pnl-cta-btn,.shm-btn.pri,.pf-follow,.dp-copy,.bc{
  background:var(--pri);
  color:var(--sobre-pri);
  border-color:transparent;
  transition:background-color var(--d-1) var(--ease-out),
             transform var(--d-1) var(--ease-out);
}
.pf-save{background:var(--pri)!important;color:var(--sobre-pri)!important}
@media(hover:hover) and (pointer:fine){
  .ds-btn:hover,.dt-wallet:hover,.dt-pnl-cta-btn:hover,.shm-btn.pri:hover,
  .pf-follow:hover,.dp-copy:hover,.bc:hover{background:var(--pri-hov);opacity:1}
}
.ds-btn:active,.dt-wallet:active,.dt-pnl-cta-btn:active,.shm-btn.pri:active,
.pf-follow:active,.dp-copy:active,.bc:active{background:var(--pri-act)}

/* ── El banner ──────────────────────────────────────────────────────── */
/* Era una losa de menta a lo ancho de la pagina para decir una novedad que
   se puede cerrar. Lo que tiene que destacar es el ENLACE, no la cinta. */
.banner{
  background:var(--surface-1);
  border:var(--bw) solid var(--hair);
  color:var(--t2);
  text-transform:none;
  letter-spacing:0;
  font-family:var(--sys);
  font-size:13px;
}
.banner b{color:var(--t1);font-weight:700}
.banner a{color:var(--t1);text-decoration:underline;text-underline-offset:3px}
.banner .sep-line{color:var(--hair)}

/* ── El destello de fila nueva ──────────────────────────────────────── */
/* Pulsaba en menta PARA SIEMPRE: siete filas latiendo a la vez no señalan,
   marean. Lo que dice "esto acaba de entrar" es el movimiento y la barra
   del borde, no el color; y una vez, no en bucle. */
.rw.fresh{
  box-shadow:inset 3px 0 0 var(--edge);
  animation:entraFila 1.1s var(--ease-out) 1;
}
@media(hover:hover) and (pointer:fine){
  .rw.fresh:hover{background:var(--surface-2)!important}
}
@keyframes entraFila{
  from{background:rgba(255,255,255,.07)}
  to{background:transparent}
}
@media(prefers-reduced-motion:reduce){
  .rw.fresh{animation:none}
}

/* ═══ TOP PERFORMERS Y TOP PROFIT ═════════════════════════════════════
   Las dos tarjetas hablaban otro idioma: mono a 10px para las etiquetas,
   botones con borde de 3px de alto, "ENTRY:" en versalitas, el vacio en
   monoespaciada y tres formas distintas de "esto esta seleccionado" en
   veinte centimetros de pantalla.

   Aqui no se inventa nada: se les aplica lo que ya usa el resto —la escala
   de espacios, el tipo del sistema, el segmentado y el radio de la casa.
   ═════════════════════════════════════════════════════════════════════ */
.tp-section{
  background:var(--surface-1);
  border:var(--bw) solid var(--hair);
  border-radius:var(--r-lg);
  padding:var(--s5) var(--s5) var(--s4);
}
.tp-row{gap:var(--s4);margin-bottom:var(--s4)}
.tp-header{margin-bottom:var(--s4);gap:var(--s4)}
.tp-title{
  font-family:var(--sys);
  font-size:var(--fs-md);font-weight:700;
  color:var(--t1);letter-spacing:-.01em;
  gap:var(--s2);
}
/* El icono se queda en menta: es lo unico de la tarjeta que no compite con
   nada, y da el unico punto de color que la cabecera necesita. */
.tp-title svg{width:18px;height:18px;color:var(--accent);stroke-width:2.1}

/* ── El segmentado ──────────────────────────────────────────────────── */
/* Carril hundido y la pestana elegida en relieve, como el de iOS. Antes era
   un rectangulo de menta pegado a otro rectangulo de menta. */
.tp-tabs{
  background:var(--surface-2);
  border-radius:var(--r-full);
  padding:3px;gap:2px;
}
.tp-tabs button{
  font-family:var(--sys);
  font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
  min-height:28px;padding-inline:var(--s3);
  border:none;border-radius:var(--r-full);
  color:var(--t2);
  transition:background-color var(--d-1) var(--ease-out),
             color var(--d-1) var(--ease-out);
}
.tp-tabs > button:first-child,.tp-tabs > button:last-child{border-radius:var(--r-full)}
@media(hover:hover) and (pointer:fine){
  .tp-tabs button:not(.on):hover{background:var(--surface-3);color:var(--t1)}
}

/* ── La fila de importes ────────────────────────────────────────────── */
.tpr-amts{
  gap:var(--s2);
  font-family:var(--sys);font-size:12px;color:var(--t3);
  margin-top:var(--s2);
}
.tpr-amts .lbl{
  margin-right:var(--s1);
  text-transform:none;letter-spacing:0;
  font-size:12px;color:var(--t3);
}
.tpr-amts button{
  font-family:var(--mono);          /* cifras: aqui la mono si dice algo */
  font-size:11.5px;
  min-height:28px;padding-inline:var(--s3);
  border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid transparent;
  color:var(--t2);
  transition:background-color var(--d-1) var(--ease-out),
             color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .tpr-amts button:not(.on):hover{background:var(--surface-3);color:var(--t1)}
}
/* "View all" no es un importe: es una salida. Se lee como enlace. */
.tpr-amts button[onclick]{
  background:none;border:none;color:var(--t2);
  font-family:var(--sys);font-size:12.5px;font-weight:600;
  padding-inline:var(--s2);
}
@media(hover:hover) and (pointer:fine){
  .tpr-amts button[onclick]:hover{background:none;color:var(--t1)}
}

/* ── La leyenda y el vacio ──────────────────────────────────────────── */
.tp-legend{gap:var(--s3) var(--s4);font-size:12px;font-family:var(--sys)}
.tp-legend-sym{font-weight:600;color:var(--t1)}
.tp-legend-pct{font-size:11.5px;font-family:var(--mono)}
.tp-empty{
  font-family:var(--sys);font-size:13.5px;color:var(--t3);
  letter-spacing:0;
}

/* ── La tabla de beneficios ─────────────────────────────────────────── */
.tpr-list{margin-top:var(--s3)}
.tpr-row{
  padding-block:var(--s2);
  font-size:11.5px;
  border-bottom:var(--bw) solid var(--hair);
}
.tpr-row.tpr-head{
  font-size:10.5px;letter-spacing:.08em;
  background:var(--surface-1);
  border-bottom-color:var(--edge);
}
.tpr-row.tpr-head:hover{background:var(--surface-1)}
@media(hover:hover) and (pointer:fine){
  .tpr-row:not(.tpr-head):hover{background:var(--surface-2)}
}

/* ═══ EL CARRIL DERECHO DE COMMUNITY ══════════════════════════════════
   Reddit tiene 316px a la derecha y no los desperdicia: dice de que se
   habla, por donde has pasado y que sitio es este. Nosotros teniamos ahi
   500px de negro.

   La columna de lectura NO se ensancha para llenarlos: 760px es la medida a
   la que se lee, y estirarla para tapar un hueco empeora justo lo que la
   gente viene a hacer.
   ═════════════════════════════════════════════════════════════════════ */
#fd-rail{display:none}

@media(min-width:1240px){
  body.en-comunidad .ct{
    display:flex;align-items:flex-start;
    gap:var(--s6);
  }
  body.en-comunidad #fd{flex:1 1 auto;min-width:0;max-width:var(--col)}
  body.en-comunidad #fd-rail{
    display:block;
    flex:0 0 316px;width:316px;
    /* Pegado: el carril es de referencia, y hay que poder mirarlo desde
       cualquier punto del hilo sin volver arriba. */
    position:sticky;
    top:calc(var(--chrome-h) + var(--s4));
    padding-block:var(--s6) var(--s9);
  }
}

.rl-card{
  background:var(--surface-1);
  border:var(--bw) solid var(--hair);
  border-radius:var(--r-lg);
  padding:var(--s3);
  margin-bottom:var(--s4);
}
.rl-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);
  padding:var(--s1) var(--s2) var(--s3);
}
.rl-head h3{
  margin:0;
  font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);
}
.rl-clear{
  background:none;border:none;padding:var(--s1) var(--s2);
  color:var(--t2);font-size:12.5px;font-weight:600;
  border-radius:var(--r-full);cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .rl-clear:hover{background:var(--surface-2);color:var(--t1)}
}

.rl-toks,.rl-recs,.rl-reglas{list-style:none;margin:0;padding:0}
.rl-toks button,.rl-recs button{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;text-align:left;
  padding:var(--s2);
  background:none;border:none;border-radius:var(--r-md);
  color:inherit;font:inherit;cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .rl-toks button:hover,.rl-recs button:hover{background:var(--surface-2)}
}
.rl-toks img,.rl-ph{
  width:32px;height:32px;flex:0 0 auto;
  border-radius:50%;object-fit:cover;
  background:var(--surface-2);
}
.rl-ph{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--t3);
}
.rl-toks b{
  flex:1 1 auto;min-width:0;
  font-size:13.5px;font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rl-toks span{
  flex:0 0 auto;
  font-size:12px;color:var(--t3);
  font-variant-numeric:tabular-nums;
}

/* Los recientes van en columna: el nombre manda y el texto lo acompana. */
.rl-recs button{flex-direction:column;align-items:flex-start;gap:2px}
.rl-recs b{font-size:12.5px;font-weight:600;color:var(--t2)}
.rl-recs span{
  font-size:13.5px;color:var(--t1);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

.rl-lede{
  margin:0 var(--s2) var(--s3);
  font-size:13.5px;line-height:1.5;color:var(--t2);
}
.rl-reglas li{
  position:relative;
  padding:var(--s2) var(--s2) var(--s2) var(--s5);
  font-size:12.5px;line-height:1.45;color:var(--t3);
}
.rl-reglas li::before{
  content:'';position:absolute;left:var(--s3);top:15px;
  width:4px;height:4px;border-radius:50%;background:var(--edge);
}

/* ═══ UNA SOLA MEDIDA PARA LOS CONTROLES ══════════════════════════════
   Medido en la fila de filtros del feed: CUATRO alturas distintas —40, 35,
   33 y 32— tres radios —999px, 12px y 0— y cuatro tamanos de letra —10,
   11, 13 y 15— en veinte centimetros de pantalla.

   Eso no se lee como una fila de controles, se lee como cinco componentes
   que acabaron juntos por accidente. El ojo pasa el rato midiendo en vez de
   eligiendo.

   Una altura, un radio, un tipo. Lo que distingue a un control de otro es
   lo que dice, no su forma.
   ═════════════════════════════════════════════════════════════════════ */
:root{ --ctrl-h:36px }

.toolbar{gap:var(--s2);align-items:center}

.toolbar .tbtn,
.toolbar .tbtn-solo,
.toolbar .flt,
.toolbar .fbox,
.toolbar .trend-grp{
  height:var(--ctrl-h);min-height:var(--ctrl-h);
  padding:0 var(--s3);
  border-radius:var(--r-full);
  font-family:var(--sys);
  font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
  display:inline-flex;align-items:center;gap:var(--s2);
  transition:background-color var(--d-1) var(--ease-out),
             color var(--d-1) var(--ease-out);
}
.toolbar .tbtn svg,.toolbar .flt svg,.toolbar .trend-grp svg{
  width:14px;height:14px;stroke-width:2.1;margin:0;vertical-align:middle;
}

/* ── El grupo de Trending ───────────────────────────────────────────── */
/* Era un rectangulo de 12px con botones cuadrados dentro: la unica forma
   distinta de toda la fila. Pasa a ser el mismo segmentado de las tarjetas
   —carril hundido, pastilla en relieve— y deja de llamar la atencion por
   la razon equivocada. */
.toolbar .trend-grp{
  padding:0 3px 0 var(--s3);
  background:var(--surface-2);
  border:1px solid transparent;
  gap:var(--s1);
}
.toolbar .trend-label{
  font-size:12.5px;font-weight:600;color:var(--t2);
  display:inline-flex;align-items:center;
  margin-right:var(--s1);
}
.toolbar .trend-tf{
  height:28px;min-height:28px;
  padding:0 var(--s3);
  border:none;border-radius:var(--r-full);
  background:none;color:var(--t2);
  font-family:var(--sys);font-size:12px;font-weight:600;
  letter-spacing:0;
  transition:background-color var(--d-1) var(--ease-out),
             color var(--d-1) var(--ease-out);
}
.toolbar .trend-tf:first-of-type,
.toolbar .trend-tf:last-of-type{border-radius:var(--r-full)}
@media(hover:hover) and (pointer:fine){
  .toolbar .trend-tf:not(.on):hover{background:var(--surface-3);color:var(--t1)}
}

/* ── Los desplegables ───────────────────────────────────────────────── */
/* Currency, Liquidity y Risk median 33px dentro de una caja de 35 o de 40,
   segun cual. Ahora la caja es el control y el select solo pone el valor. */
.toolbar .flt,.toolbar .fbox,.fgrp .flt,.fgrp .fbox{
  background:var(--surface-2);
  border:1px solid transparent;
  color:var(--t3);
  font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}
.toolbar select,.fgrp select{
  height:auto;min-height:0;padding:0;
  background:none;border:none;
  font-family:var(--sys);font-size:12.5px;font-weight:600;
  color:var(--t1);text-transform:none;letter-spacing:0;
}
.fgrp{display:flex;align-items:center;gap:var(--s2)}
.fgrp .flt,.fgrp .fbox{height:var(--ctrl-h);min-height:var(--ctrl-h);
  padding:0 var(--s3);border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:var(--s2)}

@media(hover:hover) and (pointer:fine){
  .toolbar .tbtn-solo:not(.on):hover,
  .toolbar .flt:hover,.fgrp .flt:hover{background:var(--surface-3);color:var(--t1)}
}
/* En tactil, el minimo de 44px manda sobre la medida de escritorio. */
@media(max-width:1023px){
  .toolbar .tbtn,.toolbar .tbtn-solo,.toolbar .flt,.toolbar .fbox,
  .toolbar .trend-grp,.fgrp .flt,.fgrp .fbox{
    height:var(--tap);min-height:var(--tap);
  }
}

/* ═══ EL RITMO VERTICAL ═══════════════════════════════════════════════
   Los huecos entre bloques eran 71, 12 y 12. Cada bloque traia su propio
   margen y nadie llevaba la cuenta.

   #view-feed ya es una columna flex, asi que el ritmo lo puede dar UN gap
   en vez de siete margenes sueltos: un solo numero que gobierna toda la
   pagina, y anadir una seccion no obliga a acordarse de nada.
   ═════════════════════════════════════════════════════════════════════ */
/* El ritmo va por GRUPOS, no por elementos. Repartir 24px entre todo era el
   error contrario al de antes: la barra de volumen, las cuatro cifras, los
   ordenes y los filtros no son cuatro bloques, son LOS MANDOS de la tabla que
   viene debajo. Separados miden lo mismo que una seccion entera y dejan de
   leerse juntos.

   Dentro del grupo, 8. Entre grupos, 16. Asi la pagina tiene tres piezas
   —tarjetas, mandos, tabla— y no siete cosas equidistantes. */
#view-feed{gap:var(--s2)}
#view-feed > *{margin-top:0;margin-bottom:0}
#view-feed > .tp-row{margin-bottom:var(--s2)}   /* 8 + 8 = 16 hasta los mandos */
#view-feed > .tbl{margin-top:var(--s2)}         /* 8 + 8 = 16 hasta la tabla */
.strip{margin:0}
.stats-bar{margin:0}
.toolbar{margin:0}

/* ── Arriba del todo ────────────────────────────────────────────────── */
/* El aviso llevaba 12 encima y 8 debajo: asimetrico y pegado a las tarjetas.
   Cabecera -> aviso -> tarjetas, los tres al mismo paso. */
.banner{margin-block:var(--s4) 0}
.ct{padding-top:var(--s4)}

/* ═══ QUE LOS FILTROS QUEPAN EN LA MISMA FILA ═════════════════════════
   Medido: la fila entera pedia 1663px y la mas ancha de las pantallas de
   escritorio le daba 1288. Sobraban 375, y 483 de ellos se los llevaban los
   tres desplegables de la derecha... la mitad solo en decir CURRENCY,
   LIQUIDITY y RISK en mayusculas espaciadas.

   Esas tres palabras son la etiqueta de un control cuyo VALOR ya se ve al
   lado. Se cambian por un icono —dolar, gota y escudo— y el nombre se queda
   en el title. Cuando el filtro esta puesto de verdad, el valor es
   explicito por si solo: ">$10K", "Danger". Es justo cuando importa.

   Y van con margin-left:auto, al final de la MISMA fila. Asi ocupan el
   hueco que sobra en vez de abrir una segunda linea, y si algun dia no cabe
   —una pantalla estrecha, un idioma mas largo— bajan solas, que para eso
   esta el wrap.
   ═════════════════════════════════════════════════════════════════════ */
/* Los tres, UNA sola pastilla con separadores. Sueltos pagaban tres veces el
   mismo peaje —relleno, borde y hueco— unos 160px solo en chrome. Juntos lo
   pagan una vez, y ademas se leen como lo que son: los tres filtros de la
   misma tabla, no tres botones que casualmente van seguidos. */
.fgrp{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:0;
  height:var(--ctrl-h);
  padding-inline:var(--s1);
  background:var(--surface-2);
  border-radius:var(--r-full);
}
.fgrp .flt,.fgrp .fbox{
  height:auto;min-height:0;
  background:none;border:none;border-radius:0;
  padding-inline:var(--s2);
  gap:6px;
  font-size:12.5px;font-weight:600;
  text-transform:none;letter-spacing:0;
  color:var(--t2);
}
.fgrp .flt + .flt{border-left:var(--bw) solid var(--hair)}
.fgrp .flt svg{
  width:14px;height:14px;flex:0 0 auto;
  stroke-width:2.1;color:var(--t3);
}
@media(hover:hover) and (pointer:fine){
  .fgrp .flt:hover{background:none;color:var(--t1)}
  .fgrp .flt:hover svg{color:var(--t2)}
}
/* Un <select> reserva el ancho de su opcion MAS LARGA, no el del valor que
   ensena: ">$100K" y "Warning" estaban pagando sitio todo el rato aunque
   pusiera "Any" y "All". Con medida fija paga el valor, no la lista. */
.fgrp select{padding-right:0;width:auto}
#f-cur{width:56px}
#f-liq{width:62px}
#f-risk{width:68px}

/* La etiqueta de Trending: sin el simbolo de ayuda, que ocupaba sitio para
   decir lo que el propio nombre ya dice. La explicacion vive en el title. */
.toolbar .trend-label{cursor:help}

@media(max-width:1023px){
  /* En movil la fila envuelve de todas formas, asi que los filtros vuelven a
     la izquierda: alineados a la derecha quedaban colgando solos. */
  .fgrp{margin-left:0}
}


/* El desplegable de tiempo tenia el mismo problema: reservaba "All time". */
#f-age{width:74px}
/* "Bonding Curve" era el boton mas ancho de la fila. El icono ya lo nombra y
   el title lo explica entero. */
.toolbar .tbtn-excl{gap:var(--s2)}

/* "Last" delante de "24 hours" no anadia nada: el reloj lo dice y el valor
   ya es una ventana de tiempo. El nombre completo vive en el title. */
.toolbar .fbox-accent svg{width:14px;height:14px;stroke-width:2.1;color:var(--t3)}
.toolbar{gap:6px}

/* ── Trending: sus tiempos, solo cuando manda ───────────────────────── */
/* Medido: el grupo ocupaba 291px, de los que 180 eran cuatro botones inertes
   mientras el orden activo fuera otro. Ensenar las sub-opciones del modo en
   el que NO estas es pagar sitio por algo que ahora mismo no hace nada.
   Apagado es un boton mas y la fila entera cabe en una linea. */
.toolbar .trend-grp{cursor:pointer;padding-inline:var(--s3)}
.toolbar .trend-grp:not(.on){background:var(--surface-2)}
.toolbar .trend-grp:not(.on) .trend-tf{display:none}
.toolbar .trend-grp.on{padding-inline:var(--s3) 3px}
.toolbar .trend-grp.on .trend-label{color:var(--t1)}
@media(hover:hover) and (pointer:fine){
  .toolbar .trend-grp:not(.on):hover{background:var(--surface-3)}
  .toolbar .trend-grp:not(.on):hover .trend-label{color:var(--t1)}
}

/* ═══ LA PAGINA DEL TOKEN ═════════════════════════════════════════════
   Medido al entrar en un token: 37 controles con OCHO alturas distintas
   (22, 26, 27, 32, 36, 39, 47 y 51), seis tamanos de letra, cuatro
   patrones de radio y dos tipografias mezcladas sin criterio —etiquetas
   en mono y numeros en sistema, o al reves, segun la zona.

   Cada zona la construyo alguien distinto un dia distinto, y se nota.

   El principio que ordena todo lo de abajo: en Reddit un post vive dentro
   de una comunidad. Aqui el token ES la comunidad: cabecera con avatar y
   nombre, la accion principal es HABLAR (Discuss), el chart es el post, los
   trades son el hilo en vivo, y la tarjeta derecha es el "About" de esa
   comunidad. Comprar esta ahi, pero no es lo primero que se ve.

   Y una regla de tipografia para toda la pagina: sistema para todo lo que
   se LEE (etiquetas, botones, titulos); mono solo para lo que se CUENTA
   (precios, importes, direcciones, celdas numericas). Es la diferencia
   entre una red social con datos y un terminal con adornos.
   ═════════════════════════════════════════════════════════════════════ */

/* ── La fila de arriba: volver y avisos ─────────────────────────────── */
/* "BACK TO FEED" en mono y mayusculas dentro de una pastilla era el boton
   mas ruidoso de la pagina para la accion mas humilde. Ahora es un enlace
   con flecha, como el "atras" de cualquier sitio que se lee. */
#view-detail .detail-top{gap:var(--s3);margin:0 0 var(--s4)}
#view-detail .back-btn{
  height:36px;padding:0 var(--s3) 0 var(--s2);
  background:none;border:none;
  font-family:var(--sys);font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
  color:var(--t2);border-radius:var(--r-full);
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  #view-detail .back-btn:hover{background:var(--surface-2);color:var(--t1)}
}
/* El aviso de dev/sniper/ballena: misma altura, misma pastilla, y el
   texto en sistema. Lo que va en mono es la cifra del cambio. */
#view-detail .dt-alert-bar,#view-detail .dt-dead-tag{
  height:36px;border-radius:var(--r-full);
  padding:0 var(--s4);
  font-family:var(--sys);font-size:12.5px;font-weight:500;
}
#view-detail .dt-alert-bar.dev,#view-detail .dt-alert-bar.sniper,#view-detail .dt-alert-bar.whale{
  background:var(--surface-2);border:var(--bw) solid var(--hair);
}
#view-detail .dt-alert-bar .da-chg{font-family:var(--mono);font-weight:600}
#view-detail .dt-alert-bar .da-time,#view-detail .dt-alert-bar .da-link{font-size:11.5px}

/* ── La cabecera: esto es una comunidad ─────────────────────────────── */
#view-detail .dt-head{margin:0 0 var(--s2);gap:var(--s4);align-items:flex-start}
#view-detail .detail-pair{
  height:auto;gap:var(--s3);
  font-family:var(--sys);font-size:20px;font-weight:700;
  letter-spacing:-.02em;color:var(--t1);
}
#view-detail .detail-pair img{width:40px;height:40px;border-radius:50%;flex:0 0 auto}
#view-detail .detail-pair .dp-chain{
  font-size:12.5px;font-weight:500;color:var(--t3);
  letter-spacing:0;margin-left:0;
}
#view-detail .dt-head-meta{gap:var(--s2)}
/* Los chips de la cabecera —creador, X, web, direccion— a una medida:
   32px, sistema, sin gritar. Iban a 27, 32 y 39 segun cual. */
#view-detail .dt-head .dt-chip,
#view-detail .dt-head-meta .dt-soc,
#view-detail .dt-head-actions .dt-chip{
  height:32px;min-height:32px;
  padding:0 var(--s3);
  font-family:var(--sys);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
  background:var(--surface-2);border:1px solid transparent;
  color:var(--t2);border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:6px;
}
#view-detail .dt-head .dt-chip svg,#view-detail .dt-head-meta .dt-soc svg{width:14px;height:14px;stroke-width:2.1}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-head .dt-chip:hover,#view-detail .dt-head-meta .dt-soc:hover{
    background:var(--surface-3);color:var(--t1);
  }
}
/* La direccion del contrato es un dato: esa si va en mono. */
#view-detail #dt-ca,#view-detail #dt-creator{font-family:var(--mono);font-size:11.5px}

/* La accion principal de la pagina es HABLAR del token. Es el "Join" de
   Reddit: blanca, y unica. Compartir y copiar pasan a iconos redondos. */
#view-detail .dt-head-actions{gap:var(--s2)}
#view-detail #dt-discuss{
  height:36px;min-height:36px;padding:0 var(--s4);
  background:var(--pri);color:var(--sobre-pri);border-color:transparent;
  font-size:13.5px;
}
#view-detail #dt-discuss svg{color:var(--sobre-pri)}
@media(hover:hover) and (pointer:fine){
  #view-detail #dt-discuss:hover{background:var(--pri-hov);color:var(--sobre-pri)}
}
#view-detail #dt-discuss:active{background:var(--pri-act)}
#view-detail #dt-share2,#view-detail .dt-head-actions .dt-fav{
  width:36px;height:36px;min-height:36px;padding:0;
  border-radius:50%;justify-content:center;
  background:var(--surface-2);border:1px solid transparent;color:var(--t2);
  display:inline-flex;align-items:center;cursor:pointer;
}
#view-detail #dt-share2 span,#view-detail #dt-share2 .lbl{display:none}
#view-detail #dt-share2 svg,#view-detail .dt-head-actions .dt-fav svg{width:17px;height:17px;stroke-width:2.1}
@media(hover:hover) and (pointer:fine){
  #view-detail #dt-share2:hover,#view-detail .dt-head-actions .dt-fav:hover{background:var(--surface-3);color:var(--t1)}
}

/* ── El precio ──────────────────────────────────────────────────────── */
/* La cifra en mono —es un numero— pero la etiqueta "24hr" en sistema. */
#view-detail .dt-head-price{margin:0 0 var(--s4);gap:var(--s3);font-family:var(--sys)}
#view-detail .dt-head-price b{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.01em}
#view-detail .dt-head-price #dt-hp-chg{font-family:var(--mono);font-size:13px;font-weight:600}
#view-detail .dt-athmini .athw{font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-detail .dt-athmini .athw b{font-family:var(--mono);color:var(--t2)}
#view-detail .athw .ath-fill{background:var(--t2)}   /* la barra de ATH no es una senal: es una medida */

/* ── El chart y su barra ────────────────────────────────────────────── */
#view-detail .dt-chartwrap{
  background:var(--surface-1);border:var(--bw) solid var(--hair);
  border-radius:var(--r-lg);overflow:hidden;
}
#view-detail .dt-chart-toolbar{padding:var(--s2) var(--s3);gap:var(--s2);border-bottom:var(--bw) solid var(--hair)}
/* Los tres grupos —Candles/Line, tiempos, Price/MCap— eran botones sueltos
   cuadrados con borde y el elegido en menta. Pasan a ser el segmentado de
   la casa: carril hundido, pastilla en relieve. El mismo de Top Performers,
   de la barra de filtros y de Trending. Un idioma. */
#view-detail .dt-tf-sel{
  display:inline-flex;align-items:center;gap:2px;
  height:36px;padding:3px;
  background:var(--surface-2);border-radius:var(--r-full);
}
#view-detail .dt-tf-sel button,
#view-detail .dt-tf-sel > button:first-child,
#view-detail .dt-tf-sel > button:last-child{
  height:28px;min-height:28px;padding:0 var(--s3);
  border:none;border-radius:var(--r-full);
  background:none;color:var(--t2);
  font-family:var(--sys);font-size:12.5px;font-weight:600;
  letter-spacing:0;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
/* Los tiempos son cifras: 1s, 15s, 1m. Esos si en mono, y algo mas cortos. */
#view-detail #dt-cf-tf button{font-family:var(--mono);font-size:11.5px;padding:0 var(--s2)}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-tf-sel button:not(.on):hover{background:var(--surface-3);color:var(--t1)}
}

/* ── Tus trades ─────────────────────────────────────────────────────── */
#view-detail .dt-pnl-wrap{
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
}
#view-detail .dt-pnl-hd{padding:var(--s3) var(--s4);background:none;border-bottom:var(--bw) solid var(--hair)}
#view-detail .dt-pnl-title{
  font-family:var(--sys);font-size:14px;font-weight:700;
  letter-spacing:-.01em;text-transform:none;color:var(--t1);
}
#view-detail .dt-pnl-cta-txt{font-family:var(--sys);font-size:13px;color:var(--t2);line-height:1.5}
#view-detail .dt-pnl-cta-btn,#view-detail .dt-wallet,#view-detail .ds-btn{
  height:40px;min-height:40px;padding:0 var(--s5);
  font-family:var(--sys);font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
  border-radius:var(--r-full);
}
#view-detail .dt-pnl-empty{font-family:var(--sys);font-size:13px}

/* ── El hilo de trades ──────────────────────────────────────────────── */
#view-detail .dt-txn-wrap{
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
  overflow:hidden;
}
#view-detail .dt-txn-hd{padding:var(--s2) var(--s3);gap:var(--s2);border-bottom:var(--bw) solid var(--hair)}
/* Dos segmentados: la VISTA (Trades / Top traders / Holders) y el FILTRO
   (All / Buys / Sells / Devs). Mismo componente que el chart; el de filtro
   un punto mas discreto porque es secundario. Iban a 51px y 36px con borde
   cuadrado y menta: eran lo mas grande y lo mas verde de toda la pagina
   para una fila de pestanas. */
#view-detail .dt-txn-tabs{
  display:inline-flex;align-items:center;gap:2px;
  height:36px;padding:3px;
  background:var(--surface-2);border-radius:var(--r-full);
}
#view-detail .dt-txn-tabs button{
  height:28px;min-height:28px;padding:0 var(--s3);
  border:none;border-radius:var(--r-full);
  background:none;color:var(--t2);
  font-family:var(--sys);font-size:12.5px;font-weight:600;
  letter-spacing:0;display:inline-flex;align-items:center;gap:6px;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
#view-detail .dt-txn-tabs button svg{width:14px;height:14px;stroke-width:2.1}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-txn-tabs button:not(.on):hover{background:var(--surface-3);color:var(--t1)}
}
/* La cabecera de la tabla: sistema, versalitas discretas, como en Top Profit. */
#view-detail .dt-txn-head{
  font-family:var(--sys);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:var(--t3);
  background:var(--surface-1);border-bottom:var(--bw) solid var(--edge);
}
#view-detail .dt-txn-row{border-bottom:var(--bw) solid var(--hair)}
#view-detail .dt-txn-empty{font-family:var(--sys);font-size:13px}

/* ── La tarjeta derecha: el "About" de la comunidad ─────────────────── */
#view-detail .dt-card{
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
}
#view-detail .dt-banner{height:104px}
#view-detail .dt-banner-grad{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,var(--surface-1) 100%)}
#view-detail .dt-id{padding:0 var(--s4);gap:var(--s3)}
#view-detail .dt-id-img{
  width:56px;height:56px;border-radius:50%;
  border:3px solid var(--surface-1);
  font-family:var(--sys);
}
#view-detail .dt-id-name{font-family:var(--sys);font-size:18px;letter-spacing:-.01em;color:var(--t1)}
#view-detail .dt-id-name .dt-id-pair{font-size:12.5px;color:var(--t3)}
#view-detail .dt-id-sub{font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-detail .dt-id-price>div:first-child{font-size:17px}
#view-detail .dt-socials{padding:var(--s3) var(--s4) 0;gap:6px}
#view-detail .dt-soc{
  height:28px;padding:0 var(--s3);
  font-family:var(--sys);font-size:12px;font-weight:600;
  background:var(--surface-2);border:1px solid transparent;
  color:var(--t2);border-radius:var(--r-full);
}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-soc:hover{background:var(--surface-3);color:var(--t1)}
}

/* Las rejillas de cifras —Liquidity/MktCap/Holders/Risk, y 5M/1H/6H/24H—
   con la etiqueta en sistema a 10.5 y la cifra en mono. Iban a 8.5px, que
   es tamano de letra pequena de contrato, no de pantalla. Y sin la rejilla
   de bordes de 1px: separan las celdas con AIRE, como el pie del menu. */
#view-detail .dt-keys,#view-detail .dt-tf,#view-detail .dt-info-grid{
  gap:var(--s1);background:transparent;border:none;
  margin:var(--s3) var(--s4) 0;
}
#view-detail .dt-key,#view-detail .dt-tf-box{
  background:var(--surface-2);border-radius:var(--r-md);
  padding:var(--s2) var(--s1);
}
#view-detail .dt-key-l,#view-detail .dt-tf-l,#view-detail .dt-ps-k,#view-detail .dt-bc-l{
  font-family:var(--sys);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;color:var(--t3);
}
#view-detail .dt-key-v{font-size:13px}
#view-detail .dt-tf-v{font-size:12.5px}
#view-detail .dt-tf-box.on{background:var(--sel);outline:none}
#view-detail .dt-tf-box.on .dt-tf-l{color:var(--t2)}
#view-detail .dt-press{margin:var(--s3) var(--s4) 0}
#view-detail .dt-press-row{font-family:var(--sys);font-size:12px}
/* Las barras compra/venta son datos: verde y rojo se quedan, pero apagados. */
#view-detail .dt-bar{background:var(--down)}
#view-detail .dt-bar-buy{background:var(--up)}

/* ── Comprar y vender ───────────────────────────────────────────────── */
#view-detail .dt-trade{
  margin:var(--s4) var(--s4) var(--s3);padding:var(--s3);
  background:var(--surface-2);border:none;border-radius:var(--r-lg);
}
/* Buy/Sell: el color se queda —es una senal de seguridad, que no se venda
   por error— pero como TEXTO sobre la pastilla elegida, no como losa de
   menta. Sobrio y todavia inconfundible. */
#view-detail .dt-bs{gap:2px;margin-bottom:var(--s3);padding:3px;background:var(--surface-3);border-radius:var(--r-full)}
#view-detail .dt-bs button{
  height:32px;padding:0;border:none;border-radius:var(--r-full);
  background:none;color:var(--t2);
  font-family:var(--sys);font-size:13px;font-weight:700;
  letter-spacing:0;text-transform:none;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
#view-detail .dt-bs button.buy.on{background:var(--sel);color:var(--up);border-color:transparent}
#view-detail .dt-bs button.sell.on{background:var(--sel);color:var(--down);border-color:transparent}
#view-detail .dt-ot{gap:var(--s4);font-family:var(--sys);font-size:12.5px;font-weight:600}
#view-detail .dt-ot span{text-transform:none;letter-spacing:0;padding-bottom:6px}
#view-detail .dt-ot span.on{color:var(--t1);border-color:var(--t1)}
#view-detail .dt-amt input{font-size:32px}
#view-detail .dt-amt>span{font-family:var(--sys);font-weight:600}
/* Los importes rapidos: pastillas de la casa con la cifra en mono. Iban en
   verde translucido, que era la unica menta que quedaba en la tarjeta. */
#view-detail .dt-presets{gap:var(--s1);margin-bottom:var(--s3)}
#view-detail .dt-presets button{
  height:32px;padding:0;
  background:var(--surface-3);border:1px solid transparent;
  color:var(--t2);border-radius:var(--r-full);
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-presets button:hover{background:var(--sel);color:var(--t1)}
}
#view-detail .dt-presets button.sell-pct-btn,#view-detail .dt-presets button.sell-all{
  background:var(--surface-3);color:var(--down);border-color:transparent;
}
#view-detail .dt-wallet{width:100%}
#view-detail .dt-trade-note{
  font-family:var(--sys);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--t3);
}
#view-detail .dt-settings-btn{
  width:28px;height:28px;border-radius:50%;border:none;
  background:var(--surface-3);color:var(--t3);
}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-settings-btn:hover{background:var(--sel);color:var(--t1);border-color:transparent}
}
#view-detail .dt-swap-panel{background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-md)}
#view-detail .tx-status{font-family:var(--sys);font-size:12.5px;border-radius:var(--r-md)}

/* ── Audit y ficha ──────────────────────────────────────────────────── */
/* El encabezado de seccion con el mismo idioma que los grupos del menu. */
#view-detail .dt-sec-hd{
  font-family:var(--sys);font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--t3);
  margin:var(--s4) var(--s4) var(--s2);padding-top:var(--s4);
  border-top:var(--bw) solid var(--hair);
}
#view-detail .dt-sec-hd svg{width:14px;height:14px;stroke-width:2.1}
#view-detail .dt-info-grid > *{background:var(--surface-2);border-radius:var(--r-md)}
#view-detail .ds-info{margin:var(--s2) var(--s4) 0;padding:0}
#view-detail .ds-info-row{font-family:var(--sys);font-size:12.5px;padding:var(--s2) 0;border-bottom:var(--bw) solid var(--hair)}
#view-detail .ds-info-row:last-child{border-bottom:none}
#view-detail .ds-info-row span:first-child{color:var(--t3)}
#view-detail .ds-info-row span:last-child{font-weight:600;color:var(--t1)}

/* ── Reacciones: el voto de la comunidad ────────────────────────────── */
/* Son la fila de acciones de un post de Reddit —pastillas, contador,
   estado relieve—. La menta se va: lo que dice "has votado" es la pastilla
   marcada, no el color. */
#view-detail .rx-row{margin:var(--s4) var(--s4) 0;gap:var(--s2)}
#view-detail .rx-btn{
  height:36px;min-height:36px;padding:0 var(--s3);
  background:var(--surface-2);border:1px solid transparent;
  border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:6px;
  transition:background-color var(--d-1) var(--ease-out),transform var(--d-1) var(--ease-out);
}
#view-detail .rx-emoji{font-size:15px}
#view-detail .rx-count{font-family:var(--mono);font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){
  #view-detail .rx-btn:hover{background:var(--surface-3);border-color:transparent}
}
#view-detail .rx-btn.on{background:var(--sel);border-color:transparent}
#view-detail .rx-btn.on .rx-count{color:var(--t1)}

/* Los comentarios que inyecta community.js: mismo ancho que la tarjeta,
   texto en sistema, y su boton de enviar pasa a ser blanco como toda accion
   principal de la casa. */
#view-detail #cm-comments{margin:var(--s3) var(--s4) 0;max-width:none;font-family:var(--sys);font-size:13px}
#view-detail #cm-cbox input{font-family:var(--sys);border-radius:var(--r-full)}
#view-detail #cm-cbox button{
  background:var(--pri);color:var(--sobre-pri);
  border-radius:var(--r-full);font-family:var(--sys);font-weight:600;
}
#view-detail .dt-acts{padding:var(--s3) var(--s4) var(--s4)}

/* ── Movil: la barra flotante ───────────────────────────────────────── */
/* Buy y Sell eran dos losas —menta y rojo— en mono y mayusculas. El color
   se queda como texto, que es donde sirve de senal; la losa no. */
#view-detail .dt-fab button{
  font-family:var(--sys);font-size:14px;font-weight:700;
  letter-spacing:0;text-transform:none;
  border-radius:var(--r-full);height:48px;padding:0;
}
#view-detail .dt-fab .fab-buy{background:var(--pri);color:var(--sobre-pri)}
#view-detail .dt-fab .fab-sell{background:var(--surface-2);color:var(--down)}
#view-detail .dt-fab .fab-pnl{background:var(--surface-2);color:var(--t2);font-size:11.5px;letter-spacing:0}

/* Tres controles reportaban el tamano por defecto del navegador (13.33px)
   o el heredado del cuerpo (15px) porque nadie se lo habia puesto: el
   tamano lo pone la casa, no el user-agent. */
#view-detail .rx-btn{font-size:12px;cursor:pointer}
#view-detail .dt-settings-btn{font-size:12px}
#view-detail .dt-settings-btn svg{width:14px;height:14px}
#view-detail .dt-head-actions .dt-fav{font-size:12px;cursor:pointer}

/* El Share del pie de la tarjeta era el CUARTO boton blanco de la pantalla.
   Compartir ya vive como icono en la cabecera; aqui, con Discuss arriba y
   Connect en medio, un blanco mas no destaca nada: los reparte. Baja a
   secundario y la accion principal de la pagina vuelve a ser una. */
#view-detail .dt-acts .ds-btn{
  background:var(--surface-2);color:var(--t1);border:1px solid transparent;
}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-acts .ds-btn:hover{background:var(--surface-3);color:var(--t1)}
}
#view-detail .dt-acts .ds-btn:active{background:var(--sel)}

/* ═══ COMMUNITY, CON LA MISMA REJILLA QUE EL TOKEN ════════════════════
   Las dos paginas son la misma cosa: menu a la izquierda, contenido en
   medio, ficha a la derecha. Pero estaban maquetadas por separado y se
   notaba en la regla: el token va en rejilla `1fr 416px` con 12px de hueco
   y la tarjeta pegada al borde; Community iba en flex con 32px de hueco,
   el contenido capado a 760 y el carril a 316. Medido a 1790px: 402px
   muertos a la derecha del carril.

   Ahora comparten la rejilla, el hueco y el ancho de la columna derecha.
   Lo que cambia entre una y otra es lo que hay DENTRO de las columnas,
   no donde caen.
   ═════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
  body.en-comunidad .ct{
    display:grid;
    grid-template-columns:minmax(0,1fr) 416px;   /* la del token */
    gap:12px;                                    /* la del token */
    align-items:start;
  }
  body.en-comunidad #fd{max-width:none;min-width:0;flex:none}
  body.en-comunidad #fd-rail{
    display:block;width:auto;flex:none;
    /* Su borde superior alinea con el titulo del feed, como la tarjeta del
       token alinea con la cabecera del token. El padding de arriba es el
       mismo que separa el titulo del borde del contenido. */
    padding-block:var(--s6) var(--s9);   /* 32: lo que hay del borde al titulo */
  }
}
/* Por debajo de 1024 el token apila sus columnas; Community hace lo mismo.
   Antes el carril desaparecia a 1240 y la ficha del token a 1024: dos
   cortes distintos para la misma decision. */
@media(max-width:767px){
  body.en-comunidad #fd-rail{display:none}
}

/* Las tarjetas del carril con el relleno de la tarjeta del token (16px
   por dentro) y su mismo hueco entre bloques (12px). Iban a 12 y 16, es
   decir, justo al reves. */
.rl-card{padding:var(--s4);margin-bottom:var(--s3)}
.rl-head{padding:0 0 var(--s3)}

/* ── El ritmo dentro de la columna, el del token ────────────────────── */
/* El token separa sus bloques a 12 y su cabecera del primer bloque a 16.
   El feed iba a 24 entre intro, compositor y ordenes. Se igualan; los
   posts entre si siguen a 24 porque son una LISTA con separador, no
   bloques de una ficha, y ahi la holgura es la lectura. */
@media(min-width:768px){
  body.en-comunidad #fd .lede{margin-bottom:var(--s4)}
  body.en-comunidad #fd .fd-comp{margin-bottom:var(--s3)}
  body.en-comunidad #fd .fd-sorts{margin-bottom:var(--s3)}
}

/* La tarjeta del token dentro de un post se queda a 760 y a la izquierda.
   La columna ahora mide 1050 y la tarjeta es una imagen de 1200x630: a
   todo el ancho serian 550px de alto POR POST, una pancarta detras de
   otra. La rejilla es la del token; lo que mide un medio dentro de un post
   es otra decision, y Reddit la toma igual: columna ancha, imagen capada.
   Si se prefiere a todo el ancho, es esta regla y nada mas. */
body.en-comunidad #fd .fd-card{max-width:var(--col);margin-inline:0}

/* ═══ DOS NIVELES DE SUPERFICIE, EN TODAS PARTES ══════════════════════
   Medido en las dos paginas: los contenedores grandes ya usan el mismo
   token (surface-1 sobre el fondo, borde hair). Lo que hacia que el token
   PARECIERA mas claro era la profundidad: su tarjeta apilaba tres niveles
   —tarjeta surface-1, dentro la caja de compra en surface-2, y dentro de
   esa el carril Buy/Sell y los importes en surface-3— mientras Community
   usa dos: fondo y tarjeta.

   La regla, para toda la casa: fondo -> contenedor (surface-1) ->
   control o celda (surface-2). surface-3 solo existe como hover. Ningun
   sitio apila un tercer relieve.
   ═════════════════════════════════════════════════════════════════════ */
/* La caja de compra deja de ser una caja: es una seccion de la tarjeta,
   separada por la misma linea que separa Audit. Sus controles quedan en
   surface-2 directamente sobre la tarjeta, como los chips de al lado. */
#view-detail .dt-trade{
  background:none;border:none;border-radius:0;
  margin:var(--s4) var(--s4) 0;padding:var(--s4) 0 0;
  border-top:var(--bw) solid var(--hair);
}
#view-detail .dt-bs{background:var(--surface-2)}
#view-detail .dt-bs button.buy.on,#view-detail .dt-bs button.sell.on{background:var(--sel)}
#view-detail .dt-presets button{background:var(--surface-2)}
#view-detail .dt-presets button.sell-pct-btn,#view-detail .dt-presets button.sell-all{background:var(--surface-2)}
#view-detail .dt-settings-btn{background:var(--surface-2)}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-presets button:hover{background:var(--surface-3);color:var(--t1)}
  #view-detail .dt-settings-btn:hover{background:var(--surface-3)}
}
/* El panel de ajustes del swap se abre DENTRO de la seccion: mismo nivel
   que una celda, no un contenedor dentro de un contenedor. */
#view-detail .dt-swap-panel{background:var(--surface-2);border:none}

/* ── Reacciones: emoji y numero en la misma linea ───────────────────── */
/* La regla vieja las ponia en COLUMNA: el emoji arriba pegado al borde y
   el contador abajo sobresaliendo 2px del boton. Medido: 22px de desfase
   vertical entre los dos dentro de un boton de 36. Eso es lo que se veia
   como que "chocaban". En fila, centrados, con aire. */
#view-detail .rx-btn{
  flex-direction:row;align-items:center;justify-content:center;
  line-height:1;min-width:64px;
}
#view-detail .rx-emoji{display:inline-block;line-height:1;transform:translateY(-.5px)}
#view-detail .rx-count{display:inline-block;line-height:1}
/* Y la fila respira igual por arriba que por abajo. */
#view-detail .rx-row{margin:var(--s4) var(--s4) var(--s2)}

/* ═══ ACTIVIDAD Y NOTIFICACIONES ══════════════════════════════════════
   Ninguna accion se convierte en post. Las acciones se AGREGAN en el carril
   ("14 reaccionaron 🚀 a $HIPPONS en la ultima hora") o se NOTIFICAN a
   quien le tocan (te siguen). El post sigue siendo un acto deliberado.
   ═════════════════════════════════════════════════════════════════════ */

/* ── La tarjeta "Last hour" del carril ──────────────────────────────── */
.rl-act{list-style:none;margin:0;padding:0}
.rl-act li{margin:0}
.rl-act button,.rl-linea{
  display:flex;align-items:center;gap:var(--s2);
  width:100%;text-align:left;
  padding:var(--s2);
  background:none;border:none;border-radius:var(--r-md);
  color:inherit;font:inherit;cursor:default;
}
.rl-act button{cursor:pointer;transition:background-color var(--d-1) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .rl-act button:hover{background:var(--surface-2)}
}
.rl-em{width:24px;text-align:center;font-size:15px;line-height:1;flex:0 0 auto}
.rl-act b{
  font-family:var(--mono);font-size:13.5px;font-weight:700;
  color:var(--t1);font-variant-numeric:tabular-nums;min-width:2ch;
}
.rl-que{font-size:13px;color:var(--t2)}

/* ── La linea de actividad bajo las reacciones del token ────────────── */
#view-detail .rx-actividad{
  margin:var(--s4) var(--s4) 0;
  font-family:var(--sys);font-size:12.5px;color:var(--t3);
}
#view-detail .rx-actividad + .rx-row{margin-top:var(--s2)}

/* ── La campana ─────────────────────────────────────────────────────── */
.hd-noti{
  position:relative;
  width:38px;height:38px;flex:0 0 auto;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;
  background:none;color:var(--t2);cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
.hd-noti svg{width:20px;height:20px;stroke-width:2.1}
@media(hover:hover) and (pointer:fine){
  .hd-noti:hover{background:var(--surface-2);color:var(--t1)}
}
/* El contador: rojo como el de Reddit —es lo unico de la cabecera que puede
   ir en un color vivo, porque significa "hay algo para ti" y nada mas lo
   dice. */
.hd-noti-n{
  position:absolute;top:2px;right:0;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);
  background:#E5484D;color:#fff;
  font-family:var(--sys);font-size:10.5px;font-weight:700;line-height:16px;
  text-align:center;
  border:2px solid var(--bg);box-sizing:content-box;
}

/* ── La lista, dentro de la hoja ────────────────────────────────────── */
.nt-lista{list-style:none;margin:0;padding:0}
.nt-item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:48px;padding:var(--s2) var(--s2);
  border-bottom:var(--bw) solid var(--hair);
  font-size:13.5px;color:var(--t2);cursor:pointer;border-radius:var(--r-md);
}
.nt-item.nueva{color:var(--t1)}
.nt-item.nueva::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);margin-right:2px;
}
.nt-ago{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.nt-vacio{padding:var(--s6) var(--s3);text-align:center;color:var(--t3);font-size:13.5px;line-height:1.5}
@media(hover:hover) and (pointer:fine){
  .nt-item:hover{background:var(--surface-2)}
}

/* ═══ EL PERFIL ══════════════════════════════════════════════════════
   /profile/:wallet seguia en el idioma viejo: mono en todo, etiquetas en
   mayusculas de 9px, losas grises sin borde ni radio, verde en "See all"
   y en el boton de seguir. La misma rejilla que el token (1fr · 416) ya
   estaba; lo que cambia es que cada pieza se lea como en el token y en
   Community: sistema para lo que se lee, mono para lo que se cuenta,
   dos niveles de superficie y un solo primario blanco por bloque. */
#view-profile .detail-top{margin:0 0 var(--s4)}
#view-profile .back-btn{
  height:36px;padding:0 var(--s3) 0 var(--s2);border-radius:var(--r-full);
  background:none;border:none;color:var(--t2);
  font-family:var(--sys);font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
}
@media(hover:hover) and (pointer:fine){
  #view-profile .back-btn:hover{background:var(--surface-2);color:var(--t1)}
}
/* La columna principal es una tarjeta, como la cabecera del token. */
#view-profile .pf-main{
  background:var(--surface-1);border:var(--bw) solid var(--hair);
  border-radius:var(--r-lg);padding:var(--s4);min-width:0;
}
#view-profile .pf-head{gap:var(--s4);margin:0 0 var(--s4);align-items:center}
#view-profile .pf-avatar{width:64px;height:64px;background:var(--surface-2)}
#view-profile .pf-name{
  font-family:var(--sys);font-size:22px;font-weight:700;
  letter-spacing:-.01em;color:var(--t1);
}
#view-profile .pf-follcnt{font-family:var(--sys);font-size:13px;color:var(--t2);margin-top:2px}
#view-profile .pf-follcnt b{
  font-family:var(--mono);font-weight:700;color:var(--t1);
  font-variant-numeric:tabular-nums;
}
#view-profile .pf-sub{gap:var(--s2);margin-top:var(--s2)}
/* Los chips —copiar, Solscan, X, Instagram— a la medida de los del token. */
#view-profile .dt-chip{
  height:32px;min-height:32px;padding:0 var(--s3);
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-full);
  color:var(--t2);font-family:var(--sys);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
#view-profile .dt-chip svg{width:14px;height:14px;stroke-width:2.1}
@media(hover:hover) and (pointer:fine){
  #view-profile .dt-chip:hover{background:var(--surface-3);color:var(--t1)}
}
#view-profile .dev-tag{
  height:22px;padding:0 var(--s2);display:inline-flex;align-items:center;
  background:var(--sel);color:var(--sobre-sel);border-radius:var(--r-full)!important;
  font-family:var(--sys);font-size:11.5px;font-weight:600;
  letter-spacing:0;text-transform:capitalize;
}
/* Un primario por bloque: Follow en el perfil ajeno, Edit profile en el tuyo. */
#view-profile .pf-actions{gap:var(--s2)}
#view-profile .pf-actions .dt-chip{height:36px;min-height:36px;padding:0 var(--s4);font-size:13px}
#view-profile .pf-follow,#view-profile #pf-edit{
  height:36px;min-height:36px;padding:0 var(--s4);
  background:var(--pri);color:var(--sobre-pri);border:1px solid transparent;
  border-radius:var(--r-full);cursor:pointer;
  font-family:var(--sys);font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:background-color var(--d-1) var(--ease-out),transform 160ms var(--ease-out);
}
#view-profile .pf-follow:hover,#view-profile #pf-edit:hover{background:var(--pri-hov);color:var(--sobre-pri)}
#view-profile .pf-follow:active,#view-profile #pf-edit:active{background:var(--pri-act);transform:scale(.97)}
#view-profile .pf-follow.is-following{background:var(--surface-2);color:var(--t2)}
#view-profile .pf-follow.is-following:hover{background:var(--surface-3);color:var(--t1)}
#view-profile .pf-bio{
  font-family:var(--sys);font-size:14px;line-height:1.5;color:var(--t2);
  margin:0 0 var(--s4);max-width:var(--col);
}
/* Las pestañas: pastillas como el orden de Community (Hot · New · Top). */
#view-profile .pf-tabs{gap:var(--s1);margin:0 0 var(--s4);padding:0}
#view-profile .pf-tabs button{
  height:36px;padding:0 var(--s3);border-radius:var(--r-full);
  background:none;color:var(--t2);
  font-family:var(--sys);font-size:13px;font-weight:600;gap:6px;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  #view-profile .pf-tabs button:hover{background:var(--surface-2);color:var(--t1)}
}
#view-profile .pf-tabs button.on{background:var(--sel);color:var(--sobre-sel)}
#view-profile .pf-tabs button b{
  height:18px;padding:0 6px;display:inline-flex;align-items:center;
  background:var(--surface-3);color:var(--t2);border-radius:var(--r-full);
  font-family:var(--mono);font-size:11px;font-weight:700;
}
#view-profile .pf-tabs button.on b{background:rgba(255,255,255,.14);color:var(--sobre-sel)}
/* Cifras: etiqueta en sistema y sin gritar, valor en mono porque se cuenta. */
#view-profile .pf-stats{gap:var(--s2);margin:0 0 var(--s4)}
#view-profile .pf-stat{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s3)}
#view-profile .pf-l{
  font-family:var(--sys);font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--t3);margin-bottom:var(--s1);
}
#view-profile .pf-v{
  font-family:var(--mono);font-size:20px;font-weight:700;color:var(--t1);
  font-variant-numeric:tabular-nums;
}
#view-profile .pf-s{font-family:var(--mono);font-size:12px;color:var(--t3);margin-top:var(--s1)}
#view-profile .dt-sec-hd{
  font-family:var(--sys);font-size:14px;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--t1);
  margin:var(--s4) 0 var(--s1);padding-top:var(--s4);border-top:var(--bw) solid var(--hair);
}
#view-profile .pf-side-sub{font-family:var(--sys);font-size:12.5px;color:var(--t3);margin:0 0 var(--s3)}
/* Las tablas: nombre en sistema, cifras en mono, cabecera sin mayusculas. */
#view-profile .pf-coins{font-family:var(--sys);font-size:13px}
#view-profile .pf-brow,#view-profile .pf-row,#view-profile .pf-arow,#view-profile .pf-frow{
  color:var(--t2);border-radius:var(--r-md);padding:0 var(--s2);
}
#view-profile .pf-brow{height:56px}
#view-profile .pf-frow{height:52px}
@media(hover:hover) and (pointer:fine){
  #view-profile .pf-row:hover,#view-profile .pf-arow:hover,#view-profile .pf-frow:hover{background:var(--surface-2)}
  #view-profile .pf-row.pf-hd:hover,#view-profile .pf-arow.pf-hd:hover{background:none}
}
#view-profile .pf-brow .ar,#view-profile .pf-row .ar,#view-profile .pf-arow .ar{
  font-family:var(--mono);font-size:13px;color:var(--t1);font-variant-numeric:tabular-nums;
}
#view-profile .pf-brow.pf-hd,#view-profile .pf-row.pf-hd,#view-profile .pf-arow.pf-hd{
  height:28px;font-family:var(--sys);font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--t3);
}
#view-profile .pf-hd .ar{font-family:var(--sys);font-size:12px;font-weight:500;color:var(--t3)}
#view-profile .pf-tok img{width:36px;height:36px;background:var(--surface-2)}
#view-profile .pf-brow .pf-tok img{width:40px;height:40px}
#view-profile .pf-tok .sym,#view-profile .pf-btok .sym{font-family:var(--sys);font-size:14px;font-weight:600;color:var(--t1)}
#view-profile .pf-tok .nm,#view-profile .pf-btok .nm{font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-profile .pf-bsub{font-family:var(--mono);font-size:11.5px;color:var(--t3);margin-top:2px}
#view-profile .pf-act-b{
  height:22px;padding:0 var(--s2);display:inline-flex;align-items:center;
  border-radius:var(--r-full);font-family:var(--sys);font-size:12px;font-weight:600;
}
#view-profile .pf-frow img{width:36px;height:36px;background:var(--surface-2)}
#view-profile .pf-frow .sym{font-family:var(--sys);font-size:14px;font-weight:600;color:var(--t1)}
#view-profile .pf-note,#view-profile .dt-txn-empty{
  font-family:var(--sys);font-size:13px;color:var(--t3);padding:var(--s4) 0;text-align:left;
}
/* La columna derecha: tarjetas como las del carril de Community. */
#view-profile .pf-rightcol{gap:var(--s3)}
#view-profile .pf-side{
  background:var(--surface-1);border:var(--bw) solid var(--hair);
  border-radius:var(--r-lg);padding:var(--s4);
}
#view-profile .pf-side-hd{font-family:var(--sys);font-size:14px;font-weight:700;color:var(--t1);gap:var(--s2)}
#view-profile .pf-side-hd b{
  height:18px;padding:0 6px;display:inline-flex;align-items:center;
  background:var(--surface-3);color:var(--t2);border-radius:var(--r-full);
  font-family:var(--mono);font-size:11px;font-weight:700;
}
#view-profile .pf-side-hd a{color:var(--t2);font-family:var(--sys);font-size:12.5px;font-weight:600}
#view-profile .pf-side-hd a:hover{color:var(--t1);text-decoration:underline}
#view-profile .pf-side .pf-side-sub{margin:var(--s1) 0 var(--s2)}
#view-profile .pf-side-row{
  gap:var(--s3);padding:var(--s2);margin:0 calc(-1 * var(--s2));border-radius:var(--r-md);
}
@media(hover:hover) and (pointer:fine){
  #view-profile .pf-side-row:hover{opacity:1;background:var(--surface-2)}
}
#view-profile .pf-side-row img{width:36px;height:36px;background:var(--surface-2)}
#view-profile .pf-side-name{font-family:var(--sys);font-size:13.5px;font-weight:600;color:var(--t1)}
#view-profile .pf-side-sym{font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-profile .pf-side-r{font-family:var(--mono);font-variant-numeric:tabular-nums}
#view-profile .pf-side-mc{font-size:13px;font-weight:700;color:var(--t1)}
#view-profile .pf-side-age{font-size:11.5px;color:var(--t3)}
/* Transferir: mismo campo de importe que el tradeador, mismo primario. */
#view-profile .pf-tr-name{color:var(--t1)}
#view-profile .pf-tr-tokbtn{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s2) var(--s3);
  color:var(--t1);font-family:var(--sys);font-size:13px;
}
#view-profile .pf-tr-tokbtn:hover{background:var(--surface-3)}
#view-profile .pf-tr-tokbtn img{width:28px;height:28px}
#view-profile .pf-tr-list{
  background:var(--surface-2);border:var(--bw) solid var(--hair);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,.5);padding:var(--s1);
}
#view-profile .pf-tr-item{border-radius:var(--r-md);font-family:var(--sys);font-size:13px}
#view-profile .pf-tr-item:hover{background:var(--surface-3)}
#view-profile .pf-tr-item .bal{font-size:12px}
#view-profile .pf-tr-amt{
  background:var(--surface-2);border-radius:var(--r-md);margin:var(--s3) 0 var(--s2);
  padding:var(--s2) 56px var(--s2) var(--s3);min-height:56px;
}
#view-profile .pf-tr-amt input{font-size:26px}
#view-profile .pf-tr-denom{right:var(--s3);font-family:var(--sys);font-size:12.5px;font-weight:600;color:var(--t3)}
#view-profile .pf-tr-bal{font-family:var(--sys);font-size:12.5px;color:var(--t3);margin-bottom:var(--s3)}
#view-profile .pf-tr-bal b{font-family:var(--mono);color:var(--t2)}
#view-profile .pf-tr-max{
  height:24px;padding:0 var(--s2);border-radius:var(--r-full);
  background:var(--surface-3);color:var(--t2);
  font-family:var(--sys);font-size:11.5px;font-weight:600;letter-spacing:0;
}
#view-profile .pf-tr-max:hover{background:var(--sel);color:var(--sobre-sel)}
#view-profile .pf-tr-btn{width:100%;height:40px;min-height:40px;justify-content:center}
#view-profile .pf-tr-msg{font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-profile .pf-tr-msg a{color:var(--t1);text-decoration:underline}
@media(max-width:1023px){
  #view-profile .pf-main{padding:var(--s3)}
  #view-profile .pf-rightcol{margin-top:var(--s3)}
}
/* El modal de editar perfil, que es a donde lleva "Edit profile". */
.wm-card.pfe-card{
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.pfe-card .dp-title{
  font-family:var(--sys);font-size:18px;font-weight:700;color:var(--t1);
  margin:0 0 2px;letter-spacing:0;text-transform:none;
}
.pfe-card .dp-sub{font-family:var(--sys);font-size:13px;color:var(--t3);margin:0}
.pfe-card .pfe-l{
  font-family:var(--sys);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--t2);margin-top:var(--s3);
}
.pfe-card .pfe-body input,.pfe-card .pfe-body textarea{
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-md);
  color:var(--t1);font-family:var(--sys);font-size:14px;padding:10px 12px;
}
.pfe-card .pfe-body input:focus,.pfe-card .pfe-body textarea:focus{
  outline:none;border-color:var(--edge);background:var(--surface-3);
}
.pfe-card .pfe-cam{background:var(--pri);color:var(--sobre-pri)}
.pfe-card .pf-follow{
  height:36px;padding:0 var(--s4);background:var(--pri);color:var(--sobre-pri);
  border:none;border-radius:var(--r-full);
  font-family:var(--sys);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;
}
.pfe-card .pf-follow:hover{background:var(--pri-hov)}
.pfe-card .pf-edit-msg{font-family:var(--sys);font-size:12.5px}
.pfe-card .wm-close{
  width:32px;height:32px;border-radius:50%;background:var(--surface-2);color:var(--t2);
  font-size:14px;display:flex;align-items:center;justify-content:center;
}
.pfe-card .wm-close:hover{background:var(--surface-3);color:var(--t1)}

/* ═══ COMPRAR Y VENDER, SEGUNDA PASADA ═══════════════════════════════
   Quedaba: Buy en verde dentro del segmentado, Market/Limit con subrayado,
   el importe flotando sin campo, el boton grande en menta y mayusculas, el
   panel de ajustes con insignias verdes, y Auto-Trade en una caja negra
   de esquinas vivas con un interruptor cuadrado. Todo al mismo idioma:
   pastillas, campos con superficie, un primario blanco. */
#view-detail .dt-bs button.buy.on,#view-detail .dt-bs button.sell.on{color:var(--sobre-sel)}
#view-detail .dt-ot{gap:var(--s1);margin-bottom:var(--s3);padding:0}
#view-detail .dt-ot span{
  height:32px;padding:0 var(--s3);border:none;border-radius:var(--r-full);
  display:inline-flex;align-items:center;
  color:var(--t2);font-family:var(--sys);font-size:12.5px;font-weight:600;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  #view-detail .dt-ot span:hover{background:var(--surface-3);color:var(--t1)}
}
#view-detail .dt-ot span.on{background:var(--sel);color:var(--sobre-sel);border-color:transparent}
/* El importe es un campo: se ve donde se escribe. */
#view-detail .dt-amt{
  background:var(--surface-3);border-radius:var(--r-md);
  padding:var(--s2) 56px var(--s2) var(--s3);margin-bottom:var(--s1);min-height:56px;
}
#view-detail .dt-amt input{font-size:26px;font-weight:700}
#view-detail .dt-amt>span{right:var(--s3);top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--t3)}
#view-detail .dt-conv{font-family:var(--mono);font-size:11.5px;margin:var(--s1) 0 var(--s3)}
/* El boton grande, como "Discuss on feed": blanco, sistema, pastilla. */
#view-detail .dt-wallet{
  height:40px;min-height:40px;padding:0 var(--s4);
  background:var(--pri);color:var(--sobre-pri);border:none;border-radius:var(--r-full);
  font-family:var(--sys);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color var(--d-1) var(--ease-out),transform 160ms var(--ease-out);
}
#view-detail .dt-wallet:hover{background:var(--pri-hov);opacity:1}
#view-detail .dt-wallet:active{background:var(--pri-act);transform:scale(.98)}
#view-detail .dt-wallet:disabled{opacity:.5}
/* Ajustes del swap. */
#view-detail .dt-swap-panel{padding:var(--s3)}
#view-detail .ss-mode-row{gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--r-full);margin-bottom:var(--s3)}
#view-detail .ss-mode{
  height:30px;padding:0;border:none;border-radius:var(--r-full);
  background:none;color:var(--t2);font-family:var(--sys);font-size:12.5px;font-weight:600;
}
#view-detail .ss-mode.on{background:var(--sel);color:var(--sobre-sel);border-color:transparent}
#view-detail .ss-info{gap:var(--s1);margin-bottom:var(--s2)}
#view-detail .ss-badge,#view-detail .ss-badge-g{
  height:24px;padding:0 var(--s2);display:inline-flex;align-items:center;
  background:var(--surface-2);color:var(--t2);border-color:transparent;border-radius:var(--r-full);
  font-family:var(--sys);font-size:11.5px;font-weight:500;letter-spacing:0;
}
#view-detail .ss-row label{
  font-family:var(--sys);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--t2);margin-bottom:var(--s1);
}
#view-detail .ss-chips{gap:var(--s1)}
#view-detail .ss-chip{
  height:30px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--t2);font-family:var(--mono);font-size:12px;font-weight:600;
}
#view-detail .ss-chip:hover:not(.on){background:var(--surface-3);color:var(--t1);border-color:transparent}
#view-detail .ss-chip.on{background:var(--sel);color:var(--sobre-sel);border-color:transparent}
#view-detail .ss-input{
  height:36px;width:120px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-md);
  background:var(--surface-2);color:var(--t1);font-family:var(--mono);font-size:13px;
}
#view-detail .ss-input:focus{border-color:var(--edge);background:var(--surface-3)}
#view-detail .ss-note{
  font-family:var(--sys);font-size:12px;line-height:1.45;color:var(--t3);
  background:none;border:none;padding:var(--s2) 0 0;margin-top:0;
}
/* El estado de la operacion: color solo en el texto. */
#view-detail .tx-status{margin:var(--s2) 0 0;padding:var(--s2) var(--s3);border:none}
#view-detail .tx-status.pending{background:var(--surface-3);color:var(--t2)}
#view-detail .tx-status.success{background:var(--surface-3);color:var(--up)}
#view-detail .tx-status.error{background:var(--surface-3);color:var(--down)}
/* Auto-Trade: tarjeta como la del trade e interruptor de iOS. */
#view-detail .at-panel{
  margin:0 var(--s4) var(--s3);padding:var(--s3);
  background:var(--surface-2);border:none;border-radius:var(--r-lg);
}
#view-detail .at-hd{margin-bottom:0}
#view-detail #at-settings{margin-top:var(--s2)}
#view-detail .at-hd span{
  font-family:var(--sys);font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--t1);
}
#view-detail .at-toggle{
  width:44px;height:26px;border:none;border-radius:var(--r-full);
  background:var(--edge);transition:background-color var(--d-1) var(--ease-out);
}
#view-detail .at-toggle::after{
  top:3px;left:3px;width:20px;height:20px;background:#fff;
  transition:transform 200ms var(--ease-out);
}
#view-detail .at-toggle.on{background:var(--pri);border-color:transparent}
#view-detail .at-toggle.on::after{left:3px;transform:translateX(18px);background:var(--sobre-pri)}
#view-detail .at-row{
  padding:var(--s2) 0;border-top:var(--bw) solid var(--hair);
  font-family:var(--sys);font-size:13px;color:var(--t2);
}
#view-detail .at-row:first-child{border-top:none}
#view-detail .at-row label{font-family:var(--sys);font-size:13px;color:var(--t2)}
#view-detail .at-row select,#view-detail .at-row input[type="number"]{
  height:32px;width:auto;min-width:96px;padding:0 var(--s3);
  background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-full);
  color:var(--t1);font-family:var(--sys);font-size:12.5px;font-weight:600;
}
#view-detail .at-row select:focus,#view-detail .at-row input[type="number"]:focus{outline:none;border-color:var(--edge)}
#view-detail .at-note{font-family:var(--sys);font-size:12px;color:var(--t3);background:none;border:none;padding:var(--s2) 0 0}
#view-detail .sheet-x{border-radius:50%;background:var(--surface-3);color:var(--t1)}
/* El Share ancho al pie de la ficha: el mismo blanco que "Discuss on feed". */
#view-detail #dt-share{
  height:40px;min-height:40px;width:100%;padding:0 var(--s4);
  display:flex;align-items:center;justify-content:center;
  background:var(--pri);color:var(--sobre-pri);border:none;border-radius:var(--r-full);
  font-family:var(--sys);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  transition:background-color var(--d-1) var(--ease-out),transform 160ms var(--ease-out);
}
#view-detail #dt-share:hover{background:var(--pri-hov);color:var(--sobre-pri);opacity:1}
#view-detail #dt-share:active{background:var(--pri-act);transform:scale(.98)}

/* ═══ COMENTARIOS DEL TOKEN ══════════════════════════════════════════
   No tenian ni una regla: el "No comments yet" salia en teal porque caia
   en var(--muted,#8aa) sin definir, el campo llevaba el blanco del
   navegador y "Post" el borde por defecto. Hilo de Reddit: avatar chico,
   quien y cuando en gris, el texto en blanco, y un campo + un primario. */
#view-detail #cm-comments{margin:0 var(--s4) var(--s4);max-width:none}
#view-detail .cm-cm{display:flex;gap:var(--s2);padding:var(--s2) 0;border-top:var(--bw) solid var(--hair)}
#view-detail .cm-cm:first-child{border-top:none}
#view-detail .cm-cm img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
#view-detail .cm-cm > div{min-width:0;flex:1}
#view-detail .cm-cm .who{font-family:var(--sys);font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:2px}
#view-detail .cm-cm .txt{font-family:var(--sys);font-size:14px;line-height:1.45;color:var(--t1);overflow-wrap:anywhere}
#view-detail .cm-empty,#view-detail .cm-hint{font-family:var(--sys);font-size:13px;color:var(--t3);padding:var(--s2) 0}
#view-detail #cm-cbox{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
#view-detail #cm-cin{
  flex:1;min-width:0;height:36px;padding:0 var(--s3);
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-full);
  color:var(--t1);font-family:var(--sys);font-size:13.5px;outline:none;
}
#view-detail #cm-cin::placeholder{color:var(--t3)}
#view-detail #cm-cin:focus{border-color:var(--edge);background:var(--surface-3)}
#view-detail #cm-cbtn{
  height:36px;min-height:36px;padding:0 var(--s4);flex:0 0 auto;cursor:pointer;
  background:var(--pri);color:var(--sobre-pri);border:none;border-radius:var(--r-full);
  font-family:var(--sys);font-size:13px;font-weight:600;
}
#view-detail #cm-cbtn:hover{background:var(--pri-hov)}
#view-detail #cm-cbtn:active{background:var(--pri-act);transform:scale(.97)}
#view-detail #cm-cbtn:disabled{opacity:.5}

/* ═══ TUS TRADES: LA RAYA QUE CHOCABA ═════════════════════════════════
   Medido con la wallet conectada y sin trades: la cabecera llevaba su
   propio border-bottom y era lo unico visible, asi que su raya caia a 1px
   del borde inferior de la tarjeta (1088 y 1089). El separador pasa a las
   secciones que siguen: si no hay ninguna visible, no hay raya. Y el
   "No trades yet" deja el ambar mono de 11px por gris de sistema. */
#view-detail .dt-pnl-hd{border-bottom:none}
#view-detail .dt-pnl-summary,#view-detail .dt-pnl-chart-wrap,#view-detail .dt-pnl-trades,
#view-detail .dt-pnl-empty,#view-detail .dt-pnl-cta{
  border-top:var(--bw) solid var(--hair);border-bottom:none;
}
#view-detail .dt-pnl-total{font-size:13px}
#view-detail .dt-pnl-total.pnl-muted{font-family:var(--sys);font-size:12.5px;font-weight:500;color:var(--t3)}
/* Y lo que aparece cuando si hay trades, en el idioma de la casa. */
#view-detail .pnl-stat{padding:var(--s3) var(--s2);border-right:var(--bw) solid var(--hair)}
#view-detail .pnl-label{
  font-family:var(--sys);font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--t3);margin-bottom:var(--s1);
}
#view-detail .pnl-val{font-size:13px;font-weight:700;color:var(--t1)}
#view-detail .pnl-val.pnl-big{font-size:15px}
#view-detail .dt-pnl-chart-wrap{padding:var(--s2) var(--s3)}
#view-detail .pnl-trade-hd{
  font-family:var(--sys);font-size:11.5px;letter-spacing:0;text-transform:none;
  color:var(--t3);padding:var(--s2) var(--s4);border-bottom:var(--bw) solid var(--hair);
}
#view-detail .pnl-trade-row{font-size:11.5px;padding:var(--s1) var(--s4)}
#view-detail .pnl-trade-row .pnl-num{font-size:11px}
#view-detail .pnl-session-sep{font-family:var(--sys);font-size:11.5px;background:none;border-color:var(--hair)}
#view-detail .dt-pnl-empty{color:var(--t3);padding:var(--s4)}

/* ═══ UN SOLO PERFIL ═════════════════════════════════════════════════
   Habia dos paginas para la misma persona: /u/ con posts, karma y best
   call, y /profile con wallet, tokens creados y edicion. Ahora es una: lo
   social entra como pestaña Posts y cifras, las medallas del standing en
   el lateral, y seguidores y seguidos se abren desde los contadores de la
   cabecera en vez de ocupar dos pestañas. */
#view-profile .pf-follcnt{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
#view-profile .pf-cnt{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  color:var(--t2);font:inherit;border-radius:4px;
}
#view-profile .pf-cnt:hover{color:var(--t1);text-decoration:underline}
#view-profile .pf-dot{color:var(--t3)}
#view-profile .pf-stats4{grid-template-columns:repeat(4,1fr)}
#view-profile #pf-s-best-sub{font-family:var(--sys)}
#view-profile .pf-sec-first{margin-top:0;padding-top:0;border-top:none}
/* Los posts: las mismas tarjetas que en Community, un nivel mas adentro
   y al ancho de lectura. */
#view-profile .pf-posts{max-width:var(--col)}
#view-profile .pf-posts .fd-card{background:var(--surface-2)}
#view-profile .pf-posts .fd-empty{padding:var(--s4) 0;text-align:left}
/* Standing: cuatro caminos, cuanto llevas de cada uno. */
/* Sin separadores: la barra de progreso ya es la linea, y con 0/5 las dos
   juntas se leian como una raya doble. */
#view-profile .pf-st{padding:var(--s2) 0 var(--s3)}
#view-profile .pf-st:first-child{padding-top:0}
#view-profile .pf-st:last-child{padding-bottom:0}
#view-profile .pf-st-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
#view-profile .pf-st-t{font-family:var(--sys);font-size:13.5px;font-weight:600;color:var(--t1)}
#view-profile .pf-st-ok{color:var(--t2);font-size:12px;margin-left:2px}
#view-profile .pf-st-v{
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--t1);
  font-variant-numeric:tabular-nums;
}
#view-profile .pf-st-v span{color:var(--t3);font-weight:500}
#view-profile .pf-st-n{font-family:var(--sys);font-size:12px;color:var(--t3);margin:2px 0 var(--s2)}
#view-profile .pf-st-bar{height:4px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
#view-profile .pf-st-bar i{display:block;height:100%;background:var(--t2);border-radius:var(--r-full)}
#view-profile .pf-st.done .pf-st-bar i{background:var(--t1)}
@media(max-width:1023px){
  #view-profile .pf-stats4{grid-template-columns:repeat(2,1fr)}
}

/* ═══ EL HOME COMO FEED (BETA, en /beta) ═════════════════════════════
   El token es lo que en Reddit es el post. Misma rejilla que Community y
   la ficha: columna central y carril de 416. Filas de 64px con imagen de
   40, nombre en sistema a 15px, siete datos con su etiqueta encima, la
   linea del chart, la barra ATH y el riesgo como chip. */
#view-beta .bt-grid{display:grid;grid-template-columns:minmax(0,1fr) 416px;gap:12px;align-items:start}
#view-beta .bt-main{
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4) var(--s4);min-width:0;
}
#view-beta .bt-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
#view-beta .bt-tabs{display:flex;gap:var(--s1);flex-wrap:wrap}
#view-beta .bt-tabs button{
  height:36px;padding:0 var(--s3);border:none;border-radius:var(--r-full);
  background:none;color:var(--t2);font-family:var(--sys);font-size:13px;font-weight:600;cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  #view-beta .bt-tabs button:hover{background:var(--surface-2);color:var(--t1)}
}
#view-beta .bt-tabs button.on{background:var(--sel);color:var(--sobre-sel)}
#view-beta .bt-filtros-btn{
  height:36px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--t2);font-family:var(--sys);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
#view-beta .bt-filtros-btn:hover,#view-beta .bt-filtros-btn.on{background:var(--surface-3);color:var(--t1)}
#view-beta .bt-filtros{
  display:flex;gap:var(--s3);flex-wrap:wrap;padding:var(--s2) 0 var(--s3);
  border-bottom:var(--bw) solid var(--hair);margin-bottom:var(--s2);
}
#view-beta .bt-f{display:flex;align-items:center;gap:var(--s2);font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-beta .bt-f select{
  height:32px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--t1);font-family:var(--sys);font-size:12.5px;font-weight:600;
}
/* La fila. */
#view-beta .bt-row{
  display:grid;
  grid-template-columns:40px minmax(150px,1.3fr) repeat(5,minmax(64px,.7fr)) 104px 120px 84px;
  gap:var(--s3);align-items:center;
  min-height:64px;padding:var(--s2);border-radius:0;cursor:pointer;
  border-top:var(--bw) solid var(--hair);
  transition:background-color var(--d-1) var(--ease-out);
}
#view-beta .bt-row:first-child{border-top:none}
@media(hover:hover) and (pointer:fine){
  #view-beta .bt-row:hover{background:var(--surface-2)}
}
#view-beta .bt-img{
  position:relative;width:40px;height:40px;border-radius:50%;background:var(--surface-3);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sys);font-size:15px;font-weight:700;color:var(--t2);overflow:hidden;flex:0 0 auto;
}
#view-beta .bt-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
#view-beta .bt-id{min-width:0}
#view-beta .bt-id b{display:block;font-family:var(--sys);font-size:15px;line-height:1.2;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-beta .bt-id > span{display:block;font-family:var(--sys);font-size:12.5px;line-height:1.25;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-beta .bt-social{display:flex;gap:var(--s2);margin-top:2px;font-family:var(--sys);font-size:12px;line-height:1.25;color:var(--t3)}
#view-beta .bt-num{min-width:0}
#view-beta .bt-num i{display:block;font-style:normal;font-family:var(--sys);font-size:11.5px;line-height:1.2;color:var(--t3);margin-bottom:2px}
#view-beta .bt-num b{
  display:block;font-family:var(--mono);font-size:13.5px;line-height:1.2;font-weight:600;color:var(--t1);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
#view-beta .bt-num.up b{color:var(--up)}
#view-beta .bt-num.down b{color:var(--down)}
#view-beta .bt-spark svg{width:104px;height:24px;display:block}
#view-beta .bt-ath .athw{width:100%}
#view-beta .bt-risk{
  justify-self:end;height:24px;padding:0 var(--s2);display:inline-flex;align-items:center;
  border-radius:var(--r-full);background:var(--surface-3);color:var(--t2);
  font-family:var(--sys);font-size:11.5px;font-weight:600;
}
#view-beta .bt-risk.danger{color:var(--down)}
#view-beta .bt-risk.warning{color:var(--amber,#e0a500)}
#view-beta .bt-risk.good{color:var(--up)}
#view-beta .bt-vacio{font-family:var(--sys);font-size:13px;color:var(--t3);padding:var(--s5) 0;text-align:center}
#view-beta .bt-mas{
  width:100%;height:40px;margin-top:var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--t2);font-family:var(--sys);font-size:13px;font-weight:600;cursor:pointer;
}
#view-beta .bt-mas:hover{background:var(--surface-3);color:var(--t1)}
/* El carril: las tarjetas de Community. */
#view-beta .bt-rail .rl-card h3{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
#view-beta .rl-ver{font-family:var(--sys);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;letter-spacing:0;text-transform:none}
#view-beta .rl-ver:hover{color:var(--t1);text-decoration:underline}
#view-beta .bt-kv{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s1) 0;font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-beta .bt-kv b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
#view-beta .bt-nada{font-family:var(--sys);font-size:12.5px;color:var(--t3);margin:0}
#view-beta .bt-tp{list-style:none;margin:0;padding:0}
#view-beta .bt-tp button{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  padding:var(--s2);margin:0 calc(-1 * var(--s2));width:calc(100% + 2 * var(--s2));
  background:none;border:none;border-radius:var(--r-md);color:inherit;font:inherit;cursor:pointer;
}
#view-beta .bt-tp button:hover{background:var(--surface-2)}
#view-beta .bt-mini{
  position:relative;width:28px;height:28px;border-radius:50%;background:var(--surface-3);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--sys);font-size:12px;font-weight:700;color:var(--t2);
}
#view-beta .bt-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El lider, mas grande: como los marcadores de Top Performers. */
#view-beta .bt-tp li.r1 .bt-mini{width:40px;height:40px;font-size:15px}
#view-beta .bt-tp li.r2 .bt-mini{width:34px;height:34px}
#view-beta .bt-tp b{flex:1;min-width:0;font-family:var(--sys);font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-beta .bt-tp span{font-family:var(--mono);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--t1)}
#view-beta .bt-tp span.up{color:var(--up)}
#view-beta .bt-tp small{font-family:var(--sys);font-size:11.5px;color:var(--t3);flex:0 0 auto}
@media(max-width:767px){
  #view-beta .bt-grid{display:block}
  #view-beta .bt-rail{margin-top:var(--s3)}
}

/* ── Beta, segunda pasada: viva y con toda la barra ─────────────────── */
#view-beta .bt-tabs .bt-tf{display:inline-flex;gap:2px;padding:3px;margin-left:var(--s1);background:var(--surface-3);border-radius:var(--r-full)}
#view-beta .bt-tabs .bt-tf button{height:26px;padding:0 var(--s2);font-family:var(--mono);font-size:11.5px;font-weight:600}
#view-beta .bt-tabs .bt-tf button.on{background:var(--sel);color:var(--sobre-sel)}
#view-beta .bt-tabs.apagado button[data-s]{opacity:.45}
#view-beta .bt-der{display:flex;align-items:center;gap:var(--s1);flex:0 0 auto}
#view-beta .bt-tog{
  height:36px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:none;color:var(--t2);font-family:var(--sys);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
#view-beta .bt-tog:hover{background:var(--surface-2);color:var(--t1)}
#view-beta .bt-tog.on{background:var(--sel);color:var(--sobre-sel)}
#view-beta .bt-filtros-btn b{
  min-width:18px;height:18px;padding:0 5px;margin-left:2px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--sel);color:var(--sobre-sel);border-radius:var(--r-full);font-family:var(--mono);font-size:11px;font-weight:700;
}
#view-beta .bt-sw{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--sys);font-size:12.5px;color:var(--t2);cursor:pointer}
#view-beta .bt-sw input{position:absolute;opacity:0;width:0;height:0}
#view-beta .bt-sw i{
  position:relative;width:36px;height:22px;border-radius:var(--r-full);background:var(--edge);flex:0 0 auto;
  transition:background-color var(--d-1) var(--ease-out);
}
#view-beta .bt-sw i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform 200ms var(--ease-out)}
#view-beta .bt-sw input:checked + i{background:var(--pri)}
#view-beta .bt-sw input:checked + i::after{transform:translateX(14px);background:var(--sobre-pri)}
#view-beta .bt-sw svg{color:var(--t3)}
#view-beta .bt-sw input:checked ~ span{color:var(--t1)}
/* Vida: lo que acaba de nacer, lo que acaba de cambiar. */
#view-beta .bt-row.fresh{animation:btFresh 1.8s var(--ease-out) forwards}
@keyframes btFresh{0%{background:var(--surface-3)}100%{background:transparent}}
#view-beta .bt-num b.pulso-up{animation:btPulsoUp .9s ease-out}
#view-beta .bt-num b.pulso-down{animation:btPulsoDown .9s ease-out}
@keyframes btPulsoUp{0%{color:var(--up)}100%{color:inherit}}
@keyframes btPulsoDown{0%{color:var(--down)}100%{color:inherit}}
#view-beta .bt-num.up b.pulso-up,#view-beta .bt-num.down b.pulso-down{animation:btBrillo .9s ease-out}
@keyframes btBrillo{0%{filter:brightness(1.6)}100%{filter:none}}
@media(prefers-reduced-motion:reduce){
  #view-beta .bt-row.fresh,#view-beta .bt-num b.pulso-up,#view-beta .bt-num b.pulso-down{animation:none}
}
#view-beta .bt-mix{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2);padding-top:var(--s2);border-top:var(--bw) solid var(--hair);font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-beta .bt-mix .good{color:var(--up)}
#view-beta .bt-mix .warning{color:var(--amber,#e0a500)}
#view-beta .bt-mix .danger{color:var(--down)}
#view-beta .bt-mix span{font-variant-numeric:tabular-nums}

/* ═══ PERFORMERS, SECCION PROPIA (/performers) ════════════════════════ */
#view-performers .detail-top{margin:0 0 var(--s3)}
#view-performers .back-btn{
  height:36px;padding:0 var(--s3) 0 var(--s2);border-radius:var(--r-full);
  background:none;border:none;color:var(--t2);
  font-family:var(--sys);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;
}
#view-performers .back-btn:hover{background:var(--surface-2);color:var(--t1)}
#view-performers .tpp-hero{margin:0 0 var(--s4);max-width:var(--col)}
#view-performers .tpp-hero h1{font-family:var(--sys);font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--t1);margin:0 0 var(--s1)}
#view-performers .tpp-hero p{font-family:var(--sys);font-size:14px;line-height:1.5;color:var(--t2);margin:0}
/* El panel prestado del Home, a lo ancho y mas alto. */
#view-performers .tp-section{
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s4);margin:0 0 var(--s3);flex:none;width:auto;max-width:none;
}
#view-performers .tp-chart-wrap{height:460px}
#view-performers .tpp-card{background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);padding:var(--s3) var(--s4) var(--s4)}
#view-performers .tpp-card-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
#view-performers .tpp-card-hd h2{font-family:var(--sys);font-size:16px;font-weight:700;color:var(--t1);margin:0}
#view-performers .tpp-card-hd span{font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-performers .tpp-row{
  display:grid;grid-template-columns:28px 40px minmax(150px,1.3fr) repeat(4,minmax(72px,.7fr)) minmax(90px,.8fr) 104px;
  gap:var(--s3);align-items:center;min-height:60px;padding:var(--s2);border-radius:var(--r-md);cursor:pointer;
  border-top:var(--bw) solid var(--hair);transition:background-color var(--d-1) var(--ease-out);
}
#view-performers .tpp-row:first-child{border-top:none}
@media(hover:hover) and (pointer:fine){#view-performers .tpp-row:hover{background:var(--surface-2)}}
#view-performers .tpp-rank{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--t3);text-align:center}
#view-performers .tpp-row:nth-child(1) .tpp-rank,#view-performers .tpp-row:nth-child(2) .tpp-rank,#view-performers .tpp-row:nth-child(3) .tpp-rank{color:var(--t1)}
#view-performers .tpp-img{
  position:relative;width:40px;height:40px;border-radius:50%;background:var(--surface-3);
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--sys);font-size:15px;font-weight:700;color:var(--t2);
}
#view-performers .tpp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#view-performers .tpp-id{min-width:0}
#view-performers .tpp-id b{display:block;font-family:var(--sys);font-size:15px;line-height:1.2;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-performers .tpp-id span{display:block;font-family:var(--sys);font-size:12.5px;line-height:1.25;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-performers .tpp-num i{display:block;font-style:normal;font-family:var(--sys);font-size:11.5px;line-height:1.2;color:var(--t3);margin-bottom:2px}
#view-performers .tpp-num b{display:block;font-family:var(--mono);font-size:13.5px;line-height:1.2;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
#view-performers .tpp-num.up b{color:var(--up);font-weight:700}
#view-performers .tpp-dex{font-family:var(--sys);font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-performers .tpp-spark svg{width:104px;height:24px;display:block}
#view-performers .tpp-vacio{font-family:var(--sys);font-size:13px;color:var(--t3);padding:var(--s5) 0;text-align:center}
@media(max-width:1023px){
  #view-performers .tp-chart-wrap{height:300px}
  #view-performers .tpp-row{grid-template-columns:24px 36px minmax(0,1.4fr) repeat(2,minmax(56px,.7fr))}
  #view-performers .tpp-row .tpp-num:nth-of-type(3),#view-performers .tpp-row .tpp-num:nth-of-type(4),#view-performers .tpp-dex,#view-performers .tpp-spark{display:none}
}

/* ═══ TOP PROFIT, SECCION PROPIA (/top) ══════════════════════════════
   La pagina existia con el idioma viejo: titulo pequeño en mono, etiquetas
   en mayusculas de 9,5px, filas de 36px con la imagen a 16px, mapa de
   calor con celdas cuadradas y un paginador con el acento. Pasa al idioma
   de Performers y del beta. */
#view-tprofit .detail-top{margin:0 0 var(--s4);gap:var(--s2) var(--s3)}
#view-tprofit .back-btn{
  height:36px;padding:0 var(--s3) 0 var(--s2);border-radius:var(--r-full);
  background:none;border:none;color:var(--t2);
  font-family:var(--sys);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;
}
#view-tprofit .back-btn:hover{background:var(--surface-2);color:var(--t1)}
#view-tprofit .tp-title{font-family:var(--sys);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--t1)}
#view-tprofit .tp-title svg{color:var(--t2);width:20px;height:20px}
#view-tprofit .tpv-lbl{font-family:var(--sys);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--t3)}
/* El mapa de calor: a que hora nacen los que suben. */
#view-tprofit .tpv-heat-wrap{
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4) var(--s4);margin-bottom:var(--s3);
}
#view-tprofit .tpv-heat-title{
  font-family:var(--sys);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--t2);margin-bottom:var(--s3);
}
#view-tprofit .tpv-heat-title .gold{color:var(--t1)}
#view-tprofit .tpv-heat{gap:var(--s1)}
#view-tprofit .tpv-heat-cell{padding:var(--s2) 0;border-radius:var(--r-md);background:var(--surface-2);border-color:transparent}
#view-tprofit .tpv-heat-cell .hh{font-family:var(--sys);font-size:10.5px}
#view-tprofit .tpv-heat-cell b{font-size:12.5px;color:var(--t1)}
#view-tprofit .tpv-heat-cell .am{font-size:10px}
#view-tprofit .tpv-heat-cell:hover{background:var(--surface-3)}
#view-tprofit .tpv-heat-cell.best{box-shadow:inset 0 0 0 1px var(--edge)}
#view-tprofit .tpv-heat-cell.sel{box-shadow:inset 0 0 0 2px var(--t1)}
/* La tabla: filas con aire, cabecera sin gritar, el token legible. */
#view-tprofit .hd,#view-tprofit .rw{
  grid-template-columns:40px minmax(210px,1.8fr) 116px 110px 110px 72px 84px 112px minmax(150px,1.2fr) 64px;
}
#view-tprofit .hd span{
  height:32px;font-family:var(--sys);font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--t3);
}
#view-tprofit .rw span{height:56px;font-size:13px}
#view-tprofit .rw .ix{font-family:var(--mono);color:var(--t3);font-weight:700}
#view-tprofit .rw .tk-img{width:36px;height:36px;font-size:14px}
#view-tprofit .rw .tk-s{font-family:var(--sys);font-size:14px;font-weight:600;color:var(--t1)}
#view-tprofit .rw .tk-s .p{font-family:var(--sys);font-weight:500;color:var(--t3);font-size:12px}
#view-tprofit .rw .tk-f{font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-tprofit .tpv-spd{
  font-family:var(--sys);font-size:11.5px;font-weight:600;
  padding:0 var(--s2);height:24px;border-radius:var(--r-full);background:var(--surface-3);
  display:inline-flex;align-items:center;gap:4px;
}
#view-tprofit .tpr-usd{font-family:var(--mono);font-size:11.5px;color:var(--t3);margin-left:4px}
#view-tprofit .empty{font-family:var(--sys);font-size:13px;color:var(--t3);padding:var(--s6)}
/* El paginador. */
#view-tprofit .pager{padding:var(--s3) var(--s4);border-top:var(--bw) solid var(--hair)}
#view-tprofit .pg-info{font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-tprofit .pg-btns{gap:var(--s1)}
#view-tprofit .pg-btn{
  height:32px;min-width:32px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--t2);
  font-family:var(--sys);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;
}
#view-tprofit .pg-btn:hover{background:var(--surface-3);color:var(--t1)}
#view-tprofit .pg-btn.pg-on{background:var(--sel)!important;color:var(--sobre-sel)!important;border-color:transparent!important}
/* La fila abierta: el chart con entrada y pico, y los mejores traders. */
#view-tprofit .tpv-x{background:var(--surface-2);border:none;border-radius:var(--r-md);margin:var(--s1) var(--s2) var(--s2);padding:var(--s4)}
#view-tprofit .tpv-x-title{font-family:var(--sys);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t2)}
#view-tprofit .tpv-x-tr{font-family:var(--sys);font-size:12.5px;padding:var(--s1) 0}
#view-tprofit .tpv-x-tr .ar{font-family:var(--mono)}
#view-tprofit .tpv-x-tr.hd2{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--t3)}
#view-tprofit .tpv-x-empty{font-family:var(--sys);font-size:12.5px}
#view-tprofit .tpv-spark.open{box-shadow:inset 0 0 0 1px var(--edge);border-radius:var(--r-md)}
#view-tprofit .tpv-spark:hover .tpv-xarr,#view-tprofit .tpv-spark.open .tpv-xarr{color:var(--t1)}

/* La columna del ranking vuelve en Top profit: la casa la esconde en la tabla
   del Home, y sin ella cada celda caia una columna a la izquierda. */
#view-tprofit .rw .ix,#view-tprofit .hd span:first-child{display:flex}
#view-tprofit .rw .tk-img{width:36px;height:36px;flex:0 0 36px}  /* la base flex de 26px del Home mandaba sobre el ancho */

/* ── Beta, tercera pasada: filtros a la vista, tira del mercado, estrella,
      fresco 30 s, destello del recuadro, y el carril que no se monta. ── */
#view-beta .bt-strip{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  padding:0 0 var(--s3);margin-bottom:var(--s3);border-bottom:var(--bw) solid var(--hair);
}
#view-beta .bt-strip span{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-beta .bt-strip i{font-style:normal}
#view-beta .bt-strip b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
#view-beta .bt-strip em{font-style:normal;font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-beta .bt-filtros{display:flex;padding:var(--s2) 0 var(--s3)}
#view-beta .bt-f > span{color:var(--t2);font-weight:500}
/* La estrella: gris, ambar cuando esta puesta, como en el Home. */
#view-beta .bt-fav{
  width:32px;height:32px;border:none;border-radius:50%;background:none;color:var(--t3);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;justify-self:end;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
#view-beta .bt-fav:hover{background:var(--surface-3);color:var(--amber,#e0a500)}
#view-beta .bt-fav.on{color:var(--amber,#e0a500)}
#view-beta .bt-fav.on svg path{fill:currentColor}
#view-beta .bt-fav svg{pointer-events:none;width:15px;height:15px}
/* Lo que nace: verde suave 30 segundos, sin barra al borde. */
#view-beta .bt-row.fresh{animation:btFresh 1.8s ease-in-out infinite}
@keyframes btFresh{0%,100%{background:rgba(22,199,132,.14)}50%{background:rgba(22,199,132,.05)}}
/* Lo que cambia: el recuadro entero, verde si sube, rojo si baja. */
#view-beta .bt-num{border-radius:var(--r-md);padding:2px var(--s1);margin:-2px calc(-1 * var(--s1))}
#view-beta .bt-num.fu{animation:btFu .9s ease-out}
#view-beta .bt-num.fd{animation:btFd .9s ease-out}
@keyframes btFu{0%{background:rgba(22,199,132,.32)}100%{background:transparent}}
@keyframes btFd{0%{background:rgba(255,90,90,.32)}100%{background:transparent}}
#view-beta .bt-num b.pulso-up,#view-beta .bt-num b.pulso-down{animation:none}
/* La fila con la estrella y minimos mas cortos. */
#view-beta .bt-row{
  grid-template-columns:40px minmax(140px,1.3fr) repeat(5,minmax(58px,.7fr)) 96px 112px 80px 32px;
}
#view-beta .bt-spark svg{width:96px}
/* El carril solo cabe al lado cuando el menu esta abierto y sobran 1640px;
   por debajo va debajo, y la lista nunca queda tapada. */
#view-beta .bt-grid{grid-template-columns:minmax(0,1fr)}
#view-beta .bt-rail{margin-top:var(--s3)}
@media(min-width:1640px){
  #view-beta .bt-grid{grid-template-columns:minmax(0,1fr) 416px}
  #view-beta .bt-rail{margin-top:0}
}
@media(max-width:1023px){
  #view-beta .bt-strip{gap:var(--s2) var(--s4)}
  #view-beta .bt-strip span:nth-child(3) em{display:none}
}
@media(max-width:767px){
  #view-beta .bt-main{padding:var(--s3) var(--s3) var(--s4)}
  #view-beta .bt-risk{padding:0 6px;font-size:11px}
}

/* ═══ LA CABECERA EN TABLET Y MOVIL ══════════════════════════════════
   .top es una rejilla de tres columnas a todo ancho, y por debajo de 1024px
   las acciones y el logo se comian al buscador: quedaba aplastado a la
   derecha o en cero. Dos filas: menu, logo y acciones arriba; el buscador
   a todo lo ancho debajo. La altura de la cabecera crece con la variable,
   y con ella lo que se ancla a ella (la fila de venues, el menu). */
@media(max-width:1023px){
  :root{--hd-h:104px}
  .top{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;column-gap:var(--s2);row-gap:var(--s2);
    padding-block:var(--s2);min-height:var(--hd-h);
  }
  .top > .mbtn{grid-column:1;grid-row:1;order:0;flex:none}
  .top > .hd-logo{grid-column:2;grid-row:1;width:auto;margin:0;justify-self:start}
  .top > .hd-acciones{grid-column:4;grid-row:1;justify-self:end}
  .top > .sr{grid-column:1 / -1;grid-row:2;max-width:none;width:100%;margin:0}
  .top > .top-spacer{display:none}
}
@media(max-width:479px){
  /* Solo el idioma activo, Community vive en el menu, y con wallet el
     avatar es el boton: el chip conectado quedaba como un cuadrado vacio. */
  .hd-acciones .ss-lang .ss-lang-btn:not(.on){display:none}
  .hd-acciones #nav-community{display:none}
  .w-btn.connected{display:none}
}

/* ── Bonding: la explicacion de la seccion y el chip de la ficha ─────── */
#view-beta .bt-lede{font-family:var(--sys);font-size:13.5px;line-height:1.5;color:var(--t2);margin:0 0 var(--s3);max-width:var(--col)}
#view-detail .dt-curva{
  height:32px;padding:0 var(--s3);display:inline-flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-full);
  color:var(--t1);font-family:var(--sys);font-size:12.5px;font-weight:600;cursor:default;
}
#view-detail .dt-curva::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--amber,#e0a500);flex:0 0 auto}

/* ── Los carriles acompañan el scroll, y ninguno se mete bajo la cabecera ──
   El de Community estaba anclado a la altura de la cabecera sin contar la
   fila de venues, que tambien es fija: se metia 52px debajo. Los dos se
   anclan bajo las dos barras, y si son mas altos que la ventana, se
   desplazan por dentro. */
body.en-comunidad #fd-rail,#view-beta .bt-rail{
  position:sticky;
  top:calc(var(--chrome-h) + var(--dexbar-h) + var(--s3));
  max-height:calc(100vh - var(--chrome-h) - var(--dexbar-h) - var(--s3) * 2);
  overflow-y:auto;scrollbar-width:none;
}
body.en-comunidad #fd-rail::-webkit-scrollbar,#view-beta .bt-rail::-webkit-scrollbar{display:none}
#view-beta .bt-rail{position:static;max-height:none;overflow:visible}
@media(min-width:1640px){
  #view-beta .bt-rail{position:sticky;max-height:calc(100vh - var(--chrome-h) - var(--dexbar-h) - var(--s3) * 2);overflow-y:auto}
}
#view-beta .bt-sin{display:block;width:96px;text-align:center;font-family:var(--mono);font-size:13px;color:var(--t3)}
#view-beta .bt-f-n input{
  width:104px;height:32px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--t1);font-family:var(--mono);font-size:12.5px;font-weight:600;
}
#view-beta .bt-f-n input:focus{outline:none;border-color:var(--edge);background:var(--surface-3)}

/* ═══ BETA: LA BARRA A TODO LO ANCHO Y LA FILA DEL TELEFONO ═══════════
   Las pestañas, Bonding y Favs son una sola barra que reparte el ancho
   entre todos, como un segmentado; los filtros, una rejilla de casillas
   iguales con la etiqueta encima, en cualquier pantalla, y el segmentado
   de Hot es una casilla mas. En el telefono la barra va en dos filas de
   cuatro, el chart al lado del nombre, la estrella vuelve, y debajo Mcap,
   liquidez, edad y 24h en cuatro casillas iguales. */
#view-beta .bt-f[hidden],#view-beta [hidden]{display:none !important}
#view-beta .bt-top{display:block;margin-bottom:var(--s2)}
#view-beta .bt-tabs{
  display:flex;flex-wrap:wrap;gap:3px;padding:3px;
  background:var(--surface-2);border-radius:var(--r-full);
}
#view-beta .bt-tabs > button{
  flex:1 1 0;min-width:0;height:36px;padding:0 var(--s2);border:none;border-radius:var(--r-full);
  background:none;color:var(--t2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(hover:hover) and (pointer:fine){
  #view-beta .bt-tabs > button:hover{background:var(--surface-3);color:var(--t1)}
}
#view-beta .bt-tabs > button.on{background:var(--sel);color:var(--sobre-sel)}
#view-beta .bt-tabs .bt-sep{flex:0 0 1px;align-self:stretch;margin:7px 3px;background:var(--edge)}
#view-beta .bt-tabs .sm{display:none}
/* Los filtros: casillas iguales que llenan el ancho. */
#view-beta .bt-filtros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2) var(--s3);align-items:end;
  padding:var(--s2) 0 var(--s3);border-bottom:var(--bw) solid var(--hair);margin-bottom:var(--s2);
}
#view-beta .bt-f{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}
#view-beta .bt-f > span:first-child{font-family:var(--sys);font-size:11.5px;font-weight:500;color:var(--t3);padding-left:var(--s2)}
#view-beta .bt-f select,#view-beta .bt-f-n input{
  width:100%;min-width:0;height:40px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--t1);font-family:var(--sys);font-size:13px;font-weight:600;
}
#view-beta .bt-f select:focus-visible,#view-beta .bt-f-n input:focus{outline:none;border-color:var(--edge);background:var(--surface-3)}
/* Liquidez: selector y "Min $" en la misma celda. */
#view-beta .bt-f-liq{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "s n";column-gap:6px;row-gap:4px}
#view-beta .bt-f-liq > span:first-child{grid-area:l}
#view-beta .bt-f-liq > select{grid-area:s}
#view-beta .bt-f-liq .bt-f-n{grid-area:n;display:flex;width:96px}
#view-beta .bt-f-n input{font-family:var(--mono);padding:0 var(--s2)}
/* El segmentado de Hot, como una casilla mas. */
#view-beta .bt-f-tf .bt-tf{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;height:40px;padding:3px;margin:0;
  background:var(--surface-2);border-radius:var(--r-full);
}
#view-beta .bt-f-tf .bt-tf button{
  height:100%;padding:0;border:none;border-radius:var(--r-full);background:none;color:var(--t2);
  font-family:var(--mono);font-size:12px;font-weight:600;cursor:pointer;
}
#view-beta .bt-f-tf .bt-tf button.on{background:var(--sel);color:var(--sobre-sel)}
/* El ojo, alineado con los controles. */
#view-beta .bt-sw.bt-f-ancho{grid-column:span 2;height:40px;margin:0;padding:0 var(--s2);align-self:end}
/* La fila: los datos van en un envoltorio que en escritorio no existe. */
#view-beta .bt-nums{display:contents}
@media(max-width:1023px){
  #view-beta .bt-tabs .lg{display:none}
  #view-beta .bt-tabs .sm{display:inline}
  #view-beta .bt-tabs .bt-sep{display:none}
  /* Tablet: sin holders ni ATH, con el chart. */
  #view-beta .bt-row{grid-template-columns:40px minmax(0,1.3fr) repeat(4,minmax(56px,.7fr)) 96px 76px 32px}
  #view-beta .bt-row .bt-nums .bt-num[data-k="holders"],#view-beta .bt-row .bt-ath{display:none}
}
@media(max-width:767px){
  #view-beta .bt-filtros{gap:var(--s2)}
  /* La fila del telefono: nombre, chart, riesgo y estrella arriba; debajo
     cuatro casillas iguales con Mcap, liquidez, edad y 24h. */
  #view-beta .bt-row{
    grid-template-columns:36px minmax(0,1fr) 96px auto 28px;
    grid-template-areas:"img id spark risk fav" "nums nums nums nums nums";
    gap:var(--s2);min-height:0;padding:var(--s2) var(--s1);
  }
  #view-beta .bt-row .bt-img{grid-area:img;width:36px;height:36px;font-size:14px}
  #view-beta .bt-row .bt-id{grid-area:id}
  #view-beta .bt-row .bt-spark{grid-area:spark;display:block;align-self:center}
  #view-beta .bt-row .bt-spark svg{width:96px;height:26px}
  #view-beta .bt-row .bt-risk{grid-area:risk;justify-self:end}
  #view-beta .bt-row .bt-fav{grid-area:fav;display:inline-flex;width:28px;height:28px;justify-self:end}
  #view-beta .bt-row .bt-nums{display:grid;grid-area:nums;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);padding-top:2px}
  #view-beta .bt-row .bt-nums .bt-num{display:block;margin:0;padding:2px var(--s1)}
  #view-beta .bt-row .bt-nums .bt-num[data-k="holders"],#view-beta .bt-row .bt-ath{display:none}
}
@media(max-width:639px){
  /* Dos filas de cuatro pestañas iguales. */
  #view-beta .bt-tabs{border-radius:var(--r-lg)}
  #view-beta .bt-tabs > button{flex:1 1 calc(25% - 3px)}
}
@media(max-width:479px){
  /* El ojo ocupa su propia fila: con dos columnas no cabe al lado de nada. */
  #view-beta .bt-sw.bt-f-ancho{grid-column:1 / -1}
}
@media(max-width:399px){
  #view-beta .bt-row{grid-template-columns:36px minmax(0,1fr) 80px auto 28px}
  #view-beta .bt-row .bt-spark svg{width:80px}
  #view-beta .bt-sin{width:80px}
}

/* ═══ LA CABECERA DEL TELEFONO, COMPLETA ═══════════════════════════════
   Por debajo de 480px se escondian Community y la wallet conectada, y el
   chip quedaba como un hueco. Ahora la primera fila lleva menu, marca,
   Peak (solo icono), Community, idioma, campana y avatar; la wallet
   conectada baja a la fila del buscador, a la derecha, sin el saldo (que
   sigue en el menu del avatar). */
/* Peak y Community estaban apagados por debajo de 1100px desde el diseno
   viejo; vuelven a la fila en portatiles pequenos, tablet y telefono. */
@media(max-width:1100px){
  .top .try-ai,.top .tb-btn.hd-solo{display:inline-flex}
}
@media(max-width:767px){
  /* La marca vuelve, y el chip de la wallet conectada recupera su texto:
     sin el quedaba como un cuadrado vacio. El saldo no cabe en la fila y
     sigue en el menu del avatar. */
  .hd-logo span{display:inline;font-size:20px}
  .w-btn.connected #w-btn-text{display:inline-flex;align-items:center;gap:7px}
  .w-btn.connected .w-bal{display:none}
}
@media(max-width:639px){
  /* Peak solo icono y un solo idioma: la fila ya va llena. */
  .top .try-ai{width:38px;padding:0;justify-content:center}
  .top .try-ai span{display:none}
  .hd-acciones .ss-lang .ss-lang-btn:not(.on){display:none}
}
@media(max-width:479px){
  .hd-logo span{display:inline;font-size:21px}
  .hd-acciones{gap:var(--s1)}
  .top .try-ai{width:38px;padding:0;justify-content:center}
  .top .try-ai span{display:none}
  .hd-acciones #nav-community{display:inline-flex}
  /* La wallet conectada baja a la fila del buscador, a la derecha, sin saldo. */
  .w-btn.connected{
    display:flex;position:fixed;right:var(--gutter);top:calc(var(--hd-h) - var(--s2) - 40px);
    height:40px;min-height:40px;padding-inline:var(--s3);z-index:70; /* el buscador va a 60 */
  }
  .w-btn.connected .w-bal{display:none}
  body.wallet-on .sr input{padding-right:118px;text-align:left}
}

/* ═══ EL BUSCADOR, EN EL TEMA NUEVO ═══════════════════════════════════
   Era el modal negro de pump.fun con todo en mono. Ahora es una tarjeta
   del sistema: superficie, hairline, esquinas grandes, sistema para los
   nombres y mono solo para los numeros. Las filas son las del feed. En el
   telefono ocupa la pantalla entera y el pie de atajos desaparece. */
.sm-ov{align-items:flex-start;padding:7vh var(--s3) var(--s3)}
.sm-card{
  width:720px;max-width:100%;max-height:min(82vh,780px);
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.55);overflow:hidden;
}
.sm-inp{gap:var(--s3);height:60px;padding:0 var(--s4);border-bottom:var(--bw) solid var(--hair);color:var(--t3)}
.sm-inp > svg{width:18px;height:18px;flex:0 0 auto}
.sm-inp input{height:100%;min-width:0;font-family:var(--sys);font-size:16px;font-weight:500;color:var(--t1)}
.sm-inp input::placeholder{color:var(--t3);font-weight:400}
.sm-x{
  flex:0 0 auto;width:30px;height:30px;border:none;border-radius:50%;background:var(--surface-2);color:var(--t2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.sm-x svg{width:14px;height:14px}
.sm-x:hover{background:var(--surface-3);color:var(--t1)}
.sm-inp kbd.sm-esc{cursor:pointer;flex:0 0 auto;background:var(--surface-2);color:var(--t3);font-family:var(--mono);font-size:11px;padding:3px var(--s2);border-radius:var(--r-full)}
.sm-body{padding:var(--s3) var(--s4) var(--s4)}
.sm-sec{
  font-family:var(--sys);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);
  margin:var(--s4) 0 var(--s2);
}
.sm-sec:first-child{margin-top:0}
.sm-sec a{
  color:var(--t2);font-family:var(--sys);font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;
  padding:3px var(--s2);border-radius:var(--r-full);
}
.sm-sec a:hover{background:var(--surface-2);color:var(--t1)}
.sm-hot{gap:var(--s2);padding-bottom:var(--s1)}
.sm-hcard{
  flex:0 0 164px;padding:var(--s3);background:var(--surface-2);border-radius:var(--r-md);
  transition:background-color var(--d-1) var(--ease-out);
}
.sm-hcard:hover{background:var(--surface-3)}
.sm-hcard-top img{width:28px;height:28px;background:var(--surface-3)}
.sm-h-sym{font-family:var(--sys);font-size:14px;font-weight:600;color:var(--t1)}
.sm-h-nm{font-family:var(--sys);font-size:12px;color:var(--t3);margin:2px 0 var(--s2)}
.sm-h-spark{height:32px}
.sm-h-spark .rspk{height:32px}
.sm-h-mc{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-top:var(--s2);
  font-family:var(--mono);font-size:14px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;
}
.sm-h-ch{font-size:12px;font-weight:600}
.sm-h-ch.up,.sm-h-ch.g{color:var(--up)}
.sm-h-ch.down,.sm-h-ch.r{color:var(--down)}
.sm-chips{gap:var(--s2)}
.sm-chip{
  height:32px;padding:0 var(--s3);border-radius:var(--r-full);background:var(--surface-2);color:var(--t2);
  font-family:var(--sys);font-size:12.5px;font-weight:600;
}
.sm-chip:hover{background:var(--surface-3);color:var(--t1)}
.sm-none{font-family:var(--sys);font-size:12.5px;color:var(--t3);padding:var(--s1) 0}
/* Las filas: las del feed. */
#sm-ov .sr-item{gap:var(--s3);padding:var(--s2);border:none;border-radius:var(--r-md);transition:background-color var(--d-1) var(--ease-out)}
#sm-ov .sr-item:hover,#sm-ov .sr-item.activo{background:var(--surface-2)}
#sm-ov .sr-item-ph{width:36px;height:36px;background:var(--surface-3);font-family:var(--sys);font-size:14px;color:var(--t2);text-transform:none}
#sm-ov .sr-item-sym{font-family:var(--sys);font-size:14px;font-weight:600;color:var(--t1)}
#sm-ov .sr-item-pair{display:none}
#sm-ov .sr-item-name{font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#sm-ov .sr-item-stats{font-family:var(--sys);font-size:11.5px;color:var(--t3);gap:var(--s2);margin-top:3px;flex-wrap:wrap}
#sm-ov .sr-item-right .sr-item-stats{justify-content:flex-end;flex-wrap:nowrap}
#sm-ov .sr-item-mint{font-family:var(--mono);font-size:11px;color:var(--t3)}
#sm-ov .sr-item-price{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
#sm-ov .sr-item-stats .up,#sm-ov .sr-item-stats .g{color:var(--up)}
#sm-ov .sr-item-stats .down,#sm-ov .sr-item-stats .r{color:var(--down)}
#sm-ov .sr-ext{
  font-family:var(--sys);font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--up);
  border:1px solid rgba(22,199,132,.35);border-radius:var(--r-full);padding:1px 7px;
}
#sm-ov .sm-mark{background:none;color:var(--t1);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:2px}
.sm-ago{background:none;padding:0;font-family:var(--sys);font-size:11.5px;color:var(--t3)}
#sm-ov .sr-drop-empty{display:flex;flex-direction:column;gap:4px;font-family:var(--sys);font-size:13px;color:var(--t3);padding:var(--s5) 0}
#sm-ov .sr-drop-empty b{color:var(--t1);font-weight:600}
.sm-foot{padding:var(--s2) var(--s4);border-top:var(--bw) solid var(--hair);font-family:var(--sys);font-size:12px;color:var(--t3);gap:var(--s3)}
.sm-foot span{display:inline-flex;align-items:center;gap:4px}
.sm-foot kbd{background:var(--surface-2);color:var(--t2);font-family:var(--mono);font-size:11px;padding:2px var(--s2);border-radius:var(--r-full)}
@media(max-width:767px){
  .sm-ov{padding:0}
  .sm-card{width:100%;max-width:none;height:100dvh;max-height:none;border-radius:0;border:none}
  .sm-inp{height:56px;padding:0 var(--s3)}
  .sm-inp kbd.sm-esc{display:none}
  .sm-body{padding:var(--s3) var(--s3) var(--s5)}
  .sm-hcard{flex-basis:148px}
  .sm-foot{display:none}
}

/* ═══ EL PERFIL COMO EN COINMARKETCAP: PORTADA, ALTA, HISTORIALES Y A QUIEN SEGUIR ═══
   La portada es un lienzo apaisado con el avatar montado encima; debajo, la
   fecha de alta. Las pestañas Comments y Reactions listan el historial de
   la wallet en posts y en tokens con la misma fila. El carril sugiere a
   quien seguir, con nombre y standing. */
#view-profile .pf-cover{
  position:relative;height:168px;margin:0 0 -44px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2) 60%,var(--surface-1));
  background-size:cover;background-position:center;
}
#view-profile .pf-cover-edit{position:absolute;right:var(--s3);bottom:var(--s3);height:32px;min-height:32px;padding:0 var(--s3);font-size:12.5px;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(6px)}
/* El avatar monta sobre la portada; el nombre y los botones empiezan justo debajo de ella. */
#view-profile .pf-head{position:relative;padding:0 var(--s3);align-items:flex-start}
#view-profile .pf-avatar{width:88px;height:88px;border:4px solid var(--surface-1);box-shadow:0 0 0 1px var(--hair);position:relative;z-index:1}
#view-profile .pf-head-mid,#view-profile .pf-actions{padding-top:52px}
#view-profile .pf-joined{font-family:var(--sys);font-size:12.5px;color:var(--t3);margin:calc(-1 * var(--s2)) 0 var(--s4)}
#view-profile .pf-bio + .pf-joined{margin-top:calc(-1 * var(--s3))}
#view-profile .pf-srow{
  display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s2) var(--s2);
  border-top:var(--bw) solid var(--hair);cursor:pointer;border-radius:var(--r-md);
  transition:background-color var(--d-1) var(--ease-out);
}
#view-profile .pf-srow:first-child{border-top:none}
@media(hover:hover) and (pointer:fine){#view-profile .pf-srow:hover{background:var(--surface-2)}}
#view-profile .pf-srow-rx{flex:0 0 32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-2);font-size:16px}
#view-profile .pf-srow img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
#view-profile .pf-srow-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#view-profile .pf-srow-t{font-family:var(--sys);font-size:13px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-profile .pf-srow-t b{color:var(--t1);font-weight:600}
#view-profile .pf-srow-q{color:var(--t2);margin-left:6px}
#view-profile .pf-srow-q::before{content:'“'}#view-profile .pf-srow-q::after{content:'”'}
#view-profile .pf-srow-x{font-family:var(--sys);font-size:14px;color:var(--t1);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#view-profile .pf-srow-ago{flex:0 0 auto;font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-profile .pf-sug{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0}
#view-profile .pf-sug img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--surface-2);cursor:pointer;flex:0 0 auto}
#view-profile .pf-sug-b{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer}
#view-profile .pf-sug-b b{font-family:var(--sys);font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-profile .pf-sug-b span{font-family:var(--sys);font-size:12px;color:var(--t3)}
#view-profile .pf-sug-f{height:32px;min-height:32px;padding:0 var(--s3);font-size:12.5px;flex:0 0 auto}
@media(max-width:767px){
  #view-profile .pf-cover{height:118px;margin-bottom:-36px}
  #view-profile .pf-avatar{width:72px;height:72px}
  #view-profile .pf-head-mid{padding-top:44px}
  #view-profile .pf-actions{padding-top:0}
  #view-profile .pf-srow-q{display:none}
}

/* ═══ EL BUSCADOR, SEGUNDA PASADA: SALIDA EN EL TELEFONO Y PORTADA CON VIDA ═══
   En el telefono la X era la unica salida y solo limpiaba; ahora hay flecha
   atras, y la X cierra si no hay nada escrito. La portada deja de ser una
   lista fria: atajos a las secciones, los que mas suben, de lo que se habla
   y a quien seguir, ademas de los calientes y lo reciente. */
.sm-atras{display:none;flex:0 0 auto;width:36px;height:36px;border:none;border-radius:50%;background:none;color:var(--t2);align-items:center;justify-content:center;cursor:pointer;margin-left:calc(-1 * var(--s2))}
.sm-atras svg{width:20px;height:20px}
.sm-atras:active{background:var(--surface-2)}
.sm-x[hidden]{display:none}
.sm-atajos{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.sm-atajo{background:var(--surface-2);color:var(--t1)}
.sm-dos{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
.sm-mini{display:flex;flex-direction:column}
.sm-mrow{display:flex;align-items:center;gap:var(--s2);height:40px;padding:0 var(--s2);border-radius:var(--r-md);cursor:pointer;font-family:var(--sys);font-size:13.5px;color:var(--t1)}
@media(hover:hover) and (pointer:fine){.sm-mrow:hover,.sm-user:hover{background:var(--surface-3)}}
.sm-mrow img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--surface-3);flex:0 0 auto}
.sm-msym{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-mder{font-family:var(--mono);font-size:12.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.sm-mder b{font-weight:600}
.sm-mder b.up,.sm-mder b.g,.sm-mder b.pos{color:var(--up)}
.sm-mder b.down,.sm-mder b.r,.sm-mder b.neg{color:var(--down)}
.sm-gente{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.sm-user{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s3) var(--s2);border-radius:var(--r-md);background:var(--surface-2);cursor:pointer;text-align:center;min-width:0}
.sm-user img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface-3)}
.sm-user b{font-family:var(--sys);font-size:13px;font-weight:600;color:var(--t1);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-user span{font-family:var(--sys);font-size:11.5px;color:var(--t3)}
.sr-riskdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--t3);flex:0 0 auto}
.sr-riskdot.good,.sr-riskdot.low{background:var(--up)}
.sr-riskdot.warning,.sr-riskdot.medium{background:var(--amber,#e0a500)}
.sr-riskdot.danger,.sr-riskdot.high{background:var(--down)}
@media(max-width:767px){
  .sm-atras{display:inline-flex}
  .sm-inp > svg{display:none}
  .sm-dos{grid-template-columns:1fr}
  .sm-gente{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* El compositor dentro del perfil respira igual que en Community. */
#view-profile .pf-posts .fd-comp{margin-bottom:var(--s4)}

/* ═══ PILDORAS DE DEX DESDE LOS DATOS ═══════════════════════════════════
   Cada pildora es un market real de SolanaTracker (o una familia de ellos) o
   un launchpad, con cuantos tokens trajo en 24 h. El separador "Launched on"
   marca donde acaban los dex y empiezan los launchpads. */
.pills .pill-n{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--t3);margin-left:6px;font-variant-numeric:tabular-nums}
.pills .pill.on .pill-n{color:inherit;opacity:.75}
.pills .pill-sep{flex:0 0 auto;display:inline-flex;align-items:center;padding:0 var(--s2) 0 var(--s3);margin-left:var(--s2);border-left:var(--bw) solid var(--edge);font-family:var(--sys);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);cursor:default}
/* Un dex sin tokens en la ventana: se ve, apagado, con su cero. */
.pills .pill.vacia{opacity:.5}
.pills .pill.vacia.on{opacity:1}
/* Un dex sin tokens en la ventana: se explica arriba y se ensena su historico. */
#view-beta .bt-aviso{display:flex;flex-direction:column;gap:4px;padding:var(--s3) var(--s4);margin:0 0 var(--s3);border-radius:var(--r-md);background:var(--surface-2);font-family:var(--sys);font-size:13px;line-height:1.45}
#view-beta .bt-aviso b{color:var(--t1);font-weight:600}
#view-beta .bt-aviso span{color:var(--t2)}
#view-beta .bt-vacio-dex{display:flex;flex-direction:column;gap:6px;text-align:left;padding:var(--s5) var(--s4);border-radius:var(--r-md);background:var(--surface-2)}
#view-beta .bt-vacio-dex b{color:var(--t1);font-weight:600;font-size:14px}
#view-beta .bt-vacio-dex span{color:var(--t2);font-size:13px}

/* ═══ Ficha del token como terminal (token-page.js) ═══════════════════ */
#view-detail .detail-layout{grid-template-columns:minmax(0,1fr) 400px}
.dt-side-tabs{display:flex;gap:2px;padding:6px 6px 0;border-bottom:var(--bw) solid var(--hair)}
.dt-side-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--t3);font:600 12.5px var(--sans);padding:8px 4px;cursor:pointer;transition:color var(--d-1)}
.dt-side-tabs button:hover{color:var(--t2)}
.dt-side-tabs button.on{color:var(--t1);border-bottom-color:var(--accent)}
.dt-side-chips{display:flex;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:none}
.dt-side-chips::-webkit-scrollbar{display:none}
.dt-side-chips button{background:var(--surface-2);border:0;color:var(--t2);font:500 12px var(--sans);padding:6px 10px;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;transition:transform var(--d-1) var(--ease-out)}
.dt-side-chips button:active{transform:scale(.97)}
.dt-side-chips button.on{background:var(--surface-3);color:var(--t1)}
.dt-side-list{overflow-y:auto;flex:1;padding:4px 6px 8px;scrollbar-width:thin}
.dt-side-empty{color:var(--t3);font-size:12.5px;padding:18px 10px;text-align:center;line-height:1.5}

.dt-tk{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 8px;border-radius:var(--r-md);text-decoration:none;color:var(--t1);transition:background var(--d-1)}
.dt-tk:hover{background:var(--surface-2)}
.dt-tk.on{background:var(--surface-3);box-shadow:inset 2px 0 0 var(--accent)}
.dt-tk-img{width:34px;height:34px;border-radius:50%;background:var(--surface-3);overflow:hidden;display:block}
.dt-tk-img img{width:100%;height:100%;object-fit:cover;display:block}
.dt-tk-m,.dt-tk-r{display:flex;flex-direction:column;gap:2px;min-width:0}
.dt-tk-m b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-tk-m span,.dt-tk-r span{font:12px var(--mono);color:var(--t3)}
.dt-tk-r{align-items:flex-end}
.dt-tk-r b{font:600 12.5px var(--mono);white-space:nowrap}
.dt-tk-r b i{font-style:normal;color:var(--t3);font-weight:500}
.dt-tk-r span.up{color:var(--up)}.dt-tk-r span.down{color:var(--down)}
/* La lista viva: destello verde/rojo al cambiar (cfu/cfd de index.html) y luz al nacer una fila; la clase se quita en animationend. El precio abraza su texto como MC y 24h, si no el destello era una barra de toda la columna. */
.dt-tk .fu{animation:cfu .9s ease-out;border-radius:4px}.dt-tk .fd{animation:cfd .9s ease-out;border-radius:4px}.dt-tk.nace:not(.on){animation:cfu 1.6s ease-out}.dt-tk-m span{align-self:flex-start}
.dt-al,.dt-fp,.dt-ld{padding:9px 10px;border-radius:var(--r-md);font-size:12.5px;line-height:1.4;cursor:pointer;color:var(--t2)}
.dt-al:hover,.dt-fp:hover{background:var(--surface-2)}
.dt-al b,.dt-fp b,.dt-ld b{color:var(--t1);font-weight:600}
.dt-al.new{box-shadow:inset 2px 0 0 var(--accent)}
.dt-al span,.dt-fp-h span{display:block;color:var(--t3);font-size:11px;margin-top:2px}
.dt-fp-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dt-fp-h span{display:inline;margin:0}
.dt-fp-t{color:var(--t2);margin-top:3px}
.dt-fp-tk{display:inline-block;margin-top:5px;font:600 11px var(--mono);color:var(--accent);background:var(--accent-dim);padding:2px 7px;border-radius:var(--r-full)}
.dt-ld{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;cursor:default}
.dt-ld-n{color:var(--t3);font:600 12px var(--mono)}
/* Cabecera: avatar y cifras sobre el grafico */
.dt-hero-img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface-3);flex:none}
#view-detail .dt-head-l{display:flex;align-items:center;gap:12px;min-width:0}
.dt-stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0 0 12px}
.dt-stat{background:var(--surface-2);border:0;border-radius:var(--r-md);padding:8px 10px;min-width:0}
.dt-stat-l{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.dt-stat-v{font:600 14px var(--mono);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-stat-v.up{color:var(--up)}.dt-stat-v.down{color:var(--down)}
@media (min-width:1280px){#view-detail .dt-keys{display:none}}
@media (max-width:1100px){.dt-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:767px){.dt-stats{display:none}.dt-risk,.dt-pos{margin:12px 0 0}.dt-about{margin:12px 0 0}}
/* About + riesgo + posiciones en la tarjeta derecha */
.dt-about{margin:10px 14px 4px}
.dt-about b{display:block;font-size:15px;font-weight:600;color:var(--t1)}
.dt-about p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--t2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.dt-risk{margin:10px 14px 12px;padding:14px;background:var(--surface-2);border:var(--bw) solid var(--hair);border-radius:var(--r-lg)}
.dt-risk-hd{display:flex;justify-content:space-between;align-items:center}
.dt-risk-k{font:11.5px var(--mono);color:var(--t3)}
.dt-risk-lbl{font-size:13px;font-weight:600;color:var(--t3)}
.dt-risk-lbl.good{color:var(--up)}.dt-risk-lbl.warning{color:var(--warn)}.dt-risk-lbl.danger{color:var(--down)}
.dt-risk-n{font:700 40px/1 var(--display);color:var(--t1);margin:6px 0 12px;letter-spacing:-.02em}
.dt-risk-bar{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding-bottom:12px;border-bottom:var(--bw) solid var(--hair);margin-bottom:12px}
.dt-risk-bar i{display:block;height:26px;border-radius:6px;background:var(--surface-3);transition:background var(--d-2)}
.dt-risk-bar i.on{background:var(--edge)}
.dt-risk-bar i.on.good{background:var(--up)}.dt-risk-bar i.on.warning{background:var(--warn)}.dt-risk-bar i.on.danger{background:var(--down)}
.dt-risk-rows{display:flex;flex-direction:column;gap:7px}
.dt-risk-row{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.dt-risk-row .k{color:var(--t3)}
.dt-risk-row .v{color:var(--t1);font-family:var(--mono);font-size:12.5px;text-align:right}
.dt-risk-row .v.good{color:var(--up)}.dt-risk-row .v.warning{color:var(--warn)}.dt-risk-row .v.danger{color:var(--down)}
.dt-risk-sub{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.dt-pos{margin:0 14px 14px}
.dt-pos-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dt-pos-hd b{font-size:15px;font-weight:600;color:var(--t1)}
.dt-pos-tabs{display:flex;background:var(--surface-2);border:0;border-radius:var(--r-full);padding:2px}
.dt-pos-tabs button{background:none;border:0;color:var(--t3);font:600 12px var(--sans);padding:4px 10px;border-radius:var(--r-full);cursor:pointer}
.dt-pos-tabs button.on{background:var(--surface-3);color:var(--t1)}
.dt-pos-body{display:flex;flex-direction:column;gap:2px}   /* sin caja: la seccion no va dentro de ningun recuadro (2026-09-06) */
.dt-pos-row{display:flex;justify-content:space-between;font-size:13px}
.dt-pos-row span{color:var(--t3)}
.dt-pos-row b{font:600 12.5px var(--mono);color:var(--t1)}
.dt-pos-row b i{font-style:normal;color:var(--t3);font-weight:500}
.dt-pos-row b.up{color:var(--up)}.dt-pos-row b.down{color:var(--down)}
.dt-pos-list{border-top:var(--bw) solid var(--hair);padding-top:6px;display:flex;flex-direction:column;gap:4px}
.dt-pos-tr{display:grid;grid-template-columns:44px 1fr auto;gap:8px;font:12px var(--mono);color:var(--t3)}
.dt-pos-tr b{color:var(--t1);font-weight:600}
.dt-pos-tr.up span:first-child{color:var(--up)}.dt-pos-tr.down span:first-child{color:var(--down)}
.dt-thesis{padding:8px 10px}

/* Pila de recuadros en la columna derecha (solo escritorio; en movil la tarjeta compacta sigue igual) */
@media (min-width:1280px){
  #view-detail .dt-card{background:none;border:0;overflow:visible;gap:12px}
  #view-detail .dt-box{background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
  #view-detail #dt-box-ident,#view-detail #dt-audit-wrap{display:none}
  #view-detail #dt-box-trade{padding:12px}
  #view-detail #dt-box-trade .dt-trade{margin:0;border:0;background:none;padding:0}   /* el marco lo pone el recuadro, no el panel */
  #view-detail #dt-box-about{padding:14px}
  #view-detail #dt-box-about .dt-about{margin:0 0 12px}
  #view-detail #dt-box-about .dt-tf{margin:0 0 12px}
  #view-detail #dt-box-about .dt-press{margin:0 0 12px}
  #view-detail #dt-box-about .dt-socials{padding:0;margin:0}
  #view-detail .dt-risk.dt-box{margin:0;background:var(--surface-1)}
  #view-detail .dt-pos.dt-box{margin:0;padding:14px}
  #view-detail .dt-pos.dt-box .dt-pos-hd{margin:0 0 10px}
}

/* ═══ Ficha del token: panel dentro del menu, cabecera de fomo, chart sin contenedor, columna derecha pegada ═══ */
/* El panel vive dentro de nav.sb. En la ficha sustituye a los enlaces del menu; body.sb-menu los devuelve. */
#dt-side{display:none}
body.en-token:not(.sb-menu) #sb > :not(#dt-side){display:none}
body.en-token:not(.sb-menu) #sb #dt-side{display:flex;flex-direction:column;flex:1;min-height:0;margin:calc(var(--s3) * -1) calc(var(--s2) * -1) 0;padding:0}
#sb .dt-side-hd{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:var(--bw) solid var(--hair)}
#sb .dt-side-menu{display:flex;flex:0 0 40px;align-items:center;justify-content:center;background:none;border:0;color:var(--t2);cursor:pointer}
#sb .dt-side-menu:hover{color:var(--t1)}
#sb .dt-side-tabs{flex:1;display:flex;gap:2px;padding:6px 6px 0}
#sb .dt-side-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--t3);font:600 12.5px var(--sans);padding:9px 2px;cursor:pointer}
#sb .dt-side-tabs button.on{color:var(--t1);border-bottom-color:var(--accent)}
#sb .dt-side-chips{display:flex;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:none}
#sb .dt-side-chips button{background:var(--surface-2);border:0;color:var(--t2);font:500 12px var(--sans);padding:6px 10px;border-radius:var(--r-full);cursor:pointer;white-space:nowrap}
#sb .dt-side-chips button.on{background:var(--surface-3);color:var(--t1)}
#sb .dt-side-list{padding:2px 6px 8px}
#sb .dt-tk{padding:6px 8px;min-height:52px}
#sb .dt-tk-m b{font-size:15px;font-weight:500}
.dt-side-btn,.dt-pos-btn{display:inline-block;margin-top:8px;background:var(--t1);color:var(--bg);border:0;border-radius:var(--r-full);font:600 12px var(--sans);padding:7px 14px;cursor:pointer}
@media (min-width:768px){
  /* La barra de dex se queda tambien en la ficha (es parte de nuestro chrome); solo se va el banner promocional */
  body.en-token #banner{display:none}
  /* cabecera del token (medidas de fomo): 55 px, avatar 40, iconos 20, cifras a la derecha */
  body.en-token .dt-head,body.en-token .dt-head-price,body.en-token #dt-head-socials{display:none}
  .dt-hero{display:flex;gap:12px;align-items:center;min-height:55px;margin:0 0 6px}
  .dt-hero-av{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--hair);background:var(--surface-2);overflow:hidden;flex:none;display:block}
  .dt-hero-av img{width:100%;height:100%;object-fit:cover;display:block}
  .dt-hero-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:0 0 auto;max-width:380px}
  .dt-hero-l1{display:flex;gap:4px;align-items:center;font:500 16px/1.25 var(--sans);color:var(--t1);white-space:nowrap}
  .dt-hero-sym{overflow:hidden;text-overflow:ellipsis;max-width:180px}
  .dt-hero-dex{width:20px;height:20px;border-radius:50%;overflow:hidden;background:var(--bg);display:inline-flex}
  .dt-hero-dex img{width:100%;height:100%;object-fit:cover}
  .dt-hero-sep{display:inline-block;width:1px;height:16px;background:var(--hair);margin:0 4px}
  .dt-hero-links,.dt-hero-acts{display:inline-flex;gap:4px;align-items:center}
  .dt-hero-links a,.dt-hero-acts .dt-chip,.dt-hero-acts .dt-fav{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--t2);background:none;border:0;padding:0;margin:0;cursor:pointer;font-size:0;line-height:0;border-radius:var(--r-sm)}
  .dt-hero-links a:hover,.dt-hero-acts .dt-chip:hover,.dt-hero-acts .dt-fav:hover{color:var(--t1);background:var(--surface-2)}
  .dt-hero-acts .dt-chip svg{width:16px;height:16px}
  /* #dt-discuss trae su propia pildora blanca con texto: aqui es un icono mas (el id gana en especificidad) */
  .dt-hero-acts #dt-discuss,.dt-hero-acts #dt-share2,.dt-hero-acts #dt-ca{background:none !important;color:var(--t2) !important;padding:0 !important;margin:0 !important;width:20px !important;height:20px !important;min-width:0;min-height:0 !important;font-size:0 !important;line-height:0;border:0 !important;box-shadow:none !important;border-radius:var(--r-sm)}
  .dt-hero-acts #dt-discuss:hover,.dt-hero-acts #dt-share2:hover{color:var(--t1) !important;background:var(--surface-2) !important}
  .dt-hero-acts #dt-discuss svg,.dt-hero-acts #dt-share2 svg{width:16px;height:16px;display:block}
  .dt-hero-acts .dt-fav{font-size:16px;line-height:1}
  .dt-hero-l2{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;font:500 12px/1.3 var(--sans);color:var(--t2);white-space:nowrap;overflow:hidden}
  .dt-hero-l2 .dt-hero-sep{height:12px;margin:0}
  .dt-hero-name{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;max-width:160px}
  .dt-hero-ca .dt-chip,.dt-hero-dev .dt-chip{background:none;border:0;padding:0;margin:0;font:500 12px var(--sans);color:var(--t2);cursor:pointer;height:auto}
  .dt-hero-ca .dt-chip:hover,.dt-hero-dev .dt-chip:hover{color:var(--t1)}
  .dt-hero-dev .dt-chip{margin-left:8px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
  /* Las cifras: empiezan por Market cap y Price; lo que no cabe se desplaza, con un desvanecido al borde como en fomo */
  .dt-hero #dt-stats{margin:0 0 0 auto;flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;align-items:center}   /* el desvanecido lo pone [data-fade] */
  .dt-hero #dt-stats::-webkit-scrollbar{display:none}
  .dt-stat{flex:0 0 auto;min-width:84px;height:48px;padding:6px 8px;border:0;border-radius:var(--r-sm);background:var(--surface-2);text-align:center;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
  .dt-stat:first-child{background:none;text-align:left;padding-left:0;min-width:0}
  .dt-stat-l{font-size:12px;color:var(--t2);margin:0 0 1px;white-space:nowrap}
  .dt-stat-v{font:500 16px var(--sans);color:var(--t1)}
  .dt-stat:first-child .dt-stat-v{font-size:20px;font-weight:600}
  .dt-stat-v.up{color:var(--up)}.dt-stat-v.down{color:var(--down)}
  #view-detail .dt-keys{display:none}
  /* el chart no va en ningun contenedor */
  body.en-token #view-detail .dt-chartwrap{background:none !important;border:0 !important;border-radius:0;box-shadow:none;overflow:visible}
  body.en-token #view-detail .dt-chart-toolbar{background:none;border-bottom:var(--bw) solid var(--hair);padding:6px 0}
  /* columna derecha: recuadros sin borde en los botones, y pegada al hacer scroll */
  body.en-token #view-detail .detail-layout{grid-template-columns:minmax(0,1fr) 320px}
  /* La columna que hace scroll no tiene marco propio: sin radio ni fondo, para que no recorte las esquinas de la primera y la ultima caja */
  body.en-token #view-detail .dt-card{position:sticky;top:calc(var(--hd-h) + 12px);max-height:calc(100vh - var(--hd-h) - 24px);overflow-y:auto;scrollbar-width:none;background:none !important;border:0 !important;border-radius:0 !important;padding:0 0 2px;box-shadow:none}
  body.en-token #view-detail .dt-card::-webkit-scrollbar{display:none}
  #view-detail .dt-box,#view-detail .dt-risk.dt-box,#view-detail .dt-pos.dt-box{border-radius:var(--r-md)}
  #dt-box-trade{padding:12px}
  #dt-box-trade .dt-trade{margin:0;border:0;background:none;padding:0}
  #dt-box-trade .dt-bs{gap:8px;margin-bottom:10px}
  #dt-box-trade .dt-bs button{padding:0;min-height:40px;height:auto;border:0;border-radius:var(--r-sm);background:var(--surface-2);color:var(--t3);font:700 16px var(--sans);text-transform:none;letter-spacing:0}
  #dt-box-trade .dt-bs button.buy.on{background:rgba(33,201,94,.2);color:var(--up)}
  #dt-box-trade .dt-bs button.sell.on{background:rgba(255,98,46,.18);color:var(--down)}
  #dt-box-trade .dt-ot{margin-bottom:10px}
  #dt-box-trade .dt-amt{background:var(--surface-2);border:0;border-radius:var(--r-md);padding:16px;margin-bottom:10px}
  #dt-box-trade .dt-amt input{text-align:left;font:700 30px var(--sans)}
  #dt-box-trade .dt-amt>span{right:16px;transform:translateY(-50%);font-size:13px}
  #dt-box-trade .dt-presets{gap:8px;margin-bottom:8px}
  #dt-box-trade .dt-presets button{min-height:32px;height:auto;padding:0;border:0;border-radius:var(--r-sm);background:var(--surface-2);color:var(--t1);font:700 14px var(--sans)}
  #dt-box-trade .dt-presets button:hover{background:var(--surface-3)}
  #dt-box-trade .dt-conv{text-align:left;font:500 13px var(--sans);color:var(--t2);margin:0 0 10px}
  #dt-box-trade .dt-wallet{height:44px;border:0;border-radius:var(--r-md);background:var(--t1);color:var(--bg);font:700 16px var(--sans)}
  #dt-box-about{padding:14px}
  #dt-box-about .dt-about{margin:0 0 12px}
  #dt-box-about .dt-tf{margin:0 0 12px}
  #dt-box-about .dt-press{margin:0 0 12px}
  #dt-box-about .dt-socials{padding:0;margin:0}
  #view-detail .dt-risk.dt-box{margin:0;background:var(--surface-1)}
  #view-detail .dt-pos.dt-box{margin:0;padding:14px}
  #view-detail .dt-pos.dt-box .dt-pos-hd{margin:0 0 10px}
  #view-detail .dt-pos-tabs{border:0}
  #view-detail #dt-box-ident,#view-detail #dt-audit-wrap{display:none}
}
@media (max-width:767px){#dt-hero{display:none}}
/* Buscador: mas ancho, con los atajos Paste y / dentro */
.sr{max-width:760px}
.sr-hints{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:6px;pointer-events:none}
.sr:has(input:placeholder-shown) .sr-hints{display:flex}
.sr-hints .sr-paste,.sr-hints kbd{pointer-events:auto;background:var(--surface-3);border:0;color:var(--t2);border-radius:var(--r-sm);font:500 11.5px var(--sans);padding:4px 8px;cursor:pointer;line-height:1.3}
.sr-hints kbd{font-family:var(--mono);cursor:default;padding:4px 7px}
.sr-hints .sr-paste:hover{color:var(--t1)}
@media (max-width:767px){.sr-hints{display:none !important}}

/* ═══ Ajustes del 2026-09-05 (tarde): compra exacta, chart en su contenedor, panel como el menu, tabla como la de fomo ═══ */
@media (min-width:768px){
  #view-detail .dt-box{overflow:visible;background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-md)}
  #dt-box-trade .dt-trade{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;border-radius:0 !important}
  #view-detail #dt-box-trade .dt-bs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;margin:0 0 10px;background:none;border-radius:0}
  #view-detail #dt-box-trade .dt-bs button{height:40px;padding:0;border:0;border-radius:var(--r-sm);background:var(--surface-2);color:var(--t3);font:700 16px var(--sans);letter-spacing:0;text-transform:none}
  #view-detail #dt-box-trade .dt-bs button.buy.on{background:rgba(33,201,94,.2);color:var(--up)}
  #view-detail #dt-box-trade .dt-bs button.sell.on{background:rgba(255,98,46,.18);color:var(--down)}
  #view-detail #dt-box-trade .dt-ot{gap:12px;margin:0 0 10px;font:600 12px var(--sans)}
  #view-detail #dt-box-trade .dt-ot span{padding-bottom:4px}
  #view-detail #dt-box-trade .dt-amt{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:0;border-radius:var(--r-md);padding:18px 16px;margin:0 0 10px;min-height:76px}
  #view-detail #dt-box-trade .dt-amt input{flex:0 1 auto;width:auto;min-width:32px;max-width:40%;text-align:left;font:700 32px var(--sans);color:var(--t1);padding:0;margin:0}
  #view-detail #dt-box-trade .dt-amt input::placeholder{color:var(--t3);opacity:1}
  #view-detail #dt-box-trade .dt-amt>span{position:static;transform:none;font:500 16px var(--sans);color:var(--t3)}
  #view-detail #dt-box-trade .dt-amt-hint{margin-left:auto;display:none;white-space:nowrap;font:500 15px var(--sans);color:var(--t3)}
  #view-detail #dt-box-trade .dt-amt input:placeholder-shown ~ .dt-amt-hint{display:block}
  #view-detail #dt-box-trade .dt-presets{display:grid;grid-template-columns:repeat(4,1fr) 32px;gap:8px;margin:0 0 8px;align-items:center}
  #view-detail #dt-box-trade .dt-presets button{height:32px;min-height:0;padding:0;border:0;border-radius:var(--r-sm);background:var(--surface-2);color:var(--t1);font:700 13px var(--sans)}
  #view-detail #dt-box-trade .dt-presets .dt-settings-btn{width:32px;height:32px;background:none;border:0;color:var(--t2);display:inline-flex;align-items:center;justify-content:center;padding:0}
  #view-detail #dt-box-trade .dt-conv{text-align:left;font:500 14px var(--sans);color:var(--t1);margin:0 0 10px;min-height:18px}
  #view-detail #dt-box-trade .dt-wallet{height:44px;border:0;border-radius:var(--r-md);background:var(--t1);color:var(--bg);font:700 16px var(--sans)}
  #view-detail #dt-box-trade .dt-swap-settings-row{justify-content:center;margin-top:8px}
  body.en-token #view-detail .dt-chartwrap{background:var(--surface-1) !important;border:var(--bw) solid var(--hair) !important;border-radius:var(--r-md);overflow:hidden;padding:0 0 6px}
  body.en-token #view-detail .dt-chart-toolbar{background:none;border-bottom:var(--bw) solid var(--hair);padding:6px 10px}
  body.en-token #view-detail .dt-tf-sel{background:none;border:0}
  body.en-token #view-detail .dt-tf-sel > button{background:none;border:0;border-radius:var(--r-sm);color:var(--t3);font:500 13px var(--sans);padding:6px 10px}
  body.en-token #view-detail .dt-tf-sel > button.on{background:var(--surface-3);color:var(--t1)}
  .dt-hero-acts #dt-discuss svg,.dt-hero-acts #dt-share2 svg{color:inherit !important;stroke:currentColor !important;width:16px !important;height:16px !important}
  body.en-token #view-detail .dt-txn-wrap{background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-md);overflow:hidden}
  body.en-token #view-detail .dt-txn-hd{background:var(--surface-2);border:0;border-radius:var(--r-sm);margin:8px 8px 4px;padding:0 8px 0 4px;min-height:40px;flex-wrap:nowrap}
  body.en-token #view-detail .dt-txn-tabs{gap:0}
  body.en-token #view-detail .dt-txn-tabs button{background:none !important;border:0 !important;border-radius:0;color:var(--t3);font:500 14px var(--sans);padding:0 12px;height:40px;letter-spacing:0;text-transform:none}
  body.en-token #view-detail .dt-txn-tabs button.on{color:var(--t1)}
  body.en-token #view-detail #dt-txn-view button svg{display:none}
  body.en-token #view-detail #dt-txn-filter{gap:6px}
  body.en-token #view-detail #dt-txn-filter button{height:24px;padding:0 8px;border-radius:6px;background:var(--surface-3) !important;color:var(--t2);font:700 12px var(--sans)}
  body.en-token #view-detail #dt-txn-filter button.on{color:var(--t1);background:var(--edge) !important}
  body.en-token #view-detail .dt-txn-head{background:none;border:0;font:500 11.5px var(--sans);letter-spacing:.02em;color:var(--t3);padding:6px 16px;min-height:29px}
  body.en-token #view-detail .dt-txn-row{min-height:54px;padding:8px 16px;gap:16px;font:500 14px var(--sans);color:var(--t1);border-bottom:var(--bw) solid var(--hair)}
  body.en-token #view-detail .dt-txn-row:last-child{border-bottom:0}
  body.en-token #view-detail .dt-txn-row .t-meme{width:22px;height:22px;border-radius:50%}
  body.en-token #view-detail .dt-txn-row .t-acct{gap:10px;font-weight:500}
  body.en-token #view-detail .dt-txn-row .t-type{font-weight:600;text-transform:capitalize}
  body.en-token #view-detail .dt-txn-row .t-usd{font-weight:600}
  body.en-token #view-detail .dt-txn-row .t-sub,body.en-token #view-detail .dt-txn-row .t-age{font:400 12px var(--sans);color:var(--t2)}
  body.en-token #view-detail .dt-txn-row .ar{font-family:var(--sans)}
  .dt-tab-n{color:var(--t3);font-weight:500}
}
/* El panel con la forma exacta del menu: etiquetas .lbl, filas .ni con icono y filas de token del mismo alto */
body.en-token:not(.sb-menu) #sb #dt-side{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;padding:0;gap:1px}
#sb #dt-side .lbl{padding-top:var(--s4)}
#sb #dt-side .dt-side-list{display:flex;flex-direction:column;flex:1 1 auto;min-height:220px;overflow-y:auto;scrollbar-width:thin;gap:1px;padding:2px 0 var(--s2)}
#sb #dt-side .dt-side-list[hidden]{display:none}
#sb #dt-side .dt-tk{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s3);align-items:center;min-height:44px;padding-inline:var(--s3);border-radius:var(--r-sm);color:var(--t2);text-decoration:none}
#sb #dt-side .dt-tk:hover{background:var(--surface-2);color:var(--t1)}
#sb #dt-side .dt-tk.on{background:var(--accent-dim);color:var(--t1);position:relative}
#sb #dt-side .dt-tk.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:var(--r-full);background:var(--accent)}
#sb #dt-side .dt-tk-img{width:28px;height:28px;border-radius:50%;background:var(--surface-3);overflow:hidden}
#sb #dt-side .dt-tk-m b{font-size:var(--fs-sm);font-weight:500;color:var(--t1)}
#sb #dt-side .dt-tk-m span,#sb #dt-side .dt-tk-r span{font:11px var(--mono);color:var(--t3)}
#sb #dt-side .dt-tk-r b{font:600 12px var(--mono);color:var(--t1)}
#sb #dt-side .dt-tk-r b i{font-style:normal;color:var(--t3);font-weight:500}
#sb #dt-side .dt-al,#sb #dt-side .dt-fp,#sb #dt-side .dt-ld{padding:8px var(--s3);border-radius:var(--r-sm)}
#sb #dt-side .dt-side-empty{padding:12px var(--s3);text-align:left}

/* ═══ Una sola proporcion para toda la pagina (2026-09-05): menu 248 · centro flexible · carril derecho --rail-r ═══
   Home (lista de tokens), ficha del token (chart y detalles) y Community (posts) comparten el mismo carril
   derecho, el mismo hueco de 12 px y el mismo anclaje bajo la cabecera y la fila de dex. */
:root{--rail-r:340px}
@media (min-width:1024px) and (max-width:1279px){:root{--rail-r:300px}}
@media (min-width:768px){
  /* Home */
  #view-beta .bt-grid{grid-template-columns:minmax(0,1fr) var(--rail-r);gap:12px}
  #view-beta .bt-rail{margin-top:0;position:sticky;top:calc(var(--chrome-h) + var(--dexbar-h) + var(--s3));max-height:calc(100vh - var(--chrome-h) - var(--dexbar-h) - var(--s3) * 2);overflow-y:auto;scrollbar-width:none}
  /* Community */
  body.en-comunidad .ct{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-r);gap:12px;align-items:start}
  body.en-comunidad #fd{flex:none;min-width:0;max-width:none}
  body.en-comunidad #fd-rail{display:block;flex:none;width:auto;position:sticky;top:calc(var(--chrome-h) + var(--dexbar-h) + var(--s3));max-height:calc(100vh - var(--chrome-h) - var(--dexbar-h) - var(--s3) * 2);overflow-y:auto;scrollbar-width:none;padding-block:0}
  /* Ficha del token */
  body.en-token #view-detail .detail-layout{grid-template-columns:minmax(0,1fr) var(--rail-r);gap:12px}
  body.en-token #view-detail .dt-card{top:calc(var(--chrome-h) + var(--dexbar-h) + var(--s3));max-height:calc(100vh - var(--chrome-h) - var(--dexbar-h) - var(--s3) * 2)}
}

/* Mismo aire a los dos lados del centro: 12 px con el menu, como los 12 px con el carril derecho (2026-09-05).
   El centro NO se mueve ni crece: es el menu el que pasa de 248 a 268 px y se acerca; asi sus filas ganan 20 px. */
@media (min-width:768px) and (max-width:1023px){:root{--nav-w:200px;--rail-r:260px}}   /* tablet compacto */
@media (min-width:1024px) and (max-width:1279px){:root{--nav-w:220px}}
@media (min-width:1280px){:root{--nav-w:268px}}
@media (min-width:768px){
  .mn .ct,.ct{padding-left:var(--s3)}
  .banner{margin-left:var(--s3)}
  .pills{padding-left:var(--s3)}
}
/* El contenido del menu empieza a 14 px del borde, como el contenido de los recuadros del carril derecho:
   6 px de relleno en la barra + 8 px dentro de cada fila = 14 hasta el icono, el avatar o la etiqueta. */
@media (min-width:768px){
  .sb{padding:14px 6px var(--s8)}
  nav#sb .ni,.sb .ni,.sb-com a,#sb #dt-side .dt-tk{padding-inline:8px}
  nav#sb .ni svg{margin-left:0}
  .sb .lbl,#sb #dt-side .lbl{padding-inline:8px}
  #sb #dt-side .dt-side-empty,#sb #dt-side .dt-al,#sb #dt-side .dt-fp,#sb #dt-side .dt-ld{padding-inline:8px}
  body.en-token:not(.sb-menu) #sb #dt-side{margin:0}
}

/* Tus posiciones (fomo): sin recuadro general; titulo con cuenta y pildoras
   Open/Closed; cada token en su propio recuadro; el rayo abre las acciones
   rapidas y al pasar el raton sale la tarjeta del token. */
#view-detail .dt-pos{margin:0;padding:0;background:none;border:0}
.dt-pos-hd{display:flex;justify-content:space-between;align-items:center;padding:0 8px;margin:0 0 8px}
.dt-pos-hd b{font:500 16px var(--sans);color:var(--t1)}
.dt-pos-n{font:500 14px var(--sans);color:var(--t3);margin-left:8px}
.dt-pos-tabs{display:flex;background:none;border:var(--bw) solid var(--hair);border-radius:8px;padding:2px}
.dt-pos-tabs button{display:flex;align-items:center;gap:6px;min-height:0;background:none;border:0;color:var(--t3);font:700 12px var(--sans);line-height:16px;padding:2px 6px;border-radius:6px;cursor:pointer}
.dt-pos-tabs button i{display:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.dt-pos-tabs button.on{color:var(--accent);background:var(--accent-dim)}
.dt-pos-tabs button.on i{display:block}
#dt-pos-body{display:flex;flex-direction:column;gap:2px;padding:0;background:none;border:0;border-radius:0}
#dt-pos-body .dt-side-empty{padding:12px 8px}
.dt-pr-w{position:relative}
.dt-pr{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:8px;background:none;border:0;cursor:pointer;transition:padding-right .15s ease-out,background .15s}
.dt-pr:hover,.dt-pr.on,.dt-pr:focus-within,.dt-pr-w.abierta .dt-pr{background:var(--surface-2)}
.dt-pr:hover,.dt-pr:focus-within,.dt-pr-w.abierta .dt-pr{padding-right:56px}
.dt-pr:focus{outline:none}
.dt-pr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dt-pr-img{position:relative;width:36px;height:36px;border-radius:50%;background:var(--surface-3);overflow:hidden;display:grid;place-items:center;font:600 14px var(--sans);color:var(--t3);flex:0 0 auto}
.dt-pr-img::before{content:attr(data-l)}
.dt-pr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dt-pr-m,.dt-pr-r{display:flex;flex-direction:column;gap:1px;min-width:0}
.dt-pr-m b{font:500 14px var(--sans);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-pr-m span{font:12px var(--mono);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-pr-r{align-items:flex-end}
.dt-pr-r b{font:500 14px var(--sans);color:var(--t1);white-space:nowrap}
.dt-pr-r span{font:12px var(--mono);color:var(--t3);white-space:nowrap}
.dt-pr-r .up,.dt-pr-r b.up{color:var(--up)}.dt-pr-r .down,.dt-pr-r b.down{color:var(--down)}
.dt-pr-flash{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:6px;background:var(--t1);color:var(--bg);display:grid;place-items:center;opacity:0;cursor:pointer;transition:opacity .15s,transform .16s ease-out}
.dt-pr-flash:active{transform:translateY(-50%) scale(.95)}
.dt-pr-flash svg{width:16px;height:16px}
.dt-pr-flash svg+svg{display:none}
.dt-pr:hover .dt-pr-flash,.dt-pr:focus-within .dt-pr-flash,.dt-pr-w.abierta .dt-pr-flash{opacity:1}
.dt-pr-w.abierta .dt-pr-flash{background:var(--surface-3);color:var(--t1);border:var(--bw) solid var(--edge)}
.dt-pr-w.abierta .dt-pr-flash svg{display:none}
.dt-pr-w.abierta .dt-pr-flash svg+svg{display:block}
.dt-pr-acts{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}
.dt-pr-w.abierta .dt-pr-acts{grid-template-rows:1fr}
.dt-pr-acts>div{min-height:0;overflow:hidden}
.dt-pr-al{display:flex;align-items:center;gap:12px;padding:0 0 0 12px}
.dt-pr-al:first-child{padding-top:8px}
.dt-pr-al:last-child{padding-bottom:8px}
.dt-pr-al+.dt-pr-al{margin-top:8px}
.dt-pr-al>span{flex:0 0 auto;font:500 14px var(--sans)}
.dt-pr-al>span.up{color:var(--up)}.dt-pr-al>span.down{color:var(--down)}
.dt-pr-al button{flex:1 1 0;min-width:0;height:36px;min-height:0;padding:0;border:0;border-radius:8px;background:var(--surface-2);color:var(--t3);font:700 14px var(--sans);cursor:pointer;white-space:nowrap;transition:transform .16s ease-out}
.dt-pr-al button+button{margin-left:8px}
.dt-pr-al button:hover{background:var(--surface-3);color:var(--t1)}
.dt-pr-al button:active{transform:scale(.97)}
.dt-pr-al button.hot{color:var(--down)}
@media (hover:none){.dt-pr-flash{opacity:1}.dt-pr{padding-right:56px}}
/* Tarjeta del token al pasar el raton por una posicion */
.dt-tip[hidden]{display:none}   /* el display:flex de abajo ganaba al atributo hidden y la tarjeta no se cerraba */
.dt-tip{position:fixed;z-index:80;width:280px;padding:12px;border-radius:16px;background:var(--surface-2);border:var(--bw) solid var(--hair);box-shadow:0 16px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px}
.dt-tip-top{display:flex;justify-content:space-between;align-items:flex-start}
.dt-tip-top a{display:block;line-height:0}
.dt-tip-av{width:40px;height:40px;font-size:16px}
.dt-tip-star{width:20px;height:20px;min-height:0;padding:0;border:0;background:none;color:var(--t3);cursor:pointer}
.dt-tip-star svg{width:20px;height:20px;display:block}
.dt-tip-star:hover{color:var(--t1)}
.dt-tip-star.on{color:var(--warn)}.dt-tip-star.on svg{fill:currentColor}
.dt-tip-l1,.dt-tip-l2{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.dt-tip-l1 a{font:500 14px var(--sans);color:var(--t1);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-tip-l1 a:hover{opacity:.8}
.dt-tip-l1 span{font:500 14px var(--mono);color:var(--t1);white-space:nowrap;flex:0 0 auto}
.dt-tip-l2 span:first-child{font:500 12px var(--sans);color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-tip-l2 span:last-child{font:12px var(--mono);flex:0 0 auto}
.dt-tip-l2 .up{color:var(--up)}.dt-tip-l2 .down{color:var(--down)}
.dt-tip-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.dt-tip-row>span{font:500 12px var(--sans);color:var(--t2);white-space:nowrap;flex:0 0 auto}
.dt-tip-row>i{flex:1 1 auto;border-bottom:1px dashed var(--edge);min-width:12px}
.dt-tip-row>b{font:500 12px var(--mono);color:var(--t1);white-space:nowrap;flex:0 0 auto}
.dt-tip-row button{width:16px;height:16px;min-height:0;padding:0;border:0;background:none;color:var(--t3);cursor:pointer;flex:0 0 auto}
.dt-tip-row button svg{width:16px;height:16px;display:block}
.dt-tip-row button:hover{color:var(--t1)}
/* Mi posicion en este token (encima de About) con el redactor de tesis */
#view-detail .dt-mypos{padding:8px;display:flex;flex-direction:column;gap:8px}
#view-detail .dt-mypos[hidden]{display:none}
.dt-mp-top{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:4px 8px 8px}
.dt-mp-img{width:32px;height:32px;font-size:13px}
.dt-mp-m,.dt-mp-r{display:flex;flex-direction:column;gap:2px;min-width:0}
.dt-mp-m b{font:500 14px var(--sans);color:var(--t1)}
.dt-mp-m span{font:12px var(--mono);color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-mp-r{align-items:flex-end}
.dt-mp-r b{font:500 14px var(--sans);color:var(--t1)}
.dt-mp-r span{font:12px var(--mono);color:var(--t2)}
.dt-mp-r .up{color:var(--up)}.dt-mp-r .down{color:var(--down)}
.dt-mp-row{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding-top:4px}
.dt-mp-row span{font:500 12px var(--sans);color:var(--t2)}
.dt-mp-row b{font:500 12px var(--mono);color:var(--t1)}
.dt-mp-th{background:var(--surface-2);border-radius:12px;padding:10px 6px 6px 10px;display:flex;flex-direction:column;gap:8px}
.dt-mp-th-hd{display:flex;align-items:center;gap:6px;min-width:0}
.dt-mp-av{position:relative;width:20px;height:20px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font:600 10px var(--sans);color:var(--t3);overflow:hidden;flex:0 0 auto}
.dt-mp-av::before{content:attr(data-l)}
.dt-mp-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dt-mp-u{font:500 12px var(--sans);color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-mp-tag{flex:0 0 auto;font:700 10px var(--sans);color:var(--accent);background:var(--accent-dim);border-radius:4px;padding:1px 4px;line-height:13px}
.dt-mp-ta{width:100%;display:block;background:none;border:0;outline:none;resize:none;color:var(--t1);font:400 14px var(--sans);line-height:20px;min-height:20px;padding:0;overflow:hidden}
.dt-mp-ta::placeholder{color:var(--t3)}
.dt-mp-ft{display:flex;align-items:center;gap:12px}
.dt-mp-vis{display:flex;align-items:center;gap:6px;font:500 12px var(--sans);color:var(--t3);margin-right:auto}
.dt-mp-vis svg{width:16px;height:16px}
.dt-mp-cnt{font:400 12px var(--mono);color:var(--t3)}
.dt-mp-post{min-height:0;height:30px;padding:0 14px;border:var(--bw) solid var(--edge);border-radius:var(--r-full);background:var(--surface-3);color:var(--t2);font:700 13px var(--sans);cursor:pointer;transition:transform .16s ease-out,background .15s,color .15s}
.dt-mp-post:disabled{cursor:default}
.dt-mp-post:not(:disabled){background:#fff;color:#000;border-color:#fff}
.dt-mp-post:not(:disabled):hover{background:#ECEFF3}
.dt-mp-post:not(:disabled):active{transform:scale(.97)}
/* Menu con la letra de X: 20 px, filas de 50 e iconos de 24 (el panel de tokens de la ficha no cambia) */
.sb a.ni,.sb .ni,.sb-com a{font-size:20px;min-height:50px;gap:14px}
.sb a.ni svg,.sb .ni svg,.sb-com a svg{width:24px;height:24px}
.sb .ni.on::before{height:24px}
/* Auto-Trade fuera de la ficha (peticion del usuario, 2026-09-06): el panel
   sigue en index.html por si vuelve, pero no se muestra ni con wallet conectada. */
#at-panel,.at-panel{display:none !important}

/* ═══ Responsive como fomo (2026-09-06): desde 768 px las tres columnas
   siguen en pantalla y se compactan; solo el telefono (≤767) apila. ═══ */
@media (min-width:768px){
  .top > .mbtn{display:none}                                   /* el menu ya es columna: sobra la hamburguesa */
  .sb{transform:none;visibility:visible}                        /* anula el cajon de index.html */
  body.en-token #view-detail .detail-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-r);gap:12px}
  body.en-token #view-detail .dt-card{position:sticky;top:calc(var(--chrome-h) + var(--dexbar-h) + var(--s3));max-height:calc(100vh - var(--chrome-h) - var(--dexbar-h) - 24px);overflow-y:auto;order:0;margin:0}
}
@media (min-width:768px) and (max-width:1023px){
  .mn .ct,.ct{padding:0 8px 16px}
  .banner{margin-left:8px}.pills{padding-left:8px}
  body.en-token #view-detail .detail-layout{gap:8px}
  /* cabecera del token: solo la linea del nombre; las cifras no caben (fomo tampoco las ensena aqui) */
  body.en-token #dt-stats{display:none}
  .dt-hero{min-height:0;margin:0 0 4px}
  .dt-hero-txt{flex:1 1 auto;max-width:none;min-width:0}
  .dt-hero-l1{flex-wrap:wrap;white-space:normal;row-gap:2px}
  .dt-hero-sym{max-width:140px}
  /* recuadro de compra estrecho (260): cifras y presets mas pequenos */
  #view-detail #dt-box-trade{padding:10px}
  #view-detail #dt-box-trade .dt-amt{padding:12px}
  #view-detail #dt-box-trade .dt-amt input{font-size:24px}
  #view-detail #dt-box-trade .dt-amt-hint{font-size:13px}
  #view-detail #dt-box-trade .dt-presets{gap:4px;grid-template-columns:repeat(4,1fr) 28px}
  #view-detail #dt-box-trade .dt-presets button{font-size:11px;padding:0 2px}
  #view-detail #dt-box-about{padding:12px}
  #view-detail #dt-box-about .dt-tf{gap:4px}
  /* tabla de trades: ACCOUNT · TYPE · USD · TIME · TXN, lo demas se esconde */
  body.en-token #view-detail .dt-txn-row{grid-template-columns:minmax(88px,1fr) 36px 56px 44px 24px;gap:6px;padding:6px 10px;font-size:12.5px}
  body.en-token #view-detail .dt-txn-row>span:nth-child(4),body.en-token #view-detail .dt-txn-row>span:nth-child(5),
  body.en-token #view-detail .dt-txn-row>span:nth-child(6),body.en-token #view-detail .dt-txn-row>span:nth-child(8),
  body.en-token #view-detail .dt-txn-row>a:nth-child(5),body.en-token #view-detail .dt-txn-row>a:nth-child(6){display:none}
  body.en-token #view-detail .dt-txn-row.r6{grid-template-columns:minmax(100px,1.4fr) 1fr 1fr 1fr}
  body.en-token #view-detail .dt-txn-row.r6>span:nth-child(4){display:none}
  body.en-token #view-detail .dt-txn-row.r6.rh{grid-template-columns:minmax(100px,1.4fr) 1fr 1fr 26px}
  body.en-token #view-detail .dt-txn-row.r6>span:nth-child(5){display:block}
  #view-detail .dt-chart-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
  #view-detail .dt-chart-toolbar::-webkit-scrollbar{display:none}
  /* tabla de trades y pestanas: scroll horizontal propio si aun no cabe */
  body.en-token #view-detail .dt-txn-wrap{overflow-x:auto}
  /* perfil compacto (venia del modo telefono) */
  .pf-layout{display:block}
  #pf-side{display:none!important}
  .pf-row{grid-template-columns:minmax(120px,1.6fr) 1fr 56px 52px;gap:6px}
  .pf-row>span:nth-child(3),.pf-row>span:nth-child(4){display:none}
  /* menu de 200: la letra de X (20 px) parte "DEX Aggregator" en dos lineas; aqui 17 px */
  .sb a.ni,.sb .ni,.sb-com a{font-size:17px;min-height:44px;gap:12px;white-space:nowrap}   /* "Sniper Radar NEW" en una linea */
  .sb a.ni svg,.sb .ni svg,.sb-com a svg{width:22px;height:22px}
}
/* Bordes mas finos: en pantallas de 2x o mas, medio pixel CSS = un pixel fisico */
@media (min-resolution:1.5dppx){:root{--bw:.5px}}
/* Home y Community tambien a tres columnas en tablet (768-1023): la lista
   de tokens se queda con nombre, market cap, 24h, riesgo y estrella; el
   chart vuelve desde 900 px. Community lleva su carril como en escritorio. */
@media (min-width:768px) and (max-width:1023px){
  #view-beta .bt-grid,body.en-comunidad .ct{gap:8px}
  /* 768-899: centro de ~250 px: avatar, nombre, market cap y 24h sin etiquetas, estrella */
  #view-beta .bt-row{grid-template-columns:36px minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.8fr) 28px;gap:6px;padding:var(--s2) var(--s1)}
  #view-beta .bt-row .bt-img{width:36px;height:36px;font-size:14px}
  #view-beta .bt-row .bt-nums .bt-num[data-k="liq"],#view-beta .bt-row .bt-nums .bt-num[data-k="age"],
  #view-beta .bt-row .bt-nums .bt-num[data-k="holders"],#view-beta .bt-row .bt-spark,#view-beta .bt-row .bt-ath,#view-beta .bt-row .bt-risk{display:none}
  #view-beta .bt-row .bt-num{min-width:0;overflow:hidden;margin:0;padding:2px 0}
  #view-beta .bt-row .bt-num i{display:none}
  #view-beta .bt-row .bt-fav{width:28px;height:28px}
  #view-beta .bt-strip{gap:var(--s2) var(--s3)}
}
@media (min-width:900px) and (max-width:1023px){
  /* 900-1023: centro de ~400 px: vuelven las etiquetas y el riesgo */
  #view-beta .bt-row{grid-template-columns:40px minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.7fr) auto 28px;gap:var(--s2)}
  #view-beta .bt-row .bt-img{width:40px;height:40px;font-size:15px}
  #view-beta .bt-row .bt-num i{display:block}
  #view-beta .bt-row .bt-risk{display:inline-flex;padding:0 6px;font-size:11px}
}

/* ═══ Ajustes del 2026-09-06 (madrugada) ═══ */
/* Los recuadros del carril derecho se separan (antes solo tenian hueco desde 1280) */
@media (min-width:768px){
  body.en-token #view-detail .dt-card{display:flex;flex-direction:column;gap:12px;background:none;border:0}
  /* El banner de Home y Community no se pega al contenido ni al carril */
  #banner,.banner{margin-bottom:12px}
}
@media (min-width:768px) and (max-width:1023px){
  body.en-token #view-detail .dt-card{gap:8px}
  #banner,.banner{margin-bottom:8px}
}
/* Cabecera del token como la de fomo: avatar 56, simbolo 20, iconos en
   cuadraditos de 32, Market cap grande y las cifras en cajas de 10 de radio. */
@media (min-width:1024px){
  .dt-hero{min-height:64px;gap:14px;margin:0 0 8px}
  .dt-hero-av{width:56px;height:56px}
  .dt-hero-txt{gap:6px;max-width:460px}
  .dt-hero-l1{font:600 20px/1.2 var(--sans);gap:6px}
  .dt-hero-sym{max-width:220px}
  .dt-hero-dex{width:22px;height:22px}
  .dt-hero-sep{height:20px;margin:0 6px}
  .dt-hero-links,.dt-hero-acts{gap:6px}
  .dt-hero-links a,.dt-hero-acts .dt-chip,.dt-hero-acts .dt-fav{width:32px;height:32px;border-radius:8px;background:var(--surface-2);color:var(--t2)}
  .dt-hero-links a svg,.dt-hero-acts .dt-chip svg{width:18px;height:18px}
  .dt-hero-acts .dt-fav{font-size:18px}
  .dt-hero-acts #dt-discuss,.dt-hero-acts #dt-share2{background:var(--surface-2) !important;width:32px;height:32px;border-radius:8px}
  .dt-hero-acts #dt-discuss:hover,.dt-hero-acts #dt-share2:hover,.dt-hero-links a:hover,.dt-hero-acts .dt-fav:hover{background:var(--surface-3) !important;color:var(--t1)}
  .dt-hero-acts #dt-discuss svg,.dt-hero-acts #dt-share2 svg{width:18px !important;height:18px !important}
  .dt-hero-l2{font:500 14px/1.3 var(--sans);gap:10px}
  .dt-hero-l2 .dt-hero-sep{height:14px}
  .dt-hero-ca .dt-chip,.dt-hero-dev .dt-chip{font-size:14px}
  .dt-hero #dt-stats{gap:10px}
  .dt-stat{min-width:104px;height:auto;padding:8px 16px;border-radius:10px;justify-content:center}
  .dt-stat-l{font-size:14px;color:var(--t2);margin:0 0 2px}
  .dt-stat-v{font:600 22px/1.15 var(--sans)}
  .dt-stat:first-child{padding:0 8px 0 0;min-width:0}
  .dt-stat:first-child .dt-stat-v{font-size:28px}
}
/* Cabecera del token, medidas de la captura de fomo (2026-09-06): avatar 56,
   simbolo 22, iconos en cuadrados de 34, linea 2 de 15 con barras, contrato
   con el icono de copiar DETRAS, sin chip de dev; Market cap 30 y cajas de
   radio 12 con etiqueta 15 y valor 24. */
@media (min-width:1024px){
  .dt-hero{min-height:84px;gap:16px;margin:0 0 10px}
  .dt-hero-txt{gap:8px}
  .dt-hero-l1{font:700 22px/1.2 var(--sans);gap:8px}
  .dt-hero-sep{height:22px;margin:0 8px;background:var(--edge)}
  .dt-hero-links,.dt-hero-acts{gap:8px}
  .dt-hero-links a,.dt-hero-acts .dt-chip,.dt-hero-acts .dt-fav,.dt-hero-acts #dt-discuss,.dt-hero-acts #dt-share2{width:34px;height:34px;border-radius:8px}
  .dt-hero-l2{font:500 15px/1.3 var(--sans);gap:0;color:var(--t2)}
  .dt-hero-l2 .dt-hero-sep{height:18px;margin:0 12px}
  .dt-hero-name{max-width:220px}
  .dt-hero-ca .dt-chip{flex-direction:row-reverse;gap:8px;font-size:15px;color:var(--t3)}
  .dt-hero-ca .dt-chip svg{width:16px;height:16px;padding:0;border-radius:0;background:none;color:inherit}
  .dt-hero-dev{display:none}
  .dt-hero #dt-stats{gap:12px}
  .dt-stat{min-width:112px;padding:10px 20px;border-radius:12px}
  .dt-stat-l{font-size:15px;margin:0 0 2px}
  .dt-stat-v{font:700 24px/1.15 var(--sans)}
  .dt-stat:first-child{padding:0 12px 0 0}
  .dt-stat:first-child .dt-stat-l{font-size:16px}
  .dt-stat:first-child .dt-stat-v{font-size:30px}
}
/* Ficha sin "Back to Feed": la cabecera del token sube hasta la fila de dex;
   el aviso (sniper, ballena, dev, dead) solo ocupa sitio cuando existe. */
@media (min-width:768px){
  body.en-token #view-detail .back-btn{display:none}
  body.en-token #view-detail .detail-top{margin:0;gap:0;min-height:0}
  body.en-token #view-detail .dt-alert-bar,body.en-token #view-detail .dt-dead-tag{margin:0 0 10px}
}
/* Botones de la cabecera todos iguales (discutir y compartir traian 20 px con !important)
   y cifras compactas para que quepan sin scroll. */
@media (min-width:1024px){
  .dt-hero{gap:12px;margin:0 0 8px;min-height:72px}
  .dt-hero-txt{gap:6px}
  .dt-hero-acts #dt-discuss,.dt-hero-acts #dt-share2{width:34px !important;height:34px !important;display:inline-flex !important;align-items:center;justify-content:center}
  .dt-hero-acts #dt-discuss > svg,.dt-hero-acts #dt-share2 > svg,.dt-hero-links a > svg{width:18px !important;height:18px !important;min-width:18px}
  .dt-hero-acts .dt-fav svg{width:18px;height:18px}
  .dt-hero-ca .dt-chip{flex-direction:row;gap:8px;font-size:14px;color:var(--t3)}
  .dt-ca-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--surface-2);color:var(--t2)}
  .dt-ca-ico svg{width:15px;height:15px;display:block}
  .dt-hero-l2{font-size:14px}
  .dt-hero #dt-stats{gap:8px}
  .dt-stat{min-width:0;padding:6px 12px;border-radius:10px}
  .dt-stat-l{font-size:12px;margin:0 0 1px;color:var(--t2)}
  .dt-stat-v{font:700 16px/1.2 var(--sans)}
  .dt-stat:first-child{padding:0 8px 0 0}
  .dt-stat:first-child .dt-stat-l{font-size:12px}
  .dt-stat:first-child .dt-stat-v{font-size:22px}
}
/* Un solo piso (2026-09-06): nombre, botones y detalles a la izquierda, y las
   cifras a la derecha en la misma linea con scroll horizontal. */
@media (min-width:1024px){
  .dt-hero{flex-wrap:nowrap;align-items:center;min-height:72px}
  .dt-hero #dt-stats{flex:1 1 auto;min-width:0;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}   /* el desvanecido lo pone [data-fade] */
  .dt-hero #dt-stats::-webkit-scrollbar{display:none}
  .dt-stat{padding:5px 11px}
  .dt-stat-l{font-size:11.5px}
  .dt-stat-v{font-size:15px}
  .dt-stat:first-child .dt-stat-v{font-size:20px}
  /* la wallet del developer vuelve a la linea 2 */
  .dt-hero-dev{display:inline-flex}
  /* botones identicos y centrados: el de discutir traia un hueco tras el icono que lo descentraba */
  .dt-hero-links a,.dt-hero-acts > *{width:34px !important;height:34px !important;min-height:0 !important;padding:0 !important;margin:0 !important;gap:0 !important;border:0 !important;border-radius:8px !important;background:var(--surface-2) !important;color:var(--t2) !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;font-size:18px !important}
  .dt-hero-links a > svg,.dt-hero-acts > * > svg{width:18px !important;height:18px !important;display:block !important;margin:0 !important}
  .dt-hero-acts > * > :not(svg){display:none !important}
  .dt-hero-links a:hover,.dt-hero-acts > *:hover{background:var(--surface-3) !important;color:var(--t1) !important}
}

/* ═══ Barra permanente al pie (2026-09-06) ═══ */
:root{--ft-h:30px}
.ft{position:fixed;left:0;right:0;bottom:0;height:var(--ft-h);z-index:120;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;background:var(--bg);border-top:var(--bw) solid var(--hair);font:500 12px var(--sans)}
.ft-l,.ft-r{display:flex;align-items:center;min-width:0}
.ft-l{gap:16px;overflow:hidden}
.ft-r{gap:12px;flex:0 0 auto}
.ft-sol{display:inline-flex;align-items:center;gap:6px;color:var(--t1);text-decoration:none;white-space:nowrap}
.ft-sol:hover{opacity:.85}
.ft-sol-i{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#9945FF,#14F195);flex:0 0 auto}
.ft-sol b{font:600 12px var(--mono)}
.ft-sol span.up{color:var(--up)}.ft-sol span.down{color:var(--down)}
.ft-i{display:inline-flex;align-items:center;gap:6px;color:var(--t3);white-space:nowrap}
.ft-i em{font-style:normal}
.ft-i b{font:600 12px var(--mono);color:var(--t2)}
.ft .dot{width:6px;height:6px;border-radius:50%;background:var(--t3);display:inline-block;flex:0 0 auto}
.ft-r a{color:var(--t3);text-decoration:none}
.ft-r a:hover{color:var(--t1)}
.ft-x{display:inline-flex}
.ft-x svg{width:14px;height:14px;display:block}
@media (max-width:767px){.ft{display:none}}   /* en telefono manda la barra Buy/Sell */
@media (min-width:768px){
  .sb{bottom:var(--ft-h)}
  .mn{padding-bottom:var(--ft-h)}
  #view-beta .bt-rail,body.en-comunidad #fd-rail,body.en-token #view-detail .dt-card{max-height:calc(100vh - var(--chrome-h) - var(--dexbar-h) - var(--ft-h) - 24px)}
}
/* Cabecera del token a la altura de las cajas de cifras (nada mas alto que ellas) */
@media (min-width:1024px){
  .dt-hero{min-height:0;align-items:center;gap:10px;margin:0 0 8px}
  .dt-hero-av{width:40px;height:40px}
  .dt-hero-txt{gap:2px}
  .dt-hero-l1{font:700 17px/1.25 var(--sans);gap:6px}
  .dt-hero-sym{max-width:180px}
  .dt-hero-dex{width:18px;height:18px}
  .dt-hero-sep{height:16px;margin:0 6px}
  .dt-hero-links a,.dt-hero-acts > *{width:28px !important;height:28px !important;border-radius:7px !important}
  .dt-hero-links a > svg,.dt-hero-acts > * > svg{width:16px !important;height:16px !important}
  .dt-hero-l2{font:500 12.5px/1.25 var(--sans)}
  .dt-hero-l2 .dt-hero-sep{height:12px;margin:0 8px}
  .dt-ca-ico{width:22px;height:22px}
  .dt-ca-ico svg{width:13px;height:13px}
  .dt-hero-dev{display:none}   /* la wallet del dev vive ahora dentro de About */
  .dt-stat{padding:5px 11px}
}
/* About desplegable: ficha del token con guias punteadas y "View more" */
.dt-more{display:flex;flex-direction:column;margin-top:6px}
.dt-mrow{display:flex;align-items:center;gap:8px;padding:5px 0;min-width:0}
.dt-mrow > span{font:500 13px var(--sans);color:var(--t2);white-space:nowrap;flex:0 0 auto}
.dt-mrow > i{flex:1 1 auto;border-bottom:var(--bw) dashed var(--edge);min-width:12px}
.dt-mrow > b{font:500 13px var(--mono);color:var(--t1);white-space:nowrap;flex:0 0 auto}
.dt-mrow .dt-m-copy{width:16px;height:16px;min-height:0;padding:0;border:0;background:none;color:var(--t3);cursor:pointer;flex:0 0 auto}
.dt-mrow .dt-m-copy svg{width:16px;height:16px;display:block}
.dt-mrow .dt-m-copy:hover{color:var(--t1)}
#dt-mrow-dev #dt-creator{background:none !important;border:0 !important;padding:0 !important;margin:0 !important;height:auto !important;min-height:0 !important;font:500 13px var(--mono) !important;color:var(--t1) !important;gap:6px !important;flex:0 0 auto}
#dt-mrow-dev #dt-creator img,#dt-mrow-dev #dt-creator .t-meme{width:16px;height:16px;border-radius:50%}
#dt-mrow-dev #dt-creator:hover{color:var(--accent) !important}
.dt-more-wrap{display:flex;justify-content:center;margin-top:10px}
.dt-more-btn{height:30px;min-height:0;padding:0 14px;border:0;border-radius:var(--r-full);background:var(--surface-2);color:var(--t2);font:600 13px var(--sans);cursor:pointer;transition:transform .16s ease-out,background .15s}
.dt-more-btn:hover{background:var(--surface-3);color:var(--t1)}
.dt-more-btn:active{transform:scale(.97)}
/* La cabecera no pasa de la altura de las cajas de cifras: los botones marcan
   la primera linea (24) y la segunda va en una sola linea de 16 -> 41 px. */
@media (min-width:1024px){
  .dt-hero-txt{gap:1px}
  .dt-hero-l1{font:700 16px/1.2 var(--sans);min-height:24px;align-items:center;gap:6px}
  .dt-hero-sym{max-width:170px}
  .dt-hero-dex{width:16px;height:16px}
  .dt-hero-sep{height:14px;margin:0 5px}
  .dt-hero-links a,.dt-hero-acts > *,
  .dt-hero-acts #dt-discuss,.dt-hero-acts #dt-share2{width:24px !important;height:24px !important;border-radius:6px !important}
  .dt-hero-links a > svg,.dt-hero-acts > * > svg,
  .dt-hero-acts #dt-discuss > svg,.dt-hero-acts #dt-share2 > svg{width:14px !important;height:14px !important}
  .dt-hero-l2{font:500 12px/1.3 var(--sans);height:16px;align-items:center;overflow:hidden;gap:0}
  .dt-hero-l2 .dt-hero-sep{height:11px;margin:0 8px}
  .dt-hero-name{max-width:150px}
  .dt-hero-ca .dt-chip{font-size:12px;gap:6px}
  .dt-ca-ico{width:16px;height:16px;border-radius:4px}
  .dt-ca-ico svg{width:11px;height:11px}
}
/* El atributo hidden SIEMPRE oculta. Sin esta regla cualquier display de un
   componente le gana por orden, y el elemento se queda visible con hidden
   puesto: paso con la tarjeta del token y con el desplegable de About, cuyo
   boton "View more" parecia de adorno porque el bloque nunca se escondia. */
[hidden]{display:none !important}

/* Difuminado de scroll (ui.js pone data-fade con el lado que aun tiene
   contenido). 28 px, y en cuanto se llega al final el borde vuelve a ser
   nitido. */
[data-fade]{--fade:28px}
[data-fade="b"]{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - var(--fade)),transparent)}
[data-fade="t"]{-webkit-mask-image:linear-gradient(0deg,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(0deg,#000 calc(100% - var(--fade)),transparent)}
[data-fade="tb"]{-webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(180deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
/* En horizontal el difuminado va DENTRO y el marco se queda entero: al degradado
   se le suman cuatro tiras opacas de un pelo sobre los cuatro bordes, asi que la
   linea del recuadro nunca se difumina. (En vertical si puede tapar la linea de
   arriba y la de abajo: es lo que se pidio.) */
[data-fade="r"],[data-fade="l"],[data-fade="lr"]{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%,100% var(--bw),100% var(--bw),var(--bw) 100%,var(--bw) 100%;
  mask-size:100% 100%,100% var(--bw),100% var(--bw),var(--bw) 100%,var(--bw) 100%;
  -webkit-mask-position:0 0,top,bottom,left,right;mask-position:0 0,top,bottom,left,right;
  -webkit-mask-composite:source-over;mask-composite:add;
}
[data-fade="r"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000)}
[data-fade="l"]{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - var(--fade)),transparent),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);mask-image:linear-gradient(270deg,#000 calc(100% - var(--fade)),transparent),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000)}
[data-fade="lr"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000)}

/* El contrato: solo el icono de copiar, sin cuadradito detras. */
@media (min-width:1024px){
  .dt-hero-ca .dt-chip .dt-ca-ico,.dt-ca-ico{display:inline-flex;align-items:center;width:auto;height:auto;min-width:0;padding:0;background:none !important;border-radius:0;color:var(--t3)}
  .dt-hero-ca .dt-chip .dt-ca-ico svg{width:15px;height:15px;padding:0;background:none;border-radius:0}
  .dt-hero-ca .dt-chip:hover .dt-ca-ico{color:var(--t1)}
}

/* Boton principal de compra: blanco, con el nombre del token, sin mayusculas
   forzadas ni espaciado de mono (lo traia .dt-wallet). */
#view-detail #dt-box-trade .dt-wallet,#trade-exec-btn{
  background:var(--t1);color:var(--bg);
  font:700 16px var(--sans);text-transform:none;letter-spacing:0;
}
#view-detail #dt-box-trade .dt-wallet:hover,#trade-exec-btn:hover{background:#fff;opacity:1}

/* ═══ Difuminado del carril CENTRAL (2026-09-07) ═══════════════════════════
   Los carriles laterales tienen scroll propio, asi que su desvanecido lo pone
   ui.js con una mascara. El centro no: se mueve con la pagina entera, y contra
   la barra de dex (arriba) y contra el pie (abajo) el contenido se cortaba a
   hueso. Se resuelve con dos pseudo-elementos PEGAJOSOS dentro de la propia
   columna: se quedan clavados en los dos bordes mientras el contenido pasa por
   debajo, y con margen negativo no ocupan ni un pixel de sitio. */
.ss-centro{position:relative}
.ss-centro::before,.ss-centro::after{
  content:'';display:none;position:sticky;z-index:4;height:34px;pointer-events:none;
  /* se estiran hasta los bordes del carril, tapando tambien su relleno lateral */
  margin-inline:calc(var(--s3) * -1);
}
.ss-centro.con-arriba::before{display:block;top:calc(var(--chrome-h) + var(--dexbar-h));margin-bottom:-34px;background:linear-gradient(180deg,var(--bg) 22%,transparent)}
.ss-centro.con-abajo::after{display:block;bottom:var(--ft-h);margin-top:-34px;background:linear-gradient(0deg,var(--bg) 22%,transparent)}
@media (max-width:767px){.ss-centro.con-abajo::after{bottom:0}}

/* Aire entre la barra de dex y el nombre del token: al quitar "Back to Feed"
   la cabecera quedo pegada a la fila de dex. */
@media (min-width:768px){
  body.en-token #view-detail{padding-top:var(--s3)}
  body.en-token #view-detail .dt-alert-bar,body.en-token #view-detail .dt-dead-tag{margin:0 0 var(--s3)}
}

/* ═══ Home: la fila nunca se sale del recuadro (2026-09-07) ═══════════════════
   La rejilla pedia ~940 px de centro y a 1440 solo hay 776: los ultimos campos
   (riesgo y estrella) se salian hasta 575 px por la derecha, encima del carril.
   Se corrige por tramos, quitando lo menos importante segun encoge, y se pone
   una red de seguridad para que NADA pueda volver a escaparse del contenedor. */
#view-beta .bt-lista,#view-beta .bt-row{max-width:100%}
#view-beta .bt-row{overflow:hidden}
#view-beta .bt-row > *{min-width:0}
/* 1280-1599: fuera holders y ATH */
@media (min-width:1280px) and (max-width:1599px){
  #view-beta .bt-row{grid-template-columns:40px minmax(0,1.3fr) repeat(4,minmax(52px,.7fr)) 88px 64px 28px;gap:var(--s2)}
  #view-beta .bt-row .bt-nums .bt-num[data-k="holders"],#view-beta .bt-row .bt-ath{display:none}
}
/* 1024-1279: ademas fuera la edad; quedan nombre, mcap, liquidez, 24h, chart, riesgo y estrella */
@media (min-width:1024px) and (max-width:1279px){
  #view-beta .bt-row{grid-template-columns:36px minmax(0,1.4fr) minmax(52px,.8fr) minmax(52px,.8fr) minmax(52px,.7fr) 72px 62px 26px;gap:var(--s2)}
  #view-beta .bt-row .bt-nums .bt-num[data-k="holders"],#view-beta .bt-row .bt-nums .bt-num[data-k="age"],#view-beta .bt-row .bt-ath{display:none}
  #view-beta .bt-row .bt-spark svg{width:72px}
  #view-beta .bt-risk{padding:0 6px;font-size:11px}
}

/* ═══ Filtros detras de un boton (2026-09-07) ═════════════════════════════════
   Los cuatro selectores ocupaban una fila entera —dos al estrechar— justo
   encima de la tabla, y a cierto ancho se descolocaban. Ahora: un boton, y al
   lado solo lo que esta puesto, como fichas quitables. */
#view-beta .bt-fbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3)}
#view-beta .bt-f-btn{display:inline-flex;align-items:center;gap:6px;height:32px;min-height:0;padding:0 12px;border:var(--bw) solid var(--hair);border-radius:var(--r-full);background:var(--surface-2);color:var(--t2);font:600 13px var(--sans);cursor:pointer;transition:transform .16s ease-out,background .15s,color .15s}
#view-beta .bt-f-btn svg{width:15px;height:15px}
#view-beta .bt-f-btn:hover{background:var(--surface-3);color:var(--t1)}
#view-beta .bt-f-btn:active{transform:scale(.97)}
#view-beta .bt-f-btn.on,#view-beta .bt-f-btn.activo{color:var(--t1);border-color:var(--edge)}
#view-beta .bt-f-n2{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);font:700 11px var(--sans);font-style:normal}
#view-beta .bt-f-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
#view-beta .bt-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;border-radius:var(--r-full);background:var(--surface-2);color:var(--t1);font:500 12px var(--sans);white-space:nowrap}
#view-beta .bt-chip button{width:18px;height:18px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--t3);font:400 15px/1 var(--sans);cursor:pointer}
#view-beta .bt-chip button:hover{background:var(--surface-3);color:var(--t1)}
/* El panel, al abrirse, es una tarjeta: no una fila mas de la pagina. */
#view-beta .bt-filtros{background:var(--surface-2);border:var(--bw) solid var(--hair);border-radius:var(--r-md);padding:var(--s3);margin:0 0 var(--s3)}
@media (max-width:767px){
  #view-beta .bt-filtros{padding:var(--s2)}
  #view-beta .bt-fbar{margin-bottom:var(--s2)}
}

/* ═══ Barra de la tabla de trades: nada cortado (2026-09-07) ══════════════════
   Las dos hileras de pestanas (Trades/Top Traders/Holders/Thesis y
   All/Buys/Sells/Devs) se salian del recuadro y se cortaban a hueso. Ahora la
   cabecera envuelve, y por debajo de 1280 las pestanas se aprietan en vez de
   desbordarse. La tabla, si aun no cabe, se desplaza DENTRO de su recuadro. */
#view-detail .dt-txn-hd{display:flex;align-items:center;flex-wrap:wrap;row-gap:6px}
#view-detail .dt-txn-hd > .dt-txn-tabs{max-width:100%}
#view-detail #dt-txn-filter{margin-left:auto}
body.en-token #view-detail .dt-txn-wrap{overflow-x:auto}
@media (max-width:1439px){
  #view-detail .dt-txn-tabs button{padding:0 var(--s2);font-size:12px}
  #view-detail .dt-txn-tabs button svg{width:13px;height:13px}
}
@media (max-width:1199px){
  /* Los rotulos largos estorban antes que los iconos: se van los textos de las
     pestanas de vista y queda el icono, que ya dice lo que es. */
  #view-detail #dt-txn-view button span{display:none}
  #view-detail #dt-txn-view button{padding:0 10px}
  #view-detail #dt-txn-filter{margin-left:0}
}

/* Las pestanas de Home se apretaban hasta dejar "Gai...", "Vol...", "Tal...":
   ilegibles. Mejor que se lean enteras y la fila se desplace de lado —ya lleva
   su difuminado— que ocho rotulos cortados. */
#view-beta .bt-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
#view-beta .bt-tabs::-webkit-scrollbar{display:none}
#view-beta .bt-tabs > button{flex:0 0 auto;white-space:nowrap}
@media (max-width:1279px){
  #view-beta .bt-tabs > button{padding:0 10px;font-size:12.5px}
}

/* ── El banner promocional se retira ───────────────────────────────────── */
/* Decia "NEW! Token Dashboard" y solo se podia cerrar por sesion: volvia en
   cada recarga. Se oculta por id, que gana a todas las reglas .banner sin
   necesidad de !important. El hueco de arriba lo pone .ct con su propio
   padding, y el banner esta fuera de .topbar-fixed, asi que no descoloca nada.
   El marcado sigue en index.html:1586 por si algun dia vuelve a hacer falta. */
#banner{display:none}

/* ── Monograma donde faltaba ────────────────────────────────────────────── */
/* Mismo patron que .dt-pr-img: la letra es texto del contenedor y la imagen se
   pinta encima en absoluto. Asi, si la imagen falta o falla, la letra queda al
   descubierto sin que el JS tenga que hacer nada. La cabecera de la ficha y la
   lista lateral eran los dos sitios que se quedaban con un circulo gris mudo.
   Van fuera del @media de escritorio a proposito: la ficha tambien existe en
   movil, y alli el circulo se quedaba sin estilo. */
.dt-hero-av{
  position:relative;display:grid;place-items:center;
  font:700 15px var(--sans);color:var(--t2);
}
.dt-hero-av::before{content:attr(data-l)}
.dt-hero-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dt-tk-img{
  position:relative;display:grid;place-items:center;
  font:700 13px var(--sans);color:var(--t2);
}
.dt-tk-img::before{content:attr(data-l)}
.dt-tk-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ── Solo la fila ──────────────────────────────────────────────────────── */
/* Lo unico recto de la lista es la fila: asi los tokens se separan entre si
   con una linea, no con capsulas encajadas. Todo lo demas —la tarjeta que
   envuelve la lista, el carril de pestañas, el boton de filtros, las fichas y
   el recuadro que destella con cada cambio— conserva su curva de siempre. */

/* ── La marca del dev en serie ─────────────────────────────────────────── */
/* Un token cuya wallet creadora ha lanzado otros N en 24 h. No es un veredicto,
   es un dato: a partir de 15 lanzamientos solo el 2,3% de esos tokens llega a
   1.000 $ de liquidez, contra el 15,5% de los de una wallet que lanzo uno solo.
   Va dentro de .bt-id, junto al nombre, no en una columna propia: la fila ya
   tiene diez y no cabe otra. */
#view-beta .bt-dev{
  display:inline-flex;align-items:center;height:16px;padding:0 5px;margin-left:6px;
  border-radius:var(--r-sm);background:var(--surface-3);color:var(--t3);
  font:600 10.5px var(--mono);font-style:normal;letter-spacing:.02em;
  vertical-align:middle;flex:0 0 auto;
}
#view-beta .bt-dev.alto{background:rgba(224,165,0,.16);color:var(--amber,#e0a500)}

/* ── La franja del dev, entre la cabecera y el chart ───────────────────── */
/* Antes de mirar el grafico conviene saber quien lanzo el token y cuantos mas
   ha lanzado hoy. Una linea baja, sin peso: informa, no grita. El ambar entra
   a partir de 15 lanzamientos en 24 h, que es el tramo donde solo el 2,3% de
   los tokens llega a 1.000 $ de liquidez. */
.dt-devbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;padding:6px 10px;
  background:var(--surface-1);border:var(--bw) solid var(--hair);border-radius:var(--r-sm);
  font:12px var(--sans);color:var(--t3);
}
.dt-devbar-k{font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
.dt-devbar-w{font:12px var(--mono);color:var(--t2);text-decoration:none;border-bottom:1px dotted var(--hair)}
.dt-devbar-w:hover{color:var(--t1)}
.dt-devbar-n{
  font:600 11px var(--mono);font-style:normal;
  padding:1px 6px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--t2);
}
.dt-devbar-n.alto{background:rgba(224,165,0,.16);color:var(--amber,#e0a500)}
.dt-devbar-h{font:11.5px var(--mono);color:var(--t3)}

/* ── La cabecera como fomo: logo | buscador | efectivo + cartera ───────── */
/* Dos pastillas a la derecha. La de efectivo lleva el saldo y "Deposit
   more"; la de cartera lleva el valor total, el cambio de 24 h y el avatar.
   Se apoyan en las anclas que ya existian (#w-wrap, #w-btn, #w-avatar,
   #hd-noti): lo que cambia es la ropa, no el esqueleto. */
.hd-cash{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;
  height:44px;padding:0 12px;border:var(--bw) solid var(--hair);border-radius:12px;
  background:var(--surface-1);color:var(--t1);cursor:pointer;text-align:left;
  font-family:var(--sys);
}
.hd-cash-l{font-size:14px;line-height:16px;white-space:nowrap}
.hd-cash-l b{font-weight:600;color:var(--t1)}
.hd-cash-l span{color:var(--t3)}
.hd-cash small{font-size:12px;line-height:14px;font-weight:600;color:var(--accent)}
.hd-cash:hover{border-color:var(--edge)}

/* La cartera: #w-wrap es la pastilla cuando hay sesion; el boton dentro es
   solo texto y el avatar cierra por la derecha. */
body.wallet-on #w-wrap{
  height:44px;padding:0 6px 0 12px;border:var(--bw) solid var(--hair);border-radius:12px;
  background:var(--surface-1);gap:10px;
}
.w-btn.connected{
  height:auto;min-height:0;padding:0;background:none;border-radius:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-family:var(--sys);
}
.w-btn.connected #w-btn-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.hd-total{font-size:14px;line-height:16px;font-weight:600;color:var(--t1);white-space:nowrap}
.hd-ch{font-size:12px;line-height:14px;font-weight:600;white-space:nowrap;color:var(--t3)}
.hd-ch.up{color:var(--up)}
.hd-ch.down{color:var(--down)}
body.wallet-on .w-avatar{width:32px;height:32px;border:none}
body.wallet-on .hd-estado{right:4px;bottom:5px}

/* Blur balances: todo lo que lleve .money se difumina. */
body.blur-money .money{filter:blur(6px);transition:filter var(--d-1) var(--ease-out)}

/* El idioma ya no va en la cabecera: vive en Settings y en el menu. En
   pantallas estrechas el selector viejo solo ensenaba la lengua activa; se
   retira en todas. */
.hd-acciones .ss-lang{display:none}

@media(max-width:1023px){
  .hd-cash{height:40px;padding:0 10px}
  body.wallet-on #w-wrap{height:40px}
}
@media(max-width:767px){
  /* En el telefono la pastilla de efectivo no cabe: queda la cartera, y
     dentro de ella solo el avatar (el texto ya lo esconde la regla movil). */
  .hd-cash{display:none}
  body.wallet-on #w-wrap{padding:0 4px;gap:0;border:none;background:none;height:auto}
}

/* ═══ LA CABECERA A LOS MISMOS MARGENES QUE LO DE ABAJO (2026-09-09) ══════
   El logo arrancaba a 32 px y la fila activa del menu a 6; las pastillas de
   dinero acababan a 24 px del borde y las tarjetas del carril a 8. Cuatro
   bordes verticales donde deberia haber dos. Ahora la cabecera hereda los
   margenes de las secciones: a la izquierda el relleno del menu (6 px, ver
   .sb mas arriba), a la derecha el del contenido (8 px en tablet, --gutter
   en escritorio, donde ya coincidian). El buscador en tablet ocupa toda la
   fila, asi que sigue esos mismos bordes solo. */
@media (min-width:768px){
  .top{padding-left:6px}
}
@media (min-width:768px) and (max-width:1023px){
  .top{padding-right:8px}
  /* La hamburguesa esta oculta desde 768, pero su columna seguia en la
     rejilla y su hueco (8 px) empujaba el logo. Tres columnas: sin hueco. */
  .top{grid-template-columns:auto minmax(0,1fr) auto}
  .top > .hd-logo{grid-column:1}
  .top > .hd-acciones{grid-column:3}
  .top > .sr{grid-column:1 / -1}
}

/* ═══ LA CABECERA, MEDIDA SOBRE FOMO (2026-09-09) ════════════════════════
   Medido en fomo.family a 1280, 1680 y 1920 px: cabecera de 72 px sin linea
   inferior; buscador de 48 px de alto, radio 12, borde de un pixel y fondo
   de pagina, ancho min(640px, 100vw − 880px) centrado en la PANTALLA (400 a
   1280, 640 de 1520 en adelante); lupa de 16 px a 13 px del borde, texto de
   14 px a la izquierda, chips "Paste" y "/" de 10 px al final; dos pastillas
   de 48 px, radio 12, borde y sin fondo, 8 px entre ellas, 14 px la cifra y
   12 px la segunda linea; avatar de 32 dentro de la segunda. */
:root{--hd-h:72px;--sr-w:640px}
/* La linea bajo la cabecera se queda: fomo no la lleva, pero aqui separa la
   cabecera del menu y de la fila de venues, y el usuario la quiere. */
.top{border-bottom:var(--bw) solid var(--hair)}
@media (min-width:1024px){
  .top{display:grid;grid-template-columns:minmax(auto,1fr) auto minmax(auto,1fr);gap:var(--s3);align-items:center}
  .top > .hd-logo{grid-column:1;grid-row:1;width:auto;flex:none}
  .top > .sr{grid-column:2;grid-row:1;width:clamp(320px,100vw - 880px,var(--sr-w));max-width:none;margin:0;flex:none}
  .top > .hd-acciones{grid-column:3;grid-row:1}
}
.sr input{
  height:48px;border-radius:12px;
  background:var(--bg);border:1px solid var(--hair);
  padding-inline:38px 100px;text-align:left;font-size:14px;
}
.sr input:hover{border-color:var(--edge)}
.sr input:focus{border-color:var(--edge);background:var(--bg);outline:none}
.sr-mark{display:none}                 /* la lupa, como fomo; la marca ya esta en el logo */
.sr > svg{
  display:block;position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--t3);pointer-events:none;z-index:1;
}
.sr-hints{right:13px;gap:8px}
.sr-hints .sr-paste,.sr-hints kbd{
  font:500 10px var(--sys);line-height:15px;padding:2px 6px;border-radius:4px;
  background:var(--surface-2);color:var(--t2);
}
.sr-hints kbd{font-family:var(--sys);padding:2px 7px}
/* Las pastillas de dinero: borde, sin fondo, 48 de alto. */
.top > .hd-acciones{gap:8px}
.hd-cash,body.wallet-on #w-wrap{
  height:48px;border-radius:12px;border:1px solid var(--hair);background:none;padding:0 8px;
}
.hd-cash:hover,body.wallet-on #w-wrap:hover{border-color:var(--edge)}
.hd-cash{gap:0}
.hd-cash-l{font-size:14px;line-height:20px;font-weight:500}
.hd-cash-l b{font-weight:500}
.hd-cash small{font-size:12px;line-height:16px;font-weight:700}
body.wallet-on #w-wrap{gap:8px}
.w-btn.connected #w-btn-text{gap:0}
.hd-total{font-size:14px;line-height:20px;font-weight:500}
.hd-ch{font-size:12px;line-height:16px;font-weight:500}
.hd-ch i{font-style:normal;color:var(--t3)}   /* "24h" en gris, como fomo; la cifra lleva el color */
@media (max-width:1023px){
  :root{--hd-h:120px}                  /* dos filas de 48 con 8 de aire: 8+48+8+48+8 */
  .top{align-content:center}
  .hd-cash{height:48px;padding:0 8px}
  body.wallet-on #w-wrap{height:48px}
}
@media (max-width:767px){
  .sr input{padding-inline:38px var(--s3)}
  body.wallet-on #w-wrap{height:auto;border:none;background:none;padding:0 4px}
}
/* El buscador centrado en la PANTALLA, como en fomo. La cabecera lleva 6 px
   de relleno a la izquierda y --gutter a la derecha, asi que la caja de
   contenido esta descentrada 13 px; el margen compensa justo esa diferencia
   (la columna del medio crece con el margen y el reparto 1fr/1fr lo absorbe). */
@media (min-width:1024px){
  .top > .sr{margin-left:calc(var(--gutter) - 6px)}
}
/* El chip "/" de las pistas: .sr kbd{display:none} (mas arriba) escondia el
   ⌘K viejo y se llevaba tambien este. */
.sr-hints kbd{display:inline-block}

/* ═══ EL PERFIL COMO FOMO (2026-09-09) ═══════════════════════════════════
   Medido en fomo.family/profile: tres tarjetas en la columna central
   (cabecera; cartera con grafico y posiciones junto a los swaps; y el resto
   en pestañas) y el carril de "Follow top traders". Tarjetas de radio 12 con
   borde de un pixel, avatar de 64 montado sobre la portada, contadores con la
   cifra encima de la palabra, botones de 36. */
#view-profile .pf-layout{grid-template-columns:minmax(0,1fr) var(--rail-r);gap:12px}
#view-profile .pf-main{background:none;border:none;padding:0;display:flex;flex-direction:column;gap:12px}
#view-profile .pf-card{background:var(--surface-1);border:1px solid var(--hair);border-radius:12px;padding:var(--s4);min-width:0}
#view-profile .pf-cab{padding:0 0 var(--s4)}
#view-profile .pf-cover{
  position:relative;height:150px;margin:0 0 -32px;border-radius:11px 11px 0 0;
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2) 60%,var(--surface-1));
  background-size:cover;background-position:center;
}
#view-profile .pf-cover-edit{
  position:absolute;right:var(--s3);bottom:var(--s3);width:32px;height:32px;min-height:0;padding:0;
  border-radius:8px;border:1px solid var(--hair);background:var(--surface-2);color:var(--t1);
  display:inline-flex;align-items:center;justify-content:center;backdrop-filter:none;
}
#view-profile .pf-cover-edit svg{width:14px;height:14px}
#view-profile .pf-head{display:flex;align-items:center;gap:var(--s4);padding:0 var(--s4);margin:0}
#view-profile .pf-avatar{width:64px;height:64px;border:3px solid var(--surface-1);box-shadow:none;position:relative;z-index:1;flex:0 0 auto}
#view-profile .pf-head-mid,#view-profile .pf-cnts,#view-profile .pf-actions{padding-top:32px}
#view-profile .pf-head-mid{flex:1;min-width:0}
#view-profile .pf-name{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-profile .pf-handle{font-family:var(--sys);font-size:13px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-profile .pf-cnts{display:flex;gap:var(--s4)}
#view-profile .pf-cnt{display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:none;padding:0;cursor:pointer;color:var(--t1);font:inherit}
#view-profile .pf-cnt b{font-family:var(--sys);font-size:16px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
#view-profile .pf-cnt span{font-family:var(--sys);font-size:11px;color:var(--t3)}
#view-profile .pf-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#view-profile .pf-edit,#view-profile .pf-follow{
  height:36px;min-height:36px;padding:0 var(--s4);border-radius:10px;border:none;
  font-family:var(--sys);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
}
#view-profile .pf-edit{background:#fff;color:#08090B}
#view-profile .pf-ico{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:10px;border:1px solid var(--hair);background:var(--surface-2);color:var(--t1);cursor:pointer;padding:0;
  transition:border-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out);
}
#view-profile .pf-ico svg{width:15px;height:15px}
#view-profile .pf-ico.ok{color:var(--up);border-color:var(--up)}
#view-profile .pf-bio{padding:var(--s3) var(--s4) 0;font-family:var(--sys);font-size:14px;color:var(--t1)}
#view-profile .pf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4) 0}
#view-profile .pf-m{display:inline-flex;align-items:center;gap:6px;font-family:var(--sys);font-size:12.5px;color:var(--t3)}
#view-profile .pf-m i{font-style:normal}
#view-profile .pf-m svg{width:14px;height:14px;flex:0 0 auto}
#view-profile .pf-m-a{color:var(--t2);text-decoration:none}
#view-profile .pf-m-a:hover{color:var(--t1)}
#view-profile .pf-meta .dev-tag{margin-left:auto}
/* ── cartera | swaps ── */
#view-profile .pf-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
#view-profile .pf-col2{display:flex;flex-direction:column;gap:12px;min-width:0}
#view-profile .pf-val-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
#view-profile .pf-val{font-family:var(--sys);font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1.1}
#view-profile .pf-val-ch{font-family:var(--sys);font-size:13px;font-weight:600;color:var(--t3);margin-top:4px}
#view-profile .pf-val-ch.up{color:var(--up)}
#view-profile .pf-val-ch.down{color:var(--down)}
#view-profile .pf-val-ch i{font-style:normal;color:var(--t3);margin-left:5px}
#view-profile .pf-rangos,#view-profile .pf-segm{display:inline-flex;gap:2px;padding:2px;background:var(--surface-2);border-radius:8px;flex:0 0 auto}
#view-profile .pf-rangos button,#view-profile .pf-segm button{
  height:24px;padding:0 8px;border:none;border-radius:6px;background:none;color:var(--t3);
  font-family:var(--sys);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;
}
#view-profile .pf-rangos button.on{background:var(--surface-3);color:var(--t1)}
#view-profile .pf-segm button.on{background:var(--accent);color:#08090B}
#view-profile .pf-chart{position:relative;height:160px;margin:var(--s3) 0 var(--s4);color:var(--up)}
#view-profile .pf-chart.down{color:var(--down)}
#view-profile .pf-chart svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
#view-profile .pf-chart .pf-linea{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
#view-profile .pf-chart .pf-area{fill:url(#pf-g);stroke:none}
#view-profile .pf-chart-vacio{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 var(--s4);font-family:var(--sys);font-size:12.5px;line-height:1.45;color:var(--t3);
  border:1px dashed var(--hair);border-radius:10px;
}
#view-profile .pf-chart-vacio[hidden]{display:none}
#view-profile .pf-cash{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--hair);border-radius:10px;margin-bottom:var(--s4)}
#view-profile .pf-cash[hidden]{display:none}
#view-profile .pf-cash-ico{width:28px;height:28px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-family:var(--sys);font-weight:700;color:var(--t2);flex:0 0 auto}
#view-profile .pf-cash-t{flex:1;min-width:0;display:flex;flex-direction:column;font-family:var(--sys)}
#view-profile .pf-cash-t span{font-size:11px;color:var(--t3)}
#view-profile .pf-cash-t b{font-size:15px;font-weight:700;color:var(--t1)}
#view-profile .pf-btn{height:32px;padding:0 var(--s3);border-radius:8px;border:1px solid var(--hair);background:var(--surface-2);color:var(--t1);font-family:var(--sys);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
#view-profile .pf-btn-p{background:var(--accent);border-color:var(--accent);color:#08090B}
#view-profile .pf-sec-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-family:var(--sys);font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:var(--s2)}
#view-profile .pf-sec-hd b{color:var(--t3);font-weight:600}
#view-profile .pf-tabla{display:flex;flex-direction:column}
#view-profile .pf-tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2);padding:8px 0;border-top:1px solid var(--hair);cursor:pointer;border-radius:0}
#view-profile .pf-tr3{grid-template-columns:minmax(0,1fr) 64px auto}
#view-profile .pf-th{border-top:none;padding:0 0 6px;cursor:default;font-family:var(--sys);font-size:11px;color:var(--t3)}
#view-profile .pf-th span{font-size:11px;color:var(--t3)}
#view-profile .pf-tr .pf-tok{display:flex;align-items:center;gap:8px;min-width:0}
#view-profile .pf-tr .pf-tok img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
#view-profile .pf-tr .pf-btok{display:flex;flex-direction:column;min-width:0}
#view-profile .pf-tr .sym{font-family:var(--sys);font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-profile .pf-tr .nm{font-family:var(--sys);font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-profile .pf-tr .ar{text-align:right;display:flex;flex-direction:column;align-items:flex-end;font-family:var(--sys)}
#view-profile .pf-tr .ar b{font-size:13px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
#view-profile .pf-tr .ar b.up{color:var(--up)}
#view-profile .pf-tr .ar b.down{color:var(--down)}
#view-profile .pf-tr .ar em{font-style:normal;font-size:11px;color:var(--t3)}
#view-profile .pf-tr .ar em.up{color:var(--up)}
#view-profile .pf-tr .ar em.down{color:var(--down)}
#view-profile .pf-act-b{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-family:var(--sys);font-size:11px;font-weight:700}
#view-profile .pf-act-b.buy{background:rgba(33,201,94,.14);color:var(--up)}
#view-profile .pf-act-b.sell{background:rgba(255,77,79,.14);color:var(--down)}
@media(hover:hover) and (pointer:fine){
  #view-profile .pf-tr:not(.pf-th):hover .sym{color:var(--accent)}
  #view-profile .pf-edit:hover{opacity:.9}
  #view-profile .pf-ico:hover,#view-profile .pf-btn:hover{border-color:var(--edge)}
}
/* ── lo demas, en pestañas ── */
#view-profile .pf-mas .pf-tabs{margin:0 0 var(--s3)}
/* ── el carril ── */
#view-profile .pf-side-hd svg{width:16px;height:16px;margin-right:6px;vertical-align:-3px;color:var(--t2)}
#view-profile .pf-sug-b span{font-size:12px;color:var(--t3)}
@media(max-width:1023px){#view-profile .pf-dos{grid-template-columns:1fr}}
@media(max-width:767px){
  #view-profile .pf-head{flex-wrap:wrap;gap:var(--s3)}
  #view-profile .pf-head-mid{flex-basis:calc(100% - 64px - var(--s3))}
  #view-profile .pf-cnts,#view-profile .pf-actions{padding-top:0}
  #view-profile .pf-actions{margin-left:auto}
  #view-profile .pf-cover{height:110px;margin-bottom:-28px}
}
/* La fila del efectivo en una tarjeta de ~270 px: los dos botones se comian
   el texto (medido: la cifra en 19 px de ancho). Botones mas cortos, icono
   mas pequeño y la cifra sin partirse; el texto es lo primero. */
#view-profile .pf-cash{gap:8px;padding:10px}
#view-profile .pf-cash-ico{width:24px;height:24px;font-size:12px}
#view-profile .pf-cash-t span,#view-profile .pf-cash-t b{white-space:nowrap}
#view-profile .pf-cash .pf-btn{height:30px;padding:0 10px;font-size:12px;flex:0 0 auto}
/* El logo alineado con "THE MARKET": la etiqueta del menu va a 6 px de relleno
   de la barra + 8 px de la propia etiqueta = 14 px del borde. El logo, igual. */
@media (min-width:768px){
  .top{padding-left:14px}
}
/* ═══ SIN SESION: "LOG IN", COMO FOMO (2026-09-09) ══════════════════════
   El avatar anonimo con el punto gris se leia como "estoy dentro" (el usuario
   pregunto donde estaban sus pastillas de saldo, con la cartera sin conectar).
   Sin sesion la cabecera dice lo que hay que hacer: un boton "Log in". */
.w-btn:not(.connected){
  height:40px;min-height:40px;width:auto;padding:0 16px;
  border-radius:10px;border:none;background:var(--accent);color:#08090B;
  font-family:var(--sys);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.w-btn:not(.connected) #w-btn-text{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:nowrap}
.w-btn:not(.connected) .w-ico-perfil{display:none}
body:not(.wallet-on) .hd-estado{display:none}
@media(hover:hover) and (pointer:fine){
  .w-btn:not(.connected):hover{opacity:.9;border-color:transparent}
}
/* ═══ LOS BOTONES DE ACCION VAN EN BLANCO (regla del usuario, 2026-09-09) ══
   "Los login y funciones que lleven este verde van en blanco; nosotros no
   usamos ese verde." La menta queda para lo demas; el boton de entrar, el de
   depositar, el segmento elegido y "Deposit more" van en blanco. */
.w-btn:not(.connected){background:#FFFFFF;color:#08090B}
#view-profile .pf-btn-p{background:#FFFFFF;border-color:#FFFFFF;color:#08090B}
#view-profile .pf-segm button.on{background:#FFFFFF;color:#08090B}
.hd-cash small{color:#FFFFFF}