/* painel/ui/tokens.css — Redesign 2026-09.
   FONTE ÚNICA de tokens e componentes das três páginas do painel (index,
   automacoes, atendente-ia). Antes cada uma carregava a própria cópia com o
   aviso "mudou lá, muda aqui" — e mudava em uma só.
   Convenção que não muda: `--copper` é a COR DA MARCA (o nome ficou por
   histórico e aparece em ~200 lugares). Desde 20/09/2026 ela é o CIANO da
   logomarca nova (o pégaso), não mais o azul — carbono + ciano metálico, a
   mesma identidade dos outros sistemas da casa. Texto sobre a cor da marca
   usa `--sobre-marca`: branco sobre ciano claro não tem contraste. `:root` sem atributo = escuro;
   `:root[data-tema="claro"]` = claro, que é o padrão. */

:root{
  --ink:#070A0F; --panel:#0F151D; --panel-2:#161F29; --border:#1E2A35; --border-forte:#2C3B49;
  --text:#E9F2F5; --muted:#93A7B4; --nav-texto:#D7E6EC;
  --copper:#30BFD8; --copper-hi:#88E2EF; --copper-forte:#1FA3BC; --copper-dim:rgba(48,191,216,.16);
  --sobre-marca:#04131A;
  --sage:#22C55E; --sage-dim:rgba(34,197,94,.14);
  --danger:#F87171; --danger-dim:rgba(248,113,113,.14);
  --ambar:#F59E0B; --ambar-dim:rgba(245,158,11,.14);
  --azul:#A78BFA; --roxo:#8B6FC9; --grade:rgba(255,255,255,.07);
  --grad-marca:linear-gradient(135deg,#30BFD8 0%,#185970 100%); --brilho-marca:rgba(48,191,216,.45);
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --sombra-1:0 1px 2px rgba(0,0,0,.35); --sombra-2:0 4px 12px rgba(0,0,0,.35); --sombra-3:0 16px 40px rgba(0,0,0,.5);
  --t-rapido:.14s ease-out; --t-medio:.22s ease-out;
  --nav-w:248px; --nav-w-min:68px;
  --fonte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --ink:#F1F6F8; --panel:#FFFFFF; --panel-2:#EAF2F5; --border:#DCE7EC; --border-forte:#BFD2DA;
  --text:#0B1B22; --muted:#5A7280; --nav-texto:#123540;
  --copper:#0E8CA8; --copper-hi:#0A6D84; --copper-forte:#0A6D84; --copper-dim:rgba(14,140,168,.12);
  --sobre-marca:#FFFFFF;
  --sage:#16A34A; --sage-dim:rgba(22,163,74,.12);
  --danger:#DC2626; --danger-dim:rgba(220,38,38,.10);
  --ambar:#D97706; --ambar-dim:rgba(217,119,6,.12);
  --azul:#7C3AED; --roxo:#7B5FC0; --grade:rgba(0,0,0,.07);
  --grad-marca:linear-gradient(135deg,#0E8CA8 0%,#185970 100%); --brilho-marca:rgba(14,140,168,.30);
  --sombra-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --sombra-2:0 4px 12px rgba(15,23,42,.08);
  --sombra-3:0 20px 48px rgba(15,23,42,.18);
  color-scheme:light;
}

/* ===================== base ===================== */
*{box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--border-forte) transparent}
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--fonte); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em; color:var(--text)}
a{color:var(--copper-hi)}
.mono{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.ic{width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
:focus-visible{outline:2px solid var(--copper); outline-offset:2px; border-radius:6px}
::-webkit-scrollbar{width:8px; height:8px} ::-webkit-scrollbar-thumb{background:var(--border-forte); border-radius:8px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ===================== botões ===================== */
.btn,.btn-copper,.btn-ghost{width:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:13.5px; font-weight:600; line-height:1; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background var(--t-rapido),border-color var(--t-rapido),color var(--t-rapido),box-shadow var(--t-rapido)}
.btn:hover{background:var(--panel-2); border-color:var(--border-forte)}
.btn:disabled{opacity:.45; cursor:default; pointer-events:none}
.btn .ic{width:16px; height:16px}
.btn-copper{background:var(--copper); border-color:var(--copper); color:var(--sobre-marca); box-shadow:var(--sombra-1)}
.btn-copper:hover{background:var(--copper-forte); border-color:var(--copper-forte); color:var(--sobre-marca); box-shadow:0 6px 16px -8px var(--brilho-marca)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--panel-2); border-color:var(--border-forte)}
.btn-danger{color:var(--danger); background:var(--danger-dim); border-color:transparent}
.btn-danger:hover{background:var(--danger); border-color:var(--danger); color:#fff}
.btn-sm{height:30px; padding:0 10px; font-size:12px; border-radius:7px}
.btn-lg{height:44px; padding:0 20px; font-size:14.5px; border-radius:10px}
.btn-bloco{width:100%}
.btn-icone{width:36px; padding:0} .btn-icone.btn-sm{width:30px}
button.mini{display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:7px; background:var(--panel); border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:background var(--t-rapido),color var(--t-rapido),border-color var(--t-rapido)}
button.mini:hover{color:var(--text); background:var(--panel-2); border-color:var(--border-forte)}

/* ===================== cabeçalho de página ===================== */
.cab{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.cab .cab-txt{min-width:0; flex:1 1 320px}
.cab h2{font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.cab h2 span{font-size:12.5px; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:6px}
.cab .sub{margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.5; max-width:720px}
.cab .acoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto}
.cab .acoes select,.cab .acoes input[type=text]{height:36px}

/* ===================== cartões / kpi / grades ===================== */
.cartao{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; min-width:0; box-shadow:var(--sombra-1)}
.cartao h3{font-size:14.5px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px}
.cartao h3 .ic{width:16px; height:16px; color:var(--muted)}
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:20px}
.kpi{position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; min-width:0; box-shadow:var(--sombra-1); transition:box-shadow var(--t-medio),border-color var(--t-medio)}
.kpi:hover{box-shadow:var(--sombra-2)}
.kpi.sel{border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-dim)}
.kpi .lbl{color:var(--muted); font-size:12px; font-weight:500; margin-bottom:8px; letter-spacing:0; text-transform:none}
.kpi .val{font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--text); background:none; -webkit-text-fill-color:currentColor}
.kpi .val.copper{color:var(--copper-hi); background:none; -webkit-text-fill-color:currentColor} .kpi .val.sage{color:var(--sage)}
.kpi::after{display:none}
.kpi .ic-kpi{position:absolute; right:16px; top:16px; width:18px; height:18px; color:var(--copper); opacity:.9}
.grid-2{display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin-bottom:14px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:14px}

/* ===================== tabelas ===================== */
.tabela-wrap{overflow-x:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--sombra-1)}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{text-align:left; padding:10px 14px; color:var(--muted); font-weight:600; font-size:12px; letter-spacing:0; text-transform:none; background:var(--panel-2); border-bottom:1px solid var(--border); white-space:nowrap}
tbody td{padding:9px 14px; height:46px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t-rapido)} tbody tr:hover{background:var(--panel-2)}
.paginacao{display:flex; align-items:center; gap:10px; padding:12px 14px; flex-wrap:wrap; border-top:1px solid var(--border)}
.paginacao .info{color:var(--muted); font-size:12px; margin-right:auto}
.paginacao select,.paginacao button{height:30px; background:var(--panel); border:1px solid var(--border); color:var(--text); padding:0 10px; border-radius:7px; font-size:12.5px; cursor:pointer}
.paginacao button:disabled{opacity:.35}
.avatar{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--copper-dim); color:var(--copper-hi); font-weight:700; font-size:12.5px; flex:0 0 auto}

/* ===================== formulários ===================== */
.campo{margin-bottom:14px}
.campo label{display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:6px; letter-spacing:0; text-transform:none}
.campo input:not([type=checkbox]):not([type=radio]):not([type=color]),.campo select,.campo textarea,.filtros input,.filtros select,.input{width:100%; height:38px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); padding:0 12px; font-size:13.5px; transition:border-color var(--t-rapido),box-shadow var(--t-rapido)}
.campo textarea,textarea.input{height:auto; min-height:80px; padding:10px 12px; resize:vertical; line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus,.filtros input:focus,.filtros select:focus,.input:focus{outline:none; border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-dim)}
.filtros{display:flex; gap:9px; margin-bottom:16px; flex-wrap:wrap}
.filtros select{width:auto} .filtros input{flex:1; min-width:200px; width:auto}
.ajuda{color:var(--muted); font-size:12.5px; line-height:1.5; margin:0 0 12px}
.msg-erro{display:none; background:var(--danger-dim); border:1px solid var(--danger); color:var(--danger); padding:10px 13px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px}
.msg-erro.mostrar{display:block}

