/* Importa la fuente de Google Fonts "Montserrat" con varios pesos y estilos */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/* Configuración global para todos los elementos: reset de márgenes y rellenos, 
   y ajuste del modelo de caja para facilitar el layout */
* {
    margin: 0;  /* Elimina el margen predeterminado */
    padding: 0; /* Elimina el relleno predeterminado */
    box-sizing: border-box; /* Facilita el cálculo del tamaño de los elementos */
    font-family: "Montserrat", sans-serif; /* Establece la fuente de todos los elementos */
}

/* Configuración de la etiqueta body */
body {
    justify-content: center; /* Centra el contenido en el eje horizontal */
    align-items: center; /* Centra el contenido en el eje vertical */
    height: 100vh; /* Hace que el body ocupe toda la altura de la pantalla */
    margin: 0; /* Elimina márgenes para evitar espacios en blanco */
    background-image: url(/recurces/LOGOTIPOS/PANEL\ PLUS.png);
    background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}
/* Estilo para la barra de desplazamiento */
body::-webkit-scrollbar {
    width: 10px; /* Ancho de la barra de desplazamiento */
}
body::-webkit-scrollbar-track {
    background: #df880ec9; /* Color de fondo de la barra */
}  
body::-webkit-scrollbar-thumb {
    background-color: rgb(125, 180, 212); /* Color de la barra que se desplaza al subir o bajar */
    border-radius: 20px; /* Esquinas de la barra que se desplaza al subir o bajar */
    border: 3px solid #df880ec9;  /* Borde de la barra de desplazamiento */
}
/* La clase .main contiene el layout principal de la página */
.main {
    width: 100%;  /* La caja principal ocupa todo el ancho de la pantalla */
    height: 100vh; /* La caja principal ocupa toda la altura de la ventana del navegador */
    display: flex; /* Se usa flexbox para organizar su contenido en un layout flexible */
    overflow: hidden; /* Oculta cualquier contenido que se desborde de la caja */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */

}

/* Configuración de .container, que es el contenedor de los formularios */
.container {
    display: flex; /* Usa flexbox para alinear los elementos en fila */
    width: 900px; /* Ancho del contenedor */
    height: 500px; /* Alto del contenedor */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta los elementos desbordados */
    position: relative; /* Establece la posición relativa para efectos de animación */
    transition: all 0.8s ease-in-out; /* Añade una transición suave en todas las propiedades */
    box-shadow: 0 15px 25px rgb(0, 0, 0); /* Añade una sombra al contenedor */
    background-color: #fff; /* Fondo blanco con un poco de transparencia */
}

/* Configuración de .container-form que contiene el formulario */
.container-form {
    width: 100%;  /* El formulario ocupa todo el ancho del contenedor */
    overflow: hidden; /* Oculta el contenido que sobresale del formulario */
}

/* Estilo del formulario en sí, que se encuentra dentro de .container-form */
.container-form form {
    height: 100%; /* El formulario ocupa el 100% de la altura disponible */
    display: flex; /* Organiza el formulario en una estructura flexible (columna) */
    flex-direction: column; /* Organiza los elementos del formulario en una columna */
    justify-content: center; /* Centra el contenido en el eje vertical */
    align-items: center; /* Centra el contenido en el eje horizontal */
    transition: transform 0.5s ease-in; /* Aplica una transición suave al formulario */
}

/* Estilo del encabezado h2 dentro del formulario */
.container-form h2 {
    font-size: 30px; /* Tamaño de fuente grande para el título */
    margin-bottom: 20px; /* Espacio debajo del encabezado */
    transition: 0.3s; /* Suaviza la transición de la animación al pasar el cursor */
}

/* Estilos para los íconos de redes sociales (flexbox) */
.social-networks {
    display: flex; /* Utiliza flexbox para organizar los íconos en una fila */
    gap: 12px; /* Espacio entre los íconos */
    margin-bottom: 25px; /* Espacio debajo de los íconos */
    color: #ff7a25; /* Color de los íconos */
}

