/* Estilos para el modo oscuro */
:root {
  --bg-light: #ffffff;
  --text-light: #26272b;
  --accent-light: #f7f7f7;
  --footer-text-light: #ffffff;
  --footer-bg-light: #26272b;
  
  --bg-dark: #1a1a1a;
  --text-dark: #e0e0e0;
  --accent-dark: #2a2a2a;
  --footer-text-dark: #e0e0e0;
  --footer-bg-dark: #111111;
}

/* Transición suave para todos los elementos cuando cambia el tema */
* {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilos del modo claro (default) */
body {
  background-color: var(--bg-light);
  color: var(--text-light);
}

.bg-accent {
  background-color: var(--accent-light);
}

.bg-white {
  background-color: var(--bg-light);
}

.text-gray-600 {
  color: #4b5563;
}

footer {
  background-color: var(--footer-bg-light);
  color: var(--footer-text-light);
}

header {
  background-color: var(--bg-light);
}

/* Manejo de los logos */
.light-logo, .dark-logo {
  height: 4rem;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Estilos del modo oscuro */
body.dark-mode {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

.dark-mode .bg-accent {
  background-color: var(--accent-dark);
}

.dark-mode .bg-white {
  background-color: var(--bg-dark);
}

.dark-mode .text-gray-600 {
  color: #a0aec0;
}

.dark-mode footer {
  background-color: var(--footer-bg-dark);
  color: var(--footer-text-dark);
}

.dark-mode header {
  background-color: var(--bg-dark);
  box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.1);
}

.dark-mode .text-secondary {
  color: var(--text-dark);
}

/* Ajustes para tarjetas y contenedores en modo oscuro */
.dark-mode .bg-white.rounded-xl,
.dark-mode .bg-white.rounded-lg {
  background-color: var(--accent-dark);
}

.dark-mode .shadow-lg,
.dark-mode .shadow-xl,
.dark-mode .shadow-2xl {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
}

/* Ajustes para botones e iconos en modo oscuro */
.dark-mode .text-primary:not(.bg-primary) {
  color: #cebc96; /* Versión más clara del color primario */
}

.dark-mode .border-primary {
  border-color: #cebc96;
}

/* Estilo para el botón de cambio de tema */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #26272b;
  margin: 0;
  padding: 0;
  transition: color 0.3s ease;
}

.dark-mode .theme-toggle {
  color: #e0e0e0;
}

.theme-toggle:hover {
  color: #AE9A68;
}

/* Estilos específicos para los iconos de Material Symbols */
.material-symbols-outlined {
  font-size: 24px; /* Tamaño del icono */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.theme-toggle .material-symbols-outlined {
  transition: transform 0.5s ease;
}

/* Rotación para el sol (modo oscuro) */
.dark-mode .theme-toggle:hover .material-symbols-outlined[data-icon="sunny"] {
  transform: rotate(180deg);
}

/* Rotación para la luna (modo claro) */
.theme-toggle:hover .material-symbols-outlined[data-icon="dark_mode"] {
  transform: rotate(90deg);
}

/* Ajustes de color para los iconos en ambos modos */
.theme-toggle .material-symbols-outlined {
  color: #26272b;
}

.dark-mode .theme-toggle .material-symbols-outlined {
  color: #e0e0e0;
}

.theme-toggle:hover .material-symbols-outlined {
  color: #AE9A68;
}