@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Calibri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,800;1,800&display=swap');


.green-bar {
    background-color: #00AF00; /* Color verde */
    height: 60px; /* Altura de la franja */
    width: 100%; /* Ancho completo de la pantalla */
    display: flex; /* Convertir en contenedor flex */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
}


body{
    background-color: white !important;
    background-size: 100vw !important;
    background-attachment: fixed;
    margin: 0;
    font-family: 'Calibri';
}

label:not(.politica) {
    display: block;
    width: 100%; /* Para que ocupen el mismo ancho que los input */
    /* text-align: center; Para centrar el texto */
    margin-bottom: 5px;
    font-size: 16px;
}

select option[disabled] {
    color: #999999; /* Color del placeholder */
  }

form{
    width: 400px;
    margin: 0 auto 0 auto  !important;
    background: rgba(0, 0, 0, 0.04);
    padding: 10px 20px !important;
    box-sizing: border-box;
    margin-top: 200px;
    border-radius: 7px !important;
}
/*
h2{
    font-family: 'Work Sans';
    font-weight: bold;
    border: 5px solid #00AF00 !important;
    background-color: #00AF00;
    color: white !important;
    text-align: center !important;
    border-radius: 5px !important;
    margin-top: 2px !important;
    box-sizing: border-box;
}
*/
h2 {
    font-family: 'Work Sans', sans-serif;
    font-weight: bold;
    border: 5px solid #00AF00 !important;
    background-color: #00AF00;
    color: white !important;
    text-align: center;
    border-radius: 5px;
    margin: 0; /* Añade esto para eliminar el margen por defecto del h2 */
    width: 100%; /* Añade esto para que el h2 ocupe todo el ancho del .green-bar */
    box-sizing: border-box;
    font-size:20px !important
}

h4{
    font-family: 'Calibri';
    text-align: center !important;
    color: #00AD00 !important;
    font-size: 19px;
}
h5{
    font-family: 'Calibri', sans-serif;
    text-align: justify !important;
    font-size: 13px ;
}

input:not(#politica,#boton,#openModalBtn),textarea,select{
    width: 100%;
    height: 22px;
    margin-bottom: 6px;
    /*padding: 7px;*/
    box-sizing: border-box;
    font-family: 'Work Sans';
    font-size: 13px;
    border-radius: 30px; /* Bordes redondeados */
    border: 2px solid #ccc; /* Color del borde */
    padding: 2px; /* Espaciado interno */
    padding-left:8px;
}

input[type="checkbox"]{
    display: none;
    margin-bottom: 20px;
    padding: 7px;
    box-sizing: border-box;
    font-family: 'Work Sans';
}

input:focus {
    border-color: #00AF00 !important;
  }

span{
    display: block; 
    width: 100%;
    margin-bottom: 6px;
    box-sizing: border-box;
    font-family: 'Work Sans';
    font-size: 12px !important;
    color: red;
}

label[for="politica"]{
    font-size: 13px !important;
    display: none;
}

textarea{
    min-height: 40px;
    max-height: 100px;
    max-width: 100%;
    min-width: 100%;
}

#boton,#openModalBtn{
    width: 35%;
    height: 41px;
    margin-top: 5px !important;
    background-color: #00AF00;
    font-family: 'Work Sans' !important;
    font-size: 19px;
    border: none;
    border-radius: 30px;
    color: white !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#boton:hover,#openModalBtn:hover{
    cursor:pointer !important;
}

.botonModal{
    display: flex; /* Convertir en contenedor flex */
    flex-direction: column; /* Alinear elementos verticalmente */
    align-items: center; /* Centrar horizontalmente */
    text-align: left; /* Alinear el texto a la izquierda */
}



/*
estilos para el modal
*/

.modal {
    display: none; /* Ocultar modal por defecto */
    position: fixed; /* Posición fija */
    z-index: 1; /* Posición en el eje Z */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Añadir scroll si el contenido es más grande que la pantalla */
    background-color: rgba(0,0,0,0.4); /* Fondo semitransparente */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Centrar modal verticalmente y dejar un margen en la parte superior e inferior */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Ancho del modal */
    max-width: 500px; /* Ancho máximo del modal */
    text-align: center; /* Alinear texto al centro */
    border-radius:20px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.warning-icon {
    display: none !important;
    width: 50px; /* Ajustar tamaño del icono */
}

.modal-text {
    text-align: justify;
    font-size: 14px; /* Tamaño del texto */
    margin-bottom: 20px; /* Margen inferior */
}

.modal-content a{
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}



#openModalBtn {
    margin-top: 20px; /* Margen superior para separar del botón */
}


#acceptBtn,#rejectBtn,#closePaisModalBtn {
    background-color: #00AF00;
    color: white;
    padding: 10px 20px;
    border: none;
    font-family: 'Work Sans';
    border-radius: 20px;
    width:30%;
    margin-left:19px;
    margin-right:19px;
    margin-top:20px;
    margin-bottom:16px;
}

div.parent-documentacion{
    width: 100%;
    display: flex;
    box-sizing: border-box;
}

div.documentacion{
    display: inline-block;
    width: calc(50% - 4px);
    box-sizing: border-box;
    margin:auto;
}

.documentacion{
    display: block;
    justify-content: center; /* Para centrar horizontalmente */
    align-items: center; /* Para centrar verticalmente */
}



@media (max-width: 788px){
    form{
        width: 100%;
    }
}

/* ============================================
   ESTILOS AISLADOS PARA MULTISELECT
   No afecta inputs, selects ni labels existentes
   ============================================ */

.ms-multiselect {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    font-family: Work Sans, sans-serif;
}

.ms-select-box {
    border: 1px solid #ccc;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
}

.ms-select-box::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 10px;
}

.ms-options {
    display: none;
    position: absolute;
    background: white;
    width: 100%;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    border-radius: 6px;
    margin-top: 2px;
}

.ms-options.open {
    display: block;
}

.ms-option {
    display: flex;
    align-items: center;
    padding: 6px;
    cursor: pointer;
}

.ms-option:hover {
    background: #eef3ff;
}

.ms-option input[type="checkbox"] {
    margin-right: 8px;
}


/* Fix: permitir que el multiselect use sus propios checkboxes */
.ms-multiselect .ms-option input[type="checkbox"] {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    accent-color: #00AF00; /* verde institucional opcional */
}