/* Efectos hover sobre cada ícono de redes sociales */
.lf:hover, .lg:hover, .li:hover, .lt:hover {
    transform: scale(1.10); /* Aumenta el tamaño del ícono en hover */
    transition: 0.3s; /* Transición suave en la animación */
    color: #ff7a25; /* Cambia el color al pasar el cursor */
}

/* Estilo de los íconos de redes sociales en sí (borde y tamaño) */
.social-networks ion-icon {
    border: 1px solid #ff7a25; /* Añade un borde alrededor de los íconos */
    border-radius: 6px; /* Bordes redondeados */
    padding: 8px; /* Espacio interno alrededor del ícono */
    cursor: pointer; /* Cambia el cursor a puntero para indicar interactividad */
}

/* Estilo de los textos y subtítulos en el formulario */
.container-form span {
    font-size: 12px; /* Tamaño de fuente pequeño */
    margin-bottom: 15px; /* Espacio debajo del texto */
}

/* Estilo de los inputs dentro del formulario */
.container-input {
    width: 300px; /* Ancho de los campos de entrada */
    height: 40px; /* Alto de los campos de entrada */
    margin-bottom: 10px; /* Espacio entre los campos */
    display: flex; /* Utiliza flexbox para alinear el texto y los íconos */
    justify-content: center; /* Centra el contenido en el eje horizontal */
    align-items: center; /* Centra el contenido en el eje vertical */
    gap: 8px; /* Espacio entre el ícono y el campo de texto */
    padding: 0 15px; /* Espacio interno en los campos de texto */
    background-color: #EEEEEE; /* Fondo gris claro */
}

/* Estilo de los inputs, eliminando bordes y fondo */
.container-input input {
    border: none; /* Elimina el borde predeterminado */
    outline: none; /* Elimina el contorno al hacer clic */
    width: 100%; /* El campo de texto ocupa todo el ancho del contenedor */
    height: 100%; /* El campo de texto ocupa toda la altura del contenedor */
    background-color: inherit; /* Mantiene el mismo fondo que el contenedor */
}

/* Estilos de los enlaces dentro de los formularios */
.container-form a {
    color: black; /* Color de los enlaces */
    font-size: 14px; /* Tamaño de fuente pequeño */
    margin-bottom: 20px; /* Espacio debajo del enlace */
    margin-top: 5px; /* Espacio en la parte superior del enlace */
}

/* Estilo de los botones */
.button {
    width: 170px; /* Ancho del botón */
    height: 45px; /* Alto del botón */
    font-size: 15px; /* Tamaño de la fuente del botón */
    border: none; /* Elimina el borde del botón */
    border-radius: 10px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a puntero */
    margin-top: 10px; /* Espacio en la parte superior del botón */
    background-color: #ff7a25; /* Fondo color naranja */
    color: white; /* Color del texto del botón */
    transition: 0.3s; /* Transición suave en el hover */
}

/* Efecto de hover sobre los botones */
.button:hover {
    background-color: #333; /* Cambia el color de fondo a negro */
    transform: scale(1.05); /* Aumenta el tamaño del botón al pasar el cursor */
}

/* Efecto hover sobre los encabezados h2 */
h2:hover {
    transform: scale(1.10); /* Aumenta el tamaño del encabezado al pasar el cursor */
}

/* Animación y transición del formulario de registro */
.sign-up {
    transform: translateX(-100%); /* Hace que el formulario de registro comience fuera de la vista */
}

.container.toggle .sign-in {
    transform: translateX(100%); /* Desplaza el formulario de inicio de sesión hacia la derecha */
}

.container.toggle .sign-up {
    transform: translateX(0); /* Muestra el formulario de registro */
}

