/* =========================================================================
   Painel interno da Conceito.

   Mesma paleta e fonte dos dois sistemas antigos, sem efeito nenhum: é
   ferramenta de trabalho, abre no celular no meio de uma reunião, e lista
   longa com vidro fosco por cima fica lenta.
   ========================================================================= */

@font-face{
  font-family:"Conceito Grotesk";
  src:url("../fonts/AnthemGrotesk-VF.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* serifa de apoio, só itálico e só em destaque, como no site */
@font-face{
  font-family:"Conceito Serifa";
  src:url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

:root{
  --creme:#FAF2E7;
  --azul:#1236FE;
  --roxo:#A700FF;
  --lilas:#C4CBFF;
  --erro:#FF6B5E;
  --ok:#6BE3A8;
  --alerta:#FFC46B;
  --fundo:#00081F;
  --fundo-2:#030D2B;
  --superficie:rgba(196,203,255,.045);
  --superficie-2:rgba(196,203,255,.08);
  --borda:rgba(196,203,255,.14);
  --borda-forte:rgba(196,203,255,.32);
  --fraco:rgba(250,242,231,.62);
  --mais-fraco:rgba(250,242,231,.42);
  --menu:15.5rem;
  --pad:clamp(1rem,3.5vw,2.4rem);
  --raio:14px;
  --serifa:"Conceito Serifa",Georgia,serif;
  --cartao-fundo:linear-gradient(180deg,rgba(196,203,255,.06),rgba(196,203,255,.025));
  --sombra:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -28px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.app,body.solto{
  margin:0;min-height:100svh;
  background:var(--fundo);color:var(--creme);
  font-family:"Conceito Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.95rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.2}
p{margin:0 0 .8rem}
.ico{width:1.15rem;height:1.15rem;flex:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:-999px;top:.5rem;z-index:99;padding:.5rem 1rem;background:var(--azul);color:#fff}
.pular:focus{left:.5rem}
:focus-visible{outline:2px solid var(--lilas);outline-offset:2px}

/* =========================================================================
   Moldura: menu lateral e corpo
   ========================================================================= */

.menu{
  position:fixed;inset:0 auto 0 0;z-index:40;
  width:var(--menu);display:flex;flex-direction:column;
  padding:1.2rem .8rem;gap:1rem;
  background:var(--fundo-2);border-right:1px solid var(--borda);
  overflow-y:auto;
}
.menu__marca{padding:.3rem .7rem .6rem}
.menu__lista,.menu__pe{display:grid;gap:.12rem}
.menu__grupo{
  display:block;margin:1.1rem .7rem .35rem;font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mais-fraco);
}
.menu__pe{margin-top:auto;padding-top:1rem;border-top:1px solid var(--borda)}
.menu__item{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .7rem;border-radius:7px;
  color:var(--fraco);text-decoration:none;font-size:.92rem;
}
.menu__item:hover{color:var(--creme);background:var(--superficie)}
.menu__item{position:relative}
.menu__item--ativo{color:var(--creme);background:linear-gradient(90deg,color-mix(in srgb,var(--azul) 26%,transparent),rgba(196,203,255,.04))}
.menu__item--ativo::before{content:"";position:absolute;left:-.8rem;top:.45rem;bottom:.45rem;width:3px;border-radius:0 3px 3px 0;background:var(--azul)}
.menu__item--ativo .ico{color:var(--lilas)}
.menu__num{
  margin-left:auto;min-width:1.35rem;padding:.05rem .4rem;border-radius:99px;
  font-size:.7rem;font-weight:700;text-align:center;
  background:var(--erro);color:#2B0703;
}
.avatar{
  display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;border-radius:50%;
  font-size:.62rem;font-weight:700;background:var(--azul);color:#fff;
}
.menu__fundo{display:none}

.corpo{margin-left:var(--menu);min-height:100svh;display:flex;flex-direction:column;--largura:1320px}
/* tela grande: a página cresce até um limite e fica centralizada, em vez
   de colar na esquerda e deixar meia tela vazia à direita */
@media (min-width:1800px){.corpo{--largura:1560px}}
@media (min-width:2400px){.corpo{--largura:1800px}}
.topo{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:1rem var(--pad);min-height:4.2rem;
  background:color-mix(in srgb,var(--fundo) 94%,transparent);
  border-bottom:1px solid var(--borda);
}
.topo__menu{display:none}
.topo__titulo{margin:0;font-size:1.4rem;letter-spacing:-.025em;flex:1;min-width:0}
.topo__volta{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--borda-forte);color:var(--fraco);text-decoration:none;flex:none}
.topo__volta:hover{color:var(--creme);border-color:var(--creme)}
.topo__acoes{display:flex;gap:.5rem;flex-wrap:wrap}
.conteudo{width:100%;max-width:var(--largura);margin-inline:auto;padding:1.4rem var(--pad) 5rem}

@media (max-width:999px){
  .menu{transform:translateX(-100%);transition:transform .22s ease;box-shadow:none}
  .menu--aberto{transform:none;box-shadow:0 0 0 100vmax rgba(0,4,16,.6)}
  .menu--aberto + .menu__fundo{display:block;position:fixed;inset:0;z-index:39}
  .corpo{margin-left:0}
  .topo__menu{
    display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-left:-.4rem;
    background:none;border:0;color:var(--creme);cursor:pointer;
  }
  .topo__menu .ico{width:1.4rem;height:1.4rem}
  .topo__titulo{font-size:1.12rem}
  .topo__acoes{width:100%}
  .topo__acoes .botao{flex:1}
}

/* =========================================================================
   Peças básicas
   ========================================================================= */

.cartao{
  padding:clamp(1rem,2.6vw,1.5rem);
  border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--cartao-fundo);box-shadow:var(--sombra);
  min-width:0;
}
.cartao + .cartao{margin-top:1rem}
/* dentro de grade quem dá o espaço é o gap: a margem acima empurrava o
   segundo cartão para baixo e desalinhava a fileira */
:is(.grade,.trio,.paineis,.resumo-envio,.envios,.pecas-grade,.config__corpo) > *{margin-top:0}
.grade--igual,.trio{align-items:stretch}
.cartao__titulo{
  margin:0 0 1rem;font-size:1.02rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.cartao__titulo > .ico{width:1.05rem;height:1.05rem;color:var(--lilas)}
.cartao__titulo a{font-size:.8rem;font-weight:500;color:var(--lilas);margin-left:auto;text-decoration:none}
.cartao__titulo a:hover{text-decoration:underline}
.cartao__texto{color:var(--fraco);font-size:.9rem}

.grade{display:grid;gap:1rem;align-items:start}
@media (min-width:860px){
  .grade--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
  .grade--lado{grid-template-columns:minmax(0,1fr) minmax(0,22rem)}
  .grade--lado-e{grid-template-columns:minmax(0,24rem) minmax(0,1fr)}
}
.pilha{display:grid;gap:1rem;align-content:start}
.pilha > .cartao + .cartao{margin-top:0}

.secao{
  margin:2rem 0 .8rem;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fraco);
  display:flex;align-items:center;gap:.6rem;
}
.secao:first-child{margin-top:0}

/* ---------- botões ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.15rem;min-height:2.55rem;
  font:inherit;font-size:.88rem;font-weight:600;line-height:1.2;
  color:#fff;background:var(--azul);
  border:1px solid var(--azul);border-radius:7px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
}
.botao:hover{filter:brightness(1.15)}
.botao .ico{width:1rem;height:1rem}
.botao--menor{padding:.4rem .8rem;min-height:2.1rem;font-size:.8rem}
.botao--fantasma{color:var(--creme);background:transparent;border-color:var(--borda-forte)}
.botao--fantasma:hover{border-color:var(--creme);filter:none}
.botao--ok{background:#0E7A4A;border-color:#0E7A4A}
.botao--perigo{color:var(--erro);background:transparent;border-color:color-mix(in srgb,var(--erro) 50%,transparent)}
.botao--zap{background:#128C4B;border-color:#128C4B}
.mini{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.8rem;color:var(--fraco);
  text-decoration:underline;text-underline-offset:3px;
}
.mini:hover{color:var(--creme)}
.mini--forte{color:var(--lilas);font-weight:600}
.mini--perigo:hover{color:var(--erro)}
.em-linha{display:inline}
.acoes{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.acoes--fim{justify-content:flex-end}
.acoes--leves{gap:1rem}

/* ---------- campos ---------- */
.campos{display:grid;gap:0 1rem}
@media (min-width:640px){
  .campos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .campos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .campo--largo{grid-column:1/-1}
}
.campo{display:block;margin-bottom:.95rem;min-width:0}
.campo__rotulo{display:block;margin-bottom:.35rem;font-size:.82rem;font-weight:600}
.campo__opc{font-weight:400;color:var(--mais-fraco)}
.campo__ajuda{display:block;margin-top:.3rem;font-size:.76rem;color:var(--mais-fraco)}
.campo__input{
  width:100%;padding:.58rem .75rem;min-height:2.55rem;
  font:inherit;font-size:.9rem;color:var(--creme);
  background:rgba(196,203,255,.06);
  border:1px solid var(--borda-forte);border-radius:6px;
}
.campo__input:focus{outline:none;border-color:var(--lilas);box-shadow:0 0 0 3px rgba(196,203,255,.16)}
textarea.campo__input{min-height:6rem;resize:vertical;line-height:1.5}
select.campo__input{appearance:none;cursor:pointer;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--fraco) 50%),linear-gradient(135deg,var(--fraco) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 55%,calc(100% - .75rem) 55%;
  background-size:.3rem .3rem;background-repeat:no-repeat}
select.campo__input option{background:var(--fundo);color:var(--creme)}
input[type=date].campo__input,input[type=month].campo__input{color-scheme:dark}
.campo--dinheiro{position:relative}
.campo--dinheiro .campo__input{padding-left:2.3rem}
.campo--dinheiro::after{content:"R$";position:absolute;left:.75rem;top:2.05rem;font-size:.85rem;color:var(--fraco);pointer-events:none}
.marcar{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:.8rem;font-size:.88rem;cursor:pointer}
.marcar input{margin:.2rem 0 0;accent-color:var(--azul);width:1rem;height:1rem;flex:none}

/* ---------- avisos ---------- */
.aviso{
  margin:0 0 1rem;padding:.7rem .9rem;font-size:.88rem;border-radius:7px;
  border:1px solid var(--borda-forte);background:var(--superficie-2);
}
.aviso--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.aviso--erro{color:var(--erro);border-color:color-mix(in srgb,var(--erro) 40%,transparent);background:color-mix(in srgb,var(--erro) 10%,transparent)}
.aviso--alerta{color:var(--alerta);border-color:color-mix(in srgb,var(--alerta) 40%,transparent);background:color-mix(in srgb,var(--alerta) 9%,transparent)}

/* ---------- selos ---------- */
.selo{
  display:inline-block;padding:.12rem .5rem;border-radius:99px;
  font-size:.68rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  background:rgba(196,203,255,.13);color:var(--lilas);
}
.selo--ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.selo--erro{background:color-mix(in srgb,var(--erro) 18%,transparent);color:var(--erro)}
.selo--alerta{background:color-mix(in srgb,var(--alerta) 18%,transparent);color:var(--alerta)}
.selo--azul{background:color-mix(in srgb,var(--azul) 35%,transparent);color:#DDE2FF}
.selo--roxo{background:color-mix(in srgb,var(--roxo) 28%,transparent);color:#EBC8FF}
.selo--apagado{background:rgba(250,242,231,.07);color:var(--mais-fraco)}

/* ---------- números do topo ---------- */
.numeros{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));margin-bottom:1.2rem}
@media (max-width:480px){.numeros{grid-template-columns:repeat(2,minmax(0,1fr))}}
.numero{
  padding:1rem 1.1rem;border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--superficie);text-decoration:none;min-width:0;
}
a.numero:hover{border-color:var(--borda-forte)}
.numero__rotulo{display:block;font-size:.76rem;color:var(--fraco);margin-bottom:.3rem}
.numero__valor{display:block;font-size:clamp(1.05rem,2.4vw,1.45rem);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.numero__nota{display:block;margin-top:.2rem;font-size:.74rem;color:var(--mais-fraco)}
.numero--ok .numero__valor{color:var(--ok)}
.numero--erro .numero__valor{color:var(--erro)}
.numero--alerta .numero__valor{color:var(--alerta)}

/* ---------- lista de itens ---------- */
.itens{list-style:none;margin:0;padding:0}
.item{
  display:flex;align-items:center;gap:.5rem .8rem;flex-wrap:wrap;
  padding:.75rem 0;border-bottom:1px solid var(--borda);
}
.item:last-child{border-bottom:0}
.item__corpo{flex:1 1 11rem;min-width:0}
.item__titulo{display:block;font-size:.93rem;text-decoration:none;overflow:hidden;text-overflow:ellipsis}
a.item__titulo:hover{text-decoration:underline;text-underline-offset:3px}
.item__meta{display:block;font-size:.78rem;color:var(--fraco);margin-top:.1rem}
.item__lado{text-align:right;flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.item__valor{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.item__marca{width:.55rem;height:.55rem;border-radius:50%;flex:none;background:var(--lilas)}
.item__marca--erro{background:var(--erro)}
.item__marca--alerta{background:var(--alerta)}
.item__marca--ok{background:var(--ok)}
.item__marca--roxo{background:var(--roxo)}

.ponto{opacity:.45;margin:0 .3rem}

/* ---------- tabela ---------- */
.tabela-caixa{overflow-x:auto;margin:0 calc(-1 * clamp(1rem,2.6vw,1.5rem));padding:0 clamp(1rem,2.6vw,1.5rem)}
.tabela{width:100%;border-collapse:collapse;font-size:.88rem}
.tabela th{
  text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mais-fraco);padding:.5rem .6rem;border-bottom:1px solid var(--borda-forte);white-space:nowrap;
}
.tabela td{padding:.65rem .6rem;border-bottom:1px solid var(--borda);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:rgba(196,203,255,.03)}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabela .fraco{color:var(--fraco)}
.tabela a{text-decoration:none}
.tabela a:hover{text-decoration:underline}
.tabela tfoot td{font-weight:600;border-top:1px solid var(--borda-forte)}
.riscado{text-decoration:line-through;opacity:.5}
@media (max-width:700px){
  .tabela--cartoes thead{display:none}
  .tabela--cartoes tr{display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;padding:.75rem 0;border-bottom:1px solid var(--borda)}
  .tabela--cartoes td{padding:0;border:0}
  .tabela--cartoes td[data-r]::before{content:attr(data-r) " ";color:var(--mais-fraco);font-size:.74rem}
  .tabela--cartoes .so-largo{display:none}
  .tabela--cartoes .num{text-align:right}
  .tabela--cartoes tfoot tr{border-bottom:0}
}

/* ---------- abas e filtros ---------- */
.abas{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem}
.aba{
  padding:.38rem .8rem;border-radius:99px;font-size:.82rem;text-decoration:none;
  color:var(--fraco);border:1px solid var(--borda);
}
.aba:hover{color:var(--creme);border-color:var(--borda-forte)}
.aba--ativa{color:var(--fundo);background:var(--creme);border-color:var(--creme)}
.aba b{font-weight:600;opacity:.7;margin-left:.2rem}
.filtros{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.filtros .campo{margin:0}
.filtros .campo__input{min-height:2.3rem;padding-top:.4rem;padding-bottom:.4rem}
.navega-mes{display:flex;align-items:center;gap:.4rem}
.navega-mes strong{min-width:9rem;text-align:center;font-weight:600}

/* ---------- vazio ---------- */
.vazio{padding:2rem 1rem;text-align:center;color:var(--fraco)}
.vazio p{max-width:32rem;margin:0 auto 1rem}

/* ---------- caixas abre-fecha ---------- */
details.dobra{border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie)}
details.dobra + details.dobra{margin-top:.6rem}
details.dobra > summary{
  list-style:none;cursor:pointer;padding:.8rem 1rem;font-weight:600;font-size:.92rem;
  display:flex;align-items:center;gap:.5rem;
}
details.dobra > summary::-webkit-details-marker{display:none}
details.dobra > summary::before{content:"+";width:1rem;color:var(--lilas);font-weight:500}
details.dobra[open] > summary::before{content:"−"}
details.dobra > .dobra__corpo{padding:0 1rem 1rem}

/* ---------- ficha de leitura ---------- */
.ficha{display:grid;gap:.1rem 1.4rem;margin:0}
@media (min-width:640px){.ficha{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ficha__par{padding:.55rem 0;border-bottom:1px solid var(--borda);min-width:0}
.ficha dt{font-size:.74rem;color:var(--mais-fraco)}
.ficha dd{margin:0;font-size:.92rem;overflow-wrap:anywhere}
.ficha__par--largo{grid-column:1/-1}

/* ---------- barra de progresso ---------- */
.barra{height:5px;border-radius:99px;background:rgba(196,203,255,.13);overflow:hidden}
.barra__cheio{height:100%;border-radius:99px;background:var(--lilas)}
.barra__cheio--ok{background:var(--ok)}

/* ---------- link pronto para copiar ---------- */
.link-pronto{display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap}
.link-pronto .campo__input{flex:1;min-width:12rem;font-size:.8rem;color:var(--fraco)}

/* ---------- linha do tempo ---------- */
.tempo{list-style:none;margin:0;padding:0 0 0 1rem;border-left:1px solid var(--borda-forte)}
.tempo li{position:relative;padding:0 0 1rem .4rem;font-size:.88rem}
.tempo li::before{content:"";position:absolute;left:-1.33rem;top:.45rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--lilas)}
.tempo__quando{display:block;font-size:.74rem;color:var(--mais-fraco)}

/* =========================================================================
   Funil em colunas
   ========================================================================= */
.funil{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);gap:.8rem;
  overflow-x:auto;padding-bottom:1rem;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);
  scroll-snap-type:x proximity;
}
.funil__coluna{
  scroll-snap-align:start;min-width:0;
  border:1px solid var(--borda);border-radius:var(--raio);background:rgba(196,203,255,.025);
  padding:.8rem;display:flex;flex-direction:column;gap:.55rem;
}
.funil__cabeca{display:flex;align-items:baseline;gap:.5rem;font-size:.82rem;font-weight:600}
.funil__cabeca small{margin-left:auto;font-weight:400;color:var(--mais-fraco);font-variant-numeric:tabular-nums}
.lead{
  display:block;padding:.7rem .75rem;border-radius:8px;text-decoration:none;
  background:var(--superficie-2);border:1px solid transparent;
}
.lead:hover{border-color:var(--borda-forte)}
.lead__nome{display:block;font-size:.9rem;font-weight:600}
.lead__meta{display:block;font-size:.76rem;color:var(--fraco);margin-top:.15rem}
.lead__atrasado{color:var(--alerta)}

/* =========================================================================
   Calendário
   ========================================================================= */
.mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--borda);border-left:1px solid var(--borda)}
.mes__dia-semana{
  padding:.4rem;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mais-fraco);border-right:1px solid var(--borda);border-bottom:1px solid var(--borda);
}
.mes__dia{
  min-height:6.2rem;padding:.35rem;border-right:1px solid var(--borda);border-bottom:1px solid var(--borda);
  display:flex;flex-direction:column;gap:.2rem;min-width:0;
}
.mes__dia--fora{background:rgba(0,0,0,.18)}
.mes__dia--fora .mes__num{opacity:.35}
.mes__num{font-size:.78rem;color:var(--fraco);font-variant-numeric:tabular-nums}
.mes__dia--hoje .mes__num{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--azul);color:#fff;font-weight:600}
.evento{
  display:block;padding:.15rem .35rem;border-radius:4px;font-size:.7rem;line-height:1.3;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:color-mix(in srgb,var(--azul) 40%,transparent);color:#E7EAFF;
}
.evento--geral{background:rgba(196,203,255,.1);color:var(--fraco)}
.evento--prazo{background:transparent;border:1px dashed color-mix(in srgb,var(--alerta) 60%,transparent);color:var(--alerta)}
.evento--aniversario{background:color-mix(in srgb,var(--roxo) 35%,transparent);color:#F1DBFF}
.evento--gravacao{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
@media (max-width:760px){
  .mes{display:none}
}
.so-celular{display:none}
@media (max-width:760px){.so-celular{display:block}}

/* =========================================================================
   Gráfico de barras do caixa
   ========================================================================= */
.grafico{width:100%;height:auto;display:block;overflow:visible}
.grafico text{fill:var(--mais-fraco);font-size:11px;font-family:inherit}
.grafico .eixo{stroke:var(--borda)}
.grafico .barra-entrada{fill:#4F6FF5}
.grafico .barra-saida{fill:#B87A42}
.grafico__mes{cursor:default;outline:none}
.grafico__mes.ativo rect,.grafico__mes:focus-visible rect{fill:rgba(196,203,255,.07)}
.grafico__dica{color:var(--creme);margin-left:auto}
.legenda{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.78rem;color:var(--fraco);margin-top:.6rem}
.legenda i{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;margin-right:.35rem;vertical-align:-.05rem}

/* =========================================================================
   Telas soltas: login e primeiro acesso
   ========================================================================= */
.solto__centro{min-height:100svh;display:grid;place-items:center;padding:var(--pad)}
.solto__cartao{width:min(100%,400px)}
.solto__marca{display:grid;justify-items:center;gap:.4rem;margin-bottom:1.8rem}
.solto__sub{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb,var(--lilas) 70%,transparent)}
.solto__cartao .botao{width:100%}

/* =========================================================================
   Impressão: recibo, contrato e relatórios saem limpos
   ========================================================================= */
@media print{
  .menu,.topo,.nao-imprime{display:none!important}
  .corpo{margin:0}
  body.app{background:#fff;color:#000}
}

/* =========================================================================
   Leitura de briefing
   ========================================================================= */
.leitura{min-width:0}
.qa{margin:0}
.qa__par{padding:.85rem 0;border-bottom:1px solid var(--borda)}
.qa__par:last-child{border-bottom:0}
.qa__p{margin:0 0 .25rem;font-size:.8rem;font-weight:600;color:var(--fraco)}
.qa__r{margin:0;font-size:.98rem;line-height:1.6;text-wrap:pretty;overflow-wrap:anywhere}
.qa__par--vazio .qa__r{font-size:.86rem}
.qa__nada{color:rgba(250,242,231,.3);font-style:italic}
.fichas{display:flex;flex-wrap:wrap;gap:.35rem}
.fichinha{padding:.18rem .55rem;font-size:.84rem;background:rgba(196,203,255,.1);border:1px solid var(--borda);border-radius:99px}
.eixo-lido{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.88rem}
.eixo-lido__polo{color:var(--fraco)}
.eixo-lido__trilho{display:inline-flex;align-items:center;gap:.45rem}
.eixo-lido__bola{width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--borda-forte)}
.eixo-lido__bola--aqui{background:var(--lilas);border-color:var(--lilas);transform:scale(1.5)}
.anexos{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.anexos__item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .8rem;text-decoration:none;border:1px solid var(--borda);border-radius:8px;background:var(--superficie);
}
.anexos__item:hover{border-color:var(--lilas)}
.anexos__nome{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexos__peso{font-size:.75rem;color:var(--fraco);white-space:nowrap}
.anexos__de{display:block;margin:.2rem 0 0 .2rem;font-size:.72rem;color:var(--mais-fraco)}
code{font-family:ui-monospace,Consolas,monospace;font-size:.85em;padding:.05rem .3rem;border-radius:3px;background:rgba(196,203,255,.1)}

/* ---------- miniaturas de peça no painel ---------- */
.miniaturas{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem}
.miniaturas img,.miniaturas video{height:12rem;width:auto;max-width:none;border-radius:6px;background:#000;display:block}
.miniaturas__pdf{display:flex;flex-direction:column;justify-content:center;gap:.2rem;height:8rem;min-width:9rem;padding:1rem;border-radius:6px;background:var(--superficie-2);text-decoration:none;font-weight:600}
.miniaturas__pdf small{font-weight:400;font-size:.72rem;color:var(--fraco);overflow-wrap:anywhere}
button.aba{background:none;font:inherit;font-size:.82rem;cursor:pointer}

/* =========================================================================
   v2: componentes das telas redesenhadas (Início, funil, aprovações)
   ========================================================================= */

/* ---------- abertura do Início: o único setor com a malha do site ---------- */
.abertura{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:1.4rem;align-items:end;
  padding:clamp(1.3rem,3.4vw,2.2rem);margin-bottom:1rem;
  border:1px solid var(--borda);border-radius:20px;
  background:
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--azul) 34%,transparent),transparent 55%),
    radial-gradient(80% 120% at 0% 100%,color-mix(in srgb,var(--roxo) 14%,transparent),transparent 60%),
    var(--fundo-2);
}
.abertura::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background-image:linear-gradient(rgba(196,203,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(196,203,255,.16) 1px,transparent 1px);
  background-size:82px 82px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(at 75% 20%,#000 10%,transparent 72%);
  mask-image:radial-gradient(at 75% 20%,#000 10%,transparent 72%);
}
@media (min-width:900px){.abertura{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.abertura__data{margin:0 0 .5rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lilas)}
.abertura__ola{margin:0;font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.04;letter-spacing:-.035em}
.abertura__ola em{font-family:var(--serifa);font-style:italic;font-weight:400;font-size:1.18em;letter-spacing:-.01em;color:#DDE2FF}
.abertura__resumo{margin:.8rem 0 0;color:var(--fraco);font-size:.98rem;max-width:30rem}
.abertura__resumo strong{color:var(--creme);font-weight:600}

.destaque{padding:1.1rem 1.2rem;border-radius:14px;background:rgba(0,8,31,.55);border:1px solid rgba(196,203,255,.2)}
.destaque__rotulo{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;color:var(--fraco)}
.destaque__valor{display:block;margin:.35rem 0 .7rem;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.destaque__barra{height:8px;border-radius:99px;background:rgba(196,203,255,.14);overflow:hidden;display:flex}
.destaque__barra span{display:block;height:100%}
.destaque__nota{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:.55rem;font-size:.78rem;color:var(--fraco)}
.destaque__nota b{color:var(--creme);font-weight:600}

/* ---------- quatro números, cada um com seu ícone ---------- */
.kpis{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));margin-bottom:1rem}
.kpi{
  position:relative;display:flex;gap:.8rem;align-items:flex-start;
  padding:1rem 1.05rem;border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--cartao-fundo);text-decoration:none;min-width:0;
}
a.kpi:hover{border-color:var(--borda-forte)}
.kpi__ico{display:grid;place-items:center;width:2.3rem;height:2.3rem;flex:none;border-radius:10px;background:rgba(196,203,255,.1);color:var(--lilas)}
.kpi__ico .ico{width:1.1rem;height:1.1rem}
.kpi--erro .kpi__ico{background:color-mix(in srgb,var(--erro) 16%,transparent);color:var(--erro)}
.kpi--ok .kpi__ico{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.kpi--roxo .kpi__ico{background:color-mix(in srgb,var(--roxo) 22%,transparent);color:#E2B8FF}
.kpi__corpo{min-width:0}
.kpi__rotulo{display:block;font-size:.76rem;color:var(--fraco)}
.kpi__valor{display:block;margin-top:.15rem;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi--erro .kpi__valor{color:var(--erro)}
.kpi__nota{display:block;margin-top:.1rem;font-size:.72rem;color:var(--mais-fraco)}

/* ---------- atalhos ---------- */
.atalhos{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.atalho{
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:99px;
  font-size:.84rem;font-weight:500;text-decoration:none;color:var(--creme);
  border:1px solid var(--borda-forte);background:rgba(196,203,255,.04);
}
.atalho:hover{border-color:var(--lilas);background:rgba(196,203,255,.08)}
.atalho .ico{width:.95rem;height:.95rem;color:var(--lilas)}

/* ---------- fila do que pede ação, em grupos ---------- */
.fila__grupo{display:flex;align-items:center;gap:.55rem;margin:1.3rem 0 .45rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fraco)}
.fila__grupo:first-of-type{margin-top:.2rem}
.fila__grupo .ico{width:.95rem;height:.95rem;color:var(--lilas)}
.fila__grupo b{margin-left:auto;font-weight:600;letter-spacing:0;color:var(--mais-fraco)}
.fila{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fila__item{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem .8rem;border-radius:11px;background:rgba(196,203,255,.035);border:1px solid transparent;
}
.fila__item:hover{border-color:var(--borda)}
.fila__marca{width:4px;align-self:stretch;border-radius:4px;flex:none;background:var(--lilas)}
.fila__marca--erro{background:var(--erro)}
.fila__marca--alerta{background:var(--alerta)}
.fila__marca--ok{background:var(--ok)}
.fila__marca--roxo{background:var(--roxo)}
.fila__corpo{flex:1 1 13rem;min-width:0}
.fila__titulo{display:block;font-size:.93rem;font-weight:500;text-decoration:none}
a.fila__titulo:hover{text-decoration:underline;text-underline-offset:3px}
.fila__meta{display:block;font-size:.78rem;color:var(--fraco);margin-top:.1rem}
.fila__acao{margin-left:auto;display:flex;gap:.4rem}
.tudo-certo{display:grid;justify-items:center;gap:.6rem;padding:2.2rem 1rem;text-align:center;color:var(--fraco)}
.tudo-certo .ico{width:2.6rem;height:2.6rem;color:var(--ok)}
.tudo-certo strong{color:var(--creme);font-size:1.05rem;font-weight:600}

/* ---------- agenda com o dia em destaque ---------- */
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.agenda__item{display:flex;align-items:center;gap:.8rem}
.agenda__dia{
  display:grid;place-items:center;width:2.9rem;height:3.1rem;flex:none;border-radius:10px;
  background:rgba(196,203,255,.07);border:1px solid var(--borda);line-height:1;
}
.agenda__dia b{font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.agenda__dia small{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco);margin-top:-.25rem}
.agenda__item--cliente .agenda__dia{background:color-mix(in srgb,var(--roxo) 18%,transparent);border-color:color-mix(in srgb,var(--roxo) 35%,transparent)}
.agenda__item--prazo .agenda__dia{background:transparent;border:1px dashed color-mix(in srgb,var(--alerta) 60%,transparent)}
.agenda__texto{min-width:0}
.agenda__titulo{display:block;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda__meta{display:block;font-size:.74rem;color:var(--fraco)}

/* ---------- barra em segmentos (funil e peças) ---------- */
.segmentos{display:flex;gap:3px;height:10px;margin:.2rem 0 .9rem}
.segmentos span{display:block;height:100%;border-radius:3px;min-width:6px}
.seg-legenda{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.seg-legenda li{display:flex;align-items:center;gap:.55rem;font-size:.84rem}
.seg-legenda i{width:.6rem;height:.6rem;border-radius:2px;flex:none}
.seg-legenda span{flex:1;color:var(--fraco)}
.seg-legenda b{font-weight:600;font-variant-numeric:tabular-nums}

/* tons das etapas do funil, do mais frio ao mais quente */
.etapa-contato{background:#5D6694}
.etapa-diagnostico{background:#8D97E8}
.etapa-proposta{background:#4F6FF5}
.etapa-negociacao{background:#A700FF}

/* ---------- funil: resumo das etapas ---------- */
.etapas{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));margin-bottom:1.2rem}
.etapa{position:relative;padding:.95rem .95rem .8rem;border-radius:12px;overflow:hidden;background:var(--cartao-fundo);border:1px solid var(--borda)}
.etapa__barra{position:absolute;inset:0 0 auto;height:3px}
.etapa__nome{display:block;font-size:.76rem;color:var(--fraco)}
.etapa__num{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.etapa__valor{display:block;font-size:.74rem;color:var(--mais-fraco);font-variant-numeric:tabular-nums}

.quadro{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(11rem,1fr);gap:.7rem;
  overflow-x:auto;padding-bottom:.8rem;align-items:start;
}
.quadro__coluna{min-width:0;display:grid;gap:.5rem;align-content:start}
.quadro__cabeca{display:flex;align-items:center;gap:.5rem;padding:.2rem .2rem .4rem;font-size:.82rem;font-weight:600}
.quadro__cabeca i{width:.55rem;height:.55rem;border-radius:50%;flex:none}
.quadro__cabeca small{margin-left:auto;font-weight:500;color:var(--mais-fraco)}
.quadro__vazio{padding:1rem;border:1px dashed var(--borda);border-radius:12px;text-align:center;font-size:.78rem;color:var(--mais-fraco)}
@media (max-width:760px){
  .quadro{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}
  .quadro__coluna--vazia{display:none}
}
.cartao-lead{display:grid;gap:.55rem;padding:.8rem .85rem;border-radius:12px;background:var(--cartao-fundo);border:1px solid var(--borda)}
.cartao-lead:hover{border-color:var(--borda-forte)}
.cartao-lead__topo{display:flex;align-items:flex-start;gap:.5rem}
.cartao-lead__nome{flex:1;min-width:0;font-size:.95rem;font-weight:600;text-decoration:none;line-height:1.25;padding-top:.15rem}
.cartao-lead__acoes{display:flex;gap:.3rem;flex:none}
.cartao-lead__acoes .icone-botao{width:1.8rem;height:1.8rem}
.cartao-lead__nome:hover{text-decoration:underline;text-underline-offset:3px}
.cartao-lead__meta{font-size:.76rem;color:var(--fraco);margin-top:-.3rem}
.cartao-lead__pe{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cartao-lead__pe .empurra{margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .5rem;border-radius:99px;font-size:.7rem;font-weight:500;background:rgba(196,203,255,.09);color:var(--fraco);white-space:nowrap}
.chip .ico{width:.8rem;height:.8rem}
.chip--alerta{background:color-mix(in srgb,var(--alerta) 16%,transparent);color:var(--alerta)}
.chip--erro{background:color-mix(in srgb,var(--erro) 16%,transparent);color:var(--erro)}
.chip--valor{background:transparent;color:var(--creme);padding-left:0;font-variant-numeric:tabular-nums}
.icone-botao{
  display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:8px;flex:none;
  border:1px solid var(--borda-forte);background:transparent;color:var(--creme);cursor:pointer;text-decoration:none;font:inherit;
}
.icone-botao:hover{border-color:var(--lilas);color:var(--lilas)}
.icone-botao .ico{width:1rem;height:1rem}
.icone-botao--zap{background:#128C4B;border-color:#128C4B}
.icone-botao--zap:hover{color:#fff;filter:brightness(1.12);border-color:#128C4B}

/* ---------- passos do lead ---------- */
.passos{display:flex;list-style:none;margin:0 0 1.2rem;padding:0;overflow-x:auto}
.passo{flex:1 1 0;min-width:6.5rem;position:relative;padding-top:1.7rem;text-align:center;font-size:.78rem;color:var(--mais-fraco)}
.passo::before{content:"";position:absolute;top:.6rem;left:-50%;right:50%;height:2px;background:var(--borda-forte)}
.passo:first-child::before{display:none}
.passo i{position:absolute;top:.15rem;left:50%;transform:translateX(-50%);width:1rem;height:1rem;border-radius:50%;background:var(--fundo);border:2px solid var(--borda-forte)}
.passo--feito{color:var(--fraco)}
.passo--feito::before,.passo--atual::before{background:var(--azul)}
.passo--feito i{background:var(--azul);border-color:var(--azul)}
.passo--atual{color:var(--creme);font-weight:600}
.passo--atual i{border-color:var(--lilas);box-shadow:0 0 0 4px color-mix(in srgb,var(--azul) 35%,transparent);background:var(--azul)}

/* ---------- aprovações ---------- */
.envios{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.envio{display:grid;gap:.7rem;padding:1rem 1.05rem;border-radius:var(--raio);text-decoration:none;background:var(--cartao-fundo);border:1px solid var(--borda)}
.envio:hover{border-color:var(--borda-forte)}
.envio__topo{display:flex;gap:.8rem;align-items:flex-start}
.envio__capa{width:3.4rem;height:3.4rem;border-radius:9px;object-fit:cover;flex:none;background:rgba(196,203,255,.08)}
.envio__cliente{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lilas)}
.envio__titulo{display:block;font-size:1rem;font-weight:600;margin-top:.1rem}
.envio__meta{font-size:.76rem;color:var(--fraco)}
.envio__chips{display:flex;gap:.35rem;flex-wrap:wrap}

.resumo-envio{display:grid;gap:1rem;margin-bottom:1rem}
@media (min-width:900px){.resumo-envio{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}

.pecas-grade{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));align-items:start}
.peca-cartao{display:flex;flex-direction:column;border-radius:var(--raio);overflow:hidden;background:var(--cartao-fundo);border:1px solid var(--borda);scroll-margin-top:5rem}
.peca-cartao--ajuste{border-color:color-mix(in srgb,var(--erro) 45%,transparent)}
.peca-cartao__capa{position:relative;display:block;aspect-ratio:4/5;background:#000}
.peca-cartao__capa img,.peca-cartao__capa video{width:100%;height:100%;object-fit:cover;display:block}
.peca-cartao__capa .selo{position:absolute;top:.6rem;left:.6rem;box-shadow:0 2px 10px rgba(0,0,0,.4);background:rgba(0,8,31,.85)}
.peca-cartao__mais{position:absolute;right:.6rem;bottom:.6rem;padding:.15rem .5rem;border-radius:99px;font-size:.72rem;background:rgba(0,8,31,.85)}
.peca-cartao__pdf{display:grid;place-items:center;height:100%;font-weight:600;color:var(--fraco);text-decoration:none}
.peca-cartao__corpo{padding:.85rem .95rem 1rem;display:grid;gap:.55rem}
.peca-cartao__titulo{margin:0;font-size:.98rem}
.peca-cartao__meta{font-size:.76rem;color:var(--fraco);margin-top:-.35rem}
.peca-cartao__pedido{padding:.6rem .7rem;border-left:3px solid var(--erro);border-radius:0 8px 8px 0;background:rgba(255,107,94,.08);font-size:.85rem;white-space:pre-line}
.peca-cartao__pedido small{display:block;margin-bottom:.2rem;font-size:.7rem;color:var(--fraco)}
.peca-cartao__ok{font-size:.8rem;color:var(--ok)}

.soltar{
  position:relative;display:grid;justify-items:center;gap:.4rem;padding:1.6rem 1rem;text-align:center;
  border:1.5px dashed var(--borda-forte);border-radius:var(--raio);background:rgba(196,203,255,.03);cursor:pointer;
}
.soltar:hover,.soltar--sobre{border-color:var(--lilas);background:rgba(196,203,255,.07)}
.soltar .ico{width:1.8rem;height:1.8rem;color:var(--lilas)}
.soltar strong{font-weight:600}
.soltar span{font-size:.8rem;color:var(--fraco)}
.soltar input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.soltar__lista{font-size:.8rem;color:var(--creme)}

/* ---------- login com a malha: o segundo setor ---------- */
body.solto:not(.aprova){
  background:
    radial-gradient(70% 60% at 85% 0%,color-mix(in srgb,var(--azul) 30%,transparent),transparent 60%),
    var(--fundo);
}
body.solto:not(.aprova)::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(196,203,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(196,203,255,.16) 1px,transparent 1px);
  background-size:82px 82px;
  -webkit-mask-image:radial-gradient(at 50% 40%,#000 15%,transparent 70%);
  mask-image:radial-gradient(at 50% 40%,#000 15%,transparent 70%);
}
.solto__centro{position:relative;z-index:1}

.solto__eyebrow{margin:-.6rem 0 .8rem;text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lilas)}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .kpi{flex-direction:column;gap:.5rem;padding:.85rem}
  .kpi__ico{width:2rem;height:2rem}
  .kpi__valor{font-size:1.05rem}
  .abertura{gap:1rem}
  .atalhos{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:0 var(--pad) .2rem}
  .atalho{flex:none}
}

/* =========================================================================
   v3: cor por área e configurações

   Cada área do trabalho tem uma cor própria, usada no Início para o olho
   achar o assunto antes de ler: dinheiro em ouro, produção em azul,
   comercial em roxo, prazos em turquesa. Vermelho, âmbar e verde ficam
   reservados para situação (atrasado, perto, em dia).
   ========================================================================= */
:root{
  --area-dinheiro:#E9B949;
  --area-producao:#5B7BFF;
  --area-comercial:#B464FF;
  --area-prazos:#2EC4B6;
}
.area-dinheiro{--area:var(--area-dinheiro)}
.area-producao{--area:var(--area-producao)}
.area-comercial{--area:var(--area-comercial)}
.area-prazos{--area:var(--area-prazos)}

/* ---------- números com cor própria ---------- */
.kpi{overflow:hidden;background:linear-gradient(140deg,color-mix(in srgb,var(--area,var(--lilas)) 13%,transparent),rgba(196,203,255,.02) 60%)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--area,var(--lilas))}
.kpi .kpi__ico{background:color-mix(in srgb,var(--area,var(--lilas)) 20%,transparent);color:var(--area,var(--lilas))}
.kpi--erro{--area:var(--erro)}
.kpi--ok{--area:var(--ok)}

/* ---------- painéis por área ---------- */
.paineis{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1080px){.paineis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.painel{
  position:relative;border-radius:var(--raio);overflow:hidden;min-width:0;
  border:1px solid color-mix(in srgb,var(--area) 30%,var(--borda));
  background:linear-gradient(180deg,color-mix(in srgb,var(--area) 10%,transparent),rgba(196,203,255,.02) 140px);
}
.painel__cabeca{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem .7rem}
.painel__ico{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:10px;flex:none;background:color-mix(in srgb,var(--area) 22%,transparent);color:var(--area)}
.painel__ico .ico{width:1.05rem;height:1.05rem}
.painel__titulo{margin:0;font-size:.98rem;flex:1}
.painel__titulo small{display:block;font-size:.72rem;font-weight:400;color:var(--fraco);letter-spacing:0}
.painel__num{min-width:1.7rem;padding:.12rem .5rem;border-radius:99px;text-align:center;font-size:.78rem;font-weight:700;background:var(--area);color:#0A0E22}
.painel__corpo{padding:0 .75rem .8rem}
.painel__vazio{display:flex;align-items:center;gap:.5rem;margin:0 .25rem .2rem;padding:.75rem .8rem;border-radius:10px;font-size:.84rem;color:var(--fraco);background:rgba(196,203,255,.03)}
.painel__vazio .ico{width:1rem;height:1rem;color:var(--ok)}
.painel .fila__item{background:rgba(0,8,31,.45)}

/* ---------- a semana em sete colunas ---------- */
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.semana__dia{min-width:0;display:flex;flex-direction:column;gap:.35rem;padding:.65rem .6rem;border-radius:12px;background:rgba(196,203,255,.035);border:1px solid var(--borda)}
.semana__dia--hoje{border-color:color-mix(in srgb,var(--azul) 70%,transparent);background:color-mix(in srgb,var(--azul) 12%,transparent)}
.semana__data{display:flex;align-items:baseline;gap:.35rem;margin-bottom:.15rem}
.semana__data b{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.semana__data small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)}
.semana__item{display:block;padding:.28rem .4rem .28rem .5rem;border-radius:6px;font-size:.72rem;line-height:1.3;text-decoration:none;
  border-left:3px solid var(--area);background:color-mix(in srgb,var(--area) 12%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.semana__item:hover{background:color-mix(in srgb,var(--area) 22%,transparent)}
.semana__mais{font-size:.7rem;color:var(--fraco);padding-left:.3rem}
.semana__nada{font-size:.7rem;color:var(--mais-fraco)}
.legenda-areas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem;font-size:.76rem;color:var(--fraco)}
.legenda-areas span{display:inline-flex;align-items:center;gap:.35rem}
.legenda-areas i{width:.6rem;height:.6rem;border-radius:2px;background:var(--area)}
@media (max-width:900px){
  .semana{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(9.5rem,1fr);overflow-x:auto;padding-bottom:.4rem}
}

/* ---------- cartões do rodapé do Início ---------- */
.trio{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start;margin-top:1rem}
.cartao--area{border-top:3px solid var(--area)}
.cartao--area .cartao__titulo > .ico{color:var(--area)}
.mini-barras{display:flex;align-items:flex-end;gap:.45rem;height:6.5rem;margin:.4rem 0 .5rem}
.mini-barras__mes{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;height:100%;min-width:0}
.mini-barras__par{flex:1;display:flex;align-items:flex-end;gap:2px;width:100%;justify-content:center}
.mini-barras__par span{width:42%;max-width:14px;border-radius:3px 3px 0 0;min-height:2px}
.mini-barras__mes small{font-size:.64rem;color:var(--mais-fraco);text-transform:uppercase;letter-spacing:.06em}
.mini-barras__mes--atual small{color:var(--creme)}
.carteira{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.carteira li{display:flex;align-items:center;gap:.6rem;font-size:.86rem}
.carteira a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.carteira a:hover{text-decoration:underline}
.carteira b{font-weight:600;font-variant-numeric:tabular-nums}
.carteira i{width:.5rem;height:.5rem;border-radius:50%;flex:none;background:var(--ok)}
.carteira i.atraso{background:var(--erro)}
.contagem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:.9rem}
.contagem div{padding:.6rem;border-radius:10px;background:rgba(196,203,255,.05);text-align:center}
.contagem b{display:block;font-size:1.35rem;font-weight:600;line-height:1.1}
.contagem small{font-size:.7rem;color:var(--fraco)}

/* ---------- configurações ---------- */
.config{display:grid;gap:1.4rem;align-items:start}
@media (min-width:900px){.config{grid-template-columns:16rem minmax(0,1fr)}}
.config__menu{display:grid;gap:.35rem;position:sticky;top:5.2rem}
.config__item{display:flex;gap:.7rem;align-items:center;padding:.7rem .75rem;border-radius:12px;text-decoration:none;border:1px solid transparent;color:var(--fraco)}
.config__item b{display:block;font-weight:600;font-size:.9rem;color:var(--creme)}
.config__item small{display:block;font-size:.74rem}
.config__item:hover{background:rgba(196,203,255,.04)}
.config__item--ativo{background:var(--cartao-fundo);border-color:var(--borda-forte)}
.config__ico{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:10px;flex:none;background:rgba(196,203,255,.08);color:var(--lilas)}
.config__item--ativo .config__ico{background:var(--azul);color:#fff}
.config__ico .ico{width:1rem;height:1rem}
@media (max-width:899px){
  .config__menu{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .3rem}
  .config__item small{display:none}
}
.config__corpo{min-width:0;display:grid;gap:1rem;align-content:start}
.config__cabeca h2{margin:.2rem 0 .3rem;font-size:1.35rem}
.config__cabeca p{margin:0;color:var(--fraco);max-width:44rem;font-size:.92rem}
.config__cabeca--acao{display:flex;gap:1rem;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.papeis{border:0;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.papel{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .85rem;border-radius:11px;border:1px solid var(--borda);cursor:pointer}
.papel:has(input:checked){border-color:var(--lilas);background:rgba(196,203,255,.06)}
.papel input{margin:.2rem 0 0;accent-color:var(--azul)}
.papel b{display:block;font-weight:600}
.papel small{display:block;font-size:.8rem;color:var(--fraco)}
.categorias{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.categoria{display:flex;gap:.4rem;align-items:center}
.categoria .campo__input{min-height:2.2rem;padding:.35rem .6rem}
.categoria__uso{min-width:1.6rem;text-align:center;font-size:.74rem;color:var(--mais-fraco)}
.passos-lista{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.numero-passo{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--azul);color:#fff;font-size:.8rem;font-weight:700}
.secao .ico{width:1rem;height:1rem;color:var(--lilas)}

/* o topo acompanha a coluna do conteúdo, para o título alinhar com os cartões */
.topo{padding-left:max(var(--pad),calc((100% - var(--largura)) / 2 + var(--pad)));padding-right:max(var(--pad),calc((100% - var(--largura)) / 2 + var(--pad)))}
/* em tela bem larga cabem os quatro painéis lado a lado */
@media (min-width:2200px){.paineis{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* fileiras do Início: mesmo topo e mesma altura em todos os cartões */
:is(.grade,.trio,.paineis,.resumo-envio,.envios,.pecas-grade,.config__corpo) > .cartao{margin-top:0}
.trio,.grade--igual{align-items:stretch}
.paineis{align-items:stretch}