body.modo-oscuro {
  --color-fondo: #121212;
  --color-texto: #e0e0e0;
  --color-primario: #3399ff;
  --color-secundario: #1DB954;
  --color-alerta: #f4b400;
  --color-error: #ff4d4d;
  --color-card: #1e1e1e;
  --color-borde: #333;
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

body.modo-oscuro .header {
  background-color: #000;
  border-bottom-color: var(--color-primario);
}

body.modo-oscuro .filtro-header {
  background-color: #1a1a1a;
  border-bottom-color: #333;
}

body.modo-oscuro .tema-toggle {
  color: #fff;
}

body.modo-oscuro .product-card {
  background-color: var(--color-card);
  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.05);
}

body.modo-oscuro .product-info {
  border-top: 1px solid var(--color-borde);
}

body.modo-oscuro .modal-content,
body.modo-oscuro .offcanvas {
  background-color: var(--color-card);
  color: var(--color-texto);
}

body.modo-oscuro .offcanvas-header {
  border-bottom: 1px solid var(--color-borde);
}

body.modo-oscuro .offcanvas-actions button {
  background-color: #333;
  color: #fff;
}

body.modo-oscuro .footer {
  background-color: #000;
  color: #888;
}

body.modo-oscuro .barra-categorias {
  background-color: var(--color-card);
}

body.modo-oscuro .barra-categorias button {
  background-color: #1e1e1e;
  color: var(--color-texto);
  border-color: #333;
}

body.modo-oscuro .barra-categorias button:hover,
body.modo-oscuro .barra-categorias button.activa {
  background-color: var(--color-primario);
  color: #fff;
}

body.modo-oscuro .barra-categorias {
  background-color: var(--color-card);
}

body.modo-oscuro .barra-categorias button {
  background-color: #1e1e1e;
  color: var(--color-texto);
  border-color: #333;
}

body.modo-oscuro .barra-categorias button:hover,
body.modo-oscuro .barra-categorias button.activa {
  background-color: var(--color-primario);
  color: #fff;
}