/* Caja de login semitransparente */
.login-box {
  background-color: var(--login-bg-light); /* Usa la variable para el fondo CLARO */
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 20px var(--login-shadow-light); /* Usa la variable para la sombra CLARA */
  text-align: center;
  width: 360px;

  /* Garantiza que el contenido no herede opacidad del fondo */
  color: var(--login-text-light); /* Usa la variable para el texto CLARO */
  transition: background-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; /* Añadido para transición suave */
}

/* Estilos específicos para el login-box en modo oscuro */
body.dark .login-box {
  background-color: var(--login-bg-dark);   /* Fondo OSCURO */
  color: var(--login-text-dark);             /* Texto OSCURO */
  box-shadow: 0 6px 20px var(--login-shadow-dark); /* Sombra OSCURA */
}

/* Ajustes de título y texto */
.login-box h1 {
  font-size: 28px;
  margin-bottom: 16px;
}

.login-box p {
  font-size: 16px;
  margin-bottom: 24px;
}


/* Ajustes específicos del botón de login */
#login-btn {
    /* Ajustamos el ancho para que no sea 100% y se vea como un botón de login de terceros */
    width: 90%; 
    max-width: 280px; 
    
    /* Centramos el botón en sí mismo (ya que tiene un ancho fijo) */
    margin: 0 auto 24px auto; /* 0 arriba, auto lados (centrado), 24px abajo (separación del switch) */
    
    /* Estilos del botón base (que ya tienes en common.css): */
    display: flex;
    align-items: center;
    justify-content: center; /* **Clave para centrar icono + texto** */
    gap: 10px; /* Separación entre el icono y el texto */
    
    /* Color de fondo especial para imitar el botón de Google (blanco en modo claro) */
    background-color: white; 
    color: #333; /* Color de texto oscuro para el botón */
    border: 1px solid #ccc; /* Borde sutil */
}

/* Modificación de estilos para el botón de Google en tema oscuro */
body.dark #login-btn {
    background-color: #424242; /* Gris oscuro para el tema oscuro */
    color: white; 
    border: 1px solid #555;
}

#login-btn svg {
    /* Tamaño y visualización del icono SVG */
    height: 18px; 
    width: 18px;
    display: block; /* Asegura el correcto dimensionamiento */
    /* Ya no necesita margin-right porque usamos 'gap: 10px' en el padre */
}