* { box-sizing: border-box; font-family: 'Manrope', sans-serif; }
html, body, form { margin: 0; padding: 0; }
input[type=submit] { -webkit-appearance: none; }
#divUsuarioAutenticado { background: #ffb300; position: fixed; top: 0; width: 100%; z-index: 10; }
#divUsuarioAutenticado a { display: inline-block; padding: 16px 32px; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px }
#divUsuarioAutenticado a:hover { background: #ffc107 }
#divUsuarioAutenticado a > i { margin-right: 8px }
a { text-decoration: none }

header { width: 100%; background-color: #77d2d0; background-image: url(../img/fondo-header-biblio.jpg); background-size: cover; background-position: center top; background-repeat: no-repeat; color: #002742 }
/*header #divLogosHeader { display: table; width: 100%; }
header #divLogosHeader > div { display: table-cell; width: 50%; padding-bottom: 400px; vertical-align: middle; padding: 30px }
header #divLogosHeader > div:last-child { text-align: right }
header #divLogosHeader > div img { width: 100% }*/

.pix-check label { font-size: 16px }
.pix-centrado { text-align: center }

#condiciones { display: none }

#btnPrivacidad { text-decoration: none; color: #000; font-size: 16px; font-weight: bold; display: inline; margin-left: 5px; }
.pix-centrado .pix-span-error { overflow: visible !important }
h2 { font-size: 1.5rem }
h2 > span { font-size: 16px; color: #0097a7; display: block; font-weight: normal; color: #5493a1 }

#secContenido { border-radius: 50px; background: #fff; min-height: 100px; box-shadow: 0 0 10px rgba(0,0,0,.05); margin-bottom: 20px }
.secContenidoInt { border-radius: 50px; background: #fff; margin-top: -100px; min-height: 350px; padding: 50px; position: relative; z-index: 2; box-shadow: 0 -5px 5px rgba(0,0,0,.02); }


#secPasos { border-radius: 50px; background: #b2ebf2; padding: 50px 20px 120px 20px; min-height: 150px; font-size: 0; position: relative }
#secPasos > #divAvance { background: #0097a7; position: absolute; top: 50px; width: 80%; display: block; height: 5px; content: ''; background: #0097a7; position: absolute; top: 77px; width: 60%; display: block; left: 50%; margin-left: -30%; }
#secPasos > #divAvance > div { width: 0%; background: #fafafa; height: 11px; transition: width .2s ease-out; margin-top: -3px; border-radius: 5px; }
#secPasos a { text-decoration: none; display: block; width: 33.33%; display: inline-block; text-align: center; color: #222; vertical-align: top; position: relative; z-index: 1 }
#secPasos a > i { width: 48px; height: 48px; font-size: 24px; background: #0097a7; color: #fff; line-height: 48px; border-radius: 50%; display: inline-block; font-style: normal; border: solid 5px #b2ebf2; box-sizing: content-box }
#secPasos a:not(.activo):hover i { border-color: #d9f2f7 }
#secPasos a.activo > i { background: #fff; color: #222; border-color: #fff }
#secPasos a:not(.activo) { color: #0097a7 }
#secPasos a:not(.activo):hover { color: #6aa9b7 }
#secPasos a:not(.activo):active > i { border-color: #fff }
#secPasos a > p { font-size: 14px }
#secPasos a > p > span { display: block; font-size: 16px }


#secSeleccionaTipo { width: 100%; font-size: 0 }
#secSeleccionaTipo > div { display: inline-block; width: 50%; }
#secSeleccionaTipo > div:first-child { padding-right: 8px; }
#secSeleccionaTipo > div:last-child { padding-left: 8px; }
#secSeleccionaTipo > div > a { text-decoration: none; color: #777; display: block; border-radius: 20px; background: #fafafa; padding: 20px 8px }
#secSeleccionaTipo > div > a:not(.activo):hover { background: #d9f2f7 }
#secSeleccionaTipo > div > a:not(.activo):active { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.2) }
#secSeleccionaTipo > div > a > i { width: 100%; height: 32px; font-size: 32px; text-align: center; }
#secSeleccionaTipo > div > a.activo { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1) }
#secSeleccionaTipo > div > a.activo > i { color: #0097a7 }
#secSeleccionaTipo > div > a > strong { color: #000; font-size: 18px; display: block; width: 100%; overflow-x: hidden; text-overflow: ellipsis; }


#secSeleccionaDia { width: 100%; font-size: 0; padding-top: 50px }
#secSeleccionaDia:not(.activo) { display: none }
#secSeleccionaDia > div { display: inline-block; width: 33.33%; padding-bottom: 12px; vertical-align: top }
#secSeleccionaDia > div:nth-child(3n+2) { padding-right: 8px; }
#secSeleccionaDia > div:nth-child(3n+3) { padding-left: 4px; padding-right: 4px }
#secSeleccionaDia > div:nth-child(3n+4) { padding-left: 8px; }
#secSeleccionaDia > div > a { text-decoration: none; color: #777; display: block; border-radius: 20px; background: #fafafa; padding: 20px 8px }
#secSeleccionaDia > div.abono > a { background-color: #fff59d }
#secSeleccionaDia > div.abono > a:not(.activo):hover { background-color: #fff9c4 }
#secSeleccionaDia > div > a:not(.activo):hover { background-color: #d9f2f7 }
#secSeleccionaDia > div > a:not(.activo):active { background-color: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.2) }
#secSeleccionaDia > div > a.activo { background-color: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1) }
#secSeleccionaDia > div > a.activo > .divFecha > i { color: #0097a7 }
#secSeleccionaDia > div > a > .divFecha > i { width: 100%; height: 32px; font-size: 32px; text-align: center; }
#secSeleccionaDia > div > a > .divFecha > p { margin: 0; font-size: 14px; }
#secSeleccionaDia > div > a > .divFecha > strong { color: #000; font-size: 18px; display: block; width: 100%; overflow-x: hidden; text-overflow: ellipsis; }
#secSeleccionaDia > div > a > .divOcupacion { padding-top: 30px; text-align: right; font-size: 14px; min-height: 85px }
#secSeleccionaDia > div > a > .divOcupacion > img { height: 24px; display: inline-block }
#secSeleccionaDia > div > a > .divOcupacion > strong { color: #000 }

#secSeleccionActividad { padding-top: 50px; width: 100%; font-size: 0; }
#secSeleccionActividad:not(.activo) { display: none }
#secSeleccionActividad .divActividad { font-size: 1rem; text-decoration: none; color: #777; display: block; border-radius: 56px 20px 20px 20px; background: #fafafa; padding: 20px 20px 20px 128px; margin-bottom: 16px; }
#secSeleccionActividad .divActividad img { float: left; width: 96px; border-radius: 50%; margin-left: -112px }
#secSeleccionActividad .divActividad strong { font-size: 19px; color: #000; font-weight: bold }
#secSeleccionActividad .divActividad p { font-size: 13px; margin: 8px 0; }
#secSeleccionActividad .divActividad select { display: block; border: none; padding: 8px; height: 48px; border-radius: 8px; font-size: 20px; width: 100%; border: solid 2px #ccc; cursor: pointer }
#secSeleccionActividad .divActividad.activo { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1); }

#secSeleccionActividad .divActividad p.pHorario { color: #000; font-size: 15px; }
#secSeleccionActividad .divActividad p.pHorario:before { content: '\f017'; font-family: 'Font Awesome 5 Pro'; display: inline-block; margin-right: 4px }
#secSeleccionActividad .divActividad p.pOcupacion { font-weight: bold }

#secSeleccionActividad .divActividad p.pOcupacion.baja { color: #4caf50 }
#secSeleccionActividad .divActividad p.pOcupacion.media { color: #fdd835 }
#secSeleccionActividad .divActividad p.pOcupacion.alta { color: #f44336 }
#secSeleccionCitas { padding-top: 50px }
#secSeleccionCitas:not(.activo) { display: none }


.divDatosCita { display: table; width: 100%; border: solid 2px #ddd; padding: 16px 16px 32px 16px; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 3px 5px rgba(0,0,0,.05); }
.divDatosCita img{border-radius:4px}
.divTituloCita { margin-bottom: 16px }
.divTituloCita > div { display: table-cell; vertical-align: top }

.divTituloCita > div h3 { margin: 8px 0px; }
.divTituloCita > div h3>span{display:block; color:#0097a7; font-size:14px}
.divTituloCita > div:first-child { width: 72px; }
.divTituloCita > div:first-child i { font-size: 64px; color: #0097a7 }

#secPago{margin-top:32px}

#secResumen { padding: 20px 0 }

#secResumen #tblResumen { width: 100%; border-collapse: collapse }
#secResumen #tblResumen tr.trTotal td { font-weight: bold; text-align: right; font-size: 24px; border-top: solid 2px #ddd }
#secResumen #tblResumen td:last-child { width: 1%; text-align: right; min-width: 50px; }
#secResumen #tblResumen tr:not(:last-child) td { border-bottom: dashed 1px #ddd }
#secResumen #tblResumen td { font-size: 18px; padding: 8px 0px; }

#secResumen #tblResumen td .spanUnidades { font-weight: bold }

#divEnlacesFooter { text-align: center; font-size: 12px; padding-bottom: 100px }
#divEnlacesFooter a { display: inline-block; padding: 8px; color: #555 }
#divEnlacesFooter a:hover { color: #222 }


.pAvisoAdicional { color: #000; background: #b2ebf2; padding: 12px; border-radius: 5px; text-align: center; margin: 0 }
.pAvisoAdicional a { color: #000; font-weight: bold }
.pAvisoAdicional i { color: #ffa000; }

@media screen and (max-width:799px) {
    header { padding: 32px 32px 100px 32px; text-align: center; }
    #secContenido { margin-top: -75px }
    .secContenidoInt { padding: 32px }
    #secPasos a > p { font-size: 12px }
    #secPasos a > p > span { font-size: 14px }

    #secSeleccionaTipo > div > a > strong { font-size: 15px; display: block; text-align: center }

    #secSeleccionaDia > div > a > .divFecha { text-align: center; padding-left: 4px; padding-right: 4px }
    #secSeleccionaDia > div > a > .divOcupacion { text-align: center; min-height: 100px }
    #secSeleccionaDia > div > a > .divOcupacion > strong { font-size: 15px; display: block }


    #secSeleccionCitas #divTiposCita > div > div p.pPrecio { font-size: 36px; }
    #secSeleccionCitas #divTiposCita > div:not(:last-child) { margin-bottom: 16px; }
    #secSeleccionCitas #divTiposCita > div > div p.pDetalle { font-size: 14px }
    #secSeleccionCitas #divTiposCita select { height: 56px; font-size: 20px; }
}

@media screen and (min-width:800px) {
    html { background-color: #eee; }
    html, body, form { background-image: url(../img/textured_paper.png); }
    header { padding-bottom: 300px; padding-top: 32px; }
    header #divLogosHeader > div img { height: 100px; width: auto }

    #secContenido { margin-top: -275px }

    #secSeleccionaDia > div > a > .divFecha { padding-left: 48px; }
    #secSeleccionaDia > div > a > .divFecha > strong { font-size: 24px }
    #secSeleccionaDia > div > a > .divFecha > i { display: inline-block; margin-left: -48px; color: #aaa; width: 48px; float: left }
    #secSeleccionaDia > div > a > .divOcupacion > img { height: 32px; }
    #secSeleccionaDia > div > a:not(.activo) > .divFecha > strong { color: #777 }

    #secSeleccionaTipo > div > a { padding-left: 72px; }
    #secSeleccionaTipo > div > a > strong { font-size: 20px }
    #secSeleccionaTipo > div > a > i { display: inline-block; margin-left: -56px; color: #aaa; width: 48px; float: left }
    #secSeleccionaTipo > div > a:not(.activo) > strong { color: #777 }


    .divColumna { width: 780px; margin: 0 auto }
    #condiciones { max-width: 800px }

    #secSeleccionCitas #divTiposCita { width: 100%; font-size: 0 }
    #secSeleccionCitas #divTiposCita > div { width: 33.33%; display: inline-block; padding-bottom: 16px; vertical-align: top }
    #secSeleccionCitas #divTiposCita > div > div > strong { text-align: center; font-size: 18px }
    #secSeleccionCitas #divTiposCita > div > div p.pPrecio.gratuita { font-size: 23px }

    #divEnlacesFooter { font-size: 13px; }
}

@media screen and (min-width:1240px) {

    .divColumna { width: 1200px; }
    #condiciones { max-width: 1200px }
    #secSeleccionaDia > div > a > .divFecha > strong { font-size: 32px }
    #secSeleccionaTipo > div > a > strong { font-size: 32px }
    #secSeleccionCitas #divTiposCita > div > div > strong { font-size: 24px }

    #divEnlacesFooter { font-size: 14px; }
}