/* ============================================================
   DeltaGuard — Custom Styles
   Tailwind handles utilities; this file handles custom
   animations, backgrounds, and components Tailwind can't.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Base ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #050b14;
  color: #e2eaf5;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 150, 255, 0.06) 0%, transparent 70%),
    linear-gradient(rgba(30, 53, 80, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 53, 80, 0.12) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0d1827;
}

::-webkit-scrollbar-thumb {
  background: #1e3550;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a5082;
}

/* ── Typography ───────────────────────────────────────────── */
.font-mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* ── Tab Navigation ───────────────────────────────────────── */
.tab-btn {
  position: relative;
  /* Mantenemos el padding por defecto para que las cajas tengan forma */
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8e9aab;
  
  background: rgba(13, 24, 39, 0.6);
  border: 1px solid rgba(30, 53, 80, 0.5);
  border-radius: 10px;
  cursor: pointer;
  
  /* Transición fluida para todos los efectos */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* EFECTO: Al pasar el mouse se "encienden" SIN MOVERSE */
.tab-btn:hover {
  color: #ffffff;
  background: rgba(30, 53, 80, 0.8);
  border-color: rgba(0, 180, 230, 0.4);
  /* NUEVO: Sombra más pronunciada y sin desplazamiento vertical para compensar la falta de movimiento */
  box-shadow: 0 0 25px rgba(0, 180, 230, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* ELIMINADO: transform: translateY(-1.5px); */
}

.tab-btn.active {
  color: #fff;
  background: rgba(0, 180, 255, 0.12);
  border-color: rgba(0, 180, 255, 0.4);
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.15);
  /* ELIMINADO: transform: translateY(0); */
}

.tab-btn.active.hedge {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.2);
}

.tab-btn.active.trading {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.2);
}

.tab-btn.active.insider {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.15);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.2);
}

/* ── Tab Panels ───────────────────────────────────────────── */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeSlideIn 0.25s ease;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Glass Cards ──────────────────────────────────────────── */
.card {
  background: rgba(13, 24, 39, 0.85);
  border: 1px solid #1e3550;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  transition: border-color 0.2s;
}

.card:hover {
  border-color: #2a5082;
}

.card-glow-blue {
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.06);
}

.card-glow-yellow {
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.06);
}

.card-glow-purple {
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.06);
}

/* ── Inputs ───────────────────────────────────────────────── */
.dg-input {
  width: 100%;
  background: rgba(5, 11, 20, 0.7);
  border: 1px solid #1e3550;
  color: #e2eaf5;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.dg-input:focus {
  border-color: #00b4e6;
  box-shadow: 0 0 0 3px rgba(0, 180, 230, 0.12);
}

.dg-input::placeholder {
  color: #3d607a;
}

.dg-input option {
  background: #0d1827;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  border: 1px solid transparent;
  outline: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #0090cc 0%, #006fa3 100%);
  color: #fff;
  border-color: rgba(0, 180, 255, 0.3);
  box-shadow: 0 0 16px rgba(0, 144, 204, 0.2);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #00aaee 0%, #0088c8 100%);
  box-shadow: 0 0 24px rgba(0, 144, 204, 0.35);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.22);
}

.btn-ghost {
  background: rgba(30, 53, 80, 0.4);
  color: #a0bcd8;
  border-color: #1e3550;
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(30, 53, 80, 0.7);
  color: #fff;
}

.btn-hedge {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: rgba(59, 130, 246, .3);
  box-shadow: 0 0 16px rgba(37, 99, 235, .2);
}

.btn-trading {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  border-color: rgba(245, 158, 11, .3);
  box-shadow: 0 0 16px rgba(217, 119, 6, .2);
}

.btn-insider {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  border-color: rgba(168, 85, 247, .3);
  box-shadow: 0 0 16px rgba(124, 58, 237, .2);
}

.btn-hedge:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(37, 99, 235, .4);
}

.btn-trading:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(217, 119, 6, .4);
}

.btn-insider:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(124, 58, 237, .4);
}

/* ── Status dot ───────────────────────────────────────────── */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
  box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.4);
}

.status-dot.offline {
  background: #ef4444;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* ── Range bar ─────────────────────────────────────────────── */
.range-track {
  position: relative;
  height: 10px;
  background: rgba(30, 53, 80, 0.6);
  border-radius: 99px;
  margin: 2rem 0 1.2rem;
  border: 1px solid #1e3550;
}

.range-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  transition: all 0.5s ease;
}

.range-price-marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  transition: left 0.5s ease;
  box-shadow: 0 0 12px currentColor;
}

.range-label {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  color: #6b8aaa;
}

.range-label.current {
  top: auto;
  bottom: -22px;
  font-weight: 600;
}

.range-tick {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  border-radius: 1px;
  transform: translateX(-50%);
}

/* ── Table ────────────────────────────────────────────────── */
.dg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.dg-table th {
  padding: 0.65rem 1rem;
  text-align: left;
  color: #4a7096;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #1e3550;
}

.dg-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(30, 53, 80, 0.5);
  color: #c5d8ec;
  vertical-align: middle;
}

.dg-table tr:last-child td {
  border-bottom: none;
}

.dg-table tr:hover td {
  background: rgba(30, 53, 80, 0.2);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.badge-hedge {
  background: rgba(59, 130, 246, .15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .25);
}

.badge-trading {
  background: rgba(245, 158, 11, .15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, .25);
}

.badge-insider {
  background: rgba(168, 85, 247, .15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, .25);
}

.badge-active {
  background: rgba(34, 197, 94, .12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .25);
}

.badge-inactive {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, .25);
}

