/* WebDealer26 - Tema oscuro editable
   Puedes cambiar estos colores fácilmente sin tocar las vistas.
*/
:root {
  --wd-bg: #050505;
  --wd-surface: #0b0b0b;
  --wd-surface-2: #111111;
  --wd-card: #141414;
  --wd-text: #f5f5f5;
  --wd-text-soft: #b8b8b8;
  --wd-border: #242424;
  --wd-accent: #e11d2e;       /* rojo principal */
  --wd-accent-2: #ffffff;     /* blanco de contraste */
  --wd-hero-left: #0a0a0a;    /* bloque izquierdo banner */
  --wd-overlay: rgba(0, 0, 0, 0.35);
}

/* Fondo general */
body {
  background-color: var(--wd-bg) !important;
  color: var(--wd-text) !important;
}

/* Header */
header {
  background: #0a0a0aee !important;
  border-color: var(--wd-border) !important;
}

header a,
header span {
  color: var(--wd-text) !important;
}

/* Hero */
.wd-hero-dark {
  background: var(--wd-surface) !important;
  border-top: 1px solid var(--wd-border) !important;
}

.wd-hero-dark .wd-hero-left {
  background: var(--wd-hero-left) !important;
}

.wd-hero-dark .wd-hero-title {
  color: var(--wd-accent-2) !important;
}

.wd-hero-dark .wd-hero-input {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #fff !important;
}

.wd-hero-dark .wd-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wd-overlay);
  pointer-events: none;
}

/* Secciones y tarjetas */
section {
  background-color: var(--wd-bg) !important;
  color: var(--wd-text) !important;
}

.bg-surface-white,
.bg-surface-container-low,
.bg-surface-container-lowest,
.bg-surface-container-high,
.bg-surface-bright {
  background-color: var(--wd-surface) !important;
}

.border-outline-variant,
.border-outline-variant\/30,
.border-outline-variant\/50 {
  border-color: var(--wd-border) !important;
}

.text-deep-navy,
.text-on-surface-variant,
.text-on-background,
.text-on-surface {
  color: var(--wd-text) !important;
}

.opacity-60,
.opacity-70,
.opacity-80 {
  color: var(--wd-text-soft) !important;
  opacity: 1 !important;
}

/* Acentos */
.text-electric-blue {
  color: var(--wd-accent) !important;
}
.bg-electric-blue {
  background-color: var(--wd-accent) !important;
  color: var(--wd-accent-2) !important;
}
.bg-electric-blue:hover {
  background-color: color-mix(in srgb, var(--wd-accent) 85%, black) !important;
}

.border-electric-blue {
  border-color: var(--wd-accent) !important;
}

.text-red-400,
.text-red-600,
.text-red-700 {
  color: #f87171 !important;
}

.bg-red-50 {
  background-color: rgba(248, 113, 113, 0.12) !important;
}

.border-red-200,
.border-red-600 {
  border-color: rgba(248, 113, 113, 0.45) !important;
}

.text-green-700 {
  color: #4ade80 !important;
}

.bg-green-50 {
  background-color: rgba(74, 222, 128, 0.12) !important;
}

.border-green-200 {
  border-color: rgba(74, 222, 128, 0.45) !important;
}

a:hover {
  color: var(--wd-accent) !important;
}

/* Botones principales */
.bg-deep-navy {
  background-color: #121212 !important;
  color: var(--wd-text) !important;
  border: 1px solid var(--wd-border) !important;
}

.bg-deep-navy:hover {
  background-color: #1a1a1a !important;
}