/* ============================================================================
   BUNNYBOT · Design System (clon KuCoin)
   Tema oscuro: negro principal + rosa acento (sutil).
   Tema claro:  blanco principal + el mismo rosa.
   ============================================================================ */

:root {
  /* Rosa de marca (idéntico en ambos temas) */
  --pink: #ff2e7e;
  --pink-hover: #ff4f93;
  --pink-soft: rgba(255, 46, 126, 0.12);
  --pink-border: rgba(255, 46, 126, 0.35);

  /* Trading (estándar, no cambian con el tema) */
  --buy: #1fd6a0;
  --buy-bg: rgba(31, 214, 160, 0.12);
  --sell: #f6465d;
  --sell-bg: rgba(246, 70, 93, 0.12);

  --radius: 10px;
  --radius-sm: 7px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* ---------------- TEMA OSCURO (por defecto) ---------------- */
:root, [data-theme="dark"] {
  --bg: #0a0a0c;
  --bg-1: #101015;
  --bg-2: #16161c;
  --bg-3: #1d1d24;
  --bg-hover: #22222a;
  --border: #26262e;
  --border-soft: #1c1c22;
  --text: #ededf2;
  --text-2: #a0a0ad;
  --text-3: #6c6c78;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ---------------- TEMA CLARO ---------------- */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-1: #f7f7fa;
  --bg-2: #ffffff;
  --bg-3: #f2f2f6;
  --bg-hover: #f0f0f4;
  --border: #e7e7ee;
  --border-soft: #f0f0f4;
  --text: #14141a;
  --text-2: #5b5b69;
  --text-3: #9a9aa8;
  --shadow: 0 8px 30px rgba(20, 20, 30, 0.08);
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }

/* ---------------- Tipografía utilitaria ---------------- */
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--buy); }
.down { color: var(--sell); }
.pink { color: var(--pink); }
.h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.2px; }
.h2 { font-size: 16px; font-weight: 600; margin: 0; }
.lbl { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------------- Paneles / cards ---------------- */
.panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel-pad { padding: 16px; }
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.card:hover { border-color: var(--border); }

/* ---------------- Botones ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .14s ease; white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn-lg { height: 46px; font-size: 15px; font-weight: 600; }
.btn-block { width: 100%; }

.btn-pink { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn-pink:hover { background: var(--pink-hover); border-color: var(--pink-hover); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-3); }
.btn-buy { background: var(--buy); border-color: var(--buy); color: #04130f; font-weight: 600; }
.btn-buy:hover { filter: brightness(1.08); }
.btn-sell { background: var(--sell); border-color: var(--sell); color: #1a0507; font-weight: 600; }
.btn-sell:hover { filter: brightness(1.08); }

/* ---------------- Inputs ---------------- */
.input, .select {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font); font-size: 14px;
  transition: border-color .14s ease;
}
.input:focus, .select:focus { outline: none; border-color: var(--pink); }
.input::placeholder { color: var(--text-3); }
.field { margin-bottom: 14px; }
.field > .lbl { display: block; margin-bottom: 6px; }

/* input con sufijo (moneda) */
.input-affix {
  display: flex; align-items: center;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.input-affix:focus-within { border-color: var(--pink); }
.input-affix .input { border: none; background: transparent; height: 38px; }
.input-affix .affix { padding: 0 12px; color: var(--text-2); font-size: 13px; white-space: nowrap; }

/* ---------------- Badges / pills ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  background: var(--bg-3); color: var(--text-2);
}
.badge-pink { background: var(--pink-soft); color: var(--pink); }
.badge-buy { background: var(--buy-bg); color: var(--buy); }
.badge-sell { background: var(--sell-bg); color: var(--sell); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-on { background: var(--buy); box-shadow: 0 0 0 3px var(--buy-bg); }
.dot-off { background: var(--text-3); }

/* ---------------- Segmented control (tabs) ---------------- */
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg button {
  border: none; background: transparent; color: var(--text-2);
  height: 30px; padding: 0 14px; border-radius: 5px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500; transition: all .12s;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--bg-hover); color: var(--text); }
