/* ============================================================
   APEX — Trade Tracker
   Extraído de index.html sin cambios de estilo. El ORDEN de
   carga de las hojas (ver <link> en index.html) es significativo:
   las reglas posteriores refinan a las anteriores.
   ============================================================ */

/* ============================================================
   TRADE TRACKER — módulo nuevo. Reutiliza el mismo sistema de
   diseño (variables de color/espaciado/tipografía, .card, .btn,
   inputs, .page-title/.page-sub, .empty-state, animaciones
   revealUp/fadein) para sentirse nativo del resto de APEX.
   ============================================================ */
.tt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-7);}
.tt-head .page-title,.tt-head .page-sub{margin-bottom:0;}
.tt-head .page-sub{margin-top:var(--space-2);}
.tt-new-btn{width:auto;display:inline-flex;align-items:center;gap:7px;padding:11px 20px;margin-top:0;flex-shrink:0;}
/* Free con su operación activa ya ocupada: el botón sigue pulsable —al
   pulsarlo aparece el aviso con el CTA a Pro— pero se atenúa para que
   se note que ahora mismo no va a crear nada. ttUpdateFreeLimitUi() ya
   alternaba esta clase; hasta ahora no tenía ninguna regla detrás. */
.tt-new-btn.is-limited{background:var(--surface3);color:var(--muted);}
.tt-new-btn.is-limited:hover:not(:disabled):not(.is-loading){filter:none;background:var(--surface2);}

.tt-subtabs{display:inline-flex;gap:2px;padding:3px;background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-pill);margin-bottom:var(--space-7);}
.tt-subtab{border:none;background:transparent;padding:8px 18px;border-radius:var(--r-pill);font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:600;color:var(--muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.tt-subtab:hover{color:var(--text);}
.tt-subtab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs);}

/* Lista, no mosaico de tarjetas: cada posición es una fila de un mismo
   ledger (borde y radio compartidos por el contenedor), separada por un
   hairline — no una tarjeta flotante con su propio borde+sombra repetida
   en un grid de auto-fill. Menos "admin dashboard", más terminal. */
.tt-grid{
  display:flex;flex-direction:column;
  border:1px solid var(--border-soft);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);
}
.tt-card-cell + .tt-card-cell .tt-card{border-top:1px solid var(--border-soft);}

.tt-card{background:transparent;border:none;border-radius:0;padding:var(--space-5);box-shadow:none;cursor:pointer;animation:revealUp .4s var(--ease) both;transition:background var(--dur-med) var(--ease-out);}
.tt-card:hover{background:var(--surface2);}
.tt-card:active{opacity:.94;}
.tt-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);}
.tt-card-asset{display:flex;align-items:center;gap:9px;}
.tt-side-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.tt-side-dot.is-compra{background:var(--green);}
.tt-side-dot.is-venta{background:var(--red);}
.tt-card-asset-name{font-family:var(--font-display);font-size:17px;font-weight:650;letter-spacing:-0.01em;}
.tt-card-side{font-size:var(--text-label-size);color:var(--muted2);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}
.tt-status-pill{font-size:var(--text-label-size);padding:4px 10px;border-radius:var(--r-pill);font-weight:650;text-transform:uppercase;letter-spacing:.02em;flex-shrink:0;white-space:nowrap;}
.tt-status-pill.st-activa{background:var(--blue-soft);color:var(--blue);}
.tt-status-pill.st-ganada{background:var(--green-soft);color:var(--green);}
.tt-status-pill.st-perdida{background:var(--red-soft);color:var(--red);}
.tt-status-pill.st-cerrada_manual{background:var(--surface3);color:var(--muted);}
.tt-status-pill.st-pendiente{background:var(--amber-soft);color:var(--amber);}
/* Transición "🟡 Esperando → ⚡ Entrada activada → 🟢 Activa": un pulso
   breve y sutil sobre el mismo pill ámbar, antes de asentarse en
   st-activa unos instantes después (ver ttMarkJustActivated en ui.js). */
.tt-status-pill.st-activating{background:var(--amber-soft);color:var(--amber);animation:ttActivatePulse 1.1s var(--ease-out);}
@keyframes ttActivatePulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 var(--amber-soft);}
  35%{transform:scale(1.1);box-shadow:0 0 0 5px var(--amber-soft);}
  100%{transform:scale(1);box-shadow:0 0 0 0 transparent;}
}

