/* =====================================================================
   Smart Money Tracker

   Móvil primero, con expansión a escritorio. Dos principios rigen todo
   el fichero:

   1. Ninguna información depende de `hover`. En un móvil ese evento no
      existe, así que un dato que sólo aparece al pasar el ratón es un
      dato perdido para la mitad de los usos. Los efectos de hover van
      dentro de `@media (hover: hover)` y son sólo decorativos.

   2. Los objetivos táctiles crecen con `pointer: coarse`. Un enlace de
      12 px se pulsa bien con ratón y mal con el pulgar.
   ===================================================================== */

:root{
  --bg:#0b0f14; --panel:#121821; --line:#1e2733; --txt:#e6edf3; --mut:#8b98a8;
  --acc:#3ddc97; --warn:#ffb454; --bad:#ff6b6b; --blue:#5aa9e6;
  --radius:14px; --wrap:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-wrap:break-word;
}

a{color:var(--acc);text-decoration:none}

/* Foco visible: sin esto, navegar con teclado en escritorio es a ciegas */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:16px}

/* --------------------------------------------------------- Navegación */
/* Trece secciones no caben en una fila de móvil. Se desplaza en
   horizontal —patrón nativo— y se despliega entera en escritorio. */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
  background:rgba(11,15,20,.94);backdrop-filter:blur(10px);
}
.brand{font-weight:700;letter-spacing:.14em;font-size:13px;flex:0 0 auto}
.topbar nav{
  display:flex;gap:4px;font-size:13px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-left:auto;padding:2px 0;
  mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{flex:0 0 auto;padding:7px 11px;border-radius:8px;
  color:var(--mut);white-space:nowrap}
.topbar nav a.current{background:var(--panel);color:var(--txt);font-weight:600}

.centered{display:flex;min-height:100dvh;align-items:center;justify-content:center;padding:20px}

/* --------------------------------------------------------- Tarjetas */
.card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;margin-bottom:16px}
.card.auth{width:100%;max-width:380px}
.card.compact{padding:11px 14px;margin-bottom:12px}

h2{font-size:18px;margin:18px 0 10px}
h3{font-size:15px;margin:0 0 8px}
h4{font-size:13px;margin:14px 0 4px;font-weight:600}

/* --------------------------------------------------------- Formularios */
label{display:block;margin:14px 0;font-size:13px;color:var(--mut)}
input[type=text],input[type=email],input[type=password],input[type=number],select{
  width:100%;margin-top:6px;padding:13px;border-radius:10px;
  border:1px solid var(--line);background:#0e141c;color:var(--txt);
  font-size:16px;  /* 16px evita el zoom automático de iOS al enfocar */
}
select{appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),
                   linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.code-input{letter-spacing:.5em;text-align:center;font-size:22px}

