/* NOTAS
    . class
    # id
    body directo a la etiqueta body
    div directo a las etiquetas div

    control + k + c Comenta lo seleccionado
    control + k + u Descomenta lo seleccionado

    alt + click Pone un nuevo cursor
    control + t Busca archivos. SI borras # muestra todos
    shift alt f Identa el codigo

    control + i Encierra en etiquetas html el codigo seleccionado
*/

body {
    background-color: #9c9c9c;
}

.cabecera {
    display: flex;
    /* or inline-flex */
    flex-direction: row;
    /* sentideo de izquierda a deracha en el orden de los elementos */
    flex-wrap: nowrap;
    /* los elementos no se ajustaran a mas de una linea si no entran */
    justify-content: center;
    /*Justifica todo al centro */
}

#fotoCabecera {
    /* en un elemento de la cabecera */
    flex-grow: 1;
    /* Distribucion del espacio restante del contenedor */
    flex-shrink: auto;
    /* capacidad de encogerse si en necesario */
    flex-basis: auto;
    width: 100%;
    height: auto;
}


/*-----------------------------------------------------------------------------------------*/

.logoTitulo {
    display: flex;
    /* or inline-flex */
    flex-direction: row;
    /* sentideo de izquierda a deracha en el orden de los elementos */
    flex-wrap: nowrap;
    /* los elementos no se ajustaran a mas de una linea si no entran */
    justify-content: center;
    /*Justifica todo al centro */
    width: 100%;
    background-color: #babad0;
}


/*--------------------------------*/

#logo {
    display: flex;
    justify-content: flex-end;
    width: 30%;
    height: auto;
    margin-bottom: 0px;
    background-color: brown;
}

@media (orientation: landscape) {
    #logoCabecera {
        position: absolute;
        left: 10%;
        top: 30%;
        z-index: 0;
        width: 15%;
    }
}

@media (orientation: portrait) {
    #logoCabecera {
        position: absolute;
        left: 10%;
        top: 11%;
        z-index: 0;
        width: 15%;
    }
}


/*--------------------------------*/

#titulo {
    margin-top: 3px;
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

#titulo {
    margin-top: 3px;
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

#textoTitulo {
    font-weight: bold;
    color: rgb(43, 43, 43);
    font: 200% sans-serif;
    width: 100%;
    text-align: center;
}


/*-----------------------------------------------------------------------------------------*/

.linea {
    margin-bottom: 0px;
    margin-top: 4px;
    border-bottom: solid 5px rgb(228, 228, 228);
    width: 100%;
    height: 2px;
}


/*-----------------------------------------------------------------------------------------*/

.contenedorFormulario {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #9c9c9c;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#formulario1 {
    display: flex;
    width: 30%;
}

#formularioDiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 40%;
    flex: 1;
    /* usa todo el espacio disponible  */
    background-color: #9c9c9c;
}

#formularioDivRespuesta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 40%;
    flex: 1;
    /* usa todo el espacio disponible  */
    background-color: #9c9c9c;
    margin-top: 100px;
}

#formulario {
    width: 90%;
    padding: 2px;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    background-color: #9c9c9c;
}

#formularioRespuesta {
    width: 35%;
    padding: 2px;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    background-color: #9c9c9c;
}

#rut {
    width: 100%;
    padding: 10px 10px;
    margin-top: 15px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

#boton {
    width: 100%;
    background-color: #97e79a;
    color: rgb(48, 78, 33);
    padding: 10px 0px;
    margin: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contenedorPhp {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #9c9c9c;
}

#php {
    display: flex;
    background-color: #9c9c9c;
    width: 30%;
}

#phpDiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 40%;
    flex: 1;
    /* usa todo el espacio disponible  */
    background-color: #9c9c9c;
}

#mensaje {
    font-weight: bold;
    color: rgb(255, 0, 0);
    font: 150% sans-serif;
    width: 90%;
    padding: 10px 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline-block;
    border: 1px solid rgb(255, 0, 0);
    border-radius: 8px;
    box-sizing: border-box;
}

#mensajeOK {
    font-weight: bold;
    color: rgb(11, 75, 2);
    font: 150% sans-serif;
    width: 90%;
    padding: 10px 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline-block;
    border: 1px solid rgb(9, 46, 0);
    border-radius: 8px;
    box-sizing: border-box;
}

#tabla {
    width: 90%;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 3px solid rgb(8, 27, 0);
    border-radius: 1px;
}

#celdaTitulo {
    background-color: burlywood;
    color: maroon;
    font: 150% Verdana bold;
    text-align: center;
    width: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(22, 77, 0);
    border-radius: 0px;
}

#celdaCuotas {
    background-color: rgb(4, 134, 10);
    color: rgb(129, 170, 124);
    font: 100% sans-serif;
    text-align: center;
    width: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(22, 77, 0);
    border-radius: 0px;
}

#celdaCuotasVencidas {
    background-color: rgb(255, 0, 0);
    color: rgb(192, 181, 181);
    font: 100% sans-serif;
    text-align: center;
    width: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(241, 5, 5);
    border-radius: 0px;
}

#celdaTotal {
    background-color: burlywood;
    color: maroon;
    font: 150% Verdana bold;
    text-align: center;
    width: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(22, 77, 0);
    border-radius: 0px;
}

#pagar {
    background-color: rgb(23, 94, 5);
    font-size: 25px;
    color: #c4d1c4;
    width: 100%;
}