/* ============================================================
   CRM ātna — folha de estilo única
   Paleta e tipografia vêm do material de marca entregue pela Luana.
   ============================================================ */

/* ============ FONTES ============
 *
 * As da marca são TT Hoves e Ivy Ora. As duas são PAGAS e a licença que a designer
 * usou pra montar o material é de desktop — não cobre embutir num site. Enquanto a
 * licença web e os .woff2 não chegam, o sistema roda com substitutas livres:
 *
 *   Inter             no lugar da TT Hoves   (grotesca de tela, numeral tabular)
 *   Playfair Display  no lugar da Ivy Ora    (serifada de alto contraste)
 *
 * As duas são SIL Open Font License 1.1, que PERMITE embutir em site — texto das
 * licenças em publico/fontes/. Servidas da pasta dela, não de CDN externo: uma
 * requisição a menos pra fora e nada quebra se o CDN sair do ar.
 *
 * Chegando os arquivos das originais, é só pôr em publico/fontes/ e descomentar o
 * bloco abaixo. Os nomes já estão na frente da pilha em --fonte-texto/--fonte-serifa,
 * então nenhum outro lugar muda.
 *
@font-face{font-family:"TT Hoves";src:url("fontes/tt-hoves-light.woff2") format("woff2");
  font-weight:300;font-display:swap}
@font-face{font-family:"TT Hoves";src:url("fontes/tt-hoves-regular.woff2") format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"TT Hoves";src:url("fontes/tt-hoves-medium.woff2") format("woff2");
  font-weight:600;font-display:swap}
@font-face{font-family:"Ivy Ora";src:url("fontes/ivy-ora-regular.woff2") format("woff2");
  font-weight:400;font-display:swap}
 */

