/* ============================================================
   SHANTI ERP — Design System
   Baseado no visual do relatório Shanti (Fraunces + DM Sans,
   accent rosa, fundo creme, cards brancos arredondados)
   ============================================================ */
/* ---------- Tema escuro: é o padrão da casa ----------
   Os nomes das cores continuam os mesmos em todo o sistema. O que muda
   é o valor: "branco" é a cor do cartão, "preto" é a cor do texto. Assim
   nenhuma tela precisou ser reescrita pra ganhar o tema. */
:root{
  --rosa:#e8478b; --rosa-light:#3a1024; --rosa-mid:#8d2b57;
  --preto:#f3eff2; --cinza-escuro:#141317; --cinza:#a49ea8; --cinza2:#9993a2;   /* cinza2 era #7e7887 (contraste 4,0) — 07/10/2026 */
  --cinza-claro:#26242c; --branco:#1c1a21; --creme:#131218;
  --verde:#3fbd84; --verde-light:#10291f;
  --amarelo:#e0a63a; --amarelo-light:#2e2413; --amarelo-texto:#e0a63a;   /* amarelo como LETRA */
  --vermelho:#ef6b5c; --vermelho-light:#33191a;
  --azul:#5b9bd8; --azul-light:#141f2e;
  --laranja:#e08a45; --laranja-light:#2e2016;
  --roxo:#a184e0; --roxo-light:#221c33;
  --linha:#302d38;
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --raio:20px; --raio-sm:12px;
  --sombra:0 1px 3px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.24);
  --sombra-forte:0 18px 46px rgba(0,0,0,.55);
  --sobre-preto:#141317;      /* texto por cima da cor "preto" do tema */
  color-scheme:dark;
}

/* ---------- Tema claro: o visual de sempre, agora opcional ---------- */
html[data-tema="claro"]{
  --rosa:#b5165e; --rosa-light:#f7e8f0; --rosa-mid:#e8b4cf;
  --preto:#111010; --cinza-escuro:#1e1e1e; --cinza:#666; --cinza2:#67625c;   /* cinza2 era #8a8580 (contraste 3,6) — 07/10/2026 */
  --cinza-claro:#f5f3f1; --branco:#fefcfa; --creme:#ede9e4;
  --verde:#1a7a4a; --verde-light:#e8f5ee;
  --amarelo:#c8890a; --amarelo-light:#fef7e6; --amarelo-texto:#8f6200;   /* letra amarela legível no fundo claro (5,2:1) */
  --vermelho:#c0392b; --vermelho-light:#fdecea;
  --azul:#1a4a7a; --azul-light:#e8f0f8;
  --laranja:#c05a0a; --laranja-light:#fdf0e6;
  --roxo:#6b3fa0; --roxo-light:#f0eaf8;
  --linha:#e4dfd9;
  --sombra:0 1px 3px rgba(17,16,16,.04), 0 8px 24px rgba(17,16,16,.04);
  --sombra-forte:0 18px 46px rgba(17,16,16,.22);
  --sobre-preto:#fff;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{font-family:var(--sans);background:var(--creme);color:var(--preto);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Estrutura app: sidebar + conteúdo ---------- */
/* A barra lateral fica presa na tela (fixed). Era "sticky", mas o
   overflow-x:hidden da página desliga o sticky — e ela parava no meio. */
.app{display:flex;min-height:100vh;padding-left:230px;transition:padding-left .18s}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;z-index:40;
  background:var(--cinza-escuro);color:#fff;padding:28px 18px;
  display:flex;flex-direction:column;overflow-y:auto}
.brand{margin-bottom:34px;padding:0 4px;display:flex;align-items:center;gap:8px}
.brand img{display:block}
.brand .logo-cheia{width:100%;height:auto;max-height:78px}
.brand .logo-mini{height:34px;width:auto;display:none}

/* Hambúrguer — só aparece em tablet/celular, colado no logo */
.ham{display:none;width:42px;height:42px;flex-shrink:0;border:none;border-radius:12px;
  background:rgba(255,255,255,.08);cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:0}
.ham span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:.2s}
.ham:hover{background:rgba(255,255,255,.16)}
.app.menu-aberto .ham span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.app.menu-aberto .ham span:nth-child(2){opacity:0}
.app.menu-aberto .ham span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Botão "Recolher menu" — fica colado no rodapé da sidebar */
/* rodapé da sidebar: recolher menu + avatar, na mesma linha */
.sidebar-baixo{margin-top:auto;display:flex;align-items:center;gap:8px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.collapse-btn{flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  padding:13px 10px;border:none;background:transparent;
  color:rgba(255,255,255,.55);cursor:pointer;font-family:var(--sans);font-size:13px;
  font-weight:500;transition:.15s;text-align:left}
.collapse-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.collapse-btn .seta{width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;transition:.2s}
.collapse-btn:hover .seta{background:var(--rosa);color:#fff}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{padding:11px 14px;border-radius:12px;color:rgba(255,255,255,.62);
  font-weight:500;font-size:14px;transition:.15s;display:flex;align-items:center;gap:10px;
  cursor:grab;user-select:none}
.nav a .ic{display:none;width:20px;height:20px;flex-shrink:0;line-height:0;
  align-items:center;justify-content:center}
.svg-ic{display:block;opacity:.9}
.nav a.active .svg-ic{opacity:1}
.nav a .tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav a.arrastando{opacity:.35}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--rosa);color:#fff}
.sidebar-foot{position:relative;flex-shrink:0}

/* Pé da sidebar: um avatar só. Clica e abre nome, Configurações e Sair. */
.pe-avatar{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.14);color:#fff;font-family:var(--sans);font-size:12px;
  font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:.15s;flex-shrink:0}
.pe-avatar:hover{background:rgba(255,255,255,.22)}
.pe-avatar.on,.pe-avatar.aberto{background:var(--rosa)}
.pe-avatar:focus-visible{outline:2px solid var(--rosa-mid);outline-offset:2px}

.pe-menu{position:absolute;bottom:calc(100% + 10px);right:0;z-index:90;min-width:206px;
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:6px;
  box-shadow:0 14px 38px rgba(0,0,0,.26);display:flex;flex-direction:column;gap:2px}
.pe-menu[hidden]{display:none}
.pe-quem{padding:10px 12px 11px;border-bottom:1px solid var(--linha);margin-bottom:4px}
.pe-quem b{display:block;font-size:13.5px;font-weight:600;color:var(--preto)}
.pe-quem span{display:block;font-size:12px;color:var(--cinza);word-break:break-all}
.pe-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  font-size:13.5px;font-weight:500;color:var(--preto);transition:.12s}
.pe-item .ic{width:16px;height:16px;flex-shrink:0;line-height:0;color:var(--cinza);
  display:flex;align-items:center;justify-content:center}
.pe-item:hover{background:var(--cinza-claro)}
.pe-item.on{background:var(--rosa-light);color:var(--rosa)}
.pe-item.on .ic{color:var(--rosa)}
.pe-item.sair:hover{background:var(--vermelho-light);color:var(--vermelho)}
.pe-item.sair:hover .ic{color:var(--vermelho)}

.content{flex:1;min-width:0;padding:38px 42px 80px;max-width:1280px;width:100%}  /* min-width:0 impede que conteúdo largo (tabela) estique o flex e crie rolagem na página */

/* ---------- Cabeçalho de página ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:28px;flex-wrap:wrap}
.page-head h1{font-family:var(--serif);font-size:38px;font-weight:300;
  letter-spacing:-.02em;line-height:1.05}
.page-head h1 em{font-style:italic;color:var(--rosa)}
.page-head .sub{color:var(--cinza);font-size:14px;margin-top:4px}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:14px;font-weight:600;padding:11px 20px;border-radius:100px;
  border:none;cursor:pointer;transition:.15s;background:var(--cinza-escuro);color:#fff}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,16,16,.15)}
.btn.rosa{background:var(--rosa)}
.btn.ghost{background:transparent;color:var(--preto);border:1px solid var(--linha)}
.btn.ghost:hover{background:var(--branco);box-shadow:none}
.btn.sm{padding:8px 15px;font-size:13px}
.btn.danger{background:var(--vermelho-light);color:var(--vermelho)}

/* ---------- Cards ---------- */
.card{background:var(--branco);border-radius:var(--raio);padding:26px;
  box-shadow:var(--sombra);margin-bottom:20px}
.card-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza);font-weight:600;margin-bottom:18px;display:flex;
  align-items:center;gap:8px}
.card-title::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--rosa);flex-shrink:0}

/* minmax(0,1fr): sem isso, um card com conteúdo largo rouba espaço dos outros
   e as colunas deixam de bater com as de cima */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

.stat{background:var(--branco);border-radius:var(--raio);padding:22px;box-shadow:var(--sombra)}
.stat-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza);font-weight:600;margin-bottom:8px}
.stat-value{font-family:var(--serif);font-size:30px;font-weight:300;letter-spacing:-.02em}
.stat-value.rosa{color:var(--rosa)} .stat-value.verde{color:var(--verde)}
.stat-value.amarelo{color:var(--amarelo-texto)} .stat-value.azul{color:var(--azul)}
.stat-sub{font-size:12px;color:var(--cinza);margin-top:4px}

/* ---------- Badges / pills ---------- */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:100px;white-space:nowrap;letter-spacing:.02em}
.pill.rosa{background:var(--rosa-light);color:var(--rosa)}
.pill.verde{background:var(--verde-light);color:var(--verde)}
.pill.amarelo{background:var(--amarelo-light);color:var(--amarelo-texto)}
.pill.azul{background:var(--azul-light);color:var(--azul)}
.pill.laranja{background:var(--laranja-light);color:var(--laranja)}
.pill.vermelho{background:var(--vermelho-light);color:var(--vermelho)}
.pill.cinza{background:var(--cinza-claro);color:var(--cinza)}
.pri{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:#fff}
.pri.A{background:var(--vermelho)} .pri.B{background:var(--amarelo)} .pri.C{background:var(--cinza2)}

/* ---------- Tabelas ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);
  font-weight:600;text-align:left;padding:11px 12px;border-bottom:2px solid #f0ede9}
.tbl td{padding:13px 12px;border-bottom:1px solid #f5f2ef;font-size:13.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--cinza-claro)}   /* escuro: um tom acima do cartão, não branco */
.tbl .destaque{font-weight:600}
.tbl .num{font-family:var(--serif);font-size:15px;font-weight:300}
.tbl-acoes{display:flex;gap:6px;justify-content:flex-end}

/* ---------- Formulários ---------- */
.form-card{background:var(--branco);border-radius:var(--raio);padding:30px;
  box-shadow:var(--sombra);margin-bottom:20px}
.form-sec-title{font-family:var(--serif);font-size:20px;font-weight:400;
  margin-bottom:2px}
.form-sec-desc{font-size:12.5px;color:var(--cinza);margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.col-2{grid-column:span 2}
.field.col-3{grid-column:span 3}
.field.col-4{grid-column:span 4}
.field label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cinza);font-weight:600}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:14px;
  padding:11px 13px;border:1px solid var(--linha);border-radius:11px;background:var(--branco);
  color:var(--preto);width:100%;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.field textarea{resize:vertical;min-height:70px}
.form-actions{display:flex;gap:12px;margin-top:26px;align-items:center}

/* Receita: tabela OD/OE */
.receita-tbl{width:100%;border-collapse:collapse;margin-top:6px}
.receita-tbl th,.receita-tbl td{padding:8px;text-align:center}
.receita-tbl th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.receita-tbl td:first-child,.receita-tbl th:first-child{text-align:left;font-weight:700;
  font-size:12px;color:var(--preto)}
.receita-tbl input{padding:8px 6px;text-align:center;font-size:13px}

/* Receita: campo de grau com botões de mais/menos */
.grau{display:flex;align-items:stretch;gap:0;justify-content:center}
.grau .grau-sel,.grau .grau-inp{width:100%;min-width:78px;padding:8px 4px;text-align:center;font-size:13px;
  border:1px solid var(--linha);border-radius:9px 0 0 9px;border-right:none;background:var(--branco);
  -webkit-appearance:none;appearance:none;text-align-last:center}
.grau .grau-sel:focus,.grau .grau-inp:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.grau-bt{display:flex;flex-direction:column;width:24px;flex:0 0 24px}
.grau-bt button{flex:1;border:1px solid var(--linha);background:var(--cinza-claro);color:var(--preto);
  font-size:12px;font-weight:700;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.grau-bt button:first-child{border-radius:0 9px 0 0;border-bottom:none}
.grau-bt button:last-child{border-radius:0 0 9px 0}
.grau-bt button:hover{background:var(--rosa-light);border-color:var(--rosa);color:var(--rosa)}

/* ---------- Configurações: lista simples ---------- */
.cfg-lista{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  overflow:hidden;margin-bottom:22px}
.cfg-lista a{display:flex;align-items:center;justify-content:space-between;
  padding:17px 22px;font-size:15px;font-weight:600;color:var(--preto);
  border-top:1px solid var(--linha);transition:.15s}
.cfg-lista a:first-child{border-top:none}
.cfg-lista a::after{content:'→';color:var(--cinza2);font-weight:400}
.cfg-lista a:hover{background:var(--cinza-claro);color:var(--rosa)}
.cfg-lista a:hover::after{color:var(--rosa)}
/* Integrações: nome + explicação curta, status na direita */
.int-lista a{gap:14px}
.int-item{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.int-item small{font-size:12.5px;font-weight:400;color:var(--cinza)}
.int-lista a:hover .int-item small{color:var(--cinza)}

/* ---------- Cartão de número (KPI) e aneizinho ----------
   Nasceram no Dashboard; agora cada módulo tem o seu painel. */
.kpi{background:var(--branco);border-radius:var(--raio);padding:22px;box-shadow:var(--sombra);
  display:flex;gap:16px;align-items:center;transition:.18s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(17,16,16,.05),0 14px 34px rgba(17,16,16,.08)}
.kpi .txt{min-width:0;flex:1}
.kpi .lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);font-weight:600}
.kpi .val{font-family:var(--serif);font-size:29px;font-weight:300;letter-spacing:-.02em;line-height:1.2;margin-top:5px}
.kpi .sub{font-size:12px;color:var(--cinza);margin-top:3px}
/* "R$ 1.360,00 de R$ 16.775,00" — a meta em tom mais leve */
.kpi .val-de{font-size:15px;color:var(--cinza)}
@media (max-width:560px){ .kpi .val-de{display:block;font-size:13px;margin-top:1px} }
.anel{position:relative;width:74px;height:74px;flex-shrink:0;border:none;background:none;
  padding:0;cursor:pointer;line-height:0}
.anel svg{transform:rotate(-90deg)}
/* Por padrão a porcentagem fica dentro do círculo, como sempre foi (Dashboard). */
.anel .anel-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;font-weight:500;pointer-events:none;
  color:var(--preto)}
/* botão sem cor declarada vira azul no Safari do iPhone — daí o número azul */
.anel{color:var(--preto);-webkit-text-fill-color:currentColor}

/* No painel de um módulo (CRM e afins) o círculo fica limpo:
   a porcentagem só aparece, em cima dele, quando tocam. */
.painel-modulo .anel .anel-pct{inset:auto;left:50%;top:-8px;transform:translate(-50%,-6px);
  background:var(--preto);color:var(--sobre-preto);font-family:var(--sans);font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:100px;white-space:nowrap;
  opacity:0;transition:opacity .15s,transform .15s;box-shadow:0 6px 16px rgba(17,16,16,.22)}
.painel-modulo .anel.mostrando .anel-pct{opacity:1;transform:translate(-50%,0)}
/* fora de um painel de módulo o círculo é só desenho, não botão */
.anel{cursor:default}
.painel-modulo .anel{cursor:pointer}
.anel:hover svg circle:last-child{filter:brightness(1.08)}

/* Chavinha de duas posições, no espírito do botão do iPhone:
   a bolinha branca desliza pro lado que está escolhido. */
.troca-visao{position:relative;display:inline-flex;align-items:center;gap:2px;padding:4px;
  background:var(--cinza-claro);border-radius:100px;flex-shrink:0}
.troca-bola{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
  background:var(--branco);border-radius:100px;box-shadow:0 2px 8px rgba(17,16,16,.14);
  transition:transform .22s cubic-bezier(.3,.9,.3,1)}
.troca-visao.no-fim .troca-bola{transform:translateX(100%)}
.troca-op{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;
  border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:12.5px;
  font-weight:600;color:var(--cinza);padding:8px 14px;border-radius:100px;
  white-space:nowrap;transition:color .18s;flex:1;justify-content:center}
.troca-op svg{width:16px;height:16px;flex-shrink:0}
.troca-op.on{color:var(--preto)}
.troca-op:hover{color:var(--preto)}
@media (max-width:560px){
  /* No celular as ações descem pra uma barra que flutua no rodapé — assim a
     tela inteira fica pro conteúdo, como nos apps de quadro. */
  .page-acoes{position:fixed;left:10px;right:10px;bottom:12px;z-index:880;
    width:auto;flex-wrap:nowrap;gap:6px;justify-content:center;
    background:var(--branco);border:1px solid var(--linha);border-radius:100px;
    padding:7px;box-shadow:0 10px 30px rgba(17,16,16,.16)}
  .page-acoes .btn.rosa{flex:1;min-width:0;padding:11px 10px;font-size:13px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .troca-visao{flex-shrink:0;padding:3px;background:var(--cinza-claro)}
  .troca-op{padding:8px 11px}
  .troca-op span{display:none}      /* no celular só o desenho, pra caber */
  .troca-op svg{width:17px;height:17px}
  .mais-bt{width:36px;height:36px;flex-shrink:0}
  /* o menu dos pontinhos abre pra cima, senão sai da tela */
  .mais-menu{top:auto;bottom:46px}
  /* espaço no fim da página pra barra não tapar o conteúdo */
  .content{padding-bottom:96px}
  /* o bonequinho sobe pra não brigar com a barra */
  .ia-flutua{bottom:78px}
  .ia-caixa{bottom:78px}
}

/* telas com barra flutuante escondem só o título no celular — as ações
   continuam, mas flutuando no rodapé. O nome da tela já está no menu. */
@media (max-width:560px){
  body.sem-titulo-mobile .page-head{display:contents}
  body.sem-titulo-mobile .page-head>div:first-child{display:none}
}

/* menu de três pontinhos (ações que não são a principal) */
.page-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mais-wrap{position:relative}
.mais-bt{width:40px;height:40px;border:1px solid var(--linha);border-radius:50%;background:var(--branco);
  color:var(--cinza);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.mais-bt svg{width:20px;height:20px}
.mais-bt:hover{border-color:var(--rosa-mid);color:var(--preto)}
.mais-menu{position:absolute;right:0;top:46px;z-index:60;min-width:212px;padding:6px;
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  box-shadow:0 14px 38px rgba(17,16,16,.16);display:flex;flex-direction:column;gap:1px}
.mais-menu[hidden]{display:none}
.mais-titulo{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cinza2);padding:8px 11px 4px}
.mais-op{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;color:var(--preto);padding:9px 11px;border-radius:9px}
.mais-op:hover{background:var(--cinza-claro)}
.mais-op.on{background:var(--rosa-light);color:var(--rosa);font-weight:700}
.mais-risco{height:1px;background:var(--linha);margin:5px 4px}

/* faixa de números no topo de um módulo */
.painel-modulo{margin-bottom:20px}
body.kanban-mode .painel-modulo{flex-shrink:0}
body.kanban-mode .painel-modulo .kpi{padding:14px 16px}
body.kanban-mode .painel-modulo .anel{width:56px;height:56px}
body.kanban-mode .painel-modulo .val{font-size:23px}
@media (max-width:900px){
  .painel-modulo .kpi{padding:16px}
  .painel-modulo .anel{width:60px;height:60px}
}
/* celular: o número embaixo do aneizinho, senão não cabe lado a lado */
@media (max-width:560px){
  .painel-modulo .kpi{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .painel-modulo .anel{width:46px;height:46px}
  .painel-modulo .anel span{font-size:12px}
  .painel-modulo .lab{font-size:12px;letter-spacing:.06em}
  .painel-modulo .val{font-size:22px}
  .painel-modulo .sub{font-size:12px}
}

/* ---------- Metas ---------- */
.mt-lista{display:flex;flex-direction:column}
.mt{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--linha);flex-wrap:wrap}
.mt:first-child{border-top:none;padding-top:2px}
.mt-txt{flex:1;min-width:150px}
.mt-nome{font-size:14px;font-weight:600}
.mt-ajuda{font-size:12px;color:var(--cinza2);margin-top:1px}
.mt-campo{display:flex;align-items:center;gap:7px;flex-shrink:0}
.mt-campo>span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza2)}
.mt-campo input{width:104px;text-align:right;padding:8px 10px;border:1px solid var(--linha);
  border-radius:9px;font-family:var(--sans);font-size:13.5px;font-weight:600;background:var(--branco)}
.mt-campo input:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.mt-un{font-size:12px;color:var(--cinza);min-width:20px}
@media (max-width:700px){
  .mt{gap:8px}
  .mt-txt{min-width:100%}
  .mt-campo input{width:88px}
}

/* ---------- Usuários ---------- */
.us-lista{display:flex;flex-direction:column}
.us{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--linha)}
.us:first-child{border-top:none;padding-top:2px}
.us.off{opacity:.55}
.us-ini{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--rosa-light);
  color:var(--rosa);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:19px;font-weight:500}
.us.off .us-ini{background:var(--cinza-claro);color:var(--cinza)}
.us-txt{flex:1;min-width:0}
.us-nome{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;flex-wrap:wrap}
.us-mail{font-size:13px;color:var(--cinza);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.us-quando{font-size:12px;color:var(--cinza2);margin-top:3px}
.us-bts{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex-shrink:0}
.us-form{display:inline}
@media (max-width:700px){
  .us{flex-wrap:wrap}
  .us-bts{width:100%;padding-left:56px}
}

/* ---------- Abas (tipos de contato) ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--linha);padding-bottom:2px}
.tabs a{padding:9px 15px;border-radius:10px 10px 0 0;font-size:13px;font-weight:600;color:var(--cinza);position:relative;top:1px}
.tabs a:hover{color:var(--preto);background:var(--branco)}
.tabs a.on{color:var(--rosa);border-bottom:2px solid var(--rosa);background:var(--branco)}
.tabs a .n{font-size:12px;color:var(--cinza2);margin-left:5px}

/* ---------- Filtro de contatos (botão no fim das abas + painel lateral) ---------- */
.filtro-bt{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:6px;
  height:36px;min-width:40px;padding:0 10px;justify-content:center;border-radius:11px;
  border:1px solid var(--linha);background:var(--branco);color:var(--cinza);cursor:pointer;transition:.15s}
.filtro-bt:hover{color:var(--rosa);border-color:var(--rosa)}
.filtro-bt.on{background:var(--rosa-light);border-color:var(--rosa);color:var(--rosa)}
.filtro-bt b{font-size:12px;background:var(--rosa);color:#fff;border-radius:999px;padding:1px 7px}
.filtro-resumo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-6px 0 14px;font-size:12px;color:var(--cinza)}
.filtro-resumo .filtro-e{font-size:12px;color:var(--cinza2)}
.filtro-resumo .filtro-n{margin-left:6px;font-weight:600;color:var(--preto)}
.filtro-limpar{margin-left:auto;color:var(--rosa);font-weight:600}
.filtro-fundo{position:fixed;inset:0;z-index:950;background:rgba(17,16,16,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.filtro-fundo.on{opacity:1;pointer-events:auto}
.filtro-painel{position:fixed;top:0;right:0;bottom:0;z-index:960;width:340px;max-width:100vw;
  display:flex;flex-direction:column;background:var(--branco);color:var(--preto);box-shadow:var(--sombra-forte);
  border-radius:var(--raio) 0 0 var(--raio);transform:translateX(105%);transition:transform .22s ease}
.filtro-painel.on{transform:none}
.filtro-topo{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 10px}
.filtro-topo h3{margin:0;display:flex;align-items:center;gap:9px;font:400 24px var(--serif);color:var(--preto)}
.filtro-topo h3 svg{color:var(--rosa)}
.filtro-x{background:none;border:none;color:var(--rosa);font-size:28px;line-height:1;cursor:pointer;padding:0 2px}
.filtro-corpo{flex:1;overflow:auto;padding:6px 24px 20px}
.filtro-sec{margin-top:16px}
.filtro-rot{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);margin-bottom:10px}
.filtro-ops{display:flex;flex-wrap:wrap;gap:7px}
.filtro-op[hidden]{display:none}
.filtro-op input{position:absolute;opacity:0;pointer-events:none}
.filtro-op span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha);border-radius:999px;
  padding:7px 13px;font-size:13px;font-weight:600;color:var(--preto);cursor:pointer;transition:.12s;user-select:none}
