/* Base do sininho — mesmas regras do add-on wpDiscuz User Notifications 1.0.7 (GPL), que o header12.css do tema sobrescreve. */ .wun-hidden{display: none !important;} /* NOTIFICATION BELL CSS START */ #wpadminbar li.menu-item-wun-bell, li.menu-item-wun-bell {display: inline-block !important;} #wpadminbar li.menu-item-wun-bell a, li.menu-item-wun-bell a {position: relative; display: inline-block !important;} #wpadminbar li.menu-item-wun-bell a {padding: 0 !important; height: auto;} #wpadminbar .wun-bell, .wun-bell {vertical-align: middle;} .wun-bell {width: 22px; height: 22px;} #wpadminbar .wun-bell {width: 20px; height: 20px;} #wpadminbar .wun-bell.wun-has-unread, .wun-bell.wun-has-unread {-webkit-animation: ring 5s .7s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: ring 5s .7s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: ring 5s .7s ease-in-out infinite; transform-origin: 50% 4px;} #wpadminbar .wun-count, .wun-count {position: absolute; border-radius: 50%; line-height: 18px; font-size: 9px; color: #fff; display: none; text-align: center; left: 13px;} .wun-count {width: 18px; height: 18px; left: 50%; top: calc(50% - 15px);} #wpadminbar .wun-count {width: 16px; height: 16px; left: 14px; top: 2px; line-height: 15px;} #wpadminbar .wun-count.wun-has-unread, .wun-count.wun-has-unread {display: inline-block;} @-webkit-keyframes ring {0% {-webkit-transform: rotateZ(0);} 1% {-webkit-transform: rotateZ(30deg);} 3% {-webkit-transform: rotateZ(-28deg);} 5% {-webkit-transform: rotateZ(34deg);} 7% {-webkit-transform: rotateZ(-32deg);} 9% {-webkit-transform: rotateZ(30deg);} 11% {-webkit-transform: rotateZ(-28deg);} 13% {-webkit-transform: rotateZ(26deg);} 15% {-webkit-transform: rotateZ(-24deg);} 17% {-webkit-transform: rotateZ(22deg);} 19% {-webkit-transform: rotateZ(-20deg);} 21% {-webkit-transform: rotateZ(18deg);} 23% {-webkit-transform: rotateZ(-16deg);} 25% {-webkit-transform: rotateZ(14deg);} 27% {-webkit-transform: rotateZ(-12deg);} 29% {-webkit-transform: rotateZ(10deg);} 31% {-webkit-transform: rotateZ(-8deg);} 33% {-webkit-transform: rotateZ(6deg);} 35% {-webkit-transform: rotateZ(-4deg);} 37% {-webkit-transform: rotateZ(2deg);} 39% {-webkit-transform: rotateZ(-1deg);} 41% {-webkit-transform: rotateZ(1deg);} 43% {-webkit-transform: rotateZ(0);} 100% {-webkit-transform: rotateZ(0);} } @-moz-keyframes ring {0% {-moz-transform: rotate(0);} 1% {-moz-transform: rotate(30deg);} 3% {-moz-transform: rotate(-28deg);} 5% {-moz-transform: rotate(34deg);} 7% {-moz-transform: rotate(-32deg);} 9% {-moz-transform: rotate(30deg);} 11% {-moz-transform: rotate(-28deg);} 13% {-moz-transform: rotate(26deg);} 15% {-moz-transform: rotate(-24deg);} 17% {-moz-transform: rotate(22deg);} 19% {-moz-transform: rotate(-20deg);} 21% {-moz-transform: rotate(18deg);} 23% {-moz-transform: rotate(-16deg);} 25% {-moz-transform: rotate(14deg);} 27% {-moz-transform: rotate(-12deg);} 29% {-moz-transform: rotate(10deg);} 31% {-moz-transform: rotate(-8deg);} 33% {-moz-transform: rotate(6deg);} 35% {-moz-transform: rotate(-4deg);} 37% {-moz-transform: rotate(2deg);} 39% {-moz-transform: rotate(-1deg);} 41% {-moz-transform: rotate(1deg);} 43% {-moz-transform: rotate(0);} 100% {-moz-transform: rotate(0);} } @keyframes ring {0% {transform: rotate(0);} 1% {transform: rotate(30deg);} 3% {transform: rotate(-28deg);} 5% {transform: rotate(34deg);} 7% {transform: rotate(-32deg);} 9% {transform: rotate(30deg);} 11% {transform: rotate(-28deg);} 13% {transform: rotate(26deg);} 15% {transform: rotate(-24deg);} 17% {transform: rotate(22deg);} 19% {transform: rotate(-20deg);} 21% {transform: rotate(18deg);} 23% {transform: rotate(-16deg);} 25% {transform: rotate(14deg);} 27% {transform: rotate(-12deg);} 29% {transform: rotate(10deg);} 31% {transform: rotate(-8deg);} 33% {transform: rotate(6deg);} 35% {transform: rotate(-4deg);} 37% {transform: rotate(2deg);} 39% {transform: rotate(-1deg);} 41% {transform: rotate(1deg);} 43% {transform: rotate(0);} 100% {transform: rotate(0);} } /* NOTIFICATION BELL CSS END */ /*************************************************** **************************************************** ***************************************************/ /* NOTIFICATION CONTAINER AND ITEMS CSS START */ #wpadminbar #wun-container *, #wun-container * {line-height: 1.8;} #wpadminbar #wun-container, #wun-container {position: relative; width: 300px; height: 0; display: none; left: 0;} #wpadminbar #wun-container {left: -275px;} @media screen and (max-width:400px){ #wpadminbar #wun-container, #wun-container {width: 200px; left: -100px; } } #wpadminbar #wun-container .wun-notifications, #wun-container .wun-notifications {background-color: #fafafa; border-bottom: 3px solid #aaa; border-top: none; min-width: 220px; width: 100%; margin-top: 10px; z-index: 99999999; display: none; text-align: center;} #wpadminbar .wun-notifications .wun-head, .wun-notifications .wun-head {padding: 8px 5px; color: #555555; border-bottom: 3px solid #ff6700; background-color: #f6f6f6;} #wpadminbar .wun-notifications .wun-head, .wun-notifications .wun-head, #wpadminbar .wun-notifications .wun-head *, .wun-notifications .wun-head * {font-size: 14px; font-weight: 600; letter-spacing: 1px;} #wpadminbar .wun-head .wun-head-bell-wrap, .wun-head .wun-head-bell-wrap {width: 18px; height: 18px; display: inline-block; margin: 0 7px 0 5px;} #wpadminbar .wun-head .wun-head-bell-wrap .wun-head-bell, .wun-head .wun-head-bell-wrap .wun-head-bell {vertical-align: middle;} #wpadminbar .wun-notifications .wun-content, .wun-notifications .wun-content {padding: 0; overflow-y: auto; overflow-x: hidden; max-height: 250px; color: #555555;} #wpadminbar .wun-notifications .wun-content strong, .wun-notifications .wun-content strong {font-weight: 600;} #wpadminbar .wun-notifications .wun-content, .wun-notifications .wun-content, #wpadminbar .wun-notifications .wun-content *, .wun-notifications .wun-content * {font-size: 12px; color: #555555;} #wpadminbar .wun-notifications .wun-actions, .wun-notifications .wun-actions {display: none; text-align: right; padding: 0 0 10px 0; font-size: 12px; width: 100%;} #wpadminbar .wun-notifications .wun-actions .wun-action, .wun-notifications .wun-actions .wun-action {background-color: transparent; text-transform: none; text-decoration: none; text-shadow: none; border-radius: 0; border: none; content: ""; left: 0; position: relative; top: 0; width: auto; display: inline-block; white-space: nowrap; line-height: 20px; height: auto; min-height: inherit; color: #ff6700; cursor: pointer; font-size: 14px; padding: 8px 10px 0 10px;} #wpadminbar .wun-notifications .wun-actions .wun-action:hover, .wun-notifications .wun-actions .wun-action:hover {color: #058775;} #wpadminbar .wun-notifications .wun-actions .wun-action-load-more, .wun-notifications .wun-actions .wun-action-load-more {text-align: center; padding: 5px 10px 7px; background-color: #f6f6f6; border-radius: 0; display: none; border-top: 1px dashed #aaa; margin-top: 1px; color: #888;} #wpadminbar .wun-notifications .wun-actions .wun-action-load-more:hover, .wun-notifications .wun-actions .wun-action-load-more:hover {background-color: #f0f0f0;} #wpadminbar .wun-notifications .wun-content dl, #wpadminbar .wun-notifications .wun-content li, .wun-notifications .wun-content dl, .wun-notifications .wun-content li {list-style: none;} #wpadminbar .wun-notifications .wun-content dl, .wun-notifications .wun-content dl {margin: 0; padding: 0; border: 0; vertical-align: baseline; line-height: 1.6; overflow: auto; width: 100%; height: auto; position: relative; display: block; background: none; background-color: transparent; left: 0; right: 0; opacity: 1;} #wpadminbar .wun-content .wun-item, .wun-content .wun-item {padding: 8px 4px 3px; background-color: #f6f6f6; border-bottom: 1px dashed #aaa; margin: 0; display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start;} #wpadminbar #wun-container .wun-content .wun-item a, #wun-container .wun-content .wun-item a {color: #72aee6; padding: 0; margin: 0;} #wpadminbar .wun-content .wun-item:last-child, .wun-content .wun-item:last-child {margin: 0; border-bottom: none;} #wpadminbar .wun-content .wun-item:hover, .wun-content .wun-item:hover {background-color: #fafafa;} #wpadminbar .wun-item .wun-nleft, .wun-item .wun-nleft {flex-basis: 12%; padding-top: 6px;} #wpadminbar .wun-item .wun-nright, .wun-item .wun-nright {flex-basis: 88%; padding: 0; margin: 0; text-align: left;} #wpadminbar .wun-item .wun-no-notifications, .wun-item .wun-no-notifications, #wpadminbar .wun-item .wun-load-time, .wun-item .wun-load-time {text-align: center; padding: 7px 15px;} #wpadminbar .wun-item .wun-item-icon, .wun-item .wun-item-icon {width: 18px; height: 18px;} #wpadminbar .wun-item .wun-item-icon path, .wun-item .wun-item-icon path {fill: #ff6700;} #wpadminbar .wun-item .wun-nright a, .wun-item .wun-nright a {width: auto; display: inline-block; background: transparent; color: #444; padding: 0; margin: 0; border: none; text-transform: none; text-decoration: underline; font-weight: normal; letter-spacing: initial;} #wpadminbar .wun-item .wun-nright a:hover, .wun-item .wun-nright a:hover {text-decoration: none; background: transparent;} #wpadminbar .wun-item .wun-nright .wun-date, .wun-item .wun-nright .wun-date {padding: 0px 0px 5px; text-align: left; display: block;} #wpadminbar .wun-loader, .wun-loader {width: 20%; text-align: center; padding: 0; margin: 0; display: none; vertical-align: middle; float: right; height: 32px;} #wpadminbar .wun-head-bell-wrap-m, .wun-head-bell-wrap-m {display: inline-block; float: left; height: 32px; line-height: 32px !important; padding: 0;} #wpadminbar .wun-loader svg path, #wpadminbar .wun-loader svg rect, .wun-loader svg path, .wun-loader svg rect {fill: #ff6700; width: 20%;} /* NOTIFICATION CONTAINER AND ITEMS CSS END */ /* ===== Boletando Notificações v1.1 — padrão dos sistemas atuais ===== */ /* (prefixo #wun-container + !important: o header12.css do tema força cor/tamanho em tudo do item) */ #wun-container .wun-content .wun-item.bltn-clicavel {cursor: pointer; position: relative; display: flex !important; gap: 12px; padding-right: 28px !important; text-align: left;} #wun-container .wun-content .wun-item.bltn-clicavel:focus-visible {outline: 2px solid #3b9fd8; outline-offset: -2px;} #wun-container .wun-content .wun-item.bltn-nova {background: #eef6fd !important;} #wun-container .wun-content .wun-item.bltn-nova:hover {background: #e3f0fb !important;} /* Foto de quem agiu + ícone do tipo no canto */ #wun-container .wun-item .wun-nleft {flex: 0 0 44px !important; position: relative; padding-top: 0 !important;} #wun-container .wun-item .bltn-avatar {width: 40px !important; height: 40px !important; border-radius: 50%; object-fit: cover; display: block;} #wun-container .wun-item .bltn-avatar-inicial {display: flex !important; align-items: center; justify-content: center; background: #dbe7f3 !important; color: #2f6fa8 !important; font-weight: 700 !important; font-size: 16px !important;} #wun-container .wun-item .bltn-badge {position: absolute; right: 0; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-sizing: border-box;} #wun-container .wun-item .bltn-badge .wun-item-icon {width: 10px !important; height: 10px !important;} #wun-container .wun-item .bltn-badge .wun-item-icon path {fill: #fff !important;} #wun-container .wun-item .bltn-badge-reply, #wun-container .wun-item .bltn-badge-comment {background: #3b9fd8;} #wun-container .wun-item .bltn-badge-like {background: #22a861;} #wun-container .wun-item .bltn-badge-dislike {background: #8a94a3;} /* Texto, trecho e horário */ #wun-container .wun-item .wun-nright {flex: 1 1 auto !important; min-width: 0;} #wun-container .wun-content .wun-item .bltn-texto, #wun-container .wun-content .wun-item .bltn-texto * {font-size: 13px !important; line-height: 1.4 !important;} #wun-container .wun-content .wun-item .bltn-texto strong {font-weight: 600 !important; color: #1f2937 !important;} #wun-container .wun-content .wun-item .bltn-trecho {font-size: 12px !important; color: #6b7280 !important; font-style: italic; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;} #wun-container .wun-content .wun-item .wun-date {display: block; font-size: 11px !important; color: #6b7280 !important; opacity: 1 !important; margin-top: 3px; padding: 0 !important;} #wun-container .wun-content .wun-item.bltn-nova .wun-date {color: #2f80c4 !important; font-weight: 600 !important;} /* Ponto de "não lida" */ #wun-container .wun-item .bltn-ponto {position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: #2f80c4;} /* "Marcar todas como lidas" no topo do painel */ #wun-container .wun-head .bltn-ler-todas {margin-left: auto; background: transparent !important; border: 0 !important; padding: 2px 4px !important; cursor: pointer; color: #fff !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-decoration: underline; text-underline-offset: 2px; opacity: .9;} #wun-container .wun-head .bltn-ler-todas:hover {opacity: 1;} #wun-container .wun-head .bltn-ler-todas[hidden] {display: none !important;} /* ✕ fechar — só no celular */ #wun-container .wun-head .bltn-fechar {display: none; background: transparent !important; border: 0 !important; color: #fff !important; font-size: 26px !important; line-height: 1 !important; font-weight: 400 !important; padding: 0 2px 2px 10px !important; cursor: pointer;} @media screen and (max-width: 768px) { #wun-container .wun-head .bltn-fechar {display: block;} /* Painel no celular: lista ocupa a tela até o rodapé de navegação, não só 380px. */ #wun-container .wun-notifications .wun-content {max-height: calc(100vh - 200px) !important; max-height: calc(100dvh - 200px) !important;} } #wun-container .wun-head .bltn-ler-todas + .bltn-fechar, #wun-container .wun-head .bltn-ler-todas[hidden] + .bltn-fechar {margin-left: 0;} #wun-container .wun-head .bltn-ler-todas[hidden] + .bltn-fechar {margin-left: auto;} /* ===== Central única (v1.2): abas Atividade / Alertas de preço ===== */ #wun-container .bltn-abas {display: flex; border-bottom: 1px solid #e5e7eb; background: #fff;} #wun-container .bltn-abas .bltn-aba {flex: 1 1 50%; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; padding: 10px 8px !important; cursor: pointer; font-size: 13px !important; font-weight: 600 !important; color: #6b7280 !important; display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: 0 !important; text-transform: none !important; border-radius: 0 !important; box-shadow: none !important;} #wun-container .bltn-abas .bltn-aba:hover {color: #374151 !important;} #wun-container .bltn-abas .bltn-aba.bltn-aba-ativa {color: #2f80c4 !important; border-bottom-color: #2f80c4 !important;} #wun-container .bltn-abas .bltn-aba-n {min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #2f80c4; color: #fff !important; font-size: 11px !important; line-height: 18px; font-weight: 700; display: inline-block; box-sizing: border-box;} #wun-container .bltn-abas .bltn-aba-n[hidden] {display: none !important;} /* Item de alerta de preço */ #wun-container .wun-item .bltn-thumb {border-radius: 8px !important; background: #fff; border: 1px solid #eef0f3; object-fit: contain !important;} #wun-container .wun-item .bltn-badge-price {background: #22a861;} #wun-container .wun-content .wun-item .bltn-produto {font-size: 13px !important; color: #1f2937 !important; font-weight: 600 !important; line-height: 1.35 !important; margin-top: 1px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #wun-container .wun-content .wun-item.bltn-alerta .bltn-texto, #wun-container .wun-content .wun-item.bltn-alerta .bltn-texto * {font-size: 12px !important; color: #6b7280 !important;} #wun-container .wun-content .wun-item.bltn-alerta .bltn-texto strong {color: #374151 !important;} #wun-container .wun-item .bltn-preco-linha {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px;} #wun-container .wun-content .wun-item .bltn-preco {font-size: 14px !important; font-weight: 700 !important; color: #16a34a !important;} #wun-container .wun-content .wun-item .bltn-encerrada {font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .3px; color: #9ca3af !important; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0 5px;} #wun-container .wun-content .wun-item .bltn-preco-linha .wun-date {margin-top: 0;} #wun-container .wun-content .wun-item .bltn-dica {display: inline-block; margin-top: 4px; font-size: 12px !important; color: #9ca3af !important;} /* Rodapé: "Gerenciar alertas" */ #wun-container .wun-actions .bltn-gerenciar {text-decoration: none !important;} #wun-container .wun-actions .bltn-gerenciar[hidden] {display: none !important;} /* ===== Aviso temporário da central única (mesmo estilo do balão "Receba ofertas") ===== */ .bltn-aviso {position: fixed; z-index: 99999998; box-sizing: border-box; padding: 14px 36px 14px 18px; background: #1f2937; color: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.3); font-size: 14px; line-height: 1.4; font-weight: 500; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; font-family: inherit;} .bltn-aviso.bltn-aviso-on {opacity: 1; transform: translateY(0);} .bltn-aviso[hidden] {display: none !important;} .bltn-aviso strong {font-weight: 700; color: #fff;} .bltn-aviso::before {content: ''; position: absolute; bottom: 100%; left: var(--bltn-seta, 24px); border: 7px solid transparent; border-bottom-color: #1f2937;} .bltn-aviso .bltn-aviso-ok {display: block; width: max-content; margin-top: 10px; background: #fff; color: #1f2937; border: 0; border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer; line-height: 1.3;} .bltn-aviso .bltn-aviso-ok:hover {background: #e5e7eb;} .bltn-aviso .bltn-aviso-x {position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: #fff; opacity: .7; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px;} .bltn-aviso .bltn-aviso-x:hover {opacity: 1;} /* ===== v1.3: topo branco (cartão por cima da página, não continuação do cabeçalho) ===== */ #wun-container .wun-notifications .wun-head {background: #fff !important; color: #111827 !important; border-bottom: 1px solid #eef0f3 !important; padding: 14px 16px 12px !important;} #wun-container .wun-notifications .wun-head + .bltn-abas {border-top: 0;} #wun-container .wun-notifications .wun-head .wun-head-bell-wrap {display: none !important;} #wun-container .wun-notifications .wun-head span {color: #111827 !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important;} #wun-container .wun-head .bltn-ler-todas {color: #2f80c4 !important; text-decoration: none !important; font-size: 12.5px !important; font-weight: 600 !important; opacity: 1 !important; border-radius: 6px !important; padding: 4px 8px !important; margin-right: -8px;} #wun-container .wun-head .bltn-ler-todas:hover {background: #eef6fd !important;} #wun-container .wun-head .bltn-fechar {color: #6b7280 !important;} #wun-container .wun-head .bltn-fechar:hover {color: #111827 !important;} #wun-container .wun-notifications .wun-loader svg rect {fill: #2f80c4 !important;} /* com abas, a linha do topo some (as abas já têm a delas) */ #wun-container .wun-notifications .wun-head:has(+ .bltn-abas) {border-bottom: 0 !important; padding-bottom: 6px !important;} /* "Carregando" ocupa o lugar do link à direita, sem empurrar o título (só durante a busca) */ #wun-container .wun-notifications .wun-head {position: relative;} #wun-container .wun-notifications .wun-head .wun-loader {position: absolute !important; right: 16px; top: 50%; transform: translateY(-50%); width: 28px !important; height: 22px !important; float: none !important; margin: 0 !important; padding: 0 !important;} #wun-container .wun-notifications .wun-head .wun-loader svg {width: 28px; height: 22px;} #wun-container .wun-notifications .wun-head.bltn-carregando .bltn-ler-todas, #wun-container .wun-notifications .wun-head.bltn-carregando .bltn-fechar {visibility: hidden;} #wun-container .wun-head .bltn-ler-todas {white-space: nowrap;} /* ===== v1.4: opção A (borda + sombra forte) e fundo escurecido ===== */ #wun-container .wun-notifications {border: 1px solid #d9dee5 !important; box-shadow: 0 16px 40px rgba(15,23,42,.22), 0 3px 10px rgba(15,23,42,.10) !important;} @media screen and (max-width: 768px) { #wun-container .wun-notifications {border-left: 0 !important; border-right: 0 !important;} } /* Escurece a página por baixo do painel, MENOS a barra azul do topo (o JS põe o `top` no fim dela) — o sino e o painel ficam em destaque. Clicar no escuro fecha. */ #bltn-escurecer {position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 2147483000; background: rgba(15,23,42,.45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;} #bltn-escurecer.bltn-on {opacity: 1; visibility: visible;} /* ===== v1.5 (out/2026): celular em tela cheia, como a tela de Notificações do app ===== */ #wun-container .bltn-gerenciar {display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;} #wun-container .bltn-gerenciar[hidden] {display: none !important;} #wun-container .bltn-gerenciar-ic {flex: none;} html.bltn-trava, html.bltn-trava body {overflow: hidden !important;} @media screen and (max-width: 768px) { #wun-container.bltn-cheia {position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 2147483600 !important;} /* o header12.css puxa -21px */ #wun-container.bltn-cheia .wun-notifications {display: flex !important; flex-direction: column; height: 100%; height: 100dvh; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important;} #wun-container.bltn-cheia .wun-head, #wun-container.bltn-cheia .bltn-abas {flex: none;} #wun-container.bltn-cheia .wun-content {flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff;} #wun-container.bltn-cheia .wun-actions {flex: none; background: #fff; border-top: 1px solid #eef0f3; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;} #wun-container.bltn-cheia .wun-actions .bltn-gerenciar {display: flex !important; width: 100%; box-sizing: border-box; height: 46px; border-radius: 10px; background: #2f80c4 !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; gap: 8px; margin: 0 !important;} #wun-container.bltn-cheia .wun-actions .bltn-gerenciar[hidden] {display: none !important;} #wun-container.bltn-cheia .wun-actions .bltn-gerenciar span {color: #fff !important;} } /* Computador: sem setinha. O painel abre 8px abaixo da barra azul e o sino fica destacado (círculo branco translúcido) enquanto está aberto — padrão Facebook/LinkedIn/YouTube (design-critique, out/2026). */ @media screen and (min-width: 769px) { li.menu-item-wun-bell > a::before {content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; /* centro exato da caixa (o viewBox do sino já centraliza o desenho) */ border-radius: 50%; background: rgba(255,255,255,0); transition: background .15s ease; pointer-events: none;} li.menu-item-wun-bell > a:hover::before {background: rgba(255,255,255,.12);} li.menu-item-wun-bell.bltn-sino-ativo > a::before {background: rgba(255,255,255,.22);} } /* ===== Visitante (out/2026): convite para criar conta, igual ao app ===== */ #wun-container .wun-content.bltn-convite {text-align: center; padding: 24px 20px 20px !important; background: #fff;} #wun-container .bltn-convite * {line-height: 1.45 !important;} #wun-container .bltn-convite-icone {width: 72px; height: 72px; margin: 4px auto 14px; border-radius: 50%; background: #eef6fd; display: flex; align-items: center; justify-content: center;} #wun-container .bltn-convite-titulo {margin: 0 0 6px !important; font-size: 19px !important; font-weight: 700 !important; color: #111827 !important;} #wun-container .bltn-convite-texto {margin: 0 0 18px !important; font-size: 14px !important; color: #4b5563 !important;} #wun-container .bltn-convite-lista {list-style: none; margin: 0 0 20px !important; padding: 0 !important; text-align: left;} #wun-container .bltn-convite-lista li {display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px !important; font-size: 14px !important; color: #374151 !important;} #wun-container .bltn-convite-lista strong {font-weight: 700; color: #111827;} #wun-container .bltn-convite-ic {flex: none; width: 32px; height: 32px; border-radius: 50%; background: #eef6fd; display: flex; align-items: center; justify-content: center;} #wun-container .bltn-convite-botao {display: block; height: 46px; line-height: 46px !important; border-radius: 10px; background: linear-gradient(135deg, #3b9fd8, #2980b9); color: #fff !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important;} #wun-container .bltn-convite-botao:hover {opacity: .95;} #wun-container.bltn-convite-wrap .wun-content.bltn-convite {max-height: none !important; overflow: visible !important;} #wun-container.bltn-convite-wrap .wun-head {display: flex; align-items: center;} #wun-container.bltn-convite-wrap .wun-head .bltn-fechar {margin-left: auto;} /* Esqueleto da lista enquanto carrega (out/2026) */ #wun-container .wun-list .bltn-esq {display: flex !important; gap: 12px; align-items: flex-start; padding: 14px 16px !important; margin: 0 !important; border-bottom: 1px solid #f1f3f6; background: #fff !important;} #wun-container .bltn-esq-foto {flex: none; width: 44px; height: 44px; border-radius: 8px; background: #eef0f3; animation: bltnEsq 1.1s ease-in-out infinite;} #wun-container .bltn-esq-txt {flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 2px;} #wun-container .bltn-esq-txt i {display: block; height: 10px; border-radius: 5px; background: #eef0f3; animation: bltnEsq 1.1s ease-in-out infinite;} #wun-container .bltn-esq-txt i:nth-child(1) {width: 45%;} #wun-container .bltn-esq-txt i:nth-child(2) {width: 90%;} #wun-container .bltn-esq-txt i:nth-child(3) {width: 30%;} @keyframes bltnEsq {0%, 100% {opacity: 1;} 50% {opacity: .45;}} #wun-container .wun-content.bltn-esqueleto {overflow: hidden !important;}