/* ── Leverage Slider ──────────────────────────────────────── */
.lev-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #1e3550, #1e3550);
  border-radius: 3px;
  outline: none;
}

.lev-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00b4e6;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 180, 230, 0.5);
  transition: box-shadow 0.2s;
}

.lev-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 18px rgba(0, 180, 230, 0.8);
}

/* ── Toast Container ─────────────────────────────────────────
   CRITICAL: position:fixed + explicit inset values guarantee the
   container is always anchored to the VIEWPORT, never to a parent
   element with overflow:hidden or position:relative.
   z-index 99999 puts it above all modals (9999). ────────────── */
#toast-container {
  /* Viewport-anchored — immune to any parent's overflow or transform */
  position: fixed !important;
  bottom: 20px; /* [DELTA-143] la barra de estado HFT ya no ocupa la parte inferior */
  right: 20px;
  left: auto;
  top: auto;

  /* Stacks toasts vertically, newest on top */
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;

  /* Above everything — modals are z-index 200/9999 */
  z-index: 99999;

  /* Non-blocking: clicks pass through the empty container area */
  pointer-events: none;

  /* Never wider than the viewport on small/narrow windows */
  max-width: min(400px, calc(100vw - 40px));
  width: auto;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.75rem 1.1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid;
  pointer-events: auto;

  /* Responsive width — never overflows the container */
  width: 100%;
  min-width: 0;          /* flex children must be allowed to shrink */
  box-sizing: border-box;

  /* Long error messages wrap instead of pushing off-screen */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;

  animation: toastIn 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.toast.out {
  animation: toastOut 0.3s ease forwards;
}

.toast-success {
  background: rgba(13, 24, 39, 0.92);
  border-color: rgba(34, 197, 94, .4);
  color: #4ade80;
}

.toast-error {
  background: rgba(13, 24, 39, 0.92);
  border-color: rgba(239, 68, 68, .4);
  color: #f87171;
}

.toast-info {
  background: rgba(13, 24, 39, 0.92);
  border-color: rgba(0, 180, 230, .4);
  color: #67e8f9;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* ── [DELTA-216] Botón de escaneo futurista — reemplaza el HFT status bar ─── */

/* Wrapper que ocupa el espacio central del top bar */
#hft-status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 1rem;
}

/* ─── Botón principal ─── */
#hft-scan-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 12px;
  height: 36px;
  min-width: 290px;
  max-width: 420px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background:
    radial-gradient(circle, rgba(56,189,248,0.08) 1px, transparent 1px) 0 0 / 14px 14px,
    rgba(5, 12, 24, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  outline: none;
  transition: border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
  box-shadow: 0 0 10px rgba(56,189,248,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
  text-align: left;
}
#hft-scan-btn:hover { filter: brightness(1.12); }

/* ─── Fases ─── */
#hft-scan-btn[data-phase="idle"] {
  border-color: rgba(56,189,248,0.18);
  box-shadow: 0 0 10px rgba(56,189,248,0.07), inset 0 1px 0 rgba(56,189,248,0.06);
}
#hft-scan-btn[data-phase="scanning"] {
  border-color: rgba(56,189,248,0.55);
  box-shadow: 0 0 22px rgba(56,189,248,0.28), inset 0 0 32px rgba(56,189,248,0.07), inset 0 1px 0 rgba(56,189,248,0.15);
  animation: hftBtnPulseBlue 2.4s ease-in-out infinite;
}
#hft-scan-btn[data-phase="ratelimited"] {
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 0 18px rgba(245,158,11,0.22), inset 0 1px 0 rgba(245,158,11,0.1);
}
#hft-scan-btn[data-phase="complete"] {
  border-color: rgba(16,185,129,0.65);
  box-shadow: 0 0 28px rgba(16,185,129,0.32), inset 0 0 36px rgba(16,185,129,0.07), inset 0 1px 0 rgba(16,185,129,0.18);
  animation: hftBtnPulseGreen 2.6s ease-in-out infinite;
}

@keyframes hftBtnPulseBlue {
  0%,100% { box-shadow: 0 0 22px rgba(56,189,248,0.28), inset 0 0 32px rgba(56,189,248,0.07); }
  50%      { box-shadow: 0 0 36px rgba(56,189,248,0.42), inset 0 0 40px rgba(56,189,248,0.12); }
}
@keyframes hftBtnPulseGreen {
  0%,100% { box-shadow: 0 0 28px rgba(16,185,129,0.32), inset 0 0 36px rgba(16,185,129,0.07); }
  50%      { box-shadow: 0 0 44px rgba(16,185,129,0.48), inset 0 0 44px rgba(16,185,129,0.14); }
}

/* ─── Icono ─── */
.hft-btn-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(147,197,253,0.7);
  transition: color 0.4s ease;
}
#hft-scan-btn[data-phase="scanning"] .hft-btn-icon { color: #38bdf8; }
#hft-scan-btn[data-phase="ratelimited"] .hft-btn-icon { color: #fbbf24; }
#hft-scan-btn[data-phase="complete"] .hft-btn-icon { color: #34d399; }

#hft-scan-btn[data-phase="scanning"] .hft-icon-sync {
  animation: hftSpin 1.1s linear infinite;
}
@keyframes hftSpin {
  to { transform: rotate(360deg); }
}

