@font-face { font-family: 'Nexa'; src: url('NexaLight.woff2') format('woff2'), url('NexaLight.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('NexaBold.woff2') format('woff2'), url('NexaBold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }

:root { --energyear-azul-oscuro: #001b3d; --energyear-morado: #362983; --energyear-azul-claro: #00a0db; --energyear-naranja: #ef7135 }

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-user-select: none;  -ms-user-select: none;  user-select: none;  }
input, input:before, input:after { -webkit-user-select: initial; -khtml-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; }
html { padding: 0; }
html, body { margin: 0; font-family: "Montserrat", sans-serif; min-height: 100vh; font-weight:300 }
body { background: #f0f0f0 /*linear-gradient(to right, var(--energyear-morado), var(--energyear-azul-claro))*/; background-attachment: fixed; padding: 48px 0;background-size:cover }
a { text-decoration: none; color: inherit }
.divInfo { display: block; background: #ffecb3; padding: 16px 16px 16px 34px; border-radius: 16px; margin-bottom: 8px; font-size: 15px; line-height: 20px; }
.divInfo:before { content: '\f0eb'; font-family: 'Font Awesome 5 Free'; width: 24px; height: 24px; display: block; text-align: center; font-size: 22px; color: #ffc107; float: left; margin-left: -28px; }

.pix-tarjeta { border-radius: 2px }

body.cargando:before { background: rgba(0, 0, 0, .4); top: 0; }
body.cargando:after { border-top: 16px solid #00a0db !important; }

.pix-campo.pix-foco:after{background-color:var(--energyear-azul-oscuro)}

.div-snackbar { bottom: 32px !important; }
.div-snackbar > div { background-color: var(--energyear-azul-oscuro) }
.divColumna { max-width: 760px; margin-left: auto; margin-right: auto }
.custom-tarjeta-titulo {font-weight:bold; text-transform: uppercase; font-size: 20px; color: var(--energyear-azul-oscuro); display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 32px; margin-bottom:6px; padding-top:6px }
.custom-tarjeta-titulo:after { content: '\f061'; font-family:'Font Awesome 5 Free';opacity:.3; margin-left:8px }
.custom-tarjeta-contenido { padding: 16px; border-radius: 2px; background: #fff; color: #263238; min-height: 48px; box-shadow:4px 8px 16px rgba(0,0,0,.15); margin-bottom:16px  }


/*Botones*/
.custom-btn { line-height: 36px; border: none; background: transparent; border: solid 1px var(--energyear-azul-oscuro); color: var(--energyear-azul-oscuro); font-size: 14px; border-radius: 20px; padding: 0 12px; display: block; text-align: center; cursor: pointer; font-weight: bold }
.custom-btn > i {  opacity: .8; margin-right: 6px }
.custom-btn[disabled]{filter:saturate(0); opacity:.3}
.custom-btn:hover { background: var(--energyear-azul-oscuro); color: #fff; border-color: var(--energyear-azul-oscuro); box-shadow: 0 0 7px rgba(0,0,0,.15) }
.custom-btn-inline { display: inline-block }
.custom-btn-solido { background: var(--energyear-azul-oscuro); color: #fff }
.custom-btn-solido:hover { background: var(--energyear-azul-claro); border-color: var(--energyear-azul-claro) }
.custom-btn-invertido { color: #fff; border-color: #fff }
.custom-btn-invertido:hover { color: var(--energyear-azul-oscuro); background: #fff; border-color: #fff }


/*Selector (tabs de secciones interiores)*/
.pix-selector { display: table; table-layout: fixed; width: 100%;  }
.pix-selector > div { display: table-cell; vertical-align: top; width: 33.33% }
.pix-selector a { display: block; color: #ffffffaa; text-align: center; font-size: 15px; border-bottom: solid 2px transparent; line-height: 40px; cursor: pointer }
.pix-selector a:hover { border-bottom-color: #ffffff33 }
.pix-selector a.activo, .pix-selector a:active { border-bottom-color: #fff; color: #fff }
.pix-tab-selector:not(.activo) { display: none }


#secSubHeader:not(:empty) { z-index: 9; position: sticky; top: 48px; width: 100%; background: linear-gradient(to right, var(--energyear-morado), var(--energyear-azul-claro)); }

/*Barra superior*/
#secTopBar { position: fixed; top: 0; width: 100%; background: linear-gradient(to right, var(--energyear-morado), var(--energyear-azul-claro)); z-index: 52; color: #fff }
#secTopBar #divTopBar { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; font-family: Nexa, sans-serif; }
#secTopBar #divTopBar > div { display: table-cell; vertical-align: top }
#secTopBar #divTopBar > div:not(#divTituloPagina) { width: 48px }
#secTopBar #divTopBar > div > a { display: block; width: 48px; height: 48px; text-align: center; cursor: pointer }
#secTopBar #divTopBar > div > label { text-align: center;text-transform:uppercase; font-size: 18px; display: block; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold }
#secTopBar #divTopBar > div > a#btnMenuUsuario { padding: 6px }
#secTopBar #divTopBar > div > a#btnMenuUsuario > img { border-radius: 50%; width: 36px; height: 36px; background-color: #eceff1 }
#secTopBar #btnVolverTopBar{width:48px; height:48px; line-height:48px; text-align:center; font-size:18px}

/*Zona central de contenidos*/
#secContenido { padding-left: 12px; padding-right: 12px }

/*Barra inferior*/
#secBottomBar { position: fixed; bottom: 0; width: 100%; z-index: 10; color: #fff; background: linear-gradient(to right, var(--energyear-morado), var(--energyear-azul-claro)) }
#secBottomBar #divBottomBar { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; font-family: Nexa, sans-serif }
#secBottomBar #divBottomBar > div { display: table-cell; width: 20%; vertical-align: top }
#secBottomBar #divBottomBar > div > a { display: block; text-align: center; position: relative; cursor: pointer; opacity: .8 }
#secBottomBar #divBottomBar > div > a:hover, #secBottomBar #divBottomBar > div > a:hover > i { opacity: 1; }
#secBottomBar #divBottomBar > div > a > i { line-height: 20px; opacity: .2;width:100%; max-width: 48px; margin-bottom: 2px; margin-top: 4px }
#secBottomBar #divBottomBar > div > a > label { display: block; font-size: 11px; line-height: 22px; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 2px }
#secBottomBar #divBottomBar > div > a.activo, #secBottomBar #divBottomBar > div > a:active { opacity: 1; }
#secBottomBar #divBottomBar > div > a.activo > i, #secBottomBar #divBottomBar > div > a:active > i { opacity: 1; background-color: #00000033; border-radius: 14px }
#secBottomBar #divBottomBar > div > a.activo > label, #secBottomBar #divBottomBar > div > a:active > label { font-weight: bold }
#secBottomBar #divBottomBar > div > a .spanContador { position: absolute; top: 3px; left: calc(50% + 3px); border-radius: 50%; background: #7cb342; color: #fff; font-size: 10px;font-weight:bold; height:14px }
#secBottomBar #divBottomBar > div > a .spanContador:not(:empty) { line-height: 14px; width: 14px; overflow: hidden }


/*Barra lateral de navegación*/
#secNav { width: 320px; height: 100%; }
#secNav > nav { background: #fff; height: 100%; box-shadow: 5px 0 10px rgba(0,0,0,.1); overflow-y: auto; }
#secNav > nav > ul { list-style-type: none; padding: 16px; }
#secNav > nav > ul > li > a { color: #607d8b; font-weight: lighter; font-size: 15px; line-height: 40px; width: 100%; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#secNav > nav > ul > li > a > i { color: #cfd8dc; display: inline-block; width: 48px; text-align: center; font-size: 20px; vertical-align: middle }
#secNav > nav > ul > li > a:hover { color: #263238 }
#secNav > nav > ul > li > a:hover > i { color: #b0bec5 }
#secNav #divPerfil { position: relative }
#secNav #divPerfil img { width: 120px; height: 120px; border-radius: 50%; background-color: #eceff1; border: solid 5px #fff; position: absolute; top: 100px; left: 50%; margin-left: -60px; }
#secNav #divPerfil a { background: #fff; display: block; width: 100%; text-align: center; color: #78909c; font-size: 14px }
#secNav #divPerfil a:hover { color: #546e7a }
#secNav #divPerfil a > strong { font-size: 18px; display: block; padding-top: 64px; width: 100%; color: #263238; font-size: 24px }
#secNav #divPerfilFondo { height: 160px; background-color: #eceff1; background-image: url(/img/fondo-perfil.jpg); background-size: cover; background-position: center top }

/*Barra lateral de navegación - Submenús*/
#secNav { width: 280px }
#secNav > nav { background: linear-gradient(120deg, var(--energyear-morado), var(--energyear-azul-claro)); height: 100%; box-shadow: 5px 0 10px rgba(0, 0, 0, .1); overflow-y: auto; }
#secNav > nav > ul { padding: 8px; margin: 0 }
#secNav > nav > ul > li { border-radius: 4px; transition: background-color .1s }
#secNav > nav > ul > li > a > i { color: #ffffff77; font-size: 16px; width: 38px }
#secNav > nav > ul > li > a[href='#'] { padding-right: 40px }
#secNav > nav > ul > li > a[href='#']:after { content: '\f107'; font-family: 'Font Awesome 5 Free'; display: block; font-size: 24px; vertical-align: middle; float: right; width: 40px; text-align: center; margin-right: -40px; transition: transform .2s }
#secNav > nav > ul > li.activo { background: #eceff1; background: rgba(0, 0, 0, .1); }
#secNav > nav > ul > li.activo > a[href='#']:after { transform: rotate(-180deg) }
#secNav > nav > ul > li:not(.activo) > ul { display: none }
#secNav > nav > ul > li > ul { list-style-type: none; padding: 12px 0; border-radius: 4px; }
#secNav > nav > ul > li > ul > li > a { display: block; padding-left: 56px; line-height: 24px; padding-top: 6px; padding-bottom: 6px; color: #607d8b; font-size: 15px; }
#secNav > nav > ul > li > ul > li > a > i { width: 32px; height: 32px; float: left; margin-left: -38px; display: block; text-align: center; font-size: 18px; color: #cfd8dc }
#secNav > nav > ul > li > ul > li > a:hover, #secNav > nav li.actual > a { color: #263238 }
#secNav > nav > ul > li > ul > li > a:hover > i, #secNav > nav li.actual > a > i { color: #90a4ae; }
#secNav > nav > ul > li > a, #secNav > nav > ul > li > ul > li > a { color: #ffffffdd }
#secNav > nav > ul > li > a:hover, #secNav > nav > ul > li > ul > li > a:hover, #secNav > nav li.actual > a { color: #fff }
#secNav > nav > ul > li > a:hover > i, #secNav > nav > ul > li > ul > li > a:hover > i, #secNav > nav li.actual > a > i { color: #ffffffdd }

.pix-menu-box{height:48px}
.pix-menu-inner, .pix-menu-inner::before, .pix-menu-inner::after{height:2px; width:20px}
.pix-menu--spring .pix-menu-inner { top: 19px; left: 14px; }
.pix-menu--spring .pix-menu-inner::before{top:6px}
.pix-menu--spring .pix-menu-inner::after{top:12px}
#pix-contenedor-menu { padding-top: 48px; width: 280px; left: -280px; }

.show-nav #pix-contenedor-menu { -webkit-transform: translateX(280px); transform: translateX(280px); transform: translate3d(280px, 0, 0); -webkit-transform: translate3d(280px, 0, 0); }

.ease-in-out { -webkit-transition: 200ms ease-out all; transition: 200ms ease-out all; }
.no-overflow { overflow: hidden; touch-action: none; }
body.show-nav .overlay { opacity: 1; pointer-events: all }
body .overlay { pointer-events: none; opacity: 0; transition: opacity .3s; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.45); z-index: 50; backdrop-filter: blur(.5px); }

@media only screen and (min-width:801px) {
    .pix-menu { display:block!important }
}

.pix-mini-menu > a, .pix-mini-menu > a:link {  font-size: 14px; padding: 12px 24px 12px 8px; }


.divInfo { display: block; background: #ffecb3; padding: 16px 16px 16px 34px; border-radius: 16px; margin-bottom: 8px; font-size: 15px; line-height: 20px; }

.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: -28px; }



/*Menú de usuario*/
#divMenuUsuario { position: relative }
#btnCabeceraMiCuenta { width: 280px; position: relative; padding-left: 80px; padding-top: 16px; text-decoration: none; min-height: 80px; }
#btnCabeceraMiCuenta > img { width: 64px; height: 64px; border-radius: 50%; position: absolute; margin-left: -72px }
#btnCabeceraMiCuenta > strong { color: #000; font-size: 18px; display: block }
#btnCabeceraMiCuenta > span { color: #607d8b; font-size: 15px; display: block; white-space: normal; }
#divAcreditacionMiCuenta { width: 280px; text-align: center; padding: 8px 0; }
#divAcreditacionMiCuenta > img { width: 80%; display: inline-block }
#divAcreditacionMiCuenta > p { color: #607d8b; font-size: 15px; margin-top: 0 }
#divCambioIdioma { padding: 0 8px }
#divCambioIdioma .cmbCambioIdioma { color: #263238; font-size: 14px; display: block; background-color: #fff; width: 100%; padding: 0 4px 0 34px !important; border-bottom: none; background-size: 16px !important; background-position: 8px 16px !important; font-family: Nexa, sans-serif; }
#divMenuUsuario .pix-mini-menu { padding: 8px }