/* ============================================================================
   DUALLEDGER — SISTEMA DE DISEÑO
   ============================================================================

   Este fichero es la ÚNICA fuente de estilos de la aplicación.

   ⚠️ El nombre "dashboard.css" se conserva a propósito: _Host.cshtml lo enlaza
   en todas las páginas y cambiarlo tocaría el arranque de la aplicación entera
   por un motivo puramente cosmético. Su contenido ya no es "el dashboard": es
   el sistema completo.

   QUÉ HABÍA ANTES
   ---------------
   Tres paletas compitiendo entre sí:
     · Home.razor       → --bg:#0b0e14  --cyan:#00dbfe   (dentro de <HeadContent>)
     · Dashboard.razor  → los mismos valores, copiados a mano
     · dashboard.css    → --bg-abyssal:#080B12  --shark-cyan:#00E5FF  (sin usar)
   Ocho kilobytes de CSS cargados en cada página que ninguna página utilizaba, y
   cada cambio de color había que hacerlo dos veces. Por eso divergieron.

   CÓMO SE ELIGIERON LOS COLORES
   -----------------------------
   No a ojo. Medidos con el validador de paletas:

     Marcas del gráfico (velas)   #2dac7b / #cc3a6d
       · banda de luminosidad OKLCH ..... PASS  (dark 0,48–0,67)
       · suelo de croma ................. PASS
       · separación bajo daltonismo ..... 7,6 ΔE (deutan)  ← ver nota
       · contraste sobre el panel ....... PASS

     Texto de ganancia/pérdida    #4fd3a0 / #f2688f
       · contraste WCAG sobre panel ..... 9,53:1  y  6,11:1   (mínimo 4,5:1)

   ⚠️ NOTA SOBRE EL VERDE Y EL ROJO. Es EL par que un daltónico no distingue.
   Su separación (7,6) queda en la banda que solo es aceptable si el color NUNCA
   viaja solo. Por eso en esta interfaz toda cifra de resultado lleva signo — el
   "+" o el "−" delante — y las fichas llevan además una flecha ▲▼. El color
   confirma; el signo informa. Si alguna vez pintas un número de resultado sin
   signo, has roto esa garantía.

   Y el rojo se movió hacia el rosa (#cc3a6d en vez de #f6465d) precisamente
   para ganar esa separación: con el rojo puro anterior bajaba a 4,5, por debajo
   del suelo, y no había signo que lo salvara.

   EL CERO ES NEUTRO
   -----------------
   Antes `pnl >= 0 ? verde : rojo` pintaba de VERDE un resultado de 0,00. Cero no
   es una ganancia. Va en gris (--ink-3): es el punto medio de una escala que va
   de negativo a positivo, y merece su propio color.

   ============================================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root {
    /* Superficies, de la más honda a la más elevada */
    --sf-page:   #0a0d13;
    --sf-inset:  #0d1119;
    --sf-panel:  #121722;
    --sf-raised: #1a2030;

    /* Líneas */
    --ln:        #242c3c;
    --ln-strong: #313a4e;

    /* Tinta — el texto SIEMPRE usa estos, nunca un color de serie */
    --ink:   #e8ecf4;   /* 15,1:1 sobre panel */
    --ink-2: #a9b2c3;   /*  8,4:1 */
    --ink-3: #7f8a9c;   /*  5,1:1 */

    /* Acento de marca e interacción */
    --ac:      #35c8e0;             /* 8,95:1 sobre panel */
    --ac-dim:  rgba(53,200,224,.12);
    --ac-line: rgba(53,200,224,.38);

    /* Polaridad — MARCAS (velas del gráfico): validadas en banda OKLCH */
    --pos: #2dac7b;
    --neg: #cc3a6d;

    /* Polaridad — TINTA (cifras): validadas por contraste WCAG */
    --pos-ink: #4fd3a0;
    --neg-ink: #f2688f;
    --flat-ink: var(--ink-3);       /* el cero, en neutro */

    --pos-dim: rgba(45,172,123,.12);
    --neg-dim: rgba(204,58,109,.12);

    /* Estado — reservados. No se reutilizan como "color de serie". */
    --st-ok:   #4fd3a0;
    --st-warn: #e8b23a;
    --st-crit: #f2688f;

    /* Escala de espaciado, base 4 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;

    /* Escala tipográfica. El suelo sube de 9px a 11px: nueve píxeles no son
       legibles en una pantalla normal, y aquí se leen precios. */
    --fs-micro: 11px;
    --fs-body:  12px;
    --fs-med:   13px;
    --fs-lg:    15px;
    --fs-stat:  20px;
    --fs-hero:  26px;

    --r-1: 4px;  --r-2: 6px;  --r-3: 10px;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);

    --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', monospace;
}

