/* ============================================================================
   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
   ============================================================================ */
/* Altura fluida del terminal: se adapta al alto de la ventana (compacto en
   portátiles, aprovecha pantallas grandes, sin scroll muerto) */
.term-grid, .grid-split { --term-h: clamp(300px, calc(100vh - 330px), 560px); }
.term-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px 320px; gap: 10px; align-items: stretch; }
.grid-split { display: grid; grid-template-columns: minmax(0, 1.5fr) 200px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.chart-box { height: var(--term-h, 470px); }
.book-box { height: var(--term-h, 470px); overflow: hidden; }
.side-list { height: var(--term-h, 470px); overflow-y: auto; overscroll-behavior: contain; }
.modal-card { width: 440px; max-width: calc(100vw - 24px); }

/* Separador vertical de la barra de métricas */
.vdiv { width: 1px; align-self: stretch; background: var(--border-soft); }

/* La topbar (con el selector de par) siempre por encima de los paneles
   siguientes: su desplegable no debe quedar bajo el gráfico */
.topbar { position: relative; z-index: 40; }

/* Fila nueva en el historial (orden recién ejecutada): entrada + resplandor */
@keyframes op-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes op-glow { 0% { background: rgba(255, 47, 160, 0.16); } 100% { background: transparent; } }
.op-new td { animation: op-in 0.35s ease-out, op-glow 2.6s ease-out; }

/* 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; }

/* Portátil / anchos justos: columnas laterales más estrechas */
@media (max-width: 1280px) {
  .term-grid { grid-template-columns: minmax(0, 1fr) 180px 300px; }
  .grid-split { grid-template-columns: minmax(0, 1.35fr) 180px minmax(0, 1fr); }
}

/* Tablet grande: panel de orden a ancho completo bajo gráfico + libro */
@media (max-width: 1024px) {
  .term-grid { grid-template-columns: minmax(0, 1fr) 180px; }
  .term-grid > :nth-child(3) { grid-column: 1 / -1; }
  .grid-split { grid-template-columns: minmax(0, 1fr) 180px; }
  .grid-split > .side-list { grid-column: 1 / -1; height: auto; max-height: 420px; }
  .term-grid, .grid-split { --term-h: clamp(280px, calc(100vh - 360px), 480px); }
}

/* Tablet / pantallas medianas: apilar columnas */
@media (max-width: 920px) {
  .term-grid, .grid-split { grid-template-columns: 1fr; }
  .term-grid > :nth-child(3) { grid-column: auto; }
  .chart-box { height: clamp(280px, 44vh, 400px); }
  .book-box { height: 300px; }
  .side-list { height: auto; max-height: 420px; }
}

/* 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: clamp(240px, 40vh, 340px); }
  .side-list { height: auto; max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .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: clamp(220px, 36vh, 300px); }
  .seg button { padding: 0 9px; font-size: 12px; }
}

/* ============================================================================
   PULIDO VISUAL — micro-animaciones y acabado moderno (Bots Grid y global)
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .anim-rise { animation: rise-in 0.45s cubic-bezier(0.22, 0.9, 0.32, 1) both; }

  /* Latido del punto de bot activo */
  @keyframes dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(31, 214, 160, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(31, 214, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(31, 214, 160, 0); }
  }
  .dot-on { animation: dot-pulse 2.2s ease-out infinite; }

  /* Modal con entrada tipo spring + fundido del fondo */
  @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
  .modal-overlay { animation: overlay-in 0.18s ease-out; }
  .modal-card { animation: modal-in 0.3s cubic-bezier(0.2, 0.85, 0.3, 1.05); }
}

/* Botones con respuesta táctil */
.btn { transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-pink:hover { box-shadow: 0 4px 14px rgba(255, 46, 126, 0.15); }

/* Tarjetas de bot (lista de la pestaña Bots Grid) */
.bot-card {
  margin: 5px 8px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-1);
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.bot-card:hover {
  transform: translateY(-2px);
  border-color: rgba(160, 160, 173, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

/* Chips de cartera */
.chip-coin { transition: transform 0.15s ease, border-color 0.2s ease; }
.chip-coin:hover { transform: translateY(-1px); border-color: rgba(160, 160, 173, 0.55); }

/* Tablas: cabecera fija al hacer scroll + hover de fila con acento */
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-1); }
.tbl tbody tr { transition: background 0.15s ease, box-shadow 0.15s ease; }
.tbl tbody tr:hover { background: transparent; box-shadow: inset 0 0 0 1px rgba(160, 160, 173, 0.45); }

/* ============================================================================
   CAPA macOS — mismos colores Onion (negro + rosa), lenguaje visual de Mac:
   tipografía del sistema, hairlines, vidrio esmerilado, sombras por capas,
   controles con relieve sutil, scrollbars finos y anillos de foco.
   ============================================================================ */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI Variable', 'Segoe UI', 'Inter', sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --radius: 12px;
  --radius-sm: 9px;
  --hairline: rgba(255, 255, 255, 0.09);
  --glass-top: rgba(255, 255, 255, 0.045);
}
[data-theme="light"] {
  --hairline: rgba(0, 0, 0, 0.10);
  --glass-top: rgba(255, 255, 255, 0.65);
}

