/* =====================================================================
   Notificações — só o que é exclusivo da tela (o resto vem do design
   system em shared/components.css: sub-tabs, tablecard, pills, fld…).
   ===================================================================== */
.ntf-wrap{max-width:1120px}
.ntf-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:18px 0 8px}
/* 2º nível: uma tabela dentro do grupo "Tabelas" (0128) */
.ntf-sec2{font-size:12px;font-weight:700;color:var(--brand);margin:12px 0 6px 10px;
  padding-left:10px;border-left:3px solid var(--line)}
.ntf-desc{font-size:11.5px;color:var(--muted);margin-top:2px}
.ntf-tpl{font-size:12px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:6px;padding:2px 7px;white-space:nowrap}
.ntf-body{color:var(--muted);font-size:12px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntf-test{padding:18px;max-width:560px;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.ntf-row{display:flex;gap:10px;flex-wrap:wrap}
.ntf-res{font-size:12.5px;color:var(--muted)}
.ntf-acoes{white-space:nowrap}
.ntf-acoes .rowbtn{margin-right:4px}
.ntf-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.ntf-chips-g{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-right:2px}
/* botão de atualizar só-ícone (padrão ↻ do app) */
.ntf-ico{font-size:15px;padding:8px 12px;line-height:1}
/* info: só o "i", simples, sem anel nem fundo */
.ntf-info{background:transparent;border:0;color:var(--muted);font-size:16px;font-weight:800;
  font-family:Georgia,'Times New Roman',serif;font-style:italic;cursor:pointer;line-height:1;
  padding:2px 8px;flex:none;opacity:.8}
.ntf-info:hover{color:var(--brand);opacity:1}
/* seções do modal de template */
.ntf-mod-sec{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--brand);
  border-bottom:1px solid var(--line);padding-bottom:5px;margin-top:4px}
/* construtor de link do editor de template */
.ntf-lb{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.ntf-lb-actions{display:flex;gap:8px;margin-top:12px}
.ntf-lb-actions .ntf-lb-btn{font-size:12px;padding:8px 14px}
.ntf-lb-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}
.ntf-lb-status{font-size:12px;color:var(--brand);font-weight:600;margin-top:6px}
.ntf-lb-status>div{margin-top:3px}

/* Regras: grade de "quem recebe" (checkboxes por evento) */
.ntf-quem { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 4px; }
.ntf-ck { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ntf-ck input { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 560px) { .ntf-quem { grid-template-columns: 1fr; } }
/* Pessoas/áreas fixas no editor de template */
.ntf-fix-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.ntf-fix-row .lnk-rm { margin-left: auto; }

/* Compositor de mensagem: corpo (alto/estreito) à esquerda, campos à direita */
.modal.ntf-modal-wide { max-width: 980px; }
.fld.ntf-compose { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
/* os filhos herdam .fld.full (grid-column:1/3) do core — aqui cada um ocupa 1 coluna */
.ntf-compose > .fld.full.ntf-compose-l { grid-column: 1; }
.ntf-compose > .fld.full.ntf-compose-r { grid-column: 2; }
.ntf-compose-l, .ntf-compose-r { min-width: 0; }
.ntf-compose-l textarea { min-height: 420px; resize: vertical; line-height: 1.55; font-size: 13.5px; }
.ntf-campos-lista { max-height: 320px; overflow-y: auto; padding-right: 6px; }
/* Acordeões da coluna direita (recolhidos por padrão) */
.ntf-acc { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--bg); }
.ntf-acc > summary { cursor: pointer; padding: 11px 13px; font-size: 12.5px; font-weight: 700; color: var(--brand); list-style: none; display: flex; align-items: center; gap: 8px; }
.ntf-acc > summary::-webkit-details-marker { display: none; }
.ntf-acc > summary::before { content: '\25B8'; font-size: 11px; transition: transform .15s; }
.ntf-acc[open] > summary::before { transform: rotate(90deg); }
.ntf-acc[open] > summary { border-bottom: 1px solid var(--line); }
.ntf-acc-in { padding: 11px 13px; }
.ntf-acc-in > select, .ntf-acc-in > input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: #fff; margin-bottom: 8px; }
/* Grupos de campos dentro do acordeão */
.ntf-grp { border-bottom: 1px dashed var(--line); }
.ntf-grp:last-child { border-bottom: 0; }
.ntf-grp > summary { cursor: pointer; padding: 7px 2px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.ntf-grp > summary::-webkit-details-marker { display: none; }
.ntf-grp > summary::before { content: '\25B8'; font-size: 10px; transition: transform .15s; }
.ntf-grp[open] > summary::before { transform: rotate(90deg); }
.ntf-grp-n { margin-left: auto; font-size: 10px; color: var(--muted); background: var(--brand-soft); border-radius: 8px; padding: 1px 6px; }
.ntf-grp .ntf-chips { padding: 2px 0 8px; margin-top: 0; }
@media (max-width: 720px) { .ntf-compose { grid-template-columns: 1fr; } .ntf-compose-l textarea { min-height: 220px; } }
.ntf-fixos-lista { margin-top: 6px; }
.ntf-fixos-lista .ntf-grp > summary { color: var(--brand); }
.ntf-chips .lnk-rm { margin-left: auto; }
/* Botões já configurados: ficam abaixo do corpo da mensagem */
.ntf-btns-corpo { margin-top: 10px; }
.ntf-btns-corpo:empty { display: none; }
.ntf-btns-tit { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.ntf-btn-item { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 500; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--bg); margin-top: 4px; }
.ntf-btn-item .ntf-btn-url { color: var(--muted); word-break: break-all; font-weight: 400; }
.ntf-btn-item .lnk-rm { margin-left: auto; }
/* Ações da lista de templates: podem quebrar em duas linhas (2 versões) */
.ntf-acoes { white-space: normal; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ntf-acoes .rowbtn { margin-right: 0; white-space: nowrap; }
/* Configurações do template: grade interna de 2 colunas dentro do acordeão */
.ntf-cfg .ntf-acc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ntf-cfg .ntf-acc-in > .fld.full { grid-column: 1 / 3; }
.ntf-acc .pv-wrap { padding: 0; }
.ntf-acc .pv-hint { margin-bottom: 10px; }
/* Ações da lista de versões */
.ntf-vacoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ntf-vacoes button { font-size: 12.5px; }
.ntf-warn { color: #b45309; font-weight: 600; }
/* Diagnóstico de avisos que não chegaram — mora no Histórico, não na tela
   principal. Na barra de abas fica só um marcador com a contagem. */
.ntf-tab-mk { display: inline-flex; align-items: center; justify-content: center; min-width: 17px;
  height: 17px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: #c0392b;
  color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; vertical-align: 1px; }
.sub-tab.on .ntf-tab-mk { background: #fff; color: var(--brand); }
.ntf-diag { background: var(--red-soft); border: 1px solid #f3b6b1; color: #8d2a22;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.ntf-diag.ok { background: transparent; border-color: var(--line); color: var(--muted); }
.ntf-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.ntf-filtro { font-family: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--line);
  background: #fff; color: var(--muted); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.ntf-filtro.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.ntf-filtro-n { opacity: .65; font-weight: 600; }

/* vínculo de template da Meta a esta base: uma linha por variável */
.ntf-vinc-tt{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);margin-bottom:6px}
.ntf-vinc-l{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ntf-vinc-l select{flex:1}
.ntf-vinc-n{flex:none;min-width:60px;font-size:12px;font-weight:700;color:var(--brand);
  background:var(--brand-soft);border-radius:6px;padding:4px 8px;text-align:center}