#hft-scan-btn[data-phase="complete"] .hft-icon-check {
  animation: hftCheckPop 0.45s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes hftCheckPop {
  0%   { transform: scale(0); opacity: 0; }
  65%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── Textos ─── */
.hft-btn-texts {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}
.hft-btn-title {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(186,230,253,0.92);
  transition: color 0.4s ease;
}
#hft-scan-btn[data-phase="scanning"] .hft-btn-title { color: #7dd3fc; }
#hft-scan-btn[data-phase="ratelimited"] .hft-btn-title { color: #fcd34d; }
#hft-scan-btn[data-phase="complete"] .hft-btn-title { color: #6ee7b7; }

.hft-btn-sub {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(148,163,184,0.82);
  transition: color 0.4s ease;
}
#hft-scan-btn[data-phase="scanning"] .hft-btn-sub { color: rgba(56,189,248,0.8); }
#hft-scan-btn[data-phase="complete"] .hft-btn-sub { color: rgba(52,211,153,0.8); }
#hft-scan-btn[data-phase="ratelimited"] .hft-btn-sub { color: rgba(252,211,77,0.75); }

/* ─── Barra de progreso inferior ─── */
.hft-btn-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: rgba(255,255,255,0.04);
}
.hft-btn-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 0 2px 2px 0;
  transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1), background 0.5s ease, box-shadow 0.5s ease;
  background: rgba(56,189,248,0.4);
}
#hft-scan-btn[data-phase="scanning"] .hft-btn-bar-fill {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8, #7dd3fc, #38bdf8, #0ea5e9);
  background-size: 300% 100%;
  box-shadow: 0 0 8px #38bdf8;
  animation: hftBarShimmer 1.6s linear infinite;
}
#hft-scan-btn[data-phase="ratelimited"] .hft-btn-bar-fill {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
  animation: hftBarWarn 0.8s ease-in-out infinite;
}
#hft-scan-btn[data-phase="complete"] .hft-btn-bar-fill {
  background: linear-gradient(90deg, #059669, #10b981, #34d399, #10b981, #059669);
  background-size: 300% 100%;
  box-shadow: 0 0 10px #10b981;
  animation: hftBarShimmer 2s linear infinite, hftBarGlowPulse 2.4s ease-in-out infinite;
}

@keyframes hftBarShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes hftBarWarn {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}
@keyframes hftBarGlowPulse {
  0%,100% { box-shadow: 0 0 10px #10b981; }
  50%     { box-shadow: 0 0 20px #34d399; }
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  #hft-scan-btn { min-width: 180px; }
  .hft-btn-sub { display: none; }
}
@media (max-width: 640px) {
  #hft-status-bar { display: none; }
}

/* ── Skeleton loader ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #0d1827 25%, #162032 50%, #0d1827 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 0.75rem;
  color: #3d607a;
}

.empty-state svg {
  opacity: 0.4;
}

/* ── Divider ──────────────────────────────────────────────── */
.dg-divider {
  border: none;
  border-top: 1px solid #1e3550;
  margin: 1.25rem 0;
}

/* ── Bot status ───────────────────────────────────────────── */
.bot-status-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(5, 11, 20, 0.6);
  border: 1px solid #1e3550;
  font-size: 0.83rem;
}

/* ── Section label ────────────────────────────────────────── */
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3d607a;
  margin-bottom: 0.5rem;
}

/* ── Stat card ────────────────────────────────────────────── */
.stat-pill {
  display: flex;
  flex-direction: column;
  background: rgba(5, 11, 20, 0.6);
  border: 1px solid #1e3550;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  gap: 2px;
}

/* ── KPI Banner ───────────────────────────────────────────── */
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.6rem 1rem;
  background: rgba(13, 24, 39, 0.6);
  border: 1px solid #1e3550;
  border-radius: 10px;
  transition: border-color 0.2s;
}

.kpi-card:hover {
  border-color: #2a5082;
}

.kpi-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3d607a;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* ── KPI Banner — scroll horizontal en móvil, grid en pantallas grandes ─── */
.kpi-grid {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 12px 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kpi-grid::-webkit-scrollbar { display: none; }
.kpi-grid .kpi-card {
  flex: 0 0 auto;
  min-width: 90px;
  padding: 0.5rem 0.75rem;
}
.kpi-grid .kpi-value { font-size: 1rem; }
@media (min-width: 768px) {
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
    padding: 12px 20px;
    gap: 12px;
  }
  .kpi-grid .kpi-card { min-width: 0; padding: 0.6rem 1rem; }
  .kpi-grid .kpi-value { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(8, 1fr); }
}

.kpi-value {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #e2eaf5;
  letter-spacing: -0.02em;
}

/* ── Activity Log Item ────────────────────────────────────── */
.log-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(30, 53, 80, 0.45);
}

.log-item:last-child {
  border-bottom: none;
}

.log-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.log-icon.ok {
  background: rgba(34, 197, 94, .12);
  color: #4ade80;
}

.log-icon.sl_hit {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
}

.log-icon.cb_triggered {
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
}

.log-icon.error {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
}

.log-icon.closed {
  background: rgba(107, 138, 170, .12);
  color: #94a3b8;
}

.log-body {
  flex: 1;
  min-width: 0;
}

