/* Todo lo de análisis de mercado: panel de tasas, gráficos, libro de
   anuncios, profundidad y registro de movimientos. */

/* -------------------- DASHBOARD -------------------- */
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);flex-wrap:wrap;gap:var(--space-2);}
.dash-header-btns{display:flex;gap:8px;flex-wrap:wrap;}
.dash-title{font-size:13px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-weight:700;}

/* Hero */
.hero-live{margin-bottom:var(--space-4);}
.hero-glow{
  position:relative;padding:var(--space-5);
  background:radial-gradient(600px 300px at 50% 0%,rgba(240,198,116,0.06),transparent);
  border:1px solid rgba(240,198,116,0.15);border-radius:var(--radius-xl);
  animation:fadeIn 0.6s ease-out;
}
.hero-live-label{
  display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--muted);margin-bottom:var(--space-3);font-weight:600;
}
.hero-live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(14,203,129,0.2);
  animation:pulse 2s infinite;
}
.hero-live-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.hero-live-num{font-family:var(--font-mono);font-size:48px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--text);}
.hero-live-cur{font-size:16px;color:var(--muted);font-weight:500;}
.hero-live-meta{display:flex;align-items:center;gap:12px;margin-top:var(--space-3);flex-wrap:wrap;}
.hero-live-delta{
  display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);
  font-size:13px;font-weight:600;padding:5px 12px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);
}
.hero-live-foot{font-size:12px;color:var(--muted);}

/* Stats */
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-5);}
.dash-stat{
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-3);text-align:center;
  box-shadow:var(--shadow-sm);transition:var(--transition-fast);
}
.dash-stat:hover{border-color:var(--border-hover);transform:translateY(-1px);}
.dash-stat .val{
  font-size:18px;font-weight:700;color:var(--green);
  font-variant-numeric:tabular-nums;font-family:var(--font-mono);
}
.dash-stat .val.negativo{color:var(--red);}
.dash-stat .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;margin-top:4px;letter-spacing:0.5px;font-weight:500;}

/* -------------------- CHARTS -------------------- */
.chart-wrap{
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-4);
  margin-bottom:var(--space-5);box-shadow:var(--shadow-sm);
}
.chart-switch-wrap{position:relative;}
.chart-switch-header{
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-sm);
  transition:var(--transition-fast);
}
.chart-switch-header:hover{border-color:var(--gold);}
.chart-switch-title{font-size:14px;font-weight:700;}
.chart-switch-subtitle{font-size:11px;color:var(--muted);margin-top:2px;}
.chart-switch-chevron{color:var(--muted);font-size:12px;transition:transform var(--transition-fast);}
.chart-switch-header.open .chart-switch-chevron{transform:rotate(180deg);}
.chart-menu-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-xl);overflow:hidden;animation:fadeIn 0.2s ease;
}
.chart-menu-item{
  padding:12px var(--space-4);font-size:13px;color:var(--text);cursor:pointer;
  transition:var(--transition-fast);font-weight:500;
}
.chart-menu-item:not(:last-child){border-bottom:1px solid var(--border);}
.chart-menu-item:hover{background:var(--panel-2);color:var(--gold);}
.chart-menu-item.active{color:var(--gold);font-weight:700;background:rgba(240,198,116,0.06);}
.chart-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.chart-zoom{display:flex;gap:4px;}
.chart-zoom button{
  width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--panel);color:var(--muted);font-size:13px;cursor:pointer;
  transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;
}
.chart-zoom button:hover{border-color:var(--gold);color:var(--gold);background:rgba(240,198,116,0.08);}
.mini-tabs{margin-bottom:0;padding:3px;}
.mini-tabs .tab{padding:6px 4px;font-size:10px;font-family:var(--font-mono);}
.mini-tabs .tab.active{background:var(--gold);color:#101a2a;font-weight:700;border:none;}

/* Legend */
.chart-legend{display:flex;gap:8px;justify-content:center;margin-top:var(--space-3);flex-wrap:wrap;}
.chart-legend-item{
  display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);cursor:pointer;
  padding:5px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--border);
  transition:var(--transition-fast);user-select:none;font-weight:500;
}
.chart-legend-item:hover{border-color:var(--gold);color:var(--text);}
.chart-legend-item.oculto{opacity:0.35;}
.chart-legend-item.oculto .chart-legend-dot{background:var(--muted)!important;}
.chart-legend-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}

/* -------------------- CABECERA DE GRÁFICO (estilo terminal) -------------------- */
/* Alto generoso: los 220px de antes dejaban las velas apretadas. Con vh el gráfico
   crece en pantallas grandes sin desbordar en celular. */
.chart-canvas-lwc{height:min(58vh,460px);min-height:280px;}