.seg-buy button.active { background: var(--buy-bg); color: var(--buy); }
.seg-sell button.active { background: var(--sell-bg); color: var(--sell); }

/* tabs underline (estilo KuCoin) */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); }
.tabs button {
  border: none; background: none; cursor: pointer;
  color: var(--text-2); font-family: var(--font); font-size: 13.5px; font-weight: 500;
  padding: 11px 0; position: relative; transition: color .12s;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); }
.tabs button.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--pink); border-radius: 2px;
}

/* ---------------- Tablas ---------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; color: var(--text-3); font-weight: 500; font-size: 12px;
  padding: 8px 12px; white-space: nowrap; position: sticky; top: 0; background: var(--bg-1);
}
.tbl td { padding: 9px 12px; border-top: 1px solid var(--border-soft); white-space: nowrap; }
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl-empty { text-align: center; color: var(--text-3); padding: 28px 0; }

/* ---------------- Range slider (apalancamiento) ---------------- */
input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; background: var(--bg-3); border-radius: 4px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--pink); cursor: pointer; border: 2px solid var(--bg); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--pink); cursor: pointer; border: 2px solid var(--bg); }

/* ---------------- Layout helpers ---------------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 1px; } .gap-2 { gap: 2px; } .gap-3 { gap: 3px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }

/* spinner */
.spin { width: 18px; height: 18px; border: 2px solid var(--bg-3); border-top-color: var(--pink); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.fade { animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* toast */
.toast-wrap { position: absolute; top: 70px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--pink); border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow); min-width: 260px; }
.toast.ok { border-left-color: var(--buy); }
.toast.err { border-left-color: var(--sell); }

/* Login antiguo: spinner + footer transparente */
.loading-spinner {
  width: 2.5rem; height: 2.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: sp 1.2s cubic-bezier(0.5, 0.1, 0.5, 1) infinite;
}
.app-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0.75rem 0;
  text-align: center;
  color: var(--text-2);
  font-size: 0.78rem;
}

/* ============================================================================
   RESPONSIVE — élite, todo visible, sin ocultar datos
   ============================================================================ */
.term-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
.grid-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.chart-box { height: 470px; }
.side-list { height: 470px; overflow-y: auto; }
.modal-card { width: 440px; max-width: calc(100vw - 24px); }

