/* ═══════════════════════════════════════════════════════════════
   DMT ACADEMY — CAPA DE REDISEÑO (2026)
   Se carga DESPUÉS de style.css y la sobreescribe.
   Reglas:
     · Solo retoca el tema OSCURO (el claro queda como estaba).
     · El juego (#nivel1) queda BLINDADO: se le restauran los tokens
       y la tipografía originales, así se ve exactamente igual.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. Red de seguridad del preflight ─────────────────────────────
   Estas dos reglas las trae el preflight de Tailwind. Se repiten acá para que
   el layout no dependa de que esa hoja cargue: sin ellas el body arrastra su
   margin de 8px y las cajas vuelven a content-box (el sidebar pasaba de 256 a
   289px). Con tailwind.css presente son idénticas, así que no cambian nada. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* ── 0.1. Reset de la maqueta ──────────────────────────────────────
   La maqueta asume `*{margin:0;padding:0;box-sizing:border-box}`. Va acá,
   al principio de la cascada, y NO al final de maqueta.css: allá empataba
   en especificidad (0,1,0) con toda regla de una sola clase y le ganaba por
   orden de archivo, dejando en 0 el padding de ~178 reglas. */
.mq * { margin: 0; padding: 0; box-sizing: border-box; }

/* ── 1. Paleta — valores EXACTOS de la maqueta (web/preview/*.html) ──
   La maqueta usa grises azulados sólidos (#eff2f7 / #98a1b1 / #5b6473),
   no blancos con alpha: por eso las cards se veían distintas. */
:root, [data-theme="dark"] {
    --bg-base:        #090a0d;   /* --bg   */
    --bg-elevated:    #0b0d11;
    --bg-card:        rgba(255,255,255,0.035);   /* --card  */
    --bg-card-hover:  rgba(255,255,255,0.06);    /* --card2 */
    --border-subtle:  rgba(255,255,255,0.09);    /* --brd   */
    --border-medium:  rgba(255,255,255,0.15);    /* --brd-2 */
    --text-primary:   #eff2f7;   /* --ink   */
    --text-secondary: #98a1b1;   /* --dim   */
    --text-muted:     #7c8698;
    --text-faint:     #5b6473;   /* --faint */
    --glass-bg:       rgba(255,255,255,0.035);
    --glass-border:   rgba(255,255,255,0.09);

    /* tokens propios del rediseño */
    --rd-disp: "Sora", system-ui, sans-serif;
    --rd-body: "Manrope", system-ui, sans-serif;
    --rd-mono: "JetBrains Mono", monospace;
    --rd-amber: #ff9f00;
    --rd-amber-2: #ffb43f;
    --rd-green: #2fd07a;
    --rd-red: #ef4d54;
    --rd-gold: #FFD700;
    --rd-purple: #c084fc;
}

/* ── 2. Tipografía ────────────────────────────────────────────── */
body { font-family: var(--rd-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--rd-disp); letter-spacing: -0.02em; }
::selection { background: var(--rd-amber); color: #150e02; }

/* ── 3. 🎮 BLINDAJE DEL JUEGO — no tocar ──────────────────────── */
#nivel1 {
    --bg-base:        #050505;
    --bg-elevated:    #080808;
    --bg-card:        rgba(255,255,255,0.02);
    --bg-card-hover:  rgba(255,255,255,0.05);
    --border-subtle:  rgba(255,255,255,0.05);
    --border-medium:  rgba(255,255,255,0.10);
    --text-primary:   #ffffff;
    --text-secondary: rgba(255,255,255,0.70);
    --text-muted:     rgba(255,255,255,0.40);
    --text-faint:     rgba(255,255,255,0.25);
    --glass-bg:       rgba(255,255,255,0.02);
    --glass-border:   rgba(255,255,255,0.05);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── 3.5. Shell de la app: layout SIN utilidades ────────────────
   El shell (contenedor, sidebar, main, topbar) se sostenía con utilidades de
   Tailwind: `flex md:flex-row h-screen` + `fixed inset-y-0 w-64 md:relative`.
   Cuando esa hoja no cargaba —el CDN dejó de resolver, y los deploys viejos
   todavía lo apuntan— el menú se desplomaba a ancho completo y la app quedaba
   inusable. El layout vive acá, en CSS propio, para que no dependa de nada. */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.app-main {
    flex: 1 1 0%;
    width: 100%;
    position: relative;
    overflow-y: auto;
}
#mobile-topbar {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255,255,255,.10);
    z-index: 60;
}
@media (min-width: 768px) {
    .app-shell { flex-direction: row; }
    #mobile-topbar { display: none; }
}

/* ── 3.8. Señales: card desplegable + tira de la app ────────────
   maqueta.css ya trae `.mq .shist{display:none}` y `.mq .sig.open .shist{display:block}`,
   pero nada le ponía .open: el historial existía en el DOM y no había forma de
   verlo. Acá va el afford ance de que la card se toca, y la tira de push. */
#senales .sig.abrible { cursor: pointer; }
#senales .sig.abrible:hover { border-color: rgba(255,255,255,.12); }
#senales .sig-mas {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 11px; padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint);
    transition: color .18s;
}
#senales .sig.abrible:hover .sig-mas { color: var(--text-secondary); }
#senales .sig-mas i { font-size: 8px; transition: transform .22s; }
#senales .sig.open .sig-mas i { transform: rotate(180deg); }
/* el historial ya se muestra con .open (maqueta.css); acá solo se le da entrada */
#senales .sig.open .shist { animation: sgAbrir .22s ease; }
@keyframes sgAbrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Bloques de contenido que escribe el build (SEO) ─────────────
   Comparten estilo: son texto largo para leer, no interfaz. Van al pie de su
   sección, separados por una línea, y se ocultan si el build no los llenó. */
.sg-seo:empty, .bp-seo:empty { display: none; }
.sgs-wrap, .bps-wrap {
    max-width: 780px; margin: 52px auto 0; padding-top: 34px;
    border-top: 1px solid var(--border-subtle);
}
.sgs-wrap h2, .bps-wrap h2 {
    font-family: var(--rd-disp); font-weight: 800; font-size: 22px;
    color: var(--text-primary); margin: 0 0 12px; letter-spacing: -.015em;
}
.sgs-wrap h3, .bps-wrap h3 {
    font-family: var(--rd-disp); font-weight: 700; font-size: 16px;
    color: var(--text-primary); margin: 28px 0 10px;
}
.sgs-wrap p, .bps-wrap p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 13px; }
.sgs-wrap b, .bps-wrap b { color: var(--text-primary); font-weight: 600; }
.sgs-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sgs-lista li {
    position: relative; padding-left: 20px; font-size: 13.5px;
    line-height: 1.6; color: var(--text-secondary);
}
.sgs-lista li::before { content: '›'; position: absolute; left: 4px; color: var(--dmt-pure); font-weight: 700; }

.sgs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 18px 0; }
.sgs-kpi {
    padding: 15px; border-radius: 13px; text-align: center;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.sgs-kpi b {
    display: block; font-family: var(--rd-mono); font-size: 22px;
    font-weight: 700; color: var(--text-primary); line-height: 1.1;
}
.sgs-kpi span {
    display: block; margin-top: 5px; font-family: var(--rd-mono); font-size: 9px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.sgs-inst { font-family: var(--rd-mono); font-size: 11.5px; color: var(--text-faint); }
/* El aviso de riesgo va destacado a proposito: es informacion que el lector
   necesita ver, no letra chica para cumplir de mentira. */
.sgs-aviso {
    margin-top: 22px !important; padding: 15px 17px; border-radius: 12px;
    background: rgba(255,159,0,.05); border: 1px solid rgba(255,159,0,.16);
    font-size: 12.5px !important; line-height: 1.65 !important; color: var(--text-muted) !important;
}

.bps-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.bps-plan {
    padding: 20px 18px; border-radius: 15px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.bps-plan.destacado { border-color: rgba(255,199,90,.32); background: linear-gradient(180deg, rgba(255,159,0,.06), transparent); }
.bps-plan h3 { margin: 0 0 6px !important; font-size: 17px !important; }
.bps-precio { font-family: var(--rd-mono); font-size: 24px; font-weight: 700; color: #ffd54a; line-height: 1; }
.bps-vig {
    font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint); margin: 6px 0 12px;
}
.bps-para { font-size: 12.5px !important; color: var(--text-muted) !important; margin-bottom: 12px !important; }
.bps-inc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bps-inc li {
    position: relative; padding-left: 19px; font-size: 12.5px;
    line-height: 1.5; color: var(--text-secondary);
}
.bps-inc li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; font-size: 9px; color: #4ade80; }
.bps-inc li.no { color: var(--text-faint); }
.bps-inc li.no::before { content: '\f00d'; color: var(--text-faint); }
.bps-nota { font-size: 12.5px !important; color: var(--text-faint) !important; margin-top: 20px !important; }

/* ── Landing · quién está detrás ────────────────────────────────
   La foto va acotada: es un retrato vertical (1024×1536) y sin tope se comería
   la sección entera en escritorio. */
.rd-quien {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 38px; align-items: center; max-width: 940px; margin: 0 auto;
}
.rd-quien-foto {
    width: 100%; height: auto; border-radius: 20px; display: block;
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.rd-quien-txt h3 {
    font-family: var(--rd-disp); font-weight: 800; font-size: 25px;
    color: var(--text-primary); margin: 0 0 4px; letter-spacing: -.02em;
}
.rd-quien-txt h3 span { color: var(--dmt-pure); font-weight: 600; font-size: 17px; }
.rd-quien-rol {
    font-family: var(--rd-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint); margin: 0 0 18px;
}
.rd-quien-txt p { font-size: 14.5px; line-height: 1.72; color: var(--text-secondary); margin: 0 0 14px; }
.rd-quien-txt p b { color: var(--text-primary); font-weight: 700; }
.rd-quien-cta {
    display: inline-block; margin-top: 6px; font-size: 13.5px; font-weight: 700;
    color: var(--dmt-pure); text-decoration: none;
    border-bottom: 1px solid rgba(255,159,0,.35); padding-bottom: 2px; transition: .18s;
}
.rd-quien-cta:hover { border-bottom-color: var(--dmt-pure); }
@media (max-width: 820px) {
    .rd-quien { grid-template-columns: 1fr; gap: 24px; }
    /* en una sola columna el retrato completo empuja el texto fuera de pantalla */
    .rd-quien-foto { max-width: 240px; margin: 0 auto; }
}

/* ── Tienda: detalle de productos (lo escribe seo.js en el build) ──
   No es relleno para Google: es la descripción larga que ya estaba escrita en la
   base y que nadie veía, porque el grid solo muestra la corta. */
.tienda-seo:empty { display: none; }
.ts-wrap { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--border-subtle); }
.ts-h {
    font-family: var(--rd-disp); font-weight: 800; font-size: 22px;
    color: var(--text-primary); margin: 0 0 10px; letter-spacing: -.01em;
}
.ts-intro { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 30px; max-width: 720px; }
.ts-item { margin-bottom: 34px; max-width: 760px; }
.ts-item h2, .ts-item h3 {
    font-family: var(--rd-disp); font-weight: 700; font-size: 19px;
    color: var(--text-primary); margin: 0 0 8px; letter-spacing: -.01em;
}
.ts-item h3 a { color: inherit; text-decoration: none; }
.ts-item h3 a:hover { color: var(--dmt-pure); }
.ts-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ts-tipo {
    font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-faint);
    border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px 10px;
}
.ts-precio { font-family: var(--rd-mono); font-size: 11.5px; color: var(--text-muted); }
.ts-precio b { color: #ffd54a; font-weight: 700; }
.ts-corta { font-size: 14px; line-height: 1.6; color: var(--text-primary); margin: 0 0 12px; font-weight: 500; }
.ts-item p { font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 11px; }
.ts-otros { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.ts-otros h3 {
    font-family: var(--rd-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px;
}
.ts-otros ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.ts-otros a {
    display: inline-block; padding: 9px 15px; border-radius: 10px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-secondary); font-size: 13px; text-decoration: none; transition: .18s;
}
.ts-otros a:hover { color: var(--text-primary); border-color: rgba(255,255,255,.16); }
@media (max-width: 700px) { .ts-wrap { margin-top: 32px; } }

/* ── Puerta de acceso a las Señales ─────────────────────────────
   No es un candado con un botón de venta: son las dos vías reales de acceso,
   presentadas como tales. Todo centrado, y la de DMT Friends destacada porque
   es la que incluye todo. */
#senales .sg-gate {
    display: flex; flex-direction: column; align-items: center;
    padding: 52px 24px 56px; text-align: center;
}
#senales .sg-gate-top { max-width: 540px; }
#senales .sg-gate-ic {
    width: 54px; height: 54px; margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 30%, rgba(255,159,0,.22), rgba(255,159,0,.06));
    border: 1px solid rgba(255,159,0,.28);
    box-shadow: 0 0 34px rgba(255,159,0,.14);
    color: var(--dmt-pure); font-size: 20px;
}
#senales .sg-gate-top h3 {
    font-family: var(--rd-disp); font-weight: 800; font-size: 23px;
    color: var(--text-primary); letter-spacing: -.02em; margin: 0 0 9px;
    line-height: 1.2;
}
#senales .sg-gate-top p {
    font-family: var(--rd-body); font-size: 13.5px; line-height: 1.6;
    color: var(--text-secondary); margin: 0;
}
#senales .sg-gate-top p b { color: var(--text-primary); font-weight: 600; }

/* Separador con el rótulo al medio */
#senales .sg-gate-lbl {
    display: flex; align-items: center; gap: 14px;
    width: 100%; max-width: 760px; margin: 34px 0 20px;
}
#senales .sg-gate-lbl::before,
#senales .sg-gate-lbl::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
}
#senales .sg-gate-lbl span {
    font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}

#senales .sg-vias {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; width: 100%; max-width: 760px; text-align: left;
}
#senales .sg-via {
    position: relative; display: flex; flex-direction: column; gap: 15px;
    padding: 22px 20px; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    transition: border-color .2s, transform .2s;
}
#senales .sg-via:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.13); }

/* La destacada: borde dorado por pseudo-elemento (un gradiente no se puede
   poner en `border` sin perder el radius) + halo suave. */
#senales .sg-via.destacada {
    background: linear-gradient(180deg, rgba(255,159,0,.07), rgba(255,159,0,.02));
    border-color: transparent;
    box-shadow: 0 0 46px rgba(255,159,0,.10);
}
#senales .sg-via.destacada::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(150deg, rgba(255,199,90,.85), rgba(255,159,0,.35) 45%, rgba(255,159,0,.12));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
#senales .sg-via.destacada:hover { transform: translateY(-3px); }

#senales .sg-via-tag {
    position: absolute; top: -9px; right: 16px;
    padding: 3px 10px; border-radius: 999px;
    background: linear-gradient(135deg, #ffc75a, var(--dmt-pure));
    color: #1a1205; font-family: var(--rd-mono); font-size: 8.5px;
    font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 3px 12px rgba(255,159,0,.32);
}

#senales .sg-via-h { display: flex; align-items: center; gap: 12px; }
#senales .sg-via-ic {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 11px;
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
    color: var(--text-secondary); font-size: 15px;
}
#senales .sg-via-ic.oro {
    background: linear-gradient(135deg, rgba(255,199,90,.20), rgba(255,159,0,.08));
    border-color: rgba(255,199,90,.35); color: #ffc75a;
}
#senales .sg-via-h b { display: block; font-size: 14.5px; color: var(--text-primary); font-weight: 700; }
#senales .sg-via-h em {
    display: block; margin-top: 2px; font-style: normal;
    font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint);
}
#senales .sg-friends {
    background: linear-gradient(100deg, #ffd98a, var(--dmt-pure));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 800;
}

#senales .sg-via-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#senales .sg-via-l li {
    position: relative; padding-left: 21px;
    font-family: var(--rd-body); font-size: 12.5px; line-height: 1.45;
    color: var(--text-secondary);
}
#senales .sg-via-l li b { color: var(--text-primary); font-weight: 700; }
#senales .sg-via-l li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 1px; font-size: 9px; color: var(--text-faint);
}
#senales .sg-via.destacada .sg-via-l li::before { color: #ffc75a; }

#senales .sg-via .dx-cta { margin-top: auto; width: 100%; text-align: center; }
/* El CTA del Battle Pass va SECUNDARIO (contorno). Con los dos en dorado sólido
   las tarjetas pesaban igual y DMT Friends no resaltaba, que es justo lo que
   tiene que pasar: es la opción que incluye todo. */
#senales .sg-via:not(.destacada) .dx-cta {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: none !important;
    font-weight: 700;
}
#senales .sg-via:not(.destacada) .dx-cta:hover {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.28) !important;
}
#senales .dx-cta.oro {
    background: linear-gradient(135deg, #ffc75a, var(--dmt-pure));
    color: #1a1205; border: 0; font-weight: 800;
    box-shadow: 0 4px 18px rgba(255,159,0,.22);
}
#senales .dx-cta.oro:hover { filter: brightness(1.06); }

@media (max-width: 700px) {
    #senales .sg-vias { grid-template-columns: 1fr; }
    #senales .sg-gate { padding: 36px 4px 40px; }
    #senales .sg-gate-top h3 { font-size: 20px; }
}

/* ── Móvil: el topbar global manda ─────────────────────────────
   Cada sección trae su propio widget de coins en el .topbar-slot. En móvil eso
   convive con el pill del #mobile-topbar y los coins se veían DOS veces. El
   pill queda como único, y por eso se le agregó el botón de comprar. */
@media (max-width: 767px) {
    .topbar-slot .coins,
    .topbar-slot .dx-coins,
    .topbar-slot .dx-chip { display: none !important; }   /* el XP pasa al topbar */
}
/* Pill de XP del topbar móvil: mismo alto y radio que el de coins para que
   lean como un par, pero en gris — los coins son la moneda, el XP es progreso
   y no deben competir por la atención. */
.mobile-xp-pill {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    font-family: var(--rd-mono); font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; color: var(--text-secondary);
    white-space: nowrap; flex: 0 0 auto;
}
.mobile-xp-pill span { color: var(--text-primary); }
@media (min-width: 768px) { .mobile-xp-pill { display: none; } }
/* Área táctil de los controles chicos. El tamaño VISUAL no cambia (romperia el
   layout del buscador): se agranda la zona sensible con un pseudo-elemento, que
   lleva los 22px a 44px. El checkbox es un elemento reemplazado y no admite
   pseudo-elementos, así que ahí se escala. */
@media (max-width: 767px) {
    #purchases-search-clear,
    #store-search-clear { position: relative; }
    #purchases-search-clear::after,
    #store-search-clear::after { content: ''; position: absolute; inset: -11px; }
    #lb-only-verified { transform: scale(1.5); transform-origin: center; margin-right: 5px; }
}

