@font-face {
    font-family: 'Canada'; /* Nombre que le darás a la fuente */
    src: url('./assets/Canada.otf') format('truetype'); /* Ajusta la ruta según donde hayas guardado la fuente */
    font-weight: normal; /* Ajusta según el peso de la fuente */
    font-style: normal; /* Ajusta según el estilo de la fuente */
}

body {
    display: flex;
    height: 100vh;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    color: #3C3C3C;
    background-color: #F4F4F9;
}

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="number"]:focus, 


option:focus,
textarea:focus, 
button:focus {
    outline: none;
    border: 2px solid #5F288F;
    box-shadow: 0 0 8px rgba(95, 40, 143, 0.5);
}


.logo {
    max-height: 100px;
    width: auto;
}

#logo-s {
    display: none;
}


h1 {
    font-size: 25px;
}


h3 {
    font-family: 'Canada','sans-serif';
    font-size: 20px;
    color: #3c3c3c96;
}

.main-container {
    display: flex;
    flex: 1;
    background-color: #F4F4F9;
    
}

.left-section {
    flex: 2;
}

.right-section {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

form {
    width: 100%;
    padding: 20px;
}

form label {
    font-family: 'Canada', sans-serif;
}

/* Mostrar empresa sólo cuando se selecciona 'empresa' */
.empresa-container {
    padding-top: 20px;
    display: none;
}

.empresa-container.show {
    display: block;
}

.left-section img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

a.logout-button {
    position: absolute;
    top: 10px;
    right: 20px;
    background-color: #5F288F;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    border: none;
    font-family: 'Canada', sans-serif;
}



a.logout-button:hover {
    background-color: #14c532;
}

.btn-primary {
    background-color: #5F288F;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
    font-family: 'Canada', sans-serif;
}

.btn-primary:hover {
    background-color: #14c532;
}
.btn-primary:disabled{
    opacity: 0.5;
    background-color: #5F288F;
}



@media (max-width: 1000px) {
    .main-container {
        flex-direction: column;
    }

    .left-section img {
        height: 50vh;
        filter: brightness(0.7);
    }

    #logo-l {
        display: none;
    }

    #logo-s {
        display: block;
    }
}

@media (min-width: 1000px){
    
    .right-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        overflow-y: auto; /* Habilitar scroll dentro de esta sección */
        padding: 0px;
    }
    
    .login-form{
        padding-top: 200px;
        
    }

    /* Bloque del logo fijo */
    .fixed-logo {
        position: sticky;  /* Fijar el logo dentro de la right-section */
        top: 0;  /* Mantenerlo en la parte superior */
        z-index: 10;  /* Asegurar que el logo esté por encima del contenido desplazable */
        background-color: #F4F4F9; /* Fondo para evitar que el logo se superponga */
        padding: 20px;
    }
}

@media (max-width: 999px) {
    .logo {
        max-height: 100px;
        position: absolute;
        top: 0px;
        padding-left: 20px;
    }
}

@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    .left-section img {
        height: 40vh;
        filter: brightness(0.7);
    }

    #logo-l {
        display: none;
    }

    #logo-s {
        display: block;
    }

    .main-container button {
        text-align: center;
        align-items: center;
    }
}

/* cambio de formulario aqui se puede hacer animacion tmb xd */
.hidden {
    display: none;
}

.form-container {
    transition: all 0.5s ease-in-out;
    
}

.hidden {
    opacity: 0;
    transform: translateX(50px);
}

.form-container:not(.hidden) {
    opacity: 1;
    transform: translateX(0);
}

.toggle-text {
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
}

/* Ajustes para la disposición de formularios */
.form-container {
    max-width: 100%;
    width: 100%;
  }
  
  .hidden {
    display: none;
  }
  
  .empresa-container, .particular-container {
    display: none; /* Ocultar ambos por defecto */
  }
  
  .show {
    display: block; /* Mostrar cuando sea necesario */
  }
  
  button[type="submit"] {
    margin-top: 20px;
  }
  .swal2-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999 !important;
}

.swal2-popup {
    max-width: 500px !important;
    max-height: 300px !important;
    overflow: hidden !important;
    padding: 20px !important;
    margin: 0 auto !important;
}

/* Estilos para los botones de SweetAlert2 */
.swal2-confirm {
    background-color: #5F288F !important; /* Color de fondo del botón de confirmación */
    color: white !important; /* Color del texto del botón de confirmación */
    border: none !important; /* Sin borde */
    border-radius: 5px !important; /* Borde redondeado */
    padding: 10px 20px !important; /* Espaciado interno */
    font-family: 'Canada', sans-serif !important; /* Fuente */
    font-size: 16px !important; /* Tamaño de fuente */
}

.swal2-cancel {
    background-color: gray !important; /* Color de fondo del botón de cancelar */
    color: white !important; /* Color del texto del botón de cancelar */
    border: none !important; /* Sin borde */
    border-radius: 5px !important; /* Borde redondeado */
    padding: 10px 20px !important; /* Espaciado interno */
    font-family: 'Canada', sans-serif !important; /* Fuente */
    font-size: 16px !important; /* Tamaño de fuente */
}

.swal2-deny {
    background-color: #5F288F !important; /* Color de fondo del botón de negar */
    color: white !important; /* Color del texto del botón de negar */
    border: none !important; /* Sin borde */
    border-radius: 5px !important; /* Borde redondeado */
    padding: 10px 20px !important; /* Espaciado interno */
    font-family: 'Canada', sans-serif !important; /* Fuente */
    font-size: 16px !important; /* Tamaño de fuente */
}

.swal2-confirm:hover, .swal2-deny:hover {
    background-color: #14c532 !important; /* Color de fondo al pasar el ratón sobre los botones de confirmación y negar */
}

.swal2-cancel:hover {
    background-color: darkgray !important; /* Color de fondo al pasar el ratón sobre el botón de cancelar */
}


  
/*Animaciones */
/* Animación de deslizamiento desde abajo */
@keyframes slideBottom {
    0% {
        transform: translateY(-50px); /* Inicia un poco más arriba */
        opacity: 0; /* Inicia invisible */
    }
    100% {
        transform: translateY(0); /* Termina en su posición original */
        opacity: 1; /* Termina visible */
    }
}

.form-container {
    animation: slideBottom 0.5s ease-out; /* Aplica la animación */
    animation-fill-mode: forwards; /* Mantiene el estado final de la animación */
    opacity: 0; /* Asegúrate de que el formulario sea invisible antes de la animación */
    transform: translateY(-50px); /* Inicia fuera de la pantalla */
}

/* Asegúrate de que el formulario se muestre después de cargar */
.form-container.show {
    opacity: 1;
    transform: translateY(0); /* Hace que el formulario se mueva a su lugar original */
}

/* Estilo para ocultar los contenedores al inicio */
.hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-out;
}

/* Mostrar los contenedores con una animación de despliegue */
#empresaContainer,
#particularContainer {
    max-height: 2000px; /* Un valor alto para permitir el deslizamiento */
    opacity: 1;
    transition: all 0.5s ease-in;
}

/* Opcional: transición para el select */
select {
    transition: all 0.3s ease;
}