/* ── 1b. ALIAS DE COMPATIBILIDAD ─────────────────────────────────────────── */
/* El marcado de Home.razor y Dashboard.razor usa estos nombres dentro de
   atributos style="" en línea — decenas de veces, en tablas, botones y celdas.
   Borrarlos sin más dejaría esas propiedades sin resolver y el texto se pintaría
   del color heredado, sin avisar de nada: no es un error, es peor, es un
   silencio.

   Se mantienen como alias apuntando a los tokens nuevos. Así el rediseño entra
   completo sin reescribir el marcado en el mismo paso, y migrar cada style=""
   a su clase (.pos, .neg, .acc) puede hacerse después, con calma y a la vista. */
:root {
    --bg:     var(--sf-page);
    --panel:  var(--sf-panel);
    --border: var(--ln);
    --text:   var(--ink);
    --muted:  var(--ink-3);
    --cyan:   var(--ac);
    --green:  var(--pos-ink);
    --red:    var(--neg-ink);
    --gold:   var(--st-warn);
}

/* ── 2. BASE ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--sf-page);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* Cifras alineadas en columna. En una tabla de precios esto no es un detalle:
   sin ancho fijo por dígito, los decimales bailan y el ojo no puede comparar. */
.num, td, th, .mc .v, .stat-v, input[type=number] { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ln-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
* { scrollbar-width: thin; scrollbar-color: var(--ln-strong) transparent; }

/* Foco visible SIEMPRE. Se navega esta interfaz con teclado más de lo que
   parece, y un foco invisible es una trampa. */
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: var(--r-1); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ── 3. POLARIDAD ────────────────────────────────────────────────────────── */
.pos, .v.g, .val-positive { color: var(--pos-ink); }
.neg, .v.r, .val-negative { color: var(--neg-ink); }
.flat                     { color: var(--flat-ink); }
.acc, .v.c                { color: var(--ac); }

/* ── 4. PANELES ──────────────────────────────────────────────────────────── */
.pn, .panel, .tw {
    background: var(--sf-panel);
    border: 1px solid var(--ln);
    border-radius: var(--r-2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel { padding: var(--sp-4); }

/* Cabecera de panel */
.pn > .ph, .tw > .ph {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--ln);
    background: linear-gradient(180deg, var(--sf-raised), var(--sf-panel));
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    flex-shrink: 0;
}

.panel > .ph {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ln);
}

.pb { flex: 1; overflow-y: auto; padding: var(--sp-1); font-size: var(--fs-micro); }

/* ── 5. FICHAS DE CIFRA (stat tiles) ─────────────────────────────────────── */
/* ⚠️ Eran `repeat(4,1fr)` con CINCO fichas dentro: la quinta caía a una segunda
   fila con un cuarto del ancho. auto-fit evita que vuelva a pasar al añadir una
   sexta. */
.bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-2);
    flex-shrink: 0;
}

.mc {
    background: var(--sf-panel);
    border: 1px solid var(--ln);
    border-radius: var(--r-2);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
    transition: border-color .15s;
}
.mc:hover { border-color: var(--ln-strong); }

.mc .l {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc .v {
    font-size: var(--fs-stat);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* ── 6. TABLAS ───────────────────────────────────────────────────────────── */
.ts { flex: 1; overflow: auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-micro); }

th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sf-raised);
    color: var(--ink-3);
    text-align: left;
    padding: var(--sp-2) var(--sp-2);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ln);
    white-space: nowrap;
}

td {
    padding: var(--sp-2);
    border-bottom: 1px solid var(--ln);
    white-space: nowrap;
    color: var(--ink-2);
}

tbody tr:hover td, tr:hover td { background: var(--sf-raised); }