.log-action {
  font-size: 0.83rem;
  font-weight: 600;
  color: #e2eaf5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-details {
  font-size: 0.75rem;
  color: #6b8aaa;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-time {
  font-size: 0.68rem;
  color: #3d607a;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════
   ANALYTICS PANEL SYSTEM
   ═══════════════════════════════════════════════════════════ */

/* Info bar */
.analytics-info-bar {
  border-color: rgba(30, 53, 80, 0.5);
  background: rgba(5, 11, 20, 0.55);
}

.info-chip {
  font-size: 0.72rem;
  color: #4a7096;
  font-weight: 500;
}

/* Analytics card (outer container — glow wrapper) */
.analytics-card {
  border-radius: 14px;
  border: 1px solid #1a3048;
  background: rgba(8, 16, 28, 0.7);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.analytics-card:hover {
  border-color: #2a5082;
  box-shadow: 0 0 28px rgba(0, 150, 255, 0.05);
}

/* Card header strip */
.ac-header {
  padding: 0.65rem 1rem;
  background: rgba(5, 11, 20, 0.9);
  border-bottom: 1px solid #1a3048;
}

.ac-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #7fa8c8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Card body */
.ac-body {
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Individual KPI block — the deep dark rectangle */
.akpi-block {
  background: #02050a;
  border: 1px solid rgba(20, 40, 65, 0.9);
  border-radius: 9px;
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(0, 120, 200, 0.03);
  transition: background 0.15s, border-color 0.15s;
}

.akpi-block:hover {
  background: #030810;
  border-color: rgba(30, 65, 100, 0.9);
}

/* Projection row variant */
.akpi-block.proj-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.proj-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

/* Metric label */
.akpi-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #3d607a;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Metric value */
.akpi-value {
  font-size: 1rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #d1e8ff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Sub value (percentage under projection) */
.akpi-sub {
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
  color: #4a7096;
  line-height: 1;
}

/* [DG-423] Tokens Init + IL en una sola caja: ocupa el alto sobrante (el de dos cajas) para
   que 💰 Capital mida lo mismo que Fees y Proyección. Rejilla ? · valor · a la par. */
.akpi-block.rb-box { flex: 1 1 auto; justify-content: space-between; gap: 3px; }
.akpi-block.rb-box .akpi-label { flex-wrap: wrap; row-gap: 2px; }
.rb-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* [DG-462] ? · valor; el detalle va debajo */
  column-gap: 7px;
  row-gap: 1px;
  align-items: baseline;
}
.rb-grid > .tt-btn { align-self: center; }
.rb-val {
  font-size: 0.8rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #d1e8ff;
  line-height: 1.3;
  white-space: nowrap;
}
/* [DG-462] El detalle ocupa toda la fila debajo de su valor, alineado a la izquierda (a la
   derecha quedaba una columna estrecha que partía el texto palabra por palabra). */
.rb-det {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  font-size: 0.64rem;
  font-family: 'JetBrains Mono', monospace;
  color: #4a7096;
  line-height: 1.3;
  min-width: 0;
}
.rb-lbl { color: #3d607a; font-weight: 700; }
.rb-nw { white-space: nowrap; }
/* Verde más vivo solo dentro de Tokens Init · Rebalanceo (IL) para el aumento de unidades
   del activo (ganancia en tokens aunque el mercado la lea como pérdida). El rojo se deja
   igual al del resto de la app (.val-neg de arriba). */
.rb-box .val-pos { color: #00E676; }

/* Positive / Negative value helpers */
.val-pos {
  color: #4ade80;
}

.val-neg {
  color: #f87171;
}

/* ─── Tooltip button ─── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 150, 220, 0.15);
  border: 1px solid rgba(0, 150, 220, 0.3);
  color: #4a9cc8;
  font-size: 0.6rem;
  font-weight: 800;
  cursor: default;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
  vertical-align: middle;
}

.tt-btn:hover {
  background: rgba(0, 150, 220, 0.28);
}

/* Tooltip CSS deshabilitado — reemplazado por #tt-global (position:fixed en body)
   para escapar el overflow:hidden de los contenedores padre del pool card. */
.tt-btn::after,
.tt-btn::before { display: none; }

/* ═══════════════════════════════════════════════════════════
   POOL CARD SYSTEM (Multi-Pool Hedge)
   ═══════════════════════════════════════════════════════════ */

.pool-card {
  background: rgba(8, 16, 28, 0.85);
  border: 1px solid #1a3048;
  border-radius: 16px;
  overflow: hidden;
  animation: fadeSlideIn 0.3s ease;
  transition: border-color 0.2s;
}

.pool-card:hover {
  border-color: #2a5082;
}

/* ── Card Header ── */
.pool-card-header {
  padding: 1.1rem 1.4rem 0.9rem;
  background: rgba(5, 11, 20, 0.7);
  border-bottom: 1px solid rgba(26, 48, 72, 0.7);
}

.pool-card-pair {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-family: 'JetBrains Mono', monospace;
}

.pool-card-source {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3d607a;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(30, 53, 80, 0.4);
  border: 1px solid #1e3550;
}

/* Configuración y Resultados strip — animación hover */
.pool-collapse-strip:hover .pool-collapse-pill {
  border-color: #2a5082 !important;
  background: #07111f !important;
}
.pool-collapse-strip:hover .pool-collapse-pill span {
  color: #c5d8ec !important;
}
/* Bounce en el chevron: usa 'translate' (distinto de 'transform') para no
   interferir con el rotate(0/180deg) que JS aplica vía style.transform */
.pool-collapse-strip:hover svg {
  animation: chevron-bounce 0.45s ease-in-out infinite alternate;
}
@keyframes chevron-bounce {
  from { translate: 0 0; }
  to   { translate: 0 3px; }
}

/* Full-screen overlay animation */
@keyframes fsIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* Quick KPI row */
.pool-quick-kpi {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.qkpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qkpi-label {
  font-size: 0.6rem;
  color: #3d607a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.qkpi-value {
  font-size: 0.92rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}

/* Mini range bar (inside pool card) */
.pool-range-track {
  position: relative;
  height: 8px;
  background: rgba(30, 53, 80, 0.5);
  border-radius: 99px;
  margin: 0.8rem 0 1.5rem;
  border: 1px solid #1e3550;
}

.pool-range-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  transition: all 0.5s ease;
}

.pool-range-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  /* transition: left 0.5s ease; 🔥 ELIMINADA PARA EVITAR VIAJES FALSOS */
  box-shadow: 0 0 10px currentColor;
}

.pool-range-label {
  position: absolute;
  font-size: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  color: #4a7096;
  top: -18px;
  transform: translateX(-50%);
}

.pool-range-label.cur {
  top: auto;
  bottom: -18px;
  font-weight: 700;
}

/* ── Card Analytics Body ── */
.pool-card-analytics {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(26, 48, 72, 0.4);
}

/* ── Card Footer (Info Chips) ── */
.pool-card-footer {
  padding: 0.75rem 1.1rem;
  background: rgba(3, 8, 16, 0.5);
  border-top: 1px solid rgba(26, 48, 72, 0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.fc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(13, 24, 39, 0.8);
  border: 1px solid rgba(30, 53, 80, 0.6);
  border-radius: 6px;
  font-size: 0.67rem;
  color: #4a7096;
  font-weight: 500;
  white-space: nowrap;
}

.fc strong {
  color: #c5d8ec;
  font-weight: 600;
}

.fc.wallet-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
}

/* ── Action Buttons Row ── */
.pool-card-actions {
  padding: 0.75rem 1.1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Bot Config Section (collapsible) ── */
.pool-bot-config {
  padding: 1rem 1.1rem;
  background: rgba(2, 5, 10, 0.7);
  border-top: 1px solid rgba(30, 83, 130, 0.3);
  animation: fadeSlideIn 0.2s ease;
}

.pool-bot-config.hidden {
  display: none;
}

/* ── Entry Price Orange Marker ── */
.pool-entry-marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f97316;
  border: 2px solid rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.7), 0 0 20px rgba(249, 115, 22, 0.3);
  z-index: 3;
  /* transition: left 0.5s ease; 🔥 ANIQUILADO */
}

.pool-entry-label {
  position: absolute;
  font-size: 0.58rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  white-space: nowrap;
  color: #f97316;
  top: -22px;
  transform: translateX(-50%);
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
  letter-spacing: 0.04em;
}

/* ── Readonly trigger input visual feedback ── */
input[readonly].dg-input {
  color: #4a7096;
  cursor: not-allowed;
  opacity: 0.75;
}

input:not([readonly]).dg-input {
  color: #e2eaf3;
}

/* ── Sincronizar peer-checked fix (inline toggle) ── */
input[type=checkbox].peer:checked+div>div {
  transform: translateX(1rem);
}

input[type=checkbox].peer:checked+div {
  background: #2563eb !important;
  border-color: #3b82f6 !important;
}

/* ── Strategy info pill ── */
.strategy-description {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   WALLET SCANNER MODAL
════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 5, 15, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: modalFadeIn 0.2s ease;
}

.modal-overlay.hidden {
  display: none;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-box {
  background: linear-gradient(160deg, #0b1929 0%, #071423 100%);
  border: 1px solid #1e3550;
  border-radius: 20px;
  padding: 1.75rem;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 180, 230, 0.06);
  animation: modalSlideIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scanner result cards */
.scanner-result-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(13, 24, 39, 0.8);
  border: 1px solid #1e3550;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.scanner-result-card:hover,
.scanner-result-card.selected {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.05);
}

.scanner-result-card.selected {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

/* scanner spin icon when loading */
#scanner-submit-btn.loading svg {
  animation: spin 0.8s linear infinite;
}

/* Sim badge pulse */
#sim-badge {
  animation: simBadgePulse 3s ease-in-out infinite;
}

@keyframes simBadgePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
  }

  50% {
    box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.2);
  }
}

