/* /notificacoes/notificacoes.css -- Notificações do WPG (mockup aprovado 28/10/2026: docs/mockups/notificacoes/notificacoes.html): o sino novo, o painel do sino e a página /notificacoes.
   Cores próprias (--nt-*), no mesmo grafite + laranja do Correio. Letra mínima 15px (regra 18); cenário e cortes (regra 11); a onda de luz é o span.rk-onda de public/artes/feixe-onda.css (regra 20). */
.nt,#notifBellDropdown{--nt-950:#090c13;--nt-900:#0c0f16;--nt-850:#0f131c;--nt-800:#141a25;--nt-700:#1a2130;--nt-line:#29313d;--nt-line-hi:#3a4759;
  --nt-hi:#f0f3f7;--nt-mid:#a7b0bd;--nt-low:#8a95a5;--nt-or:#ff7a2f;--nt-or-300:#ffb082;--nt-or-wash:rgba(255,122,47,.10);--nt-or-line:rgba(255,122,47,.38);
  --nt-ouro:#e3b341;--nt-ok:#38d6a0;--nt-ruim:#f0736a;--nt-ciano:#20d3e0;--nt-roxo:#b48cff;
  --nt-display:'Archivo','Inter',system-ui,sans-serif;--nt-mono:'IBM Plex Mono',ui-monospace,monospace}

/* o sino */
#notifBellBtn{position:relative;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;padding:0;color:var(--nt-mid,#a7b0bd)}
#notifBellBtn .notif-ic{width:26px;height:26px;display:block}
#notifBellBtn:hover,#notifBellBtn[aria-expanded="true"]{color:#ffb082;border-color:rgba(255,122,47,.38);background:rgba(255,122,47,.10)}
#notifBellBtn .notif-bell-count{right:-6px;top:-6px;background:#f0736a;color:#1a0505;font:700 15px 'IBM Plex Mono',ui-monospace,monospace;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;padding:0 5px;border:2px solid #090c13}
#notifBellBtn:focus-visible{outline:2px solid #ff7a2f;outline-offset:2px}

