/* ═══════════════════════════════════════════════════
   LETRA TOOL — TEMA GLOBAL NEGRO / DORADO v5
   Cargado DESPUÉS del <style> inline → gana en cascada
═══════════════════════════════════════════════════ */

/* ── VARIABLES GLOBALES ── */
:root {
  /* reemplaza todos los colores rosa/morado inline */
  --pink:    #d4af37 !important;
  --purple:  #b8960c !important;
  --tg:      #d4af37 !important;
  --live:    #f0d060 !important;
  --teal:    #f0d060 !important;
  --accent:  #d4af37 !important;
  --accent2: #b8960c !important;
  --glow:    rgba(212,175,55,.5) !important;
  --orange:  #d4af37 !important;
  --red:     #c0392b !important;

  --bg:      #030200 !important;
  --bg2:     #050400 !important;
  --panel:   #080600 !important;
  --panel2:  #0d0a00 !important;
  --border:  rgba(212,175,55,.2) !important;

  --txt:     #f0e0b0 !important;
  --text:    #f0e0b0 !important;
  --dim:     #6b5520 !important;

  /* bin-lookup compat */
  --gold:    #d4af37 !important;
  --gold2:   #f0d060 !important;
  --gold3:   #8b6914 !important;
  --txt2:    #6b5520 !important;

  /* color-accent genérico */
  --color-accent: #d4af37 !important;
  --accent-soft:  rgba(212,175,55,.18) !important;
  --accent-dark:  rgba(212,175,55,.30) !important;
  --accent-dim:   rgba(212,175,55,.42) !important;
}