/* Fire test button */
.btn-fire {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

.btn-fire:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(245, 158, 11, 0.18));
  border-color: #f87171;
  color: #ffffff;
}


/* ════════════════════════════════════════════════════════════
   PRODUCTION MODE BADGE
════════════════════════════════════════════════════════════ */

/* Animated red glow for production mode */
@keyframes prodBadgePulse {

  0%,
  100% {
    box-shadow: 0 0 6px 0 rgba(239, 68, 68, 0);
  }

  50% {
    box-shadow: 0 0 16px 4px rgba(239, 68, 68, 0.35);
  }
}

#sim-badge[data-mode="production"] {
  animation: prodBadgePulse 1.5s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   LOG TIMESTAMP — monospace terminal style
════════════════════════════════════════════════════════════ */

.log-time {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.59rem !important;
  white-space: nowrap;
  color: #3d607a;
  letter-spacing: -0.01em;
  line-height: 1;
  padding-top: 2px;
  min-width: 92px;
  text-align: right;
}

/* Pipe separator highlight */
.log-time span.pipe {
  color: #2a5082;
}

/* ════════════════════════════════════════════════════════════
   SOURCE BADGE — 'L' = live-fallback, 'R' = revert, etc.
════════════════════════════════════════════════════════════ */

.source-live {
  color: #10b981;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .3);
}