/* Paneles y cards: material con luz superior y hairline (vidrio en capas) */
.panel, .card {
  border-color: var(--hairline);
  background-image: linear-gradient(180deg, var(--glass-top), transparent 42%);
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 30px rgba(0, 0, 0, 0.22);
}
[data-theme="light"] .panel, [data-theme="light"] .card {
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.85) inset, 0 8px 24px rgba(20, 20, 30, 0.07);
}

/* Botones con relieve mac (luz arriba, sombra abajo) */
.btn {
  border-color: var(--hairline);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.18), 0 0.5px 0 rgba(255, 255, 255, 0.07) inset;
}
[data-theme="light"] .btn { box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.07), 0 0.5px 0 rgba(255, 255, 255, 0.9) inset; }
.btn-pink {
  background: var(--pink-soft);
  background-image: none;
  border-color: var(--pink-border);
  color: var(--pink);
  box-shadow: none;
}
.btn-pink:hover { background: rgba(255, 46, 126, 0.2); color: var(--pink); }
.btn-ghost { background-image: none; box-shadow: none; border-color: transparent; }
.btn:focus-visible, .input:focus-visible, .select:focus-visible, .seg button:focus-visible {
  outline: 3px solid var(--pink-soft);
  outline-offset: 1px;
}

/* Control segmentado estilo mac: pista rehundida + pastilla elevada */
.seg {
  background: rgba(0, 0, 0, 0.28);
  border-color: var(--hairline);
  box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
[data-theme="light"] .seg { background: rgba(0, 0, 0, 0.055); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); }
.seg button { border-radius: 7px; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.seg button.active {
  background: var(--bg-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0.5px 0 rgba(255, 255, 255, 0.09) inset;
}
[data-theme="light"] .seg button.active { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* Inputs rehundidos con anillo de foco */
.input, .select {
  border-color: var(--hairline);
  background-color: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  border-radius: 9px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="light"] .input, [data-theme="light"] .select { background-color: #ffffff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); }
.input:focus, .select:focus { border-color: var(--pink); box-shadow: 0 0 0 3.5px var(--pink-soft); }

/* Barra superior y barra inferior móvil: vidrio esmerilado (menu bar de mac) */
.mac-header {
  background: color-mix(in srgb, var(--bg-1) 76%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.bottom-nav {
  background: color-mix(in srgb, var(--bg-1) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}

/* Logo KODAMA: rombo rosa (cuadrado a 45º, esquinas apuntando N y S)
   con la K blanca recta, centrada y al máximo tamaño sin salirse */
.logo-tile {
  width: 28px; height: 28px;
  border-radius: 6px;
  transform: rotate(45deg);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pink-hover), var(--pink));
  border: none;
  box-shadow: 0 2px 10px rgba(255, 46, 126, 0.35), 0 0.5px 0 rgba(255, 255, 255, 0.35) inset;
  margin: 0 5px;
  flex-shrink: 0;
}
.logo-k {
  transform: rotate(-45deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* Tarjetas de bot: material mac */
.bot-card {
  border-color: var(--hairline);
  background-image: linear-gradient(180deg, var(--glass-top), transparent 45%);
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 14px rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .bot-card { box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 12px rgba(20, 20, 30, 0.06); }

/* Botones de icono de las tarjetas (uniformes, tipo toolbar de mac) */
.icon-btn { width: 34px; padding: 0 !important; }

/* Modal: hoja de mac (radio grande + sombra profunda) */
.modal-card {
  border-radius: 16px;
  border-color: var(--hairline);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0.5px 0 rgba(255, 255, 255, 0.08) inset;
}
[data-theme="light"] .modal-card { box-shadow: 0 24px 70px rgba(20, 20, 30, 0.18), 0 0.5px 0 #ffffff inset; }

/* Scrollbars finos estilo mac */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 173, 0.35);
  border-radius: 8px;
  border: 2.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(160, 160, 173, 0.6); border: 2.5px solid transparent; background-clip: content-box; }

/* Mini-carrusel de las tarjetas de bot */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ticker-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .ticker-slide { animation: ticker-in 0.4s ease; }
}

/* 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);
  }
}