.tt-card-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin:var(--space-4) 0;}
@media(max-width:480px){.tt-card-levels{grid-template-columns:repeat(2,1fr);}}

/* P&L / rendimiento en vivo: primera cifra de la tarjeta, justo
   debajo del encabezado — antes que Entrada/Stop/Target. */
.tt-card-pnl-row{font-family:var(--font-display);font-size:21px;font-weight:750;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;margin-top:var(--space-3);}
.tt-card-pnl-row.is-pos{color:var(--green);}
.tt-card-pnl-row.is-neg{color:var(--red);}
.tt-card-pnl-row.is-muted{font-size:13px;font-weight:600;color:var(--muted2);}
.tt-lv{background:var(--surface2);border-radius:var(--r-sm);padding:9px 10px;}
.tt-lv .l{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.tt-lv .v{font-family:var(--font-display);font-size:13.5px;font-weight:700;letter-spacing:-0.01em;margin-top:3px;color:var(--text);font-variant-numeric:tabular-nums;}
.tt-lv.is-sl .v{color:var(--red);}
.tt-lv.is-tp .v{color:var(--green);}

.tt-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;padding-top:var(--space-4);border-top:1px solid var(--border-soft);}
.tt-card-capital{font-size:var(--text-body-sm-size);color:var(--muted);}
.tt-card-capital b{color:var(--text);font-weight:700;font-family:var(--font-display);font-variant-numeric:tabular-nums;}
.tt-card-moves{display:flex;align-items:center;gap:5px;font-size:var(--text-label-size);color:var(--muted2);}

.tt-card-cell{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.tt-card-cell .tt-card{width:100%;}

/* Detalle de una operación */
.tt-detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6);}
.tt-detail-actions{display:flex;gap:10px;flex-wrap:wrap;}
.tt-detail-actions .btn,.tt-detail-actions .btn.secondary{width:auto;margin-top:0;}
.tt-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
@media(max-width:720px){.tt-summary-grid{grid-template-columns:repeat(2,1fr);}}
.tt-summary-grid .stat-box .sv{font-family:var(--font-display);font-size:19px;font-variant-numeric:tabular-nums;}

.tt-notes-box{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--surface2);border-radius:var(--r-md);font-size:var(--text-body-sm-size);color:var(--muted);line-height:1.55;white-space:pre-wrap;}

/* ---- Grupos del detalle de operación (PRECIO / RESULTADO / RIESGO /
   OBJETIVOS): mismo lenguaje visual que .tt-summary-grid, solo que
   ahora cada bloque tiene su propia etiqueta para que el orden de
   lectura sea claro: Entrada → Precio actual → Ganancia/Pérdida →
   Riesgo → SL/TP. ---- */
.tt-group{margin-top:var(--space-7);}
.tt-group-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);}
.tt-group-label{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
.tt-group-head .btn.secondary{width:auto;margin-top:0;padding:6px 13px;font-size:12px;}
.tt-group-note{font-size:11.5px;color:var(--muted2);margin-top:6px;}
.stat-box .sv2{font-size:11px;color:var(--muted2);font-family:var(--font-display);margin-top:3px;font-weight:650;font-variant-numeric:tabular-nums;}
.tt-summary-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.tt-summary-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:520px){.tt-summary-grid.cols-3{grid-template-columns:1fr;}}

/* Riesgo vs beneficio: grupo propio y visible (no una nota chica
   dentro de otra tarjeta), con acento de color sutil para reforzar
   de un vistazo cuál cifra es riesgo y cuál es beneficio. */
.stat-box.tone-risk{border-color:var(--red-soft-border);background:var(--red-soft);}
.stat-box.tone-reward{border-color:var(--green-soft-border);background:var(--green-soft);}

/* Resultado (P&L / R actual): la métrica más importante de la
   operación, con más protagonismo visual que el resto de stats. */
.tt-result-hero{background:var(--surface2);border:1.5px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-7) var(--space-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);text-align:center;box-shadow:var(--shadow-sm);}
.tt-result-hero.is-pos{background:var(--green-soft);border-color:var(--green-soft-border);}
.tt-result-hero.is-neg{background:var(--red-soft);border-color:var(--red-soft-border);}
.tt-result-item .rv{font-family:var(--font-display);font-size:38px;font-weight:750;letter-spacing:-0.02em;line-height:1.1;}
.tt-result-item .rl{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;font-weight:650;margin-top:7px;}
.tt-result-item .rv.is-pos{color:var(--green);}
.tt-result-item .rv.is-neg{color:var(--red);}
.tt-result-empty{padding:var(--space-3) 0;text-align:center;color:var(--muted);font-size:var(--text-body-sm-size);}
@media(max-width:520px){.tt-result-hero{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-6) var(--space-5);}.tt-result-item .rv{font-size:28px;}}

