/* Estilos para el botón de alternar tema */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    position: relative;
  }
  
  .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .theme-toggle svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
  }
  
  /* Definir variables CSS para el modo claro (default) */
  :root {
    --background-color: #fff;
    --text-color: #343434;
    --header-bg: #343434;
    --header-text: #fff;
    --card-bg: #343434;
    --card-text: #fff;
    --bento-bg: #343434;
    --bento-text: #fff;
    --btn-bg: #fff;
    --btn-text: #343434;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --subtitle-color: #161616;
  }
  
  /* Definir variables CSS para el modo oscuro */
  [data-theme="dark"] {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --header-bg: #1e1e1e;
    --header-text: #fff;
    --card-bg: #1e1e1e;
    --card-text: #fff;
    --bento-bg: #1e1e1e;
    --bento-text: #fff;
    --btn-bg: #343434;
    --btn-text: #fff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --subtitle-color: #e0e0e0;
  }
  
  /* Aplicar variables a los elementos */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
  
  header {
    background-color: var(--header-bg);
    color: var(--header-text);
  }
  
  .info-box, .bento-item, .card, .origen-sueño-cuadro {
    background-color: var(--bento-bg);
    color: var(--bento-text);
    box-shadow: var(--shadow);
  }
  
  .ubicacion-logo-mobile, .titulo-trayectoria-mobile, .imagen-musica-mobile {
    background-color: var(--bento-bg);
    color: var(--bento-text);
  }
  
  .btn-contacto {
    background-color: var(--btn-bg);
    color: var(--btn-text);
  }
  
  .aptitudes h2, .sobre-mi-texto h2, .origen-sueño-text h2 {
    color: var(--subtitle-color);
  }
  
  .aptitudes p, .sobre-mi-texto p, .origen-sueño-text p {
    color: var(--text-color);
  }
  
  /* Transición suave al cambiar de tema */
  body, header, .info-box, .bento-item, .card, .origen-sueño-cuadro,
  .ubicacion-logo-mobile, .titulo-trayectoria-mobile, .imagen-musica-mobile,
  .btn-contacto, h1, h2, h3, p {
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  }
  
  /* Adaptaciones para modo oscuro en elementos específicos */
  [data-theme="dark"] .overlay {
    background-color: #1a1a1a !important;
  }
  
  [data-theme="dark"] ::-webkit-scrollbar-track {
    background: #2c2c2c;
  }
  
  [data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #555;
  }
  
  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #777;
  }

  .sun-icon,
.moon-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Animación para el sol cuando aparece */
.sun-icon.animate-in {
  animation: rotateSun 0.5s ease forwards;
}

/* Animación para la luna cuando aparece */
.moon-icon.animate-in {
  animation: rotateMoon 0.5s ease forwards;
}

/* Animación para el sol cuando desaparece */
.sun-icon.animate-out {
  animation: fadeOut 0.3s ease forwards;
}

/* Animación para la luna cuando desaparece */
.moon-icon.animate-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes rotateSun {
  from {
    transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) rotate(0) scale(1);
    opacity: 1;
  }
}

@keyframes rotateMoon {
  from {
    transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) rotate(0) scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
}