/* ===================== tabs segmentadas ===================== */
.abas,.abas-dash,.chat-abas{display:inline-flex; gap:2px; padding:3px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px}
.abas button,.abas-dash button,.chat-abas button{height:30px; padding:0 12px; border:none; border-radius:7px; background:transparent; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:background var(--t-rapido),color var(--t-rapido)}
.abas button:hover,.abas-dash button:hover,.chat-abas button:hover{color:var(--text)}
.abas button.ativa,.abas-dash button.ativa,.chat-abas button.ativa{background:var(--panel); color:var(--text); box-shadow:var(--sombra-1)}
.abas-dash{margin:0 0 18px} .abas-dash .sino{width:7px; height:7px; border-radius:50%; background:var(--danger)}
.chat-abas{display:flex} .chat-abas button{flex:1; justify-content:center; padding:0 6px; font-size:11.5px}

/* ===================== chips ===================== */
.chip,.pill,.score{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; text-transform:none; letter-spacing:0}
.chip.ok,.pill.ok{background:var(--sage-dim); color:var(--sage)}
.chip.pend,.pill.neutro{background:var(--panel-2); color:var(--muted)}
.chip.erro{background:var(--danger-dim); color:var(--danger)}
.pill.atencao{background:var(--ambar-dim); color:var(--ambar)}
.score{font-weight:700; font-variant-numeric:tabular-nums}
.score.quente{background:var(--danger-dim); color:var(--danger)} .score.morno{background:var(--copper-dim); color:var(--copper-hi)} .score.frio{background:var(--panel-2); color:var(--muted)}

/* ===================== dialog ===================== */
dialog{background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; max-width:460px; width:92vw; box-shadow:var(--sombra-3); animation:dlgEntrar .18s ease-out}
dialog::backdrop{background:rgba(15,23,42,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
@keyframes dlgEntrar{from{opacity:0; transform:scale(.965) translateY(6px)} to{opacity:1; transform:none}}
dialog h3{font-size:16px; font-weight:700; margin:0 0 14px}
dialog textarea{width:100%; min-height:110px}
/* título em cima, explicação embaixo — em linha os dois competiam pela
   mesma leitura e a explicação parecia legenda do botão à direita */
.dlg-cab{margin:-2px 0 16px}
.dlg-cab h3{margin:0}
.dlg-cab .sub{margin:4px 0 0; color:var(--muted); font-size:12.5px; line-height:1.5}
.dlg-rodape{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; padding-top:16px; border-top:1px solid var(--border)}

/* ===================== vazio / toast / skeleton ===================== */
.vazio{padding:44px 20px; text-align:center; color:var(--muted); font-size:13.5px; line-height:1.5}
.vazio .ilu{width:56px; height:56px; margin:0 auto 12px; color:var(--muted); opacity:.55; display:block; stroke-width:1.2}
.vazio b{display:block; color:var(--text); font-size:15px; font-weight:700; margin-bottom:4px}
.vazio .btn{margin-top:14px}
#toasts{position:fixed; right:18px; bottom:18px; z-index:99; display:flex; flex-direction:column; gap:8px}
.toast{background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--copper); color:var(--text); padding:11px 14px; border-radius:10px; font-size:13px; box-shadow:var(--sombra-3); max-width:360px; animation:toastIn .22s ease-out}
.toast.erro{border-left-color:var(--danger)} .toast.ok{border-left-color:var(--sage)}
.toast.saindo{opacity:0; transform:translateX(12px); transition:all .25s ease}
@keyframes toastIn{from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:none}}
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px); z-index:90; background:var(--text); color:var(--panel); padding:10px 18px; border-radius:9px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:.18s}
#toast.mostrar{opacity:1; transform:translateX(-50%) translateY(0)}
.skel{color:transparent!important; border-radius:8px; user-select:none; background:linear-gradient(90deg,var(--panel-2) 25%,var(--border) 50%,var(--panel-2) 75%)!important; background-size:200% 100%!important; animation:skelOnda 1.3s infinite}
@keyframes skelOnda{from{background-position:200% 0} to{background-position:-200% 0}}