/* Precio + RSI se reparten UNA altura total, como los paneles de TradingView. Antes cada
   uno tenía su alto propio y se sumaban, así que el conjunto no cabía en pantalla y el
   RSI quedaba cortado abajo. */
.chart-panes{
  display:flex;flex-direction:column;gap:2px;margin-top:10px;
  height:min(64vh,520px);
}
.chart-panes .chart-canvas-lwc{height:auto;flex:1 1 auto;min-height:200px;}
.chart-panes #rsiPanelWrap{flex:0 0 auto;}

/* Panel del RSI: bajito a propósito, es un acompañante del precio, no un protagonista. */
.chart-canvas-rsi{height:110px;}
.rsi-etiqueta{
  font-size:10px;font-family:var(--font-mono);color:var(--muted);
  padding-left:2px;margin-bottom:1px;
}
.rsi-etiqueta span{opacity:.65;}

/* -------------------- GRÁFICO A PANTALLA COMPLETA -------------------- */
/* El gráfico ocupa toda la ventana sin cambiar de página: la barra de controles queda
   arriba y el lienzo toma todo el alto que sobra. Se sale con el mismo botón o con Esc. */
.chart-wrap.pantalla-completa{
  position:fixed;inset:0;z-index:1400;margin:0 !important;
  background:var(--bg);padding:14px;overflow-y:auto;
  display:flex;flex-direction:column;
}
/* En pantalla completa el bloque de paneles deja de tener tope y toma todo el alto que
   sobre; el RSI conserva el suyo, así el espacio extra se lo lleva el precio, que es lo
   que se quiere ver más grande. */
.chart-wrap.pantalla-completa .chart-panes{height:auto;flex:1 1 auto;min-height:0;}
.chart-wrap.pantalla-completa .chart-canvas-lwc{min-height:200px;}
.chart-wrap.pantalla-completa .chart-canvas-rsi{height:130px;flex:0 0 auto;}
/* Mientras hay un gráfico a pantalla completa, el resto de la página no debe hacer
   scroll por detrás (en celular se nota mucho). */
body.con-pantalla-completa{overflow:hidden;}
.chart-head{display:flex;flex-direction:column;gap:2px;min-width:0;}
.chart-head-titulo{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:.2px;
}
.chart-head-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto;}
.chart-head-meta{
  font-size:10.5px;color:var(--muted);font-family:var(--font-mono);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.chart-head-precio{color:var(--text);font-weight:700;}
.chart-head-sep{opacity:.4;}
/* Lectura OHLC: Apertura / Máximo / mínimo / Cierre de la vela bajo el cursor. */
.chart-head-ohlc{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;
  font-size:10.5px;font-family:var(--font-mono);
}
.chart-head-ohlc b{opacity:.65;font-weight:600;}
.btn-ema{
  display:flex;align-items:center;gap:3px;flex:0 0 auto;
  padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--panel-2);color:var(--muted);font-size:10px;cursor:pointer;
  font-family:var(--font-mono);transition:var(--transition-fast);
}
.btn-ema.activo{color:var(--text);border-color:var(--border-strong,var(--border));}
.btn-ema:hover{border-color:var(--gold);}
.ema-punto{width:6px;height:2px;border-radius:1px;display:inline-block;}
.chart-nav{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px;flex-wrap:wrap;}
.chart-nav-pista{font-size:10px;color:var(--muted);opacity:.75;}
.chart-nav button{
  padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--panel-2);color:var(--muted);font-size:10.5px;cursor:pointer;
  font-family:inherit;transition:var(--transition-fast);
}
.chart-nav button:hover{border-color:var(--gold);color:var(--gold);}

/* -------------------- ORDER BOOK -------------------- */
.libro-wrap{padding:var(--space-4);}
/* minmax(0,1fr), no 1fr a secas: sin el "0" la columna no se achica más que el
   contenido de adentro (los nicks largos), y en celular el precio se sale del
   recuadro — ya pasó una vez y una regla aparte (.libro-grid > div{min-width:0}) se
   perdió sola en algún momento, así que ahora queda metido directo en la columna. */
.libro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-4);}
.libro-col-header{
  display:flex;justify-content:space-between;font-size:10px;
  text-transform:uppercase;letter-spacing:0.5px;padding-bottom:8px;
  border-bottom:1px solid var(--border);margin-bottom:4px;font-weight:600;
}
.libro-col-header.buy{color:var(--green);}
.libro-col-header.sell{color:var(--red);}
.libro-row{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:8px 0;border-bottom:1px solid rgba(41,54,70,0.5);font-size:12px;
}
.libro-row:last-child{border-bottom:none;}
.libro-row .nick{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:1 1 auto;color:var(--text-secondary);font-size:11px;
}
.libro-row .precio{
  flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:12px;
}
.libro-row .precio.buy{color:var(--green);}
.libro-row .precio.sell{color:var(--red);}
.libro-liquidez{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-4);}
.libro-bar-track{height:4px;border-radius:2px;background:var(--panel);overflow:hidden;}
.libro-bar{height:100%;border-radius:2px;transition:width 1s ease;}
.libro-bar.buy{background:var(--green);box-shadow:0 0 8px rgba(14,203,129,0.3);}
.libro-bar.sell{background:var(--red);box-shadow:0 0 8px rgba(246,70,93,0.3);}
.libro-disponible{margin-top:6px;font-size:11px;font-weight:700;font-family:var(--font-mono);}
.libro-disponible.buy{color:var(--green);}
.libro-disponible.sell{color:var(--red);}