.mobile-coin-pill { cursor: pointer; }
.mobile-coin-pill .mcp-plus {
    font-size: .55rem; opacity: .75; margin-left: 1px;
}

/* Las tarjetas de stats se salían 23px de la pantalla: `1fr` no baja del
   min-content, y un valor largo como "$51.190,26" ensancha la columna.
   minmax(0,1fr) le permite encogerse. */
@media (max-width: 560px) {
    .mq .stats.g6,
    .mq .stats.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .mq .st { min-width: 0; overflow-wrap: anywhere; }
}

/* Upsell al pie de Cortes. Compacto: arriba el track record ya hizo el trabajo. */
#senales .sg-up {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-top: 22px; padding: 18px 20px; border-radius: 15px;
    background: linear-gradient(110deg, rgba(255,159,0,.07), rgba(255,159,0,.02));
    border: 1px solid rgba(255,159,0,.16);
}
#senales .sg-up-txt { flex: 1 1 300px; min-width: 0; }
#senales .sg-up-txt b {
    display: block; font-family: var(--rd-disp); font-size: 15px;
    color: var(--text-primary); font-weight: 700; margin-bottom: 4px;
}
#senales .sg-up-txt > span {
    display: block; font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
}
/* :not(.sg-friends) — si no, este color pisa el `transparent` que necesita el
   degradado de "DMT Friend" y el nombre sale en blanco. */
#senales .sg-up-txt > span b:not(.sg-friends) { display: inline; font-family: inherit; font-size: inherit; color: var(--text-secondary); margin: 0; }
#senales .sg-up-txt > span b.sg-friends { display: inline; font-family: inherit; font-size: inherit; margin: 0; }
#senales .sg-up-btns { display: flex; gap: 10px; flex: 0 0 auto; }
#senales .sg-up-btns .dx-cta { white-space: nowrap; }
#senales .sg-up-btns .dx-cta.ghost {
    background: transparent; color: var(--text-primary);
    border: 1px solid rgba(255,255,255,.16);
}
#senales .sg-up-btns .dx-cta.ghost:hover { background: rgba(255,255,255,.06); }
@media (max-width: 620px) {
    #senales .sg-up-btns { width: 100%; }
    #senales .sg-up-btns .dx-cta { flex: 1; text-align: center; }
}

/* Estado vacío. No dice solo "no hay nada": explica el porqué y ofrece la
   salida, porque un vacío mudo hace pensar que el filtro está roto. */
#senales .sg-nada {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 54px 24px 58px;
}
#senales .sg-nada-ic {
    width: 50px; height: 50px; margin-bottom: 17px;
    display: grid; place-items: center; border-radius: 15px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-faint); font-size: 18px;
}
#senales .sg-nada h4 {
    font-family: var(--rd-disp); font-weight: 700; font-size: 17.5px;
    color: var(--text-primary); margin: 0 0 8px; letter-spacing: -.01em;
}
#senales .sg-nada p {
    font-family: var(--rd-body); font-size: 13px; line-height: 1.6;
    color: var(--text-muted); margin: 0; max-width: 400px;
}
#senales .sg-nada p b { color: var(--text-secondary); font-weight: 600; }
/* sin acotar se estiraba a todo el ancho del contenedor */
#senales .sg-nada .dx-cta { margin-top: 22px; max-width: 280px; width: 100%; text-align: center; }

/* ── Cortes: filtros de período + resumen ───────────────────────── */
#senales .sg-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 14px; }
#senales .sg-chip {
    padding: 7px 15px; border-radius: 999px; cursor: pointer;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-secondary); font-family: var(--rd-body);
    font-size: 12px; font-weight: 600; transition: .18s;
}
#senales .sg-chip:hover { color: var(--text-primary); border-color: rgba(255,255,255,.14); }
#senales .sg-chip.on {
    background: rgba(255,159,0,.12); border-color: rgba(255,159,0,.35);
    color: var(--dmt-pure);
}
#senales .sg-rango { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
#senales .sg-rango label {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--rd-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint);
}
#senales .sg-rango input {
    padding: 7px 11px; border-radius: 9px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-family: var(--rd-mono); font-size: 12px;
    color-scheme: dark;
}

#senales .sg-res {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: 16px 20px; margin-bottom: 18px; border-radius: 14px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
#senales .sg-res-per {
    display: block; font-family: var(--rd-mono); font-size: 9px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 3px;
}
#senales .sg-res-l b { font-family: var(--rd-disp); font-size: 16px; color: var(--text-primary); font-weight: 700; }
#senales .sg-res-r { display: flex; gap: 26px; flex-wrap: wrap; }
#senales .sg-res-kpi { text-align: right; }
#senales .sg-res-kpi b {
    display: block; font-family: var(--rd-mono); font-size: 20px;
    font-weight: 700; color: var(--text-primary); line-height: 1.1;
}
#senales .sg-res-kpi b.pos { color: #4ade80; }
#senales .sg-res-kpi b.neg { color: #f87171; }
#senales .sg-res-kpi span {
    font-family: var(--rd-mono); font-size: 9px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint);
}
@media (max-width: 620px) {
    #senales .sg-res { flex-direction: column; align-items: flex-start; }
    #senales .sg-res-r { gap: 18px; }
    #senales .sg-res-kpi { text-align: left; }
}

#senales .sg-push {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 15px; margin-bottom: 16px;
    border-radius: 13px;
    background: rgba(255,159,0,.06);
    border: 1px solid rgba(255,159,0,.18);
}
#senales .sg-push-ic { color: var(--dmt-pure); font-size: 15px; flex: 0 0 auto; }
#senales .sg-push-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#senales .sg-push-txt b { font-size: 13px; color: var(--text-primary); font-weight: 700; }
#senales .sg-push-txt span { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
#senales .sg-push-cta {
    flex: 0 0 auto; padding: 8px 15px; border-radius: 9px;
    background: var(--dmt-pure); color: #0a0a0a;
    font-size: 11.5px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
#senales .sg-push-cta:hover { filter: brightness(1.08); }
#senales .sg-push-x {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    color: var(--text-faint); font-size: 19px; line-height: 1; padding: 0 2px;
}
#senales .sg-push-x:hover { color: var(--text-secondary); }
@media (max-width: 620px) {
    #senales .sg-push { flex-wrap: wrap; }
    #senales .sg-push-txt { flex-basis: calc(100% - 60px); }
    #senales .sg-push-cta { margin-left: 28px; }
}

/* ── 3.9. Historial del Journal: anatomía del armado ────────────
   Sublíneas chicas bajo el lote y el P&L. Van en gris/rojo tenue a propósito:
   son contexto, no deben competir con el número de la operación. */
.jr-armado {
    font-family: var(--rd-mono);
    font-size: 9.5px;
    letter-spacing: .04em;
    color: var(--text-faint);
    margin-top: 2px;
    white-space: nowrap;
}
.jr-mae {
    font-family: var(--rd-mono);
    font-size: 9.5px;
    letter-spacing: .04em;
    color: rgba(248,113,113,.55);
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
}

/* ── 4. Sidebar (diseño del preview) ──────────────────────────── */
#sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 256px;
    flex: 0 0 auto;
    transition: transform .3s ease-in-out;
}
/* toggleMenu() togglea esta clase; la conservamos por nombre para no tocar el JS */
#sidebar.-translate-x-full { transform: translateX(-100%); }
@media (min-width: 768px) {
    #sidebar { position: relative; }
    #sidebar.-translate-x-full { transform: none; }
}
#sidebar, .sv {
    display: flex;
    flex-direction: column;
    background: rgba(9,10,13,0.72);
    backdrop-filter: blur(14px);
    border-right: 1px solid var(--border-subtle);
    padding: 20px 16px;
    gap: 0;
}
.sv-brand { display: flex; align-items: center; cursor: pointer; margin: 4px 6px 18px; }
.sv-logo { height: 40px; width: auto; display: block; }
.sv-brand-txt { font-family: var(--rd-disp); font-weight: 800; font-size: 18px; color: var(--dmt-pure); letter-spacing: -.02em; }
.sv-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sv-lbl { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); padding: 14px 10px 6px; }
.sv-i { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-btn.sv-i-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 11px;
    color: var(--text-secondary); font-family: var(--rd-body);
    font-weight: 500; font-size: 14px; text-transform: none;
    font-style: normal; letter-spacing: 0; background: transparent;
    border: 1px solid transparent; width: 100%; text-align: left; transition: .18s;
}
.nav-btn.sv-i-btn:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
.nav-btn.sv-i-btn.active {
    background: rgba(255,159,0,.10); color: var(--dmt-pure);
    border-color: rgba(255,159,0,.22);
}
.sv-admin { background: rgba(255,159,0,.08) !important; color: var(--dmt-pure) !important; border-color: rgba(255,159,0,.2) !important; }
.nav-btn-badge {
    margin-left: auto; font-family: var(--rd-mono); font-size: 8.5px; font-weight: 700;
    background: rgba(255,159,0,.18); color: var(--dmt-pure);
    border-radius: 6px; padding: 3px 6px; letter-spacing: .06em;
}
.nav-btn-soon { opacity: .65; }
.sv-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.sv-foot .btn-sidebar-login {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 13px; font-size: 12px; letter-spacing: .5px;
}
.nav-btn {
    border-radius: 11px !important;
    font-family: var(--rd-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--text-secondary);
    transition: .18s;
}
.nav-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-btn.active, .nav-btn[aria-current="page"] {
    background: rgba(255,159,0,0.10);
    color: var(--dmt-pure);
    border: 1px solid rgba(255,159,0,0.22);
}
.btn-sidebar-login {
    border-radius: 12px !important;
    font-family: var(--rd-body);
    font-weight: 800;
    background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber));
    color: #160e02;
    box-shadow: 0 10px 26px -10px rgba(255,159,0,.5);
}
.btn-sidebar-login:hover { transform: translateY(-2px); }

/* ── 5. Cards / glass ─────────────────────────────────────────── */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
}

/* ── 6. Menú de usuario + campana ─────────────────────────────── */
.user-menu {
    background: #0e1116;
    border: 1px solid rgba(255,159,0,0.30);
    border-radius: 18px;
    box-shadow: 0 30px 70px -20px #000;
}
.user-menu-item {
    border-radius: 11px;
    font-family: var(--rd-body);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.user-menu-item:hover { background: rgba(255,255,255,0.055); color: #fff; }
/* items deshabilitados (ej. modo claro hasta que esté terminado) */
.user-menu-item.soon { opacity: .45; cursor: not-allowed; }
.user-menu-item.soon:hover { background: transparent; color: var(--text-secondary); }
.user-menu-item.soon i { color: var(--text-faint); }
.um-soon { margin-left: auto; font-family: var(--rd-mono); font-size: 8.5px; letter-spacing: .12em;
    padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text-faint); }
.user-menu-item i { color: var(--dmt-pure); }
.user-menu-item-danger { color: #ef8a8a; }
.user-menu-item-danger:hover { background: rgba(239,77,84,0.10); }
.user-menu-name { font-family: var(--rd-disp); font-weight: 800; letter-spacing: .6px; }
.user-avatar-btn, .user-avatar-btn-mobile { border-radius: 50%; }
.notif-bell-floating, .notif-bell-icon {
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-subtle);
    transition: .18s;
}
.notif-bell-floating:hover, .notif-bell-icon:hover { border-color: var(--border-medium); color: #fff; }

/* ── 7. Tipografía de números / mono ──────────────────────────── */
.font-mono, .txt-mono { font-family: var(--rd-mono); font-variant-numeric: tabular-nums; }

/* ── 8. Secciones internas: look unificado ────────────────────── */
/* (no aplica dentro de #nivel1 — el juego mantiene su estilo) */
#dashboard .glass, #journal .glass, #store .glass, #purchases .glass,
#ranking .glass, #faq .glass, #about .glass, #battlepass .glass {
    border-radius: 18px;
}
#dashboard h2, #journal h2, #store h2, #purchases h2, #ranking h2, #faq h2, #about h2 {
    font-family: var(--rd-disp);
    font-style: normal;
    letter-spacing: -0.03em;
}
/* botones primarios de la app */
.bg-dmt-pure {
    background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber)) !important;
    color: #160e02 !important;
}
/* inputs y selects */
#journal input, #journal select, #journal textarea,
#dashboard input, #dashboard select, #dashboard textarea,
#store input, #store select {
    font-family: var(--rd-body);
    border-radius: 11px;
}
/* tablas */
#journal table th, #ranking table th, #purchases table th {
    font-family: var(--rd-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 9.5px;
    color: var(--text-muted);
}

/* ── 9. Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,159,0,.35); }
#nivel1 ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); }

/* ═══════════════════════════════════════════════════════════════
   LANDING NUEVA  (todo namespaced en .rdx → no toca nada más)
   ═══════════════════════════════════════════════════════════════ */
.rdx { --amber: #ff9f00; --amber2: #ffb43f; --green: #2fd07a; --red: #ef4d54;
       --ink: #eff2f7; --dim: #98a1b1; --faint: #5b6473;
       --brd: rgba(255,255,255,.09); --brd2: rgba(255,255,255,.15);
       --card: rgba(255,255,255,.035); --card2: rgba(255,255,255,.06);
       font-family: var(--rd-body); color: var(--ink); text-align: left; position: relative; }
.rdx *, .rdx *::before, .rdx *::after { box-sizing: border-box; }
.rdx a { color: inherit; text-decoration: none; }
.rd-wrap { width: min(1180px, 92%); margin-inline: auto; }
.rd-glass { background: var(--card); border: 1px solid var(--brd); border-radius: 18px; }
.rd-mono { font-family: var(--rd-mono); }

/* atmósfera */
.rd-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rd-aurora::before, .rd-aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); opacity: .5; }
.rd-aurora::before { width: 660px; height: 660px; top: -260px; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,159,0,.2), transparent 65%); }
.rd-aurora::after { width: 520px; height: 520px; bottom: 8%; right: -8%;
    background: radial-gradient(circle, rgba(47,208,122,.08), transparent 65%); }
.rd-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 130% 70% at 50% -5%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 130% 70% at 50% -5%, #000 30%, transparent 80%); }
.rd-main { position: relative; z-index: 2; }

/* ── MODO LANDING: sin sidebar (la landing tiene su propio nav) ── */
body.rd-home #sidebar { display: none !important; }
body.rd-home #mobile-topbar { display: none !important; }

/* #home traia overflow-hidden (utilidad de Tailwind) para recortar el aurora.
   Pero overflow:hidden crea un contenedor de scroll, y el nav sticky se anclaba
   a #home en vez de a main.app-main, que es el que scrollea de verdad: el nav
   se iba con el contenido. overflow:clip recorta igual SIN crear scroll
   container, asi que el sticky vuelve a medirse contra el main. */
#home.rdx { overflow: clip; }

/* nav propio de la landing */
.rd-nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px);
    background: rgba(9,10,13,.78); border-bottom: 1px solid var(--brd); }
.rd-nav-in { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rd-brand img { height: 42px; width: auto; display: block; }
.rd-nlinks { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.rd-nlinks a { color: var(--dim); transition: .2s; }
.rd-nlinks a:hover { color: var(--ink); }
.rd-nact { display: flex; align-items: center; gap: 10px; }
.rd-btn-sm { font-size: 13.5px; padding: 10px 16px; }
@media (max-width: 900px) { .rd-nlinks { display: none } .rd-brand img { height: 34px } }
@media (max-width: 560px) { .rd-nact .rd-btn-g { display: none } }

/* hero — contenedor relativo para que el ticker (.hero-ticker-tape, position:absolute)
   se ancle al final del HERO y no al final de toda la landing */
.rd-herowrap { position: relative; padding: 56px 0 84px; }
.rdx .hero-ticker-tape { z-index: 3; }
.rdx .hero-stat-num { font-family: var(--rd-disp); font-weight: 800; color: inherit; font-size: inherit; letter-spacing: -.02em; }
.rd-hero { padding: 60px 0 34px; }
.rd-hgrid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 940px) { .rd-hgrid { grid-template-columns: 1fr; gap: 38px; } }
.rd-pill { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--dim);
    border: 1px solid var(--brd); border-radius: 999px; padding: 7px 14px; background: rgba(255,255,255,.02); }
.rd-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: rdpulse 2.4s infinite; }
@keyframes rdpulse { 50% { opacity: .35 } }
.rd-h1 { font-family: var(--rd-disp); font-weight: 800; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.02;
    letter-spacing: -.03em; margin: 22px 0 0; color: var(--ink); }
.rd-h1 .g { background: linear-gradient(120deg, var(--amber2), var(--amber) 55%, #ff7a00);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-lead { font-size: clamp(15.5px, 1.5vw, 18.5px); color: var(--dim); max-width: 42ch; margin-top: 20px; line-height: 1.6; }
.rd-lead b { color: var(--ink); font-weight: 600; }
.rd-cta { display: flex; gap: 13px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.rd-btn { font-family: var(--rd-body); font-weight: 700; border-radius: 12px; cursor: pointer; border: 1px solid transparent;
    transition: .24s; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; padding: 14px 24px; }
.rd-btn-p { background: linear-gradient(145deg, var(--amber2), var(--amber)); color: #160e02; box-shadow: 0 10px 30px -8px rgba(255,159,0,.5); }
.rd-btn-p:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(255,159,0,.62); }
.rd-btn-g { border-color: var(--brd2); color: var(--ink); background: rgba(255,255,255,.02); }
.rd-btn-g:hover { border-color: var(--ink); background: rgba(255,255,255,.05); }
.rd-micro { font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 7px; }
.rd-micro::before { content: "✓"; color: var(--green); font-weight: 700; }
.rd-trust { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.rd-stars { color: var(--amber); letter-spacing: 1px; }
.rd-ttxt { font-size: 13px; color: var(--dim); } .rd-ttxt b { color: var(--ink); font-weight: 700; }
.rd-vsep { width: 1px; height: 26px; background: var(--brd); }

/* demo card con tabs */
.rd-demo { overflow: hidden; }
.rd-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--brd); background: rgba(255,255,255,.02); }
.rd-tab { flex: 1; font-family: var(--rd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
    padding: 9px; border-radius: 9px; cursor: pointer; text-align: center; transition: .2s; border: 1px solid transparent; background: transparent; }
.rd-tab.on { color: var(--amber); background: rgba(255,159,0,.08); border-color: rgba(255,159,0,.25); }
.rd-pane { display: none; padding: 18px; } .rd-pane.on { display: block; animation: rdfade .4s; }
@keyframes rdfade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.rd-ms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; }
.rd-msc { background: rgba(255,255,255,.03); border: 1px solid var(--brd); border-radius: 12px; padding: 12px; }
.rd-msc .k { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rd-msc .v { font-family: var(--rd-disp); font-weight: 700; font-size: 19px; margin-top: 5px; }
.rd-eq { width: 100%; height: 100px; display: block; }
.rd-heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin-top: 14px; }
.rd-heat i { aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,.05); }
.rd-sig { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--brd); border-radius: 12px; margin-bottom: 10px; background: rgba(255,255,255,.02); }
.rd-dir { font-family: var(--rd-mono); font-weight: 700; font-size: 12px; padding: 4px 9px; border-radius: 7px; }
.rd-dir.buy { color: var(--green); background: rgba(47,208,122,.12) } .rd-dir.sell { color: var(--red); background: rgba(239,77,84,.12) }
.rd-rank { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rd-rb { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: var(--rd-mono); font-weight: 700; font-size: 15px;
    color: #160e02; background: conic-gradient(from 210deg, var(--amber2), #a85e00, var(--amber)); }
.rd-xp { height: 9px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.rd-xp i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a85e00, var(--amber), var(--amber2)); }
.rd-tiers { display: flex; gap: 7px; margin-top: 16px; }
.rd-tier { flex: 1; text-align: center; padding: 10px 3px; border: 1px solid var(--brd); border-radius: 9px;
    font-family: var(--rd-mono); font-size: 9px; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; }
.rd-tier.on { border-color: rgba(255,159,0,.4); color: var(--amber); background: rgba(255,159,0,.06); }
@keyframes rdslide { to { transform: translateX(-50%) } }
.rd-tk .up { color: var(--green) } .rd-tk .dn { color: var(--red) } .rd-tk .st { color: var(--amber) }

/* secciones */
.rd-sec { padding: 84px 0; }
.rd-shead { margin-bottom: 44px; max-width: 660px; }
.rd-shead.c { margin-inline: auto; text-align: center; }
.rd-eyebrow { font-family: var(--rd-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); font-weight: 500; display: block; margin-bottom: 14px; }
.rd-st { font-family: var(--rd-disp); font-weight: 700; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); }
.rd-st em { font-style: normal; color: var(--amber); }
.rd-ssub { color: var(--dim); margin-top: 14px; font-size: 16px; }