/* Estilos para la sección de bienvenida */
.container-welcome {
    position: absolute; /* Posición absoluta para ubicarlo sobre otros elementos */
    width: 50%; /* Ocupa la mitad del ancho del contenedor */
    height: 100%; /* Ocupa el 100% de la altura */
    display: flex; /* Flexbox para centrar el contenido */
    align-items: center; /* Centra verticalmente */
    transform: translateX(100%); /* Inicia fuera de la vista */
    background-color: #ff7a25; /* Fondo  */
    transition: transform 0.5s ease-in-out, border-radius 0.5s ease-in-out; /* Transición suave */
    border-radius: 50% 0 0 50%; /* Redondea la parte derecha del contenedor */
}

.container.toggle .container-welcome {
    transform: translateX(0); /* Muestra la sección de bienvenida */
    border-radius: 0 50% 50% 0; /* Redondea la parte izquierda */
}

/* Estilos dentro de la sección de bienvenida */
.container-welcome .welcome {
    position: absolute; /* Posición absoluta para organizar el contenido */
    display: flex; /* Flexbox para organizar en columna */
    flex-direction: column; /* Organiza los elementos en columna */
    align-items: center; /* Centra los elementos horizontalmente */
    gap: 20px; /* Espacio entre los elementos */
    padding: 0 50px; /* Espacio lateral */
    color: white; /* Color del texto blanco */
    transition: transform 0.5s ease-in-out; /* Transición suave al aparecer */
}

.welcome-sign-in {
    transform: translateX(100%); /* Muestra el contenido de bienvenida fuera de la vista */
}

.container-welcome h3 {
    font-size: 40px; /* Tamaño grande para el título de la bienvenida */
    transition: 0.3s; /* Transición suave en hover */
}

.container-welcome p {
    font-size: 14px; /* Tamaño de fuente pequeño */
    text-align: center; /* Alineación centrada */
}

.container-welcome .button {
    border: 2px solid white; /* Añade un borde blanco alrededor del botón */
    background-color: transparent; /* Fondo transparente */
}

/* Transiciones y efectos cuando se activa la clase toggle */
.container.toggle .welcome-sign-in {
    transform: translateX(0); /* Muestra la sección de bienvenida para el login */
}

.container.toggle .welcome-sign-up {
    transform: translateX(-100%); /* Oculta el contenido de bienvenida para el registro */
}

/* Estilos para el logo o barra de navegación */
.nav-brand {
    width: 400px; /* Ancho del logo o barra de navegación */
    border-radius: 20px; /* Bordes redondeados */
    position: relative; /* Permite que el logo tenga una posición relativa */
}

.nav-brand:hover {
    transform: scale(1.10); /* Aumenta el tamaño del logo cuando el cursor lo toque */
    transition: 0.3s; /* Transición suave */
}

/* Estilos del footer */
footer {
    background-color: #333; /* Fondo oscuro para el pie de página */
    color: #fff; /* Texto blanco */
    text-align: center; /* Centra el contenido del footer */
    padding: 0px; /* Elimina el relleno predeterminado */
    position: fixed; /* Fija el pie de página en la parte inferior */
    bottom: 0; /* Se posiciona en la parte inferior de la página */
    position: static; /* Alternativamente, si se desea una posición estática */
}

/* Título dentro del footer */
.footer-title {
    font-size: 1.5em; /* Tamaño grande para el título */
}

footer ul {
    list-style-type: none; /* Elimina los puntos de las listas */
    padding: 0; /* Elimina el relleno predeterminado */
    text-align: left; /* Alinea el texto a la izquierda */
}

footer ul li {
    margin: 5px 5px; /* Espacio entre elementos de la lista */
}

footer ul li a {
    color: #ff7a25; /* Color atractivo para los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    font-size: 1.2em; /* Tamaño de fuente más grande para los enlaces */
    font-weight: 300; /* Usa un peso de fuente ligero */
}

footer ul li a:hover {
    color: #a5a3a3; /* Cambia el color al pasar el cursor */
}