button,.button{display:inline-block;padding:13px 18px;border:0;border-radius:10px;
  background:#1c2735;color:var(--txt);font-size:15px;cursor:pointer;font-family:inherit}
.primary{background:var(--acc);color:#04120c;font-weight:600}
.danger{background:#2a1a1e;color:var(--bad)}
button:disabled{opacity:.55;cursor:not-allowed}

.switch{display:flex;align-items:center;gap:9px;color:var(--txt);font-size:14px}
.switch input{width:auto;margin:0}
.switch.small{font-size:12px}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.inline input,.inline select{flex:1;min-width:170px;margin:0}

/* --------------------------------------------------------- Utilidades */
.muted{color:var(--mut)} .small{font-size:13px}
.good{color:var(--acc)} .warn{color:var(--warn)} .bad-txt{color:var(--bad)}
.hidden{display:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--mut);overflow-wrap:anywhere}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{font-size:11px;text-transform:uppercase;border:1px solid var(--line);
  padding:2px 7px;border-radius:20px;color:var(--mut);white-space:nowrap}
.badge.good{color:var(--acc);border-color:var(--acc)}
.badge.warn{color:var(--warn);border-color:var(--warn)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--bad)}
.dot.on{background:var(--acc)}
.notice{background:#101a24;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:10px;padding:11px;font-size:14px}
.notice.danger-box{border-left-color:var(--bad)}

/* --------------------------------------------------------- Métricas */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px;text-align:center}
.stat span{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat small{color:var(--mut);font-size:11px}
.pnl-row .stat span{font-size:18px}
.two-col{display:grid;grid-template-columns:1fr;gap:0 12px}
.gauge-row{display:grid;grid-template-columns:1fr;gap:16px;margin:12px 0}
.gauge-row .row{justify-content:space-between;margin-bottom:5px}

/* --------------------------------------------------------- Tablas */
/* El envoltorio lo pone el JS: una tabla de seis columnas no cabe en
   360 px y sin scroll horizontal se corta sin avisar. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.grid{width:100%;border-collapse:collapse;font-size:14px}
.grid th,.grid td{padding:9px;border-bottom:1px solid var(--line);
  text-align:left;white-space:nowrap}
.grid td.wrap-cell{white-space:normal}
.grid.tight td{padding:5px 8px}

/* --------------------------------------------------------- Listas */
.feed,.channels,.codes,.plain,.levels,.timeline{list-style:none;padding:0;margin:0}
.signal,.channel{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px}
.signal.win{border-left-color:var(--acc)} .signal.loss{border-left-color:var(--bad)}
.channel.linked{border-left-color:var(--acc)} .channel.error{border-left-color:var(--bad)}
.signal-link{color:inherit;display:block}
.plain li{padding:4px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;gap:8px}
.codes li{background:#0e141c;padding:9px;border-radius:8px;margin-bottom:6px;
  text-align:center;letter-spacing:.12em}
.steps{padding-left:18px;list-style:decimal;font-size:14px;color:var(--mut)}

/* --------------------------------------------------------- Pestañas */
.range-tabs{display:flex;gap:5px;overflow-x:auto;margin:12px 0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.range-tabs::-webkit-scrollbar{display:none}
.range-tabs .tab{flex:0 0 auto;padding:8px 14px;border-radius:20px;
  border:1px solid var(--line);font-size:13px;color:var(--mut);white-space:nowrap}
.range-tabs .tab.active{background:var(--acc);color:#04120c;
  border-color:var(--acc);font-weight:600}

/* --------------------------------------------------------- Gráficos */
.chart{margin:10px -4px;overflow:hidden}
.chart svg{display:block;width:100%;height:auto}
.chart-legend{gap:12px;flex-wrap:wrap;margin-top:2px}
.lg{display:inline-block;width:14px;height:2px;vertical-align:middle;margin-right:4px}
.lg-grey{background:var(--mut)} .lg-acc{background:var(--acc);height:3px}
.lg-warn{background:transparent;border-top:2px dashed var(--warn)}
.lg-bad{background:var(--bad)}
.lg-dashed{background:transparent;border-top:2px dashed var(--blue)}

/* Sustituto táctil del tooltip: al pulsar un elemento del gráfico su
   texto aparece aquí. En escritorio sigue funcionando el <title>
   nativo, pero ya no es la única vía de acceso al dato. */
.chart-caption{font-size:12px;color:var(--txt);background:#0e141c;border-radius:8px;
  padding:7px 10px;margin-top:4px;border-left:3px solid var(--acc);display:none}
.chart-caption.show{display:block}

.movement{font-size:13px;padding:8px 11px;border-radius:8px;margin-top:8px;background:#0e141c}
.mv-subida_fuerte,.mv-subida{color:var(--acc);border-left:3px solid var(--acc)}
.mv-pico_y_caida{color:var(--warn);border-left:3px solid var(--warn)}
.mv-desplome,.mv-bajada{color:var(--bad);border-left:3px solid var(--bad)}
.mv-lateral{color:var(--mut);border-left:3px solid var(--line)}

/* --------------------------------------------------------- Actividad */
.activity .event{border-left:3px solid var(--line);padding:10px 12px;margin-bottom:6px;
  background:var(--panel);border-radius:10px}
.activity .event.ok{border-left-color:var(--acc)}
.activity .event.bad{border-left-color:var(--bad)}
.activity .event.pending{border-left-color:var(--blue)}
.activity .event.muted-row{opacity:.72}
.ev-icon{flex:0 0 auto}
.ev-title{flex:1;font-size:14px;min-width:0}
.ev-time{flex:0 0 auto;font-variant-numeric:tabular-nums}
.ev-reason{padding-left:24px;font-style:italic}
.ev-meta{padding-left:24px;gap:8px}
.ev-meta a{font-size:12px}
.summary-row{gap:6px;flex-wrap:wrap}
.chip{font-size:11px;padding:3px 8px;border-radius:20px;border:1px solid var(--line);color:var(--mut)}
.chip-accepted{color:var(--acc);border-color:var(--acc)}
.chip-pending{color:var(--blue);border-color:var(--blue)}

/* --------------------------------------------------------- Cronología */
.timeline{position:relative;margin-top:8px}
.timeline:before{content:'';position:absolute;left:9px;top:6px;bottom:6px;
  width:1px;background:var(--line)}
.tl-item{position:relative;padding:8px 0 8px 30px}
.tl-icon{position:absolute;left:0;width:20px;text-align:center;font-size:13px;
  background:var(--panel);z-index:1}
.tl-label{flex:1;font-size:13px;min-width:0}
.tl-time{flex:0 0 auto;font-variant-numeric:tabular-nums}
.tl-meta{gap:10px;margin-top:2px}
.tl-detail{font-style:italic;margin-top:2px}
.tl-upside{margin-top:4px;padding:4px 8px;background:#0e141c;border-radius:6px;display:inline-flex}
.tl-item.tl-bad .tl-label{color:var(--bad)}
.tl-item.tl-neutral .tl-label{color:var(--mut)}
.pnl-tag{font-weight:700;font-variant-numeric:tabular-nums;
  padding:1px 6px;border-radius:10px;background:#0e141c;font-size:12px}

/* --------------------------------------------------------- Operaciones */
.trade{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:12px;padding:11px 13px;margin-bottom:7px}
.trade.open,.trade.opening{border-left-color:var(--acc)}
.trade.closed{border-left-color:var(--mut)}
.trade.failed{border-left-color:var(--bad)}
.trade-pnl{margin-left:auto;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
li.verdict-coste_grave{border-left-color:var(--bad)}
li.verdict-coste_alto{border-left-color:var(--warn)}
li.verdict-correcto{border-left-color:var(--acc);opacity:.82}

/* --------------------------------------------------------- Posiciones */
.position-state{border-left:3px solid var(--acc)}
.position-state.closed{border-left-color:var(--mut);opacity:.92}
.position-state.failed{border-left-color:var(--bad)}
.level{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 9px;margin-bottom:4px;border-radius:7px;background:#0e141c;
  border-left:3px solid var(--line);font-size:13px}
.level .lv-label{flex:1;min-width:0}
.lv-tp_done{border-left-color:var(--acc)}
.lv-tp_pending{border-left-color:var(--blue);opacity:.75}
.lv-stop{border-left-color:var(--bad)}
.lv-stop_safe{border-left-color:var(--acc)}
.lv-entry{border-left-color:var(--mut);opacity:.7}

/* --------------------------------------------------------- Cadenas */
.chain-card{border-left:3px solid var(--line)}
.chain-card.mode-paper{border-left-color:var(--blue)}
.chain-card.mode-testnet{border-left-color:var(--warn)}
.chain-card.mode-live{border-left-color:var(--bad)}
.chain-card.mode-disabled{opacity:.62}
.badge.mode-live{color:var(--bad);border-color:var(--bad)}
.badge.mode-paper{color:var(--blue)}
.badge.mode-testnet{color:var(--warn)}
.mode-select{width:auto;flex:1;min-width:150px;margin:0}
.filter-verdict{border-left:3px solid var(--line);padding:9px 12px;margin:8px 0;
  background:#0e141c;border-radius:8px}
.filter-verdict.ok{border-left-color:var(--acc)}
.filter-verdict.warn{border-left-color:var(--warn)}
.filter-verdict.bad{border-left-color:var(--bad)}
.filter-verdict .row{justify-content:space-between}
.strategy.active{border-left:3px solid var(--acc)}
.step-row{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.bt-events{list-style:none;padding:0;margin:8px 0 0;font-size:12px;color:var(--mut)}
.bt-events li{padding:3px 0;border-bottom:1px solid var(--line)}
.qr{display:flex;justify-content:center;background:#fff;border-radius:12px;padding:12px;margin:14px 0}
.secret{word-break:break-all;background:#0e141c;padding:4px 6px;border-radius:6px}
.verdict-coste_grave{border-left:3px solid var(--bad)}
.verdict-coste_alto{border-left:3px solid var(--warn)}
.verdict-correcto{border-left:3px solid var(--acc)}

/* =====================================================================
   Adaptación por tamaño de pantalla
   ===================================================================== */

@media (min-width:560px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .two-col{grid-template-columns:1fr 1fr}
  .gauge-row{grid-template-columns:1fr 1fr}
  .wrap{padding:20px}
}

/* Escritorio: se aprovecha el ancho en lugar de dejar una columna estrecha */
@media (min-width:1000px){
  :root{--wrap:1080px}
  .topbar{padding-left:24px;padding-right:24px}
  .topbar nav{gap:2px;mask-image:none;overflow:visible}
  h2{font-size:20px}
  .chart svg{max-height:360px}
  /* Tarjetas pequeñas en dos columnas donde el marcado lo permite */
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
  .cols .full{grid-column:1 / -1}
  .feed:not(.single-col){display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
}

@media (min-width:1400px){
  :root{--wrap:1240px}
}

/* =====================================================================
   Capacidades del dispositivo, no tamaño de pantalla
   ===================================================================== */

/* Hover SÓLO donde existe. En táctil, `:hover` se queda pegado tras un
   toque y deja elementos con aspecto de estar activos. */
@media (hover:hover) and (pointer:fine){
  .topbar nav a:hover{background:var(--panel);color:var(--txt)}
  .signal-link:hover{opacity:.85}
  button:hover,.button:hover{filter:brightness(1.12)}
  .grid tbody tr:hover{background:rgba(255,255,255,.025)}
  .trade:hover,.activity .event:hover{border-color:#2a3646}
}

/* Dedos en lugar de puntero: objetivos más grandes */
@media (pointer:coarse){
  .topbar nav a{padding:9px 13px}
  button,.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .range-tabs .tab{min-height:38px;display:flex;align-items:center}
  .level{min-height:40px}
  .ev-meta a,.plain li a{padding:3px 0;display:inline-block}
}

/* Respeto por quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

@keyframes flashin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.signal.new{animation:flashin .35s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.activity .event.new{animation:slidein .3s ease}

/* Impresión: por si se exporta una ficha */
@media print{
  .topbar,.range-tabs,button,.button,.chart-caption{display:none}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc;break-inside:avoid;background:#fff}
}

/* =====================================================================
   Avisos de tareas en segundo plano
   ===================================================================== */
.toasts{
  position:fixed;z-index:60;display:flex;flex-direction:column;gap:8px;
  /* Móvil: abajo, ancho completo, por encima del área segura */
  left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--blue);border-radius:12px;
  padding:11px 13px;box-shadow:0 8px 28px rgba(0,0,0,.45);
  animation:toast-in .22s ease;
}
.toast.ok{border-left-color:var(--acc)}
.toast.bad{border-left-color:var(--bad)}
.toast.out{opacity:0;transform:translateY(8px);transition:.2s}

.toast-head{display:flex;align-items:center;gap:9px}
.toast-icon{flex:0 0 auto;width:18px;text-align:center;font-weight:700}
.toast.ok .toast-icon{color:var(--acc)}
.toast.bad .toast-icon{color:var(--bad)}
.toast-title{flex:1;font-size:14px;font-weight:600;min-width:0}
.toast-x{flex:0 0 auto;background:none;border:0;color:var(--mut);
  font-size:19px;line-height:1;padding:0 4px;min-height:auto;cursor:pointer}
.toast-msg{font-size:12.5px;color:var(--mut);margin-top:4px;padding-left:27px}
.toast-bar{height:3px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}
.toast-bar i{display:block;height:100%;background:var(--blue);
  border-radius:2px;transition:width .4s ease}

.spin{display:inline-block;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--blue);
  animation:spin .7s linear infinite;vertical-align:middle}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Escritorio: esquina inferior derecha, ancho acotado */
@media (min-width:700px){
  .toasts{left:auto;right:20px;bottom:20px;width:360px}
}

/* Sin animación de giro para quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  .spin{animation:none;border-top-color:var(--blue);opacity:.6}
}

.bundle-limpio{border-left:3px solid var(--acc)}
.bundle-sospechoso{border-left:3px solid var(--warn)}
.bundle-alto{border-left:3px solid var(--warn)}
.bundle-critico{border-left:3px solid var(--bad)}

/* ---------------------------------------------------------- Registros */
.logs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: start; }
.logs-menu ul { list-style: none; margin: 0; padding: 0; }
.logs-menu li { margin-bottom: 4px; }
.logs-menu .log-item { display: block; padding: 6px 8px; border-radius: 6px; text-decoration: none; }
.logs-menu .log-item b { display: block; }
.logs-menu .log-item:hover { background: rgba(255,255,255,.05); }
.logs-menu .log-item.activo { background: rgba(34,197,94,.12); }
.logs-toolbar { gap: 8px; align-items: center; flex-wrap: wrap; }
.logs-contenido {
    max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
    font-size: 12px; line-height: 1.45; margin: 8px 0 0;
    background: rgba(0,0,0,.25); padding: 10px; border-radius: 6px;
}
@media (max-width: 800px) { .logs-layout { grid-template-columns: 1fr; } }