/* ── FONDO GLOBAL ── */
html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  height: auto !important;
}
html, body, #root,
[class*="app"], [class*="App"],
[class*="layout"], [class*="main"], [class*="wrapper"],
.wrap {
  background-color: #030200 !important;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(212,175,55,.05), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(180,140,30,.04), transparent 45%) !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
}
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
}
.content {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* ── NAVEGACIÓN ── */
nav, [class*="nav"], [class*="sidebar"] {
  background: rgba(3,2,0,.98) !important;
  border-color: rgba(212,175,55,.22) !important;
}
.nav-back, a.nav-back {
  border-color: rgba(212,175,55,.22) !important;
  color: #6b5520 !important;
}
.nav-back:hover, a.nav-back:hover {
  color: #d4af37 !important;
  border-color: rgba(212,175,55,.5) !important;
}
.logo-text, .logo, .brand-name {
  background: linear-gradient(90deg,#d4af37,#b8960c) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.status-dot, .nav-dot {
  background: #d4af37 !important;
  box-shadow: 0 0 10px rgba(212,175,55,.8) !important;
}

/* ── PANELES / CARDS ── */
.panel, .stat, .stat-item, .stat-card,
.stat-mini, .tool-card, .fnv-card,
.input-panel, .filters-panel, .results-panel,
.bins-panel, .modal, .toolbar,
[class*="panel"]:not(nav),
[class*="card"]:not(.nav-back) {
  background: #080600 !important;
  border-color: rgba(212,175,55,.2) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.5) !important;
}
.panel-h, .panel-header, .panel-title,
.results-title, .results-header,
.stat-v, .stat-num {
  color: #d4af37 !important;
}
.panel-header, .results-header {
  background: rgba(212,175,55,.03) !important;
  border-color: rgba(212,175,55,.18) !important;
}

/* ── BOTONES ── */
button {
  border-color: rgba(212,175,55,.35) !important;
  color: #d4af37 !important;
}
button:hover {
  border-color: rgba(212,175,55,.65) !important;
  box-shadow: 0 0 10px rgba(212,175,55,.2) !important;
}
.btn-tg, .btn-main, .btn-full,
[class*="btn-primary"] {
  background: rgba(212,175,55,.12) !important;
  border-color: rgba(212,175,55,.5) !important;
  color: #d4af37 !important;
}
.btn-tg:hover, .btn-main:hover {
  background: rgba(212,175,55,.22) !important;
  box-shadow: 0 0 16px rgba(212,175,55,.2) !important;
}
.btn-red {
  background: transparent !important;
  border-color: rgba(192,57,43,.4) !important;
  color: #c0392b !important;
}
.btn-dim, .btn-ghost {
  border-color: rgba(212,175,55,.18) !important;
  color: #6b5520 !important;
  background: transparent !important;
}
.btn-dim:hover, .btn-ghost:hover {
  color: #d4af37 !important;
}

/* ── TEXTAREA / INPUTS / SELECTS ── */
textarea,
input:not([type="checkbox"]):not([type="radio"]),
select {
  background: rgba(8,6,0,.6) !important;
  color: #d4af37 !important;
  border-color: rgba(212,175,55,.25) !important;
}
textarea:focus, input:focus, select:focus {
  border-color: rgba(212,175,55,.6) !important;
  box-shadow: 0 0 8px rgba(212,175,55,.15) !important;
}
textarea::placeholder, input::placeholder {
  color: #6b5520 !important;
  opacity: 1 !important;
}

/* ── TABLA ── */
table  { border-color: rgba(212,175,55,.18) !important; }
thead tr { background: rgba(0,0,0,.6) !important; }
th {
  color: #8b6914 !important;
  border-color: rgba(212,175,55,.18) !important;
  letter-spacing: .1em;
}
th:hover { color: #d4af37 !important; }
td { border-color: rgba(212,175,55,.07) !important; }
tr:hover td { background: rgba(212,175,55,.025) !important; }
.td-bin { color: #d4af37 !important; text-shadow: 0 0 10px rgba(212,175,55,.2) !important; }
.td-bank { color: #6b5520 !important; }
.td-country { color: #6b5520 !important; }

/* ── STATS ── */
.stat-l, .stat-lbl, .brand-sub, .logo-sub,
.nav-right, .fnv-s, .card-desc, .card-arrow,
.dim, [class*="dim"] {
  color: #6b5520 !important;
}

/* ── DROP ZONE ── */
.drop {
  border-color: rgba(212,175,55,.3) !important;
}
.drop:hover {
  border-color: #d4af37 !important;
  background: rgba(212,175,55,.04) !important;
}
.drop-t { color: #6b5520 !important; }

/* ── LOGOS / ACENTOS ── */
.logo-text, .logo, .brand-name,
[class*="logo-text"] {
  color: #d4af37 !important;
}

.tool-card {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  cursor: pointer !important;
}
a.tool-card { text-decoration: none !important; }
.tool-card:hover {
  border-color: rgba(212,175,55,.55) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 20px rgba(212,175,55,.12) !important;
}
.tool-card::before {
  background: radial-gradient(circle at 50% 0, rgba(212,175,55,.07), transparent 70%) !important;
}
.card-icon {
  background: rgba(212,175,55,.1) !important;
  border-color: rgba(212,175,55,.25) !important;
}
.card-name { color: #f0e0b0 !important; }
.tag {
  background: rgba(212,175,55,.06) !important;
  color: #8b6914 !important;
  border-color: rgba(212,175,55,.15) !important;
}
.card-badge.badge-activo, .card-badge.badge-nuevo {
  background: rgba(212,175,55,.1) !important;
  color: #d4af37 !important;
  border-color: rgba(212,175,55,.3) !important;
}
.card-badge.badge-beta {
  background: rgba(180,140,30,.1) !important;
  color: #b8960c !important;
  border-color: rgba(180,140,30,.3) !important;
}

/* ── CHATS LIST ── */
.chats-list { color: #8b6914 !important; }

/* ── CONSOLA ── */
.console {
  background: rgba(0,0,0,.6) !important;
  border-color: rgba(212,175,55,.18) !important;
}
.log-ok   { color: #d4af37 !important; }
.log-err  { color: #c0392b !important; }
.log-info { color: #f0d060 !important; }

/* ── BORDES / DIVISORES ── */
nav, .panel, .stat, .toolbar, .drop,
.bins-overlay .bins-panel,
.modal-overlay .modal {
  border-color: rgba(212,175,55,.2) !important;
}
hr, [class*="divider"], [class*="separator"] {
  border-color: rgba(212,175,55,.25) !important;
}

/* ── SCROLLBARS ── */
::-webkit-scrollbar-track { background: #0a0800 !important; }
::-webkit-scrollbar-thumb { background: rgba(180,140,30,.3) !important; }
::-webkit-scrollbar-thumb:hover { background: #d4af37 !important; }

/* ── FNV CARDS (acciones) ── */
.fnv-card:hover {
  border-color: rgba(212,175,55,.6) !important;
  background: rgba(212,175,55,.05) !important;
  box-shadow: 0 0 14px rgba(212,175,55,.12) !important;
}
.fnv-t { color: #d4af37 !important; }
.fnv-s { color: #6b5520 !important; }

/* ── MODALS ── */
.modal-overlay .modal,
.bins-overlay .bins-panel {
  background: #080600 !important;
  border-color: rgba(212,175,55,.3) !important;
  box-shadow: 0 0 40px rgba(212,175,55,.12) !important;
}

/* ── ANIMACIÓN PULSE ── */
@keyframes pulse {
  0%,100%{ opacity:1; box-shadow:0 0 12px rgba(212,175,55,.8) }
  50%    { opacity:.4; box-shadow:0 0 4px rgba(212,175,55,.3) }
}

/* ── LINKS ── */
a { color: #d4af37 !important; }
a:hover { color: #f0d060 !important; }

/* ── TEXTO GENERAL ── */
p, li, label { color: #c8a870; }

/* ── STATS HEADER (menu) ── */
.header h1 span, .stat-num, .stat-v, .logo-text { color: #d4af37 !important; }
.header h1 { color: #f0e0b0 !important; }
.header p { color: #6b5520 !important; }
.header-line {
  background: linear-gradient(90deg,transparent,#d4af37,transparent) !important;
}
.section-title { color: #6b5520 !important; }
footer { color: #6b5520 !important; border-color: rgba(212,175,55,.2) !important; }

/* ── BINS OVERLAY ── */
.bins-head-title, .bins-head-sub { color: #d4af37 !important; }
.bin-num { color: #d4af37 !important; }
.bins-footer-clear { color: #d4af37 !important; }
.bins-type-btn.active-all {
  background: rgba(212,175,55,.1) !important;
  border-color: rgba(212,175,55,.5) !important;
  color: #d4af37 !important;
}

/* ── BADGE STATUS ── */
.badge { background: rgba(212,175,55,.1) !important; color: #d4af37 !important; border-color: rgba(212,175,55,.25) !important; }
.mode-badge { border-color: rgba(212,175,55,.3) !important; }
.mode-basic { background: rgba(212,175,55,.1) !important; color: #d4af37 !important; }
.mode-full  { background: rgba(180,140,30,.1) !important; color: #b8960c !important; border-color: rgba(180,140,30,.35) !important; }

/* ── MATRIX RAIN filter ── */
#matrix, #rain, canvas {
  filter: sepia(1) hue-rotate(5deg) saturate(1.2) brightness(0.6) !important;
}

/* ── CHECKERS CARD ── */
.fnv-card-checkers {
  border-color: rgba(212,175,55,.55) !important;
  background: rgba(212,175,55,.06) !important;
}
.fnv-card-checkers .fnv-card-title {
  color: #f0d060 !important;
}
.fnv-card-checkers:hover {
  background: rgba(212,175,55,.12) !important;
  box-shadow: 0 0 18px rgba(212,175,55,.25) !important;
}

/* ── ANTI-CACHE FALLBACK ── */
[style*="#ff2d9a"] { color: #d4af37 !important; }
[style*="#9d00ff"] { color: #b8960c !important; }
[style*="#c77dff"] { color: #f0d060 !important; }
[style*="#ffd6f5"] { color: #f0e0b0 !important; }
[style*="#08060e"] { background-color: #030200 !important; }