/* ========================================================================== 
   LUX CRIPTOS UI V3 · 2026
   Sistema visual global no destructivo.
   Oscuro: azul gris suave. Claro: crema cálido.
   ========================================================================== */

:root {
  --lux-bg: #151a20;
  --lux-bg-2: #1a2027;
  --lux-surface: #20272f;
  --lux-surface-2: #252d36;
  --lux-surface-3: #2b3440;
  --lux-border: rgba(185, 199, 213, .13);
  --lux-border-strong: rgba(185, 199, 213, .22);
  --lux-text: #f2f4f6;
  --lux-muted: #aeb8c2;
  --lux-faint: #7f8b97;
  --lux-accent: #c8a85a;
  --lux-accent-strong: #dfbf6a;
  --lux-accent-soft: rgba(200, 168, 90, .12);
  --lux-blue: #91a9bd;
  --lux-blue-soft: rgba(145, 169, 189, .12);
  --lux-success: #58b892;
  --lux-danger: #e07878;
  --lux-warning: #d6aa55;
  --lux-shadow: 0 12px 30px rgba(4, 7, 10, .20);
  --lux-shadow-soft: 0 6px 18px rgba(4, 7, 10, .14);
  --lux-radius: 14px;
  --lux-radius-sm: 10px;
  --lux-control: 42px;
  color-scheme: dark;
}

html[data-theme="light"] {
  --lux-bg: #eee9df;
  --lux-bg-2: #f4efe6;
  --lux-surface: #fbf8f1;
  --lux-surface-2: #f5f0e7;
  --lux-surface-3: #ece5da;
  --lux-border: rgba(88, 82, 72, .13);
  --lux-border-strong: rgba(88, 82, 72, .22);
  --lux-text: #292c30;
  --lux-muted: #676d73;
  --lux-faint: #8d918f;
  --lux-accent: #967536;
  --lux-accent-strong: #7f622d;
  --lux-accent-soft: rgba(150, 117, 54, .10);
  --lux-blue: #667f92;
  --lux-blue-soft: rgba(102, 127, 146, .10);
  --lux-success: #2d8668;
  --lux-danger: #b65757;
  --lux-warning: #9a772f;
  --lux-shadow: 0 12px 30px rgba(65, 57, 46, .09);
  --lux-shadow-soft: 0 5px 16px rgba(65, 57, 46, .07);
  color-scheme: light;
}

html { background: var(--lux-bg); }
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  color: var(--lux-text) !important;
  background: var(--lux-bg) !important;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(145,169,189,.08), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(200,168,90,.045), transparent 24%) !important;
  background-attachment: fixed !important;
}
body::before { background: transparent !important; opacity: 0 !important; }

html[data-theme="light"] body {
  background: var(--lux-bg) !important;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(102,127,146,.07), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(150,117,54,.055), transparent 24%) !important;
}

body, button, input, select, textarea, .form-control, .form-select {
  font-family: "Space Grotesk", "Manrope", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body, p, span, a, label, input, button, textarea, select, li {
  letter-spacing: 0 !important;
}
body, p, span, a, label, input, button, textarea, select {
  font-size: 14px !important;
}
p, span, li, a { line-height: 1.48 !important; }
h1 { font-size: clamp(1.8rem, 3vw, 2.35rem) !important; line-height: 1.12 !important; }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem) !important; line-height: 1.18 !important; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem) !important; line-height: 1.2 !important; }
h4, h5, h6 { font-size: 1rem !important; line-height: 1.28 !important; }
h1,h2,h3,h4,h5,h6 { color: var(--lux-text) !important; text-shadow: none !important; letter-spacing: -.015em !important; }
.text-light, .text-white { color: var(--lux-text) !important; }
.text-muted, .text-secondary { color: var(--lux-muted) !important; }
.text-info { color: var(--lux-blue) !important; }
.text-success { color: var(--lux-success) !important; }
.text-danger { color: var(--lux-danger) !important; }