/* -------------------- PROFUNDIDAD DEL LIBRO -------------------- */
.prof-box{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
}
.prof-titulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text);margin-bottom:8px;}
.prof-titulo span{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:10px;}
.prof-tabla{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:11px;}
.prof-tabla th{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;padding-bottom:4px;text-align:right;}
.prof-tabla th.buy{color:var(--green);}
.prof-tabla th.sell{color:var(--red);}
.prof-tabla td{padding:3px 0;color:var(--muted);}
.prof-tabla td:first-child{font-size:10px;}
.prof-num{text-align:right;color:var(--text) !important;}
.prof-num.buy{color:var(--green) !important;}
.prof-num.sell{color:var(--red) !important;}
.prof-sub{font-size:8.5px;font-weight:400;opacity:.6;text-transform:none;letter-spacing:0;}
.prof-desbalance{margin-top:10px;}
/* Fondo rojo = venta (demanda), a la derecha; relleno verde = compra (oferta), a la
   izquierda. Mismo orden y mismos colores que las columnas de la tabla de arriba. */
.prof-barra{height:5px;border-radius:3px;background:var(--red);overflow:hidden;}
.prof-barra-compra{height:100%;background:var(--green);transition:width .3s ease;}
.prof-barra-etiquetas{
  display:flex;justify-content:space-between;margin-top:3px;
  font-size:9.5px;font-family:var(--font-mono);
}
.prof-barra-etiquetas .buy{color:var(--green);}
.prof-barra-etiquetas .sell{color:var(--red);}
.prof-lectura{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.prof-aviso{
  font-size:10.5px;color:var(--text);margin-top:8px;line-height:1.45;
  background:var(--panel-2);border-left:2px solid var(--gold);
  padding:6px 9px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/* -------------------- QUÉ MOVIÓ EL PRECIO -------------------- */
.evento-item{
  border-left:2px solid var(--border);padding:8px 0 8px 12px;margin-bottom:10px;
}
.evento-item:last-child{margin-bottom:0;}
.evento-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;}
.evento-hora{font-size:10px;color:var(--muted);font-family:var(--font-mono);flex:0 0 auto;}
.evento-precios{
  font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:2px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.evento-chip{
  background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  padding:1px 7px;font-size:10px;color:var(--gold);
}
.evento-causa{font-size:11.5px;color:var(--text);margin-top:4px;line-height:1.45;}

/* -------------------- INDICATORS -------------------- */
.indicador-row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px var(--space-4);margin-bottom:8px;font-size:12px;
  transition:var(--transition-fast);
}
.indicador-row:hover{border-color:var(--border-hover);}
.indicador-row span:last-child{font-weight:700;color:var(--text);font-family:var(--font-mono);font-size:12px;}

/* -------------------- LIVE PREVIEW -------------------- */
.live-preview{
  text-align:center;font-size:12px;color:var(--gold);
  background:rgba(240,198,116,0.05);border:1px solid rgba(240,198,116,0.2);
  border-radius:var(--radius-md);padding:var(--space-3);margin-top:var(--space-4);
  font-weight:500;letter-spacing:0.2px;
}

/* -------------------- DE QUÉ LADO ESTÁS -------------------- */
/* "Compra" y "Venta" a secas obligan a traducir cada vez, y en las dos listas "el mejor
   precio" apunta en direcciones contrarias (en compra el más barato, en venta el más
   caro). Se dice al lado, en pequeño, para no tener que acordarse. */
.evento-lado{
  font-style:normal;font-weight:400;font-size:10px;color:var(--muted);
  margin-left:6px;text-transform:none;letter-spacing:0;
}
.libro-col-header i{
  font-style:normal;font-weight:400;font-size:9px;color:var(--muted);
  margin-left:5px;text-transform:none;letter-spacing:0;
}
/* Que baje de línea antes que salirse: en un móvil estrecho estas dos columnas se quedan
   en unos 165 px y la aclaración puede no caber. Ya hay una nota más arriba sobre que el
   libro se salió del recuadro una vez. */
.libro-col-header{flex-wrap:wrap;}