/* Chip de P&L en vivo dentro del encabezado — permite leer el
   resultado de la operación sin bajar la vista, junto al estado. */
.tt-hero-pnl-chip{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:13px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);margin-left:8px;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;}
.tt-hero-pnl-chip.is-pos{background:var(--green-soft);color:var(--green);}
.tt-hero-pnl-chip.is-neg{background:var(--red-soft);color:var(--red);}

/* Escalera vertical Stop Loss → Precio → Take Profit: representación
   literal y vertical de la operación (no un gráfico financiero).
   Los tres niveles se ordenan siempre por precio real (el más alto
   arriba), por lo que la escalera se adapta sola a compra o venta
   sin lógica condicional aparte. Cada nivel SL/TP muestra su
   distancia en $ / % y su múltiplo de R; la fila central es el
   precio de referencia (en vivo si existe, si no la entrada). */
.tt-ladder{display:flex;flex-direction:column;margin:var(--space-5) 0 var(--space-2);}
.tt-ladder-connector-line{width:2px;height:16px;background:var(--border);margin:2px auto;border-radius:1px;}
.tt-ladder-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--r-md);border:1.5px solid var(--border-soft);background:var(--surface2);}
.tt-ladder-row.tone-tp{background:var(--green-soft);border-color:var(--green-soft-border);}
.tt-ladder-row.tone-sl{background:var(--red-soft);border-color:var(--red-soft-border);}
.tt-ladder-row.tone-current{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm);padding:var(--space-5);}
.tt-ladder-row-main{display:flex;align-items:center;gap:12px;min-width:0;}
.tt-ladder-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted2);}
.tt-ladder-row.tone-tp .tt-ladder-dot{background:var(--green);}
.tt-ladder-row.tone-sl .tt-ladder-dot{background:var(--red);}
.tt-ladder-label{font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted);}
.tt-ladder-row.tone-tp .tt-ladder-label{color:var(--green);}
.tt-ladder-row.tone-sl .tt-ladder-label{color:var(--red);}
.tt-ladder-row.tone-current .tt-ladder-label{color:var(--muted2);}
.tt-ladder-price{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-0.01em;color:var(--text);margin-top:1px;}
.tt-ladder-row.tone-current .tt-ladder-price{font-size:27px;}
.tt-ladder-row.tone-tp .tt-ladder-price{color:var(--green);}
.tt-ladder-row.tone-sl .tt-ladder-price{color:var(--red);}
.tt-ladder-side{text-align:right;flex-shrink:0;}
.tt-ladder-dist{font-family:var(--font-display);font-size:12.5px;font-weight:650;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
.tt-ladder-row.tone-tp .tt-ladder-dist{color:var(--green);}
.tt-ladder-row.tone-sl .tt-ladder-dist{color:var(--red);}
.tt-ladder-r{font-family:var(--font-display);font-size:11.5px;font-weight:700;color:var(--muted2);margin-top:3px;font-variant-numeric:tabular-nums;}
.tt-ladder-row.tone-tp .tt-ladder-r{color:var(--green);}
.tt-ladder-row.tone-sl .tt-ladder-r{color:var(--red);}
.tt-ladder-current-tag{font-size:11px;color:var(--muted2);font-weight:600;}
@media(max-width:480px){.tt-ladder-row{padding:var(--space-3) var(--space-4);gap:var(--space-2);}.tt-ladder-price{font-size:17px;}.tt-ladder-row.tone-current .tt-ladder-price{font-size:22px;}.tt-ladder-dist{font-size:11px;}}

/* Situación actual: lectura rápida en una línea, basada en datos
   reales de la operación (sin inventar información). */
.tt-situation{display:flex;align-items:flex-start;gap:13px;padding:var(--space-5) var(--space-6);border-radius:var(--r-md);border:1.5px solid var(--border-soft);background:var(--surface2);margin-top:var(--space-5);}
.tt-situation.tone-good{background:var(--green-soft);border-color:var(--green-soft-border);}
.tt-situation.tone-warn{background:var(--amber-soft);border-color:var(--amber-soft-border);}
.tt-situation.tone-bad{background:var(--red-soft);border-color:var(--red-soft-border);}
.tt-situation-emoji{font-size:22px;line-height:1.3;flex-shrink:0;}
.tt-situation-text b{display:block;font-size:15px;font-weight:650;color:var(--text);margin-bottom:3px;}
.tt-situation-text span{font-size:var(--text-body-sm-size);color:var(--muted);line-height:1.55;}

/* Selector de activo con búsqueda (modal "Nueva operación"):
   reutiliza el input base y agrega un listado desplegable filtrable
   poblado con los símbolos de la misma API de precio (Binance). */
.tt-asset-combo{position:relative;}
.tt-asset-dropdown{position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-md);z-index:5;transform-origin:top center;opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.tt-asset-dropdown.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.tt-asset-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;cursor:pointer;font-size:var(--text-body-sm-size);}
.tt-asset-opt:hover,.tt-asset-opt.is-active{background:var(--surface2);}
.tt-asset-opt .sym{font-family:var(--font-mono);font-weight:650;color:var(--text);}
.tt-asset-opt .qt{font-size:11.5px;color:var(--muted2);}
.tt-asset-empty{padding:10px 12px;font-size:var(--text-body-sm-size);color:var(--muted2);}
.tt-asset-flag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;background:var(--surface3, var(--surface2));color:var(--muted2);font-size:10px;font-weight:650;letter-spacing:.01em;white-space:nowrap;}
.tt-asset-opt.is-flagged .sym{color:var(--muted2);}