/* Superficies y tarjetas */
.card, .dashboard-card, .bot-card, .equipo-card, .referral-card, .custom-vip-card,
.lux-feed-card, .lux-vip3-class-card, .lux-playbook-card, .lux-risk-strip,
.modal-content, .modalContent, .perfil-menu, .user-msg-card, .user-msg-notif {
  background: var(--lux-surface) !important;
  background-image: none !important;
  color: var(--lux-text) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: var(--lux-shadow-soft) !important;
}
.card::before, .dashboard-card::before, .bot-card::before, .lux-feed-card::before { opacity: .25 !important; }
.card:hover, .dashboard-card:hover, .bot-card:hover, .equipo-card:hover, .referral-card:hover, .custom-vip-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--lux-border-strong) !important;
  box-shadow: var(--lux-shadow) !important;
}

/* Menos ruido visual */
.dashboard-card, .bot-card, .card, .custom-vip-card { padding: 18px !important; }
.dashboard-card p, .bot-card p, .card p { color: var(--lux-muted) !important; }
.badge { border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important; }
.bg-dark { background: var(--lux-surface-2) !important; }
.bg-light { background: var(--lux-surface-2) !important; }
.border-secondary, .border-info { border-color: var(--lux-border) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--lux-shadow-soft) !important; }

/* Controles */
input, textarea, select, .form-control, .form-select, .input-group-text {
  min-height: var(--lux-control);
  border-radius: var(--lux-radius-sm) !important;
  background: var(--lux-surface-2) !important;
  border: 1px solid var(--lux-border) !important;
  color: var(--lux-text) !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--lux-faint) !important; }
input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus {
  background: var(--lux-surface-2) !important;
  color: var(--lux-text) !important;
  border-color: rgba(145,169,189,.52) !important;
  box-shadow: 0 0 0 3px var(--lux-blue-soft) !important;
}
.btn, button { border-radius: var(--lux-radius-sm) !important; box-shadow: none; }
.btn-primary, .btn-success, .vip-btn, .btn-vip-action, .lux-open-terminal {
  background: var(--lux-accent) !important;
  border-color: var(--lux-accent) !important;
  color: #17191c !important;
  font-weight: 700 !important;
}
.btn-primary:hover, .btn-success:hover, .vip-btn:hover, .btn-vip-action:hover, .lux-open-terminal:hover {
  background: var(--lux-accent-strong) !important;
  border-color: var(--lux-accent-strong) !important;
  transform: translateY(-1px);
}
.btn-outline-light, .btn-outline-secondary, .btn-secondary, .btn-dark {
  background: var(--lux-surface-2) !important;
  border-color: var(--lux-border) !important;
  color: var(--lux-text) !important;
}
.btn-outline-light:hover, .btn-outline-secondary:hover, .btn-secondary:hover, .btn-dark:hover {
  background: var(--lux-surface-3) !important;
  border-color: var(--lux-border-strong) !important;
  color: var(--lux-text) !important;
}