/* Barra de navegación inferior (solo móvil) */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; height: 58px;
  background: var(--bg-1); border-top: 1px solid var(--border);
  z-index: 120;
}
.bottom-nav button {
  flex: 1; background: none; border: none; color: var(--text-2); cursor: pointer;
  font-family: var(--font); font-size: 11.5px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.bottom-nav button.active { color: var(--pink); }
.bottom-nav button svg { width: 19px; height: 19px; }

/* Tablet / pantallas medianas: apilar columnas */
@media (max-width: 920px) {
  .term-grid, .grid-split { grid-template-columns: 1fr; }
  .chart-box { height: 360px; }
  .side-list { height: auto; max-height: 440px; }
}

/* Móvil */
@media (max-width: 640px) {
  .nav-desktop { display: none !important; }
  .bottom-nav { display: flex; }
  .app-main { padding-bottom: 66px; }   /* hueco para la barra inferior */
  .hide-sm { display: none !important; }
  .chart-box { height: 300px; }
  .side-list { height: auto; max-height: none; overflow: visible; }
  .page-pad { padding: 10px !important; }
  .topbar { padding: 10px 12px !important; gap: 10px !important; }
  .h1 { font-size: 19px; }
  .card { padding: 14px; }
  .toast-wrap { left: 12px; right: 12px; top: 64px; }
  .toast { min-width: 0; width: 100%; }
}
@media (max-width: 420px) {
  .chart-box { height: 260px; }
  .seg button { padding: 0 9px; font-size: 12px; }
}

/* Particles Canvas Styles */
.particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Additional particle layers with pure CSS */
.particles-layer-3 {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle 1px at 12% 18%, rgba(236, 72, 153, 0.9), transparent 1px),
    radial-gradient(circle 1px at 88% 22%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 34% 42%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 76% 58%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 22% 68%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 64% 78%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 42% 88%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 82% 32%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 18% 52%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 56% 12%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 92% 72%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 28% 38%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 68% 48%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 8% 82%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 48% 28%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 72% 92%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 38% 62%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 84% 8%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 52% 72%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 96% 42%, rgba(190, 24, 93, 0.9), transparent 1px);
  background-size: 400px 400px, 450px 450px, 420px 420px, 480px 480px, 400px 400px,
                   450px 450px, 420px 420px, 480px 480px, 400px 400px, 450px 450px,
                   420px 420px, 480px 480px, 400px 400px, 450px 450px, 420px 420px,
                   480px 480px, 400px 400px, 450px 450px, 420px 420px, 480px 480px;
  animation: particlesLayer3 35s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

@keyframes particlesLayer3 {
  0% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
  25% {
    transform: translate(-2%, 3%);
    opacity: 0.85;
  }
  50% {
    transform: translate(2%, -2%);
    opacity: 0.6;
  }
  75% {
    transform: translate(-3%, -3%);
    opacity: 0.8;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
}

/* Ambient glow effect rosa */
@keyframes ambientGlow {
  0%, 100% {
    box-shadow: 0 0 100px rgba(236, 72, 153, 0.15),
                0 0 200px rgba(219, 39, 119, 0.1);
  }
  50% {
    box-shadow: 0 0 150px rgba(219, 39, 119, 0.15),
                0 0 250px rgba(236, 72, 153, 0.1);
  }
}

/* Estilos para los efectos visuales */

/* Estilos para el efecto de humo en el cursor */
.cursor-smoke-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  display: block !important;
  background: transparent !important;
  will-change: transform; /* Optimización para rendimiento */
  isolation: isolate; /* Asegura que el efecto se renderiza apropiadamente */
  /* Asegura que el contenedor no es afectado por cambios en la navegación */
  transition: none !important;
}

.cursor-trail {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 0.8;
  animation: smoke 1.5s ease-out forwards;
  mix-blend-mode: screen;
  filter: blur(1px);
  pointer-events: none;
  z-index: 10000;
  will-change: opacity, transform; /* Mejora el rendimiento de la animación */
  contain: layout style paint; /* Mejora aún más el rendimiento en producción */
}

@keyframes smoke {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2) translate(0, -10px);
    opacity: 0;
  }
}

/* Estilos para el fondo animado del login */
.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    225deg,
    var(--bs-dark) 0%,
    var(--bs-epic-purple-dark) 25%,
    var(--bs-dark) 50%,
    var(--bs-epic-purple) 75%,
    var(--bs-dark) 100%
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  overflow: hidden;
}

.animated-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%23ffffff%27 fill-opacity=%270.03%27%3E%3Cpath d=%27M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z%27 /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
}

.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.login-card {
  backdrop-filter: blur(10px);
  background-color: rgba(15, 15, 15, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.3s ease;
}

/* Estilos para el botón de Google - sin efectos */
.btn-google {
  position: relative;
  z-index: 5;
  transition: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.btn-google:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.btn-google:active {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Efecto de partículas flotantes */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: -1;
  will-change: transform, opacity;
  transition: opacity 0.2s ease;
  animation: twinkle 4s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: var(--base-opacity, 0.5);
  }
  50% {
    opacity: calc(var(--base-opacity, 0.5) * 0.5);
  }
  100% {
    opacity: var(--base-opacity, 0.5);
  }
}