:root{color-scheme:light;--bg:#f2f5fa;--card:#fff;--ink:#142c40;--mut:#586a7c;--line:#e0e7ef;--pri:#183e58;--pri2:#102d42;--ok:#16845b;--bad:#c53040;--side:#102b40;--accent:#c39a58;--soft:#edf3f7;--shadow:0 6px 24px rgba(20,44,64,.05);--shadow-raised:0 14px 36px rgba(20,44,64,.10);--ease-out:cubic-bezier(.215,.61,.355,1)}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--pri);text-decoration:none}
.shell{display:flex;height:100vh;height:100dvh}
.side{width:224px;background:linear-gradient(170deg,var(--side),#091d2d);color:#d6e2ec;display:flex;flex-direction:column;padding:22px 14px;flex:none;overflow-y:auto;gap:4px}
.side .brand{background:#fff;margin:-22px -14px 18px;padding:24px 26px;border-radius:0;flex:none;display:flex;align-items:center;justify-content:center;min-height:92px}.side .brand img{display:block;width:100%;max-width:172px;height:auto}
.logo-login{height:54px;width:auto}
.side a{display:flex;align-items:center;gap:12px;color:#d6e2ec;padding:12px;border-radius:12px;cursor:pointer;min-height:44px;transition:background-color 150ms ease,color 150ms ease}.side a .t{flex:1}.nav-icon{width:18px;height:18px;flex:none}
.side a{position:relative;isolation:isolate}
.side a:hover{background:#ffffff12}.side a.on,.side a.on:hover{background:transparent;color:#102b40;font-weight:650}
.side a>.nav-icon,.side a>.t,.side a>.badge{position:relative;z-index:1}
.nav-highlight{position:absolute;inset:0;z-index:0;border-radius:12px;background:linear-gradient(110deg,#ffb600,#ffd460,#ffb600);background-size:200% 100%;transform-origin:top left;pointer-events:none;overflow:hidden;box-shadow:0 4px 12px #00000012;animation:nav-flow 4s ease-in-out infinite alternate,nav-glow 2.6s ease-in-out infinite}
.nav-highlight::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff66 50%,transparent 70%);animation:nav-shine 2.6s ease-in-out infinite}
@keyframes nav-shine{0%{transform:translateX(-100%);opacity:0}15%{opacity:1}60%,100%{transform:translateX(100%);opacity:0}}
@keyframes nav-flow{from{background-position:0 0}to{background-position:100% 0}}
@keyframes nav-glow{0%,100%{box-shadow:0 4px 12px #00000012,0 0 0 #ffb60000}50%{box-shadow:0 4px 12px #00000012,0 0 14px #ffb60088}}
.side .grow{flex:1;min-height:24px}.side small{padding:4px 12px;color:#b5c7d6;overflow-wrap:anywhere}
.badge{background:var(--bad);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;min-width:18px;text-align:center}
.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.top{display:flex;gap:10px;align-items:center;padding:18px 24px;background:var(--card);border-bottom:1px solid var(--line)}
.top h1{font-size:21px;letter-spacing:-.5px;margin:0;flex:1;font-weight:650}
.page{flex:1;min-height:0;overflow:auto;padding:24px;background:linear-gradient(135deg,#f0f4f9,var(--bg) 60%,#f8fafc)}
.btn{background:var(--pri);color:#fff;border:1px solid transparent;border-radius:12px;padding:10px 16px;font-weight:600;cursor:pointer;transition:transform 120ms var(--ease-out),background-color 150ms ease,border-color 150ms ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px}
.btn:hover{background:var(--pri2)}.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.red{background:var(--bad)}
.btn.sm{padding:6px 10px;font-size:12px;min-height:32px;border-radius:9px}
input,select,textarea{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fff;width:100%;min-width:0;accent-color:var(--pri);transition:border-color 150ms ease,background-color 150ms ease}
textarea{resize:vertical;min-height:70px}
label{display:block;font-size:12px;color:var(--mut);margin:10px 0 4px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}.card h3{font-size:15px;font-weight:650}.card .card{border-radius:16px;box-shadow:none;background:#f9fbfd}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{border-top:3px solid var(--pri);min-height:128px}.kpi:nth-child(3n+1){border-top-color:var(--accent)}.kpi b{display:block;font-size:28px;letter-spacing:-.8px;line-height:1.25;margin-top:12px;font-variant-numeric:tabular-nums}.kpi span{color:var(--mut);font-size:13px;font-weight:500}
.board{display:flex;gap:16px;align-items:stretch;overflow-x:auto;padding:2px 2px 12px;height:100%}
.col{background:#e8eef4;border:1px solid #dce5ee;border-radius:20px;width:286px;flex:none;display:flex;flex-direction:column;max-height:100%}
.col h3{margin:0;padding:16px 16px 6px;font-size:13px;display:flex;justify-content:space-between;border-top:3px solid var(--c);border-radius:20px 20px 0 0}
.col .sum{padding:0 16px 14px;color:var(--mut);font-size:12px}
.col .list{padding:0 10px 10px;overflow-y:auto;min-height:120px;flex:1}
.col{transition:background .12s}.col.over{outline:2px dashed var(--pri);background:#dfe8fb}
.lead{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:10px;cursor:grab;box-shadow:0 3px 9px rgba(20,44,64,.04)}
.lead:hover{border-color:var(--pri)}.lead b{display:block}.lead small{color:var(--mut)}
.lead{position:relative}.lead .pen{position:absolute;top:6px;right:6px;padding:1px 7px}.lead b{padding-right:30px}.lead .badge{margin-left:6px}
.mv{display:inline-block;float:right;margin:0 34px 4px 6px;font-size:11px}
.tag{display:inline-block;background:#e9f0f6;color:#284f6c;border-radius:6px;font-size:11px;padding:0 6px;margin:2px 3px 0 0}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}th{font-size:12px;color:var(--mut);background:#fafbfd}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal{background:#fff;border-radius:24px;width:min(640px,100%);max-height:92dvh;overflow:auto;padding:26px;box-shadow:0 24px 80px #0d243633;animation:modal-enter 200ms var(--ease-out)}
.modal h2{margin:0 0 6px;font-size:18px}
.row{display:flex;gap:12px}.row>*{flex:1;min-width:0}
.auth{max-width:420px;margin:12vh auto;padding:0 20px}.auth .card{padding:30px}.auth form.card>input{margin-bottom:12px}.auth h1{text-align:center}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:8px}
.mut{color:var(--mut)}
.inbox{display:flex;gap:12px;height:100%}
.convs{width:300px;flex:none;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:20px}
.conv{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}.conv:hover,.conv.on{background:#eef3ff}
.conv b{display:flex;justify-content:space-between}.conv small{color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;min-width:0;overflow:hidden}
.msgs{flex:1;min-height:0;overflow:auto;padding:20px;background:#f6f8fb;display:flex;flex-direction:column;gap:6px}
.msg{max-width:70%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.msg.out{align-self:flex-end;background:#e4eff4;border-color:#d5e5ed;border-radius:16px 16px 4px 16px}
.msg small{display:block;color:var(--mut);font-size:10px;margin-top:2px}
.send{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.bar{display:flex;gap:12px;height:180px;align-items:flex-end;margin-top:32px;padding-top:16px}
.bar div{flex:1;background:var(--pri);border-radius:8px 8px 0 0;min-height:2px;position:relative}
.bar span{position:absolute;top:-22px;left:0;right:0;text-align:center;font-size:11px;color:var(--mut)}
.labels{display:flex;gap:12px;margin-top:10px;font-size:11px;color:var(--mut)}.labels span{flex:1;text-align:center}
code{background:#eef1f6;border-radius:6px;padding:2px 6px;word-break:break-all}
pre{background:#0f172a;color:#e2e8f0;border-radius:8px;padding:12px;overflow:auto;font-size:12px}
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:12px}.tl div{margin-bottom:10px}
@media(max-width:760px){
  .shell{flex-direction:column-reverse;height:100dvh}
  .side{width:100%;flex-direction:row;align-items:center;padding:4px;gap:2px;overflow-x:auto}
  .side .brand,.side .grow{display:none}
  .side small{padding:8px 10px;white-space:nowrap;flex:none;font-size:12px}
  .side a{flex:none;padding:8px 10px;font-size:12px;margin:0;gap:6px}
  .top{flex-wrap:wrap;padding:10px 12px;gap:8px}
  .top h1{flex:1 1 100%}
  .top input,.top select,.top .btn{flex:1 1 130px;width:auto!important;max-width:none!important}
  .page{padding:10px}
  .col{width:82vw}
  .inbox{flex-direction:column}
  .convs{width:100%;max-height:34%;flex:none}
  .row{flex-direction:column}
  .modal{padding:14px}
  .msg{max-width:88%}
  th,td{padding:8px 8px}
}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:#fff;box-shadow:-8px 0 24px rgba(15,23,42,.18);z-index:40;display:flex;flex-direction:column;border-radius:24px 0 0 24px;overflow:hidden;animation:drawer-enter 240ms var(--ease-out)}
.drawer .chat{flex:1}.drawer-x{position:absolute;top:8px;right:8px;z-index:2}
.drawer .top{padding-right:46px}

.lead{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform 150ms var(--ease-out),border-color 150ms ease,opacity 150ms ease}
.lead.drag-src{opacity:.3;outline:2px dashed var(--pri)}
.drag-clone{position:fixed!important;z-index:80;pointer-events:none;margin:0!important;cursor:grabbing;box-shadow:0 14px 32px rgba(15,23,42,.28);transform:scale(1) rotate(0);transition:transform .16s cubic-bezier(.2,.9,.3,1.3),box-shadow .16s,opacity .18s}
.drag-clone.lifted{transform:scale(1.04) rotate(2.5deg)}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none!important}
.lead{touch-action:pan-x pan-y}
body.dragging{touch-action:none;overscroll-behavior:none}
.lead.landed{animation:land 220ms var(--ease-out)}
@keyframes land{from{transform:scale(.97)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.drag-clone,.lead.landed,.lead,.col{transition:none;animation:none}}

.msg a{color:#1d4ed8;word-break:break-all}
.msg a.lp{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;margin-top:6px;color:inherit;text-decoration:none;max-width:280px;word-break:normal}
.msg a.lp img{width:100%;max-height:150px;object-fit:cover;display:block}
.msg a.lp>div{padding:6px 9px;display:flex;flex-direction:column;gap:2px}
.msg a.lp small{display:block;color:var(--mut);margin:0;font-size:11px;text-transform:lowercase}
.msg a.lp b{font-size:13px;line-height:1.25}
.msg a.lp span{font-size:12px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.conversation-layout{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:16px}
@media(max-width:760px){.conversation-layout{grid-template-columns:1fr}}

.seg{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#edf2f6}.seg a{border-radius:8px;transition:background-color 150ms ease}
.seg a{padding:6px 12px;font-size:13px;color:inherit;text-decoration:none}
.seg a.on{background:var(--pri);color:#fff}
.tblwrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px}
.tblwrap table{width:100%;border-collapse:collapse}
.tblwrap th,.tblwrap td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
.tblwrap th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.tblwrap tr.clk{cursor:pointer}.tblwrap tr.clk:hover{background:#eef3ff}
.colpick{position:relative}.colpick summary{list-style:none;cursor:pointer}
.colpick .card{position:absolute;right:0;top:34px;z-index:20;min-width:170px;box-shadow:0 8px 24px rgba(15,23,42,.15)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.filters input,.filters select{width:auto;max-width:100%;margin:0}
.filters label{margin:0}

/* Interaction and responsive details shared by all screens. */
:where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #a87e38;outline-offset:3px}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost:hover{background:var(--soft);border-color:#b8cbd9}
.btn.red:hover{background:#a52432}
input:focus,select:focus,textarea:focus{border-color:var(--pri)}
input[type=checkbox],input[type=radio]{width:auto;flex:none}
.help{margin:14px 0;color:var(--mut);font-size:13px}
.help summary{cursor:pointer;width:fit-content;font-weight:600;padding:4px 0}
.help p{max-width:75ch;line-height:1.6;margin:8px 0}
.modal-bg{animation:overlay-enter 200ms ease-out}
.colpick[open]>.card{animation:modal-enter 150ms var(--ease-out)}
.drawer .chat{border:0;border-radius:0}
.chat>.top{padding:14px 16px}
.chat .send{padding:14px}
.conv{transition:background-color 150ms ease;padding:14px 16px}
.conv.on{box-shadow:inset 3px 0 var(--accent)}
.bar div:nth-child(3n){background:var(--accent)}
.company-create{margin-bottom:20px}
.company-create>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-weight:650}
.company-create>summary::-webkit-details-marker{display:none}
.company-create>summary::after{content:'+';font-size:22px;color:var(--pri)}
.company-create[open]>summary::after{content:'−'}
.company-create[open]>form{margin-top:20px}
.company-create .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.page>table{box-shadow:var(--shadow)}
@keyframes modal-enter{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes overlay-enter{from{opacity:0}to{opacity:1}}
@keyframes drawer-enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
  .lead:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
  .drag-clone:hover{transform:none}
  .drag-clone.lifted:hover{transform:scale(1.04) rotate(2.5deg)}
}
@media(min-width:761px) and (max-width:1200px){
  .side{width:200px;padding:18px 10px}
  .side .brand{margin:-18px -10px 18px;padding:24px 22px}
  .page{padding:18px}.top{padding:14px 18px;flex-wrap:wrap}
  .top h1{min-width:150px}
}
@media(max-width:760px){
  .side{padding:6px;gap:4px;min-height:58px}
  .side a{gap:7px;min-height:44px}.nav-icon{width:16px;height:16px}
  .side small{display:none}
  .page{padding:12px}.card{padding:18px;border-radius:18px}
  .top h1{font-size:19px}.top{padding:12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{min-height:114px}.kpi b{font-size:23px;overflow-wrap:anywhere}
  .kpi span{font-size:12px}.modal{padding:20px;border-radius:20px}
  .btn.sm{min-height:36px}
  .company-create .row{grid-template-columns:1fr}
  .drawer{border-radius:0}.bar{height:140px;gap:7px}.labels{gap:7px;font-size:10px}
  .chat .send{padding:10px;gap:6px}.chat .send .btn{padding:8px 10px}
  .msgs{padding:12px}.seg a{padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  .side a,.btn,input,select,textarea,.lead,.col,.drag-clone,.seg a,.conv{transition:none}
  .modal,.modal-bg,.drawer,.lead.landed,.colpick[open]>.card{animation:none}
  .nav-highlight,.nav-highlight::after{animation:none}.nav-highlight::after{opacity:0}
  .lead:hover,.btn:active:not(:disabled),.drag-clone.lifted,.drag-clone.lifted:hover{transform:none}
}

.send{position:relative}
.quick-sug{position:absolute;left:10px;right:10px;bottom:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0002;max-height:220px;overflow:auto;z-index:5}
.quick-sug button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;cursor:pointer;font:inherit;color:inherit}
.quick-sug button:hover{background:var(--soft)}
.toptools{display:flex;gap:8px;align-items:center;position:relative}
.gsearch{position:relative}.gsearch input{width:220px}
.gresults{position:absolute;right:0;top:calc(100% + 6px);width:340px;max-width:92vw;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0002;max-height:70vh;overflow:auto;z-index:30}
.gresults h4{margin:0;padding:8px 12px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut,#64748b)}
.gresults button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 12px;cursor:pointer;font:inherit;color:inherit}
.gresults button:hover{background:var(--soft)}
.bell{position:relative}.bell .badge{position:absolute;top:-6px;right:-6px}
.goalbar{height:8px;border-radius:6px;background:var(--line);overflow:hidden;min-width:90px}.goalbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb600,#ffd460)}

.msg.internal{background:#fff7d6;border:1px dashed #e0b400;color:#5a4500}

.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-h{font-size:12px;color:var(--mut,#64748b);text-align:center;padding:4px}
.cal-cell{min-height:92px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px;overflow:hidden}
.cal-cell.empty{background:transparent;border-color:transparent}.cal-cell.today{border-color:#ffb600;box-shadow:0 0 0 2px #ffb60044}
.cal-task{font-size:11px;background:var(--soft);border-radius:6px;padding:2px 5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.cal-task.late{background:#fee2e2;color:#991b1b}
@media(max-width:700px){.cal-cell{min-height:64px;padding:3px}.cal-task{font-size:10px}}

[hidden]{display:none!important}
.send{flex-wrap:wrap;align-items:center}
.send input:not([type=checkbox]):not([type=file]){flex:1 1 140px;min-width:0}
.send .btn{padding-left:10px;padding-right:10px}

/* Conversas: colunas sempre cabem na tela (sem barra de rolagem), em qualquer zoom */
.board{overflow:hidden;gap:10px;padding:2px 0 8px}
.col{width:auto;flex:1 1 0;min-width:0}
.col h3{padding:14px 10px 6px;font-size:12px;gap:6px}.col h3 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col .sum{padding:0 10px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col .list{padding:0 6px 8px}
.lead{padding:10px;overflow:hidden}.lead b{font-size:13px;overflow-wrap:anywhere;padding-right:26px}.lead .pen{top:4px;right:4px;padding:1px 6px}
/* Painel e relatorios: os cards ficam sempre na mesma linha, encolhendo junto com a tela */
.grid{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:12px}
.kpi{container-type:inline-size;min-width:0;min-height:0;padding:14px 12px;overflow:hidden}
.kpi b{font-size:clamp(13px,12cqw,28px);overflow-wrap:anywhere;margin-top:8px}
.kpi span{display:block;font-size:clamp(10px,6.5cqw,13px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi small{font-size:clamp(9px,5.5cqw,12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
@media(max-width:480px){.grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.board{overflow-x:auto}.col{width:82vw;flex:none}}
.col .list{scrollbar-width:none}.col .list::-webkit-scrollbar{display:none}
.kpi b{font-size:clamp(13px,14cqw,28px)}
.col{container-type:inline-size}
.lead b{overflow-wrap:break-word}
@container (max-width:175px){.lead .mv{display:none}.lead{padding:8px 7px}.lead b{padding-right:22px;font-size:12px}.lead small{font-size:10px}.col h3{font-size:11px}}
@container (max-width:115px){.lead .pen{display:none}.lead b{padding-right:0;font-size:11px}.lead small{font-size:9px}.col .sum{font-size:10px}}
/* nada de barra de rolagem horizontal na pagina: a barra do topo quebra de linha em vez de estourar */
.top{flex-wrap:wrap;row-gap:8px}.top h1{flex:1 1 auto;min-width:120px}.top input:not([type=checkbox]),.top select{min-width:0;flex:0 1 auto}
.page{overflow-x:hidden}
.kpi b{font-size:clamp(9px,9.5cqw,28px);white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:clip}
.kpi span{white-space:normal;text-overflow:clip;line-height:1.15;font-size:clamp(9px,7.5cqw,13px);overflow-wrap:break-word}
.kpi small{white-space:normal;text-overflow:clip;line-height:1.1}

/* telas estreitas / zoom alto: menu vira uma coluna de icones para sobrar espaco ao conteudo */
@media(min-width:761px) and (max-width:1100px){
  .side{width:64px;padding:14px 8px;align-items:stretch}
  .side .brand{margin:-14px -8px 14px;padding:0;min-height:56px}.side .brand img{display:none}
  .side .brand::before{content:'V';font-weight:800;font-size:28px;color:#102b40;font-family:inherit}
  .side a{justify-content:center;padding:12px 0;gap:0}.side a .t{display:none}.side small{display:none}
  .side a .badge{position:absolute;top:3px;right:3px;margin:0}
}

/* botoes do card: lado a lado, mesmo tamanho, centralizados entre si */
.lead-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;align-items:center;z-index:1}
.lead .lead-actions .btn{float:none;position:static;margin:0;width:28px;height:28px;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.lead b{padding-right:68px}
@container (max-width:175px){.lead b{padding-right:30px}.lead .lead-actions .mv{display:none}.lead .lead-actions .btn{width:24px;height:24px}}
@container (max-width:115px){.lead b{padding-right:0}.lead .lead-actions{display:none}}
.drawer .chat>.top{padding-right:64px}.drawer-x{top:12px;right:12px}

/* sub-abas das configuracoes */
.settabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.settabs a{padding:9px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:14px;cursor:pointer;text-decoration:none;transition:background-color 150ms ease,border-color 150ms ease}
.settabs a:hover{background:var(--soft);border-color:#b8cbd9}
.settabs a.on{background:var(--pri);color:#fff;border-color:var(--pri);font-weight:600}
.settabs+.card{margin-top:12px}

/* barra fixa do lead: nome + botao salvar acompanham a rolagem da janela */
.modal{--pad:26px}@media(max-width:760px){.modal{--pad:20px}}
.lead-bar{position:sticky;top:calc(-1 * var(--pad));z-index:6;display:flex;gap:12px;align-items:center;justify-content:space-between;margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 12px;padding:16px var(--pad);background:#fff;border-bottom:1px solid var(--line);border-radius:24px 24px 0 0}
.lead-bar h2{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-bar h2 .inline-edit{font:inherit;font-weight:700;width:100%;padding:4px 8px}
.lead-bar-actions{display:flex;align-items:center;gap:8px;flex:none}
.lead-contact{padding:14px 16px;margin:14px 0;background:#f7fafc;border:1px solid var(--line);border-radius:18px}
.lead-contact-name{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.contact-name-edit{width:26px;height:26px;display:inline-grid;place-items:center;border:0;border-radius:8px;background:#e9f2f8;color:var(--pri);cursor:pointer;font-size:16px;line-height:1}
.contact-name-edit:hover{background:#d7eaf5;transform:translateY(-1px)}
.contact-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.contact-method-wrap{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;min-width:0}
.contact-method-card{flex:1;min-width:125px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:13px}
.contact-method-label{display:block;color:var(--mut);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;margin-bottom:3px}
.contact-method-values{display:flex;flex-wrap:wrap;gap:5px 10px;overflow-wrap:anywhere}
.contact-method-value{font-size:13px;font-weight:600}
.contact-method-add{width:36px;min-height:42px;align-self:stretch;border:1px dashed #a8c8dc;border-radius:12px;background:#eff7fc;color:var(--pri);font-size:23px;cursor:pointer;transition:background-color 160ms ease,transform 160ms ease}
.contact-method-add:hover{background:#dff0f9;transform:translateY(-2px)}
.contact-method-form{flex-basis:100%}.contact-method-entry{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.contact-method-form input{flex:1;min-width:160px}
@media(max-width:620px){.lead-bar{flex-wrap:wrap}.lead-bar h2{flex-basis:100%}.lead-bar-actions{width:100%;justify-content:flex-end}.contact-methods{grid-template-columns:1fr}}
.inline-edit{padding:2px 6px;border:1px solid var(--pri);border-radius:8px;min-width:160px}
.save-btn{flex:none;background:#0a84ff;color:#fff;border:0;box-shadow:0 0 0 0 #0a84ff88;white-space:nowrap}
.save-btn:hover{background:#0070e0}
.save-btn.dirty{background:#0a84ff;animation:save-blink 1.1s ease-in-out infinite}
.save-btn:disabled{opacity:.6;animation:none}
@keyframes save-blink{0%,100%{box-shadow:0 0 0 0 #0a84ff99;filter:brightness(1)}50%{box-shadow:0 0 0 8px #0a84ff00,0 0 18px 4px #38b6ffcc;filter:brightness(1.25)}}
@media(prefers-reduced-motion:reduce){.save-btn.dirty{animation:none;box-shadow:0 0 0 3px #38b6ff}}

/* VettaX visual refresh: readable rhythm, softer surfaces, restrained motion. */
@font-face{font-family:Manrope;src:url('/fonts/manrope-regular.ttf') format('truetype');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-bold.ttf') format('truetype');font-weight:700 800;font-style:normal;font-display:swap}
:root{--bg:#f3f6fa;--card:#fff;--ink:#10283b;--mut:#617487;--line:#e4ebf1;--pri:#153b56;--pri2:#0e3048;--side:#102b40;--soft:#edf4f8;--shadow:0 7px 28px rgba(16,43,64,.055);--shadow-raised:0 14px 32px rgba(16,43,64,.11)}
body{font-family:Manrope,"Segoe UI",sans-serif;font-size:14px;line-height:1.55;letter-spacing:-.012em}
h1,h2,h3,h4,b,strong,th,.btn{letter-spacing:-.025em}
.side{width:236px;padding:20px 14px;gap:5px}
.side .brand{margin:-20px -14px 18px;min-height:94px}
.side a{border-radius:15px;padding:12px 14px;font-size:13px;transition:background-color 160ms ease,color 160ms ease,transform 160ms ease}
.side a:hover{transform:translateX(2px)}
.side a.on,.side a.on:hover{color:#102b40}
.nav-highlight{background:linear-gradient(115deg,#ffd36b,#ffbb26);box-shadow:0 5px 15px rgba(255,183,27,.17);animation:none;border-radius:15px}
.nav-highlight::after{display:none}
.side small{font-size:12px;line-height:1.45}
.top{min-height:86px;padding:16px 30px;gap:16px;row-gap:10px;flex-wrap:nowrap;box-shadow:0 1px 0 rgba(16,43,64,.025);z-index:2}
.top h1{font-size:22px;font-weight:800;letter-spacing:-.045em;flex:0 0 auto;min-width:0;margin-right:auto}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 0 auto;flex-wrap:nowrap}
.top-actions>input,.top-actions>select{width:auto!important;flex:0 1 210px;min-width:150px;max-width:240px}
.top-actions>input[type=date]{flex-basis:158px;min-width:150px}
.top-actions>.btn{white-space:nowrap;flex:none}
.toptools{flex:none;margin-left:10px}
.gsearch input{width:210px}
.page{padding:28px 30px;background:radial-gradient(circle at 80% 0%,#f8fafc 0,#f3f6fa 42%,#f1f5fa 100%);overflow-x:hidden}
.page>.card,.page>.tblwrap,.page>table,.page>.grid,.page>.dashboard-filters,.page>.settabs,.page>.conversation-layout{max-width:1760px}
.card{border-radius:26px;padding:26px;border-color:#e7edf2;box-shadow:var(--shadow)}
.card .card{border-radius:20px;background:#fbfcfe}
.card h3{font-size:17px;font-weight:800;margin-bottom:14px}
.card h4{font-size:15px;margin:22px 0 10px}
.btn{border-radius:13px;min-height:42px;padding:10px 16px;font-weight:700;transition:transform 160ms var(--ease-out),box-shadow 160ms ease,background-color 160ms ease,border-color 160ms ease}
.btn.sm{font-size:12px;min-height:36px;padding:7px 12px;border-radius:11px}
.btn:hover{box-shadow:0 5px 14px rgba(17,53,78,.13)}
.btn.ghost:hover{box-shadow:0 4px 12px rgba(17,53,78,.07)}
input,select,textarea{border-radius:13px;min-height:42px;border-color:#dce5ed;padding:10px 13px}
input::placeholder,textarea::placeholder{color:#8291a0}
label{font-size:12px;font-weight:600;margin:12px 0 5px}
.seg{border-radius:15px;padding:4px;background:#f0f4f8}.seg a{border-radius:11px;font-weight:700}
.settabs{gap:8px;margin-bottom:8px}.settabs a{border-radius:14px;padding:11px 17px;font-size:13px;font-weight:700}
.settabs a.on{box-shadow:0 5px 13px rgba(17,53,78,.14)}
.page .card,.page .tblwrap,.page .cal-cell,.page .lead{animation:surface-enter 220ms var(--ease-out) both}
@keyframes surface-enter{from{opacity:.72;transform:translateY(5px)}to{opacity:1;transform:none}}
.grid{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));grid-auto-columns:auto;gap:14px}
.view-painel>.grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1450px}
.view-relatorios>.grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1450px}
.view-painel>.card:first-child{max-width:850px}
.view-painel>.card:last-child,.view-relatorios>.card{max-width:1450px}
.kpi{min-height:135px;padding:19px 20px;border-top:0;border-left:3px solid var(--pri);border-radius:22px;overflow:visible}
.kpi:nth-child(3n+1){border-left-color:var(--accent);border-top:0}
.kpi span{font-size:12px;line-height:1.4;font-weight:700;color:#607486;white-space:normal;overflow:visible}
.kpi b{font-size:clamp(18px,1.55vw,27px);line-height:1.25;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:16px}
.kpi small{font-size:11px;line-height:1.35;margin-top:4px}
.dashboard-filters{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px}
.dashboard-filters>input{width:160px;flex:none}
.dashboard-filters>select{width:auto;min-width:170px;flex:none}
.bar{height:180px;gap:8px}.bar div{border-radius:9px 9px 3px 3px}
.bar span,.labels{font-size:11px}
.board{overflow-x:auto;gap:13px;padding:2px 2px 10px}
.col{flex:0 0 clamp(235px,19vw,285px);width:auto;min-width:235px;max-width:285px;background:#eaf0f5;border-radius:22px;overflow:hidden}
.col h3{padding:16px 15px 6px;font-size:13px;line-height:1.4;white-space:normal;min-height:45px;gap:8px;border-top-width:4px}
.col h3 span{flex:none}
.col .sum{padding:0 15px 13px;font-size:12px}
.col .list{padding:0 9px 12px;scrollbar-width:thin}
.lead{border-radius:17px;padding:13px;overflow:visible;box-shadow:0 3px 10px rgba(16,43,64,.045)}
.lead b{font-size:13px;line-height:1.4;padding-right:64px;overflow-wrap:anywhere}
.lead small{font-size:11px;line-height:1.5}
.lead-actions{top:8px;right:8px;gap:5px}
.lead .lead-actions .btn{width:26px;height:26px;border-radius:8px}
.tag{border-radius:9px;padding:2px 7px}
.filters{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:11px;padding:19px;margin-bottom:16px;align-items:end}
.filters>*{min-width:0!important;max-width:none!important;width:100%!important}
.filters input,.filters select{width:100%!important;max-width:none!important}
.filters label{display:flex;gap:6px;align-items:center;min-height:42px;white-space:nowrap}
.filters label input{flex:1;min-width:0}
.filters>.btn{justify-self:start;width:auto!important}
.filters .row{display:flex;flex-wrap:wrap;align-items:center}
.tblwrap{border-radius:22px;box-shadow:var(--shadow)}
.tblwrap th,.tblwrap td,th,td{padding:13px 14px;font-size:12px;vertical-align:middle}
th,.tblwrap th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;background:#f7f9fb}
tbody tr:hover{background:#f9fbfd}
.conversation-layout{grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:15px;min-height:calc(100dvh - 156px)}
.conversation-rail{background:#fff;border:1px solid var(--line);border-radius:22px;min-width:0;padding:10px;overflow:auto}
.conversation-list>button{border:0!important;border-radius:14px!important;box-shadow:none!important;padding:13px 14px!important;margin:0 0 4px!important;white-space:normal}
.conversation-list>button:hover{background:#eef4f8!important}
.conversation-list>button small{font-size:10px;color:var(--mut);font-weight:500;margin-top:3px}
.conversation-list>button div{font-weight:400;color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}
.conversation-rail>button{width:100%;margin-top:10px}
.chat{border-radius:22px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:300px;max-width:860px;margin:0 auto;padding:40px 28px}
.empty-state h3{font-size:20px;margin:10px 0 4px}.empty-state p{max-width:420px;color:var(--mut);margin:0;line-height:1.6}
.empty-state.compact{min-height:130px;padding:20px}.empty-state.compact b{font-size:15px}.empty-state.compact p{font-size:12px}
.empty-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#fff2d4;color:#8a651e;font-size:26px;font-weight:800}
.chat-empty{flex:1;max-width:none}
.view-config>.card{max-width:1300px}
.view-config .card form.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;align-items:end;max-width:1050px}
.view-config .card form.row>*{min-width:0;max-width:none!important;width:100%}
.view-config .card form.row>.btn{width:auto;justify-self:start;padding-inline:20px}
.view-config .card form.row>[hidden]{display:none!important}
.view-config .card .row>label{margin:0}
.view-config .card pre{border-radius:15px;padding:16px;font-size:11px;line-height:1.6}
.view-config .card>p{max-width:80ch;line-height:1.65}
.view-config .card>table{border:1px solid var(--line)}
.cal{gap:7px}.cal-h{font-weight:800;font-size:11px;padding:8px}.cal-cell{min-height:98px;border-radius:15px;padding:9px}.cal-cell.today{border-color:#e8b62a;box-shadow:0 0 0 2px rgba(232,182,42,.17)}
.cal-cell b{font-size:12px}.cal-task{border-radius:8px;padding:4px 6px}
.modal{border-radius:26px}.drawer{border-radius:26px 0 0 26px}
.save-btn.dirty{animation:none;box-shadow:0 0 0 3px rgba(10,132,255,.2)}
@media(max-width:1450px){.top{flex-wrap:wrap}.top h1{flex:1}.top-actions{order:3;justify-content:flex-start;width:100%;flex-wrap:wrap}.toptools{margin-left:auto}.filters{grid-template-columns:repeat(3,minmax(160px,1fr))}}
@media(max-width:1100px){.grid,.view-painel>.grid,.view-relatorios>.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{grid-template-columns:repeat(2,minmax(150px,1fr))}.top{padding:15px 20px}.page{padding:20px}}
@media(max-width:760px){.shell{flex-direction:column-reverse}.side{width:100%;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;min-height:60px;padding:6px;gap:4px;scrollbar-width:none}.side::-webkit-scrollbar{display:none}.side a{flex:none;transform:none!important}.top{padding:12px;min-height:0;gap:8px}.top h1{flex:1 1 100%;font-size:18px}.toptools{order:2;width:100%;margin-left:0}.toptools .gsearch{flex:1}.toptools .gsearch input{width:100%!important;max-width:none!important;flex:none!important}.toptools .bell{width:42px!important;min-width:42px;flex:none!important}.top-actions{order:3;overflow:visible;flex-wrap:wrap;justify-content:flex-start;width:100%;gap:6px}.top-actions>input,.top-actions>select{width:auto!important;min-width:135px;max-width:none;flex:1 1 145px!important}.top-actions>.btn{width:auto!important;flex:none!important}.page{padding:14px}.card{padding:19px;border-radius:21px}.grid,.view-painel>.grid,.view-relatorios>.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:15px;min-height:120px}.kpi b{font-size:clamp(17px,5vw,24px)}.board{overflow-x:auto}.col{flex:none;width:82vw;min-width:0;max-width:none}.filters{grid-template-columns:1fr 1fr;padding:15px}.filters>*:first-child{grid-column:1/-1}.conversation-layout{grid-template-columns:1fr;min-height:0}.conversation-rail{max-height:280px}.chat{min-height:340px!important}.view-config .card form.row{grid-template-columns:1fr}.cal-cell{min-height:70px;padding:5px}.cal{gap:3px}.empty-state{min-height:240px}}
@media(max-width:480px){.filters{grid-template-columns:1fr}.dashboard-filters>input{flex:1 1 130px}.cal-cell{min-height:54px;padding:3px}.cal-h{font-size:9px}.cal-cell b{font-size:10px}}
@media(prefers-reduced-motion:reduce){.page .card,.page .tblwrap,.page .cal-cell,.page .lead{animation:none}.side a,.btn{transition:none}.side a:hover{transform:none}}

/* Janela do lead: secoes com titulo pequeno, linha de resumo antes das atividades e area "Nova atividade" alinhada em grade */
.lead-sec{margin:16px 0 0}
.lead-sec>b{display:block;font-size:11px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.045em;margin-bottom:6px}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag-row .tag{margin:0;padding:3px 10px;font-size:12px;border-radius:999px}
.tag-row input{width:150px;min-height:34px;padding:5px 12px}
.lead-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
.lead-meta .lost{color:var(--bad);font-weight:600}
.act-composer{display:grid;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:16px;margin:0 0 20px}
.act-title{font-weight:700;font-size:14px}
.act-composer textarea{background:#fff;min-height:84px;resize:vertical}
.act-fields{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1.2fr);gap:12px}
.act-fields>div>label{margin:0 0 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.act-fields select,.act-fields input{background:#fff;font-size:13px;padding-left:10px;padding-right:8px}
.act-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.act-actions .act-spacer{flex:1 1 0;min-width:0}
.act-actions .btn{white-space:nowrap}
@media(max-width:620px){.act-fields{grid-template-columns:1fr}.act-actions .act-spacer{display:none}.act-actions .btn{flex:1 1 auto}}
.save-btn:disabled{opacity:.55;animation:none;cursor:default;box-shadow:none}
.save-btn.saved,.save-btn.saved:disabled,.save-btn.saved:hover{background:#16845b;color:#fff;opacity:1;animation:none;box-shadow:none}

/* Roteiros, destinatarios (e-mail / WhatsApp) */
.script-card{margin-bottom:12px}
.script-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.script-actions{display:flex;gap:6px;flex-wrap:wrap}
.script-steps{margin:10px 0 0;padding-left:20px;color:var(--ink);font-size:13px;display:grid;gap:4px}
.script-steps-edit{display:grid;gap:12px}
.script-step{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--soft);display:grid;gap:8px}
.script-step textarea{background:#fff;min-height:76px}
.script-step-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.script-step-head .script-wait{display:inline-flex;gap:6px;align-items:center;font-size:13px}
.script-step-head .script-wait input,.script-step-head .script-wait select{min-height:34px;padding:4px 8px;background:#fff}
.script-step-tools{margin-left:auto;display:inline-flex;gap:4px}
.var-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.var-chip{border:1px solid var(--line);background:#fff;color:var(--pri);border-radius:999px;padding:2px 10px;font-size:12px;cursor:pointer;min-height:26px}
.var-chip:hover{border-color:var(--pri)}
.script-preview{font-size:12px;white-space:pre-wrap}
.script-preview-box{display:grid;gap:8px;margin-top:8px}
.preview-msg{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:8px 12px;white-space:pre-wrap;font-size:13px}
.recipients{display:grid;gap:4px;margin:6px 0 10px}
.recipient{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink);font-size:14px;cursor:pointer}
.recipient input{width:auto;min-height:0}
.inline-check{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:var(--ink);font-size:13px}
.inline-check input{width:auto;min-height:0}
.script-run{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid var(--line);border-radius:14px;margin-bottom:6px;font-size:13px}

/* cabecalho da conversa: nome encolhe/quebra e os botoes (Encerrar, editar) nunca saem da tela */
.chat>.top{min-height:0;gap:10px;flex-wrap:nowrap}
.chat>.top>b{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.chat>.top>.btn{flex:none;white-space:nowrap}

/* adaptacao ao zoom/tela: estas regras vem por ultimo para nao serem anuladas pelo tema mais acima
   (zoom alto = janela "estreita" em px CSS; antes o menu seguia com 236px e o conteudo ficava espremido) */
@media(min-width:761px) and (max-width:1200px){
  .side{width:204px;padding:18px 10px}
  .side .brand{margin:-18px -10px 16px;padding:20px 18px;min-height:80px}
  .side a{padding:11px 12px}
  .page{padding:18px}
  .top{padding:14px 18px;min-height:0;flex-wrap:wrap}
  .top h1{font-size:20px}
}
@media(min-width:761px) and (max-width:1100px){
  .side{width:64px;padding:14px 8px;align-items:stretch}
  .side .brand{margin:-14px -8px 14px;padding:0;min-height:56px}
  .side a{justify-content:center;padding:12px 0;gap:0}
}
@media(max-width:760px){
  .side a{padding:8px 10px}
  .page{padding:12px}
  .card{padding:16px;border-radius:20px}
}

/* preencher a tela em qualquer zoom: sem tetos de largura nos blocos principais das paginas */
.page>.card,.page>.tblwrap,.page>table,.page>.grid,.page>.dashboard-filters,.page>.settabs,.page>.conversation-layout,
.view-painel>.grid,.view-relatorios>.grid,.view-painel>.card:first-child,.view-painel>.card:last-child,.view-relatorios>.card,.view-config>.card{max-width:none}

/* logo (menu) e barra de cima (titulo da pagina) com a mesma altura: a linha divisoria fica alinhada */
:root{--head-h:88px}
.side .brand{box-sizing:border-box;height:var(--head-h);min-height:var(--head-h);padding-top:0;padding-bottom:0}
.main>.top,.top{box-sizing:border-box;min-height:var(--head-h)}
@media(min-width:761px) and (max-width:1100px){.side .brand{height:var(--head-h);min-height:var(--head-h)}}
@media(max-width:760px){.top{min-height:0}}

/* aba Conversas estilo WhatsApp Web: lista fixa a esquerda, conversa ocupa todo o resto da altura e da largura */
.chat-x{flex:none;font-size:15px;line-height:1;padding:6px 10px}
@media(min-width:761px){
  .page:has(>.conversation-layout){padding:0;overflow:hidden;display:flex;flex-direction:column;background:#eef2f6}
  .page>.conversation-layout{flex:1;min-height:0;height:100%;grid-template-columns:minmax(300px,30%) minmax(0,1fr);gap:0;max-width:none}
  .conversation-rail{min-height:0;overflow-y:auto;background:#fff;border-right:1px solid var(--line);padding:8px}
  .conversation-layout .chat-main{height:100%;min-height:0;border:0;border-radius:0;box-shadow:none}
  .conversation-layout .chat-main>.top{min-height:64px;padding:10px 18px}
  .conversation-layout .chat-main .msgs{padding:20px clamp(16px,6%,90px)}
}
@media(max-width:760px){
  .conversation-layout .chat-main{min-height:60dvh}
  .conversation-layout.has-chat .conversation-rail{display:none}
}

/* ✕ do painel lateral ficava escondido atras do cabecalho da conversa (que tem z-index proprio) */
.drawer-x{z-index:10;top:14px;right:14px;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}

/* conversa no estilo do iPhone (iMessage): balao azul a direita (enviadas), cinza a esquerda (recebidas), cauda no ultimo de cada sequencia */
.drawer{width:max(40vw,460px)}
@media(max-width:760px){.drawer{width:100vw}}
.msgs{background:#fff;padding:16px 18px;gap:2px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",system-ui,sans-serif}
.msg{position:relative;max-width:75%;padding:8px 14px;border:0;border-radius:20px;background:#e9e9eb;color:#000;font-size:16px;line-height:1.3;letter-spacing:-.01em;margin-top:8px;align-self:flex-start}
.msg.out{align-self:flex-end;background:#0a84ff;background:linear-gradient(180deg,#2b9bff,#0a7bff);color:#fff;border-radius:20px}
.msg.out+.msg.out,.msg.in+.msg.in,.msg:not(.out)+.msg:not(.out){margin-top:2px}
.msg small{font-size:10.5px;opacity:.55;margin-top:3px;text-align:right}
.msg.out small{color:#fff;opacity:.7}
.msg.out a{color:#fff;text-decoration:underline}
.msg a{color:#0a63d6}
.msg.out a.lp{background:#fff;color:#000;text-decoration:none}
.msg.out a.lp small,.msg.out a.lp span{color:#6b7280;opacity:1}
/* caudinha */
.msg.out:not(:has(+ .msg.out))::before,.msg:not(.out):not(:has(+ .msg:not(.out)))::before{content:"";position:absolute;bottom:0;width:20px;height:20px}
.msg.out:not(:has(+ .msg.out))::before{right:-8px;background:#0a7bff;border-bottom-left-radius:16px 14px}
.msg.out:not(:has(+ .msg.out))::after,.msg:not(.out):not(:has(+ .msg:not(.out)))::after{content:"";position:absolute;bottom:0;width:10px;height:20px;background:#fff;border-bottom-left-radius:10px}
.msg.out:not(:has(+ .msg.out))::after{right:-10px;border-bottom-left-radius:10px}
.msg:not(.out):not(:has(+ .msg:not(.out)))::before{left:-8px;background:#e9e9eb;border-bottom-right-radius:16px 14px}
.msg:not(.out):not(:has(+ .msg:not(.out)))::after{left:-10px;border-bottom-left-radius:0;border-bottom-right-radius:10px}
.msg.internal{background:#fff4c2;color:#5a4500;border:1px dashed #e0b400;border-radius:16px}
.msg.internal::before,.msg.internal::after{display:none!important}
/* barra de digitar estilo iOS */
.chat .send{background:#f7f7f8;border-top:1px solid #e3e3e6;align-items:center}
.chat .send input:not([type=checkbox]):not([type=file]){border-radius:20px;border:1px solid #c9c9ce;background:#fff;padding:9px 14px;font-size:16px}
.chat .send>.btn:not(.ghost){border-radius:20px;background:#0a84ff;border-color:#0a84ff;color:#fff}
@media(max-width:760px){.msg{max-width:84%}}

/* foto do cliente no cabecalho da conversa: Foto > Nome > Numero */
.avatar{flex:none;width:42px;height:42px;border-radius:50%;background:#c7ccd4;color:#fff;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.avatar svg{width:26px;height:26px;margin-top:6px}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.chat-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.chat-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-who .mut{font-size:12.5px}
.chat>.top>.chat-who{overflow-wrap:anywhere}

/* cabecalho da etapa: Nome ... R$ valor ... quantidade (valor no meio) + busca propria de cada etapa */
.col h3{display:flex;align-items:center;gap:8px;min-height:0;padding:16px 14px 8px}
.col h3 .col-name{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col h3 .col-val{flex:none;font-size:12px;font-weight:600;color:var(--mut);text-align:center}
.col h3 .col-count{flex:1 1 0;text-align:right;min-width:0}
.col .col-search{margin:0 10px 8px;width:auto;min-height:34px;padding:6px 12px;border-radius:12px;font-size:12.5px;flex:none}
.col .sum{display:none}
.col h3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.col h3 .col-name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}
.col h3 .col-val{text-align:center}
.col h3 .col-count{text-align:right}

/* ===== etapas do funil: novo visual ===== */
.board{gap:14px;padding:4px 4px 14px}
.col{flex:0 0 clamp(262px,20vw,312px);width:auto;min-width:262px;max-width:312px;background:#f1f5f9;border:1px solid #e1e8ef;border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(16,43,64,.04)}
.col::before{content:"";display:block;height:5px;background:var(--c);flex:none}
.col h3{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:0;padding:14px 14px 0;min-height:0;font-size:14px;font-weight:800;letter-spacing:-.02em;color:#102b40}
.col h3 .col-name{flex:1 1 auto;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}
.col h3 .col-tools{display:flex;align-items:center;gap:6px;flex:none}
.col h3 .col-count{flex:none;min-width:26px;padding:2px 9px;border-radius:999px;background:#fff;border:1px solid #dbe4ec;color:#102b40;font-size:12px;font-weight:700;text-align:center;line-height:1.5}
.col-lupa{border:0;background:transparent;border-radius:8px;width:28px;height:28px;padding:0;cursor:pointer;font-size:13px;opacity:.55;transition:opacity .15s,background-color .15s}
.col-lupa:hover,.col-lupa.on{opacity:1;background:#e3ebf3}
.col-val-row{text-align:center;padding:6px 14px 10px}
.col-val{display:inline-block;font-size:13px;font-weight:700;color:var(--mut);background:rgba(255,255,255,.7);border-radius:999px;padding:2px 12px}
.col .sum{display:none}
.col .col-search{margin:0 12px 10px;width:auto;min-height:36px;padding:7px 14px;border-radius:999px;font-size:13px;border:1px solid #d5dfe9;background:#fff;flex:none}
.col .col-search[hidden]{display:none}
.col .list{padding:2px 12px 12px;min-height:140px}
.col-empty{display:none;margin:6px 0;padding:22px 10px;border:2px dashed #cfd9e3;border-radius:16px;text-align:center;color:#8a9aab;font-size:12.5px}
.col .list:not(:has(.lead)) .col-empty{display:block}
/* cartoes */
.lead{border:1px solid #e6edf3;border-radius:16px;padding:12px 13px;margin-bottom:9px;background:#fff;box-shadow:0 1px 3px rgba(16,43,64,.06);transition:box-shadow .15s,transform .15s,border-color .15s}
.lead:hover{border-color:#b9cde0;box-shadow:0 6px 16px rgba(16,43,64,.10);transform:translateY(-1px)}
.lead b{font-size:13.5px;font-weight:700;color:#102b40;line-height:1.35;padding-right:0}
.lead small{display:block;margin-top:2px;color:#7b8ca0;font-size:11.5px}
.lead .badge{margin-left:6px;vertical-align:middle}
.lead .lead-actions{opacity:0;pointer-events:none;top:7px;right:7px;background:#fff;border-radius:10px;padding:2px;box-shadow:0 2px 8px rgba(16,43,64,.14);transition:opacity .15s}
.lead:hover .lead-actions,.lead:focus-within .lead-actions{opacity:1;pointer-events:auto}
@media(hover:none){.lead .lead-actions{opacity:1;pointer-events:auto;box-shadow:none;background:transparent}.lead b{padding-right:64px}}
@media(max-width:480px){.col{flex:0 0 82vw;max-width:none}}

/* valor da etapa no meio da linha (Nome | R$ | quantidade) e busca sempre visivel */
.col h3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:14px 14px 10px}
.col h3 .col-name{justify-self:start}
.col h3 .col-val{justify-self:center;font-size:12.5px;font-weight:700;color:var(--mut);background:rgba(255,255,255,.7);border-radius:999px;padding:2px 10px;white-space:nowrap}
.col h3 .col-count{justify-self:end}
.col .col-search{display:block;margin:0 12px 10px;width:auto;min-height:36px;padding:7px 14px;border-radius:12px;font-size:13px}
.col-val-row,.col-lupa{display:none}

/* fundo das etapas: sem cinza. Coluna branca com a faixa colorida no topo; cartoes com borda azulada suave */
.col{background:#fff;border:1px solid #dfe9f1;box-shadow:0 2px 10px rgba(16,43,64,.06)}
.col-val{background:#f1f7fb!important}
.col h3 .col-count{background:#eef5fa;border-color:#d6e5f0}
.col .col-search{background:#f7fafc;border-color:#d6e5f0}
.col-empty{border-color:#d6e5f0;color:#7f95a8;background:#fafcfe}
.lead{background:#fff;border:1px solid #dbe8f2;box-shadow:0 1px 4px rgba(16,43,64,.08)}
.board{background:transparent}
.page:has(>.board){background:#fff}
.col h3{min-height:60px;box-sizing:border-box}
/* cartoes do funil mais arredondados */
.lead{border-radius:24px;padding:14px 16px}
.lead .lead-actions{border-radius:14px}
.lead .lead-actions .btn{border-radius:12px}
.lead .tag,.lead .chip{border-radius:999px}

/* ===== paridade mobile: o que o desktop faz e o celular nao alcancava ===== */
.mob-only{display:none!important}
.lead-title-wrap{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.lead-title-wrap h2{margin:0;min-width:0;overflow-wrap:anywhere}
.lead-title-wrap .contact-name-edit{flex:none}
@media(hover:hover) and (pointer:fine){.lead-title-wrap .contact-name-edit{opacity:.55}.lead-title-wrap:hover .contact-name-edit{opacity:1}}
button,a,.lead,.conv,.seg a,.settabs a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(max-width:760px){
  .mob-only{display:flex!important}                                   /* "Minha conta" (o nome do usuario fica oculto no menu de baixo) */
  .side small{display:none!important}
  input,select,textarea{font-size:16px}                               /* iOS da zoom ao focar campo com fonte menor que 16px */
  .chat .send input:not([type=checkbox]):not([type=file]){font-size:16px}
  .contact-name-edit{width:36px;height:36px;font-size:18px}           /* alvo de toque confortavel */
  .lead-title-wrap{flex-basis:100%}
  body{overscroll-behavior-y:none}                                    /* puxar-para-atualizar nao recarrega o app no meio do arraste/conversa */
  .page>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblwrap{-webkit-overflow-scrolling:touch}
  .btn{min-height:44px}.btn.sm{min-height:40px}                       /* minimo recomendado para toque */
  .modal-bg{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}     /* janelas viram "folha" subindo de baixo, como em app nativo */
  .settabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .settabs::-webkit-scrollbar{display:none}.settabs a{flex:none}
  .gresults{max-height:50dvh;overflow:auto}
}

/* tabelas viram cartoes no celular (Tabela de leads, Tarefas, Contatos, Empresas, Relatorios, Canais, Plataforma) */
@media(max-width:760px){
  .page table,.page table>tbody,.page table>tfoot{display:block;width:100%}
  .page table>thead{display:none}
  .page table>tbody>tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line);background:#fff}
  .page table>tbody>tr:last-child{border-bottom:0}
  .page table>tbody>tr>td{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;border:0;padding:4px 0!important;width:auto!important;text-align:right;white-space:normal!important}
  .page table>tbody>tr>td[data-label]::before{content:attr(data-label);flex:none;color:var(--mut);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-align:left}
  .page table>tbody>tr>td:empty{display:none}
  .page table>tbody>tr>td[colspan]{display:block;text-align:left}
  .tblwrap{overflow-x:visible}
  .tblwrap tr.clk:active{background:#eef3ff}
  .page td input[type=checkbox]{width:22px!important;height:22px}
  /* filtros da Tabela e do Painel: tudo na largura da tela, sem as larguras fixas do desktop */
  .filters>*,.filters input,.filters select,.filters label{width:100%!important;max-width:none!important;min-width:0}
  .filters label{display:flex}.filters label input{flex:1}
  .dashboard-filters{flex-wrap:wrap}.dashboard-filters>input,.dashboard-filters>select{flex:1 1 140px;width:auto}
  .colpick .card{position:static}
  /* Lista de conversas: sem conversa aberta, a lista ocupa a tela; aberta, a conversa ocupa a tela */
  .conversation-layout:not(.has-chat) .chat-main{display:none}
  .conversation-layout:not(.has-chat) .conversation-rail{max-height:none}
  .conversation-layout.has-chat .chat-main{min-height:calc(100dvh - 150px)}
  /* Roteiros */
  .script-head,.script-step-head{flex-wrap:wrap;gap:8px}
  .script-actions,.script-step-tools{flex-wrap:wrap}
  .var-chips{flex-wrap:wrap}
  .script-wait input,.script-wait select{width:auto!important}
  /* Relatorios / Painel: filtros de data */
  .top-actions>input[type=date]{flex:1 1 130px!important;min-width:0}
}

.filters-fold>summary{list-style:none;cursor:pointer;margin-bottom:10px}.filters-fold>summary::-webkit-details-marker{display:none}
@media(min-width:761px){.filters-fold>summary{display:none}.filters-fold>.filters{margin-top:0}}

@media(max-width:760px){
  /* linhas com varios controles pequenos (etapas do funil, etc.) ficam em linha e quebram, em vez de empilhar tudo */
  .row[style*="align-items:center"]{flex-direction:row;flex-wrap:wrap;gap:8px}
  .row[style*="align-items:center"]>input:not([type=color]):not([type=checkbox]){flex:1 1 100%}
  .row[style*="align-items:center"]>.btn,.row[style*="align-items:center"]>input[type=color]{flex:none;width:auto}
  .row[style*="align-items:center"]>.btn.sm{max-width:none!important}
  /* celulas sem rotulo (texto corrido, ex.: descricao da automacao) ficam alinhadas a esquerda */
  .page table>tbody>tr>td:not([data-label]){justify-content:flex-start;text-align:left}
}
@media(max-width:760px){input[type=color]{width:44px!important;min-width:44px;height:40px;padding:2px}}

/* aniversario, agenda, analise de conversas, ligacao */
.switch-row{display:flex;gap:8px;align-items:center;color:inherit;font-size:14px;margin:0 0 10px;font-weight:600}
.bday{display:flex;gap:6px;align-items:center;margin:8px 0 0;color:inherit}.bday input{width:auto;min-height:34px;padding:4px 8px}
.bday-bubble{margin-top:10px;max-width:420px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--soft);white-space:pre-wrap;font-size:14px}
.call-audio{display:block;width:100%;max-width:320px;height:36px;margin-top:6px}
.ins-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px}
.ins-row{display:grid;grid-template-columns:minmax(90px,1fr) 1.4fr 42px;gap:10px;align-items:center;margin-top:10px;font-size:13px}.ins-row b{text-align:right}
.ins-row .goalbar i.warn{background:linear-gradient(90deg,#e0566a,#f08a98)}.ins-row .goalbar i.good{background:linear-gradient(90deg,#16845b,#4cc196)}
.side .side-group{display:block;margin-top:10px;padding:10px 12px 4px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#8fa6b8}
@media(max-width:760px){.side .side-group{display:none}}
.side a[href^="#/config"]{min-height:38px;padding-block:8px}
@media(max-width:760px){.side a[href^="#/config"]{min-height:44px;padding-block:8px}}

/* avisos nao bloqueantes (toast) e foco da janela */
.toast-box{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px))}
.toast{background:#102b40;color:#fff;padding:10px 14px;border-radius:12px;font-size:14px;box-shadow:0 8px 28px #0d243644;overflow-wrap:anywhere}
.toast.bad{background:var(--bad)}
.modal:focus{outline:none}
@media(max-width:760px){.toast-box{top:12px;bottom:auto;left:16px;right:16px;max-width:none}}

/* ===== Revisao de alinhamento: vem por ultimo para valer sobre os blocos acima ===== */
/* checkbox/radio herdavam o min-height:42px dos campos de texto e ficavam fora do eixo do rotulo */
input[type=checkbox],input[type=radio]{min-height:0}
/* barra de cima: campos de data, selects e botoes (inclusive .sm) com a mesma altura na mesma linha */
.top-actions>input[type=date],.dashboard-filters>input[type=date],.filters input[type=date]{height:42px;padding-top:0;padding-bottom:0}
.top-actions>.btn,.top-actions .btn.sm,.dashboard-filters>.btn{min-height:42px}
.top-actions>input:not([type=date]){flex:0 1 270px;max-width:320px}
/* barra de cima com poucos botoes (ate 4, sem select) cabe na linha do titulo (a divisoria alinha com a do logo, 88px) */
@media(min-width:1101px) and (max-width:1450px){
  .top-actions:not(:has(select)):not(:has(>:nth-child(5))){order:0;width:auto;flex:1 1 0;justify-content:flex-end;flex-wrap:wrap}
  .top-actions:not(:has(select)):not(:has(>:nth-child(5)))~.toptools{margin-left:0}
}
/* cabecalho da etapa: o nome ganha o espaco que precisa e so quebra entre palavras (antes cortava "Negocia|cao") */
.col h3{grid-template-columns:minmax(min-content,1fr) auto auto}
.col h3 .col-name{overflow-wrap:break-word}
/* filtros da Tabela: segmentos salvos ocupam 2 colunas e os botoes nao quebram de linha */
.filters .btn{white-space:nowrap}
.filters>.btn.sm{min-height:42px;order:2}
.filters>span{grid-column:span 2;display:flex;gap:8px;align-items:center;min-width:0;order:1}
.filters>span select{flex:1 1 auto;width:auto!important;min-width:0}
.filters>span>.btn{flex:none;width:auto!important;min-height:42px}
@media(max-width:480px){.filters>span{grid-column:auto;flex-wrap:wrap}.filters>span select{flex:1 1 100%}}
/* tabelas: colunas numericas a direita (classe .num posta pelo app.js), botoes de acao sem quebrar, linhas sem corte nos cantos */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td:has(>.btn.sm){white-space:nowrap}
.card table{border-radius:0}
.card table th:first-child,.card table td:first-child{padding-left:0}
.card table th:last-child,.card table td:last-child{padding-right:0}
/* Tarefas: cada dia e uma tabela; colunas fixas para o titulo e o lead alinharem entre os dias */
.task-table{table-layout:fixed}
.task-table tr:last-child td{border-bottom:0}
.task-table td{overflow-wrap:anywhere}
@media(min-width:761px){
  .task-table td:nth-child(1){width:44px!important}
  .task-table td:nth-child(2){width:40px!important}
  .task-table td:nth-child(3){width:40%}
  .task-table td:nth-child(5){width:16%}
  .task-table td:nth-child(6){width:84px}
  .cal-cell{min-height:142px}
}
/* linhas de etapa/funil nas configuracoes: botoes na mesma altura dos campos e sem quebra de texto */
.row[style*="align-items:center"]>.btn.sm{flex:none;max-width:none!important;white-space:nowrap;min-height:42px}
.view-config form>input+textarea{margin-top:8px}
.view-config .card>table{border:0}
/* botao Salvar no rodape de cartoes: tamanho proprio (nao estica) e sempre na ponta direita; numeros com a mesma largura dos outros campos */
.view-config .row[style*="justify-content"]>.btn{flex:none;padding-inline:32px}
.view-config .row>div>input[type=number]{max-width:none!important}
.view-config form>input+.row{margin-top:10px}
/* divisorias das janelas (Minha conta etc.): respiro igual acima e abaixo */
.modal hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.modal :not(.tblwrap)>table th:first-child,.modal :not(.tblwrap)>table td:first-child{padding-left:0}
.modal :not(.tblwrap)>table th:last-child,.modal :not(.tblwrap)>table td:last-child{padding-right:0}
/* caixa de marcar ao lado de um campo (ex.: "Ignorar quem ja tem lead aberto"): alinhada ao campo, nao ao rotulo dele */
@media(min-width:761px){.modal .row>label{align-self:flex-end;display:flex;align-items:center;min-height:42px;margin:0}}
/* celular: campos e botoes da mesma linha com a mesma altura; busca da barra ocupa a linha inteira; rotulo a esquerda e valor (texto + etiqueta) a direita nos cartoes */
@media(max-width:760px){
  select,input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]){min-height:46px}
  .top-actions>input[type=date],.dashboard-filters>input[type=date],.filters input[type=date]{height:46px}
  .top-actions .btn,.top-actions .btn.sm,.dashboard-filters .btn,.dashboard-filters>.btn,.filters .btn,.filters>.btn.sm,.filters>span>.btn{min-height:46px}
  .page table>tbody>tr>td[data-label]{justify-content:flex-end}
  .page table>tbody>tr>td[data-label]::before{margin-right:auto}
}
@media(max-width:480px){.top-actions>input:not([type=date]){flex:1 1 100%!important}}
.top-actions .btn{white-space:nowrap}
/* celular: campo de digitar ocupa a linha de cima; anexo, microfone, nota e Enviar ficam juntos na de baixo, todos com a mesma altura */
@media(max-width:760px){
  .chat .send input:not([type=checkbox]):not([type=file]){order:-1;flex:1 1 100%}
  .chat .send .btn{min-height:46px}
  .chat .send>.btn:last-child{margin-left:auto}
}
@media(max-width:760px){.kpi b{white-space:normal;overflow-wrap:anywhere;line-height:1.2}}
/* tablet: tabelas mais largas que a tela rolam na horizontal em vez de ficarem cortadas (colunas de acao sumiam) */
@media(min-width:761px) and (max-width:1100px){.page>table,.page :not(.tblwrap)>table{display:block;max-width:100%;overflow-x:auto}}
/* menu em coluna de icones (tablet): o titulo "Configuracoes" virava letras empilhadas; vira so uma divisoria */
@media(min-width:761px) and (max-width:1100px){.side .side-group{font-size:0;padding:0;margin:8px 10px 6px;border-top:1px solid rgba(255,255,255,.18)}}
.col h3 .col-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;white-space:normal;overflow:visible;text-overflow:clip}
.col h3 .col-nm{min-width:0;overflow-wrap:anywhere}
.col-unr{flex:none;font:inherit;font-size:10.5px;font-weight:600;line-height:1;padding:3px 8px;border-radius:999px;border:1px solid #d6e5f0;background:#fff;color:var(--mut);cursor:pointer}
.col-unr:hover{border-color:var(--pri);color:var(--pri)}
.col-unr.on{background:var(--pri);border-color:var(--pri);color:#fff}

.lead b .avatar,.conversation-rail b .avatar{width:24px;height:24px;margin-right:7px;vertical-align:middle}
.lead b .avatar svg,.conversation-rail b .avatar svg{width:16px;height:16px;margin-top:4px}

.lead .lead-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

.lead.flash{border-color:var(--pri);box-shadow:0 0 0 3px rgba(212,160,40,.55),0 8px 22px rgba(20,44,64,.18);animation:leadflash 1.1s ease-in-out 3}
@keyframes leadflash{50%{box-shadow:0 0 0 7px rgba(212,160,40,.25),0 8px 22px rgba(20,44,64,.18)}}
@media (prefers-reduced-motion:reduce){.lead.flash{animation:none}}

.avatar.zoomable{cursor:zoom-in}.avatar.zoomable:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.contact-cell{display:inline-flex;align-items:center;gap:8px}.contact-cell .avatar{width:28px;height:28px}.contact-cell .avatar svg{width:18px;height:18px;margin-top:4px}
.photo-zoom{position:fixed;inset:0;z-index:1000;background:rgba(10,20,30,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;cursor:zoom-out}
.photo-zoom img{max-width:min(92vw,720px);max-height:80vh;border-radius:12px;object-fit:contain;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45);cursor:default}
.photo-zoom-name{color:#fff;font-weight:600;font-size:16px;text-align:center}
.photo-zoom-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:20px;cursor:pointer}
.photo-zoom-x:hover{background:rgba(255,255,255,.3)}
/* visualizador de midia do chat (imagem/video): tela cheia, acima da gaveta (z 40) e dos modais (z 10) */
.media-zoom{z-index:1100;background:rgba(5,10,16,.92);padding:56px 12px 12px}
.media-zoom img,.media-zoom video{max-width:96vw;max-height:calc(100dvh - 80px);border-radius:10px;object-fit:contain;background:#000;cursor:default}
.media-zoom img{background:transparent}

/* Menu lateral: itens nunca encolhem (o submenu de Configuracoes tem overflow:hidden e, sem isto, era espremido em vez de rolar) */
.side>*{flex-shrink:0}
.side{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;scrollbar-gutter:stable}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:8px;border:2px solid transparent;background-clip:content-box;transition:background-color 150ms ease}
.side::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.42);background-clip:content-box}
/* Barras de rolagem do conteudo: finas e discretas, no tom do tema */
.page,.tblwrap,.conversation-rail,.chat .msgs,.msgs{scrollbar-width:thin;scrollbar-color:#b9c7d4 transparent}
.page::-webkit-scrollbar,.tblwrap::-webkit-scrollbar,.conversation-rail::-webkit-scrollbar,.msgs::-webkit-scrollbar{width:10px;height:10px}
.page::-webkit-scrollbar-thumb,.tblwrap::-webkit-scrollbar-thumb,.conversation-rail::-webkit-scrollbar-thumb,.msgs::-webkit-scrollbar-thumb{background:#b9c7d4;border-radius:10px;border:2px solid transparent;background-clip:content-box}
.page::-webkit-scrollbar-thumb:hover,.tblwrap::-webkit-scrollbar-thumb:hover,.conversation-rail::-webkit-scrollbar-thumb:hover,.msgs::-webkit-scrollbar-thumb:hover{background:#8fa3b5;background-clip:content-box}
.page::-webkit-scrollbar-track,.tblwrap::-webkit-scrollbar-track,.conversation-rail::-webkit-scrollbar-track,.msgs::-webkit-scrollbar-track{background:transparent}
@media(max-width:760px){.side{scrollbar-width:none;scrollbar-gutter:auto}}
/* Seta de Configuracoes: desenhada em CSS (glifos de texto ficavam desalinhados); gira conforme aria-expanded */
.side-config .config-chevron{font-size:0;line-height:0;color:inherit;width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;opacity:.75}
.side-config .config-chevron::before{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease-out)}
.side-config[aria-expanded="true"] .config-chevron::before{transform:translateY(2px) rotate(-135deg)}
.side-config:hover .config-chevron{opacity:1}
@media(prefers-reduced-motion:reduce){.side-config .config-chevron::before{transition:none}}

/* ---- Plataforma (master): abas, tabelas e links de cadastro ---- */
.ptabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto}
.ptab{appearance:none;border:0;background:transparent;padding:12px 18px;font-weight:700;font-size:14px;color:var(--mut);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;display:flex;gap:8px;align-items:center;white-space:nowrap;transition:color 150ms ease,border-color 150ms ease}
.ptab:hover{color:var(--ink)}
.ptab.on{color:var(--pri);border-bottom-color:var(--accent)}
.ptab-n{background:var(--soft);border-radius:999px;padding:1px 9px;font-size:12px;color:var(--pri)}
.ptoolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.ptoolbar input[type=search]{flex:1 1 280px;max-width:400px;margin:0}
.ptablecard{padding:6px 8px}
.ptable{width:100%;margin:0}
.ptable th.num,.ptable td.num{text-align:center}
.ptable td{vertical-align:middle;padding-top:14px;padding-bottom:14px}
.ptable .acts{white-space:nowrap;text-align:right}.ptable .acts .btn{margin-left:6px}
.cname{font-weight:650}.small{font-size:12px}
.pbadge{display:inline-block;border-radius:999px;padding:2px 11px;font-size:12px;font-weight:700;background:var(--soft);color:var(--pri)}
.pb-trial{background:#fff3d6;color:#8a5a00}.pb-empresarial{background:#dff3ea;color:#127049}.pb-enterprise{background:#e8e3f8;color:#4b3a8a}
.sbadge{display:inline-flex;align-items:center;gap:6px;font-size:13px}.sbadge::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok)}.sbadge.off::before{background:#9aa9b7}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;align-items:stretch}
.lcard{margin:0;display:flex;flex-direction:column;gap:10px}
.lcard.off{opacity:.62}
.ldays{font-size:15px;color:var(--mut)}.ldays b{font-size:44px;line-height:1;color:var(--pri);letter-spacing:-.04em}
.lsub{margin-top:-6px;color:var(--mut)}
.lurl{width:100%;font-size:12px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin:0;text-overflow:ellipsis}
.lfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.lnew{border:2px dashed var(--line);box-shadow:none;background:transparent}
.lnew input{margin:0;width:100%}.lnew input[type=number]{width:90px}
@media(max-width:700px){.ptable .acts{white-space:normal}.ptab{padding:12px}}

/* ---- Plataforma: tabelas (um quadro so, colunas fixas, acoes a direita) ---- */
.ptablewrap{overflow:hidden;border-radius:18px;box-shadow:var(--shadow)}
.ptablewrap table.ptable{table-layout:fixed;border-radius:0;margin:0;background:#fff}
.ptable th,.ptable td{padding:16px 20px;vertical-align:middle;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.ptable thead th{padding-top:13px;padding-bottom:13px;white-space:nowrap}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr{transition:background-color 120ms ease}.ptable tbody tr:hover{background:#f6f9fc}
.ptable th.num,.ptable td.num{text-align:center}
.ptable td.acts{padding-left:8px}
.ptable .actwrap{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ptable .actwrap .btn{margin:0;white-space:nowrap}
.ptoolbar input[type=search]{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586a7c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;padding-left:40px}
@media(max-width:760px){.ptable td.acts{text-align:left}.ptable .actwrap{justify-content:flex-start}}
/* campo de mensagem de varias linhas (Shift+Enter desce de linha) */
.send textarea.msg-input{flex:1 1 140px;min-width:0;resize:none;overflow-y:auto;max-height:140px;line-height:1.35;font:inherit;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--card);color:inherit}
.chat .send textarea.msg-input{border-radius:20px;border:1px solid #c9c9ce;background:#fff;padding:9px 14px;font-size:16px}
@media(max-width:760px){.chat .send textarea.msg-input{order:-1;flex:1 1 100%;font-size:16px}}
/* funil dos links de cadastro (Plataforma) */
.lfunnel{border-top:1px solid var(--line);padding-top:10px;font-size:12px}
.lclicks{margin-bottom:6px}.lclicks b{font-size:20px}
.lfunnel table{width:100%;table-layout:fixed;border-collapse:collapse}.lfunnel th,.lfunnel td{padding:4px 3px;text-align:right;overflow:hidden;text-overflow:ellipsis}.lfunnel th:first-child{width:34%}.lfunnel th:first-child,.lfunnel th[scope=row]{text-align:left}
.lfunnel thead th{font-weight:600;color:var(--mut);font-size:12px;border-bottom:1px solid var(--line)}
.lfunnel-t{width:100%;border-collapse:collapse;font-size:13px}.lfunnel-t th,.lfunnel-t td{padding:4px 6px;text-align:right}.lfunnel-t th:first-child,.lfunnel-t th[scope=row]{text-align:left}
.lfunnel-t thead th{font-weight:600;color:var(--mut);font-size:12px;border-bottom:1px solid var(--line)}
/* lista de parceiros (Plataforma > Links de cadastro) */
.lrow{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);cursor:pointer}
.lrow:hover{background:var(--soft)}.lrow.on{background:var(--soft)}
.lhead{cursor:default;border-top:0;font-size:12px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}.lhead:hover{background:none}
.lrow .num{text-align:right;font-variant-numeric:tabular-nums}
.ldetail{padding:12px 18px 6px;background:var(--soft);border-top:1px solid var(--line)}
.lrow-link{margin-bottom:16px}.lrow-link.off{opacity:.62}.lrow-link .lclicks{margin:8px 0 4px;font-size:13px}
.lrow-link .lfunnel-t{max-width:560px}
@media(max-width:760px){.lrow{grid-template-columns:1fr 1fr}.lrow>span:first-child{grid-column:1/-1}.lhead{display:none}.lrow .num::before{content:attr(data-label)": ";color:var(--mut);font-size:12px;display:block;text-align:left}.lrow .num{text-align:left}}
/* formulario de novo link */
.lform{display:flex;flex-direction:column;gap:10px}
.lform-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lform-row[hidden]{display:none}
.lform select,.lform input[type=text],.lform input:not([type]){max-width:100%}
.bc-table,.card table.bc-table{width:100%;border:1px solid var(--line);border-radius:18px;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff}
.bc-table th,.bc-table td{padding:14px 16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;text-align:left}
.bc-table th:last-child,.bc-table td:last-child{border-right:0}
.bc-table tbody tr:last-child td{border-bottom:0}
.bc-table th{background:#eef2f6;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--mut)}
.card table.bc-table th,.card table.bc-table td{padding:16px 18px}
.card table.bc-table th{white-space:nowrap}
.bc-table .bc-c,.card table.bc-table .bc-c{text-align:center}
.bc-table td:last-child{white-space:nowrap}
.bc-boss{margin:18px 0 8px;font-size:15px}
.bc-who{display:inline-block;margin:6px 0 8px;padding:4px 12px;border-radius:999px;background:#eef2f6;color:var(--mut);font-size:12px;font-weight:700}

/* Parceiros: os cartões e as tabelas respeitam a largura da página. */
.partners-page{display:grid;gap:16px;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.partners-page>*{min-width:0;max-width:100%;box-sizing:border-box}
.partner-card{min-width:0;overflow:hidden}
.partner-card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.partner-identity{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0;flex:1}
.partner-identity h3{margin:0;font-size:17px}
.partner-identity .mut{overflow-wrap:anywhere}
.partner-rate-line{font-size:13px;color:var(--mut);margin:12px 0 16px}
.partner-rate-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.partner-metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 20px}
.partner-metrics .kpi{min-width:0;min-height:105px;padding:14px 16px}
.partner-metrics .kpi b{font-size:clamp(16px,1.5vw,24px);margin-top:10px}
.partner-section-title{font-size:13px;margin:18px 0 8px}
.partners-page .partner-table-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;border-radius:14px;box-shadow:none}
.partners-page .partner-table{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff}
.partners-page .partner-table th,.partners-page .partner-table td{padding:11px 12px;box-sizing:border-box;vertical-align:middle;font-size:12px;border-bottom:1px solid var(--line)}
.partners-page .partner-table thead th{font-size:10px;line-height:1.25;white-space:normal}
.partners-page .partner-table tbody tr:last-child>*{border-bottom:0}
.partners-page .partner-table th:first-child,.partners-page .partner-table td:first-child{padding-left:12px;text-align:left}
.partners-page .partner-table th:last-child,.partners-page .partner-table td:last-child{padding-right:12px}
.partner-products{min-width:820px}
.partner-products th:first-child,.partner-products td:first-child{width:18%}
.partner-products th:not(:first-child),.partner-products td:not(:first-child),.partner-rates th:not(:first-child),.partner-rates td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.partner-products th:nth-child(2),.partner-products td:nth-child(2){width:11%}
.partner-products th:nth-child(3),.partner-products td:nth-child(3){width:11%}
.partner-products th:nth-child(4),.partner-products td:nth-child(4){width:14%}
.partner-products th:nth-child(5),.partner-products td:nth-child(5){width:10%}
.partner-products th:nth-child(6),.partner-products td:nth-child(6){width:12%}
.partner-products th:nth-child(7),.partner-products td:nth-child(7){width:12%}
.partner-products th:nth-child(8),.partner-products td:nth-child(8){width:12%}
.partner-links{min-width:680px}
.partner-links th:first-child,.partner-links td:first-child{width:38%;overflow-wrap:anywhere}
.partner-links th:nth-child(2),.partner-links td:nth-child(2),.partner-links th:nth-child(3),.partner-links td:nth-child(3){width:11%}
.partner-links th:nth-child(4),.partner-links td:nth-child(4),.partner-links th:nth-child(5),.partner-links td:nth-child(5){width:15%}
.partner-links th:last-child,.partner-links td:last-child{width:10%;text-align:right}
.partner-links th:nth-child(n+2):not(:last-child),.partner-links td:nth-child(n+2):not(:last-child){text-align:right;font-variant-numeric:tabular-nums}
.partner-rates{min-width:480px}
.partner-rates th:first-child,.partner-rates td:first-child{width:50%}
.partner-history{margin-top:18px;border-top:1px solid var(--line);padding-top:13px}
.partner-history summary{cursor:pointer;font-size:13px;font-weight:600}
.partner-history .partner-table-scroll{margin-top:10px}
.partner-form{min-width:0}
.partner-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.partner-create-shortcut{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.partner-create-shortcut h3{margin:0}
.partner-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.partner-empty h3{margin:0}
.partners-admin-tab{min-width:0;max-width:100%}
.partners-admin-tab>.card{min-width:0;max-width:100%;box-sizing:border-box}
.partners-admin-tab .partner-table-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;box-sizing:border-box}
.partner-payout-table{width:100%;min-width:700px;table-layout:fixed}
.partner-payout-table th,.partner-payout-table td{vertical-align:middle}
.partner-payout-table th:nth-child(1),.partner-payout-table td:nth-child(1){width:17%;white-space:nowrap}
.partner-payout-table th:nth-child(2),.partner-payout-table td:nth-child(2){width:20%;overflow-wrap:anywhere}
.partner-payout-table th:nth-child(3),.partner-payout-table td:nth-child(3){width:14%;text-align:right;font-variant-numeric:tabular-nums}
.partner-payout-table th:nth-child(4),.partner-payout-table td:nth-child(4){width:14%}
.partner-payout-table th:nth-child(5),.partner-payout-table td:nth-child(5){width:17%}
.partner-payout-table th:nth-child(6),.partner-payout-table td:nth-child(6){width:18%;text-align:right}
@media(max-width:1100px){.partner-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.partner-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.partner-card-head .btn{width:100%}.partner-form-actions .btn{flex:1}}

/* Plataforma > Links de cadastro */
.links-tab{width:100%;max-width:100%;min-width:0}
.links-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.links-list{padding:0;overflow:hidden;max-width:100%;box-sizing:border-box}
.links-tab .lrow{grid-template-columns:minmax(190px,2fr) repeat(3,minmax(120px,1fr));gap:16px;padding:14px 18px;min-width:0}
.links-tab .lhead{background:#f7f9fb}
.links-tab .lrow>span{min-width:0}
.links-tab .lrow>span:first-child{overflow-wrap:anywhere}
.links-tab .lrow .num{white-space:nowrap}
.links-tab .ldetail{padding:12px 18px 18px;min-width:0;background:#f7f9fb}
.link-item{min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:10px}
.link-item:last-child{margin-bottom:0}
.link-item.off{opacity:.72}
.link-item-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-bottom:10px;font-size:13px}
.link-item-head b{font-size:14px}
.link-item-url{display:flex;align-items:center;gap:8px;min-width:0}
.link-item-url .lurl{flex:1;min-width:0;width:0}
.link-item-url .btn{flex:none}
.link-item-metrics{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--mut);font-size:12px;margin:10px 0 0}
.link-item-metrics b{color:var(--ink);font-variant-numeric:tabular-nums}
.link-funnel{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.link-funnel summary{cursor:pointer;font-size:12px;font-weight:650}
.link-funnel-table{width:100%;max-width:100%;min-width:0;overflow-x:auto;margin-top:10px;box-shadow:none}
.link-funnel .lfunnel-t{width:100%;min-width:800px;table-layout:fixed}
.link-funnel .lfunnel-t th,.link-funnel .lfunnel-t td{padding:10px 8px;text-align:right;white-space:normal;font-variant-numeric:tabular-nums}
.link-funnel .lfunnel-t th:first-child,.link-funnel .lfunnel-t td:first-child{width:18%;text-align:left}
.link-funnel .lfunnel-t th:nth-child(2),.link-funnel .lfunnel-t td:nth-child(2){width:11%}
.link-funnel .lfunnel-t th:nth-child(3),.link-funnel .lfunnel-t td:nth-child(3){width:11%}
.link-funnel .lfunnel-t th:nth-child(4),.link-funnel .lfunnel-t td:nth-child(4){width:14%}
.link-funnel .lfunnel-t th:nth-child(5),.link-funnel .lfunnel-t td:nth-child(5){width:10%}
.link-funnel .lfunnel-t th:nth-child(6),.link-funnel .lfunnel-t td:nth-child(6){width:12%}
.link-funnel .lfunnel-t th:nth-child(7),.link-funnel .lfunnel-t td:nth-child(7){width:12%}
.link-funnel .lfunnel-t th:nth-child(8),.link-funnel .lfunnel-t td:nth-child(8){width:12%}
.partner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.partner-toolbar h2{font-size:18px;margin:0}
.partner-operations{margin-top:16px}
.partner-operations>summary{cursor:pointer;font-weight:650;font-size:14px}
.partner-operations>.card{margin-top:12px}
@media(max-width:760px){.links-tab .lrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}.links-tab .lrow>span:first-child{grid-column:1/-1}.links-tab .lrow .num{white-space:normal}.link-item-url{flex-wrap:wrap}.link-item-url .lurl{flex:1 1 100%;width:100%}}

/* ---------- Agenda (aba Tarefas) no estilo do Google Agenda ---------- */
.ag{display:grid;grid-template-columns:248px minmax(0,1fr);gap:16px;align-items:start}
.ag-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:8px}
.ag-create{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;border:0;background:#fff;color:var(--ink);font:600 14px inherit;padding:14px 22px 14px 16px;border-radius:24px;box-shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);cursor:pointer}
.ag-create span{font-size:26px;line-height:1;color:#ea4335;font-weight:400}.ag-create:hover{box-shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.25)}
.ag-mini-h{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:4px}.ag-mini-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:1px}
.ag-mini-g small{font-size:10px;color:var(--mut);padding:3px 0}.ag-mini-d{border:0;background:none;font-size:11px;height:28px;border-radius:50%;cursor:pointer;color:var(--ink);padding:0}
.ag-mini-d.out{color:var(--mut);opacity:.6}.ag-mini-d:hover{background:var(--soft)}.ag-mini-d.inrange{background:#e8f0fe;border-radius:0}.ag-mini-d.today{background:#1a73e8;color:#fff;border-radius:50%;font-weight:700}
.ag-sec h4{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink)}.ag-chk{display:flex;align-items:center;gap:10px;padding:4px 2px;font-size:13px;cursor:pointer;position:relative;margin:0;color:var(--ink)}
.ag-chk input{position:absolute;opacity:0;width:18px;height:18px;margin:0}.ag-chk input:focus-visible+.ag-box{outline:2px solid #1a73e8;outline-offset:2px}
.ag-box{flex:none;width:18px;height:18px;border-radius:3px;border:2px solid var(--c,#039be5);display:inline-flex;align-items:center;justify-content:center;color:#fff;font:700 12px/1 inherit;font-style:normal}.ag-box.on{background:var(--c,#039be5)}
.ag-share{font-size:13px;border-top:1px solid var(--line);padding-top:10px}.ag-share summary{cursor:pointer;font-weight:600}.ag-share p{margin:6px 0;font-size:12px}
.ag-undated{display:block;width:100%;text-align:left;border:0;background:none;padding:4px 2px;font-size:12px;cursor:pointer;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ag-undated:hover{background:var(--soft)}
.ag-main{background:var(--card);border-radius:16px;border:1px solid var(--line);overflow:hidden;min-width:0}
.ag-title{font-size:20px;font-weight:400;margin:0 8px;white-space:nowrap}.ag-ic{border:0;background:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}.ag-ic.big{font-size:22px}.ag-ic:hover{background:var(--soft)}
.ag-opt{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);margin:0 6px}.ag-opt input{width:auto;margin:0}.ag-vsel{width:auto!important;min-width:150px;border-radius:20px}
.ag-grid{display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:480px}.ag-head{display:grid;grid-template-columns:56px repeat(var(--n),minmax(0,1fr));border-bottom:1px solid var(--line);padding-right:14px}
.ag-tz{font-size:10px;color:var(--mut);align-self:end;padding-bottom:4px}.ag-dh{text-align:center;padding:8px 0 6px;border-left:1px solid var(--line);cursor:pointer}.ag-dh small{display:block;font-size:11px;color:var(--mut);letter-spacing:.5px}
.ag-dh b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-size:24px;font-weight:400;margin-top:2px}.ag-dh:hover b{background:var(--soft)}.ag-dh.today small{color:#1a73e8}.ag-dh.today b{background:#1a73e8;color:#fff}
.ag-scroll{overflow-y:auto;flex:1}.ag-body{display:grid;grid-template-columns:56px repeat(var(--n),minmax(0,1fr));position:relative}.ag-gutter{position:relative}
.ag-hr{height:48px;font-size:10px;color:var(--mut);text-align:right;padding-right:8px;transform:translateY(-6px);box-sizing:border-box}
.ag-col{position:relative;height:1152px;border-left:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 48px;cursor:pointer}
.ag-ev{position:absolute;border-radius:6px;padding:2px 6px;font-size:12px;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px #fff;touch-action:none;user-select:none;box-sizing:border-box}.ag-ev:hover{filter:brightness(.95);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ag-ev.drag{opacity:.8;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:grabbing}.ag-ev.done .ag-ev-t{text-decoration:line-through}.ag-ev.done{opacity:.6}
.ag-ev-t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ag-ev-s{font-size:11px;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-rs{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}.ag-now{position:absolute;left:0;right:0;height:0;border-top:2px solid #ea4335;z-index:4;pointer-events:none}.ag-now i{position:absolute;left:-6px;top:-7px;width:12px;height:12px;border-radius:50%;background:#ea4335}
.ag-month{display:flex;flex-direction:column}.ag-mh{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--mut);padding:8px 0;border-bottom:1px solid var(--line)}
.ag-mg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(110px,1fr)}.ag-mc{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:2px 3px;overflow:hidden;cursor:pointer}
.ag-mc.out .ag-mn{color:var(--mut);opacity:.7}.ag-mn{text-align:center;font-size:12px;padding:2px 0}.ag-mn span{display:inline-flex;min-width:24px;height:24px;align-items:center;justify-content:center;border-radius:12px;padding:0 4px}.ag-mc.today .ag-mn span{background:#1a73e8;color:#fff}
.ag-chip{font-size:11px;border-radius:4px;padding:1px 6px;margin:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.ag-chip span{font-weight:600}.ag-chip.done{text-decoration:line-through;opacity:.6}.ag-more{font-size:11px;font-weight:600;padding:1px 6px;cursor:pointer}
.ag-sched{padding:4px 0}.ag-srow{display:flex;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line)}.ag-sdate{width:64px;flex:none;text-align:left}.ag-sdate b{font-size:22px;font-weight:400;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%}.ag-sdate.today b{background:#1a73e8;color:#fff}.ag-sdate small{display:block;font-size:10px;color:var(--mut)}
.ag-sitems{flex:1;min-width:0}.ag-sitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:7px 6px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink)}.ag-sitem:hover{background:var(--soft)}.ag-sitem.done b{text-decoration:line-through;opacity:.6}.ag-stime{width:112px;flex:none;color:var(--mut)}
.ag-dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none}
.ag-pop{position:fixed;z-index:2000;width:320px;background:#fff;color:var(--ink);border-radius:10px;box-shadow:0 2px 6px rgba(60,64,67,.3),0 8px 24px 6px rgba(60,64,67,.15);padding:8px 16px 14px}
.ag-pop-bar{display:flex;justify-content:flex-end;gap:2px}.ag-pop-title{display:flex;gap:14px;align-items:flex-start;margin:4px 0 10px;font-size:15px}.ag-pop-title .ag-dot{margin-top:5px}.ag-pop-row{font-size:13px;padding:3px 0}.ag-pop-foot{margin-top:10px;display:flex;justify-content:flex-end}
.ag-edit{min-width:min(460px,86vw)}.ag-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.ag-f{display:block;margin:8px 0}.ag-f>span{display:block;font-size:12px;color:var(--mut);margin-bottom:3px}
.ag-lead-res{display:flex;flex-direction:column;gap:2px;margin-top:4px}.ag-lead-res .btn{text-align:left;justify-content:flex-start}
@media(max-width:900px){.ag{grid-template-columns:1fr}.ag-side{position:static}.ag-grid{height:70vh}.ag-title{font-size:16px}.ag-head,.ag-body{grid-template-columns:40px repeat(var(--n),minmax(0,1fr))}.ag-opt{display:none}}
.lead-assign{display:flex;gap:8px;align-items:center;margin-top:6px}.lead-owner{display:block;margin-top:4px}.assign-btn{padding:3px 10px}.assign-list{max-height:320px;overflow:auto;margin-top:8px}.owner-filter{width:auto;min-width:150px}
.ag-year{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;padding:16px}.ag-ym b{display:block;font-size:14px;font-weight:600;margin-bottom:4px;cursor:pointer}.ag-ym b:hover{color:#1a73e8}
.ag-yg{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:1px}.ag-yg small{font-size:10px;color:var(--mut);padding:2px 0}.ag-yd{border:0;background:none;font-size:11px;height:24px;width:24px;margin:0 auto;border-radius:50%;cursor:pointer;color:var(--ink);padding:0;position:relative}.ag-yd.out{cursor:default}.ag-yd:not(.out):hover{background:var(--soft)}
.ag-yd.today{background:#1a73e8;color:#fff;font-weight:700}.ag-yd.has:not(.today)::after{content:'';position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#1a73e8}
@media(max-width:900px){.ag-year{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ag-allday{display:grid;grid-template-columns:56px repeat(var(--n),minmax(0,1fr));border-bottom:1px solid var(--line);padding-right:14px;min-height:26px}.ag-allday .ag-tz{align-self:start;padding:4px 6px 0 0;text-align:right}
.ag-ad{border-left:1px solid var(--line);padding:2px 3px;min-width:0;cursor:pointer}.ag-ghost{pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:6}

.ag.no-side{grid-template-columns:minmax(0,1fr)}.ag.no-side .ag-side{display:none}
.ag-col{user-select:none;-webkit-user-select:none}.ag-chip.drag{opacity:.85;position:relative;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.3)}.ag-mc.drop{background:#e8f0fe}
.ag-snack{position:fixed;left:24px;bottom:24px;z-index:3000;background:#323232;color:#fff;border-radius:6px;padding:12px 16px;display:flex;gap:16px;align-items:center;font-size:14px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.ag-snack button{background:none;border:0;color:#8ab4f8;font:600 14px inherit;cursor:pointer;padding:0}.ag-snack button.x{color:#fff;font-weight:400}

/* Agenda: acabamento visual no estilo do Google Agenda */
.ag,.ag-pop,.ag-menu,.ag-snack,.ag-vbtn,.ag-today,.ag-title,.ag-edit{font-family:'Google Sans',Roboto,'Segoe UI',Arial,sans-serif}
.ag-vbtn,.ag-today{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid #747775;border-radius:20px;background:#fff;color:#1f1f1f;font-size:14px;font-weight:500;cursor:pointer;width:auto}
.ag-vbtn:hover,.ag-today:hover{background:#f6f8fc}.ag-caret{font-size:11px;color:#444746}
.ag-menu{position:fixed;z-index:3000;min-width:250px;background:#fff;border-radius:8px;box-shadow:0 2px 6px 2px rgba(60,64,67,.15),0 1px 2px rgba(60,64,67,.3);padding:8px 0}
.ag-mi{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:0;background:none;padding:8px 16px 8px 12px;font-size:14px;font-weight:400;color:#3c4043;cursor:pointer;text-align:left;height:auto}
.ag-mi:hover{background:#f1f3f4}.ag-mck{width:20px;color:#1a73e8;font-weight:700}.ag-mi span:nth-child(2){flex:1}.ag-mi kbd{font:400 12px inherit;color:#70757a}
.ag-msep{height:1px;background:#dadce0;margin:8px 0}
.ag-sec h4{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}.ag-chev{color:#5f6368;font-weight:400;font-size:13px}
.ag-title{font-size:22px;font-weight:400;color:#1f1f1f}.ag-ic.big{width:40px;height:40px}
.ag-dh b{color:#3c4043}.ag-hr,.ag-tz{color:#70757a}.ag-col{border-left-color:#dadce0;background-image:linear-gradient(#dadce0 1px,transparent 1px)}.ag-head,.ag-allday{border-bottom-color:#dadce0}.ag-dh,.ag-ad{border-left-color:#dadce0}
.ag-main{border:0;box-shadow:none;border-radius:16px}
.ag-caret{display:inline-block;width:0;height:0;font-size:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #444746;margin-left:2px}.ag-ic.big{font-size:26px;line-height:1}

.ag-drag-clone{position:fixed!important;z-index:3500;pointer-events:none;opacity:.92;box-shadow:0 6px 18px rgba(0,0,0,.35);border-radius:6px;padding:2px 6px;font-size:12px;overflow:hidden;box-sizing:border-box;transform:none!important}
.ag-col.drop,.ag-ad.drop{background-color:rgba(26,115,232,.08)}.ag-slot{pointer-events:none;opacity:.55;box-shadow:inset 0 0 0 2px #1a73e8}.ag-chip.ag-slot{background:#039be5;color:#fff}

/* ---------- Agenda: acabamento no espirito Apple (cantos suaves, materiais translucidos, movimento fluido e interrompivel) ---------- */
.ag-main{border-radius:24px;box-shadow:0 1px 2px rgba(16,43,64,.04),0 10px 30px rgba(16,43,64,.06)}
.ag-ev{border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .14s cubic-bezier(.32,.72,0,1),box-shadow .2s,opacity .2s}
.ag-ev:hover{filter:none;box-shadow:0 3px 10px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.3)}.ag-ev:active{transform:scale(.985)}
.ag-chip{border-radius:8px;transition:transform .12s cubic-bezier(.32,.72,0,1),opacity .2s}.ag-chip:active{transform:scale(.97)}
.ag-vbtn,.ag-today,.ag-create,.ag-ic,.ag-mi,.ag-mini-d,.ag-yd{transition:transform .12s cubic-bezier(.32,.72,0,1),background-color .15s,box-shadow .2s}
.ag-vbtn:active,.ag-today:active,.ag-create:active{transform:scale(.97)}.ag-ic:active{transform:scale(.9)}.ag-mini-d:active,.ag-yd:active{transform:scale(.9)}
.ag-create{border-radius:28px}.ag-box{border-radius:6px;transition:background-color .15s,transform .12s}.ag-chk:active .ag-box{transform:scale(.88)}
.ag-pop{border-radius:20px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.65);box-shadow:0 14px 44px rgba(16,43,64,.2),0 2px 8px rgba(16,43,64,.08);transform-origin:var(--ox,0) var(--oy,0);animation:ag-pop-in .3s cubic-bezier(.32,.72,0,1) both}
.ag-menu{border-radius:16px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.65);box-shadow:0 14px 44px rgba(16,43,64,.2),0 2px 8px rgba(16,43,64,.08);transform-origin:top right;animation:ag-pop-in .26s cubic-bezier(.32,.72,0,1) both}
.ag-mi{border-radius:10px;margin:0 6px;width:calc(100% - 12px)}.ag-menu .ag-msep{margin:8px 12px}
.ag-snack{border-radius:16px;background:rgba(38,38,42,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:ag-snack-in .4s cubic-bezier(.32,.72,0,1) both}
.ag-drag-clone{transform:scale(1.03)!important;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.34);will-change:transform}
.ag-slot{border-radius:10px}.ag-year .ag-yd{border-radius:50%}
.ag-title{letter-spacing:-.015em}.ag-dh b{letter-spacing:-.02em}
.ag-enter-r{animation:ag-slide-r .34s cubic-bezier(.32,.72,0,1) both}.ag-enter-l{animation:ag-slide-l .34s cubic-bezier(.32,.72,0,1) both}.ag-enter-f{animation:ag-fade .26s ease-out both}
@keyframes ag-pop-in{from{opacity:0;transform:scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ag-snack-in{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@keyframes ag-slide-r{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes ag-slide-l{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes ag-fade{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ag-pop,.ag-menu,.ag-snack,.ag-enter-r,.ag-enter-l,.ag-enter-f{animation:ag-fade .15s ease-out both}.ag-ev,.ag-chip,.ag-vbtn,.ag-today,.ag-create,.ag-ic{transition:none}.ag-ev:active,.ag-chip:active{transform:none}}
@media (prefers-reduced-transparency:reduce){.ag-pop,.ag-menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.ag-snack{background:#26262a;-webkit-backdrop-filter:none;backdrop-filter:none}}

.ag-book-body{display:block}.ag-book p{margin:6px 0;font-size:12px}.ag-bk{display:block;margin:8px 0;font-size:12px;color:var(--mut)}.ag-bk>span{display:block;margin-bottom:3px}
.ag-bk input,.ag-bk select{width:100%;font-size:13px;padding:7px 9px;border-radius:10px}.ag-bk-row{display:flex;gap:6px;align-items:center;margin:8px 0}.ag-bk-row input{flex:1;min-width:0;font-size:12px;padding:7px 9px;border-radius:10px}
.ag-bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}.ag-bk-grid .ag-bk:first-child:nth-last-child(3){grid-column:1 / -1}
.ag-wds{display:flex;gap:4px}.ag-wd{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:600;cursor:pointer;padding:0;color:var(--ink);transition:transform .12s cubic-bezier(.32,.72,0,1),background-color .15s}.ag-wd.on{background:#1a73e8;border-color:#1a73e8;color:#fff}.ag-wd:active{transform:scale(.9)}
.ag-bk-res{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 0;border-top:1px solid var(--line);color:var(--ink)}.ag-bk-res span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Camada Apple Design (por ultimo): resposta imediata, molas sem quique, materiais translucidos, tipografia por tamanho, movimento reduzido ---------- */
:root{--spring:cubic-bezier(.32,.72,0,1);--mat:rgba(255,255,255,.72);--mat-thick:rgba(255,255,255,.84);--mat-edge:rgba(255,255,255,.7);--hair:rgba(16,43,64,.08);--ring:0 0 0 4px rgba(21,59,86,.12);--shadow-float:0 18px 50px rgba(16,43,64,.18),0 2px 8px rgba(16,43,64,.07)}
/* tipografia: titulos grandes apertam, texto pequeno respira, numeros alinhados */
body{letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto}
.top h1{font-size:26px;line-height:1.1;letter-spacing:-.035em}
.card h3{line-height:1.25;letter-spacing:-.02em}
.modal h2{font-size:20px;line-height:1.2;letter-spacing:-.025em}
th,.tblwrap th,.contact-method-label,.act-fields>div>label,.lead-sec>b,.gresults h4{letter-spacing:.04em}
.kpi b,td,.badge,.goalbar{font-variant-numeric:tabular-nums}
.kpi b{letter-spacing:-.04em}
/* resposta: feedback na hora do toque, mola critica (sem overshoot) */
.btn,.side a,.settabs a,.seg a,.conv,.var-chip,.tblwrap tr.clk,.conversation-list>button,.ag-create,.contact-method-add{transition:transform .16s var(--spring),background-color .15s ease,border-color .15s ease,box-shadow .2s ease,color .15s ease}
.btn:active:not(:disabled),.settabs a:active,.seg a:active,.var-chip:active,.contact-method-add:active{transform:scale(.97);transition-duration:.08s}
.side a:active{transform:scale(.97)!important;transition-duration:.08s}
.conv:active,.conversation-list>button:active,.tblwrap tr.clk:active{background:#e3ecf3!important;transition-duration:.05s}
.lead:active{transform:scale(.985);transition-duration:.08s}
/* foco: anel suave e visivel */
:where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:var(--ring);outline:none}
/* controle segmentado estilo iOS */
.seg{background:rgba(118,128,140,.14);border:0;padding:3px;border-radius:12px}
.seg a{color:var(--ink);font-weight:650;border-radius:9px}
.seg a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,43,64,.18),0 1px 1px rgba(16,43,64,.08)}
.settabs a.on{background:var(--pri);box-shadow:0 4px 12px rgba(16,43,64,.18)}
/* materiais: barra superior fosca, sem linha dura (borda de luz embaixo) */
.top{background:var(--mat);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--hair);box-shadow:0 1px 0 var(--mat-edge) inset}
.lead-bar{background:var(--mat-thick);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom-color:var(--hair)}
.chat>.top,.conversation-layout .chat-main>.top{background:var(--mat-thick)}
/* superficies flutuantes: vidro, sombra mais funda quanto maior */
.quick-sug,.gresults,.colpick .card{background:var(--mat-thick);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--mat-edge);border-radius:16px;box-shadow:var(--shadow-float);transform-origin:top right}
.gresults,.quick-sug{animation:ap-pop .26s var(--spring) both}
.gresults button,.quick-sug button{border-radius:10px;width:calc(100% - 12px);margin:0 6px;transition:background-color .12s ease,transform .12s var(--spring)}
.gresults button:active,.quick-sug button:active{transform:scale(.98)}
.modal-bg{background:rgba(10,24,38,.38);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
.modal{box-shadow:var(--shadow-float);animation:ap-materialize .34s var(--spring) both}
.drawer{background:var(--mat-thick);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:-18px 0 50px rgba(16,43,64,.18);animation:ap-drawer .36s var(--spring) both}
.drawer .chat{background:transparent}
.toast{background:rgba(16,43,64,.88);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-radius:16px;box-shadow:var(--shadow-float);animation:ap-toast .4s var(--spring) both}
.toast.bad{background:rgba(197,48,64,.92)}
@keyframes ap-materialize{from{opacity:0;transform:translateY(10px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ap-pop{from{opacity:0;transform:scale(.94);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes ap-drawer{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes ap-toast{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
/* profundidade e ritmo: cartoes planos e leves, elevacao so no que se toca */
.card{border-color:var(--hair);box-shadow:0 1px 2px rgba(16,43,64,.04),0 8px 28px rgba(16,43,64,.05)}
.card .card{box-shadow:none;border-color:var(--hair)}
.tblwrap,table{border:1px solid var(--hair)}
th,td{border-bottom-color:var(--hair)}
.col{border-color:var(--hair)}
.lead{border-color:var(--hair);transition:transform .22s var(--spring),box-shadow .22s ease,border-color .15s ease,opacity .15s ease}
.page{scrollbar-width:thin;scrollbar-color:rgba(16,43,64,.22) transparent}
.convs,.conversation-rail,.msgs,.ag-scroll,.modal,.drawer{scrollbar-width:thin;scrollbar-color:rgba(16,43,64,.22) transparent}
::selection{background:rgba(195,154,88,.3)}
/* acessibilidade: tres sinais independentes */
@media(prefers-reduced-motion:reduce){
  .modal,.gresults,.quick-sug,.drawer,.toast,.colpick[open]>.card{animation:ap-fade .15s ease-out both}
  .btn:active:not(:disabled),.side a:active,.settabs a:active,.seg a:active,.lead:active{transform:none}
  .lead,.btn,.side a{transition-duration:.01s}
}
@keyframes ap-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-transparency:reduce){
  .top,.lead-bar,.quick-sug,.gresults,.colpick .card,.drawer,.chat>.top,.conversation-layout .chat-main>.top{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .modal-bg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,24,38,.55)}
  .toast{background:#102b40;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-contrast:more){
  :root{--hair:rgba(16,43,64,.35);--mut:#3f5163}
  .card,.tblwrap,table,.lead,.col,input,select,textarea,.btn.ghost{border-color:#5d7285}
}
/* Telas publicas: sem cartao dentro de cartao; links com cara de link */
.auth .card .card{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.auth h1{letter-spacing:-.035em}
.auth a{color:var(--pri);font-weight:650;text-decoration:underline;text-decoration-color:rgba(21,59,86,.28);text-underline-offset:3px;transition:text-decoration-color .15s ease}
.auth a:hover{text-decoration-color:currentColor}
/* Cartoes de indicadores: cinco cabem numa linha (Parceiro / Comissoes) */
.grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.ag-bk-off{background:#fff4e5;color:#8a4b00;border-radius:12px;padding:8px 10px;font-size:12px;margin:6px 0}.ag-bk-row input.is-off{opacity:.5;text-decoration:line-through}.ag-bk-row .btn.is-off{opacity:.5}

/* ---------- Automacoes do Instagram: folha de edicao, controles segmentados, cartoes e previa (camada Apple) ---------- */
.ig-panel{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.ig-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:4px 2px}
.ig-head h3{margin:0;font-size:22px;letter-spacing:-.03em;line-height:1.15}
.ig-head p{margin:4px 0 0;color:var(--mut);font-size:14px;max-width:520px}
.ig-list{display:flex;flex-direction:column;gap:12px}
.ig-card{display:flex;gap:16px;align-items:flex-start;background:var(--mat-thick);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--hair);border-radius:22px;padding:18px 20px;box-shadow:0 1px 0 var(--mat-edge) inset,0 8px 24px rgba(16,43,64,.06);transition:transform .22s var(--spring),box-shadow .22s ease,opacity .2s ease}
.ig-card:hover{transform:translateY(-2px);box-shadow:0 1px 0 var(--mat-edge) inset,0 14px 34px rgba(16,43,64,.10)}
.ig-card.off{opacity:.62}
.ig-ico{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(21,59,86,.08);color:var(--pri);flex:none}
.ig-ico.big{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#183e58,#2b5f86);color:#fff;box-shadow:0 6px 16px rgba(24,62,88,.28)}
.ig-card-main{flex:1;min-width:0}
.ig-card-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ig-card h4{margin:0;font-size:17px;letter-spacing:-.025em;line-height:1.25;overflow-wrap:anywhere}
.ig-when{margin:6px 0 0;font-size:15px;color:var(--ink);line-height:1.4}
.ig-then{margin:2px 0 0;font-size:14px;color:var(--mut)}
.ig-meta{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--mut)}
.ig-meta span:not(:last-child)::after{content:'·';margin-left:14px;opacity:.5}
.ig-err{color:var(--bad);font-size:12.5px}
.ig-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn.danger{color:var(--bad)}
.ig-skel{height:104px;border-radius:22px;background:linear-gradient(100deg,#eef2f6 30%,#f8fafc 50%,#eef2f6 70%);background-size:200% 100%;animation:ig-skel 1.3s ease-in-out infinite}
@keyframes ig-skel{to{background-position:-200% 0}}
/* estado vazio e modelos */
.ig-empty{text-align:center;padding:44px 20px;background:var(--mat-thick);border:1px solid var(--hair);border-radius:26px}
.ig-empty-ico{width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,#183e58,#2b5f86);color:#fff;display:inline-grid;place-items:center;margin-bottom:12px;box-shadow:0 10px 24px rgba(24,62,88,.3)}
.ig-empty h3{margin:0 0 6px;font-size:22px;letter-spacing:-.03em}.ig-empty p{margin:0 auto 16px;max-width:380px;color:var(--mut)}
.ig-start h3{margin:0;font-size:20px;letter-spacing:-.03em}.ig-start>p{margin:4px 0 14px;color:var(--mut)}
.ig-start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ig-tpl{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:var(--mat-thick);border:1px solid var(--hair);border-radius:22px;padding:18px;cursor:pointer;box-shadow:0 8px 22px rgba(16,43,64,.06);transition:transform .2s var(--spring),box-shadow .2s ease}
.ig-tpl:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(16,43,64,.12)}.ig-tpl:active{transform:scale(.97)}
.ig-tpl b{font-size:15.5px;letter-spacing:-.02em;line-height:1.25}.ig-tpl span{font-size:13.5px;color:var(--mut);line-height:1.4}
/* interruptor estilo iOS */
.ig-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin:0;color:inherit;font-size:13.5px;font-weight:600;user-select:none}
.ig-switch input{position:absolute;opacity:0;width:1px;height:1px}
.ig-track{width:46px;height:28px;border-radius:99px;background:#d3dbe3;position:relative;flex:none;transition:background-color .2s ease}
.ig-track i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .28s var(--spring)}
.ig-switch input:checked+.ig-track{background:#34c759}.ig-switch input:checked+.ig-track i{transform:translateX(18px)}
.ig-switch:active .ig-track i{width:28px}.ig-switch input:checked:active+.ig-track i{transform:translateX(14px)}
.ig-switch input:focus-visible+.ig-track{outline:3px solid #a87e38;outline-offset:3px}
/* controle segmentado */
.ig-seg{display:flex;gap:4px;padding:4px;background:rgba(118,128,140,.14);border-radius:14px;width:100%}
.ig-seg button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:transparent;border-radius:11px;padding:9px 10px;cursor:pointer;color:var(--mut);transition:background-color .2s ease,color .2s ease,box-shadow .25s ease,transform .16s var(--spring);min-height:44px;justify-content:center}
.ig-seg button b{font-size:14px;letter-spacing:-.015em;font-weight:650}.ig-seg button small{font-size:11.5px;opacity:.8;line-height:1.2}
.ig-seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(16,43,64,.14),0 0 0 .5px rgba(16,43,64,.06)}
.ig-seg button:active{transform:scale(.97)}
/* folha de edicao */
.modal.ig-wide{width:min(980px,100%)}
.modal.ig-flush{padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:92dvh}
.ig-sheet{display:flex;flex-direction:column;min-height:0;max-height:92dvh}
.ig-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:var(--mat);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--hair);position:sticky;top:-26px;z-index:5;margin:-26px -26px 14px}
.modal.ig-flush .ig-sheet-head{position:static;margin:0;flex:none}
.ig-sheet-head h2{margin:0}
.ig-head-btns{display:flex;gap:8px;flex:none}
.ig-name{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;font-size:21px;font-weight:700;letter-spacing:-.03em;padding:6px 2px!important}
.ig-name:focus{outline:none}.ig-name::placeholder{color:#9aa9b6;font-weight:600}
.ig-sheet-body{overflow:auto;padding:20px 22px 26px;min-height:0;flex:1}
.ig-cols{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;align-items:start}
.ig-col-side{position:sticky;top:0}
.ig-sec{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--hair)}
.ig-sec-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.ig-sec-head h3{margin:0;font-size:17px;letter-spacing:-.025em}.ig-sec-head p{margin:2px 0 0;color:var(--mut);font-size:13.5px}
.ig-num{width:26px;height:26px;border-radius:50%;background:var(--pri);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;flex:none;margin-top:1px}
.ig-sec>select{margin-bottom:10px}
.ig-sub{display:flex;flex-direction:column;gap:12px;margin-top:12px;animation:ig-in .3s var(--spring) both}
.ig-sub[hidden],.ig-field[hidden],.ig-thumbs[hidden],.ig-seg[hidden],.ig-switch[hidden]{display:none}
@keyframes ig-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ig-field{display:flex;flex-direction:column;gap:8px;margin:10px 0 16px;animation:ig-in .3s var(--spring) both}
.ig-field label{margin:0;font-size:13px;color:var(--mut)}
.ig-sec textarea,.ig-field textarea,.ig-field input,.ig-sec select{border-radius:14px;border:1px solid var(--line);background:#fff;padding:12px 14px;width:100%;transition:border-color .15s ease,box-shadow .2s ease}
.ig-sec textarea:focus,.ig-field input:focus,.ig-chips:focus-within{border-color:var(--pri);box-shadow:var(--ring);outline:none}
.ig-chips{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:8px 10px;min-height:48px;cursor:text;transition:border-color .15s ease,box-shadow .2s ease}
.ig-chips input{flex:1;min-width:150px;border:0!important;box-shadow:none!important;padding:6px 2px!important;background:transparent!important;border-radius:0!important;width:auto}
.ig-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(21,59,86,.1);color:var(--pri);border-radius:99px;padding:5px 6px 5px 12px;font-weight:650;font-size:13.5px;animation:ig-pop .25s var(--spring) both}
.ig-chip button{border:0;background:rgba(21,59,86,.14);color:inherit;width:20px;height:20px;border-radius:50%;line-height:1;cursor:pointer;font-size:14px;padding:0}
@keyframes ig-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.ig-more{border-radius:14px}.ig-more summary{cursor:pointer;color:var(--mut);font-weight:600;font-size:13.5px;padding:4px 0;width:fit-content}
.ig-more[open] summary{margin-bottom:8px}
.ig-extras{margin:0 0 16px}.ig-check{display:flex;gap:10px;align-items:center;color:inherit;font-size:14px;margin:6px 0}.ig-check input{width:auto}
.ig-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.ig-thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;background:#e7edf2;display:grid;place-items:center;color:var(--mut);font-size:12px;box-shadow:0 0 0 1px var(--hair)}
.ig-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* seletor de posts */
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.ig-post{position:relative;border:0;padding:0;border-radius:16px;overflow:hidden;background:#e9eef3;text-align:left;cursor:pointer;box-shadow:0 0 0 1px var(--hair);transition:transform .22s var(--spring),box-shadow .2s ease}
.ig-post img,.ig-noimg{width:100%;aspect-ratio:1;object-fit:cover;display:grid;place-items:center}
.ig-post small{display:block;padding:6px 8px;font-size:11.5px;color:var(--mut);background:#fff}
.ig-post:active{transform:scale(.96)}
.ig-post.on{box-shadow:0 0 0 3px #34c759,0 8px 20px rgba(52,199,89,.28);transform:scale(.97)}
.ig-tick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:#34c759;color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .28s var(--spring)}
.ig-post.on .ig-tick{transform:scale(1)}
/* previa */
.ig-side-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.ig-phone{background:#f2f4f7;border-radius:26px;padding:16px 12px;display:flex;flex-direction:column;gap:10px;min-height:200px;box-shadow:inset 0 0 0 1px var(--hair)}
.ig-bub{max-width:92%;padding:9px 13px;border-radius:19px;font-size:13.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;animation:ig-pop .3s var(--spring) both}
.ig-bub small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;opacity:.65;margin-bottom:2px}
.ig-bub.them{background:#fff;align-self:flex-start;border-bottom-left-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ig-bub.me{background:linear-gradient(145deg,#2b5f86,#183e58);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.ig-bub.me.pub{background:#e6edf3;color:var(--ink)}
.ig-prev-empty{font-size:12.5px;text-align:center;margin:auto 0}
/* historico */
.ig-log{display:flex;flex-direction:column}.ig-log-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hair)}
.ig-log-row small{margin-left:auto;color:var(--mut);white-space:nowrap}
.ig-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none;background:#e0a100}.ig-dot.ok{background:#34c759}.ig-dot.error{background:var(--bad)}
@media(max-width:820px){
  .ig-cols{grid-template-columns:1fr}.ig-col-side{position:static;order:-1}.ig-phone{min-height:0}
  .ig-sheet-head{padding:12px 14px}.ig-name{font-size:18px}.ig-sheet-body{padding:16px 14px 22px}
  .ig-card{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .ig-card:hover,.ig-tpl:hover{transform:none}.ig-sub,.ig-field,.ig-chip,.ig-bub{animation:none}
  .ig-track i,.ig-tick,.ig-post,.ig-seg button{transition-duration:.01s}.ig-skel{animation:none}
}
@media(prefers-reduced-transparency:reduce){.ig-card,.ig-sheet-head{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){.ig-card,.ig-tpl,.ig-chips,.ig-seg{border:1px solid #5d7285}}

/* variacoes de resposta: uma caixa por variacao + botao adicionar */
.ig-vars{display:flex;flex-direction:column;gap:10px}
.ig-var{display:flex;flex-direction:column;gap:6px;animation:ig-in .3s var(--spring) both}
.ig-var-head{display:flex;justify-content:space-between;align-items:center}
.ig-var-head small{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.ig-var-x{border:0;background:rgba(16,43,64,.08);color:var(--mut);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;padding:0;transition:background-color .15s ease,transform .16s var(--spring)}
.ig-var-x:hover{background:rgba(197,48,64,.14);color:var(--bad)}.ig-var-x:active{transform:scale(.9)}
.ig-var textarea{resize:vertical;min-height:64px}
.ig-add{align-self:flex-start;border:1.5px dashed rgba(21,59,86,.35);background:rgba(21,59,86,.04);color:var(--pri);font-weight:650;border-radius:12px;padding:9px 14px;cursor:pointer;transition:background-color .15s ease,transform .16s var(--spring)}
.ig-add:hover{background:rgba(21,59,86,.09)}.ig-add:active{transform:scale(.97)}
.ig-var-hint{margin:0;font-size:12.5px;color:var(--mut)}
@media(prefers-reduced-motion:reduce){.ig-var{animation:none}}

/* WhatsApp oficial: previa do modelo */
.wa-bubble{background:#dcf8c6;color:#111;border-radius:12px 12px 12px 2px;padding:10px 12px;max-width:420px;white-space:pre-wrap;font-size:14px;line-height:1.45;box-shadow:0 1px 2px #0002;min-height:20px}
@media (prefers-color-scheme:dark){.wa-bubble{background:#1f4d3a;color:#e8f5ee}}