@charset "UTF-8";

/* CSS Document */
/* @font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Bold.ttf);
    font-weight: bold;
}
 */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Black.ttf);
    font-weight: bolder;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Regular.ttf);
    font-weight: normal;
}


* {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    box-sizing: border-box;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: normal;
    text-rendering: optimizeLegibility;


}

html {
    background-color: rgb(245, 245, 245);
    font-size: 16px;
}

body {
    font-size: 1rem;
    color: #444;
    /* border: solid 1px red; */
    background-color: white;
    margin: 10px auto;
    padding: 10px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    width: 21.6cm;
    width: 100%;
    max-width: 970px;
    /*width: 970px; */
    height: max-content;
    /*border: solid 1px red; */
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgb(150, 150, 150, 0.5);
}

[class*="col-"] {
    float: left;
    padding: 6px 15px;
    /* border: 1px solid gray; */
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

.recuadro {
    display: flex;
    gap: 4px 4px;
    margin: 15px 0px;
}

.cuadro {
    width: 50%;
    /*border: solid 1px red;*/
}

h2 {
    text-align: center;
    font-size: 1.3rem;
    color: #900;
    font-weight: bold;
    margin: 10px;
}

main,
section {
    position: relative;
}

header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

header img {
    width: 30%;
}

header h1 {
    width: 70%;
}

p {
    color: darkslategray;
    text-align: justify;
    margin: .5rem 0;
}


h1 {
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: darkblue;
    background-color: white;
}

/*div {
    border: solid 1px red;
} */

fieldset {
    border: solid 1px rgb(150, 150, 150, 0.5);
    border-radius: 3px;
    background-color: white;
    padding: 0 .5rem;
    margin: 0.5rem 0;
}

fieldset .confirmar {
    margin: 0;
    font-size: .9rem;
    color: #900;
    text-align: left;
}

legend {
    text-transform: uppercase;
    color: darkslateblue;
    font-weight: bold;
    padding: 0 .7rem;
    font-size: 1rem;
}

label {
    text-transform: uppercase;
    font-weight: 600;
    color: darkslateblue;
    padding-right: 2rem;
    padding-bottom: 0rem;
    width: 100%;
    display: inline-block;
    font-size: 0.8rem;
}

.exams {
    width: 33%;
    padding-top: .4rem;
    font-size: 1rem;
}

input,
select,
textarea,
button {
    border: solid 1px rgb(150, 150, 150, 0.2);
    width: 100%;
    padding: 0.2rem;
    display: block;
    /*height: 23px; */
    /*height: 30px; */
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgb(150, 150, 150, 0.5);
    color: #900;
    font-size: 1rem;
}

select {
    width: auto;
    font-size: 1rem;
}

textarea {
    height: 65px;
}

input[type=radio] {
    width: 2rem;
    margin: 0 .5rem 0 1rem;
    box-shadow: 1px 1px 5px rgb(150, 150, 150, 0.5);
}

input[type=submit],
input[type=reset],
button {
    width: auto;
    text-align: center;
    height: auto;
    margin: 5px;
    padding: 6px;
    background-color: bisque;
    color: white;
    background: linear-gradient(#0070c9, #42a1ec);
    border: solid 1px #07c;
    /*margin: auto; */
}

input[type=submit]:hover,
input[type=reset]:hover,
button:hover {
    background: linear-gradient(#42a1ec, #0070c9);
    border: solid 1px #07c;
    color: #000;
    box-shadow: 1px 1px 5px rgb(150, 150, 150, 0.5);
}

.landing p {
    font-size: 1.2rem;
    margin: 1rem 3.5rem;
}

.landing b {
    font-size: inherit;
    font-weight: bold;
    color: darkblue;
}

.whatsapp {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 2;
}

footer {
    text-align: center;
    width: 100%;
    margin: auto;
    font-size: .9rem;
    font-weight: bold;
}

.ojo {
    display: inline-block;
    width: 90px;
    /*border: solid 1px blue;*/
}

.selectojo,
.selectojo2 {
    display: inline-block;
    /*max-width: 60%;*/
    width: 120px;
    /*background-color: #42a1ec;
    border: solid 1px red;*/
}

.selectojo2 {
    width: 210px;
}

.respuesta {
    font-size: 1.2rem;
    line-height: 150%;
    padding: 10px 20px;
}


#audiometria {
    display: grid;
    grid-template-columns: 1fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .1fr .5fr;
    grid-template-rows: 1fr;
    gap: 3px;
    align-content: center;
    /* background-color: aliceblue; */
}

#estimulos {
    display: grid;
    grid-template-columns: 1fr .5fr .5fr .5fr 1fr .5fr .5fr .5fr;
    grid-template-rows: 1fr;
    gap: 3px;
    align-content: center;
    width: 100%;
    /* background-color: aliceblue; */
}

#minimos {
    display: grid;
    grid-template-columns: 1fr .5fr .5fr .5fr;
    grid-template-rows: 1fr;
    gap: 3px;
    align-content: center;
    /* background-color: aliceblue; */
}

#impedanciometria {
    display: grid;
    grid-template-columns: 1fr .5fr .5fr .5fr .5fr;
    grid-template-rows: 1fr;
    gap: 3px;
    align-content: center;
    /* background-color: aliceblue; */
}

/* Especial */
.container {
    width: 320px;
    font-family: Arial, sans-serif;
}

.titulo {
    font-weight: bold;
    color: #2c3e90;
    /* azul similar */
    margin-bottom: 8px;
    text-transform: uppercase;
}

.centrar {
    text-align: center;
}

.fila {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.label {
    color: #000;
}

.valor {
    color: red;
    font-weight: bold;
}

.w-300 {
    width: 300px;
}

.w-500 {
    width: 500px;
}

.w-full {
    width: 100%;
}


.volver {
    display: block;
}

/* in Especial */


@media all and (max-width: 576px) {

    .landing p {
        font-size: 1.2rem;
        margin: 1rem .1rem;
    }

    header img {
        width: 100%;
    }

    header h1 {
        width: 100%;
    }

    .col-6,
    .col-4 {
        width: 100%;
    }

    .col-3 {
        width: 50%;
    }

    .exams {
        width: 75%;
    }

}

@media print {

    html {
        font-size: 11px;
    }

    .profes {
        display: none;
    }

    body {
        box-shadow: none;
    }

    .selectojo {
        width: 80px;
    }

    .selectojo2 {
        width: 140px;
    }

    .ojo {
        width: 65px;
    }

    .volver {
        display: none;
    }
}