/* ── 7. CONSOLA DE REGISTRO ──────────────────────────────────────────────── */
.log {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    font-family: var(--mono);
    font-size: var(--fs-micro);
    line-height: 1.5;
    border-bottom: 1px solid rgba(36,44,60,.5);
    color: var(--ink-2);
}
.log .t { color: var(--ink-3); flex-shrink: 0; min-width: 62px; }
.log.s { color: var(--pos-ink); }
.log.w { color: var(--st-warn); }
.log.e { color: var(--neg-ink); }
.log.c { color: var(--ac); }

/* ── 8. CONTROLES ────────────────────────────────────────────────────────── */
select, input, .toolbar select, .toolbar input {
    background: var(--sf-inset);
    color: var(--ink);
    border: 1px solid var(--ln-strong);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-1);
    font-size: var(--fs-micro);
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
select:hover, input:hover { border-color: var(--ink-3); }
select:focus, input:focus { border-color: var(--ac); }
select:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
input[type=checkbox] { accent-color: var(--ac); width: auto; min-width: auto; }

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--ln);
    background: var(--sf-raised);
    flex-shrink: 0;
    font-size: var(--fs-micro);
}
.toolbar input { width: 100px; text-transform: uppercase; }

/* Botón de alternancia (ADX / RSI) */
.toolbar button, .btn {
    background: transparent;
    border: 1px solid var(--ln-strong);
    color: var(--ink-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-1);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    font-family: inherit;
    transition: .15s;
}
.toolbar button:hover, .btn:hover { color: var(--ink); border-color: var(--ink-3); }
.toolbar button.on, .btn.on { border-color: var(--ac-line); color: var(--ac); background: var(--ac-dim); }
.toolbar button.on.adx { border-color: rgba(232,178,58,.5); color: var(--st-warn); background: rgba(232,178,58,.1); }
.toolbar button.on.rsi { border-color: rgba(167,139,250,.5); color: #a78bfa; background: rgba(167,139,250,.1); }

/* Botón de acción */
.bt {
    width: 100%;
    padding: var(--sp-3);
    border-radius: var(--r-2);
    font-size: var(--fs-med);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid transparent;
    transition: .15s;
}
.bt:disabled { opacity: .4; cursor: not-allowed; }
.bt.run  { background: var(--pos); color: #06120d; border-color: var(--pos); }
.bt.run:hover:not(:disabled)  { filter: brightness(1.12); }
.bt.stop { background: var(--neg); color: #fff; border-color: var(--neg); }
.bt.stop:hover:not(:disabled) { filter: brightness(1.12); }
.bt.buy  { background: var(--pos-dim); color: var(--pos-ink); border-color: rgba(45,172,123,.45); }
.bt.buy:hover:not(:disabled)  { background: rgba(45,172,123,.2); }
.bt.sell { background: var(--neg-dim); color: var(--neg-ink); border-color: rgba(204,58,109,.45); }
.bt.sell:hover:not(:disabled) { background: rgba(204,58,109,.2); }

/* Fila etiqueta + control */
.sr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid rgba(36,44,60,.55);
}
.sr:last-child { border-bottom: 0; }
.sr label {
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.sr select, .sr input { width: 104px; text-align: right; }

/* ── 9. DISPOSICIÓN — /motor ─────────────────────────────────────────────── */
.layout {
    display: grid;
    grid-template-columns: 290px minmax(0,1fr) 268px;
    gap: var(--sp-2);
    height: 100vh;
    padding: var(--sp-2);
    overflow: hidden;
}
.center { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; overflow: hidden; }
.right  { display: flex; flex-direction: column; gap: var(--sp-2); overflow-y: auto; }

.chart-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--sf-panel);
    border: 1px solid var(--ln);
    border-radius: var(--r-2);
    overflow: hidden;
    min-height: 0;
}
.chart-cont { flex: 1; position: relative; overflow: hidden; background: var(--sf-inset); }
.chart-cont > div { position: absolute; inset: 0; }

.tables { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); flex-shrink: 0; height: 208px; }

@media (max-width: 1400px) {
    .layout { grid-template-columns: 250px minmax(0,1fr) 240px; }
}
@media (max-width: 1100px) {
    .layout { grid-template-columns: minmax(0,1fr); height: auto; overflow: auto; }
    .tables { grid-template-columns: 1fr; height: auto; }
    .chart-box { min-height: 420px; }
}