.filtro-op span i{font-style:normal;font-size:12px;font-weight:500;color:var(--cinza2)}
.filtro-op:hover span{border-color:var(--rosa)}
.filtro-op input:checked + span{background:var(--rosa);border-color:var(--rosa);color:#fff}
.filtro-op input:checked + span i{color:rgba(255,255,255,.8)}
.filtro-op input:focus-visible + span{box-shadow:0 0 0 3px var(--rosa-light)}
.filtro-busca{width:100%;box-sizing:border-box;margin-bottom:10px;border:1px solid var(--linha);border-radius:11px;
  background:var(--branco);color:var(--preto);padding:9px 12px;font:13px var(--sans)}
.filtro-busca:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.filtro-modo{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:12px;color:var(--cinza)}
.filtro-modo label{display:flex;align-items:center;gap:7px;cursor:pointer}
.filtro-modo input{accent-color:var(--rosa)}
.filtro-pe{display:flex;gap:10px;padding:16px 24px 22px;border-top:1px solid var(--linha)}
.filtro-pe .btn{flex:1;justify-content:center}
@media (max-width:560px){ .filtro-painel{width:100vw;border-radius:0} }
/* títulos da tabela de contatos que ordenam */
.th-ord a{display:inline-flex;align-items:center;gap:5px;color:inherit;white-space:nowrap}
.th-ord a svg{opacity:.45;transition:.12s}
.th-ord a:hover{color:var(--rosa)}
.th-ord a:hover svg{opacity:1}
.th-ord.on a{color:var(--rosa)}
.th-ord.on a svg{opacity:1}

/* completar cadastros (⋯ de Contatos) — usa a caixa .fech/.comp do CRM */
#ccBg[hidden]{display:none}
.cc-abas{display:flex;gap:6px;flex-wrap:wrap;padding:12px 24px 0}
.cc-aba{border:1px solid var(--linha);background:transparent;color:var(--cinza);border-radius:999px;
  padding:6px 12px;font:600 12px var(--sans);cursor:pointer}
.cc-aba i{font-style:normal;font-weight:500;color:var(--cinza2);margin-left:3px}
.cc-aba.on{background:var(--rosa);border-color:var(--rosa);color:#fff}
.cc-aba.on i{color:rgba(255,255,255,.8)}
.cc-tem{font-size:12.5px;color:var(--cinza);margin:-8px 0 6px}
.cc-tem:empty{display:none}
.cc-faltam{font-size:12px;font-weight:600;color:var(--rosa);margin-bottom:16px}
.cc-end{display:flex;flex-direction:column;gap:8px}
.cc-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.cc-grade .cc-larga{grid-column:1/-1}
@media(max-width:640px){ .cc-abas{padding:10px 16px 0} }

/* ---------- Tabela de contatos estilo WordPress ----------
   caixa de seleção, ações que aparecem ao passar o mouse, ações em massa */
.tbl .col-sel{width:34px;padding-right:0}
.tbl .col-sel input{width:16px;height:16px;accent-color:var(--rosa);cursor:pointer;vertical-align:middle}
.tbl-ct tr.marcada td{background:var(--rosa-light)}
.ln-nome{color:var(--preto);font-weight:600}
a.ln-nome:hover{color:var(--rosa)}
.ln-acoes{font-size:12px;font-weight:400;color:var(--cinza2);margin-top:4px;visibility:hidden;white-space:nowrap}
.ln-acoes a{color:var(--rosa)}
.ln-acoes a:hover{text-decoration:underline}
.ln-acoes a.perigo{color:var(--vermelho)}
.tbl-ct tr:hover .ln-acoes,.tbl-ct tr:focus-within .ln-acoes{visibility:visible}
@media (hover:none){ .ln-acoes{visibility:visible} }
.massa{display:flex;align-items:center;gap:8px;padding:8px 6px 12px;flex-wrap:wrap}
.massa select{font:13px var(--sans);color:var(--preto);background:var(--branco);border:1px solid var(--linha);
  border-radius:10px;padding:7px 10px}
.massa select:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.massa-n{font-size:12px;font-weight:600;color:var(--rosa)}
.tabs .tab-lixeira{color:var(--cinza2);font-weight:500}
.tabs .tab-lixeira:hover{color:var(--vermelho)}
.lx-aviso{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lx-aviso .lx-desfazer{border:none;background:none;padding:0;font:700 13px var(--sans);color:inherit;
  text-decoration:underline;cursor:pointer}
.lx-aviso a{margin-left:auto;color:inherit;font-size:12px}
/* acordeão: abre deslizando logo abaixo do título (⚙ ao lado do ⋯) */
.cols-acordeao{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.cols-acordeao.on{grid-template-rows:1fr}
.cols-dentro{overflow:hidden;min-height:0}
.cols-acordeao .cols-painel{margin-bottom:18px}
.cols-acordeao:not(.on) .cols-painel{visibility:hidden}
.eng-bt{display:inline-flex;align-items:center;justify-content:center;color:var(--cinza);cursor:pointer}
/* Material Symbols Rounded (Google) — versão fofinha, pontas redondas */
.msr{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:22px;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;
  -webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none}
.eng-bt .msr{transition:transform .35s ease,font-variation-settings .2s}
.eng-bt.on{border-color:var(--rosa);color:var(--rosa);background:var(--rosa-light)}
.eng-bt:hover .msr{transform:rotate(30deg)}
.eng-bt.on .msr{transform:rotate(90deg);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.cols-painel{padding:18px 22px}
.cols-topo{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.cols-topo b{font:400 20px var(--serif)}
.cols-ops{display:flex;flex-wrap:wrap;gap:10px 22px}
.cols-op{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.cols-op input{width:16px;height:16px;accent-color:var(--rosa);cursor:pointer}
.cols-op.fixa{color:var(--cinza2);cursor:default}
.cols-padrao{margin-top:14px;border:none;background:none;padding:0;color:var(--rosa);font:600 12px var(--sans);cursor:pointer}

/* Pills de tipo de contato */
.tp{display:inline-flex;font-size:12px;font-weight:700;padding:3px 9px;border-radius:100px;white-space:nowrap}
.tp-Lead{background:var(--azul-light);color:var(--azul)}
.tp-Cliente{background:var(--verde-light);color:var(--verde)}
.tp-Adormecido{background:var(--amarelo-light);color:var(--amarelo-texto)}
.tp-Ex-cliente{background:var(--cinza-claro);color:var(--cinza)}
.tp-Perdido{background:var(--vermelho-light);color:var(--vermelho)}
.tp-Parceiro{background:var(--laranja-light);color:var(--laranja)}
.tp-Fornecedor{background:#ece6f6;color:#6b3fa0}
.tp-UGC{background:var(--rosa-light);color:var(--rosa)}

/* ---------- Busca ---------- */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--linha);
  border-radius:100px;background:var(--branco);font-size:14px;font-family:var(--sans)}
.search input:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.search::before{content:'⌕';position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--cinza);font-size:18px}

/* ---------- Estado vazio ---------- */
.vazio{text-align:center;padding:60px 20px;color:var(--cinza)}
.vazio .em{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--preto);margin-bottom:8px}

/* ---------- Flash ---------- */
.flash{border-radius:14px;padding:14px 18px;margin-bottom:20px;font-size:13.5px;
  display:flex;gap:10px;align-items:center}
.flash.ok{background:var(--verde-light);color:var(--verde);border:1px solid #a8d5b5}
.flash.erro{background:var(--vermelho-light);color:var(--vermelho);border:1px solid #e8a8a0}

/* ---------- KANBAN ---------- */
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:20px;align-items:flex-start}
.col{background:rgba(255,255,255,.55);border-radius:16px;padding:12px;
  width:270px;flex-shrink:0;min-height:120px}
.col-head{display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px 12px}
.col-head .nome{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px}
.col-head .dot{width:9px;height:9px;border-radius:50%}
.col-head .cont{font-size:12px;font-weight:700;color:var(--cinza);background:var(--branco);
  border-radius:100px;padding:2px 8px}
.col-body{display:flex;flex-direction:column;gap:10px;min-height:40px}
.col-body.dragover{outline:2px dashed var(--rosa-mid);outline-offset:2px;border-radius:12px}
.kcard{background:var(--branco);border-radius:12px;padding:12px 14px 13px;box-shadow:0 1px 2px rgba(17,16,16,.05);
  cursor:grab;border-left:3px solid var(--linha);transition:.12s}
.kcard:hover{box-shadow:0 6px 16px rgba(17,16,16,.09)}
.kcard.dragging{opacity:.45}
/* a linha de cima guarda as etiquetas; os controles moram por cima, à direita */
.kcard .ktopo{display:flex;align-items:flex-start;gap:6px;margin-bottom:8px;
  padding-right:32px;min-height:24px}
.kcard .kt{font-weight:600;font-size:14px;margin-bottom:4px}
.kcard .kneed{font-size:12px;color:var(--cinza);margin-bottom:8px}
.kcard .kmeta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kcard .kval{font-family:var(--serif);font-size:15px;font-weight:300;color:var(--rosa)}
.kcard .kacao{font-size:12px;color:var(--cinza);line-height:1.4}
.col-add{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 10px;
  margin-top:10px;border-radius:10px;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--cinza);background:transparent;border:none;cursor:pointer}
.col-add .ca-mais{font-size:17px;font-weight:400;line-height:1}
.col-add:hover{background:rgba(255,255,255,.85);color:var(--preto)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(17,16,16,.45);display:none;
  align-items:flex-start;justify-content:center;padding:50px 20px;z-index:50;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:var(--branco);border-radius:var(--raio);padding:30px;
  width:100%;max-width:560px;box-shadow:0 20px 60px rgba(17,16,16,.25)}
.modal h2{font-family:var(--serif);font-size:24px;font-weight:400;margin-bottom:20px}
.modal .form-grid{grid-template-columns:1fr 1fr}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 30% 20%,#f4ecef,var(--creme))}
.login-card{background:var(--branco);border-radius:26px;padding:44px 40px;width:100%;
  max-width:400px;box-shadow:0 20px 60px rgba(17,16,16,.1)}
.login-logo{display:block;width:190px;max-width:70%;margin:0 auto 10px}
.login-logo img{display:block;width:100%;height:auto}
/* o logo acompanha o tema: branco no escuro, preto no claro */
.login-logo .logo-claro{display:none}
html[data-tema="claro"] .login-logo .logo-claro{display:block}
html[data-tema="claro"] .login-logo .logo-escuro{display:none}
.login-sub{text-align:center;color:var(--cinza);font-size:13px;margin-bottom:30px}
.login-card .field{margin-bottom:16px}
.login-card .btn{width:100%;justify-content:center;padding:13px}
.login-card .btn + .btn{margin-top:10px}
.login-texto{color:var(--cinza);font-size:12.5px;line-height:1.55;margin:0 0 18px;text-align:center}
.login-esqueci{display:block;text-align:center;margin-top:16px;font-size:13px;
  color:var(--cinza);text-decoration:underline;text-underline-offset:3px}
.login-esqueci:hover{color:var(--rosa)}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .app{flex-direction:column;padding-left:0}
  .app.mini{padding-left:0}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:8px;padding:16px;overflow:visible}
  .brand{margin-bottom:0;flex:1;padding:0;order:2}
  .brand .logo-cheia{width:auto;height:38px}
  .ham{display:flex;order:1;margin-right:2px}
  /* o menu só abre no hambúrguer */
  .nav{display:none;order:3;width:100%;flex-direction:column;flex-wrap:nowrap;gap:2px;margin-top:12px}
  .app.menu-aberto .nav{display:flex}
  /* o avatar sobe pro topo, junto do hambúrguer, e fica sempre visível */
  .sidebar-baixo{order:2;margin:0;padding:0;width:auto;border-top:none;gap:0}
  .sidebar-foot{display:flex}
  .content{padding:24px 20px 60px}
  .grid-4{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr 1fr}
  .field.col-3,.field.col-4{grid-column:span 2}
  .page-head h1{font-size:28px}
  /* no celular o menu volta a ser horizontal — sem modo mini, sem tela cheia */
  .app.mini .sidebar{width:100%;padding:16px}
  .app.mini .brand{flex-direction:row;margin-bottom:0}
  .app.mini .brand .logo-cheia{display:block}
  .app.mini .brand .logo-mini{display:none}
  .app.mini .nav a{justify-content:flex-start;padding:11px 14px;gap:10px}
  .app.mini .nav a .ic{display:flex}
  .app.mini .nav a .tx{display:inline}
  .app.mini .nav{display:none}
  .app.mini.menu-aberto .nav{display:flex}
  .collapse-btn{display:none}
  /* no celular a sidebar fica no topo: o menu do avatar abre pra BAIXO.
     Especificidade maior de propósito — as regras do modo mini vêm depois
     no arquivo e ganhariam no empate. */
  .app .sidebar-baixo{flex-direction:row}
  .app .sidebar-foot .pe-menu{bottom:auto;top:calc(100% + 10px);right:0;left:auto}
  .nav a .ic{display:flex}
  body.kanban-mode .content{height:auto;overflow:visible;padding:24px 20px 60px}
  body.kanban-mode .col{height:auto}
  body.kanban-mode .col-body{overflow-y:visible}
}

/* ---------- Celular e tablet: cada coisa larga rola dentro de si ---------- */
@media (max-width:900px){
  .content{max-width:100%;overflow-x:hidden}
  .card,.form-card,.kpi,.ct-barra{max-width:100%}
  /* tabela larga: a rolagem é dela, não da página */
  table{max-width:100%}
  .tbl-wrap,.ct-tabela-rolagem,.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* kanban (CRM e conteúdo) desliza no dedo, colunas mais estreitas */
  .kanban{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .kanban .col{min-width:78vw;max-width:78vw;scroll-snap-align:start}
  .ct-kanban .col{min-width:80vw;max-width:80vw}
  /* filtros e abas: faixa que desliza, sem empurrar a tela */
  .tabs,.ct-filtros{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .tabs::-webkit-scrollbar,.ct-filtros::-webkit-scrollbar{display:none}
  .tabs a,.ct-chip,.ct-sel{white-space:nowrap;flex-shrink:0}
  .ct-busca{min-width:130px}
  /* textos e caixas que costumam estourar */
  .page-head{flex-wrap:wrap;gap:12px}
  .page-head h1{font-size:26px}
  .modal{max-width:calc(100vw - 24px)}
  .ct-copy,.ct-briefing,.ct-item-corpo{overflow-wrap:anywhere}
  img,svg,video{max-width:100%}
}

/* celular mesmo */
@media (max-width:560px){
  /* menos respiro nas beiradas: a tela é pequena, o conteúdo é que importa */
  .content{padding:14px 10px 36px}
  .page-head{margin-bottom:12px;gap:8px}
  .page-head h1{font-size:24px}
  /* o subtítulo sai de baixo e senta ao lado do nome da tela */
  .page-head>div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
  .page-head .sub{margin-top:0;font-size:12px;line-height:1.35}
  .card,.form-card,.kpi{padding:14px}
  .grid-2,.grid-3,.grid-4{gap:10px;margin-bottom:14px}
  .painel-modulo{margin-bottom:14px}
  .kanban{gap:10px}
  .kanban .col,.ct-kanban .col{min-width:86vw;max-width:86vw}
  .form-grid{grid-template-columns:1fr}
  .field.col-2,.field.col-3,.field.col-4{grid-column:span 1}
  .receita-tbl{font-size:12px}
  .receita-tbl th,.receita-tbl td{padding:5px 3px}
  .grau .grau-sel,.grau .grau-inp{min-width:0}
  .btn{padding:10px 16px}
  .us-bts{padding-left:0}
}

/* ---------- Menu encolhido (modo mini) ---------- */
.app.mini{padding-left:74px}
.app.mini .sidebar{width:74px;padding:28px 12px}
/* menu recolhido: o conteúdo aproveita a largura que sobrou */
.app.mini .content{max-width:none}
.app.mini .brand{justify-content:center;padding:0;margin-bottom:26px}
.app.mini .brand .logo-cheia{display:none}
.app.mini .brand .logo-mini{display:block}
.app.mini .nav a{justify-content:center;padding:12px 0;gap:0}
.app.mini .nav a .ic{display:flex}
.app.mini .nav a .tx{display:none}
.app.mini .collapse-btn{justify-content:center;padding:13px 0;gap:0}
.app.mini .collapse-btn .tx{display:none}
.app.mini .collapse-btn .seta{transform:rotate(180deg)}
.app.mini .sidebar-baixo{flex-direction:column;gap:10px}
.app.mini .collapse-btn{flex:none;width:100%}
/* encolhido a sidebar tem 74px — o menu abre pro lado, sobre o conteúdo */
.app.mini .pe-menu{right:auto;left:0}

/* ---------- CRM ocupando a tela inteira (rolagem no rodapé) ---------- */
body.kanban-mode .content{display:flex;flex-direction:column;height:100vh;
  max-width:none;padding:38px 42px 0;overflow:hidden}
body.kanban-mode .kanban{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;
  align-items:stretch;padding-bottom:14px}
body.kanban-mode .col{display:flex;flex-direction:column;height:100%;min-height:0}
body.kanban-mode .col-body{flex:1;min-height:0;overflow-y:auto;padding-right:4px}

/* ---------- Data do próximo contato no card ---------- */
.kcard .kfoot{margin-top:8px;padding-top:8px;border-top:1px solid #f5f2ef;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.kcard .kdata{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:100px;white-space:nowrap;
  background:var(--cinza-claro);color:var(--cinza)}
.kcard .kdata.atrasado{background:var(--vermelho-light);color:var(--vermelho)}
.kcard .kdata.hoje{background:var(--amarelo-light);color:var(--amarelo-texto)}

/* ---------- Editor de etapas do CRM ---------- */
.modal.wide{max-width:560px}
.et-lista{display:flex;flex-direction:column;gap:2px}
.et-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;transition:.12s}
.et-row:hover{background:var(--cinza-claro)}
.et-row.arrastando{opacity:.35}
.et-row.alvo{box-shadow:inset 0 2px 0 var(--rosa)}
.et-drag{cursor:grab;color:var(--cinza2);font-size:15px;line-height:1;flex-shrink:0;
  user-select:none;opacity:.45;padding:0 2px}
.et-row:hover .et-drag{opacity:1}
.et-form{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.et-cor{width:22px;height:22px;flex-shrink:0;padding:0;border:1px solid rgba(0,0,0,.12);
  border-radius:50%;cursor:pointer;transition:.12s}
.et-cor:hover{transform:scale(1.15)}
.et-nome{flex:1;min-width:0;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--preto);background:transparent;border:1px solid transparent;
  border-radius:9px;padding:7px 9px;transition:.12s}
.et-nome:hover:not([readonly]){border-color:var(--linha);background:var(--branco)}
.et-nome:focus{outline:none;border-color:var(--rosa);background:var(--branco);box-shadow:0 0 0 3px var(--rosa-light)}
.et-nome[readonly]{cursor:default;color:var(--cinza)}
.et-cont{font-size:12px;font-weight:700;color:var(--cinza);background:var(--cinza-claro);
  border-radius:100px;padding:3px 9px;flex-shrink:0}
.et-row:hover .et-cont{background:var(--branco)}
.et-del{border:none;background:none;cursor:pointer;color:var(--cinza2);padding:6px;
  border-radius:9px;display:flex;align-items:center;opacity:0;transition:.12s;flex-shrink:0}
.et-row:hover .et-del,.et-del:focus{opacity:1}
.et-del:hover{background:var(--vermelho-light);color:var(--vermelho)}
.et-lock{flex-shrink:0;padding:6px;font-size:12px;opacity:.4}
.et-confirma{background:var(--vermelho-light);border:1px solid #e8a8a0;border-radius:12px;
  padding:12px 14px;margin:2px 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--vermelho)}
.et-confirma select{font-family:var(--sans);font-size:12.5px;padding:7px 9px;
  border:1px solid #e8a8a0;border-radius:9px;background:var(--branco);color:var(--preto)}
.et-nova{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:14px;
  border-top:1px dashed var(--linha)}
.et-nova input[type=text]{flex:1;min-width:0;font-family:var(--sans);font-size:14px;
  padding:10px 12px;border:1px solid var(--linha);border-radius:11px;background:var(--branco)}
.et-nova input[type=text]:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.et-dica{font-size:12px;color:var(--cinza);margin:-12px 0 16px}

/* ---------- Cadastro rápido de contato dentro da oportunidade ---------- */
.novo-contato{grid-column:1/-1;background:var(--rosa-light);border-radius:14px;padding:15px 16px}
.nc-titulo{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--rosa);
  font-weight:700;margin-bottom:12px}
.nc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nc-grid .field input{background:var(--branco)}
.nc-pe{font-size:12px;color:var(--cinza);margin-top:11px;line-height:1.5}
@media (max-width:560px){ .nc-grid{grid-template-columns:1fr} }

/* ---------- Busca de contato (autocomplete no CRM) ---------- */
[hidden]{display:none !important}
.busca-contato{display:flex;gap:8px;align-items:stretch}
.bc-campo{position:relative;flex:1;min-width:0}
.bc-campo input{width:100%;font-family:var(--sans);font-size:14px;padding:11px 13px;
  border:1px solid var(--linha);border-radius:11px;background:var(--branco);color:var(--preto)}
.bc-campo input:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.bc-add{width:46px;flex-shrink:0;border:1px solid var(--linha);background:var(--branco);border-radius:11px;
  cursor:pointer;font-family:var(--sans);font-size:22px;line-height:1;color:var(--rosa);transition:.15s}
.bc-add:hover,.bc-add.on{background:var(--rosa);color:#fff;border-color:var(--rosa)}
.bc-lista{position:absolute;z-index:5;top:calc(100% + 5px);left:0;right:0;background:var(--branco);
  border:1px solid var(--linha);border-radius:12px;box-shadow:0 12px 30px rgba(17,16,16,.14);
  max-height:250px;overflow-y:auto;padding:5px}
.bc-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  cursor:pointer;font-size:13.5px}
.bc-item:hover,.bc-item.sel{background:var(--rosa-light)}
.bc-item .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-item .zap{font-size:12px;color:var(--cinza);flex-shrink:0}
.bc-vazio{padding:13px 11px;font-size:12.5px;color:var(--cinza);line-height:1.5}
.bc-escolhido{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--cinza-claro);
  border-radius:11px;padding:10px 13px;font-size:13.5px;font-weight:600}
.bc-escolhido>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-escolhido button{margin-left:auto;border:none;background:none;cursor:pointer;
  font-size:19px;line-height:1;color:var(--cinza);padding:0 3px}
.bc-escolhido button:hover{color:var(--vermelho)}

/* ---------- Paleta de cores (popover estilo Trello) ---------- */
.paleta-pop{position:fixed;z-index:80;background:var(--branco);border:1px solid var(--linha);
  border-radius:14px;padding:12px;box-shadow:0 18px 46px rgba(17,16,16,.22)}
.paleta-grid{display:grid;grid-template-columns:repeat(5,44px);gap:7px}
.paleta-grid.etiqueta{grid-template-columns:repeat(5,44px)}
.paleta-grid .sw{height:32px;border:none;border-radius:7px;cursor:pointer;padding:0;
  position:relative;transition:.12s}
.paleta-grid .sw:hover:not(:disabled){transform:scale(1.06);box-shadow:0 3px 10px rgba(17,16,16,.22)}
.paleta-grid .sw.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:15px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.paleta-grid .sw.usada{opacity:.22;cursor:not-allowed}
.paleta-grid .sw.usada::after{content:'×';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:16px;font-weight:700}
.paleta-pe{font-size:12px;color:var(--cinza);margin-top:10px;text-align:center}

/* ---------- Etiquetas ---------- */
.etq{display:inline-flex;align-items:center;color:#fff;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:6px;white-space:nowrap;line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,.18)}
.kcard .ketiq{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.kcard .ketiq .etq{cursor:pointer}
/* modo compacto: só as barrinhas de cor */
.etq-compacto .kcard .ketiq{gap:4px}
.etq-compacto .kcard .ketiq .etq{width:40px;height:9px;padding:0;border-radius:4px;
  font-size:0;text-shadow:none;overflow:hidden}

.etq-escolha{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:11px 12px}
.etq-op{cursor:pointer;line-height:1}
.etq-op input{position:absolute;opacity:0;width:0;height:0}
.etq-op .etq{opacity:.34;transition:.12s;padding:5px 11px;font-size:12px}
.etq-op:hover .etq{opacity:.6}
.etq-op input:checked + .etq{opacity:1;box-shadow:0 0 0 2px var(--branco),0 0 0 4px var(--preto)}
.etq-op input:focus-visible + .etq{outline:2px solid var(--rosa);outline-offset:2px}
.etq-ger{margin-left:auto;border:none;background:none;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:600;color:var(--cinza);padding:4px 6px;border-radius:8px}
.etq-ger:hover{color:var(--rosa);background:var(--rosa-light)}

/* ---------- Faixa de datas do card ---------- */
.kcard .kdatas{display:inline-flex;align-items:center;gap:5px;margin:8px 0 2px;
  padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--cinza-claro);color:var(--cinza)}
.kcard .kdatas svg{width:12px;height:12px;flex-shrink:0}
.kcard .kdatas.atrasado{background:#c0392b;color:#fff}
.kcard .kdatas.perto{background:var(--amarelo-light);color:var(--amarelo-texto)}
/* ganhou: no lugar da data, o sinal de que essa já foi */
.kcard .kdatas.ganhou{background:var(--verde-light);color:var(--verde);font-weight:700}
.kcard .kdatas.ganhou svg{width:13px;height:13px}

/* ---------- Menu de ações do card ---------- */
.kcard{position:relative}
/* prioridade e menu, lado a lado, sempre à vista (no celular não há hover) */
.kctrl{position:absolute;top:10px;right:10px;z-index:2;
  display:flex;align-items:center;gap:5px}
.kmenu-bt{width:24px;height:24px;border:none;flex-shrink:0;
  background:var(--cinza-claro);color:var(--cinza);border-radius:7px;cursor:pointer;
  font-size:15px;line-height:1;opacity:1;transition:.12s;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.kmenu-bt:hover{background:var(--preto);color:var(--sobre-preto)}

.card-menu,.card-pop{position:fixed;z-index:90;background:var(--branco);
  border:1px solid var(--linha);border-radius:14px;padding:7px;
  box-shadow:0 18px 46px rgba(17,16,16,.22)}
.card-menu{min-width:196px;display:flex;flex-direction:column;gap:1px}
.cm-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border:none;
  background:none;cursor:pointer;border-radius:9px;font-family:var(--sans);
  font-size:13.5px;font-weight:500;color:var(--preto);text-align:left;width:100%}
.cm-item:hover{background:var(--cinza-claro)}
/* sem ícone: o texto começa na margem */
.cm-item.perigo{color:var(--vermelho)}
.cm-item.perigo:hover{background:var(--vermelho-light)}

.card-pop{min-width:230px;max-width:290px;padding:14px}
.cp-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza);font-weight:700}
.cp-topo button{border:none;background:none;cursor:pointer;font-size:18px;line-height:1;
  color:var(--cinza);padding:0 2px}
.cp-topo button:hover{color:var(--vermelho)}
.cp-etq{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cp-etq .btn{margin-top:8px;align-self:stretch;justify-content:center}
.cp-vazio{font-size:12.5px;color:var(--cinza)}
.cp-form{display:flex;flex-direction:column;gap:5px}
.cp-form label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cinza);font-weight:600;margin-top:6px}
.cp-form input{font-family:var(--sans);font-size:13.5px;padding:9px 11px;
  border:1px solid var(--linha);border-radius:10px;background:var(--branco);width:100%}