/* Dashboard navbar más limpio */
.lux-terminal-ui .navbar {
  background: color-mix(in srgb, var(--lux-bg-2) 94%, transparent) !important;
  border-bottom: 1px solid var(--lux-border) !important;
  box-shadow: 0 6px 22px rgba(4,7,10,.12) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  padding: .58rem 1rem !important;
}
.lux-terminal-ui .navbar .nav-link {
  color: var(--lux-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 9px !important;
  margin: 0 1px !important;
  border-radius: 8px !important;
}
.lux-terminal-ui .navbar .nav-link::after { display: none !important; }
.lux-terminal-ui .navbar .nav-link:hover { color: var(--lux-text) !important; background: var(--lux-blue-soft) !important; }
.lux-terminal-ui .navbar .nav-link.active { color: var(--lux-accent-strong) !important; background: var(--lux-accent-soft) !important; }
.lux-terminal-ui .navbar-nav > div[style*="border"] {
  border: 0 !important; background: transparent !important; padding: 0 !important; gap: 0 !important;
}
.lux-terminal-ui .container, .lux-terminal-ui .container-fluid { max-width: 1480px; }
.lux-terminal-ui .container-section { animation: luxSoftIn .2s ease both !important; }
@keyframes luxSoftIn { from { opacity: .55; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Feed, tablas e historial más compactos */
.table, .table-dark { --bs-table-bg: transparent !important; --bs-table-color: var(--lux-text) !important; --bs-table-border-color: var(--lux-border) !important; }
.table > :not(caption) > * > * { padding: .68rem .65rem !important; background: transparent !important; color: var(--lux-text) !important; border-color: var(--lux-border) !important; }
.table thead th { color: var(--lux-muted) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .055em !important; font-weight: 700 !important; }
.list-group, .list-group-item { background: transparent !important; color: var(--lux-text) !important; border-color: var(--lux-border) !important; }
.lux-feed-header, .lux-feed-footer { background: var(--lux-surface-2) !important; border-color: var(--lux-border) !important; }
.lux-feed-text { color: var(--lux-text) !important; }
.lux-comment-card { background: var(--lux-surface-2) !important; border-color: var(--lux-border) !important; }

/* Chat */
#chat-window { background: var(--lux-surface) !important; border: 1px solid var(--lux-border) !important; box-shadow: var(--lux-shadow) !important; }
#chat-header, #chat-form { background: var(--lux-surface-2) !important; color: var(--lux-text) !important; border-color: var(--lux-border) !important; }
#chat-messages { background: var(--lux-bg-2) !important; }
#chat-input { background: var(--lux-surface) !important; color: var(--lux-text) !important; }

/* Footer discreto */
footer, .footer-equipo { background: var(--lux-bg-2) !important; color: var(--lux-muted) !important; border-top: 1px solid var(--lux-border) !important; }
footer a, .footer-link { color: var(--lux-accent-strong) !important; }

/* Trading terminal */
html[data-theme] body:has(.app) {
  --tv-bg: var(--lux-bg);
  --tv-chart: var(--lux-bg-2);
  --tv-panel: var(--lux-surface);
  --tv-panel-2: var(--lux-surface-2);
  --tv-panel-hover: var(--lux-surface-3);
  --tv-border: var(--lux-border);
  --tv-border-strong: var(--lux-border-strong);
  --tv-text: var(--lux-text);
  --tv-text-muted: var(--lux-muted);
  --tv-text-dim: var(--lux-faint);
  --tv-blue: #7894aa;
  --tv-blue-hover: #8ca6ba;
  background: var(--lux-bg) !important;
}
.app, .header, .workspace, .watchlist, .right-sidebar, .bottom-bar, .toolbar, .chart-area,
.dropdown-content, .dialog, .context-menu, .settings-panel {
  border-color: var(--lux-border) !important;
}
.app { background: var(--lux-bg-2) !important; }
.header { background: var(--lux-surface) !important; box-shadow: 0 2px 12px rgba(4,7,10,.08); }
.header-control, .timeframe-btn, .tool-button { border-radius: 8px !important; }
.header-control:hover, .timeframe-btn:hover, .tool-button:hover { background: var(--lux-surface-3) !important; }
.timeframe-btn.active, .tool-button.active { background: var(--lux-blue-soft) !important; color: var(--lux-blue) !important; }
.market-status { color: var(--lux-success) !important; }
.dialog, .dropdown-content, .context-menu { background: var(--lux-surface) !important; box-shadow: var(--lux-shadow) !important; border: 1px solid var(--lux-border) !important; border-radius: 12px !important; }
.dialog-header { border-color: var(--lux-border) !important; }

/* Landing, login, register, recuperar, términos y admin */
body:not(.lux-terminal-ui):not(:has(.app)) .auth-card,
body:not(.lux-terminal-ui):not(:has(.app)) .login-container,
body:not(.lux-terminal-ui):not(:has(.app)) .register-container,
body:not(.lux-terminal-ui):not(:has(.app)) .container,
body:not(.lux-terminal-ui):not(:has(.app)) .panel,
body:not(.lux-terminal-ui):not(:has(.app)) .admin-card,
body:not(.lux-terminal-ui):not(:has(.app)) .hero-card {
  border-color: var(--lux-border) !important;
}
.lux-admin-ui { background: var(--lux-bg) !important; color: var(--lux-text) !important; }
.lux-admin-ui .admin-appbar, .lux-admin-ui .admin-panel, .lux-admin-ui .admin-card, .lux-admin-ui .card {
  background: var(--lux-surface) !important; border-color: var(--lux-border) !important; color: var(--lux-text) !important;
}

/* Toggle */
#lux-theme-toggle {
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 60000 !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--lux-border-strong) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--lux-surface) 94%, transparent) !important;
  color: var(--lux-text) !important;
  box-shadow: var(--lux-shadow-soft) !important;
  backdrop-filter: blur(14px) !important;
}
#lux-theme-toggle:hover { transform: translateY(-1px) !important; background: var(--lux-surface-2) !important; }
#lux-theme-toggle svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--lux-muted) 42%, transparent) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--lux-muted) 38%, transparent); border-radius: 99px; }

