/* 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}
#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)}
.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}
  }
}