.cp-form input:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.cp-form .btn{margin-top:12px;justify-content:center}
.cp-lista{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}
.cp-linha{display:flex;align-items:center;gap:10px;padding:9px 10px;border:none;
  background:none;cursor:pointer;border-radius:9px;font-family:var(--sans);
  font-size:13.5px;text-align:left;width:100%;color:var(--preto)}
.cp-linha:hover{background:var(--cinza-claro)}
.cp-linha.on{background:var(--rosa-light);font-weight:700}
.cp-linha .bola{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cp-linha .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Ficha do cliente ---------- */
/* a ficha rola por dentro em qualquer tela — antes só o celular rolava */
.modal.ficha{max-width:620px;padding:0;overflow-y:auto;max-height:calc(100vh - 100px);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.fx-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:26px 28px 20px;border-bottom:1px solid var(--linha);background:var(--branco)}
.fx-topo h2{font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.15;margin:0;
  overflow-wrap:anywhere}
.fx-etiq{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px}
.fx-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.fx-etapa{display:inline-flex;color:#fff;font-size:12px;font-weight:700;padding:3px 10px;
  border-radius:100px;letter-spacing:.04em;text-transform:uppercase}
.fx-etapa:empty{display:none}
.fx-x{border:none;background:none;cursor:pointer;font-size:26px;line-height:1;
  color:var(--cinza);padding:0 4px;flex-shrink:0}
.fx-x:hover{color:var(--vermelho)}

.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fx-bloco{padding:20px 28px;border-bottom:1px solid var(--linha)}
.fx-bloco:first-child{border-right:1px solid var(--linha)}
.fx-rot{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);
  font-weight:700;margin-bottom:11px}
.fx-linhas{display:flex;flex-direction:column;gap:7px}
.fx-l{display:flex;gap:10px;font-size:13px;align-items:baseline}
.fx-l .r{color:var(--cinza);min-width:104px;flex-shrink:0;font-size:12px}
.fx-l .v{font-weight:600;overflow-wrap:anywhere}
a.fx-l .v,.fx-l a.v{color:var(--rosa);text-decoration:none}
.fx-l a.v:hover{text-decoration:underline}
.fx-vazio{font-size:12.5px;color:var(--cinza);font-style:italic}
.fx-link{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--rosa)}
.fx-link:hover{text-decoration:underline}

/* Observações: uma nota, não um parágrafo solto no meio do vazio */
.fx-obs{padding:16px 28px 18px;border-bottom:1px solid var(--linha)}
.fx-obs .fx-rot{margin-bottom:8px}
.fx-obs #fx_obs{position:relative;font-size:13px;line-height:1.6;white-space:pre-wrap;
  background:var(--amarelo-light);border-left:3px solid var(--amarelo);
  border-radius:0 12px 12px 0;padding:12px 14px;color:var(--preto);
  overflow-wrap:anywhere}
@media (max-width:560px){
  .fx-obs{padding:14px 16px 16px}
  .fx-obs #fx_obs{padding:11px 12px;font-size:13px}
}
.fx-msg{padding:22px 28px;background:var(--cinza-claro)}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fx-chip{border:1px dashed var(--linha);background:var(--branco);color:var(--cinza);cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:600;padding:5px 10px;border-radius:100px}
.fx-chip:hover{border-color:var(--rosa);color:var(--rosa);border-style:solid}
.fx-msg textarea{width:100%;font-family:var(--sans);font-size:14px;padding:13px;
  border:1px solid var(--linha);border-radius:12px;background:var(--branco);resize:none;
  min-height:80px;max-height:220px;line-height:1.55;overflow:auto}
.fx-msg textarea:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.fx-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.fx-aviso{font-size:12px;color:var(--cinza)}
.fx-gerada{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha)}
.fx-previa{background:#dcf8c6;color:#111;border-radius:12px;border-bottom-right-radius:3px;
  padding:12px 14px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;
  box-shadow:0 1px 2px rgba(17,16,16,.08);overflow-wrap:anywhere}
.modal.ficha .form-actions{margin:0;padding:18px 28px;background:var(--branco);
  border-top:1px solid var(--linha);justify-content:flex-end}
@media (max-width:560px){ .fx-grid{grid-template-columns:1fr} .fx-bloco:first-child{border-right:none} }

/* ---------- Painel "Escrever com IA" ---------- */
.btn.ghost.on{background:var(--rosa);color:#fff;border-color:var(--rosa)}
/* O painel da IA é um cartão dentro do bloco, não uma lista solta:
   fundo branco, título próprio e campos empilhados em ritmo constante. */
.fx-ia{margin-top:12px;padding:14px;background:var(--branco);border:1px solid var(--linha);
  border-radius:14px;display:flex;flex-direction:column;gap:10px}
.fx-ia-cab{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza2)}
.fx-ia-linha{display:flex;gap:8px;align-items:stretch}
.fx-ia select,.fx-ia input[type=text]{font-family:var(--sans);font-size:13.5px;
  padding:10px 12px;border:1px solid var(--linha);border-radius:11px;background:var(--branco);
  color:var(--preto);width:100%}
.fx-ia select{flex:1;min-width:0}
.fx-ia select:focus,.fx-ia input:focus{outline:none;border-color:var(--rosa);
  box-shadow:0 0 0 3px var(--rosa-light)}
.fx-ia-linha .btn{flex-shrink:0;white-space:nowrap}
.fx-ia-saida{display:flex;flex-direction:column;gap:8px}
.fx-ia-espera{font-size:12.5px;color:var(--cinza);font-style:italic;padding:6px 0}
.fx-ia-erro{font-size:12.5px;color:var(--vermelho);background:var(--vermelho-light);
  border:1px solid #e8a8a0;border-radius:11px;padding:11px 13px;line-height:1.5}
.fx-ia-dica{font-size:12px;color:var(--cinza);margin-top:2px}
.fx-ia-op{text-align:left;font-family:var(--sans);font-size:13.5px;line-height:1.55;
  background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:12px 14px;
  cursor:pointer;transition:.12s;white-space:pre-wrap;color:var(--preto)}
.fx-ia-op:hover{border-color:var(--rosa-mid);box-shadow:0 4px 14px rgba(17,16,16,.07)}
.fx-ia-op.on{border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}

/* ---------- Status da busca de CEP ---------- */
.cep-status{font-size:12px;line-height:1.4;min-height:14px;color:var(--cinza)}
.cep-status.bom{color:var(--verde);font-weight:600}
.cep-status.ruim{color:var(--vermelho);font-weight:600}

/* ---------- Afazeres (lista de tarefas) ---------- */
/* cada afazer é um cartão solto, com respiro entre eles (04/11/2026) */
.tf-lista{max-width:720px}
.tf-add{display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;border:none;
  background:var(--branco);box-shadow:var(--sombra);cursor:pointer;border-radius:var(--raio-sm);
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--rosa);text-align:left;margin-bottom:10px}
.tf-add:hover{background:var(--rosa-light)}
.tf-add-ic{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rosa);
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;flex-shrink:0}

.tf-bloco{margin-top:18px}
.tf-bloco-rot{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);
  font-weight:700;padding:0 4px 10px}
.tf-bloco-rot.alerta{color:var(--vermelho)}
.tf-bloco-rot.dobra{display:flex;align-items:center;gap:8px;width:100%;border:none;
  background:none;cursor:pointer;font-family:var(--sans);text-align:left;border-radius:10px}
.tf-bloco-rot.dobra:hover{background:var(--cinza-claro)}
.tf-bloco-rot .seta{font-size:12px}

.tf{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:var(--raio-sm);
  background:var(--branco);box-shadow:var(--sombra);margin-bottom:10px;transition:.15s}
.tf:hover{background:var(--cinza-claro)}
.tf.saindo{opacity:0;transform:translateX(14px)}
.tf-check{width:21px;height:21px;flex-shrink:0;margin-top:1px;border-radius:50%;cursor:pointer;
  border:1.8px solid var(--cinza2);background:none;transition:.12s;position:relative}
.tf-check:hover{border-color:var(--rosa);background:var(--rosa-light)}
.tf-check.fantasma{cursor:default;opacity:.35}
.tf.feita .tf-check{background:var(--verde);border-color:var(--verde)}
.tf.feita .tf-check::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:12px;font-weight:700}
.tf-corpo{flex:1;min-width:0;cursor:pointer}
.tf-titulo{font-size:14.5px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.tf.feita .tf-titulo{text-decoration:line-through;color:var(--cinza2)}
.tf-detalhes{font-size:12.5px;color:var(--cinza);margin-top:3px;line-height:1.45;overflow-wrap:anywhere}
.tf-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tf-meta:not(:empty){margin-top:6px}
.tf-data{display:inline-block;font-size:12px;font-weight:700;
  background:var(--cinza-claro);color:var(--cinza);padding:3px 9px;border-radius:6px}
.tf-data.atrasada{background:var(--vermelho-light);color:var(--vermelho)}
/* quem é o dono da tarefa — só aparece na aba Ambas */
.tf-dono{display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px;
  background:var(--cinza-claro);color:var(--cinza)}
.tf-dono.d1{background:var(--rosa-light);color:var(--rosa)}
.tf-dono.d2{background:var(--azul-light);color:var(--azul)}
.tf.feita .tf-dono{opacity:.55}
/* linha de responsável dentro do formulário */
.tf-form-dono{margin-bottom:10px}
.tf-chip-dono{font-weight:600}
.tf-x{border:none;background:none;cursor:pointer;color:var(--cinza2);padding:5px;
  border-radius:8px;display:flex;align-items:center;opacity:.55;transition:.12s;flex-shrink:0}
.tf:hover .tf-x{opacity:1}
.tf-x:hover{background:var(--vermelho-light);color:var(--vermelho)}

/* formulário de nova tarefa / edição */
.tf-form{background:var(--branco);box-shadow:var(--sombra);border-radius:var(--raio-sm);padding:16px 18px;margin:0 0 10px}
.tf-form-linha{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tf-form-linha input{flex:1;min-width:0;font-family:var(--sans);font-size:14.5px;
  border:none;background:none;padding:6px 0;color:var(--preto)}
.tf-form-linha input:focus{outline:none}
.tf-form-linha input::placeholder{color:var(--cinza2)}
.tf-form-linha:nth-child(2) input{font-size:13px}
.tf-icone{width:21px;text-align:center;color:var(--cinza2);flex-shrink:0;font-size:14px}
.tf-form-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--linha)}
.tf-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.tf-chip{border:1px solid var(--linha);background:var(--branco);color:var(--preto);cursor:pointer;
  font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px;
  display:inline-flex;align-items:center;gap:6px;position:relative}
.tf-chip:hover{border-color:var(--rosa-mid)}
.tf-chip.on{background:var(--rosa);color:#fff;border-color:var(--rosa)}
.tf-chip.limpar{color:var(--cinza);font-weight:500}
.tf-chip-data input[type=date]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
/* chip de repetição: o <select> cobre o chip inteiro e fica invisível */
.tf-chip-repete{padding-right:12px}
.tf-chip-repete svg{width:14px;height:14px;flex-shrink:0}
.tf-chip-repete select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;
  font-family:var(--sans);font-size:16px}
.tf-chip-repete::after{content:"repetir";font-size:12.5px;font-weight:600}
.tf-chip-repete.on::after{content:none}
/* quando tem repetição escolhida, o próprio texto do select aparece */
.tf-chip-repete.on select{opacity:1;position:static;width:auto;background:none;border:none;
  color:#fff;font-size:12.5px;font-weight:600;-webkit-appearance:none;appearance:none;
  padding:0;text-align:left}
.tf-chip-repete.on select option{color:var(--preto);background:var(--branco)}

/* marquinha de "isso volta sozinha" no cartão da tarefa */
.tf-repete{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--roxo);
  background:var(--roxo-light,rgba(124,58,237,.12));padding:3px 9px;border-radius:100px;flex-shrink:0}
.tf-repete svg{width:11px;height:11px}
.tf-form-acoes{display:flex;gap:8px;margin-left:auto}

.tf-feitas{margin-top:14px;border-top:1px solid var(--linha);padding-top:4px}
.tf-limpar-tudo{border:none;background:none;cursor:pointer;font-family:var(--sans);
  font-size:12.5px;font-weight:600;color:var(--cinza);padding:10px 14px;border-radius:10px}
.tf-limpar-tudo:hover{color:var(--vermelho);background:var(--vermelho-light)}
.tf-vazio{text-align:center;padding:44px 20px;color:var(--cinza)}
.tf-vazio .em{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--preto);margin-bottom:6px}
.tf-vazio p{font-size:13px}

/* ---------- Alternador de ordem do board ---------- */
.ordem-toggle{display:inline-flex;background:var(--branco);border:1px solid var(--linha);
  border-radius:100px;padding:3px;gap:2px}
.ordem-toggle a{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:100px;
  color:var(--cinza);white-space:nowrap;transition:.15s}
.ordem-toggle a:hover{color:var(--preto)}
.ordem-toggle a.on{background:var(--preto);color:var(--sobre-preto)}

/* contadores no topo da coluna */
.col-nums{display:flex;align-items:center;gap:5px}
.cont.urgente{background:var(--vermelho);color:#fff}

/* card sem próximo contato agendado */
.kcard .kdatas.sem-retorno{background:var(--amarelo-light);color:var(--amarelo-texto);
  font-weight:600;font-style:italic}

/* ============================================================
   Painel de conteúdo
   ============================================================ */
.ct-barra{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  padding:16px 18px;margin-bottom:22px;display:flex;flex-direction:column;gap:12px}
.ct-prog{display:flex;align-items:center;gap:12px}
.ct-prog-trilho{flex:1;height:8px;background:var(--cinza-claro);border-radius:100px;overflow:hidden}
.ct-prog-fill{height:100%;background:linear-gradient(90deg,var(--rosa),var(--rosa-mid));
  border-radius:100px;transition:width .3s ease}
.ct-prog-num{font-size:12px;font-weight:600;color:var(--cinza);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ct-filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ct-chip{border:1px solid var(--linha);background:var(--branco);color:var(--cinza);cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:600;padding:5px 12px;border-radius:100px;
  white-space:nowrap;user-select:none;transition:.12s}
.ct-chip b{font-weight:700;opacity:.6;margin-left:2px}
.ct-chip:hover{border-color:var(--rosa-mid);color:var(--preto)}
.ct-chip.on{background:var(--preto);color:var(--sobre-preto);border-color:var(--preto)}
.ct-chip.on.c-rosa{background:var(--rosa);border-color:var(--rosa)}
.ct-chip.on.c-verde{background:var(--verde);border-color:var(--verde)}
.ct-chip.on.c-whats{background:#128c3e;border-color:#128c3e}
.ct-chip.on.c-amarelo{background:var(--amarelo);border-color:var(--amarelo)}
.ct-chip.on.c-vermelho{background:var(--vermelho);border-color:var(--vermelho)}
.ct-chip.on.c-azul{background:var(--azul);border-color:var(--azul)}
.ct-chip.on.c-roxo{background:var(--roxo);border-color:var(--roxo)}
.ct-chip.on.c-laranja{background:var(--laranja);border-color:var(--laranja)}
.ct-lb{font-size:12px;font-weight:600;color:var(--cinza);letter-spacing:.02em}
.ct-sel{border:1px solid var(--linha);border-radius:100px;background:var(--branco);color:var(--preto);
  font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 30px 7px 13px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px}
.ct-sel:hover{border-color:var(--rosa-mid)}
.ct-sel:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.ct-busca{flex:1;min-width:150px;border:1px solid var(--linha);border-radius:100px;
  padding:6px 15px;font-family:var(--sans);font-size:12.5px;outline:none;background:var(--branco)}
.ct-busca:focus{border-color:var(--rosa-mid);box-shadow:0 0 0 3px var(--rosa-light)}

/* cabeçalho de fase */
.ct-fase-head{padding:26px 4px 10px}
.ct-fase-head h2{font-family:var(--serif);font-size:26px;font-weight:300;letter-spacing:-.01em}
.ct-fase-head p{font-size:12.5px;color:var(--cinza);margin-top:3px}

/* cartão do dia */
.ct-dia{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  padding:16px 20px;margin-bottom:12px}
.ct-dia-topo{display:flex;align-items:center;gap:16px;cursor:pointer}
.ct-dia-num{font-family:var(--serif);font-size:34px;font-weight:300;line-height:1;
  color:var(--preto);min-width:46px;font-variant-numeric:tabular-nums}
.ct-dia-meio{flex:1;min-width:0}
.ct-dia-data{font-size:12px;color:var(--cinza2);margin-bottom:1px}
.ct-dia-titulo{width:100%;border:none;background:none;font-family:var(--sans);
  font-size:15.5px;font-weight:600;color:var(--preto);outline:none;padding:2px 0;cursor:text}
.ct-dia-titulo::placeholder{color:var(--cinza2);font-weight:400}
.ct-dia-titulo:focus{border-bottom:1px solid var(--rosa-mid)}
.ct-contador{font-size:12px;font-weight:600;color:var(--cinza2);background:var(--cinza-claro);
  padding:5px 12px;border-radius:100px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-fase-pill{font-size:12px;font-weight:600;padding:5px 12px;border-radius:100px;white-space:nowrap;
  background:var(--cinza-claro);color:var(--cinza)}
.ct-fase-pill.c-amarelo{background:var(--amarelo-light);color:var(--amarelo-texto)}
.ct-fase-pill.c-rosa{background:var(--rosa-light);color:var(--rosa)}
.ct-fase-pill.c-verde{background:var(--verde-light);color:var(--verde)}
.ct-fase-pill.c-azul{background:var(--azul-light);color:var(--azul)}
.ct-fase-pill.c-vermelho{background:var(--vermelho-light);color:var(--vermelho)}
.ct-seta{font-size:12px;color:var(--cinza2);transition:transform .18s}
.ct-dia.fechado .ct-seta{transform:rotate(-90deg)}
/* Dia fechado esconde o TEXTO, não as peças: continua dando pra ver o que
   está marcado pra aquele dia (canal, formato, quem faz, status) numa linha
   só por peça. Quem quer ler o roteiro abre o dia. */
.ct-dia.fechado .ct-briefing,
.ct-dia.fechado .ct-copy,
.ct-dia.fechado .ct-partes,
.ct-dia.fechado .ct-obs-txt{display:none}
/* sem o texto, as linhas se aproximam */
.ct-dia.fechado .ct-itens{margin-top:10px}
.ct-dia.fechado .ct-item{padding:7px 0}
.ct-dia.fechado .ct-item-topo{margin-bottom:0}
.ct-dia.fechado .ct-acoes{margin-top:0}

/* item */
.ct-itens{margin-top:14px;display:flex;flex-direction:column}
.ct-item{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--linha)}
.ct-item:first-child{border-top:none;padding-top:4px}
.ct-item.st-concluido{opacity:.6}
/* concluído do Conteúdo = o mesmo check dos Afazeres (bolinha; feito = verde com ✓) — 07/10/2026 */
.ct-check{width:21px;height:21px;flex-shrink:0;margin-top:2px;border-radius:50%;cursor:pointer;
  border:1.8px solid var(--cinza2);background:none;position:relative;transition:.12s}
.ct-check:hover{border-color:var(--rosa);background:var(--rosa-light)}
.ct-item.st-concluido .ct-check{background:var(--verde);border-color:var(--verde)}
.ct-item.st-concluido .ct-check::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:12px;font-weight:700}
.ct-item-corpo{flex:1;min-width:0}
.ct-item-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
/* A cor vem por style, direto do banco — mesma paleta das etiquetas do CRM.
   Aqui fica só o formato da pílula. */
.ct-canal{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 13px;border-radius:100px;background:var(--cinza2);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18);cursor:pointer;transition:.14s}
/* Etiquetas encolhidas: a linha inteira vira barrinha de cor — canal, formato,
   tipo, quem faz e status juntos, igual ao CRM. Clicar de novo devolve o texto. */
body.etq-so-cor .ct-canal,
body.etq-so-cor .ct-tag,
body.etq-so-cor .ct-resp,
body.etq-so-cor .ct-status{width:38px;height:11px;padding:0;border-radius:5px;
  font-size:0;text-shadow:none;overflow:hidden;flex-shrink:0;line-height:0}
body.etq-so-cor .ct-canal{width:46px}
/* as cinzentas ganham cor própria pra se distinguirem na faixa */
body.etq-so-cor .ct-tag{background:var(--cinza2)}
body.etq-so-cor .ct-tag.vazia{background:var(--linha)}
body.etq-so-cor .ct-resp{background:var(--rosa-mid)}
body.etq-so-cor .ct-resp.vazia{background:var(--linha)}
/* fundo claro vira cor cheia: como barrinha fina, o tom claro some na tela */
body.etq-so-cor .ct-resp.d1{background:var(--rosa)}
body.etq-so-cor .ct-resp.d2{background:var(--azul)}
body.etq-so-cor .ct-status.s-a-fazer{background:var(--vermelho)}
body.etq-so-cor .ct-status.s-gravar{background:var(--rosa)}
body.etq-so-cor .ct-status.s-fazendo{background:var(--verde)}
body.etq-so-cor .ct-status.s-agendado{background:var(--azul)}
body.etq-so-cor .ct-status.s-nao-feito{background:var(--cinza2)}
body.etq-so-cor .ct-status.s-editar{background:var(--roxo)}
body.etq-so-cor .ct-item-topo{gap:5px}
/* o status continua encostado na direita, agora como barrinha */
body.etq-so-cor .ct-item-topo .ct-status{margin-left:auto}
.ct-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:100px;
  background:var(--cinza-claro);color:var(--cinza)}