/* Timeline */
.tt-timeline-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);}
.tt-timeline-head .btn.secondary{padding:7px var(--space-3);font-size:12.5px;}
.tt-live-line{font-family:var(--font-display);font-size:18px;font-weight:650;letter-spacing:-0.01em;margin-top:var(--space-4);}
.tt-live-line.is-pos{color:var(--green);}
.tt-live-line.is-neg{color:var(--red);}
.tt-live-updated{font-size:12px;color:var(--muted2);margin-top:6px;}
.tt-timeline{position:relative;padding-left:26px;}
.tt-timeline::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border);}
.tt-tl-item{position:relative;padding-bottom:var(--space-6);animation:fadein .35s var(--ease-out) both;}
.tt-tl-item:last-child{padding-bottom:0;}
.tt-tl-dot{position:absolute;left:-26px;top:2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--border);color:var(--muted);}
.tt-tl-dot svg{width:10px;height:10px;}
.tt-tl-item.tone-good .tt-tl-dot{border-color:var(--green);color:var(--green);background:var(--green-soft);}
.tt-tl-item.tone-bad .tt-tl-dot{border-color:var(--red);color:var(--red);background:var(--red-soft);}
.tt-tl-item.tone-warn .tt-tl-dot{border-color:var(--amber);color:var(--amber);background:var(--amber-soft);}
.tt-tl-item.tone-info .tt-tl-dot{border-color:var(--violet);color:var(--violet);background:var(--violet-soft);}
.tt-tl-item.tone-final .tt-tl-dot{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);}
.tt-tl-label{font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);}
.tt-tl-time{font-size:11.5px;color:var(--muted2);margin-top:1px;font-family:var(--font-mono);}
.tt-tl-note{font-size:var(--text-caption-size);color:var(--muted);margin-top:5px;line-height:1.5;}
.tt-add-move-btn{width:auto;margin-top:var(--space-5);}

/* Panel "🟡 Esperando entrada" (detalle de una operación PENDING):
   sustituye al bloque Resultado — mientras no se active no hay P&L
   que mostrar, así que en su lugar se ve precio actual, entrada
   programada, distancia, SL y TP. */
.tt-pending-panel{margin-top:var(--space-7);padding:var(--space-6);border-radius:var(--r-lg);border:1.5px solid var(--amber-soft-border);background:var(--amber-soft);}
.tt-pending-head{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-5);}
.tt-pending-emoji{font-size:19px;line-height:1;}
.tt-pending-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--amber);letter-spacing:-0.01em;}
.tt-pending-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
@media(max-width:520px){.tt-pending-grid{grid-template-columns:1fr;}}
.tt-pending-row .l{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.05em;font-weight:650;}
.tt-pending-row .v{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);margin-top:3px;font-variant-numeric:tabular-nums;}
.tt-pending-note{margin:var(--space-5) 0 0;font-size:var(--text-body-sm-size);color:var(--muted);line-height:1.55;}

