:root{
    --roxo:#8e248b;
    --roxo-claro:#a63aa4;
    --roxo-esc:#6d1a6c;
    --roxo-50:#faf5f9;
    --roxo-100:#eef0f4;
    --azul:#009fe3;
    --indigo:#5b4e9c;
    --grad-marca:linear-gradient(180deg,#5b4e9c 0%,#8e248b 100%);
    --bg:#f6f7f9;
    --surface:#ffffff;
    --txt:#1f2430;
    --txt-sub:#6b7280;
    --linha:#e6e8ec;
    --sombra:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
    --sombra-2:0 8px 24px rgba(16,24,40,.10);
    --raio:12px;
    --gutter:24px;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--txt);
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

h2{ color:var(--txt); font-weight:700; letter-spacing:-.3px; }
.he{ display:inline-block; vertical-align:middle; margin-right:.3em; }

header{
    background:var(--roxo-esc);
    color:white;
    padding:20px;
    text-align:center;
}

.menu{
    background:var(--roxo-esc);
    padding:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.menu a{
    color:white;
    text-decoration:none;
    padding:10px 15px;
    border-radius:8px;
    transition:.2s;
}

.menu a:hover{ background:rgba(255,255,255,.18); }
.menu a.ativo{ background:#fff; color:var(--roxo-esc); font-weight:600; }

.dashboard{
    display:flex;
    gap:18px;
    padding:20px var(--gutter);
    flex-wrap:wrap;
}

.card{
    flex:1;
    min-width:200px;
    background:var(--surface);
    padding:22px;
    border-radius:var(--raio);
    box-shadow:var(--sombra);
    border:1px solid var(--linha);
    position:relative;
    overflow:hidden;
    transition:transform .18s, box-shadow .18s;
}
.card:hover{ box-shadow:var(--sombra-2); border-color:#dcdfe5; }
.card h3{
    margin:0; font-size:12px; font-weight:600; color:var(--txt-sub);
    text-transform:uppercase; letter-spacing:.4px;
}
.card span{
    font-size:28px;
    font-weight:700;
    color:var(--txt);
    display:block;
    margin-top:8px;
    letter-spacing:-.5px;
}

.formulario{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:10px;
    padding:20px var(--gutter);
}

input,select,textarea{
    font-family:inherit;
    font-size:14px;
    color:var(--txt);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea{
    padding:10px 12px;
    border:1px solid var(--linha);
    border-radius:9px;
    background:#fff;
    transition:border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
select:focus, textarea:focus{
    outline:none;
    border-color:var(--roxo);
    box-shadow:0 0 0 3px rgba(142,37,141,.14);
}
::placeholder{ color:#9aa0ab; }

button{
    background:var(--roxo);
    color:white;
    border:none;
    padding:10px 16px;
    cursor:pointer;
    border-radius:9px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    box-shadow:none;
    transition:background .15s, opacity .15s;
}
button:hover{ background:var(--roxo-esc); }
button:active{ opacity:.9; }
button:disabled{ opacity:.45; cursor:not-allowed; }

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--surface);
    border:1px solid var(--linha);
    border-radius:var(--raio);
    overflow:hidden;
    box-shadow:var(--sombra);
}

th{
    background:#f8f9fb;
    color:var(--txt-sub);
    font-weight:600;
    text-transform:uppercase;
    font-size:11.5px;
    letter-spacing:.4px;
}

th,td{
    padding:11px 14px;
    border-bottom:1px solid var(--linha);
    text-align:left;
}
th{ border-bottom:1px solid #dfe2e8; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--roxo-50); }

@media(max-width:768px){
    table{
        display:block;
        overflow-x:auto;
    }
}

main{ padding:6px 0 26px; }
main > h2,
main > h3,
main > .sub,
main > p,
main > .row-acts{
    padding-left:var(--gutter);
    padding-right:var(--gutter);
}

.instancias{
    padding:20px var(--gutter);
}

.nova-instancia{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.instancia-card{
    background:var(--surface);
    padding:20px;
    margin-bottom:15px;
    border-radius:var(--raio);
    box-shadow:var(--sombra);
    border:1px solid var(--linha);
}

.instancia-status{
    margin:10px 0;
    font-weight:bold;
    color:#d64545;
}
.instancia-status.on{ color:#1a9f4a; }
.instancia-status.mid{ color:#e69500; }

.botoes{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.qrcode{
    width:200px;
    height:200px;
    border:2px dashed #cbb6d8;
    border-radius:12px;
    background:#faf7fc;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:15px;
}
.qrcode img{ width:200px; height:200px; border-radius:8px; }

.importacao{ padding:0 var(--gutter) 20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tabela{ padding:0 var(--gutter) 20px; }
.acoes-topo{ padding:0 var(--gutter) 10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn-2{ background:var(--roxo-100); color:var(--txt); box-shadow:none; border:1px solid var(--linha); }
.btn-2:hover{ background:#e6e8ee; }
.btn-ok{ background:#16a34a; }
.btn-ok:hover{ background:#15803d; }
.btn-del{ background:#dc2626; }
.btn-del:hover{ background:#b91c1c; }
.btn-sm{ padding:8px 12px; font-size:13px; }
.msg{ margin:10px var(--gutter); padding:11px 14px; border-radius:10px; font-size:14px; display:none; }
.msg.err{ background:#fdecea; color:#b3261e; border:1px solid #f5c2c0; }
.msg.ok{ background:#e7f6ec; color:#1a7f37; border:1px solid #b7e0c4; }
.msg.info{ background:#eef4ff; color:#1E5F9E; border:1px solid #cfe0fb; }
.spin{ display:inline-block; width:15px; height:15px; border:2px solid #e2d6ec; border-top-color:var(--roxo);
    border-radius:50%; animation:g .7s linear infinite; vertical-align:-3px; }
@keyframes g{ to{ transform:rotate(360deg); } }
.status-topo{ float:right; font-size:13px; font-weight:normal; }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 3px 0 10px; }
.dot.on{ background:#31c451; } .dot.off{ background:#ff6b6b; }
.badge{ background:var(--roxo-100); color:var(--txt); border:1px solid var(--linha); border-radius:20px;
    padding:3px 11px; font-size:13px; font-weight:600; }
.selo{ background:#ef4444; color:#fff; border-radius:20px; padding:0 7px; font-size:12px; margin-left:6px; }
.pill{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:bold; white-space:nowrap; }
.pill.on{ background:#e7f6ec; color:#1a7f37; }
.pill.off{ background:#fdecea; color:#b3261e; }
.pill.mid{ background:#fff4e5; color:#e69500; }
.msg a, .sub a, .hint a, main p a, td a{ color:var(--azul); font-weight:600; }
.hint{ color:var(--txt-sub); text-align:center; padding:18px; }

.atendentes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:15px; padding:0 var(--gutter) 20px; }
.atendente{ background:var(--surface); border-radius:var(--raio); box-shadow:var(--sombra); border:1px solid var(--linha); padding:18px; }
.atendente h3{ margin:0 0 4px; color:var(--txt); }
.atendente .cab{ display:flex; justify-content:space-between; align-items:center; }
.atendente .criar{ display:flex; gap:8px; margin:10px 0; }
.atendente .criar input{ flex:1; }
.inst-item{ border:1px solid var(--linha); border-radius:12px; padding:12px; margin-top:10px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.inst-item:hover{ border-color:#d9c7e6; box-shadow:0 3px 12px rgba(80,20,90,.07); }
.inst-item .top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.inst-item .nome{ font-weight:bold; }

.painel-disparo{ background:var(--surface); border-radius:var(--raio); box-shadow:var(--sombra); border:1px solid var(--linha); margin:0 var(--gutter) 20px; padding:20px; }
.painel-disparo h2{ margin:0 0 6px; color:var(--txt); font-size:18px; }
.painel-disparo label{ display:block; font-size:13px; color:var(--txt-sub); margin:12px 0 4px; font-weight:bold; }
.painel-disparo textarea, .painel-disparo select{ width:100%; }
.prog{ height:10px; background:#ece5f3; border-radius:6px; overflow:hidden; margin:12px 0; }
.prog i{ display:block; height:100%; width:0; background:var(--roxo); transition:width .2s; }
.log-disparo{ max-height:240px; overflow:auto; margin-top:10px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px;
    font-size:13px; cursor:pointer; border:1.5px solid var(--linha); background:#fff; color:var(--txt-sub);
    user-select:none; transition:.15s; }
.chip b{ font-weight:bold; }
.chip.on{ border-color:transparent; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.chip.prev.on{ background:var(--azul); }
.chip.inad.on{ background:var(--roxo); }
.chip.off{ opacity:.55; }
.chip:hover{ filter:brightness(1.02); box-shadow:0 2px 8px rgba(80,20,90,.15); }

.colunas{ display:flex; flex-direction:column; gap:15px; padding:0 var(--gutter) 20px; }
.coluna{ width:100%; background:var(--surface); border-radius:var(--raio); box-shadow:var(--sombra); border:1px solid var(--linha); padding:16px; }
.coluna h3{ margin:0 0 2px; color:var(--txt); font-size:16px; }
.coluna .sub{ color:var(--txt-sub); font-size:12px; margin-bottom:10px; }
.coluna .lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }
.contato{ border:1px solid var(--linha); border-radius:10px; padding:10px; cursor:pointer; transition:.15s; }
.contato:hover{ background:var(--roxo-50); border-color:var(--roxo-claro); box-shadow:0 3px 10px rgba(80,20,90,.08); }
.contato .nome{ font-weight:bold; display:flex; justify-content:space-between; }
.contato .tel{ color:var(--txt-sub); font-size:12px; } .contato .prev{ color:#666; font-size:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.overlay{ position:fixed; inset:0; background:rgba(17,24,39,.5); display:none; align-items:center;
    justify-content:center; z-index:50; padding:15px; backdrop-filter:blur(3px); }
.overlay.show{ display:flex; }
.modal{ background:white; border-radius:14px; padding:22px; width:100%; max-width:520px; max-height:90vh; overflow:auto; box-shadow:0 24px 60px rgba(16,24,40,.24); }
.modal .x{ float:right; background:none; color:#888; font-size:20px; padding:0 6px; box-shadow:none; }
.modal .x:hover{ color:#333; filter:none; transform:none; box-shadow:none; }
.modal h3{ margin:0 0 4px; color:var(--txt); }
.chat{ background:var(--bg); border:1px solid var(--linha); border-radius:10px; padding:10px; height:320px;
    overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.b{ display:flex; } .b.left{ justify-content:flex-start; } .b.right{ justify-content:flex-end; }
.bub{ padding:7px 10px; border-radius:12px; max-width:80%; font-size:14px; }
.bub.cli{ background:#fff; border:1px solid var(--linha); } .bub.voce{ background:#dcf8c6; }
.bub .h{ font-size:11px; color:#999; text-align:right; margin-top:2px; }

body.layout-lateral{ margin-left:230px; }
.layout-lateral .sidebar-nav{
    position:fixed; top:0; left:0; bottom:0; width:230px; overflow-y:auto; z-index:40;
    background:var(--roxo); color:#fff;
    border-right:1px solid rgba(0,0,0,.06); box-shadow:none;
}
.layout-lateral .sidebar-nav .logo{ padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:6px; }
.layout-lateral .sidebar-nav .logo h2{ margin:0; font-size:22px; color:#fff; }
.layout-lateral .sidebar-nav .logo .marca{ background:#fff; border-radius:12px; padding:11px 13px; box-shadow:0 4px 14px rgba(0,0,0,.16); }
.layout-lateral .sidebar-nav .logo .marca img{ display:block; width:100%; height:auto; }
.layout-lateral .sidebar-nav .logo .sub{ font-size:12px; opacity:.8; margin-top:8px; text-align:center; letter-spacing:.5px; }
.logo-topo{ height:30px; vertical-align:middle; background:#fff; border-radius:8px; padding:4px 8px; margin-right:6px; }
.layout-lateral .menu-lat{ display:flex; flex-direction:column; padding:8px 12px 20px; gap:3px; }
.layout-lateral .menu-lat a{
    color:rgba(255,255,255,.92); text-decoration:none; padding:11px 14px; border-radius:10px;
    display:flex; align-items:center; gap:11px; font-size:14px; transition:.18s;
}
.layout-lateral .menu-lat a:hover{ background:rgba(255,255,255,.16); }
.layout-lateral .menu-lat a.ativo{ background:#fff; color:var(--roxo-esc); font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.layout-lateral .menu-lat a .ic{ width:20px; text-align:center; font-size:16px; }
.layout-lateral .menu-lat a .rot{ flex:1; }
.layout-lateral .menu-lat details.menu-grupo{ }
.layout-lateral .menu-lat details.menu-grupo > summary{
    list-style:none; cursor:pointer; color:rgba(255,255,255,.92);
    padding:11px 14px; border-radius:10px; display:flex; align-items:center; gap:11px;
    font-size:14px; transition:.18s;
}
.layout-lateral .menu-lat details.menu-grupo > summary::-webkit-details-marker{ display:none; }
.layout-lateral .menu-lat details.menu-grupo > summary:hover{ background:rgba(255,255,255,.16); }
.layout-lateral .menu-lat details.menu-grupo > summary .ic{ width:20px; text-align:center; font-size:16px; }
.layout-lateral .menu-lat details.menu-grupo > summary .rot{ flex:1; }
.layout-lateral .menu-lat details.menu-grupo > summary .seta{ font-size:12px; opacity:.8; transition:transform .2s; }
.layout-lateral .menu-lat details.menu-grupo[open] > summary .seta{ transform:rotate(180deg); }
.layout-lateral .menu-lat details.menu-grupo .menu-sub{ display:flex; flex-direction:column; gap:3px; margin:3px 0 3px 14px; padding-left:8px; border-left:2px solid rgba(255,255,255,.18); }
.layout-lateral .menu-lat details.menu-grupo .menu-sub a{ padding:9px 12px; font-size:13.5px; }
.layout-lateral .topbar{
    background:rgba(255,255,255,.92); color:#444; border-bottom:1px solid var(--linha);
    box-shadow:0 6px 18px rgba(80,20,90,.05); padding:16px var(--gutter);
    display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:30;
    text-align:left; backdrop-filter:blur(6px);
}
.layout-lateral .topbar h1{ margin:0; font-size:22px; color:var(--txt); font-weight:800; letter-spacing:-.2px; }
.layout-lateral .topbar .status-topo{ float:none; }
@media(max-width:820px){
    body.layout-lateral{ margin-left:0; }
    .layout-lateral .sidebar-nav{ position:static; width:auto; bottom:auto; }
    .layout-lateral .menu-lat{ flex-direction:row; flex-wrap:wrap; }
    .layout-lateral .topbar{ position:static; }
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#d6c7e3; border-radius:10px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#bf9fd6; }
::-webkit-scrollbar-track{ background:transparent; }

.creditos{ position:fixed; left:16px; bottom:16px; z-index:60; }
.creditos-i{
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    background:#fff; color:var(--roxo); font:italic 700 16px Georgia,"Times New Roman",serif;
    border:1px solid rgba(0,0,0,.06); box-shadow:0 3px 10px rgba(0,0,0,.22);
    cursor:default; user-select:none; opacity:.9; transition:opacity .2s, transform .2s;
}
.creditos:hover .creditos-i{ opacity:1; transform:translateY(-1px); }
.creditos-pop{
    position:absolute; left:0; bottom:calc(100% + 10px); width:214px;
    background:#fff; color:#444; border:1px solid var(--linha); border-radius:12px; padding:12px 14px;
    box-shadow:0 12px 30px rgba(0,0,0,.20); text-align:center; font-size:12px; line-height:1.55;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.creditos-pop .t{ display:block; opacity:.8; }
.creditos-pop b{ display:block; margin-top:3px; color:var(--roxo); letter-spacing:.2px; }
.creditos-pop::before{ content:""; position:absolute; left:0; right:0; bottom:-12px; height:14px; }
.creditos-pop::after{
    content:""; position:absolute; left:10px; bottom:-6px; width:11px; height:11px;
    background:#fff; border-right:1px solid var(--linha); border-bottom:1px solid var(--linha); transform:rotate(45deg);
}
.creditos:hover .creditos-pop,
.creditos-i:focus + .creditos-pop,
.creditos-pop:hover{ opacity:1; visibility:visible; transform:translateY(0); }

@media (prefers-reduced-motion: no-preference){
  @keyframes tf-fadeIn  { from{ opacity:0; } to{ opacity:1; } }
  @keyframes tf-fadeUp  { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  @keyframes tf-slideIn { from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:none; } }
  @keyframes tf-pop     { from{ opacity:0; transform:scale(.96) translateY(8px); } to{ opacity:1; transform:none; } }

  .dashboard .card{ animation:tf-fadeUp .5s cubic-bezier(.2,.7,.2,1) backwards; }
  .dashboard .card:nth-child(2){ animation-delay:.06s; }
  .dashboard .card:nth-child(3){ animation-delay:.12s; }
  .dashboard .card:nth-child(4){ animation-delay:.18s; }
  .dashboard .card:nth-child(5){ animation-delay:.24s; }
  .dashboard .card:nth-child(6){ animation-delay:.30s; }

  .painel-disparo, .tabela, .inst-item, .contato{ animation:tf-fadeUp .5s cubic-bezier(.2,.7,.2,1) backwards; }

  .layout-lateral .topbar{ animation:tf-fadeIn .5s ease backwards; }

  .layout-lateral .menu-lat a{ animation:tf-slideIn .4s ease backwards; }
  .layout-lateral .menu-lat a:nth-child(1){ animation-delay:.03s; }
  .layout-lateral .menu-lat a:nth-child(2){ animation-delay:.06s; }
  .layout-lateral .menu-lat a:nth-child(3){ animation-delay:.09s; }
  .layout-lateral .menu-lat a:nth-child(4){ animation-delay:.12s; }
  .layout-lateral .menu-lat a:nth-child(5){ animation-delay:.15s; }
  .layout-lateral .menu-lat a:nth-child(6){ animation-delay:.18s; }
  .layout-lateral .menu-lat a:nth-child(7){ animation-delay:.21s; }
  .layout-lateral .menu-lat a:nth-child(8){ animation-delay:.24s; }
  .layout-lateral .menu-lat a:nth-child(9){ animation-delay:.27s; }
  .layout-lateral .menu-lat a:nth-child(10){ animation-delay:.30s; }
  .layout-lateral .menu-lat a:nth-child(11){ animation-delay:.33s; }
  .layout-lateral .menu-lat a:nth-child(12){ animation-delay:.36s; }
  .layout-lateral .menu-lat a:nth-child(13){ animation-delay:.39s; }
  .layout-lateral .menu-lat a:nth-child(n+14){ animation-delay:.42s; }
  .layout-lateral .menu-lat a:hover{ transform:translateX(3px); }

  .overlay.show{ animation:tf-fadeIn .2s ease; }
  .overlay.show .modal{ animation:tf-pop .28s cubic-bezier(.2,.8,.25,1) backwards; }

  button:active{ transform:translateY(1px) scale(.99); }
}

/* ==========================================================================
   Console WAHA
   Tela cheia própria: navegação escura fixa à esquerda, topo com o estado do
   transporte e conteúdo denso. Vale só nas páginas com body.wk (hoje o
   waha.html), então nada aqui muda as telas antigas.
   ========================================================================== */

body.wk{
  --wk-nav:#161922;
  --wk-nav-on:#252a38;
  --wk-nav-txt:#a8aec0;
  --wk-nav-fraco:#7c8398;
  --wk-fundo:#f4f5f7;
  --wk-linha:#e6e8ec;
  --wk-linha-fraca:#f4f5f7;
  --wk-faixa:#f8f9fb;
  --wk-txt:#1f2430;
  --wk-txt-sub:#6b7280;
  --wk-txt-fraco:#9aa0ab;
  --wk-verde:#1a7f37;
  --wk-verde-bg:#e7f6ec;
  --wk-ambar:#8a5a00;
  --wk-ambar-bg:#fff4e5;
  --wk-vermelho:#b3261e;
  --wk-vermelho-bg:#fdecea;
  --wk-larg-nav:208px;
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--wk-fundo);
  color:var(--wk-txt);
  font-size:14px;
}

.wk-mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

/* --- navegação lateral --- */

.wk-nav{
  position:fixed; top:0; left:0; bottom:0; width:var(--wk-larg-nav);
  background:var(--wk-nav); display:flex; flex-direction:column;
  padding:16px 0; z-index:60;
}
.wk-nav .wk-marca{ padding:0 16px 16px; display:flex; flex-direction:column; line-height:1.15; }
.wk-nav .wk-marca b{ font-size:13px; font-weight:600; color:#fff; }
.wk-nav .wk-marca span{ font-size:11px; color:var(--wk-nav-fraco); }

.wk-abas{ display:flex; flex-direction:column; gap:1px; padding:0 8px; }
.wk-aba{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px;
  font-size:12.5px; color:var(--wk-nav-txt); background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:left; width:100%; box-shadow:none;
}
.wk-aba:hover{ background:#1e2230; color:#dfe3ec; box-shadow:none; filter:none; transform:none; }
.wk-aba.on{ background:var(--wk-nav-on); color:#fff; font-weight:600; }
.wk-aba svg{ flex-shrink:0; }

.wk-rodape-nav{
  margin-top:auto; padding:14px 16px 0; border-top:1px solid #262b38;
  display:flex; flex-direction:column; gap:7px;
}
.wk-rodape-nav .wk-linha-frota{ display:flex; align-items:center; justify-content:space-between; }
.wk-rodape-nav .wk-cap{ font-size:11px; color:var(--wk-nav-fraco); text-transform:uppercase; letter-spacing:.06em; }
.wk-rodape-nav .wk-aptos{ font-size:12px; font-weight:500; color:#31c451; }
.wk-barra{ display:flex; gap:3px; }
.wk-barra i{ height:4px; border-radius:2px; display:block; }
.wk-barra .v{ background:#31c451; } .wk-barra .a{ background:#e69500; } .wk-barra .r{ background:#dc2626; }
.wk-rodape-nav .wk-tetos{ font-size:11px; color:var(--wk-nav-fraco); }
.wk-voltar{
  display:flex; align-items:center; gap:7px; margin-top:4px; padding:6px 0;
  font-size:11.5px; color:var(--wk-nav-fraco); text-decoration:none;
}
.wk-voltar:hover{ color:#dfe3ec; }

/* --- moldura --- */

body.wk{ margin:0; }
.wk-main{ margin-left:var(--wk-larg-nav); display:flex; flex-direction:column; min-height:100vh; min-width:0; }

.wk-top{
  position:sticky; top:0; z-index:40; height:52px; flex-shrink:0;
  background:#fff; border-bottom:1px solid var(--wk-linha);
  display:flex; align-items:center; gap:12px; padding:0 20px;
  /* o seletor de elemento `header` do painel antigo pinta texto de branco */
  color:var(--wk-txt); text-align:left;
}
.wk-top h1{ margin:0; font-size:15px; font-weight:600; }
.wk-top .wk-dir{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.wk-top .wk-motor{ font-size:12px; color:var(--wk-txt-sub); }

.wk-conteudo{ flex:1; padding:14px 18px 28px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.wk-conteudo .msg{ margin:0; }
#waha-conteudo{ flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0; }

/* Conteúdo em duas colunas: trabalho à esquerda, painel de decisão à direita. */
.wk-2col{ display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:0; align-items:stretch; flex:1; }
.wk-2col > .wk-col{ display:flex; flex-direction:column; gap:12px; min-width:0; padding-right:16px; }
.wk-2col.so-um{ grid-template-columns:minmax(0,1fr); }
.wk-2col.so-um > .wk-col{ padding-right:0; }
.wk-side{
  background:#fff; border-left:1px solid var(--wk-linha); padding:0 0 0 16px;
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
@media (max-width:1180px){
  .wk-2col{ grid-template-columns:minmax(0,1fr); }
  .wk-2col > .wk-col{ padding-right:0; }
  .wk-side{ border-left:0; border-top:1px solid var(--wk-linha); padding:14px 0 0; }
}

/* --- peças --- */

.wk-cx{ background:#fff; border:1px solid var(--wk-linha); border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden; }
.wk-cx-cab{ display:flex; align-items:center; gap:8px; padding:10px 13px;
  border-bottom:1px solid var(--wk-linha); flex-wrap:wrap; }
.wk-cx-corpo{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; }

.wk-rot{ font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--wk-txt-sub); }
.wk-nota{ font-size:11.5px; color:var(--wk-txt-fraco); line-height:1.5; }
.wk-sub{ font-size:12.5px; color:var(--wk-txt-sub); }
.wk-dir-auto{ margin-left:auto; }
.wk-fila{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

body.wk button{ box-shadow:none; }
.wk-btn{
  border:1px solid var(--wk-linha); background:#eef0f4; color:var(--wk-txt);
  border-radius:8px; padding:6px 11px; font-size:12.5px; font-weight:600;
  font-family:inherit; cursor:pointer; line-height:1.35;
}
.wk-btn:hover{ background:#e6e8ee; filter:none; transform:none; box-shadow:none; }
.wk-btn:disabled{ opacity:.5; cursor:not-allowed; }
.wk-btn.sm{ padding:4px 9px; font-size:12px; border-radius:7px; }
.wk-btn.pr{ background:var(--roxo); border-color:var(--roxo); color:#fff; }
.wk-btn.pr:hover{ background:#7d1f7b; }
.wk-btn.ok{ background:var(--wk-verde-bg); border-color:#cfe8d6; color:var(--wk-verde); }
.wk-btn.dg{ color:var(--wk-vermelho); }
.wk-btn.dg:hover{ background:var(--wk-vermelho-bg); border-color:#f3cdc9; }

.wk-selo{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px;
  font-weight:700; white-space:nowrap; background:#f2f4f7; color:#4b5563; }
.wk-selo.ok{ background:var(--wk-verde-bg); color:var(--wk-verde); }
.wk-selo.meio{ background:var(--wk-ambar-bg); color:var(--wk-ambar); }
.wk-selo.ruim{ background:var(--wk-vermelho-bg); color:var(--wk-vermelho); }
.wk-selo.roxo{ background:var(--roxo-50); color:var(--roxo); }

.wk-estado{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:20px; font-size:12px; font-weight:600; background:var(--wk-verde-bg); color:var(--wk-verde); }
.wk-estado i{ width:7px; height:7px; border-radius:50%; background:#16a34a; display:inline-block; }
.wk-estado.ruim{ background:var(--wk-vermelho-bg); color:var(--wk-vermelho); }
.wk-estado.ruim i{ background:#dc2626; }
.wk-estado.meio{ background:var(--wk-ambar-bg); color:var(--wk-ambar); }
.wk-estado.meio i{ background:#e69500; }

/* chip selecionável (números da frota) */
.wk-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.wk-chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:8px;
  font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--wk-linha);
  background:#f4f5f7; color:var(--wk-txt-sub); font-family:inherit;
}
.wk-chip:hover{ border-color:#d9dce3; }
.wk-chip .det{ font-size:11px; opacity:.85; font-weight:600; }
.wk-chip.on{ background:var(--roxo-50); color:var(--roxo); border-color:#d9a8d7; }
.wk-chip.sel{ background:var(--roxo); color:#fff; border-color:var(--roxo); }
.wk-chip.fora{ background:var(--wk-vermelho-bg); color:var(--wk-vermelho);
  border-color:#f3cdc9; cursor:not-allowed; opacity:.85; }

/* tabela densa */
.wk-tab{ width:100%; border-collapse:collapse; }
.wk-tab th{
  text-align:left; padding:6px 13px; background:var(--wk-faixa);
  border-bottom:1px solid var(--wk-linha); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--wk-txt-sub); white-space:nowrap;
}
.wk-tab td{ padding:8px 13px; border-bottom:1px solid var(--wk-linha-fraca); font-size:12.5px; }
.wk-tab tr:last-child td{ border-bottom:0; }
.wk-tab tbody tr.clicavel{ cursor:pointer; }
.wk-tab tbody tr:hover{ background:#fbfafc; }
.wk-tab tr.on td{ background:var(--roxo-50); }
.wk-tab .num{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums; }
.wk-rolagem{ overflow:auto; }

/* métricas do topo de uma aba */
.wk-metricas{ display:flex; gap:9px; flex-wrap:wrap; }
.wk-metrica{ flex:1; min-width:130px; background:#fff; border:1px solid var(--wk-linha);
  border-radius:10px; padding:10px 12px; }
.wk-metrica b{ display:block; font-size:21px; font-weight:600; margin-top:3px;
  letter-spacing:-.02em; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums; }

/* cartões de número */
.wk-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:11px; }
.wk-card{ background:#fff; border:1px solid var(--wk-linha); border-radius:10px;
  padding:12px 13px; display:flex; flex-direction:column; gap:8px; }
.wk-card.alerta{ border-color:#f0d7d4; }
.wk-card .wk-nome{ font-size:13.5px; font-weight:600; }
.wk-card .wk-saude{ margin-left:auto; font-size:13px; font-weight:600; }

/* campos */
body.wk input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
body.wk select, body.wk textarea{
  padding:7px 10px; border:1px solid var(--wk-linha); border-radius:8px; background:#fcfcfd;
  font-size:12.5px; font-family:inherit; color:var(--wk-txt);
}
body.wk textarea{ line-height:1.5; }
body.wk label{ font-size:11.5px; color:var(--wk-txt-sub); font-weight:600; }
.wk-campo{ display:flex; flex-direction:column; gap:4px; }

/* interruptor */
.wk-toggle{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px;
  color:var(--wk-txt-sub); user-select:none; }
.wk-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.wk-toggle .trilho{ width:30px; height:17px; border-radius:20px; background:#d8dbe2;
  position:relative; transition:background .15s; flex-shrink:0; }
.wk-toggle .trilho::after{ content:""; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:#fff; transition:left .15s; }
.wk-toggle input:checked + .trilho{ background:var(--roxo); }
.wk-toggle input:checked + .trilho::after{ left:15px; }

/* etiqueta de opção ligável (defesas anti-ban) */
.wk-opcao{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px;
  font-size:11.5px; font-weight:600; cursor:pointer; border:1px solid var(--wk-linha);
  background:#f4f5f7; color:var(--wk-txt-fraco); user-select:none; }
.wk-opcao input{ position:absolute; opacity:0; width:0; height:0; }
.wk-opcao.on{ background:var(--roxo-50); color:var(--roxo); border-color:#ecd9eb; }
.wk-opcao.aviso.on{ background:var(--wk-ambar-bg); color:var(--wk-ambar); border-color:#f5d9a8; }

/* avisos em bloco */
.wk-aviso{ border-radius:8px; padding:9px 11px; font-size:12px; line-height:1.5;
  background:var(--wk-ambar-bg); border:1px solid #f5d9a8; color:var(--wk-ambar); }
.wk-aviso.ruim{ background:var(--wk-vermelho-bg); border-color:#f3cdc9; color:var(--wk-vermelho); }
.wk-aviso.ok{ background:var(--wk-verde-bg); border-color:#cfe8d6; color:var(--wk-verde); }

.wk-vazio{ color:var(--wk-txt-fraco); font-size:12.5px; padding:14px; }

/* barra de intervalo */
.wk-intervalo{ display:flex; flex-direction:column; gap:6px; }
.wk-intervalo .topo{ display:flex; align-items:baseline; justify-content:space-between; }
.wk-intervalo .valor{ font-size:15px; font-weight:600; }
body.wk input[type=range]{ width:100%; accent-color:var(--roxo); }
.wk-intervalo .extremos{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--wk-txt-fraco); }

/* resumo de estimativa */
.wk-resumo{ background:#fcfcfd; border:1px solid var(--wk-linha); border-radius:8px;
  padding:10px 11px; display:flex; flex-direction:column; gap:5px; font-size:12px; }
.wk-resumo .l{ display:flex; justify-content:space-between; gap:10px; }
.wk-resumo .l span:first-child{ color:var(--wk-txt-sub); }
.wk-resumo .nota{ font-size:11px; color:var(--wk-txt-fraco); line-height:1.45;
  border-top:1px solid var(--wk-linha); padding-top:6px; margin-top:2px; }

/* conversa */
.wk-conversa{ display:grid; grid-template-columns:196px 312px minmax(0,1fr); flex:1; min-height:0;
  background:#fff; border:1px solid var(--wk-linha); border-radius:10px; overflow:hidden; }
.wk-filtros{ border-right:1px solid var(--wk-linha); background:#fbfbfc; padding:12px 10px;
  display:flex; flex-direction:column; gap:5px; overflow:auto; }
.wk-filtro{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:7px;
  font-size:12px; cursor:pointer; color:var(--wk-txt-sub); background:none; border:0;
  font-family:inherit; text-align:left; width:100%; }
.wk-filtro:hover{ background:#eff1f4; }
.wk-filtro.on{ background:#eceef2; color:var(--wk-txt); font-weight:600; }
.wk-filtro .qtd{ margin-left:auto; font-size:11px; font-weight:700; border-radius:20px;
  padding:1px 7px; background:#eef0f4; color:var(--wk-txt-fraco); }
.wk-filtro .qtd.alerta{ background:var(--wk-vermelho-bg); color:var(--wk-vermelho); }
.wk-lista-conversas{ border-right:1px solid var(--wk-linha); overflow:auto; }
.wk-conv{ padding:10px 12px; border-bottom:1px solid var(--wk-linha-fraca); cursor:pointer; }
.wk-conv:hover{ background:#fbfafc; }
.wk-conv.on{ background:var(--roxo-50); box-shadow:inset 3px 0 0 var(--roxo); }
.wk-conv .top{ display:flex; align-items:center; gap:7px; }
.wk-conv .ponto{ width:7px; height:7px; border-radius:50%; background:#d8dbe2; flex-shrink:0; }
.wk-conv.nova .ponto{ background:#dc2626; }
.wk-conv .nome{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-conv .meta{ font-size:11px; color:var(--wk-txt-fraco); margin-top:2px; }
.wk-conv .prev{ font-size:12px; color:var(--wk-txt-sub); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-painel-conversa{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.wk-chat{ flex:1; padding:14px 16px; background:#fbfbfc; overflow:auto;
  display:flex; flex-direction:column; gap:9px; }
.wk-bolha{ max-width:74%; border-radius:12px; padding:9px 11px; font-size:12.5px; line-height:1.5;
  background:#fff; border:1px solid var(--wk-linha); border-bottom-left-radius:4px; align-self:flex-start; }
.wk-bolha.nos{ background:var(--roxo); color:#fff; border-color:var(--roxo);
  border-bottom-right-radius:4px; border-bottom-left-radius:12px; align-self:flex-end; }
.wk-bolha.sistema{ background:var(--wk-ambar-bg); border-color:#f5d9a8; color:var(--wk-ambar); align-self:center; }
.wk-bolha .h{ font-size:10.5px; margin-top:4px; color:var(--wk-txt-fraco); }
.wk-bolha.nos .h{ color:rgba(255,255,255,.72); }

/* feed do aquecimento */
.wk-feed{ overflow:auto; }
.wk-feed .l{ display:flex; align-items:baseline; gap:7px; padding:5px 0;
  border-bottom:1px solid var(--wk-linha-fraca); font-size:11.5px; }
.wk-feed .de{ color:var(--indigo); font-weight:600; }
.wk-feed .para{ color:var(--roxo); font-weight:600; }
.wk-feed .txt{ color:var(--wk-txt-sub); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* linha do tempo do envio dirigido */
.wk-passos{ display:flex; flex-direction:column; gap:6px; }
.wk-passo{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--wk-txt-fraco); }
.wk-passo .ponto{ width:9px; height:9px; border-radius:50%; background:#fff;
  border:1.5px solid #d8dbe2; flex-shrink:0; }
.wk-passo.feito{ color:var(--wk-txt); }
.wk-passo.feito .ponto{ background:var(--roxo); border-color:var(--roxo); }
.wk-passo.erro .ponto{ background:var(--wk-vermelho); border-color:var(--wk-vermelho); }
.wk-passo .hora{ margin-left:auto; font-size:11.5px; color:var(--wk-txt-fraco); }

/* barra de progresso e QR dentro do console */
body.wk .prog{ height:6px; background:#eef0f4; border-radius:3px; margin:8px 0; }
body.wk .qrcode img{ width:150px; height:150px; }
body.wk .card{ box-shadow:none; }

/* Peças que vêm do comum.js (barra de modelos, campo de anexo) recebem aqui a
   aparência do console, sem precisar de um segundo componente só para esta tela. */
body.wk #wd-modelos button, body.wk .wk-conteudo input[type=file] + button,
body.wk .wk-conteudo button.btn-2, body.wk .wk-conteudo button.btn-sm{
  border:1px solid var(--wk-linha); background:#eef0f4; color:var(--wk-txt);
  border-radius:7px; padding:4px 9px; font-size:12px; font-weight:600; box-shadow:none;
}
body.wk .wk-conteudo button.btn-2:hover, body.wk #wd-modelos button:hover{ background:#e6e8ee; filter:none; }
body.wk #wd-modelos{ font-size:11.5px; color:var(--wk-txt-fraco); }
body.wk .wk-conteudo input[type=file]{ font-size:11.5px; padding:4px; background:none; border:0; }
body.wk .wk-side label[style*="font-weight:normal"]{ font-size:11.5px; }