/* ===================== app + barra lateral ===================== */
#app{display:none; min-height:100vh}
#app.ativo{display:grid; grid-template-columns:var(--nav-w) 1fr; transition:grid-template-columns .22s cubic-bezier(.32,.72,0,1)}
#app.ativo.recolhida{grid-template-columns:var(--nav-w-min) 1fr}
main.conteudo{padding:24px 28px 40px; max-width:1500px; min-width:0; width:100%; background:none}
.secao{display:none} .secao.ativa{display:block; animation:surgir .25s ease}
@keyframes surgir{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

aside.nav{position:sticky; top:0; height:100vh; min-width:0; display:flex; flex-direction:column; gap:2px; padding:14px 12px; background:var(--panel); border-right:1px solid var(--border); box-shadow:none}
.nav .nav-cab{position:relative}
.nav .logo{display:flex; align-items:center; gap:10px; padding:6px 8px 14px; position:relative; border-radius:10px}
.tenant-av{position:relative; width:36px; height:36px; flex:0 0 36px; border-radius:10px; display:grid; place-items:center; overflow:hidden; background:var(--copper-dim); color:var(--copper); font-weight:800; font-size:15px}
.tenant-av::before{content:attr(data-ini)}
.tenant-av .marca-icone{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; display:block}
.nav .logo .logo-txt{min-width:0; flex:1; overflow:hidden}
.nav .logo .nav-versao{font-size:10.5px; color:var(--muted); margin-top:2px; letter-spacing:.02em; white-space:nowrap}
.nav .logo .eyebrow{font-family:inherit; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav .logo h1{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav .logo .chev{width:16px; height:16px; color:var(--muted); flex:0 0 auto}
#sel-tenant{position:absolute; inset:0 0 8px 0; width:100%; margin:0; opacity:0; cursor:pointer; font-size:14px; pointer-events:none}
.nav .logo.tem-seletor{cursor:pointer}
.nav .logo.tem-seletor:hover{background:var(--panel-2)}
.nav .logo.tem-seletor:has(#sel-tenant:focus-visible){outline:2px solid var(--copper); outline-offset:-2px}
/* seletor de empresa (18/10/2026): busca, recentes e só as ativas */
.tp-pop{position:fixed; z-index:1000; width:min(320px, calc(100vw - 24px)); max-height:min(460px, calc(100vh - 40px)); display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border-forte); border-radius:12px; box-shadow:var(--sombra-3); overflow:hidden}
.tp-pop[hidden]{display:none}
.tp-busca{flex:0 0 auto; margin:10px 10px 6px; height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:13.5px}
.tp-busca:focus{outline:none; border-color:var(--copper)}
.tp-lista{overflow-y:auto; padding:2px 6px 6px; min-height:0}
.tp-titulo{font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:10px 8px 4px}
.tp-item{display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:none; border-radius:8px; background:transparent; color:var(--text); text-align:left; cursor:pointer; font-size:13.5px}
.tp-item:hover,.tp-item.foco{background:var(--panel-2)}
.tp-item.atual{background:var(--copper-dim)}
.tp-ini{flex:0 0 28px; width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:var(--copper-dim); color:var(--copper); font-weight:800; font-size:12.5px}
.tp-txt{flex:1; min-width:0}
.tp-nome{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-sub{display:block; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-ok{flex:0 0 auto; color:var(--copper); font-weight:800}
.tp-susp{flex:0 0 auto; font-size:10.5px; font-weight:600; color:var(--danger)}
.tp-vazio{padding:16px 8px; color:var(--muted); font-size:13px; text-align:center}
.tp-rod{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:9px 14px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); cursor:pointer}
.tp-rod[hidden]{display:none}
.tp-rod input{width:auto; margin:0}
#sel-tenant[style*="none"] ~ .chev{display:none}
.nav .recolher{position:absolute; top:6px; right:0; width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:transparent; border:none; color:var(--muted); cursor:pointer; opacity:0; transition:opacity var(--t-rapido); z-index:1}
.nav:hover .recolher,.nav .recolher:focus-visible{opacity:1}
.nav .recolher:hover{background:var(--panel-2); color:var(--text)}
.nav .recolher .ic{width:17px; height:17px}
.nav .nav-rol{display:flex; flex-direction:column; gap:2px; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px}
.nav button.item{position:relative; display:flex; align-items:center; gap:10px; width:100%; height:38px; padding:0 10px; border-radius:var(--radius-sm); background:transparent; border:none; color:var(--nav-texto); font-size:13.5px; font-weight:500; text-align:left; cursor:pointer; transition:background var(--t-rapido),color var(--t-rapido)}
.nav button.item:hover{background:var(--panel-2); color:var(--text)}
.nav button.item.ativa{background:var(--copper-dim); color:var(--copper-hi); font-weight:600; box-shadow:none}
.nav button.item.ativa::before{display:none}
.nav button.item.ativa .ic{color:var(--copper)}
.nav button.item .ic{width:18px; height:18px; transition:none}
.nav button.item:hover .ic{transform:none}
.nav button.item .rot{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav button.item .badge{margin-left:auto; flex:0 0 auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--copper); color:var(--sobre-marca); font-size:11px; font-weight:700; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums}
.nav button.item .ext{margin-left:auto; width:14px; height:14px; opacity:.55}
.nav-grupo{display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:var(--radius-sm); color:var(--nav-texto); font-size:13.5px; font-weight:500; cursor:pointer; user-select:none}
.nav-grupo:hover{background:var(--panel-2); color:var(--text)}
.nav-grupo .ic{width:18px; height:18px}
.nav-grupo span{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none; color:inherit; opacity:1}
.nav-grupo::before{display:none}
.nav-grupo::after{content:''; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); margin:-3px 4px 0 0; opacity:.7; transition:transform var(--t-rapido); flex:0 0 auto}
.nav-grupo.fechado::after{transform:rotate(-45deg); margin-top:0}
.nav button.item.sub{height:34px; padding-left:38px; font-size:13px}
.nav button.item.sub .ic{display:none}
.nav button.item.sub::before{content:''; display:block; position:absolute; left:19px; top:0; bottom:0; width:1px; background:var(--border)}
.nav button.item.oculto-grupo{display:none!important}
.nav button.item.oculto-grupo.ativa{display:flex!important}
.nav .rodape{margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:8px; border-top:1px solid var(--border)}

/* barra recolhida: só ícones */
.recolhida .nav{padding:14px 8px}
.recolhida .nav .logo{justify-content:center; padding:6px 0 14px}
.recolhida .nav .logo .logo-txt,.recolhida .nav .logo .chev{display:none}
.recolhida .nav #sel-tenant{display:none!important}
.recolhida .nav .recolher{top:auto; bottom:-4px; right:auto; left:50%; transform:translateX(-50%)}
.recolhida .nav button.item{justify-content:center; padding:0; gap:0}
.recolhida .nav button.item .rot,.recolhida .nav button.item .ext{display:none}
.recolhida .nav .nav-grupo{height:auto; padding:0; margin:6px 8px; border-top:1px solid var(--border); pointer-events:none; border-radius:0}
.recolhida .nav .nav-grupo span,.recolhida .nav .nav-grupo .ic,.recolhida .nav .nav-grupo::after{display:none}
.recolhida .nav button.item.sub{height:38px; padding:0}
.recolhida .nav button.item.sub .ic{display:block}
.recolhida .nav button.item.sub::before{display:none}
.recolhida .nav button.item.oculto-grupo{display:flex!important}
.recolhida .nav button.item .badge{position:absolute; top:6px; right:9px; margin:0; padding:0; width:9px; height:9px; min-width:0; border-radius:50%; font-size:0; box-shadow:0 0 0 2px var(--panel)}
.nav-dica{position:fixed; z-index:80; background:var(--text); color:var(--panel); font-size:12px; font-weight:600; white-space:nowrap; padding:6px 10px; border-radius:7px; pointer-events:none; opacity:0; transition:opacity .14s; box-shadow:var(--sombra-2)}
.nav-dica.vis{opacity:1}

/* ===================== hub de configurações ===================== */
.hub{display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start}
.hub-subnav{position:sticky; top:24px; display:flex; flex-direction:column; gap:2px}
.hub-subnav .titulo{font-size:18px; font-weight:800; letter-spacing:-.02em; padding:4px 10px 12px}
.hub-subnav .h{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:12px 10px 4px}
.hub-subnav button{display:flex; align-items:center; gap:9px; width:100%; height:36px; padding:0 10px; border-radius:var(--radius-sm); border:none; background:transparent; color:var(--nav-texto); font-size:13.5px; font-weight:500; text-align:left; cursor:pointer; white-space:nowrap}
.hub-subnav button:hover{background:var(--panel); color:var(--text)}
.hub-subnav button.ativa{background:var(--panel); color:var(--text); font-weight:600; box-shadow:var(--sombra-1)}
.hub-subnav button .ic{width:17px; height:17px} .hub-subnav button.ativa .ic{color:var(--copper)}
.hub-subnav button .n{margin-left:auto; font-size:11px; color:var(--muted)}
.hub-conteudo{min-width:0}
/* Integrações (26/09): blocos com título, pares de cartões da mesma altura */
.int-bloco{margin-bottom:22px}
.int-titulo{margin:0 0 10px}
.int-titulo h3{font-size:14.5px; font-weight:700; margin:0}
.int-titulo p{margin:3px 0 0; color:var(--muted); font-size:12.5px; line-height:1.5; max-width:760px}
.int-par{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch}
.int-ajuda{color:var(--muted); font-size:12px; line-height:1.55; margin:-6px 0 12px}
.int-num{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border)}
.int-num:last-child{border-bottom:none}
.int-num .nome{font-weight:600; font-size:13.5px}
.int-num .det{color:var(--muted); font-size:12px; margin-top:2px}
.int-num .estado{font-size:12px; color:var(--muted); margin-right:10px}
@media (max-width:900px){.int-par{grid-template-columns:1fr}}
.hub-conteudo > .secao.ativa{animation:none}
.cfg-linha{display:flex; align-items:center; gap:12px; width:100%; padding:12px 4px; border:none; border-bottom:1px solid var(--border); background:transparent; color:var(--text); font-size:13.5px; font-weight:500; text-align:left; cursor:pointer}
.cfg-linha:last-child{border-bottom:none}
.cfg-linha:hover{color:var(--copper-hi)}
.cfg-linha .ic{color:var(--muted)} .cfg-linha .rot{flex:1} .cfg-linha .valor{color:var(--muted); font-size:12.5px}
.cfg-linha .sw{width:36px; height:20px; border-radius:20px; background:var(--border-forte); position:relative; transition:background var(--t-rapido); flex:0 0 auto}
.cfg-linha .sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left var(--t-rapido)}
.cfg-linha.ligado .sw{background:var(--sage)} .cfg-linha.ligado .sw::after{left:18px}
:root[data-tema="claro"] #btn-tema .valor::before{content:'Claro'}
:root:not([data-tema="claro"]) #btn-tema .valor::before{content:'Escuro'}

/* ===================== conexões (Fase 4) ===================== */
.cx-card{margin:0; display:flex; flex-direction:column; gap:10px; padding:16px 18px}
.cx-topo{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px}
.cx-status{display:inline-flex; align-items:center; gap:5px; font-weight:600}
.cx-status .ponto{width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 7px}
.cx-status.ok{color:var(--sage)} .cx-status.erro{color:var(--danger)} .cx-status.off{color:var(--muted)}
.cx-plataforma{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-id{display:flex; align-items:center; gap:11px; min-width:0}
.cx-logo{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 38px; color:#fff}
.cx-logo .ic{width:21px; height:21px}
.cx-logo.whatsapp{background:#25D366}
.cx-logo.instagram{background:linear-gradient(135deg,#F58529 0%,#DD2A7B 55%,#8134AF 100%)}
.cx-logo.messenger{background:#0084FF}
.cx-logo.evolution{background:var(--copper)}
/* Z-API: a marca dela (verde sobre escuro) no lugar do glifo genérico */
.cx-logo.zapi{background:#10201a url(zapi.svg) center/76% auto no-repeat}
.cx-logo.zapi .ic{display:none}
.cx-id .txt{min-width:0}
.cx-id b{display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-id .cx-num{font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.cx-desc{color:var(--muted); font-size:11.5px; line-height:1.6; margin:0; flex:1}
.cx-rodape{display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--border); padding-top:11px}
/* interruptor de verdade no lugar da caixinha de marcar: o mesmo desenho
   do hub de Configurações, para ligar/desligar ler igual em todo o painel */
.sw-wrap{display:inline-flex; align-items:center; cursor:pointer; position:relative}
.sw-wrap input{position:absolute; opacity:0; width:0; height:0}
.sw-wrap .sw{width:36px; height:20px; border-radius:20px; background:var(--border-forte); position:relative; transition:background var(--t-rapido)}
.sw-wrap .sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left var(--t-rapido)}
.sw-wrap input:checked + .sw{background:var(--sage)}
.sw-wrap input:checked + .sw::after{left:18px}
.sw-wrap input:focus-visible + .sw{outline:2px solid var(--copper); outline-offset:2px}
/* diálogo de nova conexão: plataforma à esquerda, opções daquela
   plataforma à direita — em vez de uma lista única de cinco caminhos */
.plat{display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:start}
.plat-nav{display:flex; flex-direction:column; gap:2px}
.plat-nav button{display:flex; align-items:center; gap:8px; width:100%; height:36px; padding:0 10px; border:none; border-radius:var(--radius-sm); background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; text-align:left}
.plat-nav button:hover{background:var(--panel-2); color:var(--text)}
.plat-nav button.ativa{background:var(--copper-dim); color:var(--copper-hi)}
.plat-nav button .ic{width:16px; height:16px}
.plat-opcoes{display:flex; flex-direction:column; gap:9px; min-width:0}
.plat-op{border:1px solid var(--border); border-radius:10px; padding:12px 14px; display:flex; gap:11px; align-items:flex-start; cursor:pointer; transition:border-color var(--t-rapido),background var(--t-rapido)}
.plat-op:hover{border-color:var(--copper)}
.plat-op.sel{border-color:var(--copper); background:var(--copper-dim)}
.plat-op.embreve{opacity:.5; cursor:default}
.plat-op.embreve:hover{border-color:var(--border)}
.plat-op b{font-size:13px}
.plat-op .tag{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-left:5px}
.plat-op p{color:var(--muted); font-size:11.5px; margin:3px 0 0; line-height:1.5}
.plat-op .cx-logo{width:32px; height:32px; flex:0 0 32px; border-radius:9px}
.plat-op .cx-logo .ic{width:18px; height:18px}
@media (max-width:640px){ .plat{grid-template-columns:1fr} .plat-nav{flex-direction:row; overflow-x:auto} .plat-nav button{width:auto; flex:0 0 auto} }

/* ===================== dashboard, leads, relatórios (Fase 3) ===================== */
/* cartão de gráfico: título e subtítulo em duas linhas, como o DataCrazy —
   antes o subtítulo era um <span> cinza colado no título, e as duas
   informações competiam na mesma linha */
.cartao h3{margin-bottom:2px}
.cartao h3 + .sub-card{margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.5}
.cartao h3 span{font-size:12px; font-weight:400; color:var(--muted)}
/* KPI com ícone no canto: dá âncora visual e diz do que o número trata */
.kpi{padding-right:46px}
.kpi .lbl{padding-right:0}
.kpis .kpi .ic-kpi{position:absolute; right:15px; top:15px; width:17px; height:17px; color:var(--copper); opacity:.85}
.kpi.sage .ic-kpi{color:var(--sage)} .kpi.danger .ic-kpi{color:var(--danger)}
/* célula de nome na tabela de leads: avatar + nome forte + linha secundária */
td .cel-nome{display:flex; align-items:center; gap:10px; min-width:0}
td .cel-nome .avatar{width:30px; height:30px; font-size:11.5px}
td .cel-nome .txt{min-width:0}
td .cel-nome b{display:block; font-weight:600; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis}
td .cel-nome .sec{display:block; font-size:11.5px; color:var(--muted); margin-top:1px}
tbody td{height:auto; min-height:46px; padding:10px 14px}
/* o kebab só aparece na linha sob o ponteiro — a coluna deixa de ser um
   paredão de pontinhos e a tabela respira */
td .kebab{opacity:0; transition:opacity var(--t-rapido)}
tbody tr:hover .kebab,td .kebab:focus-visible{opacity:1}
@media (hover:none){ td .kebab{opacity:1} }
/* banner de atenção do dashboard */
.cartao.ponte{border-left:3px solid var(--copper); background:var(--panel)}
.cartao.alerta{border-left:3px solid var(--ambar)}

/* ===================== chat ao vivo (Fase 2) ===================== */
.chat-grid{display:grid; grid-template-columns:320px 1fr 300px; gap:16px; height:calc(100vh - 132px); min-height:480px}
.chat-inbox,.chat-thread,.chat-lateral{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--sombra-1)}
.chat-inbox{display:flex; flex-direction:column; overflow:hidden}
.chat-inbox .topo-inbox{padding:12px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:8px}
.chat-inbox input{background:var(--panel-2); border:1px solid transparent; border-radius:var(--radius-sm); color:var(--text); padding:9px 12px; font-size:13px; transition:border-color var(--t-rapido),box-shadow var(--t-rapido),background var(--t-rapido)}
.chat-inbox input:focus{outline:none; background:var(--panel); border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-dim)}
.chat-abas button .n{font-size:10.5px; font-weight:700; color:var(--muted); background:var(--border); border-radius:9px; min-width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px}
.chat-abas button.ativa .n{background:var(--copper-dim); color:var(--copper-hi)}
.conv-lista{flex:1; overflow-y:auto}
.conv-item{display:flex; gap:10px; padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--border); transition:background var(--t-rapido)}
.conv-item:hover{background:var(--panel-2)}
.conv-item.ativa{background:var(--copper-dim); box-shadow:none}
.conv-item .conv-nome{font-size:13.5px; font-weight:600; display:flex; justify-content:space-between; gap:6px; color:var(--text)}
.conv-item .conv-hora{font-size:11px; color:var(--muted); font-weight:400; white-space:nowrap}
.conv-item .conv-previa{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.conv-item .conv-linha2{display:flex; align-items:center; gap:8px; margin-top:3px}
.conv-item .conv-linha2 .conv-previa{flex:1; min-width:0; margin-top:0}
.conv-item.nao-lida .conv-nome > span:first-child{font-weight:700}
.conv-item.nao-lida .conv-previa{color:var(--text)}
.conv-item.nao-lida .conv-hora{color:var(--copper); font-weight:600}
.conv-tags{display:flex; gap:5px; margin-top:5px; flex-wrap:wrap}
.conv-tags span{font-size:9.5px; font-weight:600; text-transform:none; letter-spacing:0; padding:2px 7px; border-radius:6px}
.conv-tags .tag-dep{background:var(--panel-2); color:var(--muted); border:1px solid var(--border)}
.conv-tags .tag-livre{background:var(--ambar-dim); color:var(--ambar)}
.badge-nl{flex:0 0 auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--copper); color:var(--sobre-marca); font-size:11px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.chat-thread{display:flex; flex-direction:column; overflow:hidden; position:relative}
.thread-topo{padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--panel)}
.thread-msgs{flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:8px; background:var(--ink)}
.msg{max-width:68%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; box-shadow:var(--sombra-1)}
.msg.entrada{background:var(--panel); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px}
.msg.saida{background:var(--copper); color:var(--sobre-marca); align-self:flex-end; border-bottom-right-radius:4px; border:none}
.msg .msg-meta{display:block; font-size:10px; opacity:.7; margin-top:4px; text-align:right}
.sep-dia{align-self:center; background:var(--panel-2); border:none; color:var(--muted); font-size:11px; font-weight:600; padding:4px 12px; border-radius:20px; margin:8px 0 2px; box-shadow:none}
/* evento do sistema em linha, como o DataCrazy: "17:53 · iniciou o atendimento" */
.msg-evento{align-self:center; max-width:86%; text-align:center; color:var(--muted); font-size:11.5px; line-height:1.5; padding:2px 10px; margin:2px 0}
.msg-evento b{color:var(--text); font-weight:600}
.thread-input{display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--border); background:var(--panel); align-items:flex-end}
.thread-input textarea{flex:1; background:var(--panel-2); border:1px solid transparent; border-radius:10px; color:var(--text); padding:10px 13px; font-size:13.5px; resize:none; height:40px; font-family:var(--fonte); transition:border-color var(--t-rapido),box-shadow var(--t-rapido),background var(--t-rapido)}
.thread-input textarea:focus{outline:none; background:var(--panel); border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-dim)}
.anexo-btn{background:transparent; border:none; border-radius:var(--radius-sm); color:var(--muted); width:38px; height:40px; font-size:16px; cursor:pointer; flex:0 0 38px; display:inline-flex; align-items:center; justify-content:center; transition:background var(--t-rapido),color var(--t-rapido)}
.anexo-btn:hover{background:var(--panel-2); color:var(--text); border-color:transparent}
.anexo-btn.ativo{background:var(--copper-dim); color:var(--copper)}
.anexo-btn:disabled{opacity:.35; cursor:not-allowed}
.anexo-btn:disabled:hover{background:transparent}
.anexo-btn .ic{width:19px; height:19px}
.thread-input .mini.tg-composer{height:40px; border:none; background:transparent; color:var(--muted); width:34px; padding:0; justify-content:center}
.thread-input .mini.tg-composer:hover{background:var(--panel-2); color:var(--text)}
.thread-input .mini.tg-composer.ligado{background:var(--copper-dim); color:var(--copper)}
#chat-nota.ligado{background:var(--ambar-dim); color:var(--ambar)}
#chat-enviar{height:40px}
.chat-lateral{padding:16px; overflow-y:auto}
.chat-lateral h4{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px}
.chat-lateral .bloco{border-bottom:1px solid var(--border); padding-bottom:16px; margin-bottom:16px}
.chat-lateral .campo label{font-size:11.5px; color:var(--muted)}
.chat-vazio{flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; flex-direction:column; gap:10px}
.chat-vazio .ilu{width:48px; height:48px; opacity:.45; stroke-width:1.2}

/* ===================== responsivo (barra + hub) ===================== */
@media (max-width:980px){
  #app.ativo,#app.ativo.recolhida{grid-template-columns:1fr}
  aside.nav,.recolhida .nav{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px; padding:10px 12px; border-right:none; border-bottom:1px solid var(--border)}
  .nav .nav-cab{margin-right:8px} .nav .logo{padding:0 4px}
  .nav .logo .chev,.nav .recolher,.nav .nav-grupo{display:none}
  .nav .nav-rol{flex-direction:row; flex-wrap:wrap; overflow:visible; margin:0; padding:0}
  .nav button.item,.recolhida .nav button.item{width:auto; height:34px; padding:0 10px; font-size:12.5px; gap:8px; justify-content:flex-start}
  .nav button.item.sub{padding-left:10px} .nav button.item.sub .ic{display:block} .nav button.item.sub::before{display:none}
  .nav button.item.oculto-grupo{display:flex!important}
  .recolhida .nav button.item .rot{display:inline}
  .recolhida .nav button.item .badge{position:static; width:auto; height:20px; min-width:20px; padding:0 6px; font-size:11px; box-shadow:none}
  .nav .rodape{margin:0 0 0 auto; flex-direction:row; border-top:none; padding:0}
  main.conteudo{padding:16px}
  .kpis{grid-template-columns:repeat(2,1fr)} .grid-2,.grid-3{grid-template-columns:1fr}
  .hub{grid-template-columns:1fr; gap:14px}
  .hub-subnav{position:static; flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:4px; scrollbar-width:none}
  .hub-subnav::-webkit-scrollbar{display:none}
  .hub-subnav .titulo,.hub-subnav .h{display:none}
  .hub-subnav button{width:auto; flex:0 0 auto; height:32px; border:1px solid var(--border); background:var(--panel)}
  .hub-subnav button.ativa{border-color:var(--copper); color:var(--copper-hi); background:var(--copper-dim); box-shadow:none}
}
@media (max-width:760px){
  aside.nav,.recolhida .nav{position:fixed; top:auto; bottom:0; left:0; right:0; z-index:80; flex-wrap:nowrap; align-items:stretch; padding:5px 6px calc(5px + env(safe-area-inset-bottom)); border-bottom:none; border-top:1px solid var(--border); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  aside.nav::-webkit-scrollbar{display:none}
  .nav .nav-cab{display:none}
  .nav .nav-rol{flex-wrap:nowrap; gap:2px}
  .nav button.item,.recolhida .nav button.item{flex:0 0 auto; min-width:58px; flex-direction:column; justify-content:center; gap:3px; padding:6px 7px; height:auto; font-size:9.5px}
  .nav button.item .rot,.recolhida .nav button.item .rot{display:block; font-size:9.5px; white-space:nowrap}
  .nav button.item .badge{position:absolute; top:2px; right:6px; margin:0}
  .nav button.item .ext{display:none}
  .nav .rodape{margin:0; gap:2px}
  main.conteudo{padding:14px 12px calc(86px + env(safe-area-inset-bottom))}
  .cab{gap:8px} .cab h2{font-size:18px}
  /* cabeçalho da conversa no celular: uma linha só, nome com reticências e
     botões só com o ícone — senão o nome empurra os botões para fora */
  .thread-topo{flex-wrap:nowrap; overflow:hidden; gap:8px}
  .thread-topo > div{overflow:hidden; min-width:40px}
  #th-nome,#th-fone{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #th-pegar,#th-finalizar{font-size:0; gap:0; width:38px; padding:0; flex:0 0 38px}
  #th-ia{max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  dialog{width:min(94vw,560px)}
  input[type=text],input[type=number],input[type=email],input[type=password],textarea,select{font-size:16px!important}
}

/* Cabeçalho da conversa com a coluna estreita (menu aberto, notebook): o nome
   do contato ficava espremido em três linhas pelos botões. O topo mede a
   PRÓPRIA largura (não a da tela) e, abaixo de 640px, os botões ficam só com
   o ícone — o texto continua no title. Mesmo tratamento do celular (28/09). */
.thread-topo{container-type:inline-size; container-name:topo-conversa}
.thread-topo > div{min-width:0}
/* fora do celular: sem espaço para o nome inteiro, os botões descem para uma
   segunda linha em vez de espremer o nome */
@media (min-width: 761px){
  .thread-topo{flex-wrap:wrap; row-gap:8px}
  .thread-topo > div{flex:1 1 170px !important} /* vence o flex:1 inline do HTML */
}
#th-nome,#th-fone{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@container topo-conversa (max-width: 640px){
  #th-pegar,#th-reuniao,#th-venda,#th-finalizar{font-size:0; gap:0; width:38px; min-width:38px; padding:0; flex:0 0 38px; justify-content:center}
  #th-ia{max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
/* coluna bem estreita: nome + avatar na 1ª linha, todos os botões juntos na 2ª
   (sem isso a quebra separava três botões de dois) */
@media (min-width: 761px){
  @container topo-conversa (max-width: 470px){
    .thread-topo > div{flex-basis:calc(100% - 44px) !important}
  }
}

/* Navegação orientada a tarefas — 14/10/2026. */
.nav .nav-area{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:18px 10px 6px;line-height:1.4;flex-shrink:0}
.nav .nav-area:first-child{padding-top:8px}.nav .nav-area[hidden]{display:none}
.nav button.nav-grupo{width:100%;border:0;background:transparent;text-align:left;font-family:inherit;flex-shrink:0}
.nav button.item{flex-shrink:0;min-height:38px}.nav .nav-rol{padding-bottom:12px}
.nav button.item.ativa{box-shadow:inset 3px 0 var(--copper);background:var(--copper-dim)}
.nav .nav-grupo.grupo-ativo{color:var(--copper-hi);font-weight:600}.nav .nav-active-dot{display:none!important;width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--copper)}
.nav .nav-grupo.grupo-ativo.fechado .nav-active-dot{display:block!important}
.nav button.item.oculto-grupo.ativa{display:none!important}
.nav .nav-buscar{display:flex;align-items:center;gap:8px;height:36px;margin:4px 0 12px;padding:0 10px;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--muted);cursor:pointer;font:inherit;font-size:12px;flex-shrink:0}
.nav .nav-buscar .ic{width:15px;height:15px}.nav .nav-buscar kbd{margin-left:auto;font-family:inherit;font-size:9px;border:1px solid var(--border);border-radius:4px;padding:2px 4px;white-space:nowrap}.nav .nav-buscar:hover{border-color:var(--copper);color:var(--text)}
.nav-location{font-size:11px;color:var(--muted);padding:0 0 14px;line-height:1.6;font-weight:500}
.nav-search-dialog{margin:auto;width:min(560px,calc(100vw - 32px));padding:20px;border:1px solid var(--border-forte);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:var(--sombra-3)}
.nav-search-dialog::backdrop{background:rgba(7,10,15,.6);backdrop-filter:blur(4px)}
.nav-search-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.nav-search-header h2{font-size:17px;margin:0}.nav-search-header p{font-size:12px;color:var(--muted);margin:6px 0 0}.nav-search-label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
#nav-search-input{width:100%;height:44px;padding:0 12px;border-radius:8px;border:1px solid var(--border-forte);background:var(--panel-2);color:var(--text);font:inherit;font-size:14px}
#nav-search-results{max-height:min(380px,55vh);overflow:auto;margin-top:12px}.nav-search-result{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:1px solid transparent;border-radius:8px;padding:10px 12px;text-align:left;background:transparent;color:var(--text);cursor:pointer;font:inherit}.nav-search-result b{display:block;font-size:13px;font-weight:600}.nav-search-result small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.nav-search-result.selecionado,.nav-search-result:hover{background:var(--copper-dim);border-color:var(--copper)}.nav-search-empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:13px}.nav-search-footer{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.nav .recolher{opacity:1}.recolhida .nav .nav-area{font-size:0;padding:0;height:1px;margin:12px 8px 5px;background:var(--border)}.recolhida .nav .nav-buscar{justify-content:center;padding:0;margin-top:14px}.recolhida .nav .nav-buscar span,.recolhida .nav .nav-buscar kbd{display:none}.recolhida .nav .nav-grupo{min-height:0;margin:5px 8px}.recolhida .nav button.item.oculto-grupo.ativa{display:flex!important}
@media(max-width:980px){.nav .nav-buscar kbd{display:none}.nav button.item,.nav button.item.sub,.nav button.nav-grupo{min-height:42px}.nav-location{padding-top:8px}}

/* Itens negados por perfil nunca voltam pelo CSS do menu recolhido. */
.nav button.item[hidden],.nav button.item[style*="display: none"],.nav button.item[style*="display:none"],.recolhida .nav button.item[style*="display: none"],.recolhida .nav button.item[style*="display:none"]{display:none!important}
.nav button.item[data-nav-area="Plataforma"]{margin-top:6px;border-top:1px solid var(--border);border-radius:0;padding-top:5px;min-height:44px;font-size:12px}
.nav-mobile-toggle,.nav-mobile-backdrop{display:none}
@media(max-width:980px){
  #app.ativo,#app.ativo.recolhida{display:block}
  .nav{position:fixed;inset:auto 0 0;z-index:80;display:flex;flex-direction:row;align-items:stretch;gap:0;height:auto;max-height:none;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--panel);border:0;border-top:1px solid var(--border);overflow:visible}
  .recolhida .nav{padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .nav .nav-cab,.nav .nav-buscar,.nav .rodape,.nav .nav-area,.nav .nav-grupo,.nav button.item.sub,.recolhida .nav button.item.sub{display:none!important}
  .nav .nav-rol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;min-width:0;margin:0;padding:0;gap:2px;overflow:visible}
  .nav .nav-rol>button.item:not(.sub){display:flex;flex-direction:column;justify-content:center;gap:4px;padding:7px 2px;min-width:0;height:auto;min-height:48px;font-size:9px}
  .nav .nav-rol>button.item .rot,.recolhida .nav button.item .rot{display:block;font-size:9px;max-width:100%}
  .nav .nav-rol>button.item .ic{width:19px;height:19px}.nav .nav-rol>button.item.ativa{box-shadow:none}
  .nav-mobile-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20%;max-width:90px;border:0;border-radius:8px;background:transparent;color:var(--nav-texto);font:inherit;font-size:9px;cursor:pointer}.nav-mobile-toggle .ic{width:19px;height:19px}
  main.conteudo{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .nav-mobile-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:85;border:0;background:rgba(7,10,15,.55)}
  body.pegasus-menu-aberto .nav{inset:8px;z-index:90;display:flex;flex-direction:column;align-items:stretch;height:calc(100dvh - 16px);padding:16px;gap:8px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sombra-3);overflow:hidden}
  body.pegasus-menu-aberto .nav .nav-cab,body.pegasus-menu-aberto .nav .nav-buscar,body.pegasus-menu-aberto .nav .rodape,body.pegasus-menu-aberto .nav .nav-area,body.pegasus-menu-aberto .nav .nav-grupo{display:flex!important}
  body.pegasus-menu-aberto .nav .nav-cab{display:block!important}body.pegasus-menu-aberto .nav .nav-cab .recolher{display:none}
  body.pegasus-menu-aberto .nav .logo .logo-txt{display:block}body.pegasus-menu-aberto .nav .logo{justify-content:flex-start;padding:4px 0 10px}
  body.pegasus-menu-aberto .nav .nav-rol{display:flex;flex-direction:column;flex:1;overflow:auto;padding:0 0 10px}
  body.pegasus-menu-aberto .nav button.item,body.pegasus-menu-aberto .nav .nav-grupo{flex-direction:row;justify-content:flex-start;gap:10px;font-size:13.5px;min-height:42px;padding:0 10px;pointer-events:auto;border:0;margin:0}
  body.pegasus-menu-aberto .nav button.item .rot,body.pegasus-menu-aberto .nav .nav-grupo span{display:block;font-size:13px}
  body.pegasus-menu-aberto .nav .nav-grupo .ic,body.pegasus-menu-aberto .nav .nav-grupo::after{display:block}
  body.pegasus-menu-aberto .nav button.item.sub{display:flex!important;padding-left:38px}
  body.pegasus-menu-aberto .nav button.item.sub .ic{display:none}
  body.pegasus-menu-aberto .nav button.item.oculto-grupo{display:none!important}
  body.pegasus-menu-aberto .nav button.item[style*="display: none"],body.pegasus-menu-aberto .nav button.item[style*="display:none"],body.pegasus-menu-aberto .nav .nav-grupo[style*="display: none"],body.pegasus-menu-aberto .nav .nav-grupo[style*="display:none"],body.pegasus-menu-aberto .nav .nav-area[hidden]{display:none!important}
  body.pegasus-menu-aberto .nav .nav-buscar{justify-content:flex-start;padding:0 10px;margin:0}body.pegasus-menu-aberto .nav .nav-buscar span{display:block}
  body.pegasus-menu-aberto .nav .nav-area{font-size:10px;height:auto;background:none;margin:0;padding:12px 10px 4px}
  body.pegasus-menu-aberto .nav-mobile-toggle{order:-1;flex-direction:row;width:100%;max-width:none;min-height:36px;justify-content:flex-end;font-size:12px;flex-shrink:0}
  body.pegasus-menu-aberto .nav .rodape{flex-direction:column;margin-top:0;gap:2px;padding-top:6px;border-top:1px solid var(--border)}
}