.ct-resp{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;background:var(--cinza-claro);color:var(--cinza)}
.ct-resp.d1{background:var(--rosa-light);color:var(--rosa)}
.ct-resp.d2{background:var(--azul-light);color:var(--azul)}
.ct-rotulo{font-size:14px;font-weight:600;color:var(--cinza);flex:1;min-width:120px}
/* status fica sozinho na ponta direita da linha */
.ct-status{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;background:var(--cinza-claro);color:var(--cinza2)}
/* cada status com a sua cor */
.ct-status.s-a-fazer{background:var(--vermelho-light);color:var(--vermelho)}
.ct-status.s-gravar{background:var(--rosa-light);color:var(--rosa)}
.ct-status.s-fazendo{background:var(--verde-light);color:var(--verde)}
.ct-status.s-agendar{background:var(--vermelho);color:#fff}
.ct-status.s-publicar{background:var(--rosa);color:#fff}
.ct-status.s-agendado{background:var(--azul-light);color:var(--azul)}
.ct-status.s-concluido{background:var(--azul);color:#fff}
.ct-status.s-nao-feito{background:var(--cinza-claro);color:var(--cinza)}
.ct-status.s-editar{background:var(--roxo-light);color:var(--roxo)}
.ct-status.s-pra-aprovar{background:var(--amarelo-light);color:var(--amarelo-texto)}
.ct-status.s-aprovado{background:var(--verde);color:#fff}
.ct-resp.d0{background:var(--cinza-claro);color:var(--cinza)}

/* pills editáveis: clica e troca ali mesmo */
.ct-edita{cursor:pointer;position:relative}
.ct-edita:hover{box-shadow:0 0 0 2px var(--rosa-light);filter:brightness(1.04)}
.ct-edita.vazia{background:transparent;border:1px dashed var(--linha);color:var(--cinza2);font-weight:600;opacity:.75}
.ct-edita.vazia:hover{opacity:1;border-color:var(--rosa-mid);color:var(--rosa);box-shadow:none}

.pill-menu{position:absolute;z-index:80;background:var(--branco);border:1px solid var(--linha);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;min-width:158px;
  display:flex;flex-direction:column;gap:2px}
.pill-op{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;color:var(--preto);padding:8px 10px;border-radius:8px}
.pill-op:hover{background:var(--cinza-claro)}
.pill-op.on{background:var(--rosa-light);color:var(--rosa);font-weight:700}
.pill-op.apaga{color:var(--cinza);font-size:12px}
.pill-novo{border:1px solid var(--linha);border-radius:8px;padding:7px 10px;margin-top:4px;
  font-family:var(--sans);font-size:13px;width:100%}
.pill-novo:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}

/* ---------- Conteúdo em kanban ---------- */
.ct-kanban{margin-top:4px}
.ct-kanban .col{min-width:250px;max-width:280px}
.ct-kanban .col-body{max-height:none}
.ct-kcard{cursor:grab;padding:12px 13px;display:flex;flex-direction:column;gap:8px}
.ct-kcard.arrastando{opacity:.4}
.ct-kcard .ct-item-topo{margin:0;gap:6px}
.ct-kcard .ct-status{margin-left:0}
.ct-kdata{font-size:12px;font-weight:700;color:var(--cinza);letter-spacing:.04em}
.ct-ktexto{font-size:12.5px;line-height:1.5;color:var(--preto)}   /* era --cinza-escuro: no tema escuro é cor de fundo e o texto sumia — 24/10/2026 */
.ct-kacoes{display:flex;gap:4px;flex-wrap:wrap;border-top:1px solid var(--linha);padding-top:7px}
.ct-kcard.st-concluido{opacity:.62}
.ct-filtros .ct-lb + .ct-sel{margin-right:6px}

.ct-briefing{font-size:13px;color:var(--cinza);line-height:1.55;margin-bottom:9px;
  padding-left:13px;border-left:2px solid var(--linha)}
.ct-copy{background:var(--cinza-claro);border-radius:12px;border-left:4px solid var(--linha);
  padding:15px 18px;font-size:14px;line-height:1.75;color:var(--preto);
  white-space:normal;overflow-wrap:anywhere}
/* a cor da borda vem por style, do canal da peça */
.ct-obs-txt{margin-top:9px;font-size:12.5px;color:var(--cinza);font-style:italic}

.ct-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.ct-mini{border:1px solid transparent;background:none;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:600;color:var(--cinza2);padding:5px 10px;border-radius:8px;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:.12s}
.ct-mini:hover{background:var(--cinza-claro);color:var(--preto)}
/* botão só com ícone de traço */
.ct-mini.so-ic{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border-radius:9px;color:var(--cinza2)}
.ct-mini.so-ic:hover{color:var(--preto)}
.ct-mini.so-ic.perigo:hover{color:var(--vermelho)}
.ct-mini.so-ic.feito{color:var(--verde);background:var(--verde-light)}
.ic-bt{width:17px;height:17px;display:block;flex-shrink:0}
.ct-mini.perigo:hover{background:var(--vermelho-light);color:var(--vermelho)}
.ct-rodape{margin-top:18px;display:flex;justify-content:flex-start}

/* estado vazio — ocupa a largura toda, não herda o limite da lista de Afazeres */
.ct-vazio{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  width:100%;padding:clamp(40px,7vw,72px) 28px;text-align:center}
.ct-vazio-em{font-family:var(--serif);font-size:clamp(22px,3vw,30px);font-weight:300;
  color:var(--preto);margin-bottom:8px}
.ct-vazio p{font-size:14px;color:var(--cinza);max-width:52ch;margin:0 auto}
.ct-vazio-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* formulário */
.ct-modal-bg{position:fixed;inset:0;background:rgba(17,16,16,.45);z-index:200;
  display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.ct-modal-bg[hidden]{display:none}
.ct-modal{background:var(--branco);border-radius:var(--raio);padding:26px 28px;
  width:100%;max-width:620px;box-shadow:0 20px 60px rgba(17,16,16,.2)}
.ct-modal h3{font-family:var(--serif);font-size:23px;font-weight:300;margin-bottom:18px}
.ct-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ct-modal label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cinza);margin-bottom:4px}
.ct-modal label small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--cinza2)}
.ct-modal.ct-full,.ct-modal label.ct-full{margin-top:12px}
.ct-modal input,.ct-modal select,.ct-modal textarea{width:100%;margin-top:5px;
  font-family:var(--sans);font-size:14px;border:1px solid var(--linha);border-radius:10px;
  padding:9px 12px;outline:none;background:var(--branco);color:var(--preto);
  text-transform:none;letter-spacing:0;font-weight:400}
.ct-modal textarea{resize:vertical;line-height:1.6}
.ct-modal input:focus,.ct-modal select:focus,.ct-modal textarea:focus{
  border-color:var(--rosa-mid);box-shadow:0 0 0 3px var(--rosa-light)}
.ct-modal-pe{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:22px}
.ct-salvo{margin-right:auto;font-size:12px;color:var(--verde);opacity:0;transition:opacity .2s}
.ct-salvo.on{opacity:1}
/* aviso de rascunho recuperado */
.ct-rascunho{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--amarelo-light);color:var(--amarelo-texto);border-radius:12px;
  padding:10px 14px;font-size:12.5px;font-weight:600;margin-bottom:16px}
.ct-rascunho[hidden]{display:none}
.ct-rascunho .ct-mini{margin-left:auto;color:var(--amarelo-texto)}
.ct-rascunho .ct-mini:hover{background:rgba(200,137,10,.14);color:var(--amarelo-texto)}

@media (max-width:480px){
  .ct-grade{grid-template-columns:1fr}
  .ct-modal{padding:20px 18px}
  .ct-vazio-acoes .btn{width:100%;justify-content:center}
}
@media (max-width:700px){
  .ct-grade{grid-template-columns:repeat(2,1fr)}
  .ct-dia-topo{flex-wrap:wrap;gap:10px}
  .ct-dia-num{font-size:28px;min-width:38px}
  .ct-fase-head h2{font-size:21px}
}

/* importação em lote */
.ct-head-botoes{display:flex;gap:8px;flex-wrap:wrap}
.ct-import{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  padding:22px 24px;margin-bottom:18px}
.ct-import label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cinza)}
.ct-import textarea{width:100%;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.6;border:1px solid var(--linha);border-radius:12px;
  padding:14px 16px;outline:none;resize:vertical;background:var(--branco);color:var(--preto)}
.ct-import textarea:focus{border-color:var(--rosa-mid);box-shadow:0 0 0 3px var(--rosa-light)}
.ct-import-pe{display:flex;align-items:center;gap:16px;justify-content:space-between;
  flex-wrap:wrap;margin-top:14px}
.ct-ajuda{font-size:12.5px;color:var(--cinza);max-width:60ch}
.ct-ajuda code{background:var(--cinza-claro);padding:1px 5px;border-radius:4px;
  font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ct-tabela-rolagem{overflow-x:auto;max-width:100%;margin:14px 0 4px}
.ct-tabela{width:100%;border-collapse:collapse;font-size:12.5px}
.ct-tabela th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cinza2);padding:7px 10px;border-bottom:1px solid var(--linha);
  white-space:nowrap}
.ct-tabela td{padding:8px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
.ct-tabela tr.ruim td{background:var(--vermelho-light)}
.ct-tabela td.erro{color:var(--verde);font-weight:600;white-space:nowrap}
.ct-tabela tr.ruim td.erro{color:var(--vermelho)}
.ct-tabela td.corte{color:var(--cinza);max-width:280px}
.ct-obrig{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--rosa-light);color:var(--rosa);padding:2px 7px;border-radius:100px;margin-left:5px}
.ct-grade-fase{grid-template-columns:90px 1fr 1fr}
.ct-grade-2{grid-template-columns:1fr 1fr;margin-top:12px}
.ct-modal-pe #ffExcluir{margin-right:auto;color:var(--vermelho);border-color:var(--vermelho-light)}
@media (max-width:480px){ .ct-grade-fase,.ct-grade-2{grid-template-columns:1fr} }

/* planilha de correção da importação */
.ct-planilha-wrap{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  padding:18px 20px;margin-bottom:18px}
.ct-planilha-topo{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:12px}
.ct-alerta{font-size:12.5px;font-weight:600;color:var(--vermelho);
  background:var(--vermelho-light);padding:4px 11px;border-radius:100px;margin-left:8px}
.ct-tudo-ok{font-size:12.5px;font-weight:600;color:var(--verde);
  background:var(--verde-light);padding:4px 11px;border-radius:100px;margin-left:8px}
.ct-planilha{border-collapse:separate;border-spacing:0;font-size:12.5px;width:max-content;min-width:100%}
.ct-planilha th{position:sticky;top:0;z-index:2;background:var(--cinza-claro);text-align:left;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza2);
  padding:8px 6px;white-space:nowrap;border-bottom:1px solid var(--linha)}
.ct-planilha td{padding:3px;border-bottom:1px solid var(--linha);vertical-align:top}
.ct-planilha tr.ruim td{background:var(--vermelho-light)}
.ct-planilha .col-n{width:34px;text-align:center;color:var(--cinza2);font-size:12px;padding-top:11px}
.ct-planilha .col-erro{white-space:nowrap;color:var(--verde);font-weight:600;padding:9px 8px;font-size:12px}
.ct-planilha tr.ruim .col-erro{color:var(--vermelho)}
.cel{width:150px;font-family:var(--sans);font-size:12.5px;border:1px solid transparent;
  border-radius:7px;padding:6px 8px;background:var(--branco);outline:none;color:var(--preto)}
.cel:hover{border-color:var(--linha)}
.cel:focus{border-color:var(--rosa-mid);box-shadow:0 0 0 3px var(--rosa-light)}
.cel.x{border-color:var(--vermelho);background:var(--branco)}
.cel-curta{width:96px}
.cel-data{width:92px}
.cel-texto{width:230px;resize:vertical;line-height:1.5;font-family:var(--sans)}
.cel-copy{width:300px}
.ct-chip-feitos b{font-weight:700;opacity:.6;margin-left:2px}
.ct-chip-feitos.on{background:var(--verde);border-color:var(--verde);color:#fff}

/* ============================================================
   Pedidos
   ============================================================ */
.pd-busca{display:flex;gap:8px;align-items:center;margin-bottom:16px;max-width:560px}
/* .pd-lista continua em uso por Estoque, Lixeira e Importar produtos */
.pd-lista{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  overflow:hidden;margin-bottom:18px}
/* lista de pedidos: mesma tabela branca de Clientes */
.pd-card{margin-bottom:18px}
.pd-tbl tr.pd-linha{cursor:pointer;transition:background .12s}
.pd-tbl tr.pd-linha:hover{background:var(--cinza-claro)}
.pd-tbl tr.pd-linha.on{background:var(--rosa-light)}
.pd-th-marca{width:34px}
.pd-tbl td.pd-marca{width:34px;cursor:pointer}
.pd-nome a{color:inherit;text-decoration:none}
.pd-nome a:hover{text-decoration:underline}
.pd-sub{font-size:12px;font-weight:400;color:var(--cinza2);margin-top:2px}
.pd-data{white-space:nowrap;color:var(--cinza)}
.pd-prazo{white-space:nowrap;color:var(--cinza)}
.pd-prazo.atrasado{color:var(--vermelho);font-weight:700}
.pd-total{font-family:var(--serif);font-size:16px;font-weight:300;white-space:nowrap}

/* painel do pedido aberto */
.pd-painel{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  padding:24px 26px;margin-bottom:24px}
.pd-painel-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.pd-painel-topo h2{font-family:var(--serif);font-size:24px;font-weight:300}
.pd-painel-topo .sub{font-size:12.5px;color:var(--cinza);margin-top:2px}
/* caixa do status: um seletor, com a cor do status atual na borda */
.pd-status-caixa{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--cinza-claro);border-radius:14px;border-left:5px solid var(--cinza2);
  padding:14px 18px;margin-bottom:22px}
.pd-status-caixa label{font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cinza2);margin:0}
.pd-status-caixa select{flex:1;min-width:200px;max-width:320px;font-family:var(--sans);
  font-size:15px;font-weight:600;color:var(--preto);background:var(--branco);
  border:1px solid var(--linha);border-radius:10px;padding:10px 13px;outline:none;cursor:pointer}
.pd-status-caixa select:focus{border-color:var(--rosa-mid);box-shadow:0 0 0 3px var(--rosa-light)}
.pd-status-caixa.c-amarelo{border-left-color:var(--amarelo)}
.pd-status-caixa.c-azul{border-left-color:var(--azul)}
.pd-status-caixa.c-roxo{border-left-color:var(--roxo)}
.pd-status-caixa.c-laranja{border-left-color:var(--laranja)}
.pd-status-caixa.c-verde{border-left-color:var(--verde)}
.pd-status-caixa.c-vermelho{border-left-color:var(--vermelho)}

/* campos do painel: mesmo desenho dos campos do modal */
.pd-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pd-form label,.pd-full{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cinza);margin-bottom:0}
.pd-full{margin-top:12px}
.pd-form label small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--cinza2)}
.pd-form input,.pd-form select,.pd-form textarea{width:100%;margin-top:5px;
  font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  border:1px solid var(--linha);border-radius:10px;padding:9px 12px;outline:none;
  background:var(--branco);color:var(--preto)}
.pd-form textarea{resize:vertical;line-height:1.6}
.pd-form input:focus,.pd-form select:focus,.pd-form textarea:focus{
  border-color:var(--rosa-mid);box-shadow:0 0 0 3px var(--rosa-light)}
.pd-form .ct-salvo{display:block;margin-top:8px;text-align:right}
.pd-colunas{display:grid;grid-template-columns:1.15fr 1fr;gap:32px}
.pd-col h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza2);margin-bottom:10px}
.pd-itens td{font-size:13px}
.pd-temp{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--amarelo-light);color:var(--amarelo-texto);padding:2px 7px;border-radius:100px;margin-left:6px}
.pd-det{font-size:12px;color:var(--cinza);margin-top:2px}
.pd-semitem{color:var(--cinza2);font-style:italic}
.pd-totais{margin-top:16px;border-top:1px solid var(--linha);padding-top:12px}
.pd-totais div{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--cinza)}
.pd-totais div b{color:var(--preto)}
.pd-totais .grande{border-top:1px solid var(--linha);margin-top:6px;padding-top:10px}
.pd-totais .grande b{font-family:var(--serif);font-size:21px;font-weight:300}
.pd-hist{list-style:none;font-size:12.5px}
.pd-hist li{padding:8px 0;border-bottom:1px solid var(--linha)}
.pd-hist li:last-child{border-bottom:none}
.pd-hist span{color:var(--cinza2)}
.pd-hist small{display:block;font-size:12px;color:var(--cinza2);margin-top:1px}
.pd-col2{grid-column:span 2}

/* modais de pedido */
.pd-abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pd-resultados{margin-top:8px;max-height:230px;overflow-y:auto}
.pd-res{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:10px 12px;border-radius:10px;font-family:var(--sans);font-size:13.5px;color:var(--preto)}
.pd-res:hover{background:var(--rosa-light)}
.pd-res small{display:block;font-size:12px;color:var(--cinza2);margin-top:1px}
.pd-res.vazio{color:var(--cinza);font-size:12.5px;cursor:default}
.pd-res.vazio:hover{background:none}
.pd-escolhido{background:var(--rosa-light);border-radius:12px;padding:12px 14px;margin-top:10px;
  display:flex;align-items:center;gap:10px;font-size:13.5px}
.pd-escolhido[hidden]{display:none}
.pd-escolhido small{color:var(--cinza)}
.pd-escolhido .ct-mini{margin-left:auto}
.btn.ghost.perigo{color:var(--vermelho);border-color:var(--vermelho-light)}
.btn.ghost.perigo:hover{background:var(--vermelho-light)}
.ct-modal-pe .perigo{margin-right:auto}

@media (max-width:820px){
  .pd-colunas{grid-template-columns:1fr;gap:24px}
  .pd-grade{grid-template-columns:repeat(2,1fr)}
  .pd-linha{grid-template-columns:60px 1fr auto;row-gap:6px}
  .pd-prazo,.pd-total{grid-column:span 1;text-align:left}
}

/* formulário completo do pedido */
.ct-modal-larga{max-width:760px}
.pd-secao{border-top:1px solid var(--linha);padding-top:16px;margin-top:18px}
.pd-secao:first-of-type{border-top:none;padding-top:0;margin-top:0}
.pd-secao-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pd-secao-topo h4{font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cinza2)}
.pd-itens-novos{display:flex;flex-direction:column;gap:6px}
.pd-item-novo{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;
  background:var(--cinza-claro);border-radius:10px;padding:10px 14px;font-size:13.5px}
.pd-item-novo b{font-weight:600}
.pd-item-novo span{color:var(--cinza);white-space:nowrap}
.pd-resumo{margin-top:18px;border-top:1px solid var(--linha);padding-top:12px}
.pd-resumo div{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--cinza)}
.pd-resumo div b{color:var(--preto)}
.pd-resumo .grande{border-top:1px solid var(--linha);margin-top:6px;padding-top:10px}
.pd-resumo .grande b{font-family:var(--serif);font-size:21px;font-weight:300}

/* ============================================================
   ASSISTENTE FLUTUANTE — bolinha no canto + caixa de perguntas
   ============================================================ */
/* quem se posiciona é o wrapper; a bolha só desenha o bonequinho */
.ia-flutua{position:fixed;right:18px;bottom:18px;z-index:900;line-height:0}
.ia-bolha{position:relative;width:120px;height:120px;
  border:none;background:none;padding:0;cursor:pointer;line-height:0;
  filter:drop-shadow(0 8px 16px rgba(181,22,94,.28));
  transition:transform .16s,filter .16s,width .18s,height .18s}

/* o "×" que guarda o bonequinho: discreto, aparece quando o mouse chega perto
   (no celular fica sempre visível, que lá não existe passar o mouse) */
.ia-guardar{position:absolute;top:2px;right:2px;width:24px;height:24px;padding:0;
  border:1px solid var(--linha);border-radius:50%;background:var(--branco);
  color:var(--cinza);font-family:var(--sans);font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.ia-flutua:hover .ia-guardar,.ia-guardar:focus-visible{opacity:1}
.ia-guardar:hover{color:var(--preto);border-color:var(--cinza2)}

/* guardado: vira um pontinho no canto, sem sombra e translúcido */
.ia-flutua.guardado .ia-bolha{width:30px;height:30px;filter:none;opacity:.5}
.ia-flutua.guardado .ia-bolha:hover{opacity:1;transform:scale(1.12)}
.ia-flutua.guardado .ia-guardar{display:none}
/* resposta nova reacende o pontinho, senão passaria batido */
.ia-flutua.guardado .ia-bolha.tem-novo{opacity:1;animation:none}
.ia-flutua.guardado .ia-selo{top:-4px;right:-4px;min-width:16px;height:16px;
  font-size:12px;border-width:1.5px;padding:0 3px}
.ia-bolha img{width:100%;height:100%;display:block;image-rendering:pixelated}
.ia-bolha:hover{transform:translateY(-3px) scale(1.04);
  filter:drop-shadow(0 12px 22px rgba(181,22,94,.38))}
.ia-bolha.ativa{filter:drop-shadow(0 6px 12px rgba(17,16,16,.22)) saturate(.75)}

/* selo de resposta nova — bolinha com o número em cima do bonequinho */
.ia-selo{position:absolute;top:8px;right:6px;min-width:26px;height:26px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;border-radius:13px;
  background:var(--verde);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;
  line-height:1;border:2px solid var(--creme);box-shadow:0 2px 6px rgba(17,16,16,.2);
  pointer-events:none}
.ia-selo[hidden]{display:none}
.ia-bolha.tem-novo{animation:ia-chama 1.6s ease-in-out 3}
@keyframes ia-chama{
  0%,100%{transform:none}
  25%{transform:translateY(-5px) rotate(-4deg)}
  75%{transform:translateY(-5px) rotate(4deg)}
}
@media (prefers-reduced-motion:reduce){.ia-bolha.tem-novo{animation:none}}

.ia-caixa{position:fixed;right:18px;bottom:18px;z-index:901;width:380px;max-height:min(620px,calc(100vh - 56px));
  display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:0 18px 50px rgba(17,16,16,.18);overflow:hidden}
.ia-caixa[hidden]{display:none}

.ia-topo{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--cinza-escuro);color:#fff;flex-shrink:0}
.ia-avatar{width:30px;height:30px;image-rendering:pixelated;flex-shrink:0}
.ia-titulo{flex:1;min-width:0;line-height:1.25}
.ia-titulo strong{display:block;font-size:14px;font-weight:600}
.ia-titulo span{display:block;font-size:12px;color:rgba(255,255,255,.55)}
.ia-bt-icone{width:28px;height:28px;flex-shrink:0;border:none;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);font-size:13px;line-height:1;
  font-family:var(--sans);transition:.15s}
