/* ===== notificacoes.html — cards por tipo (26/09/2026) ===== ⚠️ Ao mexer, suba o ?v= na página. */

/* Barra: abas + select de tipo com o logo do tipo escolhido */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.nt-tipo { position: relative; display: inline-flex; align-items: center; min-width: 240px; }
.nt-tipo .nt-tipo-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--text-secondary); pointer-events: none; font-size: 13px; }
.nt-tipo select { padding-left: 42px !important; height: 38px; border-radius: 999px; min-width: 240px; }

/* Logo do tipo (cabeçalho do card, select e sino) */
.tp-logo, .tp-mini { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--tp) 16%, transparent); color: var(--tp); overflow: hidden; }
.tp-logo { width: 40px; height: 40px; font-size: 19px; }
.tp-mini { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
.tp-img { background: color-mix(in srgb, var(--tp) 22%, #fff); }
.tp-img img { width: 72%; height: 72%; object-fit: contain; display: block; }
.tp-mono { background: var(--tp); color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -.04em; text-transform: lowercase; }
.tp-mini.tp-mono { font-size: 12px; }
.tp-grad { background: var(--tp-bg); color: #fff; }

/* Card do grupo */
.nt-grupos { display: flex; flex-direction: column; gap: 14px; }
.nt-grupo { background: var(--bg-elevated); border: .5px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.nt-grupo.tem-nl { border-color: color-mix(in srgb, var(--tp) 45%, var(--border)); }
.nt-gh { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 12px; border-bottom: .5px solid var(--border); background: linear-gradient(90deg, color-mix(in srgb, var(--tp) 9%, transparent), transparent 60%); }
.nt-grupo.fechado .nt-gh { border-bottom: 0; }
.nt-gh-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.nt-gh-txt { min-width: 0; display: flex; flex-direction: column; }
.nt-gh-txt b { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.nt-gh-txt small { font-size: 12px; color: var(--text-secondary); }
.nt-gh-badge { margin-left: 4px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nt-gh-acoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nt-gh-acoes .ui-btn { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 7px; }
.nt-grupo.fechado .nt-lista { display: none; }

/* Itens dentro do card: lista compacta */
.nt-lista { display: flex; flex-direction: column; }
.nt-item { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 14px 11px 16px; border-bottom: .5px solid var(--border); cursor: default; transition: background 120ms; }
.nt-item:last-child { border-bottom: 0; }
.nt-item:hover { background: var(--bg-hover, rgba(0,0,0,.025)); }
.nt-item.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); cursor: pointer; }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.nt-item.unread .nt-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.nt-item.sev-warning .nt-title::before, .nt-item.sev-danger .nt-title::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; content: '\f071'; margin-right: 7px; font-size: 11px; }
.nt-item.sev-warning .nt-title::before { color: #d97706; }
.nt-item.sev-danger .nt-title::before { color: #dc2626; }
.nt-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.nt-item:not(.unread) .nt-title { font-weight: 600; color: var(--text-secondary); }
.nt-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; margin-top: 2px; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: var(--text-tertiary); }
.nt-meta i { margin-right: 4px; }
.nt-cta { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; text-decoration: none; }
.nt-cta i { margin: 0; font-size: 10px; }
.nt-cta:hover { text-decoration: underline; }
.nt-acoes { display: flex; gap: 2px; }
.nt-acoes .icon-btn, .nt-gh-acoes .icon-btn { background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.nt-acoes .icon-btn:hover, .nt-gh-acoes .icon-btn:hover { background: var(--bg-hover, rgba(0,0,0,.05)); color: var(--text-primary); }
.nt-item .post-capa { position: relative; display: block; width: min(200px, 100%); aspect-ratio: 4 / 5; margin-top: 8px; border-radius: 10px; overflow: hidden; background: var(--bg-base); border: .5px solid var(--border); }
.nt-item .post-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-item .post-capa .play { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.nt-mais { background: none; border: 0; border-top: .5px solid var(--border); padding: 10px; font-weight: 600; font-size: 12.5px; color: var(--accent); cursor: pointer; }
.nt-mais:hover { background: var(--bg-hover, rgba(0,0,0,.03)); }

@media (max-width: 700px) {
    .nt-tipo, .nt-tipo select { width: 100%; min-width: 0; }
    .nt-gh { padding: 10px; gap: 8px; }
    .tp-logo { width: 36px; height: 36px; font-size: 17px; }
    .nt-gh-acoes .ui-btn span { display: none; }
    .nt-gh-acoes .ui-btn { padding: 0 10px; }
    .nt-item { padding: 10px 10px 10px 12px; gap: 8px; }
}