/* Atendimento: hierarquia, acoes identificadas e compositor (20/10/2026). */
#sec-atendimento .chat-grid{grid-template-columns:minmax(250px,300px) minmax(0,1fr) 264px;gap:12px;height:calc(100dvh - 174px);min-height:500px}
#sec-atendimento .chat-inbox,#sec-atendimento .chat-thread,#sec-atendimento .chat-lateral{min-width:0}
.cu-inbox-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 6px}.cu-inbox-cab b{font-size:14px}.cu-inbox-cab span{font-size:11px;color:var(--muted)}
#sec-atendimento .cf-busca input{min-width:0;width:100%}#sec-atendimento .chat-abas button{min-height:34px}
.cu-filtros-rapidos{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.cu-filtros-rapidos button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:20px;background:var(--panel);color:var(--muted);padding:6px 10px;font:inherit;font-size:11px;cursor:pointer}
.cu-filtros-rapidos .ic{width:14px;height:14px}.cu-filtros-rapidos button[aria-pressed=true],#cu-foco[aria-pressed=true]{background:var(--copper-dim);color:var(--copper);border-color:var(--copper)}
#sec-atendimento .thread-topo{flex-wrap:wrap;padding:14px;gap:10px;container-type:normal}
#sec-atendimento .thread-topo>div:not(.cu-acoes){flex:1 1 140px!important}
#sec-atendimento .thread-topo>.cu-acoes{display:flex;flex:1 1 100%!important;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border);overflow:visible}
#sec-atendimento .cu-acoes .btn{height:34px;width:auto;min-width:34px;flex:0 0 auto;padding:0 10px;font-size:11px;gap:6px;white-space:nowrap}
#sec-atendimento .cu-acoes .ic{width:17px;height:17px;stroke-width:1.8}
#sec-atendimento #th-info{display:inline-flex}#sec-atendimento #th-finalizar{margin-left:auto;border-color:var(--copper);color:var(--copper)}
#sec-atendimento .thread-msgs{padding:20px;overscroll-behavior:contain;min-height:100px}
#sec-atendimento .msg{max-width:82%;font-size:13px;line-height:1.6}
#sec-atendimento #thread-input{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;flex-wrap:nowrap}
.cu-composer-ferramentas{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--border)}
#sec-atendimento .cu-composer-ferramentas button{width:auto;flex:0 0 auto;min-width:34px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;font-size:11px;border-radius:6px}
#sec-atendimento .cu-composer-ferramentas button .ic{width:17px;height:17px;stroke-width:1.8}
#sec-atendimento .cu-composer-ferramentas button:hover{background:var(--panel-2);color:var(--copper)}
.cu-composer-escrita{display:flex;align-items:flex-end;gap:8px}
#sec-atendimento .cu-composer-escrita #chat-texto{flex:1;min-width:0;min-height:44px;max-height:160px;height:44px;line-height:1.5}
#sec-atendimento #chat-enviar{width:auto;flex:0 0 auto;height:44px;padding:0 14px!important;gap:7px}
.cu-modo{font-size:11px;color:var(--muted);font-weight:600}.cu-composer-ajuda{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.cu-composer-ajuda kbd{font:inherit}
#sec-atendimento #thread-input.cu-nota{background:var(--ambar-dim)}#thread-input.cu-nota .cu-modo{color:var(--text)}
.cu-busca-barra{padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel-2)}.cu-busca-barra[hidden]{display:none}.cu-busca-barra label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}.cu-busca-barra>div{display:flex;align-items:center;gap:6px}.cu-busca-barra input{min-width:0;flex:1;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text)}#cu-busca-total{font-size:11px;white-space:nowrap;color:var(--muted)}
#thread-msgs .cu-encontrada{outline:2px solid var(--copper);outline-offset:2px}#thread-msgs .cu-resultado-atual{outline-width:3px;box-shadow:0 0 0 5px var(--copper-dim)}
#sec-atendimento button:focus-visible,#sec-atendimento [role=button]:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
@media(min-width:761px){#sec-atendimento.cu-sem-perfil .chat-grid{grid-template-columns:minmax(250px,300px) minmax(0,1fr)}#sec-atendimento.cu-sem-perfil .chat-lateral{display:none}#sec-atendimento.cu-foco .chat-grid{grid-template-columns:minmax(0,1fr)}#sec-atendimento.cu-foco .chat-inbox,#sec-atendimento.cu-foco .chat-lateral{display:none}}
@media(min-width:761px) and (max-width:1200px){#sec-atendimento .chat-grid{grid-template-columns:260px minmax(0,1fr)}#sec-atendimento .chat-lateral{display:none}#sec-atendimento.lateral-aberta .chat-lateral{display:block;position:fixed;right:16px;top:80px;bottom:24px;width:300px;z-index:95;box-shadow:var(--sombra-3)}}
@media(max-width:760px){#cu-foco{display:none}#sec-atendimento .chat-grid{display:block;height:auto;min-height:0}#sec-atendimento .chat-inbox{height:calc(100dvh - 230px)}#sec-atendimento .thread-topo{padding:10px}#sec-atendimento .cu-acoes .btn{min-height:36px}#sec-atendimento .cu-composer-ferramentas button span{display:none}#sec-atendimento .cu-composer-ferramentas button{width:36px;height:36px;padding:0}#sec-atendimento .cu-composer-ajuda{display:none}#sec-atendimento .thread-msgs{padding:12px}#sec-atendimento .msg{max-width:88%}#sec-atendimento .cu-acoes #th-finalizar{margin-left:0}}

.cu-perfil-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border);font-size:13px}.cu-perfil-cab .mini{padding:6px}.cu-perfil-cab .ic{width:16px;height:16px}

/* Mais espaco para mensagens: atendimento ocupa a altura util (20/10/2026). */
@media(min-width:761px){
  main.conteudo:has(#sec-atendimento.ativa){height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:12px 20px}
  main.conteudo:has(#sec-atendimento.ativa) #pegasus-nav-location{display:none}
  #sec-atendimento.ativa{display:flex;flex-direction:column;flex:1;min-height:0}
  #sec-atendimento>.cab{flex:0 0 auto;align-items:center;gap:8px;margin-bottom:8px;min-height:32px}
  #sec-atendimento>.cab h2{font-size:16px;line-height:1.25;margin:0}
  #sec-atendimento>.cab .sub{display:none}
  #sec-atendimento>.cab .acoes{align-items:center;gap:8px}
  #sec-atendimento #cu-foco{height:30px;padding:0 10px;font-size:11px}
  #sec-atendimento .chat-grid{flex:1;min-height:0;height:auto;grid-template-rows:minmax(0,1fr)}
  #sec-atendimento .chat-inbox,#sec-atendimento .chat-thread,#sec-atendimento .chat-lateral{min-height:0;height:auto}
  #sec-atendimento .conv-lista,#sec-atendimento .thread-msgs{min-height:0}
}
#sec-atendimento .thread-topo{padding:10px 12px;gap:8px;flex-shrink:0}
#sec-atendimento .thread-topo>.cu-acoes{padding-top:6px;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
#sec-atendimento .cu-acoes .btn{height:30px;min-width:30px;padding:0 8px;font-size:11px}
#sec-atendimento .cu-acoes #th-info span,#sec-atendimento .cu-acoes #th-transferir span,#sec-atendimento .cu-acoes #cu-buscar span{display:none}
#sec-atendimento #th-finalizar{margin-left:auto}
#sec-atendimento #thread-input{padding:8px 10px;gap:6px;flex-shrink:0}
#sec-atendimento .cu-composer-ferramentas{padding-bottom:0;border-bottom:0;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
#sec-atendimento .cu-composer-ferramentas button{height:30px;min-width:30px;padding:0 7px;flex-shrink:0}
#sec-atendimento .cu-composer-ferramentas button span{display:none}
#sec-atendimento .cu-composer-ferramentas #chat-nota span{display:inline}
#sec-atendimento .cu-modo{display:none}
#sec-atendimento #thread-input.cu-nota .cu-modo{display:block}
#sec-atendimento .cu-composer-ajuda{display:none}
#sec-atendimento .thread-msgs{padding:14px 16px}
#sec-atendimento .cu-inbox-cab{padding:0}.cu-inbox-cab span{display:none}
#sec-atendimento .chat-inbox .topo-inbox{padding:10px;gap:6px}
#sec-atendimento .cu-filtros-rapidos{padding:7px 10px}
#sec-atendimento .cu-perfil-cab{margin-bottom:12px;padding-bottom:8px}
@media(min-width:1700px){#sec-atendimento .cu-composer-ferramentas button span{display:inline}}
@media(max-width:760px){
  #sec-atendimento>.cab .sub{display:none}
  #sec-atendimento>.cab{margin-bottom:6px}
  #sec-atendimento>.cab h2{font-size:16px}
  #sec-atendimento .chat-inbox{height:calc(100dvh - 180px)}
  #sec-atendimento .thread-topo>.cu-acoes{padding-top:6px}
  #sec-atendimento .cu-acoes .btn{min-height:32px}
}

/* Modulo Fiscal: navegacao propria por tarefa. */
.fm-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.fm-nav a{padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;border:1px solid transparent}
.fm-nav a:hover{background:var(--panel-2);color:var(--text)}.fm-nav a[aria-current=page]{background:var(--copper-dim);border-color:var(--copper);color:var(--copper)}
.fm-nav a:focus-visible,.fm-atalhos a:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.fm-atalhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}.fm-atalhos a{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);text-decoration:none}.fm-atalhos a:hover{border-color:var(--copper)}.fm-atalhos a>span:first-of-type{flex:1}.fm-atalhos b{font-size:13px;display:block}.fm-atalhos small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.fm-atalhos .ic{width:24px;height:24px;color:var(--copper)}
.fm-futuro{max-width:840px;padding:24px}.fm-futuro h3{margin-top:16px}.fm-futuro ul{padding-left:20px;color:var(--muted);font-size:13px;line-height:1.9}.fm-futuro .btn{display:inline-flex;width:auto;text-decoration:none;margin-top:12px}
@media(max-width:760px){.fm-atalhos{grid-template-columns:1fr}.fm-nav{gap:4px}.fm-nav a{padding:8px;font-size:11px}.fm-futuro{padding:18px}}

/* Hierarquia dos modulos no menu e destaque discreto de lancamento. */
.nav button.nav-grupo{gap:7px;background:var(--panel-2);border:1px solid var(--border);padding:0 8px;margin-top:5px;margin-bottom:3px}
.nav button.nav-grupo .nav-grupo-rot{font-size:12.5px;font-weight:700;letter-spacing:.01em}
.nav button.nav-grupo>.ic{color:var(--copper);stroke-width:1.8}
.nav button.nav-grupo:hover{border-color:var(--copper)}
.nav button.nav-grupo.grupo-ativo{border-color:var(--copper);background:var(--copper-dim)}
.nav button.nav-grupo .nav-novidade{flex:0 0 auto;font-size:9px;line-height:18px;font-weight:700;padding:0 5px;border-radius:5px;background:var(--copper-dim);color:var(--copper);letter-spacing:0;overflow:visible}
.nav button.item.sub{font-size:12px;font-weight:400}
.nav button.item.sub.ativa{font-weight:600}
.recolhida .nav button.nav-grupo{background:transparent;border:0;border-top:1px solid var(--border);padding:0}
.recolhida .nav button.nav-grupo .nav-novidade{display:none}
@media(max-width:760px){body.pegasus-menu-aberto .nav button.nav-grupo{min-height:40px;margin:4px 0}.nav button.nav-grupo .nav-grupo-rot{font-size:13px}}

/* Capacidade da plataforma, exclusiva da Central do dono. */
#sec-capacidade [hidden]{display:none!important}#sec-capacidade .cartao{margin-bottom:16px}#sec-capacidade .kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
.cp-campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cp-campos label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}.cp-campos input{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);padding:10px;font:inherit}
#sec-capacidade .fm-nav button[aria-pressed=true]{border-color:var(--copper);color:var(--copper);background:var(--copper-dim)}#cp-simulacao{margin-top:18px}#sec-capacidade table{width:100%;font-size:12px}#sec-capacidade th,#sec-capacidade td{text-align:left;padding:10px;border-bottom:1px solid var(--border)}.cp-tabela{overflow:auto}.cp-atencao{border-left:3px solid var(--ambar);padding:10px 12px;margin:10px 0;background:var(--ambar-dim);font-size:12px;line-height:1.6}.cp-informacao{padding:10px 0;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:900px){.cp-campos{grid-template-columns:repeat(2,minmax(0,1fr))}#sec-capacidade .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.cp-campos{grid-template-columns:1fr}}