.ia-bt-icone:hover{background:var(--rosa);color:#fff}

.ia-fluxo{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;
  background:var(--cinza-claro)}
.ia-vazio{font-size:13px;color:var(--cinza);line-height:1.55;padding:6px 4px}

.ia-msg{position:relative;max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;
  line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.ia-eu{align-self:flex-end;background:var(--rosa);color:#fff;border-bottom-right-radius:4px}
.ia-bot{align-self:flex-start;background:var(--branco);border:1px solid var(--linha);
  border-bottom-left-radius:4px}
.ia-bot.ia-erro{background:var(--vermelho-light);border-color:#f3cfca;color:var(--vermelho)}
.ia-bot.ia-esperando{color:var(--cinza);font-style:italic}

.ia-copiar{position:absolute;right:8px;bottom:-9px;opacity:0;border:1px solid var(--linha);
  background:var(--branco);color:var(--cinza);border-radius:20px;padding:2px 9px;font-size:12px;
  font-family:var(--sans);cursor:pointer;transition:.15s}
.ia-msg:hover .ia-copiar{opacity:1}
.ia-copiar:hover{color:var(--rosa);border-color:var(--rosa-mid)}

.ia-form{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--linha);
  background:var(--branco);flex-shrink:0}
.ia-form textarea{flex:1;resize:none;border:1px solid var(--linha);border-radius:12px;
  padding:10px 12px;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--preto);
  background:var(--cinza-claro);max-height:140px;outline:none}
.ia-form textarea:focus{border-color:var(--rosa-mid);background:var(--branco)}
.ia-enviar{width:38px;height:38px;flex-shrink:0;border:none;border-radius:12px;background:var(--rosa);
  color:#fff;cursor:pointer;font-size:14px;line-height:1;transition:.15s}
.ia-enviar:hover{background:#8f1149}
.ia-enviar:disabled{opacity:.45;cursor:default}

@media (max-width:640px){
  .ia-flutua{right:8px;bottom:8px}
  .ia-bolha{width:92px;height:92px}
  /* no celular não há hover: o × fica à mostra, só que apagadinho */
  .ia-guardar{opacity:.85;width:26px;height:26px}
  .ia-selo{top:4px;right:2px;min-width:22px;height:22px;font-size:12px}
  .ia-caixa{right:8px;left:8px;bottom:8px;width:auto;max-height:calc(100vh - 36px)}
}
@media print{.ia-flutua,.ia-caixa{display:none !important}}

/* ---------- Acessos ---------- */
.ac-num{padding:20px 22px}
.ac-num .lab{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);margin-bottom:6px}
.ac-num .val{font-family:var(--serif);font-size:34px;font-weight:300;line-height:1}
.ac-titulo{font-family:var(--serif);font-size:20px;font-weight:300;margin-bottom:4px}

/* ---------- Configurações ---------- */
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.cfg-card{display:flex;gap:16px;background:var(--branco);border-radius:var(--raio);
  padding:24px;box-shadow:var(--sombra);border:1px solid transparent;transition:.15s}
.cfg-card:hover{border-color:var(--rosa-mid);transform:translateY(-2px)}
.cfg-ic{font-size:26px;line-height:1;flex-shrink:0}
.cfg-txt h2{font-family:var(--serif);font-size:19px;font-weight:300;margin-bottom:5px}
.cfg-txt p{font-size:13px;color:var(--cinza);line-height:1.55;margin-bottom:10px}
.cfg-info{margin-bottom:20px}
.cfg-linhas{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.cfg-linhas > div{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid #f5f2ef;font-size:13.5px}
.cfg-linhas > div:last-child{border-bottom:none}
.cfg-linhas span{color:var(--cinza)}
.cfg-linhas b{font-weight:600;text-align:right}
@media (max-width:900px){.cfg-grid{grid-template-columns:1fr}}
.volta{display:inline-block;font-size:12.5px;color:var(--cinza);margin-bottom:6px}
.volta:hover{color:var(--rosa)}

/* No iPhone, campo com letra menor que 16px faz o Safari dar zoom sozinho
   quando a pessoa toca pra escrever. 16px resolve — vale pra tela toda. */
@media (max-width:900px){
  input,select,textarea,
  .ia-form textarea,.ct-modal input,.ct-modal select,.ct-modal textarea,
  .field input,.field select,.field textarea,
  .ct-busca,.ct-sel,.grau .grau-sel,.grau .grau-inp,.mt-campo input{font-size:16px}

  /* o assistente ocupa a largura da tela, com folga nas beiradas */
  .ia-caixa{left:10px;right:10px;bottom:10px;width:auto;
    max-height:min(72vh,calc(100vh - 90px));border-radius:18px}
  .ia-flutua{right:10px;bottom:10px}
  .ia-bolha{width:86px;height:86px}
  .ia-msg{max-width:92%}
}

/* onde a barra de ações flutua no rodapé, o bonequinho sobe pra não tapar */
@media (max-width:560px){
  body.sem-titulo-mobile .ia-bolha{bottom:76px;width:66px;height:66px}
  body.sem-titulo-mobile .ia-caixa{bottom:76px}
}

/* No celular o quadro vai de ponta a ponta: sem margem lateral, coluna do
   tamanho da tela. Fica no fim do arquivo pra vencer o padding do modo quadro. */
@media (max-width:560px){
  /* o painel respira nas beiradas; só o quadro é que vai de ponta a ponta */
  body.kanban-mode .content{padding:10px 10px 0}
  body.kanban-mode.vendo-kanban .content{padding-left:0;padding-right:0}
  /* o dedo arrasta e o quadro para na coluna inteira, uma de cada vez */
  body.kanban-mode .kanban{padding:0 8px 12px;gap:8px;
    scroll-snap-type:x mandatory;scroll-padding-left:8px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  body.kanban-mode .col{min-width:calc(100vw - 16px);max-width:calc(100vw - 16px);
    scroll-snap-align:start;scroll-snap-stop:always}
}

/* Nome da tela na barra de cima, ao lado do logo — só no celular,
   já que ali o cabeçalho da página não aparece. */
.tela-nome{display:none}
@media (max-width:900px){
  .tela-nome{display:block;margin-left:auto;order:2;padding-right:10px;
    font-size:13px;font-weight:600;color:rgba(255,255,255,.72);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .sidebar-foot{order:3}
}

/* O menu dos três pontinhos abre pra cima quando a barra está no rodapé */
@media (max-width:560px){
  .page-acoes .mais-menu{top:auto;bottom:calc(100% + 8px);right:0}
}

/* Etapa sem ninguém: no celular ela sai da frente (dá pra trazer de volta
   no menu dos três pontinhos). No computador aparece sempre. */
.so-mobile{display:none}
@media (max-width:560px){
  .so-mobile{display:block}
  body.esconde-vazias .col-vazia,
  body.kanban-mode.esconde-vazias .col-vazia{display:none}
}

/* Caixa "por que perdeu": os motivos são botões grandes, um toque resolve */
.perda-ops{display:flex;flex-wrap:wrap;gap:7px}
.perda-op{border:1px solid var(--linha);background:var(--branco);border-radius:100px;
  padding:9px 14px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--preto);
  cursor:pointer;transition:.15s}
.perda-op:hover{border-color:var(--rosa-mid)}
.perda-op.on{background:var(--vermelho);border-color:var(--vermelho);color:#fff}

/* Modal no celular: vira folha de baixo pra cima, com rolagem própria */
@media (max-width:560px){
  .modal-bg{align-items:flex-end;padding:0}
  .modal{max-width:100%;width:100%;border-radius:20px 20px 0 0;
    max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 14px 22px}
  .modal h2{font-size:20px}
  .modal .form-grid{grid-template-columns:1fr;gap:10px}
  .modal .field.col-2,.modal .field.col-3,.modal .field.col-4{grid-column:span 1}
  /* os botões de salvar/cancelar ficam presos no rodapé da folha */
  .modal .form-actions{position:sticky;bottom:-22px;background:var(--branco);
    padding:12px 0 4px;margin-top:16px;border-top:1px solid var(--linha);gap:8px}
  .modal .form-actions .btn{flex:1;justify-content:center}
  /* com a folha aberta, some tudo que flutua na frente dela */
  body:has(.modal-bg.open) .page-acoes,
  body:has(.modal-bg.open) .ia-bolha{display:none}
}
.modal-bg{z-index:1000}

/* ---------- Barra de meta e rosca (Dashboard, CRM e afins) ---------- */
.meta-linha{display:flex;align-items:center;gap:12px;padding:9px 0}
.meta-linha .nome{width:150px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-shrink:0}
.meta-linha .nome i{width:9px;height:9px;border-radius:50%;flex-shrink:0;font-style:normal}
.trilho{flex:1;background:var(--cinza-claro);border-radius:100px;height:14px;position:relative;overflow:hidden;min-width:60px}
.trilho .fill{height:100%;border-radius:100px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.trilho .marca{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--preto);opacity:.35}
.meta-linha .num{width:96px;text-align:right;font-size:12.5px;color:var(--cinza);flex-shrink:0}
.meta-linha .num b{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--preto)}
.rosca-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ---------- Painel do CRM: o que fazer hoje ---------- */
.hoje-card{margin-bottom:16px}
.hoje-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
/* número na frente, frase do lado — lê como uma linha, não como cartaz */
.hoje-bloco{display:flex;align-items:center;gap:11px;
  border:1px solid var(--linha);background:var(--branco);border-radius:13px;
  padding:13px;cursor:pointer;text-align:left;transition:.15s;font-family:var(--sans)}
.hoje-bloco:hover{border-color:var(--rosa-mid);transform:translateY(-1px)}
.hoje-n{font-family:var(--serif);font-size:26px;font-weight:300;line-height:1;flex-shrink:0;min-width:26px}
.hoje-rot{font-size:12px;font-weight:600;color:var(--cinza);line-height:1.25}
/* o de hoje é o que importa: ocupa duas colunas e vem maior */
.hoje-bloco.grande{grid-column:span 2;padding:16px;gap:14px;
  background:linear-gradient(100deg,var(--rosa-light),var(--branco) 70%);border-color:var(--rosa-mid)}
.hoje-bloco.grande .hoje-n{font-size:38px;min-width:40px}
.hoje-bloco.grande .hoje-rot{font-size:14px;color:var(--preto)}
.hoje-bloco.vazio{opacity:.45}
.hoje-bloco.vazio .hoje-n{color:var(--cinza2)}
.hoje-bloco.c-vermelho .hoje-n{color:var(--vermelho)}
.hoje-bloco.c-rosa .hoje-n{color:var(--rosa)}
.hoje-bloco.c-amarelo .hoje-n{color:var(--amarelo-texto)}
.hoje-bloco.c-azul .hoje-n{color:var(--azul)}
.hoje-bloco.c-roxo .hoje-n{color:var(--roxo)}
.hoje-bloco.c-laranja .hoje-n{color:var(--laranja)}
.hoje-bloco.c-cinza .hoje-n{color:var(--cinza)}
.hoje-bloco.on{border-color:var(--preto);box-shadow:0 0 0 2px var(--preto);background:var(--cinza-claro)}
.hoje-pe{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--linha);font-size:12.5px;color:var(--cinza);font-weight:600}
.hoje-pe[hidden]{display:none}
/* precisa vencer o "body.kanban-mode .col{display:flex}" */
.col.col-fora,
body.kanban-mode .col.col-fora{display:none}

/* origem dos leads */
/* a lista ao lado da rosca fica compacta: as linhas juntas ocupam
   mais ou menos a altura do círculo, em vez de esticar o card */
.origem-linha{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:12.5px;line-height:1.35}
.origem-linha i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.origem-linha span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.origem-linha b{font-family:var(--serif);font-weight:500;flex-shrink:0}
.origem-linha.apagada{opacity:.42}
.origem-linha span{display:flex;align-items:center;gap:2px}

/* leads por dia */
.barras-dia{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:8px}
.bd{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.bd-barra{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--cinza-claro);
  border-radius:8px;overflow:hidden}
.bd-barra>div{width:100%;height:var(--p);background:linear-gradient(180deg,var(--rosa),var(--rosa-mid));border-radius:8px}
.bd.hoje .bd-dia{color:var(--rosa);font-weight:700}
.bd-n{font-size:12px;font-weight:700;color:var(--preto);min-height:14px}
.bd-dia{font-size:12px;color:var(--cinza2);text-transform:uppercase;letter-spacing:.04em}

/* ---------- Números do painel: cartão que escala sozinho ---------- */
.num-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:1100px){ .num-grade{grid-template-columns:repeat(2,minmax(0,1fr))} }
.num-card{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);padding:16px 18px;
  display:flex;flex-direction:column;gap:7px;min-width:0}
.num-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.num-rot{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza);line-height:1.3;min-width:0}
.num-pct{font-size:12px;font-weight:700;flex-shrink:0}
.num-val{font-family:var(--serif);font-size:30px;font-weight:300;letter-spacing:-.02em;line-height:1}
.num-trilho{height:5px;background:var(--cinza-claro);border-radius:100px;overflow:hidden}
.num-trilho>div{height:100%;border-radius:100px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.num-sub{font-size:12px;color:var(--cinza);line-height:1.4}

@media (max-width:900px){
  .hoje-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hoje-bloco.grande{grid-column:span 2}
}
@media (max-width:560px){
  .hoje-grade{gap:6px}
  .hoje-bloco{padding:11px;gap:9px}
  .hoje-n{font-size:22px;min-width:22px}
  .hoje-rot{font-size:12px}
  .hoje-bloco.grande{padding:14px}
  .hoje-bloco.grande .hoje-n{font-size:32px;min-width:34px}
  /* no celular o número vem grande, à esquerda, e o texto do lado */
  .num-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .num-card{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:'valor topo' 'valor sub' 'trilho trilho';
    align-items:center;column-gap:11px;row-gap:2px;padding:13px}
  .num-val{grid-area:valor;font-size:32px;line-height:1;align-self:center}
  .num-topo{grid-area:topo;align-items:center}
  .num-sub{grid-area:sub;font-size:12px}
  .num-trilho{grid-area:trilho;margin-top:8px}
  .num-rot{font-size:12px;letter-spacing:.05em}
  .barras-dia{height:104px}
}

/* ---------- "?" de explicação ---------- */
.ajuda{width:17px;height:17px;flex-shrink:0;border:1px solid var(--linha);border-radius:50%;
  background:var(--branco);color:var(--cinza2);font-family:var(--sans);font-size:12px;
  font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;padding:0;transition:.15s;vertical-align:middle}
.ajuda:hover,.ajuda.on{background:var(--preto);border-color:var(--preto);color:var(--sobre-preto)}
.ajuda.mini{width:15px;height:15px;font-size:12px;margin-left:5px}
.ajuda-balao{position:absolute;z-index:1200;background:var(--preto);color:var(--sobre-preto);
  font-size:12.5px;line-height:1.5;padding:11px 13px;border-radius:12px;
  box-shadow:0 12px 34px rgba(17,16,16,.28);pointer-events:none}
.ajuda[data-dica]{margin-left:6px}
.ajuda-balao.ajuda-solta{z-index:9000;font-weight:400;text-align:left;text-transform:none;letter-spacing:0;white-space:normal}

/* no computador basta passar o mouse */
@media (hover:hover){
  .ajuda:hover + .ajuda-dica,.ajuda[data-txt]:hover::after{
    content:attr(data-txt);position:absolute;z-index:1200;left:0;top:130%;width:280px;
    background:var(--preto);color:var(--sobre-preto);font-size:12.5px;font-weight:400;line-height:1.5;
    padding:11px 13px;border-radius:12px;box-shadow:0 12px 34px rgba(17,16,16,.28);
    white-space:normal;text-align:left;text-transform:none;letter-spacing:0}
  .ajuda{position:relative}
}

/* ---------- Celular: cada gráfico na sua linha ---------- */
@media (max-width:760px){
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* os dias viram lista: segunda embaixo de terça, com a barra deitada */
  .barras-dia{flex-direction:column;align-items:stretch;height:auto;gap:7px}
  .bd{flex-direction:row;align-items:center;gap:10px;height:auto}
  .bd-dia{order:1;width:38px;text-align:left;flex-shrink:0}
  .bd-barra{order:2;flex:1;height:16px;align-items:stretch}
  .bd-barra>div{height:100%;width:var(--p);
    background:linear-gradient(90deg,var(--rosa),var(--rosa-mid))}
  .bd-n{order:3;width:20px;text-align:right;flex-shrink:0}
}

/* ---------- Painel em blocos que se arrastam ---------- */
.widgets-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;align-items:start}
.widget{position:relative;min-width:0}
.widget.largo{grid-column:1 / -1}
/* a alça só aparece quando o mouse chega perto — no celular fica sempre visível */
.widget-alca{position:absolute;top:10px;right:10px;z-index:5;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--linha);border-radius:9px;background:var(--branco);
  color:var(--cinza2);cursor:grab;opacity:0;transition:opacity .15s,color .15s;touch-action:none}
.widget-alca svg{width:16px;height:16px}
/* a alça só existe no modo de editar blocos — fora dele, painel limpo */
body.editando-widgets .widget-alca{opacity:1}
body.editando-widgets .widget{outline:1px dashed var(--rosa-mid);outline-offset:3px;border-radius:var(--raio)}
.widget-alca:hover{color:var(--preto);border-color:var(--rosa-mid)}
.widget-alca:active{cursor:grabbing}


/* enquanto arrasta: o bloco flutua e o lugar dele fica marcado */
.widget.arrastando{position:fixed;z-index:1100;pointer-events:none;
  box-shadow:0 22px 50px rgba(17,16,16,.22);transform:scale(.99);opacity:.96}
.widget-vazio{border:2px dashed var(--rosa-mid);border-radius:var(--raio);
  background:var(--rosa-light);opacity:.5}

@media (max-width:760px){
  .widgets-grade{grid-template-columns:minmax(0,1fr);gap:12px}
  .widget.largo{grid-column:auto}
}

/* ---------- Etiquetas: duas linhas no formulário, resto na folha ---------- */
.etq-escolha.cortada{max-height:76px;overflow:hidden}
/* "ver todas" é mais uma pílula na fileira, não um botão de largura cheia */
.etq-vermais{border:1px dashed var(--cinza2);background:none;border-radius:100px;
  padding:5px 12px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--cinza);cursor:pointer;
  white-space:nowrap;align-self:flex-start}
.etq-vermais:hover{border-color:var(--rosa);color:var(--rosa)}

/* a folha abre por cima do formulário que a chamou */
#etqListaBg{z-index:1100}
.etq-folha{max-width:460px;padding:0;display:flex;flex-direction:column;max-height:88vh}
.etq-folha-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--linha);flex-shrink:0}
.etq-folha-topo h2{font-family:var(--serif);font-size:19px;font-weight:400;margin:0}
.etq-lista{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:7px}
.etq-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:none;border-radius:11px;padding:14px 15px;cursor:pointer;width:100%;
  font-family:var(--sans);font-size:14px;font-weight:600;color:#fff;text-align:left;
  text-shadow:0 1px 2px rgba(0,0,0,.18);transition:.12s}
.etq-linha:hover{filter:brightness(1.06)}
.etq-check{width:19px;height:19px;flex-shrink:0;opacity:0;transition:opacity .12s}
.etq-linha.on .etq-check{opacity:1}
.etq-folha .form-actions{flex-shrink:0;margin:0;padding:12px 16px;border-top:1px solid var(--linha)}
@media (max-width:560px){
  .etq-folha{max-height:92vh}
  .etq-linha{padding:15px}
}

.aviso-widgets{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--rosa-light);color:var(--rosa);border-radius:12px;padding:10px 14px;
  font-size:12.5px;font-weight:600;margin-bottom:14px}
.aviso-widgets[hidden]{display:none}

/* ---------- Rolagem dentro do modal, não no fundo ----------
   No celular, arrastar dentro da ficha estava rolando o quadro atrás. */
.modal-bg{overscroll-behavior:contain}
.modal{overscroll-behavior:contain}
/* com um modal aberto, a página de trás fica parada */
body.modal-aberto{overflow:hidden}
.modal-bg.open{overflow-y:auto;-webkit-overflow-scrolling:touch}
body.modal-aberto .content{overflow:hidden}
/* o quadro rola pro lado sozinho: com a janela aberta ele fica parado também */
body.modal-aberto .kanban{overflow:hidden;touch-action:none;scroll-snap-type:none}
body.modal-aberto .ct-filtros,
body.modal-aberto .tabs{overflow:hidden}

@media (max-width:560px){
  /* a ficha do cartão rola por dentro */
  .modal.ficha{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:92vh}
  .modal-bg.open{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* texto curto no celular, completo no computador */
.so-celular{display:none}
@media (max-width:560px){
  .so-desktop{display:none}
  .so-celular{display:inline}
}

/* ---------- Atividade do card: histórico e comentários ---------- */
.fx-atividade{border-top:1px solid var(--linha);padding-top:16px}
/* caixa de comentar: fechada é uma linha; ao tocar, cresce e mostra o Enviar */
.ativ-escrever{margin:8px 0 14px}
.ativ-escrever textarea{width:100%;resize:none;overflow:hidden;
  border:1px solid var(--linha);border-radius:12px;padding:11px 13px;
  font-family:var(--sans);font-size:13.5px;line-height:1.5;background:var(--branco);
  transition:box-shadow .15s,border-color .15s}
.ativ-escrever textarea:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.ativ-bts{display:none;align-items:center;gap:8px;margin-top:8px}
.ativ-escrever.aberto .ativ-bts{display:flex}

.ativ-lista{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto;
  overscroll-behavior:contain}
.ativ{display:flex;gap:10px;align-items:flex-start}
.ativ-corpo{flex:1;min-width:0}
.ativ-txt{font-size:13px;line-height:1.5;color:var(--preto);overflow-wrap:anywhere}
.ativ-quando{font-size:12px;color:var(--cinza2);margin-top:2px}

/* comentário: bolha com a inicial de quem escreveu */
.ativ-ini{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--rosa-light);
  color:var(--rosa);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:14px;font-weight:500}
.ativ-comentario .ativ-quem{font-size:12.5px;font-weight:700;margin-bottom:3px}
.ativ-comentario .ativ-txt{background:var(--cinza-claro);border-radius:12px;padding:9px 12px}
.ativ-pe{display:flex;align-items:center;gap:8px;margin-top:3px}

/* evento automático: linha discreta com uma bolinha */
.ativ-evento{align-items:center}
.ativ-evento .ativ-txt{font-size:12.5px;color:var(--cinza)}
.ativ-ponto{width:8px;height:8px;border-radius:50%;background:var(--linha);
  flex-shrink:0;margin:5px 11px 0 11px}

/* texto da IA no histórico */
.ativ-ini.ia{background:var(--roxo-light);color:var(--roxo);font-family:var(--sans);
  font-size:12px;font-weight:700;letter-spacing:.04em}
.ativ-ia .ativ-txt{background:var(--roxo-light);border-radius:12px;padding:9px 12px;
  white-space:pre-wrap}
.ativ-ia .ativ-quem{font-size:12px;font-weight:700;color:var(--roxo);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}

/* mensagem que saiu pro WhatsApp (mensagem do dia e follow-ups) */
.ativ-ini.msg{background:var(--rosa-light);color:var(--rosa)}
.ativ-ini.msg .msr{font-size:17px}
.ativ-msg .ativ-txt{background:var(--rosa-light);border-radius:12px;padding:9px 12px;white-space:pre-wrap}
.ativ-msg .ativ-quem{font-size:12px;font-weight:700;color:var(--rosa);margin-bottom:3px}

/* No celular os três botões da mensagem dividem a linha, sem quebrar */
@media (max-width:560px){
  .fx-msg .fx-acoes{flex-wrap:nowrap;gap:6px}
  .fx-msg .fx-acoes .btn{flex:1;min-width:0;padding:10px 8px;font-size:12px;
    justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fx-msg .fx-acoes .btn#fx_bt_ia{flex:0 0 auto;padding:10px 11px}
}

/* ---------- Últimos ajustes de celular ---------- */
@media (max-width:900px){
  /* estes campos tinham regra própria e escapavam do mínimo de 16px,
     que é o que faz o iPhone dar zoom sozinho ao tocar */
  .fx-ia select,.fx-ia input[type=text],
  .ativ-escrever textarea,
  .fx-msg textarea{font-size:16px}
}

/* os códigos {nome}, {primeiro_nome}… viram uma faixa que desliza no dedo */
@media (max-width:760px){
  .fx-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .fx-chips::-webkit-scrollbar{display:none}
  .fx-chip{flex-shrink:0}
}

/* ---------- "Preencher o que falta": só os campos em branco ---------- */
body.so-vazios #modalForm .field{display:none}
body.so-vazios #modalForm .field.mostrar-vazio{display:block}
body.so-vazios #modalForm .duas-datas .field{display:none}
body.so-vazios #modalForm .duas-datas .field.mostrar-vazio{display:block}
body.so-vazios #modalForm .bc-campo,
body.so-vazios #modalForm .novo-contato{display:none}

/* as duas datas dividem a linha, inclusive no celular */
.duas-datas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  grid-column:1/-1}
.duas-datas .field{min-width:0}
@media (max-width:560px){
  .duas-datas{gap:8px}
  .duas-datas label{font-size:12px}
}

/* ---------- Bloco da mensagem: hierarquia e ritmo no celular ---------- */
@media (max-width:560px){
  .fx-msg{padding:16px 14px}
  /* três ações do mesmo peso visual: só a primeira é cheia */
  .fx-msg .fx-acoes{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:6px}
  .fx-msg .fx-acoes .btn{width:100%;padding:11px 6px;font-size:12.5px;border-radius:100px}
  .fx-msg .fx-acoes .btn#fx_bt_ia{flex:none;padding:11px 6px}
  /* o painel da IA respira e o botão acompanha o campo */
  .fx-ia{padding:12px;gap:9px}
  .fx-ia-linha{flex-direction:column}
  .fx-ia-linha .btn{width:100%;justify-content:center}
  /* a sugestão é um cartão de leitura, sem borda gritando */
  .fx-ia-op{border-color:var(--linha);padding:13px 14px;font-size:13.5px}
  .fx-ia-op.on{border-color:var(--rosa);box-shadow:0 0 0 2px var(--rosa-light)}
  .fx-gerada{margin-top:14px;padding-top:14px}
}

/* nome do lead ao lado do título do formulário */
.modal-quem{display:block;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--rosa);margin-top:2px;letter-spacing:0}

/* ---------- Cartão do quadro: um ritmo só de espaçamento ----------
   4px  = colado (interesse embaixo do nome)
   8px  = separa informações da mesma família
   10px = separa blocos (rodapé) */
.kcard .kt{line-height:1.35;margin-bottom:0}
.kcard .kneed{margin:3px 0 0}
.kcard .kdatas{margin:8px 0 0}
.kcard .kmeta{margin-top:8px}
.kcard .kfoot{margin-top:10px;padding-top:9px;border-top:1px solid var(--linha)}
.kcard .ketiq:empty{display:none}

/* sem etiqueta, o nome é o primeiro elemento e nasce na linha dos controles */
.kcard.sem-etiquetas .ktopo{display:none}
.kcard.sem-etiquetas .kt{padding-right:32px;min-height:24px;
  display:flex;align-items:center}

