@import url('https://fonts.googleapis.com/css2?family=Material+Icons');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    color:#424242;
}

 
.form-title {
    width: 99%;
   
    font-size: 18px;
    margin-bottom: 4px;
    border-bottom: 10px ;
    background-color: #f0f0f0;
}


form {
    width: 90%; 
    margin-top: 30px;
    max-width: 1800px;
    justify-content: center;      
    background-color: #f0f0f0;
    padding: 2px;
}






.contenedor-principal {
    display: flex;
    width: 100%;
    max-width: 1500px; /* Controla el ancho máximo del formulario */   
    background-color: #f0f0f0;
    padding: 0px;
    flex-wrap: wrap;
    gap: 5px; 
    justify-content: center;  /* Centra horizontalmente */
      align-items: center;      /* Centra verticalmente */
    color:#424242;

}


    .izquierda {
        display: flex;
        width: 100%;
        background-color: #f0f0f0;
        gap: 0px;
        padding: 14px;
        border: 0px solid #000;
        margin: 0 auto; /* Centrará horizontalmente */
     
        border-radius: 15px;
    }

    .izquierda-1 {
        width: 90%;
        background-color: #ffffff;
        padding: 10px;
        margin: 0px;  
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      
    
    }

    .izquierda-2 {
        width: 90%;
        background-color: #ffffff;
        padding: 10px;
        margin: 0px;  
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    
    }



    .derecha {
        width: 90%;
        margin-left: 8px; 
        background-color: #ffffff;
        padding: 20px;
        border: 0px solid #000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 15px;
        margin: 2 auto; /* Centrará horizontalmente */
       
        min-height: 100px; 
        
    }


            
    .left-top hr {
        border: 0;
        height: 1px;
        background: #a4a4a5;
        margin: 10px 0; /* Ajusta el margen superior e inferior si es necesario */
    }


    .left-bottom hr {
        border: 0;
        height: 1px;
        background: #a4a4a5;
        margin: 10px 0; /* Ajusta el margen superior e inferior si es necesario */
    }


    .right hr {
        border: 0;
        height: 1px;
        background: #a4a4a5;
        margin: 6px 0; /* Ajusta el margen superior e inferior si es necesario */
    }   



            
    .label-input-container {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 10px auto;
        border: 1px;
        border-color: #294799;
    }

    label {
        display: block; 
        margin-bottom: 4px;
        color:#353739;
        font-size: 12px;
        margin-top: 5px;
    }

  



                    
        .search-container {
                    width: 98%;
                    position: relative;
                   
                }


        .icon-wrapper {
                    position: absolute;
                    left: 10px;
                    top: 68%;
                    transform: translateY(-50%);
                    background-color: #fff;
                    border: 0px solid #007BFF;
                    border-radius: 50%;
                    padding: 2px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .icon {
                    font-size: 15px;
                    color: #007BFF;
                }



   
    .custom-select {
        position: relative;
        display: inline-block;
      
    }

    
    /* Estilos para el select */
    select {
        width: 100%;
        padding: 10px;
        appearance: none; /* Oculta la flecha del select por defecto */
        -webkit-appearance: none; /* Oculta la flecha en navegadores WebKit (Safari, Chrome) */
        -moz-appearance: none; /* Oculta la flecha en Firefox */
        background-color: white;
        border: 2px solid #294799; /* Borde azul */
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
    }

    
    /* Flecha personalizada usando ::after */
    .custom-select::after {
        content: '\25BC'; /* Código de la flecha hacia abajo (triángulo) */
        color: #007BFF; /* Cambia el color de la flecha a azul */
        font-size: 20px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Evita que la flecha interfiera con el clic */
    }

    

    
    input {
        border: 2px solid;         /* Establece un borde sólido */
        border-color:  #294799;     /* Color del borde (azul claro) */
        padding: 10px;             /* Espaciado interno de la caja */
        font-size: 14px;           /* Tamaño del texto */
        width: 100%;               /* Anchura completa */
        border-radius: 20px;

    }


            

    .button-right {
        display: flex;
        flex: 1; /* Para ocupar el espacio restante */
        justify-content: center; /* Centra horizontalmente */
        align-items: flex-end; /* Centra verticalmente */
        margin-top:150px;
    }




    .button-left-bottom {
        display: flex;
        flex: 1; 
        justify-content: center; 
        align-items: flex-end; 
        
    }



    .btn {
        padding: 10px 20px;
        background-color: #294799;
        color: white;
        border: none;
        border-radius: 30px;
        font-size: 16px;
        cursor: pointer;
    }


    .btn:hover {
        background-color: #2681e2;
    }



    /* Div Central para el botón */
    .div-central {
        width: 100%; /* Ocupa todo el ancho disponible */
        text-align: center; /* Centra el botón */
        margin-top: 10px;
        margin-bottom: 15px;
    }



/* Responsive para smartphones */
@media (max-width: 768px) {
    .contenedor-principal {
        flex-direction: column;
        width: 99%;
    }

    .izquierda, .derecha {
        width: 100%;
    }

    .izquierda {
        flex-direction: column;
    }

    .izquierda-1, .izquierda-2 {
        width: 98%;
    }


    
    .izquierda-1 {
      
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        width: 100%;
    }

    .izquierda-2 {
        
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        width: 100%;
    }


    .derecha {
        margin-top: 8px;
        margin-left: 0px;
    }

    
    .button-right {
        margin-top:50px;
    }


    .izquierda-1 {
        width: 99%;
     
    }

    .izquierda-2 {
        width: 99%;
        
    }



    .derecha {
        width: 99%;
              
    }



}