#sec-seguranca [hidden]{display:none!important}#sec-seguranca .cartao{margin-bottom:16px}#sec-seguranca>.aviso-fixo{margin-bottom:16px}#sec-seguranca .kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}#sec-seguranca table{width:100%;font-size:12px}#sec-seguranca th,#sec-seguranca td{padding:10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}@media(max-width:900px){#sec-seguranca .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Observabilidade: indicação por texto + cor, sem piscar continuamente. */
.mo-barra{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 14px}.mo-barra .btn{width:auto;font-size:12px}.mo-barra label{margin-left:auto;font-size:12px;color:var(--muted)}.mo-barra select{background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px;margin-left:8px}
.mo-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.mo-status:before,.mo-led{content:"";display:inline-block;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--mo-cor,var(--muted));box-shadow:0 0 0 4px color-mix(in srgb,var(--mo-cor,var(--muted)) 14%,transparent),0 0 12px color-mix(in srgb,var(--mo-cor,var(--muted)) 28%,transparent)}
.normal{--mo-cor:var(--sage)}.atencao{--mo-cor:var(--ambar)}.critico{--mo-cor:var(--danger)}.neutro{--mo-cor:var(--muted)}
.mo-titulo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 8px}.mo-titulo h3{margin:0}.mo-titulo a{color:var(--copper);font-size:12px}
.mo-monitores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mo-medidor{padding:18px!important;min-width:0;border-top:3px solid var(--mo-cor)!important}.mo-medidor-topo{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600}.mo-medidor strong{display:block;font-size:30px;letter-spacing:-1px;line-height:1.3;margin:18px 0 12px;color:var(--text)}.mo-medidor strong small{font-size:15px;margin-left:3px}.mo-medidor p{font-size:11px;color:var(--muted);line-height:1.5;margin:8px 0 0}.mo-trilho{height:6px;background:var(--panel-2);border-radius:5px;overflow:hidden}.mo-trilho span{display:block;height:100%;background:var(--mo-cor);border-radius:5px;transition:width .3s ease}
.mo-graficos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mo-grafico{min-width:0;margin:0!important;padding:18px!important}.mo-grafico h3{font-size:13px;margin:0 0 6px}.mo-grafico-valor{font-size:22px;font-weight:700;margin:8px 0}.mo-grafico-valor small{font-size:11px;color:var(--muted);font-weight:400}.mo-grafico svg{width:100%;display:block;overflow:visible}.mo-grafico svg text{font-size:11px;fill:var(--muted);font-family:inherit}.mo-grade{stroke:var(--border);stroke-width:1}.mo-linha{fill:none;stroke:var(--copper);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.mo-ponto{fill:var(--copper)}.mo-limite{stroke:var(--ambar);stroke-dasharray:5 5;opacity:.65}.mo-vazio{min-height:210px;display:grid;place-items:center;color:var(--muted);font-size:12px;border:1px dashed var(--border);border-radius:10px;margin-top:18px;background:var(--panel-2)}
.mo-alerta{display:flex;align-items:center;gap:14px;text-decoration:none!important;color:var(--text)!important;border:1px solid var(--border);border-left:3px solid var(--mo-cor);background:var(--panel);border-radius:10px;padding:14px 16px;margin:8px 0;transition:border-color .15s,box-shadow .15s}.mo-alerta>span:nth-child(2){flex:1}.mo-alerta b{display:block;font-size:12px}.mo-alerta small{display:block;color:var(--muted);font-size:11px;line-height:1.6;margin-top:4px}.mo-alerta:hover{border-color:var(--mo-cor);box-shadow:0 3px 12px color-mix(in srgb,var(--mo-cor) 12%,transparent)}.mo-alerta:focus-visible{outline:2px solid var(--copper);outline-offset:3px}.mo-alerta.critico{background:var(--danger-dim)}.mo-prioridades{margin-bottom:18px}
.mo-plano{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mo-plano article{display:flex;gap:12px;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}.mo-etapa{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;background:var(--copper-dim);color:var(--copper);border-radius:8px;font-weight:700}.mo-plano h4{margin:0 0 6px;font-size:13px}.mo-plano p{font-size:12px;line-height:1.6;color:var(--muted);margin:8px 0 0}.mo-etiqueta{font-size:10px;color:var(--ambar);font-weight:600}
@media(max-width:1100px){.mo-monitores{grid-template-columns:repeat(2,minmax(0,1fr))}.mo-graficos{grid-template-columns:1fr}}
@media(max-width:600px){.mo-plano{grid-template-columns:1fr}.mo-barra label{margin-left:0}.mo-titulo{align-items:flex-start;flex-direction:column}.mo-medidor strong{font-size:26px}.mo-medidor{padding:13px!important}}
@media(prefers-reduced-motion:reduce){.mo-trilho span,.mo-alerta{transition:none}}

/* Aparência: controles discretos abaixo de Configurações. */
.nav .nav-tema{display:flex;align-items:center;gap:2px;align-self:flex-start;padding:0;margin:0 12px 6px 28px;background:transparent;border:0;flex-shrink:0}
.nav .nav-tema button{display:flex;align-items:center;justify-content:center;gap:4px;flex:none;min-width:0;height:24px;padding:0 7px;border:0;border-radius:4px;background:transparent;color:var(--muted);font:inherit;font-size:10.5px;font-weight:400;cursor:pointer}
.nav .nav-tema button[aria-pressed="true"]{background:var(--panel-2);color:var(--text);box-shadow:none}
.nav .nav-tema .ic{width:11px;height:11px}.nav .nav-tema button:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.recolhida .nav .nav-tema{margin:0 4px 6px;padding:0;gap:2px}.recolhida .nav .nav-tema button{padding:0 6px}.recolhida .nav .nav-tema span{display:none}

/* Abas da lista cabem inclusive com contagens e Lixeira visível. */
#sec-atendimento .chat-abas{width:100%;box-sizing:border-box;flex-wrap:nowrap;gap:2px}#sec-atendimento .chat-abas button{flex:1 1 0;min-width:0;padding:0 3px;font-size:10px;gap:3px}#sec-atendimento .chat-abas button .n{flex-shrink:0;padding:0 3px;min-width:14px}