/* painel do sino */
#notifBellDropdown{width:min(400px,calc(100vw - 16px));max-height:min(70vh,640px);overflow:auto;padding:0;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);color:var(--nt-hi)}
#notifBellDropdown .notif-bell-empty{padding:18px 14px;font-size:15px}
.nt-p-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--nt-line)}
.nt-p-topo b{font:800 17px var(--nt-display)}
.nt-link{background:none;border:0;color:var(--nt-or-300);cursor:pointer;font:600 15px 'Inter',system-ui,sans-serif;padding:6px;min-height:40px}
.nt-link:disabled{opacity:.45;cursor:default}
.nt-filtros{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--nt-line)}
.nt-filtros button{background:var(--nt-800);border:1px solid var(--nt-line-hi);border-radius:999px;padding:3px 12px;cursor:pointer;color:var(--nt-mid);font:600 15px 'Inter',system-ui,sans-serif;min-height:36px}
.nt-filtros button[aria-pressed="true"]{background:var(--nt-or-wash);border-color:var(--nt-or-line);color:var(--nt-or-300)}
.nt-filtros small{font:600 15px var(--nt-mono);margin-left:4px}
.nt-rodape{padding:10px 14px;display:grid}
.nt-ver{min-height:44px;background:var(--nt-or);border:1px solid var(--nt-or);border-radius:10px;color:#1a0b02;font:700 15px 'Inter',system-ui,sans-serif;cursor:pointer}

/* item (painel e página) */
.nt-item{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding:12px 14px;border:0;border-bottom:1px solid var(--nt-line);cursor:pointer;text-align:left;background:none;width:100%;color:inherit;font:inherit}
.nt-item:hover{background:var(--nt-800)}
.nt-item .nt-ponto{width:10px;height:10px;border-radius:50%;margin-top:7px;border:2px solid var(--nt-line-hi)}
.nt-item.novo .nt-ponto{background:var(--nt-or);border-color:var(--nt-or)}
.nt-l1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nt-item b{display:block;font-size:15px;font-weight:600;color:var(--nt-mid);overflow-wrap:anywhere}
.nt-item.novo b{color:var(--nt-hi);font-weight:700}
.nt-previa{color:var(--nt-low);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nt-item time{color:var(--nt-low);font-family:var(--nt-mono);font-size:15px}
.nt-acao{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.nt-acao span{border:1px solid var(--nt-line-hi);border-radius:8px;padding:2px 10px;color:var(--nt-or-300);font-weight:600}
.nt-tipo{--c:var(--nt-ciano);display:inline-flex;gap:6px;align-items:center;font:600 15px var(--nt-mono);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:999px;padding:1px 10px}
.nt-tipo svg{width:15px;height:15px}
.nt-tipo.msg{--c:var(--nt-ciano)}.nt-tipo.feed{--c:var(--nt-roxo)}.nt-tipo.amigos{--c:var(--nt-ok)}.nt-tipo.sistema{--c:var(--nt-ouro)}
.nt-vazio{padding:34px 18px;display:grid;justify-items:center;gap:8px;text-align:center;color:var(--nt-mid)}
.nt-vazio b{font:800 19px var(--nt-display);color:var(--nt-hi)}
.nt-vazio svg{width:40px;height:40px;color:var(--nt-low)}
.nt-vazio.erro svg{color:var(--nt-ruim)}

/* página */
.nt{display:grid;gap:16px;color:var(--nt-hi);font-size:15px;line-height:1.5}
.nt [hidden]{display:none!important}
.nt button{font:inherit;color:inherit}
.nt button:focus-visible,.nt summary:focus-visible,#notifBellDropdown button:focus-visible{outline:2px solid var(--nt-or);outline-offset:2px}
.nt-bloco{position:relative;overflow:hidden;isolation:isolate;background:var(--nt-850);border:1px solid var(--nt-line);border-radius:14px;min-width:0}
.nt-bloco::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--nt-faixa,var(--nt-or));z-index:2}
.nt-arte{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--nt-faixa,var(--nt-or))}
.nt-arte svg{position:absolute;right:0;bottom:0;width:62%;height:70%;opacity:.12}
.nt-arte i{position:absolute;bottom:-8px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;animation:nt-subir 7s linear infinite}
.nt-arte i:nth-child(2){left:22%;animation-delay:1.8s}.nt-arte i:nth-child(3){left:46%;animation-delay:3.6s}.nt-arte i:nth-child(4){left:71%;animation-delay:5.2s}
@keyframes nt-subir{0%{transform:translateY(0);opacity:0}12%{opacity:.9}100%{transform:translateY(-190px);opacity:0}}
@media (prefers-reduced-motion:reduce){.nt-arte i{animation:none;opacity:.5}}
.nt-cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:20px 22px}
.nt-cab-ic{width:56px;height:56px;color:var(--nt-or-300)}
.nt-etiq{font:600 15px var(--nt-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nt-or)}
.nt-cab h1{margin:0;font:800 30px/1.1 var(--nt-display);font-stretch:90%;text-wrap:balance}
.nt-cab p{margin:4px 0 0;color:var(--nt-mid);max-width:70ch}
.nt-grade{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:900px){.nt-grade{grid-template-columns:1fr}}
.nt-lat{display:grid;gap:4px;padding:12px;align-content:start}
.nt-lat h3{margin:0 0 4px;font:600 15px var(--nt-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nt-low)}
.nt-lat button{background:transparent;border:1px solid transparent;border-radius:9px;text-align:left;padding:8px 10px;cursor:pointer;color:var(--nt-mid);font-weight:600;display:flex;justify-content:space-between;gap:8px;min-height:40px}
.nt-lat button[aria-pressed="true"]{background:var(--nt-or-wash);border-color:var(--nt-or-line);color:var(--nt-or-300)}
.nt-lat small{font:600 15px var(--nt-mono);color:var(--nt-low)}
.nt-dia{padding:6px 14px;font:600 15px var(--nt-mono);color:var(--nt-low);background:var(--nt-900);border-bottom:1px solid var(--nt-line)}
.nt-pe{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px}
.nt-pe span{color:var(--nt-low)}
.nt-btn{background:var(--nt-800);border:1px solid var(--nt-line-hi);border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;min-height:44px}
.nt-coluna{display:grid;gap:14px;min-width:0}
details.nt-gaveta{padding:0}
details.nt-gaveta summary{cursor:pointer;list-style:none;padding:14px 18px;font:800 17px var(--nt-display);display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px}
details.nt-gaveta summary::-webkit-details-marker{display:none}
details.nt-gaveta summary::after{content:"+";font:600 20px var(--nt-mono);color:var(--nt-mid)}
details.nt-gaveta[open] summary::after{content:"−"}
.nt-exemplo{font:600 15px var(--nt-mono);color:var(--nt-ouro);border:1px dashed rgba(227,179,65,.5);border-radius:999px;padding:2px 10px;white-space:nowrap;margin-left:auto}
.nt-dentro{padding:0 18px 16px;color:var(--nt-mid);display:grid;gap:10px}
.nt-dentro p{margin:0}
.nt-dentro .nt-item{border:1px solid var(--nt-line);border-radius:10px}
/* contador some quando não há novas (o display:grid acima vencia o atributo hidden) */
#notifBellBtn .notif-bell-count[hidden],#inboxBtn .notif-bell-count[hidden]{display:none}
/* os dois icones do topo (sino e Correio) com o mesmo tamanho e o mesmo formato */
#inboxBtn{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;padding:0}
#inboxBtn .inbox-ic{width:26px;height:26px}