@media (max-width:560px){
  .kcard{padding:11px 13px 12px}
  .kcard .ktopo{padding-right:30px}
  .kcard.sem-etiquetas .kt{padding-right:30px}
  .kcard .kt{font-size:14.5px}
  body.kanban-mode .col-body{gap:9px}
}

/* ---------- Busca no quadro ---------- */
.busca-quadro{display:flex;align-items:center;gap:7px;flex:1;min-width:150px;max-width:280px;
  background:var(--branco);border:1px solid var(--linha);border-radius:100px;padding:0 12px;height:40px}
.busca-quadro:focus-within{border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.busca-quadro svg{width:16px;height:16px;color:var(--cinza2);flex-shrink:0}
.busca-quadro input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-family:var(--sans);font-size:13.5px;color:var(--preto);-webkit-appearance:none}
.busca-quadro input::-webkit-search-cancel-button{display:none}
.busca-x{border:none;background:none;color:var(--cinza2);font-size:19px;line-height:1;
  cursor:pointer;padding:0 2px}
.busca-x:hover{color:var(--preto)}
.busca-vazia{background:var(--branco);border:1px dashed var(--linha);border-radius:12px;
  padding:14px;text-align:center;font-size:13px;color:var(--cinza);margin-bottom:12px}
.busca-vazia[hidden]{display:none}

/* ---------- Registrar contato ---------- */
.ct-passo{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cinza2);margin:14px 0 8px}
.ct-passo:first-of-type{margin-top:6px}
.ct-data{width:100%;margin-top:8px;border:1px solid var(--linha);border-radius:11px;
  padding:10px 12px;font-family:var(--sans);font-size:13.5px;background:var(--branco)}
.ct-data:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
#ctResultado .perda-op.on{background:var(--verde);border-color:var(--verde)}
#ctQuando .perda-op.on{background:var(--preto);border-color:var(--preto);color:var(--sobre-preto)}

@media (max-width:560px){
  /* no celular a busca ocupa a linha toda, acima da barra de ações */
  .busca-quadro{max-width:none;order:-1;width:100%;height:38px}
  .page-acoes{flex-wrap:wrap}
  .ct-passo{margin:12px 0 7px}
}

/* no celular o botão principal vira só o "+", redondo, e a busca ganha a linha */
@media (max-width:560px){
  /* tudo cabe numa linha: + · busca · chavinha · ⋯ */
  .page-acoes{gap:6px;flex-wrap:nowrap}
  .page-acoes .btn.rosa.bt-nova{flex:0 0 auto;width:40px;height:40px;padding:0;
    border-radius:50%;font-size:21px;line-height:1;display:inline-flex;
    align-items:center;justify-content:center}
  .busca-quadro{order:0;width:auto;flex:1 1 auto;min-width:0;height:40px;padding:0 10px;gap:5px}
  .busca-quadro input{font-size:16px}   /* 16px pra não dar zoom no iPhone */
  .troca-visao{padding:3px;gap:0}
  .troca-op{padding:7px 9px}
  .troca-op svg{width:16px;height:16px}
  .mais-bt{width:34px;height:34px}
}

/* ---------- Botão de tema ---------- */
.pe-item .t-sol{display:none}
html[data-tema="claro"] .pe-item .t-lua{display:none}
html[data-tema="claro"] .pe-item .t-sol{display:block}

/* ---------- Ajustes que o tema escuro pede ---------- */
/* a barra lateral já era escura: no tema escuro ela se separa do fundo por uma linha */
:root .sidebar{border-right:1px solid var(--linha)}
html[data-tema="claro"] .sidebar{border-right:none}
/* fundos translúcidos que assumiam página clara */
:root .col{background:rgba(255,255,255,.035)}
html[data-tema="claro"] .col{background:rgba(255,255,255,.55)}
/* menus e janelas ganham sombra mais forte no escuro */
.card-menu,.card-pop,.mais-menu,.pill-menu,.pe-menu{box-shadow:var(--sombra-forte)}
/* a bolha verde da prévia do WhatsApp mantém a cor do app, com texto escuro */
.fx-previa{color:#111}

/* ---------- Login no tema escuro: sem caixa, a tela toda é o fundo ---------- */
:root .login-card{background:transparent;box-shadow:none;padding:32px 24px;max-width:360px}
:root .login-bg,:root .login-wrap{background:var(--creme)}
/* os campos é que ganham corpo, já que não há mais cartão em volta */
:root .login-card .field input{background:var(--branco);border-color:var(--linha)}
html[data-tema="claro"] .login-card{background:var(--branco);
  box-shadow:0 20px 60px rgba(17,16,16,.1);padding:44px 40px;max-width:400px}

/* o preenchimento automático do navegador ignora o tema: forçamos a cor certa */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--preto);
  -webkit-box-shadow:0 0 0 40px var(--branco) inset;
  box-shadow:0 0 0 40px var(--branco) inset;
  caret-color:var(--preto);
  transition:background-color 9999s ease-out}

/* ---------- Texto em partes (Story 1, Story 2…) ---------- */
.ct-partes{display:flex;flex-direction:column;gap:2px;padding:8px 10px}
.ct-partes .parte{border-radius:9px;padding:9px 11px;transition:background .12s}
.ct-partes .parte:hover{background:var(--branco)}
.parte-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.parte-rot{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza2)}
.parte-txt{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.ct-partes .parte + .parte{border-top:1px solid var(--linha)}
.ct-partes .parte .ct-mini{opacity:0;transition:opacity .12s}
.ct-partes .parte:hover .ct-mini{opacity:1}
@media (hover:none){ .ct-partes .parte .ct-mini{opacity:.6} }

/* ---------- Integrações: cartão de canal ---------- */
.int-card{margin-bottom:20px}
.int-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.int-topo .sub{font-size:13px;color:var(--cinza);margin-top:3px}
.int-acoes{display:flex;gap:8px;flex-wrap:wrap}
.int-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:18px 0 6px}
.int-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.int-campo>span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza2)}
.int-copia{display:flex;gap:6px;min-width:0}
.int-copia input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--cinza-claro);color:var(--preto)}
.int-copia input::placeholder{font-family:var(--sans);color:var(--cinza2)}
.int-ajuda{margin:10px 0 16px;line-height:1.55}
@media(max-width:760px){
  .int-copia{flex-wrap:wrap}
  .int-copia input{flex:1 1 100%;font-size:16px}
}

/* ---------- Conteúdo: filtro num clique só ---------- */
.ct-filtro-wrap{position:relative;display:inline-flex}
.ct-filtro-bt{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.ct-filtro-bt svg{width:14px;height:14px;flex-shrink:0}
.ct-filtro-bt .ct-seta-baixo{width:13px;height:13px;color:var(--cinza2);transition:transform .18s}
.ct-filtro-bt[aria-expanded="true"] .ct-seta-baixo{transform:rotate(180deg)}
.ct-filtro-bt.on{background:var(--rosa);color:#fff;border-color:var(--rosa)}
.ct-filtro-bt.on .ct-seta-baixo{color:rgba(255,255,255,.75)}
.ct-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:70;min-width:224px;max-height:60vh;
  overflow-y:auto;padding:6px;background:var(--branco);border:1px solid var(--linha);
  border-radius:14px;box-shadow:0 18px 42px rgba(17,16,16,.18)}
.ct-menu[hidden]{display:none}
.ct-menu-tit{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cinza2);padding:10px 12px 4px}
.ct-menu-op{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;border:none;background:none;cursor:pointer;font-family:var(--sans);
  font-size:13px;font-weight:600;color:var(--preto);padding:9px 12px;border-radius:9px}
.ct-menu-op:hover{background:var(--cinza-claro)}
.ct-menu-op.on{background:var(--rosa-light);color:var(--rosa)}
.ct-menu-n{font-size:12px;font-weight:700;color:var(--cinza2);background:var(--cinza-claro);
  padding:2px 8px;border-radius:100px}
.ct-menu-op.on .ct-menu-n{background:rgba(181,22,94,.14);color:var(--rosa)}

/* ---------- Conteúdo: calendário do mês ---------- */
.ct-cal{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px;box-shadow:var(--sombra)}
.ct-cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.ct-cal-head span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza2);text-align:center;font-weight:700}
.ct-cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ct-cal-dia{position:relative;min-height:88px;padding:9px 10px;border:1px solid transparent;
  background:var(--cinza-claro);border-radius:13px;cursor:pointer;text-align:left;
  font-family:var(--sans);display:flex;flex-direction:column;gap:6px;transition:.15s}
.ct-cal-dia:hover{border-color:var(--rosa-mid)}
.ct-cal-dia.fora{background:transparent;cursor:default;min-height:0;border:none}
.ct-cal-dia.vazio{opacity:.55}
.ct-cal-dia.hoje{outline:2px solid var(--rosa);outline-offset:1px}
.ct-cal-dia .d{font-family:var(--serif);font-size:16px;color:var(--cinza)}
.ct-cal-dia.hoje .d{color:var(--rosa)}
.ct-cal-dia .n{position:absolute;top:9px;right:10px;font-size:12px;font-weight:700;color:var(--cinza2)}
.ct-cal-dia .pts{display:flex;flex-wrap:wrap;gap:4px}
.ct-cal-pt{width:9px;height:9px;border-radius:50%}
/* dia que veio do clique no calendário pisca uma vez */
.ct-dia.piscou{outline:2px solid var(--rosa);outline-offset:3px;border-radius:var(--raio)}
@media(max-width:760px){
  .ct-cal{padding:12px}
  .ct-cal-head,.ct-cal-grade{gap:5px}
  .ct-cal-dia{min-height:62px;padding:6px 7px}
  .ct-cal-dia .d{font-size:13px}
  .ct-cal-dia .n{display:none}
  .ct-menu{left:auto;right:0}
}

/* ---------- Conteúdo: mexer em várias peças de uma vez ---------- */
.ct-sel-box{display:none;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;cursor:pointer}
.ct-sel-box input{width:18px;height:18px;accent-color:var(--rosa);cursor:pointer}
body.selecionando .ct-sel-box{display:inline-flex}
body.selecionando .ct-check{display:none}
body.selecionando .ct-item{cursor:pointer}
body.selecionando .ct-item:hover{background:var(--rosa-light)}
body.selecionando .ct-edita{pointer-events:none;opacity:.75}
/* peça marcada fica óbvia */
body.selecionando .ct-item:has(.ct-sel-cx:checked){background:var(--rosa-light);
  outline:1px solid var(--rosa);outline-offset:-1px;border-radius:12px}

.ct-lote{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1150;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
  width:min(900px,calc(100vw - 150px));padding:12px 16px;background:var(--branco);
  border:1px solid var(--linha);border-radius:16px;box-shadow:0 16px 44px rgba(17,16,16,.24)}
.ct-lote[hidden]{display:none}
.ct-lote-esq,.ct-lote-dir{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-lote strong{font-family:var(--serif);font-size:17px;font-weight:400;margin-right:4px}
.ct-lote.tem strong{color:var(--rosa)}
.ct-lote .ct-sel{font-size:12.5px;padding:7px 11px}
.ct-lote-data{position:relative;overflow:hidden}
.ct-lote-data input[type=date]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
@media(max-width:760px){
  .ct-lote{bottom:76px;padding:10px 12px;gap:10px;width:calc(100vw - 20px)}
  .ct-lote strong{font-size:15px}
  .ct-lote .ct-sel,.ct-lote .ct-mini{font-size:16px}
}

/* ---------- Conteúdo: fechar peça por peça ---------- */
.ct-item-seta{margin-left:auto;width:26px;height:26px;flex-shrink:0;padding:0;border:none;
  background:none;cursor:pointer;color:var(--cinza2);display:inline-flex;align-items:center;
  justify-content:center;border-radius:8px;transition:.15s}
.ct-item-seta svg{width:15px;height:15px}
.ct-item-seta:hover{background:var(--cinza-claro);color:var(--preto)}
.ct-item.fechado .ct-item-seta{transform:rotate(-90deg)}
/* peça fechada: some o texto, fica a linha das etiquetas */
.ct-item.fechado .ct-briefing,
.ct-item.fechado .ct-copy,
.ct-item.fechado .ct-partes,
.ct-item.fechado .ct-obs-txt,
.ct-item.fechado .ct-acoes{display:none}
.ct-item.fechado{padding:7px 0}
.ct-item.fechado .ct-item-topo{margin-bottom:0}
.ct-item.fechado .ct-item-corpo{cursor:pointer}
.ct-item.fechado:hover .ct-item-topo{opacity:.75}
/* Peça aberta dentro de um dia fechado: ela é a exceção e mostra o texto,
   mesmo com a regra do dia mandando esconder. */
.ct-dia.fechado .ct-item.aberta .ct-briefing,
.ct-dia.fechado .ct-item.aberta .ct-copy,
.ct-dia.fechado .ct-item.aberta .ct-partes,
.ct-dia.fechado .ct-item.aberta .ct-obs-txt,
.ct-dia.fechado .ct-item.aberta .ct-acoes{display:block}
.ct-dia.fechado .ct-item.aberta .ct-acoes{display:flex}
.ct-dia.fechado .ct-item.aberta{padding:14px 0}
.ct-dia.fechado .ct-item.aberta .ct-item-topo{margin-bottom:9px}
.ct-dia.fechado .ct-item.aberta .ct-item-corpo{cursor:default}
/* a setinha dela aponta pra baixo de novo */
.ct-dia.fechado .ct-item.aberta .ct-item-seta{transform:none}
/* o status fica encostado na direita, antes da setinha */
.ct-item-topo .ct-status{margin-left:auto}
.ct-item-topo .ct-status + .ct-item-seta{margin-left:4px}

/* ---------- CRM: prioridade no rodapé do card ----------
   Ela morava lá em cima, ao lado do ⋯, e comia 30px de largura justo onde as
   etiquetas precisam de espaço. No canto de baixo não disputa com nada. */
.kcard .kpri{position:absolute;right:10px;bottom:10px;z-index:2}
/* o rodapé abre espaço pra ela não encostar no texto */
.kcard .kmeta,.kcard .kfoot{padding-right:30px}
.kcard{padding-bottom:15px}
/* sem valor nem próxima ação, o card ainda precisa de chão pra prioridade */
.kcard .kdatas:last-child{padding-right:30px}

/* ---------- CRM: etiqueta do card um pouco mais enxuta ----------
   Cada etiqueta menor significa mais delas na mesma linha. No card não
   precisa do mesmo corpo de letra da folha de etiquetas. */
.kcard .ketiq .etq{font-size:12px;padding:3px 8px;letter-spacing:0}

/* ---------- CRM: editar clicando em cima, na ficha ---------- */
.fx-topo-bts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fx-edita{cursor:pointer;border-radius:7px;padding:2px 6px;margin:-2px -6px;
  transition:background .12s;border-bottom:1px dashed transparent}
.fx-edita:hover{background:var(--cinza-claro);border-bottom-color:var(--cinza2)}
.fx-vazio-inline{color:var(--cinza2);font-style:italic}
h2.fx-edita{display:inline-block}
/* o campo que aparece no lugar do texto */
.fx-campo{font-family:var(--sans);font-size:13.5px;color:var(--preto);background:var(--branco);
  border:1px solid var(--rosa-mid);border-radius:8px;padding:6px 9px;width:100%;max-width:260px;
  outline:none;box-shadow:0 0 0 3px var(--rosa-light)}
textarea.fx-campo{max-width:100%;line-height:1.6;resize:vertical}
select.fx-campo{cursor:pointer}
#fx_obs.fx-edita{display:block;min-height:22px}
.fx-obs-contato{margin-top:10px;padding-top:10px;border-top:1px solid var(--linha);
  font-size:12.5px;color:var(--cinza)}
@media(max-width:760px){
  .fx-campo{font-size:16px;max-width:100%}
}

/* ---------- CRM: etapa vazia vira uma faixa fina ----------
   Coluna sem card não precisa de 270px. Fica só o nome, de pé, e o quadro
   sobra pra quem tem gente dentro. Ela volta ao tamanho normal enquanto se
   arrasta um card (pra dar onde soltar) e quando se clica nela. */
.kanban .col-vazia{width:52px;min-width:52px;padding:12px 6px;transition:width .16s,min-width .16s}
.kanban .col-vazia .col-head{flex-direction:column;justify-content:flex-start;gap:10px;
  padding:2px 0 0;height:100%}
.kanban .col-vazia .col-head .nome{writing-mode:vertical-rl;transform:rotate(180deg);
  gap:9px;white-space:nowrap;font-size:12px;letter-spacing:.06em}
.kanban .col-vazia .col-nums{flex-direction:column;gap:4px}
.kanban .col-vazia .col-body{min-height:0;flex:0}
.kanban .col-vazia .col-add{display:none}
.kanban .col-vazia:hover{background:rgba(255,255,255,.75);cursor:pointer}

/* aberta no clique, ou enquanto um card está sendo arrastado */
.kanban .col-vazia.aberta,
body.arrastando-card .kanban .col-vazia{width:270px;min-width:270px;padding:12px}
.kanban .col-vazia.aberta .col-head,
body.arrastando-card .kanban .col-vazia .col-head{flex-direction:row;justify-content:space-between;
  gap:0;padding:6px 8px 12px;height:auto}
.kanban .col-vazia.aberta .col-head .nome,
body.arrastando-card .kanban .col-vazia .col-head .nome{writing-mode:horizontal-tb;transform:none;
  gap:7px;font-size:12px;letter-spacing:.04em}
.kanban .col-vazia.aberta .col-nums,
body.arrastando-card .kanban .col-vazia .col-nums{flex-direction:row;gap:6px}
.kanban .col-vazia.aberta .col-body,
body.arrastando-card .kanban .col-vazia .col-body{min-height:40px;flex:1}
.kanban .col-vazia.aberta .col-add{display:flex}

/* no celular a etapa vazia continua saindo da frente, como já era */
@media (max-width:560px){
  .kanban .col-vazia,
  .kanban .col-vazia.aberta{width:auto;min-width:78vw;padding:12px}
  .kanban .col-vazia .col-head{flex-direction:row;justify-content:space-between;padding:6px 8px 12px;height:auto}
  .kanban .col-vazia .col-head .nome{writing-mode:horizontal-tb;transform:none;font-size:12px}
  .kanban .col-vazia .col-nums{flex-direction:row}
  .kanban .col-vazia .col-add{display:flex}
}

/* ---------- Conteúdo: check em cada parte da copy ----------
   Um dia de stories tem várias peças na mesma copy: uma de manhã, outra de
   tarde. Cada uma tem seu próprio check, e o contador em cima mostra
   quanto do dia já saiu. */
.partes-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding-bottom:9px;border-bottom:1px solid var(--linha)}
.partes-cont{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--cinza);
  background:var(--branco);border:1px solid var(--linha);border-radius:100px;padding:3px 10px;
  font-variant-numeric:tabular-nums}
.ct-partes.tudo-feito .partes-cont{background:var(--verde);border-color:var(--verde);color:#fff}
.partes-dica{font-size:12px;color:var(--cinza2)}
.ct-partes.tudo-feito .partes-dica{display:none}

.parte-check{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;cursor:pointer}
/* check e rótulo andam juntos à esquerda; o copiar continua na ponta direita */
.parte-topo .parte-rot{margin-right:auto}
.parte-check input{width:17px;height:17px;accent-color:var(--verde);cursor:pointer;margin:0}
/* parte marcada some de vista sem sumir de verdade: fica clara e riscada */
.parte.feita .parte-rot{text-decoration:line-through;opacity:.6}
.parte.feita .parte-txt{opacity:.45}
.parte.feita:hover .parte-txt{opacity:.85}
@media(max-width:760px){
  .parte-check input{width:20px;height:20px}
  .partes-dica{display:none}
}

/* ---------- Conteúdo: editar um story no duplo clique ---------- */
.ct-partes .parte-txt{cursor:text;border-radius:7px;padding:2px 5px;margin:0 -5px;
  transition:background .12s}
.ct-partes .parte-txt:hover{background:var(--branco)}
.parte-edicao{margin:2px 0 4px}
.parte-campo{width:100%;min-height:80px;font-family:var(--sans);font-size:13.5px;line-height:1.7;
  color:var(--preto);background:var(--branco);border:1px solid var(--rosa-mid);border-radius:10px;
  padding:11px 13px;outline:none;resize:vertical;box-shadow:0 0 0 3px var(--rosa-light)}
.parte-campo-pe{display:flex;align-items:center;gap:8px;margin-top:7px}
.parte-campo-pe .mini{margin-right:auto;font-size:12px;color:var(--cinza2)}
@media(max-width:760px){
  .parte-campo{font-size:16px}
  .parte-campo-pe .mini{display:none}
}

/* ---------- Conteúdo: partes como registros ---------- */
.parte-pega{cursor:grab;color:var(--cinza2);font-size:13px;line-height:1;user-select:none;
  opacity:0;transition:opacity .12s;flex-shrink:0}
.ct-partes .parte:hover .parte-pega{opacity:.7}
.parte-pega:active{cursor:grabbing}
.parte.arrastando{opacity:.4}
.parte-rot{cursor:pointer;border-radius:5px;padding:1px 5px;margin-left:-5px}
.parte-rot:hover{background:var(--cinza-claro);color:var(--preto)}
.parte-rot-campo{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--preto);background:var(--branco);
  border:1px solid var(--rosa-mid);border-radius:6px;padding:3px 7px;outline:none;
  max-width:260px;flex:1;min-width:0}
.partes-bt{margin-left:auto;flex-shrink:0}
.ct-separar{margin-top:7px}
@media (hover:none){ .ct-partes .parte .parte-pega{opacity:.6} }

/* ---------- Fechamento do dia ----------
   A caixa que aparece no fim da tarde com quem ficou sem contato. */
.fech-bg{position:fixed;inset:0;z-index:1300;background:rgba(17,16,16,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fech-entra .18s ease}
@keyframes fech-entra{from{opacity:0}to{opacity:1}}
.fech{background:var(--branco);border-radius:20px;width:min(660px,100%);
  max-height:min(80vh,760px);display:flex;flex-direction:column;
  box-shadow:0 26px 70px rgba(17,16,16,.4)}
.fech-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:22px 24px 14px;border-bottom:1px solid var(--linha)}
.fech-topo h2{font-family:var(--serif);font-size:26px;font-weight:300}
.fech-sub{font-size:13px;color:var(--cinza);margin-top:4px}
.fech-x{border:none;background:none;font-size:26px;line-height:1;color:var(--cinza);
  cursor:pointer;padding:0 4px;flex-shrink:0}