/* Mobile */
@media (max-width: 991px) {
  .lux-terminal-ui .navbar { padding: .5rem .7rem !important; }
  .lux-terminal-ui .navbar-collapse {
    margin-top: 8px !important;
    padding: 10px !important;
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-border) !important;
    border-radius: 12px !important;
    max-height: calc(100dvh - 80px);
    overflow: auto;
  }
  .lux-terminal-ui .navbar .nav-link { font-size: 14px !important; padding: 10px 12px !important; }
  .dashboard-card, .bot-card, .card, .custom-vip-card { padding: 15px !important; }
}

@media (max-width: 768px) {
  body, p, span, a, label, button { font-size: 14px !important; }
  input, textarea, select, .form-control, .form-select { font-size: 16px !important; }
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.42rem !important; }
  h3 { font-size: 1.18rem !important; }
  #lux-theme-toggle { top: 10px !important; right: 58px !important; width: 38px !important; height: 38px !important; min-height: 38px !important; }
  body:has(.app) #lux-theme-toggle { top: 5px !important; right: 6px !important; width: 36px !important; height: 36px !important; min-height: 36px !important; }
  .card:hover, .dashboard-card:hover, .bot-card:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Auth screens */
.login-card, .register-card, .access-card, .terms-card {
  background: var(--lux-surface) !important;
  color: var(--lux-text) !important;
  border: 1px solid var(--lux-border) !important;
  box-shadow: var(--lux-shadow) !important;
}
.login-section, .register-section, .access-panel { background: var(--lux-bg-2) !important; }
.brand-section, .login-visual {
  background:
    radial-gradient(circle at 30% 20%, rgba(145,169,189,.13), transparent 33%),
    linear-gradient(145deg, var(--lux-bg-2), var(--lux-bg)) !important;
  color: var(--lux-text) !important;
}
.subtitle, .register-text, .login-copy p, .terms-card p, .terms-card li { color: var(--lux-muted) !important; }
.btn-link, .back-link { color: var(--lux-blue) !important; }
.security-label { color: var(--lux-muted) !important; }

