/* =========================================================
   ARBIT — hoja de estilos
   ========================================================= */

:root {
    --bg:            #0B0E11;
    --surface:       #181A20;
    --surface-2:     #1E2026;
    --surface-3:     #262930;
    --line:          #2B3139;
    --text:          #EAECEF;
    --text-dim:      #99A2B0;
    --text-faint:    #838DA0;

    --accent:        #FCD535;
    --accent-soft:   rgba(252, 213, 53, 0.12);
    --usdt:          #26A17B;
    --usdt-soft:     rgba(38, 161, 123, 0.14);
    --up:            #0ECB81;
    --up-soft:       rgba(14, 203, 129, 0.12);
    --down:          #F6465D;
    --down-soft:     rgba(246, 70, 93, 0.12);
    --warn:          #F0B90B;
    --warn-soft:     rgba(240, 185, 11, 0.14);

    /* Tótem digital: dígito siete-segmentos. El amarillo de marca hace de
       "encendido"; el mismo amarillo a baja opacidad es el segmento apagado
       (fantasma), como en un tablero LED real antes de recibir la lectura. */
    --seg-on:      var(--accent);
    --seg-ghost:   0.08;

    --font-ui:   'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    --r-sm: 4px;
    --r:    6px;
    --r-lg: 10px;

    --sidebar-w: 210px;
    --sidebar-w-collapsed: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* LA PAGINA ES OSCURA Y HAY QUE DECIRLO.
   Sin esta linea el navegador da por hecho que el documento es claro, y
   pinta con tema claro todo lo que dibuja el: las BARRAS DE DESPLAZAMIENTO
   -- esa franja blanca que salia en el menu de la izquierda cuando no
   cabian todas las entradas -- y tambien los desplegables nativos, el
   calendario de los campos de fecha y el cursor de texto.

   Estaba puesto suelto en dos controles concretos (.input-plain y los
   input[type=date]), que es justo donde ya habia dado la cara. Aqui vale
   para el documento entero. */
html {
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
}

/* Y ya que se pintan oscuras, que se pinten con los colores de la casa y
   no con el gris del sistema. Chrome y Edge entienden ::-webkit-scrollbar;
   Firefox usa scrollbar-color, que se le da mas abajo al elemento raiz. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border: 2px solid var(--bg);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--line); }
::-webkit-scrollbar-corner { background: var(--bg); }

:root { scrollbar-color: var(--surface-3) var(--bg); scrollbar-width: thin; }


body {
    font-family: var(--font-ui);
    background-color: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; font-size: inherit; }

a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::placeholder { color: var(--text-faint); }

/* Iconos ------------------------------------------------- */
.ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 20px; height: 20px; }
.ic-xl { width: 34px; height: 34px; stroke-width: 1.4; }

/* Marca -------------------------------------------------- */
.brand {
    color: var(--accent);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

/* =========================================================
   TÓTEM DIGITAL — dígitos siete-segmentos
   Todo número que encabeza una pantalla (el techo de la web:
   auth, cifras de gráficos, contadores) pasa por esta máscara.
   El segmento apagado ("fantasma") queda visible a baja opacidad,
   igual que un tablero LED real antes de encender la lectura.
   ========================================================= */
.seg-row {
    display: inline-flex;
    align-items: flex-end;
    color: var(--seg-on);
    line-height: 1;
}

.seg-digit {
    position: relative;
    display: inline-block;
    width: 0.56em;
    height: 1em;
    margin: 0 0.045em;
}
.seg-digit .sg {
    position: absolute;
    background: currentColor;
    opacity: var(--seg-ghost);
    transition: opacity .25s ease;
}
.seg-digit .sg.on { opacity: 1; }

.sg-a, .sg-g, .sg-d { left: 12%; width: 76%; height: 11%;
    clip-path: polygon(9% 0%, 91% 0%, 100% 50%, 91% 100%, 9% 100%, 0% 50%); }
.sg-a { top: 0%; }
.sg-g { top: 44.5%; }
.sg-d { top: 89%; }

.sg-f, .sg-b, .sg-e, .sg-c { width: 13%; height: 41%; }
.sg-f, .sg-e { left: 0%; }
.sg-b, .sg-c { right: 0%; }
.sg-f, .sg-b { top: 4.5%; }
.sg-e, .sg-c { top: 54.5%; }
.sg-f, .sg-e { clip-path: polygon(48% 0%, 100% 12%, 100% 88%, 48% 100%, 0% 80%, 0% 20%); }
.sg-b, .sg-c { clip-path: polygon(52% 0%, 100% 20%, 100% 80%, 52% 100%, 0% 88%, 0% 12%); }

.seg-sep {
    position: relative;
    display: inline-block;
    width: 0.18em;
    height: 1em;
    margin: 0 -0.01em;
}
.seg-sep::after {
    content: "";
    position: absolute;
    left: 32%;
    bottom: 4%;
    width: 30%;
    height: 11%;
    border-radius: 1px;
    background: currentColor;
}

/* El refresco enciende el dígito de golpe: es el pulso "en vivo" del
   producto vuelto literal, en vez de un punto decorativo aparte. */
@keyframes seg-flash { 0% { filter: brightness(1.7); } 100% { filter: brightness(1); } }
.seg-row.refrescando .sg.on { animation: seg-flash .5s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .seg-row.refrescando .sg.on { animation: none; }
}

/* =========================================================
   AUTENTICACIÓN
   ========================================================= */
.auth-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 32px 16px;
    gap: 26px;
}

.auth-wrapper .brand { font-size: 24px; }

.auth-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px;
    width: 100%;
    max-width: 380px;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    padding: 9px 0;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.input-group { margin-bottom: 13px; }

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--text-dim);
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 10px 11px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}

.input-group input:focus,
.input-group select:focus { border-color: var(--accent); }

.input-group input[type="date"] { color-scheme: dark; }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 40px; }
.pass-toggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 6px;
    display: flex;
}
.pass-toggle:hover { color: var(--text); }

.form-note {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 14px;
    text-align: center;
    line-height: 1.6;
}
.form-note b { color: var(--text); font-weight: 500; }

/* Botones ------------------------------------------------ */
.btn-primary {
    background-color: var(--accent);
    color: #181A20;
    border: none;
    padding: 11px 20px;
    border-radius: var(--r);
    cursor: pointer;
    font-weight: 600;
    transition: filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-danger {
    background-color: var(--down);
    color: #2A0509;
}
.btn-danger:hover { filter: brightness(1.08); }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 9px 16px;
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color 0.15s;
}
.btn-ghost:hover { border-color: var(--text-dim); }

.btn-sm { padding: 7px 13px; font-size: 13px; }

.btn-primary:disabled,
.btn-danger:disabled,
.btn-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}
.btn-primary:disabled:hover,
.btn-danger:disabled:hover { filter: none; }
.btn-ghost:disabled:hover { border-color: var(--line); }

.full-width { width: 100%; margin-top: 8px; }

.icon-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 5px;
    display: flex;
    border-radius: var(--r-sm);
}
.icon-btn:hover { color: var(--text); }

/* =========================================================
   ESTRUCTURA DEL DASHBOARD
   ========================================================= */
.dashboard-wrapper { display: flex; min-height: 100vh; }

/* Menú lateral ------------------------------------------- */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background-color: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width 0.25s ease;
}

.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    min-height: 58px;
}

.sidebar.collapsed .sidebar-header { justify-content: center; }
.sidebar.collapsed .brand-full { display: none; }

.nav-links {
    list-style: none;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    color: var(--text-dim);
    border-left: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }

.nav-link.active {
    color: var(--text);
    background: var(--surface-2);
    border-left-color: var(--accent);
}
.nav-link.active .ic { color: var(--accent); }

.nav-caret { margin-left: auto; transition: transform 0.2s; }
.nav-link.open .nav-caret { transform: rotate(90deg); }

.nav-sub { list-style: none; }
.nav-sub .nav-link { padding: 9px 16px 9px 36px; font-size: 13px; }

/* Cada mercado del submenu de Graficos lleva el color de su marca.
   El verde del Tether, el morado de Zinli y el naranja de Wally,
   subidos de tono lo justo para que se lean sobre el panel oscuro.
   El color viaja en --marca: lo usan el texto, el icono y, cuando la
   vista esta abierta, la raya de la izquierda en lugar del dorado. */
