﻿/*Reseteo la hoja de estilos*/
:root { --pix-color-primario: #00a8e3; --pix-color-fondo-suave: #eceff1; --pix-color-acento: #00a8e3; }
* { box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; }
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
html, body { margin: 0; padding: 0; background-color: var(--pix-color-fondo-suave); }

/*General*/
.divColumna { width: 100%; margin: auto; margin-top: 70px; padding: 16px; max-width: 1300px; }
a { text-decoration: none; outline: none; color: var(--pix-color-primario); }
img { max-height: 100%; max-width: 100%; }

/*Header*/
/*Header*/
header { background: #ffffff; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-shadow: 0 3px 5px rgba(0,0,0,.1); }

.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: var(--color-acento); 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 { max-height: 48px; max-width: 200px; height: 100%; }
.tbHeader > div > a.btnPerfil { position: relative; }
.tbHeader > div > a.btnPerfil img { border-radius: 50%; }
.tbHeader > div > a span.spanAviso { border: solid 2px var(--color-primario); box-sizing: content-box; animation: pulse 1.2s infinite; width: 20px; height: 20px; display: block; position: absolute; border-radius: 50%; font-size: 13px; line-height: 20px; }
.tbHeader > div > a.btnPerfil span.spanAviso { background: #ccc; color: #fff; right: 3px; top: 10px; }
.tbHeader > div > a.btnNotificaciones { position: relative; }
.tbHeader > div > a.btnNotificaciones span.spanAviso { background: red; color: #fff; right: 10px; top: 10px; }
.tbHeader > div > .btnPerfil > img { height: 100%; }

.imgCabeceraSeccion { width: 100%; max-width: 640px; margin: 0 auto; display: block }

.divInfo { display: inline-block; background: #ffecb3; padding: 8px 8px 8px 36px; border-radius: 4px; margin-top: 24px; font-size: 13px; line-height: 18px; vertical-align: middle; color: #000; width: 100%; }
.divInfo p { font-size: 16px; margin: 0; color: #636363 !important; }
.divInfo p a { font-weight: 700; }
.divInfo:before { content: '\f05a'; font-family: "Font Awesome 6 Free"; width: 16px; height: 16px; display: block; text-align: center; font-size: 22px; color: #ffc107; float: left; margin-left: -30px; font-weight: 600; }