.fech-x:hover{color:var(--preto)}
.fech-lista{flex:1;overflow-y:auto;padding:6px 12px}
.fech-linha{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px;border-radius:12px;transition:opacity .2s,transform .2s}
.fech-linha:hover{background:var(--cinza-claro)}
.fech-linha.saiu{opacity:0;transform:translateX(18px)}
.fech-quem{min-width:0;flex:1}
.fech-nome{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.fech-nome .pri{width:18px;height:18px;font-size:12px;border-radius:5px}
.fech-det{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.fech-etapa{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:100px}
.fech-acao{font-size:12px;color:var(--cinza);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:220px}
.fech-quando{font-size:12px;color:var(--cinza2)}
.fech-quando.atras{color:var(--vermelho);font-weight:600}
.fech-bts{display:flex;gap:7px;flex-shrink:0}
.fech-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px 18px;border-top:1px solid var(--linha)}
@media(max-width:640px){
  .fech-bg{padding:0;align-items:flex-end}
  .fech{width:100%;max-height:88vh;border-radius:20px 20px 0 0}
  .fech-topo{padding:18px 16px 12px}
  .fech-topo h2{font-size:22px}
  .fech-linha{flex-direction:column;align-items:stretch;gap:9px;padding:12px 8px}
  .fech-bts{width:100%}
  .fech-bts .btn{flex:1;font-size:14px;padding:11px 10px}
  .fech-acao{max-width:100%;white-space:normal}
  .fech-pe{padding:12px 16px 16px}
}

/* ---------- Caixa da manhã: completar cartão ---------- */
.fech.comp{width:min(560px,100%)}
.comp-corpo{flex:1;overflow-y:auto;padding:18px 24px}
.comp-card.escondido{display:none}
.comp-quem{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.comp-quem .pri{width:20px;height:20px;font-size:12px;border-radius:6px;flex-shrink:0}
.comp-nome{font-family:var(--serif);font-size:20px;font-weight:400}
.comp-campos{display:flex;flex-direction:column;gap:14px}
.comp-campo{display:flex;flex-direction:column;gap:5px}
.comp-rot{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza2)}
.comp-campo input{font-family:var(--sans);font-size:14px;color:var(--preto);background:var(--branco);
  border:1px solid var(--linha);border-radius:10px;padding:11px 13px;outline:none;width:100%}
.comp-campo input:focus{border-color:var(--rosa-mid);box-shadow:0 0 0 3px var(--rosa-light)}
.comp-ajuda{font-size:12px;color:var(--cinza2)}
.comp-bts{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.comp-bts .btn:first-child{margin-right:auto}
@media(max-width:640px){
  .comp-corpo{padding:16px}
  .comp-campo input{font-size:16px}
  .comp-bts .btn{flex:1}
  .comp-bts .btn:first-child{margin-right:0;flex-basis:100%}
}

/* etiquetas dentro das caixas do dia — é por elas que ela reconhece o lead */
.comp-etiq{display:flex;flex-wrap:wrap;gap:4px;margin:-8px 0 14px}
.comp-etiq .etq{font-size:12px;padding:2px 8px}
.fech-quem .comp-etiq{margin:5px 0 0}

/* escolher etiquetas dentro da caixa da manhã */
.comp-etq-escolha{display:flex;flex-wrap:wrap;gap:6px;background:var(--cinza-claro);
  border-radius:12px;padding:11px 12px;max-height:190px;overflow-y:auto}
.comp-etq-escolha .etq-op{cursor:pointer;line-height:1}
.comp-etq-escolha .etq-op input{position:absolute;opacity:0;width:0;height:0}
.comp-etq-escolha .etq{opacity:.34;transition:.12s;padding:5px 11px;font-size:12px}
.comp-etq-escolha .etq-op:hover .etq{opacity:.65}
.comp-etq-escolha .etq-op input:checked + .etq{opacity:1;
  box-shadow:0 0 0 2px var(--cinza-claro),0 0 0 4px var(--preto)}

/* ---------- Caixa da agenda do dia ---------- */
.ag-linha{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;
  transition:background .12s}
.ag-linha:hover{background:var(--cinza-claro)}
.ag-hora{font-family:var(--serif);font-size:19px;font-weight:400;min-width:52px;flex-shrink:0;
  font-variant-numeric:tabular-nums}
.ag-quem{flex:1;min-width:0}
.ag-nome{font-size:14px;font-weight:600}
.ag-det{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.ag-tipo{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:100px;background:var(--cinza2);color:#fff}
.ag-tipo.t-consulta{background:var(--azul)}
.ag-tipo.t-atendimento{background:var(--rosa)}
.ag-situacao{font-size:12px;color:var(--cinza2)}
.ag-semzap{font-size:12px;color:var(--vermelho);font-weight:600}
.ag-bts{display:flex;gap:7px;flex-shrink:0}
.ag-linha.mandou{background:var(--verde-light)}
.ag-linha.sit-confirmado{opacity:.6}
.ag-linha.sit-confirmado .ag-situacao{color:var(--verde);font-weight:700}
/* campos do popup de marcar */
.cp-form{display:flex;flex-direction:column;gap:4px;min-width:230px}
.cp-lb{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cinza2);margin-top:8px}
.cp-campo{font-family:var(--sans);font-size:13.5px;color:var(--preto);background:var(--branco);
  border:1px solid var(--linha);border-radius:9px;padding:9px 11px;outline:none;width:100%}
.cp-campo:focus{border-color:var(--rosa-mid)}
.cp-salvar{margin-top:12px}
@media(max-width:640px){
  .ag-linha{flex-wrap:wrap;gap:8px}
  .ag-bts{width:100%}
  .ag-bts .btn{flex:1}
  .cp-campo{font-size:16px}
}

/* link da tarefa que nasceu do calendário de conteúdo */
.tf-conteudo{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--rosa);background:var(--rosa-light);padding:4px 9px;border-radius:100px;
  text-decoration:none;transition:.12s}
.tf-conteudo svg{width:12px;height:12px}
.tf-conteudo:hover{background:var(--rosa);color:#fff}
.tf.feita .tf-conteudo{opacity:.5}
@media(max-width:560px){ .tf-conteudo span{display:none} .tf-conteudo{padding:5px 7px} }

/* número pendente ao lado da rotina, no menu do CRM */
.mais-op b{margin-left:6px;font-size:12px;font-weight:700;background:var(--rosa);color:#fff;
  padding:1px 7px;border-radius:100px;vertical-align:middle}

/* botãozinho de ícone na barra do módulo (importar, exportar…) */
.bt-icone{width:40px;height:40px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--linha);border-radius:50%;background:var(--branco);
  color:var(--cinza);cursor:pointer;transition:.14s;text-decoration:none}
.bt-icone svg{width:18px;height:18px}
.bt-icone:hover{border-color:var(--rosa-mid);color:var(--preto)}
@media(max-width:560px){ .bt-icone{width:38px;height:38px} }

/* "+ Novo" virou botão redondo, só com o sinal */
.btn.bt-nova.so-mais{width:40px;height:40px;padding:0;border-radius:50%;
  font-size:22px;font-weight:400;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:560px){ .btn.bt-nova.so-mais{width:38px;height:38px;font-size:20px} }

/* lixeira do dia inteiro: discreta, só aparece quando o mouse chega */
.ct-dia-x{width:30px;height:30px;flex-shrink:0;padding:0;border:none;background:none;
  color:var(--cinza2);cursor:pointer;border-radius:8px;display:inline-flex;
  align-items:center;justify-content:center;opacity:0;transition:opacity .14s,color .14s,background .14s}
.ct-dia-x svg{width:16px;height:16px}
.ct-dia-topo:hover .ct-dia-x{opacity:1}
.ct-dia-x:hover{color:var(--vermelho);background:var(--vermelho-light)}
.ct-dia-x:focus-visible{opacity:1}
@media (hover:none){ .ct-dia-x{opacity:.55} }

/* "copiar tudo" mora no bloco da copy, no canto de cima à direita */
.ct-copiar-tudo{margin-left:auto;flex-shrink:0}
.ct-copy-sozinha{position:relative;padding-right:46px}
.ct-copy-sozinha .ct-copiar-tudo{position:absolute;top:8px;right:8px;margin:0;
  opacity:0;transition:opacity .12s}
.ct-item:hover .ct-copy-sozinha .ct-copiar-tudo{opacity:1}
@media (hover:none){ .ct-copy-sozinha .ct-copiar-tudo{opacity:.6} }

/* ==========================================================
   Catálogo (Produtos) — mesma ordem de colunas do painel da
   loja: foto · nome · código · estoque · preço · categoria.
   Classe própria (.pr-) porque .pd-linha é dos Pedidos e tem
   outro número de colunas.
   ========================================================== */
.pr-filtros{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:10px 0 14px}
.pr-chips{display:flex;gap:6px;flex-wrap:wrap}
.pr-chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
  border:1px solid var(--linha);color:var(--cinza);text-decoration:none;white-space:nowrap}
.pr-chip:hover{border-color:var(--rosa-mid);color:var(--preto)}
.pr-chip.on{background:var(--rosa-light);border-color:var(--rosa-mid);color:var(--rosa)}

/* lista de produtos: mesma tabela branca de Clientes e Pedidos */
.pr-card{margin-bottom:18px}
.pr-tbl tr.pr-linha{cursor:pointer;transition:background .12s}
.pr-tbl tr.pr-linha:hover{background:var(--cinza-claro)}
.pr-tbl tr.pr-linha:focus-visible{outline:2px solid var(--rosa);outline-offset:-2px}
.pr-th-marca{width:34px}
.pr-th-foto{width:56px}
.pr-tbl td.pr-marca{width:34px}
.pr-off{opacity:.55}
.pr-var .pr-nome{padding-left:14px;border-left:2px solid var(--linha)}
.pr-foto{width:56px}
.pr-foto img{width:44px;height:44px;border-radius:var(--raio-sm);object-fit:cover;display:block}
.pr-nome{min-width:0}
.pr-nome a{color:inherit;text-decoration:none}
.pr-nome a:hover{color:var(--rosa);text-decoration:underline}
.pr-sku{font-size:12px;color:var(--cinza);white-space:nowrap}
.pr-estoque{font-size:12px;white-space:nowrap}
.pr-estoque b{font-weight:700;font-size:12.5px}
.pr-estoque b.verde{color:var(--verde)} .pr-estoque b.vermelho{color:var(--vermelho)}
.pr-estoque b.cinza{color:var(--cinza)}
.pr-estoque small{color:var(--cinza2)}
.pr-preco{white-space:nowrap;font-size:14px;font-weight:700}
.pr-preco del{display:block;font-size:12px;font-weight:400;color:var(--cinza2);text-decoration:line-through}
.pr-preco ins{text-decoration:none;font-size:14px;font-weight:700;color:var(--rosa)}
.pr-dir,.tbl .dir{text-align:right}
.pr-cat{font-size:12px;color:var(--cinza)}

@media (max-width:820px){
  .pr-tbl .pr-sku, .pr-tbl thead th:nth-child(4){display:none}
}

/* ==========================================================
   Contagem de estoque
   ========================================================== */
.es-modal{max-width:620px}
.es-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.es-topo h3{margin:0}
.es-abas{display:flex;gap:4px;margin:14px 0 16px;border-bottom:1px solid var(--linha)}
.es-aba{background:none;border:none;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--cinza);padding:8px 12px;border-bottom:2px solid transparent;margin-bottom:-1px}
.es-aba.on{color:var(--rosa);border-bottom-color:var(--rosa)}

.es-form{display:grid;grid-template-columns:1fr 150px auto;gap:10px;align-items:end}
.es-form label{display:block;font-size:12px;font-weight:600;color:var(--cinza2)}
.es-form input{width:100%;margin-top:4px}
.es-form .btn{white-space:nowrap}

.es-sugestoes{margin-top:10px;border:1px solid var(--linha);border-radius:var(--raio-sm);
  overflow:hidden;max-height:240px;overflow-y:auto}
.es-sug{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 12px;border-bottom:1px solid var(--linha);font-size:13px;color:inherit}
.es-sug:last-child{border-bottom:none}
.es-sug:hover{background:var(--cinza-claro)}
.es-sug b{display:block;font-weight:600}
.es-sug small,.es-cartao small{display:block;font-size:12px;color:var(--cinza2);margin-top:2px}
.es-nada{padding:10px 12px;font-size:12.5px;color:var(--cinza2)}

.es-achada{margin-top:10px}
.es-cartao{display:flex;gap:10px;align-items:center;background:var(--cinza-claro);
  border-radius:var(--raio-sm);padding:9px 12px;font-size:13px}
.es-cartao img,.es-semfoto{width:38px;height:38px;border-radius:8px;object-fit:cover;
  background:var(--linha);flex:none}

.es-grade-cab{display:grid;grid-template-columns:1fr 110px 150px 30px;gap:8px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--cinza2);margin-bottom:6px}
.es-linha{display:grid;grid-template-columns:1fr 110px 150px 30px;gap:8px;
  align-items:center;margin-bottom:6px}
.es-l-res{font-size:12px;color:var(--cinza2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-l-res.ok{color:var(--verde);font-weight:600}
.es-l-res.ruim{color:var(--vermelho)}
.es-l-x{background:none;border:none;cursor:pointer;color:var(--cinza2);font-size:18px;line-height:1}
.es-l-x:hover{color:var(--vermelho)}
.es-lista-acoes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}

.es-feitas{margin-top:18px;border-top:1px solid var(--linha);padding-top:12px}
.es-feitas h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza2)}
.es-feita{font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--linha)}
.es-feita:last-child{border-bottom:none}
.es-feita b{font-weight:600}
.es-feita small{display:block;color:var(--cinza2);margin-top:1px}
.es-feita.ruim b{color:var(--vermelho)}

@media (max-width:600px){
  .es-form{grid-template-columns:1fr}
  .es-grade-cab{display:none}
  .es-linha{grid-template-columns:1fr 80px 30px}
  .es-l-res{grid-column:1/-1}
}

/* a linha do catálogo vira botão: clica e abre a ficha da peça */
.pr-abre{cursor:pointer}
.pr-abre:focus-visible{outline:2px solid var(--rosa);outline-offset:-2px}
.pr-promo-prazo{display:block;font-size:12px;font-weight:600;color:var(--cinza2);margin-top:1px}

.pr-modal{max-width:640px}
.pr-ficha{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;margin-top:16px}
.pr-ficha-foto{width:96px;height:96px;border-radius:var(--raio-sm);overflow:hidden;
  background:var(--cinza-claro);display:block}
.pr-ficha-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pr-campos label{display:block;font-size:12px;font-weight:600;color:var(--cinza2)}
.pr-campos input{width:100%;margin-top:4px}
.pr-campos input:disabled{opacity:.5;cursor:not-allowed}
.pr-full{margin-bottom:12px}
.pr-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pr-erro{margin-top:12px;background:var(--vermelho-light);color:var(--vermelho);
  border-radius:var(--raio-sm);padding:9px 12px;font-size:12.5px;font-weight:600}
.pr-modal-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--linha)}
.pr-modal-bts{display:flex;gap:8px;margin-left:auto}
@media (max-width:600px){
  .pr-ficha{grid-template-columns:1fr}
  .pr-ficha-foto{width:72px;height:72px}
  .pr-grade{grid-template-columns:1fr}
}

/* cartões do resumo de estoque */
.es-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}
.pr-linha-simples{display:grid;grid-template-columns:110px minmax(0,1fr) 120px auto;gap:14px;
  align-items:center;padding:8px 18px;border-bottom:1px solid var(--linha)}
.pr-linha-simples:last-child{border-bottom:none}
.tbl th.dir,.tbl td.dir{text-align:right}
@media (max-width:700px){
  .pr-linha-simples{grid-template-columns:1fr auto;row-gap:4px}
}

/* Cartões do resumo de estoque: número grande em cima, o que ele significa
   embaixo. Antes usavam .cfg-linhas, que escreve rótulo e valor na mesma
   linha — os dois colavam e viravam "286Peças diferentes". */
.es-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
  margin:0 0 18px}
.es-cartao-n{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
  padding:16px 18px}
.es-cartao-n b{display:block;font-family:var(--serif);font-size:30px;font-weight:300;
  line-height:1.1;color:var(--preto)}
.es-cartao-n span{display:block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--preto)}
.es-cartao-n small{display:block;margin-top:2px;font-size:12px;color:var(--cinza2);line-height:1.35}
.es-cartao-n.alerta b{color:var(--vermelho)}

/* ---------- subir fotos pros modelos ---------- */
.ft-modal{max-width:880px}
.ft-corpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;margin-top:16px}
.ft-envio label{display:block;font-size:12px;font-weight:600;color:var(--cinza2)}
.ft-envio > label > input[type=text]{width:100%;margin-top:4px}
.ft-arquivo{display:flex;align-items:center;justify-content:center;text-align:center;
  margin-top:14px;padding:26px 16px;border:1.5px dashed var(--linha);border-radius:var(--raio-sm);
  cursor:pointer;color:var(--cinza2);font-size:13px;font-weight:500}
.ft-arquivo.on{border-color:var(--rosa);background:var(--rosa-light);color:var(--rosa)}
.ft-arquivo input[type=file]{display:none}
.ft-arquivo small{font-size:12px;color:var(--cinza2)}
.ft-previas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ft-previas img{width:56px;height:76px;object-fit:cover;border-radius:8px;background:var(--cinza-claro)}
.ft-check{display:flex!important;align-items:center;gap:8px;margin:12px 0;font-size:12.5px;
  color:var(--preto);font-weight:500}
.ft-check input{width:auto;margin:0}
.ft-envio .btn{width:100%}

.ft-lista{border-left:1px solid var(--linha);padding-left:18px;display:flex;flex-direction:column;min-height:0}
.ft-lista-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ft-lista-topo h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza2)}
.ft-sem{overflow-y:auto;max-height:420px}
.ft-conta{margin-bottom:8px;color:var(--cinza2)}
.ft-item{display:block;width:100%;text-align:left;background:none;border:1px solid var(--linha);
  border-radius:var(--raio-sm);padding:7px 10px;margin-bottom:6px;cursor:pointer;color:inherit}
.ft-item:hover{border-color:var(--rosa-mid);background:var(--cinza-claro)}
.ft-item b{display:block;font-size:12px}
.ft-item span{display:block;font-size:12px;color:var(--preto);margin-top:1px}
.ft-item small{display:block;font-size:12px;color:var(--cinza2);margin-top:1px}
@media (max-width:760px){
  .ft-corpo{grid-template-columns:1fr}
  .ft-lista{border-left:none;border-top:1px solid var(--linha);padding-left:0;padding-top:16px}
}

/* barra de filtro do catálogo: usa as peças do Conteúdo, com dois detalhes
   próprios — as opções aqui são links (o filtro é feito na consulta) */
.ct-filtros .ct-menu-op.on{background:var(--rosa-light);color:var(--rosa);font-weight:600}
/* NÃO repintar o texto do botão ligado: o fundo dele já é rosa (regra do
   Conteúdo), e rosa sobre rosa sumia com o rótulo — ficava só a pílula. */