.source-revert {
  color: #3b82f6;
  background: rgba(59, 130, 246, .1);
  border: 1px solid rgba(59, 130, 246, .3);
}

.source-mock {
  color: #6b7280;
  background: rgba(107, 114, 128, .1);
  border: 1px solid rgba(107, 114, 128, .3);
}

/* ⛓️ ON-CHAIN source: neon cyan/green — direct blockchain data */
.source-onchain {
  color: #00e5cc;
  background: rgba(0, 229, 204, .1);
  border: 1px solid rgba(0, 229, 204, .35);
  box-shadow: 0 0 8px rgba(0, 229, 204, .2);
  animation: onchainPulse 3s ease-in-out infinite;
}

@keyframes onchainPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 229, 204, .15); }
  50%       { box-shadow: 0 0 12px rgba(0, 229, 204, .4); }
}

/* ════════════════════════════════════════════════════════════
   LIVE PRICE TICKER (header)
════════════════════════════════════════════════════════════ */

.live-ticker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(34, 197, 94, .25);
  background: rgba(34, 197, 94, .06);
  font-size: 0.72rem;
  transition: opacity 0.3s;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: live-pulse 1.8s infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
  }

  60% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* ════════════════════════════════════════════════════════════
   TOKEN ID SEARCH MODAL — Info Box
════════════════════════════════════════════════════════════ */

.token-info-box {
  background: rgba(30, 58, 138, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 14px 16px;
}

/* ════════════════════════════════════════════════════════════
   LOG TIMESTAMP — JetBrains Mono overrides
════════════════════════════════════════════════════════════ */

.log-time {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
  font-size: 0.6rem !important;
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: #4a7096;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.5;
}

.log-time .log-date {
  color: #4a7096;
}

.log-time .log-pipe {
  color: #2a5082;
  margin: 0 3px;
}

.log-time .log-hms {
  color: #2d6a9e;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   POOL METRICS ROW — 6 KPIs with separators and tooltips
════════════════════════════════════════════════════════════ */

.pool-metrics-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.6rem 0;
  margin-top: 0.35rem;
  border-top: 1px solid rgba(30, 53, 80, 0.5);
}

.pm-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 1rem;
  position: relative;
  flex: 1;
  min-width: 0;
}

.pm-item:first-child {
  padding-left: 0;
}

.pm-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.pm-value {
  font-size: 0.88rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #ffffff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.pm-value.pm-lp {
  color: #ffffff;
}

.pm-value.pm-apr {
  color: #fbbf24;
}

.pm-sep {
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(to bottom, transparent, rgba(30, 53, 80, 0.8), transparent);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   HYPERLIQUID FUTURES HUD
════════════════════════════════════════════════════════════ */

.hl-hud-wrapper {
  padding: 0.45rem 0;
  margin-top: 0.4rem;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(30, 53, 80, 0.4);
}

.hl-hud {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0.85;
}

.hl-hud-double {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}

.hl-hud-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
}

.hl-icon {
  font-size: 0.75rem;
}

.hl-pair {
  color: #a0bcd8;
  font-weight: 600;
  font-size: 0.72rem;
}

.hl-dir {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.hl-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid;
}

.hl-badge-waiting {
  color: #9ca3af;
  background: rgba(107, 114, 128, 0.12);
  border-color: rgba(107, 114, 128, 0.3);
}

.hl-badge-active {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.35);
  animation: hl-pulse 2s infinite;
}

@keyframes hl-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }

  50% {
    box-shadow: 0 0 5px 1px rgba(74, 222, 128, 0.2);
  }
}

.hl-price {
  color: #e2eaf5;
  font-size: 0.7rem;
}

.hl-pct {
  font-size: 0.65rem;
}

.hl-pos {
  color: #4ade80;
}

.hl-neg {
  color: #f87171;
}

.hl-lp-val {
  color: #6b8aaa;
  font-size: 0.65rem;
}

.hl-lev {
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 6px;
  padding: 0px 4px;
}

.hl-reason {
  color: #4a7096;
  font-size: 0.62rem;
}

/* ════════════════════════════════════════════════════════════
   BLOOMBERG-STYLE RANGE BAR
   — Solid light-blue dot for ENTRY
   — Hollow highlighted circle for CURRENT PRICE
════════════════════════════════════════════════════════════ */

/* Override entry marker: solid bright blue (Bloomberg entry) */
.pool-entry-marker.blmb-entry {
  background: #60a5fa;
  border: 2px solid rgba(30, 100, 200, 0.5);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.7), 0 0 18px rgba(96, 165, 250, 0.25);
  width: 10px;
  height: 10px;
  z-index: 4;
}

.pool-entry-label {
  color: #60a5fa !important;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

/* Override current price marker: hollow highlight circle */
.pool-range-marker.blmb-current {
  background: transparent !important;
  border: 2.5px solid currentColor;
  box-shadow: 0 0 10px currentColor, 0 0 2px rgba(255, 255, 255, 0.5) inset;
  width: 14px;
  height: 14px;
  z-index: 5;
}

/* ════════════════════════════════════════════════════════════
   MASTER MODE TOGGLE — Header Switch
   Simulation = left (yellow/gray)
   Production = right (red + glow)
════════════════════════════════════════════════════════════ */

.mode-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mode badge */
.mode-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.mode-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* SIMULATION state (yellow) */
.mode-badge-sim {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}

.mode-badge-sim .mode-badge-dot {
  background: #fbbf24;
  animation: simBadgePulse 2s ease-in-out infinite;
}

/* PRODUCTION state (red — danger) */
.mode-badge-prod {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
  animation: prodBadgePulse 1.4s ease-in-out infinite;
}

.mode-badge-prod .mode-badge-dot {
  background: #ef4444;
  animation: ping 1s ease-in-out infinite;
}

@keyframes ping {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.6);
    opacity: 0.5;
  }
}