/* Public landing */
.topbar {
  background: color-mix(in srgb, var(--lux-bg-2) 92%, transparent) !important;
  border-color: var(--lux-border) !important;
  backdrop-filter: blur(18px) !important;
}
.hero, .section, .signals-section, .indicator-section { color: var(--lux-text) !important; }
.hero p, .section-intro p, .indicator-copy p { color: var(--lux-muted) !important; }
.workspace-window, .setup-card, .indicator-screen, .trade-panel {
  background: var(--lux-surface) !important;
  border-color: var(--lux-border) !important;
  box-shadow: var(--lux-shadow) !important;
}
.workspace-top, .workspace-bottom, .trade-panel-title, .indicator-screen-head {
  background: var(--lux-surface-2) !important;
  border-color: var(--lux-border) !important;
}
.desktop-nav a, .brand-meta, .workspace-symbol, .workspace-timeframe { color: var(--lux-muted) !important; }
.desktop-nav a:hover { color: var(--lux-text) !important; }
.hero-overline, .section-kicker { color: var(--lux-accent-strong) !important; }
.hero-login, .top-login { background: var(--lux-surface-2) !important; border-color: var(--lux-border) !important; color: var(--lux-text) !important; }
.hero-register, .top-register { background: var(--lux-accent) !important; border-color: var(--lux-accent) !important; color: #17191c !important; }

/* Terms and recovery */
.terms-wrapper, .terms-header, .terms-footer { color: var(--lux-text) !important; }
.terms-footer { border-color: var(--lux-border) !important; }
.lang-btn, #lang-toggle { background: var(--lux-surface) !important; border-color: var(--lux-border) !important; color: var(--lux-text) !important; }

/* Admin login */
.login-shell { background: var(--lux-surface) !important; border: 1px solid var(--lux-border) !important; box-shadow: var(--lux-shadow) !important; }
.access-panel { border-color: var(--lux-border) !important; }
.field label { color: var(--lux-muted) !important; }

/* Bootstrap overrides in light mode */
html[data-theme="light"] .navbar-dark .navbar-toggler-icon { filter: invert(.72); }
html[data-theme="light"] .table-dark { color: var(--lux-text) !important; }
html[data-theme="light"] .dropdown-menu { background: var(--lux-surface) !important; border-color: var(--lux-border) !important; }

/* Keep success and risk visually meaningful */
.bg-success, .badge.bg-success { background-color: color-mix(in srgb, var(--lux-success) 82%, transparent) !important; }
.bg-danger, .badge.bg-danger { background-color: color-mix(in srgb, var(--lux-danger) 82%, transparent) !important; }
.bg-warning, .badge.bg-warning { background-color: color-mix(in srgb, var(--lux-warning) 82%, transparent) !important; color: #17191c !important; }


/* ========================================================================== 
   LUX BRAND FIX · Logo real en acceso y portada
   ========================================================================== */
.lux-auth-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto 22px !important;
  width: fit-content !important;
  padding: 8px 12px 8px 8px !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--lux-surface-2) 88%, transparent) !important;
  box-shadow: 0 8px 24px rgba(4,7,10,.10) !important;
}
.lux-auth-logo {
  width: 58px !important;
  height: 58px !important;
  border-radius: 13px !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  border: 1px solid rgba(200,168,90,.30) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.20) !important;
  flex: 0 0 58px !important;
}
.lux-auth-logo-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.05 !important;
}
.lux-auth-logo-copy span {
  color: var(--lux-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.lux-auth-logo-copy small {
  color: var(--lux-accent-strong) !important;
  margin-top: 5px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

.lux-index-logo-wrap {
  width: 43px !important;
  height: 43px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 43px !important;
  border: 1px solid rgba(200,168,90,.28) !important;
  background: #111 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}
.lux-index-logo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 40% !important;
}

/* FIX sidebar: conserva separación entre icono y texto */
.lux-terminal-ui .navbar .nav-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 46px !important;
  padding: 12px 14px 12px 42px !important;
  font-size: 13px !important;
}
.lux-terminal-ui .navbar .nav-link::before {
  position: absolute !important;
  left: 14px !important;
  width: 18px !important;
  text-align: center !important;
}
.lux-terminal-ui .navbar .nav-link i {
  display: none !important;
}

@media (max-width: 640px) {
  .lux-auth-logo-wrap {
    margin-bottom: 16px !important;
    padding: 6px 10px 6px 6px !important;
  }
  .lux-auth-logo {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  .lux-auth-logo-copy span { font-size: 12px !important; }
  .lux-auth-logo-copy small { font-size: 7px !important; }
  .lux-index-logo-wrap {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
}