/* Inter — latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('fontes/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Inter — latin */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('fontes/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Playfair Display — latin-ext */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 600;
  font-display:swap;src:url('fontes/playfair-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Playfair Display — latin */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 600;
  font-display:swap;src:url('fontes/playfair-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  /* paleta oficial — marca/cores.css */
  --marsala:#331813;
  --marmore:#f2f3ed;
  --natural:#ede5d6;
  --terra:#684a32;
  --tinta-logo:#211111;

  /* papéis na interface */
  --bg:var(--marmore);
  --panel:#fff;
  --ink:var(--marsala);
  --ink2:var(--terra);
  --ink3:#9c8b7d;
  --line:#ded4c4;
  --linha-suave:#eee8dd;
  --brand:var(--marsala);
  --accent:var(--terra);
  --acao:var(--marsala);          /* cor de ação: botão principal */
  --acao-hover:#4a251c;
  --acao-texto:var(--marmore);
  --superficie:var(--natural);

  --ok:#4a6b3a;
  --alerta:#b08d5b;
  --erro:#8b3a2f;

  --fonte-texto:"TT Hoves","Inter",system-ui,-apple-system,sans-serif;
  --fonte-serifa:"Ivy Ora","Playfair Display",Georgia,serif;

  --sh:0 1px 2px rgba(51,24,19,.05),0 8px 24px -12px rgba(51,24,19,.16);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:var(--fonte-texto);background:var(--bg);color:var(--ink);
  font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden;
  font-variant-numeric:tabular-nums}
button,input,select,textarea{font-family:inherit;color:inherit}
a{color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cfc2b0;border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
.mono{font-variant-numeric:tabular-nums}

/* Títulos leves e abertos — é o que o guia da marca chama de "leve e equilibrada" */
h1,h2,h3{font-weight:300;letter-spacing:.02em}

/* ============ SHELL ============ */
.app{display:grid;grid-template-columns:212px 1fr;height:100vh}
aside{background:linear-gradient(170deg,#4a251c,var(--marsala) 55%,#2a1310);display:flex;
  flex-direction:column;padding:17px 0 0;z-index:30}
.logo{padding:0 17px 20px}
.logo img{width:118px;height:auto;display:block;
  /* a logo vem em marsala escuro; na barra escura ela precisa virar clara */
  filter:brightness(0) invert(1);opacity:.95}
.logo small{display:block;margin-top:7px;font-size:9.5px;font-weight:600;color:#c2a878;
  letter-spacing:1.4px;text-transform:uppercase}
.menu{display:flex;flex-direction:column;gap:2px;padding:0 9px;overflow-y:auto}
.menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  color:#c9b5a3;font-size:13px;font-weight:500;padding:9px 11px;border-radius:9px;cursor:pointer;
  transition:.15s;text-align:left}
.menu button svg{width:16px;height:16px;flex:0 0 auto;opacity:.85}
.menu button:hover{background:rgba(255,255,255,.07);color:var(--marmore)}
.menu button.on{background:linear-gradient(135deg,rgba(242,243,237,.17),rgba(242,243,237,.06));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(242,243,237,.22)}
.menu button.on svg{opacity:1;color:var(--natural)}
.menu button .badge{margin-left:auto;background:var(--erro);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:20px;min-width:18px;text-align:center}
.menu .grp{margin:10px 11px 4px;font-size:9px;text-transform:uppercase;letter-spacing:.8px;
  color:#9c7f6a;font-weight:700}
.side-foot{margin-top:auto;padding:13px 15px 16px;border-top:1px solid rgba(255,255,255,.09)}
.side-foot .row{display:flex;align-items:center;gap:9px}
.av{width:29px;height:29px;border-radius:50%;background:var(--terra);color:var(--marmore);
  display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 auto}
.side-foot .nm{color:var(--marmore);font-size:12px;font-weight:600;line-height:1.2}
.side-foot .rl{color:#c2a878;font-size:10px}
.side-foot .sync{margin-top:9px;width:100%;display:block;text-align:center;text-decoration:none;
  background:rgba(255,255,255,.08);border:0;color:#c9b5a3;font-size:10.5px;font-weight:600;
  padding:7px;border-radius:7px;cursor:pointer}
.side-foot .sync:hover{background:rgba(255,255,255,.16);color:#fff}

/* min-width:0 é o que segura o quadro do funil dentro da tela. Item de grid nasce com
   min-width:auto, então ele cresce até caber o conteúdo mais largo em vez de deixar o
   .board rolar por dentro — e aí a página inteira passa a rolar pro lado no celular. */
.main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.content > .view{min-width:0;max-width:100%}
.top{background:#fff;border-bottom:1px solid var(--line);padding:0 20px;display:flex;
  align-items:center;gap:13px;height:57px;flex:0 0 auto}
.top h2{font-size:17px;font-weight:300;letter-spacing:.01em;white-space:nowrap}
.top .cnt{font-size:11.5px;color:var(--ink2);font-weight:600;background:var(--natural);
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.search{margin-left:auto;position:relative;display:flex;align-items:center}
.search input{border:1px solid var(--line);background:var(--marmore);border-radius:9px;
  padding:8px 12px;font-size:13px;width:220px;outline:0;transition:.15s}
.search input:focus{border-color:var(--terra);background:#fff;box-shadow:0 0 0 3px rgba(104,74,50,.12)}
.btn-novo{background:var(--acao);color:var(--acao-texto);border:0;font-size:12.5px;font-weight:700;
  padding:9px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.btn-novo:hover{background:var(--acao-hover)}
.content{overflow-y:auto;overflow-x:hidden;padding:18px 20px 40px;flex:1}
.view{display:none}.view.on{display:block}

/* ============ TOOLBAR ============ */
.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.sel{position:relative;display:flex;align-items:center}
.sel select{appearance:none;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:8px 30px 8px 12px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--sh);outline:0}
.sel:after{content:'';position:absolute;right:12px;pointer-events:none;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid var(--ink3)}
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;box-shadow:var(--sh)}
.seg button{border:0;background:none;font-size:12.5px;font-weight:600;color:var(--ink2);padding:6px 12px;
  border-radius:7px;cursor:pointer;transition:.13s;white-space:nowrap}
.seg button:hover{background:var(--natural)}
.seg button.on{background:var(--marsala);color:#fff}
.hint{font-size:11.5px;color:var(--ink3);margin-left:auto;display:flex;align-items:center;gap:5px;font-weight:500}

/* ============ KANBAN ============ */
/* o quadro inteiro não seleciona texto: arrastar card e selecionar texto brigam */
.board{display:flex;gap:11px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;
  user-select:none;-webkit-user-select:none}
.col{flex:0 0 254px;background:var(--natural);border-radius:14px;display:flex;flex-direction:column;
  max-height:calc(100vh - 185px);transition:.15s}
.col.over{background:#e3d7c2;box-shadow:0 0 0 2px var(--terra) inset}
.col-h{padding:11px 12px 9px;flex:0 0 auto}
.col-h .t{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.col-h .pip{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.col-h .nm{font-size:12.5px;font-weight:700;letter-spacing:-.1px;flex:1}
.col-h .n{font-size:11.5px;font-weight:700;color:var(--ink2);background:#fff;border-radius:20px;
  padding:2px 9px;min-width:25px;text-align:center;box-shadow:var(--sh)}
.col-h .pontinhos{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:16px;
  line-height:1;padding:2px 4px;border-radius:6px;flex:0 0 auto;opacity:.5;transition:.13s}
.col:hover .pontinhos{opacity:1}
.col-h .pontinhos:hover{background:rgba(51,24,19,.09);color:var(--ink)}

/* menu de três pontinhos da coluna */
#menu-etapa{position:fixed;z-index:250;width:210px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:5px;box-shadow:0 14px 34px -10px rgba(51,24,19,.35)}
#menu-etapa button{display:block;width:100%;text-align:left;border:0;background:none;
  font-size:13px;font-weight:600;color:var(--ink);padding:9px 11px;border-radius:8px;cursor:pointer}
#menu-etapa button:hover{background:var(--marmore)}
#menu-etapa button.perigo{color:var(--erro)}
#menu-etapa button.perigo:hover{background:#f6e3dd}
#menu-etapa .travado{font-size:11px;color:var(--ink3);padding:8px 11px;line-height:1.45;font-weight:500}

/* coluna-botão no fim do quadro */
.col-nova{flex:0 0 150px;align-self:stretch;min-height:120px;background:none;cursor:pointer;
  border:2px dashed var(--line);border-radius:14px;color:var(--ink3);font-size:12px;font-weight:700;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:.15s}
.col-nova span{font-size:22px;font-weight:300;line-height:1}
.col-nova:hover{border-color:var(--terra);color:var(--terra);background:rgba(104,74,50,.05)}

/* seletor de cor da etapa */
.cores{display:flex;flex-wrap:wrap;gap:7px}
.cores button{width:34px;height:34px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(51,24,19,.12)}
.cores button.on{border-color:var(--marsala);transform:scale(1.06)}
.col-h .meter{height:3px;border-radius:3px;background:#dccdb8;overflow:hidden}
.col-h .meter i{display:block;height:100%;border-radius:3px}
.col-h .sub{font-size:10.5px;color:var(--ink3);margin-top:6px;font-weight:600;min-height:13px}
.col-b{overflow-y:auto;padding:2px 8px 10px;display:flex;flex-direction:column;gap:7px;min-height:60px}

.card{background:#fff;border-radius:11px;padding:10px 11px;cursor:grab;box-shadow:var(--sh);
  border-left:3px solid var(--line);transition:transform .12s,box-shadow .12s;position:relative;
  touch-action:none;user-select:none}
.card:hover{box-shadow:0 2px 4px rgba(51,24,19,.06),0 12px 26px -10px rgba(51,24,19,.26);transform:translateY(-1px)}
.card.podre{background:linear-gradient(180deg,#fbf0ec,#fff);box-shadow:0 0 0 1px #e5c4bb,var(--sh)}
/* Lugar de origem enquanto arrasta: mantém o espaço (a coluna não pula) mas some o
   conteúdo, senão o card original e o que segue o cursor se sobrepõem e confundem. */
.card.ghost{background:rgba(51,24,19,.05);box-shadow:none;border-left-color:transparent}
.card.ghost > *{visibility:hidden}
.card .l1{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:5px}
.card .nm{font-size:13px;font-weight:600;line-height:1.25;letter-spacing:-.15px}
.card .serv{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;
  background:var(--natural);color:var(--ink2);margin-bottom:6px}
.card .ft{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;
  color:var(--ink3);font-weight:600}
.card .cr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.card .vl{color:var(--ok);font-weight:800;font-size:10.5px}
.card .rot{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--erro);
  margin-top:5px;padding-top:5px;border-top:1px dashed #e5c4bb}
.card .acao{font-size:10px;font-weight:600;color:var(--ink2);margin-top:5px;padding-top:5px;
  border-top:1px dashed var(--linha-suave);display:flex;gap:4px;align-items:center}
.card .acao.venceu{color:var(--erro)}
.vazio{border:2px dashed #d3c4ae;border-radius:11px;padding:13px;text-align:center;font-size:11.5px;
  color:#b0a08e;font-weight:600}
.vazio-tab{text-align:center;padding:44px;color:var(--ink3)}
/* O card que segue o cursor. Posicionado por transform (não por left/top): o navegador
   resolve no compositor e o movimento fica liso em vez de picotado. */
#fly{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none;
  will-change:transform}
/* Sombra no card de dentro, com box-shadow. Antes era filter:drop-shadow no #fly,
   que obriga o navegador a redesenhar a sombra a cada quadro do arrasto e picota
   o movimento. box-shadow o compositor resolve sozinho. */
#fly .card{cursor:grabbing;box-shadow:0 16px 30px -6px rgba(51,24,19,.4);transition:none}
body.arrastando{cursor:grabbing;user-select:none}
body.arrastando .card{cursor:grabbing}

/* ============ HOJE ============ */
.hoje-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:13px}
.hbox{background:#fff;border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.hbox .hh{padding:13px 15px;border-bottom:1px solid var(--linha-suave);display:flex;align-items:center;gap:8px}
.hbox .hh .ic{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.hbox .hh .tt{font-size:13px;font-weight:700;flex:1}
.hbox .hh .n{font-size:11.5px;font-weight:700;background:var(--natural);color:var(--ink2);
  padding:2px 9px;border-radius:20px}
.hbox .hb{max-height:340px;overflow-y:auto}
.hitem{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--linha-suave);cursor:pointer}
.hitem:last-child{border:0}
.hitem:hover{background:var(--marmore)}
.hitem .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.hitem .txt{flex:1;min-width:0}
.hitem .n1{font-size:13px;font-weight:600;line-height:1.25}
.hitem .n2{font-size:11px;color:var(--ink3);font-weight:500;margin-top:1px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hitem .tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;
  background:var(--natural);color:var(--ink2)}
.hitem .tag.alerta{background:#f6e3dd;color:var(--erro)}
.limpo{padding:34px 16px;text-align:center;color:var(--ink3);font-size:12.5px;font-weight:500}

/* ============ TABELA ============ */
.tablewrap{background:#fff;border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.scroll-x{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink3);padding:11px 14px;background:var(--marmore);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--linha-suave);font-size:13px;vertical-align:middle}
tbody tr{cursor:pointer;transition:.1s}
tbody tr:hover{background:var(--marmore)}
tbody tr:last-child td{border-bottom:0}
th.r,td.r{text-align:right}
td .who{display:flex;align-items:center;gap:9px}
td .who .ini{width:29px;height:29px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-size:10.5px;font-weight:700}
td .who .l1{font-weight:600;font-size:13px;line-height:1.25}
td .who .l2{font-size:11px;color:var(--ink3);font-weight:500}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3.5px 9px;
  border-radius:20px;white-space:nowrap}
.trunc{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ PAINÉIS E MÉTRICAS ============ */
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:13px;align-items:start}
.panel{background:#fff;border-radius:14px;padding:16px 17px;box-shadow:var(--sh);margin-bottom:13px}
.panel h3{font-size:15px;font-weight:300;letter-spacing:.01em;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.panel .sub{font-size:12px;color:var(--ink3);margin:4px 0 15px;font-weight:500;line-height:1.45}
.panel label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink3);display:block;margin-bottom:5px;margin-top:11px}

.numerao{font-size:38px;font-weight:300;letter-spacing:-1px;margin:6px 0 2px;font-family:var(--fonte-serifa)}
.tabela-metas tbody tr{cursor:default}
.tabela-metas tbody tr:hover{background:transparent}
.tabela-metas tr.passado td{opacity:.55}
.tabela-metas input{padding:7px 9px;font-size:12.5px}
.tabela-metas .agora{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:var(--marsala);color:var(--marmore);padding:2px 7px;border-radius:20px;margin-left:6px}
.linha-meta{display:flex;justify-content:space-between;margin-top:9px;font-size:12.5px;font-weight:700}

.fun{display:flex;flex-direction:column;gap:7px}
.fstep{display:grid;grid-template-columns:1fr 82px;gap:11px;align-items:center}
.fstep .lbl{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:600;
  margin-bottom:4px;color:var(--ink2)}
.fstep .lbl .n{font-weight:800;font-size:12.5px;color:var(--ink)}
.ftrack{height:9px;background:var(--natural);border-radius:6px;overflow:hidden}
.ftrack i{display:block;height:100%;border-radius:6px;transition:width .6s cubic-bezier(.3,1,.4,1)}
.fstep .pc{font-size:12px;font-weight:700;text-align:right;color:var(--ink2)}
.fstep .pc small{display:block;font-size:9px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.3px}
.fstep.ralo .pc{color:var(--erro)}
.ralo-b{display:inline-block;background:#f6e3dd;color:var(--erro);font-size:8.5px;font-weight:700;
  padding:1.5px 6px;border-radius:5px;margin-left:5px;text-transform:uppercase;letter-spacing:.3px}

.bars{display:flex;flex-direction:column;gap:10px}
.brow .lb{display:flex;justify-content:space-between;font-size:12px;font-weight:600;margin-bottom:5px}
.brow .lb span:last-child{color:var(--ink3)}
.btrack{height:8px;background:var(--natural);border-radius:5px;overflow:hidden}
.btrack.grosso{height:14px;border-radius:8px;margin-top:13px}
.btrack i{display:block;height:100%;border-radius:5px;transition:width .5s}
.destaque{background:var(--marmore);border-radius:11px;padding:13px 15px;margin-top:13px;font-size:12.5px;
  line-height:1.5;color:var(--ink2);font-weight:500;border-left:3px solid var(--terra)}
.destaque b{color:var(--ink);font-weight:700}

/* ============ ETAPAS (tela que não existe na referência) ============ */
.etapas{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.et{display:flex;align-items:center;gap:10px;background:var(--marmore);border:1px solid var(--line);
  border-radius:11px;padding:9px 12px}
.et.arrastando{opacity:.4}
.et .alca{cursor:grab;color:var(--ink3);font-size:15px;flex:0 0 auto;letter-spacing:-2px}
.et input[type=color]{width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:none;cursor:pointer;flex:0 0 auto}
.et input.rot{flex:1;min-width:110px;font-weight:600}
.et .prazo{font-size:11px;color:var(--ink3);font-weight:600;display:flex;align-items:center;gap:5px;
  white-space:nowrap;margin:0}
.et .prazo input{width:56px;padding:6px 8px;font-size:12px}
.et .qtd{font-size:11px;color:var(--ink3);font-weight:600;white-space:nowrap;min-width:62px;text-align:right}
.et .trava{font-size:13px;flex:0 0 auto;cursor:help}
.et .x{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:#fff;
  color:var(--ink3);cursor:pointer;flex:0 0 auto;font-size:12px;line-height:1}
.et .x:hover{border-color:var(--erro);color:var(--erro)}
.nova{display:flex;gap:8px;flex-wrap:wrap}
.nova input{flex:1;min-width:180px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:13px}

/* ============ FICHA ============ */
.mask{display:none;position:fixed;inset:0;background:rgba(33,17,17,.5);z-index:100;backdrop-filter:blur(2px)}
.mask.on{display:block}
.sheet{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:520px;background:var(--marmore);
  overflow-y:auto;box-shadow:-20px 0 50px -20px rgba(33,17,17,.4);animation:sl .24s cubic-bezier(.3,1,.4,1)}
@keyframes sl{from{transform:translateX(38px);opacity:.4}to{transform:none;opacity:1}}
.sh-h{background:linear-gradient(150deg,#4a251c,var(--marsala));color:#fff;padding:19px 21px 17px;position:relative}
.sh-h .x{position:absolute;right:14px;top:14px;width:29px;height:29px;border-radius:9px;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:15px;cursor:pointer;line-height:1}
.sh-h .x:hover{background:rgba(255,255,255,.26)}
.sh-h h2{font-size:22px;font-weight:300;letter-spacing:.01em;padding-right:38px;line-height:1.2}
.sh-h .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.sh-h .meta span{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.14);padding:4px 9px;border-radius:20px}
.sh-h .meta span.alerta{background:var(--erro)}
.sh-b{padding:15px}
.blk{background:#fff;border-radius:13px;padding:14px 15px;margin-bottom:11px;box-shadow:var(--sh)}
.blk h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:700;
  margin-bottom:10px;display:flex;align-items:center;gap:6px}
.blk .salvo{margin-left:auto;font-size:10px;color:var(--ok);text-transform:none;letter-spacing:0;font-weight:600}
.kv{display:grid;grid-template-columns:124px 1fr;gap:9px 12px;font-size:13px;align-items:center}
.kv dt{color:var(--ink3);font-weight:500}
.kv dd{font-weight:600;word-break:break-word}
.stages{display:flex;flex-wrap:wrap;gap:6px}
.stages button{font-size:11.5px;font-weight:600;padding:7px 11px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);cursor:pointer;transition:.13s}
.stages button:hover{border-color:var(--terra)}
.stages button.on{color:#fff;border-color:transparent}
.acao-form{display:flex;gap:7px;flex-wrap:wrap}
.acao-form input[type=text]{flex:1;min-width:150px}
.acao-form input[type=date]{width:145px}
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],
select.f,textarea{width:100%;font-size:13px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;outline:0;background:#fff}
input:focus,textarea:focus,select.f:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(104,74,50,.12)}
textarea{resize:vertical;min-height:74px;line-height:1.5}
.bsalvar{background:var(--acao);color:var(--acao-texto);border:0;font-size:12px;font-weight:700;
  padding:10px 16px;border-radius:8px;cursor:pointer;display:inline-block;text-decoration:none}
.bsalvar:hover{background:var(--acao-hover)}
.src{font-size:10.5px;color:var(--ink3);margin-top:10px;padding-top:9px;border-top:1px dashed var(--linha-suave);
  font-weight:600;line-height:1.45}
.tl{list-style:none;font-size:12.5px}
.tl li{padding:0 0 12px 16px;border-left:2px solid var(--linha-suave);position:relative;color:var(--ink2);font-weight:500}
.tl li:last-child{padding-bottom:0;border-color:transparent}
.tl li:before{content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--terra)}
.tl li b{color:var(--ink);font-weight:700}
.wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#25d366;color:#fff;
  text-decoration:none;padding:13px;border-radius:11px;font-weight:700;font-size:14px;
  box-shadow:0 8px 20px -8px rgba(37,211,102,.5)}

/* ============ MODAL ============ */
.modal{display:none;position:fixed;inset:0;background:rgba(33,17,17,.55);z-index:150;place-items:center;padding:16px}
.modal.on{display:grid}
.mbox{background:#fff;border-radius:15px;width:100%;max-width:400px;overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(33,17,17,.5)}
.mbox .mh{padding:16px 18px 13px;border-bottom:1px solid var(--linha-suave)}
.mbox .mh h3{font-size:16px;font-weight:300}
.mbox .mh p{font-size:12px;color:var(--ink3);margin-top:3px;font-weight:500;line-height:1.45}
.mbox .mb{padding:15px 18px;display:flex;flex-direction:column;gap:11px}
.mbox .mb label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink3);
  display:block;margin-bottom:5px}
.mbox .mf{padding:13px 18px;background:var(--marmore);border-top:1px solid var(--linha-suave);display:flex;gap:8px}
.mbox .mf button{flex:1;font-size:12.5px;font-weight:700;padding:10px;border-radius:9px;cursor:pointer;border:0}
.mbox .mf .ok{background:var(--acao);color:var(--acao-texto)}
.mbox .mf .cancel{background:#fff;border:1px solid var(--line);color:var(--ink2)}
.dica{font-size:11px;color:var(--ink3);margin-top:5px;font-weight:500;line-height:1.4}
.dica.ok{color:var(--ok);font-weight:600}
.dica.alerta{color:var(--alerta);font-weight:600}
.opts{display:flex;flex-direction:column;gap:6px}
.opts button{text-align:left;font-size:13px;font-weight:600;padding:11px 13px;border-radius:9px;
  border:1px solid var(--line);background:#fff;cursor:pointer;transition:.13s}
.opts button:hover{border-color:var(--terra)}
.opts button.on{background:var(--marsala);color:#fff;border-color:var(--marsala)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--marsala);color:var(--marmore);font-size:13px;font-weight:600;padding:12px 20px;
  border-radius:11px;z-index:300;opacity:0;transition:.25s;box-shadow:0 12px 30px -8px rgba(33,17,17,.5)}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ============ LOGIN E INSTALAÇÃO ============ */
.tela-login{background:linear-gradient(160deg,#4a251c,var(--marsala) 60%,#2a1310);
  min-height:100vh;display:grid;place-items:center;padding:20px;overflow:auto}
.cx-login{background:#fff;border-radius:18px;padding:34px 30px;width:100%;max-width:370px;
  box-shadow:0 30px 70px -20px rgba(33,17,17,.55)}
.cx-login .marca{width:150px;height:auto;display:block;margin-bottom:14px}
.cx-login h2{font-size:21px;font-weight:300;letter-spacing:.01em}
.cx-login .desc{font-size:12.5px;color:var(--ink3);margin:5px 0 22px;font-weight:500;line-height:1.5}
.cx-login label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink3);display:block;margin-bottom:6px;margin-top:13px}
.cx-login button,.cx-login .bsalvar{width:100%;margin-top:18px;background:var(--acao);
  color:var(--acao-texto);border:0;font-size:14px;font-weight:700;padding:13px;border-radius:10px;
  cursor:pointer;text-align:center}
.cx-login button:hover{background:var(--acao-hover)}
.cx-login .erro{background:#f6e3dd;color:var(--erro);font-size:12.5px;font-weight:600;
  padding:10px 12px;border-radius:9px;margin-top:14px}

/* ============ MOBILE ============ */
.mnav{display:none}
@media(max-width:860px){
  body{overflow:auto}
  .app{grid-template-columns:1fr;height:auto}
  aside{display:none}
  .main{height:auto;overflow:visible;min-width:0;max-width:100vw}
  .top{position:sticky;top:0;z-index:40;padding:0 13px;gap:8px;height:54px}
  .top h2{font-size:15px}
  .top .cnt{display:none}
  .search input{width:120px}
  .content{overflow:visible;padding:13px 13px 90px;min-width:0}
  .tablewrap,.panel{max-width:100%}
  .col{flex:0 0 79vw;max-height:none}
  .col-b{max-height:60vh;overflow-y:auto}
  .grid2{grid-template-columns:1fr}
  .form2{grid-template-columns:1fr}
  .sheet{max-width:100%;top:auto;height:93vh;border-radius:17px 17px 0 0;animation:up .24s}
  @keyframes up{from{transform:translateY(34px);opacity:.5}to{transform:none;opacity:1}}
  .hint{display:none}
  .et{flex-wrap:wrap}
  .et .qtd{min-width:0}
  /* no toque não existe hover pra revelar o botão: ele fica visível sempre,
     e maior, pra caber o dedo */
  .col-h .pontinhos{opacity:1;font-size:18px;padding:4px 8px}
  #menu-etapa button{padding:12px 12px}
  .mnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:5px 2px;color:var(--ink3);font-size:9.5px;font-weight:700;cursor:pointer;position:relative}
  .mnav button svg{width:18px;height:18px}
  .mnav button.on{color:var(--marsala)}
  .mnav button .badge{position:absolute;top:2px;right:50%;margin-right:-18px;background:var(--erro);color:#fff;
    font-size:9px;font-weight:700;padding:0 5px;border-radius:20px;min-width:15px}
}

/* ============ AÇÕES DE CONTA, EXPORTAÇÃO E EXCLUSÃO ============ */
.baixar{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink2);text-decoration:none;
  border:1px solid var(--line);background:#fff;padding:8px 13px;border-radius:9px;
  box-shadow:var(--sh);white-space:nowrap;transition:.13s}
.baixar:hover{border-color:var(--terra);color:var(--ink)}

.tabela-usuarios tbody tr{cursor:default}
.tabela-usuarios tbody tr:hover{background:transparent}
.acoes-usuario{white-space:nowrap}
.acoes-usuario button{border:1px solid var(--line);background:#fff;color:var(--ink2);
  font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:8px;cursor:pointer;margin-left:6px}
.acoes-usuario button:hover{border-color:var(--terra);color:var(--ink)}
.tabela-usuarios .agora{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:var(--natural);color:var(--ink2);padding:2px 7px;border-radius:20px;margin-left:6px}

/* Excluir fica discreto de propósito: é ação sem volta e não pode competir com o
   botão do WhatsApp, que é o que ela usa o dia inteiro. */
.excluir-lead{display:block;width:100%;background:none;border:1px solid var(--line);
  color:var(--ink3);font-size:12px;font-weight:600;padding:10px;border-radius:9px;
  cursor:pointer;margin-bottom:11px;transition:.13s}
.excluir-lead:hover{border-color:var(--erro);color:var(--erro);background:#fbf3f1}

@media(max-width:860px){
  .baixar{margin-left:0}
  .acoes-usuario button{margin:3px 0 0 4px}
}

/* "Continuar conectado" na tela de entrada */
.cx-login .lembrar{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;
  font-weight:500;color:var(--ink2);text-transform:none;letter-spacing:0;cursor:pointer}
.cx-login .lembrar input{width:17px;height:17px;margin:0;accent-color:var(--marsala);cursor:pointer}