/* Estilos para la sección de información en el footer */
.info {
    display: flex; /* Flexbox para organizar los elementos en fila */
    justify-content: center; /* Centra los elementos */
    margin-block: 20px; /* Espacio vertical */
    gap: 20px; /* Espacio entre elementos */
}

.socials {
    font-size: 0.9em; /* Tamaño pequeño para los íconos de redes sociales */
    color: #949393; /* Color gris para los íconos */
}

.iconsc {
    display: auto; /* Auto para una visualización correcta */
    padding: 5px; /* Espacio interno alrededor de los íconos */
    color: #ff7a25; /* Color atractivo de los íconos */
}

.iconsc:hover {
    color: #a5a3a3; /* Cambia el color de los íconos al pasar el cursor */
}

/* Encabezados de las listas en el footer */
.footer-list_header {
    font-size: 0.9em; /* Tamaño de fuente pequeño */
    color: #949393; /* Color gris para los encabezados */
}

/* Medidas responsivas para adaptarse a distintos tamaños de pantalla */
@media screen and (max-width: 1024px) {
    .container {
        width: 600px; /* Ajusta el ancho para pantallas más pequeñas */
        
    }
    .nav-brand {
        width: 300px; /* Ajusta el tamaño del logo en pantallas más pequeñas */
    }
    h3, p {
        margin: -14px; /* Ajusta el margen para los encabezados */
    }
}

@media screen and (max-width: 1292px) {
    .main {
        flex-direction: column; /* Organiza los elementos en columna en pantallas más pequeñas */
    }
    .container {
        width: 80%; /* Ajusta el ancho a auto para pantallas más grandes */
        margin-block-end: 30px; /* Espacio en la parte inferior */
    }
    h3, p {
        margin: -14px; /* Ajusta el margen para pantallas más grandes */
    }
    .nav-brand {
        width: 200px; /* Ajusta el tamaño del logo */
    }
}
@media screen and (max-width: 620px) {

    .nav-brand {
        display: none;/* Ajusta el tamaño del logo */
    }
    .button{
        margin: 5px;
    }
    .main{
        height: auto;
    }
    .container {
        height: 100%; /* Ajusta la altura del contenedor */
        width: 90%; /* Ajusta el ancho del contenedor */
        margin-block-end: 25px; /* Espacio en la parte inferior */
        margin-top: 15px;
        flex-direction: column; /* Disponer los formularios verticalmente */
    }
    .sign-up {
        transform: translateY(100%);
        background-color: #fff;
        
    }
    .sign-in{
        background-color: #fff;
    }
    .container.toggle .sign-in {
        transform: translateY(100%);
    }

    .container.toggle .sign-up {
        transform: translateY(0);
    }

    /* Modificar la animación de la bienvenida */
    .container-welcome {
        transform: translateY(110%);
        border-radius: 50% 50% 0 0;
        width: 100%; /* Ocupa la mitad del ancho del contenedor */
        height: 400px; /* Ocupa el 100% de la altura */
    }

    .container.toggle .container-welcome {
        transform: translateY(0%);
        border-radius: 0 0 50% 50%;
        height: 300px;
    }
    
    /* Ajustes visuales para mejorar el layout en pantallas pequeñas */
    .container-form h2 {
        font-size: 24px;
    }
    
    .container-input {
        width: 80%;
    }
    
    .social-networks {
        margin-bottom: 10px;
    }
}



@media screen and (max-width: 430px) {
    .container {
        height: 100%; /* Ajusta la altura del contenedor */
        width: 95%; /* Ajusta el ancho del contenedor */
        margin-block-end: 20px; /* Espacio en la parte inferior */
        margin-top: 10px;
    }
    .container-welcome {
        transform: translateY(110%);
        border-radius: 50% 50% 0 0;
        width: 100%; /* Ocupa la mitad del ancho del contenedor */
        height: 400px; /* Ocupa el 100% de la altura */
    }

    .container.toggle .container-welcome {
        transform: translateY(0%);
        border-radius: 0 0 50% 50%;
        height: 300px;
    }
}