.nav-sub .nav-link[data-view="graficos"] { --marca: #2BB98C; }
.nav-sub .nav-link[data-view="zinli"]    { --marca: #A472F5; }
.nav-sub .nav-link[data-view="wally"]    { --marca: #FF8A3D; }

.nav-sub .nav-link[data-view="graficos"],
.nav-sub .nav-link[data-view="zinli"],
.nav-sub .nav-link[data-view="wally"] { color: var(--marca); }

.nav-sub .nav-link[data-view="graficos"] .ic,
.nav-sub .nav-link[data-view="zinli"] .ic,
.nav-sub .nav-link[data-view="wally"] .ic { color: var(--marca); }

/* USDT/VES lleva dos monedas, y cada mitad va con la suya: el verde
   del Tether para el USDT y el dorado de la casa para el VES. La barra
   queda apagada para que se lea como separador y no como texto. */
.nav-sub .nav-link[data-view="graficos"] .nav-usdt  { color: var(--marca); }
.nav-sub .nav-link[data-view="graficos"] .nav-barra { color: var(--text-faint); }
.nav-sub .nav-link[data-view="graficos"] .nav-ves   { color: var(--accent); }

.nav-sub .nav-link[data-view="graficos"]:hover,
.nav-sub .nav-link[data-view="zinli"]:hover,
.nav-sub .nav-link[data-view="wally"]:hover { filter: brightness(1.18); }

.nav-sub .nav-link[data-view="graficos"].active,
.nav-sub .nav-link[data-view="zinli"].active,
.nav-sub .nav-link[data-view="wally"].active { border-left-color: var(--marca); }

.nav-divider { height: 1px; background: var(--line); margin: 8px 0; }

.nav-link-admin { color: var(--accent); }

/* Membresia: el unico enlace del menu que se vende solo. Va en dorado y
   con caja propia para que se lea como boton y no como una fila mas. */
.nav-link-membresia {
    margin: 10px 10px 6px;
    padding: 10px 13px;
    border-radius: 8px;
    border: 1px solid rgba(252, 213, 53, .30);
    border-left: 1px solid rgba(252, 213, 53, .30);
    background: linear-gradient(135deg, rgba(252, 213, 53, .16) 0%, rgba(252, 213, 53, .05) 100%);
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .015em;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.nav-link-membresia .ic { color: var(--accent); }
.nav-link-membresia:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(252, 213, 53, .24) 0%, rgba(252, 213, 53, .09) 100%);
    box-shadow: 0 4px 14px rgba(252, 213, 53, .10);
}
/* Activo no puede pintarse como el resto: el gris de .active apagaria
   justo lo que hace que se vea. */
.nav-link-membresia.active {
    color: #181A20;
    background: var(--accent);
    border-color: var(--accent);
}
.nav-link-membresia.active .ic { color: #181A20; }

/* Plegado el menu, la caja estorba: se queda solo la estrella dorada. */
.sidebar.collapsed .nav-link-membresia {
    margin: 10px 8px 6px;
    padding: 11px 0;
    border-radius: 8px;
}

.sidebar.collapsed .nav-txt { display: none; }
.sidebar.collapsed .nav-sub { display: none; }
.sidebar.collapsed .nav-caret { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 12px 0; border-left-width: 0; }
.sidebar.collapsed .nav-link.active { box-shadow: inset 2px 0 0 var(--accent); }

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-chat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.btn-wa { background: var(--usdt); color: #04211A; }
.btn-wa:hover { filter: brightness(1.08); }
.btn-tg { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn-tg:hover { border-color: var(--text-dim); }

.sidebar.collapsed .chat-txt { display: none; }
.sidebar.collapsed .btn-chat { padding: 10px 0; }

/* Contenido --------------------------------------------- */
.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.top-bar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.top-bar .mobile-only { display: none; }

.user-menu { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

#content-area { padding: 22px; }

.view-head { margin-bottom: 18px; }
.view-head h1 { font-size: 20px; font-weight: 600; margin-bottom: 3px; }
.view-head p { font-size: 13px; color: var(--text-dim); }

/* Tarjetas ---------------------------------------------- */
.card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}
.card + .card { margin-top: 12px; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.card-title { font-size: 14px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* Métricas ---------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.stat {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}
.stat-label { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.stat-value { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stat-foot { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

.up { color: var(--up); }
.down { color: var(--down); }
.warn-t { color: var(--warn); }
.dim { color: var(--text-dim); }

/* Etiquetas --------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.pill-up      { background: var(--up-soft);     color: var(--up); }
.pill-down    { background: var(--down-soft);   color: var(--down); }
.pill-warn    { background: var(--warn-soft);   color: var(--warn); }
.pill-neutral { background: var(--surface-3);   color: var(--text-dim); }
.pill-accent  { background: var(--accent-soft); color: var(--accent); }
.pill-usdt    { background: var(--usdt-soft);   color: var(--usdt); }

/* Herramientas (Inicio) --------------------------------- */

/* Cabecera viva. La portada no es un catálogo: lo primero que se ve es
   cómo está el mercado, y solo después con qué mirarlo. */
.ini-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(135deg, #1A1D24 0%, #141619 55%, #12141A 100%);
    padding: 24px 26px;
    margin-bottom: 4px;
}
/* Halo de marca en la esquina: da profundidad sin meter una imagen. */
.ini-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -110px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 213, 53, .10) 0%, transparent 68%);
    pointer-events: none;
}

.ini-hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.ini-fecha {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
}
.ini-hero h1 { font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.ini-sub {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-top: 6px;
    max-width: 580px;
}
.ini-plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Pulso: cinco celdas pegadas, separadas solo por la línea de fondo. */
.ini-pulso {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 22px;
}
/* La sombra repite la raya del hueco: a anchos rotos el gap de 1px
   se pierde al redondear y alguna celda quedaba sin separacion. */
.ini-dato {
    background: #15171C;
    padding: 12px 14px;
    box-shadow: 1px 0 0 var(--line);
}
.ini-dato .et {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-faint);
}
.ini-dato .vl {
    font-family: var(--font-mono);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.01em;
    margin-top: 5px;
}
.ini-dato .nt { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* Latido: dice que la cifra es de ahora, no de cuando se abrió la página. */
.ini-luz {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--up);
    animation: ini-late 2s infinite;
}
@keyframes ini-late {
    0%   { box-shadow: 0 0 0 0   rgba(14, 203, 129, .45); }
    70%  { box-shadow: 0 0 0 6px rgba(14, 203, 129, 0); }
    100% { box-shadow: 0 0 0 0   rgba(14, 203, 129, 0); }
}

/* Separador de familia: agrupa las herramientas por lo que se hace con
   ellas, no por el orden del menú. */
.ini-sec { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.ini-sec h2 {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}
.ini-sec .raya { flex: 1; height: 1px; background: var(--line); }
.ini-sec .cuenta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 12px;
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Filo de color al costado: aparece al pasar el cursor y marca la familia
   de la herramienta sin cargar la tarjeta de color en reposo. */
.tool-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--text-faint);
    opacity: 0;
    transition: opacity .18s ease;
}
.tool-card:has(.tool-icon.accent)::before { background: var(--accent); }
.tool-card:has(.tool-icon.usdt)::before   { background: var(--usdt); }
.tool-card:has(.tool-icon.up)::before     { background: var(--up); }

.tool-card:hover,
.tool-card:focus-visible {
    border-color: var(--text-faint);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.tool-card:hover::before,
.tool-card:focus-visible::before { opacity: 1; }
.tool-card:active { transform: translateY(0); }

/* Herramientas del plan VIP: banderola en la esquina y un tinte dorado
   muy bajo, para que se distingan de las que trae cualquier plan. */
.tool-card.es-vip {
    border-color: rgba(252, 213, 53, .32);
    background: linear-gradient(180deg, rgba(252, 213, 53, .05) 0%, transparent 58%), var(--surface-2);
}
.tool-card.es-vip:hover,
.tool-card.es-vip:focus-visible { border-color: var(--accent); }
.tool-card.es-vip .tool-head { padding-right: 46px; }

.vip-tag {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 4px 10px 4px 11px;
    background: var(--accent);
    color: #181A20;
    border-bottom-left-radius: 9px;
}

.tool-head { display: flex; align-items: center; gap: 11px; }

.tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition: transform .18s ease;
}
.tool-card:hover .tool-icon { transform: scale(1.06); }

.tool-icon.accent { background: var(--accent-soft); color: var(--accent); border-color: rgba(252, 213, 53, .22); }
.tool-icon.usdt   { background: var(--usdt-soft);   color: var(--usdt);   border-color: rgba(38, 161, 123, .25); }
.tool-icon.up     { background: var(--up-soft);     color: var(--up);     border-color: rgba(14, 203, 129, .22); }
.tool-icon.grey   { background: var(--surface-3);   color: var(--text-dim); border-color: var(--line); }

.tool-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tool-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
}

.tool-kicker {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.tool-desc {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.6;
}

/* El pie queda pegado abajo: con descripciones de distinto largo, las
   tarjetas de una misma fila siguen alineando su línea de "Abrir". */
.tool-pie {
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tool-open {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .18s ease;
}
.tool-open .ic { transition: transform .18s ease; }
.tool-card:hover .tool-open { color: var(--accent); }
.tool-card:hover .tool-open .ic { transform: translateX(3px); }

@media (max-width: 720px) {
    .tool-grid { grid-template-columns: 1fr; gap: 12px; }
    .ini-hero { padding: 18px 16px; }
    .ini-hero h1 { font-size: 21px; }
    .ini-pulso { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

/* Pestañas internas ------------------------------------- */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    overflow-x: auto;

    /* Poner overflow-x en auto hace que el navegador calcule el overflow-y
       como auto tambien. Con el margin-bottom negativo de .tab el contenido
       sobresale un pixel y Windows dibujaba una barra de scroll vertical con
       sus flechitas en la esquina. Se corta aqui. */
    overflow-y: hidden;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 15px;
    color: var(--text-dim);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Chips de días ----------------------------------------- */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.chip:hover { color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #181A20; font-weight: 500; }

/* Rejilla de horas -------------------------------------- */
.hour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.hour-cell {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    background: var(--bg);
}
.hour-cell .h { font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
.hour-cell .v { font-size: 17px; font-weight: 600; }
.hour-cell .d { font-size: 11px; margin-top: 2px; }

.hour-cell.pending { border-style: dashed; }
.hour-cell.pending .v { color: var(--text-faint); }
.hour-cell.last { border-color: var(--accent); background: var(--accent-soft); }

/* Barras ------------------------------------------------ */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 46px; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 3px; }
.bar.soft { background: rgba(252, 213, 53, 0.4); }
.bar.usdt { background: var(--usdt); }
.bar-lbl { font-size: 11px; color: var(--text-dim); }

/* Filas de comportamiento ------------------------------- */
.meter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.meter-row:last-child { border-bottom: none; }
.meter-row.on { background: rgba(252, 213, 53, 0.05); }

.meter-day { width: 42px; font-size: 13px; flex-shrink: 0; }
.meter-track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; min-width: 40px; }
.meter-fill { height: 100%; background: var(--accent); }
.meter-val { width: 74px; text-align: right; font-size: 12px; flex-shrink: 0; }
.meter-tags { display: flex; gap: 4px; flex-shrink: 0; }
.tag { font-size: 12px; background: var(--surface-3); color: var(--text); border-radius: var(--r-sm); padding: 3px 8px; }

/* Tablas ------------------------------------------------ */
.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 620px;
}

.data-table th {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.data-table td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.cell-main { font-weight: 500; }
.cell-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.act-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    border-radius: var(--r-sm);
    color: var(--text-dim);
}
.act-btn:hover { background: var(--surface-3); }
.act-btn.edit:hover { color: var(--accent); }
.act-btn.block:hover { color: var(--down); }
.act-btn.unblock:hover { color: var(--up); }
.act-btn.delete { color: var(--down); }
.act-btn.delete:hover { background: var(--down-soft); }
.act-btn.approve { color: var(--up); }
.act-btn.approve:hover { background: var(--up-soft); }

/* Conectados ahora -------------------------------------- */

.conectados {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.conectado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.conectado .luz {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--up);
    box-shadow: 0 0 0 3px var(--up-soft);
    flex: none;
}

.conectado-nombre { font-size: 13px; font-weight: 500; }
.conectado-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

.empty { padding: 26px 10px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* Filtros ----------------------------------------------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.search-box {
    flex: 1;
    min-width: 170px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0 11px;
    color: var(--text-dim);
}
.search-box:focus-within { border-color: var(--accent); }
.search-box input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    padding: 10px 0;
    min-width: 0;
}

.select {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    padding: 10px 11px;
    outline: none;
}
.select:focus { border-color: var(--accent); }

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.field-label { font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }

.input-plain {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    padding: 10px 11px;
    outline: none;
    color-scheme: dark;
}
.input-plain:focus { border-color: var(--accent); }

.card-foot {
    display: flex;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

/* Perfil ------------------------------------------------ */
.profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.avatar-lg {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
}
.profile-id { flex: 1; min-width: 140px; }
.profile-id .n { font-size: 15px; font-weight: 600; }
.profile-id .m { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.profile-sub { text-align: right; }
.profile-sub .l { font-size: 12px; color: var(--text-dim); margin-bottom: 3px; }
.profile-sub .v { font-size: 21px; font-weight: 600; }
.profile-sub .d { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.progress { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin: 8px 0 14px; }
.progress span { display: block; height: 100%; background: var(--up); }

.verdict {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
}
.verdict.ok  { border-color: var(--usdt); background: var(--usdt-soft); }
.verdict.no  { border-color: var(--warn); background: var(--warn-soft); }
.verdict.nil { background: var(--surface-2); }

.verdict-icon { flex-shrink: 0; margin-top: 2px; }
.verdict h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.verdict p { font-size: 13px; color: var(--text-dim); }

.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.kv .k { font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }
.kv .v { font-size: 13px; }

/* Avisos ------------------------------------------------ */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.notice.expired { background: var(--down-soft); border-color: var(--down); }
.notice > .ic { color: var(--warn); margin-top: 2px; }
.notice.expired > .ic { color: var(--down); }
.notice .n-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.notice .n-text { font-size: 12px; color: var(--text-dim); }

.locked { text-align: center; padding: 40px 20px; }
.locked .ic-xl { color: var(--text-faint); margin-bottom: 12px; }
.locked h2 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.locked p { font-size: 13px; color: var(--text-dim); max-width: 380px; margin: 0 auto 16px; }

/* Modal ------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 60;
}

.modal {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
}

.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { font-size: 15px; font-weight: 600; }

/* Aviso flotante ---------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 11px 18px;
    border-radius: var(--r);
    font-size: 13px;
    z-index: 80;
    max-width: calc(100% - 32px);
    text-align: center;
}
.toast.ok  { border-color: var(--up); }
.toast.err { border-color: var(--down); }

/* Utilidades -------------------------------------------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gap-8 { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-14 { margin-top: 14px; }
.mono-num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
}


/* =========================================================
   FILTRO DE BANCO — LA MESA DE OPERACIÓN
   =========================================================
   Tres zonas: el libro de compra, el centro con el spread y el radar, y el
   libro de venta. Las dos tablas se leen IGUAL -- mismo orden de columnas,
   misma cabecera -- porque lo que se hace aquí es compararlas de un vistazo,
   y espejarlas obliga a traducir. */

.fl-mesa {
    display: grid;
    grid-template-columns: 1fr 370px 1fr;
    gap: 12px;
    /* Las tres zonas a la misma altura: asi la mesa se lee como una pieza y
       no como tres cajas de distinto largo. */
    align-items: stretch;
}

/* --- las dos columnas de libro --- */
.fl-col {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fl-col-tit {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 11px 0 9px;
    margin: 0 12px;
    border-bottom: 2px solid currentColor;
}
.fl-col-tit.up { color: var(--up); }
.fl-col-tit.down { color: var(--down); }

.fl-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 11px 12px; }
.fl-filtros .select, .fl-filtros .input-plain {
    padding: 8px 10px; font-size: 12.5px; background: var(--surface-2);
}

.fl-encab, .fl-fila {
    display: grid;
    /* Precio fijo, porque siempre mide lo mismo. Disponible y usuario se
       reparten lo que sobra: en una columna estrecha los dos encogen a la vez
       en vez de que uno se coma al otro. */
    grid-template-columns: 30px 78px minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 0 12px;
}
.fl-encab {
    font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700;
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

.fl-filas { padding: 2px 0; }

/* --- el segundo banco del lado --------------------------------
   Mismo bloque que el de arriba -- filtros, cabecera y filas de dos lineas --
   separado solo por una linea y un fondo medio tono mas oscuro. Estira para
   que las tres zonas de la mesa acaben a la misma altura. */
.fl-seg {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    background: rgba(11, 14, 17, 0.35);
}
/* El aviso de "elige un banco" se centra en el hueco: asi el bloque vacio se
   lee como una invitacion y no como un agujero en la pantalla. */
.fl-seg .fl-filas { flex: 1; display: flex; flex-direction: column; }
.fl-seg .fl-vacio { margin: auto; }
.fl-seg-sel:disabled { opacity: 0.5; }

/* --- la fila marcada -----------------------------------------
   Marcando una de compra y otra de venta, el spread de arriba pasa a ser el
   de esa pareja: "si opero con estos dos, cuanto me queda". */
.fl-fila.marcable { cursor: pointer; }
.fl-fila.elegida { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.fl-fila.elegida .fl-precio { color: var(--accent); }

.fl-pareja {
    margin: 0 12px 10px; padding: 8px 10px; border-radius: 7px;
    background: var(--surface-2); color: var(--text-dim);
    font-size: 11px; line-height: 1.55;
}
.fl-pareja b { color: var(--text); }
.fl-pareja button {
    display: block; margin-top: 5px; background: none; border: 0; padding: 0;
    color: var(--accent); font-family: inherit; font-size: 11px; cursor: pointer;
    text-decoration: underline;
}

/* Un banco marcado que ahora mismo no tiene nada: se enseña igual, apagado,
   porque saber que NO hay es tan util como saber cuanto pagan. */
.fl-rad-banco.vacio { opacity: 0.55; }
.fl-rad-nada { font-size: 10.5px; color: var(--text-faint); }
.fl-fila { position: relative; height: 41px; border-bottom: 1px solid rgba(43, 49, 57, 0.45); }
.fl-fila:last-child { border-bottom: 0; }
.fl-fila:hover { background: var(--surface-2); }

/* La barra dice DÓNDE está el dinero sin leer una cifra. Se mide contra el
   mayor de los dos lados, para que comparar izquierda con derecha valga. */
.fl-barra {
    position: absolute; top: 5px; bottom: 5px; left: 0;
    border-radius: 0 3px 3px 0; pointer-events: none;
}
.fl-barra.up { background: var(--up-soft); }
.fl-barra.down { background: var(--down-soft); }
.fl-fila > :not(.fl-barra) { position: relative; }

.fl-nro { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.fl-precio { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.fl-disp, .fl-user { display: flex; flex-direction: column; min-width: 0; }
.fl-disp b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text); }
.fl-disp b i {
    font-style: normal; font-family: var(--font-ui); font-size: 9px;
    color: var(--text-faint); margin-left: 4px;
}
.fl-disp em, .fl-user em {
    font-style: normal; font-size: 9.5px; color: var(--text-faint); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-disp em { font-family: var(--font-mono); }
.fl-user b {
    font-size: 12px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fl-pie {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px 10px; border-top: 1px solid var(--line);
}
.fl-hora { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }

.fl-vacio {
    padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--text-faint);
}

/* --- el centro --- */
.fl-centro { display: flex; flex-direction: column; gap: 12px; }
/* La caja del radar estira hasta el fondo: sin esto quedaba un hueco debajo
   y las tres zonas de la mesa no acababan a la misma altura. */
.fl-centro .fl-caja:last-child { flex: 1; display: flex; flex-direction: column; }
/* Los bloques miden lo que miden. Estirarlos para llenar la caja daba, con
   dos bancos marcados, dos cajones enormes medio vacios: peor que el hueco
   que se queria evitar. */
.fl-rad-cuerpo { flex: 1; display: flex; flex-direction: column; padding-bottom: 12px; }
.fl-rad-cuerpo .fl-rad-banco:last-child { margin-bottom: 0; }
.fl-rad-cuerpo .fl-vacio { margin: auto; }
.fl-caja {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden;
}
.fl-caja.marcada { border-color: rgba(252, 213, 53, 0.45); }

.fl-sp-cab { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 0; }
.fl-sp-eti {
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700;
}
/* El punto dice si el escáner está leyendo. Apagado = gris y quieto. */
.fl-sp-estado { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.fl-sp-estado.vivo { background: var(--up); animation: fl-late 2s infinite; }
@keyframes fl-late {
    0%   { box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(14, 203, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(14, 203, 129, 0); }
}

.fl-sp-v {
    text-align: center; font-family: var(--font-mono); font-size: 34px; font-weight: 600;
    letter-spacing: -0.03em; line-height: 1; margin-top: 8px;
}
.fl-sp-u { font-family: var(--font-ui); font-size: 14px; color: var(--text-dim); margin-left: 7px; }

.fl-sp-lados {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 10px; padding: 10px 14px 11px;
}
.fl-sp-lados .izq { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.fl-sp-lados .der { font-family: var(--font-mono); font-size: 16px; font-weight: 600; text-align: right; }
.fl-profit {
    font-size: 11px; font-weight: 600; border-radius: 999px;
    padding: 4px 11px; white-space: nowrap;
}
.fl-profit.ok { background: var(--up-soft); color: var(--up); }
.fl-profit.no { background: var(--warn-soft); color: var(--warn); }

/* El libro cruzado NO es un error: los dos lados son listas de anuncios sin
   nadie que las case. Se dice con palabras para que nadie lea el número rojo
   como una oportunidad. */
.fl-aviso {
    margin: 0 14px 12px; padding: 9px 11px; border-radius: 7px;
    background: var(--warn-soft); color: var(--warn);
    font-size: 11.5px; line-height: 1.5;
}

.fl-boton {
    display: block; width: calc(100% - 24px); margin: 0 12px 9px; padding: 10px 0;
    border: 0; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
    background: var(--down); color: #fff; transition: filter 0.15s;
}
.fl-boton.off { background: var(--up); color: #0B0E11; }
.fl-boton:hover { filter: brightness(1.08); }

.fl-check {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 11.5px; color: var(--text-dim); padding-bottom: 11px; cursor: pointer;
}
.fl-check input { accent-color: var(--accent); width: 13px; height: 13px; }

/* --- el radar --- */
.fl-rad-tit {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.fl-rad-t {
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent);
}
.fl-rad-filtro {
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.fl-rad-filtro .input-plain {
    width: 86px; padding: 5px 8px; font-size: 11.5px; font-family: var(--font-mono);
    background: var(--surface-2); text-align: right;
}

.fl-rad-sel { position: relative; margin: 10px 12px; }
.fl-rad-boton {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
    border-radius: var(--r); padding: 8px 10px; font-family: inherit; font-size: 12.5px;
    cursor: pointer;
}
.fl-rad-boton:hover { border-color: var(--text-faint); }
.fl-rad-lista {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
    padding: 6px; max-height: 216px; overflow-y: auto;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.fl-rad-op {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    font-size: 12px; color: var(--text-dim); border-radius: 6px; cursor: pointer;
}
.fl-rad-op:hover { background: var(--surface-3); color: var(--text); }
.fl-rad-op input { accent-color: var(--accent); width: 13px; height: 13px; }

.fl-rad-banco {
    margin: 0 12px 8px; border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 11px; background: var(--surface-2);
}
.fl-rad-banco.mejor { border-color: var(--accent); background: var(--accent-soft); }
.fl-rad-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fl-rad-nom {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-rad-banco.mejor .fl-rad-nom { color: var(--accent); }
.fl-rad-mejor { font-size: 10px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.fl-rad-fila {
    display: grid; grid-template-columns: 26px 78px 1fr 1fr;
    align-items: baseline; gap: 8px; padding: 3px 0;
}
.fl-rad-nro { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.fl-rad-precio { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.fl-rad-usdt { font-family: var(--font-mono); font-size: 11.5px; color: var(--up); text-align: right; }
.fl-rad-usdt i {
    font-style: normal; font-family: var(--font-ui); font-size: 8.5px;
    color: var(--text-faint); margin-left: 3px;
}
.fl-rad-user {
    font-size: 11px; color: var(--text-dim); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Lo que ve quien no tiene VIP al entrar por un enlace guardado. */
.fl-cerrado { max-width: 520px; margin: 24px auto; text-align: center; }
.fl-cerrado-eti {
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent); font-weight: 700;
}
.fl-cerrado-txt {
    font-size: 13px; color: var(--text-dim); line-height: 1.65;
    margin: 10px 0 16px;
}

/* En pantallas estrechas la mesa se apila: primero el centro, que es lo que
   se viene a mirar, y debajo los dos libros. */
@media (max-width: 1240px) {
    .fl-mesa { grid-template-columns: 1fr; }
    .fl-centro { order: -1; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
    .profile-sub { text-align: left; }
}

@media (max-width: 720px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: var(--sidebar-w);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.collapsed { width: var(--sidebar-w); }
    .sidebar.collapsed .nav-txt,
    .sidebar.collapsed .brand-full,
    .sidebar.collapsed .chat-txt,
    .sidebar.collapsed .nav-caret { display: initial; }
    .sidebar.collapsed .nav-link { justify-content: flex-start; padding: 11px 16px; border-left-width: 3px; }
    .sidebar.collapsed .nav-sub { display: block; }
    .sidebar.collapsed .btn-chat { padding: 10px; }

    .top-bar .mobile-only { display: flex; }

    #content-area { padding: 16px; }
    .stat-value { font-size: 19px; }
    .meter-tags { display: none; }
    .field-row { grid-template-columns: 1fr; }
}

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

/* =========================================================
   GRÁFICOS (modelo de Telegram)
   ========================================================= */
.chart-wrap {
    position: relative;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 2px;
    overflow: hidden;
}
.chart-wrap .empty { padding: 120px 10px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }

/* Paneles y rejilla */
.g-panel  { fill: #101318; }
.g-grid   { stroke: var(--surface-2); stroke-width: 1; opacity: 0.65; }
.g-axis   { fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.g-titulo { fill: var(--text-dim); font-size: 10px; letter-spacing: 0.06em; }
.g-titulo.dim { fill: var(--text-faint); }
.g-umbral { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.5; }

/* Líneas verticales y zonas */
.g-vline.ahora { stroke: #4C7DF0; stroke-width: 1.2; stroke-dasharray: 4 3; }
.g-zona.down   { fill: rgba(246, 70, 93, 0.055); }
.g-zona.up     { fill: rgba(14, 203, 129, 0.055); }
.g-zona-pie.down { fill: rgba(246, 70, 93, 0.55); }
.g-zona-pie.up   { fill: rgba(14, 203, 129, 0.55); }

/* Curvas
   El trazo va un punto más grueso que antes y lleva un halo tenue del mismo
   color: separa las dos líneas del fondo sin recurrir a más contraste. */
.g-line {
    fill: none;
    stroke-width: 2.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.g-line.venta    { stroke: var(--up); }
.g-line.recompra { stroke: var(--down); }
.g-line.proy {
    stroke-width: 2;
    stroke-dasharray: 7 6;
    opacity: 0.72;
    filter: none;
}

.g-banda { stroke: rgba(143, 160, 189, 0.18); stroke-width: 1; }

/* Puntos y valores */
.g-dot { stroke: #12151A; stroke-width: 1.2; }
.g-dot.venta    { fill: var(--up); }
.g-dot.recompra { fill: var(--down); }
.g-dot.proy     { opacity: 0.6; }
.g-val {
    fill: var(--text-faint);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.g-val.proy { fill: var(--text-faint); opacity: 0.75; }

/* Anillos de techo y piso */
.g-anillo { fill: var(--bg); stroke-width: 2; }
.g-anillo.venta    { stroke: var(--up); }
.g-anillo.recompra { stroke: var(--down); }

/* Triángulos: abajo vender, arriba recomprar */
.g-tri.venta    { fill: var(--down); }
.g-tri.recompra { fill: var(--up); }
.g-tri.hueca    { fill: none; stroke-width: 1.5; }
.g-tri.hueca.venta    { stroke: var(--down); }
.g-tri.hueca.recompra { stroke: var(--up); }

/* Chips */
.g-chip.venta     { fill: var(--up); }
.g-chip.recompra  { fill: var(--down); }
.g-chip.ahora     { fill: #4C7DF0; }
.g-chip.actual    { fill: var(--surface-3); }
.g-chip-txt {
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.g-chip-txt.venta    { fill: #04211A; }
.g-chip-txt.recompra { fill: #4A1B0C; }
.g-chip-txt.ahora    { fill: #FFFFFF; }
.g-chip-txt.actual   { fill: var(--text); }

/* Barra de horas */
.g-horas-bg   { fill: var(--surface); }
.g-hora       { fill: var(--text); font-size: 11px; font-weight: 500; }
.g-hora.futura{ fill: var(--text-faint); font-weight: 400; }
.g-hora-agot  { fill: rgba(246, 70, 93, 0.18); }
.g-hora-ahora { fill: rgba(76, 125, 240, 0.22); }

/* Barras de liquidez y carga */
.g-bar.up   { fill: var(--up); }
.g-bar.down { fill: var(--down); }

/* Cursor */
.g-hover.hidden { display: none; }
.g-guia { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 3; }

.chart-tip {
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 7px 11px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
}
.chart-tip.hidden { display: none; }
.chart-tip .tip-h { color: var(--text-dim); font-size: 11px; }
.chart-tip .tip-v { font-variant-numeric: tabular-nums; }

/* Leyenda */
.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-dim);
    margin: 4px 0 10px;
}
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend .dot { width: 14px; height: 2px; display: inline-block; }
.chart-legend .dot.up   { background: var(--up); }
.chart-legend .dot.down { background: var(--down); }
.chart-legend .dash {
    width: 14px; height: 0; display: inline-block;
    border-top: 2px dashed var(--text-dim);
}

.chart-pie {
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.7;
    margin-top: 10px;
}

/* =========================================================
   VELAS

   La otra manera de mirar el mismo dia. El lienzo lo dibuja
   Lightweight Charts; encima va un canvas propio para los
   trazos (tendencia, nivel y Fibonacci).
   ========================================================= */

.subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.subtab {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 7px 18px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.subtab:hover { color: var(--text); }
.subtab.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.velas-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
}

.btn-grupo {
    display: flex;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.btn-chip {
    background: var(--surface-2);
    border: none;
    border-right: 1px solid var(--line);
    color: var(--text-dim);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.btn-grupo .btn-chip:last-child { border-right: none; }
.btn-chip:hover { color: var(--text); background: var(--surface-3); }
.btn-chip.active { color: #12161C; background: var(--accent); }

.velas-ohlc {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    min-height: 18px;
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.velas-ohlc .ohlc-par { display: inline-flex; gap: 4px; }
.velas-ohlc .ohlc-et { color: var(--text-faint); }

.velas-wrap {
    position: relative;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

#velas-chart { width: 100%; height: 460px; }

/* El lienzo de los trazos va encima del grafico. Sin herramienta activa deja
   pasar el raton para que la libreria siga moviendo y ampliando. */
#velas-dibujo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* El motor apila sus propios lienzos en 1 y 2. Los trazos van encima. */
    z-index: 3;
}
.velas-wrap.dibujando #velas-dibujo {
    pointer-events: auto;
    cursor: crosshair;
}
.velas-wrap.borrando #velas-dibujo {
    pointer-events: auto;
    cursor: pointer;
}
.velas-wrap.editando #velas-dibujo { pointer-events: auto; }

@media (max-width: 720px) {
    #velas-chart { height: 360px; }
    .velas-barra { gap: 8px; }
    .btn-chip { padding: 7px 10px; }
}

/* =========================================================
   ANÁLISIS — tablero de terminal

   Antes era una tarjeta en tres tiras. Mismo contenido, pero los
   cinco precios del informe quedaban repartidos en tres zonas y
   había que reconstruir de cabeza cuál está más arriba y cuánto
   falta para cada uno.

   Ahora hay una sola escala vertical a la izquierda —techo,
   niveles para operar, venta, recompra, piso— y a la derecha el
   estado, las cifras y la proyección en tabla. Todo en
   monoespaciada y separado por hairlines, sin tarjetas anidadas:
   es un tablero de operaciones, no una ficha.
   ========================================================= */
.an-term {
    background: #13161A;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-family: var(--font-mono);
    overflow: hidden;
    /* Referencia para las consultas de abajo: el tablero se reordena según
       su propio ancho, no el de la ventana. */
    container-type: inline-size;
}

/* Barra superior: qué es, de qué mercado y de cuándo */
.an-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: #0F1216;
    border-bottom: 1px solid var(--line);
}
.an-id { font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
.an-mkt {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 2px;
}
.an-mkt.ok { color: var(--up); }
.an-mkt.no { color: var(--warn); }
.an-ts {
    margin-left: auto;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Las dos columnas se reparten con flex y no con media queries: el
   ancho que manda es el del contenedor —con el menú lateral abierto
   queda la mitad— y no el de la ventana. Si no caben las dos, la
   escala se queda con su ancho máximo y la tabla baja debajo. */
.an-cols { display: flex; flex-wrap: wrap; }
.an-esc {
    flex: 1 1 180px;
    max-width: 210px;
    padding: 15px 14px 12px;
    border-right: 1px solid var(--line);
}
.an-der {
    flex: 1 1 340px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Para que la rejilla pueda medirse contra esta columna y no contra la
       ventana: con el menú lateral abierto el contenedor es la mitad, y una
       media query de viewport se equivoca justo ahí. Si el navegador no
       soporta container queries, la regla de abajo se ignora y se quedan las
       3 columnas, que también entran sin desbordar. */
    container-type: inline-size;
}

/* Cuando la escala y la tabla ya no caben juntas, la escala pasa a
   ocupar todo el ancho: dejarla a 210px sola en su fila abría un
   hueco vacío a su derecha. El umbral es la suma de las dos bases
   de flex (180 + 340), que es justo donde envuelven. */
@container (max-width: 520px) {
    .an-cols { display: block; }
    .an-esc {
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .an-ts { margin-left: 0; }
}

/* ── La escala del día ───────────────────────────────────────
   Todos los precios del informe en su sitio real. La distancia
   entre dos filas es información —cuánto falta para el techo—,
   no decoración. La escala se calcula con el mínimo y el máximo
   de lo que se dibuja, no con el rango del día: la recompra
   puede caer por debajo del piso y tiene que seguir entrando. */
.an-esc-h {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 14px;
}
.an-esc-riel { position: relative; height: 224px; margin-left: 5px; }
.an-esc-eje {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: var(--line);
}
.an-esc-banda {
    position: absolute;
    left: 0;
    width: 4px;
    background: rgba(252, 213, 53, 0.16);
}
.an-esc-fila {
    position: absolute;
    left: 0; right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
}
.an-esc-fila::before {
    content: "";
    flex: none;
    width: 9px;
    height: 1px;
    background: var(--line);
}
.an-esc-fila.borde::before  { width: 15px; background: var(--text-faint); }
.an-esc-fila.ahora::before  { width: 15px; height: 2px; background: var(--text); }
.an-esc-fila.nivel::before  { width: 12px; height: 2px; }
.an-esc-fila.nv-v::before   { background: var(--up); }
.an-esc-fila.nv-r::before   { background: var(--down); }

.an-esc-v {
    font-size: 12px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.an-esc-fila.borde .an-esc-v { font-size: 11px; color: var(--text-faint); }
.an-esc-fila.ahora .an-esc-v { font-size: 15px; font-weight: 600; }
.an-esc-k {
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    min-width: 0;
}
.an-esc-leg {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5C6675;
    margin-top: 12px;
}

/* ── Estado: la palabra del bot y cuánto se sostiene ───────── */
.an-estado {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.an-accion { font-size: 19px; font-weight: 600; letter-spacing: 0.05em; }
.an-accion.up     { color: var(--up); }
.an-accion.down   { color: var(--down); }
.an-accion.espera { color: var(--warn); }
.an-estado-tit {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-dim);
}
/* Las señales a favor, en celdas: se cuentan sin leerlas */
.an-senal {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.an-senal-celdas { display: flex; gap: 2px; }
.an-senal-celdas i { display: block; width: 9px; height: 9px; background: var(--surface-3); }
.an-senal.up     .an-senal-celdas i.on { background: var(--up); }
.an-senal.down   .an-senal-celdas i.on { background: var(--down); }
.an-senal.espera .an-senal-celdas i.on { background: var(--warn); }

/* ── Cifras ──────────────────────────────────────────────────
   El número de columnas lo declara el JS en data-cols, y siempre
   divide exacto al número de celdas: con auto-fit la última fila
   se quedaba a medias y dejaba un hueco gris a la derecha. Dos
   columnas es el suelo seguro —divide igual a 4 y a 6— para
   pantallas estrechas. */
.an-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.an-rejilla[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@container (max-width: 520px) {
    .an-rejilla[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.an-celda {
    padding: 10px 14px;
    min-width: 0;
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.an-celda-k {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.an-celda-v {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.an-celda-s { font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ── Proyección en tabla ─────────────────────────────────────
   La banda alto/bajo en su propia columna es la única forma de
   compararla entre horas; antes iba entre paréntesis. */
.an-tabla-h {
    padding: 11px 14px 6px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-top: 1px solid var(--line);
}
.an-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.an-tabla th {
    text-align: right;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 4px 14px 6px;
    border-bottom: 1px solid var(--line);
}
.an-tabla td {
    text-align: right;
    font-size: 12.5px;
    padding: 6px 14px;
    /* Más suave que --line: son muchas filas seguidas y la retícula
       llena se comía los números. */
    border-bottom: 1px solid rgba(43, 49, 57, 0.55);
}
.an-tabla th:first-child { text-align: left; }
.an-tabla td:first-child { text-align: left; color: var(--text-dim); }
.an-tabla tr.mejor td { background: rgba(14, 203, 129, 0.07); }
.an-tabla tr.mejor td:first-child { color: var(--up); }
.an-tabla .banda { font-size: 11px; color: var(--text-faint); }

/* Cuando el bot se abstiene o la jornada terminó no hay tabla que
   enseñar. Se dice, no se rellena. */
.an-aviso {
    padding: 12px 14px 14px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

/* ── Lectura técnica ─────────────────────────────────────────
   El mismo bloque que cierra el mensaje de Telegram, como
   franja al pie del tablero. */
.an-pie {
    display: flex;
    align-items: baseline;
    gap: 6px 18px;
    flex-wrap: wrap;
    margin-top: auto;
    padding: 10px 14px 11px;
    background: #0F1216;
    border-top: 1px solid var(--line);
}
.an-pie-k {
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.an-dato { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.an-dato i { font-style: normal; color: var(--text-faint); margin-right: 5px; }

.an-nota {
    font-size: 12px;
    font-family: var(--font-ui);
    color: var(--text-faint);
    line-height: 1.6;
    margin-top: 10px;
}

/* Aviso cuando el bot cambia de postura entre dos lecturas */
.an-alerta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(224, 168, 46, 0.10);
    border: 1px solid rgba(224, 168, 46, 0.35);
    border-radius: 2px;
    padding: 9px 12px;
    margin-bottom: 10px;
    color: #E0A82E;
}
.an-alerta .n-title { font-size: 13px; font-weight: 500; font-family: var(--font-ui); }
.an-alerta .n-text  {
    font-size: 12px;
    font-family: var(--font-ui);
    color: var(--text-dim);
    margin-top: 2px;
}

/* =========================================================
   PULSO DEL MERCADO — franja fija y nube de eventos
   ========================================================= */
.pulso {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 22px;
    font-size: 13px;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.pulso-estado { font-weight: 600; }
.pulso-lejos  { margin-left: auto; font-size: 12px; opacity: 0.85; }

.pulso.up {
    background: rgba(14, 203, 129, 0.10);
    color: var(--up);
    border-bottom-color: rgba(14, 203, 129, 0.25);
}
.pulso.down {
    background: rgba(246, 70, 93, 0.10);
    color: var(--down);
    border-bottom-color: rgba(246, 70, 93, 0.25);
}
.pulso.flat {
    background: var(--surface-2);
    color: var(--text-dim);
}

/* Nube: sale sobre lo que estés viendo y se va sola */
/* Va fija arriba a la derecha: el toast-root no posiciona, cada aviso se
   coloca solo. En teléfono baja al pie para no tapar el menú. */
.nube {
    position: fixed;
    top: 74px;
    right: 20px;
    z-index: 90;
    width: 300px;
    background: var(--surface-2);
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    animation: nube-entra 0.25s ease-out;
}
.nube.up   { border-color: rgba(14, 203, 129, 0.55); }
.nube.down { border-color: rgba(246, 70, 93, 0.55); }
.nube.flat { border-color: var(--line); }
.nube.saliendo { animation: nube-sale 0.25s ease-in forwards; }

@keyframes nube-entra {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes nube-sale {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(24px); }
}

.nube-cab {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.nube-tit { font-size: 14px; font-weight: 500; }
.nube.up   .nube-tit { color: var(--up); }
.nube.down .nube-tit { color: var(--down); }
.nube-x {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--text-faint);
    cursor: pointer;
    padding: 2px;
    line-height: 0;
}
.nube-x:hover { color: var(--text); }

.nube-linea   { font-size: 13px; line-height: 1.5; }
.nube-detalle { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.nube-botones { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 620px) {
    .pulso { padding: 9px 16px; font-size: 12px; }
    .nube {
        top: auto;
        bottom: 16px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* =========================================================
   HERRAMIENTAS FLOTANTES
   Ventanas que viven fuera de las vistas: se arrastran por la
   pantalla y siguen midiendo mientras se navega por la web.
   ========================================================= */

.hr-nota {
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.6;
    margin-top: 16px;
    max-width: 640px;
}

.tool-open.abierto { color: var(--up); }

/* --- Marco de la ventana -------------------------------- */
.flot {
    position: fixed;
    z-index: 70;
    width: 340px;
    max-width: calc(100vw - 20px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: flot-entra .18s ease;
}
@keyframes flot-entra {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* Mientras se arrastra no debe seleccionarse texto ni dispararse
   el hover de lo que hay debajo. */
.flot.arrastrando { transition: none; cursor: grabbing; }
body.flot-arrastre { user-select: none; -webkit-user-select: none; }

.flot-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    cursor: grab;
    touch-action: none;
}
.flot-cab:active { cursor: grabbing; }

.flot-tit {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.flot-tit .ic { color: var(--text-dim); }

.flot-btn {
    background: none;
    border: 0;
    color: var(--text-faint);
    cursor: pointer;
    padding: 3px;
    line-height: 0;
    border-radius: var(--r-sm);
}
.flot-btn:hover { color: var(--text); background: var(--surface-3); }

/* Con el panel arrastrado a media pantalla la escalera de profundidad se
   salia por abajo. El cuerpo se queda dentro del alto disponible y hace
   scroll por su cuenta; la cabecera se ve siempre para poder recogerlo. */
.flot-cuerpo {
    padding: 12px 14px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.flot-cuerpo::-webkit-scrollbar { width: 6px; }
.flot-cuerpo::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
.flot.plegada .flot-cuerpo { display: none; }

/* --- La cedula dentro de su ventana flotante ------------- */
/* Los mismos estilos de cuando era una pantalla entera, ajustados a los
   440 px de la ventana: la fila del formulario no se envuelve, la ficha
   respira y el nombre se parte si hace falta en vez de desbordar. */
#flot-cedula .cd-num { min-width: 0; font-size: 16px; }
#flot-cedula .cd-nac { width: 70px; }
#flot-cedula .cd-fila { flex-wrap: nowrap; }
#flot-cedula .cd-fila .btn-primary { flex: none; white-space: nowrap; }

#flot-cedula .cd-ficha { margin-top: 14px; padding: 17px 19px; }
#flot-cedula .cd-nombre {
    font-size: 21px;
    margin: 7px 0 10px;
    overflow-wrap: anywhere;
}
#flot-cedula .cd-datos { gap: 20px; }
#flot-cedula .cd-nota { font-size: 11.5px; margin-top: 10px; }

/* --- Barra de filtros compartida ------------------------ */
.hr-filtros {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 6px;
    margin-bottom: 14px;
}
.hr-filtros .select,
.hr-filtros .input-plain { font-size: 11.5px; padding: 6px 8px; }

.hr-mercado { display: flex; gap: 2px; margin-bottom: 10px; }
.hr-mercado button {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 11px;
    padding: 5px 0;
    cursor: pointer;
}
.hr-mercado button:first-child { border-radius: var(--r) 0 0 var(--r); }
.hr-mercado button:last-child  { border-radius: 0 var(--r) var(--r) 0; }
.hr-mercado button.on { background: var(--surface-3); color: var(--text); border-color: var(--text-faint); }

.hr-pie {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}
.hr-punto {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--up);
    animation: hr-late 2s ease-in-out infinite;
}
.hr-punto.viejo { background: var(--warn); animation: none; }
@keyframes hr-late { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.hr-err {
    font-size: 11.5px;
    color: var(--warn);
    line-height: 1.5;
    text-align: center;
    padding: 10px 0;
}
.hr-cargando { font-size: 12px; color: var(--text-faint); text-align: center; padding: 22px 0; }

/* --- Medidor de fuerza ---------------------------------- */
/* El panel entero tiene que leerse de un vistazo: nada de rodar para ver
   la volatilidad. De ahi los margenes cortos y la cifra dentro del arco. */
.fz-gauge {
    display: block;
    width: 100%;
    max-width: 224px;
    height: auto;
    margin: 0 auto;
}
.fz-aguja { transition: transform .55s cubic-bezier(.34, 1.3, .5, 1); }

/* El veredicto dejo de ser "ALZA FUERTE" y pasa a explicar que mide
   ("compra por encima de lo normal"), asi que tiene que poder ocupar dos
   lineas sin desbordar el panel. */
.fz-veredicto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    margin: 2px auto 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
    padding: 5px 12px;
    border-radius: 12px;
}
.fz-veredicto.sube   { color: var(--up);   background: var(--up-soft); }
.fz-veredicto.baja   { color: var(--down); background: var(--down-soft); }
.fz-veredicto.neutro { color: var(--text-dim); background: var(--surface-3); }

/* Impulso y recorrido en la misma fila: dicen lo mismo desde dos angulos
   y por separado costaban cuarenta pixeles de alto de mas. */
.fz-pulso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.fz-impulso {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    white-space: nowrap;
}
.fz-impulso.sube  { color: var(--up);   border-color: rgba(14, 203, 129, .3); }
.fz-impulso.baja  { color: var(--down); border-color: rgba(246, 70, 93, .3); }
.fz-impulso.plano { color: var(--text-dim); }
.fz-flecha { font-size: 10px; line-height: 1; }

.fz-chispa { flex: 1; min-width: 0; height: 28px; display: block; }

/* --- Secciones del panel -------------------------------- */
.fz-seccion {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.fz-seccion-tit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 6px;
}

.fz-led {
    width: 7px; height: 7px;
    border-radius: 1px;
    background: var(--usdt);
}

.fz-ancla {
    margin-left: auto;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--text-faint);
}

.fz-vacio { font-size: 11px; color: var(--text-faint); line-height: 1.55; }

/* --- Sismografo global ---------------------------------- */
.fz-sismo {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
    padding: 10px 11px;
}
.fz-sismo.sube { border-color: rgba(14, 203, 129, .28); }
.fz-sismo.baja { border-color: rgba(246, 70, 93, .28); }

.fz-sismo-tit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
}
.fz-sismo.sube   .fz-sismo-tit { color: var(--up); }
.fz-sismo.baja   .fz-sismo-tit { color: var(--down); }
.fz-sismo.neutro .fz-sismo-tit { color: var(--text-dim); }

.fz-sismo-txt { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-top: 5px; }

.fz-sismo-pies {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}
.fz-sismo-pies .k { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.fz-sismo-pies .v { font-size: 13px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* --- Volatilidad ---------------------------------------- */
.fz-vol-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 5px;
}
.fz-vol-et { font-size: 12px; font-weight: 600; }
.fz-vol-et.calma  { color: var(--up); }
.fz-vol-et.aviso  { color: var(--warn); }
.fz-vol-et.alerta { color: var(--down); }
.fz-vol-pct { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.fz-vol-barra {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: hidden;
}
.fz-vol-barra i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease; }
.fz-vol-barra i.calma  { background: var(--up); }
.fz-vol-barra i.aviso  { background: var(--warn); }
.fz-vol-barra i.alerta { background: var(--down); }

.fz-vol-pie {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 9.5px;
    color: var(--text-faint);
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
}

.fz-cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.fz-cifra { text-align: center; }
.fz-cifra .k { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.fz-cifra .v { font-size: 13.5px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* --- Profundidad ---------------------------------------- */
.pf-resumen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.pf-lado {
    padding: 9px 10px;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.pf-lado.compra { border-left: 2px solid var(--up); }
.pf-lado.venta  { border-left: 2px solid var(--down); }
.pf-lado .k { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.pf-lado .v { font-size: 14px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pf-lado .d { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

/* Balanza: cuanto ocupa cada lado del total. Es la lectura de un vistazo. */
.pf-balanza {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-3);
    margin-bottom: 5px;
}
.pf-balanza i { display: block; transition: width .5s ease; }
.pf-balanza .c { background: var(--up); }
.pf-balanza .v { background: var(--down); }
.pf-balanza-pie {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--text-dim);
    margin-bottom: 13px;
    font-variant-numeric: tabular-nums;
}

.pf-titulo {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 7px;
    display: flex;
    justify-content: space-between;
}

/* Escalera: cada fila es un anuncio y la barra es su peso en bolivares. */
.pf-escalera { display: flex; flex-direction: column; gap: 2px; }

.pf-fila {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 7px;
    font-size: 11px;
    border-radius: var(--r-sm);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.pf-barra {
    position: absolute;
    top: 0; bottom: 0;
    opacity: .16;
    transition: width .4s ease;
}
.pf-fila.compra .pf-barra { right: 0; background: var(--up); }
.pf-fila.venta  .pf-barra { right: 0; background: var(--down); }

.pf-precio { position: relative; font-weight: 600; }
.pf-fila.compra .pf-precio { color: var(--up); }
.pf-fila.venta  .pf-precio { color: var(--down); }
.pf-vol { position: relative; color: var(--text-dim); }
.pf-muro { position: relative; color: var(--accent); font-size: 10px; margin-left: 5px; }

.pf-grupo + .pf-grupo { margin-top: 13px; }

@media (max-width: 620px) {
    .flot { left: 8px !important; right: 8px; width: auto; }
    .flot.plegada { width: auto; }
}

/* --- Detector de bloques -------------------------------- */
.bl-marcador {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.bl-marcador.leve  { border-color: rgba(240, 185, 11, .28); }
.bl-marcador.medio { border-color: rgba(240, 185, 11, .45); }
.bl-marcador.alto  { border-color: rgba(246, 70, 93, .5); }

.bl-cuenta { display: flex; align-items: center; gap: 9px; margin-right: auto; }

/* La luz late solo cuando hay bloques: apagada es el estado bueno. */
.bl-luz {
    width: 9px; height: 9px;
    border-radius: 1px;
    background: var(--text-faint);
    flex-shrink: 0;
}
.bl-marcador.leve  .bl-luz { background: var(--warn); }
.bl-marcador.medio .bl-luz { background: var(--warn);
                             animation: bl-late 1.6s ease-in-out infinite; }
.bl-marcador.alto  .bl-luz { background: var(--down);
                             animation: bl-late 1s ease-in-out infinite; }
@keyframes bl-late { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.bl-n {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.bl-marcador.limpio .bl-n { color: var(--text-dim); }
.bl-marcador.leve   .bl-n,
.bl-marcador.medio  .bl-n { color: var(--warn); }
.bl-marcador.alto   .bl-n { color: var(--down); }

.bl-n-txt {
    font-size: 9.5px;
    line-height: 1.25;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bl-empuje { text-align: right; }
.bl-empuje .k { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.bl-empuje .v { font-size: 16px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bl-empuje .d { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.bl-veredicto {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 11px;
}
.bl-veredicto.limpio { color: var(--up); }
.bl-veredicto.leve,
.bl-veredicto.medio  { color: var(--warn); }
.bl-veredicto.alto   { color: var(--down); }

.bl-texto { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }

.bl-niveles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.bl-niveles .k { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.bl-niveles .v { font-size: 13.5px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bl-niveles .v.alto { color: var(--warn); }
.bl-niveles .v.cae  { color: var(--down); }

.bl-lista { display: flex; flex-direction: column; gap: 2px; }

.bl-fila {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 4px 7px;
    font-size: 11px;
    border-radius: var(--r-sm);
    background: var(--down-soft);
    font-variant-numeric: tabular-nums;
}
.bl-fila span:nth-child(2) { text-align: center; }
.bl-fila span:nth-child(3) { text-align: right; }

.bl-fila.cab {
    background: none;
    padding: 0 7px 3px;
    font-size: 9px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.bl-precio { font-weight: 600; color: var(--down); }
.bl-sobre  { color: var(--warn); }
.bl-cap    { color: var(--text-dim); }

.bl-cebo {
    font-size: 10.5px;
    color: var(--text-faint);
    line-height: 1.5;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

/* Aviso de bloque: ni subida ni bajada, es una advertencia. */
.nube.warn { border-color: rgba(240, 185, 11, .45); }
.nube.warn .nube-tit { color: var(--warn); }

/* --- Gráfico en vivo ------------------------------------ */

/* Guías del techo y el piso de la jornada. Muy tenues a propósito: están
   para saber de un vistazo si el precio de ahora está pegado al extremo,
   no para competir con las curvas. */
.g-limite {
    stroke-width: 1;
    stroke-dasharray: 2 6;
    opacity: .35;
}
.g-limite.venta    { stroke: var(--up); }
.g-limite.recompra { stroke: var(--down); }

/* El halo que late sobre el último tick. Es lo que separa "esto se
   actualiza solo" de una captura de pantalla. */
.g-late {
    fill: none;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: g-latido 1.8s ease-out infinite;
}
.g-late.venta    { stroke: var(--up); }
.g-late.recompra { stroke: var(--down); }

@keyframes g-latido {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

.g-vivo { stroke: var(--bg); stroke-width: 1.4; }
.g-vivo.venta    { fill: var(--up); }
.g-vivo.recompra { fill: var(--down); }

@media (prefers-reduced-motion: reduce) {
    .g-late { animation: none; opacity: .35; }
}

/* Punto del sello "en vivo" de la cabecera del gráfico. */
.vivo-punto {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: middle;
    animation: hr-late 2s ease-in-out infinite;
}
.vivo-punto.frio { animation: none; }

/* Aureola del techo y el piso: el anillo solo se perdía entre los puntos
   por hora, y son las dos marcas que hay que encontrar de un vistazo. */
.g-halo { fill: none; stroke-width: 1.2; opacity: .3; }
.g-halo.venta    { stroke: var(--up); }
.g-halo.recompra { stroke: var(--down); }

/* --- Posicionamiento: menu de configuracion ------------------ */

.ps-rango {
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 10px;
}

.ps-rango-fila {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
}
.ps-rango-fila + .ps-rango-fila { border-top: 1px solid var(--line); }

.ps-rango-et { flex: 1; font-size: 13px; color: var(--text-dim); }

.ps-rango-v {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ps-rango-v.tope { color: var(--accent); }

.ps-rango-d {
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    min-width: 86px;
    text-align: right;
}

/* Los USDT que cabe publicar a ese precio con el capital que hay. Solo
   aparece si hay capital escrito, por eso no reserva sitio de mas. */
.ps-rango-q {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    min-width: 96px;
    text-align: right;
}

/* La configuracion entera en dos columnas: antes habia que bajar la pagina
   para llegar al modo y a la alerta, y son cuatro cosas que se miran juntas.
   Por debajo de 860 px vuelve a una sola columna y se apila como siempre. */
/* #ps-cred (la tabla de "Peleando ahora") y #ps-config son dos <div>
   sueltos, no tarjetas seguidas -- el gap de 12px de la rejilla es
   INTERNO, entre columnas, y no separa nada por encima. Sin este margen
   la tabla y la fila de tarjetas quedan pegadas, como un solo bloque. */
#ps-config { margin-top: 12px; }

.ps-cfg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
}
.ps-col { display: flex; flex-direction: column; gap: 12px; }
.ps-col .card + .card { margin-top: 0; }

/* Dentro del bot todo va un punto mas apretado que en el resto de la web. */
#view-posicionamiento .view-head { margin-bottom: 14px; }
#view-posicionamiento .ps-cfg .card { padding: 13px 14px; }
#view-posicionamiento .ps-cfg .card-head { margin-bottom: 10px; }

/* Cada campo es una columna: la etiqueta crece si ocupa dos lineas y las
   casillas quedan alineadas en la misma raya. */
.ps-campos { gap: 10px; margin-bottom: 0; }
.ps-campos > div { display: flex; flex-direction: column; }
.ps-campos .field-label { flex: 1; font-size: 11.5px; margin-bottom: 4px; }
.ps-campos .input-plain,
.ps-campos .select { padding: 8px 10px; font-size: 13px; }

/* Las pistas ya no cuelgan de cada casilla: inflaban la fila entera. Van
   juntas al pie de la tarjeta, con el nombre del campo delante. */
.ps-pistas { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.ps-pistas .ps-pista { margin-top: 0; }
.ps-pistas .ps-pista + .ps-pista { margin-top: 5px; }
.ps-pistas b { color: var(--text-dim); font-weight: 600; }

/* La alerta es un campo suelto: la explicacion va al lado, no debajo. */
.ps-salto { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ps-salto-campo { flex: 0 0 165px; }
.ps-salto .ps-nota { flex: 1 1 220px; margin-top: 0; }

/* Guardar sale de la ultima tarjeta y pasa a ser el pie de las cuatro. */
.ps-guardar-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 12px;
}

/* =========================================================
   BOT DE POSICION: DOS ANUNCIOS A LA VEZ
   =========================================================

   Cada anuncio es una pestana y una fila. La pantalla entera -- pestanas,
   tabla de peleas y configuracion -- cabe sin bajar la rueda, que era el
   motivo de todo esto. */

/* --- Cabecera: titulo y credenciales en la misma linea ------ */
.bp-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 11px; }
.bp-cab h1 { font-size: 19px; font-weight: 600; }

.bp-cred-fila { display: flex; justify-content: flex-end; margin: -34px 0 11px; }
.bp-cred {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 12px; color: var(--text-dim);
}
.bp-cred .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
.bp-cred .ok { color: var(--up); font-weight: 600; }
.bp-cred .mask { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.bp-cred .sp { color: var(--text-faint); }
.bp-cred .lnk {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px;
}
.bp-cred .lnk:hover { color: var(--text); }
.bp-cred .lnk.rojo:hover { color: var(--down); }

.ps-lista-card { margin-bottom: 11px; }

/* En pantallas estrechas la fila no puede subirse al hueco del titulo. */
@media (max-width: 760px) {
    .bp-cred-fila { margin-top: 0; justify-content: flex-start; }
}

/* --- Pestanas: una por anuncio ------------------------------ */
.an-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: stretch; }
.an-tab {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 12px; color: inherit; font: inherit;
    text-align: left;
    /* Se reparten la fila. Antes cada una media 200 px y con dos anuncios
       quedaban dos cajitas a la izquierda y media pantalla vacia, que no
       decia si tenias dos peleas o veinte. Ahora la fila se llena y las
       peleas se comparan de un vistazo, que es para lo que estan. */
    flex: 1 1 210px; min-width: 0;
}
.an-tab.on { border-color: var(--accent); background: var(--accent-soft); }
.an-tab:hover { border-color: var(--text-faint); }
.an-tab.on:hover { border-color: var(--accent); }
.an-tab .pt { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 4px; }
.an-tab .pt.pelea { background: var(--up);   box-shadow: 0 0 0 3px var(--up-soft); }
.an-tab .pt.para  { background: var(--text-faint); }
.an-tab .pt.mal   { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
.an-tab .cuerpo { min-width: 0; }
.an-tab .n { font-size: 13px; font-weight: 600; display: block; }
.an-tab .d {
    font-size: 11px; color: var(--text-dim); display: block; margin-top: 3px;
    font-family: var(--font-mono);
}
.an-mas {
    display: flex; flex-direction: column; justify-content: center;
    border: 1px dashed var(--line); background: none; border-radius: 8px;
    padding: 8px 16px; color: var(--text-dim); font: inherit; cursor: pointer;
    text-align: left;
    /* El boton de añadir acompaña, no compite: se lleva menos sitio que una
       pelea y no crece tanto. */
    flex: 0 1 190px;
}
.an-mas:hover { border-color: var(--accent); color: var(--accent); }
.an-mas .n { font-size: 12.5px; font-weight: 600; display: block; }
.an-mas .d { font-size: 10.5px; color: var(--text-faint); display: block; margin-top: 3px; }
.an-tope {
    display: flex; align-items: center; padding: 8px 14px;
    font-size: 11px; color: var(--text-faint); line-height: 1.5;
    border: 1px dashed var(--line); border-radius: 8px;
}

.bp-anadir {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface-2); border: 1px solid var(--accent);
    border-radius: 8px; padding: 11px 13px; margin-bottom: 10px;
}
.bp-anadir .field-label { margin-bottom: 0; }
.bp-anadir .select { flex: 1 1 300px; min-width: 0; }

/* --- Peleando ahora: una fila por anuncio ------------------- */
.bp-pelea { padding: 10px 13px; }
.bp-pelea.on { border-color: var(--up); }
.bp-pelea .card-head { margin-bottom: 6px; }
.bp-tabla-wrap { overflow-x: auto; }
.bp-tabla { width: 100%; border-collapse: collapse; }
.bp-tabla th {
    text-align: left; font-size: 10.5px; font-weight: 500; color: var(--text-dim);
    padding: 0 9px 8px; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.bp-tabla th.der, .bp-tabla td.der { text-align: right; }
.bp-tabla td {
    padding: 6px 9px; border-bottom: 1px solid var(--line); vertical-align: middle;
    font-size: 12.5px; white-space: nowrap;
}
.bp-tabla tbody tr { cursor: pointer; }
.bp-tabla tbody tr:hover td { background: var(--surface-3); }
.bp-tabla tr:last-child td { border-bottom: 0; }
.bp-tabla tr.abierta td { background: var(--accent-soft); }
.bp-tabla tr.abierta:hover td { background: var(--accent-soft); }
/* La raya de --line (gris frio) casi no se ve sobre el dorado de la fila
   abierta: los dos quedan de un brillo muy parecido. Una sombra oscura
   se nota sobre cualquier fondo, dorado o no. */
.bp-tabla tr.abierta td { border-bottom-color: rgba(0, 0, 0, .3); }
.bp-tabla tr.abierta td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.bp-tabla .v {
    font-family: var(--font-mono); font-size: 13.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.bp-tabla .v.uno { color: var(--up); }
.bp-tabla .sub {
    display: block; font-size: 10px; color: var(--text-faint);
    margin-top: 2px; font-weight: 400;
}
.bp-tabla .donde { font-size: 12.5px; font-weight: 600; }
.bp-acc { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.bp-acc .lnk {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    font-size: 11px; color: var(--text-faint);
    text-decoration: underline; text-underline-offset: 2px;
}
.bp-acc .lnk:hover { color: var(--down); }

/* El interruptor de la fila es el mismo de siempre, mas pequeno. */
.ps-sw.sw-fila { width: 38px; height: 21px; }
.ps-sw.sw-fila i { width: 15px; height: 15px; }
.ps-sw.sw-fila.on i { left: 19px; }

/* --- Configuracion del anuncio abierto ---------------------- */
/* Que anuncio se esta configurando. Va en el pie, pegado a Guardar:
   es donde importa saberlo y no cuesta una linea propia. */
.bp-cual { font-size: 12px; color: var(--text-dim); }
.bp-cual b { color: var(--accent); font-weight: 600; }

/* Cada tarjeta mide lo que pide su contenido, alineadas arriba. Antes se
   estiraban las tres a la altura de la mas alta ("Como pelea", con el
   modo y el ritmo) y a las otras dos les quedaba un hueco vacio enorme
   en medio. Se probo empujar la ultima pieza al pie con margin-top:auto,
   pero con "Como pelea" tan por encima de las otras dos el hueco seguia
   siendo enorme -- ahora cada una para donde termina su contenido. */
.bp-cfg { align-items: start; }
.bp-cfg .card { padding: 10px 13px; }
.bp-cfg .card-head { margin-bottom: 9px; }
.bp-cfg .ps-campos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bp-cfg .ps-rango { padding-top: 9px; margin-top: 9px; }

/* Con tres columnas la fila del rango no tiene ancho para la etiqueta y
   los tres numeros en la misma linea: "Recompra objetivo" partia en dos.
   La etiqueta se lleva su propia linea y debajo van los numeros, que es
   lo que se compara de un vistazo. */
.bp-cfg .ps-rango-fila { flex-wrap: wrap; }
.bp-cfg .ps-rango-et { flex: 1 0 100%; font-size: 11.5px; }
.bp-cfg .ps-rango-v { flex: 1; }
.bp-cfg .ps-rango-fila { padding: 3px 0; }
.bp-cfg .ps-rango-v { font-size: 15px; }

/* El modo, en dos filas horizontales en vez de dos fichas altas: cabe lo
   mismo -- descripcion y ejemplo -- en 48 px menos. */
.bp-modos { display: flex; flex-direction: column; gap: 7px; }
.bp-modo {
    display: flex; align-items: center; gap: 11px; cursor: pointer;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
    padding: 9px 12px; color: inherit; font: inherit; text-align: left; width: 100%;
}
.bp-modo:hover { border-color: var(--text-faint); }
.bp-modo.pick { border-color: var(--accent); background: var(--accent-soft); }
.bp-modo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bp-modo .radio {
    width: 14px; height: 14px; flex: none; position: relative;
    border: 1.5px solid var(--text-faint); border-radius: 50%;
}
.bp-modo.pick .radio { border-color: var(--accent); }
.bp-modo.pick .radio::after {
    content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--accent);
}
.bp-modo .n { font-size: 12.5px; font-weight: 600; flex: none; min-width: 62px; }
.bp-modo .d { font-size: 11px; color: var(--text-dim); line-height: 1.45; flex: 1; min-width: 150px; }
.bp-modo .ej {
    font-family: var(--font-mono); font-size: 10.5px; flex: none;
    color: var(--text-dim); white-space: nowrap;
}

/* Con la mesa en tres columnas, la fila del modo ya no tiene ancho para
   nombre, explicacion y ejemplo en la misma linea: se cortaba por la
   derecha. El ejemplo baja debajo, sangrado a la altura del texto. */
.bp-modo { flex-wrap: wrap; }
.bp-modo .d { min-width: 120px; }
.bp-modo .ej { width: 100%; padding-left: 25px; margin-top: 2px; }
.bp-modo .ej b { color: var(--text); font-weight: 600; }
.bp-modo.pick .ej b { color: var(--accent); }

/* --- cada cuanto mueve el precio ------------------------------
   Va al pie de "Como pelea", separado por una raya: el modo dice COMO se
   mueve y esto CADA CUANTO, que son la misma pregunta vista dos veces. */
/* --- modo inteligente -----------------------------------------
   Cuelga del modo: solo se ve si esta elegido, porque el suelo no
   significa nada en Normal ni en Agresivo. */
.ps-inteligente {
    margin-top: 10px; padding: 10px 12px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r);
}
.ps-inteligente .ps-nota { margin-top: 0; }
.ps-inteligente .ps-nota + .ps-nota { margin-top: 7px; }
.ps-inteligente-campo { margin: 9px 0; }
.ps-inteligente-campo .input-plain { width: 100%; }

.ps-ritmo { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.ps-ritmo-botones { display: flex; gap: 6px; margin: 7px 0 8px; }
.ps-ritmo-botones button {
    flex: 1; min-width: 0; padding: 7px 4px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px;
    color: var(--text-dim); font-family: var(--font-mono); font-size: 12px;
    transition: border-color .12s, color .12s, background .12s;
}
.ps-ritmo-botones button:hover { color: var(--text); border-color: #3a424c; }
.ps-ritmo-botones button.on {
    border-color: var(--accent); color: var(--accent);
    background: rgba(252, 213, 53, 0.08);
}
.ps-ritmo .input-plain { width: 100%; }
/* Un aviso, no una pista mas: va en ambar donde quiera que salga. */
.ps-ojo { color: var(--warn); }

.bp-pie .nota { font-size: 11.5px; color: var(--text-faint); }

.ps-nota { font-size: 12px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }
.ps-mal  { font-size: 12px; color: var(--down); margin-top: 8px; }

.ps-aviso { font-size: 12px; color: var(--text-dim); align-self: center; }
.ps-aviso.ok  { color: var(--up); }
.ps-aviso.mal { color: var(--down); }

/* --- Posicionamiento: credenciales de Binance ---------------- */

.ps-bloqueo { border-color: var(--warn); }
.ps-bloqueo-t { font-size: 14px; font-weight: 600; color: var(--warn); margin-bottom: 6px; }
.ps-bloqueo-d { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* Los pasos van numerados porque son una secuencia de verdad: sin la clave
   creada no hay permiso que habilitar, y sin permiso no hay nada que pegar. */
.ps-pasos { list-style: none; counter-reset: ps; margin: 0; padding: 0; }
/* Dos celdas y solo dos: el numero y un envoltorio con todo lo demas. Con
   los parrafos sueltos, el tercero caia en la columna de 24px y el texto
   salia en una palabra por linea. */
.ps-pasos li {
    counter-increment: ps;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: start;
    column-gap: 13px;
    padding: 13px 0;
}
.ps-paso-c { min-width: 0; }
.ps-pasos li + li { border-top: 1px solid var(--line); }
.ps-pasos li::before {
    content: counter(ps);
    width: 23px; height: 23px; flex: none;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.ps-paso-t { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ps-paso-d { font-size: 12.5px; color: var(--text-dim); line-height: 1.65; }
.ps-paso-d b { color: var(--text); font-weight: 600; }
.ps-ruta { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.ps-calma { display: block; margin-top: 6px; color: var(--up); }

.ps-ip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding: 9px 11px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
}
.ps-ip-v {
    flex: 1; min-width: 120px;
    font-family: var(--font-mono); font-size: 14px; font-weight: 600;
    color: var(--accent);
}

.ps-guarda {
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    border-radius: var(--r);
    padding: 10px 12px;
    margin-top: 12px;
}
.ps-guarda p { font-size: 12px; line-height: 1.65; }
.ps-guarda b { color: var(--warn); font-weight: 600; }

.ps-ok { border-color: var(--up); }
.ps-ok-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ps-ok-t { flex: 1; min-width: 200px; }
.ps-ok-t .n {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--up); margin-bottom: 3px;
}
.ps-ok-t .d { font-size: 12px; color: var(--text-dim); }
.ps-pt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ps-mask { font-family: var(--font-mono); font-size: 12.5px; }
.btn-ghost.ps-rojo { color: var(--down); border-color: var(--down); }

.ps-tabla-wrap { overflow-x: auto; margin-top: 14px; }
.ps-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ps-tabla th {
    text-align: left; font-size: 10.5px; font-weight: 500;
    color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase;
    padding: 0 10px 9px 0; white-space: nowrap;
}
.ps-tabla td {
    padding: 9px 10px 9px 0;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ps-adv { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }
.ps-tabla .ps-num { font-family: var(--font-mono); }
.ps-tabla .ok { color: var(--up); font-weight: 600; }
.ps-tabla .dim { color: var(--text-faint); }

/* --- Posicionamiento: lista plegable, pelea y resumen -------- */

.ps-plegar {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    margin-top: 13px; padding: 9px 0 0;
    border: 0; border-top: 1px solid var(--line);
    background: none; color: var(--text-dim);
    font-size: 12.5px; text-align: left; cursor: pointer;
}
.ps-plegar:hover { color: var(--text); }
/* El caret del sprite apunta a la derecha. Cerrado mira hacia abajo
   ("abreme") y abierto hacia arriba, igual que el menu lateral. */
.ps-plegar .ic { transition: transform .15s ease; transform: rotate(90deg); }
.ps-plegar.abierta .ic { transform: rotate(270deg); }
.ps-lista-foot { display: flex; justify-content: flex-end; margin-top: 10px; }

.ps-espejo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding: 11px 13px;
    background: var(--surface-2); border-radius: var(--r);
}

/* El desplegable del anuncio y su espejo, en la misma linea: uno describe
   al otro y estirar el menu a 1300 px no aportaba nada. */
.ps-pelea-top { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ps-pelea-sel { flex: 0 1 340px; min-width: 240px; }
.ps-pelea-sel .select { width: 100%; }
.ps-pelea-top > .ps-espejo,
.ps-pelea-top > .ps-nota { flex: 1 1 300px; margin-top: 0; }
.ps-pelea-top > .ps-espejo { background: var(--bg); border: 1px solid var(--line); }
.ps-espejo-t { flex: 1; min-width: 200px; }
.ps-espejo-t .n { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.ps-espejo-t .d { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }

.ps-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600;
    padding: 4px 11px; border-radius: 20px;
}
.ps-chip.on  { background: var(--up-soft);   color: var(--up); }
.ps-chip.off { background: var(--down-soft); color: var(--down); }

.ps-permiso {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line);
}
.ps-permiso-t { flex: 1; min-width: 210px; }
.ps-permiso-t .n { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.ps-permiso-t .d { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* El interruptor es un boton de verdad: se llega con el tabulador y se
   dispara con la barra, como cualquier control. */
.ps-sw {
    flex: none; position: relative;
    width: 48px; height: 27px; border-radius: 20px;
    background: var(--surface-3); border: 1px solid var(--line);
    cursor: pointer; padding: 0;
    transition: background .15s ease, border-color .15s ease;
}
.ps-sw i {
    position: absolute; top: 2px; left: 2px;
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--text-faint); display: block;
    transition: left .15s ease, background .15s ease;
}
.ps-sw.on { background: var(--up-soft); border-color: var(--up); }
.ps-sw.on i { left: 24px; background: var(--up); }
.ps-sw:disabled { opacity: .4; cursor: not-allowed; }
.ps-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card.ps-peleando { border-color: var(--up); }
.card.ps-peleando .ps-permiso-t .n { color: var(--up); }

.ps-motivo {
    margin-top: 13px; padding: 11px 13px;
    background: var(--warn-soft); border: 1px solid var(--warn);
    border-radius: var(--r);
}
.ps-motivo .t { font-size: 13px; font-weight: 600; color: var(--warn); margin-bottom: 6px; }
.ps-motivo .d { font-size: 12px; color: var(--text-dim); line-height: 1.65; margin-bottom: 6px; }
.ps-motivo .d:last-child { margin-bottom: 0; }
.ps-motivo .d b { color: var(--text); font-weight: 600; }

.ps-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 20px;
}
.ps-resumen div { display: flex; flex-direction: column; gap: 3px; }
.ps-resumen .k { font-size: 11px; color: var(--text-dim); }
.ps-resumen .v {
    font-family: var(--font-mono); font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ps-resumen .v.tope { color: var(--accent); }

/* --- Posicionamiento: modo y estado del motor ---------------- */

.ps-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; }
.ps-modo {
    display: block; text-align: left; cursor: pointer;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r); padding: 13px 14px; color: inherit;
    font: inherit;
}
.ps-modo:hover { border-color: var(--text-faint); }
#view-posicionamiento .ps-modo { padding: 11px 12px; }
#view-posicionamiento .ps-modo .d { font-size: 11px; line-height: 1.5; }
.ps-modo.pick { border-color: var(--accent); background: var(--accent-soft); }
.ps-modo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-modo .h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ps-modo .radio {
    width: 14px; height: 14px; flex: none; position: relative;
    border: 1.5px solid var(--text-faint); border-radius: 50%;
}
.ps-modo.pick .radio { border-color: var(--accent); }
.ps-modo.pick .radio::after {
    content: ""; position: absolute; inset: 2.5px;
    border-radius: 50%; background: var(--accent);
}
.ps-modo .n { font-size: 13px; font-weight: 600; }
.ps-modo .d { display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.55; }
.ps-modo .ej {
    display: flex; align-items: center; gap: 7px;
    margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 11px;
}
.ps-modo .ej .a { color: var(--text-dim); }
.ps-modo .ej .fl { color: var(--text-faint); }
.ps-modo .ej .b { color: var(--text); font-weight: 600; }
.ps-modo.pick .ej .b { color: var(--accent); }

.ps-motor {
    width: 100%; margin-top: 13px; padding-top: 13px;
    border-top: 1px solid var(--line);
}
.ps-motor-cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px;
}
.ps-motor-cifras div { display: flex; flex-direction: column; gap: 3px; }
.ps-motor-cifras .k { font-size: 11px; color: var(--text-dim); }
.ps-motor-cifras .v {
    font-family: var(--font-mono); font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ps-motor-cifras .v.uno { color: var(--up); }
.ps-motor-cifras .v.chico { font-size: 12px; font-weight: 400; color: var(--text-dim); }

.ps-cuando { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* --- Panel admin: dar y quitar administrador ----------------- */

.act-btn.dar-admin:hover    { color: var(--accent); border-color: var(--accent); }
.act-btn.quitar-admin:hover { color: var(--down);   border-color: var(--down); }

.rol-lista {
    list-style: none; margin: 0 0 14px; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--bg);
}
.rol-lista li {
    font-size: 12.5px; color: var(--text-dim);
    padding: 9px 13px;
}
.rol-lista li + li { border-top: 1px solid var(--line); }

/* =========================================================
   PORTADA PÚBLICA (#lp)
   Lo primero que ve quien todavía no ha entrado. Vive entero
   bajo #lp y con clases lp-*, así que no toca ni un estilo de
   la aplicación. Sus variables también son suyas: se declaran
   en #lp, no en :root.
   ========================================================= */
#lp{
  --lp-ink:       #07080B;
  --lp-ink-2:     #0C0E13;
  --lp-panel:     #12151A;
  --lp-panel-2:   #191D24;
  --lp-line:      #242931;
  --lp-line-soft: #1A1E25;
  --lp-text:      #EDEFF3;
  --lp-dim:       #A0A9B6;   /* 7.0:1 sobre el fondo */
  --lp-faint:     #7A8391;   /* 4.6:1 sobre el fondo */
  --lp-accent:    #FCD535;   /* amarillo de marca */
  --lp-accent-dk: #6E5D12;
  --lp-usdt:      #26A17B;
  --lp-up:        #0ECB81;
  --lp-down:      #F6465D;

  --lp-disp: 'Archivo','Helvetica Neue',Arial,sans-serif;
  --lp-pad:  clamp(20px,5vw,60px);

  background:var(--lp-ink);
  color:var(--lp-text);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.58;
}
#lp *{box-sizing:border-box}
#lp p{margin:0}
#lp ul{margin:0;padding:0;list-style:none}
#lp h1, #lp h2, #lp h3{
  margin:0;font-family:var(--lp-disp);font-stretch:102%;text-wrap:balance;
}
#lp section{padding:clamp(38px,4.4vw,58px) 0}
#lp :focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}

.lp-wrap{max-width:1160px;margin:0 auto;padding:0 var(--lp-pad)}
.lp-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--lp-faint);
}

/* ---------- barra superior ---------- */
.lp-topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(7,8,11,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lp-line-soft);
}
.lp-topbar-in{display:flex;align-items:center;gap:24px;height:62px}
.lp-brand{
  font-family:var(--lp-disp);font-weight:700;font-stretch:110%;
  font-size:19px;letter-spacing:.18em;color:var(--lp-accent);
}
.lp-topnav{display:flex;gap:22px;margin-left:12px}
.lp-topnav a{font-size:14px;color:var(--lp-dim);text-decoration:none}
.lp-topnav a:hover{color:var(--lp-text)}
.lp-topbar-right{display:flex;align-items:center;gap:11px;margin-left:auto}
.lp-phone{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:13px;color:var(--lp-dim);
  padding-right:13px;border-right:1px solid var(--lp-line);text-decoration:none;
}
.lp-phone svg{color:var(--lp-usdt)}
.lp-phone:hover{color:var(--lp-text)}
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 18px;border-radius:3px;
  font-family:var(--font-ui);font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.lp-btn-ghost{border-color:var(--lp-line);color:var(--lp-text);background:transparent}
.lp-btn-ghost:hover{border-color:var(--lp-faint);background:var(--lp-panel)}
.lp-btn-solid{background:var(--lp-accent);color:#15120A;border-color:var(--lp-accent)}
.lp-btn-solid:hover{background:#FFE05C}
.lp-btn-wa{background:transparent;border-color:rgba(38,161,123,.5);color:#4FCFA6}
.lp-btn-wa:hover{background:rgba(38,161,123,.12);border-color:var(--lp-usdt)}
.lp-btn-lg{height:46px;padding:0 24px;font-size:15px}
@media(max-width:1000px){.lp-topnav, .lp-phone{display:none}}

/* ---------- héroe ---------- */
.lp-hero{border-bottom:1px solid var(--lp-line-soft)}
.lp-hero-in{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,56px);
  align-items:center;padding:clamp(32px,4vw,52px) 0 clamp(34px,4.4vw,56px);
}
.lp-hero h1{
  font-weight:800;font-stretch:106%;
  font-size:clamp(34px,4.6vw,54px);line-height:1.02;letter-spacing:-.016em;
  margin:14px 0 18px;
}
.lp-hero h1 em{font-style:normal;color:var(--lp-accent)}
.lp-lede{font-size:16.5px;color:var(--lp-dim);max-width:50ch}
.lp-hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.lp-hero-note{margin-top:18px;font-family:var(--font-mono);font-size:12px;color:var(--lp-faint)}
@media(max-width:900px){.lp-hero-in{grid-template-columns:1fr;padding-top:32px}}

/* ---------- panel del héroe ---------- */
.lp-panel{
  background:var(--lp-panel);border:1px solid var(--lp-line);border-radius:7px;
  overflow:hidden;box-shadow:0 28px 60px -34px rgba(0,0,0,.85);
}
.lp-panel-head{
  display:flex;align-items:center;gap:14px;padding:10px 15px;
  border-bottom:1px solid var(--lp-line-soft);background:var(--lp-panel-2);
}
.lp-panel-head b{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  letter-spacing:.08em;color:var(--lp-text);
}
.lp-reloj{
  margin-left:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--lp-dim);
  display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums;
}
.lp-reloj i{width:6px;height:6px;border-radius:50%;background:var(--lp-up);display:inline-block}
.lp-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lp-accent);border:1px solid var(--lp-accent-dk);border-radius:2px;
  padding:2px 7px;white-space:nowrap;
}
@media(max-width:520px){.lp-reloj{display:none}}

.lp-panel-tabs{
  display:flex;gap:2px;padding:0 9px;background:var(--lp-panel-2);
  border-bottom:1px solid var(--lp-line-soft);
}
.lp-ptab{
  appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
  font-family:var(--font-ui);font-size:12.5px;color:var(--lp-faint);padding:9px 11px;
  cursor:pointer;margin-bottom:-1px;transition:color .16s ease,border-color .16s ease;
}
.lp-ptab:hover{color:var(--lp-text)}
.lp-ptab[aria-selected="true"]{color:var(--lp-accent);border-bottom-color:var(--lp-accent)}
.lp-oculto{display:none}

.lp-panel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lp-line-soft)}
.lp-stat{background:var(--lp-panel);padding:12px 15px}
.lp-stat dt{font-size:12px;color:var(--lp-faint);margin-bottom:5px}
.lp-stat dd{
  margin:0;font-family:var(--font-mono);font-size:19px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--lp-text);line-height:1.15;
}
.lp-stat .lp-delta{
  display:block;font-family:var(--font-mono);font-size:11.5px;
  margin-top:3px;color:var(--lp-faint);
}
.lp-stat .lp-delta.lp-up{color:var(--lp-up)}
.lp-panel-chart{padding:12px 15px 2px;border-top:1px solid var(--lp-line-soft)}
.lp-panel-chart svg{display:block;width:100%;height:auto}
.lp-leyenda{
  display:flex;flex-wrap:wrap;gap:5px 16px;padding:2px 15px 12px;
  font-family:var(--font-mono);font-size:11px;color:var(--lp-faint);
}
.lp-leyenda span{display:flex;align-items:center;gap:7px}
.lp-leyenda i{width:16px;height:0;border-top:2px solid var(--lp-accent);display:inline-block}
.lp-leyenda i.lp-pt{border-top-style:dashed}
.lp-leyenda i.lp-gr{border-top-color:#5B6472}
.lp-leyenda i.lp-bd{height:8px;border:0;background:rgba(252,213,53,.16);border-radius:1px}
.lp-leyenda i.lp-bg{height:8px;border:0;background:rgba(120,132,150,.22);border-radius:1px}

/* indicadores del pie del panel: las tres celdas comparten la misma
   retícula de cuatro filas (rótulo · cifra · dibujo · nota) para que
   todo quede alineado de una celda a la otra. */
.lp-panel-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--lp-line-soft);border-top:1px solid var(--lp-line-soft);
}
.lp-mod{
  background:var(--lp-panel-2);padding:14px 15px 15px;
  display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;
}
.lp-mod-top{display:flex;align-items:center;gap:8px}
.lp-mod-t{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lp-faint);
}
.lp-pill{
  margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 7px;border-radius:2px;border:1px solid;white-space:nowrap;
}
.lp-pill.lp-verde{color:var(--lp-up);border-color:rgba(14,203,129,.38);background:rgba(14,203,129,.08)}
.lp-pill.lp-roja{color:var(--lp-down);border-color:rgba(246,70,93,.38);background:rgba(246,70,93,.08)}
.lp-pill.lp-neutra{color:var(--lp-dim);border-color:var(--lp-line);background:transparent}
.lp-mod-cifra{
  font-family:var(--font-mono);font-size:25px;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--lp-text);
}
.lp-mod-cifra span{font-size:11.5px;color:var(--lp-faint);margin-left:5px;letter-spacing:.04em}
.lp-mod-cifra.lp-verde{color:var(--lp-up)}
.lp-mod-cifra.lp-roja{color:var(--lp-down)}
.lp-mod-viz{display:flex;flex-direction:column;justify-content:center}
.lp-mod-viz svg{display:block;width:100%;height:auto}
.lp-mod-nota{font-size:11.5px;color:var(--lp-faint);line-height:1.45}

.lp-barra2{display:flex;height:10px;border-radius:2px;overflow:hidden;background:var(--lp-line-soft)}
.lp-barra2 i{display:block;height:100%}
.lp-b-compra{background:var(--lp-usdt)}
.lp-b-venta{background:var(--lp-down);opacity:.8}
.lp-b-base{background:#39404A}
.lp-b-alza{background:var(--lp-down)}
.lp-barra2-pie{
  display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-family:var(--font-mono);font-size:10px;color:var(--lp-dim);
  font-variant-numeric:tabular-nums;
}
@media(max-width:560px){.lp-panel-stats, .lp-panel-foot{grid-template-columns:1fr}}

/* ---------- tira de contexto ---------- */
.lp-strip{border-bottom:1px solid var(--lp-line-soft);background:var(--lp-ink-2)}
.lp-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lp-line-soft)}
.lp-strip-cell{background:var(--lp-ink-2);padding:16px clamp(14px,2vw,22px)}
.lp-strip-cell dt{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lp-faint);margin-bottom:7px;
}
.lp-strip-cell dd{margin:0;font-size:14px}
@media(max-width:860px){.lp-strip-in{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.lp-strip-in{grid-template-columns:1fr}}

/* ---------- cabeceras de sección ---------- */
.lp-sec-head{max-width:62ch;margin-bottom:26px}
.lp-sec-head h2{
  font-weight:800;font-stretch:104%;font-size:clamp(25px,3.1vw,34px);
  line-height:1.1;letter-spacing:-.012em;margin:11px 0 11px;
}
.lp-sec-head p{color:var(--lp-dim);font-size:16px}

/* ---------- en qué te ayuda ---------- */
.lp-ayuda{
  background:var(--lp-ink-2);
  border-top:1px solid var(--lp-line-soft);border-bottom:1px solid var(--lp-line-soft);
}
.lp-preguntas{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--lp-line-soft);border:1px solid var(--lp-line-soft);
}
.lp-preg{
  background:var(--lp-ink-2);padding:20px clamp(15px,1.7vw,20px);
  display:flex;flex-direction:column;gap:9px;
}
.lp-preg h3{
  font-family:var(--font-ui);font-weight:600;font-size:16.5px;line-height:1.3;
  color:var(--lp-text);letter-spacing:0;
  padding-bottom:11px;border-bottom:1px solid var(--lp-accent-dk);
}
.lp-preg p{font-size:14.5px;color:var(--lp-dim)}
.lp-preg .lp-donde{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--lp-line-soft);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lp-faint);
}
@media(max-width:980px){.lp-preguntas{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lp-preguntas{grid-template-columns:1fr}}

/* ---------- herramientas ---------- */
.lp-tools{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--lp-line-soft);border:1px solid var(--lp-line-soft);
}
.lp-tool{
  background:var(--lp-ink);padding:19px clamp(15px,1.8vw,20px);
  display:flex;flex-direction:column;gap:8px;
}
.lp-tool:hover{background:var(--lp-ink-2)}
.lp-tool-ico{
  width:32px;height:32px;display:grid;place-items:center;border-radius:3px;
  background:var(--lp-panel);color:var(--lp-dim);border:1px solid var(--lp-line);
}
.lp-tool h3{font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:0}
.lp-tool p{color:var(--lp-dim);font-size:14px}
@media(max-width:920px){.lp-tools{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.lp-tools{grid-template-columns:1fr}}

/* ---------- suscripción ---------- */
.lp-sub-grid{
  display:grid;grid-template-columns:1.3fr .7fr;gap:1px;
  background:var(--lp-line-soft);border:1px solid var(--lp-line-soft);
}
.lp-sub-cell{background:var(--lp-panel);padding:22px clamp(17px,1.9vw,22px)}
.lp-sub-cell h3{
  font-family:var(--lp-disp);font-weight:800;font-stretch:104%;font-size:22px;
  letter-spacing:-.008em;margin:10px 0 10px;
}
.lp-sub-lede{font-size:15px;color:var(--lp-dim);max-width:48ch;margin-bottom:18px}
.lp-plans{display:flex;flex-wrap:wrap;gap:8px}
.lp-plan{
  font-family:var(--font-mono);font-size:12.5px;padding:8px 14px;
  border:1px solid var(--lp-line);border-radius:2px;background:var(--lp-ink-2);
}
.lp-plan.lp-cortesia{border-color:var(--lp-accent-dk);color:var(--lp-accent)}
.lp-contacto h3{font-size:19px}
.lp-contacto p{font-size:14.5px;color:var(--lp-dim);margin-bottom:18px}
.lp-contacto .lp-btn{width:100%}
.lp-contacto .lp-tel-txt{
  font-family:var(--font-mono);font-size:12.5px;color:var(--lp-faint);
  text-align:center;display:block;margin-top:12px;
}
@media(max-width:820px){.lp-sub-grid{grid-template-columns:1fr}}

/* ---------- pie ---------- */
#lp footer{border-top:1px solid var(--lp-line-soft);padding:22px 0 28px}
.lp-foot-in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.lp-foot-links{display:flex;gap:18px;flex-wrap:wrap}
.lp-foot-links a{
  font-family:var(--font-mono);font-size:12.5px;color:var(--lp-dim);
  display:flex;align-items:center;gap:8px;text-decoration:none;
}
.lp-foot-links a:hover{color:var(--lp-text)}
.lp-foot-legal{margin-top:16px;font-size:12.5px;color:var(--lp-faint);max-width:74ch;line-height:1.6}

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

/* Volver a la portada desde la pantalla de acceso. */
.volver-portada{
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:14px;font-size:13px;color:var(--text-dim);background:none;
  border:0;cursor:pointer;font-family:inherit;
}
.volver-portada:hover{color:var(--text)}

/* Pronóstico: días que este usuario todavía no puede abrir. Se dejan a la
   vista, en gris y con candado, para que se entienda que existen y que se
   liberan solos — ocultarlos haría pensar que la función no está. */
.chip-bloq {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(1);
}
.chip-bloq:hover { transform: none; }

/* Aviso de régimen en el Pronóstico. Va en ámbar, no en rojo: no es un
   error, es un matiz que cambia cómo se lee el número de arriba. */
.aviso-regimen {
    background: rgba(245, 196, 81, .10);
    border-left: 3px solid #f5c451;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--txt-2, #8b98ab);
}
.aviso-regimen b { color: var(--txt, #e6edf3); }

/* =========================================================
   MI GANANCIA
   Dos pantallas en una: mientras no hay cuenta conectada se ve
   la guia (gu-), y al conectarla, el tablero (gn-).
   ========================================================= */

/* --- Barra de conexion ---------------------------------- */
.gn-conex {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px;
}
.gn-conex-izq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gn-punto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--up); box-shadow: 0 0 0 3px var(--up-soft);
}
.gn-punto.trabajando { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.gn-cuenta { font-family: var(--font-mono); font-size: 13px; }
.gn-desde { font-size: 12px; color: var(--text-dim); }
.gn-acciones { display: flex; gap: 8px; }

/* --- Selector de mercado --------------------------------- */
/* Los dos libros vienen de la misma descarga de Binance, asi que esto no es
   un filtro caro: cambiar de mercado solo recalcula lo ya guardado. Va
   arriba del todo porque es la division mas gruesa de la pantalla -- mas que
   el periodo o el nivel: son dos monedas distintas. */
.gn-mercados {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.gn-merc {
    flex: 1 1 220px; text-align: left; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 14px; transition: all 0.15s;
}
.gn-merc b {
    display: block; font-size: 14px; color: var(--text-dim); font-weight: 600;
}
.gn-merc span {
    display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint);
}
.gn-merc i {
    display: block; margin-top: 6px; font-style: normal;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
}
.gn-merc:hover { border-color: var(--text-dim); }
.gn-merc:hover b { color: var(--text); }
.gn-merc.on {
    background: var(--surface-3); border-color: var(--accent);
    box-shadow: inset 2px 0 0 var(--accent);
}
.gn-merc.on b { color: var(--accent); }
.gn-merc.on i { color: var(--text-dim); }

/* --- La suma de los dos mercados ------------------------- */
/* Tres cuadros con la misma estructura, separados solo por la linea de
   fondo -- igual que el pulso de la portada. El total va primero y con la
   raya dorada, porque es lo que se viene a buscar. El mercado que se esta
   mirando arriba se marca, para no perder el hilo. */
.gn-suma {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.gn-suma-c {
    background: var(--surface-2);
    padding: 15px 18px;
    box-shadow: 1px 0 0 var(--line);
}
.gn-suma-c.tot { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--accent); }
.gn-suma-c.on  { box-shadow: inset 3px 0 0 var(--accent); }

.gn-suma-e {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
}
.gn-suma-c.tot .gn-suma-e { color: var(--accent); }

.gn-suma-v {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 8px;
}
.gn-suma-u {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    margin-left: 6px;
}
.gn-suma-f {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 7px;
}
.gn-suma-n { font-size: 10px; color: var(--text-faint); margin-top: 3px; }

@media (max-width: 860px) {
    .gn-suma { grid-template-columns: 1fr; }
    .gn-suma-c { box-shadow: none; }
    .gn-suma-c.tot, .gn-suma-c.on { box-shadow: inset 3px 0 0 var(--accent); }
}

/* --- Filtros: periodo y nivel de comerciante ------------- */
.gn-filtros {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.gn-nivel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gn-nivel-lbl {
    font-size: 11px; color: var(--text-faint);
    letter-spacing: 0.1em; text-transform: uppercase;
}
.gn-niv {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim);
    border-radius: 20px; padding: 5px 12px 5px 9px; font-size: 12px; cursor: pointer;
    transition: all 0.15s;
}
.gn-niv i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gn-niv .p { font-family: var(--font-mono); font-size: 11px; opacity: 0.75; }
.gn-niv:hover { color: var(--text); }
/* Elegido. Antes esto solo subia el fondo un tono y aclaraba el borde: al
   lado de los chips de periodo -- que se rellenan de amarillo -- no se
   distinguia cual estaba marcado. Se usa el mismo relleno que los chips,
   que es el "elegido" que ya habla esta pantalla. */
.gn-niv.on {
    background: var(--accent); border-color: var(--accent);
    color: #181A20; font-weight: 600;
}
.gn-niv.on .p { color: #181A20; opacity: 0.72; }
/* El punto del nivel sobre el amarillo: el de Oro ES ese mismo amarillo y
   desaparecia del todo. El aro oscuro lo devuelve al sitio, y de paso
   recorta los otros tres contra el relleno. */
.gn-niv.on i { box-shadow: 0 0 0 1.5px rgba(24, 26, 32, 0.6); }
.niv-oro          { background: #FCD535; }
.niv-plata        { background: #C7CDD6; }
.niv-bronce       { background: #C77B3A; }
.niv-noverificado { background: #6B7280; }

/* --- Cifras ---------------------------------------------
   Los numeros de esta pantalla NO pasan por el totem digital:
   son cantidades de dinero con decimales y se leen mejor en
   la mono de siempre. */
.gn-cifra {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; line-height: 1; font-weight: 600;
}
.gn-cifra-xl { font-size: 42px; }
.gn-cifra-l  { font-size: 28px; }
.gn-u {
    font-family: var(--font-ui); font-size: 13px; font-weight: 400;
    color: var(--text-dim); letter-spacing: 0.06em; margin-left: 7px;
}
.gn-bs { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.gn-eti { font-size: 11px; color: var(--text-dim); letter-spacing: 0.13em; text-transform: uppercase; }

/* --- Cabecera: hoy manda, el periodo acompana ------------ */
.gn-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.gn-hoy {
    padding: 20px 22px; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: center;
}
.gn-hoy .gn-dia { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.gn-per { padding: 20px 22px; background: rgba(255, 255, 255, 0.012); }
.gn-linea {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--text-dim); padding: 7px 0;
}
.gn-linea + .gn-linea { border-top: 1px solid var(--line); }
.gn-linea b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text); }

@media (max-width: 880px) {
    .gn-hero { grid-template-columns: 1fr; }
    .gn-hoy { border-right: none; border-bottom: 1px solid var(--line); }
}

/* --- Sincronizacion ------------------------------------- */
.gn-prog { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 14px 0 8px; }
.gn-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
.gn-prog-t { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.gn-espera { font-size: 13px; color: var(--text-dim); line-height: 1.65; }
.gn-espera b { color: var(--text); }

/* --- Tabla del dia a dia -------------------------------- */
.gn-tabla td.num, .gn-tabla th.num {
    text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.gn-tabla tfoot td { border-top: 1px solid var(--line); font-weight: 600; padding: 10px 12px; }

.gn-mal { color: var(--down); font-size: 13px; line-height: 1.6; }
.gn-vacio { text-align: center; padding: 26px 16px; }
.gn-vacio p { color: var(--text-dim); font-size: 13px; margin-bottom: 14px; }

/* =========================================================
   GUIA PARA CONECTAR LA CLAVE (solo lectura)
   ========================================================= */
.gu-escudo {
    border-color: rgba(14, 203, 129, 0.35);
    background: linear-gradient(180deg, rgba(14, 203, 129, 0.05), transparent 60%), var(--surface-2);
}
.gu-escudo-cab { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.gu-escudo-cab svg { color: var(--up); width: 22px; height: 22px; }
.gu-escudo-t { font-size: 15px; font-weight: 600; }
.gu-escudo-d { font-size: 12.5px; color: var(--text-dim); line-height: 1.65; margin-bottom: 16px; }
.gu-escudo-d b { color: var(--text); }

.gu-poderes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gu-col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; }
.gu-col.si { border-color: rgba(14, 203, 129, 0.3); }
.gu-col.no { border-color: rgba(246, 70, 93, 0.28); }
.gu-col-t { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.gu-col.si .gu-col-t { color: var(--up); }
.gu-col.no .gu-col-t { color: var(--down); }
.gu-li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 12.5px; color: var(--text-dim); padding: 5px 0; line-height: 1.5;
}
.gu-li .m { font-family: var(--font-mono); font-weight: 600; flex: none; width: 13px; }
.gu-col.si .gu-li .m { color: var(--up); }
.gu-col.no .gu-li .m { color: var(--down); }
.gu-remate { margin-top: 14px; font-size: 12.5px; color: var(--up); line-height: 1.6; }

@media (max-width: 760px) { .gu-poderes { grid-template-columns: 1fr; } }

/* Replica del cuadro de permisos de Binance: el usuario compara su
   pantalla con este dibujo en vez de interpretar un parrafo. */
.gu-perm {
    margin-top: 12px; background: var(--bg);
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.gu-perm-cab {
    font-size: 11px; color: var(--text-faint); padding: 9px 13px;
    border-bottom: 1px solid var(--line); letter-spacing: 0.08em; text-transform: uppercase;
}
.gu-perm-fila { display: flex; align-items: center; gap: 11px; padding: 10px 13px; }
.gu-perm-fila + .gu-perm-fila { border-top: 1px solid var(--line); }
.gu-caja {
    width: 16px; height: 16px; border-radius: 3px; flex: none;
    border: 1.5px solid var(--text-faint);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-family: var(--font-mono); font-weight: 700; color: transparent;
}
.gu-caja.marcada { background: var(--up); border-color: var(--up); color: #0B0E11; }
.gu-perm-n { flex: 1; font-size: 13px; }
.gu-perm-fila.apagada .gu-perm-n { color: var(--text-faint); text-decoration: line-through; }
.gu-perm-hint { font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.gu-perm-hint.ok  { background: var(--up-soft);   color: var(--up); }
.gu-perm-hint.off { background: var(--surface-3); color: var(--text-dim); }
.gu-perm-hint.bad { background: var(--down-soft); color: var(--down); }

.gu-arrepiento {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 12.5px; color: var(--text-dim); line-height: 1.6;
    margin-top: 12px; padding: 11px 13px;
    background: var(--surface-3); border-radius: var(--r);
}
.gu-arrepiento b { color: var(--text); }
.gu-arrepiento svg { color: var(--text-dim); margin-top: 2px; }

/* --- Posicion abierta -----------------------------------
   El ciclo a medio hacer: lo vendido que falta por recomprar
   (o al reves) y el precio al que cerrarlo deja de doler. */
.gn-pos {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px;
    margin-top: 12px; align-items: center;
}
.gn-pos.corta { border-color: rgba(240, 185, 11, 0.38); }
.gn-pos.larga { border-color: rgba(38, 161, 123, 0.38); }
.gn-pos-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gn-pos-t { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.gn-pos-t b { font-family: var(--font-mono); font-size: 17px; color: var(--text); }
.gn-pos-d { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-top: 6px; }
.gn-pos-d b { color: var(--text); font-family: var(--font-mono); }
.gn-pos-der {
    border-left: 1px solid var(--line); padding-left: 18px; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
}
.gn-pos-der .gn-cifra { margin-top: 8px; color: var(--accent); }
.gn-pos-der .gn-pos-d b { color: var(--text); font-family: var(--font-ui); }

@media (max-width: 880px) {
    .gn-pos { grid-template-columns: 1fr; }
    .gn-pos-der { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 14px; }
}

/* Ciclos cerrados: el tipo de ciclo se lee de un vistazo. */
.gn-ciclo-t { font-size: 12px; }
.gn-ciclo-t.corto { color: var(--warn); }
.gn-ciclo-t.largo { color: var(--usdt); }
.gn-tabla td b.dim { font-weight: 400; }

/* --- Meses (solo VIP) ----------------------------------- */
.gn-meses { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gn-meses.bloqueada { opacity: 0.75; }
.gn-vip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--text-dim);
    background: var(--surface-2); border: 1px dashed var(--line);
    border-radius: 20px; padding: 6px 13px;
}
.gn-vip b { color: var(--accent); }
.gn-vip svg { color: var(--text-faint); }
.act-btn.vip:hover { color: var(--accent); border-color: var(--accent); }
.act-btn.vip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* --- Ciclos plegables -----------------------------------
   Con miles de ciclos, la lista entera tapaba la pantalla.
   Va plegada, y al abrirla rueda dentro de su propia caja. */
.gn-plegar-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gn-plegable { max-height: 420px; overflow-y: auto; }
.gn-plegable-pie { margin-top: 10px; }
.gn-caret { transition: transform 0.15s; }
.gn-caret.abierta { transform: rotate(90deg); }
.gn-vacio-t { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.gn-vacio-pie { font-size: 12px; color: var(--text-faint); line-height: 1.6; margin: 14px auto 0; max-width: 560px; }
.ps-pista { font-size: 11px; color: var(--text-faint); line-height: 1.55; margin-top: 6px; }

/* --- Panel admin: un grupo por pestana ------------------
   La lista unica obligaba a leerlo todo para encontrar a los
   que pagan. Cada grupo va aparte, con su cuenta al lado. */
.admin-tabs { margin-bottom: 14px; }
.admin-tabs .chip { display: inline-flex; align-items: center; gap: 7px; }
.chip-n {
    font-family: var(--font-mono); font-size: 11px;
    background: var(--surface-3); color: var(--text-dim);
    border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.chip.on .chip-n { background: rgba(24, 26, 32, 0.22); color: #181A20; }

/* =========================================================
   CONSULTAR CEDULA
   ========================================================= */
.cd-fila { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.cd-nac { width: 78px; flex: none; }
.cd-num {
    flex: 1; min-width: 180px;
    font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em;
}
.cd-nota { font-size: 12px; color: var(--text-faint); line-height: 1.6; margin-top: 10px; }
.cd-nota b { color: var(--text-dim); }

.cd-ficha {
    margin-top: 14px; padding: 18px 20px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
    border-left: 3px solid var(--up);
}
.cd-ficha.vacia { border-left-color: var(--down); }
.cd-ficha.esperando { border-left-color: var(--line); }
.cd-eti { font-size: 11px; color: var(--text-dim); letter-spacing: 0.13em; text-transform: uppercase; }
.cd-nombre { font-size: 23px; font-weight: 600; margin: 8px 0 10px; letter-spacing: -0.01em; }
.cd-datos { display: flex; gap: 22px; flex-wrap: wrap; }
.cd-dato .k { font-size: 11px; color: var(--text-dim); }
.cd-dato .v { font-family: var(--font-mono); font-size: 14px; margin-top: 2px; }
.cd-acciones {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
    display: flex; gap: 8px; flex-wrap: wrap;
}
.cd-mal { font-size: 14px; color: var(--down); margin-top: 6px; }


/* Las explicaciones del bot van igual de completas pero mas juntas: era
   eso o partir la pantalla en dos, que es lo que se queria evitar. */
#view-posicionamiento .ps-nota { margin-top: 6px; line-height: 1.45; }
#view-posicionamiento .ps-pista { line-height: 1.45; }
.bp-cfg .ps-pistas { margin-top: 8px; padding-top: 7px; }
.bp-cfg .ps-pistas .ps-pista + .ps-pista { margin-top: 4px; }
.bp-cfg .ps-campos { gap: 9px; }
.bp-modos { gap: 6px; }
.bp-modo { padding: 8px 12px; }

/* Ultimo apreton de huecos: nada de contenido, solo aire sobrante. */
#view-posicionamiento .an-tabs { margin-bottom: 8px; }
#view-posicionamiento .ps-guardar-bar { margin-top: 10px; }
#view-posicionamiento .ps-col { gap: 10px; }
#view-posicionamiento .bp-tabla td { padding: 5px 9px; }
#view-posicionamiento .bp-tabla th { padding-bottom: 6px; }


/* Membresia --------------------------------------------- */

.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 14px;
}

.pl {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    overflow: hidden;
}
.pl-vip {
    border-color: rgba(252, 213, 53, .34);
    background: linear-gradient(180deg, rgba(252, 213, 53, .055) 0%, transparent 55%), var(--surface-2);
}

/* Banderola de esquina: la dorada marca el plan VIP, la gris marca cual
   de los dos es el que el usuario ya tiene. */
.pl-cinta {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 5px 11px;
    background: var(--accent);
    color: #181A20;
    border-bottom-left-radius: 9px;
}
.pl-cinta.gris { background: var(--surface-3); color: var(--text-dim); }

.pl-nom { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.pl-para {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    margin-top: 3px;
}

.pl-precio { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 4px; }
.pl-precio .n {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -.03em;
}
.pl-precio .c { font-size: 22px; }
.pl-vip .pl-precio .n { color: var(--accent); }
.pl-precio .p { font-size: 12.5px; color: var(--text-dim); }

.pl-lede {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 16px;
    min-height: 38px;
}

.pl-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    margin-bottom: 18px;
}
.pl-lista li {
    position: relative;
    padding-left: 24px;
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.5;
}
.pl-lista li .ic { position: absolute; left: 0; top: 1px; }
.pl-si { color: var(--up); }
.pl-no { color: var(--text-faint); }
.pl-oro { color: var(--accent); }
.pl-lista li.fuerte { color: var(--text); font-weight: 500; }
.pl-lista li.apagado {
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(131, 141, 160, .5);
}

.pl-pie { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.pl-pie .btn-plan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 16px;
    border-radius: 20px;
    border: 0;
    cursor: pointer;
    background: var(--accent);
    color: #181A20;
    transition: filter .16s;
}
.pl-pie .btn-plan:hover { filter: brightness(1.08); }
.pl-pie .btn-plan-wa { background: #25D366; color: #0B0E11; }

/* El plan que ya se tiene no lleva boton: lleva confirmacion. */
.pl-actual {
    text-align: center;
    font-size: 11.5px;
    color: var(--up);
    padding: 11px 16px;
    border: 1px dashed rgba(14, 203, 129, .4);
    border-radius: 20px;
    background: var(--up-soft);
}

.pl-nota {
    font-size: 11.5px;
    color: var(--text-faint);
    line-height: 1.6;
    margin-top: 16px;
    max-width: 640px;
}

@media (max-width: 720px) {
    .pl-grid { grid-template-columns: 1fr; }
    .pl { padding: 18px; }
}


/* Perfil de solo lectura ---------------------------------- */

/* La ficha se fija al registrarse. Se enseña como dato, no como campo:
   una caja con borde invita a escribir en ella y aqui no se puede. */
.dato-fijo {
    font-size: 13.5px;
    color: var(--text);
    padding: 7px 0 8px;
    border-bottom: 1px solid var(--line);
    word-break: break-word;
}

.perfil-aviso {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-3);
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
}
.perfil-aviso .ic { color: var(--text-faint); margin-top: 2px; }

/* Aviso del registro: lo que se escriba ahi queda. */
.reg-aviso {
    font-size: 11.5px;
    color: var(--text-faint);
    line-height: 1.55;
    margin: 4px 0 14px;
}

/* Correo de salida (panel admin) ------------------------- */

.cor-nota {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-3);
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
}
.cor-nota .ic { color: var(--text-faint); margin-top: 2px; }
.cor-nota b { color: var(--text); }
.cor-nota code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--accent);
}

.act-btn.correo:hover:not(:disabled) { color: var(--usdt); }
.act-btn:disabled { opacity: .3; cursor: not-allowed; }