/*Azul oscuro: 012b43
    Cian: 00cfdc
*/

:root { --pix-color-primario: #012b43; --pix-color-acento: #00bcd4 /*Color Govify: #00cfdc*/; }

/*Reseteo hoja de estilos*/
* { box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; }
html, body { margin: 0; padding: 0 }
body { overflow-y: scroll; padding-bottom: 72px }
input[type=submit], button[type=submit] { -webkit-appearance: none; }
a { text-decoration: none; outline: none; color: #0097a7; }

.secInterior { padding-top: 16px; }
.secInterior p { font-size: 20px }
h1 { font-size: 30px; font-weight: bold; position: relative; color: #222 }
h1:after { content: ''; display: block; width: 50%; height: 4px; background: var(--pix-color-acento); position: absolute; bottom: -8px }

.pix-btn{font-size:20px; line-height:64px; border-radius:32px }

/*Header*/
header { background: #012b43; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-shadow: 0 3px 5px rgba(0,0,0,.2); }
.tbHeader { display: table; width: 100% }
.tbHeader > div { display: table-cell; vertical-align: middle }
.tbHeader > div:first-child { width: 99%; }
.tbHeader > div > a { display: block; width: 72px; height: 72px; text-align: center; color: #fff; padding: 12px; }
.tbHeader > div > a > i { font-size: 36px; line-height: 48px; }
.tbHeader > div > a.btnLogo { width: 100%; text-align: left; display: table; width: 100%; padding: 0; font-size: 16px; }
.tbHeader > div > a.btnLogo > div { display: table-cell; vertical-align: middle; padding-right: 12px }
.tbHeader > div > a.btnLogo > div:first-child { width: 1%; padding: 12px; font-size: 0 }
.tbHeader > div > a.btnLogo img { border-radius: 50%; width: 48px; height: 48px; }
.tbHeader > div > a.btnPerfil img { border-radius: 50% }
.tbHeader > div > a#btnNotificaciones { position: relative }
.tbHeader > div > a#btnNotificaciones span { border: solid 4px #012b43; box-sizing: content-box; animation: pulse 1.2s infinite; background: #4caf50; color: #fff; width: 20px; height: 20px; text-align: center; display: block; position: absolute; right: 4px; top: 8px; border-radius: 50%; font-size: 13px; font-weight: bold; line-height: 20px }
.tbHeader .tituloHeader { display: table-cell; color: #fff; vertical-align: middle; font-size: 24px; }

/*Cuerpo*/
#secCuerpo { padding-top: 72px; display: block; font-size: 0 }
#secCuerpo .secTab:not(.activo) { display: none }

/*Tabs*/
.secTab { padding-top: 72px; display: block; font-size: 0; }
#secTabs { background: #01314d; position: fixed; z-index: 40; top: 72px }
body.cargado #secTabs { transition: top .2s ease-out }
#secTabs.inactivo { top: 0 }
#secTabs.intermedio { transition: none !important }
#secTabs > div { display: table; width: 100%; table-layout: fixed }
#secTabs > div > div { display: table-cell; width: 1% }
#secTabs a { height: 72px; display: block; color: rgba(255, 255, 255, 0.50); text-transform: uppercase; border-top: solid 4px transparent; border-bottom: solid 4px transparent; font-size: 18px; letter-spacing: 1px; font-stretch: expanded; text-align: center; line-height: 64px; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap }
#secTabs a.activo { color: #fff; border-bottom-color: var(--pix-color-acento) }
#secTabs a:not(.activo):hover { color: #fff; border-bottom-color: rgba(0, 207, 220, 0.30) }


/*Noticias*/
.noticia { position: relative; font-size: 18px }
.noticia .imgNoticia { width: 100%; overflow: hidden; display: block; background-color: #012b43; font-size: 0 }
.noticia .imgNoticia > img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; object-position: top; display: block; }
.noticia .imgNoticia:not(.imgFichaNoticia) > img { max-height: 80vw; }
.noticia .btnFancyNoticia { width: 100%; font-size: 0; display: block; text-decoration: none; position: relative }
.noticia .btnFancyNoticia > img { width: 100% }
.noticia .btnFancyNoticia:after { font-family: 'Font Awesome 5 Pro'; content: '\f00e'; width: 48px; height: 48px; position: absolute; border-radius: 50%; background-color: #012b43cc; position: absolute; bottom: 16px; right: 16px; font-size: 24px; color: rgba(255,255,255,.8); line-height: 48px; text-align: center; }
.noticia .btnFancyNoticia:hover:after { background-color: #012b43; color: #fff }
.noticia a { pointer-events: all !important }
.noticia .categoriasNoticia { display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 0; max-width: 100% }
.noticia .categoriasNoticia > a { display: inline-block; text-transform: uppercase; font-size: 14px; background: #eee; color: #546e7a; padding-left: 8px; padding-right: 8px; line-height: 24px; pointer-events: all }
.noticia .categoriasNoticia > a:first-child { background: var(--pix-color-acento); color: #fff; border-top-left-radius: 2px; border-bottom-left-radius: 2px }
.noticia .categoriasNoticia > a:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px }
.noticia h2 { margin-top: 8px; margin-bottom: 2px; font-size: 28px; }
.noticia h2 a { display: block; }
.noticia .accionesNoticia { display: table; width: 100%; line-height: 24px; font-size: 14px }
.noticia .accionesNoticia > div { display: table-cell; vertical-align: middle; }
.noticia .accionesNoticia > div:first-child { padding-right: 16px }
.noticia .accionesNoticia > div:last-child { width: 99%; text-align: right }
.noticia .accionesNoticia > div span { white-space: nowrap; opacity: .8; font-weight: lighter; }
.noticia .btnMasOpciones { display: inline-block; width: 48px; height: 48px; line-height: 48px; text-align: center; font-size: 32px; border-radius: 50%; }
.noticia .cuerpoNoticia { font-size: 0; pointer-events: none }
.noticia .cuerpoNoticia p { line-height: 1.5rem; font-size: 18px; color: #555 }
.noticia .cuerpoNoticia p a { color: #012b43; font-weight: bold; pointer-events: all }
.noticia .cuerpoNoticia img { max-width: 100%; height: auto; border: solid 1px #eceff1; border-radius: 2px; }
.noticia .divMasOpciones { position: relative; display: inline-block; left: 3px }
body.menuOpcionesDesplegado .noticia.activo .cuerpoNoticia { z-index: 4; }
#divFinNoticias { font-size: 22px; color: #546e7a; text-align: center; padding: 160px 16px; font-weight: lighter; line-height: 40px }
#divFinNoticias img { width: 80px; }

/*Nocitias - Explorar*/
#secExplorar { background: #012b43; color: #fff; min-height: calc(100vh - 144px); padding-top: 16px; }
#secExplorar h2 { font-size: 30px; font-weight: normal; text-align: center }
#secExplorar input[type="search"] { width: 100%; border: none; outline: none; border-radius: 4px; line-height: 72px; padding: 0 16px; background: #eee; font-size: 18px }
#secExplorar input[type="search"]:focus { background: #fff }
#secExplorar #divExplorarCategorias { font-size: 0; text-align: left; padding-top:16px }
#secExplorar #divExplorarCategorias > div { display: inline-block }
#secExplorar #divExplorarCategorias > div > a { background-color: #222; display: table; table-layout: fixed; width: 100%; text-align: center; border-radius: 4px; color: #fff; background-size: cover; background-position: center center; text-shadow: 0 0 5px rgba(0,0,0,.5); box-shadow: 0 0 10px rgba(0,0,0,.2) }
#secExplorar #divExplorarCategorias > div > a > span { width: 100%; font-size: 14px; color: rgba(255,255,255,.5); border-radius: 4px; height: 100%; padding: 8px; background: rgba(0,0,0,.5); color: #fff; display: table-cell; vertical-align: middle; height: 200px; backdrop-filter: blur(1px); }
#secExplorar #divExplorarCategorias > div > a:hover > span { background: rgba(0,0,0,.4); backdrop-filter: none }
#secExplorar #divExplorarCategorias > div > a > span > strong { font-size: 24px; color: #fff; white-space: nowrap; text-align: center; display: block; text-overflow: ellipsis; overflow: hidden; font-weight: normal }

/*Iconos Me gusta y Guardar noticias*/
.btnMeGusta { color: #c1c1c1 }
.btnGuardar { color: #c1c1c1 }
.megusta { color: #012b43 !important }
.megustaAlt { color: white !important }
.megusta > i { font-weight: 900 !important }
.megustaAlt > i { font-weight: 900 !important }
.guardada { color: #012b43 !important }
.guardadaAlt { color: white !important }
.guardada > i { font-weight: 900 !important }
.guardadaAlt > i { font-weight: 900 !important }

/*Servicios*/
#secServicios { padding: 0; background-color: #012b43; }
#secServicios #divServicios { font-size: 0; text-align: left; min-height: calc(100vh - 144px) }
#secServicios #divServicios > div { display: inline-block }
#secServicios #divServicios > div > a { background-color: #222; display: table; width: 100%; text-align: center; overflow: hidden; color: #fff; background-size: cover; background-position: center center; text-shadow: 0 0 5px rgba(0,0,0,.5); box-shadow: 0 0 10px rgba(0,0,0,.2) }
#secServicios #divServicios > div > a > span { width: 100%; font-size: 16px; padding: 8px; background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.7)); color: #cfd8dc; font-weight: lighter; display: table-cell; vertical-align: middle; height: calc(25vh - 18px); backdrop-filter: blur(0.5px); }
#secServicios #divServicios > div > a:hover > span { background: rgba(0,0,0,.4); backdrop-filter: none; }
#secServicios #divServicios > div > a > span > strong { font-size: 26px; color: #fff; text-align: center; display: block; text-overflow: ellipsis; overflow: hidden; font-weight: normal }

/*Footer*/
footer { background: #012b43; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; text-align: center; box-shadow: 0 -3px 5px rgba(0,0,0,.2) }
footer > div { display: table; }
footer > div > div { display: table-cell; width: 1% }
footer a { display: block; text-align: center; color: rgba(255, 255, 255, 0.6) }
footer a.activo { color: #fff }
footer a.activo > i { opacity: .8 }
footer a:not(.activo):hover { color: rgba(255, 255, 255, 0.7) }
footer a > i { display: block; width: 100%; font-size: 24px; text-align: center; line-height: 46px !important; opacity: .3 }
footer a > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; font-size: 15px; line-height: 14px; padding-bottom: 12px; }
footer { transition: bottom .2s ease-out }
body.footerInactivo:not(.menuFooterFijo) footer { bottom: -72px }
.divInfo { display: block; background: #ffecb3; padding: 12px 12px 12px 34px; border-radius: 4px; margin-bottom: 10px; font-size: 15px }
.divInfo:before { content: '\f0eb'; font-family: 'Font Awesome 5 Pro'; width: 24px; height: 24px; display: block; text-align: center; font-size: 22px; color: #ffc107; float: left; margin-left: -30px; }
.divInfo a { font-weight: 500 }
.divPie { text-align: center; padding-top: 48px; padding-bottom: 48px }
.divPie img { width: 80px; }
.divPie p { font-size: 22px; color: #546e7a; text-align: center; font-weight: lighter; line-height: 40px; }
.div-snackbar { z-index: 101 }
.divIniciaSesion { text-align: center !important; }
.divIniciaSesion img { max-width: 100%; height: 200px; }
.divIniciaSesion .btnIniciarSesion { background: var(--pix-color-primario) !important; }
.divBotonesCompartir { position: absolute; white-space: nowrap; bottom: -80px; text-align: center; }
.divBotonesCompartir > div { background: #012b43; padding: 1rem; }
.divBotonesCompartir a { font-size: 32px; width: 48px; height: 48px; display: inline-block; border-radius: 4px; color: #fff; text-decoration: none; line-height: 48px; text-align: center; margin-right: .5rem; }
/*Botones redes sociales*/
.btnFacebook { background-color: rgb(59, 89, 152); }
.btnTwitter { background-color: rgb(85, 172, 238); }
.btnWhatsapp { background-color: rgb(18, 175, 10); }
.btnWhatsappPC { background-color: rgb(18, 175, 10); }
/*Incidencias*/
.estado-resuelto .chip, .estado-resuelto .accionPrimaria span { background: #4caf50; }
.estado-en-revision .chip, .estado-en-revision .accionPrimaria span { background: #ffd54f; }
.estado-pendiente .chip, .estado-pendiente .accionPrimaria span { background: #546e7a; }
.chip { display: inline-block; background: #eee; color: #fff; font-size: 13px; padding: 0px 8px; border-radius: 16px; line-height: 24px; margin-top: 4px; white-space: nowrap; }
/*Notificaciones*/
.estado-nueva-notificacion .chip, .estado-nueva-notificacion .accionPrimaria span { background: #4caf50 }
/*Inicio*/
.imgInicio { width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; }
/*Estilos estado padrón*/
.noEmpadronado { background: #f5f5f5; color: #757575 }
.noEmpadronado:before { content: '\f235'; color: #757575; font-size: 18px; }
.pendienteValidar { background: #fff9c4; color: #f57f17 }
.pendienteValidar:before { content: '\f4fd'; color: #f57f17; font-size: 18px; }
.empadronado { background: #c8e6c9; color: #1b5e20; display: inline-block }
.empadronado:before { content: '\f4fc'; color: #1b5e20; font-size: 18px; }
#secIncidencias p { text-align: left }
.pix-registro.noPuedeSolicitar { filter: saturate(0); opacity: .5; }
/*Botones de Compartir*/
@media (max-width:679px) {

    .divBotonesCompartir { margin-left: -120px; }
    .divBotonesCompartir a.btnWhatsappPC { display: none }
}

@media (min-width:680px) {

    .divBotonesCompartir { right: 0; }
    .divBotonesCompartir a.btnWhatsapp { display: none }
}

@media only screen and (max-height:580px) {
    footer { position: static !important }
    /*Quito el fixed al footer en la vista móvil cuando despliegan el teclado*/
}

@media only screen and (max-width:800px) {

    h1 { padding-left: 8px; padding-right: 8px; text-align: center }
    h1:after { left: 50%; margin-left: -25% }

    .secInterior { padding: 8px }

    /*Noticias*/
    .noticia:not(.noticiaFicha) .cuerpoNoticia { position: absolute; padding: 12px; bottom: 0; left: 0; width: 100%; background-image: linear-gradient(transparent,rgba(0,0,0,.7)); color: #fff; backdrop-filter: blur(.7px); }
    .noticia:not(.noticiaFicha).sinImagen { background: var(--pix-color-primario) }
    .noticia:not(.noticiaFicha).sinImagen .cuerpoNoticia { position: relative; }
    .noticia:not(.noticiaFicha):hover .cuerpoNoticia { background-image: linear-gradient(transparent,rgba(0,0,0,.6)); }
    .noticia h2 { font-size: 24px; }
    .noticia:not(.noticiaFicha) h2 { color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.5); }
    .noticia:not(.noticiaFicha) h2 a { color: #fff; }
    .noticia.noticiaFicha h2 a { color: #222 }
    .noticia:not(.noticiaFicha) .btnMasOpciones { color: #fff }
    .noticia.noticiaFicha .btnMasOpciones { color: #222 }
    .noticia.noticiaFicha .cuerpoNoticia { padding: 8px }

    .noticia .divMasOpciones .btnAccion { z-index: -1; /*display: none;*/ opacity: 0; position: absolute; background-color: white; color: black; text-decoration: none; border-radius: 50%; font-size: 24px; width: 48px; height: 48px; line-height: 48px; text-align: center; transition: all .3s ease-in-out; }
    .noticia .divMasOpciones .btnAccion > i { font-weight: 400; }
    .noticia.activo .divMasOpciones .btnAccion { display: inline-block; }
    .noticia.activo .divMasOpciones .btnAccion { transform: translateX(0) translateY(0) !important; opacity: 1 !important; display: inline-block; }
    .noticia:after { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 3; top: 0; transition: all .3s ease-in-out; display: none; backdrop-filter: blur(1px); }
    body.menuOpcionesDesplegado .noticia:not(.activo):after { display: block; }
    .noticia.activo .btnMasOpciones { background-color: rgba(1,43,67,.4); }
    .noticia .divMasOpciones.tresOpciones .btnAccion:first-child { bottom: 104px; transform: translateY(100px); }
    .noticia .divMasOpciones.tresOpciones .btnAccion:nth-child(2) { bottom: 46px; transform: translateY(100px); }
    .noticia.activo .divMasOpciones.tresOpciones .btnAccion:first-child { z-index: 200; }
    .noticia.activo .divMasOpciones.tresOpciones .btnAccion:nth-child(2) { z-index: 200; }
    .noticia.activo .divMasOpciones.tresOpciones .btnAccion:nth-child(3) { z-index: 200; }

    .noticia .divMasOpciones .btnAccion { background-color: #012b43 !important }
    .noticia .divMasOpciones .btnAccion i { color: white }
    .noticia .divMasOpciones .btnAccion { background-color: #012b43 !important }
    .noticia .divMasOpciones .btnAccion i { color: white }

    /*Noticias - Explorar*/
    #secExplorar { text-align: center }
    #secExplorar #divExplorarCategorias > div { width: 50%; padding-bottom: 8px }
    #secExplorar #divExplorarCategorias > div:nth-child(2n+1) { padding-right: 4px }
    #secExplorar #divExplorarCategorias > div:nth-child(2n+2) { padding-left: 4px }

    .slick-arrow { display: none !important; }

    /*Servicios*/
    #secServicios { text-align: center }
    #secServicios #divServicios > div { width: 50%; }

    /*Footer*/
    footer > div { width: 100%; table-layout: fixed }
    footer, footer a { height: 72px }
}

@media only screen and (min-width:801px) {
    .columnaCentral { width: 770px; margin-left: auto; margin-right: auto }

    /*Cuerpo*/
    #secCuerpo { padding-bottom: 72px; }

    /*Noticias*/
    .noticia { margin-top: 32px; color: #222 }
    .noticia .imgNoticia { margin-bottom: 16px; border-radius: 16px; height: 360px }
    .noticia.sinImagen:before { content: ''; height: 360px; width: 100%; border-radius: 16px; background: #eceff1; display: block; margin-bottom: 16px; background-position: center center; background-image: url(//cdn.pixelinnova.com/pixelone/sin-imagen.svg); background-repeat: no-repeat; background-size: contain; }
    .noticiaFicha .imgNoticia { height: 400px }
    .noticia .accionesNoticia > div { color: #546e7a }
    .noticia h2 a { color: #222 }
    .noticia h2 a:hover { color: #000 }
    .noticia .btnMasOpciones { color: #546e7a }
    .noticia .btnMasOpciones:hover { color: #222 }

    .noticia .btnMasOpciones { display: none; }
    .noticia .divMasOpciones .btnAccion { display: inline-block; color: #546e7a; text-decoration: none; border-radius: 50%; font-size: 24px; width: 48px; height: 40px; line-height: 40px; text-align: center; /*transition: all .3s ease-in-out;*/ }
    .noticia .divMasOpciones .btnAccion:hover { color: #012b43; }
    .noticia .divMasOpciones .btnAccion.btnMeGusta:hover { color: #012b43 }
    .noticia .divMasOpciones .btnAccion > i { font-weight: 400; }

    /*Nocitias - Explorar*/
    #secExplorar #divExplorarCategorias > div { width: 33.33%; padding-bottom: 15px; }
    #secExplorar #divExplorarCategorias > div:nth-child(3n+1) { padding-right: 10px }
    #secExplorar #divExplorarCategorias > div:nth-child(3n+2) { padding-right: 5px; padding-left: 5px }
    #secExplorar #divExplorarCategorias > div:nth-child(3n+3) { padding-left: 10px }
    #secExplorar #divExplorarCategorias > div > a > span > strong { font-size: 30px }
    #secExplorar input[type="search"] { font-size: 24px }

    /*Servicios*/
    #secServicios #divServicios > div { width: 33.33%; padding-bottom: 15px; }
    #secServicios #divServicios > div:nth-child(3n+1) { padding-right: 10px }
    #secServicios #divServicios > div:nth-child(3n+2) { padding-right: 5px; padding-left: 5px }
    #secServicios #divServicios > div:nth-child(3n+3) { padding-left: 10px }
    #secServicios #divServicios > div > a > span > strong { font-size: 30px }

    /*Footer*/
    footer > div { width: 1%; margin-left: auto; margin-right: auto }
    footer a { width: 120px }
}

@media only screen and (min-width: 1281px) {
    .columnaCentral { width: 1080px; }

    /*Noticias*/
    .noticia { margin-top: 32px; color: #222; font-size: 1rem; vertical-align: top; }
    .noticia:not(.noticiaFicha) { width: 50%; display: inline-block; padding-top: 8px; padding-bottom: 8px }
    .noticia:not(.noticiaFicha):nth-child(2n+1) { padding-right: 8px }
    .noticia:not(.noticiaFicha):nth-child(2n+2) { padding-left: 8px }
    .noticiaFicha .imgNoticia { height: 540px }
}

::-moz-selection { background: var(--pix-color-acento); color: #000; }
::-webkit-selection { background: var(--pix-color-acento); color: #000; }
::selection { background: var(--pix-color-acento); color: #000; }

@keyframes pulse {
    0% { transform: scale(1.15); }
    70% { transform: scale(1); }
    100% { transform: scale(1); }
}