/* 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,
.bg-electric-blue {
  color: var(--wd-accent) !important;
  background-color: color-mix(in srgb, var(--wd-accent) 15%, transparent) !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;
}