.ct-filtros .ct-filtro-bt.on{color:#fff}
.ct-filtros .ct-filtro-bt.on svg{color:#fff}
.ct-filtros .ct-filtro-bt{max-width:260px}
.ct-filtros .ct-filtro-bt #ctFiltroRot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-filtros a.ct-menu-op{text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ct-filtros .pd-busca{margin:0}
.ct-filtros .ct-chip{margin-left:auto}

/* caixas de seleção do catálogo */
.pr-marca{display:flex;align-items:center;justify-content:center;width:22px}
.pr-check{width:16px;height:16px;accent-color:var(--rosa);cursor:pointer;margin:0}
.pr-marca-off{display:block;width:16px;height:16px;border:1px dashed var(--linha);border-radius:4px}
.pr-linha{grid-template-columns:22px 44px minmax(0,1fr) 110px 150px 120px 120px}
.pr-selecao{position:sticky;top:8px;z-index:30;display:flex;align-items:center;gap:10px;
  background:var(--preto);color:var(--creme);border-radius:100px;padding:8px 10px 8px 18px;
  margin-bottom:10px;font-size:13px;box-shadow:var(--sombra)}
.pr-selecao[hidden]{display:none}
.pr-selecao b{font-weight:700}
.pr-selecao .btn.ghost{background:transparent;color:var(--creme);border-color:rgba(255,255,255,.35)}
.pr-bt-lixo{background:var(--vermelho);color:#fff;border:none;margin-left:auto}
.pr-bt-lixo:hover{filter:brightness(1.08)}
@media (max-width:900px){
  .pr-linha{grid-template-columns:22px 40px minmax(0,1fr) auto}
}

/* o seletor de visão fica só com o desenho — o nome vai pro leitor de tela */
.troca-op span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.troca-op{padding-left:12px;padding-right:12px}

/* botões do popup de fotos, lado a lado */
.ft-botoes{display:flex;gap:8px}
.ft-botoes .btn{flex:1 1 auto;width:auto}

/* selo do pedido que veio da loja */
.selo-woo{display:inline-block;vertical-align:-3px;margin-left:5px;flex:none}
.selo-woo-linha{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.selo-woo-linha .selo-woo{margin-left:0}

/* seleção de pedidos */
.pd-check{width:16px;height:16px;accent-color:var(--rosa);cursor:pointer;margin:0;pointer-events:none}
.selo-woo{display:inline-block;vertical-align:-3px;margin-left:5px;flex:none;border-radius:50%}
/* telas estreitas: some a data, que é a informação mais dispensável aqui */
@media (max-width:820px){ .pd-tbl .pd-data, .pd-tbl thead th:nth-child(3){display:none} }

/* ============================================================
   Conversas (WhatsApp): lista · conversa · ficha
   ============================================================ */
.cv{display:grid;grid-template-columns:320px minmax(0,1fr) 290px;height:calc(100vh - 76px);min-height:480px;
  background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;margin:-8px 0 0}
.cv-lista{display:flex;flex-direction:column;border-right:1px solid var(--linha);min-height:0}
.cv-lista-topo{padding:18px 16px 10px;border-bottom:1px solid var(--linha)}
.cv-lista-topo h1{font:300 28px var(--serif);margin:0 0 4px}
.cv-sinal{font-size:12px;font-weight:600;margin-bottom:10px;color:var(--cinza2)}
.cv-sinal.bom{color:var(--verde)} .cv-sinal.ruim{color:var(--vermelho)}
.cv-lista-topo input{width:100%;box-sizing:border-box;border:1px solid var(--linha);border-radius:999px;background:var(--cinza-claro);
  color:var(--preto);padding:8px 14px;font:13px var(--sans)}
.cv-lista-topo input:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.cv-filtros{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cv-filtros button{border:1px solid var(--linha);background:transparent;color:var(--cinza);border-radius:999px;padding:5px 11px;font:600 12px var(--sans);cursor:pointer}
.cv-filtros button.on{background:var(--rosa);border-color:var(--rosa);color:#fff}
.cv-itens{flex:1;overflow-y:auto}
.cv-item{display:flex;gap:11px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--linha);background:transparent;
  padding:12px 16px;cursor:pointer;color:var(--preto);font-family:var(--sans)}
.cv-item:hover{background:var(--cinza-claro)} .cv-item.on{background:var(--rosa-light)}
.cv-av{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--rosa-mid);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font:700 13px var(--sans)}
.cv-av.grande{width:64px;height:64px;font-size:20px;margin-bottom:10px}
.cv-item-meio{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cv-item-l1{display:flex;justify-content:space-between;gap:8px}
.cv-item-l1 b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-item-l1 i{font-style:normal;font-size:12px;color:var(--cinza2);flex-shrink:0}
.cv-item-l2{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cinza);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cv-item-l2 em{margin-left:auto;font-style:normal;background:var(--rosa);color:#fff;border-radius:999px;padding:1px 7px;font-size:12px;font-weight:700}
.cv-item.novo .cv-item-l1 b,.cv-item.novo .cv-item-l2{color:var(--preto);font-weight:700}
.cv-eu{color:var(--cinza2)}
.cv-item .tp{align-self:flex-start;font-size:12px;padding:2px 7px}
.cv-semcad{font-size:12px;color:var(--cinza2)}
.cv-vazio{padding:28px 18px;font-size:13px;color:var(--cinza);text-align:center;line-height:1.5}
.cv-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--creme)}
.cv-chat-vazio{margin:auto;text-align:center;padding:30px;color:var(--cinza)}
.cv-chat-vazio .em{font:300 24px var(--serif);color:var(--preto);margin-bottom:6px}
.cv-chat-topo{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--branco);border-bottom:1px solid var(--linha)}
.cv-chat-topo b{display:block;font-size:15px} .cv-chat-topo span{font-size:12px;color:var(--cinza)}
.cv-voltar{display:none;border:none;background:none;font-size:22px;color:var(--rosa);cursor:pointer;padding:0 6px 0 0}
.cv-msgs{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:6px}
.cv-dia{align-self:center;font-size:12px;font-weight:600;color:var(--cinza);background:var(--branco);border-radius:999px;padding:3px 12px;margin:10px 0 4px;box-shadow:var(--sombra)}
.cv-b{max-width:68%;padding:8px 12px 6px;border-radius:14px;font-size:13.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.06);
  display:flex;flex-direction:column;gap:2px;white-space:pre-wrap;word-wrap:break-word}
.cv-b.in{align-self:flex-start;background:var(--branco);border-bottom-left-radius:4px}
.cv-b.out{align-self:flex-end;background:var(--rosa-light);border-bottom-right-radius:4px}
.cv-midia{font-size:12px;font-weight:600;color:var(--cinza)}
.cv-h{align-self:flex-end;font-size:12px;color:var(--cinza2)}
.cv-st{margin-left:4px;display:inline-flex;vertical-align:-1px}
.cv-st svg{width:17px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cv-st.lida{color:var(--rosa)}
.cv-escrever{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:12px 16px;background:var(--branco);border-top:1px solid var(--linha)}
.cv-escrever textarea{flex:1;min-width:0;resize:none;border:1px solid var(--linha);border-radius:14px;background:var(--cinza-claro);
  color:var(--preto);padding:10px 14px;font:14px/1.4 var(--sans)}
.cv-escrever textarea:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
.cv-nota{flex-basis:100%;margin:0;font-size:12px;color:var(--cinza2)}
.cv-ficha{border-left:1px solid var(--linha);overflow-y:auto;padding:22px 18px 150px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cv-f-nome{font:400 20px var(--serif);line-height:1.2}
.cv-f-l{font-size:13px;color:var(--cinza)}
.cv-f-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.cv-f-dados{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:12px 0 4px;font-size:12.5px;width:100%}
.cv-f-dados dt{color:var(--cinza2)} .cv-f-dados dd{margin:0;overflow-wrap:anywhere}
.cv-f-sec{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);margin-top:14px}
.cv-op{display:flex;flex-direction:column;gap:3px;width:100%;box-sizing:border-box;border:1px solid var(--linha);border-radius:12px;padding:9px 11px;color:var(--preto)}
.cv-op:hover{border-color:var(--rosa)}
.cv-op b{font-size:13px}
.cv-op-etapa{align-self:flex-start;font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px}
.cv-f-obs{font-size:12.5px;color:var(--cinza);white-space:pre-line;margin:0}
.cv-f-abrir{margin-top:14px}
@media (max-width:1200px){ .cv{grid-template-columns:290px minmax(0,1fr)} .cv-ficha{display:none!important} }
@media (max-width:900px){
  .cv{grid-template-columns:minmax(0,1fr);height:calc(100vh - 150px)}   /* minmax: link comprido numa prévia esticava a lista pra fora da tela */
  .cv-chat{display:none} .cv.lendo .cv-lista{display:none} .cv.lendo .cv-chat{display:flex}
  .cv-voltar{display:inline-block} .cv-b{max-width:85%}
}


/* ============================================================
 *  Celular (04/10/2026): tela de Artes + ajustes gerais.
 *  As regras de Artes usam body.ed-modo e !important de propósito:
 *  o <style> do arte.php vem depois deste arquivo e ganharia no empate.
 * ============================================================ */

/* ---------- geral: todas as telas ---------- */
@media (max-width:768px){
  /* iPhone dá zoom sozinho quando o campo tem letra menor que 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px !important}
  /* campos de formulário ocupam a largura toda */
  .field input,.field select,.field textarea,
  .modal input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.modal select,.modal textarea{width:100%;max-width:100%;box-sizing:border-box}
  /* tabela solta num card (sem .tbl-wrap): rola dentro de si */
  .card>table,.form-card>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* botões do pé do formulário: um embaixo do outro */
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{width:100%;justify-content:center}
  .tbl-acoes,.page-acoes,.fx-acoes,.int-acoes,.ct-acoes{flex-wrap:wrap}
  .es-lista-acoes{flex-wrap:wrap}
  .modal{width:calc(100vw - 24px);max-width:calc(100vw - 24px);box-sizing:border-box}
}

/* ---------- Artes (arte.php): editor no celular e tablet — jeito Canva (04/10/2026) ----------
   Coluna única, nada por cima da arte:
     barra de cima → ARTE (sempre visível) → UM painel (o do ícone OU o de edição, altura fixa,
     rolagem própria) → barra de ícones no pé.
   Altura fixa no painel = a arte não muda de tamanho nem "anda" quando o conteúdo do painel muda.
   .painel-aberto (JS travaSwipe): carrossel do Status do dia não desliza no dedo. */
@media (max-width:900px){
  body.ed-modo{--ed-rail-h:60px;--ed-painel-h:38%}
  /* a sidebar virou barra de ~74px no topo: o editor ocupa o resto da tela */
  body.ed-modo .ed,body.ed-modo .ed.barra-lado{display:flex !important;flex-direction:column;
    height:calc(100vh - 74px);height:calc(100dvh - 74px);grid-template-columns:none !important;overflow:hidden}
  body.ed-modo .ed-meio{order:1;flex:1 1 auto;min-height:0}
  body.ed-modo .ed-esq,body.ed-modo .ed-lado{order:2}
  body.ed-modo .ed-rail{order:3}

  /* barra de cima: mais justa; a troca "barra em cima/ao lado" não vale no celular */
  body.ed-modo .ed-barra{padding:8px 10px;gap:4px}
  body.ed-modo .ed-barra .btn.sm{padding:7px 10px}
  body.ed-modo .ed-menu{min-width:0;width:max-content;max-width:calc(100vw - 24px)}
  body.ed-modo #edModoBarra{display:none}
  body.ed-modo .ed-ctx-wrap{display:none !important}

  /* palco: a arte no que sobrar, centralizada, sem nada por cima */
  body.ed-modo .ed-palco,body.ed-modo .ed.barra-lado .ed-palco{height:auto !important;flex:1 1 auto;min-height:0;padding:8px !important}
  body.ed-modo .ed-seta{width:36px;height:36px;font-size:20px}
  body.ed-modo #edSetaE{left:6px} body.ed-modo #edSetaD{right:6px}
  body.ed-modo .ed-aviso{padding:0 8px 2px;min-height:0;font-size:12px}

  /* Status do dia (páginas lado a lado): desliza no dedo e para em cada arte… */
  body.ed-modo .ed-palco.tira{padding:8px 26vw !important;gap:14px;scroll-snap-type:x mandatory;scroll-behavior:auto;overscroll-behavior-x:contain}
  body.ed-modo .ed-palco.tira .pg{scroll-snap-align:center}
  body.ed-modo .ed-palco.tira .pg-rot{font-size:12px}
  /* …mas com painel aberto ou algo selecionado, a arte fica parada */
  body.ed-modo .ed.painel-aberto .ed-palco.tira{overflow-x:hidden !important;touch-action:none;scroll-snap-type:none}

  /* o painel embaixo da arte — mesmo lugar e mesma altura pros dois */
  body.ed-modo .ed-esq,body.ed-modo .ed.barra-lado .ed-lado{position:relative !important;flex:0 0 var(--ed-painel-h);
    height:var(--ed-painel-h);max-height:none;width:auto !important;overflow-y:auto;overscroll-behavior:contain;
    border:none;border-top:1px solid var(--linha);border-radius:14px 14px 0 0;box-shadow:0 -6px 18px rgba(0,0,0,.12);
    background:var(--branco)}
  body.ed-modo .ed-esq{padding:12px 14px 16px !important}
  body.ed-modo .ed.esq-fechado .ed-esq{display:none}
  /* painel do ícone aberto: o de edição sai (um de cada vez) */
  body.ed-modo .ed:not(.esq-fechado) .ed-lado{display:none !important}
  body.ed-modo .ed.barra-lado .ed-lado{display:block;padding:10px 12px 14px}
  body.ed-modo .ed-lado .ed-lin label{width:72px}
  body.ed-modo .ed-lado .ed-acoes .btn{flex:1 1 auto}
  body.ed-modo .ed-lado select{max-width:100%}
  body.ed-modo .ed-lado .ed-sec{padding-bottom:8px;margin-bottom:8px}
  body.ed-modo .ed-lado .ed-tg button{min-width:40px;height:38px}

  /* fechar o painel do ícone: canto de cima, seta pra baixo, acompanha a rolagem */
  body.ed-modo .ed-esq-fecha{position:sticky;top:0;right:auto;float:right;transform:none;margin:-4px -4px 0 8px;
    width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);font-size:0;z-index:2}
  body.ed-modo .ed-esq-fecha::before{content:'‹';display:block;font-size:22px;line-height:32px;transform:rotate(-90deg)}
  body.ed-modo .ed-esq h3{margin-bottom:10px;font-size:17px}
  body.ed-modo .ed-fotos{grid-template-columns:repeat(4,1fr) !important}
  body.ed-modo .ed-tpls{grid-template-columns:repeat(3,1fr)}
  body.ed-modo .ed-elems{grid-template-columns:repeat(3,1fr)}
  body.ed-modo .ed-elems button{height:64px}
  body.ed-modo .ed-addtxt{padding:10px 12px}
  body.ed-modo .ed-addtxt.t1{font-size:22px}

  /* ícones (Modelos, Texto, Fotos…): barra fixa no pé, por cima de tudo do editor */
  body.ed-modo .ed-rail{position:relative;z-index:16;flex-direction:row;justify-content:space-around;align-items:center;flex-shrink:0;
    height:var(--ed-rail-h);padding:0 4px;gap:0;border-right:none;border-top:1px solid var(--linha);
    padding-bottom:env(safe-area-inset-bottom)}
  body.ed-modo .ed-rail button{flex:1 1 0;margin:0 2px;padding:6px 2px;gap:2px;font-size:12px;min-width:0}
  body.ed-modo .ed-rail button svg{width:22px;height:22px}

  /* sem a faixa de miniaturas no pé: anda pelas setas ‹ › ou deslizando; "Agendar todas" fica na barra de cima */
  body.ed-modo .sd-volta{display:none !important}

  /* página inicial de Artes */
  body.ed-modo .ah{padding:16px 14px 40px}
  body.ed-modo .ah-topo h1{font-size:22px}
  body.ed-modo .ah-menu{min-width:0;width:min(300px,calc(100vw - 28px))}
  body.ed-modo .ah-dia{min-width:0;flex:1 1 100%}
  body.ed-modo .ah-grade{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}

  /* Status do dia (modal) */
  body.ed-modo .sd{width:100vw;height:100vh;height:100dvh;border-radius:0;padding:12px}
  body.ed-modo .sd-topo{gap:6px}
  body.ed-modo .sd-topo h2{font-size:17px;flex:1 1 100%}
  body.ed-modo .sd-topo input,body.ed-modo .sd-topo select{flex:1 1 140px;min-width:0}
  body.ed-modo .sd-grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  body.ed-modo .sd-fotos{inset:56px 10px 60px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
  body.ed-modo .sd-pe{flex-wrap:wrap}
  body.ed-modo .sd-pe .btn{flex:1 1 100%;justify-content:center}
}

/* celular mesmo: fotos, estilos e cores mais apertados */
@media (max-width:560px){
  body.ed-modo .ed-fotos{grid-template-columns:repeat(3,1fr) !important}
  body.ed-modo .ed-estilos{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.ed-modo .ed-cores{gap:8px}
  body.ed-modo .ed-cores button{width:30px;height:30px}
  body.ed-modo .sd-grade{grid-template-columns:1fr 1fr}
}

/* tela de toque: o X de apagar modelo não depende do mouse em cima */
@media (hover:none){
  body.ed-modo .ed-tpl .x{display:block}
}


/* ---------- Celular: menu sempre como barra no topo, mesmo com o modo mini (04/10/2026) ----------
   O bloco "Menu encolhido (modo mini)" vem depois da media query de 900px e ganhava no empate:
   sobrava padding-left:74px e uma sidebar de 74px à esquerda. Artes liga o mini sozinho.
   body na frente = especificidade maior, ganha em qualquer ordem. */
@media (max-width:900px){
  body .app,body .app.mini{padding-left:0}
  body .app.mini .sidebar{width:100%;padding:16px;flex-direction:row;flex-wrap:wrap;align-items:center}
  body .app.mini .brand{justify-content:flex-start;flex-direction:row;padding:0;margin-bottom:0}
  body .app.mini .brand .logo-cheia{display:block}
  body .app.mini .brand .logo-mini{display:none}
  body .app.mini .nav a{justify-content:flex-start;padding:11px 14px;gap:10px}
  body .app.mini .nav a .tx{display:inline}
  body .app.mini .sidebar-baixo{flex-direction:row;gap:0}
  body .app.mini .collapse-btn{display:none}
  body .app.mini .pe-menu{right:0;left:auto}
  /* menu fechado por padrão: só ☰, logo e avatar; a lista abre no ☰ */
  body .app .nav,body .app.mini .nav{display:none}
  body .app.menu-aberto .nav{display:flex}
}

@media (max-width:900px){.artes-lista,.artes-grid,.status-dia-lista{touch-action:pan-y !important}}

/* ==========================================================================
   Revisão de acessibilidade — 07/10/2026 (skill ui-ux-pro-max, aprovada pela Alessa)
   ========================================================================== */
/* Foco visível só pra quem navega com o teclado (Tab). Com mouse nada muda. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [contenteditable="true"]):focus-visible{
  outline:2px solid var(--rosa) !important; outline-offset:2px !important }

/* Bolinha de prioridade: letra escura onde o branco some no fundo (B amarelo; no escuro, todas) */
.pri{color:var(--sobre-preto)}
html[data-tema="claro"] .pri.B{color:#1e1e1e}

/* Área de clique maior SEM mudar o desenho: moldura invisível em volta do botão.
   Mínimo 24px no computador; no celular (dedo) chega perto de 44px. */
.tf-check, .pr-cor-x, .cp-x, .filtro-x, .ed-ico-bt, .krevisar button{position:relative}
.tf-check::before, .pr-cor-x::before, .cp-x::before, .filtro-x::before, .ed-ico-bt::before, .krevisar button::before{
  content:""; position:absolute; inset:-6px}
/* links de texto em tabela/cartão: só cresce pra cima e pra baixo, pra não invadir o vizinho */
.th-ord a, .ln-acoes a, .card .card-acao, .ct-pend-ir, .cp-ir, .tbl td a{position:relative}
.th-ord a::before, .ln-acoes a::before, .card .card-acao::before, .ct-pend-ir::before, .cp-ir::before, .tbl td a::before{
  content:""; position:absolute; inset:-6px 0}
@media (pointer:coarse){
  .tf-check::before, .pr-cor-x::before, .cp-x::before, .filtro-x::before, .ed-ico-bt::before, .krevisar button::before{inset:-11px}
  .th-ord a::before, .ln-acoes a::before, .card .card-acao::before, .ct-pend-ir::before, .cp-ir::before, .tbl td a::before{inset:-11px 0}
}
/* Caixinhas de seleção de 13–16px → 18px */
.pr-check, .pd-check, .tbl .col-sel input, .cols-op input, .filtro-op input, .tf-item input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--rosa); cursor:pointer}

/* Ícones do Google no lugar dos emojis (07/10/2026). .in = ícone dentro de texto ou de botão com texto */
.msr.in{font-size:1.25em;line-height:0;vertical-align:-.22em;margin-right:.3em}
.collapse-btn .seta .msr{font-size:18px}
.x > .msr, .ct-mini > .msr, .ed-bt > .msr, .et-lock > .msr, [data-f="principal"] > .msr{font-size:18px; vertical-align:middle}

/* Produtos (07/10/2026): nome sem quebrar palavra por palavra, categoria embaixo dele, lixeira da cor no fim da linha */
.pr-tbl td.pr-nome{min-width:220px}
.pr-nome-cat{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--cinza)}
.pr-th-acao, .pr-tbl td.pr-acao{width:44px;text-align:center}
.pr-tbl td.pr-acao .pr-cor-x .msr{font-size:20px;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Avisos do Dashboard numa linha só (07/10/2026): a lista abre em "ver detalhes" */
.aviso-det > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.aviso-det > summary::-webkit-details-marker{display:none}
.aviso-det .aviso-ver{font-size:13px;font-weight:600;color:var(--cinza);text-decoration:underline;text-underline-offset:3px}
.aviso-det .aviso-ver .aberto, .aviso-det[open] .aviso-ver .fechado{display:none}
.aviso-det[open] .aviso-ver .aberto{display:inline}
.ct-pend:has(.aviso-det), .cp-faixa:has(.aviso-det){padding:10px 16px; margin-bottom:12px; align-items:center}
.ct-pend:has(.aviso-det) .ct-pend-luz, .cp-faixa:has(.aviso-det) .cp-luz{margin-top:0}
.aviso-det[open]{padding-bottom:2px}

/* Bolinha com as iniciais (Conversas, Listas): no tema claro o fundo é rosa clarinho e o branco sumia (1,8:1) */
html[data-tema="claro"] .cv-av:not(.cv-av-foto){color:#7a1240}

/* Ajuste 07/10/2026: o "Ações" escondido do cabeçalho escapava da caixa da tabela e alargava a página no celular */
.pr-th-acao{position:relative}
/* número entre parênteses do estoque ficava em 11,25px (tamanho relativo) */
.pr-estoque small{font-size:12px}

/* Produtos, 07/10/2026 (pedido dela): sem o quadradinho onde era o × e linhas mais baixas (69px → 43–56px) */
.pr-tbl td.pr-marca{display:table-cell;width:34px;vertical-align:middle}   /* uma regra de outra lista punha display:flex e a célula não enchia a linha */
.pr-tbl td{padding-top:7px;padding-bottom:7px}
.pr-tbl .pr-preco del, .pr-tbl .pr-preco ins{line-height:1.25}
.pr-tbl .pr-foto img{width:40px;height:40px}
.pr-tbl .pr-nome-cat{margin-top:0}
@media (min-width:1100px){ .pr-tbl .pr-preco del{display:inline;margin-right:6px} }   /* preço riscado do lado do atual */

/* ==========================================================================
   Barra da lista (07/10/2026): [☑] [funil] [busca] [extra] [Ações em massa] — igual em
   CRM, Conteúdo, Pedidos, Contatos e Produtos. Ver includes/barra_lista.php
   ========================================================================== */
.bl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.bl .filtro-bt{margin-left:0}
.bl .busca-quadro{flex:1;max-width:420px}
.bl-modo{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:40px;padding:0 10px;
  border-radius:11px;border:1px solid var(--linha);background:var(--branco);color:var(--cinza);cursor:pointer;transition:.15s}
.bl-quad{width:18px;height:18px;border:1.8px solid var(--cinza2);border-radius:5px;position:relative;box-sizing:border-box;transition:.12s}
.bl-modo.on .bl-quad{background:var(--rosa);border-color:var(--rosa)}
.bl-modo.on .bl-quad::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
.bl-modo.parcial .bl-quad::after{content:'–'}
.bl-modo:hover{color:var(--rosa);border-color:var(--rosa)}
.bl-modo.on{border-color:var(--rosa)}
.bl-todos{display:inline-flex;align-items:center;padding:0 4px}
.bl-todos input{width:18px;height:18px;accent-color:var(--rosa);cursor:pointer;margin:0}
.bl-massa{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.bl-massa select, .bl-massa input{font:13px var(--sans);color:var(--preto);background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:7px 10px}
.bl-massa select:focus, .bl-massa input:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-light)}
/* o que só existe no modo seleção, e o que some nele */
/* caixinhas dos itens sempre à vista; as ações em massa só com algo marcado (07/10/2026) */
body:not(.selecionando) .bl-massa{display:none !important}
.bl-marcada{background:var(--rosa-light) !important}
@media (max-width:640px){ .bl .busca-quadro{flex-basis:100%;max-width:none;order:5} }
/* opção do menu do funil com caixinha (Pedidos) */
label.ct-menu-op{justify-content:flex-start;cursor:pointer}
label.ct-menu-op .ct-menu-n{margin-left:auto}
label.ct-menu-op input{width:16px;height:16px;accent-color:var(--rosa);margin:0 2px 0 0}
/* linha marcada em tabela: o fundo vai nas células */
.tbl tr.bl-marcada td{background:var(--rosa-light)}
/* CRM: a barra da lista dentro da faixa do quadro; caixinha no canto do card (só no modo seleção) */
.crm-barra > .bl{flex:1;margin:0}
.kcard .kcard-sel{position:absolute;right:38px;top:13px;z-index:3;display:inline-flex}   /* do lado do ⋯ */
.kcard .kcard-sel input{width:18px;height:18px;accent-color:var(--rosa);cursor:pointer;margin:0}
.kcard .kcard-sel input{width:16px !important;height:16px !important}
/* Conteúdo: caixinha de seleção sempre à vista, e o check de concluído não some mais */
.ct-sel-box{display:inline-flex !important}
body.selecionando .ct-item .ct-check{display:inline-block !important}

/* ---------- Item ativo do menu: "aba" colada na tela (08/10/2026) ----------
   Pega a cor do fundo da página, vai até a borda da barra e tem curvas
   côncavas em cima e embaixo, como se o menu e a página fossem uma peça só. */
@media (min-width:901px){
  .nav a.active{background:var(--creme);color:var(--rosa);font-weight:700;
    position:relative;z-index:2;margin-right:-18px;padding-right:32px;
    border-radius:30px 0 0 30px}
  .nav a.active::before,.nav a.active::after{content:"";position:absolute;right:0;
    width:22px;height:22px;background:transparent;pointer-events:none}
  .nav a.active::before{top:-22px;border-bottom-right-radius:22px;box-shadow:6px 6px 0 6px var(--creme)}
  .nav a.active::after{bottom:-22px;border-top-right-radius:22px;box-shadow:6px -6px 0 6px var(--creme)}
  .nav a.active:hover{background:var(--creme);color:var(--rosa)}
  .app.mini .nav a.active{margin-right:-12px;padding-right:12px}
  .nav a.pai-ativo{position:relative;z-index:1}
}
/* Contatos: ícone do WhatsApp do lado do nome → conversa na aba Conversas (09/10/2026) */
.ln-zap{display:inline-flex;vertical-align:-2px;margin-left:6px;color:#25d366;opacity:.85}
.ln-zap:hover{opacity:1;transform:scale(1.12)}
/* "Abrir conversa" no card do CRM e nas Mensagens do dia (09/10/2026): é link com cara de botão; some quando não tem contato */
a.sug-btn{display:inline-block;text-decoration:none}
#fx_bt_conversa[hidden],a.sug-btn[hidden]{display:none}

/* ---------- Tema escuro e celular: revisão de 24/10/2026 ---------- */
/* no celular o quadro vai de ponta a ponta, mas título, abas e busca ficam com respiro na beirada */
@media (max-width:560px){
  body.kanban-mode.vendo-kanban .content{padding-left:10px;padding-right:10px}
  body.kanban-mode.vendo-kanban .content>.kanban{margin-left:-10px;margin-right:-10px}
}
/* pílula sem cor própria (status do pedido): não quebra em duas linhas; no escuro, cinza com letra branca sumia */
.ct-canal{white-space:nowrap}
html:not([data-tema="claro"]) .ct-canal:not([style]){background:var(--cinza-claro);color:var(--preto);text-shadow:none}
/* etiqueta de etapa pintada com a cor do banco (azul-marinho etc.): no escuro a letra usa a cor do texto */
html:not([data-tema="claro"]) .fech-etapa{color:var(--preto)!important}

/* ficha do card estilo Trello (26/10/2026): decisão (mensagem + botões) logo no topo, histórico embaixo e curto */
.modal.ficha .fx-msg{padding:14px 28px 16px;border-bottom:1px solid var(--linha)}
.modal.ficha .sug-conv-msgs{max-height:min(26vh,220px)}
.modal.ficha .sug-resumo{margin:6px 0 2px}
.modal.ficha .sug-motivo{margin:0 0 4px}
.modal.ficha .fx-grid{border-top:none}
.modal.ficha .fx-atividade .ativ-lista{max-height:150px}
@media (max-width:560px){ .modal.ficha .fx-msg{padding:12px 14px 14px} }

/* ficha em duas colunas, como o cartão do Conteúdo: mensagem e conversa à esquerda, contato e oportunidade à direita */
.modal.ficha{max-width:1040px}
.fx-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.fx-esq{min-width:0;border-right:1px solid var(--linha)}
.fx-dir{min-width:0;background:var(--cinza-claro)}
.modal.ficha .fx-esq .fx-msg{background:transparent}
.modal.ficha .fx-dir .fx-grid{grid-template-columns:1fr}
.modal.ficha .fx-dir .fx-bloco{padding:16px 20px}
.modal.ficha .fx-dir .fx-bloco:first-child{border-right:none}
.modal.ficha .fx-dir .fx-obs{padding:14px 20px;border-bottom:none}
@media (max-width:900px){ .fx-cols{grid-template-columns:1fr} .fx-esq{border-right:none} }

/* ---------- CRM: etiquetas do card em até 2 linhas (pedido dela, 05/11/2026) ----------
   Letra menor e mais fina só na etiqueta do card. As linhas usam a largura toda do card;
   só a 1ª desvia do ✓ e do ⋯ (o ::before é o espaço deles). arrumarEtiquetas() em crm.php
   conta com essa reserva. */
.kcard .ktopo{padding-right:0}
.kcard .ketiq{display:block}
.kcard .ketiq::before{content:'';float:right;width:44px;height:18px}
.kcard .ketiq .etq{font-size:10.5px;font-weight:500;padding:2px 5px;margin:0 3px 3px 0;
  line-height:1.3;border-radius:5px;vertical-align:top}
.etq-compacto .kcard .ketiq .etq{margin:0 4px 4px 0}

/* CRM: caixinha de seleção do card escondida; aparece com o quadradinho da barra (pedido dela, 05/11/2026).
   Sem ela, a 1ª linha de etiquetas só desvia do ⋯. */
body:not(.selecionando) .kcard .kcard-sel{display:none}
body:not(.selecionando) .kcard .ketiq::before{width:24px}

/* CRM: valor na mesma linha do interesse, card mais baixo (pedido dela, 05/11/2026) */
.kcard .klinha{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.kcard .klinha .kneed{margin-bottom:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .klinha .kval{flex-shrink:0;margin-left:auto;font-size:14px}
/* CRM: olho igual ao do Início — esconde os valores (R$) */
.page-head .olho{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  background:var(--branco);border:1px solid var(--linha);border-radius:50%;cursor:pointer;color:var(--cinza);transition:.15s}
.page-head .olho:hover{border-color:var(--rosa-mid);color:var(--preto)}
.page-head .olho svg{width:16px;height:16px;flex-shrink:0}
.page-head .olho .o-fechado{display:none}
body.privado .page-head .olho{background:var(--preto);border-color:var(--preto);color:var(--sobre-preto)}
body.privado .page-head .olho .o-aberto{opacity:.35}
body.privado .page-head .olho .o-fechado{display:block}
body.privado .kcard .kval,
body.privado .crm-din span,
body.privado .num-sub.priv,
body.privado .meta-linha .priv,
body.privado .fx-edita[data-campo="valor_potencial"]{filter:blur(7px);user-select:none}