@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 
/* Importa la fuente Poppins desde Google Fonts */

*, *::before, *::after {  /* Selecciona todos los elementos y sus pseudo-elementos ::before y ::after */
  box-sizing: border-box; /* Aplica el modelo de caja border-box a todos los elementos y sus pseudo-elementos */
}

body{ /* Estilos globales para el cuerpo del documento */
    --borderRadiusBox: 10px; /* Define un borde de 10 píxeles como variable CSS */
    --gradient: linear-gradient( -45deg, #D000F7, #24BAE3 ); /* Define un gradiente lineal como variable CSS */
    --main-hue: 208; /* valor para el color principal */
    --main-color: hsl(var(--main-hue), 92%, 54%); /* Color principal */
    --main-color-hover: hsl(var(--main-hue), 77%, 48%); /* Variante del color principal para efectos de hover (cuando pasas el mouse). Menor saturación y luminosidad → se ve un poco más oscuro que --main-color. */
    --light-main-color: hsl(var(--main-hue), 91%, 55%); /* Variante más clara del color principal */
    --text-color: #000; /* Color del texto */
    --nav-color: hsl(var(--main-hue), 17%, 79%); /* Color de la navegación */
    --bg-color: #eaeaea; /* Color de fondo */
    --light-text-color: #9CA7B6; /* Color del texto en estado claro */
    --input-bg: hsl(var(--main-hue), 50%, 50%, 6.5%); /* Color de fondo de los inputs */
    --input-bg-hover: hsl(var(--main-hue), 50%, 50%, 14%); /* Color de fondo de los inputs en hover */
    --input-text: #8C9AAF; /* Color del texto en los inputs */
    --input-shadow: hsla(var(--main-hue), 92%, 54%, 0.169); /* Sombra para los inputs */

    font-family: Poppins, sans-serif; /* Establece la fuente principal del sitio web a Poppins, con sans-serif como fuente de respaldo. */
    background-color: var(--bg-color); /* Define el color de fondo del cuerpo del documento a un tono gris claro (#eaeaea). */
    color: #000; /* Establece el color del texto a negro (#000). */
    margin: 0; /* Elimina el margen por defecto del cuerpo del documento. */
    font-size: 15px; /* Establece el tamaño de fuente base a 15px. */
    padding-top: env(safe-area-inset-top); /* Agrega un relleno superior según el área segura del dispositivo. */
    padding-bottom: env(safe-area-inset-bottom); /* Agrega un relleno inferior según el área segura del dispositivo. */
    padding-left: env(safe-area-inset-left); /* Agrega un relleno izquierdo según el área segura del dispositivo. */
    padding-right: env(safe-area-inset-right); /* Agrega un relleno derecho según el área segura del dispositivo. */

    --border: 1px solid #DCELE4; /* Define un borde sólido de 1 píxel de grosor con el color #DCELE4 como variable CSS llamada --border. */
    --gradient: linear-gradient( -45deg, #D000F7, #24BAE3 ); /* Define un gradiente lineal que va en un ángulo de -45 grados desde el color #D000F7 hasta el color #24BAE3 como variable CSS llamada --gradient. */
    --box-shadow: 5px 5px 15px #C1C8D3, -5px -5px 15px #fff; /* Define una sombra para cajas como variable CSS llamada --box-shadow. La sombra tiene dos partes: una sombra oscura desplazada 5 píxeles a la derecha y hacia abajo, y una sombra clara desplazada 5 píxeles a la izquierda y hacia arriba. */
}

a{
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces. */
    color: #000; /* Establece el color del texto de los enlaces a negro (#000). */
}

.dark{
    --bg-color: hsl(var(--main-hue), 30%, 16.5%); /* Color de fondo en modo oscuro */
    --input-bg: hsl(var(--main-hue), 22%, 50%, 11%); /* Color de fondo de los inputs en modo oscuro */
    --input-bg-hover: hsl(var(--main-hue), 22%, 50%, 1%); /* Color de fondo de los inputs en hover en modo oscuro */
    --light-text-color: hsl(var(--main-hue), 12%, 46%); /* Color del texto en estado claro en modo oscuro */
    --light-text: hsl(var(--main-hue), 10%, 55%); /* Color del texto en estado claro en modo oscuro */
    --input-shadow: hsla(var(--main-hue), 92%, 54%, 2); /* Sombra para los inputs en modo oscuro */
    --text-color: #fff; /* Color del texto en modo oscuro */
}