/* ── 10. DISPOSICIÓN — /dashboard ────────────────────────────────────────── */
.dash {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--sf-page);
    color: var(--ink);
    font-size: var(--fs-med);
}

.side {
    width: 244px;
    background: var(--sf-panel);
    border-right: 1px solid var(--ln);
    display: flex;
    flex-direction: column;
    padding: var(--sp-4);
    flex-shrink: 0;
}

.brand {
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: var(--sp-5);
}
.brand span { color: var(--ac); }

.user {
    background: var(--sf-inset);
    padding: var(--sp-3);
    border-radius: var(--r-2);
    border: 1px solid var(--ln);
    margin-bottom: var(--sp-4);
    text-align: center;
}
.user h3 { font-size: var(--fs-body); color: var(--ac); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.user p  { font-size: var(--fs-micro); color: var(--ink-3); }

.nav { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.nav button {
    background: transparent;
    color: var(--ink-2);
    border: 1px solid transparent;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-1);
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-body);
    font-family: inherit;
    transition: .15s;
}
.nav button:hover { background: var(--sf-raised); color: var(--ink); }
.nav button.sel { background: var(--ac-dim); border-color: var(--ac-line); color: var(--ac); }

.nav .go {
    background: var(--pos); color: #06120d; margin-top: auto; text-align: center;
    border: 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: var(--sp-3);
}
.nav .go:hover { filter: brightness(1.12); background: var(--pos); color: #06120d; }
.nav .go.stop { background: var(--neg); color: #fff; }
.nav .go.stop:hover { filter: brightness(1.12); background: var(--neg); color: #fff; }

.nav .out {
    background: transparent; border: 1px solid rgba(204,58,109,.45); color: var(--neg-ink);
    text-align: center; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-1); cursor: pointer; font-weight: 700; font-size: var(--fs-micro);
}
.nav .out:hover { background: var(--neg-dim); color: var(--neg-ink); }

.btn-go {
    background: var(--pos); color: #06120d; border: 0;
    padding: var(--sp-2) var(--sp-5); border-radius: var(--r-1); cursor: pointer;
    font-weight: 800; font-size: var(--fs-body); letter-spacing: .06em; font-family: inherit;
}
.btn-go:hover { filter: brightness(1.12); }

.main { flex: 1; display: flex; flex-direction: column; padding: var(--sp-4); gap: var(--sp-3); overflow-y: auto; }

.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row + .row { margin-top: var(--sp-3); }
.row label { color: var(--ink-3); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.chart-container {
    flex: 1; min-height: 380px;
    background: var(--sf-inset);
    border-radius: var(--r-2);
    border: 1px solid var(--ln);
    position: relative; overflow: hidden;
}
.chart-full { position: absolute; inset: 0; }

.link {
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-1);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-decoration: none;
    margin-left: var(--sp-2);
    display: inline-block;
}
.link.c { background: var(--ac-dim); color: var(--ac); border: 1px solid var(--ac-line); }
.link.p { background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.35); }
.link:hover { filter: brightness(1.15); }

@media (max-width: 900px) {
    .dash { flex-direction: column; height: auto; }
    .side { width: 100%; border-right: 0; border-bottom: 1px solid var(--ln); }
    .nav  { flex-direction: row; flex-wrap: wrap; }
    .nav .go { margin-top: 0; }
}

/* ── 11. ESTADO ──────────────────────────────────────────────────────────── */
/* El color nunca va solo: el punto acompaña SIEMPRE a una palabra (LIVE / OFF). */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.on  { background: var(--st-ok);   box-shadow: 0 0 0 3px rgba(79,211,160,.16); }
.dot.off { background: var(--ink-3); }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px var(--sp-2); border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    border: 1px solid var(--ln-strong); color: var(--ink-2); background: var(--sf-inset);
}
.badge.ok   { color: var(--st-ok);   border-color: rgba(79,211,160,.4); background: rgba(79,211,160,.1); }
.badge.warn { color: var(--st-warn); border-color: rgba(232,178,58,.4); background: rgba(232,178,58,.1); }
.badge.crit { color: var(--st-crit); border-color: rgba(242,104,143,.4); background: rgba(242,104,143,.1); }

.empty { color: var(--ink-3); text-align: center; padding: var(--sp-5) var(--sp-3); font-size: var(--fs-micro); }