/* Toggle Abrir ahora / Esperar precio (modal "Nueva operación") */
.tt-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--space-2);margin-bottom:var(--space-2);}
.tt-mode-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:650;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);}
.tt-mode-btn:hover{border-color:var(--muted2);}
.tt-mode-btn.active{background:var(--amber-soft);border-color:var(--amber-soft-border);color:var(--amber);}
.tt-mode-hint{font-size:12px;color:var(--muted2);margin:0 0 var(--space-5);line-height:1.5;}

/* Referencia de precio actual junto al campo "Precio de entrada
   programado" en modalidad "Esperar precio": el campo se queda vacío
   a propósito (ver ttOnAssetBlurAutoPrice en tracker/ui.js — esa
   modalidad es para planificar una entrada DISTINTA al precio
   actual), pero el usuario necesita saber cuál es ese precio actual
   para decidir su nivel. Solo informativo, nunca escribe el campo. */
.tt-entry-live-hint{font-size:11.5px;color:var(--muted2);margin-top:6px;}

.tt-cancel-copy{font-size:var(--text-body-sm-size);color:var(--muted);line-height:1.55;margin-bottom:var(--space-5);}

/* Toggle Compra/Venta y toggle de resultado (dentro de modales) */
.tt-side-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--space-2);}
.tt-side-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:650;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);}
.tt-side-btn:hover{border-color:var(--muted2);}
.tt-side-btn.is-buy.active{background:var(--green-soft);border-color:var(--green-soft-border);color:var(--green);}
.tt-side-btn.is-sell.active{background:var(--red-soft);border-color:var(--red-soft-border);color:var(--red);}

.tt-result-toggle{display:flex;flex-direction:column;gap:8px;margin:var(--space-2) 0 var(--space-2);}
.tt-result-btn{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:600;cursor:pointer;text-align:left;transition:all var(--dur-fast) var(--ease-out);}
.tt-result-btn:hover{border-color:var(--muted2);}
.tt-result-btn.is-win.active{background:var(--green-soft);border-color:var(--green-soft-border);color:var(--green);}
.tt-result-btn.is-loss.active{background:var(--red-soft);border-color:var(--red-soft-border);color:var(--red);}
.tt-result-btn.is-manual.active{background:var(--surface3);border-color:var(--border);color:var(--text);}

/* Botón destructivo (cancelar una operación PENDING). No existía
   ningún modificador ".danger" en el sistema de botones: se define
   aquí, con el mismo tratamiento hover/active/loading que .btn, solo
   cambiando el color base. */
.tt-detail-actions .btn.danger,.tt-modal-body .btn.danger{background:var(--red);color:#fff;border:none;}

/* Grid de tipos de movimiento (modal "Registrar movimiento") */
.tt-move-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:var(--space-2) 0 var(--space-5);}
@media(max-width:520px){.tt-move-grid{grid-template-columns:1fr;}}
.tt-move-opt{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);text-align:left;}
.tt-move-opt:hover{border-color:var(--muted2);}
.tt-move-opt.active{background:var(--blue-soft);border-color:var(--blue-soft-border);color:var(--blue);}
.tt-move-opt svg{flex-shrink:0;opacity:.8;}

/* Modales — overlay + panel centrado, mismo lenguaje visual que
   .card/.premium-overlay (radios, sombras, tipografía) pero con su
   propia animación de entrada.
   z-index 2600/2601: por encima de .bottom-nav (1500, progress.css) y
   del drawer móvil abierto (2000, progress.css) — con 60/61 el nav
   inferior y el drawer se pintaban ENCIMA del modal en móvil: se veía
   sin oscurecer y sus botones seguían recibiendo el toque a través del
   backdrop. Por debajo de .coach-overlay (9999, app.css), que debe
   ganar siempre. */