/* ── Toggle switch track ── */
.mode-toggle {
  position: relative;
  width: 42px;
  height: 22px;
  border-radius: 99px;
  background: rgba(30, 53, 80, 0.8);
  border: 1px solid rgba(74, 112, 150, 0.5);
  cursor: pointer;
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  flex-shrink: 0;
  outline: none;
  padding: 0;
}

.mode-toggle:hover {
  border-color: rgba(251, 191, 36, 0.5);
}

/* Production ON state: red track */
.mode-toggle.mode-toggle-on {
  background: rgba(239, 68, 68, 0.7);
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35), 0 0 24px rgba(239, 68, 68, 0.15);
}

.mode-toggle.mode-toggle-on:hover {
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}

/* ── Toggle knob ── */
.mode-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
}

/* Knob slides to the right when ON (production) */
.mode-toggle.mode-toggle-on .mode-toggle-knob {
  transform: translateX(20px);
}

/* Focus ring for accessibility */
.mode-toggle:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.6);
  outline-offset: 2px;
}

/* ── Estilos para las cajas del formulario Añadir Wallet ── */
.radio-box { 
  transition: all 0.3s ease; 
  cursor: pointer; 
}

/* Iluminación Azul para Protección */
input[value="Hedge"]:checked + .radio-box { 
  border-color: #3b82f6; 
  background: rgba(59, 130, 246, 0.15); 
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), inset 0 0 8px rgba(59, 130, 246, 0.2);
}
input[value="Hedge"]:checked + .radio-box .bt-title { color: #3b82f6; }

/* Iluminación Naranja para Trading */
input[value="Trading"]:checked + .radio-box { 
  border-color: #f59e0b; 
  background: rgba(245, 158, 11, 0.15); 
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4), inset 0 0 8px rgba(245, 158, 11, 0.2);
}
input[value="Trading"]:checked + .radio-box .bt-title { color: #f59e0b; }

/* Iluminación Morada para Insider */
input[value="Insider"]:checked + .radio-box { 
  border-color: #a855f7; 
  background: rgba(168, 85, 247, 0.15); 
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), inset 0 0 8px rgba(168, 85, 247, 0.2);
}
input[value="Insider"]:checked + .radio-box .bt-title { color: #a855f7; }

/* Iluminación Cyan para Linear Hedger */
input[value="Linear Hedger"]:checked + .radio-box {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.15);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.4), inset 0 0 8px rgba(6, 182, 212, 0.2);
}
input[value="Linear Hedger"]:checked + .radio-box .bt-title { color: #06b6d4; }

/* Iluminación Verde para Pool */
input[value="Pool"]:checked + .radio-box {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4), inset 0 0 8px rgba(34, 197, 94, 0.2);
}
input[value="Pool"]:checked + .radio-box .bt-title { color: #22c55e; }

/* Animación: De Nítida a Neón y viceversa */
@keyframes neon-pulse-green {
  0%, 100% { text-shadow: none; color: #00ff88; } 
  50% { text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 30px #00ff88; color: #00ffcc; } 
}

@keyframes neon-pulse-red {
  0%, 100% { text-shadow: none; color: #ff3131; } 
  50% { text-shadow: 0 0 10px #ff3131, 0 0 20px #ff3131, 0 0 30px #ff3131; color: #ff5e5e; } 
}

.pulse-long { animation: neon-pulse-green 1.5s infinite ease-in-out; font-weight: 900 !important; }
.pulse-short { animation: neon-pulse-red 1.5s infinite ease-in-out; font-weight: 900 !important; }

/* Estado apagado: Nitidez total y color morado base */
.text-off { color: #a855f7 !important; text-shadow: none !important; opacity: 0.7; }

/* Ajustes para el nuevo sistema de pestañas */
.tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: #8e9aab !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Línea de color cuando la pestaña está activa */
.tab-btn.active {
    color: #fff !important;
    border-bottom: 2px solid #00d4ff !important;
    background: linear-gradient(to top, rgba(0, 212, 255, 0.08), transparent) !important;
}

/* Colores específicos para que cada bot se distinga */
.tab-btn.hedge.active { border-color: #ef4444 !important; }
.tab-btn.linear_hedger.active { border-color: #06b6d4 !important; }
.tab-btn.trading.active { border-color: #f59e0b !important; }
.tab-btn.insider.active { border-color: #a855f7 !important; }

/* Ocultar barra de scroll pero permitir movimiento */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }/* DISEÑO ORIGINAL + ESPACIO EQUITATIVO */
#main-tabs {
    display: flex;
}

.tab-btn {
    flex: 1 1 0; /* Todas ocupan lo mismo y se encogen por igual */
    min-width: 70px;
    max-width: 160px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(13, 24, 39, 0.8) !important;
    border: 1px solid #1e3550 !important;
    border-radius: 8px !important;
    color: #8e9aab !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: #fff !important;
    border-color: #3b82f6 !important;
    background: rgba(30, 53, 80, 0.8) !important;
}

/* Colores originales cuando están activas */
.tab-btn.active {
    color: #fff !important;
    background: rgba(30, 53, 80, 1) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.tab-btn.active[data-tab="wallets"] { border-color: #3b82f6 !important; }
.tab-btn.analytics.active { border-color: #10b981 !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
.tab-btn.hedge.active { border-color: #ef4444 !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); }
.tab-btn.linear_hedger.active { border-color: #06b6d4 !important; box-shadow: 0 0 15px rgba(6, 182, 212, 0.2); }
.tab-btn.trading.active { border-color: #f59e0b !important; box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
.tab-btn.insider.active { border-color: #a855f7 !important; box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); }
.tab-btn.futuros.active { border-color: #22d3ee !important; box-shadow: 0 0 15px rgba(34, 211, 238, 0.2); }   /* [DG-496] */
}
/* ═══════════════════════════════════════════════════════════
   MOBILE — mejoras generales para pantallas < 640px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Pool card header: KPIs de resumen en grid 2×2 más compacto */
  .pool-card .font-mono.text-base { font-size: 0.85rem; }

  /* Analytics cards: forzar 1 col en móvil */
  .pool-card-analytics .grid { grid-template-columns: 1fr !important; }

  /* Bot panel stats grid: 2 cols en vez de 4 */
  #bp-panel-\[cid\] .grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Navegación de tabs: scroll horizontal en lugar de overflow oculto */
  .tab-nav-strip {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .tab-nav-strip::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; }

  /* Reducir padding general de tarjetas en móvil */
  .pool-card > div { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .analytics-card { padding: 0; }
  .ac-body { padding: 0.75rem; }

  /* Botones de acción del pool: tamaño mínimo táctil */
  .pool-card button { min-height: 32px; }

  /* Márgenes generales de contenido: aprovechar todo el ancho */
  main > .px-5, main .px-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

  /* Pool cards: eliminar margen lateral excesivo */
  .pool-card { margin-left: 0 !important; margin-right: 0 !important; }

  /* Chart container: llegar hasta los bordes */
  .chart-wrap, [id^="chart-wrap-"] { margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; }

  /* Posición activa: botones en columna en móvil */
  .active-pos-actions { flex-direction: column !important; }
  .active-pos-actions button { width: 100% !important; }

  /* Header de la tarjeta de posición: permitir wrap para que el timer (Tiempo
     de Vida) y el Size no se corten en pantallas angostas. En escritorio la
     fila se mantiene en una sola línea (justify-between). */
  .active-pos-header { flex-wrap: wrap !important; gap: 6px 8px; }
  .active-pos-meta { flex-wrap: wrap !important; }
}

/* ── .dg-toast — pill notification minimalista ────────────────────────────────
   Diseño: borde-izquierda de color + fondo oscuro translúcido + una sola fila.
   pointer-events:auto requerido porque el contenedor tiene pointer-events:none. */
.dg-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 640px) {
  .dg-toast { max-width: 100%; padding: 7px 10px; border-radius: 6px; }
}

/* ── Dispositivos touch: mantener layout móvil en landscape ─────────────────
   Los breakpoints por ancho (sm: md: lg:) se activan en landscape mobile
   porque el viewport ancha. pointer:coarse detecta el tipo de dispositivo
   sin importar la orientación. max-width:1023px excluye tablets grandes.    */
@media (pointer: coarse) and (max-width: 1023px) {
  /* KPI: siempre scroll horizontal en dispositivos touch */
  .kpi-grid {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .kpi-grid::-webkit-scrollbar { display: none; }
  .kpi-card { flex: 0 0 auto !important; min-width: 90px !important; }

  /* Notification center: panel ancho completo en touch */
  #notification-center-panel { width: 100% !important; }

  /* Tabs: siempre scroll horizontal sin wrap */
  .tab-nav-strip {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .tab-btn { flex: 0 0 auto !important; }

  /* Márgenes laterales del contenido */
  .pool-card { margin-left: 0 !important; margin-right: 0 !important; }
  .chart-wrap, [id^="chart-wrap-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  /* Tarjeta posición: botón de editar ancho completo */
  #notification-center-panel .text-lg { font-size: 0.95rem !important; }
}

/* ════════════════════════════════════════════════════════════
   [DG-340] CARGA DE POSICIONES
   Mientras se piden las posiciones (body[data-cargando-pools]) el hueco de las
   tarjetas muestra una animación y el historial de actividad no se ve: antes
   aparecía "Sin posiciones activas" aunque sí hubiera pools. app.js quita la marca
   al terminar y pone el estado vacío solo si de verdad no hay ninguna posición.
════════════════════════════════════════════════════════════ */
body[data-cargando-pools] [id$="-history-card"] { display: none; }
.dg-cargando-pools {
  min-height: 58vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  border: 1px solid #1e3550; border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(56,189,248,0.06), rgba(13,24,39,0.6) 70%);
  color: #6b8aaa; font-size: 0.85rem; letter-spacing: .02em;
}
.dg-cargando-pools p { margin: 0; animation: dgLatido 1.6s ease-in-out infinite; }
.dg-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(56,189,248,0.15);
  border-top-color: #38bdf8; border-right-color: rgba(56,189,248,0.6);
  animation: dgGiro .9s linear infinite;
  box-shadow: 0 0 22px rgba(56,189,248,0.18);
}
@keyframes dgGiro { to { transform: rotate(360deg); } }
@keyframes dgLatido { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dg-spinner { animation-duration: 2.4s; }
  .dg-cargando-pools p { animation: none; opacity: .8; }
}