/* Botón modo oscuro */
.dark-mode-button {
  width: 3rem;
  height: auto;
  display: block;
  margin: 3rem 0 2rem 0;
  filter: invert(100%);
  transition: transform 0.2s ease;
}

.dark-mode-button:hover {
  cursor: pointer;
  transform: scale(1.1); /* un pequeño efecto al pasar el ratón */
}

/* En tablet y superiores (aprox ≥768px) */
@media (min-width: 768px) {
  .dark-mode-button {
    margin-top: 0;
  }
}

.dark-mode {
  background-color: var(--grisOscuro);
  color: var(--blanco);
  transition: background-color 0.1s ease, color 0.3s ease;
}

/* Textos generales */
.dark-mode .noticia-contenido p,
.dark-mode p,
.dark-mode .tenista .puntos,
.dark-mode span,
.dark-mode a,
.dark-mode h1,
.dark-mode h2,
.dark-mode h4,
.dark-mode td,
.dark-mode .login h2 {
  color: var(--blanco);
}
.dark-mode h3,
.dark-mode .perfil-detalles .bold {
  color: var(--grisClaro);
}
.dark-mode .tenista-nombre span.nombre {
  color: var(--blanco);
}
.dark-mode header a,
.dark-mode .alerta-exito {
  color: var(--negro);
}
.dark-mode header .boton--cta2 {
  color: var(--blanco);
}
.dark-mode header.header-layout .navegacion-principal-layout a {
  color: var(--blanco);
}
.dark-mode header.header-layout .navegacion-principal-layout a:hover {
  color: var(--amarilloTenis);
}
/* Elementos destacados (como tarjetas o bloques de contenido) */
.dark-mode .anuncio,
.dark-mode .resumen-propiedad,
.dark-mode .tarjeta,
.dark-mode .noticia {
  background-color: rgba(30, 40, 90, 0.9);
  border: 1px solid var(--azul);
  color: var(--blanco);
}

/* Iconos e imágenes en modo oscuro */
.dark-mode .icono,
.dark-mode img.icono {
  filter: invert(100%);
}

/* Bloques de texto tipo cita o descripción */
.dark-mode .texto-nosotros blockquote {
  color: var(--blanco);
}

.dark-mode .table thead th {
  background-color: var(--negro);
}
.dark-mode .boton--grandslam {
  background-color: var(--amarilloTenis);
}
.dark-mode .boton--grandslam:hover {
  background-color: var(--amarilloTenisOscuro);
}
.dark-mode .boton--grandslam {
  color: var(--negro);
}
.dark-mode .noticia-tenista {
  background-color: var(--grisOscuro);
}

.dark-mode .ranking a.btn-secundario,
.dark-mode .torneos a.btn-secundario,
.dark-mode .perfil .btn-primario,
.dark-mode .perfil .btn-secundario,
.dark-mode .rank-number {
  color: var(--negro);
}

.dark-mode .torneo-hero__meta,
.dark-mode .ganador,
.dark-mode .torneo-descripcion,
.dark-mode .login {
  background-color: var(--grisOscuro);
  border: 0.1rem solid var(--grisClaro);
}
.dark-mode .torneo-meta-line,
.dark-mode .campo label {
  color: var(--grisClaro);
}

.dark-mode .producto,
.dark-mode .formulario-contacto,
.dark-mode .producto-card {
  background-color: var(--grisOscuro);
}
.dark-mode .categoria {
  color: var(--azul);
}
.dark-mode .logo-marca {
  background-color: var(--blanco);
  border-radius: 1rem;
}
.dark-mode .titulo-marca h3,
.dark-mode label.labelCampo {
  color: var(--amarilloTenis);
}
.dark-mode .alerta-error p,
.dark-mode .alerta-exito p {
  color: var(--negro);
}