: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;
}
body[data-tema="escuro"]{--bg:#15121d;--surface:#211b2a;--txt:#f5f0fa;--txt-sub:#c6bccd;--linha:#3b3047;--roxo-100:#30243b}
body[data-tema="oceano"]{--bg:#f1f7fb;--surface:#fff;--txt:#163047;--txt-sub:#557086;--linha:#d5e4ed;--roxo:#176d9b;--roxo-esc:#0c4d70;--roxo-claro:#238bc0;--grad-marca:linear-gradient(180deg,#176d9b,#0c4d70)}

*{ 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); }
.login-card{ text-align:center; padding:30px 28px; border:1px solid rgba(142,36,139,.14); background:linear-gradient(145deg,#fff 0%,#fcf9fd 100%); }
.login-card input{ text-align:left; border:1px solid #ded7e6; border-radius:10px; padding:12px; font-size:14px; }
.login-card button{ width:100%; padding:12px; background:linear-gradient(135deg,#5b4e9c,#8e248b); }
.login-card .msg{ margin:10px 0 0; text-align:left; }
.login-mark{ width:50px; height:50px; display:grid; place-items:center; margin:0 auto 9px; border-radius:16px; font-size:25px; background:linear-gradient(135deg,#5b4e9c,#8e248b); box-shadow:0 8px 18px rgba(91,78,156,.24); }
.login-kicker{ color:var(--roxo); font-size:11px; letter-spacing:1.4px; font-weight:800; }
.seguranca-hero{ max-width:820px; margin:28px auto 16px; display:flex; gap:15px; align-items:center; padding:0 4px; }
.seguranca-hero h2{ margin:2px 0; }.seguranca-hero p{ margin:0; color:var(--txt-sub); }
.seguranca-icone{ width:52px; height:52px; display:grid; place-items:center; border-radius:15px; font-size:25px; background:#f0e8f5; }
.seguranca-atual{ margin:15px 0 8px; padding:10px 12px; border-radius:9px; background:#eef4ff; color:#1e5f9e; }
.seguranca-acoes{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }.seguranca-aviso{ color:#a15c00; font-size:13px; margin:12px 0 0; }
@media(max-width:650px){ .seguranca-hero{ margin:20px var(--gutter) 14px; }.seguranca-acoes button{ width:100%; } }
.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); }
}