/* problema */
.rd-probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .rd-probs { grid-template-columns: 1fr } }
.rd-prob { padding: 24px; border-left: 2px solid var(--red); }
.rd-prob .x { width: 34px; height: 34px; border-radius: 9px; background: rgba(239,77,84,.1); color: var(--red); display: grid; place-items: center; font-size: 16px; margin-bottom: 14px; }
.rd-prob h4 { font-family: var(--rd-disp); font-weight: 600; font-size: 16px; margin-bottom: 6px; color: var(--ink); }
.rd-prob p { color: var(--dim); font-size: 13.5px; }

/* bento features */
.rd-feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-rows: 188px; }
@media (max-width: 900px) { .rd-feat { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .rd-feat { grid-template-columns: 1fr; grid-auto-rows: auto } }
.rd-fc { padding: 24px; position: relative; overflow: hidden; transition: .28s; display: flex; flex-direction: column; }
.rd-fc:hover { transform: translateY(-3px); border-color: var(--brd2); background: var(--card2); }
.rd-fi { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--amber);
    background: rgba(255,159,0,.1); border: 1px solid rgba(255,159,0,.22); margin-bottom: auto; }
.rd-fc h3 { font-family: var(--rd-disp); font-weight: 600; font-size: 18px; margin: 16px 0 7px; color: var(--ink); }
.rd-fc p { color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.rd-badge2 { font-family: var(--rd-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.rd-fc.span2 { grid-column: span 2 } .rd-fc.big { grid-column: span 2; grid-row: span 2;
    background: radial-gradient(120% 90% at 100% 0, rgba(255,159,0,.12), transparent 55%), var(--card); }
@media (max-width: 560px) { .rd-fc.span2, .rd-fc.big { grid-column: span 1; grid-row: auto } }
.rd-fc.big .demo { margin-top: 18px; border: 1px solid var(--brd); border-radius: 12px; padding: 14px; background: rgba(0,0,0,.25); }
.rd-fc.big .demo .row { display: flex; justify-content: space-between; font-family: var(--rd-mono); font-size: 11px; color: var(--dim); margin-bottom: 9px; }
.rd-fc.big .demo .row:last-child { margin: 0 } .rd-fc.big .demo .row b { color: var(--green) }

/* pasos / proof */
.rd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .rd-steps { grid-template-columns: 1fr } }
.rd-step { padding: 26px; }
.rd-step .no { font-family: var(--rd-mono); font-size: 13px; color: var(--amber); letter-spacing: .1em; }
.rd-step h4 { font-family: var(--rd-disp); font-weight: 600; font-size: 19px; margin: 14px 0 8px; color: var(--ink); }
.rd-step p { color: var(--dim); font-size: 14px; }
.rd-pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) { .rd-pstats { grid-template-columns: 1fr 1fr } }
.rd-pst { padding: 28px 22px; text-align: center; }
.rd-pst .n { font-family: var(--rd-disp); font-weight: 800; font-size: clamp(28px, 4vw, 42px); line-height: 1; color: var(--ink); }
.rd-pst .n span { color: var(--amber) }
.rd-pst .l { font-size: 12.5px; color: var(--faint); margin-top: 9px; font-weight: 500; }

/* progresión */
.rd-game { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .rd-game { grid-template-columns: 1fr; gap: 32px } }
.rd-q { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--brd); }
.rd-qi { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,159,0,.1); color: var(--amber); display: grid; place-items: center; flex: 0 0 auto; }
.rd-qt { flex: 1; font-size: 13.5px; font-weight: 500; } .rd-qr { font-family: var(--rd-mono); font-size: 12px; color: var(--amber); }