.tt-modal-backdrop{position:fixed;inset:0;background:rgba(20,12,6,.42);backdrop-filter:blur(2px);z-index:2600;opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease-out);}
.tt-modal-backdrop.is-open{opacity:1;pointer-events:auto;}
.tt-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);width:min(480px,calc(100vw - 32px));max-height:min(88vh,720px);overflow-y:auto;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:2601;opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);}
.tt-modal.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.tt-modal-sm{width:min(420px,calc(100vw - 32px));}
.tt-modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:var(--surface);z-index:1;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.tt-modal-head h2{margin:0;font-family:var(--font-display);font-size:18px;font-weight:650;letter-spacing:-0.01em;}
.tt-modal-close{width:30px;height:30px;border-radius:50%;border:none;background:var(--surface2);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.tt-modal-close:hover{background:var(--surface3);color:var(--text);}
.tt-modal-body{padding:var(--space-6);}
.tt-modal-body textarea,.tt-modal-body input{margin-top:0;}
.tt-modal-submit{margin-top:var(--space-6);}
.tt-modal-error{margin-top:var(--space-5);padding:10px 13px;border-radius:var(--r-sm);background:var(--red-soft);border:1px solid var(--red-soft-border);color:var(--red);font-size:var(--text-body-sm-size);}

/* ============================================================
   STATES GUIDE — Guía visual: Pendiente → Activa → Finalizada
   ============================================================ */
.tt-states-guide{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  animation: slideDown 300ms var(--ease-out);
}
@keyframes slideDown{
  from{ opacity: 0; transform: translateY(-10px); }
  to{ opacity: 1; transform: translateY(0); }
}
.tt-guide-dismiss{
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--surface2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tt-guide-dismiss:hover{ background: var(--surface3); color: var(--text); }
.tt-guide-dismiss:focus-visible{ outline: none; box-shadow: var(--shadow-focus); }
.tt-states-guide h4{
  font-family: var(--font-display);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  margin: 0 0 var(--space-5);
  color: var(--text);
}
.tt-states-flow{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tt-state-step{
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
}
.tt-state-step.tt-pending{ border-color: var(--amber-soft-border); background: var(--amber-soft); }
.tt-state-step.tt-active{ border-color: var(--green-soft-border); background: var(--green-soft); }
.tt-state-step.tt-closed{ border-color: var(--blue-soft-border); background: var(--blue-soft); }
.tt-state-icon{
  font-size: 28px;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.tt-state-info strong{
  display: block;
  font-size: var(--text-body-size);
  font-weight: 650;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.tt-state-info span{
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
  color: var(--muted);
}
.tt-state-arrow{
  font-size: 20px;
  color: var(--muted2);
  flex-shrink: 0;
  align-self: center;
  margin: 0 var(--space-2);
}
@media (max-width: 640px){
  .tt-states-flow{ flex-direction: column; align-items: stretch; }
  .tt-state-arrow{ transform: rotate(90deg); text-align: center; margin: var(--space-2) 0; }
}
@media (prefers-reduced-motion: reduce){
  .tt-states-guide{ animation: none; }
}


/* ============================================================
   §11 — EL MOMENTO DE APRENDIZAJE

   Aparece DESPUÉS de cerrar una operación, y solo cuando el motor
   produjo un diagnóstico de proceso. Nunca es una alarma: el filo dice
   de QUIÉN fue (trader / mercado / lectura) y esa distinción es todo
   el contenido de la tarjeta.

   Ni un color nuevo: el verde, el rojo y el ámbar de siempre.
   ============================================================ */
.tt-lm{margin-top:var(--space-6);border-left:3px solid var(--muted2);}
/* Un fallo de PROCESO es lo único que el trader controla: ámbar, que es
   atención, no error. */
.tt-lm-trader{border-left-color:var(--amber, var(--muted2));}
/* El MERCADO no es culpa de nadie: neutro a propósito. Pintarlo rojo
   convertiría "perdiste con proceso limpio" en un reproche. */
.tt-lm-mercado{border-left-color:var(--muted2);}
/* La LECTURA: la objeción ya estaba escrita. Ni fallo ni varianza. */
.tt-lm-lectura{border-left-color:var(--border);}
.tt-lm-head{font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:6px;}
.tt-lm-diag{margin:0 0 6px;font-size:var(--text-body-size);font-weight:600;color:var(--text);}
.tt-lm-atr{margin:0 0 var(--space-3);font-size:var(--text-body-sm-size);line-height:1.5;color:var(--muted2);}
.tt-lm-list{margin:0 0 var(--space-3);padding-left:18px;font-size:var(--text-body-sm-size);color:var(--text);}
.tt-lm-list li{margin-bottom:4px;}
.tt-lm-ok li{color:var(--green, var(--text));}
.tt-lm-ev{font-family:var(--font-mono);font-size:var(--text-label-size);color:var(--muted2);}