/* testimonios */
.rd-tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .rd-tests { grid-template-columns: 1fr } }
.rd-test { padding: 24px; } .rd-test p { font-size: 14.5px; color: var(--ink); line-height: 1.6; }
.rd-who { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.rd-who .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2a2f3a, #12151b); display: grid; place-items: center; font-family: var(--rd-mono); color: var(--dim); font-size: 13px; }
.rd-who .nm { font-weight: 700; font-size: 13.5px } .rd-who .rl { font-size: 11.5px; color: var(--faint) }

/* precios */
.rd-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1040px; margin-inline: auto; }
@media (max-width: 860px) { .rd-plans { grid-template-columns: 1fr } }
.rd-plan { padding: 30px; position: relative; display: flex; flex-direction: column; }
.rd-plan.pro { border-color: rgba(255,159,0,.35); background: radial-gradient(120% 90% at 100% 0, rgba(255,159,0,.1), transparent 55%), var(--card); }
.rd-plan .rec { position: absolute; top: -11px; right: 24px; font-family: var(--rd-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: #160e02; background: var(--amber); padding: 5px 12px; border-radius: 999px; font-weight: 700; }
.rd-plan .pn { font-family: var(--rd-disp); font-weight: 600; font-size: 16px; color: var(--ink); }
.rd-plan .pp { font-family: var(--rd-disp); font-weight: 800; font-size: 38px; margin: 12px 0 2px; letter-spacing: -.02em; color: var(--ink); }
.rd-plan .pp small { font-size: 14px; color: var(--faint); font-weight: 600; }
.rd-plan .pd { font-size: 13.5px; color: var(--dim); margin-bottom: 18px; }
.rd-plan ul { list-style: none; margin-bottom: 22px; padding: 0; }
.rd-plan li { display: flex; gap: 10px; font-size: 14px; color: var(--dim); padding: 7px 0; }
.rd-plan li b { color: var(--ink); font-weight: 600 } .rd-plan li .c { color: var(--green); flex: 0 0 auto }
.rd-plan .rd-btn { width: 100%; justify-content: center; margin-top: auto; }
.rd-bill { display: inline-flex; background: rgba(255,255,255,.05); border: 1px solid var(--brd); border-radius: 999px; padding: 3px; margin: 12px 0; gap: 3px; }
.rd-bt { font-family: var(--rd-body); font-weight: 700; font-size: 11.5px; padding: 6px 13px; border-radius: 999px; border: none;
    background: transparent; color: var(--dim); cursor: pointer; transition: .2s; display: inline-flex; align-items: center; gap: 5px; }
.rd-bt.on { background: var(--amber); color: #160e02; }
.rd-bt .save { font-size: 9px; font-weight: 800; opacity: .85; }
@property --rdba { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.rd-plan.founder::after { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--rdba), transparent 0%, rgba(255,159,0,.65) 12%, transparent 32%, transparent 68%, rgba(255,159,0,.65) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: rdspin 7s linear infinite; }
@keyframes rdspin { to { --rdba: 360deg } }

/* faq */
.rd-faq { max-width: 760px; margin-inline: auto; }
.rd-faq details { border-bottom: 1px solid var(--brd); }
.rd-faq summary { list-style: none; cursor: pointer; padding: 20px 4px; font-family: var(--rd-disp); font-weight: 600; font-size: 16.5px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.rd-faq summary::-webkit-details-marker { display: none }
.rd-faq summary .pm { font-family: var(--rd-mono); color: var(--amber); font-size: 20px; transition: .2s; flex: 0 0 auto }
.rd-faq details[open] summary .pm { transform: rotate(45deg) }
.rd-faq .ans { padding: 0 4px 22px; color: var(--dim); font-size: 14.5px; line-height: 1.65; max-width: 64ch; }

/* cta final + footer */
.rd-final { padding: 20px 0 60px; }
.rd-fcard { padding: 60px 36px; text-align: center; position: relative; overflow: hidden;
    background: radial-gradient(90% 130% at 50% 0, rgba(255,159,0,.16), transparent 60%), var(--card); }
.rd-fcard h2 { font-family: var(--rd-disp); font-weight: 800; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.04; letter-spacing: -.03em; color: var(--ink); }
.rd-fcard h2 .g { background: linear-gradient(120deg, var(--amber2), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-fcard p { color: var(--dim); max-width: 44ch; margin: 18px auto 30px; font-size: 16px; }
.rd-foot { border-top: 1px solid var(--brd); padding: 44px 0 30px; }
.rd-fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 34px; }
@media (max-width: 760px) { .rd-fgrid { grid-template-columns: 1fr 1fr } }
.rd-fgrid h5 { font-family: var(--rd-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.rd-fgrid a { display: block; color: var(--dim); font-size: 14px; padding: 5px 0; transition: .2s; }
.rd-fgrid a:hover { color: var(--amber) }
.rd-fgrid p { color: var(--dim); font-size: 13.5px; max-width: 30ch; margin-top: 12px; }
.rd-fbot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); padding-top: 24px; border-top: 1px solid var(--brd); }
.rd-logo { height: 42px; width: auto; }

/* reveal */
.rd-rv { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rd-rv.in { opacity: 1; transform: none; }
.rd-d1 { transition-delay: .07s } .rd-d2 { transition-delay: .14s } .rd-d3 { transition-delay: .21s }
@media (prefers-reduced-motion: reduce) {
    .rd-rv { opacity: 1; transform: none }
    .rd-marq-t, .rd-pill .dot, .rd-plan.founder::after { animation: none }
}

/* ═══════════════════════════════════════════════════════════════
   10. APP INTERNA — restyle profundo sobre las clases reales
       (todo excluye #nivel1: el juego queda intacto)
   ═══════════════════════════════════════════════════════════════ */

/* -- 10.1 Títulos: fuera el italic/uppercase, entra Sora limpio -- */
#dashboard h2, #journal h2, #store h2, #purchases h2, #ranking h2,
#faq h2, #about h2, #battlepass h2, #onboarding h2,
#dashboard h3, #journal h3, #store h3, #purchases h3, #ranking h3,
.bp-hero-title, .faq-head h2, .store-hero-title, .purchases-hero-title {
    font-family: var(--rd-disp) !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: -0.03em !important;
    font-weight: 800;
}
.txt-tiny {
    font-family: var(--rd-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--text-muted);
}

/* -- 10.2 Cards -- */
.glass, .bp-hero, .bp-mission, .store-card, .purchases-card, .jr-stat {
    border-radius: 18px;
    border-color: var(--border-subtle);
}
.store-card, .purchases-card, .bp-mission {
    background: var(--bg-card);
    transition: .25s;
}
.store-card:hover, .purchases-card:hover, .bp-mission:hover {
    transform: translateY(-3px);
    border-color: var(--border-medium);
    background: var(--bg-card-hover);
}

/* -- 10.3 Chips / tabs / filtros -- */
.store-cat-btn, .purchases-cat-btn, .purchases-filter-btn,
.jr-mkt-tab, .faq-cat, .filter-chip, .impact-chip, .seg-tab {
    border-radius: 999px !important;
    font-family: var(--rd-body) !important;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    text-transform: none;
    border: 1px solid var(--border-subtle);
    transition: .18s;
}
.store-cat-btn.active, .purchases-cat-btn.active, .purchases-filter-btn.active,
.jr-mkt-tab.active, .faq-cat.active, .filter-chip.active, .impact-chip.active, .seg-tab.active {
    background: rgba(255,159,0,.18) !important;
    color: var(--dmt-pure) !important;
    border-color: rgba(255,159,0,.4) !important;
}

/* -- 10.4 Botones -- */
.btn-modal, .store-buy-btn, .bp-m-claim, .bp-modal-ok, .faq-support-btn,
.jr-share-btn, .bp-cc-btn {
    border-radius: 11px !important;
    font-family: var(--rd-body) !important;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: none;
    transition: .22s;
}
.store-buy-btn, .bp-m-claim, .bp-modal-ok, .faq-support-btn {
    background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber));
    color: #160e02;
    border: none;
    box-shadow: 0 8px 22px -10px rgba(255,159,0,.55);
}
.store-buy-btn:hover, .bp-m-claim:hover, .faq-support-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* -- 10.5 Inputs / buscadores -- */
.faq-search input, .bp-ea-select, .bp-cc-search-wrap input,
input[type="text"], input[type="url"], input[type="email"], input[type="date"], textarea, select {
    font-family: var(--rd-body);
    border-radius: 11px;
}
#nivel1 input, #nivel1 select, #nivel1 textarea { border-radius: revert; font-family: revert; }
.faq-search input:focus, input:focus, textarea:focus, select:focus { border-color: rgba(255,159,0,.45); }

/* -- 10.7 FAQ -- */
.faq-item { border-radius: 14px; border-color: var(--border-subtle); }
.faq-q { font-family: var(--rd-disp); font-weight: 600; }
.faq-cat-count { font-family: var(--rd-mono); }

/* -- 10.10 Leaderboard: reemplazado por §19 -- */

/* -- 10.11 Modales -- */
.bp-modal, .about-modal, .modal-content, .dmt-modal {
    border-radius: 20px;
    border: 1px solid var(--border-medium);
    background: #0e1116;
}
.bp-modal h3, .about-modal-title { font-family: var(--rd-disp); font-weight: 700; letter-spacing: -.02em; }
#onboarding h2 { font-family: var(--rd-disp) !important; }

/* -- badge "Más popular" DENTRO de la card (no colgando del borde) -- */
.rd-plan .rec { top: 14px; right: 14px; }
.rd-plan.pro { padding-top: 48px; }

/* -- redes del footer nuevo -- */
.rd-socials { display: flex; gap: 10px; margin-top: 14px; }
.rd-socials a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    border: 1px solid var(--brd); color: var(--dim); font-size: 16px; transition: .2s; }
.rd-socials a:hover { color: var(--amber); border-color: rgba(255,159,0,.4); transform: translateY(-2px); }

/* ── Precios: alineación perfecta entre las 3 cards ── */
.rd-plan { padding: 30px; }
.rd-plan.pro { padding-top: 30px; }          /* sin padding extra: rompía la alineación */
.rd-plan .pn { min-height: 24px; display: flex; align-items: center; gap: 7px; }
.rd-billslot { min-height: 54px; display: flex; align-items: center; }   /* mismo alto en las 3 */
.rd-bill { display: inline-flex; width: -moz-fit-content; width: fit-content;
           flex: 0 0 auto; align-self: center; margin: 0; }              /* ya no se estira */
.rd-plan .pp { margin: 4px 0 2px; min-height: 46px; display: flex; align-items: baseline; gap: 7px; }
.rd-plan .pd { min-height: 44px; margin-bottom: 14px; }
/* cupos Founder: se pone rojo cuando se agotan */
.rd-plan .pd.agotado { color: var(--rd-red); font-weight: 700; }

/* ── Nav del landing según sesión ──────────────────────────────────
   Con sesión no tiene sentido ver "Entrar" ni "Empezar gratis": se
   cambian por un acceso directo al panel. body.is-logged-in lo pone
   script.js al cargar los datos del trader. */
.rd-auth { display: none; }
body.is-logged-in .rd-anon { display: none; }
body.is-logged-in .rd-auth { display: inline-flex; }
.rd-plan ul { margin-bottom: 24px; }
.rd-plan .rec { top: 16px; right: 16px; }
.rd-billslot { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   11. LAYOUT DE SECCIONES — ancho, aire y bento (sin tocar markup)
   ═══════════════════════════════════════════════════════════════ */

/* -- 11.1 Contenedores. Las secciones ya reconstruidas (#dashboard §18,
   #ranking §19, #faq §23, #battlepass §24, #about §22) traen su propio
   ancho y padding: NO deben caer acá o pisan el layout nuevo. -- */
#journal {
    max-width: 1280px !important;
    padding: 30px 32px 70px !important;
    margin-inline: auto;
}
@media (max-width: 768px) {
    #journal { padding: 20px 18px 60px !important; }
}

/* -- 11.2 (eliminado) el dashboard ahora es bento masonry propio, ver §18 -- */

/* -- 11.3 (eliminado) el dashboard nuevo no usa .glass ni Tailwind, ver §18 -- */

/* -- 11.4 Store / Compras: contenedor y grillas -- */
#store > div, #purchases > div { max-width: 1280px; margin-inline: auto; }
#store .store-grid, #purchases .purchases-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.store-cat-tag {
    font-family: var(--rd-mono); font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dmt-pure); border-radius: 6px;
}
.store-checkout-content { border-radius: 20px; background: #0e1116; border: 1px solid var(--border-medium); }
.store-checkout-confirm { border-radius: 11px; background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber)); color: #160e02; font-weight: 800; }
.store-checkout-cancel, .store-checkout-email-input { border-radius: 11px; font-family: var(--rd-body); }
.purchases-count, .purchases-price { font-family: var(--rd-mono); font-weight: 700; }
.purchases-cat-btn, .purchases-filter-btn { border-radius: 999px !important; }

/* ═══════════════════════════════════════════════════════════════
   14. LEADERBOARD
   ═══════════════════════════════════════════════════════════════ */
#ranking .rank-ghost { color: #9aa3b2; }
#ranking .rank-hunter { color: var(--premium-cyan); }
#ranking .rank-pupil { color: var(--accent-premium); }
#ranking .rank-legend { color: var(--dmt-pure); }
#ranking .rank-architect { color: var(--legend-gold); font-weight: 800; }
#ranking tr:hover td { background: rgba(255,255,255,.02); }
#onboarding h2 { font-family: var(--rd-disp) !important; font-style: normal !important; text-transform: none !important; letter-spacing: -.03em !important; }
#onboarding button { border-radius: 12px !important; font-family: var(--rd-body); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   16. NOTIFICACIONES
   ═══════════════════════════════════════════════════════════════ */
.notif-panel { border-radius: 18px; background: #0e1116; border: 1px solid var(--border-medium); box-shadow: 0 30px 70px -20px #000; }
.notif-item { border-radius: 11px; font-family: var(--rd-body); }
.notif-item:hover { background: rgba(255,255,255,.05); }
@media (max-width: 768px) { .da-sec { padding: 20px 16px 60px; } }

/* bento de 2 columnas en desktop */
@media (min-width: 1100px) {
    .da-sec {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        align-items: start;
        align-content: start;
    }
    .da-sec > * { grid-column: 1 / -1; }        /* por defecto, ancho completo */
    .da-sec > .da-card { grid-column: span 1; } /* las cards, a media */
    /* la card del calendario + formulario ocupa todo */
    .da-sec > .da-card-flush,
    .da-sec > .da-card:has(#consistency-grid) { grid-column: 1 / -1; }
}

/* killzones activas */
.zone-active {
    border-color: rgba(47,208,122,.4) !important;
    background: rgba(47,208,122,.08) !important;
}

/* calendario de consistencia */
#consistency-grid { gap: 6px; }
/* el calendario usa .cc-d (maqueta); su estilo está en los bloques 18 y 34 */

/* barra XP */
#xp-bar-fill { border-radius: 999px; }

/* ═══════════════════════════════════════════════════════════════
   18. DASHBOARD "dx" — layout idéntico al preview
   hero de rendimiento + bento masonry de 3 columnas + modal
   ═══════════════════════════════════════════════════════════════ */
#dashboard.dx { padding: 30px; max-width: 1400px; margin: 0 auto; }

/* ── topbar ──
   .top-actions (campana + avatar) es position:fixed arriba a la derecha,
   así que le reservamos su ancho para que no se monte sobre los chips. */
.dx-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; padding-right: 108px; }
@media (max-width: 767px) { .dx-top { padding-right: 0; } }
.dx-h { font-family: var(--rd-disp); font-weight: 700; font-size: 23px; letter-spacing: -.025em; color: var(--text-primary); }
.dx-h span { color: inherit; }   /* el saludo va todo en blanco, como la maqueta */
.dx-s { font-family: var(--rd-body); font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }
.dx-tr { display: flex; align-items: center; gap: 10px; }
.dx-coins { display: flex; align-items: center; gap: 8px; background: rgba(255,215,0,.07); border: 1px solid rgba(255,215,0,.2); border-radius: 12px; padding: 8px 12px; }
.dx-coins svg { width: 16px; height: 16px; color: #ffd54a; }
.dx-coins .v { font-family: var(--rd-mono); font-weight: 700; color: #ffd54a; font-size: 14px; }
.dx-coins .buy { font-family: var(--rd-body); font-size: 11px; font-weight: 800; color: #160e02; background: #ffd54a; border-radius: 7px; padding: 3px 8px; cursor: pointer; white-space: nowrap; transition: .18s; }
.dx-coins .buy:hover { filter: brightness(1.08); }
.dx-chip { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 8px 12px; font-family: var(--rd-body); font-size: 12.5px; color: var(--text-secondary); }
.dx-chip b { color: var(--text-primary); font-family: var(--rd-mono); }

/* ── card base ── */
.dx-c { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 20px; position: relative; overflow: hidden; }
.dx-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; min-height: 24px; }
.dx-ct { font-family: var(--rd-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-cl, .dx-time { font-family: var(--rd-mono); font-size: 11.5px; color: var(--text-faint); }
.dx-link { font-family: var(--rd-body); font-size: 11.5px; color: var(--dmt-pure); font-weight: 600; cursor: pointer; white-space: nowrap; transition: .18s; }
.dx-link:hover { filter: brightness(1.15); text-decoration: underline; }
.dx-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--rd-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-green); background: rgba(47,208,122,.1); border: 1px solid rgba(47,208,122,.2); border-radius: 6px; padding: 3px 8px; }
.dx-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rd-green); box-shadow: 0 0 6px var(--rd-green); }
.dx-skel { font-family: var(--rd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding: 18px 0; text-align: center; }
.dx-skel.sm { text-transform: none; letter-spacing: 0; font-family: var(--rd-body); font-size: 12.5px; line-height: 1.5; text-align: left; padding: 6px 0 2px; }

/* ── HERO rendimiento ── */
.dx-hero { margin-bottom: 16px; }
.dx-hero-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.dx-pnl { font-family: var(--rd-disp); font-weight: 800; font-size: clamp(34px,4.4vw,46px); line-height: 1; color: var(--rd-green); letter-spacing: -.03em; }
.dx-pnl.neg { color: var(--rd-red); }
.dx-hstats { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.dx-hstats .v { font-family: var(--rd-mono); font-weight: 700; font-size: 17px; color: var(--text-primary); }
.dx-hstats .v.am { color: var(--dmt-pure); }
.dx-hstats .l { font-family: var(--rd-body); font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }
.dx-spark { flex: 1; min-width: 260px; max-width: 520px; height: 110px; }

/* ── BENTO masonry (mismo balanceo que el preview) ── */
.dx-bento { column-count: 3; column-gap: 16px; column-fill: balance; }
@media (max-width: 1180px) { .dx-bento { column-count: 2; } }
@media (max-width: 700px)  { .dx-bento { column-count: 1; } }
.dx-bento .dx-c { break-inside: avoid; margin-bottom: 16px; width: 100%; display: inline-block; }

/* ── sentiment ── */
.dx-bias { text-align: center; padding: 4px 0 2px; }
.dx-bias .lab { font-family: var(--rd-body); font-size: 11.5px; color: var(--text-secondary); }
#ms-status-badge.val { display: block; font-family: var(--rd-disp); font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin: 5px 0; color: var(--text-secondary); }
#ms-status-badge.val.up { color: var(--rd-green); }
#ms-status-badge.val.dn { color: var(--rd-red); }
.dx-meter { height: 10px; border-radius: 999px; overflow: hidden; display: flex; margin: 12px 0 8px; background: rgba(255,255,255,.06); }
.dx-meter .bull { background: linear-gradient(90deg, #1c7a48, var(--rd-green)); transition: width .6s cubic-bezier(.2,.7,.3,1); }
.dx-meter .bear { background: linear-gradient(90deg, var(--rd-red), #7a2427); transition: width .6s cubic-bezier(.2,.7,.3,1); }
.dx-meterlbl { display: flex; justify-content: space-between; font-family: var(--rd-mono); font-size: 10.5px; margin-bottom: 6px; }
.dx-meterlbl .up { color: var(--rd-green); } .dx-meterlbl .dn { color: var(--rd-red); }
.dx-syms { display: block; }
.dx-sym { display: flex; justify-content: space-between; align-items: center; font-family: var(--rd-mono); font-size: 11.5px; color: var(--text-secondary); padding: 7px 0; border-top: 1px solid var(--border-subtle); }
.dx-sym .up { color: var(--rd-green); } .dx-sym .dn { color: var(--rd-red); } .dx-sym .nt { color: var(--text-faint); }

/* ── killzones ── */
.dx-kz { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-subtle); }
.dx-kz:first-of-type { border-top: 0; }
.dx-kz .d { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; transition: .3s; }
.dx-kz .t { min-width: 0; }
.dx-kz .n { font-family: var(--rd-body); font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.dx-kz .h { font-family: var(--rd-mono); font-size: 11px; color: var(--text-faint); }
.dx-kz .st { margin-left: auto; font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
/* zone-active: la pone el JS al entrar la killzone */
.dx-kz.zone-active .d { background: var(--rd-green); box-shadow: 0 0 9px var(--rd-green); }
.dx-kz.zone-active .n { color: var(--rd-green); }
.dx-kz.zone-active .st { color: var(--rd-green); }

/* ── noticias ── */
.dx-news { display: block; }
.dx-nw { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border-subtle); }
.dx-nw:first-child { border-top: 0; }
.dx-nw .cc { font-family: var(--rd-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text-secondary); background: rgba(255,255,255,.06); border-radius: 6px; padding: 4px 7px; flex: 0 0 auto; }
.dx-nw .t { flex: 1; min-width: 0; font-family: var(--rd-body); font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.dx-nw .m { font-family: var(--rd-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 3px; font-weight: 400; }
.dx-nw .imp { font-family: var(--rd-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; flex: 0 0 auto; }
.dx-nw .imp.hi { color: var(--rd-red); background: rgba(239,77,84,.12); }
.dx-nw .imp.md { color: var(--dmt-pure); background: rgba(255,159,0,.12); }

/* ── última señal ── */
.dx-sig { display: flex; align-items: center; gap: 11px; }
.dx-sig .dirb { font-family: var(--rd-mono); font-weight: 700; font-size: 11px; padding: 5px 10px; border-radius: 7px; flex: 0 0 auto; }
.dx-sig .dirb.buy { color: var(--rd-green); background: rgba(47,208,122,.12); }
.dx-sig .dirb.sell { color: var(--rd-red); background: rgba(239,77,84,.12); }
.dx-sig-i { min-width: 0; }
.dx-sig-i .n { font-family: var(--rd-disp); font-weight: 700; font-size: 14px; color: var(--text-primary); }
.dx-sig-i .m { font-family: var(--rd-mono); font-size: 11px; color: var(--text-faint); }
.dx-sig-rr { margin-left: auto; font-family: var(--rd-mono); font-size: 12px; color: var(--dmt-pure); }
.dx-sig-st { font-family: var(--rd-mono); font-size: 11px; color: var(--rd-green); margin-top: 12px; }
.dx-sig-st.off { color: var(--text-faint); }

/* ── calendario compacto ── */
.dx-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
.dx-dows span { text-align: center; font-family: var(--rd-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
/* mismo markup .cc-d que #calendario, pero en versión mini: cuadrito sólido,
   sin activo ni ícono de gráfica (valores de preview/app.html) */
#dashboard #consistency-grid.dx-cgrid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 5px !important; }
#dashboard #consistency-grid .cc-d {
    aspect-ratio: 1; border-radius: 6px; background: rgba(255,255,255,.045);
    border: none; color: var(--text-faint); position: relative;
    display: flex; align-items: center; justify-content: center; padding: 0;
    cursor: pointer; transition: transform .15s, filter .15s;
}
#dashboard #consistency-grid .cc-d:hover { transform: scale(1.09); filter: brightness(1.15); z-index: 5; }
#dashboard #consistency-grid .cc-d .num { font-family: var(--rd-mono); font-size: 10px; font-weight: 700; color: inherit; }
#dashboard #consistency-grid .cc-d .tag,
#dashboard #consistency-grid .cc-d .gr { display: none; }
#dashboard #consistency-grid .cc-d.win  { background: #2fd07a; color: #04140b; }
#dashboard #consistency-grid .cc-d.loss { background: #ef4d54; color: #fff; }
#dashboard #consistency-grid .cc-d.be   { background: #ff9f00; color: #160e02; }
#dashboard #consistency-grid .cc-d.lesson { box-shadow: inset 0 0 0 1.5px rgba(0,229,255,.55); }
#dashboard #consistency-grid .cc-d.sel    { box-shadow: 0 0 0 2px var(--dmt-pure); }
#dashboard #consistency-grid .cc-d.closed { opacity: .28; cursor: not-allowed; }
#dashboard #consistency-grid .cc-d.future { opacity: .14; cursor: not-allowed; }
#dashboard #consistency-grid .cc-d.empty  { background: transparent; cursor: default; }
#dashboard #consistency-grid .cc-d.empty:hover { transform: none; }
.dx-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-family: var(--rd-body); font-size: 10.5px; color: var(--text-faint); }
.dx-legend span { display: flex; align-items: center; gap: 5px; }
.dx-legend b { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dx-mnav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.dx-mnav button { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; font-size: 13px; line-height: 1; transition: .18s; flex: 0 0 auto; }
.dx-mnav button:hover { color: var(--dmt-pure); border-color: rgba(255,159,0,.3); }
/* el JS escribe "julio de 2026"; lo mostramos corto y sin partirse */
.dx-mnav span { font-family: var(--rd-mono); font-size: 10.5px; color: var(--text-secondary); text-transform: capitalize; text-align: center; white-space: nowrap; }

/* ── botones de card ── */
.dx-cta, .dx-cta-ghost { width: 100%; margin-top: 14px; text-align: center; font-family: var(--rd-body); font-weight: 800; font-size: 13px; border-radius: 11px; padding: 11px; cursor: pointer; transition: .2s; display: block; }
.dx-cta { background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber)); color: #160e02; border: none; }
.dx-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dx-cta-ghost { background: rgba(255,159,0,.12); color: var(--dmt-pure); border: 1px solid rgba(255,159,0,.3); }
.dx-cta-ghost:hover { background: rgba(255,159,0,.18); }

/* ── rango ── */
.dx-rank { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dx-rb { width: 48px; height: 48px; border-radius: 13px; background: conic-gradient(from 210deg, var(--rd-amber-2), #a85e00, var(--rd-amber)); display: grid; place-items: center; font-family: var(--rd-mono); font-weight: 700; color: #160e02; font-size: 15px; box-shadow: 0 0 22px rgba(255,159,0,.3); flex: 0 0 auto; }
#dashboard .dx-rt { font-family: var(--rd-disp) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: -.015em !important; text-transform: none !important; font-style: normal !important; color: var(--text-primary); }
.dx-rs { font-family: var(--rd-mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.dx-xp { height: 9px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.dx-xp i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a85e00, var(--rd-amber), var(--rd-amber-2)); transition: width .8s cubic-bezier(.2,.7,.3,1); }
.dx-xp.bp i { background: linear-gradient(90deg, #7a3fb0, #c084fc); }
.dx-xpm { display: flex; justify-content: space-between; gap: 10px; font-family: var(--rd-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 9px; }
.dx-xpm b { color: var(--text-secondary); }

/* ── disciplina ── */
.dx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dx-st { text-align: center; padding: 14px 6px; background: rgba(0,0,0,.28); border: 1px solid var(--border-subtle); border-radius: 12px; }
.dx-st .v { font-family: var(--rd-mono); font-weight: 700; font-size: 20px; color: var(--text-primary); }
.dx-st .v.gr { color: var(--rd-green); } .dx-st .v.am { color: var(--dmt-pure); }
.dx-st .l { font-family: var(--rd-body); font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .09em; margin-top: 4px; }

/* ── seguí aprendiendo ── */
.dx-learn-t { font-family: var(--rd-disp); font-weight: 600; font-size: 16px; color: var(--text-primary); }
.dx-learn-s { font-family: var(--rd-body); font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-top: 5px; }

/* ── ranking mini ── */
.dx-lbh { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.dx-lbh .p { font-family: var(--rd-disp); font-weight: 800; font-size: 30px; color: var(--text-primary); letter-spacing: -.03em; }
.dx-lbh span { font-family: var(--rd-body); font-size: 12px; color: var(--text-faint); }
.dx-lbr { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-family: var(--rd-body); font-size: 13px; }
.dx-lbr:first-of-type { border-top: 0; }
.dx-lbr .pos { font-family: var(--rd-mono); font-size: 11px; color: var(--text-faint); width: 20px; flex: 0 0 auto; }
.dx-lbr .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.dx-lbr .xpn { font-family: var(--rd-mono); font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.dx-lbr.me { color: var(--dmt-pure); font-weight: 700; }
.dx-lbr.me .pos, .dx-lbr.me .xpn, .dx-lbr.me .nm { color: var(--dmt-pure); }

/* ── battle pass ── */
.dx-bp { background: radial-gradient(120% 90% at 100% 0, rgba(192,132,252,.16), transparent 55%), var(--bg-card); }
.dx-bpl { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dx-bpl .lvl { font-family: var(--rd-disp); font-weight: 800; font-size: 28px; color: #c084fc; letter-spacing: -.03em; }
.dx-bpl .mono { font-family: var(--rd-mono); font-size: 11px; color: var(--text-faint); }
.dx-mlbl { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 14px 0 8px; }
.dx-ms { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 11px; background: rgba(255,255,255,.02); margin-bottom: 8px; }
.dx-ms.on { border-color: rgba(255,159,0,.35); background: rgba(255,159,0,.06); }
.dx-ms .mi { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.05); display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; }
.dx-ms .mt { flex: 1; font-family: var(--rd-body); font-size: 12.5px; font-weight: 600; color: var(--text-primary); min-width: 0; }
.dx-ms .mp { font-size: 10px; color: var(--rd-green); font-weight: 600; margin-top: 3px; }
.dx-ms .mbar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); margin-top: 6px; overflow: hidden; }
.dx-ms .mbar i { display: block; height: 100%; background: #c084fc; border-radius: 999px; }
.dx-ms .mx { font-family: var(--rd-mono); font-size: 11px; color: var(--text-faint); flex: 0 0 auto; }
.dx-ms .mclaim { font-family: var(--rd-body); font-size: 11px; font-weight: 800; color: #160e02; background: var(--rd-amber); border: none; border-radius: 8px; padding: 7px 11px; cursor: pointer; flex: 0 0 auto; transition: .2s; }
.dx-ms .mclaim:hover { filter: brightness(1.07); }

/* ── popover: registrar jornada ──
   Flota anclado al calendario (JS le pone left/top); no empuja el bento. */
.dx-pop { display: none; }
.dx-pop.on { display: block; }
.dx-pop-in {
    background: #0e1116; border: 1px solid rgba(255,159,0,.28); border-radius: 16px;
    padding: 16px; box-shadow: 0 26px 60px -22px #000, 0 0 0 1px rgba(0,0,0,.4);
    max-height: min(76vh, 620px); overflow-y: auto;
}
.dx-pop-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.dx-pop-t { font-family: var(--rd-disp); font-weight: 700; font-size: 15.5px; color: var(--text-primary); letter-spacing: -.015em; }
.dx-pop-d { font-family: var(--rd-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dmt-pure); margin-top: 3px; }
.dx-fl { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin: 12px 0 6px; display: block; }
.dx-input { box-sizing: border-box; width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 9px 11px; color: var(--text-primary); font-family: var(--rd-body); font-size: 13px; outline: none; transition: border-color .18s; }
.dx-input:focus { border-color: rgba(255,159,0,.45); }
.dx-input::placeholder { color: var(--text-faint); }
.dx-textarea { resize: vertical; min-height: 54px; }
.dx-save { width: 100%; margin-top: 16px; background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber)); color: #160e02; font-family: var(--rd-body); font-weight: 800; font-size: 12.5px; border: none; border-radius: 11px; padding: 11px; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; transition: .2s; }
.dx-save:hover { filter: brightness(1.06); }

@media (max-width: 700px) {
    #dashboard.dx { padding: 20px 16px 40px; }
    .dx-hstats { gap: 18px; }
}

/* ═══ 19. LEADERBOARD (#ranking) ═══════════════════════════════ */
#ranking.lb { padding: 34px 30px 60px; max-width: 1180px; margin: 0 auto; }
.lb-head { margin-bottom: 26px; }
.lb-head h2 { font-family: var(--rd-disp); font-size: clamp(28px,4vw,40px); font-weight: 800; letter-spacing: -.03em; color: var(--text-primary); margin: 0; }
.lb-head h2 span { color: var(--dmt-pure); }
.lb-head p { color: var(--text-secondary); font-size: 14px; margin-top: 8px; max-width: 620px; }

/* podio */
.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin-bottom: 26px; }
.pd { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 20px 14px 18px; text-align: center; position: relative; transition: .25s; }
.pd:hover { transform: translateY(-4px); border-color: rgba(255,159,0,.25); }
.pd-medal { font-size: 24px; line-height: 1; margin-bottom: 8px; }
.pd-av { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.12); margin: 0 auto 10px; display: block; }
.pd-1 .pd-av { width: 78px; height: 78px; border-color: var(--dmt-pure); box-shadow: 0 0 0 4px rgba(255,159,0,.14); }
.pd-n { font-family: var(--rd-disp); font-weight: 700; font-size: 14px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: 6px; }
.pd-r { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.pd-xp { font-family: var(--rd-mono); font-size: 12.5px; color: var(--dmt-pure); margin-top: 8px; font-weight: 600; }
.pd-wr { display: inline-block; margin-top: 8px; font-family: var(--rd-mono); font-size: 10.5px; font-weight: 700; color: var(--rd-green); background: rgba(47,208,122,.1); border: 1px solid rgba(47,208,122,.22); border-radius: 999px; padding: 3px 9px; }

/* toolbar */
.lb-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.lb-search { display: flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 14px; flex: 1 1 260px; max-width: 380px; }
.lb-search svg { width: 16px; height: 16px; color: var(--text-faint); flex: 0 0 auto; }
.lb-search input { background: transparent; border: 0; outline: 0; color: var(--text-primary); font-family: var(--rd-body); font-size: 13.5px; width: 100%; }
.lb-search input::placeholder { color: var(--text-faint); }
.lb-synced { font-size: 11.5px; color: var(--text-faint); }
.lb-synced .g { color: var(--rd-green); } .lb-synced .a { color: var(--dmt-pure); }

.lb-sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lb-sl { font-family: var(--rd-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.lb-chips { display: flex; gap: 8px; }
.lb-c { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 999px; padding: 8px 15px; font-family: var(--rd-body); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .2s; }
.lb-c:hover { color: var(--text-primary); border-color: rgba(255,255,255,.18); }
.lb-c.on { background: rgba(255,159,0,.12); border-color: rgba(255,159,0,.35); color: var(--dmt-pure); }
.lb-only { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); cursor: pointer; margin-left: auto; }
.lb-only input { accent-color: var(--dmt-pure); width: 15px; height: 15px; cursor: pointer; }

/* tabla */
.lb-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; }
.lb-wrap { overflow-x: auto; }
.lb-tbl { width: 100%; min-width: 780px; border-collapse: collapse; }
.lb-tbl thead th { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); font-weight: 500; white-space: nowrap; }
.lb-tbl th.r, .lb-tbl td.r { text-align: right; }
.lb-tbl tbody tr { border-bottom: 1px solid rgba(255,255,255,.045); transition: background .18s; }
.lb-tbl tbody tr:last-child { border-bottom: 0; }
.lb-tbl tbody tr:hover { background: rgba(255,255,255,.03); }
.lb-tbl td { padding: 13px 16px; vertical-align: middle; }
.lb-pos { font-family: var(--rd-mono); font-size: 13px; color: var(--text-faint); }
.lb-medal { font-size: 17px; }
.lb-trader { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lb-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.1); flex: 0 0 auto; }
.lb-tinfo { min-width: 0; }
.lb-tn { display: flex; align-items: center; gap: 6px; font-family: var(--rd-disp); font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
.lb-flag { width: 15px; height: auto; border-radius: 2px; opacity: .75; }
.lb-ig { font-size: 11px; color: var(--text-secondary); text-decoration: none; transition: .18s; }
.lb-ig:hover { color: var(--dmt-pure); }
.lb-ig.off { color: var(--text-faint); }
.lb-rank { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.lb-met { font-family: var(--rd-mono); font-size: 11px; color: var(--text-secondary); background: rgba(255,255,255,.05); border-radius: 6px; padding: 4px 8px; }
.lb-wr { font-family: var(--rd-mono); font-size: 13px; font-weight: 700; }
.lb-wr.up { color: var(--rd-green); } .lb-wr.dn { color: var(--rd-red); }
.lb-nowr { color: var(--text-faint); font-family: var(--rd-mono); }
.lb-xp { font-family: var(--rd-mono); font-size: 13.5px; color: var(--dmt-pure); font-weight: 600; }
.lb-empty { padding: 44px 16px !important; text-align: center; color: var(--text-faint); font-family: var(--rd-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.lb-empty.err { color: var(--rd-red); }
.lb-note { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 15px; }
.lb-note .g { color: var(--rd-green); }

/* colores de rango (compartidos con el resto de la app) */
.rank-architect { color: #c084fc; } .rank-legend { color: #ffd166; }
.rank-pupil { color: #38bdf8; } .rank-hunter { color: var(--dmt-pure); } .rank-ghost { color: #94a3b8; }

@media (max-width: 720px) {
    #ranking.lb { padding: 22px 16px 48px; }
    .lb-podium { grid-template-columns: 1fr; }
    .lb-only { margin-left: 0; }
}

/* ═══ 22. ¿QUÉ ES DMT? (#about) ════════════════════════════════ */
#about { padding: 40px 30px 64px !important; max-width: 1150px !important; }
#about h2 { font-family: var(--rd-disp); font-size: clamp(34px,5.4vw,58px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; color: var(--text-primary); text-transform: none; font-style: normal; }
#about h2 .text-dmt { color: var(--dmt-pure); }
#about h4 { font-family: var(--rd-disp); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); text-transform: none; }
#about p { font-family: var(--rd-body); }
#about .space-y-6 p { font-size: 14.5px; line-height: 1.72; color: var(--text-secondary); }
#about .text-xs { font-size: 13px !important; line-height: 1.6; color: var(--text-secondary); }
#about .glass { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; }
#about .rounded-2xl, #about .rounded-3xl { border-radius: 18px !important; }
#about .border-l-4 { border-left-width: 1px !important; }
#about .grid > .glass { padding: 22px !important; align-items: flex-start !important; text-align: left !important; transition: transform .22s, border-color .22s; }
#about .grid > .glass:hover { transform: translateY(-4px); border-color: rgba(255,159,0,.26); }

/* ═══ 23. CENTRO DE AYUDA (#faq) ═══════════════════════════════ */
#faq { padding: 34px 30px 60px !important; max-width: 1000px !important; margin: 0 auto; }
#faq .faq-head { margin-bottom: 22px; }
#faq .faq-head h2 { font-family: var(--rd-disp); font-size: clamp(28px,4vw,42px); font-weight: 800; letter-spacing: -.035em; color: var(--text-primary); text-transform: none; font-style: normal; margin: 0; }
#faq .faq-head h2 .text-dmt { color: var(--dmt-pure); }
#faq .faq-head p { font-family: var(--rd-body); font-size: 14.5px; color: var(--text-secondary); margin-top: 9px; text-transform: none; letter-spacing: 0; }

#faq .faq-search { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 13px; padding: 12px 15px; margin-bottom: 16px; }
#faq .faq-search i { color: var(--text-faint); font-size: 13px; }
#faq .faq-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text-primary); font-family: var(--rd-body); font-size: 14px; }
#faq .faq-search input::placeholder { color: var(--text-faint); }
#faq .faq-search-clear { background: transparent; border: 0; color: var(--text-faint); cursor: pointer; }

#faq .faq-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
#faq .faq-cat { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 999px; padding: 8px 15px; font-family: var(--rd-body); font-size: 12.5px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; font-style: normal; transition: .2s; }
#faq .faq-cat:hover { color: var(--text-primary); border-color: rgba(255,255,255,.18); }
#faq .faq-cat.active { background: rgba(255,159,0,.12); border-color: rgba(255,159,0,.35); color: var(--dmt-pure); }
#faq .faq-cat-count { font-family: var(--rd-mono); font-size: 9.5px; opacity: .6; }

#faq .faq-list { display: flex; flex-direction: column; gap: 10px; }
#faq .faq-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 15px; overflow: hidden; transition: border-color .2s; }
#faq .faq-item:hover { border-color: rgba(255,255,255,.16); }
#faq .faq-item.open { border-color: rgba(255,159,0,.3); background: linear-gradient(180deg, rgba(255,159,0,.05), var(--bg-card)); }
#faq .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 19px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--rd-disp); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); text-transform: none; font-style: normal; }
#faq .faq-chevron { color: var(--text-faint); font-size: 12px; transition: transform .25s; flex: 0 0 auto; }
#faq .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--dmt-pure); }
#faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
#faq .faq-item.open .faq-a { max-height: 2400px; }
#faq .faq-a-inner { padding: 0 19px 19px; font-family: var(--rd-body); font-size: 14px; line-height: 1.68; color: var(--text-secondary); }
#faq .faq-a-inner b, #faq .faq-a-inner strong { color: var(--text-primary); }

#faq .faq-rank-grid, #faq .faq-2col, #faq .faq-aura-list, #faq .faq-nodes { display: grid; gap: 8px; margin: 13px 0; }
#faq .faq-rank-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
#faq .faq-2col { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
#faq .faq-rank-cell, #faq .faq-box, #faq .faq-aura, #faq .faq-node { background: rgba(255,255,255,.035); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; }
#faq .faq-rank-cell { display: flex; flex-direction: column; gap: 4px; }
#faq .faq-rank-xp { font-family: var(--rd-mono); font-size: 10.5px; color: var(--text-faint); }
#faq .faq-table { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; margin: 13px 0; }
#faq .faq-tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; padding: 10px 14px; font-family: var(--rd-mono); font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.045); }
#faq .faq-tr:last-child { border-bottom: 0; }
#faq .faq-th { background: rgba(255,255,255,.04); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
#faq .faq-prem { color: var(--dmt-pure); }
#faq .faq-sub { font-family: var(--rd-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); margin: 16px 0 8px; }
#faq .faq-box-h { font-family: var(--rd-disp); font-weight: 700; font-size: 13px; color: var(--text-primary); margin-bottom: 8px; }
#faq .faq-box-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
#faq .faq-empty { text-align: center; padding: 46px 20px; color: var(--text-faint); }
#faq .faq-empty i { font-size: 26px; opacity: .35; margin-bottom: 12px; display: block; }

#faq .faq-support { margin-top: 28px; }
#faq .faq-support-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(120deg, rgba(255,159,0,.1), var(--bg-card)); border: 1px solid rgba(255,159,0,.2); border-radius: 18px; padding: 22px; }
#faq .faq-support-title { font-family: var(--rd-disp); font-size: 17px; font-weight: 700; color: var(--text-primary); text-transform: none; font-style: normal; display: flex; align-items: center; gap: 9px; }
#faq .faq-support-sub { font-family: var(--rd-body); font-size: 13px; color: var(--text-secondary); margin-top: 5px; text-transform: none; letter-spacing: 0; }
#faq .faq-support-btn { background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber)); color: #160e02; font-family: var(--rd-body); font-weight: 800; font-size: 13px; border: none; border-radius: 12px; padding: 12px 20px; cursor: pointer; text-transform: none; letter-spacing: 0; font-style: normal; transition: .2s; white-space: nowrap; }
#faq .faq-support-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ═══ 26. LOGIN / ONBOARDING (#onboarding) ═════════════════════ */
#onboarding.ob { display: none; padding: 0 !important; min-height: 100vh; position: relative; overflow: hidden; }
#onboarding.ob:not(.hidden) { display: block; }
/* el login va a pantalla completa, igual que la landing: sin sidebar ni barra móvil */
body:has(#onboarding:not(.hidden)) #sidebar,
body:has(#onboarding:not(.hidden)) #mobile-topbar,
body:has(#onboarding:not(.hidden)) #top-actions { display: none !important; }
.ob-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ob-shell { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }

/* panel izquierdo */
.ob-brand { padding: 48px 5vw; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--border-subtle); position: relative; overflow: hidden; }
.ob-logo { height: 48px; width: auto; align-self: flex-start; }
.ob-mid { max-width: 440px; }
.ob-pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--rd-body); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 7px 14px; background: rgba(255,255,255,.02); }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-green); box-shadow: 0 0 0 0 rgba(47,208,122,.6); animation: obPulse 2.4s infinite; }
@keyframes obPulse { 70% { box-shadow: 0 0 0 8px rgba(47,208,122,0); } 100% { box-shadow: 0 0 0 0 rgba(47,208,122,0); } }
.ob-h { font-family: var(--rd-disp); font-weight: 800; font-size: clamp(32px,3.6vw,50px); line-height: 1.02; letter-spacing: -.03em; margin: 24px 0 0; color: var(--text-primary); text-transform: none; font-style: normal; }
.ob-grad { background: linear-gradient(120deg, var(--rd-amber-2), var(--rd-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-bul { display: flex; gap: 11px; margin-top: 16px; color: var(--text-secondary); font-family: var(--rd-body); font-size: 15px; align-items: flex-start; }
.ob-ci { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(47,208,122,.14); color: var(--rd-green); display: grid; place-items: center; font-size: 12px; margin-top: 1px; }
.ob-bul b { color: var(--text-primary); font-weight: 600; }
.ob-foot { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-family: var(--rd-body); font-size: 13px; flex-wrap: wrap; }
.ob-stars { color: var(--dmt-pure); letter-spacing: 1px; }

/* panel derecho */
.ob-authcol { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.ob-auth { width: 100%; max-width: 400px; background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: 22px; padding: 38px 32px; box-shadow: 0 40px 90px -40px #000; }
.ob-mark { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-family: var(--rd-mono); font-weight: 700; font-size: 18px; color: #160e02; background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber)); box-shadow: 0 10px 26px -6px rgba(255,159,0,.55); margin: 0 auto 20px; letter-spacing: -1px; }
.ob-t { font-family: var(--rd-disp); font-weight: 700; font-size: 23px; text-align: center; letter-spacing: -.02em; color: var(--text-primary); text-transform: none; font-style: normal; margin: 0; }
.ob-sub { text-align: center; color: var(--text-secondary); font-family: var(--rd-body); font-size: 14px; margin: 8px 0 26px; }
.ob-gbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px; background: #fff; color: #1f2328; font-family: var(--rd-body); font-weight: 700; font-size: 15px; border: none; border-radius: 13px; padding: 14px; cursor: pointer; transition: .22s; text-transform: none; letter-spacing: 0; font-style: normal; }
.ob-gbtn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(255,255,255,.4); }
.ob-div { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-faint); font-family: var(--rd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ob-div::before, .ob-div::after { content: ""; height: 1px; flex: 1; background: var(--border-subtle); }
.ob-perks { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ob-perk { display: flex; align-items: center; gap: 6px; font-family: var(--rd-body); font-size: 12.5px; color: var(--text-secondary); }
.ob-perk .c { color: var(--rd-green); }
.ob-terms { text-align: center; font-family: var(--rd-body); font-size: 11.5px; color: var(--text-faint); line-height: 1.6; }
.ob-terms a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.ob-terms a:hover { color: var(--dmt-pure); }
.ob-mlogo { display: none; height: 40px; width: auto; }

@media (max-width: 900px) {
    .ob-shell { grid-template-columns: 1fr; }
    .ob-brand { display: none; }
    .ob-mlogo { display: block; margin: 0 auto 22px; }
}

/* ═══ 29. MIS COMPRAS: lista de filas, no grilla ═══════════════ */
#purchases .purchases-list { display: flex !important; flex-direction: column; gap: 12px; }
#purchases .purchase-card {
    display: flex; flex-direction: row; align-items: flex-start; gap: 16px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 16px; padding: 16px 18px; transition: border-color .22s, background .22s;
}
#purchases .purchase-card:hover { transform: none; border-color: rgba(255,159,0,.26); background: var(--bg-card-hover); }
@media (max-width: 560px) {
    #purchases .purchase-card { flex-direction: column; }
    #purchases .purchase-card-icon { width: 52px; height: 52px; }
}

/* ═══ 34. CALENDARIO (#calendario) ═════════════════════════════
   Markup de la maqueta (preview/calendario.html). maqueta.css ya trae
   .callayout/.calnav/.legend/.streakbar/.editor/.res-seg; acá va lo que se
   perdió al fusionar las 9 páginas: la regla base de .cc-d del calendario
   GRANDE, que chocaba con la del mini-calendario del dashboard (misma clase,
   distinto tamaño). Por eso las de acá van scopeadas a #calendario. */
/* mismo padding que .main de la maqueta (full width, como el resto de la app) */
#calendario.cal-mq { padding: 24px 30px 40px; }
@media (max-width: 767px) { #calendario.cal-mq { padding: 18px 16px 40px; } }
@media (max-width: 1000px) { #calendario .callayout { grid-template-columns: 1fr; } }

/* la card grande y el editor usan el .glass de la maqueta, solo se ajusta el radio */
#calendario .calcard, #calendario .editor { border-radius: 20px; }

/* minmax(0,1fr) y no 1fr: con `1fr` el aspect-ratio de la celda se toma como
   min-content y las 7 columnas desbordan la card. */
#calendario .cc-head, #calendario .cc-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
#calendario .cc-head { margin-bottom: 8px; }
#calendario .cc-d {
    min-width: 0;
    aspect-ratio: 1; border-radius: 11px; background: rgba(255,255,255,.04);
    border: 1px solid transparent; position: relative; cursor: pointer;
    transition: .15s; display: flex; flex-direction: column; padding: 8px;
    font-size: inherit; align-items: stretch; justify-content: flex-start;
}
#calendario .cc-d:hover { border-color: var(--border-medium); }
#calendario .cc-d .num { font-family: var(--rd-mono); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
#calendario .cc-d .tag { margin-top: auto; font-family: var(--rd-mono); font-size: 8px; font-weight: 800;
    letter-spacing: -.2px; opacity: .85; text-transform: uppercase; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#calendario .cc-d .gr { position: absolute; top: 7px; right: 7px; font-size: 9px; opacity: .7; }

#calendario .cc-d.win  { background: rgba(47,208,122,.16); border-color: rgba(47,208,122,.4); }
#calendario .cc-d.win .num  { color: var(--rd-green); }
#calendario .cc-d.loss { background: rgba(239,77,84,.15); border-color: rgba(239,77,84,.4); }
#calendario .cc-d.loss .num { color: var(--rd-red); }
#calendario .cc-d.be   { background: rgba(255,159,0,.14); border-color: rgba(255,159,0,.4); }
#calendario .cc-d.be .num   { color: var(--dmt-pure); }
/* `lesson` se SUMA al resultado: borde cyan por dentro, sin tapar el fondo */
#calendario .cc-d.lesson { box-shadow: inset 0 0 0 1.5px rgba(0,229,255,.4); }
#calendario .cc-d.sel    { border-color: var(--dmt-pure); box-shadow: 0 0 0 1px var(--dmt-pure); }
#calendario .cc-d.sel.lesson { box-shadow: 0 0 0 1px var(--dmt-pure), inset 0 0 0 1.5px rgba(0,229,255,.4); }
#calendario .cc-d.closed { opacity: .3; cursor: not-allowed; }
#calendario .cc-d.future { opacity: .16; cursor: not-allowed; }
#calendario .cc-d.empty  { background: transparent; border-color: transparent; cursor: default; }
#calendario .cc-d.empty:hover { border-color: transparent; }

/* la maqueta capitaliza cada palabra, que en español da "17 De Julio";
   se capitaliza solo la inicial desde el JS. */
#calendario .ed-date, #calendario .mo { text-transform: none; }

/* colores de las cifras del streakbar */
#calendario .sb .v.gr { color: var(--rd-green); }
#calendario .sb .v.am { color: var(--dmt-pure); }

/* la vista previa de la gráfica dentro del editor */
#calendario .chart { margin-top: 8px; }
#calendario .chart img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* preview de la gráfica al pasar el mouse por un día (antes venía de Tailwind) */
#calendario .cc-d .num, #calendario .cc-d .tag, #calendario .cc-d .gr { position: relative; z-index: 25; }
#calendario .cc-d .gr { position: absolute; }
#calendario .cc-d.has-preview .num,
#calendario .cc-d.has-preview .tag { text-shadow: 0 1px 4px rgba(0,0,0,.85); }
#calendario .cc-d .trade-expand-btn {
    position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s; background: rgba(0,0,0,.42); border: 0; border-radius: inherit;
    color: #fff; font-size: 15px; cursor: pointer;
}
/* en el mini-calendario del dashboard la celda es muy chica para previews */
#dashboard #consistency-grid .trade-preview,
#dashboard #consistency-grid .trade-expand-btn { display: none; }

/* estados del botón Guardar (reemplazan a bg-red-500 / bg-green-500) */
#calendario .save.err { background: var(--rd-red); color: #fff; }
#calendario .save.ok  { background: var(--rd-green); color: #04140b; }
#calendario .save.err:hover, #calendario .save.ok:hover { transform: none; box-shadow: none; }
.dx-pop.inline .dx-pop-x { display: none; }

/* ═══ 35. RANKING: ajustes finos contra la maqueta ═════════════ */
/* rangos como pill de color, no texto suelto */
.lb-rank, .pd-r .lb-rank {
    display: inline-block; font-family: var(--rd-mono); font-size: 9px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; border-radius: 7px; padding: 5px 9px;
    border: 1px solid; white-space: nowrap;
}
.lb-rank.rank-architect { color: #160e02; background: var(--dmt-pure); border-color: var(--dmt-pure); }
.lb-rank.rank-legend    { color: #ffd166; background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.3); }
.lb-rank.rank-pupil     { color: #c084fc; background: rgba(192,132,252,.12); border-color: rgba(192,132,252,.3); }
.lb-rank.rank-hunter    { color: #38d6c4; background: rgba(56,214,196,.12); border-color: rgba(56,214,196,.3); }
.lb-rank.rank-ghost     { color: #94a3b8; background: rgba(148,163,184,.1); border-color: rgba(148,163,184,.25); }

/* metodología: texto plano, como en la maqueta */
.lb-met { font-family: var(--rd-body) !important; font-size: 13px !important; color: var(--text-secondary) !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; }

/* win rate + sello de auditoría */
.lb-wr { font-family: var(--rd-mono); font-size: 13px; font-weight: 700; }
.lb-sync { display: inline-block; margin-left: 8px; font-family: var(--rd-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--rd-green); background: rgba(47,208,122,.1); border: 1px solid rgba(47,208,122,.26); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.lb-nowr { font-family: var(--rd-body); font-size: 12px; font-style: italic; color: var(--text-faint); }

/* tu fila, marcada */
.lb-tbl tbody tr.me { background: rgba(255,159,0,.07); box-shadow: inset 3px 0 0 var(--dmt-pure); }
.lb-tbl tbody tr.me:hover { background: rgba(255,159,0,.1); }
.lb-tbl tbody tr.me .lb-tn, .lb-tbl tbody tr.me .lb-xp, .lb-tbl tbody tr.me .lb-pos { color: var(--dmt-pure); }

.lb-ig i { margin-right: 4px; opacity: .6; }
.lb-pos { font-family: var(--rd-mono); font-size: 12px; color: var(--text-faint); }

/* podio: XP arriba, WR, y el rango como pill abajo */
.pd-xp { font-family: var(--rd-mono); font-size: 17px; font-weight: 700; color: var(--dmt-pure); margin-top: 9px; }
.pd-wr { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-family: var(--rd-mono); font-size: 10.5px; font-weight: 700; color: var(--rd-green); background: rgba(47,208,122,.1); border: 1px solid rgba(47,208,122,.24); border-radius: 999px; padding: 3px 10px; }
.pd-r { margin-top: 10px; }
.pd-met { font-family: var(--rd-body); font-size: 12px; color: var(--text-faint); margin-top: 8px; }
.pd-1 .pd-xp { font-size: 19px; }

/* ═══ 37. BARRA SUPERIOR: campana y avatar en la misma fila ════
   #top-actions se mueve al .topbar-slot de la sección activa (script.js).
   Solo flota cuando la sección no tiene barra propia. */
#top-actions.floating {
    position: fixed; top: 16px; right: 20px; z-index: 50;
    display: flex; align-items: center; gap: 10px;
}
.topbar-slot > #top-actions {
    position: static !important; top: auto !important; right: auto !important;
    display: flex; align-items: center; gap: 10px;
}
/* mismo gap entre chips y botones: la fila se lee como una sola pieza */
.dx-tr.topbar-slot, .sx-act.topbar-slot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* campana y avatar con el tamaño de los chips (40px, como la maqueta) */
.notif-bell-floating {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle);
    color: var(--text-secondary); display: grid; place-items: center; font-size: 15px;
}
.notif-bell-floating:hover { color: var(--text-primary); border-color: var(--border-medium); }
.user-avatar-btn { width: 40px; height: 40px; border-radius: 50%; padding: 0; overflow: hidden; border: 2px solid rgba(255,159,0,.4); }
.user-avatar-btn .user-avatar, .user-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notif-bell-dot { top: 8px; right: 9px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--bg-base); }

/* ya no hace falta reservar hueco: la campana vive dentro de la fila */
.dx-top, .sx-top { padding-right: 0; }

/* cabecera del ranking como fila, para alojar el slot */
.lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   42. SIDEBAR — medidas exactas de la maqueta (preview/app.html)
   .side p20/16 gap6 · .nav-i p10/12 gap12 r11 14px · .logo 38px
   ═══════════════════════════════════════════════════════════════ */
#sidebar, .sv { padding: 20px 16px; gap: 6px; }
.sv-brand { margin: 6px 0 20px; justify-content: center; }
.sv-logo { height: 64px; }
.sv-nav { gap: 6px; }
/* .sv-nav es flex y scrollea: sin flex-shrink:0 los ítems de más abajo se
   comprimían y quedaban 9px más bajos que los de arriba. */
.sv-nav > *, #private-nav > * { flex: 0 0 auto; }
.sv-nav > #private-nav { display: flex; flex-direction: column; gap: 6px; }
.sv-nav > #private-nav.hidden { display: none; }
.sv-lbl { flex: 0 0 auto; }
.sv-lbl { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); padding: 12px 10px 6px; }

.nav-btn.sv-i-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 11px;
    color: var(--text-secondary); font-family: var(--rd-body);
    font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; font-style: normal;
    background: transparent; border: 1px solid transparent;
    width: 100%; text-align: left; cursor: pointer; transition: .18s;
}
.nav-btn.sv-i-btn:hover { background: rgba(255,255,255,.04); color: var(--text-primary); }
.nav-btn.sv-i-btn.active {
    background: rgba(255,159,0,.1); color: var(--dmt-pure);
    border: 1px solid rgba(255,159,0,.2); font-weight: 500;
}
/* style.css pintaba un borde izquierdo ámbar suelto: lo anulamos */
#sidebar .nav-btn, #sidebar .nav-btn.active { border-left-width: 1px !important; border-left-color: transparent !important; }
#sidebar .nav-btn.sv-i-btn.active { border-left-color: rgba(255,159,0,.2) !important; }
#sidebar .nav-btn:focus { outline: none; }
#sidebar .nav-btn:focus-visible { outline: 2px solid rgba(255,159,0,.5); outline-offset: 2px; }
.sv-i { width: 19px; height: 19px; flex: 0 0 auto; }

.nav-btn-badge { margin-left: auto; font-family: var(--rd-mono); font-size: 9px; font-weight: 700; background: var(--dmt-pure); color: #160e02; border-radius: 6px; padding: 2px 6px; letter-spacing: .02em; }
.nav-btn-soon { opacity: .6; }
.nav-btn-soon .nav-btn-badge { background: rgba(255,159,0,.18); color: var(--dmt-pure); font-size: 8px; letter-spacing: .06em; }

#sidebar #admin-panel-btn.sv-admin {
    justify-content: center; margin-top: 14px;
    background: rgba(255,159,0,.08) !important; color: var(--dmt-pure) !important;
    border: 1px solid rgba(255,159,0,.2) !important; border-left-color: rgba(255,159,0,.2) !important;
}
#sidebar #admin-panel-btn.sv-admin:hover { background: rgba(255,159,0,.15) !important; border-color: rgba(255,159,0,.4) !important; }

.sv-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.sv-foot .btn-sidebar-login { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px; font-size: 11.5px; letter-spacing: .5px; }

/* ═══ 43. .hidden gana siempre ═════════════════════════════════
   Varias reglas del rediseño (.sv-i-btn display:flex, .sg-badge, etc.)
   tenían más especificidad que .hidden de Tailwind y mostraban elementos
   que el JS quería ocultar (p.ej. el botón de Journal sin acceso). */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   44. RESPONSIVE — nada se sale del ancho de la pantalla
   Causa raíz: min-width fijos dentro de flex/grid (la curva del hero
   pedía 260px y empujaba toda la página). Las tablas anchas van con
   scroll propio, no arrastrando el body.
   ═══════════════════════════════════════════════════════════════ */
main { overflow-x: hidden; }
#dashboard, #journal, #store, #purchases, #ranking, #senales, #calendario,
#faq, #about, #battlepass { max-width: 100%; }

/* los hijos de flex/grid no pueden ser más anchos que su contenedor */
/* sin esto, el aspect-ratio de las celdas del calendario infla el min-content
   de su columna y el editor queda aplastado contra el borde */
.dx-bento .dx-c, .dx-hero-in > *, .jx-2col > *, .jx-se > *, .jx-ov > *,
.callayout > *, .sg-card, .jx-chart, .jx-card { min-width: 0; }

/* las tablas anchas hacen scroll dentro de su card */
.lb-wrap, .jx-acc-wrap, .tbl-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 700px) {
    /* la curva de capital deja de forzar ancho y baja debajo de los números */
    .dx-spark { min-width: 0; width: 100%; max-width: none; height: 90px; }
    .dx-hero-in { flex-direction: column; align-items: stretch; gap: 14px; }
    .dx-hstats { gap: 18px; }

    /* barra superior: saludo arriba, chips abajo sin apretarse */
    .dx-top, .sx-top { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dx-tr, .sx-act { width: 100%; flex-wrap: wrap; }

    /* el análisis del journal en una sola columna */
    .jx-2col, .jx-se, .jx-ov, .callayout { grid-template-columns: 1fr !important; }
    .jx-gauges { grid-template-columns: 1fr; }

    /* señales: los tres precios apilados */
    .sg-prices { grid-template-columns: 1fr; }

}

@media (max-width: 420px) {
    #dashboard.dx, #journal, #store, #purchases, #ranking.lb, #senales.sg, #calendario.cal-mq {
        padding-left: 14px !important; padding-right: 14px !important;
    }
    .dx-stats { grid-template-columns: 1fr; }
    #calendario .streakbar { flex-direction: column; }
    .jx-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   45. CARDS UNIFICADAS — un solo juego de valores, el de la maqueta
   .glass  → radius 18px · fondo --card · borde --brd
   .c      → padding 20px
   .c-h    → margin-bottom 14px
   .c-t    → mono 12px / .12em / uppercase / --faint
   Antes cada sección tenía su propia variante y por eso las cajas
   no se veían iguales entre sí ni iguales a la maqueta.
   ═══════════════════════════════════════════════════════════════ */
.dx-c, .lb-card, .jx-chart, .jx-card, .sg-card,
#jr-tips-card, #journal-scorebox > div, #journal .jr-stat,
#store .store-card, #purchases .purchase-card, #battlepass .bp-cat,
#battlepass .bp-sku, #faq .faq-item {
    border-radius: 18px;
}
.dx-c, .jx-chart, .jx-card { padding: 20px; }

/* todos los títulos de card, iguales */
.dx-ct, .jx-chart-t, .sx-fl, .bp-cat-title, .jx-lbl, .bp-sec-lbl {
    font-family: var(--rd-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.dx-ct, .jx-chart-t, .bp-cat-title { font-size: 12px; font-weight: 400; }
.dx-ch { margin-bottom: 14px; }

/* las stat cards chicas, todas con el mismo tamaño de número */
.dx-st .v, .jx-sv, #journal .jr-stat p.text-2xl {
    font-family: var(--rd-disp) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: -.02em;
}
.dx-st, .jx-st { border-radius: 16px; padding: 16px; }
.dx-st .l, .jx-sh {
    font-family: var(--rd-body); font-size: 10px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}

/* ═══════════════════════════════════════════════════════════════
   46. CALENDARIO DE PNL — CSS copiado tal cual de la maqueta
   (web/preview/journal.html: .pc-head / .pc-grid / .pc-d / .wkcell)
   Lo que tenemos de más (navegación de mes, PnL del mes, Hoy) se
   recreó con el mismo lenguaje visual: mono chico, sin cajas gordas.
   ═══════════════════════════════════════════════════════════════ */
.pc-head, .pc-grid { display: grid; grid-template-columns: repeat(7, 1fr) 158px; gap: 5px; }
.pc-head { margin-bottom: 5px; }
.pc-head span { text-align: center; font-family: var(--rd-mono); font-size: 8.5px; color: var(--text-faint); text-transform: uppercase; }
.pc-head span.wk-h { text-align: left; }

.pc-d { min-height: 52px; border-radius: 8px; background: rgba(255,255,255,.04); display: flex; flex-direction: column; padding: 6px 7px; }
.pc-d .n { font-size: 11px; font-weight: 700; color: var(--text-faint); line-height: 1; }
.pc-d .ct { font-size: 8px; color: var(--text-faint); margin-top: 2px; }
.pc-d .p { margin-top: auto; font-family: var(--rd-mono); font-weight: 700; font-size: 10px; }
.pc-d.win  { background: rgba(47,208,122,.14); border: 1px solid rgba(47,208,122,.3); }
.pc-d.win .p, .pc-d.win .n { color: var(--rd-green); }
.pc-d.loss { background: rgba(239,77,84,.13); border: 1px solid rgba(239,77,84,.3); }
.pc-d.loss .p, .pc-d.loss .n { color: var(--rd-red); }
.pc-d.empty { background: transparent; }

.wkcell { border: 1px solid var(--border-subtle); border-radius: 9px; background: rgba(255,255,255,.035); padding: 7px 11px; display: flex; flex-direction: column; justify-content: center; }
.wkcell .l { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.wkcell .l span { color: var(--text-faint); font-size: 9px; font-weight: 400; }
.wkcell .p { font-family: var(--rd-mono); font-weight: 800; font-size: 13px; margin-top: 3px; }
.wkcell .p.pos { color: var(--rd-green); }
.wkcell .p.neg { color: var(--rd-red); }
.wkcell .d { font-size: 9px; color: var(--text-faint); }
.wkcell .sin { font-size: 10px; color: var(--text-faint); margin-top: 3px; }

/* nuestra navegación de mes, en el lenguaje de la maqueta */
.pc-top { flex-wrap: wrap; gap: 10px; }
.pc-act { display: flex; align-items: center; gap: 8px; }
.pc-act button { background: rgba(255,255,255,.05); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 8px; width: 24px; height: 24px; font-size: 13px; line-height: 1; cursor: pointer; transition: .18s; }
.pc-act button.hoy { width: auto; padding: 0 10px; font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.pc-act button:hover { color: var(--dmt-pure); border-color: rgba(255,159,0,.3); }
.pc-sum { font-family: var(--rd-mono); font-size: 10px; color: var(--text-faint); margin-left: 4px; }
.pc-sum .pos { color: var(--rd-green); } .pc-sum .neg { color: var(--rd-red); }
.pc-act .c-link { cursor: pointer; font-family: var(--rd-body); font-size: 11px; font-weight: 600; color: var(--dmt-pure); }
.pc-act .c-link:hover { filter: brightness(1.15); }

/* la maqueta esconde el resumen semanal en pantallas chicas */
@media (max-width: 900px) {
    .pc-head, .pc-grid { grid-template-columns: repeat(7, 1fr); }
    .wkcell { display: none; }
    .pc-head span.wk-h { display: none; }
}

/* ═══ 47. Piezas que la maqueta no trae, en su mismo lenguaje ═══ */
/* .badge2 de fases que la maqueta no contempla (quemada / personal) */
.badge2.b-burn { color: var(--rd-red); background: rgba(239,77,84,.12); }
.badge2.b-pers { color: var(--text-secondary); background: rgba(255,255,255,.07); }
/* contenedor de firmas + estado vacío, con el aire de .firmcard */
.jx-firms { display: flex; flex-direction: column; gap: 12px; }
.jx-vacio { font-family: var(--rd-body); font-size: 13px; color: var(--text-faint); text-align: center; padding: 18px 0; }
/* la cabecera de firma es clickeable */
.fc-top[data-jr-firmtoggle] { cursor: pointer; user-select: none; }
.fc-top[data-jr-firmtoggle]:hover { color: var(--dmt-pure); }
.acct-box + .acct-box { margin-top: 9px; }

/* ═══════════════════════════════════════════════════════════════
   48. JOURNAL sobre la maqueta (.mq .jm)
   El grueso del estilo lo pone maqueta.css. Acá solo van las piezas
   que nosotros tenemos y la maqueta no, escritas en su mismo idioma.
   ═══════════════════════════════════════════════════════════════ */
#journal.mq { padding: 24px 30px 40px !important; }
@media (max-width: 900px) { #journal.mq { padding: 18px !important; } }

/* pill de ranking (la maqueta lo tiene inline en su topbar) */
.jm-rank { display: flex; align-items: center; gap: 8px; font-family: var(--rd-mono); font-size: 12px; color: var(--text-secondary); background: rgba(255,159,0,.1); border: 1px solid rgba(255,159,0,.25); border-radius: 11px; padding: 9px 13px; white-space: nowrap; }
.jm-rank b { color: var(--dmt-pure); font-size: 13px; font-weight: 800; }

/* fila de la Sync Key, igual que en la maqueta pero como bloque propio */
.jm-synckey { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.jm-synckey code { background: rgba(0,0,0,.35); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 11px; font-family: var(--rd-mono); font-size: 12px; color: var(--dmt-pure); letter-spacing: 1px; cursor: pointer; }
.jm-note { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* card de consejos IA: el fondo violeta de la maqueta */
.jm-tips { background: radial-gradient(120% 90% at 100% 0, rgba(192,132,252,.1), transparent 55%), var(--bg-card) !important; }
#jr-ai-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; columns: unset !important; }
.jx-tip { display: flex; gap: 11px; align-items: flex-start; background: none; border: 0; padding: 0; margin: 0; }
.jx-tip-ic { flex: 0 0 auto; font-size: 13px; font-weight: 700; line-height: 1.45; }
.jx-tip-ic.ok { color: var(--rd-green); } .jx-tip-ic.warn { color: var(--rd-red); } .jx-tip-ic.tip { color: var(--dmt-pure); }
.jx-tip-tx { font-family: var(--rd-body); font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.jx-tip-tx b { color: var(--text-primary); font-weight: 700; }

/* botones de mercado: son <button>, la maqueta usa <div class=chip> */
#journal.mq .chip.jr-mkt-tab { background: transparent; font-family: var(--rd-body); }
#journal.mq .chip.jr-mkt-tab.on, #journal.mq .chip.jr-mkt-tab.active { border-color: rgba(255,159,0,.4); color: var(--dmt-pure); background: rgba(255,159,0,.1); }

/* tabs del panel de sincronización: son <button> */
#journal.mq .tab.jr-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; font-family: var(--rd-body); cursor: pointer; }

/* estados vacíos y contenedores propios */
.jx-firms { display: flex; flex-direction: column; gap: 12px; }
.jx-vacio { font-family: var(--rd-body); font-size: 13px; color: var(--text-faint); text-align: center; padding: 18px 0; }
.fc-top[data-jr-firmtoggle] { cursor: pointer; user-select: none; }
.fc-top[data-jr-firmtoggle]:hover { color: var(--dmt-pure); }
.acct-box + .acct-box { margin-top: 9px; }
.badge2.b-burn { color: var(--rd-red); background: rgba(239,77,84,.12); }
.badge2.b-pers { color: var(--text-secondary); background: rgba(255,255,255,.07); }

/* contenedores que el JS llena: sin datos no dejan huecos */
#journal.mq #jr-hero-equity:empty, #journal.mq #jr-calendar:empty,
#journal.mq #journal-accounts:empty { display: none; }
#journal.mq .arow:has(> #journal-scorebox.hidden) { grid-template-columns: 1fr; }
#journal.mq #journal-overview-grid:has(> #journal-byfirm-card.hidden) { grid-template-columns: 1fr; }
#journal.mq #journal-overview-grid:has(> #journal-personal-card.hidden) { grid-template-columns: 1fr; }

/* ═══════════════════════════════════════════════════════════════
   49. Tablas de la maqueta (quedaron fuera del extractor porque
   table/th/td son selectores globales). Se traen escopadas a .mq.
   ═══════════════════════════════════════════════════════════════ */
.mq .tbl-wrap { overflow-x: auto; margin: 0 -6px; }
.mq table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mq th { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); text-align: left; padding: 8px 10px; font-weight: 600; white-space: nowrap; }
.mq td { padding: 11px 10px; border-top: 1px solid var(--border-subtle); }
.mq th.r, .mq td.r { text-align: right; }
.mq th.c, .mq td.c { text-align: center; }
.mq td.mono, .mq .mono { font-family: var(--rd-mono); }
.mq td.pos, .mq .pos { color: var(--rd-green); }
.mq td.neg, .mq .neg { color: var(--rd-red); }

/* filas de Mis cuentas: click para filtrar */
.mq tbody tr[data-jr-pick] { cursor: pointer; transition: background .18s; }
.mq tbody tr[data-jr-pick]:hover { background: rgba(255,255,255,.03); }
.mq tbody tr.on { background: rgba(255,159,0,.07); box-shadow: inset 2px 0 0 var(--dmt-pure); }
.mq tbody tr.quemada { opacity: .6; }
.badge2.b-ea { color: var(--dmt-pure); background: rgba(255,159,0,.1); }

.jm-accbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jm-accbar span { font-family: var(--rd-body); font-size: 11.5px; color: var(--text-faint); }
.jm-acts { white-space: nowrap; display: flex; gap: 12px; justify-content: flex-end; }
.mq .c-link.warn { color: var(--rd-red); opacity: .8; }
.mq .c-link.danger { color: var(--text-faint); }
.mq .c-link.danger:hover { color: var(--rd-red); }

/* ── hover: nunca cambia la tipografía, solo el color/fondo ──
   Los chips y links cambiaban de font-weight al pasar el mouse y el
   texto "saltaba". Se fija el peso para que el hover no mueva nada. */
.mq .chip, .mq .chip:hover, .mq .chip.on,
.mq .c-link, .mq .c-link:hover,
.mq .tab, .mq .tab:hover, .mq .tab.on,
.mq .btn, .mq .btn:hover {
    font-family: var(--rd-body);
    font-weight: 700;
    font-synthesis: none;
}
.mq .chip { transition: color .18s, background .18s, border-color .18s; }
.mq .c-link { transition: color .18s, filter .18s; }

/* ═══════════════════════════════════════════════════════════════
   51. Ancho completo, Sync Key y pill de Ranking
   ═══════════════════════════════════════════════════════════════ */

/* ── La maqueta NO centra: .main ocupa todo lo que le deja el sidebar ── */
#journal, #dashboard, #store, #purchases, #ranking, #senales,
#calendario, #faq, #battlepass {
    max-width: none !important;
    margin-inline: 0 !important;
}
#journal.mq { padding: 24px 30px 40px !important; }
@media (max-width: 900px) { #journal.mq { padding: 18px !important; } }

/* ── Sync Key: por ID, así ninguna regla de clase lo pisa (sin !important) ── */
#jr-synckey.jm-synckey {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}
#jr-synckey .fl { margin: 0; }
#jr-synckey code {
    background: rgba(0,0,0,.35); border: 1px solid var(--border-subtle);
    border-radius: 8px; padding: 7px 12px; font-family: var(--rd-mono);
    font-size: 12px; color: var(--dmt-pure); letter-spacing: 1px; cursor: pointer;
}

/* ── Pill de Ranking: markup y medidas de la maqueta ── */
#jr-rank.jm-rank {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-medium); background: rgba(255,255,255,.02);
    border-radius: 12px; padding: 10px 14px; white-space: nowrap;
}
.jm-rank-ic { font-size: 14px; line-height: 1; }
.jm-rank-l {
    font-family: var(--rd-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--dmt-pure); font-weight: 600;
}
#jr-rank.jm-rank b {
    font-family: var(--rd-mono); font-size: 13px; font-weight: 800;
    color: var(--dmt-pure); letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════
   52. Tonos de la maqueta, estado del Bridge y aire de challenges
   ═══════════════════════════════════════════════════════════════ */

/* tonos de valores (los usa el JS vía _jrTono) */
.mq .st-v.pos, .mq .pos { color: var(--rd-green); }
.mq .st-v.neg, .mq .neg { color: var(--rd-red); }
.mq .st-v.am,  .mq .am  { color: var(--dmt-pure); }

/* estado del Bridge en el subtítulo del header */
.jm-conn { font-weight: 700; }
.jm-conn::before { content: "● "; }
.jm-conn.on   { color: var(--rd-green); }
.jm-conn.idle { color: var(--rd-amber); }
.jm-conn.off  { color: var(--text-faint); }

/* ── Challenges: mismo margen que Rendimiento/Prop Firm ──
   Se alinea a .sec-lbl y las cards usan el radio/padding de la maqueta. */
#journal-challenges { margin: 0; }
#journal-challenges .chg-scroll {
    display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity;
}
#journal-challenges .chg-card {
    flex: 1 1 340px; min-width: 300px; scroll-snap-align: start;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 18px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 13px;
}
.chg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chg-acc { font-family: var(--rd-mono); font-weight: 800; font-size: 15px; color: var(--text-primary); }
.chg-state { margin-left: auto; font-family: var(--rd-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.chg-state.ok   { color: var(--rd-green); background: rgba(47,208,122,.12); border-color: rgba(47,208,122,.3); }
.chg-state.risk { color: var(--rd-red);   background: rgba(239,77,84,.12);  border-color: rgba(239,77,84,.3); }
.chg-row .chg-lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--rd-body); font-size: 12.5px; color: var(--text-secondary); margin-bottom: 7px; }
.chg-row .chg-lbl b { font-family: var(--rd-mono); font-weight: 700; }
.chg-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.chg-bar i { display: block; height: 100%; border-radius: 999px; }
.chg-bar i.ok   { background: var(--rd-green); }
.chg-bar i.warn { background: var(--rd-amber); }
.chg-bar i.risk { background: var(--rd-red); }
.chg-sub { font-family: var(--rd-mono); font-size: 10px; color: var(--text-faint); margin-top: 6px; }
.chg-note { font-family: var(--rd-body); font-size: 12.5px; color: var(--text-faint); }
.chg-foot { display: flex; align-items: center; gap: 10px; font-family: var(--rd-body); font-size: 11px; color: var(--text-faint); padding-top: 11px; border-top: 1px solid var(--border-subtle); }
.chg-foot button { margin-left: auto; background: transparent; border: 0; color: var(--text-faint); cursor: pointer; font-size: 14px; }
.chg-foot button:hover { color: var(--dmt-pure); }

/* .grid quedó excluido de la extracción (choca con Tailwind): lo declaramos para la store */
#store.store-mq .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
#store.store-mq .prod-img { height: 120px; display: grid; place-items: center; font-size: 38px; }
#store.store-mq .prod-img img { width: 100%; height: 100%; object-fit: cover; }
/* ═══════════════════════════════════════════════════════════════
   53. STORE sobre la maqueta (.mq .store-mq)
   El grueso (.prod, .grid, .chip, .coins, .topbar) viene de maqueta.css.
   Acá solo el buscador y las piezas nuestras que la maqueta no trae.
   ═══════════════════════════════════════════════════════════════ */
#store.store-mq { padding: 24px 30px 40px; }
@media (max-width: 900px) { #store.store-mq { padding: 18px; } }

.store-search-row { position: relative; max-width: 380px; margin-bottom: 18px; }
.store-search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; }
#store-search { width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--border-subtle); border-radius: 11px; padding: 11px 34px 11px 36px; color: var(--text-primary); font-family: var(--rd-body); font-size: 13.5px; outline: none; }
#store-search::placeholder { color: var(--text-faint); }
#store-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--text-faint); cursor: pointer; font-size: 12px; }

/* la card premium bloqueada: el .lock morado de la maqueta */
#store .prod .lock { opacity: 1; }
#store .prod .lock-time { top: 10px; left: 10px; right: auto; background: rgba(239,77,84,.9); color: #fff; }
#store .prod-b .cat { color: var(--dmt-pure); }
#store .prod-btns { display: flex; gap: 7px; }
#store .prod-f .price.prem { color: var(--rd-purple); font-family: var(--rd-body); font-weight: 700; font-size: 12px; }
#store .prod:hover { transform: translateY(-4px); border-color: rgba(255,159,0,.3); }

/* mensajes de estado (cargando / vacío / error), ocupando todo el ancho de la grilla */
.store-msg { grid-column: 1 / -1; text-align: center; padding: 56px 20px; color: var(--text-faint); font-family: var(--rd-body); font-size: 13.5px; }
.store-msg i { display: block; font-size: 26px; opacity: .3; margin-bottom: 12px; }
.store-msg.err { color: var(--rd-red); }
.store-msg .chip { margin-top: 14px; }

@keyframes prod-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ═══ 54. Aurora: brillo naranja elegante arriba (de la maqueta .aurora) ═══ */
#app-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#app-aurora::before { content: ""; position: absolute; width: 620px; height: 620px; top: -280px; left: 30%; border-radius: 50%; filter: blur(120px); background: radial-gradient(circle, rgba(255,159,0,.13), transparent 65%); }
/* el contenido de las secciones va por encima del brillo */
main > section { position: relative; z-index: 1; }
/* la imagen del producto se recorta dentro de su caja de 120px */
#store.store-mq .prod-img { overflow: hidden; }
#store.store-mq .prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* .chips: aire arriba (la maqueta solo trae margin-bottom, quedaba pegada al buscador) */
.mq .chips { margin-top: 16px; }

/* círculo con el número de items por categoría en los chips de la store */
.mq .chip .chip-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--text-secondary); font-family: var(--rd-mono); font-size: 10px; font-weight: 700; line-height: 1; }
.mq .chip.on .chip-count { background: rgba(255,159,0,.28); color: var(--dmt-pure); }
.mq .chip.chip-empty { opacity: .45; }

/* ═══════════════════════════════════════════════════════════════
   55. SEÑALES sobre la maqueta (.mq .sg-mq)
   Las cards (.sig/.sbar/.sin/.levels/.lv/.sst/.shist/.hev) y .tabs/.prem
   vienen de maqueta.css. Acá solo el ancho, los tabs como <button> y el
   empty-state (que la maqueta no trae).
   ═══════════════════════════════════════════════════════════════ */
/* El bloque 51 mete #senales en la lista de secciones con `margin-inline: 0
   !important` (ancho completo), así que sin !important acá la sección quedaba
   pegada a la izquierda con 448px libres a la derecha. Mismo truco que usa
   #purchases.pur-mq. */
#senales.sg-mq { padding: 24px 30px 40px; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 900px) { #senales.sg-mq { padding: 18px; } }

/* los tabs son <button>, la maqueta usa <div class="tab"> */
#senales .tab.sg-tab { background: transparent; border: 0; font-family: var(--rd-body); cursor: pointer; }

/* .prem apagado (sin premium): gris en vez de ámbar */
.mq .prem.off { color: var(--text-faint); border-color: var(--border-subtle); background: rgba(255,255,255,.04); }

/* empty-state, con el aire de las cards */
#senales .sg-empty { text-align: center; padding: 56px 24px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; }
#senales .sg-empty i { font-size: 26px; color: var(--text-faint); opacity: .5; }
#senales .sg-empty.locked i { color: var(--dmt-pure); opacity: .8; }
#senales .sg-empty p { font-family: var(--rd-disp); font-weight: 700; font-size: 17px; color: var(--text-primary); margin: 14px 0 6px; }
#senales .sg-empty span { font-family: var(--rd-body); font-size: 13.5px; color: var(--text-secondary); display: block; max-width: 420px; margin: 0 auto; line-height: 1.55; }
#senales .sg-empty .dx-cta { max-width: 260px; margin: 20px auto 0; }
#senales .dx-skel { font-family: var(--rd-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding: 44px 0; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   56. BATTLE PASS sobre la maqueta (.mq .bp-mq)
   .bphero/.season/.stipend/.tierwrap/.tcol/.tier/.mgrid/.mcard/.ms/
   .plans/.plan/.pbtn vienen de maqueta.css. Acá: ancho, .meta (que la
   maqueta no exportó por chocar), y el mensaje de carga.
   ═══════════════════════════════════════════════════════════════ */
#battlepass.bp-mq { padding: 56px 30px 40px; position: relative; }
@media (max-width: 900px) { #battlepass.bp-mq { padding: 18px; } }

/* .meta del hero (quedó fuera del extractor) */
.mq .bphero .meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.mq .bphero .meta .k { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.mq .bphero .meta .v { font-family: var(--rd-disp); font-weight: 800; font-size: 23px; letter-spacing: -.02em; margin-top: 5px; }

/* el canvas de partículas detrás del contenido */
#battlepass .bp-bg-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#battlepass.bp-mq > *:not(.bp-bg-canvas) { position: relative; z-index: 1; }

/* mensaje de carga / vacío / error */
.bp-msg { text-align: center; padding: 60px 20px; color: var(--text-faint); font-family: var(--rd-body); font-size: 14px; }
.bp-msg i { margin-right: 8px; }
.bp-msg.err { color: var(--rd-red); }

/* el picker de EA */
#bp-ea-picker { margin-top: 14px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; }
#bp-ea-picker.hidden { display: none; }
#bp-ea-picker label { display: block; font-family: var(--rd-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.bp-ea-select { width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 12px; color: var(--text-primary); font-family: var(--rd-body); }

/* status inline de misiones (en revisión, etc.) */
#battlepass .bp-m-status:empty { display: none; }
#battlepass .bp-m-status { font-family: var(--rd-mono); font-size: 10px; color: var(--text-faint); margin-top: 4px; }

/* Riel de tiers: cada nodo centrado sobre su card. La col centra su
   contenido y dot+card comparten ancho, así el dot queda sobre la card. */
.bp-mq .tiertrack .tcol { align-items: center; }
.bp-mq .tiertrack .tline { width: 100%; }
.bp-mq .tiertrack .tcol .tier { width: 100%; flex: 0 0 auto; margin: 10px 0 0; align-self: stretch; }

/* El .lock de la store (badge absoluto morado) colisiona con .tier.lock del
   Battle Pass. En la maqueta viven en páginas separadas; acá no. Se restaura
   el tier bloqueado a su estilo normal. */
.bp-mq .tiertrack .tier.lock {
    position: relative; top: auto; right: auto; left: auto;
    background: rgba(255,255,255,.025); color: inherit;
    padding: 14px 10px; border-radius: 14px;
    font-size: inherit; font-weight: inherit; letter-spacing: normal;
}

/* .xp i colisiona: el dashboard lo usa naranja (rango), el Battle Pass morado.
   El extractor se quedó con el naranja; forzamos morado dentro del pase. */
#battlepass .xp i { background: linear-gradient(90deg, #7a3fb0, var(--rd-purple), #e0b3ff) !important; box-shadow: 0 0 18px rgba(192,132,252,.45); }
#battlepass .xp { height: 11px; }
/* glow del hero un poco más presente, como la maqueta */
#battlepass .bphero { background:
    radial-gradient(110% 130% at 15% 0, rgba(192,132,252,.26), transparent 60%),
    radial-gradient(110% 130% at 92% 10%, rgba(255,159,0,.14), transparent 60%),
    #100f16 !important; }
/* puntitos sutiles de fondo (la maqueta los tiene por el canvas #fx) */
#battlepass .bphero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.4px);
    background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 120% at 30% 0, #000 10%, transparent 70%);
    mask-image: radial-gradient(120% 120% at 30% 0, #000 10%, transparent 70%); }

/* .ms colisiona: el dashboard lo usa como caja con borde, el Battle Pass como
   fila con línea superior. El extractor se quedó con la caja; lo forzamos a fila. */
#battlepass .mcard .ms {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0; border: 0; border-top: 1px solid var(--border-subtle);
    border-radius: 0; background: transparent;
}
#battlepass .mcard .ms:first-of-type { border-top: 0; }
#battlepass .mcard .mt .t { font-size: 13px; font-weight: 600; color: var(--text-primary); }
#battlepass .mcard .mt .s { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
#battlepass .mcard .mbar i { background: var(--rd-purple); }

/* señales: ancho acotado, si no las cajas de niveles se estiran vacías */
#senales.sg-mq { max-width: 1180px !important; }

/* .hd/.ht/.hm (dot, texto, hora del timeline) se perdieron en la extracción */
/* .hev: dot/texto/hora — el texto envuelve y la hora queda a la derecha */
#senales .hev { align-items: flex-start; }
#senales .hd { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px; }
#senales .ht { flex: 1; min-width: 0; line-height: 1.55; word-break: break-word; }
#senales .ht b { color: var(--text-primary); font-weight: 700; }
/* el detalle iba pegado al título en negrita: se separa y baja de jerarquía */
#senales .ht .hs { display: block; margin-top: 3px; font-family: var(--rd-mono); font-size: 11px;
    color: var(--text-secondary); font-weight: 400; }
#senales .hm { font-family: var(--rd-mono); font-size: 10.5px; color: var(--text-faint); flex: 0 0 auto; white-space: nowrap; margin-top: 1px; }
/* cierres sin resultado claro (Cancelada / Manual): gris, ni win ni loss */
#senales .sst.neutral { color: var(--text-secondary); background: rgba(255,255,255,.07); }

/* tipo de drawdown en la card del challenge (solo si es trailing) */
.chg-ddtipo { font-family: var(--rd-mono); font-size: 8px; font-style: normal; font-weight: 700;
    letter-spacing: .1em; padding: 2px 5px; margin-left: 5px; border-radius: 4px;
    background: rgba(255,159,0,.14); color: var(--dmt-pure); cursor: help; }

/* Mis Compras: mismo ancho/padding que store, sin base translúcida (aurora) */
#purchases { max-width: 1180px !important; margin-inline: auto; padding: 24px 30px 40px !important; }
@media (max-width: 900px) { #purchases { padding: 18px !important; } }

/* ═══ 59. Scrollbars sutiles en toda la app ════════════════════
   Delgados, sin flechas y casi invisibles hasta que se usa el scroll.
   (El juego #nivel1 mantiene el suyo.) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* el sidebar no muestra barra: se desplaza igual */
#sidebar, .sv-nav { scrollbar-width: none; }
#sidebar::-webkit-scrollbar, .sv-nav::-webkit-scrollbar { width: 0; height: 0; }

/* ═══════════════════════════════════════════════════════════════
   60. MIS COMPRAS — grilla precisa
   Ritmo vertical único (--pc-gap) para que todos los bloques caigan
   sobre la misma línea base. El buscador se estiliza por CLASE, no por
   el id de la Store (era el motivo del input "fantasma" sin estilo).
   ═══════════════════════════════════════════════════════════════ */
#purchases.pur-mq {
    --pc-gap: 16px;
    max-width: 1160px !important;
    margin-inline: auto !important;      /* gana al margin-inline:0 del bloque 51 */
    padding: 32px 32px 56px !important;
}
@media (max-width: 900px) { #purchases.pur-mq { padding: 20px 18px 40px !important; } }

/* ── Cabecera ── */
#purchases .topbar { align-items: center; margin-bottom: 26px; }
#purchases .topbar .tb-h { font-size: 24px; }
#purchases .topbar .tb-s { margin-top: 4px; }
#purchases .topbar .sx-act { display: flex; align-items: center; gap: 10px; }
#purchases #purchases-refresh-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    font-family: var(--rd-body); font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle);
    color: var(--text-secondary); border-radius: 11px; cursor: pointer; transition: .18s;
}
#purchases #purchases-refresh-btn:hover { color: var(--dmt-pure); border-color: rgba(255,159,0,.35); }

/* ── Buscador (por clase: los ids son de purchases, no de store) ── */
#purchases .store-search-row { position: relative; max-width: 440px; margin: 0 0 18px; }
#purchases .store-search-row input {
    width: 100%; height: 44px; box-sizing: border-box;
    background: rgba(0,0,0,.32); border: 1px solid var(--border-subtle); border-radius: 12px;
    padding: 0 38px 0 40px; color: var(--text-primary);
    font-family: var(--rd-body); font-size: 13.5px; outline: none; transition: border-color .18s;
}
#purchases .store-search-row input:focus { border-color: rgba(255,159,0,.4); }
#purchases .store-search-row input::placeholder { color: var(--text-faint); }
#purchases .store-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-faint); pointer-events: none; }
#purchases .store-search-row > button {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--text-faint); font-size: 13px; cursor: pointer; line-height: 1;
}
#purchases .store-search-row > button:hover { color: var(--text-primary); }

/* ── Chips: misma altura, contador integrado ── */
#purchases .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
#purchases .chips:last-of-type { margin-bottom: 26px; }
#purchases .chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 999px;
    font-family: var(--rd-body); font-size: 12.5px; font-weight: 700; line-height: 1;
}
#purchases .chip .purchases-count:empty { display: none; }
#purchases .chip .purchases-count {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: rgba(255,255,255,.09); color: var(--text-secondary);
    font-family: var(--rd-body); font-size: 11px; font-weight: 700; line-height: 1;
}
#purchases .chip.on .purchases-count { background: rgba(255,159,0,.26); color: var(--dmt-pure); }

/* ── Lista ── */
#purchases #purchases-list.grid { display: flex; flex-direction: column; gap: 18px; }

/* ── Card: grilla [imagen | contenido] con ritmo vertical uniforme ── */
.pcard {
    display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px;
    align-items: start;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-left-width: 3px; border-radius: 18px; padding: 24px;
    transition: border-color .2s, background .2s;
}
.pcard:hover { background: var(--bg-card-hover); }
.pcard.ok   { border-left-color: rgba(47,208,122,.55); }
.pcard.pend { border-left-color: rgba(255,159,0,.55); }

.pcard-img {
    width: 132px; height: 132px; border-radius: 14px; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0, rgba(255,159,0,.16), transparent 65%), rgba(0,0,0,.35);
    display: grid; place-items: center; font-size: 40px; border: 1px solid var(--border-subtle);
}
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* el contenido apila bloques con el MISMO gap: esa es la línea base */
.pcard-main { display: flex; flex-direction: column; gap: var(--pc-gap, 16px); min-width: 0; }

/* cabecera */
.pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pcard-title { min-width: 0; }
.pcard-cat { display: block; font-family: var(--rd-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--dmt-pure); }
.pcard-title h3 { font-family: var(--rd-disp); font-weight: 700; font-size: 18px; letter-spacing: -.015em; color: var(--text-primary); margin: 7px 0 0; line-height: 1.25; }
.pcard-st { flex: 0 0 auto; display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
    font-family: var(--rd-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid; border-radius: 7px; white-space: nowrap; }

/* meta: pegada al título, no cuenta como bloque aparte */
.pcard-head + .pcard-meta { margin-top: calc(var(--pc-gap, 16px) * -0.55); }
.pcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    font-family: var(--rd-mono); font-size: 10.5px; color: var(--text-faint); }
.pcard-meta i { margin-right: 6px; opacity: .75; }
.pc-regalo { color: var(--rd-green); }
.pc-exp.pronto { color: var(--dmt-pure); }
.pc-exp.vencido { color: var(--rd-red); }

/* aviso de estado */
.pc-aviso { display: flex; align-items: center; gap: 10px; padding: 12px 15px;
    background: rgba(255,159,0,.07); border: 1px solid rgba(255,159,0,.2); border-radius: 12px;
    font-family: var(--rd-body); font-size: 12.5px; color: var(--text-secondary); }
.pc-aviso.ok { background: rgba(47,208,122,.07); border-color: rgba(47,208,122,.22); }
.pc-aviso i { color: var(--dmt-pure); } .pc-aviso.ok i { color: var(--rd-green); }
.pc-aviso b { color: var(--text-primary); }

/* datos de entrega: fila secundaria, celdas parejas */
.pcard-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px;
    background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
/* `pcard-d`, no `pc-d`: ese nombre ya es la celda del calendario del journal
   en la maqueta (.mq .pc-d) y le ganaba por especificidad. */
.pcard-d { background: rgba(0,0,0,.22); padding: 13px 16px; min-width: 0; }
.pcard-d .k { display: block; font-family: var(--rd-mono); font-size: 8.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; }
.pcard-d .v { display: block; font-family: var(--rd-body); font-size: 13px; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }

/* pie: acciones izquierda, ID derecha, misma altura */
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding-top: var(--pc-gap, 16px); border-top: 1px solid var(--border-subtle); }
.pcard-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 17px; box-sizing: border-box; text-decoration: none;
    font-family: var(--rd-body); font-size: 12.5px; font-weight: 800; line-height: 1;
    background: linear-gradient(145deg, var(--rd-amber-2), var(--rd-amber)); color: #160e02;
    border: 1px solid transparent; border-radius: 11px; cursor: pointer; transition: .18s; white-space: nowrap;
}
.pc-btn:hover { filter: brightness(1.07); }
.pc-btn.ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-subtle); font-weight: 700; }
.pc-btn.ghost:hover { color: var(--dmt-pure); border-color: rgba(255,159,0,.35); }

.pcard-id { display: inline-flex; align-items: center; gap: 9px; height: 40px;
    font-family: var(--rd-mono); font-size: 10px; color: var(--text-faint); }
.pcard-id .lbl { letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.pcard-id code { color: var(--text-secondary); }
.pcard-id button { background: transparent; border: 0; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px; line-height: 1; }
.pcard-id button:hover { color: var(--dmt-pure); }

@media (max-width: 700px) {
    .pcard { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .pcard-img { width: 100%; height: 150px; }
    .pcard-foot { flex-direction: column; align-items: stretch; }
    .pcard-id { justify-content: flex-start; height: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOURNAL EN MODO DEMO + RECORRIDO GUIADO
   Quien no tiene acceso veia un rebote al Battle Pass. Ahora ve la seccion con
   datos de ejemplo y un tour que le explica que esta mirando.
   ═══════════════════════════════════════════════════════════════════════════ */

.jr-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; margin-bottom: 14px; padding: 14px 18px; border-radius: 14px;
    border: 1px solid rgba(255,159,0,.28); background: linear-gradient(180deg, rgba(255,159,0,.10), rgba(255,159,0,.03)); }
/* flex:1 1 520px — con el texto largo, el bloque ocupaba la fila entera y
   empujaba los botones abajo. Así se encoge y los botones siguen a la derecha. */
.jr-demo-t { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1 1 520px; }
.jr-demo-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px; color: #08090c; background: var(--rd-amber, #ff9f00); }
.jr-demo-t b { display: block; font-size: 14.5px; color: var(--ink, #f5f6f8); }
.jr-demo-t span { font-size: 13px; color: var(--dim, #969ca8); }
.jr-demo-a { display: flex; gap: 9px; flex: 0 0 auto; }
@media (max-width: 700px) {
    .jr-demo-bar { flex-direction: column; align-items: stretch; }
    .jr-demo-a { flex-direction: column; }
    .jr-demo-a .btn { width: 100%; justify-content: center; }
}

/* El agujero del tour: un div sin fondo con una sombra gigante que oscurece
   todo lo de afuera. Sin overlay + clip-path ni cuatro divs de relleno. */
#jt-capa { position: fixed; z-index: 9998; pointer-events: none; border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(255,159,0,.55), 0 0 0 9999px rgba(4,5,7,.78);
    transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease; }
/* El fondo si tiene que recibir el clic para poder salir; el recuadro no. */
#jt-capa::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: auto; }

#jt-globo { position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 24px);
    padding: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.13);
    background: #101318; box-shadow: 0 26px 60px rgba(0,0,0,.6);
    transition: top .28s ease, left .28s ease; }
#jt-globo .jt-num { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--rd-amber, #ff9f00); margin-bottom: 8px; }
#jt-globo h4 { margin: 0 0 7px; font-size: 16.5px; font-weight: 700; color: var(--ink, #f5f6f8); line-height: 1.3; }
#jt-globo p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dim, #969ca8); }
.jt-pips { display: flex; gap: 5px; margin: 15px 0 13px; }
.jt-pips span { width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); transition: background .2s; }
.jt-pips span.on { background: var(--rd-amber, #ff9f00); }
.jt-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jt-nav { display: flex; gap: 8px; }
.jt-salir { background: none; border: 0; padding: 6px 2px; cursor: pointer;
    font-size: 12.5px; color: var(--faint, #6b7280); }
.jt-salir:hover { color: var(--dim, #969ca8); }
.jt-b { cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: var(--ink, #f5f6f8); }
.jt-b:hover { background: rgba(255,255,255,.09); }
.jt-b.jt-p { border-color: transparent; background: var(--rd-amber, #ff9f00); color: #08090c; }
.jt-b.jt-p:hover { filter: brightness(1.08); }

/* En demo se ocultan SOLO las acciones por fila (editar/quemar/eliminar): son
   ruido para quien no tiene cuentas. "Agregar cuenta" y "Compartir" se quedan a
   la vista y explican por qué no hacen nada — esconder una función es peor que
   mostrarla: el visitante ni se entera de que existe. */
.jr-es-demo .jm-acts { display: none !important; }
.jr-es-demo #journal-add-account,
.jr-es-demo [data-jr-shot],
.jr-es-demo #jr-synckey-val { cursor: help; }

/* Aviso sobre el analisis de ejemplo en la demo. */
.jx-tip-demo { margin: 0 0 12px; padding-bottom: 11px; font-size: 12.5px; color: var(--faint, #6b7280);
    border-bottom: 1px solid rgba(255,255,255,.07); }

/* ═══ Planes del Battle Pass: las tarjetas VIVAS usan el mismo diseño que el
   bloque de texto de abajo (era el que gustaba), más botón y cupos. ═══ */
.bps-planes-viva { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; margin: 4px 0 0; }
.bps-plan.bps-viva { display: flex; flex-direction: column; position: relative; padding: 24px 22px; }
/* el <ul> empuja al botón al pie: las tres tarjetas cierran a la misma altura
   aunque una tenga más items */
.bps-plan.bps-viva .bps-inc { flex: 1 1 auto; margin-bottom: 18px; }

.bps-tag {
    position: absolute; top: -9px; left: 22px; padding: 4px 11px; border-radius: 999px;
    font-family: var(--rd-mono); font-size: 9px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #08090c; background: var(--rd-amber, #ff9f00);
}

.bps-btn {
    width: 100%; padding: 13px 16px; border-radius: 11px; cursor: pointer;
    font-family: var(--rd-body); font-size: 14px; font-weight: 700;
    border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
    color: var(--text-primary); transition: .18s;
}
.bps-btn:hover:not(:disabled) { background: rgba(255,255,255,.09); border-color: rgba(255,159,0,.35); }
.bps-btn.on { border-color: transparent; background: var(--rd-amber, #ff9f00); color: #08090c; }
.bps-btn.on:hover:not(:disabled) { filter: brightness(1.08); }
.bps-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Cupos del Founder */
.bps-cupos { margin-bottom: 16px; }
.bps-cupos-barra { height: 5px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.bps-cupos-barra span { display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--rd-amber, #ff9f00), #ffd54a); transition: width .5s ease; }
.bps-cupos-txt { margin-top: 7px; font-family: var(--rd-mono); font-size: 10.5px;
    letter-spacing: .06em; color: var(--text-faint); }
.bps-cupos-txt b { color: var(--rd-amber, #ff9f00); font-size: 12px; }

/* Licencia vencida: mismo lugar y forma que el aviso de demo, en rojo. Los datos
   se ven completos; lo que escribe queda atenuado y explica por qué al tocarlo. */
.jr-demo-bar:has(.jr-demo-tag.venc) { border-color: rgba(239,77,84,.3);
    background: linear-gradient(180deg, rgba(239,77,84,.10), rgba(239,77,84,.03)); }
.jr-demo-tag.venc { background: var(--rd-red, #ef4d54); color: #fff; }

.jr-vencida #journal-add-account,
.jr-vencida .jm-acts,
.jr-vencida #jr-synckey { opacity: .4; cursor: not-allowed; }

/* Estado vacío del historial. Con clases propias: dentro de .mq las utilidades
   de margen/padding de Tailwind no aplican (ver `.mq *` arriba). */
.jm-vacio { padding: 44px 24px; text-align: center;
    border: 1px dashed var(--border-subtle); border-radius: 16px; background: rgba(0,0,0,.2); }
.jm-vacio i { display: block; font-size: 30px; color: var(--dmt-pure, #ff9f00); margin-bottom: 14px; }
.jm-vacio h4 { margin: 0; font-family: var(--rd-disp); font-size: 15px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; color: var(--text-primary); }
.jm-vacio p { max-width: 46ch; margin: 9px auto 0; font-size: 13.5px; line-height: 1.6;
    color: var(--text-faint); }

/* ═══ Piezas del Journal que usaban utilidades de Tailwind muertas ═══
   Dentro de .mq, `.mq * { margin:0; padding:0 }` gana por orden de carga a
   .p-4 / .mb-6 / .mt-4 / .px-4… Estos bloques quedaban sin aire ni separación.
   Se reescriben con clases propias en vez de habilitar las utilidades, que
   moverían también lo que hoy se ve bien justamente porque están muertas. */

/* curva de equity del hero */
.jm-eqbox { padding: 16px; margin-bottom: 24px; border-radius: 16px;
    background: rgba(0,0,0,.3); border: 1px solid var(--border-subtle); }
.jm-eqbox-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* paginación del historial */
.jm-pag { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.jm-pag-b { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px;
    border: 1px solid var(--border-subtle); background: rgba(255,255,255,.05);
    color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer; transition: .18s; }
.jm-pag-b:hover:not(:disabled) { background: rgba(255,255,255,.1); color: var(--text-primary); }
.jm-pag-b:disabled { opacity: .3; cursor: not-allowed; }
.jm-pag-n { font-family: var(--rd-mono); font-size: 12px; color: var(--text-faint); }

/* resumen de posiciones abiertas */
.jm-open-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.jm-open-card { padding: 16px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid var(--border-subtle); }
.jm-open-l { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 5px; }
.jm-open-v { font-family: var(--rd-mono); font-size: 17px; font-weight: 800; color: var(--text-primary); }
.jm-open-v.pos { color: var(--rd-green); }
.jm-open-v.neg { color: var(--rd-red); }
@media (max-width: 560px) { .jm-open-stats { grid-template-columns: 1fr; } }