/* ============================================================
   Tema 2026: a camada de acabamento.

   Carregada depois de estilo.css, notas.css e olliver.css, e por isso
   vence nos pontos em que discorda deles. Mora num arquivo separado de
   proposito: e a unica parte do visual que se pode remover inteira sem
   quebrar nenhuma tela, bastando tirar uma linha do index.html.

   As tres ideias que guiam tudo aqui:

   1. **Movimento diz o que aconteceu.** Nada se move por enfeite: a tela
      nova entra subindo porque substituiu a anterior, o botao afunda
      porque foi pressionado, a linha da tabela acende porque o ponteiro
      esta nela. Quem desliga animacao no sistema operacional nao ve nada
      disso, e a tela continua inteira.

   2. **Profundidade tem significado.** Tres niveis, nao cinco: o fundo, a
      superficie de conteudo e o que flutua (menu, janela, dica). Sombra
      grande em tudo achata a hierarquia em vez de criar.

   3. **Laranja e acao, nunca estado.** A cor da marca fica nos botoes que
      fazem alguma coisa e no item aberto do menu. Estado (bom, atencao,
      ruim) usa a escala que todo mundo le sem legenda.
   ============================================================ */

:root {
  /* Movimento: tres tempos e duas curvas. Mais que isso vira sopa. */
  --rapido: 120ms;
  --medio: 220ms;
  --lento: 380ms;
  /* Curva de saida: comeca rapido e assenta devagar, como coisa com peso. */
  --curva: cubic-bezier(.2, .8, .2, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);

  /* Profundidade em tres degraus. */
  --elev-1: 0 1px 2px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .06);
  --elev-2: 0 4px 12px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .04);
  --elev-3: 0 12px 32px rgba(17, 24, 39, .10), 0 2px 8px rgba(17, 24, 39, .05);

  /* Neutros com um fio de azul: cinza puro parece sujo ao lado do laranja. */
  --fundo: #f6f7f9;
  --fundo-alto: #eef0f4;
  --painel-2: #f8fafc;
  --linha: rgba(15, 23, 42, .08);
  --linha-forte: rgba(15, 23, 42, .16);
  --texto: #0f172a;
  --apagado: #64748b;
  --raio: 16px;
  --raio-m: 12px;
  --raio-p: 10px;
  --sombra: var(--elev-2);
  --sombra-alta: var(--elev-3);

  /* A seta para baixo dos seletores, desenhada uma vez: a pastilha fechada a
     usa como imagem de fundo (e aí o cinza do traço é o que aparece) e a lista
     aberta, como máscara do ícone (aí só o formato conta, e a cor vem do
     `color`, que fica laranja com a lista aberta). */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Quem pediu menos movimento no sistema recebe menos movimento. Nao e
   opcional: animacao pode causar enjoo de verdade em algumas pessoas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------- tipografia ---------------- */

body { letter-spacing: -.01em; }

.barra h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.cartao h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}
/* Numero em tabela e em metrica alinha pela casa decimal. */
td, .numero, .metrica .numero { font-variant-numeric: tabular-nums; }

/* ---------------- a tela que entra ---------------- */

/* Cada troca de tela sobe 8px e aparece. O olho entende que o conteudo foi
   substituido, em vez de piscar sem explicacao. */
@keyframes sobe {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
#conteudo > * {
  animation: sobe var(--medio) var(--curva) both;
}
/* O terceiro cartao nao precisa esperar o primeiro: o atraso e curto e para
   no quarto, senao a tela inteira parece lenta. */
#conteudo > *:nth-child(2) { animation-delay: 40ms; }
#conteudo > *:nth-child(3) { animation-delay: 80ms; }
#conteudo > *:nth-child(n + 4) { animation-delay: 110ms; }

/* ---------------- barra de progresso das requisicoes ---------------- */

/* Um fio no topo enquanto o sistema fala com o servidor. Substitui o nada
   que havia antes: tela parada por dois segundos parece tela quebrada. */
#progresso {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--destaque), var(--destaque-2));
  box-shadow: 0 0 10px rgba(255, 90, 31, .5);
  opacity: 0;
  transition: width var(--lento) var(--curva-suave), opacity var(--medio) ease;
  pointer-events: none;
}
#progresso.correndo { opacity: 1; width: 72%; }
#progresso.fim { opacity: 0; width: 100%; transition: width 160ms ease, opacity 320ms ease; }

/* ---------------- lateral ---------------- */

aside.lateral {
  background: linear-gradient(180deg, #ffffff, #fcfcfd);
  border-right: 1px solid var(--linha);
}

nav.menu button {
  position: relative;
  border-radius: var(--raio-m);
  transition: background var(--rapido) ease, color var(--rapido) ease, transform var(--rapido) var(--curva);
}
/* O marcador do item aberto desliza para dentro em vez de aparecer seco. */
nav.menu button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--destaque);
  transform: translateY(-50%);
  transition: height var(--medio) var(--curva);
}
nav.menu button.ativa::before { height: 60%; }
nav.menu button:hover:not(.ativa) { transform: translateX(2px); }
nav.menu button svg { transition: color var(--rapido) ease, opacity var(--rapido) ease, transform var(--medio) var(--curva); }
nav.menu button:hover svg { opacity: 1; transform: scale(1.06); }

.lateral .rodape-lateral button { border-radius: var(--raio-m); transition: background var(--rapido) ease; }

/* ---------------- barra de cima ---------------- */

.barra-cima {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.barra-cima .busca input {
  transition: border-color var(--medio) ease, box-shadow var(--medio) ease, background var(--medio) ease;
}
.barra-cima .busca input:focus {
  background: var(--painel);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, .10), var(--elev-1);
}
button.icone {
  position: relative;
  transition: background var(--rapido) ease, transform var(--rapido) var(--curva), color var(--rapido) ease;
}
button.icone:hover { transform: translateY(-1px); }
button.icone:active { transform: translateY(0); }

/* ---------------- sub-abas ---------------- */

nav.sub-modulo button, .sub-abas button {
  position: relative;
  border-radius: 999px;
  transition: color var(--rapido) ease, background var(--medio) var(--curva);
}
nav.sub-modulo button::after, .sub-abas button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 90, 31, .10);
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
  z-index: -1;
}
nav.sub-modulo button.ativa::after,
nav.sub-modulo button.ativo::after,
.sub-abas button.ativa::after,
.sub-abas button.ativo::after { opacity: 1; transform: scale(1); }

/* ---------------- cartoes ---------------- */

.cartao {
  border-radius: var(--raio);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva), border-color var(--medio) ease;
}
/* Cartao que nao clica nao levanta: movimento sem acao promete o que a tela
   nao cumpre. So os que sao botoes disfarcados reagem. */
.cartao.clicavel:hover,
.card-midia:hover,
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
}

details.cartao > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--rapido) ease;
}
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid var(--apagado);
  border-bottom: 2px solid var(--apagado);
  transform: rotate(-45deg);
  transition: transform var(--medio) var(--curva);
  flex: 0 0 auto;
}
details.cartao[open] > summary::before { transform: rotate(45deg); }

/* ---------------- botoes ---------------- */

button {
  border-radius: var(--raio-p);
  box-shadow: 0 1px 2px rgba(255, 90, 31, .2);
  transition:
    transform var(--rapido) var(--curva),
    box-shadow var(--medio) var(--curva),
    filter var(--rapido) ease,
    background var(--rapido) ease,
    border-color var(--rapido) ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 90, 31, .28); }
button:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 2px rgba(255, 90, 31, .2); }
button.discreto:hover { transform: translateY(-1px); box-shadow: var(--elev-1); }
/* Foco de teclado visivel, e so no teclado: quem usa o mouse nao ve anel. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
}

/* ---------------- tabelas ---------------- */

/* Cabecalho em caixa alta com espacamento de letra e heranca de 2010: obriga
   a soletrar e nao cabe em palavra longa. Vira frase normal, um degrau menor
   que o corpo. */
th {
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--apagado);
  padding-top: 10px;
  padding-bottom: 10px;
}
tbody tr { transition: background var(--rapido) ease, box-shadow var(--rapido) ease; }
tbody tr:hover { background: var(--painel-2); }
/* Linha que abre alguma coisa ganha um fio laranja a esquerda no hover: diz
   "da para clicar" sem precisar de uma coluna de botao. */
tr.clicavel { position: relative; }
tr.clicavel:hover { background: rgba(255, 90, 31, .045); }
tr.clicavel:hover td:first-child { box-shadow: inset 3px 0 0 var(--destaque); }

/* ---------------- selos ---------------- */

.selo {
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background var(--rapido) ease, border-color var(--rapido) ease;
}

/* ---------------- janela ---------------- */

dialog {
  border-radius: var(--raio);
  box-shadow: var(--elev-3);
  animation: janela-entra var(--medio) var(--curva);
}
@keyframes janela-entra {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
dialog::backdrop {
  background: rgba(15, 23, 42, .32);
  backdrop-filter: blur(3px);
  animation: fundo-entra var(--medio) ease;
}
@keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- avisos que aparecem e somem ---------------- */

/* Substitui o alert() do navegador, que trava a pagina, muda de cara em cada
   sistema e mostra o endereco do site em cima do recado. */
#avisos-pilha {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: grid;
  gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
}
.aviso-flutua {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--raio-m);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--apagado);
  box-shadow: var(--elev-3);
  font-size: 13.5px;
  line-height: 1.5;
  animation: aviso-entra var(--medio) var(--curva);
}
.aviso-flutua.ruim { border-left-color: var(--alerta); }
.aviso-flutua.bom { border-left-color: var(--ok); }
.aviso-flutua.saindo { animation: aviso-sai var(--medio) var(--curva-suave) forwards; }
.aviso-flutua button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--apagado);
  padding: 0 2px;
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
}
.aviso-flutua button:hover { color: var(--texto); transform: none; box-shadow: none; }
@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes aviso-sai {
  to { opacity: 0; transform: translateX(16px) scale(.98); }
}

/* ---------------- quadro ---------------- */

.kanban-coluna {
  background: var(--painel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  padding: 12px;
  transition: background var(--medio) ease, border-color var(--medio) ease;
}
.kanban-coluna.alvo {
  background: rgba(255, 90, 31, .06);
  border-color: rgba(255, 90, 31, .35);
}
.kanban-card {
  border-radius: var(--raio-p);
  box-shadow: var(--elev-1);
  transition: transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), opacity var(--rapido) ease;
}
.kanban-card.arrastando { opacity: .45; transform: rotate(1.5deg) scale(.98); }

/* ---------------- barras de proporcao ---------------- */

.ocupacao > span,
.escopo-feito,
.barra-consumo span {
  transition: width var(--lento) var(--curva);
}

/* ---------------- vazio desenhado ---------------- */

.vazio-desenhado {
  text-align: center;
  padding: 56px 28px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--elev-1);
}
.vazio-desenhado h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.vazio-desenhado p { margin: 0 auto 6px; color: var(--apagado); max-width: 56ch; line-height: 1.65; }
.vazio-desenhado .vazio-acoes { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------------- metricas ---------------- */

.metricas { gap: 14px; }
.metrica {
  border-radius: var(--raio-m);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.metrica .rotulo { font-size: 12px; letter-spacing: 0; text-transform: none; }
.metrica .numero { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

/* ---------------- controle segmentado ---------------- */

.segmentado button { transition: color var(--rapido) ease, background var(--medio) var(--curva); }
.segmentado button.ativo { background: var(--painel); box-shadow: var(--elev-1); color: var(--texto); }

/* ---------------- rolagem ---------------- */

* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }


/* ---------------- ficha de entrada, como o dono a le ---------------- */

/* A ficha tem que ser lida em dez segundos e decidida. A ordem na tela e a
   ordem da decisao: quem e (topo), por onde falo (canais), os numeros
   (resumo), o que a pessoa escreveu (respostas) e so entao os botoes. */
.entrada-cartao { padding: 20px 22px; }
.entrada-cartao.nova { border-left: 3px solid var(--destaque); }
.entrada-cartao.aprovada { opacity: .82; }
.entrada-cartao.recusada { opacity: .68; }

.entrada-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.entrada-identidade { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.entrada-avatar {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(255, 90, 31, .16), rgba(255, 90, 31, .06));
  color: var(--destaque);
  font-weight: 700; font-size: 14px;
}
.entrada-identidade h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.entrada-identidade p { margin: 2px 0 0; color: var(--apagado); font-size: 13px; }
.entrada-selos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Canais: botao com icone. Aberto numa aba nova, porque a pessoa vai falar
   com o possivel cliente e voltar. */
.entrada-canais { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.canal {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--painel-2);
  color: var(--texto);
  font-size: 12.5px; font-weight: 500;
  transition: border-color var(--rapido) ease, background var(--rapido) ease, transform var(--rapido) var(--curva), color var(--rapido) ease;
}
.canal svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canal:hover { transform: translateY(-1px); border-color: var(--linha-forte); background: var(--painel); }
.canal.zap:hover { color: #0b7a54; border-color: rgba(18, 160, 110, .45); }
.canal.insta:hover { color: #c1358a; border-color: rgba(193, 53, 138, .4); }

.entrada-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 14px;
  padding: 16px;
  margin-bottom: 18px;
  background: var(--painel-2);
  border-radius: var(--raio-m);
}
.entrada-resumo > div { display: grid; gap: 3px; min-width: 0; }
.entrada-resumo strong { font-size: 14px; font-weight: 600; }
.entrada-resumo .dado-forte { color: var(--destaque); }

.ficha-rotulo {
  font-size: .68rem;
  font-weight: 700;
  color: var(--apagado);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.entrada-respostas { display: grid; gap: 14px; }
.ficha-resposta { padding-left: 12px; border-left: 2px solid var(--linha); }
.ficha-resposta p {
  margin: 4px 0 0;
  line-height: 1.6;
  font-size: 14px;
  white-space: pre-wrap;
}
.entrada-desfecho {
  margin: 16px 0 0; padding: 10px 14px;
  background: var(--painel-2); border-radius: var(--raio-p);
  font-size: 13px; color: var(--apagado);
}
.entrada-acoes { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); }

/* O plano de interesse e o que mais pesa na decisao: e o unico selo desta
   tela com a cor da marca. */
.selo.destaque-plano {
  color: var(--destaque);
  border-color: rgba(255, 90, 31, .35);
  background: rgba(255, 90, 31, .08);
}

/* A faixa do link: dois botoes e uma frase. O endereco em si nao aparece,
   porque ninguem digita URL de sessenta caracteres. */
.faixa-link {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; margin-bottom: 16px;
}
.faixa-link-texto { display: grid; gap: 2px; flex: 1; min-width: 220px; }
.faixa-link-texto strong { font-size: 14px; }
.faixa-link-texto span { color: var(--apagado); font-size: 13px; line-height: 1.5; }
.faixa-link-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.faixa-link-acoes button { display: inline-flex; align-items: center; gap: 8px; }
.faixa-link-acoes svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


/* ---------------- listas de pessoas (contato e equipe) ---------------- */

/* Eram tabelas de quatro colunas, com o e-mail a meia tela de distancia do
   nome. Viraram linhas: quem e a esquerda, por onde falar a direita. */
.lista-pessoas { display: grid; gap: 2px; }
.pessoa-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--raio-p);
  transition: background var(--rapido) ease;
}
.pessoa-linha:hover { background: var(--painel-2); }
.pessoa-avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--fundo-alto);
  color: var(--apagado);
  font-size: 12px; font-weight: 700;
}
.pessoa-quem { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pessoa-quem strong { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pessoa-quem span { font-size: 12.5px; color: var(--apagado); }
.pessoa-canais { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pessoa-canais .fraco { font-size: 12.5px; }
@media (max-width: 720px) {
  .pessoa-linha { flex-wrap: wrap; }
  .pessoa-canais { width: 100%; justify-content: flex-start; padding-left: 46px; }
}


/* Botao que e so um icone: acao secundaria que nao merece uma palavra
   ocupando a linha, mas que precisa continuar sendo alcancavel por leitor de
   tela (dai o aria-label em quem o usa) e ter alvo grande o bastante. */
button.so-icone {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--apagado);
  box-shadow: none;
}
button.so-icone svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
button.so-icone:hover {
  background: rgba(224, 52, 43, .08);
  border-color: rgba(224, 52, 43, .25);
  color: var(--alerta);
  transform: none;
  box-shadow: none;
}


/* ---------------- link gerado uma vez so ---------------- */

/* O acesso ao portal aparece uma vez e some para sempre: no banco fica so o
   hash. Entao ele nao pode ser um aviso que passa, nem um recado no topo de
   uma pagina de tres telas de altura. Nasce dentro do proprio cartao, com
   borda da marca, e fica ate alguem fechar. */
.link-gerado {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1.5px solid rgba(255, 90, 31, .4);
  border-radius: var(--raio-m);
  background: rgba(255, 90, 31, .05);
  animation: sobe var(--medio) var(--curva) both;
}
.link-gerado-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.link-gerado code {
  display: block;
  padding: 10px 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.link-gerado .dica { margin: 8px 0 12px; }
.link-gerado-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.link-gerado-acoes button,
.link-gerado-acoes .botao-como-link { display: inline-flex; align-items: center; gap: 8px; }
.link-gerado svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Um <a> que precisa parecer botao: `mailto:` e `wa.me` tem que ser link de
   verdade para o sistema operacional abrir o aplicativo certo. */
.botao-como-link {
  padding: 10px 16px;
  border-radius: var(--raio-p);
  background: linear-gradient(180deg, var(--destaque-2), var(--destaque));
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(255, 90, 31, .2);
  transition: transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva);
}
.botao-como-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 90, 31, .28); color: #fff; }
.botao-como-link.discreto {
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--linha-forte);
  box-shadow: var(--elev-1);
}

/* Linha de quem ja perdeu o acesso: continua legivel, mas sai da frente. */
.pessoa-linha.apagada { opacity: .55; }


/* As tres linhas do acesso: endereco, e-mail e senha, cada uma copiavel a
   olho. A senha em destaque porque e a que se dita ao telefone. */
.credenciais { display: grid; gap: 10px; margin-bottom: 4px; }
.credenciais > div { display: grid; gap: 3px; }
.credenciais code {
  display: block;
  padding: 9px 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.credenciais code.senha { font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--destaque); }

/* O endereco do portal, sempre a vista e copiavel. */
.endereco-portal {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin: 12px 0 16px;
  background: var(--painel-2); border-radius: var(--raio-m);
}
.endereco-portal code {
  flex: 1; min-width: 200px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  overflow-wrap: anywhere;
}
.endereco-portal .ficha-rotulo { flex: 0 0 auto; }
/* Confirmacao no proprio botao: fica verde por um segundo e meio. */
button.so-icone.copiou { color: var(--ok); background: rgba(18, 160, 110, .1); border-color: rgba(18, 160, 110, .3); }


/* ---------------- biblioteca ---------------- */

.pastas-biblioteca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.pasta-cartao {
  display: grid;
  gap: 2px;
  padding: 14px;
  text-align: left;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  color: var(--texto);
  box-shadow: none;
  transition: border-color var(--rapido) ease, transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), background var(--rapido) ease;
}
.pasta-cartao:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--linha-forte); }
.pasta-cartao.aberta { border-color: var(--destaque); background: rgba(255, 90, 31, .05); }
.pasta-cartao.vazia { opacity: .62; }
.pasta-icone svg { width: 20px; height: 20px; fill: none; stroke: var(--apagado); stroke-width: 1.6; }
.pasta-cartao.aberta .pasta-icone svg { stroke: var(--destaque); }
.pasta-nome { font-weight: 600; font-size: 13.5px; margin-top: 6px; }
.pasta-conta { font-size: 12px; color: var(--apagado); }

/* Video e PDF nao tem miniatura: o cartao diz o que e, em vez de um quadrado
   cinza que nao explica nada. */
.card-midia .mini.sem-imagem {
  height: 140px;
  display: grid;
  place-items: center;
  background: var(--fundo-alto);
  color: var(--apagado);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
}

/* ---------------- horario do post na fila ---------------- */

.horario-botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: var(--painel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  color: var(--texto);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}
.horario-botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .6; }
.horario-botao:hover { background: var(--painel); border-color: var(--destaque); transform: none; box-shadow: var(--elev-1); }
/* Horario escolhido a mao tem a marca da acao; o que veio da grade fica neutro. */
.horario-botao.travado { border-color: rgba(255, 90, 31, .4); background: rgba(255, 90, 31, .06); }
.horario-botao.travado svg { stroke: var(--destaque); opacity: 1; }
.horario-botao .sem-horario { color: var(--apagado); font-style: italic; }


/* ---------------- icone dentro de botao ---------------- */

/* O sprite guarda so o traçado das formas. Sem `fill: none` o navegador
   preenche tudo, e o icone vira um bloco preto — que foi exatamente o que
   apareceu nos botoes "Enviar arquivo" e "Adicionar link". A regra vale para
   qualquer botao ou link do painel, para nao depender de cada tela lembrar. */
button svg,
.botao-como-link svg,
.canal svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* Botao com icone e texto fica em linha, com respiro entre os dois. */
button:has(svg):not(.so-icone):not(.icone) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* A pasta aberta, com a area de arrastar dentro dela. */
.pasta-aberta { padding-top: 4px; }
.pasta-aberta h3 { font-size: 15px; margin: 0; letter-spacing: -.01em; }
.solta-arquivo {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 22px 16px;
  margin-bottom: 14px;
  border: 2px dashed var(--linha-forte);
  border-radius: var(--raio-m);
  background: var(--painel-2);
  color: var(--apagado);
  font-size: 13px;
  transition: border-color var(--medio) ease, background var(--medio) ease, transform var(--medio) var(--curva);
}
.solta-arquivo strong { color: var(--texto); font-size: 14px; }
.solta-arquivo.sobre { border-color: var(--destaque); background: rgba(255, 90, 31, .07); transform: scale(1.005); }


/* ---------------- cronograma do mes ---------------- */

/* O "+" que aparece quando o ponteiro passa pelo dia: agendar e a acao do
   dia, e ela nao pode ocupar espaco o tempo todo em 31 celulas. */
.calendario .dia { position: relative; }
.dia-mais {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  color: var(--apagado);
  font-size: 16px;
  line-height: 1;
  box-shadow: none;
  opacity: 0;
  transition: opacity var(--rapido) ease, background var(--rapido) ease, color var(--rapido) ease;
}
.calendario .dia:hover .dia-mais { opacity: 1; }
.dia-mais:hover { background: var(--destaque); border-color: var(--destaque); color: #fff; transform: none; }
/* No toque nao existe "passar o mouse": ali o botao fica sempre visivel. */
@media (hover: none) { .dia-mais { opacity: .7; } }

.calendario .pastilha { width: 100%; text-align: left; border: 0; font: inherit; }
.calendario .pastilha .trava { color: var(--destaque); font-weight: 700; margin-left: auto; }


/* Feriado no cronograma: o dia muda de fundo e diz o nome. Marcar post em
   feriado continua possivel — a tela avisa, nao proibe. */
.calendario .dia.feriado { background: rgba(224, 52, 43, .045); }
.marca-feriado {
  display: block;
  margin: 2px 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--alerta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------------- escolha de rede e formato ---------------- */

.escolha-rede { display: flex; gap: 8px; margin: 12px 0 18px; }
.pilula {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--painel-2);
  border: 1px solid var(--linha);
  color: var(--apagado);
  font-weight: 600;
  font-size: 13px;
  box-shadow: none;
}
.pilula:hover { color: var(--texto); border-color: var(--linha-forte); transform: none; box-shadow: none; }
.pilula.ativa { background: var(--texto); border-color: var(--texto); color: #fff; }

.formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.formato-cartao {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 12px;
  text-align: center;
  background: var(--painel);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-m);
  color: var(--texto);
  box-shadow: none;
  transition: border-color var(--rapido) ease, transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva);
}
.formato-cartao:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--linha-forte); }
.formato-cartao.ativo { border-color: var(--destaque); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
/* O desenho diz o enquadramento antes de qualquer texto: quadrado para feed,
   retangulo em pe para reels e stories. */
.formato-desenho {
  display: block;
  border: 2px solid var(--apagado);
  border-radius: 4px;
  margin-bottom: 6px;
}
.formato-desenho.quadrado { width: 26px; height: 26px; }
.formato-desenho.vertical { width: 18px; height: 30px; }
.formato-cartao.ativo .formato-desenho { border-color: var(--destaque); }
.formato-nome { font-weight: 650; font-size: 14px; }
.formato-regra { font-size: 11.5px; color: var(--apagado); line-height: 1.35; }

/* Um botao que precisa parecer link dentro de uma frase. */
.ligacao {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: var(--destaque);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.ligacao:hover { transform: none; box-shadow: none; filter: brightness(.92); }

.contador { font-size: .74rem; color: var(--apagado); }
.contador.ruim { color: var(--alerta); font-weight: 600; }


/* ======================================================================
   Previa do post: o celular de mentira ao lado do formulario.

   Nada aqui e enfeite. Cada medida existe para que o que se ve na tela
   caia no mesmo lugar em que a rede vai colocar: legenda embaixo no
   Instagram, em cima no Facebook, por cima da arte no Stories.
   ====================================================================== */
.novo-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}
.novo-post-layout > .ficha-formulario { min-width: 0; }

.previa-coluna { position: sticky; top: 16px; }
.previa-cartao { padding: 16px; }
.previa-cartao h2 { margin: 0 0 12px; }
.previa-nota { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; }

/* O aparelho. Fundo escuro so nos formatos que ocupam a tela inteira. */
.previa-celular {
  border: 1px solid var(--linha);
  border-radius: 18px;
  overflow: hidden;
  background: var(--painel);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
}
.previa-tela { display: block; font-size: 12px; line-height: 1.4; }
.previa-tela.story, .previa-tela.reels { background: #000; }

.previa-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
}
.previa-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f58529, #dd2a7b);
}
.previa-topo strong { font-size: 12px; font-weight: 600; }
.previa-topo small { color: var(--apagado); font-size: 11px; }
.previa-nome { display: flex; flex-direction: column; line-height: 1.25; }
.previa-topo .empurra { flex: 1; }

/* Os icones sao formas, nao imagens: um sprite so para a previa seria peso
   a toa, e a silhueta basta para dizer onde a barra de acoes fica. */
.previa-icone {
  width: 17px;
  height: 17px;
  flex: none;
  opacity: .78;
  background: currentColor;
  color: #1c1c1c;
}
.previa-icone.clara { color: #fff; opacity: .95; }
.previa-icone.coracao {
  clip-path: polygon(50% 100%, 10% 62%, 0 36%, 15% 12%, 35% 12%, 50% 29%, 65% 12%, 85% 12%, 100% 36%, 90% 62%);
}
.previa-icone.balao { border-radius: 50% 50% 50% 4px; }
.previa-icone.aviao { clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); }
.previa-icone.marcador { clip-path: polygon(15% 0, 85% 0, 85% 100%, 50% 72%, 15% 100%); }
.previa-icone.tres-pontos {
  background: none;
  box-shadow: -6px 0 0 currentColor, 0 0 0 currentColor, 6px 0 0 currentColor;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-right: 6px;
  color: #1c1c1c;
}
.previa-icone.tres-pontos.clara { color: #fff; }

.previa-midia-encaixe { position: relative; }
.previa-midia {
  position: relative;
  width: 100%;
  background: #eef0f4;
  overflow: hidden;
}
.previa-midia.quadrado { aspect-ratio: 1 / 1; }
.previa-midia.vertical { aspect-ratio: 9 / 16; }
.previa-midia img, .previa-midia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.previa-midia.vazia {
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  padding: 10px;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.previa-midia.cheia { background: #101012; }
.previa-medida { font-size: 15px; font-weight: 700; color: #98a2b3; }
.previa-medida.sobre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  color: rgba(255, 255, 255, .5);
}
.previa-regra { font-size: 10.5px; color: var(--apagado); max-width: 190px; }
.previa-contador {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, .55);
}

.previa-acoes { display: flex; align-items: center; gap: 13px; padding: 9px 11px 4px; }
.previa-acoes .empurra { flex: 1; }
.previa-acoes.facebook {
  gap: 0;
  justify-content: space-around;
  padding: 8px 11px;
  border-top: 1px solid var(--linha);
}
.previa-botao { font-size: 11.5px; font-weight: 600; color: var(--apagado); }

.previa-pontos { display: flex; justify-content: center; gap: 4px; padding: 4px 0; }
.previa-pontos i { width: 5px; height: 5px; border-radius: 50%; background: #d4d7dd; }
.previa-pontos i.ativo { background: #3a7afe; }

.previa-curtidas { margin: 2px 11px; font-size: 11.5px; font-weight: 600; }
.previa-legenda { margin: 0 11px 11px; word-break: break-word; white-space: pre-wrap; }
.previa-legenda strong { font-weight: 600; margin-right: 4px; }
.previa-legenda.acima { margin: 0 11px 9px; }
.previa-mais { color: var(--apagado); margin-left: 3px; }
.previa-vazio { color: var(--apagado); font-style: italic; }
.previa-comentario {
  margin: 0 11px 11px;
  font-size: 11.5px;
  color: var(--apagado);
  word-break: break-word;
}
.previa-comentario strong { font-weight: 600; color: var(--texto); margin-right: 4px; }

/* Stories: barra de progresso, cabecalho sobre a arte, e o texto que a
   pessoa escreveu aparecendo DENTRO da imagem, que e o ponto. */
.previa-progresso {
  position: absolute;
  top: 7px;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
}
.previa-progresso span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 2px;
  background: var(--painel);
}
.previa-topo.sobreposto {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.previa-topo.sobreposto strong, .previa-topo.sobreposto small { color: #fff; }
.previa-texto-arte {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  max-height: 60%;
  overflow: hidden;
}
.previa-texto-arte.vazio {
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, .6);
  text-shadow: none;
}
.previa-responder {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .8);
}

/* Reels: legenda deitada no canto de baixo, trilho de icones a direita. */
.previa-trilho {
  position: absolute;
  right: 9px;
  bottom: 58px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}
.previa-rodape-reels {
  position: absolute;
  left: 12px;
  right: 48px;
  bottom: 12px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.previa-rodape-reels strong { font-size: 12px; font-weight: 600; }
.previa-legenda.sobre {
  margin: 3px 0 0;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.previa-legenda.sobre .previa-mais { color: rgba(255, 255, 255, .75); }
.previa-legenda.sobre .previa-vazio { color: rgba(255, 255, 255, .6); }

/* Tela estreita: a previa desce para baixo do formulario e para de colar. */
@media (max-width: 1080px) {
  .novo-post-layout { grid-template-columns: minmax(0, 1fr); }
  .previa-coluna { position: static; max-width: 360px; }
}


/* ======================================================================
   WhatsApp da empresa: conexao, numeros sem dono e a caixa.
   ====================================================================== */

.numero-conectado {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 17px;
}
.numero-conectado small { font-size: 12px; color: var(--apagado); font-weight: 400; }

/* O pareamento: o codigo grande de um lado, o passo a passo do outro. Quem
   esta com o celular na mao le os tres passos uma vez e nao volta mais. */
.pareamento {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin: 14px 0;
}
.pareamento .qr {
  width: 220px;
  height: 220px;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--painel);
  object-fit: contain;
  padding: 8px;
}
.pareamento .qr.vazio {
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px;
  color: var(--apagado);
}
.pareamento .qr.vazio strong { font-size: 22px; letter-spacing: .08em; color: var(--texto); }
.pareamento .passos { margin: 0; padding-left: 20px; line-height: 1.9; max-width: 320px; }

.endereco {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(17, 24, 39, .05);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
}

.dica.atencao {
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--alerta);
  background: rgba(224, 52, 43, .05);
}

/* Interruptor de linha: caixa a esquerda, explicacao a direita. */
.linha-interruptor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  cursor: pointer;
}
.linha-interruptor input { width: auto; margin-top: 2px; }
.linha-interruptor small { display: block; color: var(--apagado); font-weight: 400; }

/* Numeros que nao batem com cliente nenhum. */
.lista-avulsos { display: grid; gap: 10px; margin-top: 12px; }
.avulso {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: rgba(255, 176, 32, .05);
}
.avulso strong { display: block; }
.avulso small { color: var(--apagado); }
.avulso p { margin: 6px 0 0; }
.avulso-acoes { display: flex; gap: 8px; align-items: center; flex: none; }
.avulso-acoes select { min-width: 160px; }

/* A janela de mandar para aprovacao. */
.janela-zap {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 22px;
}
.janela-zap::backdrop { background: rgba(16, 24, 40, .45); }
.janela-zap h2 { margin: 0 0 6px; }
.acoes-empilhadas { display: grid; gap: 8px; margin: 16px 0 10px; }
.acoes-empilhadas button { width: 100%; }
.link-pronto {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: rgba(17, 24, 39, .03);
}
.link-pronto .acoes { margin-top: 10px; }
.link-pronto small { display: block; margin-top: 8px; color: var(--apagado); }
a.botao {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--destaque);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

/* A bolha da conversa: o texto, e embaixo quem escreveu. O nome e o que
   responde a pergunta do dono, entao ele nao pode ser um cinza apagado. */
.bolha-texto { white-space: pre-wrap; word-break: break-word; }
.bolha-rodape {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--apagado);
}
#linha-tempo > div { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }


/* ======================================================================
   Listas de tarefas por cliente.
   ====================================================================== */

.grade-listas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.cartao-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--painel);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.cartao-lista:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.cartao-lista.com-atraso { border-left: 3px solid var(--alerta); }
.cartao-lista .cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-lista .cabeca strong { font-size: 15px; }
.cartao-lista .numeros { display: flex; gap: 18px; }
.cartao-lista .numero { display: flex; flex-direction: column; line-height: 1.1; }
.cartao-lista .numero b { font-size: 21px; font-weight: 700; }
.cartao-lista .numero small { font-size: 11px; color: var(--apagado); }
.cartao-lista .rodape { font-size: 11.5px; color: var(--apagado); }

/* Escrever e apertar enter. Formulário de seis campos por linha não é usado. */
.nova-tarefa { display: flex; gap: 8px; padding: 12px; margin-top: 14px; }
.nova-tarefa input { flex: 1; }

.lista-tarefas { padding: 4px; margin-top: 12px; }
.tarefa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--raio-p);
  transition: background var(--rapido) var(--curva);
}
.tarefa + .tarefa { border-top: 1px solid var(--linha); }
.tarefa:hover { background: rgba(17, 24, 39, .025); }
.tarefa[draggable] { cursor: grab; }
.tarefa.arrastando { opacity: .4; background: rgba(255, 90, 31, .06); }

.tarefa .marcador {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--painel);
  cursor: pointer;
  color: #fff;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.tarefa .marcador:hover { border-color: var(--destaque); }
.tarefa.feita .marcador { background: var(--ok); border-color: var(--ok); }
.tarefa .marcador svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

.tarefa .corpo { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tarefa .titulo { word-break: break-word; }
.tarefa.feita .titulo { text-decoration: line-through; color: var(--apagado); }
.tarefa .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; }
.tarefa .pedaco { color: var(--apagado); }
.tarefa .pedaco.ruim { color: var(--alerta); font-weight: 600; }
.tarefa.atrasada .titulo { font-weight: 600; }
.tarefa .ajustar { opacity: 0; transition: opacity var(--rapido) var(--curva); }
.tarefa:hover .ajustar, .tarefa:focus-within .ajustar { opacity: 1; }

.feitas { margin-top: 14px; padding: 12px 16px; }
.feitas summary { cursor: pointer; font-weight: 600; color: var(--apagado); }
.feitas .lista-tarefas { margin-top: 8px; }

/* Quem enxerga a lista, no alto: a resposta de "isso é só meu?" sem clicar. */
.quem-ve { display: flex; align-items: center; }
.avatar-mini {
  width: 26px;
  height: 26px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #64748b, #334155);
}
.avatar-mini.mais { background: #cbd5e1; color: #334155; }

.pessoas-lista { display: grid; gap: 6px; margin: 14px 0; }
.acoes-compartilhar { display: flex; gap: 8px; margin-top: 12px; }
.acoes-compartilhar select { flex: 1; }

/* ======================================================================
   Produção por cliente: a esteira vista de fora, e a de um cliente só.
   ====================================================================== */

.grade-producao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.cartao-producao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--painel);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.cartao-producao:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.cartao-producao.com-falha { border-left: 3px solid var(--alerta); }
.cartao-producao .cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-producao .cabeca strong { font-size: 15px; }

/* A barra é proporcional dentro do próprio cliente: mostra a distribuição da
   esteira dele, não o tamanho dele em relação aos outros. */
.barra-fases { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--fundo-alto); }
.barra-fases .fatia { display: block; }
.numeros-fase { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--apagado); }
.numero-fase { display: inline-flex; align-items: center; gap: 5px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.vazio-producao { font-size: 12px; color: var(--apagado); font-style: italic; }

/* As quatro fases da esteira sao uma RAMPA de tom, nao quatro cores: do
   ambar claro no comeco ao ferrugem no fim. A cor passa a dizer o progresso,
   e nao so separar as caixas — o que uma paleta de matizes nunca disse. */
.fase-producao { background: var(--serie-1); }
.fase-cliente { background: var(--serie-2); }
.fase-pronto { background: var(--serie-3); }
.fase-publicado { background: var(--serie-4); }

/* A esteira de um cliente: as quatro fases lado a lado, na ordem do fluxo. */
.esteira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.etapa {
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--painel);
  padding: 12px;
  box-shadow: var(--elev-1);
}
.etapa.vazia { background: var(--painel-2); box-shadow: none; }
.etapa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--apagado);
}
.etapa-topo small {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto);
  background: var(--fundo-alto);
  border-radius: 999px;
  padding: 1px 8px;
}
/* A cor da fase marca a coluna sem pintar o fundo inteiro. */
.etapa.fase-producao, .etapa.fase-cliente, .etapa.fase-pronto, .etapa.fase-publicado { background: var(--painel); }
.etapa.fase-producao { border-top: 3px solid var(--serie-1); }
.etapa.fase-cliente { border-top: 3px solid var(--serie-2); }
.etapa.fase-pronto { border-top: 3px solid var(--serie-3); }
.etapa.fase-publicado { border-top: 3px solid var(--serie-4); }
.etapa.vazia { border-top-color: var(--linha-forte); }

.etapa-pecas { display: grid; gap: 8px; }
.peca {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px;
  text-align: left;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--painel);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.peca:hover { border-color: var(--linha-forte); background: rgba(17, 24, 39, .02); }
.peca-titulo { font-weight: 600; word-break: break-word; }
.peca-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; }
.peca-meta .pedaco { color: var(--apagado); }
.vazio-etapa { margin: 0; font-size: 12px; color: var(--apagado); font-style: italic; }

/* ======================================================================
   Dentro do post: a seta de avançar e o arrasto entre as fases.
   ====================================================================== */

/* A seta de avançar: no alto do post, e em cada peça da esteira. */
.avancar-etapa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--raio-p);
  background: var(--destaque);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: filter var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.avancar-etapa:hover { filter: brightness(1.06); }
.avancar-etapa:active { transform: scale(.97); }
.avancar-etapa .seta { transition: transform var(--medio) var(--curva); }
.avancar-etapa:hover .seta { transform: translateX(3px); }

.peca { position: relative; }
.peca[draggable] { cursor: grab; }
.peca.arrastando { opacity: .4; }
.seta-etapa {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--painel);
  color: var(--apagado);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--rapido) var(--curva), color var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva);
}
.peca:hover .seta-etapa, .peca:focus-within .seta-etapa { opacity: 1; }
.seta-etapa:hover { color: var(--destaque); border-color: var(--destaque); }

.etapa.alvo {
  background: rgba(255, 90, 31, .06);
  border-color: var(--destaque);
  box-shadow: inset 0 0 0 1px var(--destaque);
}

/* Post sem arte: dizer o que falta, em vez de "Sem arte." solto no meio.
   O nome e `post-sem-arte` porque `.sem-arte` ja era o quadradinho vazio da
   pastilha do calendario — e esta regra, sem escopo, vazava para dentro
   dele. */
.post-sem-arte {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-m);
  background: var(--painel-2);
}
.post-sem-arte span { font-size: 12.5px; color: var(--apagado); max-width: 280px; }

/* O quadro por etapa segue as quatro fases da visão por cliente: a cor no
   topo da coluna é a mesma, para as duas telas contarem a mesma história. */
.kanban-coluna.fase-producao, .kanban-coluna.fase-cliente,
.kanban-coluna.fase-pronto, .kanban-coluna.fase-publicado { border-top: 3px solid; }
.kanban-coluna.fase-producao { border-top-color: var(--serie-1); background: var(--painel); }
.kanban-coluna.fase-cliente { border-top-color: var(--serie-2); background: var(--painel); }
.kanban-coluna.fase-pronto { border-top-color: var(--serie-3); background: var(--painel); }
.kanban-coluna.fase-publicado { border-top-color: var(--serie-4); background: var(--painel); }
.kanban-card .selo { align-self: flex-start; font-size: 10.5px; }


/* ======================================================================
   Calendário
   ======================================================================

   Desenho pedido pelo dono, a partir de duas referências: a agenda da Apple
   (o ponto colorido por evento, o dia de hoje em destaque) e um calendário
   editorial (fundo branco, número do dia grande e leve, evento como texto —
   hora na cor do estado, título escuro — em vez de caixa pintada).

   O que muda em relação ao que havia:

   - **Sem grade cinza.** Era `gap` sobre fundo cinza, o que desenha o quadro
     inteiro e faz a tela parecer planilha. Agora são filetes claros entre as
     células, e o branco é o dono da tela.
   - **O número do dia cresce.** Era 11px cinza no canto; virou o elemento
     que orienta a leitura, como nas duas referências.
   - **O evento deixa de ser pastilha pintada.** Ponto colorido + hora na cor
     do estado + título escuro. A cor continua dizendo o estado, mas parou de
     brigar com o texto por atenção.
   ====================================================================== */

.calendario {
  gap: 0;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: var(--elev-1);
}

/* Cabeçalho: dias da semana em maiúscula miúda, sem peso. */
.cabecalho-dia {
  background: var(--painel);
  color: #9aa3b2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 14px 14px 10px;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.cabecalho-dia:nth-child(7) { border-right: 0; }

.calendario .dia {
  background: var(--painel);
  min-height: 132px;
  padding: 10px 12px 12px;
  gap: 2px;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  transition: background var(--rapido) var(--curva);
}
/* Última coluna e última linha sem filete: a borda do quadro já fecha. */
.calendario .dia:nth-child(7n) { border-right: 0; }
.calendario .dia:hover { background: #fbfbfc; }

/* O número do dia: grande e leve, como nas referências. */
.calendario .numero {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  color: #1f2937;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* Hoje em destaque, no número e não na célula inteira: pintar a célula
   competia com o que está escrito dentro dela. */
.calendario .dia.hoje { background: var(--painel); box-shadow: none; }
.calendario .dia.hoje .numero { color: var(--destaque); }
.calendario .dia.hoje .numero::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--destaque);
}

/* Dia de outro mês: some o número, fica o fundo. `opacity` no bloco inteiro
   apagava a pastilha junto e deixava o conteúdo ilegível. */
.calendario .dia.fora { background: #fcfcfd; opacity: 1; }
/* O dia de fora do mes e sempre MAIS apagado que o de dentro — por opacidade
   sobre a cor do tema, e nao por um cinza claro cravado. O cinza cravado
   (#cdd3dd) funcionava no claro e se invertia no escuro: ficava mais brilhante
   que o numero normal, e o mes anterior saltava mais que o mes que se esta
   olhando. */
.calendario .dia.fora .numero { color: var(--apagado); opacity: .45; font-weight: 500; }

.calendario .dia.alvo {
  background: rgba(255, 90, 31, .07);
  box-shadow: inset 0 0 0 2px var(--destaque);
}

/* ---- o evento ----
   Ponto colorido, hora na cor do estado, título escuro. Sem caixa, sem
   borda: a linha de texto é o evento. */
.calendario .pastilha, .pastilha {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 5px 3px 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--rapido) var(--curva);
}
.pastilha::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.pastilha:hover { background: #f4f5f7; }
.pastilha.arrastando { opacity: .4; }

.pastilha .hora {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: currentColor;
  font-variant-numeric: tabular-nums;
}
.pastilha .texto {
  color: #1f2937;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A cor do estado vive no `color` da pastilha: o ponto e a hora herdam dela,
   e o título continua escuro. Uma propriedade, três usos. */
.pastilha.cinza { color: #64748b; }
.pastilha.azul { color: #4f46e5; }
.pastilha.amarelo { color: #b45309; }
.pastilha.verde { color: var(--serie-2); }
.pastilha.verde-escuro { color: #05603a; }
.pastilha.vermelho { color: #dc2626; }

/* A capa do post, quando há: miniatura pequena, no lugar do ponto. */
.pastilha img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.pastilha img + .hora { margin-left: 0; }
.pastilha:has(img)::before { display: none; }
/* O quadradinho vazio (post sem capa) some: o ponto colorido já cumpre o
   papel, e dois marcadores no começo da linha viram sujeira. */
.pastilha .sem-arte { display: none; }

.pastilha .trava { color: currentColor; opacity: .55; margin-left: auto; flex: 0 0 auto; }
.pastilha .alerta {
  margin-left: auto;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--alerta);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---- o "+" do dia ---- */
.dia-mais {
  margin-top: 2px;
  border-radius: 6px;
  border: 1px dashed #dfe3ea;
  color: #9aa3b2;
  background: transparent;
  font-size: 13px;
}
.calendario .dia:hover .dia-mais { opacity: 1; }
.dia-mais:hover { background: var(--destaque); border-color: var(--destaque); color: #fff; }

/* ---- feriado ---- */
.calendario .dia.feriado { background: #fffbfa; }
.calendario .dia.feriado:hover { background: #fff7f5; }
.marca-feriado {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #c2534c;
}

/* Tela estreita: o mês rola na horizontal em vez de virar sete faixas de
   40px onde nenhuma linha cabe. */
@media (max-width: 760px) {
  .calendario { grid-template-columns: repeat(7, minmax(112px, 1fr)); overflow-x: auto; }
  .calendario .dia { min-height: 104px; padding: 8px 9px 10px; }
  .calendario .numero { font-size: 15px; }
}

/* ---- a barra do calendário ----

   Era uma `.barra` genérica: dez controles em fila, sem hierarquia, com
   "mes / semana / lista" em minúscula e "Toda rede" no singular. Agora são
   três grupos com papéis diferentes — onde estou, como vejo, o que mostro —
   e em tela estreita eles quebram em linhas em vez de espremer. */
.barra-calendario {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 16px;
}

.navega-mes { display: flex; align-items: center; gap: 6px; }
.navega-mes .so-icone {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--painel);
  color: var(--apagado);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.navega-mes .so-icone:hover { border-color: var(--linha-forte); color: var(--texto); }
.titulo-mes {
  margin: 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  min-width: 150px;
}
.navega-mes .discreto { font-size: 12.5px; padding: 6px 12px; }

/* Mês / Semana: um par, desenhado como um par. */
.modos {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--fundo-alto);
}
.modo {
  padding: 6px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--apagado);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
/* Sem esta linha, o segmento inativo herda a sombra laranja do `button` do
   `estilo.css` — fundo transparente com sombra embaixo, que é exatamente o
   desenho de uma pastilha solta flutuando. É o que fazia o filtro parecer
   quatro adesivos dentro de uma caixa cinza. */
.modo { box-shadow: none; }
.modo:hover { color: var(--texto); }
.modo.ativo { background: var(--painel); color: var(--texto); box-shadow: var(--elev-1); }

.filtros-calendario {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.filtros-calendario select {
  height: 34px;
  padding: 0 30px 0 11px;
  font-size: 12.5px;
  border-radius: 8px;
  /* Sem isto vale o `width: 100%` que todo campo do sistema herda, e os tres
     filtros viram tres linhas de largura inteira, empilhadas — com a barra do
     mes sozinha do lado esquerdo. Eles cabem lado a lado. */
  width: auto;
  min-width: 150px;
  max-width: 220px;
}
.filtros-calendario .caixinha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  margin: 0;
  font-size: 12.5px;
  color: var(--apagado);
  cursor: pointer;
  white-space: nowrap;
}
.filtros-calendario .caixinha input { width: auto; margin: 0; }
.filtros-calendario .caixinha:hover { color: var(--texto); }

@media (max-width: 900px) {
  .filtros-calendario { margin-left: 0; width: 100%; }
  .filtros-calendario select { flex: 1; min-width: 130px; }
}

/* ======================================================================
   Início — os quatro blocos.

   O gráfico é HTML puro: cada barra é uma <span> com altura em porcentagem.
   Puxar uma biblioteca de gráfico para desenhar seis barras custaria mais
   do que a tela inteira pesa hoje.
   ====================================================================== */

.bloco-inicio { margin-top: 16px; padding: 20px 22px 18px; }
.cabeca-bloco {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.cabeca-bloco h2 { margin: 0; font-size: 15px; }

.numeros-bloco { display: flex; flex-wrap: wrap; gap: 26px; margin-left: auto; }
.numero-grande {
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.numero-grande small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--apagado);
  margin-top: 3px;
}
.numero-grande.verde { color: var(--serie-2); }
.numero-grande.vermelho { color: var(--alerta); }

/* ---- o gráfico ---- */
.grafico {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
  padding-top: 6px;
}
.grafico .coluna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
}
.grafico .pilha {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
/* Barra de valor zero vira um traço: sumir faria o mês parecer inexistente,
   e "faturei zero em agosto" é informação, não ausência dela. */
.grafico .barra {
  flex: 1;
  max-width: 22px;
  min-height: 2px;
  border-radius: 5px 5px 2px 2px;
  transition: filter var(--rapido) var(--curva);
}
.grafico .barra:hover { filter: brightness(1.08); }
.grafico .barra.azul { background: var(--serie-2); }
.grafico .barra.verde { background: var(--serie-1); }
.grafico .barra.roxo { background: var(--serie-4); }
.grafico .marca-mes { font-size: 10.5px; color: var(--apagado); text-transform: capitalize; }

.legenda-grafico {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--apagado);
}
.legenda-grafico span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-grafico i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.legenda-grafico i.azul { background: var(--serie-2); }
.legenda-grafico i.verde { background: var(--serie-1); }
.legenda-grafico i.roxo { background: var(--serie-4); }

/* ---- quem está produzindo ---- */
.linhas-pessoas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.pessoa-carga {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--linha);
  border-radius: 999px;
}
.pessoa-carga .dados { display: flex; flex-direction: column; line-height: 1.25; }
.pessoa-carga .dados strong { font-size: 12.5px; }
.pessoa-carga .dados small { font-size: 10.5px; color: var(--apagado); }

.vencido { color: var(--alerta); font-weight: 600; }

@media (max-width: 760px) {
  .numeros-bloco { margin-left: 0; gap: 18px; }
  .numero-grande { font-size: 19px; }
}

/* ======================================================================
   Início 2026 — a faixa de números e a malha de doze colunas.

   Vem depois da seção acima de propósito: reaproveita `.bloco-inicio`,
   `.numeros-bloco` e `.grafico`, e só redesenha o que o arranjo novo mudou.

   A ideia do arranjo: a primeira olhada responde em cinco números, e o resto
   da tela ocupa a largura que o conteúdo pede — gráfico de seis meses não
   cabe em coluna estreita, e três contagens de etapa não precisam de meia
   tela. Nada aqui muda o que a tela busca: a faixa de cima é feita dos mesmos
   dados dos blocos de baixo.
   ====================================================================== */

/* ---- cabeçalho da tela ---- */
.cabeca-inicio {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 20px;
}
.cabeca-inicio h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.cabeca-inicio > div:first-child p {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--apagado);
}
.cabeca-inicio .modos { margin-left: auto; border-radius: 999px; }
.cabeca-inicio .modo { padding: 8px 18px; border-radius: 999px; }
.cabeca-inicio .modo.ativo {
  color: var(--destaque);
  box-shadow: var(--elev-1), inset 0 0 0 1px rgba(255, 90, 31, .28);
}

/* ---- a faixa de cinco ---- */
/* `auto-fit` em vez de cinco colunas fixas: quem não pode ver dinheiro recebe
   três cartões, e três cartões de um quinto da tela ficariam órfãos. */
.tiras-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.kpi:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.kpi-topo { display: flex; align-items: center; gap: 10px; }
.kpi-topo h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--apagado);
  letter-spacing: 0;
}
.marca-kpi {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-m);
  background: var(--fundo-alto);
  color: var(--apagado);
}
.marca-kpi svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-valor {
  margin-top: auto;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.kpi-rodape {
  margin: 0;
  font-size: 11.5px;
  color: var(--apagado);
}
.kpi-rodape .delta { font-weight: 650; font-variant-numeric: tabular-nums; }
/* Subir deixou de ser verde: a paleta e laranja e preto. A direcao nao se
   perde porque a queda continua vermelha — o par que importa e subir/cair,
   e ele sobrevive com laranja de um lado e vermelho do outro. */
.kpi-rodape .delta.sobe { color: var(--serie-2); }
.kpi-rodape .delta.desce { color: var(--alerta); }
.kpi-rodape .delta.igual { color: var(--apagado); }

/* A cor mora no ícone, não no cartão: cinco cartões coloridos competem entre
   si e nenhum vence. */
.kpi.laranja .marca-kpi { background: rgba(255, 90, 31, .1); color: #c2410c; }
.kpi.verde .marca-kpi { background: rgba(255, 192, 120, .12); color: var(--serie-1); }
.kpi.roxo .marca-kpi { background: rgba(214, 69, 15, .14); color: var(--serie-4); }
.kpi.vermelho .marca-kpi { background: rgba(224, 52, 43, .1); color: #b3241c; }

/* ---- a malha ---- */
.malha-inicio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: start;
}
.malha-inicio > .larga { grid-column: span 8; }
.malha-inicio > .estreita { grid-column: span 4; }
.malha-inicio > .inteira { grid-column: 1 / -1; }
/* A tabela da produção é o bloco mais alto da linha: os dois blocos estreitos
   ao lado dela empilham dentro da mesma altura em vez de deixar buraco. */
.malha-inicio > .larga.alta { grid-row: span 2; }
.malha-inicio > .bloco-inicio { margin-top: 0; }

/* ---- cabeça de cada bloco ---- */
.titulo-bloco h2 { margin: 0; }
.titulo-bloco p {
  margin: 4px 0 0;
  max-width: 46ch;
  font-size: 12px;
  color: var(--apagado);
  line-height: 1.45;
}
.numeros-bloco.compactos { margin: 0 0 14px; gap: 20px; }
.numeros-bloco.compactos .numero-grande { font-size: 20px; }

/* ---- o gráfico, agora com eixo ---- */
.area-grafico { display: flex; gap: 10px; }
.area-grafico .eixo-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
  padding-bottom: 19px;
  font-size: 10px;
  color: #98a2b3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.area-grafico .grafico { flex: 1; position: relative; height: 150px; }
.area-grafico.alta .grafico { height: 196px; }
.linhas-guia {
  position: absolute;
  inset: 6px 0 19px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.linhas-guia i { height: 1px; background: var(--linha); opacity: .7; }
.grafico .barra.laranja { background: var(--destaque); }
.grafico .coluna:hover .barra { filter: brightness(1.06); }
.legenda-grafico i.laranja { background: var(--destaque); }

/* ---- a rosca das etapas ---- */
.corpo-rosca {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.rosca { position: relative; flex: 0 0 auto; width: 118px; height: 118px; }
.rosca svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rosca circle { fill: none; stroke-width: 11; stroke-linecap: butt; }
.rosca .trilho { stroke: var(--fundo-alto); }
.rosca .arco { transition: stroke-dasharray var(--lento) var(--curva); }
.rosca .arco.roxo { stroke: var(--serie-4); }
.rosca .arco.laranja { stroke: var(--destaque); }
.rosca .arco.vermelho { stroke: var(--alerta); }
.rosca .miolo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.rosca .miolo b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.rosca .miolo small { font-size: 10.5px; color: var(--apagado); }

.lista-etapas { flex: 1; min-width: 130px; margin: 0; padding: 0; list-style: none; }
.lista-etapas li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--apagado);
  border-bottom: 1px solid var(--linha);
}
.lista-etapas li:last-child { border-bottom: 0; }
.lista-etapas i { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; }
.lista-etapas i.roxo { background: var(--serie-4); }
.lista-etapas i.laranja { background: var(--destaque); }
.lista-etapas i.vermelho { background: var(--alerta); }
.lista-etapas b { margin-left: auto; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ---- tabela dentro dos blocos do Início ---- */
.tabela-limpa { margin-top: 4px; }
.tabela-limpa th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #98a2b3;
}
.tabela-limpa td { padding-top: 11px; padding-bottom: 11px; font-size: 12.5px; }
.tabela-limpa td strong { font-weight: 600; }
.tabela-limpa tbody tr { transition: background var(--rapido) var(--curva); }

/* ---- o arranjo em telas menores ---- */
/* A malha desmancha em um passo: abaixo de 1180px nenhum bloco tem largura
   suficiente para dividir a linha, e todos passam a ocupá-la inteira. */
@media (max-width: 1180px) {
  .malha-inicio > .larga,
  .malha-inicio > .estreita { grid-column: 1 / -1; }
  .malha-inicio > .larga.alta { grid-row: auto; }
}
@media (max-width: 760px) {
  .cabeca-inicio h2 { font-size: 23px; }
  .cabeca-inicio .modos { margin-left: 0; }
  .tiras-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-valor { font-size: 21px; }
  .area-grafico .grafico, .area-grafico.alta .grafico { height: 140px; }
}
@media (max-width: 420px) {
  .tiras-kpi { grid-template-columns: 1fr; }
}

/* O `.empurra` de `estilo.css` só valia dentro de `.barra`; na cabeça de um
   bloco ele precisa valer também, senão o "Ver todos" cai debaixo do título. */
.cabeca-bloco { flex-wrap: nowrap; align-items: flex-start; }
.cabeca-bloco .titulo-bloco { min-width: 0; }
.cabeca-bloco .empurra { flex: 1 1 auto; }
.cabeca-bloco .selo { flex: 0 0 auto; }
/* Ação de cabeçalho é link, não botão de formulário: ela não é a ação
   principal do bloco, só o caminho para a tela inteira. */
.cabeca-bloco > .discreto {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--destaque);
  white-space: nowrap;
}
.cabeca-bloco > .discreto:hover { color: var(--destaque-2); background: none; text-decoration: underline; }
.cabeca-bloco > .discreto::after { content: ' →'; }

@media (max-width: 560px) {
  .cabeca-bloco { flex-wrap: wrap; }
  .cabeca-bloco .empurra { display: none; }
}

/* Número que mora na cabeça do bloco é apoio, não manchete: o "recorrente
   contratado" em 22px competia com o título e era lido como o faturamento
   do mês. */
.cabeca-bloco .numeros-bloco .numero-grande { font-size: 17px; }
.cabeca-bloco .numeros-bloco { gap: 18px; }

/* Bloco vazio não precisa da altura de um bloco cheio. */
.bloco-inicio > .vazio { margin: 10px 0 2px; }

/* Tabela estreita não encolhe a coluna até a palavra quebrar letra por letra:
   ela mantém a largura mínima e o cartão rola de lado (o `overflow-x: auto`
   do `.cartao` já estava lá). */
@media (max-width: 860px) {
  .tabela-limpa { min-width: 560px; }
}

/* ======================================================================
   A barra de cima saiu.

   A faixa branca que ficava no topo do conteúdo foi tirada a pedido do dono.
   A busca global e os três avisos (publicação esperando, caixa de entrada,
   sino) desceram para o rodapé da lateral e, num segundo pedido, saíram
   também: hoje a lateral tem marca, menu, perfil, Configurações e Sair.

   Onde cada caminho ficou: a fila de publicação está em Produção > Fila, a
   caixa de entrada é o módulo WhatsApp (com o mesmo contador, no botão do
   menu), e os Avisos, que só o sino abria, continuam em `#painel/avisos`.
   O botão do menu do celular flutua no canto, onde ele já estava.
   ====================================================================== */

/* Sem a faixa no topo, o conteúdo precisa do respiro que ela dava. */
body.com-lateral main { padding-top: 30px; }
body:has(.sub-modulo:not([hidden])) main { padding-top: 18px; }

/* ---- o botão do menu, flutuando ---- */
/* No desktop a lateral está sempre aberta e o botão não aparece — é a mesma
   regra de antes (`button.abrir-menu { display: none }`), só o lugar mudou. */
@media (max-width: 1100px) {
  button.abrir-menu {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 45;
    width: 40px;
    height: 40px;
    background: var(--painel);
    border: 1px solid var(--linha);
    box-shadow: var(--elev-2);
    color: var(--texto);
  }
  /* O miolo desce um pouco para o botão não pousar em cima do título. */
  body.com-lateral main { padding-top: 62px; }
  body:has(.sub-modulo:not([hidden])) main { padding-top: 18px; }
  body.com-lateral .sub-modulo { padding-top: 60px; }
}

/* Com a gaveta aberta o botao sai de cima da marca e encosta na borda dela:
   continua alcancavel (e fecha a gaveta) sem tapar o logo. */
@media (max-width: 1100px) {
  button.abrir-menu { transition: left var(--medio) var(--curva); }
  body.menu-aberto button.abrir-menu { left: 262px; }
}

/* `.avatar` declara `display: grid`, que vence o `[hidden]` do navegador — o
   avatar guardado para o `app.js` escrever aparecia como um "VA" solto no
   canto da tela. Aqui o `hidden` volta a valer. */
[hidden] { display: none !important; }

/* ---- o filtro do Início: quatro botões e um calendário ---- */
/* O quarto botão não filtra sozinho — ele abre as duas datas. O painel fica
   embaixo dos botões, alinhado à direita com eles, e não flutua: um menu
   flutuante com `input type=date` dentro briga com o calendário do navegador,
   que também flutua. */
.filtro-periodo { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.linha-filtro { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* O grupo dos três: uma cápsula de vidro, na mesma língua da lateral, em vez
   do cinza sólido que virava um borrão em cima da arte do fundo. O sulco por
   dentro é o que faz o segmento aberto parecer estar POR CIMA dos outros. */
.cabeca-inicio .modos {
  padding: 4px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--linha);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cabeca-inicio .modo {
  padding: 7px 17px;
  font-size: 12.5px;
  border-radius: 999px;
}
.cabeca-inicio .modo:hover:not(.ativo) { background: rgba(255, 255, 255, .7); }
.cabeca-inicio .modo.ativo {
  background: var(--painel);
  color: var(--destaque);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .07), 0 0 0 1px rgba(255, 90, 31, .16);
}

/* O botão do calendário mora fora da cápsula, e o desenho diz isso: mesma
   altura e mesmo raio, para a linha ficar alinhada, mas contorno próprio. */
.botao-calendario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--linha);
  color: var(--apagado);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva);
}
.botao-calendario svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.botao-calendario:hover { background: rgba(255, 255, 255, .85); color: var(--texto); filter: none; }
.botao-calendario.ativo {
  background: var(--painel);
  color: var(--destaque);
  border-color: rgba(255, 90, 31, .32);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .07);
  font-variant-numeric: tabular-nums;
}

.calendario-periodo {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: sobe var(--rapido) var(--curva) both;
}
.calendario-periodo .tracinho { padding-bottom: 8px; color: var(--texto-fraco, #98a2b3); }
.calendario-periodo #aplicar-periodo { margin-left: 4px; }
.calendario-periodo label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--apagado);
}
.calendario-periodo input {
  height: 34px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 9px;
}
.calendario-periodo button { height: 34px; padding: 0 16px; font-size: 12.5px; }
.calendario-periodo .erro { flex-basis: 100%; margin: 0; font-size: 11.5px; }
.calendario-periodo .erro:empty { display: none; }

@media (max-width: 760px) {
  .filtro-periodo { margin-left: 0; align-items: stretch; width: 100%; }
  .filtro-periodo .modos { justify-content: flex-start; }
  .calendario-periodo { flex-wrap: wrap; }
  .calendario-periodo label { flex: 1 1 130px; }
}

/* Barra de valor zero continua ali — "faturei zero naquele dia" é informação,
   não ausência dela — mas apagada: numa janela de 31 dias, trinta traços
   sólidos na linha de base viravam um pontilhado que competia com as barras
   que têm valor. */
.grafico .barra.vazia { opacity: .3; }

/* ======================================================================
   O fundo do sistema.

   A imagem é fixa e cobre a janela: ela não rola com o conteúdo, senão a
   marca d'água passearia atrás dos cartões e chamaria atenção justamente
   quando a pessoa está lendo.

   A opacidade não está na imagem nem num `opacity`: é um véu da própria cor
   de fundo por cima dela, no mesmo `background`. Isso evita duas armadilhas
   — `opacity` num elemento de fundo cria camada de composição e leva os
   filhos com ele, e um `::before` com z-index negativo fica ATRÁS do fundo do
   body, ou seja, invisível.

   Só o painel interno (`body.com-lateral`) recebe o fundo. O portal do cliente
   e a tela de entrada são compartilhados entre as agências e levam a marca de
   cada uma: a arte do 418 ali seria a marca de uma aparecendo na casa da
   outra.

   Para clarear ou escurecer, mexa nos dois `.55` do véu: mais alto apaga mais
   a imagem, mais baixo a deixa aparecer.

   A arte é JPEG, não o PNG original: 39 KB contra 1,2 MB, para a mesma coisa
   na tela. Fundo de gradiente suave é o caso em que JPEG ganha de longe, e
   1,2 MB em toda abertura do sistema é caro para um enfeite. O PNG original
   continua em `dados/fundo saas.png`.
   ====================================================================== */

body.com-lateral {
  background-image:
    linear-gradient(rgba(246, 247, 249, .55), rgba(246, 247, 249, .55)),
    url("fundo-saas.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

/* ---- a lateral de vidro ---- */
/* Vidro é desfoque com um pouco de cor por cima, e uma borda clara na quina
   para a luz parecer bater nela. O desfoque é o que mantém o texto legível:
   sem ele, o que está atrás atravessa e briga com o nome de cada seção.

   O fundo em degradê não é enfeite: a arte do fundo é mais quente embaixo, e a
   camada mais opaca na parte de baixo é o que impede o "Configurações" e o
   "Sair" de ficarem sobre a mancha laranja.

   Quem não tem `backdrop-filter` (Firefox com a opção desligada, navegador
   antigo) cai no `@supports not` mais abaixo e recebe a lateral sólida: vidro
   sem desfoque é só texto sobre textura. */
body.com-lateral aside.lateral {
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .56));
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  border-right: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 12px 0 44px rgba(17, 24, 39, .06), inset 1px 0 0 rgba(255, 255, 255, .55);
}

/* A barra de rolagem horizontal que aparecia no menu era o empurrãozinho de
   2px do hover: um `transform` conta para a área rolável, então passar o mouse
   num item alargava o menu em 2px e o navegador mostrava a barra. O desfoque
   do vidro tornou isso visível — antes era uma barra cinza sobre fundo cinza.
   O empurrão fica (ele diz que o item respondeu); o que sai é a barra. */
body.com-lateral nav.menu { overflow-x: hidden; }

/* Botão sólido dentro de vidro parece adesivo colado. O perfil, as engrenagens
   e o Sair viram vidro também, um pouco mais opacos que a lateral para o texto
   não competir com a arte do fundo. */
body.com-lateral .rodape-lateral .discreto {
  background: rgba(255, 255, 255, .5);
  border-color: rgba(255, 255, 255, .7);
}
body.com-lateral .rodape-lateral .discreto:hover {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(255, 255, 255, .9);
}
body.com-lateral .lateral .rodape-lateral { border-top-color: rgba(255, 255, 255, .6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.com-lateral aside.lateral {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(252, 252, 253, .96));
  }
  body.com-lateral .rodape-lateral .discreto { background: var(--painel); border-color: var(--linha); }
}
/* Sobre vidro, o item aberto precisa de um pouco mais de tinta para continuar
   parecendo aberto, e o texto de um pouco mais de peso para não sumir. */
body.com-lateral nav.menu button { color: #3f4a5a; }
body.com-lateral nav.menu button.ativa { background: rgba(255, 90, 31, .14); }
body.com-lateral nav.menu button:hover:not(.ativa) { background: rgba(255, 255, 255, .7); }
body.com-lateral .rodape-lateral button:hover { background: rgba(255, 255, 255, .7); }

/* ---- a marca ---- */
/* A logo nova é quadrada (OLLI em cima, VER embaixo), e não uma tarja
   horizontal: em 32px de altura ela viraria um borrão. Ganha altura e o
   centro da lateral, que é onde marca quadrada se acomoda. */
.lateral .topo-marca { justify-content: center; padding: 10px 10px 16px; }
.lateral .logo { max-height: 64px; }
@media (max-width: 1100px) {
  .lateral .logo { max-height: 56px; }
}

@media print {
  body.com-lateral { background-image: none; }
}

/* Na gaveta do celular o vidro fica quase opaco. Ali a lateral não está sobre
   a arte do fundo, e sim sobre o conteúdo e o véu escuro que escurece a tela:
   o desfoque puxava esse cinza para dentro do menu e deixava tudo embaçado. */
@media (max-width: 1100px) {
  body.com-lateral aside.lateral {
    background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .97));
  }
}

/* ======================================================================
   Cabeça de tela, caixa de filtros e lista.

   Escrito para a tela de Clientes, mas sem nada de Clientes dentro: é o
   arranjo de "título + ação principal, depois a pergunta, depois a
   resposta". Qualquer lista do sistema pode usar as mesmas três peças, e é
   de propósito — dez telas com dez desenhos de barra de filtro foi como o
   sistema chegou até aqui.
   ====================================================================== */

/* ---- cabeça de tela ---- */
.cabeca-tela {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 16px;
}
.cabeca-tela h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.cabeca-tela > div:first-child p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--apagado);
}

/* A ação principal da tela: uma só, e é a única coisa laranja e cheia aqui.
   Quando tudo é botão colorido, nada é a ação principal. */
.botao-principal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--destaque-2), var(--destaque));
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(255, 90, 31, .22);
  transition: transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva),
    filter var(--rapido) var(--curva);
}
.botao-principal svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.botao-principal:hover { filter: brightness(1.04); box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 10px 22px rgba(255, 90, 31, .26); }
.botao-principal:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }

/* ---- caixa de filtros ---- */
/* Os filtros perguntam, a lista responde. Soltos em cima da tabela, os dois
   viravam a mesma coisa; numa caixa de vidro própria, fica claro que ali se
   mexe em algo e embaixo o resultado muda. */
.caixa-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.caixa-filtros .empurra { flex: 1 1 auto; }
.caixa-filtros .conta-linhas {
  font-size: 12px;
  font-weight: 600;
  color: var(--apagado);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 4px;
}

.campo-busca { position: relative; flex: 1 1 220px; max-width: 320px; min-width: 180px; }
.campo-busca svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--apagado);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  pointer-events: none;
}
.campo-busca input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  font-size: 13px;
  border-radius: 999px;
  border-color: var(--linha);
  background: var(--painel);
}

/* Cada filtro é uma pastilha do mesmo tamanho. A seta é desenhada aqui, em
   `background-image`: a nativa encosta na borda e, dentro de uma pastilha
   arredondada, fica torta — além de ser diferente em cada sistema. */
.caixa-filtros select {
  height: 38px;
  min-width: 0;
  width: auto;
  max-width: 200px;
  padding: 0 34px 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--painel);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px 14px;
}
.caixa-filtros select:hover { border-color: var(--linha-forte); }

.caixa-filtros .caixinha {
  height: 38px;
  padding: 0 14px;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--painel);
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.caixa-filtros .caixinha:hover { border-color: var(--linha-forte); color: var(--texto); }
/* Filtro ligado precisa parecer ligado, senão a pessoa esquece que a lista
   está filtrada e acha que perdeu cliente. */
.caixa-filtros .caixinha:has(input:checked) {
  border-color: rgba(255, 90, 31, .35);
  background: #fff0ea;
  color: #c2410c;
}

/* ---- a lista ---- */
#lista table { box-shadow: var(--elev-1); }
#lista th {
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(247, 248, 250, .7);
}
#lista td { padding-top: 14px; padding-bottom: 14px; }
#lista tbody tr:hover { background: rgba(255, 90, 31, .04); }
.tabela-clientes .avatar { width: 34px; height: 34px; font-size: 11.5px; }
.tabela-clientes .cliente-celula .duas-linhas > span:first-child { font-weight: 600; }
/* A lista rola de lado dentro da própria caixa quando a tela é estreita:
   espremer o nome do cliente é perder a âncora da linha. O piso é a soma das
   larguras fixas (280 + 190 + 220 + 170) mais 120 para a coluna de ações —
   sem essa folga, numa tela apertada ela ficava com zero e o botão de WhatsApp
   não tinha onde caber. */
#lista { overflow-x: auto; }
.tabela-clientes { min-width: 980px; }

/* `.botao-linha` e `.vazio-desenhado` já existem (`estilo.css` e `tema.css`).
   Aqui só o que muda com o desenho novo: a pastilha arredondada, para
   combinar com os filtros e os selos, e o vidro no estado vazio. */
.acoes-linha .botao-linha { border-radius: 999px; padding: 5px 12px; background: var(--painel); }
.acoes-linha .botao-linha:hover { border-color: var(--linha-forte); filter: none; }
/* `display: flex` aqui é armadilha: a célula deixa de se comportar como célula
   de tabela e a linha de baixo passa a ser desenhada na altura do conteúdo, o
   que aparece como um risco solto no fim de cada linha. Alinhamento de célula
   se faz com `text-align`. */
.acoes-linha { text-align: right; white-space: nowrap; }

.vazio-desenhado {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 760px) {
  .cabeca-tela h2 { font-size: 20px; }
  .botao-principal { margin-left: 0; }
  .campo-busca { max-width: none; flex-basis: 100%; }
  .caixa-filtros select, .caixa-filtros .caixinha { flex: 1 1 140px; max-width: none; }
  .caixa-filtros .conta-linhas { display: none; }
}

/* ======================================================================
   A lista aberta do filtro.

   O `<select>` fechado é uma pastilha nossa desde a caixa de filtros; a lista
   ABERTA, não: ela é desenhada pelo sistema operacional, com canto reto, fonte
   do sistema e a barra azul de seleção. Nenhum CSS antigo alcança aquilo —
   `option` aceita cor e pouco mais, e nada de raio, espaçamento ou sombra.

   O que alcança é `appearance: base-select`: o navegador passa a desenhar a
   lista como um elemento da página, e `::picker(select)` é essa lista. Fica
   dentro de `@supports` porque é recente (Chromium 135+): onde não existe, o
   filtro continua exatamente como está hoje, com a lista do sistema. Isso não
   é remendo — é a única forma sem JavaScript, e trocar um `<select>` por um
   menu de mentira feito à mão custa teclado, leitor de tela e o comportamento
   que o celular já dá de graça.

   Só a caixa de filtros usa isto por ora. Estender para o resto do sistema é
   trocar o seletor daqui; deixei escopado para a mudança ser vista numa tela
   antes de valer em catorze.
   ====================================================================== */

@supports (appearance: base-select) {
  .caixa-filtros select {
    appearance: base-select;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 14px;
    /* A seta agora é `::picker-icon`, desenhada pelo navegador: a nossa, que
       vinha em `background-image`, sairia junto com ela na tela. */
    background-image: none;
    transition: border-color var(--rapido) var(--curva), box-shadow var(--medio) var(--curva);
  }
  /* O ícone padrão do `base-select` é um triangulinho cheio, que é o desenho de
     1998 ao lado dos chevrons do resto do sistema. A máscara troca a forma e
     deixa a cor viva: é ela que fica laranja com a lista aberta. */
  .caixa-filtros select::picker-icon {
    content: '';
    width: 14px;
    height: 14px;
    background: currentColor;
    color: var(--apagado);
    -webkit-mask: var(--chevron) center / 14px 14px no-repeat;
    mask: var(--chevron) center / 14px 14px no-repeat;
    transition: transform var(--medio) var(--curva), color var(--rapido) var(--curva);
  }
  .caixa-filtros select:open {
    border-color: rgba(255, 90, 31, .35);
    box-shadow: 0 0 0 4px rgba(255, 90, 31, .1);
  }
  .caixa-filtros select:open::picker-icon { transform: rotate(180deg); color: var(--destaque); }

  /* A lista: um cartão, na mesma língua dos outros — vidro, raio de 14 e a
     sombra do terceiro degrau, que é a dos elementos que flutuam. */
  .caixa-filtros select::picker(select) {
    appearance: base-select;
    margin-top: 6px;
    padding: 6px;
    min-width: anchor-size(width);
    max-height: 320px;
    overflow-y: auto;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--linha);
    border-radius: 14px;
    box-shadow: var(--elev-3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Sem isto a lista aparece seca; com, ela sobe 4px como as outras coisas
       que flutuam no sistema. */
    opacity: 0;
    translate: 0 -4px;
    transition: opacity var(--rapido) var(--curva), translate var(--rapido) var(--curva), overlay var(--rapido) allow-discrete,
      display var(--rapido) allow-discrete;
  }
  .caixa-filtros select::picker(select):popover-open { opacity: 1; translate: 0 0; }

  .caixa-filtros select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--texto);
    background: transparent;
    cursor: pointer;
    transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
  }
  /* A barra azul do sistema vira o mesmo realce cinza-claro do resto. */
  .caixa-filtros select option:hover,
  .caixa-filtros select option:focus,
  .caixa-filtros select option:active { background: var(--fundo-alto); outline: none; }
  .caixa-filtros select option:checked { color: var(--destaque); font-weight: 650; background: #fff0ea; }
  /* O tique da opção escolhida: o navegador reserva o espaço dele em toda
     opção, então ele fica invisível nas outras em vez de ausente — sem isso o
     texto dança 18px para o lado quando a escolha muda. */
  .caixa-filtros select option::checkmark {
    content: '';
    order: 1;
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--destaque);
    opacity: 0;
  }
  .caixa-filtros select option:checked::checkmark { opacity: 1; }
}

/* Com quatro colunas de conteúdo numa tela larga, a tabela esticava cada uma e
   o responsável ia parar do outro lado do monitor — ler uma linha virava
   varredura de ponta a ponta, com um vão de 200px entre o nome e o status.
   Duas coisas resolvem: cada coluna com a largura que o conteúdo pede, e a
   tabela fechando onde a última acaba em vez de esticar até a borda. Assim a
   linha inteira se lê de uma olhada, sem varrer o monitor. */
/* `table-layout: fixed` é o que faz isso funcionar. Na disposição automática, a
   largura que se declara numa coluna é só um mínimo, e a sobra da tela é
   distribuída entre TODAS — foi por isso que as colunas continuavam esticando
   com a largura declarada. Na fixa, cada largura vale ao pé da letra e o que
   resta vai para a única coluna `auto`: a das ações, no fim. */
.tabela-clientes {
  table-layout: fixed;
  width: 100%;
}
/* As larguras são porcentagens, não pixels: a soma fecha 100% em qualquer
   tela, então a linha vai do nome, encostado à esquerda, até o responsável no
   canto direito — sem vão sobrando no fim e sem coluna esticada no meio.
   Cada fatia foi conferida contra o conteúdo mais comprido que pode receber:
   em 980px, a mais estreita da tela, o status tem 176px para uma pastilha de
   "Em implementação", que ocupa 126. */
.tabela-clientes th:nth-child(1) { width: 32%; }
.tabela-clientes th:nth-child(2) { width: 18%; }
.tabela-clientes th:nth-child(3) { width: 22%; }
.tabela-clientes th:nth-child(4) { width: 18%; }
/* A das ações é a menor: na maioria das linhas está vazia. */
.tabela-clientes th:last-child { width: 10%; }
/* Com largura fixa, texto comprido precisa saber o que fazer: o nome do cliente
   corta com reticências (é a âncora da linha, e quebrá-lo em duas atrapalha a
   varredura), e o resto quebra a linha em vez de vazar por cima da coluna
   vizinha. */
.tabela-clientes td { overflow-wrap: anywhere; }
/* Pastilha não quebra e não corta: ou cabe inteira, ou a coluna está estreita
   e o número acima é que tem de mudar. */
.tabela-clientes .selo, .tabela-clientes .alerta-fraco { white-space: nowrap; }
/* O nome do cliente usa a coluna inteira. O teto de 190px vinha de quando a
   tabela tinha sete colunas e o nome disputava espaço com elas; hoje ele é a
   coluna mais larga, e cortar "GUH DOS SISTEMAS" em 190px seria cortar o que
   não precisa. Reticências só quando o nome passa da coluna. */
.tabela-clientes .cliente-celula .duas-linhas > span { max-width: 100%; }

/* A rolagem horizontal que aparecia no cartão da carteira era o rótulo da
   coluna: numa caixa flexível, o item não encolhe abaixo do próprio conteúdo,
   então cada "01/09" impunha 27px de largura à sua coluna. Vinte e sete dias
   davam 553px de conteúdo num cartão de 384px, e o cartão (que rola de lado de
   propósito, por causa das tabelas largas) mostrava a barra.

   `min-width: 0` devolve à coluna o direito de encolher, e o recorte na área
   do gráfico garante que um rótulo mais largo que a coluna apenas apareça
   cortado na beirada em vez de criar rolagem. Os rótulos continuam rareando
   (um a cada oito colunas, no `inicio.js`), então na prática nenhum encosta no
   vizinho. */
.grafico .coluna { min-width: 0; }
/* Duas caixas flexíveis, duas travas: a coluna não encolhia por causa do
   rótulo, e o gráfico inteiro não encolhia por causa das colunas. Sem esta
   segunda linha, o gráfico continuava com 531px dentro de uma área de 340 e a
   correção só trocava a barra de rolagem por um corte. */
.area-grafico .grafico { min-width: 0; }
/* Terceira trava, e a que quase passou batido: destravar as duas caixas de
   cima deixou a BARRA encolher a zero, e o gráfico ficou vazio — sem erro,
   sem aviso, só sem barra. Ela tem 3px de piso e o `gap` da pilha cede
   primeiro. */
.grafico .pilha { gap: 2px; }
.grafico .barra { min-width: 3px; }
.area-grafico { overflow: hidden; }
/* O rótulo é centrado na sua coluna e, na última, metade dele cairia fora do
   recorte ("17/0…"). Esta folga à direita é a metade que falta. */
.area-grafico .grafico { padding-right: 16px; }

/* ======================================================================
   Janelão: a janela grande, para uma tarefa inteira.

   O `<dialog>` que já existia (`#janela`, do `perguntar`) é para três campos.
   Este é para uma ficha: cabeça fixa, corpo que rola e pé com as ações
   sempre à vista — numa janela alta, botão no fim do formulário é botão que
   ninguém acha sem rolar até o fim.

   Ela é um `<dialog>` de verdade, e não uma `<div>` por cima: Esc fecha, o
   foco fica preso dentro, o resto da página sai da ordem de leitura e o
   desfoque do fundo é o `::backdrop`.
   ====================================================================== */

/* A janela é de vidro, como a lateral: branco translúcido sobre o desfoque do
   que está atrás. Duas coisas se equilibram aqui — o véu escuro do `::backdrop`
   atravessa o vidro e o acinzenta, então ele é leve (.14), e o branco da janela
   (.55) é o piso para o texto preto continuar legível em cima da carteira
   embaralhada. O desfoque de 30px é o que faz esse piso ser baixo: ele apaga o
   desenho do que está atrás, e sobra cor, não forma. */
.janelao {
  display: flex;
  flex-direction: column;
  width: min(940px, calc(100vw - 32px));
  max-width: none;
  min-width: 0;
  max-height: min(88vh, 920px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 22px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: 0 32px 80px rgba(15, 23, 42, .2), 0 8px 24px rgba(15, 23, 42, .09),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Quem não tem `backdrop-filter` recebe a janela sólida: vidro sem desfoque é
   texto sobre a lista de clientes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .janelao { background: var(--painel); }
}
/* O fundo: é aqui que a carteira de clientes continua visível, e embaralhada o
   suficiente para ninguém tentar ler. */
.janelao::backdrop {
  background: rgba(15, 23, 42, .14);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
}

/* Sem o parágrafo que saía aqui, a cabeça é só título e fechar: `center` em vez
   de `flex-start`, senão o X fica alto e solto. */
.janelao-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 18px 26px;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
}
.janelao-topo h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.fechar-janelao { margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px; }
.fechar-janelao svg { width: 16px; height: 16px; }

/* Corpo transparente: o cinza sólido de antes tapava o vidro. */
.janelao-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 26px 24px;
  background: transparent;
}

.janelao-pe {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 26px;
  border-top: 1px solid rgba(15, 23, 42, .07);
  background: rgba(255, 255, 255, .42);
}
.janelao-pe .botao-principal { margin-left: 0; }

/* Dentro da janela, cada bloco da ficha continua sendo um cartão — é o que
   separa Identificação de Dados cadastrais —, mas mais leve: cartão com
   sombra forte dentro de janela com sombra forte é moldura sobre moldura. */
/* Os blocos também translúcidos, um pouco mais opacos que a janela: é o que
   mantém "Identificação" separado de "Dados cadastrais" sem virar uma moldura
   sólida dentro de uma janela de vidro. O campo em si continua branco — dentro
   dele se digita, e aí legibilidade vence estética. */
.janelao .ficha-bloco {
  box-shadow: none;
  background: rgba(255, 255, 255, .4);
  border-color: rgba(255, 255, 255, .75);
}
.janelao .ficha-bloco input, .janelao .ficha-bloco select, .janelao .ficha-bloco textarea { background: var(--painel); }
.janelao .ficha-formulario > .erro { margin: 12px 2px 0; }
.janelao .ficha-bloco h2 { font-size: 14px; }

@media (max-width: 760px) {
  .janelao { width: calc(100vw - 16px); max-height: 92vh; border-radius: 18px; }
  .janelao-topo, .janelao-pe { padding-left: 16px; padding-right: 16px; }
  .janelao-corpo { padding: 16px; }
  .janelao-pe { flex-wrap: wrap; }
  .janelao-pe button { flex: 1 1 auto; justify-content: center; }
}

/* ======================================================================
   Perfil do cliente.

   A tela era um cadastro: uma barra com o nome, uma fila de cartões da
   largura inteira e os dados de contato escondidos na aba Ficha. Virou
   perfil: quem é o cliente e como se fala com ele em cima, as pessoas à
   esquerda, os dados à direita, e a configuração (contas, portal, encerrar)
   embaixo, onde ela pertence — é coisa que se mexe uma vez.
   ====================================================================== */

/* ---- o topo ---- */
/* `position: relative` com `z-index` no BLOCO, e nao no menu: cada filho de
   `#conteudo` tem a animacao de entrada, que usa `transform` com `fill-mode:
   both` e portanto cria contexto de empilhamento proprio. Dentro dele, o
   z-index do menu do avatar nao alcanca a barra de abas, que e o irmao
   seguinte — e o menu abria ATRAS dela. */
.perfil-topo { margin-bottom: 18px; position: relative; z-index: 5; }

.voltar-perfil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px 0 10px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--linha);
  color: var(--apagado);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.voltar-perfil:hover { background: var(--painel); color: var(--texto); filter: none; }
.voltar-perfil svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perfil-identidade {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
/* A marca do cliente, quando existe; as iniciais quando não. 76px é o
   tamanho em que uma logo quadrada ainda se reconhece. */
.perfil-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #3b4553, #1f2733);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .1), inset 0 0 0 3px rgba(255, 255, 255, .6);
}
/* A foto preenche o círculo inteiro e é cortada pelo centro. Sem isto, imagem
   retangular aparecia encolhida no meio do círculo, com borda de fundo em
   volta — foi o "descolada" que o dono viu. */
.perfil-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}
/* O bloco do nome alinha com o TOPO da foto, e a foto ganha o mesmo respiro do
   cabeçalho: os dois passam a parecer uma peça só. */
.perfil-identidade { align-items: center; }
.perfil-identidade .botao-principal { align-self: center; }

.perfil-quem { min-width: 0; flex: 1 1 280px; }
.perfil-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.perfil-nome h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.perfil-ramo { margin: 5px 0 0; font-size: 13.5px; color: var(--apagado); }
.perfil-onde {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--apagado);
}
.perfil-onde svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Os três atalhos: o canal do cliente a um clique, com o desenho dizendo qual
   é. Eles só aparecem quando o campo está preenchido — botão que abre o nada
   é pior do que botão ausente. */
.perfil-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.atalho-perfil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--linha);
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva),
    transform var(--rapido) var(--curva);
}
.atalho-perfil:hover { background: var(--painel); border-color: var(--linha-forte); color: var(--texto); transform: translateY(-1px); }
.atalho-perfil svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* O WhatsApp é o único colorido: é o canal que a agência usa o dia todo, e a
   cor dele é reconhecida antes de a palavra ser lida. */
.atalho-perfil.zap { color: #0b7a54; border-color: rgba(18, 160, 110, .3); }
.atalho-perfil.zap:hover { background: rgba(18, 160, 110, .08); border-color: rgba(18, 160, 110, .5); }

.perfil-identidade .botao-principal { margin-left: auto; align-self: flex-start; }
.perfil-identidade .botao-principal svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- as abas ---- */
/* Sublinhado em vez de pastilha: aqui as abas são a navegação da tela, e o
   sublinhado diz "você está nesta parte" sem competir com os botões do topo,
   que são todos pastilhas. */
.abas-perfil {
  gap: 2px;
  margin-bottom: 20px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--linha);
  /* `overflow-x: auto` (herdado de `.sub-abas`) liga o eixo Y junto, e o
     sublinhado da aba aberta passa 1px da caixa: 1px de sobra bastava para o
     navegador desenhar uma barra de rolagem VERTICAL ao lado das abas.
     Esconder o eixo Y mantém a rolagem lateral, que é a que serve no celular. */
  overflow-y: hidden;
}
.abas-perfil button {
  position: relative;
  padding: 10px 16px 13px;
  border-radius: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
}
/* O `::after` das sub-abas já existia, como pastilha de fundo (`inset: 0`,
   z-index -1). Aqui ele vira sublinhado, e por isso o `inset: auto` vem
   primeiro: com `top` e `bottom` os dois definidos, o `top` vence e a linha
   aparecia ACIMA do texto. */
.abas-perfil button::after {
  content: '';
  position: absolute;
  inset: auto;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  z-index: 0;
  border-radius: 2px 2px 0 0;
  background: var(--destaque);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--rapido) var(--curva), transform var(--medio) var(--curva);
}
.abas-perfil button:hover { background: transparent; color: var(--texto); }
.abas-perfil button.ativa { background: transparent; color: var(--destaque); }
.abas-perfil button.ativa::after { opacity: 1; transform: none; }

/* ---- a malha ---- */
.perfil-malha {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: 18px;
  align-items: start;
}
.perfil-coluna { display: grid; gap: 18px; align-content: start; }
.cartao-perfil { margin: 0; }

/* ---- o cartão partido: Informações | Projeto ---- */
.cartao-partido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.cartao-partido > section { padding: 22px 24px; }
/* A divisória é uma borda, não um elemento: assim ela some sozinha quando as
   duas metades empilham no celular. */
.cartao-partido > section + section { border-left: 1px solid var(--linha); }
.cartao-partido h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
}
.cartao-partido h2 svg {
  width: 17px;
  height: 17px;
  color: var(--apagado);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Uma linha de informação: ícone, rótulo, valor. O rótulo tem largura fixa
   para os valores alinharem numa coluna — é o que faz a lista ser lida de
   cima a baixo em vez de em ziguezague. */
.linha-info {
  display: grid;
  grid-template-columns: 18px 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}
.linha-info:last-child { border-bottom: 0; padding-bottom: 0; }
.linha-info > svg {
  width: 17px;
  height: 17px;
  color: var(--texto-fraco, #98a2b3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rotulo-info { font-size: 12.5px; color: var(--apagado); }
.valor-info {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  overflow-wrap: anywhere;
}
.valor-info a { font-weight: 500; }
.vazio-info { margin: 0; font-size: 12.5px; color: var(--apagado); line-height: 1.6; }

/* ---- as pessoas ---- */
/* Na coluna estreita do perfil, a linha da pessoa não cabe em fila: nome,
   cargo e dois canais somam mais que 35% da tela, e os canais vazavam para
   fora do cartão. Aqui ela empilha — quem é em cima, por onde se fala
   embaixo, na largura inteira do cartão. */
.cartao-perfil h2 { font-size: 15px; }
.cartao-perfil .pessoa-linha {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  border-radius: var(--raio-m);
}
.cartao-perfil .pessoa-canais {
  grid-column: 2;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 4px;
}
.cartao-perfil .pessoa-canais .canal { max-width: 100%; min-width: 0; }
.cartao-perfil .pessoa-canais .canal span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O selo "principal" não quebra no meio da palavra. */
.cartao-perfil .pessoa-quem strong { flex-wrap: wrap; }
.cartao-perfil .pessoa-quem .selo { white-space: nowrap; }

/* ---- o encerramento, no pé da coluna ---- */
/* Ação rara e sem volta: compacta, no fim da coluna, e com a borda cor de
   atenção para não ser confundida com um cartão de leitura. O botão fica
   discreto de propósito — quem encerra um cliente sabe o que está fazendo, e
   um botão vermelho grande aqui seria um convite. */
.cartao-risco {
  padding: 16px 18px;
  border-color: rgba(201, 138, 0, .35);
  background: linear-gradient(180deg, rgba(201, 138, 0, .05), rgba(255, 255, 255, .6));
}
.cartao-risco h2 { margin: 0 0 6px; font-size: 14px; }
.cartao-risco .dica { margin: 0 0 12px; font-size: 11.5px; line-height: 1.5; }
.cartao-risco .discreto { height: 34px; padding: 0 14px; font-size: 12.5px; }

/* ---- telas menores ---- */
@media (max-width: 1100px) {
  .perfil-malha { grid-template-columns: minmax(0, 1fr); }
  .cartao-partido { grid-template-columns: 1fr; }
  .cartao-partido > section + section { border-left: 0; border-top: 1px solid var(--linha); }
}
@media (max-width: 760px) {
  .perfil-avatar { width: 60px; height: 60px; font-size: 19px; }
  .perfil-nome h2 { font-size: 20px; }
  .perfil-identidade .botao-principal { margin-left: 0; width: 100%; justify-content: center; }
  /* As abas rolam de lado em vez de quebrar em duas linhas. */
  .abas-perfil { overflow-x: auto; scrollbar-width: none; }
  .abas-perfil::-webkit-scrollbar { display: none; }
  .linha-info { grid-template-columns: 18px minmax(0, 1fr); row-gap: 2px; }
  .linha-info .rotulo-info { grid-column: 2; }
  .linha-info .valor-info { grid-column: 2; }
}

/* ---- contas conectadas: um cartão por rede ---- */
/* Era uma tabela com quatro botões minúsculos por linha. Virou um cartão por
   rede, com o estado visível de longe: a bolinha diz se está no ar antes de a
   palavra ser lida.

   As redes são as que o sistema conecta de verdade — Instagram e Facebook por
   cliente, mais o WhatsApp da agência, que mora em outro módulo e por isso diz
   isso no próprio cartão. Rede que o sistema não integra não ganha cartão:
   botão "Conectar" que não conecta promete o que não existe. */
/* `auto-fit` com `1fr`: as trilhas que sobram colapsam e os cartões existentes
   dividem a linha em partes iguais. É o que mantém as três redes numa linha só
   dentro da coluna do perfil e acomoda uma quarta rede, no dia em que existir,
   sem mexer aqui. Com o teto fixo que eu havia posto antes, a terceira caía
   para a segunda linha por 2px de diferença. */
.malha-redes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.malha-redes:not(:last-child) { margin-bottom: 16px; }
.cartao-rede {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  transition: border-color var(--rapido) var(--curva), box-shadow var(--medio) var(--curva);
}
.cartao-rede:hover { border-color: var(--linha-forte); box-shadow: var(--elev-1); }
.topo-rede { display: flex; align-items: center; gap: 10px; }
.topo-rede strong { font-size: 13.5px; font-weight: 650; }
/* O logo da rede na cor dela: é a cor que se reconhece antes do nome. */
.logo-rede {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cor-rede) 12%, transparent);
  color: var(--cor-rede);
}
.logo-rede svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.estado-rede {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--apagado);
}
.estado-rede i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.estado-rede.boa { color: #0b7a54; }
.estado-rede.atencao { color: #96690a; }
.estado-rede.ruim { color: var(--alerta); }
.estado-rede.apagada { color: var(--texto-fraco, #98a2b3); }

.detalhe-rede {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nota-rede { margin: -4px 0 0; font-size: 11px; color: var(--texto-fraco, #98a2b3); line-height: 1.4; }

.botao-rede {
  margin-top: auto;
  width: 100%;
  height: 34px;
  border-radius: 9px;
  background: var(--painel);
  border: 1px solid var(--linha);
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.botao-rede:hover:not(:disabled) { border-color: var(--linha-forte); background: var(--painel-2); filter: none; }
/* Conta no ar: o botão é de manutenção, não de ação principal — verde de
   confirmação, não laranja de "faça isto agora". */
.botao-rede.ok { background: rgba(18, 160, 110, .1); border-color: rgba(18, 160, 110, .3); color: #0b7a54; }
.botao-rede.ok:hover { background: rgba(18, 160, 110, .16); border-color: rgba(18, 160, 110, .5); }
.botao-rede.atencao { background: rgba(201, 138, 0, .12); border-color: rgba(201, 138, 0, .32); color: #96690a; }
.botao-rede:disabled { opacity: .55; cursor: not-allowed; }

/* O painel que "Configurar" abre: tudo o que se faz com aquela conta. */
.painel-rede {
  padding: 16px;
  margin-bottom: 16px;
  background: var(--painel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  animation: sobe var(--rapido) var(--curva) both;
}
.painel-rede .barra { flex-wrap: wrap; gap: 8px; }

/* O ícone do título do cartão, como nos cartões do perfil.
   A regra é da CLASSE, não de "dentro de um h2": dentro de um `<summary>` ela
   não pegava, e o SVG sem tamanho nem `fill` aparecia como uma bola preta
   gigante — foi o que aconteceu no histórico do post. */
.icone-titulo {
  width: 17px;
  height: 17px;
  margin-right: 2px;
  vertical-align: -3px;
  color: var(--apagado);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O atalho da ponte, no pé do cartão do Instagram: é caminho alternativo, e
   por isso é um link, não um segundo botão competindo com o "Conectar". */
.atalho-rede {
  margin: -2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--apagado);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  box-shadow: none;
}
.atalho-rede:hover { color: var(--destaque); background: none; filter: none; }

/* ---- "Acesso do cliente", compacto ---- */
/* O cartão ficava com o dobro da altura dos cartões acima dele para mostrar
   três linhas de informação. Aqui ele encolhe para a mesma densidade do resto
   do perfil: menos respiro em volta, endereço numa linha só, e a pessoa numa
   linha em vez de num bloco. Nenhum elemento saiu. */
#cartao-portal { padding: 18px 20px; }
#cartao-portal h2 { font-size: 15px; }
#cartao-portal > .dica { margin: 0 0 12px; font-size: 12px; }
#cartao-portal .endereco-portal {
  padding: 8px 10px 8px 12px;
  border-radius: var(--raio-p);
  gap: 10px;
}
#cartao-portal .endereco-portal code { font-size: 11.5px; }
#cartao-portal .endereco-portal .ficha-rotulo { font-size: 9.5px; }
#cartao-portal .lista-pessoas { margin-top: 12px; }
#cartao-portal .pessoa-linha { padding: 8px 10px; gap: 10px; }
#cartao-portal .pessoa-avatar { width: 30px; height: 30px; font-size: 11px; }
#cartao-portal .pessoa-quem strong { font-size: 13px; }
#cartao-portal .pessoa-quem span { font-size: 11.5px; }
#cartao-portal .pessoa-canais { gap: 6px; }
#cartao-portal .pessoa-canais .discreto { height: 30px; padding: 0 12px; font-size: 12px; }
#cartao-portal details { margin-top: 12px !important; }
#cartao-portal details .dica { font-size: 12px; }
/* O vazio global tem 34px de respiro em cima e embaixo, que numa coluna
   estreita viram um buraco. */
#cartao-portal .vazio { padding: 14px 0; font-size: 12.5px; }
#cartao-portal { margin: 0 !important; }
/* Com uma rede só, `1fr` esticava o cartão pela coluna inteira e ele deixava
   de parecer um cartão. O teto mantém o tamanho, e a malha continua dividindo
   em partes iguais quando houver mais de um. */
.cartao-rede { max-width: 280px; }
/* A contagem da pasta é só o número: "3 arquivos" quebrava o cartão em duas
   linhas e empurrava o nome. A palavra por extenso vive no `title`. */
.pasta-conta { font-variant-numeric: tabular-nums; }
.pasta-cartao { min-height: 76px; }
.pasta-nome { line-height: 1.3; }

/* ======================================================================
   O editor de post, na mesma língua do perfil do cliente.

   O que mudou é apresentação: os mesmos campos, a mesma prévia e a mesma
   lógica de criação. O que se ganha é hierarquia — cada bloco passou a
   parecer uma etapa ("onde vai sair", "o arquivo", "o que vai escrito") em
   vez de uma lista de campos num formulário.
   ====================================================================== */

/* ---- a barra do editor ---- */
.ficha-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ficha-barra strong { font-size: 14px; }
.ficha-barra > button[form] {
  margin-left: auto;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
}

/* ---- a escolha da rede ---- */
.escolha-rede {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--fundo-alto);
  border-radius: 999px;
}
.escolha-rede .pilula {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--apagado);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.escolha-rede .pilula svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.escolha-rede .pilula:hover:not(.ativa) { background: rgba(255, 255, 255, .8); color: var(--texto); }
/* A rede escolhida fica escura, e não laranja: laranja aqui competiria com o
   "Criar post", que é a ação da tela. */
.escolha-rede .pilula.ativa { background: #1f2733; color: #fff; box-shadow: var(--elev-1); }

/* ---- os quatro formatos ---- */
.formatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.formato-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 14px;
  text-align: center;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  color: var(--texto);
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva),
    box-shadow var(--medio) var(--curva), background var(--rapido) var(--curva);
}
.formato-cartao:hover { transform: translateY(-1px); box-shadow: var(--elev-1); border-color: var(--linha-forte); }
.formato-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--raio-m);
  background: var(--fundo-alto);
  color: var(--apagado);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.formato-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.formato-nome { font-size: 13px; font-weight: 650; }
.formato-regra { font-size: 10.5px; line-height: 1.35; color: var(--apagado); }
.formato-cartao.ativo {
  border-color: var(--destaque);
  background: rgba(255, 90, 31, .04);
  box-shadow: 0 0 0 1px var(--destaque);
}
.formato-cartao.ativo .formato-icone { background: rgba(255, 90, 31, .12); color: var(--destaque); }
.formato-cartao.ativo .formato-nome { color: var(--destaque); }

/* ---- a área do arquivo ---- */
.solta-arquivo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 116px;
  padding: 18px;
  text-align: left;
  background: var(--painel-2);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-m);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.solta-arquivo.sobre { border-color: var(--destaque); background: rgba(255, 90, 31, .04); }
.solta-arquivo.com-arquivo { border-style: solid; border-color: rgba(18, 160, 110, .35); background: rgba(18, 160, 110, .05); }
.desenho-solta {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--painel);
  border: 1px solid var(--linha);
  color: var(--apagado);
}
.solta-arquivo.com-arquivo .desenho-solta { color: #0b7a54; border-color: rgba(18, 160, 110, .35); }
.desenho-solta svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.texto-solta { display: grid; gap: 2px; }
.texto-solta strong { font-size: 13.5px; }
.texto-solta > span { font-size: 12px; color: var(--apagado); }

/* ---- a prévia ---- */
.previa-cartao { padding: 18px; }
.previa-avatar.com-foto { padding: 0; overflow: hidden; }
.previa-avatar.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Os ícones da barra eram formas em CSS (`background: currentColor` com
   `clip-path`). Agora são desenhos do sprite, e por isso o fundo herdado tem
   de ser desfeito: sem esta linha, cada ícone vira um quadrado preto. */
.previa-acoes svg.previa-icone {
  width: 21px;
  height: 21px;
  background: none;
  opacity: 1;
  clip-path: none;
  border-radius: 0;
  box-shadow: none;
  fill: none;
  stroke: #1f2733;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.previa-midia.vazia { display: grid; place-items: center; gap: 6px; align-content: center; }
.previa-midia.vazia .desenho-vazio {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--texto-fraco, #98a2b3);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.previa-midia.vazia .previa-medida {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco, #98a2b3);
}
.previa-midia.vazia .previa-regra { max-width: 80%; text-align: center; }

/* ---- a foto do cliente, no cabeçalho do perfil ---- */
.caixa-avatar { position: relative; flex: 0 0 auto; }
/* O avatar é uma pilha de uma célula: a foto (ou as iniciais) e a capa da
   câmera ocupam a MESMA área. Sem `grid-area: 1 / 1`, o grid dava uma linha
   para cada um — a capa empurrava as iniciais para fora do círculo, e era isso
   que parecia foto "descolada". */
.perfil-avatar.editavel {
  padding: 0;
  border: 0;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  overflow: hidden;
}
.perfil-avatar > * { grid-area: 1 / 1; }
.iniciais-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
/* A capa com a câmera aparece no hover: um ícone permanente em cima da foto
   do cliente suja a identidade dele, que é o ponto do avatar. */
.capa-avatar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  opacity: 0;
  transition: opacity var(--rapido) var(--curva);
}
.capa-avatar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perfil-avatar.editavel:hover .capa-avatar,
.perfil-avatar.editavel:focus-visible .capa-avatar { opacity: 1; }

.menu-avatar {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 232px;
  padding: 6px;
  /* Menu é opaco: com vidro, o nome das abas atrás atravessava as opções e a
     leitura virava adivinhação. Vidro é para superfície de fundo, não para
     texto curto que se lê de relance. */
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: var(--elev-3);
  animation: sobe var(--rapido) var(--curva) both;
}
.menu-avatar button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
.menu-avatar button:hover { background: var(--fundo-alto); filter: none; }
.menu-avatar button.ruim { color: var(--alerta); }
.menu-avatar button.ruim:hover { background: rgba(224, 52, 43, .08); }
.menu-avatar button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-avatar button small { margin-left: auto; font-size: 11px; color: var(--apagado); }
.menu-avatar .menu-nota { padding: 8px 10px; font-size: 11.5px; color: var(--apagado); line-height: 1.45; }

@media (max-width: 760px) {
  .formatos { grid-template-columns: 1fr 1fr; }
  .ficha-barra > button[form] { margin-left: 0; width: 100%; }
  .menu-avatar { left: auto; right: auto; }
}

/* ---- a tela de um post ---- */
/* Eram seis cartões na largura inteira, um embaixo do outro: o "Fluxo", que é
   a ação da tela, ficava no meio da pilha e só aparecia depois de rolar. Duas
   colunas resolvem — o trabalho à esquerda, o estado à direita, sempre à
   vista. */
.post-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: 18px;
  align-items: start;
}
.post-coluna, .post-lado { display: grid; gap: 18px; align-content: start; }
.post-lado { position: sticky; top: 18px; }
.post-detalhe .cartao { margin: 0; }

.estado-agora {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}

/* Os passos: um destaque e o resto em contorno, empilhados. Em fila, nove
   botões do mesmo tamanho não dizem qual é o próximo. */
.passos-fluxo { display: grid; gap: 8px; }
.passos-fluxo button { width: 100%; justify-content: center; }
.passos-fluxo .botao-principal { margin: 0; height: 40px; }
.passos-fluxo .discreto { height: 38px; }
.passos-fluxo .passo-ruim { color: var(--alerta); border-color: rgba(224, 52, 43, .3); }
.passos-fluxo .passo-ruim:hover { background: rgba(224, 52, 43, .08); }

/* O histórico recolhido, e rolando dentro do cartão. */
.cartao-historico > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
}
.cartao-historico > summary::-webkit-details-marker { display: none; }
/* `details.cartao > summary::before` já desenha um chevron à esquerda; aqui o
   indicador é o meu, à direita. Dois seria um a mais. */
.cartao-historico > summary::before { display: none; }
.cartao-historico > summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--apagado);
  border-bottom: 2px solid var(--apagado);
  transform: rotate(45deg);
  transition: transform var(--medio) var(--curva);
}
.cartao-historico[open] > summary::after { transform: rotate(-135deg); }
.rolo-historico { max-height: 340px; overflow-y: auto; margin-top: 12px; }
.rolo-historico .cel-versao { width: 44px; font-variant-numeric: tabular-nums; color: var(--apagado); }
.rolo-historico td { padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
.rolo-historico .micro { display: block; }

/* O "← Posts" da barra do editor e do post, com o desenho em vez do traço. */
.ficha-barra .discreto svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1100px) {
  .post-detalhe { grid-template-columns: minmax(0, 1fr); }
  .post-lado { position: static; }
}

/* ============================================================
   Equipe > Pessoas: cartoes no lugar da tabela.

   A tabela cabia numa tela larga e so nela. Cada pessoa aqui e uma
   ficha: quem e, quanto esta carregada e o que da para fazer com ela.
   A ocupacao continua com a escala neutra/verde/amarelo/vermelho —
   laranja segue sendo acao (Convidar), nunca estado.
   ============================================================ */

.grupo-pessoas { margin-bottom: 26px; }
.grupo-pessoas h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.grade-pessoas {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cartao-pessoa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: var(--elev-1);
  padding: 18px;
  min-width: 0;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.cartao-pessoa:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.cartao-pessoa.inativa { opacity: .72; }

.cartao-pessoa header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar-pessoa {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--texto);
}
.cartao-pessoa-quem { display: flex; flex-direction: column; min-width: 0; }
.cartao-pessoa-quem strong { font-size: 15px; line-height: 1.25; }
.cartao-pessoa-quem small { color: var(--apagado); font-size: 12px; }
.cartao-pessoa-quem .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-pessoa > .selo { align-self: flex-start; }

/* A engrenagem do cartao: abre a ficha inteira da pessoa numa janela. Fica
   discreta ate o ponteiro chegar — e um caminho, nao um chamado. */
.engrenagem-pessoa {
  margin-left: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: var(--apagado);
}
.engrenagem-pessoa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.engrenagem-pessoa:hover { background: var(--fundo-alto); color: var(--texto); }

/* A janela de ajustes de uma pessoa: o janelao do sistema, mais estreito —
   sao dois campos e uma ficha de leitura, nao um cadastro inteiro. */
.janela-pessoa { width: min(620px, calc(100vw - 32px)); }
.janela-pessoa .janelao-topo { gap: 12px; }
.janela-pessoa .janelao-topo h2 { font-size: 18px; }
.janela-pessoa .janelao-topo .avatar-pessoa { width: 40px; height: 40px; font-size: 14px; }
.janela-pessoa .ficha-bloco .cartao-pessoa-numeros { border-top: 0; padding-top: 0; }
.janela-pessoa .cartao-pessoa-carteira { margin-top: 14px; }
/* As listas da ficha: origem/etapa a esquerda, numero a direita, detalhe
   embaixo. Mesma forma da carteira do cartao — e a mesma pergunta. */
.lista-ficha { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-ficha li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: rgba(255, 255, 255, .5);
}
.lista-ficha li.atrasado { border-color: rgba(224, 52, 43, .3); }
.lista-ficha .cliente { font-weight: 600; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.lista-ficha li strong { font-size: 15px; }
.lista-ficha li small { grid-column: 1 / -1; font-size: 11px; }
.janela-pessoa .ficha-bloco h3 { font-size: 12px; color: var(--apagado); margin: 16px 0 0; font-weight: 600; }

/* O cadastro fica fechado: quem abre a ficha veio ver carga, nao editar. */
.bloco-ajustes summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.bloco-ajustes summary:hover { color: var(--destaque); }
.bloco-ajustes .ficha-formulario { margin-top: 16px; }
.acoes-ajustes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.janela-pessoa button.perigo { color: var(--alerta); border-color: rgba(224, 52, 43, .3); }
.janela-pessoa button.perigo:hover { background: rgba(224, 52, 43, .08); }

.cartao-pessoa-numeros {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 12px 0;
}
.cartao-pessoa-numeros > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cartao-pessoa-numeros small { font-size: 11px; color: var(--apagado); }
.cartao-pessoa-numeros strong { font-size: 18px; line-height: 1.1; }

.cartao-pessoa-ocupacao { display: flex; flex-direction: column; gap: 5px; }
.cartao-pessoa-ocupacao > small { font-size: 11px; color: var(--apagado); }
.cartao-pessoa-ocupacao .ocupacao { width: 100%; }

.cartao-pessoa footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.cartao-pessoa-acesso { display: flex; flex-direction: column; }
.cartao-pessoa-acesso small { font-size: 11px; color: var(--apagado); }

@media (max-width: 720px) {
  .grade-pessoas { grid-template-columns: 1fr; }
}

/* A carteira dentro do cartao da pessoa: um cliente por linha, com a etapa
   em que a producao dele esta. E a parte que responde "isso anda?" — por
   isso ganha o espaco central do cartao, e nao um numero no canto. */
.cartao-pessoa-carteira { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cartao-pessoa-carteira > small:first-child { font-size: 11px; color: var(--apagado); }
.cartao-pessoa-carteira ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Uma coisa por linha: o nome do cliente inteiro em cima, o selo da etapa
   embaixo. Nome e etapa lado a lado nao cabem na largura de um cartao — o
   nome virava "GUH D...", que nao identifica cliente nenhum. */
.cartao-pessoa-carteira li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--painel-2);
  min-width: 0;
}
.cartao-pessoa-carteira .cliente {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  max-width: 100%;
  /* Quebra em duas linhas antes de cortar; corta so no fim da segunda. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cartao-pessoa-carteira li small { font-size: 11px; max-width: 100%; }
.cartao-pessoa-carteira details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--apagado);
  padding: 2px 0;
}
.cartao-pessoa-carteira details summary:hover { color: var(--texto); }
.cartao-pessoa-carteira details ul { margin-top: 8px; }

/* ---------------- ponto ----------------
   As quatro batidas do dia, sempre no mesmo desenho: no rodapé da lateral
   (o meu), no cartão da Equipe (o de cada um) e na ficha (hoje e o
   histórico). Mesma pergunta, mesma forma — quem aprende a ler num lugar
   lê nos três. */
.ponto-linha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ponto-marca {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--painel-2);
  text-align: center;
}
.ponto-marca small { font-size: 9.5px; color: var(--apagado); letter-spacing: .01em; }
.ponto-marca strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.ponto-marca.vazia strong { color: var(--apagado); font-weight: 500; }
.ponto-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ponto-topo small { font-size: 11px; color: var(--apagado); }

/* O relógio na lateral: é o meu ponto, e o botão diz qual é a próxima
   batida — nunca quatro botões iguais lado a lado. */
.ponto-lateral {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--painel);
}
.ponto-lateral:empty { display: none; }
.ponto-lateral .ponto-marca { padding: 5px 2px; }
.ponto-lateral .ponto-marca strong { font-size: 12px; }
.ponto-lateral button { width: 100%; justify-content: center; }

.cartao-pessoa-ponto { display: flex; flex-direction: column; }

/* O histórico fica fechado: quem abre a ficha quer o dia de hoje. */
.ponto-historico { margin-top: 12px; }
.ponto-historico summary { cursor: pointer; font-size: 12px; color: var(--apagado); }
.ponto-historico summary:hover { color: var(--destaque); }
.ponto-dias { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ponto-dia { padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: rgba(255, 255, 255, .5); }
.ponto-dia-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }


/* Equipe: cartoes compactos e a janela do novo colaborador. */
.cartao-pessoa.compacto { gap: 10px; padding: 14px; }
.cartao-pessoa.compacto header { gap: 10px; }
.cartao-pessoa.compacto .avatar-pessoa { width: 36px; height: 36px; font-size: 13px; }
.cartao-pessoa.compacto .cartao-pessoa-quem strong { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.cartao-pessoa.compacto .cartao-pessoa-quem strong .selo { font-size: 10px; padding: 1px 6px; }
.cartao-pessoa-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cartao-pessoa-linha .selo { font-size: 11px; }
.cartao-pessoa.compacto .cartao-pessoa-numeros { padding: 8px 0 0; border-bottom: 0; }
.cartao-pessoa.compacto .cartao-pessoa-numeros strong { font-size: 15px; }
.cartao-pessoa.compacto .cartao-pessoa-numeros strong.acesso { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-pessoa-numeros em.atrasadas { font-style: normal; font-size: 11px; color: var(--alerta); }
.grade-pessoas { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.janela-colaborador { width: min(460px, calc(100vw - 32px)); }
.janela-colaborador .ficha-formulario { display: flex; flex-direction: column; gap: 6px; }
.funcao-cargo { margin: 2px 0 8px; font-size: 12px; color: var(--apagado); min-height: 1em; }
.senha-temporaria { display: flex; gap: 8px; }
.senha-temporaria input { flex: 1; font-family: ui-monospace, monospace; letter-spacing: .04em; }
.janela-colaborador .erro { color: var(--alerta); min-height: 1em; margin: 4px 0 0; font-size: 13px; }
.janela-colaborador .acoes-ajustes { justify-content: flex-end; padding: 0 20px 18px; }


/* ============================ Produção ============================
   O painel operacional: cabecalho, resumo, filtros, quadro e a coluna de
   apoio (calendario, resumo e atalhos). Tudo em superficie branca sobre o
   cinza do fundo, com o laranja da marca so no que e acao. */

.prod-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.prod-titulo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prod-titulo h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.prod-titulo p { margin: 6px 0 0; color: var(--apagado); font-size: 13px; }
.prod-acoes-cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.prod-visoes {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--fundo-alto);
  border-radius: 999px;
}
.prod-visoes button.discreto {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--apagado);
}
.prod-visoes button.discreto:hover { background: rgba(17, 24, 39, .05); box-shadow: none; }
.prod-visoes button.discreto.ativo { background: var(--painel); color: var(--texto); box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }

button.prod-novo { border-radius: 999px; padding: 10px 18px; font-weight: 600; }

/* ---- resumo do topo ---- */

.prod-resumo {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.prod-resumo-cliente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: 0 4px 16px rgba(20, 35, 55, .04);
}
.prod-resumo-quem { display: grid; line-height: 1.3; }
.prod-resumo-quem small { color: var(--apagado); font-size: 11px; }

.prod-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--destaque);
  background: rgba(255, 90, 31, .12);
}
.prod-avatar.peq { width: 20px; height: 20px; flex: 0 0 20px; font-size: 9px; font-style: normal; }

.prod-metricas {
  flex: 1 1 520px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.prod-metrica {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas: "icone texto" "barra barra";
  align-items: center;
  gap: 10px 12px;
  text-align: left;
  padding: 14px 16px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: 0 4px 16px rgba(20, 35, 55, .04);
  color: var(--texto);
  filter: none;
}
.prod-metrica:hover { border-color: var(--linha-forte); box-shadow: 0 6px 18px rgba(20, 35, 55, .08); filter: none; }
.prod-metrica.ativa { border-color: var(--cor-metrica); }
.prod-metrica-icone {
  grid-area: icone;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--cor-metrica) 14%, transparent);
}
.prod-metrica-icone i { width: 10px; height: 10px; border-radius: 3px; background: var(--cor-metrica); display: block; }
.prod-metrica-texto { grid-area: texto; display: grid; line-height: 1.2; }
.prod-metrica-texto small { color: var(--apagado); font-size: 11px; font-weight: 500; }
.prod-metrica-texto strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.prod-metrica-barra {
  grid-area: barra;
  height: 4px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .06);
  overflow: hidden;
}
.prod-metrica-barra i { display: block; height: 100%; border-radius: 999px; background: var(--cor-metrica); }

/* ---- filtros ---- */

.prod-filtros {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 0 0 16px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  box-shadow: 0 4px 16px rgba(20, 35, 55, .04);
}
.prod-busca { position: relative; flex: 1 1 220px; min-width: 160px; display: flex; align-items: center; }
.prod-busca svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--apagado);
  pointer-events: none;
}
.prod-busca input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: var(--painel-2);
  font: inherit;
  font-size: 13px;
  color: var(--texto);
}
.prod-busca input:focus { outline: none; border-color: var(--destaque); background: var(--painel); }

.prod-campo { display: grid; gap: 1px; min-width: 128px; }
.prod-campo > span { font-size: 10px; color: var(--apagado); font-weight: 600; letter-spacing: .02em; padding-left: 2px; }
.prod-campo select {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  padding: 0 2px;
  max-width: 190px;
}
.prod-campo select:focus { outline: none; color: var(--destaque); }
.prod-filtros .prod-ordenar,
.prod-filtros .prod-limpar { margin-left: auto; white-space: nowrap; font-size: 13px; padding: 8px 14px; }
.prod-filtros .prod-limpar { margin-left: 0; color: var(--destaque); border-color: rgba(255, 90, 31, .3); }

/* ---- corpo: quadro + lateral ---- */

.prod-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 16px;
  align-items: start;
}
/* As cinco colunas dividem a largura que existe, e nunca mais do que ela:
   o quadro nao rola de lado em largura nenhuma. Rolagem horizontal esconde
   justamente a coluna do fim — a do que acabou de sair — e obriga a arrastar
   o cartao ate uma borda que se move. Quando a tela aperta, as colunas
   quebram em linhas (ver o responsivo la embaixo), que e o mesmo quadro sem
   nada fora de vista. */
.prod-quadro {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  /* Cada coluna termina onde o conteudo dela termina. Esticadas todas na
     altura da mais cheia, as vazias viravam paredes brancas — e, com as
     colunas quebrando em linhas na tela estreita, uma linha inteira ficava
     na altura do seu pior caso. */
  align-items: start;
}

/* Os icones do sprite sao desenhados a traco. Fora de um <button>, nada
   dizia isso a eles, e o desenho virava uma mancha preta. */
.prod-busca svg,
.prod-rede svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prod-coluna {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--linha);
  border-radius: 14px;
}
/* A coluna vazia guarda altura: ela continua sendo o lugar onde se solta um
   cartao arrastado, e um alvo de trinta pixels nao se acerta. */
.prod-coluna { min-height: 132px; }
.prod-coluna.alvo { background: rgba(255, 90, 31, .07); border-color: var(--destaque); border-style: dashed; }
.prod-coluna-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 650;
}
.prod-coluna-topo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-coluna-topo b {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--apagado);
  background: rgba(17, 24, 39, .06);
  border-radius: 999px;
  padding: 1px 8px;
}
.prod-ponto { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--cor-coluna); }
.prod-coluna-pecas { display: grid; gap: 9px; }
.prod-vazio { margin: 6px 4px 10px; color: var(--apagado); font-size: 12px; }
.prod-vermais {
  border: 0;
  background: transparent;
  color: var(--apagado);
  font-size: 12px;
  font-weight: 600;
  padding: 6px;
  box-shadow: none;
  filter: none;
}
.prod-vermais:hover { color: var(--destaque); background: rgba(255, 90, 31, .07); border-radius: 8px; box-shadow: none; filter: none; }

/* ---- o cartao ---- */

.prod-cartao {
  display: grid;
  gap: 7px;
  padding: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 11px;
  box-shadow: 0 2px 7px rgba(20, 35, 55, .035);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.prod-cartao:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(20, 35, 55, .08); border-color: var(--linha-forte); }
.prod-cartao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.prod-cartao.arrastando { opacity: .45; }
.prod-cartao h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.32;
  min-width: 0;
  overflow-wrap: anywhere;
}
.prod-cliente { margin: 0; font-size: 10.5px; color: var(--apagado); text-transform: uppercase; letter-spacing: .03em; }
.prod-falta { margin: 0; font-size: 10.5px; color: var(--alerta); }

.prod-cartao-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prod-rede {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(17, 24, 39, .05);
  color: var(--apagado);
}
.prod-rede svg { width: 11px; height: 11px; }
.prod-rede.instagram { color: #e1306c; background: rgba(225, 48, 108, .08); }
.prod-rede.facebook { color: #1877f2; background: rgba(24, 119, 242, .08); }
.prod-formato {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(17, 24, 39, .05);
  color: var(--apagado);
}
.prod-menu { margin-left: auto; color: var(--apagado); font-size: 14px; line-height: 1; }

.prod-cartao-pe { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prod-capa {
  width: 40px;
  height: 30px;
  flex: 0 0 40px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--fundo-alto);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--apagado);
}
.prod-capa.sem { background: repeating-linear-gradient(45deg, var(--fundo-alto), var(--fundo-alto) 5px, var(--painel-2) 5px, var(--painel-2) 10px); }
.prod-pe-texto { display: grid; gap: 2px; min-width: 0; font-size: 10.5px; color: var(--apagado); }
.prod-pessoa { display: flex; align-items: center; gap: 5px; min-width: 0; }
.prod-pessoa, .prod-quando { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- a coluna de apoio ---- */

.prod-lateral { position: sticky; top: 16px; display: grid; gap: 12px; }
.prod-cartao-lateral {
  padding: 14px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: 0 4px 16px rgba(20, 35, 55, .04);
}
.prod-lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.prod-lateral-topo strong { font-size: 13px; }
.prod-lateral-topo .discreto { border: 0; background: transparent; color: var(--destaque); font-size: 11.5px; padding: 2px 4px; box-shadow: none; }
.prod-lateral-topo .discreto:hover { background: rgba(255, 90, 31, .08); box-shadow: none; filter: none; }

.prod-mes { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.prod-mes span { font-size: 12px; font-weight: 600; }
.prod-mes .so-icone { width: 24px; height: 24px; }

.prod-grade-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.prod-cabeca-dia { text-align: center; font-size: 10px; color: var(--apagado); font-weight: 600; padding: 2px 0 4px; }
.prod-dia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font-size: 11px;
  font-weight: 500;
  padding: 0;
  box-shadow: none;
  filter: none;
  position: relative;
}
.prod-dia.fora { visibility: hidden; }
.prod-dia:hover { background: var(--fundo-alto); box-shadow: none; filter: none; }
.prod-dia.hoje { font-weight: 700; color: var(--destaque); }
.prod-dia.tem::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--destaque);
}
.prod-dia.escolhido { background: var(--destaque); color: #fff; }
.prod-dia.escolhido::after { background: var(--painel); }
.prod-limpar-dia { width: 100%; margin-top: 8px; font-size: 11.5px; padding: 6px; }

.prod-resumo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prod-resumo-lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  font-size: 12px;
}
.prod-resumo-rotulo { display: flex; align-items: center; gap: 7px; color: var(--apagado); min-width: 0; }
.prod-resumo-rotulo i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.prod-resumo-numero { font-weight: 700; }
.prod-resumo-barra { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(17, 24, 39, .06); overflow: hidden; }
.prod-resumo-barra i { display: block; height: 100%; border-radius: 999px; }

.prod-atalhos { display: grid; gap: 7px; }
.prod-atalhos button { width: 100%; justify-content: flex-start; font-size: 12.5px; padding: 9px 12px; }
.prod-atalhos .discreto svg { width: 15px; height: 15px; color: var(--apagado); }
.prod-selo-atalho {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--destaque);
  background: rgba(255, 90, 31, .12);
  border-radius: 999px;
  padding: 1px 7px;
}

.prod-falhas { margin-top: 16px; border-color: var(--alerta); }

/* ---- escolher o cliente do novo conteudo ---- */

.prod-escolher { border: 0; border-radius: var(--raio-m); padding: 18px; min-width: min(360px, calc(100vw - 32px)); box-shadow: var(--sombra-alta); }
.prod-escolher h3 { margin: 0 0 12px; font-size: 15px; }
.prod-escolher-lista { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.prod-escolher-lista button {
  text-align: left;
  background: transparent;
  color: var(--texto);
  border: 1px solid transparent;
  box-shadow: none;
  filter: none;
  padding: 9px 12px;
  font-size: 13px;
}
.prod-escolher-lista button:hover { background: var(--painel-2); border-color: var(--linha); box-shadow: none; filter: none; }
.prod-escolher-pe { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---- responsivo ---- */

/* A coluna de apoio desce para baixo do quadro antes de o quadro apertar:
   com ela do lado, cinco colunas abaixo de 1400px viram faixas onde o titulo
   do conteudo nao cabe. Embaixo, ela vira uma faixa de tres cartoes e devolve
   a largura inteira ao quadro. */
@media (max-width: 1580px) {
  .prod-corpo { grid-template-columns: minmax(0, 1fr); }
  .prod-lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 1100px) {
  /* Os filtros quebram em duas linhas em vez de rolar de lado. */
  .prod-filtros { flex-wrap: wrap; }
  .prod-filtros .prod-ordenar { margin-left: auto; }
}

@media (max-width: 980px) {
  /* Cinco colunas nao cabem mais: viram duas por linha. O quadro fica mais
     alto e continua inteiro na tela. */
  .prod-quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .prod-cabeca { flex-direction: column; align-items: stretch; }
  .prod-acoes-cabeca { justify-content: space-between; }
  .prod-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-titulo h2 { font-size: 22px; }
  .prod-quadro { grid-template-columns: minmax(0, 1fr); }
  .prod-busca { flex: 1 1 100%; }
}


/* ---- a janela dos atalhos da Producao ---- */
/* O atalho abre a tela aqui dentro, centrada, com o quadro desfocado atras.
   Fechar devolve exatamente onde se estava. */

.janela-prod {
  /* O `max-width: 520px` da regra base de `dialog` serve para as janelinhas
     de pergunta do sistema; aqui dentro mora uma TELA inteira — tabela de
     historico, calendario do mes, fila com cartao — e 520px a espremia ate a
     tabela precisar rolar de lado. Por isso a largura e reescrita, e nao so
     declarada. */
  width: min(1240px, calc(100vw - 56px));
  max-width: min(1240px, calc(100vw - 56px));
  min-width: 0;
  /* Uma janela que muda de tamanho a cada atalho salta na tela. A altura
     minima da corpo as telas vazias sem esticar as cheias. */
  min-height: min(560px, 72vh);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--texto);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.janela-prod::backdrop {
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(7px);
}

.janela-prod-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--linha);
  background: var(--painel);
  flex: 0 0 auto;
}
.janela-prod-topo strong { font-size: 17px; letter-spacing: -.015em; }
.janela-prod-topo .so-icone { margin-left: auto; }

/* A tela de dentro foi escrita para ocupar a pagina: aqui ela ocupa o corpo
   da janela, e e o corpo que rola. */
.janela-prod-corpo {
  padding: 8px 28px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}
.janela-prod-corpo > .barra:first-child { margin-top: 18px; margin-bottom: 18px; }
.janela-prod-corpo h2 { font-size: 18px; }

/* A barra de filtros das telas de dentro cabe numa linha na largura nova; o
   `auto` empurra os campos para a direita, longe do titulo. */
.janela-prod-corpo .barra { gap: 12px; row-gap: 12px; }
.janela-prod-corpo .barra .sel { min-width: 150px; max-width: 230px; }

/* A tabela (historico) respira: na largura de antes ela rolava de lado
   dentro da janela, que e a rolagem horizontal que o dono pediu para sumir. */
.janela-prod-corpo table { width: 100%; }
.janela-prod-corpo table th,
.janela-prod-corpo table td { padding-top: 13px; padding-bottom: 13px; }
.janela-prod-corpo .cartao { padding: 18px; }

/* O calendario vem com largura de pagina inteira; dentro da janela ele se
   ajusta ao que ha. */
.janela-prod-corpo .grade-calendario { min-width: 0; }
.janela-prod-corpo .barra-calendario { gap: 14px; margin-bottom: 16px; }
.janela-prod-corpo .vazio,
.janela-prod-corpo .vazio-desenhado { padding: 28px 0; }

@media (max-width: 900px) {
  .janela-prod { width: calc(100vw - 28px); max-width: calc(100vw - 28px); min-height: 0; max-height: 92vh; }
  .janela-prod-topo { padding: 15px 18px; }
  .janela-prod-corpo { padding: 6px 18px 18px; }
}

@media (max-width: 640px) {
  .janela-prod { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  .janela-prod-topo { padding: 13px 14px; }
  .janela-prod-corpo { padding: 4px 14px 14px; }
}


/* ---- menu de escolha proprio ---- */
/* O `<select>` nativo aceita CSS na caixa, mas a lista que abre e desenhada
   pelo sistema operacional: fundo branco, selecao azul, fonte do Windows.
   Aqui a lista e HTML, entao ela tem a cara do resto da tela. O select
   original continua no DOM, invisivel, guardando o valor. */

.sel { position: relative; display: inline-flex; min-width: 0; }
/* O menu aberto sobe acima de qualquer vizinho da mesma barra. */
.sel.aberto { z-index: 50; }
.sel select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.sel-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px 0 13px;
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  filter: none;
}
.sel-botao:hover { border-color: var(--linha-forte); background: var(--painel); box-shadow: none; filter: none; }
.sel-botao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }
.sel.aberto .sel-botao { border-color: var(--destaque); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.sel-valor { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-seta {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: var(--apagado);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}
.sel.aberto .sel-seta { transform: rotate(180deg); stroke: var(--destaque); }

.sel-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-width: min(320px, 80vw);
  max-height: 288px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 11px;
  box-shadow: var(--sombra-alta);
  animation: sel-abre .12s ease;
}
/* Sem espaco embaixo, a lista sobe: dentro de uma janela que rola, uma lista
   que desce fica cortada na borda de baixo. */
.sel.acima .sel-lista { top: auto; bottom: calc(100% + 6px); }
@keyframes sel-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.sel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  color: var(--texto);
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  box-shadow: none;
  filter: none;
  white-space: nowrap;
}
.sel-item > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sel-item svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: var(--destaque);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.sel-item:hover,
.sel-item:focus-visible {
  background: rgba(255, 90, 31, .09);
  color: var(--destaque);
  outline: none;
  box-shadow: none;
  filter: none;
}
.sel-item.escolhido { font-weight: 600; }
.sel-item.escolhido svg { opacity: 1; }

/* Na barra de filtros do quadro o campo nao tem moldura propria: o rotulo
   fica em cima e a escolha embaixo, dentro da caixa unica da barra. */
.prod-campo .sel { width: 100%; }
.prod-campo .sel-botao {
  height: auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font-weight: 600;
}
.prod-campo .sel-botao:hover { background: transparent; }
.prod-campo .sel.aberto .sel-botao { box-shadow: none; color: var(--destaque); }
.prod-campo .sel.aberto .sel-valor { color: var(--destaque); }
.prod-campo .sel-lista { left: -9px; }


/* ============================ Financeiro ============================
   O cockpit do mes: quatro numeros, dois graficos e tres listas. Mesma
   superficie branca sobre cinza do resto do painel; o laranja da marca so
   no que e acao. */

.fin-topo {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.fin-topo .fin-titulo { flex: 1 1 280px; }
.fin-titulo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin-titulo h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.fin-titulo p { margin: 6px 0 0; color: var(--apagado); font-size: 13px; }

/* Os atalhos para Contratos, Revenda e Extras: o que era a barra de modulo,
   agora dentro da tela. */
/* ---------------- o painel escuro do financeiro ----------------

   Um numero grande, centrado, e as acoes logo abaixo dele. O fundo escuro
   nao e enfeite: ele separa "o quanto" (que se le de longe, uma vez por dia)
   do "o que fazer agora" (as listas claras embaixo). Com tudo branco, os
   quatro cartoes antigos tinham o mesmo peso e nenhum chamava o olho. */

.fin-heroi {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 34px 24px 26px;
  margin-bottom: 16px;
  border-radius: 26px;
  background: radial-gradient(120% 160% at 50% -40%, #2a3344 0%, #141922 55%, #0f131a 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(15, 19, 26, .22);
}

.fin-heroi-rotulo {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}

/* `tabular-nums` para o numero nao dancar quando o valor muda de casa. */
.fin-heroi-valor {
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.fin-heroi-apoio {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .7);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.fin-heroi-sep { color: rgba(255, 255, 255, .3); }

.fin-heroi-acoes {
  display: flex;
  gap: 26px;
  margin: 26px 0 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* O seletor leva o `.fin-heroi` junto de proposito: o estilo base de
   `button` do tema desenha caixa, borda e sombra, e sem subir a
   especificidade os tres botoes apareciam dentro de retangulos — o oposto do
   que um botao redondo deveria parecer. */
.fin-heroi .fin-redondo {
  background: none;
  border: 0;
  box-shadow: none;
  height: auto;
  min-height: 0;
  padding: 0;
}

.fin-redondo {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.fin-redondo:hover { color: #fff; }

.fin-redondo-bolha {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background var(--rapido) ease, transform var(--rapido) var(--curva);
}
.fin-redondo:hover .fin-redondo-bolha { background: rgba(255, 255, 255, .16); }
.fin-redondo:active .fin-redondo-bolha { transform: scale(.95); }
.fin-redondo-bolha svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}

/* A acao principal e maior e colorida: num trio de botoes iguais, nenhum e o
   primeiro. */
.fin-redondo-bolha.grande {
  width: 62px;
  height: 62px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  background: var(--destaque);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 90, 31, .36);
}
.fin-redondo.destaque { color: #fff; font-weight: 600; }
.fin-redondo.destaque:hover .fin-redondo-bolha { background: var(--destaque-2, #ff7a3d); }

.fin-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
}
.fin-pill.alerta {
  background: rgba(255, 122, 26, .16);
  border-color: rgba(255, 122, 26, .34);
  color: #ffb68a;
}
.fin-ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}

@media (max-width: 600px) {
  .fin-heroi { padding: 26px 16px 20px; border-radius: 20px; }
  .fin-heroi-acoes { gap: 16px; }
}

/* A linha das abas carrega tambem as acoes: as abas a esquerda, os botoes
   empurrados para a direita. Em tela estreita a linha quebra e os botoes
   descem inteiros, em vez de espremerem as abas. */
.fin-linha-abas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fin-linha-abas .sub-abas { margin-bottom: 0; }
.fin-linha-abas .fin-acoes { margin-left: auto; }

.fin-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-acoes .discreto { height: 42px; padding: 0 15px; font-size: 13px; font-weight: 600; }

.fin-mes {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px 0 13px;
  height: 42px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 11px;
  box-shadow: 0 4px 16px rgba(20, 35, 55, .04);
}
.fin-mes > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: var(--apagado);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fin-mes .sel-botao { border: 0; background: transparent; height: 38px; font-weight: 600; min-width: 168px; }
.fin-mes .sel-botao:hover { background: transparent; }
.fin-mes .sel.aberto .sel-botao { box-shadow: none; color: var(--destaque); }

/* ---- os quatro numeros ---- */

.grade-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi.azul .marca-kpi { background: rgba(255, 146, 72, .12); color: var(--serie-2); }
.grade-kpi .kpi.clicavel { cursor: pointer; }
.grade-kpi .kpi.clicavel:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* ---- a linha dos graficos ---- */

.fin-graficos {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
/* Com um gráfico só (o faturamento, depois que despesas saiu da tela), a
   grade de duas colunas deixaria metade da largura vazia ao lado dele. */
.fin-graficos.uma-coluna { grid-template-columns: minmax(0, 1fr); }
.fin-cabeca {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fin-cabeca h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.fin-cabeca .dica { margin: 4px 0 0; font-size: 12px; }
.fin-cabeca .discreto { flex: 0 0 auto; font-size: 12.5px; padding: 6px 12px; white-space: nowrap; }
.fin-periodo .sel-botao { height: 34px; font-size: 12.5px; }
.fin-periodo .sel { min-width: 160px; }

.fin-numerao { display: block; font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.fin-sob-numerao { margin: 4px 0 16px; font-size: 12px; color: var(--apagado); }

/* ---- o grafico de area ---- */

.fluxo-area { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
/* O mesmo eixo do grafico de barras do Inicio. As regras de la sao presas a
   `.area-grafico`, e aqui a caixa e outra (o rotulo do mes fica fora da area
   do desenho, nao dentro) — mas o eixo tem de parecer o mesmo, porque e. */
.fluxo-area > .eixo-y {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: #98a2b3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fluxo-area .linhas-guia { inset: 0; }
.fluxo-tela {
  grid-column: 2;
  position: relative;
  height: 190px;
  min-width: 0;
}
.fluxo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A camada que recebe o mouse: uma coluna invisivel por mes, larga o
   bastante para se acertar sem mira. */
.fluxo-toque { position: absolute; inset: 0; display: flex; }
.fluxo-ponto {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  cursor: default;
}
.fluxo-ponto:hover, .fluxo-ponto:focus-visible { background: rgba(17, 24, 39, .03); outline: none; box-shadow: none; filter: none; }
.fluxo-risco {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--linha-forte);
  opacity: 0;
}
.fluxo-ponto:hover .fluxo-risco, .fluxo-ponto:focus-visible .fluxo-risco { opacity: .5; }
.fluxo-bolinha {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: 0 0 -4.5px -4.5px;
  border-radius: 50%;
  border: 2px solid var(--painel);
  opacity: 0;
  transition: opacity .1s ease;
}
.fluxo-ponto:hover .fluxo-bolinha, .fluxo-ponto:focus-visible .fluxo-bolinha { opacity: 1; }

.fluxo-dica {
  position: absolute;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  gap: 5px;
  min-width: 170px;
  padding: 10px 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: var(--sombra-alta);
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}
.fluxo-dica.esquerda { transform: translateX(-85%); }
.fluxo-dica strong { font-size: 12.5px; }
.fluxo-dica span { display: flex; align-items: center; gap: 7px; color: var(--apagado); }
.fluxo-dica i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.fluxo-dica b { margin-left: auto; color: var(--texto); font-variant-numeric: tabular-nums; }

.fluxo-meses {
  grid-column: 2;
  display: flex;
  margin-top: 7px;
}
.fluxo-meses span { flex: 1 1 0; text-align: center; font-size: 10.5px; color: var(--apagado); }
.fluxo-area > .legenda-grafico { grid-column: 2; }
.fluxo-area .legenda-grafico i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---- as tres listas ---- */

.fin-listas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 340px;
  gap: 16px;
  align-items: start;
}
.fin-listas .cartao { min-width: 0; }
.fin-listas table { font-size: 12.5px; table-layout: auto; }
.fin-listas th, .fin-listas td { padding-left: 8px; padding-right: 8px; }
#conteudo .fin-listas table th:first-child,
#conteudo .fin-listas table td:first-child { padding-left: 4px; }
#conteudo .fin-listas table th:last-child,
#conteudo .fin-listas table td:last-child { padding-right: 4px; }
.fin-listas .selo { white-space: nowrap; }
.fin-listas td:first-child { max-width: 190px; }
.fin-listas td:first-child strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-listas td.num, .fin-listas th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-vazio { padding: 22px 0; }
.fin-vazio h3 { font-size: 14px; margin: 0 0 6px; }
.fin-vazio p { font-size: 12.5px; }

.fin-movimentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fin-movimentos li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--linha);
}
.fin-movimentos li:last-child { border-bottom: 0; }
.fin-seta {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
}
.fin-seta.entrada { background: rgba(18, 160, 110, .12); color: #0b7a54; }
.fin-seta.saida { background: rgba(224, 52, 43, .1); color: #b3241c; }
.fin-mov-texto { display: grid; gap: 1px; min-width: 0; }
.fin-mov-texto strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-mov-texto small { font-size: 11px; color: var(--apagado); }
.fin-mov-valor {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fin-mov-valor.entrada { color: #0b7a54; }
.fin-mov-valor.saida { color: var(--alerta); }

/* ---- responsivo ---- */

@media (max-width: 1400px) {
  /* A coluna das movimentacoes desce: espremida em 340px ao lado de duas
     tabelas, ela corta o nome do cliente no meio. */
  .fin-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-listas .fin-mov { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-graficos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .fin-listas { grid-template-columns: minmax(0, 1fr); }
  .fin-topo { flex-direction: column; align-items: stretch; }
  .fin-mes { width: 100%; }
  .fin-mes .sel { flex: 1 1 auto; }
  .fin-acoes .discreto { flex: 1 1 auto; height: 38px; padding: 0 10px; }
}

@media (max-width: 560px) {
  .grade-kpi { grid-template-columns: minmax(0, 1fr); }
  .fin-titulo h2 { font-size: 22px; }
  .fin-numerao { font-size: 25px; }
}

/* ---------------- o filtro de período do financeiro ----------------

   Tudo em token (`--painel`, `--linha`, `--texto`): o módulo Finanças é
   escuro e o resto do sistema é claro, e um calendário com cor cravada
   funcionaria em um e quebraria no outro. */

.fin-periodo-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--painel);
  color: var(--texto);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.fin-periodo-botao:hover { border-color: var(--linha-forte); }
.fin-periodo-botao svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
.fin-periodo-botao small { color: var(--apagado); font-weight: 500; font-size: 12px; }

/* A janela: atalhos à esquerda, grade à direita. Quem sabe o que quer
   ("últimos 7 dias") resolve num clique e nunca vê o calendário; quem quer
   um intervalo esquisito tem a grade ao lado, sem trocar de tela. */
.cal-janela {
  position: absolute;
  right: 0;
  margin-top: 8px;
  z-index: 60;
  display: flex;
  gap: 0;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

.cal-atalhos {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 10px;
  border-right: 1px solid var(--linha);
  background: var(--painel-2);
  min-width: 164px;
}
.cal-atalho {
  text-align: left;
  padding: 8px 11px;
  border: 0;
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--texto);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.cal-atalho:hover { background: var(--fundo-alto); }
.cal-atalho.ativo { background: rgba(255, 90, 31, .14); color: var(--destaque); font-weight: 600; }

.cal-grade-lado { padding: 10px 12px 12px; }
.cal-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.cal-cabeca strong { font-size: 13.5px; text-transform: capitalize; }
.cal-seta {
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--linha); border-radius: 50%;
  background: transparent; color: var(--texto);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.cal-seta:hover { background: var(--fundo-alto); }

.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
.cal-semana span {
  text-align: center; font-size: 11px; color: var(--apagado); padding-bottom: 4px;
}

.cal-dia {
  height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto);
  font-size: 12.5px; cursor: pointer;
}
.cal-dia:hover { background: var(--fundo-alto); }
/* Hoje é marcado por um ponto, e não por fundo: fundo o confundiria com
   "dia selecionado", que é outra coisa. */
.cal-dia.hoje { font-weight: 700; color: var(--destaque); }
.cal-dia.meio { background: rgba(255, 90, 31, .12); border-radius: 0; }
.cal-dia.ponta { background: var(--destaque); color: #fff; font-weight: 600; }
.cal-dia.ponta.inicio { border-radius: 8px 0 0 8px; }
.cal-dia.ponta.fim { border-radius: 0 8px 8px 0; }
.cal-dia.ponta.inicio.fim { border-radius: 8px; }
.cal-vazio { height: 32px; }

.cal-dica { margin: 10px 0 0; font-size: 11.5px; color: var(--apagado); text-align: center; }

@media (max-width: 640px) {
  .cal-janela { flex-direction: column; right: auto; left: 0; }
  .cal-atalhos { border-right: 0; border-bottom: 1px solid var(--linha); grid-template-columns: 1fr 1fr; }
}

/* ---------------- a janela de lançar venda ----------------

   Janela própria porque o diálogo genérico empilha campos de largura
   inteira: com oito, vira um formulário que rola em que tudo tem o mesmo
   peso. Aqui os campos relacionados ficam lado a lado e o total — o número
   que se confere antes de clicar — ganha lugar próprio. */

.janela-venda {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--texto);
  box-shadow: var(--sombra-alta);
}
.janela-venda::backdrop { background: rgba(8, 11, 16, .6); backdrop-filter: blur(4px); }

.venda-corpo { display: grid; gap: 14px; padding: 20px 24px; }
.venda-topo { display: grid; grid-template-columns: 1fr 260px; gap: 10px; }
.venda-cabeca h2 { margin: 0 0 2px; font-size: 18px; letter-spacing: -.01em; }
.venda-cabeca p { margin: 0; font-size: 13px; color: var(--apagado); }

.venda-campo { display: grid; gap: 6px; margin: 0; min-width: 0; }
.venda-campo > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--apagado);
}
.venda-campo input,
.venda-campo select { width: 100%; height: 40px; }
.venda-campo[hidden] { display: none; }

/* Planos como cartoes: o que existe fica a vista, um clique escolhe. */
.venda-planos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 124px;
  overflow-y: auto;
}
.venda-plano {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
  height: auto;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: transparent;
  color: var(--texto);
  box-shadow: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.venda-plano:hover { border-color: var(--apagado); background: transparent; }
.venda-plano small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--apagado); }
.venda-plano strong {
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.venda-plano em { font-style: normal; font-size: 12px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.venda-plano.outro { border-style: dashed; }
.venda-plano.ativo { border-color: var(--destaque); background: rgba(255, 90, 31, .08); }
.venda-plano.ativo em { color: var(--destaque); }

.venda-linha { display: grid; grid-template-columns: 70px 1fr 1fr 1fr; gap: 10px; }

.venda-chave {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: var(--raio-m);
  background: var(--fundo-alto);
  border: 1px solid var(--linha);
  height: 40px;
  box-sizing: border-box;
}
.venda-chave button {
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--apagado);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.venda-chave button:hover { color: var(--texto); }
.venda-chave button.ativo { background: var(--painel); color: var(--destaque); box-shadow: var(--elev-1); }

.venda-corpo .erro { margin: 0; }
.venda-corpo .erro:empty { display: none; }
.venda-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.venda-total { display: grid; margin-right: auto; }
.venda-total span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.venda-total strong { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.venda-acoes button { height: 40px; padding: 0 20px; }

@media (max-width: 560px) {
  .venda-linha { grid-template-columns: 1fr 1fr; }
  .venda-topo { grid-template-columns: 1fr; }
  .venda-corpo { padding: 18px; }
}

/* Os dois contadores do painel escuro: clientes novos e clientes que
   pagaram. Ficam entre o valor e os botões, em texto pequeno — são contexto
   do número grande, não números concorrentes. Virar cartão ao lado faria
   eles disputarem a atenção com o faturamento, que é o que manda ali. */
.fin-heroi-contas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}
.fin-heroi-contas strong { color: rgba(255, 255, 255, .92); font-weight: 700; }

/* ---------- a dica do grafico ----------
 *
 * Substitui o `title` nativo: aquele demora quase um segundo, nao se
 * estiliza e some ao mover o mouse um pixel. Esta aparece na hora e mostra
 * as DUAS series juntas — comparar faturado com recebido e o motivo de o
 * grafico existir, e o title mostrava uma barra de cada vez. */
.grafico .coluna { position: relative; }

.grafico .dica {
  position: absolute;
  /* Ancorada no TOPO da area do grafico, e nao acima dela: o cartao recorta
     o que passa da borda, e a dica posicionada para fora aparecia cortada
     pela metade. Dentro da area ela sempre cabe, porque a area e alta. */
  top: 0;
  left: 50%;
  transform: translate(-50%, -4px);
  z-index: 3;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  box-shadow: var(--elev-2);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.grafico .dica strong { font-size: 11px; color: var(--apagado); font-weight: 600; }
.grafico .dica span { display: flex; align-items: center; gap: 6px; color: var(--apagado); }
.grafico .dica b { margin-left: auto; color: var(--texto); font-variant-numeric: tabular-nums; }
.grafico .dica i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }

.grafico .coluna:hover .dica {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Nas duas pontas a dica sairia do cartao. Ancorar na borda em vez de no
   centro mantem ela dentro sem precisar medir nada em JS. */
.grafico .coluna:first-child .dica { left: 0; transform: translate(0, -4px); }
.grafico .coluna:first-child:hover .dica { transform: translate(0, 0); }
.grafico .coluna:last-child .dica { left: auto; right: 0; transform: translate(0, -4px); }
.grafico .coluna:last-child:hover .dica { transform: translate(0, 0); }

/* As outras colunas recuam: o dia sob o mouse e o unico que importa naquele
   instante, e apagar o resto e o que faz a comparacao saltar. */
.grafico:hover .coluna:not(:hover) { opacity: .4; }
.grafico .coluna { transition: opacity var(--rapido) var(--curva); }

/* Uma faixa atras da coluna sob o mouse, para o alvo ficar obvio mesmo
   quando a barra e baixinha. */
.grafico .coluna::before {
  content: "";
  position: absolute;
  inset: -4px 0 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  opacity: 0;
  transition: opacity var(--rapido) var(--curva);
}
.grafico .coluna:hover::before { opacity: 1; }

/* O pontinho de cor dentro da dica. As regras de cor viviam so em
   `.legenda-grafico i` e nao alcancavam aqui — os pontos saiam invisiveis,
   e sem eles a dica nao diz qual linha e qual serie. */
.grafico .dica i.laranja { background: var(--serie-3); }
.grafico .dica i.verde { background: var(--serie-1); }
.grafico .dica i.azul { background: var(--serie-2); }
.grafico .dica i.roxo { background: var(--serie-4); }
.grafico .dica i.neutro { background: var(--serie-neutra); }
.grafico .dica i.vermelho { background: var(--alerta); }

/* ---------- o grafico se movendo ----------
 *
 * Duas animacoes, com papeis diferentes.
 *
 * ENTRADA: a barra sobe do zero quando o grafico aparece, em cascata da
 * esquerda para a direita (`--i` e o indice da coluna). O olho acompanha a
 * construcao e entende a forma do mes antes de ler qualquer numero. A
 * cascata e curta de proposito — 28ms por coluna: num mes de 31 dias, 40ms
 * dariam quase um segundo e meio so de espera.
 *
 * HOVER: a coluna salta alguns pixels e o traco do topo acende. O salto e o
 * que responde ao cursor; o brilho e o que diz qual altura esta sendo lida.
 *
 * `transform-origin: bottom` nas duas: barra cresce do chao, nao do meio. */
@keyframes subir-barra {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.grafico .barra {
  transform-origin: bottom;
  animation: subir-barra .42s var(--curva) backwards;
  animation-delay: calc(var(--i, 0) * 28ms);
  transition: transform var(--rapido) var(--curva), filter var(--rapido) var(--curva);
}

/* O salto. `translateY` e nao `scaleY` para a barra nao distorcer: esticar
   mudaria a altura, e altura aqui E o dado. */
.grafico .coluna:hover .pilha { transform: translateY(-4px); }
.grafico .pilha { transition: transform var(--rapido) var(--curva); }

/* O traco do topo acende sob o cursor. */
.grafico .coluna:hover .barra::after {
  box-shadow: 0 0 10px currentColor;
  height: 3px;
}
.grafico .barra::after { transition: box-shadow var(--rapido) var(--curva), height var(--rapido) var(--curva); }

/* Quem pediu menos movimento no sistema recebe o grafico pronto, sem
   cascata e sem salto. Animacao e enfeite; o dado nao pode depender dela. */
@media (prefers-reduced-motion: reduce) {
  .grafico .barra { animation: none; }
  .grafico .coluna:hover .pilha { transform: none; }
}

/* ---------- a rosca girando ----------
 *
 * Duas camadas de movimento, com papeis separados.
 *
 * O TRILHO (o anel de fundo, que nao carrega dado nenhum) ganha um arco
 * claro que roda sem parar, como um carregamento. E ele que da vida ao
 * cartao. Fica no trilho de proposito: girar os arcos de DADO faria a
 * posicao de cada etapa mudar o tempo todo, e posicao num grafico circular
 * e informacao — a pessoa decora "o laranja comeca em cima".
 *
 * Os ARCOS de dado so se desenham na entrada, do zero ate o valor. E o gesto
 * de carregamento sem o custo de perder a referencia.
 *
 * `rotate` no proprio circulo (e nao no svg) para nao brigar com o
 * `rotate(-90deg)` que ja poe o zero no topo. */
@keyframes girar-rosca {
  to { transform: rotate(360deg); }
}
@keyframes desenhar-arco {
  from { stroke-dasharray: 0 10000; }
}

.rosca svg { overflow: visible; }

/* O arco que roda: um pedaco curto do anel, por cima do trilho. */
/* Correndo POR CIMA do anel: um brilho, nao um segundo anel. Branco bem
   fraco, porque passa sobre o laranja do dado e nao pode apaga-lo. */
.rosca .giro {
  stroke: rgba(255, 255, 255, .28);
  stroke-linecap: round;
  stroke-dasharray: 30 297;
  transform-origin: 60px 60px;
  animation: girar-rosca 2.6s linear infinite;
}

.rosca .arco {
  animation: desenhar-arco .9s var(--curva) backwards;
  transform-origin: 60px 60px;
}

/* Sob o cursor o giro acelera e aparece mais: o cartao responde sem que o
   dado se mexa. */
.rosca:hover .giro { animation-duration: 1s; stroke: rgba(255, 255, 255, .5); }
.rosca .giro { transition: stroke var(--rapido) var(--curva); }

@media (prefers-reduced-motion: reduce) {
  .rosca .giro,
  .rosca .arco,
  .grafico .coluna:hover .barra::after { animation: none; }
  .rosca .giro { display: none; }
}

/* ---------- producao ao vivo ----------
 *
 * Tres sinais de que o trabalho esta acontecendo AGORA, cada um num lugar
 * onde ele diz uma coisa diferente:
 *
 *   o selo "Ao vivo" pulsando  — o cartao inteiro se atualiza sozinho;
 *   os tres pontinhos          — tem uma pessoa com a mao nessa peca;
 *   a luz correndo na etapa    — a peca esta andando, nao parada;
 *
 * e o "ha 40 min" ao lado, contando, que e o dado que transforma "em
 * producao" em "em producao desde quando". */
.ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--serie-2);
  background: rgba(255, 107, 44, .1);
  border: 1px solid rgba(255, 107, 44, .28);
}
.ao-vivo i {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--serie-3);
}
/* A onda que sai do ponto: e ela que le como "transmitindo". */
.ao-vivo i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--serie-3);
  animation: onda-ao-vivo 1.8s ease-out infinite;
}
@keyframes onda-ao-vivo {
  from { transform: scale(1); opacity: .7; }
  to { transform: scale(3.2); opacity: 0; }
}

/* Os tres pontinhos de quem esta fazendo, como "digitando" num chat. */
.quem-faz { display: inline-flex; align-items: center; gap: 8px; }
.digitando { display: inline-flex; gap: 3px; align-items: center; }
.digitando i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--serie-2);
  animation: digitando 1.2s ease-in-out infinite;
}
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitando {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* A etapa com a luz correndo por dentro, e o tempo logo abaixo. */
.etapa-viva { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.etapa-viva small { font-size: 10.5px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.tabela-ao-vivo .selo {
  position: relative;
  overflow: hidden;
}
.tabela-ao-vivo .selo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 210, 170, .35) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: luz-na-etapa 2.4s ease-in-out infinite;
}
@keyframes luz-na-etapa {
  to { transform: translateX(100%); }
}

/* A pessoa que tem peca aberta ganha um anel de luz no avatar. */
.pessoa-carga.trabalhando .avatar-mini {
  box-shadow: 0 0 0 2px rgba(255, 107, 44, .5), 0 0 12px rgba(255, 107, 44, .35);
  animation: respirar-avatar 2.6s ease-in-out infinite;
}
@keyframes respirar-avatar {
  50% { box-shadow: 0 0 0 2px rgba(255, 107, 44, .2), 0 0 4px rgba(255, 107, 44, .15); }
}

@media (prefers-reduced-motion: reduce) {
  .ao-vivo i::after,
  .digitando i,
  .tabela-ao-vivo .selo::after,
  .pessoa-carga.trabalhando .avatar-mini { animation: none; }
}

/* ---------- a lista da producao ao vivo ----------
 *
 * Uma linha por peca, quatro zonas lidas como frase: quem, o que, em que
 * pe, para quando. Sem cabecalho de tabela — as zonas se explicam pelo
 * desenho, e cabecalho em caixa alta numa lista de duas ou tres pecas pesava
 * mais que o conteudo. */
.lista-viva {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.peca-viva {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 108px;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border-radius: var(--raio-p);
  transition: background var(--rapido) var(--curva);
}
.peca-viva:hover { background: rgba(255, 255, 255, .035); }
.peca-viva + .peca-viva { border-top: 1px solid var(--linha); }
.peca-viva:hover + .peca-viva,
.peca-viva + .peca-viva:hover { border-top-color: transparent; }

/* Quem: o avatar respira enquanto a peca esta na mao da pessoa. */
.avatar-vivo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto);
  background: var(--fundo-alto);
}
.avatar-vivo.trabalhando {
  box-shadow: 0 0 0 2px rgba(255, 107, 44, .55), 0 0 14px rgba(255, 107, 44, .3);
  animation: respirar-avatar 2.6s ease-in-out infinite;
}
.avatar-vivo.sem-dono { color: var(--apagado); border: 1px dashed var(--linha-forte); background: transparent; }

/* O que, para quem. */
.peca-principal { display: grid; gap: 3px; min-width: 0; }
.peca-principal strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.peca-principal small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--apagado);
  white-space: nowrap;
  overflow: hidden;
}
.peca-principal .digitando { margin-left: 2px; }

/* Em que pe: a etapa como texto com um ponto aceso, nao como um botao. A
   pilula com borda parecia clicavel e nao era. */
.peca-etapa { display: grid; justify-items: end; gap: 3px; }
.etapa-pilula {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
}
.etapa-pilula::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--serie-3);
  box-shadow: 0 0 8px var(--serie-3);
  animation: respirar-ponto 1.8s ease-in-out infinite;
}
@keyframes respirar-ponto { 50% { opacity: .35; box-shadow: none; } }
.peca-etapa small { font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums; }

/* Para quando. Atraso e dito em uma palavra e uma cor, sem selo gritando. */
.peca-prazo { display: grid; justify-items: end; gap: 3px; text-align: right; }
.peca-prazo b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.peca-prazo small { font-size: 11px; color: var(--apagado); }
.peca-viva.atrasada .peca-prazo b,
.peca-viva.atrasada .peca-prazo small { color: var(--alerta); }
.resumo-atraso { color: var(--alerta); }

/* Celular: o prazo desce para baixo da etapa, a linha nao estoura. */
@media (max-width: 640px) {
  .peca-viva { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .peca-prazo { grid-column: 2 / -1; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-vivo.trabalhando,
  .etapa-pilula::before { animation: none; }
}

/* ---------- o calendario de escolher periodo ----------
 *
 * Usa a janela `.cal-*` do Financeiro e acrescenta o rodape: o intervalo
 * escrito por extenso, para a pessoa conferir antes, e o Filtrar, que e o
 * unico botao que aplica alguma coisa. */
.linha-filtro { position: relative; }
.cal-janela.periodo { top: 100%; right: 0; }

.cal-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.cal-resumo {
  font-size: 12px;
  color: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.cal-acoes { display: inline-flex; gap: 6px; }
.cal-acoes button { padding: 7px 14px; font-size: 12.5px; }
.cal-acoes button:disabled { opacity: .45; cursor: not-allowed; }

/* Dia futuro fica um tom abaixo: da para escolher (um periodo que termina
   no fim do mes, por exemplo), mas o olho entende que ali ainda nao ha dado. */
.cal-dia.futuro:not(.ponta):not(.meio) { color: var(--apagado); }

/* O cabecalho do Inicio por cima dos cartoes. O calendario de periodo abre
   para baixo, sobre os KPIs — e os KPIs tem animacao de entrada, que cria uma
   camada propria e e pintada DEPOIS do cabecalho (vem depois no HTML). O
   resultado era um calendario visivel e inclicavel: o clique no dia caia no
   cartao de "Alteracoes pedidas" por cima dele. Subir o cabecalho de camada
   leva a janela junto. */
.cabeca-inicio { position: relative; z-index: 30; }

/* O intervalo como faixa continua, e nao quadradinhos com fresta: sem o
   espaco entre colunas, os dias do meio se emendam de ponta a ponta. */
.cal-janela.periodo .cal-grade { column-gap: 0; row-gap: 4px; }
.cal-janela.periodo .cal-semana { column-gap: 0; }
.cal-janela.periodo .cal-dia.meio { border-radius: 0; }

/* ---------- a peca como cartao ----------
 *
 * Cada peca vira um cartao com fundo e borda proprios, em vez de uma linha
 * separada por traco: a lista ficava parecendo planilha. A faixa de luz na
 * lateral tem a cor da etapa, e a barrinha embaixo enche conforme o tempo
 * passa ate o prazo — da para ver de longe qual peca esta apertando. */
.lista-viva { gap: 8px; }
.peca-viva {
  position: relative;
  overflow: hidden;
  grid-template-columns: 38px minmax(0, 1fr) auto 128px;
  padding: 14px 16px 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.peca-viva + .peca-viva { border-top: 1px solid var(--linha); }
.peca-viva:hover {
  background: rgba(255, 255, 255, .045);
  border-color: var(--linha-forte);
  transform: translateY(-1px);
}

/* A faixa da etapa: do ambar (em producao) ao vermelho (ajuste pedido). */
.peca-viva::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cor-etapa, var(--serie-3));
  box-shadow: 0 0 12px var(--cor-etapa, var(--serie-3));
}
.peca-viva.etapa-em_producao { --cor-etapa: var(--serie-2); }
.peca-viva.etapa-em_revisao { --cor-etapa: var(--serie-3); }
.peca-viva.etapa-ajuste { --cor-etapa: var(--alerta); }
.etapa-pilula::before { background: var(--cor-etapa, var(--serie-3)); box-shadow: 0 0 8px var(--cor-etapa, var(--serie-3)); }

.peca-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.peca-titulo strong { min-width: 0; }
.formato-chip {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--apagado);
  background: rgba(255, 255, 255, .06);
}

/* O prazo: frase em cima, data pequena embaixo. Atrasada vira selo. */
.peca-prazo b { font-size: 12.5px; font-weight: 600; }
.peca-prazo small { font-variant-numeric: tabular-nums; }
.peca-prazo .sem-prazo { color: var(--apagado); font-weight: 500; }
.peca-viva.atrasada .peca-prazo b {
  padding: 3px 9px;
  border-radius: 999px;
  color: #ff9f98;
  background: rgba(224, 52, 43, .14);
  border: 1px solid rgba(224, 52, 43, .3);
}
.peca-viva.atrasada .peca-prazo small { color: var(--apagado); }

/* A barra ate o prazo, colada no rodape do cartao. */
.peca-progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .04);
}
.peca-progresso i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cor-etapa, var(--serie-3)));
  box-shadow: 0 0 8px var(--cor-etapa, var(--serie-3));
  transition: width .8s var(--curva);
}
.peca-viva.atrasada .peca-progresso i {
  background: linear-gradient(90deg, rgba(224, 52, 43, .2), var(--alerta));
  box-shadow: 0 0 10px var(--alerta);
  animation: pulsar-atraso 1.6s ease-in-out infinite;
}
@keyframes pulsar-atraso { 50% { opacity: .45; } }

@media (max-width: 640px) {
  .peca-viva { grid-template-columns: 34px minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .peca-viva.atrasada .peca-progresso i { animation: none; }
}

/* ---------- o colaborador e o atraso, no cartao da peca ----------
 *
 * A primeira coluna passa a ser QUEM: avatar, nome por extenso e "produzindo"
 * com os pontinhos. A pergunta mais comum diante do cartao — "quem esta com
 * isso?" — agora se responde sem ler a linha pequena de baixo. */
.peca-viva { grid-template-columns: 168px minmax(0, 1fr) auto 150px; }

.colaborador-vivo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 14px;
  border-right: 1px solid var(--linha);
}
.colaborador-dados { display: grid; gap: 2px; min-width: 0; }
.colaborador-dados b {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.colaborador-dados small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--serie-2);
}
.colaborador-vivo.sem-dono .colaborador-dados b,
.colaborador-vivo.sem-dono .colaborador-dados small { color: var(--apagado); }

/* O atraso: um selo curto, que nunca quebra linha, com um ponto pulsando, e
   o "ha 2 dias" embaixo. Antes o selo carregava a frase inteira ("atrasada
   ha 2 dias") e dobrava em duas linhas dentro de uma pilula, que e o
   desenho mais desajeitado que uma pilula pode ter. */
.peca-viva.atrasada .peca-prazo b.selo-atraso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #ffb4ad;
  background: linear-gradient(180deg, rgba(224, 52, 43, .22), rgba(224, 52, 43, .12));
  border: 1px solid rgba(255, 120, 110, .32);
  box-shadow: 0 0 14px -4px rgba(224, 52, 43, .6);
}
.selo-atraso i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6b5e;
  box-shadow: 0 0 6px #ff6b5e;
  animation: respirar-ponto 1.4s ease-in-out infinite;
}
.peca-viva.atrasada .peca-prazo small { color: var(--apagado); white-space: nowrap; }
.peca-prazo small span { color: #ff9f98; }

@media (max-width: 900px) {
  .peca-viva { grid-template-columns: minmax(0, 1fr) auto; }
  .colaborador-vivo { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
}
/* Colunas das pontas um pouco mais estreitas: o titulo da peca e o que mais
   precisa de largura, e estava sendo cortado. */
.peca-viva { grid-template-columns: 150px minmax(0, 1fr) auto 140px; gap: 12px; }
@media (max-width: 900px) { .peca-viva { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- o nome em luz ----------
 *
 * O nome de quem esta no sistema (no "Bom dia") e o de quem esta produzindo
 * (nos cartoes das pecas) com o mesmo degrade do anel: ambar, laranja,
 * ferrugem. O degrade e mais largo que a palavra e anda devagar, entao a
 * cor corre pelas letras como corre no anel — parado, seria so texto
 * laranja.
 *
 * `background-clip: text` pinta o fundo DENTRO das letras; a cor do texto
 * fica transparente para o fundo aparecer. O `color` de reserva vem antes:
 * navegador sem suporte mostra o nome laranja liso, nunca invisivel. */
.nome-luz {
  color: var(--serie-2);
  background: linear-gradient(
    100deg,
    #ffd4a3 0%,
    #ff9248 22%,
    #ff6b2c 42%,
    #c2410c 58%,
    #ff9248 78%,
    #ffd4a3 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nome-correndo 6s ease-in-out infinite alternate;
}
@keyframes nome-correndo {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nome-luz { animation: none; }
}
/* Com o nome em luz laranja, o "produzindo" logo embaixo tambem laranja
   disputava com ele. Fica apagado; os pontinhos continuam acesos. */
.colaborador-dados small { color: var(--apagado); }

/* O nome brilhando.
 *
 * `filter: drop-shadow`, e nao `text-shadow`: com a letra pintada pelo fundo
 * (`background-clip: text`), o text-shadow e desenhado por cima do degrade e
 * achata a cor. O drop-shadow segue o contorno da letra ja pintada, entao o
 * brilho fica em volta e o degrade continua dentro.
 *
 * Duas sombras: uma curta e quente colada na letra, uma larga e fraca que da
 * o halo. A larga respira — e o que faz parecer luz, e nao contorno. */
.nome-luz {
  filter: drop-shadow(0 0 2px rgba(255, 146, 72, .55)) drop-shadow(0 0 10px rgba(255, 107, 44, .35));
  animation: nome-correndo 6s ease-in-out infinite alternate, nome-brilhando 2.4s ease-in-out infinite;
}
@keyframes nome-brilhando {
  50% { filter: drop-shadow(0 0 3px rgba(255, 170, 110, .8)) drop-shadow(0 0 18px rgba(255, 107, 44, .6)); }
}
@media (prefers-reduced-motion: reduce) {
  .nome-luz { animation: none; }
}

/* ---------- o nome com reflexo de luz ----------
 *
 * Pedido do dono: no lugar da faixa escura do degrade correndo (o ferrugem),
 * um REFLEXO — uma faixa de luz clara atravessando o nome, como luz batendo
 * numa superficie.
 *
 * Duas camadas pintadas dentro da letra:
 *   1. o reflexo: uma faixa estreita quase branca, inclinada, que atravessa
 *      a palavra e depois some por um tempo (o intervalo e o que faz parecer
 *      um brilho que passa, e nao uma luz piscando);
 *   2. a base: laranja claro e uniforme, sem tom escuro nenhum.
 *
 * So a primeira camada anda; a segunda fica parada em `0 0`. */
.nome-luz {
  background:
    linear-gradient(110deg, transparent 38%, rgba(255, 246, 232, .95) 50%, transparent 62%) no-repeat,
    linear-gradient(90deg, #ffb46b 0%, #ff8a3d 50%, #ffa45a 100%);
  background-size: 260% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 2px rgba(255, 170, 110, .45)) drop-shadow(0 0 10px rgba(255, 120, 50, .28));
  animation: reflexo-de-luz 3.8s ease-in-out infinite, nome-brilhando 2.4s ease-in-out infinite;
}
@keyframes reflexo-de-luz {
  0% { background-position: 130% 0, 0 0; }
  45% { background-position: -30% 0, 0 0; }
  100% { background-position: -30% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nome-luz { animation: none; }
}
/* O reflexo mais nitido: faixa estreita e quase branca no centro, com borda
   macia. Larga demais, ela so clareava a palavra inteira e nao lia como um
   brilho passando. */
.nome-luz {
  background:
    linear-gradient(110deg, transparent 42%, rgba(255, 236, 214, .55) 46%, rgba(255, 255, 255, 1) 50%, rgba(255, 236, 214, .55) 54%, transparent 58%) no-repeat,
    linear-gradient(90deg, #ffb46b 0%, #ff8a3d 50%, #ffa45a 100%);
  background-size: 260% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* A caixa de filtros por cima da lista. Mesmo defeito do calendario do
   Inicio: a lista de baixo tem animacao de entrada, que cria camada propria
   pintada depois, e o menu do seletor abria visivel e inclicavel — o clique
   caia no selo da linha da tabela por baixo dele. Vale tambem para qualquer
   bloco com um seletor aberto dentro. */
.caixa-filtros { position: relative; z-index: 20; }
:is(.cartao, .bloco, section, form):has(> * .sel.aberto, > .sel.aberto) { position: relative; z-index: 25; }

/* ---------- a foto do cliente em qualquer avatar ----------
 *
 * Todo avatar de cliente (`.avatar`, `.prod-avatar`, `.mini-cliente`) aceita
 * a foto dentro. Ela preenche o circulo inteiro e e cortada pelo centro —
 * logo retangular encolhida no meio, com borda de fundo em volta, parecia
 * descolada. */
.com-foto { overflow: hidden; padding: 0; background: var(--fundo-alto); }
.com-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* O cliente ao lado do nome, nos cartoes de pecas e rascunhos. */
.cliente-com-foto { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mini-cliente {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--texto);
  background: var(--fundo-alto);
  box-shadow: 0 0 0 1px var(--linha-forte);
}

/* O convite e outra acao — tracejado, para nao parecer mais uma pessoa. */
.chip-convidar { border-style: dashed; padding-left: 10px; color: var(--serie-2); }
.chip-convidar b { margin-right: 2px; }

/* Editor de post: a caixa do arquivo e o primeiro bloco e a maior coisa da tela. */
.solta-arquivo.solta-grande { min-height: 180px; cursor: pointer; justify-content: center; }
.solta-arquivo.solta-grande:hover { border-color: var(--destaque); }
.solta-miniatura { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex: none; }

/* Comentarios & Ajustes do cliente */
.aj-painel { max-width: 860px; background: var(--painel); border: 1px solid var(--linha); border-radius: 20px; padding: 26px 28px; }
.aj-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.aj-topo h2 { margin: 0 0 4px; font-size: 20px; }
.aj-topo p { margin: 0; color: var(--apagado); font-size: 14px; }
.aj-contagem { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(229, 72, 77, .14); color: #ff6b6f; white-space: nowrap; }
.aj-contagem.ok { background: rgba(18, 160, 110, .14); color: #34d399; }
.aj-lista { display: grid; gap: 12px; }
.aj-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 16px; background: var(--painel-2); border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte); transition: border-color .18s ease;
}
.aj-item.aj-pedido { border-left-color: #e5484d; }
.aj-item.aj-observacao { border-left-color: #ff9248; }
.aj-item.aj-resolvido { opacity: .55; }
.aj-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: rgba(255, 90, 31, .14); color: var(--destaque); }
.aj-corpo header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aj-corpo strong { font-size: 14px; }
.aj-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--painel); border: 1px solid var(--linha); color: var(--apagado); }
.aj-pedido .aj-tag { color: #ff6b6f; border-color: rgba(229, 72, 77, .35); background: rgba(229, 72, 77, .1); }
.aj-observacao .aj-tag { color: #ff9248; border-color: rgba(255, 146, 72, .35); background: rgba(255, 146, 72, .1); }
.aj-corpo time { font-size: 12px; color: var(--apagado); margin-left: auto; }
.aj-corpo p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.aj-acao button { white-space: nowrap; font-size: 13px; }
.aj-feito { font-size: 12px; font-weight: 600; color: #34d399; }
.aj-vazio { margin: 0; padding: 28px; text-align: center; color: var(--apagado); border: 1px dashed var(--linha-forte); border-radius: 14px; }
@media (max-width: 640px) {
  .aj-painel { padding: 18px; }
  .aj-item { grid-template-columns: 36px minmax(0, 1fr); }
  .aj-acao { grid-column: 2; }
  .aj-corpo time { margin-left: 0; width: 100%; }
}
.aj-reenviar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linha);
}
.aj-reenviar span { color: var(--apagado); font-size: 14px; }
.aj-reenviar button { min-height: 44px; padding: 0 20px; font-weight: 700; }


/* ---- Quando vai sair: dia e hora proprios, sempre 24h ---- */
.quando-post { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; grid-template-columns: none; }
.quando-campo { position: relative; display: grid; gap: 6px; }
.quando-rotulo { font-size: 13px; font-weight: 600; color: var(--texto); }
.quando-botao {
  display: inline-flex; align-items: center; gap: 10px; min-width: 200px; height: 46px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--linha-forte); background: var(--painel-2); color: var(--texto);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; justify-content: flex-start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.quando-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--apagado); }
.quando-botao em { font-style: normal; font-weight: 500; color: var(--apagado); }
.quando-botao:hover, .quando-botao.aberto { border-color: var(--destaque); }
.quando-botao.aberto { box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
.quando-limpar { height: 46px; font-size: 13px; }
.quando-fundo {
  position: fixed; inset: 0; z-index: 999; background: rgba(5, 8, 12, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: quandoSurge .15s ease;
}
.quando-titulo { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--texto); }
@keyframes quandoSurge { from { opacity: 0; } to { opacity: 1; } }
.quando-pop {
  position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px !important; width: 300px; padding: 14px;
  background: var(--painel); border: 1px solid var(--linha-forte); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.quando-pop .seletor-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.quando-pop .seletor-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.quando-pop .seletor-grade em { font-style: normal; font-size: 11px; color: var(--apagado); padding: 4px 0; }
.quando-pop .seletor-grade button, .hora-grade button {
  height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--texto);
  font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0;
}
.quando-pop .seletor-grade button:hover, .hora-grade button:hover { background: var(--painel-2); }
.quando-pop .seletor-grade button.hoje { box-shadow: inset 0 0 0 1px var(--destaque); }
.quando-pop .seletor-grade button.passado { color: var(--apagado); opacity: .55; }
.quando-pop button.escolhido { background: var(--destaque) !important; color: #fff !important; font-weight: 700; }
.quando-pop-hora { width: 380px; }
.hora-colunas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.hora-colunas small { display: block; font-size: 11px; color: var(--apagado); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.hora-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hora-grade.minutos { grid-template-columns: repeat(3, 1fr); }
.hora-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.hora-rodape strong { font-size: 20px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .quando-botao { min-width: 150px; } .quando-pop, .quando-pop-hora { width: min(320px, 86vw); } }

.hora-digitar { display: grid; gap: 4px; }
.hora-digitar span { font-size: 11px; color: var(--apagado); text-transform: uppercase; letter-spacing: .05em; }
.hora-digitar input {
  width: 120px; height: 44px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--painel-2);
  color: var(--texto); font-size: 22px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.hora-digitar input:focus { outline: none; border-color: var(--destaque); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
.hora-digitar input.invalido { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); }
.postar-agora {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--destaque); background: transparent; color: var(--destaque);
  font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.postar-agora svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.postar-agora:hover { background: var(--destaque); color: #fff; }
.postar-agora:disabled { opacity: .6; cursor: progress; }

/* ---- Producao: posts que nao sairam ---- */
.falhas { border: 1px solid rgba(229, 72, 77, .35); background: linear-gradient(180deg, rgba(229, 72, 77, .07), transparent 70%), var(--painel); border-radius: 20px; padding: 22px 24px; }
.falhas-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.falhas-topo h2 { margin: 0 0 2px; font-size: 18px; }
.falhas-topo p { margin: 0; color: var(--apagado); font-size: 13px; }
.falhas-icone { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(229, 72, 77, .16); color: #ff6b6f; font-weight: 800; font-size: 18px; flex: none; }
.falhas-lista { display: grid; gap: 10px; }
.falha-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--painel-2); border: 1px solid var(--linha); }
.falha-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.falha-avatar img { width: 100%; height: 100%; object-fit: cover; }
.falha-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.falha-linha strong { font-size: 15px; }
.falha-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--painel); border: 1px solid var(--linha); color: var(--apagado); }
.falha-cliente { display: block; margin-top: 2px; color: var(--apagado); font-size: 12px; }
.falha-motivo { margin: 8px 0 0; font-size: 13px; color: var(--apagado); line-height: 1.45; }
.falha-motivo b { color: #ff6b6f; font-weight: 600; }
.falha-acoes { display: flex; gap: 8px; }
.falha-acoes button { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; white-space: nowrap; }
.falha-tentar { background: var(--destaque); color: #fff; border: 0; font-weight: 700; }
.falha-tentar:disabled { opacity: .6; cursor: progress; }
@media (max-width: 720px) {
  .falha-item { grid-template-columns: 36px minmax(0, 1fr); }
  .falha-acoes { grid-column: 1 / -1; }
  .falha-acoes button { flex: 1; }
}

/* ---- Botoes de acao (CTA): mesmo desenho em todo o painel ---- */
button.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
button.cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button.cta-primario {
  border: 1px solid rgba(255, 255, 255, .08); color: #fff;
  background: linear-gradient(180deg, #ff6a2b, #f04a12);
  box-shadow: 0 6px 18px rgba(255, 90, 31, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
button.cta-primario:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 90, 31, .36), inset 0 1px 0 rgba(255, 255, 255, .2); }
button.cta-primario:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(255, 90, 31, .25); }
button.cta-secundario { background: transparent; color: var(--texto); border: 1px solid var(--linha-forte); box-shadow: none; }
button.cta-secundario svg { color: var(--apagado); }
button.cta-secundario:hover { border-color: var(--destaque); color: var(--destaque); background: rgba(255, 90, 31, .06); }
button.cta-secundario:hover svg { color: var(--destaque); }
button.cta:focus-visible { outline: 3px solid rgba(255, 90, 31, .35); outline-offset: 2px; }
button.cta:disabled { opacity: .6; cursor: progress; transform: none; }
button.cta.prod-novo { height: 46px; padding: 0 22px; border-radius: 14px; font-size: 15px; }
.falha-acoes button.cta { height: 40px; padding: 0 16px; border-radius: 11px; }

/* ---- Escolher cliente (Novo conteudo) ---- */
dialog.escolher-cliente {
  width: min(460px, calc(100vw - 32px)); padding: 22px; border-radius: 20px;
  border: 1px solid var(--linha-forte); background: var(--painel); color: var(--texto);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
dialog.escolher-cliente::backdrop { background: rgba(5, 8, 12, .55); backdrop-filter: blur(6px); }
.ec-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ec-topo h3 { margin: 0 0 4px; font-size: 18px; }
.ec-topo p { margin: 0; font-size: 13px; color: var(--apagado); }
.ec-fechar { width: 34px; height: 34px; padding: 0; border-radius: 10px; display: grid; place-items: center; background: transparent; border: 1px solid var(--linha); color: var(--apagado); cursor: pointer; }
.ec-fechar:hover { color: var(--texto); border-color: var(--linha-forte); }
.ec-fechar svg, .ec-seta, .ec-busca svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ec-busca { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--linha-forte); background: var(--painel-2); color: var(--apagado); }
.ec-busca input { flex: 1; border: 0; background: transparent; color: var(--texto); font-size: 14px; outline: none; padding: 0; height: auto; }
.ec-busca:focus-within { border-color: var(--destaque); }
.ec-lista { display: grid; gap: 8px; max-height: min(420px, 60vh); overflow-y: auto; padding: 3px; margin: -3px; }
button.ec-item {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: var(--painel-2); border: 1px solid var(--linha); color: var(--texto); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
button.ec-item:hover, button.ec-item:focus-visible { border-color: var(--destaque); background: rgba(255, 90, 31, .06); outline: none; }
button.ec-item:hover .ec-seta { color: var(--destaque); transform: translateX(2px); }
.ec-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; }
.ec-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ec-texto { display: grid; gap: 2px; min-width: 0; }
.ec-texto strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-texto small { font-size: 12px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-seta { color: var(--apagado); transition: transform .15s ease, color .15s ease; }
.ec-vazio { margin: 8px 0; text-align: center; color: var(--apagado); font-size: 13px; }

/* O card do cliente vence os estilos gerais de botao (que centralizavam o
   conteudo e jogavam a seta colada no nome). */
dialog.escolher-cliente { outline: none; }
dialog.escolher-cliente button.ec-item {
  display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 18px; justify-content: stretch; justify-items: start;
  height: auto; min-height: 68px; gap: 14px; box-shadow: none; transform: none; filter: none;
}
dialog.escolher-cliente button.ec-item:hover { transform: none; box-shadow: none; }
dialog.escolher-cliente button.ec-item:focus { outline: none; }
dialog.escolher-cliente button.ec-item:not(:hover):not(:focus-visible) { border-color: var(--linha); background: var(--painel-2); }
dialog.escolher-cliente .ec-avatar { width: 44px; height: 44px; font-size: 15px; }
dialog.escolher-cliente .ec-texto { justify-self: stretch; text-align: left; }
dialog.escolher-cliente .ec-texto small { text-transform: none; letter-spacing: 0; font-weight: 500; }
dialog.escolher-cliente .ec-seta { justify-self: end; width: 18px; height: 18px; }
dialog.escolher-cliente .ec-fechar { box-shadow: none; }
dialog.escolher-cliente .ec-avatar:not(:has(img)) { background: rgba(255, 90, 31, .14); color: var(--destaque); }

/* ---- Tags do titulo da Producao ---- */
.prod-tag {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linha-forte); color: var(--texto);
}
.prod-tag svg { width: 15px; height: 15px; fill: none; stroke: var(--apagado); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.prod-tag.alerta {
  cursor: pointer; color: #ff8a8d; background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .35);
  box-shadow: none; transition: background .15s ease, border-color .15s ease;
}
button.prod-tag.alerta:hover { background: rgba(229, 72, 77, .18); border-color: rgba(229, 72, 77, .55); transform: none; }
.prod-tag-pulso { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; flex: none; }
.prod-tag-pulso::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(229, 72, 77, .5);
  animation: prodPulso 1.8s ease-out infinite;
}
@keyframes prodPulso { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .prod-tag-pulso::after { animation: none; } }
.prod-titulo-linha { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }


/* ---- Meu dia (Inicio do colaborador) ---- */
.md { --md-laranja: #ff7a3d; --md-verde: #34d399; --md-azul: #60a5fa; }
.md-cabeca { margin-bottom: 22px; }
.md-data { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); margin-bottom: 6px; }
.md-cabeca h2 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.01em; }
.md-cabeca p { margin: 0; color: var(--apagado); font-size: 15px; }
.md-cabeca p b { color: #ff8a8d; font-weight: 600; }

.md-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.md-numero {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px;
  background: var(--painel); border: 1px solid var(--linha); position: relative; overflow: hidden;
}
.md-numero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; opacity: .08; background: currentColor; }
.md-numero.laranja { color: var(--md-laranja); }
.md-numero.verde { color: var(--md-verde); }
.md-numero.azul { color: var(--md-azul); }
.md-numero > div { display: grid; gap: 2px; }
.md-numero b { font-size: 30px; line-height: 1; color: var(--texto); }
.md-numero > div > span { color: var(--apagado); font-size: 13px; }
.md-numero-icone, .md-bloco-icone {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.md-bloco-icone { width: 38px; height: 38px; border-radius: 12px; }
.md-bloco-icone.laranja { color: var(--md-laranja); }
.md-bloco-icone.verde { color: var(--md-verde); }
.md-bloco-icone.azul { color: var(--md-azul); }
.md svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-numero-icone svg { width: 22px; height: 22px; }
.md-bloco-icone svg { width: 19px; height: 19px; }

.md-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.md-saindo { grid-column: 1 / -1; }
.md-bloco { background: var(--painel); border: 1px solid var(--linha); border-radius: 22px; padding: 20px 22px; }
.md-bloco > header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.md-bloco > header > div { flex: 1; min-width: 0; }
.md-bloco h3 { margin: 0; font-size: 17px; }
.md-sub { margin: 2px 0 0; color: var(--apagado); font-size: 13px; }
.md-conta { min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .06); color: var(--texto); }
.md-lista { display: grid; gap: 8px; }
.md-vazio { margin: 0; padding: 22px; text-align: center; color: var(--apagado); font-size: 13px; border: 1px dashed var(--linha-forte); border-radius: 14px; list-style: none; }

button.md-post {
  display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; height: auto; padding: 12px 14px; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--painel-2); border: 1px solid var(--linha); color: var(--texto); box-shadow: none; transform: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
button.md-post:hover { border-color: rgba(255, 90, 31, .55); background: rgba(255, 90, 31, .05); transform: translateY(-1px); box-shadow: none; }
.md-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(255, 90, 31, .14); color: var(--destaque); }
.md-avatar img { width: 100%; height: 100%; object-fit: cover; }
.md-post-texto { display: grid; gap: 3px; min-width: 0; }
.md-post-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-post-texto small, .md-post-lado small { font-size: 12px; color: var(--apagado); }
.md-post-lado { display: grid; justify-items: end; gap: 5px; }
.md-estado { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.md-estado.vermelho { background: rgba(229, 72, 77, .14); color: #ff8a8d; }
.md-estado.amarelo { background: rgba(255, 192, 120, .14); color: #ffc078; }
.md-estado.laranja { background: rgba(255, 146, 72, .14); color: #ff9248; }
.md-estado.cinza { background: rgba(255, 255, 255, .06); color: var(--apagado); }
.md-estado.verde { background: rgba(18, 160, 110, .14); color: #34d399; }

/* nova tarefa */
.md-nova { margin-bottom: 12px; border: 1px solid var(--linha-forte); border-radius: 14px; background: var(--painel-2); transition: border-color .15s ease, box-shadow .15s ease; }
.md-nova.aberto, .md-nova:focus-within { border-color: rgba(52, 211, 153, .6); box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); }
.md-nova-linha { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.md-nova-mais { color: var(--md-verde); display: grid; }
.md-nova-mais svg { width: 18px; height: 18px; }
.md-nova-linha input { flex: 1; height: 46px; border: 0; background: transparent; color: var(--texto); font-size: 14px; outline: none; padding: 0; box-shadow: none; }
.md-nova-opcoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; }
.md-nova-opcoes[hidden] { display: none; }
.md-nova-opcoes select { height: 36px; border-radius: 10px; font-size: 13px; max-width: 200px; }
.md-atalhos { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--painel); border: 1px solid var(--linha); }
button.md-atalho { height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: var(--apagado); font-size: 12px; font-weight: 600; box-shadow: none; cursor: pointer; }
button.md-atalho:hover { color: var(--texto); transform: none; }
button.md-atalho.ativo { background: rgba(52, 211, 153, .16); color: var(--md-verde); }
button.md-criar { margin-left: auto; height: 36px; padding: 0 16px; font-size: 13px; }

/* lista de tarefas */
.md-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.md-todo li:not(.md-vazio) { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); transition: opacity .3s ease, border-color .15s ease; }
.md-todo li:not(.md-vazio):hover { border-color: var(--linha-forte); }
.md-todo li.feita { opacity: .45; }
.md-todo li.feita strong { text-decoration: line-through; }
button.md-check { width: 24px; height: 24px; padding: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; border: 2px solid var(--linha-forte); color: transparent; cursor: pointer; box-shadow: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
button.md-check svg { width: 14px; height: 14px; stroke-width: 3; }
button.md-check:hover { border-color: var(--md-verde); color: var(--md-verde); transform: none; }
.md-todo li.feita button.md-check { background: #12a06e; border-color: #12a06e; color: #fff; }
.md-todo-texto { display: grid; gap: 2px; min-width: 0; }
.md-todo-texto strong { font-size: 14px; font-weight: 600; }
.md-todo-texto small { font-size: 12px; color: var(--apagado); }
.md-prazo { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--apagado); white-space: nowrap; }
.md-prazo.hoje { background: rgba(255, 146, 72, .14); color: #ff9248; }
.md-prazo.atrasada { background: rgba(229, 72, 77, .14); color: #ff8a8d; }

.md-saindo .md-lista { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.md-linha-tempo { display: grid; gap: 6px; }
.md-hora { font-size: 12px; font-weight: 700; color: var(--md-azul); }
@media (max-width: 960px) {
  .md-grade, .md-numeros { grid-template-columns: minmax(0, 1fr); }
  .md-cabeca h2 { font-size: 24px; }
}

/* ---- Tarefas (listas por cliente): minimalista ---- */
.tl-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.tl-cabeca h2 { margin: 0 0 4px; font-size: 28px; letter-spacing: -.01em; }
.tl-cabeca p { margin: 0; color: var(--apagado); font-size: 14px; }
.tl-resumo { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--apagado); }
.tl-resumo b { color: var(--texto); font-size: 15px; margin-right: 3px; }
.tl-resumo .ruim, .tl-resumo .ruim b { color: #ff8a8d; }

.tl-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
button.tl-cliente {
  display: grid !important; gap: 14px; width: 100%; height: auto; padding: 18px; text-align: left; cursor: pointer;
  border-radius: 18px; background: var(--painel); border: 1px solid var(--linha); color: var(--texto);
  box-shadow: none; transform: none; transition: border-color .15s ease, transform .15s ease;
}
button.tl-cliente:hover { border-color: rgba(255, 90, 31, .5); transform: translateY(-1px); box-shadow: none; }
.tl-cliente-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tl-cliente-nome { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tl-cliente-nome strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-cliente-nome small { font-size: 12px; color: var(--apagado); }
.tl-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px; background: rgba(255, 90, 31, .14); color: var(--destaque); }
.tl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tl-avatar.grande { width: 48px; height: 48px; font-size: 16px; }
.tl-barra { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.tl-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9248, var(--destaque)); }
.tl-cliente-pe { display: flex; gap: 14px; font-size: 12px; color: var(--apagado); }
.tl-cliente-pe span:empty { display: none; }
.tl-cliente-pe b { color: var(--texto); }

.tl-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tl-topo-nome { flex: 1; min-width: 0; }
.tl-topo-nome h2 { margin: 0 0 2px; font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-topo-nome p { margin: 0; color: var(--apagado); font-size: 13px; }
button.tl-voltar, button.tl-equipe { box-shadow: none; transform: none; cursor: pointer; }
button.tl-voltar { width: 40px; height: 40px; padding: 0; border-radius: 12px; display: grid; place-items: center; background: transparent; border: 1px solid var(--linha); color: var(--apagado); }
button.tl-voltar:hover { color: var(--texto); border-color: var(--linha-forte); }
button.tl-equipe { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: transparent; border: 1px solid var(--linha); color: var(--apagado); font-size: 13px; font-weight: 600; }
button.tl-equipe:hover { color: var(--texto); border-color: var(--linha-forte); }
.tl-rostos { display: inline-flex; }
.tl-rostos .avatar-mini { margin-left: -6px; border: 2px solid var(--painel); }
.tl-rostos .avatar-mini:first-child { margin-left: 0; }
.tl-topo svg, .tl-nova svg, .tl-tarefa svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-voltar svg { width: 18px; height: 18px; }

.tl-nova { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; margin-bottom: 14px; border-radius: 16px; background: var(--painel); border: 1px solid var(--linha); transition: border-color .15s ease, box-shadow .15s ease; }
.tl-nova:focus-within { border-color: rgba(255, 90, 31, .55); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.tl-nova-mais { color: var(--destaque); display: grid; }
.tl-nova-mais svg { width: 20px; height: 20px; }
.tl-nova input { flex: 1; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 0; color: var(--texto); font-size: 15px; }
.tl-nova-dica { font-size: 12px; color: var(--apagado); opacity: 0; transition: opacity .15s ease; white-space: nowrap; }
.tl-nova:focus-within .tl-nova-dica { opacity: 1; }

.tl-lista { display: grid; background: var(--painel); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; }
.tl-tarefa { display: grid !important; grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--linha); background: transparent; transition: background .15s ease; }
.tl-tarefa:last-child { border-bottom: 0; }
.tl-tarefa:hover { background: rgba(255, 255, 255, .02); }
.tl-tarefa[draggable="true"] { cursor: grab; }
button.tl-check { width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 2px solid var(--linha-forte); color: transparent; box-shadow: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
button.tl-check svg { width: 12px; height: 12px; stroke-width: 3; }
button.tl-check:hover { border-color: #34d399; color: #34d399; transform: none; }
.tl-tarefa.feita button.tl-check { background: #12a06e; border-color: #12a06e; color: #fff; }
.tl-tarefa .corpo { display: grid; gap: 5px; min-width: 0; }
.tl-tarefa .titulo { font-size: 15px; font-weight: 500; }
.tl-tarefa.feita .titulo { text-decoration: line-through; color: var(--apagado); }
.tl-tarefa .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-tarefa .meta:empty { display: none; }
.tl-dono { font-size: 12px; color: var(--apagado); }
.tl-dono.apagado { opacity: .6; }
.tl-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--apagado); text-transform: capitalize; }
.tl-tag.ruim { background: rgba(229, 72, 77, .14); color: #ff8a8d; }
.tl-tag.prioridade-alta { background: rgba(255, 146, 72, .14); color: #ff9248; }
.tl-tag.prioridade-urgente { background: rgba(229, 72, 77, .14); color: #ff8a8d; }
button.tl-ajustar { width: 32px; height: 32px; padding: 0; border-radius: 9px; display: grid; place-items: center; background: transparent; border: 0; color: var(--apagado); box-shadow: none; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease; }
button.tl-ajustar svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.tl-tarefa:hover button.tl-ajustar, button.tl-ajustar:focus-visible { opacity: 1; }
button.tl-ajustar:hover { background: rgba(255, 255, 255, .06); color: var(--texto); transform: none; }
@media (hover: none) { button.tl-ajustar { opacity: 1; } }

.tl-feitas { margin-top: 16px; }
.tl-feitas summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; font-size: 13px; font-weight: 600; color: var(--apagado); }
.tl-feitas summary::-webkit-details-marker { display: none; }
.tl-feitas summary::before { content: "›"; display: inline-block; transition: transform .15s ease; }
.tl-feitas[open] summary::before { transform: rotate(90deg); }
.tl-feitas .tl-lista { margin-top: 8px; }
.tl-vazio { margin: 0; padding: 28px; text-align: center; color: var(--apagado); font-size: 14px; }
.tl-lista > .tl-vazio { border: 0; }
@media (max-width: 640px) {
  .tl-topo { flex-wrap: wrap; }
  .tl-nova-dica { display: none; }
}
/* Os estilos antigos de .tarefa/.marcador nao entram na lista nova. */
.tl-lista .tarefa.tl-tarefa { margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--linha); box-shadow: none; background: transparent; }
.tl-lista .tarefa.tl-tarefa:last-child { border-bottom: 0; }
.tl-lista .tarefa.tl-tarefa:hover { background: rgba(255, 255, 255, .02); }
.tl-lista .tarefa.tl-tarefa:not(.feita) button.tl-check { color: transparent !important; background: transparent !important; }
.tl-lista .tarefa.tl-tarefa:not(.feita) button.tl-check:hover { color: #34d399 !important; border-color: #34d399; }
.tl-lista .tarefa.tl-tarefa.feita button.tl-check { color: #fff !important; background: #12a06e !important; border-color: #12a06e; }

/* Meu dia: Em andamento ao vivo */
.md-ao-vivo { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: middle; background: rgba(229, 72, 77, .12); color: #ff8a8d; }
.md-ao-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; animation: mdVivo 1.6s ease-in-out infinite; }
@keyframes mdVivo { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .md-ao-vivo i { animation: none; } }
.md-voce { color: #34d399; font-weight: 600; }
.md-saindo .md-lista { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.md-tarefas .md-todo { max-height: 420px; overflow-y: auto; }
.md-vivo .md-post-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Para quem e a tarefa (so o admin ve) */
.md-nova-opcoes select[name="responsavelId"] { max-width: 180px; }
.tl-nova select.tl-para { height: 34px; border-radius: 10px; font-size: 13px; max-width: 200px; background: var(--painel-2); }

/* ---- Nova tarefa para a equipe (janela do admin) ---- */
dialog.te-janela {
  width: min(560px, calc(100vw - 32px)); padding: 24px; border-radius: 20px;
  border: 1px solid var(--linha-forte); background: var(--painel); color: var(--texto);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45); outline: none;
}
dialog.te-janela::backdrop { background: rgba(5, 8, 12, .55); backdrop-filter: blur(6px); }
.te-form { display: grid; gap: 18px; }
.te-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.te-topo h3 { margin: 0 0 4px; font-size: 19px; }
.te-topo p { margin: 0; color: var(--apagado); font-size: 13px; }
.te-campo { display: grid; gap: 8px; }
.te-campo > span { font-size: 13px; font-weight: 600; }
.te-campo input[name="titulo"] { height: 46px; border-radius: 12px; font-size: 15px; }
.te-campo select { height: 40px; border-radius: 10px; }
.te-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.te-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.te-pessoa input { position: absolute; opacity: 0; pointer-events: none; }
.te-pessoa-cartao { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel-2); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.te-pessoa-cartao:hover { border-color: var(--linha-forte); }
.te-pessoa input:checked + .te-pessoa-cartao { border-color: var(--destaque); background: rgba(255, 90, 31, .08); }
.te-pessoa input:focus-visible + .te-pessoa-cartao { box-shadow: 0 0 0 3px rgba(255, 90, 31, .25); }
.te-rosto { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; color: #fff; background: #3b4252; }
.te-pessoa-nome { display: grid; min-width: 0; }
.te-pessoa-nome strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-pessoa-nome small { font-size: 11px; color: var(--apagado); text-transform: capitalize; }
.te-pe { display: flex; justify-content: flex-end; gap: 10px; }
.te-form .erro:empty { display: none; }
button.inicio-nova-tarefa { height: 40px; font-size: 13px; }
.dar-tarefa svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .te-linha { grid-template-columns: 1fr; } }

/* Meu dia do admin: filtro por pessoa e tarefas em andamento */
.md-pessoas { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; }
button.md-pessoa {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px;
  background: var(--painel); border: 1px solid var(--linha); color: var(--apagado); font-size: 13px; font-weight: 600;
  box-shadow: none; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
button.md-pessoa:first-child { padding-left: 14px; }
button.md-pessoa:hover { color: var(--texto); border-color: var(--linha-forte); transform: none; }
button.md-pessoa.ativo { color: var(--texto); border-color: var(--destaque); background: rgba(255, 90, 31, .1); }
.md-pessoa-rosto { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, .08); color: var(--texto); }
button.md-pessoa em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; background: rgba(52, 211, 153, .16); color: #34d399; }
.md-todo-lado { display: inline-flex; gap: 6px; align-items: center; }
/* lixeira da tarefa: aparece ao passar o mouse na linha (no toque, sempre) */
.md-excluir { display: grid; place-items: center; width: 30px; height: 30px; padding: 0 !important; border-radius: 9px !important;
  border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; color: var(--apagado) !important;
  opacity: 0; cursor: pointer; transition: opacity .12s ease, color .12s ease, background .12s ease; }
.md-excluir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.md-todo li:hover .md-excluir, .md-excluir:focus-visible { opacity: 1; }
.md-excluir:hover { color: #ff8a8d !important; background: rgba(255, 107, 107, .12) !important; border-color: rgba(255, 107, 107, .25) !important; }
@media (hover: none) { .md-excluir { opacity: .7; } }
.md-excluir-detalhe { color: #ff8a8d !important; }
/* outra regra de botao trocava para flex e a lixeira ia para a esquerda */
.md-todo-lado .md-excluir { display: flex !important; align-items: center !important; justify-content: center !important; flex: none; }
.md-todo-lado .md-excluir svg { margin: 0 !important; flex: none; }
.md-prazo.fazendo { background: rgba(96, 165, 250, .16); color: #60a5fa; }
.md-fazendo-txt { color: #60a5fa; font-weight: 600; }

/* ---------- ponto do colaborador, por periodo ---------- */
.pt-janela { width: min(860px, calc(100vw - 32px)); }
.pt-topo { gap: 14px !important; }
.pt-topo > div:nth-of-type(1) { flex: 1; min-width: 0; display: grid; }
.pt-topo small { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--destaque); }
.pt-topo h2 { margin: 0; }
.pt-avatar { width: 42px; height: 42px; flex: none; }
.pt-periodo-caixa { position: relative; }
.pt-periodo {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; margin: 0; border-radius: 11px;
  background: var(--fundo-alto); border: 1px solid var(--linha-forte); color: var(--texto); font-weight: 700; font-size: .86rem; box-shadow: none;
}
.pt-periodo:hover { border-color: var(--destaque); transform: none; box-shadow: none; }
.pt-periodo svg { width: 16px; height: 16px; fill: none; stroke: var(--destaque); stroke-width: 2; stroke-linecap: round; }
.pt-periodo-caixa .cal-janela { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; }
.pt-corpo { padding: 18px 24px 22px; overflow-y: auto; display: grid; gap: 16px; }
.pt-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); }
.pt-resumo > div { display: grid; gap: 3px; padding: 12px 14px; background: var(--fundo-alto); }
.pt-resumo > div + div { border-left: 1px solid var(--linha); }
.pt-resumo span { font-size: .7rem; color: var(--apagado); }
.pt-resumo strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.pt-resumo .alerta strong { color: #f5a524; }
.pt-resumo .apagado strong { color: var(--apagado); }
.pt-tabela { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; }
.pt-cab, .pt-linha { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr) 1.2fr; align-items: center; gap: 8px; padding: 0 12px; }
.pt-cab { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); padding-bottom: 4px; position: sticky; top: 0; background: var(--painel); z-index: 1; }
.pt-linha { min-height: 44px; border-radius: 11px; background: var(--fundo-alto); border: 1px solid transparent; }
.pt-linha.aberta { border-color: rgba(245, 165, 36, .4); }
.pt-linha.vazia { opacity: .5; background: transparent; border: 1px dashed var(--linha-forte); }
.pt-dia { display: flex; align-items: baseline; gap: 7px; }
.pt-dia b { font-size: 1rem; }
.pt-dia small { font-size: .74rem; color: var(--apagado); text-transform: capitalize; }
.pt-hora { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem; }
.pt-hora.falta { color: var(--apagado); font-weight: 400; }
.pt-total { display: grid; font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pt-total i { font-style: normal; font-size: .66rem; font-weight: 700; color: #f5a524; }
.pt-sem { grid-column: 2 / -1; font-size: .78rem; color: var(--apagado); }
.pt-nada { margin: 0; color: var(--apagado); }
@media (max-width: 700px) {
  .pt-resumo { grid-template-columns: repeat(2, 1fr); }
  .pt-cab { display: none; }
  .pt-linha { grid-template-columns: repeat(3, 1fr); padding: 8px 12px; }
  .pt-dia { grid-column: 1 / -1; }
}

/* ponto em grade: o periodo todo de uma vez, sem rolar */
.pt-janela { width: min(920px, calc(100vw - 32px)); }
.pt-corpo { overflow: visible !important; padding-top: 14px !important; gap: 12px !important; }
.pt-resumo > div { padding: 10px 14px; }
.pt-resumo strong { font-size: 1.15rem; }
.pt-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.pt-semana { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); padding-left: 6px; }
.pt-cel {
  display: grid; grid-template-rows: auto 1fr auto; min-height: 58px; padding: 5px 7px; border-radius: 9px;
  background: var(--fundo-alto); border: 1px solid transparent; min-width: 0;
}
.pt-cel b { font-size: .78rem; color: var(--apagado); }
.pt-cel.ok { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .22); }
.pt-cel.ok b, .pt-cel.aberto b { color: var(--texto); }
.pt-cel.aberto { background: rgba(245, 165, 36, .1); border-color: rgba(245, 165, 36, .4); }
.pt-cel.falta { border: 1px dashed rgba(239, 68, 68, .45); background: transparent; }
.pt-cel.falta small { align-self: end; font-size: .62rem; color: #f87171; }
.pt-cel.livre { background: transparent; opacity: .45; }
.pt-cel.fora { background: transparent; opacity: .2; }
.pt-cel.hoje { box-shadow: inset 0 0 0 1.5px var(--destaque); }
.pt-cel-horas { align-self: center; font-size: .68rem; color: var(--apagado); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-cel strong { font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pt-cel.aberto strong { color: #f5a524; }
.pt-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: .72rem; color: var(--apagado); }
.pt-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -9px; }
.pt-legenda i.ok { background: rgba(34, 197, 94, .35); }
.pt-legenda i.aberto { background: rgba(245, 165, 36, .45); }
.pt-legenda i.falta { border: 1px dashed #f87171; }
.pt-legenda span { margin-left: auto; }

/* foto de perfil */
.avatar-pessoa.com-foto, #avatar.com-foto { padding: 0; overflow: hidden; background: var(--fundo-alto) !important; }
.avatar-pessoa.com-foto img, #avatar.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.avatar-trocar { position: relative; flex: none; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; cursor: pointer; border-radius: 50%; min-height: 0; }
.avatar-trocar:hover { transform: none; box-shadow: none; background: none; }
.avatar-trocar > i {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; opacity: 0;
  background: rgba(0, 0, 0, .55); color: #fff; transition: opacity .15s;
}
.avatar-trocar:hover > i, .avatar-trocar:focus-visible > i { opacity: 1; }
.avatar-trocar > i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* icones do card da equipe: um grupo so, mesmo tamanho e mesmo traco */
.cartao-pessoa header { align-items: center; }
.engrenagem-pessoa {
  width: 32px !important; height: 32px !important; min-height: 0; padding: 0 !important; margin: 0 0 0 4px; border-radius: 9px !important;
  display: grid; place-items: center; background: var(--fundo-alto) !important; border: 1px solid var(--linha) !important;
  color: var(--apagado) !important; box-shadow: none !important; transition: color .15s, border-color .15s, background .15s;
}
.engrenagem-pessoa:hover { color: var(--destaque) !important; border-color: rgba(255, 90, 31, .45) !important; background: rgba(255, 90, 31, .08) !important; transform: none !important; }
.engrenagem-pessoa svg { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.engrenagem-pessoa + .engrenagem-pessoa { margin-left: 4px; }

/* o nome abre os ajustes (a engrenagem saiu do card) */
.nome-pessoa { display: block; max-width: 100%; padding: 0; margin: 0; min-height: 0; border: 0; background: none; box-shadow: none; text-align: left; font: inherit; font-weight: 700; font-size: 1rem; color: var(--texto); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nome-pessoa:hover { color: var(--destaque); background: none; transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }


/* ---- grafico do financeiro: tracejado que corre parado, onda no cursor ---- */
.fluxo-tela { cursor: crosshair; }
.fluxo-linha { opacity: .35; }
.fluxo-tracejado {
  stroke-dasharray: 10 8;
  animation: fluxo-corre 1.6s linear infinite;
}
@keyframes fluxo-corre { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .fluxo-tracejado { animation: none; } }

/* ---- faturas em cartoes ---- */
.fat-lista { display: grid; gap: 8px; }
.fat-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 100px 130px 100px 120px;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--painel);
  transition: border-color .15s, transform .15s;
}
.fat-card:hover { border-color: rgba(255, 90, 31, .35); transform: translateY(-1px); }
.fat-card.atrasada { border-left: 3px solid #e5484d; }
.fat-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 90, 31, .12);
  color: var(--destaque);
  font-weight: 700;
}
.fat-info { display: grid; gap: 2px; min-width: 0; }
.fat-info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fat-info small, .fat-vence small { font-size: 12px; color: var(--apagado); }
.fat-vence { display: grid; gap: 2px; font-size: 13px; }
.fat-valor { font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fat-card .selo { justify-self: center; text-transform: capitalize; }
.fat-acoes { display: flex; gap: 6px; justify-content: flex-end; min-width: 90px; }
.fat-acoes button, .fat-acoes a { height: 32px; padding: 0 12px; font-size: 12px; display: inline-flex; align-items: center; }

@media (max-width: 760px) {
  .fat-card { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 8px; }
  .fat-vence { grid-column: 2; }
  .fat-acoes { grid-column: 1 / -1; }
}

.fat-card[hidden] { display: none; }
.fat-card .fat-status { justify-self: center; }

.fat-filtro {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--fundo-alto);
}
.fat-filtro button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--apagado);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}
.fat-filtro button b { margin-left: 4px; font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }
.fat-filtro button:hover { color: var(--texto); background: transparent; }
.fat-filtro button.ativo { background: rgba(255, 90, 31, .14); color: var(--destaque); }

/* Situacao: ponto + texto, sem caixa — le rapido e nao briga com o valor. */
.fat-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--apagado);
  white-space: nowrap;
}
.fat-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}
.fat-status.paga { color: #3fcf8e; }
.fat-status.emitida { color: #f5b947; }
.fat-status.vencida, .fat-status.atrasada { color: #ff6b6b; }
.fat-status.rascunho { color: var(--apagado); }
.fat-status.cancelada { color: var(--apagado); text-decoration: line-through; }
.fat-card[data-situacao="cancelada"] { opacity: .55; }
.fat-card[data-situacao="cancelada"] .fat-valor { text-decoration: line-through; }
.janela-detalhe .discreto.perigo { color: #ff8a8d; }
.janela-detalhe .discreto.perigo:hover { background: rgba(255, 107, 107, .12); }

.fat-baixa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(63, 207, 142, .35);
  border-radius: 999px;
  background: rgba(63, 207, 142, .10);
  color: #3fcf8e;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fat-baixa svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fat-baixa:hover { background: #3fcf8e; color: #0b1410; }

.fat-filtro { position: relative; }
.fat-filtro button { position: relative; z-index: 1; transition: color .2s; }
.fat-filtro button.ativo { background: transparent; }
.fat-filtro-marca {
  position: absolute;
  top: 3px;
  left: 3px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 90, 31, .14);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1);
}
.fat-card .fat-status { justify-self: start; }

/* ---- painel do faturado: orbes, grade, luz no cursor, barra de recebido ---- */
.fin-heroi {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 40px 24px 30px;
  background: #0d1118;
  border: 1px solid rgba(255, 255, 255, .06);
}
.fin-heroi::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(70% 80% at 50% 40%, #000 20%, transparent 75%);
}
.fin-heroi-orbe {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.fin-heroi-orbe.um {
  width: 340px; height: 340px; top: -160px; left: 10%;
  background: #ff5a1f;
  animation: orbe-a 14s ease-in-out infinite alternate;
}
.fin-heroi-orbe.dois {
  width: 300px; height: 300px; bottom: -180px; right: 8%;
  background: #ffb066;
  opacity: .28;
  animation: orbe-b 18s ease-in-out infinite alternate;
}
@keyframes orbe-a { to { transform: translate(120px, 40px) scale(1.15); } }
@keyframes orbe-b { to { transform: translate(-140px, -30px) scale(.9); } }
.fin-heroi-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 140, 80, .14), transparent 70%);
}
.fin-heroi:hover .fin-heroi-luz { opacity: 1; }

.fin-heroi-rotulo { letter-spacing: .02em; }
.fin-heroi-valor {
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 700;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .62));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fin-heroi-barra {
  width: min(360px, 80%);
  height: 6px;
  margin: 16px 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.fin-heroi-barra i {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5a1f, #ffb066);
  box-shadow: 0 0 12px rgba(255, 110, 50, .6);
  animation: barra-enche 1.1s cubic-bezier(.2, .8, .2, 1);
}
@keyframes barra-enche { from { width: 0; } }

.fin-heroi-apoio { gap: 22px; margin: 0; font-size: 14px; color: #fff; font-weight: 600; }
.fin-heroi-apoio span { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.fin-heroi-apoio small { font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, .55); }
.fin-heroi-apoio .ponto { width: 8px; height: 8px; border-radius: 50%; }
.fin-heroi-apoio .ponto.entrou { background: #ffb066; box-shadow: 0 0 8px #ffb066; }
.fin-heroi-apoio .ponto.falta { background: rgba(255, 255, 255, .25); }

.fin-heroi-contas { margin-top: 14px; }

.fin-heroi .fin-redondo-bolha.grande { position: relative; transition: transform .2s; }
.fin-heroi .fin-redondo-bolha.grande::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #ff5a1f;
  animation: pulso 2.4s ease-out infinite;
}
.fin-heroi .fin-redondo:hover .fin-redondo-bolha.grande { transform: scale(1.08) rotate(90deg); }
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fin-heroi-orbe, .fin-heroi-barra i, .fin-heroi .fin-redondo-bolha.grande::after { animation: none; }
}

/* Botao principal do painel: pilula laranja com brilho que passa. */
.fin-heroi-acoes { margin-top: 26px; }
.fin-lancar {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px 0 8px;
  border: 1px solid rgba(255, 180, 130, .45);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff7a3d, #ff5a1f);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(255, 90, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .2s, box-shadow .2s;
}
.fin-lancar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: brilho-passa 3.2s ease-in-out infinite;
}
@keyframes brilho-passa { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.fin-lancar:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(255, 90, 31, .85), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.fin-lancar:active { transform: translateY(0) scale(.98); }
.fin-lancar-mais {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: 20px;
  line-height: 1;
  transition: transform .3s;
}
.fin-lancar:hover .fin-lancar-mais { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .fin-lancar::after { animation: none; } }

/* ---- detalhes da venda ---- */
.fat-card { cursor: pointer; }
.janela-detalhe { width: min(520px, calc(100vw - 32px)); }
.det-cabeca { display: flex; align-items: center; gap: 12px; }
.det-cabeca > div { flex: 1; min-width: 0; }
.det-cabeca h2 { margin: 0; font-size: 17px; }
.det-cabeca small { font-size: 12px; color: var(--apagado); }
.det-total {
  display: grid;
  gap: 2px;
  padding: 16px;
  border-radius: var(--raio-m);
  background: rgba(255, 90, 31, .08);
  border: 1px solid rgba(255, 90, 31, .18);
}
.det-total small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.det-total strong { font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.det-total em { font-style: normal; font-size: 12px; color: var(--apagado); }
.det-itens { display: grid; border: 1px solid var(--linha); border-radius: var(--raio-m); }
.det-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
}
.det-item + .det-item { border-top: 1px solid var(--linha); }
.det-item small { color: var(--apagado); font-variant-numeric: tabular-nums; }
.det-item strong { font-variant-numeric: tabular-nums; }
.det-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.det-linha { display: grid; gap: 2px; }
.det-linha span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.det-linha strong { font-size: 14px; font-weight: 600; }
.det-obs { margin: 0; font-size: 13px; color: var(--apagado); }
.venda-acoes a.discreto { display: inline-flex; align-items: center; height: 40px; }
.fat-baixa.grande { height: 40px; padding: 0 18px; font-size: 13px; }

/* ---- planos perto de vencer ---- */
.pl-vencendo {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
}
.pl-vencendo header h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.pl-vencendo header h3 span {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 90, 31, .14); color: var(--destaque);
}
.pl-vencendo header .dica { margin: 4px 0 14px; }
.pl-venc-lista { display: grid; gap: 8px; }
.pl-venc {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--cor-venc);
  border-radius: var(--raio-m);
  --cor-venc: #f5b947;
}
.pl-venc.urgente { --cor-venc: #ff8a3d; }
.pl-venc.vencido { --cor-venc: #ff6b6b; }
.pl-venc-avatar { width: 40px; height: 40px; border-radius: 50%; }
.pl-venc-info { display: grid; gap: 2px; min-width: 0; }
.pl-venc-info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-venc-info small, .pl-venc-prazo small { font-size: 12px; color: var(--apagado); }
.pl-venc-prazo { display: grid; gap: 2px; text-align: right; }
.pl-venc-prazo b { font-size: 13px; color: var(--cor-venc); }
.pl-venc-whats {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(63, 207, 142, .35);
  background: rgba(63, 207, 142, .10); color: #3fcf8e;
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.pl-venc-whats:hover { background: #3fcf8e; color: #0b1410; }
@media (max-width: 640px) {
  .pl-venc { grid-template-columns: 40px minmax(0, 1fr); }
  .pl-venc-prazo { text-align: left; grid-column: 2; }
  .pl-venc-whats { grid-column: 2; justify-self: start; }
}

.pl-venc.tranquilo { --cor-venc: #3fcf8e; }
.pl-venc.tranquilo .pl-venc-prazo b { color: var(--apagado); }

/* ---- clientes com plano: um cartao por cliente, pedidos dentro ---- */
.pl-clientes-sec {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
}
.pl-clientes-topo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pl-clientes-topo > div:first-child { flex: 1; }
.pl-clientes-topo h3 { margin: 0; font-size: 16px; }
.pl-clientes-topo .dica { margin: 4px 0 0; }
.pl-clientes-contas { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-clientes-contas span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pl-clientes-contas .laranja { background: rgba(255, 90, 31, .14); color: var(--destaque); }
.pl-clientes-contas .amarelo { background: rgba(245, 185, 71, .14); color: #f5b947; }

.pl-clientes-lista { display: grid; gap: 8px; }
.pl-cli {
  --cor-venc: var(--apagado);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--cor-venc);
  border-radius: var(--raio-m);
  transition: border-color .15s, background .15s;
}
.pl-cli.tranquilo { --cor-venc: #3fcf8e; }
.pl-cli.proximo { --cor-venc: #f5b947; }
.pl-cli.urgente { --cor-venc: #ff8a3d; }
.pl-cli.vencido { --cor-venc: #ff6b6b; }
.pl-cli[open] { background: rgba(255, 255, 255, .02); }
.pl-cli summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto 18px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.pl-cli summary::-webkit-details-marker { display: none; }
.pl-cli-avatar { width: 40px; height: 40px; border-radius: 50%; }
.pl-cli-info { display: grid; gap: 4px; min-width: 0; }
.pl-cli-info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cli-info small { font-size: 12px; color: var(--apagado); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-cli-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--destaque); color: #fff;
}
.pl-cli-prazo { display: grid; gap: 2px; text-align: right; }
.pl-cli-prazo b { font-size: 13px; color: var(--cor-venc); }
.pl-cli.tranquilo .pl-cli-prazo b { color: var(--texto); }
.pl-cli-prazo small { font-size: 12px; color: var(--apagado); }
.pl-cli-seta { width: 18px; height: 18px; fill: none; stroke: var(--apagado); stroke-width: 2; transition: transform .2s; }
.pl-cli[open] .pl-cli-seta { transform: rotate(180deg); }
.pl-cli-corpo { display: grid; gap: 10px; padding: 0 14px 14px 68px; }
.pl-cli-corpo .pl-venc-whats { justify-self: start; }
.pl-cli-sub { margin: 4px 0 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.pl-cli-vazio { margin: 0; font-size: 13px; color: var(--apagado); }
/* dentro do cliente, foto e nome ja estao no topo: some no pedido */
.pl-cli .pl-pedido-foto .pl-pedido-avatar,
.pl-cli .pl-pedido-titulo strong { display: none; }
.pl-cli .pl-pedido-foto { width: 26px; }
.pl-cli .pl-pedido-tipo { position: static; }
@media (max-width: 640px) {
  .pl-cli summary { grid-template-columns: 40px minmax(0, 1fr) 18px; }
  .pl-cli-badge, .pl-cli-prazo { grid-column: 2; justify-self: start; text-align: left; }
  .pl-cli-corpo { padding-left: 14px; }
}

.pl-cli-venc { display: flex; align-items: flex-end; gap: 8px; }
.pl-cli-venc label { display: grid; gap: 4px; margin: 0; }
.pl-cli-venc label span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.pl-cli-venc input { height: 36px; width: 170px; }
.pl-cli-venc button { height: 36px; padding: 0 16px; }

.pl-cli-venc { position: relative; }
.pl-cli-venc-campo { display: grid; gap: 4px; }
.pl-cli-venc-campo > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.pl-data {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-m);
  background: var(--fundo-alto); color: var(--texto); cursor: pointer; box-shadow: none;
}
.pl-data:hover { border-color: var(--destaque); background: var(--fundo-alto); }
.pl-data svg { width: 16px; height: 16px; fill: none; stroke: var(--apagado); stroke-width: 1.8; }
.pl-data b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-janela.cal-um-dia { top: 100%; left: 0; right: auto; }

.cal-titulo {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--texto); box-shadow: none;
  font-size: 13.5px; font-weight: 700; text-transform: capitalize; cursor: pointer;
}
.cal-titulo:hover { background: rgba(255, 255, 255, .06); }
.cal-titulo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; }
.cal-anos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 252px; padding-top: 4px; }
.cal-ano {
  height: 40px; border: 1px solid transparent; border-radius: var(--raio-m);
  background: transparent; color: var(--texto); box-shadow: none;
  font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.cal-ano:hover { background: rgba(255, 255, 255, .06); }
.cal-ano.hoje { border-color: var(--linha); }
.cal-ano.ativo { background: var(--destaque); color: #fff; }

/* cards de cliente, refinados */
.pl-cli { border-left-width: 1px; position: relative; overflow: hidden; background: rgba(255, 255, 255, .015); }
.pl-cli::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cor-venc); box-shadow: 0 0 14px var(--cor-venc);
}
.pl-cli:hover { border-color: rgba(255, 255, 255, .14); }
.pl-cli summary { color: var(--texto); padding: 14px 16px 14px 18px; }
.pl-cli-info strong { color: var(--texto); font-size: 15px; }
.pl-cli-info small { gap: 10px; }
.pl-cli-plano {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(255, 90, 31, .12); color: var(--destaque);
}
.pl-cli-valor { font-size: 13px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.pl-cli-valor em { font-style: normal; font-weight: 400; color: var(--apagado); font-size: 12px; }
.pl-cli-prazo { justify-items: end; gap: 4px; }

.pl-tag {
  --c: var(--apagado);
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
}
.pl-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.pl-tag.vencido { --c: #ff6b6b; }
.pl-tag.urgente { --c: #ff8a3d; }
.pl-tag.proximo { --c: #f5b947; }
.pl-tag.tranquilo { --c: #3fcf8e; }
.pl-tag.pedido { --c: var(--destaque); }
.pl-tag.vencido i { animation: pl-pisca 1.6s ease-in-out infinite; }
@keyframes pl-pisca { 50% { opacity: .3; } }
.pl-clientes-contas { align-items: center; }

/* ---- lancar venda: versao premium ---- */
dialog.janela-venda:not(.janela-detalhe) { width: min(720px, calc(100vw - 32px)); max-width: none; }
dialog.janela-venda {
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255, 90, 31, .10), transparent 60%),
    linear-gradient(180deg, #121821, #0d1117);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}
dialog.janela-venda[open] { animation: venda-entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes venda-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.janela-venda .venda-corpo { gap: 18px; padding: 24px 26px; }

.venda-cabeca { display: flex; align-items: center; gap: 14px; }
.venda-cabeca > div { flex: 1; }
.venda-cabeca h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.venda-cabeca p { margin: 2px 0 0; font-size: 13px; color: var(--apagado); }
.venda-icone {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(180deg, #ff7a3d, #ff5a1f);
  box-shadow: 0 8px 20px -6px rgba(255, 90, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.venda-icone svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.venda-x {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--linha); border-radius: 10px; background: transparent; box-shadow: none; cursor: pointer;
}
.venda-x:hover { background: rgba(255, 255, 255, .06); }
.venda-x svg { width: 16px; height: 16px; fill: none; stroke: var(--apagado); stroke-width: 2; stroke-linecap: round; }

.janela-venda .venda-campo input,
.janela-venda .venda-campo select,
.venda-data {
  height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .15s, box-shadow .15s;
}
.janela-venda .venda-campo input:focus { border-color: var(--destaque); box-shadow: 0 0 0 3px rgba(255, 90, 31, .15); outline: none; }
.venda-topo { grid-template-columns: 1fr 280px; }
.janela-venda .venda-chave { height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.janela-venda .venda-chave button { height: 36px; border-radius: 9px; }

/* planos: 4 por linha, com radio e brilho no escolhido */
.venda-planos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 150px; gap: 10px; padding: 2px; }
.venda-plano {
  position: relative; gap: 4px; padding: 14px 14px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .08);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.venda-plano:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); }
.venda-plano strong { font-size: 14px; padding-right: 20px; }
.venda-plano em { font-size: 13px; font-weight: 600; }
.venda-radio {
  position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .25); transition: all .15s;
}
.venda-plano.ativo {
  border-color: var(--destaque);
  background: linear-gradient(180deg, rgba(255, 90, 31, .16), rgba(255, 90, 31, .04));
  box-shadow: 0 10px 24px -12px rgba(255, 90, 31, .8);
}
.venda-plano.ativo .venda-radio { border-color: var(--destaque); background: var(--destaque); box-shadow: inset 0 0 0 3px #1a1410; }

.venda-data {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 0 12px;
  color: var(--texto); box-shadow: none; cursor: pointer; text-align: left;
}
.venda-data:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .03); }
.venda-data svg { width: 16px; height: 16px; fill: none; stroke: var(--apagado); stroke-width: 1.8; }
.venda-data b { font-weight: 500; font-variant-numeric: tabular-nums; }
.venda-linha .venda-campo { position: relative; }
.venda-linha .cal-janela.cal-um-dia { left: auto; right: -150px; }

.janela-venda .venda-acoes { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
.janela-venda .venda-total strong {
  font-size: 28px; font-weight: 700;
  background: linear-gradient(90deg, #fff, #ffc8a8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.janela-venda .venda-ok { height: 46px; padding: 0 22px 0 7px; }
.janela-venda .venda-ok .fin-lancar-mais { font-size: 15px; }
.janela-venda .venda-ok:hover .fin-lancar-mais { transform: none; }

/* ---- estados vivos no Meu dia ---- */
/* em producao: a mesma luz correndo da etapa ao vivo */
.md-estado.e-em_producao { position: relative; overflow: hidden; }
.md-estado.e-em_producao::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 220, 170, .45) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: luz-na-etapa 2.4s ease-in-out infinite;
}
/* atrasado ou falhou: pulsa vermelho */
.md-estado.e-atrasado, .md-estado.e-falhou, .md-prazo.atrasada { animation: md-pulsa-verm 1.8s ease-in-out infinite; }
@keyframes md-pulsa-verm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, .55); }
  50% { box-shadow: 0 0 0 5px rgba(255, 90, 90, 0); background-color: rgba(255, 90, 90, .28); }
}
/* publicado: pulsa verde */
.md-estado.e-publicado { animation: md-pulsa-verde 2.2s ease-in-out infinite; }
@keyframes md-pulsa-verde {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 207, 142, .5); }
  50% { box-shadow: 0 0 0 5px rgba(63, 207, 142, 0); background-color: rgba(63, 207, 142, .25); }
}
@media (prefers-reduced-motion: reduce) {
  .md-estado, .md-estado::after, .md-prazo.atrasada { animation: none !important; }
}

/* ---- janela de confirmacao, compacta e premium ---- */
dialog.confirmar-acao {
  width: min(400px, calc(100vw - 32px)); max-width: none; padding: 0;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(255, 90, 31, .12), transparent 65%), linear-gradient(180deg, #131922, #0d1117);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
}
dialog.confirmar-acao[open] { animation: venda-entra .25s cubic-bezier(.2, .8, .2, 1); }
dialog.confirmar-acao .ca-corpo { padding: 30px 26px 22px; gap: 6px; }
dialog.confirmar-acao .ca-icone {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 10px;
  background: linear-gradient(180deg, #ff7a3d, #ff5a1f); color: #fff;
  box-shadow: 0 12px 28px -8px rgba(255, 90, 31, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
}
dialog.confirmar-acao .ca-icone.perigo {
  background: linear-gradient(180deg, #ff6b6b, #e5484d);
  box-shadow: 0 12px 28px -8px rgba(229, 72, 77, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}
dialog.confirmar-acao .ca-icone svg { width: 24px; height: 24px; stroke-width: 2.2; }
dialog.confirmar-acao h3 { font-size: 18px; letter-spacing: -.02em; }
dialog.confirmar-acao p { font-size: 13.5px; max-width: 30ch; }
dialog.confirmar-acao .ca-acoes { margin-top: 20px; }
dialog.confirmar-acao .ca-acoes button { height: 44px; border-radius: 12px; justify-content: center; text-align: center; }
dialog.confirmar-acao [data-nao] { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
dialog.confirmar-acao [data-nao]:hover { background: rgba(255, 255, 255, .08); }
dialog.confirmar-acao [data-sim]:not(.fp-perigo) {
  background: linear-gradient(180deg, #ff7a3d, #ff5a1f); color: #fff; border: 0;
  box-shadow: 0 10px 24px -8px rgba(255, 90, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---- anexos no chat ---- */
.bolha-imagem { display: block; padding: 0; border: 0; background: none; box-shadow: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; margin-bottom: 4px; }
.bolha-imagem img { display: block; max-width: 280px; max-height: 320px; object-fit: cover; border-radius: 12px; transition: transform .2s; }
.bolha-imagem:hover img { transform: scale(1.02); }
.bolha-video { display: block; max-width: 300px; max-height: 340px; border-radius: 12px; background: #000; margin-bottom: 4px; }
.bolha-audio { display: block; width: 260px; height: 40px; margin-bottom: 4px; }
.bolha-doc { width: 280px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .2); margin-bottom: 4px; }
.bolha-doc-previa { display: block; width: 100%; height: 170px; padding: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); background: #fff; position: relative; overflow: hidden; cursor: zoom-in; box-shadow: none; border-radius: 0; }
.bolha-doc-previa iframe { width: 100%; height: 340px; border: 0; pointer-events: none; }
.bolha-doc-linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.bolha-doc-icone { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 90, 31, .16); color: var(--destaque); font-size: 10px; font-weight: 800; }
.bolha-doc-nome { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolha-doc-acao { flex: none; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: transparent; color: var(--texto); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; box-shadow: none; }
.bolha-doc-acao:hover { background: rgba(255, 255, 255, .08); }

dialog.ver-anexo { width: min(1000px, calc(100vw - 32px)); max-width: none; height: calc(100vh - 48px); max-height: none; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: #0b0f15; color: var(--texto); display: flex; flex-direction: column; overflow: hidden; }
dialog.ver-anexo:not([open]) { display: none; }
dialog.ver-anexo::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(6px); }
.ver-anexo header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ver-anexo header span { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-anexo header a, .ver-anexo header button { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; text-decoration: none; }
.ver-anexo-corpo { flex: 1; display: grid; place-items: center; min-height: 0; padding: 12px; }
.ver-anexo-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.ver-anexo-corpo iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }

/* ---- ficha do contato, redesenhada ---- */
.central-ficha-abas { position: relative; display: flex; gap: 2px; padding: 4px; margin: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.central-ficha-abas > button { position: relative; z-index: 1; flex: 1; height: 34px; border: 0 !important; border-radius: 9px; background: transparent !important; box-shadow: none !important; color: var(--apagado); font-size: 13px; font-weight: 600; transition: color .2s; }
.central-ficha-abas > button.ativo { color: var(--texto); }
.central-ficha-abas > button:hover { color: var(--texto); }
.central-ficha-abas > .central-ficha-fechar { flex: none; width: 34px; padding: 0; display: grid; place-items: center; }
.central-ficha-fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ficha-abas-marca { position: absolute; top: 4px; left: 0; height: 34px; border-radius: 9px; background: rgba(255, 90, 31, .16); box-shadow: inset 0 0 0 1px rgba(255, 90, 31, .3); transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1); }

.ficha-nova { display: grid; gap: 14px; padding: 4px 14px 18px; }
.ficha-nova h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.ficha-topo { display: grid; justify-items: center; gap: 4px; padding: 18px 12px 16px; text-align: center; border-radius: 16px; background: radial-gradient(100% 80% at 50% 0%, rgba(255, 90, 31, .14), transparent 70%), rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .06); }
.ficha-topo .central-avatar { margin-bottom: 6px; box-shadow: 0 0 0 3px rgba(255, 90, 31, .35), 0 10px 24px -8px rgba(0, 0, 0, .6); }
.ficha-nome { font-size: 17px; letter-spacing: -.01em; }
.ficha-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--apagado); }
.ficha-sub svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ficha-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.ficha-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, .06); color: var(--apagado); }
.ficha-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ficha-chip.cliente { background: rgba(255, 90, 31, .14); color: var(--destaque); }
.ficha-chip.andamento { background: rgba(245, 185, 71, .14); color: #f5b947; }
.ficha-chip.ok { background: rgba(63, 207, 142, .14); color: #3fcf8e; }
.ficha-copiar { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: transparent; box-shadow: none; color: var(--texto); font-size: 12px; font-weight: 600; cursor: pointer; }
.ficha-copiar:hover { background: rgba(255, 255, 255, .06); }
.ficha-copiar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.ficha-cartao { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); overflow: hidden; }
.ficha-linha { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; min-height: 46px; padding: 6px 14px; margin: 0; }
.ficha-linha + .ficha-linha { border-top: 1px solid rgba(255, 255, 255, .05); }
.ficha-rot { font-size: 12.5px; color: var(--apagado); }
.ficha-val { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.ficha-apagado { color: var(--apagado); font-weight: 400; }
.ficha-pessoa { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 90, 31, .16); color: var(--destaque); font-size: 10px; font-weight: 800; }
.ficha-linha .ficha-input { height: 34px; padding: 0 10px; border: 1px solid transparent; background: transparent; font-size: 13.5px; }
.ficha-input { width: 100%; border-radius: 10px; transition: border-color .15s, background .15s; }
.ficha-input:hover { background: rgba(255, 255, 255, .03); }
.ficha-input:focus { outline: none; border-color: rgba(255, 90, 31, .5) !important; background: rgba(255, 255, 255, .03); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
textarea.ficha-input { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); resize: vertical; font-size: 13.5px; line-height: 1.5; }
.ficha-dica { display: block; margin-top: 6px; font-size: 11.5px; color: var(--apagado); }

.ficha-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 7px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); cursor: text; }
.ficha-tags:focus-within { border-color: rgba(255, 90, 31, .5); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.ficha-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; background: rgba(255, 90, 31, .14); color: #ffb08a; font-size: 12px; font-weight: 600; animation: sel-abre .18s ease; }
.ficha-tag button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: .7; }
.ficha-tag button:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.ficha-tags input { flex: 1; min-width: 120px; height: 26px; padding: 0 4px; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 13px; outline: none; }

/* =========================================================
   CENTRAL DE WHATSAPP - acabamento profissional
   ========================================================= */
.central { --wa-borda: rgba(255, 255, 255, .07); --wa-sup: rgba(255, 255, 255, .025); }

.central .central-abas { gap: 6px; }
.central .central-aba {
  height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--wa-borda); background: var(--wa-sup);
  color: var(--apagado); font-weight: 600; box-shadow: none; transition: all .18s;
}
.central .central-aba:hover { color: var(--texto); border-color: rgba(255, 255, 255, .16); }
.central .central-aba.ativo { color: #fff; background: rgba(255, 90, 31, .16); border-color: rgba(255, 90, 31, .45); }
.central .central-conta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .08); }
.central .central-aba.ativo .central-conta { background: var(--destaque); color: #fff; }

.central .central-lista, .central .central-chat {
  border: 1px solid var(--wa-borda); border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 26, 35, .92), rgba(13, 17, 23, .92));
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7);
}

.central .central-item {
  position: relative; margin: 6px; padding: 12px; border-radius: 14px;
  border: 1px solid transparent; background: transparent; box-shadow: none;
  transition: background .15s, border-color .15s;
}
.central .central-item:hover { background: rgba(255, 255, 255, .035); }
.central .central-item.ativo { background: linear-gradient(90deg, rgba(255, 90, 31, .14), rgba(255, 90, 31, .03)); border-color: rgba(255, 90, 31, .28); }
.central .central-item.ativo::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--destaque); box-shadow: 0 0 10px var(--destaque); }
.central .central-item strong { color: var(--texto) !important; font-size: 14px; }
.central .central-item small { color: var(--apagado); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.central .central-previa { color: var(--apagado); font-size: 12.5px; }
.central .central-naolidas { min-width: 20px; height: 20px; border-radius: 999px; background: var(--destaque); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; box-shadow: 0 0 10px rgba(255, 90, 31, .6); }
.central .central-item-marcas { gap: 5px; margin-top: 6px; }
.central .central-marca, .central .central-canal {
  height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; border: 0;
  background: rgba(255, 255, 255, .06); color: var(--apagado);
}
.central .central-canal svg { width: 12px; height: 12px; }
.central .central-marca.minha { background: rgba(255, 90, 31, .14); color: #ffa477; }
.central .central-marca.espera { background: rgba(96, 165, 250, .14); color: #8ab8ff; }
.central .central-marca.livre { background: rgba(245, 185, 71, .14); color: #f5b947; }
.central .central-marca.resolvida { background: rgba(63, 207, 142, .14); color: #3fcf8e; }

.central .central-cabeca { padding: 14px 18px; border-bottom: 1px solid var(--wa-borda); background: rgba(255, 255, 255, .015); }
.central .central-cabeca .central-avatar { box-shadow: 0 0 0 2px rgba(63, 207, 142, .55); }
.central .central-cabeca-texto strong { font-size: 15px; letter-spacing: -.01em; }
.central .central-cabeca-texto small { color: var(--apagado); }
.central .central-acoes button { height: 38px; padding: 0 16px; border-radius: 11px; font-weight: 600; }

.central .central-faixa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 18px 0; padding: 9px 14px; border-radius: 12px;
  border: 1px solid var(--wa-borda); background: rgba(255, 255, 255, .025);
}
.central .central-faixa::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 8px #3fcf8e; flex: none; }
.central .central-faixa.livre::before { background: #f5b947; box-shadow: 0 0 8px #f5b947; }
.central .central-faixa strong { font-size: 13px; }
.central .central-faixa span { font-size: 12px; color: var(--apagado); }

.central .central-mensagens {
  padding: 18px 22px;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 18px 18px;
}
.central .bolha {
  max-width: min(72%, 520px); padding: 10px 14px 8px; border-radius: 16px;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6);
}
.central .bolha.dele { background: #1a212c; border: 1px solid var(--wa-borda); border-bottom-left-radius: 6px; }
.central .bolha.minha {
  margin-left: auto; color: #fff; border: 0; border-bottom-right-radius: 6px;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f);
  box-shadow: 0 10px 22px -12px rgba(255, 90, 31, .8);
}
.central .bolha-texto { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.central .bolha-rodape { display: block; margin-top: 4px; font-size: 10.5px; opacity: .6; text-align: right; }
.central .bolha.minha .bolha-rodape { color: rgba(255, 255, 255, .85); opacity: 1; }

.central .central-escrever { gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--wa-borda); background: rgba(255, 255, 255, .015); align-items: center; }
.central .central-campo {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 14px;
  border-radius: 16px; border: 1px solid var(--wa-borda); background: rgba(255, 255, 255, .035);
  transition: border-color .15s, box-shadow .15s;
}
.central .central-campo:focus-within { border-color: rgba(255, 90, 31, .55); box-shadow: 0 0 0 4px rgba(255, 90, 31, .12); }
.central .central-campo textarea { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 9px 0; font-size: 14px; resize: none; }
.central .central-icone {
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border-radius: 12px; border: 0; background: transparent; box-shadow: none; color: var(--apagado); cursor: pointer;
  transition: color .15s, background .15s;
}
.central .central-icone:hover { color: var(--texto); background: rgba(255, 255, 255, .06); }
.central .central-icone svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.central .central-enviar {
  width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 14px; border: 0;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(255, 90, 31, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s;
}
.central .central-enviar:hover { transform: translateY(-1px) scale(1.04); }
.central .central-enviar svg { width: 19px; height: 19px; }

/* ---- status do numero no topo da central ---- */
.central .central-topo { align-items: center; }
.wa-status { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wa-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid; }
.wa-chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.wa-chip.ok { color: #3fcf8e; background: rgba(63, 207, 142, .1); border-color: rgba(63, 207, 142, .3); }
.wa-chip.ok i { animation: md-pulsa-ponto 2s ease-in-out infinite; }
@keyframes md-pulsa-ponto { 50% { opacity: .35; } }
.wa-chip.alerta { color: #f5b947; background: rgba(245, 185, 71, .1); border-color: rgba(245, 185, 71, .3); }
.wa-chip.erro { color: #ff6b6b; background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .3); }
.wa-desligar, .wa-conectar { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; }
.wa-desligar { background: transparent; border: 1px solid rgba(255, 255, 255, .1); color: var(--apagado); }
.wa-desligar:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .08); }
.wa-conectar { border: 0; color: #fff; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 8px 20px -8px rgba(255, 90, 31, .7); }
dialog.wa-janela-qr { width: min(560px, calc(100vw - 32px)); max-width: none; padding: 16px; }
.wa-fechar-qr { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; z-index: 2; }

/* =========================================================
   BARRA LATERAL - design proprio
   ========================================================= */
.lateral {
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(255, 90, 31, .10), transparent 60%),
    radial-gradient(100% 30% at 100% 100%, rgba(255, 90, 31, .08), transparent 60%),
    linear-gradient(180deg, #0f141b, #0a0d12) !important;
  border-right: 1px solid rgba(255, 255, 255, .06) !important;
}
.lateral .topo-marca { justify-content: center; padding: 14px 10px 18px; }

.lateral .menu { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.menu-grupo {
  display: block; margin: 14px 12px 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .28);
}
.menu-grupo:first-of-type { margin-top: 2px; }
.lateral .menu > button {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px; border: 0 !important; border-radius: 12px;
  background: transparent !important; box-shadow: none !important;
  color: rgba(255, 255, 255, .6); font-size: 13.5px; font-weight: 500;
  transition: color .2s;
}
.lateral .menu > button::before { display: none !important; }
.lateral .menu > button svg { width: 18px; height: 18px; flex: none; transition: transform .25s, color .2s; }
.lateral .menu > button:hover { color: #fff; }
.lateral .menu > button:hover svg { transform: translateX(2px); }
.lateral .menu > button.ativa { color: #fff; font-weight: 600; }
.lateral .menu > button.ativa svg { color: #ff7a3d; filter: drop-shadow(0 0 6px rgba(255, 122, 61, .7)); }
.menu-luz {
  position: absolute; left: 10px; right: 10px; top: 0; z-index: 0; border-radius: 12px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 90, 31, .22), rgba(255, 90, 31, .04));
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, .22), 0 8px 24px -10px rgba(255, 90, 31, .6);
  transition: transform .38s cubic-bezier(.2, .9, .2, 1), height .38s, opacity .2s;
}
.menu-luz.visivel { opacity: 1; }
.menu-luz::before {
  content: ''; position: absolute; left: -10px; top: 50%; width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 3px 3px 0; background: #ff6a2b; box-shadow: 0 0 12px #ff6a2b;
}
.lateral .menu .contador {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: #ff5a1f; color: #fff; box-shadow: 0 0 12px rgba(255, 90, 31, .65);
}

/* rodape */
.lateral .rodape-lateral { border-top: 0 !important; padding: 12px 10px 14px; gap: 10px; }
.ponto-lateral:has(.ponto-anel-cartao) { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.ponto-lateral:not(:has(.ponto-anel-cartao)) { border-radius: 16px !important; background: rgba(255, 255, 255, .03) !important; border: 1px solid rgba(255, 255, 255, .07) !important; }
.ponto-anel-cartao {
  position: relative; display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; border-radius: 16px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .03) !important; border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: none !important; color: #fff; transition: border-color .2s, background .2s;
}
.ponto-anel-cartao:hover { border-color: rgba(255, 90, 31, .35) !important; background: rgba(255, 90, 31, .06) !important; }
.ponto-anel { width: 44px; height: 44px; transform: rotate(-90deg); grid-row: 1; grid-column: 1; }
.ponto-anel circle { fill: none; stroke-width: 4; }
.ponto-anel .fundo { stroke: rgba(255, 255, 255, .08); }
.ponto-anel .cheio { stroke: url(#none) #ff6a2b; stroke: #ff6a2b; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 106, 43, .7)); transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.ponto-anel-num { grid-row: 1; grid-column: 1; justify-self: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ponto-anel-num small { font-size: 10px; color: rgba(255, 255, 255, .45); font-weight: 600; }
.ponto-anel-texto { display: grid; gap: 2px; min-width: 0; }
.ponto-anel-texto strong { font-size: 12.5px; }
.ponto-anel-texto small { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, .5); }
.ponto-anel-texto i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.ponto-anel-texto i.on { background: #3fcf8e; box-shadow: 0 0 6px #3fcf8e; animation: md-pulsa-ponto 2s ease-in-out infinite; }
.ponto-anel-seta { width: 16px; height: 16px; fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-linecap: round; transition: transform .2s; }
.ponto-anel-cartao:hover .ponto-anel-seta { transform: translateX(2px); stroke: #ff7a3d; }

.pessoa-cartao {
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .07);
}
.lateral .pessoa-cartao .pessoa {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: auto; padding: 4px 6px;
  border: 0 !important; border-radius: 11px; background: transparent !important; box-shadow: none !important;
  color: #fff; text-align: left; cursor: pointer;
}
.lateral .pessoa-cartao .pessoa:hover { background: rgba(255, 255, 255, .05) !important; }
.lateral .pessoa-cartao .pessoa.ativa { background: rgba(255, 90, 31, .12) !important; }
.lateral .pessoa-cartao .avatar { box-shadow: 0 0 0 2px #0b0f15, 0 0 0 3.5px rgba(255, 106, 43, .7); border-radius: 50%; }
.lateral .pessoa-cartao .papel { text-transform: capitalize; }
.lateral .pessoa-sair {
  flex: none; width: 36px; height: 36px; padding: 0 !important; display: grid !important; place-items: center;
  border: 0 !important; border-radius: 11px; background: transparent !important; box-shadow: none !important;
  color: rgba(255, 255, 255, .45); cursor: pointer; transition: color .2s, background .2s;
}
.lateral .pessoa-sair:hover { color: #ff6b6b; background: rgba(255, 107, 107, .1) !important; }
.lateral .pessoa-sair svg { width: 17px; height: 17px; }

/* ---- lateral: tudo a vista, sem rolar, e o nome inteiro ---- */
.lateral .topo-marca { padding: 4px 10px 8px !important; }
.lateral .logo { max-height: 44px !important; }
.lateral .menu { overflow: visible !important; flex: 1 1 auto; gap: 0 !important; scrollbar-width: none; }
.lateral .menu::-webkit-scrollbar { display: none; }
.menu-grupo { margin: 10px 12px 3px !important; font-size: 9.5px; }
.menu-grupo:first-of-type { margin-top: 0 !important; }
.lateral .menu > button { height: 33px !important; min-height: 33px !important; flex: none !important; font-size: 13px !important; }
.menu-luz::before { height: 16px; margin-top: -8px; }

.lateral .rodape-lateral { padding: 8px 10px 12px !important; gap: 8px !important; }
.ponto-anel-cartao { grid-template-columns: 36px 1fr 14px; gap: 10px; padding: 8px 10px; }
.ponto-anel { width: 36px; height: 36px; }
.ponto-anel-num { font-size: 11.5px; }
.ponto-anel-num small { font-size: 9px; }
.ponto-anel-texto strong, .ponto-anel-texto small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ponto-anel-texto strong { font-size: 12px; }
.ponto-anel-texto small { font-size: 10.5px; }

.lateral .pessoa-cartao .dados { display: grid; gap: 1px; min-width: 0; }
.lateral .pessoa-cartao .nome { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word; line-height: 1.25; font-size: 13px; }
.lateral .pessoa-cartao .avatar { flex: none; }
/* menu rola (sem barra visivel) em tela baixa, em vez de passar por cima do rodape */
.lateral .menu { overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; }
.lateral .pessoa-cartao .pessoa { height: auto !important; min-height: 44px; overflow: visible !important; white-space: normal !important; }
.lateral .pessoa-cartao .dados, .lateral .pessoa-cartao .nome { max-width: none !important; width: auto !important; }
/* o botao de sair herdava `width: 100%` dos botoes do rodape e espremia o nome */
.lateral .rodape-lateral .pessoa-sair { width: 36px !important; min-width: 36px; flex: 0 0 36px !important; }
.lateral .rodape-lateral .pessoa-cartao .pessoa { width: auto !important; flex: 1 1 auto !important; padding: 4px 6px !important; }
.lateral .pessoa-cartao .nome { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal; }

/* =========================================================
   MOVIMENTO DO SISTEMA (movimento.js)
   ========================================================= */
/* tela nova: blocos sobem do desfoque, um depois do outro */
.mv-entra {
  animation: mv-entra .6s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes mv-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* brilho que segue o cursor */
.mv-luz { position: relative; isolation: isolate; }
.mv-luz::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(320px circle at var(--mvx) var(--mvy), rgba(255, 120, 60, .09), transparent 60%);
  animation: mv-acende .3s ease both;
}
@keyframes mv-acende { from { opacity: 0; } }

/* cartoes respiram ao passar o mouse */
.cartao, .md-bloco, .md-numero, .pl-cartao { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s; }
.md-numero:hover, .pl-cartao:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 120, 60, .18); }

/* ondulacao do clique */
.mv-onda {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 60%);
  transform: scale(0); animation: mv-onda .65s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes mv-onda { to { transform: scale(1); opacity: 0; } }

/* botoes: aperto fisico */
button:not(:disabled):active, .botao:active { transform: scale(.97); }
button { transition: transform .12s ease, background-color .2s, color .2s, border-color .2s, box-shadow .2s; }

/* toda janela abre com profundidade, e o fundo escurece com desfoque */
dialog[open] { animation: mv-janela .42s cubic-bezier(.16, 1, .3, 1); }
dialog[open]::backdrop { animation: mv-fundo .35s ease both; backdrop-filter: blur(6px); }
@keyframes mv-janela {
  from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes mv-fundo { from { opacity: 0; } }

/* barra de carregamento: luz laranja correndo no topo */
#progresso {
  height: 3px !important; z-index: 9999 !important;
  background: linear-gradient(90deg, transparent, #ff5a1f 30%, #ffb066 60%, #ff5a1f) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 12px rgba(255, 106, 43, .9), 0 0 2px #ffb066 !important;
  animation: mv-barra 1.1s linear infinite;
}
@keyframes mv-barra { to { background-position: -200% 0; } }

/* sub-abas do modulo deslizam o destaque */
.sub-modulo button { transition: color .25s, background-color .3s, box-shadow .3s; }

/* rolagem macia e selecao na cor da marca */
html { scroll-behavior: smooth; }
::selection { background: rgba(255, 90, 31, .35); color: #fff; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 120, 60, .5); }

@media (prefers-reduced-motion: reduce) {
  .mv-entra, dialog[open], dialog[open]::backdrop, #progresso { animation: none !important; }
}

/* =========================================================
   CONFIGURACOES - painel com menu vertical
   ========================================================= */
body.modo-config { --cfg-larg: 268px; }
body.modo-config nav.sub-modulo {
  position: fixed; top: 0; bottom: 0; left: var(--lateral); width: var(--cfg-larg); z-index: 30;
  display: block; padding: 22px 12px 24px; margin: 0; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(15, 20, 27, .94), rgba(11, 14, 19, .96));
  border-right: 1px solid rgba(255, 255, 255, .06); border-bottom: 0;
  backdrop-filter: blur(12px);
}
body.modo-config nav.sub-modulo::-webkit-scrollbar { display: none; }
body.modo-config main { margin-left: calc(var(--lateral) + var(--cfg-larg)) !important; max-width: none !important; padding: 30px 44px 60px !important; }
.cfg-cabeca { display: grid; gap: 2px; padding: 0 10px 16px; }
.cfg-cabeca span { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.cfg-cabeca small { font-size: 12px; color: var(--apagado); }
.cfg-grupo { display: grid; gap: 2px; margin-bottom: 14px; }
.cfg-grupo-titulo { padding: 6px 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .28); }
body.modo-config nav.sub-modulo button {
  display: flex !important; align-items: center; gap: 11px; width: 100%; height: auto !important; padding: 8px 10px !important;
  border: 1px solid transparent !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important;
  text-align: left; color: rgba(255, 255, 255, .65); white-space: normal;
}
body.modo-config nav.sub-modulo button::after { display: none !important; }
body.modo-config nav.sub-modulo button:hover { background: rgba(255, 255, 255, .04) !important; color: #fff; }
body.modo-config nav.sub-modulo button.ativa {
  color: #fff; background: linear-gradient(90deg, rgba(255, 90, 31, .18), rgba(255, 90, 31, .04)) !important;
  border-color: rgba(255, 90, 31, .25) !important;
}
.cfg-icone { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .05); transition: background .2s; }
.cfg-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.modo-config nav.sub-modulo button.ativa .cfg-icone { background: linear-gradient(160deg, #ff7a3d, #ff5a1f); color: #fff; box-shadow: 0 6px 16px -6px rgba(255, 90, 31, .8); }
.cfg-texto { display: grid; gap: 1px; min-width: 0; }
.cfg-texto strong { font-size: 13px; font-weight: 600; }
.cfg-texto small { font-size: 11px; color: rgba(255, 255, 255, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* conteudo das configuracoes: cartoes e campos mais limpos */
body.modo-config #conteudo { max-width: 920px; }
body.modo-config #conteudo .cartao {
  padding: 28px 30px; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: radial-gradient(100% 50% at 0% 0%, rgba(255, 90, 31, .06), transparent 60%), linear-gradient(180deg, rgba(20, 26, 35, .9), rgba(13, 17, 23, .9));
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
body.modo-config #conteudo .cartao > h2, body.modo-config #conteudo .cartao > h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 6px; }
body.modo-config #conteudo .cartao > p, body.modo-config #conteudo .dica { color: var(--apagado); font-size: 13.5px; line-height: 1.55; max-width: 64ch; }
body.modo-config #conteudo label { display: grid; gap: 7px; margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
body.modo-config #conteudo form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
body.modo-config #conteudo form > :is(h2, h3, p, .dica, button, .acoes, .erro, table, div:not(.campo)) { grid-column: 1 / -1; }
body.modo-config #conteudo input:not([type=checkbox]):not([type=radio]), body.modo-config #conteudo select, body.modo-config #conteudo textarea {
  height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  font-size: 14px; transition: border-color .15s, box-shadow .15s, background .15s;
}
body.modo-config #conteudo textarea { height: auto; min-height: 96px; padding: 12px 14px; }
body.modo-config #conteudo input:focus, body.modo-config #conteudo select:focus, body.modo-config #conteudo textarea:focus {
  outline: none; border-color: rgba(255, 90, 31, .55); box-shadow: 0 0 0 4px rgba(255, 90, 31, .12); background: rgba(255, 255, 255, .045);
}
body.modo-config #conteudo button:not(.discreto):not(.so-icone):not([class*="cal-"]) {
  height: 42px; padding: 0 22px; border-radius: 12px; border: 0;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); color: #fff; font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(255, 90, 31, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
  justify-self: start;
}
body.modo-config #conteudo table { border-radius: 14px; overflow: hidden; }

@media (max-width: 1000px) {
  body.modo-config nav.sub-modulo { position: static; width: auto; display: flex; overflow-x: auto; padding: 10px; }
  body.modo-config main { margin-left: 0 !important; padding: 20px !important; }
  .cfg-cabeca, .cfg-grupo-titulo, .cfg-texto small { display: none; }
  .cfg-grupo { display: flex; margin: 0; }
  body.modo-config #conteudo form { grid-template-columns: 1fr; }
}

/* =========================================================
   PERFIL INTERNO (perfil.js)
   ========================================================= */
dialog.perfil-janela {
  width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; overflow: hidden auto;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 30px; color: var(--texto);
  background: linear-gradient(180deg, #11161e 0%, #0b0e13 100%);
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 120, 60, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  scrollbar-width: none;
}
dialog.perfil-janela::-webkit-scrollbar { display: none; }

/* capa: aurora viva que inclina com o mouse */
.pf-capa { position: relative; height: 150px; overflow: hidden; background: #160b06; }
.pf-aurora { position: absolute; border-radius: 50%; filter: blur(42px); mix-blend-mode: screen; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.pf-aurora.a { width: 260px; height: 200px; left: -40px; top: -70px; background: #ff5a1f; opacity: .85; animation: pf-flutua 10s ease-in-out infinite alternate; transform: translate(calc(var(--px, 0) * 30px), calc(var(--py, 0) * 20px)); }
.pf-aurora.b { width: 220px; height: 180px; right: -50px; top: -20px; background: #ffb066; opacity: .55; animation: pf-flutua 13s ease-in-out infinite alternate-reverse; transform: translate(calc(var(--px, 0) * -40px), calc(var(--py, 0) * -20px)); }
.pf-aurora.c { width: 200px; height: 160px; left: 40%; bottom: -110px; background: #c2410c; opacity: .7; animation: pf-flutua 16s ease-in-out infinite alternate; }
@keyframes pf-flutua { to { translate: 40px 18px; scale: 1.15; } }
.pf-grade {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 24px 24px; mask-image: radial-gradient(80% 100% at 50% 0%, #000 30%, transparent 80%);
}
.pf-capa::after { content: ''; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(180deg, transparent, #11161e); }
.pf-fechar {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .25); color: #fff; backdrop-filter: blur(10px); cursor: pointer; box-shadow: none;
}
.pf-fechar:hover { background: rgba(0, 0, 0, .45); }
.pf-fechar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.pf-corpo { position: relative; z-index: 2; padding: 0 28px 22px; margin-top: -74px; display: grid; justify-items: center; text-align: center; }

/* foto: anel girando, ponto de online e lapis que so aparece no hover */
.pf-foto { position: relative; width: 116px; height: 116px; padding: 5px; animation: pf-surge .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes pf-surge { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.pf-anel {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff5a1f, #ffcf9e, #ff7a3d, #7c2d12, #ff5a1f);
  animation: pf-gira 6s linear infinite; filter: drop-shadow(0 10px 24px rgba(255, 90, 31, .55));
}
@keyframes pf-gira { to { transform: rotate(360deg); } }
.pf-foto-dentro {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #1a212c; border: 4px solid #11161e; font-size: 34px; font-weight: 700; color: #ffb08a;
}
.pf-foto-dentro img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .3s; }
.pf-foto.editavel:hover .pf-foto-dentro img { transform: scale(1.06); filter: brightness(.7); }
.pf-foto-lapis {
  position: absolute; inset: 9px; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; color: #fff; opacity: 0; cursor: pointer; transition: opacity .25s;
}
.pf-foto-lapis svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.pf-foto.editavel:hover .pf-foto-lapis { opacity: 1; }
.pf-online { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 16px; height: 16px; border-radius: 50%; background: #3fcf8e; border: 3px solid #11161e; box-shadow: 0 0 10px rgba(63, 207, 142, .8); }

.pf-nome {
  margin: 14px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff 40%, #ffcfb3); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pf-surge .7s .08s cubic-bezier(.16, 1, .3, 1) both;
}
.pf-papel {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ff9a66;
  animation: pf-surge .7s .14s cubic-bezier(.16, 1, .3, 1) both;
}

/* bio e cargos */
.pf-miolo { position: relative; width: 100%; margin-top: 16px; padding: 18px 18px 16px; border-radius: 20px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); animation: pf-surge .7s .2s cubic-bezier(.16, 1, .3, 1) both; }
.pf-cargos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.pf-cargo {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #ffd6bf; background: linear-gradient(180deg, rgba(255, 90, 31, .18), rgba(255, 90, 31, .08)); border: 1px solid rgba(255, 120, 60, .28);
  animation: pf-surge .5s calc(.3s + var(--i, 0) * 60ms) cubic-bezier(.16, 1, .3, 1) both;
}
.pf-bio { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); white-space: pre-wrap; }
.pf-bio.vazia { color: rgba(255, 255, 255, .38); font-style: italic; }
.pf-lapis {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: rgba(255, 255, 255, .3); cursor: pointer; transition: color .2s, background .2s;
}
.pf-lapis:hover { color: #ff9a66; background: rgba(255, 90, 31, .1); }
.pf-lapis svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pf-miolo.editando { display: grid; gap: 10px; text-align: left; border-color: rgba(255, 90, 31, .3); box-shadow: 0 0 0 4px rgba(255, 90, 31, .06); }
.pf-cargos-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-cargos-edit .pf-cargo { animation: none; padding-right: 4px; }
.pf-cargos-edit .pf-cargo button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: inherit; cursor: pointer; opacity: .7; }
.pf-cargos-edit .pf-cargo button:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.pf-cargos-edit input { flex: 1; min-width: 140px; height: 28px; padding: 0 4px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 13px; color: var(--texto); }
.pf-miolo textarea {
  width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 12px; resize: none;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .2); color: var(--texto); font-size: 14px; line-height: 1.55; outline: none;
}
.pf-miolo textarea:focus { border-color: rgba(255, 90, 31, .5); }
.pf-edit-rodape { display: flex; align-items: center; gap: 8px; }
.pf-edit-rodape small { margin-right: auto; font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.pf-edit-rodape button { height: 34px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pf-cancelar { background: transparent; border: 1px solid rgba(255, 255, 255, .1); color: var(--apagado); box-shadow: none; }
.pf-salvar { border: 0; color: #fff; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 8px 20px -8px rgba(255, 90, 31, .8); }

/* numeros */
.pf-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 12px; }
.pf-numeros div {
  display: grid; gap: 2px; padding: 14px 6px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06);
  animation: pf-surge .6s calc(.28s + var(--i) * 80ms) cubic-bezier(.16, 1, .3, 1) both;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s;
}
.pf-numeros div:hover { transform: translateY(-3px); border-color: rgba(255, 120, 60, .3); }
.pf-numeros strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-numeros small { font-size: 11px; color: var(--apagado); }

.pf-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 16px; font-size: 11.5px; color: var(--apagado); }
.pf-link { padding: 0; height: auto; border: 0; background: none; box-shadow: none; color: #ff9a66; font-size: 12px; font-weight: 600; cursor: pointer; }
.pf-link:hover { color: #ffb88f; }

@media (prefers-reduced-motion: reduce) {
  .pf-aurora, .pf-anel, .pf-foto, .pf-nome, .pf-papel, .pf-miolo, .pf-cargo, .pf-numeros div { animation: none !important; }
}

.pf-add-bio {
  display: grid; justify-items: center; gap: 2px; width: 100%; padding: 14px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed rgba(255, 120, 60, .35); background: rgba(255, 90, 31, .04); box-shadow: none;
  color: #ffb08a; font-size: 14px; font-weight: 600; transition: background .2s, border-color .2s;
}
.pf-add-bio:hover { background: rgba(255, 90, 31, .1); border-color: rgba(255, 120, 60, .6); }
.pf-add-bio span { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); color: #fff; font-size: 18px; line-height: 1; box-shadow: 0 6px 16px -6px rgba(255, 90, 31, .8); }
.pf-add-bio small { font-size: 12px; font-weight: 400; color: var(--apagado); }
.pf-bio[title] { cursor: text; border-radius: 8px; transition: background .2s; }
.pf-bio[title]:hover { background: rgba(255, 255, 255, .03); }

/* =========================================================
   ESCRITORIO (escritorio.js) - pixel art estilo Gather
   ========================================================= */
.esc-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.esc-topo h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.esc-topo p { margin: 4px 0 0; color: var(--apagado); font-size: 14px; }
.esc-legenda { display: flex; gap: 8px; flex-wrap: wrap; }
.esc-legenda span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--apagado); }
.esc-legenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.esc-legenda i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.esc-legenda i.on { background: #3fcf8e; box-shadow: 0 0 8px #3fcf8e; }
.esc-legenda i.cafe { background: #f5b947; box-shadow: 0 0 8px #f5b947; }

.esc-palco { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.esc-mapa {
  position: relative; width: 100%; aspect-ratio: 26 / 15; border-radius: 18px; overflow: hidden;
  border: 4px solid #0b0d12; outline: 1px solid rgba(255, 120, 60, .25);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  background: #0b0d12;
}
.esc-mapa canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.esc-camada { position: absolute; inset: 0; pointer-events: none; }

/* a pessoa: area de clique sobre o boneco + nome em pixel */
.esc-pessoa {
  position: absolute; left: calc(var(--x) / 26 * 100%); top: calc(var(--y) / 15 * 100%);
  width: 5%; height: 9%; transform: translate(-50%, -75%); padding: 0; border: 0; background: transparent; box-shadow: none;
  pointer-events: auto; cursor: pointer; overflow: visible !important;
}
.esc-nome {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; white-space: nowrap; font-family: ui-monospace, 'Courier New', monospace; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(11, 13, 18, .82); border: 2px solid #0b0d12; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.esc-nome i { width: 6px; height: 6px; background: #3fcf8e; box-shadow: 0 0 6px #3fcf8e; }
.esc-pessoa.intervalo .esc-nome i { background: #f5b947; box-shadow: 0 0 6px #f5b947; }
.esc-pessoa:hover .esc-nome { background: #ff6a2b; border-color: #7c2d12; }
.esc-dica {
  position: absolute; left: 50%; top: 110%; transform: translate(-50%, 4px); display: grid; gap: 2px; min-width: 150px; padding: 8px 10px;
  border-radius: 10px; background: rgba(11, 13, 18, .95); border: 1px solid rgba(255, 120, 60, .35); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5;
}
.esc-dica strong { font-size: 12.5px; color: #fff; }
.esc-dica small { font-size: 11px; color: var(--apagado); }
.esc-pessoa:hover .esc-dica { opacity: 1; transform: translate(-50%, 0); }

.esc-fora { padding: 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(20, 26, 35, .9), rgba(13, 17, 23, .9)); }
.esc-fora h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.esc-fora-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; margin-bottom: 4px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; text-align: left; cursor: pointer; color: var(--texto); }
.esc-fora-item:hover { background: rgba(255, 255, 255, .04); }
.esc-fora-item > span:last-child { display: grid; min-width: 0; }
.esc-fora-item strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-fora-item small { font-size: 11px; color: var(--apagado); }
.esc-fora-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #1f2530; color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 800; font-family: ui-monospace, monospace; filter: grayscale(1); }
.esc-vazio { margin: 0; font-size: 13px; color: var(--apagado); }

@media (max-width: 1100px) { .esc-palco { grid-template-columns: 1fr; } }

/* estilo Gather: mapa claro, etiquetas em pilula escura */
.esc-mapa { background: #f3e3cf; border: 6px solid #fff; outline: 1px solid rgba(255, 255, 255, .15); border-radius: 22px; }
.esc-nome {
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px 5px 9px; gap: 6px;
  background: rgba(24, 26, 34, .92); border: 0; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  bottom: calc(100% + 4px);
}
.esc-nome::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: rgba(24, 26, 34, .92); }
.esc-nome i { width: 9px; height: 9px; border-radius: 50%; }
.esc-pessoa:hover .esc-nome { background: #ff6a2b; }
.esc-pessoa:hover .esc-nome::after { border-top-color: #ff6a2b; }
.esc-pessoa { height: 13%; transform: translate(-50%, -88%); }
.esc-placa {
  position: absolute; left: calc(var(--x) / 26 * 100%); top: calc(var(--y) / 15 * 100%); transform: translate(-50%, -50%);
  padding: 4px 16px; border-radius: 999px; background: rgba(255, 255, 255, .72); color: rgba(60, 64, 80, .55);
  font-size: clamp(11px, 1.3vw, 18px); font-weight: 600; letter-spacing: .01em; pointer-events: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}

/* escritorio dark premium */
.esc-mapa {
  background: #0b0d12; border: 1px solid rgba(255, 120, 60, .3); outline: 0; border-radius: 22px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 6px rgba(255, 255, 255, .02), 0 0 60px -10px rgba(255, 90, 31, .25);
}
.esc-mapa::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 90% at 50% 0%, transparent 60%, rgba(0, 0, 0, .45)); }
.esc-placa { background: rgba(11, 13, 18, .6); color: rgba(255, 200, 170, .7); border: 1px solid rgba(255, 120, 60, .25); backdrop-filter: blur(4px); box-shadow: none; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(9px, .9vw, 12px); font-weight: 700; }
.esc-nome { gap: 7px; padding: 5px 11px 5px 9px; background: rgba(11, 13, 18, .9); border: 1px solid rgba(255, 120, 60, .35); box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 12px -4px rgba(255, 106, 43, .6); }
.esc-nome::after { border-top-color: rgba(11, 13, 18, .9); }
.esc-nome b { font-weight: 700; }
.esc-nome em { font-style: normal; font-weight: 700; font-size: 11px; color: #ffb08a; padding-left: 7px; border-left: 1px solid rgba(255, 255, 255, .15); font-variant-numeric: tabular-nums; }
.esc-pessoa:hover .esc-nome em { color: #fff; border-left-color: rgba(255, 255, 255, .4); }

/* tag do escritorio em pixel: sem o "pulo" do hover global dos botoes */
.esc-pessoa, .esc-pessoa:hover, .esc-pessoa:active, .esc-pessoa:focus { transform: translate(-50%, -88%) !important; transition: none !important; filter: none !important; box-shadow: none !important; }
.esc-nome {
  font-family: 'Pixelify Sans', ui-monospace, monospace; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px 4px 8px; border-radius: 0; border: 0; background: #0b0d12; color: #fff;
  /* borda de pixel com cantos cortados */
  box-shadow: 0 -2px 0 #ff6a2b, 0 2px 0 #ff6a2b, -2px 0 0 #ff6a2b, 2px 0 0 #ff6a2b, 0 6px 0 rgba(0, 0, 0, .45);
  transition: none;
}
.esc-nome::after { margin-left: -4px; border-width: 4px; border-top-color: #ff6a2b; top: calc(100% + 2px); }
.esc-nome i { width: 7px; height: 7px; border-radius: 0; box-shadow: none; }
.esc-nome em { font-size: 12px; color: #ffb08a; border-left: 2px solid #2b313d; padding-left: 7px; }
.esc-pessoa:hover .esc-nome { background: #ff6a2b; }
.esc-pessoa:hover .esc-nome em { color: #0b0d12; border-left-color: rgba(0, 0, 0, .3); }
.esc-pessoa:hover .esc-nome::after { border-top-color: #ff6a2b; }
.esc-dica { border-radius: 0; font-family: 'Pixelify Sans', ui-monospace, monospace; border: 0; background: #0b0d12; box-shadow: 0 -2px 0 #2b313d, 0 2px 0 #2b313d, -2px 0 0 #2b313d, 2px 0 0 #2b313d; transition: opacity .1s; transform: translate(-50%, 0) !important; }
.esc-placa { font-family: 'Pixelify Sans', ui-monospace, monospace; border-radius: 0; border: 0; box-shadow: 0 -2px 0 rgba(255,120,60,.4), 0 2px 0 rgba(255,120,60,.4), -2px 0 0 rgba(255,120,60,.4), 2px 0 0 rgba(255,120,60,.4); letter-spacing: .08em; }

/* lista da equipe ao lado do mapa: foto + sinal vivo do estado */
.esc-fora-item { position: relative; padding: 9px 8px; }
.esc-fora-av { position: relative; width: 42px; height: 42px; border-radius: 50%; filter: none; overflow: visible; background: #1f2530; }
.esc-fora-ini { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-size: 12px; }
.esc-fora-av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.esc-fora-av img.ok { opacity: 1; }
.esc-fora-item.trabalhando .esc-fora-av { box-shadow: 0 0 0 2px #0e1218, 0 0 0 4px #3fcf8e; animation: esc-pulsa-verde 2s ease-in-out infinite; }
.esc-fora-item.intervalo .esc-fora-av { box-shadow: 0 0 0 2px #0e1218, 0 0 0 4px #f5b947; animation: esc-respira 3s ease-in-out infinite; }
.esc-fora-item.encerrado .esc-fora-av { box-shadow: 0 0 0 2px #0e1218, 0 0 0 4px #6b7290; }
.esc-fora-item.encerrado .esc-fora-av img, .esc-fora-item.encerrado .esc-fora-ini { filter: saturate(.35) brightness(.75); }
.esc-fora-item.fora .esc-fora-av img, .esc-fora-item.fora .esc-fora-ini { filter: grayscale(1) brightness(.6); }
.esc-fora-item.fora strong { color: var(--apagado); }
.esc-fora-item.trabalhando small { color: #3fcf8e; }
.esc-fora-item.intervalo small { color: #f5b947; }
@keyframes esc-pulsa-verde { 50% { box-shadow: 0 0 0 2px #0e1218, 0 0 0 4px #3fcf8e, 0 0 14px 2px rgba(63, 207, 142, .55); } }
@keyframes esc-respira { 50% { transform: scale(1.05); } }

.esc-sinal { position: absolute; right: -6px; bottom: -4px; display: flex; align-items: flex-end; gap: 2px; padding: 3px 4px; border-radius: 8px; background: #0e1218; border: 1px solid rgba(255, 255, 255, .1); }
.esc-sinal.digita i { width: 4px; height: 4px; border-radius: 50%; background: #3fcf8e; animation: digitando 1.1s ease-in-out infinite; }
.esc-sinal.digita i:nth-child(2) { animation-delay: .15s; }
.esc-sinal.digita i:nth-child(3) { animation-delay: .3s; }
.esc-sinal.cafe { padding: 1px 3px; font-size: 11px; line-height: 1; }
.esc-sinal.cafe b { position: absolute; bottom: 100%; width: 2px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .6); animation: esc-vapor 1.6s ease-out infinite; }
.esc-sinal.cafe b:first-child { left: 5px; }
.esc-sinal.cafe b:nth-child(2) { left: 9px; animation-delay: .5s; }
@keyframes esc-vapor { from { transform: translateY(2px) scaleY(.6); opacity: .8; } to { transform: translateY(-8px) scaleY(1.2); opacity: 0; } }
.esc-sinal.dorme { padding: 1px 3px; font-size: 10px; line-height: 1; }
.esc-sinal.dorme b { position: absolute; left: 100%; bottom: 60%; font-size: 9px; font-weight: 800; color: #a5acc8; animation: esc-zzz 2.4s ease-out infinite; }
.esc-sinal.dorme b:nth-of-type(2) { animation-delay: 1.2s; }
@keyframes esc-zzz { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } to { transform: translate(8px, -14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .esc-fora-av, .esc-sinal *, .esc-sinal b { animation: none !important; } }

/* ---- novo colaborador: simples e direto ---- */
dialog.nc-janela {
  width: min(460px, calc(100vw - 32px)); max-width: none; padding: 0; border-radius: 22px; color: var(--texto);
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(100% 50% at 0% 0%, rgba(255, 90, 31, .1), transparent 60%), linear-gradient(180deg, #131922, #0d1117);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .75);
}
.nc-janela form { display: grid; gap: 16px; padding: 24px 26px 22px; }
.nc-topo { display: flex; align-items: center; gap: 14px; }
.nc-topo > div { flex: 1; }
.nc-topo h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.nc-topo small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--apagado); line-height: 1.4; }
.nc-icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 8px 20px -6px rgba(255, 90, 31, .7); }
.nc-icone svg, .nc-ok svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nc-x { align-self: flex-start; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--linha); background: transparent; box-shadow: none; cursor: pointer; }
.nc-x svg { width: 14px; height: 14px; fill: none; stroke: var(--apagado); stroke-width: 2; stroke-linecap: round; }
.nc-campo { display: grid; gap: 7px; margin: 0; }
.nc-campo > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.nc-campo > span em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; margin-left: 4px; }
.nc-campo > small { font-size: 11.5px; color: var(--apagado); min-height: 0; }
.nc-campo input { height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); font-size: 14px; width: 100%; }
.nc-campo input:focus { outline: none; border-color: rgba(255, 90, 31, .55); box-shadow: 0 0 0 4px rgba(255, 90, 31, .12); }
.nc-senha { display: flex; gap: 8px; }
.nc-senha input { font-family: ui-monospace, 'Cascadia Code', monospace; letter-spacing: .06em; }
.nc-senha button { flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); box-shadow: none; cursor: pointer; color: var(--apagado); }
.nc-senha button:hover { color: #ff9a66; border-color: rgba(255, 90, 31, .4); }
.nc-senha svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nc-cargos { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-cargos button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: transparent; color: var(--apagado); font-size: 13px; font-weight: 600; box-shadow: none; cursor: pointer; }
.nc-cargos button:hover { color: var(--texto); }
.nc-cargos button.ativo { color: #fff; background: rgba(255, 90, 31, .16); border-color: rgba(255, 90, 31, .5); }
.nc-janela .erro { margin: 0; }
.nc-janela .erro:empty { display: none; }
.nc-acoes { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.nc-acoes button { height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; }
.nc-cancelar { background: transparent; border: 1px solid rgba(255, 255, 255, .1); color: var(--apagado); box-shadow: none; }
.nc-criar { border: 0; color: #fff; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 10px 24px -10px rgba(255, 90, 31, .75); }
.nc-pronto { display: grid; justify-items: center; gap: 8px; text-align: center; }
.nc-pronto h2 { margin: 6px 0 0; font-size: 20px; }
.nc-pronto p { margin: 0; color: var(--apagado); font-size: 13.5px; }
.nc-pronto > small { color: var(--apagado); font-size: 12px; }
.nc-pronto .nc-acoes { width: 100%; justify-content: center; margin-top: 6px; }
.nc-ok { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(160deg, #3fcf8e, #22a86b); box-shadow: 0 10px 24px -8px rgba(63, 207, 142, .7); }
.nc-cartao { width: 100%; margin: 8px 0 4px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); text-align: left; }
.nc-cartao div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; padding: 11px 14px; }
.nc-cartao div + div { border-top: 1px solid rgba(255, 255, 255, .06); }
.nc-cartao span { font-size: 11.5px; color: var(--apagado); }
.nc-cartao strong { font-size: 13.5px; font-family: ui-monospace, 'Cascadia Code', monospace; word-break: break-all; }
/* janela do novo colaborador cabe em tela baixa: rola por dentro e os botoes ficam sempre a vista */
dialog.nc-janela { max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; }
.nc-janela form { gap: 12px; padding: 20px 24px 0; }
.nc-campo input { height: 40px; }
.nc-senha button { width: 40px; height: 40px; }
.nc-cargos button { height: 32px; padding: 0 12px; font-size: 12.5px; }
.nc-janela .nc-acoes {
  position: sticky; bottom: 0; margin: 4px -24px 0; padding: 14px 24px 18px;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0), #0d1117 35%);
}

.nc-regras { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-regras span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--apagado); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: all .2s; }
.nc-regras span::before { content: '○'; font-size: 10px; }
.nc-regras span.ok { color: #3fcf8e; background: rgba(63, 207, 142, .1); border-color: rgba(63, 207, 142, .35); }
.nc-regras span.ok::before { content: '✓'; }
.nc-criar:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---- primeiro acesso: criar a propria senha ---- */
dialog.ts-janela {
  width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 24px); overflow-y: auto; padding: 0; border-radius: 24px; color: var(--texto);
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(100% 45% at 50% 0%, rgba(255, 90, 31, .16), transparent 70%), linear-gradient(180deg, #131922, #0d1117);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85);
}
dialog.ts-janela::backdrop { background: rgba(5, 6, 9, .75); backdrop-filter: blur(10px); }
.ts-janela form { display: grid; gap: 14px; padding: 30px 28px 26px; }
.ts-topo { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: 6px; }
.ts-cadeado { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 8px; border-radius: 18px; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 14px 30px -10px rgba(255, 90, 31, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ts-cadeado svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ts-topo h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.ts-topo p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--apagado); max-width: 30ch; }
.ts-campo { display: grid; gap: 7px; margin: 0; }
.ts-campo > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.ts-entrada { position: relative; }
.ts-entrada input { width: 100%; height: 46px; padding: 0 46px 0 14px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); font-size: 15px; }
.ts-entrada input:focus { outline: none; border-color: rgba(255, 90, 31, .55); box-shadow: 0 0 0 4px rgba(255, 90, 31, .12); }
.ts-entrada button { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--apagado); cursor: pointer; }
.ts-entrada button:hover, .ts-entrada button.ativo { color: #ff9a66; background: rgba(255, 90, 31, .1); }
.ts-entrada svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ts-forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ts-forca i { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); transition: background .25s; }
.ts-forca[data-nivel="1"] i:nth-child(-n + 1) { background: #ff6b6b; }
.ts-forca[data-nivel="2"] i:nth-child(-n + 2) { background: #f5b947; }
.ts-forca[data-nivel="3"] i:nth-child(-n + 3) { background: #9ad64e; }
.ts-forca[data-nivel="4"] i { background: #3fcf8e; }
.ts-regras { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-regras span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--apagado); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: all .2s; }
.ts-regras span::before { content: '○'; font-size: 10px; }
.ts-regras span.ok { color: #3fcf8e; background: rgba(63, 207, 142, .1); border-color: rgba(63, 207, 142, .35); }
.ts-regras span.ok::before { content: '✓'; }
.ts-janela .erro { margin: 0; }
.ts-janela .erro:empty { display: none; }
.ts-salvar { height: 48px; margin-top: 4px; border: 0; border-radius: 14px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 12px 28px -10px rgba(255, 90, 31, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ts-salvar:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.pf-nome-edit { width: 100%; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .2); color: var(--texto); font-size: 15px; font-weight: 600; }
.pf-nome-edit:focus { outline: none; border-color: rgba(255, 90, 31, .5); }
.janelao-pe { display: flex; gap: 10px; justify-content: flex-end; }
.pf-editar-ficha { height: 42px; padding: 0 18px; border: 0; border-radius: 12px; color: #fff; font-weight: 600; cursor: pointer; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 10px 24px -10px rgba(255, 90, 31, .75); margin-right: auto; }

/* quem da equipe esta digitando (so interno) */
.central-digitando { display: flex; align-items: center; gap: 8px; margin: 0 18px; padding: 6px 12px; border-radius: 10px 10px 0 0;
  font-size: 12.5px; color: var(--apagado); background: rgba(255, 90, 31, .06); border: 1px solid rgba(255, 90, 31, .18); border-bottom: 0; animation: sel-abre .2s ease; }
.central-digitando[hidden] { display: none; }
.central-digitando strong { color: #ffb08a; font-weight: 600; }
.central-digitando small { margin-left: auto; font-size: 10.5px; opacity: .6; }
.central-digitando .digitando i { background: #ff7a3d; }

.central .central-escrever { position: relative; }
.central-digitando { position: absolute; left: 16px; right: 16px; bottom: 100%; margin: 0; z-index: 2; pointer-events: none;
  background: #151a22; backdrop-filter: blur(6px); }
/* a lista de conversas rola em vez de espremer os cartoes */
.central .central-lista { overflow-y: auto; }
.central .central-item { flex: 0 0 auto !important; min-height: max-content; }

/* tag com o nome de quem da equipe respondeu (o cliente nao ve) */
.bolha-autor { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-bottom: 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: rgba(0, 0, 0, .22); color: #fff; }

.wa-historico { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none;
  background: rgba(255, 90, 31, .12); border: 1px solid rgba(255, 90, 31, .4); color: #ffb08a; }
.wa-historico:hover { background: rgba(255, 90, 31, .22); color: #fff; }

/* quem assumiu a conversa: foto + nome, e os pontinhos quando esta digitando */
.central .central-quem { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); font-size: 11px; font-weight: 600; color: var(--texto); }
.central .central-quem.minha { background: rgba(255, 90, 31, .12); border-color: rgba(255, 90, 31, .3); color: #ffb08a; }
.central-quem-foto { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
  background: #2b313d; color: #fff; font-size: 8px; font-weight: 800; }
.central-quem-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.central-quem-digita { display: none !important; }
.central .central-quem.digitando-agora { border-color: rgba(63, 207, 142, .45); background: rgba(63, 207, 142, .1); }
.central .central-quem.digitando-agora .central-quem-digita { display: inline-flex !important; }
.central .central-quem.digitando-agora .central-quem-digita i { background: #3fcf8e; }
.central .central-quem.digitando-agora .central-quem-foto { box-shadow: 0 0 0 2px rgba(63, 207, 142, .7); animation: esc-pulsa-verde 1.6s ease-in-out infinite; }
.central-quem-outro { padding-left: 9px !important; }

/* ---- digitando: animacao refinada ---- */
.central .central-item.alguem-digitando .central-previa { display: none; }
.central-previa-digita { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #3fcf8e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: sel-abre .25s ease; }
.central-previa-digita b { display: inline-block; font-weight: 800; animation: dg-ponto 1.2s infinite; }
.central-previa-digita b:nth-child(2) { animation-delay: .2s; }
.central-previa-digita b:nth-child(3) { animation-delay: .4s; }
@keyframes dg-ponto { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.central .central-quem.digitando-agora {
  position: relative; isolation: isolate; border-color: transparent; background: #0f1a16; color: #c9f5df;
  box-shadow: 0 0 14px -2px rgba(63, 207, 142, .45);
}
.central .central-quem.digitando-agora::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--dg-ang, 0deg), #3fcf8e, transparent 30%, #3fcf8e 60%, transparent 85%, #3fcf8e);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: dg-gira 1.6s linear infinite;
}
@property --dg-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes dg-gira { to { --dg-ang: 360deg; } }
.central .central-quem.digitando-agora .central-quem-foto { box-shadow: 0 0 0 2px #3fcf8e; animation: esc-pulsa-verde 1.4s ease-in-out infinite; }

/* bolhinha de chat com os tres pontos quicando */
.central .central-quem-digita {
  display: none !important; align-items: center; gap: 3px; height: 16px; padding: 0 6px; margin-left: 2px;
  border-radius: 8px 8px 8px 3px; background: rgba(63, 207, 142, .18);
}
.central .central-quem.digitando-agora .central-quem-digita { display: inline-flex !important; animation: sel-abre .2s ease; }
.central .central-quem-digita i { width: 4px; height: 4px; border-radius: 50%; background: #3fcf8e; animation: dg-quica 1s ease-in-out infinite; }
.central .central-quem-digita i:nth-child(2) { animation-delay: .15s; }
.central .central-quem-digita i:nth-child(3) { animation-delay: .3s; }
@keyframes dg-quica { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.central-quem-outro { padding-left: 2px !important; }

/* =========================================================
   BOTOES: acabamento unico (altura, alinhamento, estados)
   ========================================================= */
/* botoes de acao das barras e cabecalhos: mesma altura, texto no centro */
.central .central-acoes { display: flex; align-items: center; gap: 8px; }
.central .central-acoes button,
.barra-acoes button, .acoes-ajustes button, .janelao-pe button, .acoes button, .barra > button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-height: 40px; padding: 0 18px !important; margin: 0;
  border-radius: 12px !important; line-height: 1; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.central .central-acoes button svg { width: 16px; height: 16px; }

/* secundario: vidro discreto */
.central .central-acoes button.discreto,
.barra-acoes button.discreto, .acoes-ajustes button.discreto, .janelao-pe button.discreto, .acoes button.discreto, .barra > button.discreto {
  background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .1) !important;
  color: rgba(255, 255, 255, .85) !important; box-shadow: none !important;
}
.central .central-acoes button.discreto:hover,
.barra-acoes button.discreto:hover, .acoes-ajustes button.discreto:hover, .janelao-pe button.discreto:hover, .acoes button.discreto:hover, .barra > button.discreto:hover {
  background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .18) !important; color: #fff !important;
}
/* principal: laranja em degrade com brilho */
.central .central-acoes button:not(.discreto),
.barra-acoes button:not(.discreto), .acoes-ajustes button:not(.discreto):not(.perigo), .acoes button:not(.discreto):not(.perigo), .barra > button:not(.discreto) {
  border: 0 !important; color: #fff !important;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f) !important;
  box-shadow: 0 8px 20px -8px rgba(255, 90, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.central .central-acoes button:not(.discreto):hover,
.barra-acoes button:not(.discreto):hover, .acoes-ajustes button:not(.discreto):not(.perigo):hover, .acoes button:not(.discreto):not(.perigo):hover, .barra > button:not(.discreto):hover {
  transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(255, 90, 31, .85), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
/* perigo: vermelho contido */
.acoes-ajustes button.perigo, .acoes button.perigo, button.discreto.perigo {
  background: rgba(255, 107, 107, .08) !important; border: 1px solid rgba(255, 107, 107, .35) !important; color: #ff8a8a !important; box-shadow: none !important;
}
.acoes-ajustes button.perigo:hover, .acoes button.perigo:hover, button.discreto.perigo:hover { background: rgba(255, 107, 107, .16) !important; color: #fff !important; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* caixa de mensagem: sem o vao embaixo, e campo e botoes na mesma linha */
.central .central-chat > .erro:empty, .central .erro:empty { display: none !important; }
.central .central-escrever { align-items: center; padding: 12px 16px !important; }
.central .central-campo { flex: 1; min-height: 46px; }
.central .central-escrever > .central-icone { width: 42px; height: 42px; flex: none; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.central .central-enviar { flex: none; }
/* caixa de mensagem: tudo com 44px, alinhado, e o chat da espaco para ela */
.central .central-chat { overflow: hidden; }
.central .central-mensagens { flex: 1 1 auto; min-height: 0; }
.central .central-escrever { flex: 0 0 auto; align-items: center !important; gap: 10px; }
.central .central-campo { min-height: 44px !important; padding: 0 6px 0 14px !important; align-items: center !important; }
.central .central-campo textarea { min-height: 42px; padding: 11px 0 !important; line-height: 20px; }
.central .central-escrever > .central-icone, .central .central-enviar {
  width: 44px !important; height: 44px !important; min-height: 44px; border-radius: 13px !important; padding: 0 !important;
}
.central .central-enviar:hover { transform: none !important; filter: brightness(1.08); }
.central .central-campo .central-icone { width: 34px; height: 34px; }
/* campo de mensagem: uma borda so (sem o anel de foco que parecia borda dupla) */
.central .central-campo { border: 1px solid rgba(255, 255, 255, .1) !important; background: rgba(255, 255, 255, .035) !important; box-shadow: none !important; border-radius: 14px !important; }
.central .central-campo:focus-within { border-color: rgba(255, 106, 43, .7) !important; box-shadow: none !important; background: rgba(255, 255, 255, .05) !important; }
.central .central-campo textarea, .central .central-campo textarea:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.central .central-escrever > .central-icone { border-radius: 14px !important; color: rgba(255, 255, 255, .6); }
.central .central-enviar { border-radius: 14px !important; }
/* previa de imagem/PDF: a imagem inteira cabe na janela, sem cortar */
dialog.ver-anexo { width: auto !important; max-width: calc(100vw - 48px) !important; height: auto !important; max-height: calc(100vh - 48px) !important; }
dialog.ver-anexo:has(iframe) { width: min(1000px, calc(100vw - 48px)) !important; height: calc(100vh - 48px) !important; }
.ver-anexo-corpo { min-height: 0; overflow: hidden; padding: 14px; }
.ver-anexo-corpo img { display: block; max-width: calc(100vw - 80px); max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 10px; }

/* botao de enviar: icone no centro exato */
.central .central-enviar { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 0 !important; }
.central .central-enviar svg { display: block; width: 19px !important; height: 19px !important; margin: 0 !important; transform: translate(-1px, 1px);
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- player de audio estilo WhatsApp ---- */
.wa-audio { display: flex; align-items: center; gap: 12px; width: 280px; padding: 4px 2px 2px; }
.wa-audio audio { display: none; }
.wa-audio-play { flex: none; position: relative; width: 44px !important; height: 44px !important; padding: 0 !important; display: grid !important; place-items: center;
  border: 0 !important; border-radius: 50% !important; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f) !important; box-shadow: 0 8px 18px -6px rgba(255, 90, 31, .75), inset 0 1px 0 rgba(255, 255, 255, .3) !important; }
.wa-audio-play svg { width: 18px; height: 18px; fill: currentColor; }
.wa-audio-play .ic-play { transform: translateX(1px); }
.wa-audio-play .ic-pausa, .wa-audio.tocando .wa-audio-play .ic-play { display: none; }
.wa-audio.tocando .wa-audio-play .ic-pausa { display: block; }
.wa-audio.tocando .wa-audio-play::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 106, 43, .55); animation: pulso 1.6s ease-out infinite; }
.wa-audio-meio { flex: 1; min-width: 0; display: grid; gap: 4px; }
.wa-audio-ondas { display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.wa-audio-ondas i { flex: 1; min-width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .22); transition: background .15s; }
.wa-audio-ondas i.tocou { background: #ff8a4d; box-shadow: 0 0 6px rgba(255, 106, 43, .5); }
.wa-audio.tocando .wa-audio-ondas i.tocou:last-of-type { animation: none; }
.wa-audio-pe { display: flex; align-items: center; justify-content: space-between; }
.wa-audio-tempo { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.wa-audio-vel { height: 20px !important; min-height: 0 !important; padding: 0 7px !important; border-radius: 999px !important; border: 0 !important;
  background: rgba(255, 255, 255, .1) !important; color: #fff !important; font-size: 10.5px !important; font-weight: 800; cursor: pointer; box-shadow: none !important; }
.wa-audio-vel:hover { background: rgba(255, 106, 43, .35) !important; }
/* na bolha laranja (mensagem da equipe) o player inverte as cores */
.bolha.minha .wa-audio-play { background: #fff !important; color: #ff5a1f; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4) !important; }
.bolha.minha .wa-audio-ondas i { background: rgba(255, 255, 255, .35); }
.bolha.minha .wa-audio-ondas i.tocou { background: #fff; box-shadow: none; }
.bolha.minha .wa-audio-tempo { color: rgba(255, 255, 255, .85); }
.bolha.minha .wa-audio-vel { background: rgba(0, 0, 0, .18) !important; }

/* ---- mensagens com foto e nome (estilo WhatsApp premium) ---- */
.central .bolha-linha { display: flex; align-items: flex-end; gap: 8px; max-width: min(78%, 560px); margin-top: 2px; }
.central .bolha-linha.primeira { margin-top: 12px; }
.central .bolha-linha .bolha { max-width: 100%; margin: 0; }
.central .bolha-linha:not(.primeira) .bolha.dele { border-top-left-radius: 8px; }
.bolha-avatar { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--cor, #ff7a3d) 22%, #11161e); color: var(--cor, #ffb08a); font-size: 11px; font-weight: 800;
  box-shadow: 0 0 0 2px #0d1117, 0 0 0 3px color-mix(in srgb, var(--cor, #ff7a3d) 45%, transparent); }
.bolha-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bolha-avatar.vazio { visibility: hidden; box-shadow: none; }
.bolha-nome { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.central .bolha.dele {
  background: linear-gradient(180deg, #1c2330, #171d27) !important; border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .8) !important; border-radius: 18px 18px 18px 6px !important; padding: 9px 14px 7px !important;
}
.central .bolha.minha { border-radius: 18px 18px 6px 18px !important; padding: 9px 14px 7px !important; }
.central .bolha-texto { font-size: 14.5px; line-height: 1.5; letter-spacing: .005em; }
.central .bolha-rodape { font-size: 10.5px; margin-top: 3px; }

/* mensagem que acabou de chegar: desliza e aparece, sem piscar a tela */
.central .chegou { animation: msg-chega .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes msg-chega { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.bolha-avatar img { transition: opacity .3s; }

/* =========================================================
   WHATSAPP: o chat ocupa a tela toda
   ========================================================= */
body:has(.central) main { padding-top: 14px !important; padding-bottom: 14px !important; }
.central { height: calc(100vh - 28px) !important; min-height: 480px; gap: 10px !important; }
.central .central-topo h1 { font-size: 22px; margin: 0; }
.central .central-topo p { margin: 2px 0 0; font-size: 12.5px; }
.central .central-grade { flex: 1 1 auto; min-height: 0; }

/* cabecalho da conversa mais enxuto: nome corta, botoes nao quebram */
.central .central-cabeca { padding: 10px 14px !important; gap: 10px; }
.central .central-cabeca-texto { min-width: 0; flex: 1; }
.central .central-cabeca-texto strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.central .central-acoes { flex-wrap: nowrap; }
.central .central-acoes button { height: 36px !important; min-height: 36px; padding: 0 14px !important; font-size: 13px !important; }

/* faixa de quem atende: uma linha so */
.central .central-faixa { margin: 8px 14px 0 !important; padding: 7px 12px !important; flex-wrap: nowrap !important; }
.central .central-faixa strong { flex: none; white-space: nowrap; }
.central .central-faixa span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* composer mais baixo */
.central .central-escrever { padding: 10px 14px !important; }
/* cabecalho, faixa e caixa de mensagem nunca encolhem: so as mensagens cedem espaco */
.central .central-chat > *, .central .central-corpo > * { flex-shrink: 0; }
.central .central-mensagens { flex: 1 1 auto !important; min-height: 120px; }
.central .central-cabeca { flex: 0 0 auto !important; min-height: 64px; align-items: center !important; }
.central .central-cabeca .central-avatar { flex: none; width: 42px; height: 42px; }
.central .central-cabeca-texto { display: grid; gap: 2px; line-height: 1.25; }
.central .central-cabeca-texto small { display: block; font-size: 12px; }
.central .central-faixa { flex: 0 0 auto !important; min-height: 36px; }
.central .central-escrever { flex: 0 0 auto !important; }

/* ---- faixa de quem atende, redesenhada ---- */
.central .central-faixa.fx { display: flex !important; align-items: center !important; gap: 10px; min-height: 44px; padding: 6px 8px 6px 10px !important;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07) !important; background: linear-gradient(90deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)) !important; }
.central .central-faixa.fx::before { display: none !important; }
.fx-texto { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.2; }
.fx-texto strong { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-texto small { font-size: 11.5px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sinal { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; }
.fx-sinal svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fx.livre { border-color: rgba(245, 185, 71, .25) !important; background: linear-gradient(90deg, rgba(245, 185, 71, .09), rgba(245, 185, 71, .02)) !important; }
.fx.livre .fx-sinal { background: rgba(245, 185, 71, .14); }
.fx.livre .fx-sinal i { width: 9px; height: 9px; border-radius: 50%; background: #f5b947; box-shadow: 0 0 0 0 rgba(245, 185, 71, .6); animation: fx-ping 1.8s ease-out infinite; }
@keyframes fx-ping { 0% { box-shadow: 0 0 0 0 rgba(245, 185, 71, .55); } 100% { box-shadow: 0 0 0 9px rgba(245, 185, 71, 0); } }
.fx-assumir { flex: none; height: 32px !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #1a1205 !important; background: linear-gradient(160deg, #ffd27a, #f5b947) !important;
  box-shadow: 0 6px 16px -6px rgba(245, 185, 71, .7) !important; display: inline-flex; align-items: center; }
.fx-assumir:hover { filter: brightness(1.06); }
.fx.resolvida { border-color: rgba(63, 207, 142, .25) !important; background: linear-gradient(90deg, rgba(63, 207, 142, .08), rgba(63, 207, 142, .02)) !important; }
.fx.resolvida .fx-sinal { background: rgba(63, 207, 142, .15); color: #3fcf8e; }
.fx-foto { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: #2b313d; color: #fff; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px #0d1117, 0 0 0 3.5px #3fcf8e; }
.fx-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx.minha .fx-foto { box-shadow: 0 0 0 2px #0d1117, 0 0 0 3.5px #ff7a3d; }
.fx-ao-vivo { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #3fcf8e; background: rgba(63, 207, 142, .1); }
.fx-ao-vivo i { width: 6px; height: 6px; border-radius: 50%; background: #3fcf8e; animation: md-pulsa-ponto 1.6s ease-in-out infinite; }
/* a regra antiga da faixa esticava todo <span>: na faixa nova so o texto cresce */
.central .central-faixa.fx > span { flex: 0 0 auto !important; white-space: normal; overflow: visible; }
.central .central-faixa.fx > .fx-texto { flex: 1 1 auto !important; min-width: 0; overflow: hidden; }
.central .central-faixa.fx > .fx-sinal { width: 30px !important; height: 30px; }

/* =========================================================
   HUB DO WHATSAPP: numero conectado + filtros deslizantes
   ========================================================= */
.wa-numero { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 7px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(63, 207, 142, .12), rgba(63, 207, 142, .03)); border: 1px solid rgba(63, 207, 142, .25);
  box-shadow: 0 10px 30px -14px rgba(63, 207, 142, .45); }
.wa-numero-foto { position: relative; flex: none; width: 42px; height: 42px; }
.wa-numero-anel { position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from var(--dg-ang, 0deg), #3fcf8e, transparent 35%, #3fcf8e 65%, transparent 90%, #3fcf8e);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: dg-gira 3s linear infinite; }
.wa-numero-img { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: #12301f; color: #3fcf8e; }
.wa-numero-img svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wa-numero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-numero-on { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #3fcf8e; border: 2px solid #0d1117; box-shadow: 0 0 8px #3fcf8e; }
.wa-numero-texto { display: grid; gap: 1px; padding-right: 4px; line-height: 1.2; }
.wa-numero-texto strong { font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.wa-numero-texto small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #3fcf8e; }
.wa-numero-texto small i { width: 6px; height: 6px; border-radius: 50%; background: #3fcf8e; animation: md-pulsa-ponto 1.6s ease-in-out infinite; }
.wa-numero .wa-desligar { width: 36px; height: 36px; padding: 0 !important; display: grid !important; place-items: center; border-radius: 50% !important;
  background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .55) !important; }
.wa-numero .wa-desligar:hover { background: rgba(255, 107, 107, .15) !important; border-color: rgba(255, 107, 107, .45) !important; color: #ff8a8a !important; }
.wa-numero .wa-desligar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.central .central-abas { position: relative; display: inline-flex !important; align-self: flex-start; gap: 2px !important; padding: 4px; border-radius: 16px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.central-abas-marca { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 12px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 122, 61, .28), rgba(255, 90, 31, .14)); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .45), 0 6px 18px -8px rgba(255, 90, 31, .7);
  transition: transform .4s cubic-bezier(.2, .9, .2, 1), width .4s cubic-bezier(.2, .9, .2, 1); }
.central .central-aba { position: relative; z-index: 1; border: 0 !important; background: transparent !important; height: 34px !important; border-radius: 12px !important; }
.central .central-aba.ativo { background: transparent !important; color: #fff; }

/* barra: filtros + lupa */
.central-barra { display: flex; align-items: center; gap: 10px; }
.central-lupa { display: flex; align-items: center; gap: 8px; height: 44px; width: 44px; padding: 0 13px; margin: 0; overflow: hidden; cursor: pointer;
  border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .6);
  transition: width .35s cubic-bezier(.2, .9, .2, 1), border-color .2s, background .2s; }
.central-lupa:hover { color: #fff; border-color: rgba(255, 255, 255, .16); }
.central-lupa svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.central-lupa input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  color: var(--texto); font-size: 13.5px; opacity: 0; transition: opacity .2s; }
.central-lupa.aberta { width: 280px; cursor: text; border-color: rgba(255, 106, 43, .5); background: rgba(255, 255, 255, .05); color: #ff9a66; }
.central-lupa.aberta input { opacity: 1; }
.central-lupa input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.central .central-item[hidden] { display: none !important; }

/* =========================================================
   FICHA DO CONTATO EM JANELA: larga, duas colunas, sem rolar
   ========================================================= */
.central.mostrando-ficha .central-ficha:not([hidden]) {
  width: min(900px, calc(100vw - 40px)) !important; max-height: calc(100vh - 40px) !important;
  border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, .08) !important;
  background: radial-gradient(90% 60% at 0% 0%, rgba(255, 90, 31, .1), transparent 60%), linear-gradient(180deg, #131922, #0d1117) !important;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85) !important;
  animation: venda-entra .3s cubic-bezier(.2, .8, .2, 1);
}
.central.mostrando-ficha .central-ficha .central-ficha-corpo { overflow: visible; }
@media (min-width: 760px) {
  .central.mostrando-ficha .ficha-nova {
    display: grid !important; grid-template-columns: 290px minmax(0, 1fr); grid-auto-rows: min-content; gap: 14px 18px; padding: 6px 18px 18px;
  }
  .central.mostrando-ficha .ficha-nova > .ficha-topo { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; justify-content: center; align-content: center; padding: 28px 18px; }
  .central.mostrando-ficha .ficha-nova > :not(.ficha-topo) { grid-column: 2; }
  .central.mostrando-ficha .ficha-nova textarea { min-height: 84px; max-height: 120px; }
}
.central.mostrando-ficha .ficha-topo .central-avatar { width: 96px !important; height: 96px !important; font-size: 30px; }
.central.mostrando-ficha .ficha-nome { font-size: 19px; line-height: 1.25; word-break: break-word; }
.central.mostrando-ficha .ficha-cartao .ficha-linha { min-height: 42px; }
.central.mostrando-ficha .central-ficha-abas { margin: 12px 14px 4px; }

/* =========================================================
   FICHA DO CONTATO: acabamento premium
   ========================================================= */
/* abas */
.central.mostrando-ficha .central-ficha-abas { background: rgba(0, 0, 0, .25) !important; border-color: rgba(255, 255, 255, .06) !important; padding: 5px !important; border-radius: 14px !important; }
.central.mostrando-ficha .ficha-abas-marca { background: linear-gradient(160deg, rgba(255, 122, 61, .32), rgba(255, 90, 31, .14)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .5), 0 8px 22px -8px rgba(255, 90, 31, .7) !important; top: 5px !important; height: calc(100% - 10px) !important; border-radius: 10px !important; }
.central.mostrando-ficha .central-ficha-abas > button { height: 38px !important; font-size: 13.5px !important; }
.central.mostrando-ficha .central-ficha-abas > button.ativo { color: #fff !important; text-shadow: 0 0 12px rgba(255, 140, 80, .5); }

/* cartao do contato: aurora, grade e anel girando */
.central.mostrando-ficha .ficha-topo {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 20px !important;
  background: #120d0b !important; border: 1px solid rgba(255, 120, 60, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 50px -30px rgba(255, 90, 31, .5);
}
.central.mostrando-ficha .ficha-topo::before {
  content: ''; position: absolute; inset: -40%; z-index: -2;
  background: radial-gradient(35% 30% at 30% 25%, rgba(255, 106, 43, .55), transparent 70%), radial-gradient(30% 28% at 75% 70%, rgba(255, 176, 102, .28), transparent 70%);
  filter: blur(20px); animation: fc-aurora 14s ease-in-out infinite alternate;
}
.central.mostrando-ficha .ficha-topo::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 80%);
}
@keyframes fc-aurora { to { transform: translate(8%, 6%) rotate(12deg) scale(1.1); } }
.central.mostrando-ficha .ficha-topo .central-avatar {
  position: relative; box-shadow: none !important; margin-bottom: 10px !important;
}
.central.mostrando-ficha .ficha-topo .central-avatar::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from var(--dg-ang, 0deg), #ff5a1f, #ffcf9e, #ff7a3d, #7c2d12, #ff5a1f);
  animation: dg-gira 6s linear infinite; filter: drop-shadow(0 10px 22px rgba(255, 90, 31, .55));
}
.central.mostrando-ficha .ficha-topo .central-avatar img { border: 4px solid #120d0b; }
.central.mostrando-ficha .ficha-nome {
  background: linear-gradient(180deg, #fff 35%, #ffcfb3); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.01em;
}
.central.mostrando-ficha .ficha-sub { color: rgba(255, 200, 170, .65) !important; }
.central.mostrando-ficha .ficha-chip { height: 26px !important; padding: 0 11px !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
.central.mostrando-ficha .ficha-chip.cliente { background: rgba(255, 90, 31, .16) !important; border-color: rgba(255, 106, 43, .35); }
.central.mostrando-ficha .ficha-copiar { background: rgba(0, 0, 0, .3) !important; border-color: rgba(255, 255, 255, .12) !important; backdrop-filter: blur(6px); }

/* lado direito: blocos com icone no titulo */
.central.mostrando-ficha .ficha-cartao { border-radius: 18px !important; border-color: rgba(255, 255, 255, .07) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important; }
.central.mostrando-ficha .ficha-linha { padding: 6px 16px !important; }
.central.mostrando-ficha .ficha-rot { display: inline-flex; align-items: center; gap: 8px; }
.central.mostrando-ficha .ficha-rot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 122, 61, .7); box-shadow: 0 0 8px rgba(255, 122, 61, .6); }
.central.mostrando-ficha .ficha-secao h3 { display: flex; align-items: center; gap: 8px; color: rgba(255, 200, 170, .75) !important; }
.central.mostrando-ficha .ficha-secao h3::before {
  content: ''; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 90, 31, .14) center / 12px no-repeat;
}
.central.mostrando-ficha .ficha-secao:nth-of-type(2) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V3h8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.central.mostrando-ficha .ficha-secao:nth-of-type(3) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E"); }
.central.mostrando-ficha .ficha-tags, .central.mostrando-ficha textarea.ficha-input {
  border-radius: 14px !important; border-color: rgba(255, 255, 255, .08) !important; background: rgba(0, 0, 0, .22) !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.central.mostrando-ficha .ficha-tags:focus-within, .central.mostrando-ficha textarea.ficha-input:focus {
  border-color: rgba(255, 106, 43, .6) !important; box-shadow: 0 0 0 4px rgba(255, 90, 31, .1), 0 10px 26px -14px rgba(255, 90, 31, .6) !important; background: rgba(0, 0, 0, .3) !important;
}
.central.mostrando-ficha .ficha-dica { display: inline-flex; align-items: center; gap: 6px; }
.central.mostrando-ficha .ficha-dica::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 6px #3fcf8e; }
@media (prefers-reduced-motion: reduce) { .central.mostrando-ficha .ficha-topo::before, .central.mostrando-ficha .ficha-topo .central-avatar::before { animation: none; } }
.central.mostrando-ficha .ficha-topo .central-avatar { overflow: visible !important; }
.central.mostrando-ficha .ficha-topo .central-avatar img { border-radius: 50%; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* nome com emoji: sem degrade (ele apagava as cores dos emojis) e com fonte de emoji */
.central.mostrando-ficha .ficha-nome, .central .central-item strong, .central .central-cabeca-texto strong, .bolha-nome, .ficha-nome {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
.bolha-nome { color: unset !important; }

/* etiquetas da conversa na lista */
.central-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag) 35%, transparent); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.central-tag.mais { --tag: #8a94a6; }

/* ---- aba Atividade: linha do tempo ---- */
.at-carregando { display: flex; justify-content: center; gap: 6px; padding: 40px 0; }
.at-carregando i { width: 8px; height: 8px; border-radius: 50%; background: #ff7a3d; animation: dg-quica 1s ease-in-out infinite; }
.at-carregando i:nth-child(2) { animation-delay: .15s; }
.at-carregando i:nth-child(3) { animation-delay: .3s; }
.at-vazio { display: grid; justify-items: center; gap: 6px; padding: 42px 20px; text-align: center; }
.at-vazio.pequeno { padding: 26px 20px; }
.at-vazio-icone { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 122, 61, .22), rgba(255, 90, 31, .08)); border: 1px solid rgba(255, 106, 43, .3); color: #ff9a66; }
.at-vazio-icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.at-vazio strong { font-size: 15px; color: #fff; }
.at-vazio small { max-width: 34ch; font-size: 12.5px; line-height: 1.5; color: var(--apagado); }
.at-linha { list-style: none; margin: 0; padding: 14px 20px 20px; display: grid; gap: 0; }
.at-linha li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding-bottom: 16px;
  animation: msg-chega .4s calc(var(--i) * 50ms) cubic-bezier(.16, 1, .3, 1) both; }
.at-linha li:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 50%, transparent), rgba(255, 255, 255, .05)); }
.at-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--cor);
  background: color-mix(in srgb, var(--cor) 14%, #11161e); border: 1px solid color-mix(in srgb, var(--cor) 35%, transparent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--cor) 70%, transparent); }
.at-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.at-corpo { padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.at-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.at-topo strong { font-size: 13.5px; color: #fff; }
.at-topo time { font-size: 11px; color: var(--apagado); white-space: nowrap; }
.at-corpo small { font-size: 12px; color: var(--apagado); }
.at-corpo p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); }

/* ---- aba Notas ---- */
.nt { display: grid; gap: 16px; padding: 14px 20px 20px; }
.nt-nova { position: relative; display: grid; gap: 8px; padding: 14px 14px 12px 52px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 210, 95, .07), rgba(255, 210, 95, .02)); border: 1px solid rgba(255, 210, 95, .2); transition: border-color .2s, box-shadow .2s; }
.nt-nova:focus-within { border-color: rgba(255, 210, 95, .5); box-shadow: 0 0 0 4px rgba(255, 210, 95, .08), 0 14px 34px -18px rgba(255, 190, 70, .6); }
.nt-cadeado { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 210, 95, .15); color: #ffd25f; }
.nt-cadeado svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nt-nova textarea { width: 100%; min-height: 48px; padding: 4px 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  resize: none; color: var(--texto); font-size: 14px; line-height: 1.55; }
.nt-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nt-pe small { font-size: 11px; color: rgba(255, 255, 255, .35); }
.nt-salvar { height: 34px !important; padding: 0 16px !important; border: 0 !important; border-radius: 10px !important; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: #1a1205 !important; background: linear-gradient(160deg, #ffe08a, #ffc94a) !important; box-shadow: 0 8px 18px -8px rgba(255, 200, 70, .7) !important; }
.nt-salvar:disabled { opacity: .35; box-shadow: none !important; }
.nt .erro:empty { display: none; }
.nt-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nt-lista li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; animation: msg-chega .4s calc(var(--i) * 50ms) cubic-bezier(.16, 1, .3, 1) both; }
.nt-autor { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #1a1205; background: linear-gradient(160deg, #ffe08a, #ffc94a); }
.nt-bolha { position: relative; padding: 10px 14px 12px; border-radius: 4px 16px 16px 16px; background: #1c1a14; border: 1px solid rgba(255, 210, 95, .16);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .8); }
.nt-bolha::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #ffd25f; }
.nt-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.nt-topo strong { font-size: 12.5px; color: #ffd25f; }
.nt-topo time { font-size: 11px; color: var(--apagado); }
.nt-bolha p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .85); white-space: pre-wrap; }

/* editar/apagar nota */
.nt-topo { position: relative; }
.nt-topo time { margin-left: auto; }
.nt-acoes { display: inline-flex; gap: 4px; margin-left: 8px; opacity: 0; transition: opacity .2s; }
.nt-lista li:hover .nt-acoes, .nt-acoes:focus-within { opacity: 1; }
.nt-acoes button { width: 26px; height: 26px; padding: 0 !important; display: grid !important; place-items: center; border: 0 !important; border-radius: 8px !important;
  background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .6) !important; box-shadow: none !important; cursor: pointer; }
.nt-acoes button:hover { background: rgba(255, 210, 95, .18) !important; color: #ffd25f !important; }
.nt-acoes button[data-apagar-nota]:hover { background: rgba(255, 107, 107, .18) !important; color: #ff8a8a !important; }
.nt-acoes svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt-edicao { display: grid; gap: 8px; margin-top: 4px; }
.nt-edicao textarea { width: 100%; min-height: 70px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255, 210, 95, .4); background: rgba(0, 0, 0, .25);
  color: var(--texto); font-size: 13.5px; line-height: 1.5; resize: vertical; outline: none; }
.nt-edicao-pe { display: flex; justify-content: flex-end; gap: 8px; }
.nt-cancelar { height: 32px !important; padding: 0 14px !important; border-radius: 10px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, .12) !important;
  color: var(--apagado) !important; box-shadow: none !important; font-size: 12.5px; cursor: pointer; }
.nt-edicao .nt-salvar { height: 32px !important; }
.nt-lista li.saindo { animation: nt-sai .3s ease forwards; }
@keyframes nt-sai { to { opacity: 0; transform: translateX(16px); } }

/* ---- equipe ao vivo no topo do WhatsApp ---- */
.central .central-topo { flex-wrap: nowrap !important; }
.wa-equipe { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 6px 8px 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.wa-equipe:empty { display: none; }
.wa-status { margin-left: 0 !important; }
.wa-equipe-rotulo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--apagado); white-space: nowrap; }
.wa-equipe-rotulo i { width: 7px; height: 7px; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 8px #3fcf8e; animation: md-pulsa-ponto 1.8s ease-in-out infinite; }
.wa-equipe-rostos { display: flex; align-items: center; }
.wa-rosto { position: relative; width: 38px !important; height: 38px !important; padding: 0 !important; margin-left: -8px; border: 0 !important; background: none !important;
  box-shadow: none !important; cursor: pointer; overflow: visible !important; transition: transform .2s; }
.wa-rosto:first-child { margin-left: 0; }
.wa-rosto:hover { transform: translateY(-3px); z-index: 2; }
.wa-rosto-foto { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: #2b313d; color: #fff;
  font-size: 11px; font-weight: 800; border: 2px solid #0d1117; }
.wa-rosto-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-rosto.eu .wa-rosto-foto { box-shadow: 0 0 0 2px rgba(255, 122, 61, .8); }
.wa-rosto-on { position: absolute; right: -1px; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #3fcf8e; border: 2px solid #0d1117; }
.wa-rosto.digitando::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from var(--dg-ang, 0deg), #3fcf8e, transparent 35%, #3fcf8e 65%, transparent 90%, #3fcf8e); animation: dg-gira 1.4s linear infinite; }
.wa-rosto-digita { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: inline-flex; gap: 2px; padding: 3px 5px; border-radius: 8px;
  background: #0f1a16; border: 1px solid rgba(63, 207, 142, .5); }
.wa-rosto-digita i { width: 3px; height: 3px; border-radius: 50%; background: #3fcf8e; animation: dg-quica 1s ease-in-out infinite; }
.wa-rosto-digita i:nth-child(2) { animation-delay: .15s; }
.wa-rosto-digita i:nth-child(3) { animation-delay: .3s; }
.wa-rosto-dica { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px); z-index: 20; display: grid; gap: 2px; min-width: 170px;
  padding: 9px 12px; border-radius: 12px; text-align: left; background: rgba(11, 13, 18, .97); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; white-space: nowrap; }
.wa-rosto-dica strong { font-size: 12.5px; color: #fff; }
.wa-rosto-dica small { font-size: 11.5px; color: var(--apagado); }
.wa-rosto.digitando .wa-rosto-dica small { color: #3fcf8e; }
.wa-rosto:hover .wa-rosto-dica { opacity: 1; transform: translate(-50%, 0); }
.wa-rosto.mais { display: grid; place-items: center; margin-left: -8px; width: 38px; height: 38px; border-radius: 50%; background: #1f2530; border: 2px solid #0d1117;
  font-size: 11px; font-weight: 800; color: var(--apagado); }

.wa-equipe:not(:has(.wa-equipe-rotulo)) { padding: 5px; }

/* ---- emojis estilo iPhone ---- */
img.em { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -.3em; margin: 0 .05em; object-fit: contain; }
.bolha-texto:has(> img.em:only-child) img.em { width: 2.6em; height: 2.6em; }
.central .central-escrever { position: relative; }
.ep { position: absolute; right: 60px; bottom: calc(100% + 10px); z-index: 30; display: grid; grid-template-rows: auto 1fr auto; width: 352px; height: 400px;
  border-radius: 20px; overflow: hidden; background: rgba(17, 21, 29, .98); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); backdrop-filter: blur(14px); animation: venda-entra .22s cubic-bezier(.2, .8, .2, 1); }
.ep-busca { display: flex; align-items: center; gap: 8px; margin: 12px 12px 6px; padding: 0 12px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--apagado); }
.ep-busca svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ep-busca input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; color: var(--texto); font-size: 13.5px; }
.ep-grade { overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }
.ep-sec h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 6px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); background: rgba(17, 21, 29, .96); }
.ep-itens { display: grid; grid-template-columns: repeat(8, 1fr); }
.ep-itens button, .ep-abas button { display: grid !important; place-items: center; height: 38px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; box-shadow: none !important; cursor: pointer; transition: background .12s, transform .12s; }
.ep-itens button:hover { background: rgba(255, 255, 255, .08) !important; transform: scale(1.18); }
.ep-em { width: 28px; height: 28px; pointer-events: none; }
.ep-abas { display: grid; grid-template-columns: repeat(9, 1fr); padding: 6px; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .2); }
.ep-abas .ep-em { width: 20px; height: 20px; filter: grayscale(.4); opacity: .75; }
.ep-abas button:hover .ep-em { filter: none; opacity: 1; }

/* ---- arrastar arquivo para a conversa ---- */
.central .central-chat { position: relative; }
.drop-camada { position: absolute; inset: 8px; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; pointer-events: none;
  border-radius: 18px; border: 2px dashed rgba(255, 122, 61, .7); background: rgba(13, 17, 23, .88); backdrop-filter: blur(6px); animation: sel-abre .15s ease; }
.drop-camada[hidden] { display: none; }
.drop-icone { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 20px; color: #fff;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 14px 30px -10px rgba(255, 90, 31, .8); animation: drop-pula 1.2s ease-in-out infinite; }
.drop-icone svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drop-camada strong { font-size: 18px; color: #fff; }
.drop-camada small { font-size: 13px; color: var(--apagado); }
@keyframes drop-pula { 50% { transform: translateY(-6px); } }
.central .central-escrever > .central-icone svg { stroke-width: 1.9; }

/* dica da equipe: compacta, de vidro, com setinha */
.wa-rosto-dica { display: flex !important; align-items: center; gap: 9px; min-width: 0 !important; max-width: 260px; padding: 8px 12px !important;
  border-radius: 12px !important; background: rgba(17, 21, 29, .82) !important; border: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(14px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .8) !important; top: calc(100% + 14px) !important; }
.wa-rosto-dica::before { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg);
  background: rgba(17, 21, 29, .92); border-left: 1px solid rgba(255, 255, 255, .08); border-top: 1px solid rgba(255, 255, 255, .08); }
.wa-dica-ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 8px #3fcf8e; }
.wa-rosto-dica > span { display: grid; gap: 1px; min-width: 0; }
.wa-rosto-dica strong { font-size: 12px !important; font-weight: 700; color: #fff; }
.wa-rosto-dica small { display: block; font-size: 11.5px !important; color: rgba(255, 255, 255, .5) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-rosto-dica small b { font-weight: 600; color: rgba(255, 255, 255, .85); }
.wa-rosto.digitando .wa-rosto-dica small { color: rgba(63, 207, 142, .8) !important; }
.wa-rosto-dica img.em { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* ---- envio sem espera ---- */
.bolha.provisoria { opacity: .85; }
.bolha.provisoria .bolha-rodape { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; width: 100%; }
.relogio-envio { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.relogio-envio::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.5px; height: 4px; margin-left: -.75px; background: currentColor;
  transform-origin: 50% 0; animation: relogio-gira 1s linear infinite; }
@keyframes relogio-gira { to { transform: rotate(360deg); } }
.bolha.provisoria.falhou { background: linear-gradient(160deg, #7a2a2a, #5a1d1d) !important; cursor: pointer; opacity: 1; }

/* ---- previa do anexo antes de enviar ---- */
.anexo-previa { padding: 10px 14px 0; }
.anexo-previa[hidden] { display: none; }
.anexo-cartao { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 14px; animation: msg-chega .3s cubic-bezier(.16, 1, .3, 1);
  background: linear-gradient(90deg, rgba(255, 122, 61, .12), rgba(255, 122, 61, .03)); border: 1px solid rgba(255, 122, 61, .3); }
.anexo-miniatura { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: rgba(255, 90, 31, .18); }
.anexo-miniatura img, .anexo-miniatura video { width: 100%; height: 100%; object-fit: cover; }
.anexo-miniatura b { font-size: 11px; font-weight: 800; color: #ff9a66; }
.anexo-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.anexo-info strong { font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anexo-info small { font-size: 11.5px; color: var(--apagado); }
.anexo-tirar { flex: none; width: 32px !important; height: 32px !important; padding: 0 !important; display: grid !important; place-items: center; border-radius: 10px !important;
  border: 0 !important; background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .6) !important; box-shadow: none !important; cursor: pointer; }
.anexo-tirar:hover { background: rgba(255, 107, 107, .18) !important; color: #ff8a8a !important; }
.anexo-tirar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* clipe: no centro do botao, inclinado como o do WhatsApp */
.central .central-escrever > #anexar { display: grid !important; place-items: center !important; }
.central .central-escrever > #anexar svg, .drop-icone svg { display: block; margin: 0 !important; transform: rotate(45deg); }
.central .central-escrever > #anexar svg { width: 20px !important; height: 20px !important; }

/* ---- previa do anexo: bandeja de vidro com a midia em destaque ---- */
.anexo-previa { padding: 12px 14px 2px !important; }
.anexo-bandeja { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); animation: msg-chega .35s cubic-bezier(.16, 1, .3, 1); }
.anexo-visual { flex: none; position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: rgba(255, 90, 31, .12); }
.anexo-bandeja.com-midia .anexo-visual { width: 132px; height: 92px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9); }
.anexo-visual img, .anexo-visual video { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo-doc { display: grid; place-items: center; align-content: center; gap: 2px; width: 100%; height: 100%; color: #ff9a66; }
.anexo-doc svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.anexo-doc b { font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.anexo-bandeja .anexo-info { gap: 3px; }
.anexo-selo { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #3fcf8e; background: rgba(63, 207, 142, .12); }
.anexo-selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 6px #3fcf8e; }
.anexo-bandeja .anexo-info strong { font-size: 14px; }
.anexo-bandeja .anexo-tirar { align-self: flex-start; border-radius: 50% !important; width: 30px !important; height: 30px !important; }

/* arquivo indo: a bolha com miniatura e um anel girando, sem texto de status */
.bolha.arquivo-indo { padding: 6px !important; }
.indo-cartao { position: relative; display: grid; place-items: center; width: 220px; height: 140px; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .25); }
.indo-cartao img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) blur(1px); }
.indo-ext { font-size: 22px; font-weight: 800; letter-spacing: .04em; color: rgba(255, 255, 255, .85); }
.indo-anel { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: indo-gira .8s linear infinite; box-shadow: 0 0 24px rgba(0, 0, 0, .4); }
@keyframes indo-gira { to { transform: rotate(360deg); } }
.indo-nome { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolha.arquivo-indo.falhou .indo-anel { display: none; }
.central .erro#erro-conversa:not(:empty) { margin: 0 16px 10px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .3); color: #ff9a9a; }

.remover-pessoa { color: rgba(255, 255, 255, .45) !important; }
.remover-pessoa:hover { color: #ff8a8a !important; border-color: rgba(255, 107, 107, .45) !important; background: rgba(255, 107, 107, .12) !important; }

/* =========================================================
   EQUIPE: cartoes menores, premium e minimalistas
   ========================================================= */
.grade-pessoas { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important; gap: 12px !important; }
.cartao-pessoa.compacto {
  position: relative; display: grid; gap: 10px; padding: 14px !important; border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important; box-shadow: 0 16px 36px -26px rgba(0, 0, 0, .9) !important;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .3s;
}
.cartao-pessoa.compacto:hover { transform: translateY(-3px); border-color: rgba(255, 122, 61, .3) !important; box-shadow: 0 22px 44px -24px rgba(255, 90, 31, .35) !important; }
.cartao-pessoa.compacto > header { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; }
.cartao-pessoa.compacto .avatar, .cartao-pessoa.compacto .avatar-trocar { flex: none; width: 40px !important; height: 40px !important; }
.cartao-pessoa.compacto .avatar { box-shadow: 0 0 0 2px #0d1117, 0 0 0 3.5px rgba(255, 255, 255, .1); }
.cartao-pessoa-quem { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cartao-pessoa.compacto .nome-pessoa, .cartao-pessoa.compacto .cartao-pessoa-quem strong {
  display: block; padding: 0 !important; height: auto !important; border: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 14px !important; font-weight: 700; color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cartao-pessoa.compacto .nome-pessoa:hover { color: #ff9a66; }
.cartao-pessoa.compacto .nome-pessoa .selo { height: 16px; padding: 0 6px; font-size: 9.5px; vertical-align: 1px; }
.cartao-pessoa.compacto .email { font-size: 11.5px; color: rgba(255, 255, 255, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* acoes aparecem ao passar o mouse, pequenas e discretas */
.cartao-pessoa.compacto .engrenagem-pessoa {
  flex: none; width: 28px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important; border-radius: 9px !important;
  background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .55);
  opacity: 0; transform: translateY(2px); transition: opacity .2s, transform .2s, background .2s, color .2s;
}
.cartao-pessoa.compacto:hover .engrenagem-pessoa, .cartao-pessoa.compacto .engrenagem-pessoa:focus-visible { opacity: 1; transform: none; }
.cartao-pessoa.compacto .engrenagem-pessoa:hover { background: rgba(255, 122, 61, .14) !important; color: #ff9a66; }
.cartao-pessoa.compacto .engrenagem-pessoa svg { width: 14px; height: 14px; }
@media (hover: none) { .cartao-pessoa.compacto .engrenagem-pessoa { opacity: 1; transform: none; } }
/* etiquetas: pontos e texto pequeno, sem caixa pesada */
.cartao-pessoa-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.cartao-pessoa-linha .selo { display: inline-flex; align-items: center; gap: 5px; height: 22px !important; padding: 0 9px !important; border-radius: 999px !important;
  font-size: 10.5px !important; font-weight: 700 !important; border: 0 !important; background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .6) !important; }
.cartao-pessoa-linha .selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cartao-pessoa-linha .selo.ativo { background: rgba(63, 207, 142, .12) !important; color: #3fcf8e !important; }
.cartao-pessoa-linha .selo.encerrado { background: rgba(255, 107, 107, .12) !important; color: #ff8a8a !important; }
/* numeros: tres colunas enxutas */
.cartao-pessoa-numeros { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; padding: 8px 0 0 !important; margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important; }
.cartao-pessoa-numeros > div { display: grid; gap: 1px; }
.cartao-pessoa-numeros > div + div { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .05); }
.cartao-pessoa-numeros small { font-size: 10px !important; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .38) !important; }
.cartao-pessoa-numeros strong { font-size: 15px !important; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao-pessoa-numeros .acesso { font-size: 12px !important; font-weight: 600; }
.cartao-pessoa-numeros .atrasadas { font-style: normal; font-size: 10px; font-weight: 700; color: #ff8a8a; margin-left: 2px; }
.cartao-pessoa-ocupacao { margin: 0 !important; }
.cartao-pessoa-ocupacao * { font-size: 10.5px !important; }
.cartao-pessoa.compacto.inativa { opacity: .55; }
/* dica da equipe: largura pelo conteudo (ela encolhia e cortava "em ...") */
.wa-rosto-dica { width: max-content !important; min-width: 180px !important; max-width: 300px !important; }
.wa-rosto-dica > span { flex: 1; }

/* =========================================================
   NIVEIS DOS PLANOS: molduras e placas metalicas
   ========================================================= */
.nivel-bronze { --m1: #f0b27a; --m2: #b5651d; --m3: #6e3a12; --mbrilho: rgba(240, 160, 90, .55); }
.nivel-prata { --m1: #f4f6fa; --m2: #a8b3c4; --m3: #5f6b7d; --mbrilho: rgba(210, 220, 235, .5); }
.nivel-ouro { --m1: #fff1b8; --m2: #e8b434; --m3: #8a5d08; --mbrilho: rgba(255, 205, 80, .6); }
.nivel-diamante { --m1: #e9fbff; --m2: #7fd6ff; --m3: #6a5cff; --mbrilho: rgba(140, 200, 255, .6); }

/* placa (cliente e plano) */
.placa-plano { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px; border-radius: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .08); }
.placa-plano[class*="nivel-"] { color: #1a1206; background: linear-gradient(135deg, var(--m1), var(--m2) 55%, var(--m3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 4px 12px -4px var(--mbrilho); text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  position: relative; overflow: hidden; }
.placa-plano.nivel-diamante { color: #0b1033; }
.placa-plano[class*="nivel-"]::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); animation: placa-brilho 3.6s ease-in-out infinite; }
@keyframes placa-brilho { 0%, 65% { left: -60%; } 100% { left: 130%; } }
.placa-plano i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }

/* moldura da foto do cliente pelo plano */
.moldura-plano { position: relative; display: inline-grid; flex: none; border-radius: 50%; }
.moldura-plano[class*="nivel-"] { padding: 2.5px; background: conic-gradient(from 210deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1));
  box-shadow: 0 0 14px -2px var(--mbrilho); }
.moldura-plano[class*="nivel-"] > * { box-shadow: 0 0 0 2px #0d1117 !important; }
.moldura-plano.nivel-diamante { animation: moldura-gira 6s linear infinite; }
.moldura-plano.nivel-diamante > * { animation: moldura-gira 6s linear infinite reverse; }
@keyframes moldura-gira { to { transform: rotate(360deg); } }

/* cartao do plano: moldura metalica e placa no topo */
.pl-cartao[class*="nivel-"]:not(.nivel-platina) { position: relative; border: 0 !important; isolation: isolate;
  background: linear-gradient(180deg, #151a22, #0f131a) padding-box, linear-gradient(145deg, var(--m1), var(--m2) 40%, var(--m3) 75%, var(--m2)) border-box !important;
  border: 1.5px solid transparent !important; box-shadow: 0 24px 50px -30px var(--mbrilho), inset 0 1px 0 rgba(255, 255, 255, .05) !important; }
.pl-cartao[class*="nivel-"]:not(.nivel-platina)::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--m2) 22%, transparent), transparent 70%); }
.pl-cartao .pl-nivel { background: linear-gradient(135deg, var(--m1), var(--m2) 55%, var(--m3)) !important; color: #1a1206 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 18px -8px var(--mbrilho) !important; }
.pl-placa { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 5px 16px; border-radius: 8px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: #1a1206; overflow: hidden;
  background: linear-gradient(135deg, var(--m1), var(--m2) 55%, var(--m3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 8px 20px -8px var(--mbrilho); }
.pl-placa:empty { display: none; }
.pl-cartao.nivel-diamante .pl-placa { color: #0b1033; }
.pl-placa::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: placa-brilho 3.6s ease-in-out infinite; }
.pl-cartao .pl-preco strong { background: linear-gradient(180deg, var(--m1), var(--m2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-cartao .pl-fita { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .placa-plano::after, .pl-placa::after, .moldura-plano, .moldura-plano > * { animation: none !important; } }

.pl-cartao.nivel-bronze, .pl-cartao.nivel-prata, .pl-cartao.nivel-ouro, .pl-cartao.nivel-diamante { --nivel: var(--m2); --nivel-suave: color-mix(in srgb, var(--m2) 14%, transparent); overflow: visible !important; margin-top: 12px; }
.pl-grade { padding-top: 6px; }

/* emojis do iPhone dentro de nomes e previas: do tamanho da letra */
.central-item strong img.em, .central-previa img.em, .central-cabeca-texto img.em, .bolha-nome img.em, .ficha-nome img.em, .esc-nome img.em, .pf-nome img.em {
  width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.ficha-nome img.em { width: 1.1em; height: 1.1em; }

/* ---- plano na lista de clientes: versao premium ---- */
/* moldura no formato da foto (quadrada arredondada), metal com brilho */
.moldura-plano[class*="nivel-"] { border-radius: 14px !important; padding: 3px !important; animation: none !important;
  background: linear-gradient(145deg, var(--m1), var(--m2) 40%, var(--m3) 70%, var(--m2)) !important; box-shadow: 0 6px 18px -6px var(--mbrilho) !important; }
.moldura-plano[class*="nivel-"] > *:not(.medalha-plano) { border-radius: 11px !important; animation: none !important; box-shadow: 0 0 0 2px #0f141b !important; }
.moldura-plano.nivel-diamante::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 250% 100%; animation: moldura-reflexo 3.2s ease-in-out infinite; }
@keyframes moldura-reflexo { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.medalha-plano { position: absolute; right: -6px; bottom: -6px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  color: #1a1206; background: linear-gradient(135deg, var(--m1), var(--m2) 55%, var(--m3)); box-shadow: 0 0 0 2px #0f141b, 0 4px 10px -2px var(--mbrilho); }
.nivel-diamante .medalha-plano { color: #0b1033; }
.medalha-plano svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.nivel-diamante .medalha-plano svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }

/* a linha do cliente: brilho da cor do plano vindo da esquerda + faixa metalica */
tr.linha-nivel > td { background: transparent; }
tr.linha-nivel > td:first-child { position: relative; }
tr.linha-nivel > td:first-child::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--m1), var(--m2), var(--m3)); box-shadow: 0 0 10px var(--mbrilho); }
tr.linha-nivel { background: linear-gradient(90deg, color-mix(in srgb, var(--m2) 9%, transparent), transparent 45%) !important; }
tr.linha-nivel:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--m2) 16%, transparent), transparent 60%) !important; }

/* placa maior, com icone do nivel */
.placa-plano[class*="nivel-"] { height: 26px; padding: 0 12px 0 9px; gap: 7px; border-radius: 8px; font-size: 11.5px; letter-spacing: .14em; }
.placa-plano svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.placa-plano.nivel-diamante svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.placa-plano i { display: none; }

/* ---- nova conversa ---- */
.central-nova { display: inline-flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 16px !important; border-radius: 14px !important; border: 0 !important;
  background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; color: #fff !important; font-weight: 700; font-size: 13.5px; cursor: pointer; flex: none;
  box-shadow: 0 10px 24px -12px rgba(255, 90, 31, .8) !important; transition: transform .2s, box-shadow .2s; }
.central-nova:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(255, 90, 31, .95) !important; }
.central-nova svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.nova-conversa-janela { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px;
  background: linear-gradient(180deg, #161b23, #0f131a); color: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.nova-conversa-janela::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.nova-conversa-janela form { display: grid; gap: 14px; padding: 24px; }
.nova-conversa-janela h2 { margin: 0; font-size: 19px; }
.nova-conversa-janela p { margin: -8px 0 0; color: var(--apagado); font-size: 13px; }
.nova-conversa-janela p.erro { margin: 0; color: #ff8a8a; min-height: 0; }
.nova-conversa-janela label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.nova-conversa-janela label small { font-weight: 400; color: var(--apagado); }
.nova-conversa-janela input, .nova-conversa-janela textarea { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.nova-conversa-janela input:focus, .nova-conversa-janela textarea:focus { outline: none; border-color: rgba(255, 122, 61, .7); box-shadow: 0 0 0 3px rgba(255, 122, 61, .15); }
.nova-conversa-janela .acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ---- contagem do prazo da tarefa ---- */
.prazo-conta { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; border: 1px solid transparent; }
.prazo-conta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.prazo-conta.folga { color: #8fd3a8; background: rgba(60, 200, 120, .1); border-color: rgba(60, 200, 120, .22); }
.prazo-conta.perto { color: #ffc46b; background: rgba(255, 180, 60, .12); border-color: rgba(255, 180, 60, .28); }
.prazo-conta.hoje { color: #ff9a5c; background: rgba(255, 122, 61, .14); border-color: rgba(255, 122, 61, .35); }
.prazo-conta.hoje svg { animation: prazo-pulsa 1.6s ease-in-out infinite; }
.prazo-conta.atrasada { color: #ff8a8a; background: rgba(255, 80, 80, .14); border-color: rgba(255, 80, 80, .38); box-shadow: 0 0 14px -4px rgba(255, 80, 80, .5); }
@keyframes prazo-pulsa { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .prazo-conta.hoje svg { animation: none; } }

/* ---- horario limite da tarefa ---- */
.md-hora { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.md-hora:focus-within { border-color: rgba(255, 122, 61, .6); color: #ff9a5c; }
.md-hora svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.md-hora input { width: 74px; border: 0 !important; background: transparent !important; color: #fff; font: inherit; font-size: 13px; padding: 0 !important;
  box-shadow: none !important; color-scheme: dark; outline: none; }

/* ---- tarefa: Pessoal x Cliente ---- */
.md-tipo { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; isolation: isolate;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.md-tipo-op { position: relative; z-index: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 16px !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(255, 255, 255, .55) !important; font-weight: 700; font-size: 13px;
  border-radius: 9px !important; cursor: pointer; transition: color .25s; }
.md-tipo-op svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-tipo-op.ativo { color: #fff !important; }
.md-tipo-luz { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px;
  background: linear-gradient(135deg, rgba(255, 122, 61, .9), rgba(255, 90, 31, .9)); box-shadow: 0 6px 16px -6px rgba(255, 90, 31, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.md-tipo.no-cliente .md-tipo-luz { transform: translateX(100%); }
.md-tipo-cliente[hidden] { display: none !important; }
.md-tipo-cliente { animation: msg-chega .3s cubic-bezier(.16, 1, .3, 1); }
.te-campo .md-tipo { margin-bottom: 8px; }

/* ---- tags da tarefa ---- */
.md-todo-tags { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.md-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 4px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; color: rgba(255, 255, 255, .85); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); max-width: 220px; }
.md-tag.pessoal { padding-left: 7px; color: #b9a7ff; background: linear-gradient(180deg, rgba(150, 120, 255, .16), rgba(150, 120, 255, .06)); border-color: rgba(150, 120, 255, .3); }
.md-tag.pessoal svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.md-tag.gente { padding-left: 9px; }
.md-tag .md-tag-foto { width: 16px !important; height: 16px !important; min-width: 16px; border-radius: 50% !important; font-size: 7.5px !important; }
.prazo-conta { height: 24px; padding: 0 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(4px); letter-spacing: .01em; }
.prazo-conta.folga { background: linear-gradient(180deg, rgba(60, 200, 120, .18), rgba(60, 200, 120, .07)); }
.prazo-conta.perto { background: linear-gradient(180deg, rgba(255, 180, 60, .2), rgba(255, 180, 60, .07)); }
.prazo-conta.hoje { background: linear-gradient(180deg, rgba(255, 122, 61, .24), rgba(255, 122, 61, .08)); }
.prazo-conta.atrasada { background: linear-gradient(180deg, rgba(255, 80, 80, .26), rgba(255, 80, 80, .09)); }
.md-todo li { transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s, background .25s; }
.md-todo li:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .12); }

/* ---- relogio do sistema ---- */
.md-hora { position: relative; display: inline-flex; padding: 0 !important; border: 0 !important; background: none !important; height: auto; }
.md-hora-botao { display: inline-flex !important; align-items: center; gap: 7px; height: 34px; padding: 0 12px !important; border-radius: 10px !important;
  background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .6) !important;
  font-weight: 700; font-size: 12.5px; cursor: pointer; box-shadow: none !important; }
.md-hora.com-hora .md-hora-botao { color: #ff9a5c !important; border-color: rgba(255, 122, 61, .5) !important; background: rgba(255, 122, 61, .1) !important; }
.md-hora-botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.md-hora-botao b { font-variant-numeric: tabular-nums; }
.md-relogio { position: absolute; z-index: 50; right: 0; bottom: calc(100% + 8px); width: 300px; padding: 14px; border-radius: 16px;
  background: linear-gradient(180deg, #181d26, #10141b); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85);
  animation: msg-chega .25s cubic-bezier(.16, 1, .3, 1); }
.md-relogio-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.md-relogio-topo strong { font-size: 26px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.md-relogio-topo strong i { font-style: normal; color: #ff7a3d; padding: 0 2px; }
.md-relogio-topo button { border: 0 !important; background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .6) !important; padding: 6px 10px !important;
  border-radius: 8px !important; font-size: 11.5px; font-weight: 700; cursor: pointer; box-shadow: none !important; height: auto !important; }
.md-relogio-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.md-relogio-col small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .4); margin-bottom: 6px; }
.md-relogio-grade { display: grid; gap: 4px; }
.md-relogio-grade.horas { grid-template-columns: repeat(4, 1fr); }
.md-relogio-grade.minutos { grid-template-columns: repeat(3, 1fr); }
.md-relogio-grade button { height: 28px !important; padding: 0 !important; border-radius: 8px !important; border: 0 !important; background: rgba(255, 255, 255, .04) !important;
  color: rgba(255, 255, 255, .75) !important; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: none !important; transition: background .15s; }
.md-relogio-grade button:hover { background: rgba(255, 122, 61, .18) !important; color: #fff !important; }
.md-relogio-grade button.ativo { background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; color: #fff !important; box-shadow: 0 6px 14px -6px rgba(255, 90, 31, .9) !important; }

/* ---- tag do prazo em pixel ---- */
.prazo-conta { font-family: 'Pixelify Sans', ui-monospace, monospace !important; font-weight: 700; font-size: 12px; letter-spacing: .03em; height: 22px; padding: 0 8px 0 6px;
  border-radius: 0 !important; border: 0 !important; backdrop-filter: none; margin: 2px; background: var(--px-fundo) !important;
  box-shadow: 0 -2px 0 var(--px), 0 2px 0 var(--px), -2px 0 0 var(--px), 2px 0 0 var(--px), inset 0 -2px 0 rgba(0, 0, 0, .25) !important; }
.prazo-conta svg { display: none; }
.prazo-conta::before { content: ''; width: 8px; height: 8px; flex: none; background: currentColor;
  clip-path: polygon(25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%); }
.prazo-conta.folga { --px: #2f8f5b; --px-fundo: #0f2a1c; color: #7fe0a6; }
.prazo-conta.perto { --px: #a8781f; --px-fundo: #2c2110; color: #ffd27a; }
.prazo-conta.hoje { --px: #c4561f; --px-fundo: #2e1a10; color: #ffa36b; }
.prazo-conta.hoje::before { animation: px-pisca 1s steps(2, end) infinite; }
.prazo-conta.atrasada { --px: #b53535; --px-fundo: #2e1212; color: #ff8a8a; }
.prazo-conta.atrasada::before { animation: px-pisca .7s steps(2, end) infinite; }
@keyframes px-pisca { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .prazo-conta::before { animation: none !important; } }

/* =========================================================
   COMPOSITOR DE TAREFA (Inicio) - organizado em linhas
   ========================================================= */
.md-nova { border-radius: 18px !important; background: linear-gradient(180deg, #141922, #10141b) !important; border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); overflow: visible; }
.md-nova.aberto, .md-nova:focus-within { border-color: rgba(255, 122, 61, .45) !important; box-shadow: 0 0 0 4px rgba(255, 122, 61, .08), 0 20px 40px -24px rgba(255, 90, 31, .5) !important; }
.md-nova-linha { padding: 4px 16px !important; }
.md-nova-linha input { height: 50px !important; font-size: 15px !important; font-weight: 600; }
.md-nova-mais { color: #ff7a3d !important; }
.md-nova-opcoes:not([hidden]) { display: grid !important; grid-template-columns: auto 1fr; gap: 10px 10px; padding: 12px 14px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, .06); animation: msg-chega .25s cubic-bezier(.16, 1, .3, 1); }
.md-nova-opcoes > select[name="responsavelId"] { grid-column: 1 / -1; max-width: none !important; }
.md-nova-opcoes .md-tipo { grid-column: 1; }
.md-nova-opcoes .md-tipo-cliente { grid-column: 2; max-width: none !important; width: 100%; min-width: 0; }
.md-nova-opcoes .md-tipo:has(+ .md-tipo-cliente[hidden]) { grid-column: 1 / -1; justify-self: start; }
.md-nova-opcoes .md-atalhos { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 12px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.md-nova-opcoes .md-atalho { height: 30px; border-radius: 9px !important; font-weight: 700; font-size: 12.5px; }
.md-nova-opcoes .md-atalho.ativo { background: rgba(255, 122, 61, .16) !important; color: #ff9a5c !important; box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .35) !important; }
.md-nova-opcoes .md-hora { grid-column: 1; }
.md-nova-opcoes .md-criar { grid-column: 2; justify-self: end; height: 38px; padding: 0 22px !important; border-radius: 12px !important; }
.md-nova-opcoes .md-relogio { left: 0; right: auto; }

/* =========================================================
   PLANEJAMENTO MENSAL (planejamento.js)
   ========================================================= */
.pm { display: grid; gap: 16px; }
.pm-topo { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.pm-titulo h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.pm-titulo p { margin: 4px 0 0; color: var(--apagado); font-size: 13.5px; }
.pm-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-botao { display: inline-flex !important; align-items: center; gap: 7px; height: 38px; padding: 0 14px !important; border-radius: 12px !important;
  background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .85) !important;
  font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: none !important; transition: background .2s, border-color .2s, transform .2s; }
.pm-botao:hover:not(:disabled) { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .18) !important; transform: translateY(-1px); }
.pm-botao:disabled { opacity: .4; cursor: default; }
.pm-botao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-botao.ia, .pm-botao.primario { background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 10px 24px -12px rgba(255, 90, 31, .85) !important; }
.pm-botao.ia.pensando svg { animation: pm-gira 1.2s linear infinite; }
.pm-botao.discreto { background: transparent !important; }
@keyframes pm-gira { to { transform: rotate(360deg); } }

.pm-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pm-cliente { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 8px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); }
.pm-cliente .pm-cliente-foto { width: 30px !important; height: 30px !important; border-radius: 9px !important; font-size: 11px !important; }
.pm-cliente select { height: 40px; border: 0 !important; background: transparent !important; color: #fff; font-weight: 700; font-size: 14px; min-width: 200px; box-shadow: none !important; }
.pm-mes { display: inline-flex; align-items: center; gap: 4px; height: 46px; padding: 0 6px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); }
.pm-mes strong { min-width: 130px; text-align: center; font-size: 14px; }
.pm-mes button { width: 34px; height: 34px; padding: 0 !important; display: grid !important; place-items: center; border-radius: 10px !important; border: 0 !important;
  background: transparent !important; color: rgba(255, 255, 255, .7) !important; box-shadow: none !important; cursor: pointer; }
.pm-mes button:hover { background: rgba(255, 255, 255, .07) !important; color: #fff !important; }
.pm-mes svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-vistas { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); margin-left: auto; }
.pm-vistas button { height: 36px; padding: 0 14px !important; border-radius: 10px !important; border: 0 !important; background: transparent !important;
  color: rgba(255, 255, 255, .6) !important; font-weight: 700; font-size: 13px; box-shadow: none !important; cursor: pointer; transition: color .2s, background .2s; }
.pm-vistas button.ativo { background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(255, 90, 31, .9) !important; }

.pm-resumo { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 12px; margin-bottom: 14px; }
.pm-resumo-cartao { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(180deg, #151a22, #10141b);
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.pm-resumo-icone { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 122, 61, .14); color: #ff9a5c; }
.pm-resumo-cartao.feed .pm-resumo-icone { background: rgba(244, 114, 182, .14); color: #f9a8d4; }
.pm-resumo-cartao.reel .pm-resumo-icone { background: rgba(167, 139, 250, .15); color: #c4b5fd; }
.pm-resumo-cartao.aprov .pm-resumo-icone { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
.pm-resumo-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-resumo-cartao div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pm-resumo-cartao small { color: var(--apagado); font-size: 12.5px; font-weight: 600; }
.pm-resumo-cartao strong { font-size: 26px; font-weight: 800; line-height: 1.1; }
.pm-resumo-cartao em { font-style: normal; font-size: 11.5px; color: var(--apagado); }
.pm-barra { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; margin: 4px 0 2px; }
.pm-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #10b981, #34d399); transition: width .6s cubic-bezier(.16, 1, .3, 1); }

.pm-area { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.pm-area:has(.pm-painel:not([hidden])) { grid-template-columns: minmax(0, 1fr) 360px; }
.pm-principal { min-width: 0; }

.pm-tabela-caixa { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .07); background: #0f131a; overflow: auto; max-height: calc(100vh - 330px); }
.pm-tabela { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; }
.pm-tabela th { position: sticky; top: 0; z-index: 2; background: #141922; text-align: left; padding: 12px 10px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); font-weight: 800; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pm-tabela td { padding: 6px; border-bottom: 1px solid rgba(255, 255, 255, .045); vertical-align: top; }
.pm-dia { width: 74px; padding: 12px 12px !important; cursor: pointer; }
.pm-dia strong { display: block; font-size: 15px; font-weight: 800; }
.pm-dia small { color: var(--apagado); font-size: 12px; }
.pm-dia em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 10px; font-weight: 800; color: #ff9a5c; text-transform: uppercase; letter-spacing: .08em; }
.pm-dia:hover strong { color: #ff9a5c; }
.pm-linha.feriado td { background: linear-gradient(90deg, rgba(255, 122, 61, .1), rgba(255, 122, 61, .03)); }
.pm-linha.feriado .pm-dia strong, .pm-linha.feriado .pm-dia small { color: #ff9a5c; }
.pm-linha.especial td { background: rgba(96, 165, 250, .05); }
.pm-faixa-dia { color: var(--apagado); font-style: italic; padding: 16px !important; }
.pm-vazio-cel { text-align: center; vertical-align: middle !important; }
.pm-sem-pub { display: flex; align-items: center; justify-content: center; height: 64px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .3); font-size: 12px; }
.pm-traco { color: rgba(255, 255, 255, .2); }
td.pm-solta { box-shadow: inset 0 0 0 2px rgba(255, 122, 61, .6); border-radius: 12px; }

.pm-peca { position: relative; width: 100%; min-height: 64px; display: grid !important; align-content: start; gap: 5px; text-align: left; padding: 9px 30px 9px 10px !important;
  border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .07) !important; background: linear-gradient(180deg, #171c25, #131820) !important;
  color: #fff !important; box-shadow: none !important; cursor: pointer; transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .2s; height: auto !important; }
.pm-peca:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .16) !important; box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .9) !important; }
.pm-peca.aberta { border-color: rgba(255, 122, 61, .7) !important; box-shadow: 0 0 0 3px rgba(255, 122, 61, .14) !important; }
.pm-peca.arrastando { opacity: .4; }
.pm-peca-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--pm-cor, #9ca3af); flex-wrap: wrap; }
.pm-peca-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.cor-cinza { --pm-cor: #9ca3af; } .cor-amarelo { --pm-cor: #fbbf24; } .cor-verde { --pm-cor: #34d399; } .cor-azul { --pm-cor: #60a5fa; } .cor-vermelho { --pm-cor: #f87171; }
.pm-num { padding: 1px 6px; border-radius: 6px; background: rgba(167, 139, 250, .15); color: #c4b5fd; font-size: 10px; text-transform: capitalize; }
.pm-peca-tema { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .9); }
.pm-sem-tema { color: rgba(255, 255, 255, .35); font-weight: 500; font-style: italic; }
.pm-peca-icone { position: absolute; right: 8px; bottom: 8px; color: rgba(255, 255, 255, .25); }
.pm-peca-icone svg, .pm-cal-peca svg, .pm-cal-stories svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pm-cal { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .07); background: #0f131a; overflow: hidden; }
.pm-cal-cab, .pm-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.pm-cal-cab span { padding: 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); background: #141922; }
.pm-cal-dia { min-height: 118px; padding: 8px; border-top: 1px solid rgba(255, 255, 255, .05); border-left: 1px solid rgba(255, 255, 255, .05); display: grid; align-content: start; gap: 5px; }
.pm-cal-dia.vazio { background: rgba(255, 255, 255, .01); }
.pm-cal-dia.fora { opacity: .35; }
.pm-cal-dia.feriado { background: rgba(255, 122, 61, .07); }
.pm-cal-num { font-weight: 800; font-size: 13px; }
.pm-cal-nota { font-size: 10.5px; color: #ff9a5c; font-weight: 700; }
.pm-cal-pecas { display: grid; gap: 4px; }
.pm-cal-peca { display: flex !important; align-items: center; gap: 5px; padding: 4px 6px !important; border-radius: 8px !important; border: 0 !important; height: auto !important;
  background: rgba(255, 255, 255, .05) !important; color: var(--pm-cor) !important; font-size: 11px; text-align: left; box-shadow: none !important; cursor: pointer; }
.pm-cal-peca span { color: rgba(255, 255, 255, .85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-cal-stories { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: rgba(255, 255, 255, .45); }

.pm-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pm-item { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #151a22, #10141b); border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .3s, box-shadow .3s; }
.pm-item.salvo { border-color: rgba(52, 211, 153, .55); box-shadow: 0 0 0 3px rgba(52, 211, 153, .1); }
.pm-item header { display: flex; align-items: center; gap: 10px; }
.pm-item-data { font-weight: 800; font-size: 15px; }
.pm-item-data small { margin-left: 6px; color: var(--apagado); font-weight: 600; font-size: 12px; }
.pm-reel-num { padding: 4px 9px; border-radius: 8px; background: rgba(167, 139, 250, .16); color: #c4b5fd; font-weight: 800; font-size: 12px; }
.pm-item-abrir { margin-left: auto; height: 28px; padding: 0 10px !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, .1) !important;
  background: transparent !important; color: rgba(255, 255, 255, .7) !important; font-size: 12px; box-shadow: none !important; cursor: pointer; }
.pm-item label, .pm-form label, .pm-janela label { display: grid; gap: 5px; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .55); text-transform: uppercase; letter-spacing: .06em; }
.pm-item input, .pm-item textarea, .pm-form input, .pm-form textarea, .pm-form select, .pm-janela input, .pm-janela select, .pm-novo input, .pm-novo select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .035);
  color: #fff; font: inherit; font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 500; resize: vertical; color-scheme: dark; }
.pm-item input:focus, .pm-item textarea:focus, .pm-form input:focus, .pm-form textarea:focus, .pm-form select:focus, .pm-janela input:focus, .pm-novo input:focus {
  outline: none; border-color: rgba(255, 122, 61, .6); box-shadow: 0 0 0 3px rgba(255, 122, 61, .12); }

.pm-painel { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; padding: 16px; border-radius: 20px;
  background: linear-gradient(180deg, #161b24, #10141b); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  display: grid; gap: 14px; animation: msg-chega .3s cubic-bezier(.16, 1, .3, 1); }
.pm-painel[hidden] { display: none; }
.pm-painel-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pm-painel-topo small { color: #ff9a5c; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.pm-painel-topo h3 { margin: 2px 0 0; font-size: 17px; }
.pm-fechar { width: 32px; height: 32px; padding: 0 !important; display: grid !important; place-items: center; border-radius: 10px !important; border: 0 !important;
  background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .7) !important; box-shadow: none !important; cursor: pointer; }
.pm-fechar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pm-previa { border-radius: 16px; overflow: hidden; background: #0b0e13; border: 1px solid rgba(255, 255, 255, .07); }
.pm-previa-conta { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; }
.pm-previa-conta .pm-previa-foto { width: 26px !important; height: 26px !important; border-radius: 50% !important; font-size: 9px !important; }
.pm-previa-midia { aspect-ratio: 4 / 5; background: #11151c; display: grid; place-items: center; }
.pm-previa.vertical .pm-previa-midia { aspect-ratio: 9 / 14; max-height: 360px; }
.pm-previa-midia img { width: 100%; height: 100%; object-fit: cover; }
.pm-previa-vazia { display: grid; place-items: center; gap: 8px; color: rgba(255, 255, 255, .28); font-size: 12px; }
.pm-previa-vazia svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pm-form { display: grid; gap: 12px; }
.pm-papel { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 122, 61, .08); color: #ffb48a; font-size: 12px; font-weight: 700; }
.pm-status-linha { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--apagado); }
.pm-status-linha > span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.pm-status-linha .pm-peca-status { padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .05); font-size: 12px; }
.pm-salvar { height: 40px; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .06) !important;
  color: #fff !important; font-weight: 700; cursor: pointer; box-shadow: none !important; }
.pm-painel-acoes { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.pm-painel-acoes .pm-botao { justify-content: center; width: 100%; }
.pm-agendar-linha { display: flex; gap: 8px; }
.pm-agendar-linha .pm-botao { flex: 1; }
.pm-agendar-linha .md-relogio { left: 0; right: auto; }

.pm-novo { display: grid; gap: 18px; padding: 24px; border-radius: 22px; background: linear-gradient(180deg, #151a22, #10141b); border: 1px solid rgba(255, 255, 255, .08); max-width: 860px; }
.pm-novo-cabeca { display: flex; gap: 14px; align-items: flex-start; }
.pm-novo-icone { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 122, 61, .14); color: #ff9a5c; }
.pm-novo-icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.pm-novo h3 { margin: 0 0 4px; font-size: 19px; }
.pm-novo p { margin: 0; color: var(--apagado); font-size: 13.5px; }
.pm-novo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pm-novo-grade label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.pm-novo-grade label small { font-weight: 500; color: var(--apagado); }
.pm-novo-chaves { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px; }
.pm-chave { position: relative; display: inline-flex !important; align-items: center; gap: 10px !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; color: #fff !important; }
.pm-chave input { position: absolute; opacity: 0; width: 0 !important; height: 0; padding: 0 !important; }
.pm-chave i { position: relative; width: 38px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, .12); transition: background .25s; flex: none; }
.pm-chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.pm-chave input:checked + i { background: linear-gradient(135deg, #ff7a3d, #ff5a1f); }
.pm-chave input:checked + i::after { transform: translateX(16px); }
.pm-novo-pe { display: flex; justify-content: flex-end; }
.pm-novo-pe .cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; vertical-align: -3px; }
.pm-vazio { padding: 40px; text-align: center; color: var(--apagado); border: 1px dashed rgba(255, 255, 255, .1); border-radius: 18px; }

.pm-janela { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; background: linear-gradient(180deg, #161b23, #0f131a); color: #fff; }
.pm-janela::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.pm-janela form { display: grid; gap: 14px; padding: 24px; }
.pm-janela h3 { margin: 0; font-size: 19px; }
.pm-janela p { margin: -6px 0 0; color: var(--apagado); font-size: 13px; }
.pm-janela p.erro { margin: 0; color: #ff8a8a; }
.pm-janela-pe { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.pm-janela-pe > span { flex: 1; }
.pm-apagar { border: 0 !important; background: transparent !important; color: #ff8a8a !important; box-shadow: none !important; cursor: pointer; font-weight: 700; padding: 0 !important; }
.pm-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-tipo { position: relative; display: block !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.pm-tipo input { position: absolute; opacity: 0; width: 0 !important; }
.pm-tipo span { display: block; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; }
.pm-tipo input:checked + span { border-color: rgba(255, 122, 61, .7); background: rgba(255, 122, 61, .1); color: #fff; }
.pm-link { display: flex; gap: 8px; }
.pm-link input { flex: 1; }
.pm-dica { font-size: 12.5px !important; }

@media (max-width: 1100px) {
  .pm-resumo { grid-template-columns: repeat(2, 1fr); }
  .pm-area:has(.pm-painel:not([hidden])) { grid-template-columns: 1fr; }
  .pm-painel { position: static; max-height: none; }
  .pm-vistas { margin-left: 0; }
}

/* =========================================================
   PLANEJAMENTO: toque pixel (mesma fonte e bordas do Escritorio)
   Texto de leitura continua na fonte normal; o pixel fica nos
   numeros, rotulos, selos e molduras.
   ========================================================= */
.pm { --px-borda: #2b313d; --px-luz: #ff7a3d; }
.pm-titulo h2, .pm-mes strong, .pm-resumo-cartao strong, .pm-tabela th, .pm-dia strong, .pm-cal-num, .pm-cal-cab span,
.pm-item-data, .pm-reel-num, .pm-num, .pm-peca-status, .pm-painel-topo small, .pm-vistas button, .pm-resumo-cartao small {
  font-family: 'Pixelify Sans', ui-monospace, monospace !important; letter-spacing: .03em; }
.pm-titulo h2 { font-size: 30px; text-shadow: 3px 3px 0 rgba(255, 90, 31, .35); }
.pm-titulo h2::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; background: var(--px-luz); animation: px-pisca 1.1s steps(2, end) infinite; }

/* moldura pixel: cantos retos + borda em degraus */
.pm-resumo-cartao, .pm-tabela-caixa, .pm-cal, .pm-item, .pm-painel, .pm-novo, .pm-cliente, .pm-mes, .pm-vistas {
  border-radius: 0 !important; border: 0 !important;
  box-shadow: 0 -3px 0 var(--px-borda), 0 3px 0 var(--px-borda), -3px 0 0 var(--px-borda), 3px 0 0 var(--px-borda), 6px 6px 0 rgba(0, 0, 0, .35) !important;
  margin: 3px; }
.pm-resumo { gap: 16px; }
.pm-resumo-icone { border-radius: 0 !important; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25), inset 3px 3px 0 rgba(255, 255, 255, .06); }
.pm-resumo-cartao strong { font-size: 30px; }
.pm-resumo-cartao.story strong { color: #ffb48a; }
.pm-resumo-cartao.feed strong { color: #f9a8d4; }
.pm-resumo-cartao.reel strong { color: #c4b5fd; }
.pm-resumo-cartao.aprov strong { color: #6ee7b7; }
.pm-barra { height: 10px; border-radius: 0 !important; background: #1a1f28; box-shadow: inset 0 0 0 2px var(--px-borda); }
.pm-barra i { border-radius: 0 !important; background: repeating-linear-gradient(90deg, #34d399 0 6px, #10b981 6px 8px) !important; }

/* botoes do topo e vistas */
.pm-botao { border-radius: 0 !important; border: 0 !important;
  box-shadow: 0 -2px 0 var(--px-borda), 0 2px 0 var(--px-borda), -2px 0 0 var(--px-borda), 2px 0 0 var(--px-borda) !important; margin: 2px; }
.pm-botao.ia, .pm-botao.primario { box-shadow: 0 -2px 0 #ff9a5c, 0 2px 0 #b8400f, -2px 0 0 #ff9a5c, 2px 0 0 #b8400f, 4px 4px 0 rgba(0, 0, 0, .4) !important; }
.pm-botao:hover:not(:disabled) { transform: translate(-1px, -1px); }
.pm-botao:active:not(:disabled) { transform: translate(1px, 1px); }
.pm-vistas button { border-radius: 0 !important; }
.pm-vistas button.ativo { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .2) !important; }
.pm-mes button { border-radius: 0 !important; }
.pm-cliente .pm-cliente-foto { border-radius: 0 !important; image-rendering: pixelated; }

/* tabela: fundo quadriculado e cabecalho pixel */
.pm-tabela-caixa { background: #0d1016 linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 16px 16px,
  linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 16px 16px !important; }
.pm-tabela th { background: #141922; font-size: 13px; color: #ff9a5c; border-bottom: 3px solid var(--px-borda); }
.pm-tabela td { border-bottom: 2px dashed rgba(255, 255, 255, .05); }
.pm-dia strong { font-size: 18px; }
.pm-dia em { font-family: 'Pixelify Sans', monospace; padding: 1px 5px; background: #ff5a1f; color: #fff; }

/* a peca vira um "bloco" pixel */
.pm-peca { border-radius: 0 !important; border: 0 !important; background: #151a22 !important;
  box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37 !important; margin: 2px; }
.pm-peca::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pm-cor); opacity: .8; }
.pm-peca:hover { transform: translate(-2px, -2px); box-shadow: 0 -2px 0 #3a4250, 0 2px 0 #3a4250, -2px 0 0 #3a4250, 2px 0 0 #3a4250, 4px 4px 0 rgba(0, 0, 0, .5) !important; }
.pm-peca.aberta { box-shadow: 0 -2px 0 #ff7a3d, 0 2px 0 #ff7a3d, -2px 0 0 #ff7a3d, 2px 0 0 #ff7a3d, 4px 4px 0 rgba(255, 90, 31, .35) !important; }
.pm-peca-status { font-size: 12px; }
.pm-peca-status i, .pm-status-linha .pm-peca-status i { border-radius: 0 !important; width: 8px; height: 8px; box-shadow: none !important; }
.cor-amarelo .pm-peca-status i, .pm-peca.cor-amarelo .pm-peca-status i { animation: px-pisca 1s steps(2, end) infinite; }
.pm-num { border-radius: 0 !important; font-size: 11px; box-shadow: 0 -1px 0 #7c6bd6, 0 1px 0 #7c6bd6, -1px 0 0 #7c6bd6, 1px 0 0 #7c6bd6; }
.pm-sem-pub { border-radius: 0 !important; border: 2px dashed rgba(255, 255, 255, .08) !important; font-family: 'Pixelify Sans', monospace; }
.pm-peca-icone { image-rendering: pixelated; }
td.pm-solta { border-radius: 0 !important; box-shadow: inset 0 0 0 3px #ff7a3d !important; }

/* calendario, listas e painel */
.pm-cal-dia { border-color: rgba(255, 255, 255, .06) !important; }
.pm-cal-peca, .pm-item-abrir, .pm-reel-num, .pm-fechar, .pm-salvar { border-radius: 0 !important; }
.pm-item input, .pm-item textarea, .pm-form input, .pm-form textarea, .pm-form select, .pm-janela input, .pm-janela select, .pm-novo input, .pm-novo select {
  border-radius: 0 !important; border: 2px solid #262c37 !important; }
.pm-previa, .pm-papel, .pm-status-linha .pm-peca-status { border-radius: 0 !important; }
.pm-painel-topo small { font-size: 13px; }

/* ---- planejamento: o mes inteiro numa tela (dias em colunas) ---- */
.pmc { padding: 14px 14px 16px; margin: 3px; background: #0d1016 linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 16px 16px,
  linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 16px 16px;
  box-shadow: 0 -3px 0 #2b313d, 0 3px 0 #2b313d, -3px 0 0 #2b313d, 3px 0 0 #2b313d, 6px 6px 0 rgba(0, 0, 0, .35); }
.pmc-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; font-family: 'Pixelify Sans', monospace; font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.pmc-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pmc-legenda .pm-px { width: 12px; height: 12px; display: inline-block; }
.pm-modo { margin-left: auto; height: 30px; padding: 0 12px !important; border-radius: 0 !important; border: 0 !important; background: #151a22 !important;
  color: #ff9a5c !important; font-family: 'Pixelify Sans', monospace; font-size: 12.5px; cursor: pointer;
  box-shadow: 0 -2px 0 #2b313d, 0 2px 0 #2b313d, -2px 0 0 #2b313d, 2px 0 0 #2b313d !important; }
.pm-modo-linha { display: flex; margin-bottom: 10px; }
.pmc-tabela { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.pmc-tabela th { font-family: 'Pixelify Sans', monospace; font-weight: 700; }
.pmc-rot { width: 64px; text-align: left; font-size: 12px; color: #ff9a5c; white-space: nowrap; padding-right: 6px; }
.pmc-dia { cursor: pointer; padding: 2px 0 6px; text-align: center; color: rgba(255, 255, 255, .8); }
.pmc-dia strong { display: block; font-size: 13px; line-height: 1; }
.pmc-dia small { display: block; font-size: 10px; color: rgba(255, 255, 255, .4); margin-top: 3px; }
.pmc-dia.fds small { color: #c4b5fd; }
.pmc-dia.feriado strong, .pmc-dia.feriado small { color: #ff9a5c; }
.pmc-dia.hoje strong { background: #ff5a1f; color: #fff; padding: 2px 0; }
.pmc-dia:hover strong { color: #ff9a5c; }
.pmc-cel { padding: 0; height: 38px; text-align: center; vertical-align: middle; }
.pmc-cel.feriado { background: rgba(255, 122, 61, .1); }
.pmc-cel.hoje { background: rgba(255, 90, 31, .08); }
.pmc-cel.sem { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 4px, transparent 4px 8px); }
.pmc-nada { display: inline-block; width: 6px; height: 6px; background: rgba(255, 255, 255, .08); }
.pm-px { position: relative; width: 100%; height: 100%; min-height: 30px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer;
  background: var(--pm-cor) !important; color: rgba(0, 0, 0, .65) !important; font-family: 'Pixelify Sans', monospace; font-size: 11px; font-weight: 700;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .3), inset 3px 3px 0 rgba(255, 255, 255, .25) !important; transition: transform .12s steps(2); }
.pm-px.vazia { background: transparent !important; color: var(--pm-cor) !important;
  box-shadow: inset 0 0 0 2px var(--pm-cor), inset 3px 3px 0 rgba(255, 255, 255, .04) !important; opacity: .7; }
.pm-px:hover { transform: translate(-1px, -2px); z-index: 2; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .3), inset 3px 3px 0 rgba(255, 255, 255, .25), 3px 3px 0 rgba(0, 0, 0, .5) !important; }
.pm-px.vazia:hover { opacity: 1; }
.pm-px.aberta { outline: 3px solid #fff; outline-offset: 1px; z-index: 3; }
.pmc-cel.pm-solta { box-shadow: inset 0 0 0 3px #ff7a3d !important; }
.cor-amarelo.pm-px:not(.vazia) { animation: px-pisca 1.2s steps(2, end) infinite; }
@media (max-width: 1100px) { .pmc { overflow-x: auto; } .pmc-tabela { min-width: 900px; } }

/* ---- planejamento: numeros e datas sempre legiveis (a fonte pixel
   deixa o 2 parecido com o 8; ela fica so nos rotulos) ---- */
.pm-mes strong, .pm-resumo-cartao strong, .pm-dia strong, .pm-cal-num, .pm-item-data, .pm-reel-num, .pm-num,
.pmc-dia strong, .pm-px, .pm-dia em, .pm-painel-topo small {
  font-family: Inter, system-ui, sans-serif !important; font-variant-numeric: tabular-nums; letter-spacing: 0 !important; }
.pm-resumo-cartao strong { font-weight: 800; }
.pm-dia strong { font-size: 16px; }
.pm-px { font-size: 10.5px; font-weight: 800; }

/* ---- planejamento: tabela no formato do documento (texto, uma linha por dia) ---- */
.pmt-caixa { margin: 3px; background: #0f131a; box-shadow: 0 -3px 0 #2b313d, 0 3px 0 #2b313d, -3px 0 0 #2b313d, 3px 0 0 #2b313d, 6px 6px 0 rgba(0, 0, 0, .35); }
.pmt { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pmt th { position: sticky; top: 0; z-index: 2; background: #141922; text-align: left; padding: 14px 12px; font-family: 'Pixelify Sans', monospace; font-size: 13px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ff9a5c; border-bottom: 3px solid #2b313d; }
.pmt th.pmt-data { width: 84px; }
.pmt td { padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, .055); vertical-align: middle; }
.pmt-linha:hover td { background: rgba(255, 255, 255, .02); }
.pmt-linha.feriado td { background: rgba(255, 122, 61, .07); }
.pmt-linha.hoje td.pmt-data { box-shadow: inset 3px 0 0 #ff5a1f; }
td.pmt-data { padding: 12px !important; cursor: pointer; }
.pmt-data strong { display: block; font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.pmt-data small { color: rgba(255, 255, 255, .45); font-size: 12px; }
.pmt-data em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #ff9a5c; line-height: 1.2; }
td.pmt-data:hover strong { color: #ff9a5c; }
.pmt-traco { display: block; padding: 8px 6px; color: rgba(255, 255, 255, .22); }
.pmt-sem { color: rgba(255, 255, 255, .4); font-style: italic; padding: 14px 12px !important; }
.pmt-peca { display: flex !important; align-items: flex-start; gap: 7px; width: 100%; padding: 8px 6px !important; border: 0 !important; border-radius: 6px !important;
  background: transparent !important; color: rgba(255, 255, 255, .88) !important; text-align: left; font: inherit; font-size: 13px; line-height: 1.4;
  box-shadow: none !important; cursor: pointer; height: auto !important; transition: background .15s; }
.pmt-peca:hover { background: rgba(255, 255, 255, .05) !important; }
.pmt-peca.aberta { background: rgba(255, 122, 61, .12) !important; box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .5) !important; }
.pmt-status { flex: none; width: 7px; height: 7px; margin-top: 6px; background: var(--pm-cor, #9ca3af); }
.cor-amarelo .pmt-status { animation: px-pisca 1.2s steps(2, end) infinite; }
.pmt-tag { flex: none; padding: 1px 6px; font-size: 10.5px; font-weight: 800; color: #c4b5fd; background: rgba(167, 139, 250, .14); text-transform: capitalize; margin-top: 1px; }
.pmt-falta { color: rgba(255, 255, 255, .3); font-style: italic; }
td.pmt-cel.pm-solta { box-shadow: inset 0 0 0 2px #ff7a3d; }
.pmt-legenda { display: inline-flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.pmt-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pmt-legenda .pmt-status { margin: 0; }
.pm-modo-linha { align-items: center; }
@media (max-width: 1100px) { .pmt-caixa { overflow-x: auto; } .pmt { min-width: 900px; } }

/* ---- planejamento: detalhes da peca no meio da tela, fundo desfocado ---- */
.pm-fundo { position: fixed; inset: 0; z-index: 900; background: rgba(5, 7, 10, .55); backdrop-filter: blur(10px) saturate(.8);
  -webkit-backdrop-filter: blur(10px) saturate(.8); animation: pm-fundo-entra .25s ease; }
@keyframes pm-fundo-entra { from { opacity: 0; } }
.pm-area:has(.pm-painel:not([hidden])) { grid-template-columns: 1fr !important; }
.pm-painel:not([hidden]) { position: fixed !important; inset: 0; margin: auto; z-index: 901; width: min(960px, calc(100vw - 32px)); height: fit-content;
  max-height: calc(100vh - 48px); overflow: auto; top: 0 !important; padding: 22px 24px !important;
  display: grid !important; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "topo topo" "esq dir"; gap: 18px 24px; align-items: start;
  background: linear-gradient(180deg, #171c25, #10141b) !important;
  box-shadow: 0 -3px 0 #2b313d, 0 3px 0 #2b313d, -3px 0 0 #2b313d, 3px 0 0 #2b313d, 0 40px 90px -20px rgba(0, 0, 0, .9) !important;
  animation: pm-modal-entra .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes pm-modal-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.pm-painel .pm-painel-topo { grid-area: topo; padding-bottom: 14px; border-bottom: 2px dashed rgba(255, 255, 255, .07); }
.pm-painel .pm-painel-topo h3 { font-size: 20px; }
.pm-painel-esq { grid-area: esq; display: grid; gap: 12px; position: sticky; top: 0; }
.pm-painel-dir { grid-area: dir; display: grid; gap: 16px; min-width: 0; }
.pm-painel .pm-previa-midia { aspect-ratio: 4 / 5; max-height: none; }
.pm-painel .pm-previa.vertical .pm-previa-midia { aspect-ratio: 9 / 16; max-height: 440px; }
.pm-painel .pm-form { grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-painel .pm-form > label:has(textarea), .pm-painel .pm-form > label:has(input[name="tema"]), .pm-painel .pm-form > .pm-status-linha,
.pm-painel .pm-form > .erro, .pm-painel .pm-form > .pm-salvar, .pm-painel .pm-form > label:has(input[name="hashtags"]) { grid-column: 1 / -1; }
.pm-painel .pm-form textarea { min-height: 120px; }
.pm-painel .pm-form input[name="tema"] { font-size: 15px; font-weight: 600; padding: 12px 14px; }
.pm-painel .pm-salvar { height: 44px; background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; border: 0 !important;
  box-shadow: 0 -2px 0 #ff9a5c, 0 2px 0 #b8400f, -2px 0 0 #ff9a5c, 2px 0 0 #b8400f !important; }
.pm-painel .pm-painel-acoes { grid-template-columns: 1fr 1fr; padding-top: 16px; border-top: 2px dashed rgba(255, 255, 255, .07); }
.pm-painel .pm-agendar-linha { grid-column: 1 / -1; order: 2; }
.pm-painel .pm-painel-acoes > [data-acao="tarefa"] { order: 3; grid-column: 1 / -1; }
.pm-painel .pm-agendar-linha .md-relogio { bottom: calc(100% + 8px); }
@media (max-width: 760px) {
  .pm-painel:not([hidden]) { grid-template-columns: 1fr; grid-template-areas: "topo" "esq" "dir"; }
  .pm-painel-esq { position: static; }
  .pm-painel .pm-previa-midia, .pm-painel .pm-previa.vertical .pm-previa-midia { max-height: 260px; }
  .pm-painel .pm-form { grid-template-columns: 1fr; }
}

/* ---- planejamento: a janela so com a ideia ---- */
.pm-painel:not([hidden]) { width: min(560px, calc(100vw - 32px)) !important; grid-template-columns: 1fr !important; grid-template-areas: none !important;
  gap: 16px !important; padding: 22px 24px 20px !important; }
.pm-painel .pm-painel-topo { grid-area: auto; }
.pm-painel .pm-painel-topo h3 { font-size: 19px; line-height: 1.3; }
.pm-painel .pm-form { grid-template-columns: 1fr !important; gap: 14px; }
.pm-painel .pm-form textarea { min-height: 130px; line-height: 1.5; }
.pm-form-pe { display: flex; align-items: center; gap: 10px; }
.pm-form-pe .pm-peca-status { margin-right: auto; padding: 4px 10px; background: rgba(255, 255, 255, .05); font-size: 12px; }
.pm-cancelar { height: 42px; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: rgba(255, 255, 255, .6) !important; font-weight: 700; cursor: pointer; box-shadow: none !important; }
.pm-cancelar:hover { color: #fff !important; }
.pm-painel .pm-salvar { height: 42px; padding: 0 26px !important; }

/* ---- tabela: tema + ideia na celula ---- */
.pmt-texto { display: grid; gap: 3px; min-width: 0; }
.pmt-texto .pmt-tag { justify-self: start; margin-bottom: 2px; }
.pmt-tema { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.35; }
.pmt-ideia { font-size: 12px; color: rgba(255, 255, 255, .55); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.pmt td { vertical-align: top; }
.pmt-legenda span { background: none !important; color: rgba(255, 255, 255, .6) !important; }

/* ---- tabela: card da peca preenchida ---- */
.pmt-peca.tem { position: relative; padding: 10px 12px 11px 14px !important; background: linear-gradient(180deg, #19202b, #141922) !important;
  box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37 !important; border-radius: 0 !important; margin: 3px 2px; }
.pmt-peca.tem::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pm-cor, #9ca3af); }
.pmt-peca.tem .pmt-status { display: none; }
.pmt-peca.tem:hover { background: linear-gradient(180deg, #1e2633, #171d27) !important; transform: translate(-1px, -1px);
  box-shadow: 0 -2px 0 #3a4250, 0 2px 0 #3a4250, -2px 0 0 #3a4250, 2px 0 0 #3a4250, 3px 3px 0 rgba(0, 0, 0, .45) !important; }
.pmt-peca.tem.aberta { box-shadow: 0 -2px 0 #ff7a3d, 0 2px 0 #ff7a3d, -2px 0 0 #ff7a3d, 2px 0 0 #ff7a3d !important; }
.pmt-peca.tem .pmt-tema { font-size: 12.5px; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; }
.pmt-peca.tem .pmt-ideia { white-space: normal; margin-top: 2px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .62); }
.pmt-peca.tem.cor-amarelo::before { animation: px-pisca 1.2s steps(2, end) infinite; }

/* ---- tags por tipo e botao de editar quantidades ---- */
.pmt-tag.story { color: #ffb48a; background: rgba(255, 122, 61, .14); }
.pmt-tag.feed { color: #f9a8d4; background: rgba(244, 114, 182, .14); }
.pmt-tag.reel { color: #c4b5fd; background: rgba(167, 139, 250, .14); }
.pmt-tag.card { color: #fde68a; background: rgba(251, 191, 36, .14); }
.pmt-tag { font-family: Inter, system-ui, sans-serif; letter-spacing: .02em; }
.pmt-peca:not(.tem) .pmt-texto { grid-auto-flow: row; }
.pm-modo { display: inline-flex !important; align-items: center; gap: 6px; }
.pm-modo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-editar-qtd { margin-left: auto; background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; color: #fff !important; }
.pm-editar-qtd + .pm-modo { margin-left: 8px; }

/* ---- editar quantidades: minimalista, em pixel ---- */
.pm-janela.pq { width: min(440px, calc(100vw - 32px)); border: 0 !important; border-radius: 0 !important; background: #10141b !important;
  box-shadow: 0 -3px 0 #2b313d, 0 3px 0 #2b313d, -3px 0 0 #2b313d, 3px 0 0 #2b313d, 8px 8px 0 rgba(0, 0, 0, .5) !important; overflow: visible;
  animation: pm-modal-entra .3s cubic-bezier(.16, 1, .3, 1); }
.pm-janela.pq form { gap: 0; padding: 0; }
.pq-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 2px dashed rgba(255, 255, 255, .07); }
.pq-topo h3 { margin: 0; font-family: 'Pixelify Sans', monospace; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.pq-topo h3::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; background: #ff7a3d; animation: px-pisca 1.1s steps(2, end) infinite; }
.pq-x { width: 30px; height: 30px; padding: 0 !important; display: grid !important; place-items: center; border: 0 !important; border-radius: 0 !important;
  background: rgba(255, 255, 255, .05) !important; color: rgba(255, 255, 255, .6) !important; box-shadow: none !important; cursor: pointer; }
.pq-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pq-bloco { display: grid; gap: 10px; padding: 16px 20px; border-bottom: 2px dashed rgba(255, 255, 255, .06); }
.pq-titulo { font-family: 'Pixelify Sans', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ff9a5c; }
.pq-periodo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pq-periodo .pq-linha { display: grid; gap: 6px; }
.pq-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pq-rotulo { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.pq-rotulo:empty { display: none; }
[data-reel-semana] .pq-linha, [data-reel-total] .pq-linha { justify-content: flex-end; }
[data-reel-semana][hidden], [data-reel-total][hidden] { display: none; }
.pq-contador { display: inline-flex; align-items: center; background: #0b0e13; box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37; }
.pq-contador button { width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #1a1f28 !important;
  color: #ff9a5c !important; font-family: 'Pixelify Sans', monospace; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none !important; }
.pq-contador button:hover { background: #ff5a1f !important; color: #fff !important; }
.pq-contador button:active { transform: translateY(1px); }
.pq-contador output { min-width: 40px; text-align: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.pq-contador output.pulo { animation: pq-pulo .2s steps(2); }
@keyframes pq-pulo { 50% { transform: translateY(-2px); color: #ff9a5c; } }
.pq-contador small { padding-right: 8px; font-size: 11px; color: rgba(255, 255, 255, .4); white-space: nowrap; }
.pq-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #0b0e13;
  box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37; }
.pq-seg.tres { display: grid; }
.pq-seg button { height: 32px; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: rgba(255, 255, 255, .55) !important; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: none !important; white-space: nowrap; }
.pq-seg button.ativo { background: #ff5a1f !important; color: #fff !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .2) !important; }
.pq-chave { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.pq-chave input { position: absolute; opacity: 0; width: 0; }
.pq-chave i { position: relative; width: 36px; height: 18px; background: #1a1f28; box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37; }
.pq-chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: rgba(255, 255, 255, .5); transition: transform .15s steps(3); }
.pq-chave input:checked + i { background: #ff5a1f; }
.pq-chave input:checked + i::after { transform: translateX(18px); background: #fff; }
.pm-janela.pq p.erro { margin: 0; padding: 0 20px; color: #ff8a8a; font-size: 13px; }
.pm-janela.pq p.erro:not(:empty) { padding: 10px 20px 0; }
.pq-pe { display: flex; align-items: center; gap: 10px; padding: 16px 20px; }
.pq-pe > span { flex: 1; }
.pq-cancelar { height: 38px; padding: 0 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: rgba(255, 255, 255, .6) !important; font-weight: 700; cursor: pointer; box-shadow: none !important; }
.pq-salvar { height: 38px; padding: 0 22px !important; border: 0 !important; border-radius: 0 !important; background: #ff5a1f !important; color: #fff !important;
  font-family: 'Pixelify Sans', monospace; font-size: 15px; cursor: pointer;
  box-shadow: 0 -2px 0 #ff9a5c, 0 2px 0 #b8400f, -2px 0 0 #ff9a5c, 2px 0 0 #b8400f, 4px 4px 0 rgba(0, 0, 0, .4) !important; }
.pq-salvar:active { transform: translate(2px, 2px); }
.pm-janela.pq .pm-apagar { font-size: 12.5px; }

/* editar quantidades cabe na tela */
.pm-janela.pq { max-height: calc(100vh - 24px); overflow: auto; }
.pm-janela.pq .pq-bloco { padding: 12px 20px; gap: 8px; }
.pm-janela.pq .pq-topo { padding: 14px 20px; }
.pm-janela.pq .pq-pe { padding: 12px 20px; position: sticky; bottom: 0; background: #10141b; }

/* celula vazia: + Ideia ao passar o mouse */
.pmt-novo { position: relative; width: 100%; min-height: 34px; padding: 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; text-align: left; }
.pmt-novo b { display: none; font-family: 'Pixelify Sans', monospace; font-size: 12.5px; color: #ff9a5c; }
.pmt-novo:hover { background: rgba(255, 122, 61, .07) !important; box-shadow: inset 0 0 0 2px rgba(255, 122, 61, .35) !important; }
.pmt-novo:hover .pmt-traco { display: none; }
.pmt-novo:hover b { display: inline; }

/* ---- card de feriado ---- */
.pmt-peca.pmt-feriado { padding: 12px 14px 13px 14px !important; background: linear-gradient(135deg, #3a1d0e, #241510 60%, #1a130f) !important;
  box-shadow: 0 -2px 0 #c4561f, 0 2px 0 #7a3410, -2px 0 0 #c4561f, 2px 0 0 #7a3410, 4px 4px 0 rgba(0, 0, 0, .45) !important; }
.pmt-peca.pmt-feriado::before { background: repeating-linear-gradient(180deg, #ff7a3d 0 6px, #ffb48a 6px 12px) !important; width: 5px; }
.pmt-peca.pmt-feriado .pmt-tema { font-size: 14px; color: #ffd2b5; text-shadow: 2px 2px 0 rgba(0, 0, 0, .4); }
.pmt-tag.card { display: inline-flex; align-items: center; gap: 5px; color: #1a1206 !important; background: linear-gradient(135deg, #ffd27a, #ff9a3d) !important; font-family: 'Pixelify Sans', monospace !important; font-size: 11.5px; padding: 2px 7px; }
.pmt-tag.card svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.pmt-peca.pmt-feriado:hover { box-shadow: 0 -2px 0 #ff7a3d, 0 2px 0 #c4561f, -2px 0 0 #ff7a3d, 2px 0 0 #c4561f, 4px 4px 0 rgba(0, 0, 0, .5) !important; }
.pmt-linha.feriado .pmt-data em { display: inline-block; margin-top: 5px; padding: 1px 6px; background: #ff5a1f; color: #fff; font-family: 'Pixelify Sans', monospace; font-size: 11px; }

/* ---- montar o mes: premium, em pixel ---- */
.pn { max-width: 920px; margin: 3px; background: #10141b;
  box-shadow: 0 -3px 0 #2b313d, 0 3px 0 #2b313d, -3px 0 0 #2b313d, 3px 0 0 #2b313d, 8px 8px 0 rgba(0, 0, 0, .45); animation: pm-modal-entra .35s cubic-bezier(.16, 1, .3, 1); }
.pn-topo { display: flex; gap: 16px; align-items: center; padding: 22px 24px; border-bottom: 2px dashed rgba(255, 255, 255, .07);
  background: linear-gradient(90deg, rgba(255, 90, 31, .1), transparent 60%); }
.pn-selo { flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: #ff5a1f; color: #fff;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .25), inset 4px 4px 0 rgba(255, 255, 255, .25), 4px 4px 0 rgba(0, 0, 0, .4); }
.pn-selo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pn-topo small { font-family: 'Pixelify Sans', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #ff9a5c; }
.pn-topo h3 { margin: 2px 0 4px; font-size: 24px; font-weight: 800; }
.pn-topo p { margin: 0; font-size: 13.5px; color: var(--apagado); }
.pn-corpo { display: grid; grid-template-columns: 1fr 1fr; }
.pn-col { display: grid; align-content: start; }
.pn-col + .pn-col { border-left: 2px dashed rgba(255, 255, 255, .06); }
.pn .pq-bloco { padding: 16px 24px; gap: 10px; }
.pn-previa { display: grid; gap: 10px; padding: 16px 24px 20px; }
.pn-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pn-numeros div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; background: #0b0e13;
  box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37; }
.pn-numeros strong { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pn-numeros small { font-family: 'Pixelify Sans', monospace; font-size: 12px; color: rgba(255, 255, 255, .5); }
.pn-numeros .story strong { color: #ffb48a; } .pn-numeros .feed strong { color: #f9a8d4; } .pn-numeros .reel strong { color: #c4b5fd; }
.pn > p.erro { margin: 0; padding: 0 24px; color: #ff8a8a; font-size: 13px; }
.pn-pe { display: flex; justify-content: flex-end; padding: 16px 24px 20px; border-top: 2px dashed rgba(255, 255, 255, .07); }
.pn-pe .pq-salvar { display: inline-flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 26px !important; font-size: 16px; }
.pn-pe .pq-salvar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pn .pq-chave { margin-top: 4px; }
@media (max-width: 760px) { .pn-corpo { grid-template-columns: 1fr; } .pn-col + .pn-col { border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .06); } }

/* ---- planejamento: cartao do cliente e do mes ---- */
.pm-cliente { position: relative; height: auto !important; padding: 0 !important; background: #10141b !important; z-index: 20; }
.pm-cliente-botao { display: flex !important; align-items: center; gap: 12px; height: 58px; padding: 0 14px 0 10px !important; min-width: 280px;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; box-shadow: none !important; cursor: pointer; text-align: left; }
.pm-cliente-botao:hover { background: rgba(255, 255, 255, .03) !important; }
.pm-cliente-anel { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; }
.pm-cliente-anel::before { content: ""; position: absolute; inset: -3px; background: conic-gradient(from var(--pm-ang, 0deg), #ff5a1f, #ffb48a, #ff5a1f 40%, transparent 55%, #ff5a1f);
  animation: pm-anel 3.2s linear infinite; }
.pm-cliente-anel::after { content: ""; position: absolute; inset: 0; background: #10141b; }
.pm-cliente-anel .pm-cliente-foto { position: relative; z-index: 1; width: 36px !important; height: 36px !important; border-radius: 0 !important; font-size: 12px !important; }
@property --pm-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pm-anel { to { --pm-ang: 360deg; } }
.pm-cliente-txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pm-cliente-txt small { font-family: 'Pixelify Sans', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #ff9a5c; }
.pm-cliente-txt strong { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: pm-nome-entra .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes pm-nome-entra { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.pm-cliente-seta { width: 16px; height: 16px; fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.pm-cliente.aberto .pm-cliente-seta { transform: rotate(180deg); stroke: #ff9a5c; }
.pm-cliente.aberto { box-shadow: 0 -3px 0 #ff7a3d, 0 3px 0 #ff7a3d, -3px 0 0 #ff7a3d, 3px 0 0 #ff7a3d, 6px 6px 0 rgba(0, 0, 0, .35) !important; }

.pm-cliente-menu { position: absolute; top: calc(100% + 10px); left: -3px; width: 340px; max-height: 380px; display: grid; grid-template-rows: auto 1fr;
  background: #10141b; box-shadow: 0 -3px 0 #2b313d, 0 3px 0 #2b313d, -3px 0 0 #2b313d, 3px 0 0 #2b313d, 10px 10px 0 rgba(0, 0, 0, .5);
  animation: pm-menu-abre .25s steps(4); transform-origin: top left; }
.pm-cliente-menu[hidden] { display: none; }
@keyframes pm-menu-abre { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.pm-cliente-busca { margin: 10px; padding: 10px 12px !important; border: 0 !important; border-radius: 0 !important; background: #0b0e13 !important; color: #fff;
  font: inherit; font-size: 13.5px; box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37 !important; outline: none; }
.pm-cliente-busca:focus { box-shadow: 0 -2px 0 #ff7a3d, 0 2px 0 #ff7a3d, -2px 0 0 #ff7a3d, 2px 0 0 #ff7a3d !important; }
.pm-cliente-lista { overflow: auto; padding: 0 6px 8px; }
.pm-cliente-op { position: relative; display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 8px 10px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: rgba(255, 255, 255, .82) !important; font-size: 13.5px; font-weight: 600; text-align: left; box-shadow: none !important; cursor: pointer;
  opacity: 0; animation: pm-op-entra .3s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--i, 0) * 22ms); }
.pm-cliente-op[hidden] { display: none !important; }
@keyframes pm-op-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.pm-cliente-op .pm-op-foto { width: 28px !important; height: 28px !important; border-radius: 0 !important; font-size: 10px !important; flex: none; transition: transform .2s; }
.pm-cliente-op span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-cliente-op:hover { background: rgba(255, 122, 61, .1) !important; color: #fff !important; }
.pm-cliente-op:hover .pm-op-foto { transform: scale(1.08) rotate(-3deg); }
.pm-cliente-op:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #ff7a3d; }
.pm-cliente-op.ativo { color: #ff9a5c !important; }
.pm-op-ok { width: 8px; height: 8px; background: #ff7a3d; animation: px-pisca 1.1s steps(2, end) infinite; }

.pm-mes { height: 64px !important; padding: 0 8px !important; gap: 6px !important; background: #10141b !important; overflow: hidden; }
.pm-mes-txt { display: grid; justify-items: center; min-width: 140px; }
.pm-mes-txt small { font-family: 'Pixelify Sans', monospace; font-size: 11px; letter-spacing: .2em; color: #ff9a5c; }
.pm-mes-nome { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.pm-mes-txt.vem-dir { animation: pm-mes-dir .35s cubic-bezier(.16, 1, .3, 1); }
.pm-mes-txt.vem-esq { animation: pm-mes-esq .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes pm-mes-dir { from { opacity: 0; transform: translateX(22px); } }
@keyframes pm-mes-esq { from { opacity: 0; transform: translateX(-22px); } }
.pm-mes button { width: 38px !important; height: 38px !important; background: #1a1f28 !important; color: #ff9a5c !important;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .3), inset 2px 2px 0 rgba(255, 255, 255, .06) !important; }
.pm-mes button:hover { background: #ff5a1f !important; color: #fff !important; }
.pm-mes button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .pm-cliente-anel::before, .pm-cliente-op, .pm-mes-txt, .pm-op-ok { animation: none !important; opacity: 1; } }

/* ---- janela da ideia: cara de cartao de anotacao ---- */
.pm-painel.pi:not([hidden]) { width: min(580px, calc(100vw - 32px)) !important; padding: 0 !important; gap: 0 !important; display: block !important;
  overflow: hidden !important; max-height: calc(100vh - 40px); background: #10141b !important; --pi: #ff7a3d; --pi-fundo: rgba(255, 122, 61, .12); }
.pi-feed { --pi: #f472b6 !important; --pi-fundo: rgba(244, 114, 182, .12) !important; }
.pi-reel { --pi: #a78bfa !important; --pi-fundo: rgba(167, 139, 250, .13) !important; }
.pi-feriado { --pi: #fbbf24 !important; --pi-fundo: rgba(251, 191, 36, .12) !important; }
.pi-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(90deg, var(--pi-fundo), transparent 75%);
  border-bottom: 2px dashed rgba(255, 255, 255, .07); position: relative; }
.pi-topo::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--pi) 0 10px, transparent 10px 14px); }
.pi-icone { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--pi); color: #10141b;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25), inset 3px 3px 0 rgba(255, 255, 255, .3); }
.pi-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pi-info { display: grid; gap: 3px; flex: 1; min-width: 0; }
.pi-tag { font-family: 'Pixelify Sans', monospace; font-size: 15px; font-weight: 700; color: var(--pi); letter-spacing: .03em; }
.pi-info small { font-size: 12.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-topo .pm-peca-status { padding: 4px 9px; background: rgba(255, 255, 255, .05); font-size: 11.5px; }
.pi-topo .pm-fechar { width: 30px !important; height: 30px !important; border-radius: 0 !important; }

.pi-form { display: grid; gap: 18px; padding: 20px 22px 0; }
.pi-tema { width: 100%; padding: 0 0 10px !important; border: 0 !important; border-bottom: 2px solid rgba(255, 255, 255, .08) !important; border-radius: 0 !important;
  background: transparent !important; color: #fff; font: inherit; font-size: 22px; font-weight: 800; letter-spacing: -.01em; box-shadow: none !important; outline: none; }
.pi-tema::placeholder { color: rgba(255, 255, 255, .25); }
.pi-tema:focus { border-bottom-color: var(--pi) !important; }
.pi-campo { position: relative; display: grid; gap: 8px; }
.pi-rotulo { font-family: 'Pixelify Sans', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.pi-ideia { width: 100%; min-height: 150px; padding: 12px 14px 26px !important; border: 0 !important; border-radius: 0 !important; resize: vertical;
  background: #0b0e13 repeating-linear-gradient(180deg, transparent 0 27px, rgba(255, 255, 255, .045) 27px 28px) !important; background-attachment: local !important;
  color: rgba(255, 255, 255, .9); font: inherit; font-size: 14.5px; line-height: 28px; outline: none;
  box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37 !important; transition: box-shadow .2s; }
.pi-ideia:focus, .pi-hash:focus { box-shadow: 0 -2px 0 var(--pi), 0 2px 0 var(--pi), -2px 0 0 var(--pi), 2px 0 0 var(--pi) !important; }
.pi-ideia::placeholder, .pi-hash::placeholder { color: rgba(255, 255, 255, .25); }
.pi-conta { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: rgba(255, 255, 255, .3); pointer-events: none; }
.pi-hash { width: 100%; padding: 11px 14px !important; border: 0 !important; border-radius: 0 !important; background: #0b0e13 !important; color: #93c5fd;
  font: inherit; font-size: 13.5px; font-weight: 600; outline: none; box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37 !important; }
.pi-form p.erro { margin: 0; color: #ff8a8a; font-size: 13px; }
.pi-form p.erro:empty { display: none; }
.pi-pe { display: flex; align-items: center; gap: 10px; margin: 0 -22px; padding: 14px 22px; border-top: 2px dashed rgba(255, 255, 255, .07); background: #0d1117; }
.pi-dica { margin-right: auto; font-size: 11.5px; color: rgba(255, 255, 255, .3); }
.pi-pe .pq-salvar { height: 40px; padding: 0 20px !important; }
.pi-pe .pq-salvar { background: var(--pi) !important; color: #10141b !important;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25), inset 3px 3px 0 rgba(255, 255, 255, .3), 4px 4px 0 rgba(0, 0, 0, .4) !important; }

/* ---- calendario: cor por tipo ---- */
.pm-cal-peca { border-left: 3px solid var(--tc) !important; background: color-mix(in srgb, var(--tc) 13%, transparent) !important; }
.pm-cal-peca svg { color: var(--tc); }
.pm-cal-peca span { color: #fff !important; font-weight: 700; }
.pm-cal-peca:hover { background: color-mix(in srgb, var(--tc) 24%, transparent) !important; transform: translateX(2px); }
.pm-cal-peca.tipo-feed { --tc: #f472b6; }
.pm-cal-peca.tipo-reel { --tc: #a78bfa; }
.pm-cal-peca.tipo-feriado { --tc: #fbbf24; }
.pm-cal-stories { color: #ffb48a !important; font-weight: 600; }
.pm-cal-stories svg { color: #ff7a3d; }
.pm-cal-dia { transition: background .2s; }
.pm-cal-dia:not(.vazio):hover { background: rgba(255, 255, 255, .025); }
.pm-cal-num { font-variant-numeric: tabular-nums; }

/* ---- legendas e reels: cartoes de anotacao ---- */
.pm-item.pi-card { position: relative; gap: 14px; padding: 0 0 16px; overflow: hidden; background: #10141b !important; --pi: #f472b6; --pi-fundo: rgba(244, 114, 182, .12); }
.pm-item.pi-card.pi-reel { --pi: #a78bfa; --pi-fundo: rgba(167, 139, 250, .13); }
.pm-item.pi-card.pi-feriado { --pi: #fbbf24; --pi-fundo: rgba(251, 191, 36, .12); }
.pm-item.pi-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--pi) 0 10px, transparent 10px 14px); }
.pm-item.pi-card > header { padding: 16px 16px 12px; background: linear-gradient(90deg, var(--pi-fundo), transparent 80%); border-bottom: 2px dashed rgba(255, 255, 255, .06); }
.pm-item.pi-card > :not(header) { margin: 0 16px; }
.pm-item.pi-card .pm-item-data { font-size: 16px; color: #fff; }
.pm-item.pi-card .pm-reel-num { background: var(--pi); color: #10141b; font-family: 'Pixelify Sans', monospace; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .25); }
.pm-item.pi-card .pm-item-abrir { border: 0 !important; background: color-mix(in srgb, var(--pi) 18%, transparent) !important; color: var(--pi) !important; font-weight: 700; }
.pm-item.pi-card .pi-tema { font-size: 18px; padding-bottom: 8px !important; }
.pm-item.pi-card .pi-ideia { min-height: 112px; }
.pm-item.pi-card.salvo { box-shadow: 0 -3px 0 #34d399, 0 3px 0 #34d399, -3px 0 0 #34d399, 3px 0 0 #34d399 !important; }
.pm-item.pi-card:hover { transform: translateY(-2px); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.pi-cta { color: #fde68a !important; }

/* calendario: uma etiqueta por story */
.pm-cal-peca.tipo-story { --tc: #ff7a3d; padding: 2px 6px !important; font-size: 10.5px; }
.pm-cal-peca.tipo-story span { font-weight: 600 !important; color: rgba(255, 255, 255, .8) !important; }
.pm-cal-peca.tipo-story b { color: #ffb48a; font-family: 'Pixelify Sans', monospace; }
.pm-cal-peca.tipo-story svg { display: none; }
.pm-cal-pecas { gap: 3px; }

/* sem brilho pulsando nos cards do planejamento */
.pmt-peca::before, .pmt-peca .pmt-status, .pm-peca .pm-peca-status i, .pm-px, .pm-peca-status i, .pm-cal-peca, .pmt-legenda .pmt-status { animation: none !important; }

/* check nas demandas do Inicio */
.md-post.com-check { display: flex; align-items: center; cursor: pointer; }
.md-feito { flex: none; width: 26px; height: 26px; margin-right: 4px; padding: 0 !important; display: grid !important; place-items: center; border-radius: 8px !important;
  border: 2px solid rgba(255, 255, 255, .22) !important; background: transparent !important; color: transparent !important; box-shadow: none !important; cursor: pointer; transition: all .2s; }
.md-feito svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.md-feito:hover { border-color: #34d399 !important; color: rgba(52, 211, 153, .6) !important; }
.md-post.feito .md-feito { background: #34d399 !important; border-color: #34d399 !important; color: #04130d !important; animation: md-check .35s cubic-bezier(.16, 1, .3, 1); }
.md-post.feito .md-post-texto strong { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .55); }
.md-post.feito { opacity: .75; }
@keyframes md-check { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } }

/* filtros das demandas do Inicio */
.md-dem-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.md-dem-periodo { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.md-dem-periodo button { height: 30px; padding: 0 12px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: rgba(255, 255, 255, .55) !important; font-size: 12.5px; font-weight: 700; box-shadow: none !important; cursor: pointer; transition: color .2s, background .2s; }
.md-dem-periodo button:hover { color: #fff !important; }
.md-dem-periodo button.ativo { background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(255, 90, 31, .9) !important; }
.md-dem-cliente { flex: 1; min-width: 160px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); color: #fff; font: inherit; font-size: 13px; font-weight: 600; color-scheme: dark; }
.md-demandas .md-lista { max-height: 560px; overflow: auto; }

/* demandas: etiqueta de prazo e concluido em pixel */
.md-estado-oculto { display: none !important; }
.md-prazo-dem { display: inline-flex; }
.prazo-conta.concluida { --px: #2f8f5b; --px-fundo: #0f2a1c; color: #7fe0a6; }
.prazo-conta.concluida::before { clip-path: polygon(0 50%, 20% 30%, 40% 55%, 80% 10%, 100% 30%, 40% 90%) !important; animation: none !important; }
.md-post.com-check .md-post-lado { flex: none; }

/* ---- card da demanda (Inicio) ---- */
.md-post.com-check { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px !important;
  border-radius: 14px !important; background: linear-gradient(180deg, #151a22, #11151c) !important; border: 1px solid rgba(255, 255, 255, .06) !important;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s, background .2s; margin-bottom: 8px; }
.md-post.com-check:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .13) !important; background: linear-gradient(180deg, #19202a, #141922) !important; }
.md-dem-foto { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; }
.md-dem-foto::before { content: ""; position: absolute; inset: -2px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 122, 61, .8), rgba(255, 122, 61, .1)); }
.md-dem-foto .md-avatar { position: relative; width: 38px !important; height: 38px !important; border-radius: 10px !important; box-shadow: 0 0 0 2px #12161d; font-size: 12px !important; }
.md-dem-texto { display: grid !important; gap: 6px; min-width: 0; }
.md-dem-texto strong { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-dem-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.md-dem-tipo { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.md-dem-tipo.t-story { color: #ffb48a; background: rgba(255, 122, 61, .15); }
.md-dem-tipo.t-feed { color: #f9a8d4; background: rgba(244, 114, 182, .15); }
.md-dem-tipo.t-reel { color: #c4b5fd; background: rgba(167, 139, 250, .16); }
.md-dem-tipo.t-feriado { color: #fde68a; background: rgba(251, 191, 36, .16); }
.md-dem-dia { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.md-dem-cli { max-width: 170px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-dem-cli::before { content: "·"; margin-right: 6px; color: rgba(255, 255, 255, .25); }
.md-dem-resp { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 2px; border-radius: 99px; background: rgba(255, 255, 255, .05);
  font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.md-dem-resp i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, #ff7a3d, #ff5a1f);
  color: #fff; font-style: normal; font-size: 8px; font-weight: 800; }
.md-post.com-check .md-post-lado { justify-self: end; }
.md-post.com-check .prazo-conta { white-space: nowrap; font-size: 11px; }
.md-post.com-check.feito .md-dem-texto strong { text-decoration: line-through; color: rgba(255, 255, 255, .5); }
@media (max-width: 560px) {
  .md-post.com-check { grid-template-columns: auto auto minmax(0, 1fr); }
  .md-post.com-check .md-post-lado { grid-column: 3; justify-self: start; }
}

.md-dem-resp i { position: relative; overflow: hidden; width: 20px !important; height: 20px !important; }
.md-dem-resp i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.md-dem-resp { padding: 2px 9px 2px 2px; }

/* ---- ponto detalhado do colaborador ---- */
.pt-vistas { display: inline-flex; padding: 3px; gap: 2px; margin: 14px 0 10px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.pt-vistas button { height: 32px; padding: 0 14px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important;
  color: rgba(255, 255, 255, .55) !important; font-weight: 700; font-size: 13px; box-shadow: none !important; cursor: pointer; }
.pt-vistas button.ativo { background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important; color: #fff !important; }
.pt-tabela-caixa { max-height: 52vh; overflow: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); background: #0f131a; }
.pt-tabela { width: 100%; border-collapse: collapse; }
.pt-tabela th { position: sticky; top: 0; z-index: 1; background: #141922; padding: 11px 12px; text-align: left; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.pt-tabela th i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.pt-tabela i.entrada, .pt-h.entrada span { --c: #34d399; } .pt-tabela i.intervalo, .pt-h.intervalo span { --c: #fbbf24; }
.pt-tabela i.volta, .pt-h.volta span { --c: #60a5fa; } .pt-tabela i.saida, .pt-h.saida span { --c: #f87171; }
.pt-tabela th i { background: var(--c); }
.pt-tabela td { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.pt-l:hover td { background: rgba(255, 255, 255, .02); }
.pt-d b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.pt-d small { font-size: 11.5px; color: rgba(255, 255, 255, .45); text-transform: capitalize; }
.pt-h span { display: inline-block; padding: 4px 9px; border-radius: 8px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pt-h em { color: rgba(255, 255, 255, .22); font-style: normal; }
.pt-tot strong { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.pt-tot small { display: block; font-size: 11px; color: rgba(255, 255, 255, .45); }
.pt-tot .pt-flag { color: #fbbf24; font-weight: 700; }
.pt-l.agora .pt-flag { color: #34d399; }
.pt-l.falta .pt-sem { color: #f87171; font-size: 12.5px; font-weight: 600; }
.pt-l.futuro .pt-sem { color: rgba(255, 255, 255, .25); }
.pt-legenda[hidden] { display: none; }

/* ---- varios anexos de uma vez ---- */
.anexo-bandeja.varios { display: grid !important; gap: 10px; }
.anexo-varios-topo { display: flex; align-items: center; gap: 10px; }
.anexo-varios-topo small { flex: 1; font-size: 12px; color: rgba(255, 255, 255, .5); }
.anexo-grade { display: flex; flex-wrap: wrap; gap: 8px; max-height: 150px; overflow: auto; }
.anexo-mini { position: relative; width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 90, 31, .15); animation: msg-chega .3s cubic-bezier(.16, 1, .3, 1); }
.anexo-mini img, .anexo-mini video { width: 100%; height: 100%; object-fit: cover; }
.anexo-mini b { font-size: 11px; font-weight: 800; color: #ff9a5c; }
.anexo-mini button[data-tirar] { position: absolute; top: 3px; right: 3px; width: 20px !important; height: 20px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important; background: rgba(0, 0, 0, .7) !important; color: #fff !important; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: none !important; }
.anexo-mini:hover button[data-tirar] { opacity: 1; }
.anexo-mini.mais { border: 1.5px dashed rgba(255, 122, 61, .5) !important; background: transparent !important; color: #ff9a5c !important; cursor: pointer; box-shadow: none !important; padding: 0 !important; }
.anexo-mini.mais svg, .anexo-mais svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.anexo-bandeja > .anexo-mais { flex: none; width: 34px !important; height: 34px !important; padding: 0 !important; display: grid !important; place-items: center; border-radius: 10px !important; border: 1px dashed rgba(255, 122, 61, .5) !important; background: transparent !important; color: #ff9a5c !important; cursor: pointer; box-shadow: none !important; }

/* ---- planejamento: plano do cliente e extras ---- */
.pn-plano { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 24px; border-bottom: 2px dashed rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); }
.pn-plano span { font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.pn-plano b { color: #fff; }
.pn-plano small { flex-basis: 100%; font-size: 12px; color: rgba(255, 255, 255, .45); }
.pn-plano.sem span { color: rgba(255, 255, 255, .5); }
.pn-extras { margin: 4px 0 0; padding: 8px 10px; background: rgba(251, 191, 36, .1); color: #fde68a; font-size: 12.5px; box-shadow: inset 3px 0 0 #fbbf24; }
.pn-extras[hidden] { display: none; }
.pm-plano-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 3px 14px; padding: 12px 16px; background: #10141b; box-shadow: 0 -2px 0 #262c37, 0 2px 0 #262c37, -2px 0 0 #262c37, 2px 0 0 #262c37; }
.pm-plano-faixa > span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.pm-plano-faixa b { color: #fff; }
.pm-extra { margin-left: auto; padding: 4px 10px; background: rgba(251, 191, 36, .14); color: #fde68a !important; font-weight: 700; }
.pm-dentro { margin-left: auto; padding: 4px 10px; background: rgba(52, 211, 153, .12); color: #6ee7b7 !important; font-weight: 700; }

/* ---- anexos: cartoes com nome e tamanho ---- */
.anexo-grade { gap: 8px !important; max-height: 168px; padding: 2px; }
.anexo-item { position: relative; display: flex; align-items: center; gap: 10px; width: 210px; padding: 8px 34px 8px 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); animation: msg-chega .3s cubic-bezier(.16, 1, .3, 1); transition: border-color .2s, background .2s; }
.anexo-item:hover { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.anexo-item-vis { position: relative; flex: none; width: 42px; height: 42px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; --c: #9ca3af; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.anexo-item-vis.pdf { --c: #f87171; } .anexo-item-vis.doc { --c: #60a5fa; } .anexo-item-vis.xls { --c: #34d399; } .anexo-item-vis.ppt { --c: #fb923c; } .anexo-item-vis.zip { --c: #a78bfa; }
.anexo-item-vis svg { position: absolute; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; }
.anexo-item-vis b { position: relative; margin-top: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 4px; border-radius: 3px; background: var(--c); color: #0b0e13; }
.anexo-item-vis img, .anexo-item-vis video { width: 100%; height: 100%; object-fit: cover; }
.anexo-item-txt { display: grid; gap: 2px; min-width: 0; }
.anexo-item-txt strong { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anexo-item-txt small { font-size: 11px; color: rgba(255, 255, 255, .45); }
.anexo-item button[data-tirar] { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 22px !important; height: 22px !important; padding: 0 !important; display: grid !important; place-items: center; border-radius: 7px !important; border: 0 !important; background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .55) !important; cursor: pointer; box-shadow: none !important; }
.anexo-item button[data-tirar]:hover { background: rgba(248, 113, 113, .2) !important; color: #fca5a5 !important; }
.anexo-item button[data-tirar] svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.anexo-item-mais { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 60px; padding: 0 16px !important; border-radius: 12px !important; border: 1.5px dashed rgba(255, 122, 61, .45) !important; background: transparent !important; color: #ff9a5c !important; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: none !important; transition: background .2s, border-color .2s; }
.anexo-item-mais:hover { background: rgba(255, 122, 61, .08) !important; border-color: #ff7a3d !important; }
.anexo-item-mais svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ---- montador do post (planejamento) ---- */
.pm-painel.pi.pi-montador:not([hidden]) { width: min(1020px, calc(100vw - 32px)) !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 32px); }
.pmo-corpo { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 0; overflow: auto; }
.pmo-previa { display: grid; align-content: start; justify-items: center; gap: 10px; padding: 20px; background: #0b0e13; border-right: 2px dashed rgba(255, 255, 255, .06); }
.pmo-celular { width: 100%; max-width: 290px; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); font-family: -apple-system, system-ui, sans-serif; }
.pmo-conta { display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: 12.5px; color: #fff; }
.pmo-conta span { margin-left: auto; color: rgba(255, 255, 255, .6); letter-spacing: 1px; }
.pmo-conta .pmo-foto { width: 26px !important; height: 26px !important; border-radius: 50% !important; font-size: 9px !important; box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #e1306c; }
.pmo-midia { position: relative; aspect-ratio: 4 / 5; background: #111; display: grid; place-items: center; overflow: hidden; }
.pmo-celular.vertical .pmo-midia { aspect-ratio: 9 / 16; }
.pmo-midia img, .pmo-midia video { width: 100%; height: 100%; object-fit: cover; animation: msg-chega .3s ease; }
.pmo-sem-arte { display: grid; place-items: center; gap: 8px; color: rgba(255, 255, 255, .3); font-size: 12px; }
.pmo-sem-arte svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pmo-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 26px !important; height: 26px !important; padding: 0 !important; border-radius: 50% !important;
  border: 0 !important; background: rgba(255, 255, 255, .85) !important; color: #111 !important; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none !important; }
.pmo-seta.e { left: 8px; } .pmo-seta.d { right: 8px; }
.pmo-pontos { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.pmo-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.pmo-pontos i.on { background: #3b82f6; }
.pmo-contador { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; }
.pmo-acoes { display: flex; gap: 12px; padding: 9px 11px 4px; font-size: 17px; color: #fff; }
.pmo-acoes i { flex: 1; }
.pmo-legenda { padding: 0 11px 12px; font-size: 12.5px; line-height: 1.45; color: #fff; white-space: pre-line; max-height: 140px; overflow: auto; }
.pmo-hash { margin: 4px 0 0; color: #93b4ff; }
.pmo-sobre { padding: 10px 12px 12px; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.pmo-sobre:empty { display: none; }
.pmo-dica { font-size: 11px; color: rgba(255, 255, 255, .35); }
.pmo-form { padding: 20px 22px !important; gap: 16px !important; align-content: start; transition: background .2s; }
.pmo-form.soltando { background: rgba(255, 122, 61, .06); box-shadow: inset 0 0 0 2px rgba(255, 122, 61, .5); }
.pmo-artes { display: flex; flex-wrap: wrap; gap: 8px; }
.pmo-arte { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.pmo-arte:hover { transform: translateY(-2px); }
.pmo-arte.ativa { border-color: var(--pi); }
.pmo-arte img, .pmo-arte video { width: 100%; height: 100%; object-fit: cover; }
.pmo-ordem { position: absolute; left: 4px; bottom: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.pmo-arte button { position: absolute; top: 4px; right: 4px; width: 20px !important; height: 20px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
  background: rgba(0, 0, 0, .7) !important; color: #fff !important; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: none !important; }
.pmo-arte:hover button { opacity: 1; }
.pmo-subir { display: grid !important; place-items: center; align-content: center; gap: 2px; min-width: 120px; height: 74px; padding: 0 14px !important; border-radius: 10px !important;
  border: 1.5px dashed color-mix(in srgb, var(--pi) 60%, transparent) !important; background: color-mix(in srgb, var(--pi) 6%, transparent) !important; color: var(--pi) !important;
  cursor: pointer; box-shadow: none !important; transition: background .2s; }
.pmo-subir:hover { background: color-mix(in srgb, var(--pi) 14%, transparent) !important; }
.pmo-subir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pmo-subir span { font-size: 12.5px; font-weight: 700; }
.pmo-subir small { font-size: 10.5px; color: rgba(255, 255, 255, .35); }
.pmo-recado { margin: 0; font-size: 12px; }
.pmo-recado:empty { display: none; }
.pmo-recado.indo { color: #fbbf24; }
.pmo-recado.ruim { color: #fca5a5; }
.pmo-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pmo-pe { margin: 0 !important; }
.pmo-salvar { height: 40px; padding: 0 18px !important; border-radius: 0 !important; border: 0 !important; background: rgba(255, 255, 255, .07) !important; color: #fff !important;
  font-weight: 700; cursor: pointer; box-shadow: 0 -2px 0 #2b313d, 0 2px 0 #2b313d, -2px 0 0 #2b313d, 2px 0 0 #2b313d !important; }
.pmo-pe .pq-salvar { display: inline-flex !important; align-items: center; gap: 8px; }
.pmo-pe .pq-salvar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
@media (max-width: 820px) { .pmo-corpo { grid-template-columns: 1fr; } .pmo-previa { border-right: 0; border-bottom: 2px dashed rgba(255, 255, 255, .06); } .pmo-celular { max-width: 220px; } }

/* ---- ponto detalhado: linha do tempo do dia ---- */
.pt-avatar { position: relative; overflow: hidden; }
.pt-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pt-topo .pt-avatar { width: 52px !important; height: 52px !important; box-shadow: 0 0 0 2px #10141b, 0 0 0 4px #ff7a3d; }
.pl-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 10px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.pl-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pl-legenda i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pl-legenda .trab i, .pl-legenda .pz i { width: 16px; height: 6px; border-radius: 3px; }
.entrada, .pl-pino.entrada { --c: #34d399; } .intervalo, .pl-pino.intervalo { --c: #fbbf24; }
.volta, .pl-pino.volta { --c: #60a5fa; } .saida, .pl-pino.saida { --c: #f87171; }
.pl-legenda .trab { --c: linear-gradient(90deg, #ff7a3d, #ff5a1f); } .pl-legenda .trab i { background: linear-gradient(90deg, #ff7a3d, #ff5a1f); }
.pl-legenda .pz i { background: repeating-linear-gradient(45deg, rgba(251, 191, 36, .55) 0 3px, rgba(251, 191, 36, .15) 3px 6px); }
.pl-caixa { max-height: 50vh; overflow: auto; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .07); background: #0f131a; }
.pl-cab, .pl-linha { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px; align-items: center; gap: 14px; padding: 0 16px; }
.pl-cab { position: sticky; top: 0; z-index: 2; height: 34px; background: #141922; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .45); }
.pl-cab > span:last-child { text-align: right; text-transform: uppercase; letter-spacing: .1em; }
.pl-horas { position: relative; height: 100%; }
.pl-horas span { position: absolute; top: 50%; transform: translate(-50%, -50%); font-variant-numeric: tabular-nums; }
.pl-linha { min-height: 64px; border-top: 1px solid rgba(255, 255, 255, .05); transition: background .2s; }
.pl-linha:hover { background: rgba(255, 255, 255, .02); }
.pl-dia b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.pl-dia small { font-size: 11.5px; color: rgba(255, 255, 255, .45); text-transform: capitalize; }
.pl-dia.hoje b { color: #ff9a5c; }
.pl-regua { position: relative; height: 34px; border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px calc(100% / 8)), rgba(255, 255, 255, .02); }
.pl-regua.vazia { display: grid; place-items: center; font-size: 12px; color: rgba(255, 255, 255, .25); }
.pl-linha.falta .pl-regua.vazia { color: #f87171; background: repeating-linear-gradient(45deg, rgba(248, 113, 113, .06) 0 6px, transparent 6px 12px); }
.pl-trab { position: absolute; top: 9px; height: 16px; border-radius: 6px; background: linear-gradient(90deg, #ff7a3d, #ff5a1f); box-shadow: 0 6px 14px -6px rgba(255, 90, 31, .8); }
.pl-trab.viva { background: linear-gradient(90deg, #ff7a3d, #ff5a1f 80%, rgba(255, 90, 31, .3)); animation: pl-pulsa 1.6s ease-in-out infinite; }
.pl-pausa { position: absolute; top: 12px; height: 10px; border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(251, 191, 36, .55) 0 3px, rgba(251, 191, 36, .15) 3px 6px); }
.pl-pausa.viva { animation: pl-pulsa 1.6s ease-in-out infinite; }
@keyframes pl-pulsa { 50% { opacity: .6; } }
.pl-pino { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #0f131a; z-index: 1; }
.pl-pino em { position: absolute; left: 50%; transform: translateX(-50%); top: -20px; padding: 1px 5px; border-radius: 5px; font-style: normal; font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--c); background: #0f131a; white-space: nowrap; }
.pl-pino.intervalo em, .pl-pino.saida em { top: auto; bottom: -20px; }
.pl-linha { min-height: 78px; }
.pl-total { text-align: right; }
.pl-total strong { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-total small { display: block; font-size: 11px; color: rgba(255, 255, 255, .45); }
.pl-flag { color: #fbbf24 !important; font-weight: 700; }
.pl-linha.agora .pl-flag { color: #34d399 !important; }

/* ---- ponto detalhado v2: minimalista e animado ---- */
.pl-legenda { gap: 16px !important; align-items: center; }
.pl-legenda i { display: inline-block; width: 18px !important; height: 4px !important; border-radius: 2px !important; }
.pl-l-trab i { background: linear-gradient(90deg, #ff9a5c, #ff5a1f) !important; }
.pl-l-pz i { background: rgba(251, 191, 36, .7) !important; }
.pl-l-dica { margin-left: auto; color: rgba(255, 255, 255, .3); }
.pl-caixa { border: 0 !important; background: transparent !important; max-height: 52vh; }
.pl-cab { background: #10141b !important; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pl-horas span { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .3); }
.pl-linha { min-height: 66px !important; border-top: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .04);
  opacity: 0; animation: pl-entra .5s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes pl-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pl-regua { height: 30px !important; border-radius: 0 !important; background: none !important; }
.pl-regua::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: rgba(255, 255, 255, .05); }
.pl-trab { top: 50% !important; height: 6px !important; margin-top: -3px; border-radius: 3px !important; box-shadow: 0 0 14px -2px rgba(255, 90, 31, .55) !important;
  background: linear-gradient(90deg, #ff9a5c, #ff5a1f) !important; transform-origin: left center; transform: scaleX(0);
  animation: pl-cresce .9s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--n, 0) * 45ms + 150ms); }
.pl-trab.viva { animation: pl-cresce .9s cubic-bezier(.16, 1, .3, 1) forwards, pl-brilho 2s ease-in-out 1.2s infinite; }
@keyframes pl-cresce { to { transform: scaleX(1); } }
@keyframes pl-brilho { 50% { box-shadow: 0 0 22px 0 rgba(255, 90, 31, .85); } }
.pl-pausa { top: 50% !important; height: 2px !important; margin-top: -1px; border-radius: 1px !important; background: rgba(251, 191, 36, .75) !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, .4); }
.pl-pino { width: 8px !important; height: 8px !important; margin: -4px 0 0 -4px !important; background: #0f131a !important; border: 2px solid var(--c);
  box-shadow: none !important; opacity: 0; animation: pl-surge .4s ease forwards; animation-delay: calc(var(--n, 0) * 45ms + 700ms); transition: transform .2s; }
.pl-pino:hover { transform: scale(1.5); }
@keyframes pl-surge { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.pl-e { --c: #34d399; } .pl-i { --c: #fbbf24; } .pl-v { --c: #60a5fa; } .pl-s { --c: #f87171; }
.pl-pino em { top: auto !important; bottom: auto !important; top: -19px !important; padding: 0 !important; background: none !important; font-size: 10.5px !important;
  font-weight: 700 !important; color: rgba(255, 255, 255, .55) !important; }
.pl-pino.pl-s em { color: rgba(255, 255, 255, .55) !important; }
.pl-total strong { font-size: 15px !important; }
.pl-pz { color: rgba(251, 191, 36, .8) !important; font-weight: 600; }
.pl-linha.falta .pl-regua.vazia { background: none !important; }
.pl-linha.falta .pl-regua.vazia span { padding: 3px 10px; border-radius: 99px; background: rgba(248, 113, 113, .1); font-size: 11.5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pl-linha, .pl-trab, .pl-pino { animation: none !important; opacity: 1; transform: none; } }

/* ---- aviso de arte recusada (proporcao) ---- */
.pmo-recado.ruim { color: inherit; }
.pav { position: relative; display: flex; gap: 12px; padding: 14px 40px 14px 14px; border-radius: 14px; margin-top: 2px;
  background: linear-gradient(135deg, rgba(248, 113, 113, .1), rgba(248, 113, 113, .03)); border: 1px solid rgba(248, 113, 113, .28); animation: msg-chega .35s cubic-bezier(.16, 1, .3, 1); }
.pav + .pav { margin-top: 8px; }
.pav-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f87171; color: #1a0606; font-weight: 900; font-size: 14px; }
.pav-txt { display: grid; gap: 6px; min-width: 0; }
.pav strong { font-size: 13.5px; color: #fff; }
.pav p { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.pav p b { color: #fff; font-weight: 600; word-break: break-all; }
.pav-formas { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pav-forma { display: grid; justify-items: center; gap: 4px; }
.pav-forma i { display: block; border-radius: 4px; }
.pav-forma.errada i { border: 2px dashed #f87171; background: rgba(248, 113, 113, .08); }
.pav-forma.certa i { border: 2px solid #34d399; background: rgba(52, 211, 153, .1); animation: pav-pulso 2s ease-in-out infinite; }
.pav-forma b { font-size: 12px; font-weight: 800; color: #fff; }
.pav-forma.errada b { color: #fca5a5; text-decoration: line-through; }
.pav-forma.certa b { color: #6ee7b7; }
.pav-forma small { font-size: 10.5px; color: rgba(255, 255, 255, .45); white-space: nowrap; }
.pav-seta { align-self: center; margin-bottom: 26px; color: rgba(255, 255, 255, .35); font-size: 16px; }
@keyframes pav-pulso { 50% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .12); } }
.pav [data-fechar-aviso] { position: absolute; top: 10px; right: 10px; width: 24px !important; height: 24px !important; padding: 0 !important; border-radius: 8px !important;
  border: 0 !important; background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .6) !important; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: none !important; }

/* ---- montador v2: tudo cabe, rodape fixo, previa realista ---- */
.pm-painel.pi.pi-montador:not([hidden]) { height: min(780px, calc(100vh - 32px)) !important; max-height: none !important; overflow: hidden !important; }
.pi-montador .pmo-corpo { overflow: hidden !important; min-height: 0; grid-template-columns: 320px minmax(0, 1fr); }
.pi-montador .pmo-previa { overflow: auto; align-content: center; padding: 18px; background: radial-gradient(400px 300px at 50% 30%, color-mix(in srgb, var(--pi) 10%, transparent), transparent 70%), #0b0e13; }
.pi-montador .pmo-celular { max-width: 270px; }
.pi-montador .pmo-celular.vertical { max-width: 232px; border-radius: 22px; border: 6px solid #1b2029; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06); }
.pi-montador .pmo-celular.vertical .pmo-conta { position: absolute; z-index: 2; left: 0; right: 0; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.pi-montador .pmo-celular.vertical { position: relative; }
.pi-montador .pmo-celular.vertical .pmo-midia { aspect-ratio: 9 / 16; max-height: 410px; }
.pmo-sobre-tela { position: absolute; z-index: 1; left: 10%; right: 10%; pointer-events: none; text-align: center; white-space: pre-line; animation: msg-chega .25s ease; }
.pmo-sobre-tela[hidden] { display: none; }
.pmo-sobre-tela.story { top: 50%; transform: translateY(-50%); padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .92); color: #111;
  font-size: 13px; font-weight: 800; line-height: 1.3; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); max-height: 60%; overflow: hidden; }
.pmo-sobre-tela.reel { left: 10px; right: 46px; bottom: 14px; text-align: left; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.pi-montador .pmo-form { overflow: auto; min-height: 0; padding: 22px 26px 26px !important; }
.pi-montador .pi-tema { font-size: 24px; }
.pi-montador .pi-ideia { min-height: 132px; }
.pi-montador .pi-ideia:focus, .pi-montador .pi-hash:focus { box-shadow: 0 -2px 0 color-mix(in srgb, var(--pi) 70%, transparent), 0 2px 0 color-mix(in srgb, var(--pi) 70%, transparent),
  -2px 0 0 color-mix(in srgb, var(--pi) 70%, transparent), 2px 0 0 color-mix(in srgb, var(--pi) 70%, transparent) !important; }
.pi-montador .pmo-pe { position: relative; z-index: 3; background: #0d1117 !important; padding: 14px 22px !important; border-top: 2px dashed rgba(255, 255, 255, .07); }
.pmo-trocar { align-self: center; height: 32px; padding: 0 12px !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, .12) !important;
  background: transparent !important; color: rgba(255, 255, 255, .75) !important; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: none !important; }
.pmo-trocar:hover { border-color: var(--pi) !important; color: var(--pi) !important; }
.pmo-artes { align-items: center; }
@media (max-height: 720px) { .pi-montador .pmo-celular.vertical .pmo-midia { max-height: 330px; } .pi-montador .pi-ideia { min-height: 96px; } }

/* ---- ponto v3: quatro horarios visiveis + dica ao passar o mouse ---- */
.pl-cab, .pl-linha { grid-template-columns: 58px minmax(0, 1fr) 316px 80px !important; }
.pl-cab-chips { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .35); text-align: center; }
.pl-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pl-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); cursor: default; transition: transform .2s, background .2s; }
.pl-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.pl-chip:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 20%, transparent); }
.pl-chip.vazio { color: rgba(255, 255, 255, .25); background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .1); }
.pl-chip.vazio i { background: rgba(255, 255, 255, .2); }
.pl-e { --c: #34d399; } .pl-i { --c: #fbbf24; } .pl-v { --c: #60a5fa; } .pl-s { --c: #f472b6; }
.pl-pino { width: 10px !important; height: 10px !important; margin: -5px 0 0 -5px !important; background: var(--c) !important; border: 2px solid #0f131a !important;
  box-shadow: 0 0 0 1.5px var(--c) !important; cursor: pointer; }
.pl-pino:hover { transform: scale(1.6); z-index: 3; }
.pl-pino em { display: none !important; }
.pl-legenda .pl-l { display: inline-flex; align-items: center; gap: 6px; }
.pl-legenda .pl-l b { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
/* a dica que aparece ao passar o mouse */
[data-dica] { position: relative; }
.pl-caixa [data-dica]:hover::after { content: attr(data-dica); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); z-index: 10;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #0b0e13; background: var(--c, #fff);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9); animation: pl-dica .18s ease; pointer-events: none; }
.pl-caixa [data-dica]:hover::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 10;
  border: 6px solid transparent; border-top-color: var(--c, #fff); border-bottom: 0; pointer-events: none; }
.pl-pino:hover::after, .pl-pino:hover::before { transform: translateX(-50%) scale(.625); transform-origin: bottom center; }
@keyframes pl-dica { from { opacity: 0; margin-bottom: -4px; } }
.pt-janela { width: min(1180px, calc(100vw - 32px)) !important; }
@media (max-width: 1000px) { .pl-cab, .pl-linha { grid-template-columns: 52px minmax(0, 1fr) 76px !important; } .pl-chips { grid-column: 2 / 4; padding-bottom: 10px; } .pl-cab-chips { display: none; } }

/* ---- ponto v4: marcadores e dica flutuante ---- */
.pl-caixa [data-dica]:hover::after, .pl-caixa [data-dica]:hover::before { content: none !important; display: none !important; }
.pl-pino { box-sizing: border-box !important; width: 4px !important; height: 20px !important; margin: -10px 0 0 -2px !important; border: 0 !important; border-radius: 3px !important;
  background: var(--c) !important; box-shadow: 0 0 0 2px #0f131a, 0 0 10px color-mix(in srgb, var(--c) 70%, transparent) !important; transition: height .2s, margin .2s, box-shadow .2s !important; }
.pl-pino::after { content: '' !important; display: block !important; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #0f131a; }
.pl-pino:hover { transform: none !important; height: 26px !important; margin-top: -13px !important; box-shadow: 0 0 0 2px #0f131a, 0 0 16px var(--c) !important; }
.pl-dica-voa { position: fixed; z-index: 99999; padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 800; white-space: nowrap; color: #0b0e13; background: var(--c);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .9); pointer-events: none; animation: pl-dica-entra .18s cubic-bezier(.16, 1, .3, 1); }
.pl-dica-voa::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--c); border-bottom: 0; }
@keyframes pl-dica-entra { from { opacity: 0; transform: translateY(4px); } }

/* o texto do story/reel e anotacao interna: nao aparece na previa */
.pmo-sobre-tela { display: none !important; }

/* ---- ponto: cartao do dia ao passar o cursor ---- */
.pl-dica-voa { position: fixed; inset: auto !important; margin: 0 !important; z-index: 99999; display: grid; gap: 6px; min-width: 210px; padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 14px !important; background: rgba(17, 21, 28, .96) !important; color: #fff !important;
  backdrop-filter: blur(10px); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .95) !important; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; overflow: visible; }
.pl-dica-voa::after { display: none !important; }
.pl-dica-voa > strong { font-size: 13px; font-weight: 800; margin-bottom: 2px; text-transform: capitalize; }
.pl-dl { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; }
.pl-dl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.pl-dl span { color: rgba(255, 255, 255, .65); }
.pl-dl b { color: var(--c); font-variant-numeric: tabular-nums; font-size: 13px; }
.pl-dt { display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }
.pl-dt + .pl-dt { border-top: 0; padding-top: 0; }
.pl-dt b { color: #fff; }
.pl-regua[data-resumo] { cursor: crosshair; }
.pl-regua[data-resumo]:hover::before { background: rgba(255, 255, 255, .12); }
.pl-pino::after { display: none !important; }
.pl-pino { width: 12px !important; height: 12px !important; margin: -6px 0 0 -6px !important; border-radius: 50% !important; background: var(--c) !important;
  box-shadow: 0 0 0 3px #0f131a, 0 0 12px var(--c) !important; }
.pl-pino:hover { height: 12px !important; margin-top: -6px !important; transform: scale(1.35) !important; }

/* ---- ponto v5: barra limpa ---- */
.pl-dica-voa { inset: auto; top: 0; left: 0; }
.pl-trab { height: 8px !important; margin-top: -4px !important; border-radius: 99px !important; }
.pl-trab::before, .pl-trab::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 90, 31, .35); }
.pl-trab::before { left: -3px; } .pl-trab::after { right: -3px; }
.pl-pausa { height: 0 !important; margin-top: 0 !important; background: none !important; box-shadow: none !important; border-top: 2px dashed rgba(251, 191, 36, .85); }
.pl-regua[data-resumo]:hover .pl-trab { filter: brightness(1.15); box-shadow: 0 0 18px -2px rgba(255, 90, 31, .8) !important; }

.pl-linha:has(.pl-regua[data-resumo]) { cursor: default; }
.pl-linha:has(.pl-regua[data-resumo]):hover { background: rgba(255, 122, 61, .04) !important; }
.pl-dica-voa { transition: left .08s linear; }

/* excluir planejamento */
.pm-botao.perigo { color: #fca5a5 !important; }
.pm-botao.perigo:hover:not(:disabled) { background: rgba(248, 113, 113, .12) !important; }
.pex p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.pex p b { color: #fff; }
.pex-ok { color: #6ee7b7 !important; font-size: 12.5px !important; }
.pex-campo { display: grid; gap: 6px; margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .6); text-transform: none !important; letter-spacing: 0 !important; }
.pex-campo b { color: #fca5a5; text-transform: capitalize; }
.pex-apagar { height: 38px; padding: 0 18px !important; border: 0 !important; border-radius: 0 !important; background: #dc2626 !important; color: #fff !important; font-weight: 800; cursor: pointer; box-shadow: 0 -2px 0 #f87171, 0 2px 0 #991b1b, -2px 0 0 #f87171, 2px 0 0 #991b1b !important; }
.pex-apagar:disabled { opacity: .35; cursor: not-allowed; }

/* ---- tarefa: iniciar / em producao ---- */
.md-todo-lado { display: flex !important; flex-direction: column; align-items: flex-end; gap: 6px; }
.md-iniciar { display: inline-flex !important; align-items: center; gap: 6px; height: 28px; padding: 0 11px !important; border-radius: 99px !important; border: 1px solid rgba(52, 211, 153, .35) !important;
  background: rgba(52, 211, 153, .08) !important; color: #6ee7b7 !important; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: none !important; transition: background .2s, transform .2s; }
.md-iniciar:hover { background: rgba(52, 211, 153, .18) !important; transform: translateY(-1px); }
.md-iniciar svg { width: 11px; height: 11px; fill: currentColor; }
.md-iniciar.ativo { border-color: rgba(52, 211, 153, .6) !important; background: linear-gradient(90deg, rgba(52, 211, 153, .22), rgba(52, 211, 153, .08)) !important; color: #a7f3d0 !important; }
.md-iniciar.ativo span { display: none; margin-left: 2px; color: rgba(255, 255, 255, .6); }
.md-iniciar.ativo:hover span { display: inline; }
.md-onda { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.md-onda b { width: 3px; border-radius: 1px; background: #34d399; animation: md-onda 1s ease-in-out infinite; }
.md-onda b:nth-child(2) { animation-delay: .15s; } .md-onda b:nth-child(3) { animation-delay: .3s; }
@keyframes md-onda { 0%, 100% { height: 3px; } 50% { height: 11px; } }
.md-todo li.md-fazendo { border-color: rgba(52, 211, 153, .35) !important; background: linear-gradient(90deg, rgba(52, 211, 153, .07), transparent 60%) !important; box-shadow: inset 3px 0 0 #34d399; }

/* em andamento: tarefas iniciadas */
.md-vivo-tarefa { display: flex; align-items: center; cursor: default; border-color: rgba(52, 211, 153, .3) !important; background: linear-gradient(90deg, rgba(52, 211, 153, .07), transparent 60%) !important; box-shadow: inset 3px 0 0 #34d399; }
.md-vivo-pessoa { position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #ff7a3d, #ff5a1f); color: #fff; font-weight: 800; font-size: 12px; }
.md-vivo-pessoa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.md-vivo-tarefa .md-post-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.md-vivo-tarefa .md-iniciar { cursor: default; }

/* ---- em andamento: tarefa sendo produzida ---- */
#md-andamento:has(.mdv) { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.mdv { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px 18px;
  border-radius: 16px; border: 1px solid rgba(52, 211, 153, .22); background: linear-gradient(135deg, rgba(52, 211, 153, .08), rgba(17, 21, 28, .9) 55%);
  animation: msg-chega .4s cubic-bezier(.16, 1, .3, 1); }
.mdv-foto { position: relative; width: 46px; height: 46px; flex: none; }
.mdv-foto::before { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from var(--mdv-ang, 0deg), #34d399, rgba(52, 211, 153, .1) 40%, #34d399 70%, rgba(52, 211, 153, .1)); animation: mdv-gira 2.4s linear infinite; }
@property --mdv-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mdv-gira { to { --mdv-ang: 360deg; } }
.mdv-rosto { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #ff7a3d, #ff5a1f);
  color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px #11151c; }
.mdv-rosto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mdv-ponto { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2.5px #11151c;
  animation: mdv-pulso 1.6s ease-out infinite; }
@keyframes mdv-pulso { 0% { box-shadow: 0 0 0 2.5px #11151c, 0 0 0 2.5px rgba(52, 211, 153, .6); } 100% { box-shadow: 0 0 0 2.5px #11151c, 0 0 0 10px rgba(52, 211, 153, 0); } }
.mdv-meio { display: grid; gap: 3px; min-width: 0; }
.mdv-meio strong { font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdv-digitando { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #6ee7b7; }
.mdv-digitando > b { font-weight: 700; }
.mdv-digitando i { display: inline-flex; gap: 3px; margin-left: 2px; }
.mdv-digitando i b { width: 4px; height: 4px; border-radius: 50%; background: #34d399; animation: mdv-pula 1.2s ease-in-out infinite; }
.mdv-digitando i b:nth-child(2) { animation-delay: .15s; } .mdv-digitando i b:nth-child(3) { animation-delay: .3s; }
@keyframes mdv-pula { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.mdv-meio small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden; }
.mdv-meio .mdv-cli { width: 16px !important; height: 16px !important; min-width: 16px; border-radius: 5px !important; font-size: 7px !important; }
.mdv-lado { align-self: start; }
.mdv-lado .prazo-conta { font-size: 11px; }
.mdv-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(52, 211, 153, .1); overflow: hidden; }
.mdv-barra i { position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, #34d399, transparent); animation: mdv-corre 1.8s ease-in-out infinite; }
@keyframes mdv-corre { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .mdv-foto::before, .mdv-ponto, .mdv-digitando i b, .mdv-barra i { animation: none !important; } }

/* producao em laranja */
.mdv { border-color: rgba(255, 122, 61, .28) !important; background: linear-gradient(135deg, rgba(255, 122, 61, .1), rgba(17, 21, 28, .9) 55%) !important; }
.mdv-foto::before { background: conic-gradient(from var(--mdv-ang, 0deg), #ff7a3d, rgba(255, 122, 61, .1) 40%, #ff7a3d 70%, rgba(255, 122, 61, .1)) !important; }
.mdv-ponto { background: #ff7a3d !important; animation-name: mdv-pulso-l !important; }
@keyframes mdv-pulso-l { 0% { box-shadow: 0 0 0 2.5px #11151c, 0 0 0 2.5px rgba(255, 122, 61, .6); } 100% { box-shadow: 0 0 0 2.5px #11151c, 0 0 0 10px rgba(255, 122, 61, 0); } }
.mdv-digitando { color: #ffb48a !important; }
.mdv-digitando i b { background: #ff7a3d !important; }
.mdv-barra { background: rgba(255, 122, 61, .1) !important; }
.mdv-barra i { background: linear-gradient(90deg, transparent, #ff7a3d, transparent) !important; }
.md-iniciar.ativo { border-color: rgba(255, 122, 61, .6) !important; background: linear-gradient(90deg, rgba(255, 122, 61, .22), rgba(255, 122, 61, .08)) !important; color: #ffd2b5 !important; }
.md-iniciar.ativo .md-onda b { background: #ff7a3d !important; }
.md-todo li.md-fazendo { border-color: rgba(255, 122, 61, .35) !important; background: linear-gradient(90deg, rgba(255, 122, 61, .08), transparent 60%) !important; box-shadow: inset 3px 0 0 #ff7a3d !important; }

/* ---- ponto: pausa reuniao e pausa justificada ---- */
.ponto-pausas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ponto-pausa { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--painel-2); font-size: 11px; }
.ponto-pausa small { color: var(--apagado); font-size: 10px; }
.ponto-pausa strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.ponto-pausa.aberta { background: rgba(245, 185, 71, .14); color: #f5b947; }
.ponto-pausa.aberta small { color: inherit; opacity: .8; }
.ponto-pausa-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ponto-lateral .ponto-pausa-botoes button { font-size: 11.5px; padding: 6px 4px; min-height: 0; }
.ponto-lateral .ponto-voltar { border-color: rgba(245, 185, 71, .45); color: #f5b947; }

/* ---- ao vivo: o dono assiste o colega montando o post (aovivo.js) ---- */
.mdv-assistir { cursor: pointer; position: relative; }
.mdv-assistir:hover { background: rgba(255, 122, 61, .06); }
.mdv-assistir:focus-visible { outline: 2px solid #ff7a3d; outline-offset: 2px; }
.mdv-ver { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #ff7a3d; background: rgba(255, 122, 61, .12); border: 1px solid rgba(255, 122, 61, .3); white-space: nowrap; }
.mdv-ver i { width: 6px; height: 6px; border-radius: 50%; background: #ff4d1a; animation: av-pulso 1.4s ease-in-out infinite; }

.av-janela { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0 !important; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px; background: #0d1117; color: #f5f6f8; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
.av-janela:not([open]) { display: none; }
.av-janela::backdrop { background: rgba(3, 5, 9, .7); backdrop-filter: blur(3px); }
.av-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.av-rosto { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: #2b313d; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px #0d1117, 0 0 0 3.5px #ff7a3d; }
.av-rosto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-quem { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.av-quem strong { font-size: 15px; }
.av-quem small { color: #94a8ba; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-sinal { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #3fcf8e; background: rgba(63, 207, 142, .1); white-space: nowrap; }
.av-sinal i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: av-pulso 1.4s ease-in-out infinite; }
.av-sinal.digitando { color: #ff7a3d; background: rgba(255, 122, 61, .12); }
.av-sinal.parado { color: #94a8ba; background: rgba(255, 255, 255, .05); }
.av-sinal.parado i { animation: none; }
@keyframes av-pulso { 50% { opacity: .3; transform: scale(.8); } }
.av-fechar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .05); color: #c6d4e0; }
.av-fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.av-corpo { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
.av-espera { color: #94a8ba; text-align: center; padding: 40px 0; }
.av-vazio { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 16px; color: #94a8ba; }
.av-vazio svg { width: 40px; height: 40px; fill: none; stroke: #ff7a3d; stroke-width: 1.5; }
.av-vazio strong { color: #f5f6f8; font-size: 15px; }
.av-vazio p { margin: 0; max-width: 42ch; font-size: 13px; }
.av-grade { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.av-celular { border-radius: 26px; padding: 10px; background: #05070a; border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 4px #11151c; }
.av-cel-topo { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; }
.av-cel-topo strong { font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-cel-topo small { font-size: 10.5px; color: #94a8ba; }
.av-cel-avatar { width: 28px; height: 28px; font-size: 10px; flex: none; }
.av-cel-midia { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #161b22; display: grid; place-items: center; }
.av-cel-midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-cel-midia.vazia span { color: #6b7a8a; font-size: 12px; padding: 12px; text-align: center; overflow-wrap: anywhere; }
.av-cel-legenda { margin: 10px 4px 4px; font-size: 12.5px; line-height: 1.45; color: #dfe5ec; max-height: 140px; overflow: auto; overflow-wrap: anywhere; }
.av-campos { display: grid; gap: 10px; max-height: 64vh; overflow: auto; }
.av-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.av-pilula { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(255, 122, 61, .12); color: #ffb48a; }
.av-pilula.fraca { background: rgba(255, 255, 255, .05); color: #94a8ba; font-weight: 500; }
.av-campos label { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02);
  transition: border-color .2s, box-shadow .2s; }
.av-campos label.foco { border-color: rgba(255, 122, 61, .6); box-shadow: 0 0 0 3px rgba(255, 122, 61, .12); }
.av-campos small { font-size: 11px; color: #94a8ba; font-weight: 600; letter-spacing: .02em; }
.av-campos p { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.av-campos em { color: #4b5866; font-style: normal; }
.av-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: #ff7a3d;
  box-shadow: 0 0 8px rgba(255, 122, 61, .8); animation: av-pisca .9s steps(1) infinite; }
@keyframes av-pisca { 50% { opacity: 0; } }
@media (max-width: 767px) {
  .av-janela { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; border-radius: 16px; }
  .av-grade { grid-template-columns: minmax(0, 1fr); }
  .av-celular { max-width: 320px; width: 100%; justify-self: center; }
  .av-campos { max-height: none; }
  .av-sinal span { display: none; }
  .av-sinal { padding: 0 9px; }
}
.av-janela { width: min(980px, calc(100vw - 32px)) !important; max-width: none !important; }
.ponto-lateral .ponto-topo { flex-wrap: wrap; }
.ponto-lateral .ponto-topo .selo { white-space: normal; max-width: 100%; }
.ponto-lateral .ponto-pausa:not(:nth-last-child(-n+2)) { display: none; }

/* ---- Inicio unificado: a frase do topo e o bloco "O negocio" ---- */
.md-alerta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px;
  padding: 12px 16px; border-radius: 14px; background: var(--painel); border: 1px solid var(--linha);
  font-size: 14px; color: var(--apagado);
}
.md-alerta-ponto { width: 8px; height: 8px; border-radius: 50%; background: #ff8a8d; box-shadow: 0 0 0 4px rgba(255, 138, 141, .15); }
.md-alerta.em-dia .md-alerta-ponto { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .15); }
.md-alerta > i { font-style: normal; opacity: .5; }
.md-alerta button { background: none; border: 0; padding: 0; font: inherit; color: var(--texto, inherit); cursor: pointer; }
.md-alerta button:hover { text-decoration: underline; }
.md-alerta button b { color: #ff8a8d; }
.inicio-negocio { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linha); }
.inicio-negocio .cabeca-inicio h2 { font-size: 22px; }

/* ---- "O negocio" no Inicio: minimalista e futurista ----
   Tudo escopado em .inicio-negocio: as mesmas pecas da antiga Visao geral,
   com menos tinta. Sai o texto explicativo (fica no title do cartao), o
   titulo vira rotulo pequeno em caixa alta, o numero ganha o peso visual e
   as barras afinam com um brilho na ponta. */
.inicio-negocio {
  --ng-borda: rgba(255, 255, 255, .06);
  --ng-luz: rgba(255, 122, 61, .55);
  --ng-fundo: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .005));
}
.inicio-negocio .cabeca-inicio { margin-bottom: 14px; }
.inicio-negocio .cabeca-inicio h2 {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--apagado);
}
.inicio-negocio .cabeca-inicio p { display: none; }

.inicio-negocio .cartao,
.inicio-negocio .kpi {
  position: relative; background: var(--ng-fundo); border: 1px solid var(--ng-borda);
  border-radius: 16px; box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden; transition: border-color .25s ease;
}
/* o fio de luz no topo de cada cartao */
.inicio-negocio .cartao::before,
.inicio-negocio .kpi::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ng-luz), transparent); opacity: .5; pointer-events: none;
}
.inicio-negocio .cartao::after, .inicio-negocio .kpi::after { display: none; }
.inicio-negocio .cartao:hover, .inicio-negocio .kpi:hover { border-color: rgba(255, 122, 61, .22); }

.inicio-negocio .titulo-bloco h2,
.inicio-negocio .kpi h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); margin: 0;
}
.inicio-negocio .titulo-bloco p,
.inicio-negocio .kpi-rodape .apagado { display: none; }

.inicio-negocio .numero-grande,
.inicio-negocio .kpi strong,
.inicio-negocio .kpi .valor {
  font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.inicio-negocio .numero-grande small {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; opacity: .6;
}

/* grafico: guias quase invisiveis, eixo discreto, barras finas com brilho */
.inicio-negocio .linhas-guia i { border-color: rgba(255, 255, 255, .04) !important; border-style: solid !important; }
.inicio-negocio .eixo-y span,
.inicio-negocio .marca-mes { font-size: 10px; opacity: .45; font-variant-numeric: tabular-nums; }
.inicio-negocio .pilha { gap: 3px; }
.inicio-negocio .barra { max-width: 6px; border-radius: 6px 6px 2px 2px; }
.inicio-negocio .barra:not(.vazia) { box-shadow: 0 0 14px -2px currentColor; }
.inicio-negocio .legenda-grafico { font-size: 11px; opacity: .6; gap: 14px; }
.inicio-negocio .legenda-grafico i { width: 6px; height: 6px; border-radius: 50%; }
.inicio-negocio .lista-etapas li { border-color: var(--ng-borda); font-size: 13px; }
.inicio-negocio .lista-etapas b { font-weight: 300; font-size: 16px; font-variant-numeric: tabular-nums; }

/* Producao por etapa ao lado do Em andamento, na parte de cima do Inicio */
.md-grade:has(#cartao-etapas) .md-saindo { grid-column: 1; }
.md-grade > #cartao-etapas { grid-column: 2; margin: 0; }
@media (max-width: 900px) { .md-grade > #cartao-etapas { grid-column: 1; } }

/* Detalhes da tarefa */
.md-todo li[data-tarefa] { cursor: pointer; }
.md-todo li[data-tarefa]:hover strong { color: var(--md-laranja, #ff7a3d); }
.md-detalhe textarea { border-radius: 12px; resize: vertical; min-height: 110px; font: inherit; }
.md-detalhe-estado { display: flex; gap: 8px; align-items: center; }
.md-detalhe-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.md-detalhe input[type="datetime-local"] { height: 40px; border-radius: 10px; }
.md-detalhe .te-pe { display: flex; gap: 8px; align-items: center; }
.md-detalhe .te-pe .empurra { flex: 1; }

/* ---- Chips da equipe: foto, ponto de status e "produzindo..." ---- */
button.md-pessoa { gap: 9px; padding: 5px 14px 5px 5px; transition: border-color .2s ease, background .2s ease, box-shadow .3s ease; }
button.md-pessoa:first-child { padding: 0 16px; }
.md-pessoa-rosto { position: relative; width: 28px; height: 28px; overflow: visible; }
.md-pessoa-rosto img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.md-pessoa-ponto { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: #4b5563; box-shadow: 0 0 0 2px #11151c; }
.md-pessoa-nome { display: grid; line-height: 1.15; text-align: left; }
.md-pessoa-nome b { font-weight: 600; }
.md-pessoa-digita { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: #ffb48a; }
.md-pessoa-digita i { display: inline-flex; gap: 2px; margin-left: 1px; }
.md-pessoa-digita i b { width: 3px; height: 3px; border-radius: 50%; background: #ff7a3d; animation: mdv-pula 1.2s ease-in-out infinite; }
.md-pessoa-digita i b:nth-child(2) { animation-delay: .15s; } .md-pessoa-digita i b:nth-child(3) { animation-delay: .3s; }
button.md-pessoa.produzindo { border-color: rgba(255, 122, 61, .35); box-shadow: 0 0 18px -6px rgba(255, 122, 61, .55); }
button.md-pessoa.produzindo .md-pessoa-ponto { background: #ff7a3d; animation: md-pessoa-pulso 1.6s ease-out infinite; }
@keyframes md-pessoa-pulso {
  0% { box-shadow: 0 0 0 2px #11151c, 0 0 0 2px rgba(255, 122, 61, .6); }
  100% { box-shadow: 0 0 0 2px #11151c, 0 0 0 8px rgba(255, 122, 61, 0); }
}

/* ---- Caixa de check das tarefas ---- */
button.md-check {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .02); color: transparent; position: relative;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
button.md-check svg { width: 13px; height: 13px; stroke-width: 3; transform: scale(.6); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
button.md-check:hover { border-color: #34d399; color: rgba(52, 211, 153, .7); background: rgba(52, 211, 153, .08); }
button.md-check:hover svg { transform: scale(1); }
button.md-check:active { transform: scale(.9); }
.md-todo li.feita button.md-check { background: #34d399; border-color: #34d399; color: #0b1410; box-shadow: 0 0 16px -2px rgba(52, 211, 153, .7); }
.md-todo li.feita button.md-check svg { transform: scale(1); }
.md-todo li.feita .md-todo-texto strong { text-decoration: line-through; opacity: .5; transition: opacity .3s ease; }

/* ---- Botao Iniciar / Pausar ---- */
.md-iniciar.ativo { gap: 8px; padding: 0 4px 0 12px !important; height: 30px; }
.md-iniciar.ativo span {
  display: inline-flex !important; align-items: center; gap: 5px; height: 22px; padding: 0 10px; margin: 0;
  border-radius: 99px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75); font-size: 11.5px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.md-iniciar.ativo span::before {
  content: ""; width: 8px; height: 9px;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}
.md-iniciar.ativo:hover span { background: rgba(255, 255, 255, .92); color: #11151c; }

/* ---- Em andamento: tarefas paradas hoje ---- */
.mdv-parada { opacity: .72; }
.mdv-parada:hover { opacity: 1; }
.mdv-selo {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 0 0 2px #11151c;
}
.mdv-selo svg { width: 10px; height: 10px; fill: none; stroke: #11151c; stroke-width: 3.2; stroke-linecap: round; }
.mdv-pausada .mdv-selo { background: #fbbf24; }
.mdv-concluida .mdv-selo { background: #34d399; }
.mdv-situacao { font-size: 12.5px; color: var(--apagado); }
.mdv-situacao b { color: var(--texto); font-weight: 600; }
.mdv-pilula { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; letter-spacing: .02em; }
.mdv-pausada .mdv-pilula { color: #fcd34d; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .3); }
.mdv-concluida .mdv-pilula { color: #6ee7b7; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); }
.mdv-concluida strong { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
@media (prefers-reduced-motion: reduce) { .md-pessoa-digita i b, button.md-pessoa.produzindo .md-pessoa-ponto { animation: none !important; } }

/* Retomar: a tarefa ja foi iniciada antes e esta pausada */
.md-iniciar.retomar { border-color: rgba(251, 191, 36, .4) !important; background: rgba(251, 191, 36, .1) !important; color: #fcd34d !important; }
.md-iniciar.retomar:hover { background: rgba(251, 191, 36, .2) !important; }

/* o check no centro exato do circulo */
button.md-check { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; line-height: 0; flex: none; }
button.md-check svg { display: block; margin: 0; }

/* ---------------- avisos premium ----------------
   Posicao: canto inferior direito no desktop (nao cobre sino, avatar nem
   filtros do topo); topo centralizado no celular (embaixo fica o polegar).
   A pilha e popover (ver avisar() em app.js) para passar por cima de dialog.

   Cada aviso: vidro escuro, fio de luz da cor do tipo no topo, halo saindo
   do icone, titulo + hora + texto, e a barra de tempo embaixo. Os mais
   antigos recuam um pouco; com o mouse na pilha, todos voltam ao normal. */
#avisos-pilha,
#avisos-pilha[popover] {
  position: fixed; inset: auto 20px 20px auto; z-index: 2147483000;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  width: min(400px, calc(100vw - 32px)); max-width: none; pointer-events: none;
}
#avisos-pilha[popover]:not(:popover-open) { display: none; }
#avisos-pilha > * { pointer-events: auto; }

#avisos-pilha .aviso-flutua {
  --cor: #ff7a3d; --cor-rgb: 255, 122, 61;
  position: relative; overflow: hidden; isolation: isolate; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 13px;
  margin: 0; padding: 14px 12px 16px 14px; border-radius: 16px; border: 0;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(var(--cor-rgb), .16), transparent 60%),
    linear-gradient(180deg, rgba(30, 34, 45, .9), rgba(15, 18, 25, .94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 24px 48px -16px rgba(0, 0, 0, .7),
    0 8px 16px -8px rgba(0, 0, 0, .5),
    0 0 40px -18px rgba(var(--cor-rgb), .55);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  color: #f3f4f6; font-size: 13.5px; line-height: 1.45; letter-spacing: -.005em;
  transform-origin: bottom right;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1), opacity .35s ease, filter .35s ease;
  animation: aviso-mola .6s cubic-bezier(.2, 1.3, .35, 1) both;
}
/* o fio de luz no topo */
#avisos-pilha .aviso-flutua::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 40%; height: 1px; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--cor-rgb), .9), transparent);
}
/* textura de ruido quase invisivel: tira o "chapado" do vidro */
#avisos-pilha .aviso-flutua::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#avisos-pilha .aviso-flutua.bom { --cor: #34d399; --cor-rgb: 52, 211, 153; }
#avisos-pilha .aviso-flutua.ruim { --cor: #f87171; --cor-rgb: 248, 113, 113; }
#avisos-pilha .aviso-flutua.info { --cor: #60a5fa; --cor-rgb: 96, 165, 250; }

/* os antigos recuam; com o mouse na pilha, todos voltam */
#avisos-pilha .aviso-flutua:not(:last-child):not(.saindo) { transform: scale(.97); opacity: .78; filter: saturate(.8); }
#avisos-pilha .aviso-flutua:nth-last-child(n+3):not(.saindo) { transform: scale(.94); opacity: .55; }
#avisos-pilha:hover .aviso-flutua:not(.saindo) { transform: none; opacity: 1; filter: none; }

/* icone: quadrado de vidro + anel que pulsa uma vez ao chegar */
.aviso-icone {
  position: relative; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--cor);
  background: linear-gradient(180deg, rgba(var(--cor-rgb), .22), rgba(var(--cor-rgb), .08));
  box-shadow: inset 0 0 0 1px rgba(var(--cor-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 22px -6px rgba(var(--cor-rgb), .9);
}
.aviso-icone::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid rgba(var(--cor-rgb), .7);
  animation: aviso-anel 1s .15s ease-out both;
}
.aviso-icone svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aviso-flutua.bom .aviso-icone path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: aviso-traco .45s .2s ease-out forwards; }
.aviso-flutua.ruim .aviso-icone svg { animation: aviso-treme .45s .15s ease-in-out; }

.aviso-corpo { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.aviso-cabeca { display: flex; align-items: baseline; gap: 8px; }
.aviso-cabeca strong { font-size: 13.5px; font-weight: 650; color: #fff; letter-spacing: -.01em; }
.aviso-cabeca time { font-size: 11px; color: rgba(255, 255, 255, .35); font-variant-numeric: tabular-nums; }
.aviso-texto { color: rgba(229, 231, 235, .78); font-size: 13px; overflow-wrap: anywhere; }

#avisos-pilha .aviso-flutua button.aviso-fechar {
  width: 26px; height: 26px; padding: 0; margin: -2px -2px 0 0; border-radius: 8px; display: grid; place-items: center;
  background: transparent; border: 0; box-shadow: none; color: rgba(255, 255, 255, .35);
  opacity: 0; transition: opacity .2s ease, background .15s ease, color .15s ease;
}
#avisos-pilha .aviso-flutua:hover button.aviso-fechar,
#avisos-pilha .aviso-flutua button.aviso-fechar:focus-visible { opacity: 1; }
#avisos-pilha .aviso-flutua button.aviso-fechar:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: none; }
.aviso-fechar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* barra de tempo: trilho apagado + a parte que falta, com brilho na ponta */
.aviso-tempo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left;
  background: linear-gradient(90deg, rgba(var(--cor-rgb), .15), rgba(var(--cor-rgb), .95));
  box-shadow: 0 0 12px rgba(var(--cor-rgb), .8);
  animation: aviso-tempo var(--dura, 6s) linear forwards;
}
#avisos-pilha .aviso-flutua.parado .aviso-tempo { animation-play-state: paused; }
#avisos-pilha .aviso-flutua.saindo { animation: aviso-some .3s cubic-bezier(.4, 0, 1, 1) forwards; }

@keyframes aviso-mola {
  0% { opacity: 0; transform: translateY(14px) scale(.92); filter: blur(6px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes aviso-some { to { opacity: 0; transform: translateX(24px) scale(.95); filter: blur(4px); } }
@keyframes aviso-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes aviso-traco { to { stroke-dashoffset: 0; } }
@keyframes aviso-anel { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes aviso-treme { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }
@keyframes aviso-mola-cel {
  0% { opacity: 0; transform: translateY(-14px) scale(.94); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes aviso-some-cel { to { opacity: 0; transform: translateY(-16px) scale(.96); filter: blur(4px); } }

/* celular: no topo, centralizado, o mais novo em cima */
@media (max-width: 640px) {
  #avisos-pilha,
  #avisos-pilha[popover] { inset: 12px 12px auto 12px; width: auto; align-items: stretch; flex-direction: column-reverse; }
  #avisos-pilha .aviso-flutua { transform-origin: top center; animation-name: aviso-mola-cel; }
  #avisos-pilha .aviso-flutua.saindo { animation-name: aviso-some-cel; }
  #avisos-pilha .aviso-flutua button.aviso-fechar { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #avisos-pilha .aviso-flutua, #avisos-pilha .aviso-flutua.saindo, .aviso-icone::after, .aviso-icone svg,
  .aviso-flutua.bom .aviso-icone path { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---- Frase do topo vira fileira de chips ----
   Cada pendencia e um chip proprio, com a cor do que ela e: atrasada em
   vermelho, ajuste em ambar, em andamento em laranja. O ponto da esquerda
   some (a cor ja esta em cada chip) e os separadores tambem. */
.md-alerta { padding: 0; background: none; border: 0; gap: 8px; }
.md-alerta-ponto, .md-alerta > i { display: none; }
.md-alerta.em-dia {
  padding: 7px 14px 7px 10px; border-radius: 999px; gap: 8px; width: fit-content;
  background: linear-gradient(180deg, rgba(52, 211, 153, .12), rgba(52, 211, 153, .04));
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .25); color: #a7f3d0; font-size: 13px; font-weight: 500;
}
.md-alerta.em-dia .md-alerta-ponto { display: block; width: 7px; height: 7px; background: #34d399; box-shadow: 0 0 10px #34d399; }

.md-alerta button[data-rolar] {
  --c: 255, 122, 61;
  position: relative; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 10px;
  border-radius: 999px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); text-decoration: none !important;
  background: linear-gradient(180deg, rgba(var(--c), .13), rgba(var(--c), .04)), rgba(17, 21, 28, .6);
  box-shadow: inset 0 0 0 1px rgba(var(--c), .28), inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px -10px rgba(var(--c), .7);
  backdrop-filter: blur(10px); transition: transform .18s ease, box-shadow .2s ease;
}
.md-alerta button[data-rolar="md-tarefas-bloco"] { --c: 248, 113, 113; }
.md-alerta button[data-rolar="md-demandas-bloco"] { --c: 251, 191, 36; }
.md-alerta button[data-rolar]:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(var(--c), .5), inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px -10px rgba(var(--c), .9);
}
/* o numero vira um selo com ponto pulsando atras */
.md-alerta button[data-rolar] b {
  position: relative; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff !important;
  background: rgb(var(--c)); box-shadow: 0 0 12px rgba(var(--c), .7);
}
.md-alerta button[data-rolar] b::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(var(--c), .6);
  animation: md-chip-ping 2s ease-out infinite;
}
@keyframes md-chip-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--c), .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--c), 0); } }

/* ---- Selo "ao vivo" ---- */
.md-ao-vivo {
  gap: 7px; height: 22px; padding: 0 10px 0 8px; margin-left: 10px;
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffb4b6;
  background: linear-gradient(180deg, rgba(229, 72, 77, .2), rgba(229, 72, 77, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 107, 112, .35), 0 0 16px -6px rgba(229, 72, 77, .8);
}
.md-ao-vivo i {
  position: relative; width: 6px; height: 6px; background: #ff5a5f; box-shadow: 0 0 8px #ff5a5f; animation: none;
}
.md-ao-vivo i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(255, 90, 95, .7);
  animation: md-vivo-anel 1.6s ease-out infinite;
}
@keyframes md-vivo-anel { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .md-ao-vivo i::after, .md-alerta button[data-rolar] b::after { animation: none; }
}

/* Em andamento: card de tarefa abre os detalhes */
.mdv[data-detalhe-tarefa] { cursor: pointer; }
.mdv[data-detalhe-tarefa]:focus-visible { outline: 2px solid rgba(255, 122, 61, .6); outline-offset: 2px; }
.md-pilula-feita { color: #6ee7b7; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); }
.md-pilula-pausa { color: #fcd34d; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .3); }

/* Nova tarefa: campo de detalhes */
.md-nova-detalhe {
  flex: 1 1 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: box-shadow .2s ease, background .2s ease;
}
.md-nova-detalhe:focus-within { background: rgba(255, 122, 61, .04); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .4), 0 0 0 3px rgba(255, 122, 61, .1); }
.md-nova-detalhe svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--apagado); stroke-width: 2; stroke-linecap: round; }
.md-nova-detalhe:focus-within svg { stroke: #ff7a3d; }
.md-nova-detalhe textarea {
  flex: 1; min-height: 44px; max-height: 220px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  outline: none; resize: none; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--texto);
}
.md-nova-detalhe textarea::placeholder { color: var(--apagado); opacity: .8; }

/* ---------------- Demandas e Tarefas: acabamento premium ----------------
   Os dois blocos de cima do Inicio. Vidro escuro com fio de luz da cor do
   bloco no topo, cabecalho com icone em relevo, filtros em trilho com a
   pilula ativa deslizando, linhas de tarefa como cartoes que acendem no
   hover, e o prazo sai da fonte pixelada para a do sistema. */
.md-demandas, .md-tarefas { --bc: 255, 122, 61; }
.md-tarefas { --bc: 52, 211, 153; }

.md-bloco.md-demandas, .md-bloco.md-tarefas {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 22px 22px 20px; border-radius: 22px; border: 0;
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(var(--bc), .07), transparent 70%),
    linear-gradient(180deg, rgba(24, 28, 37, .92), rgba(14, 17, 23, .96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 60px -30px rgba(0, 0, 0, .8);
}
.md-bloco.md-demandas::before, .md-bloco.md-tarefas::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(var(--bc), .7), transparent);
}

/* cabecalho */
.md-demandas > header, .md-tarefas > header { gap: 14px; margin-bottom: 18px; }
.md-demandas .md-bloco-icone, .md-tarefas .md-bloco-icone {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: rgb(var(--bc));
  background: linear-gradient(180deg, rgba(var(--bc), .2), rgba(var(--bc), .06));
  box-shadow: inset 0 0 0 1px rgba(var(--bc), .3), inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px -8px rgba(var(--bc), .6);
}
.md-demandas h3, .md-tarefas h3 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.md-demandas .md-sub, .md-tarefas .md-sub { font-size: 12.5px; color: rgba(255, 255, 255, .45); margin-top: 2px; }
.md-demandas .md-conta, .md-tarefas .md-conta {
  min-width: 30px; height: 26px; padding: 0 10px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85);
}

/* filtros das demandas: trilho + pilula ativa */
.md-dem-filtros { gap: 8px; margin-bottom: 14px; }
.md-dem-periodo {
  padding: 3px; border-radius: 12px; border: 0; gap: 2px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .35);
}
.md-dem-periodo button {
  height: 30px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .5);
  background: transparent; border: 0; box-shadow: none; transition: color .15s ease, background .2s ease, box-shadow .2s ease;
}
.md-dem-periodo button:hover { color: rgba(255, 255, 255, .85); transform: none; }
.md-dem-periodo button.ativo {
  color: #fff; background: linear-gradient(180deg, #ff8a4c, #f0601f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px -4px rgba(255, 106, 40, .8);
}
select.md-dem-cliente {
  height: 36px; border-radius: 11px; font-size: 12.5px; font-weight: 600;
  background-color: rgba(0, 0, 0, .28); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
select.md-dem-cliente:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }

/* estado vazio com icone */
.md-vazio-rico {
  display: grid; justify-items: center; gap: 4px; padding: 26px 18px; border: 0; border-radius: 16px;
  background: radial-gradient(60% 80% at 50% 0%, rgba(var(--bc, 255, 122, 61), .06), transparent 70%), rgba(255, 255, 255, .015);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.md-vazio-rico strong { color: rgba(255, 255, 255, .85); font-size: 13.5px; font-weight: 600; }
.md-vazio-rico > span:last-child { color: rgba(255, 255, 255, .4); font-size: 12.5px; }
.md-vazio-icone {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  color: #34d399; background: rgba(52, 211, 153, .1); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .25), 0 0 20px -6px rgba(52, 211, 153, .6);
}
.md-vazio-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* nova tarefa: campo de vidro, sem a caixa interna escura */
.md-tarefas .md-nova {
  border: 0; border-radius: 14px; background: rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 2px 8px rgba(0, 0, 0, .3);
}
.md-tarefas .md-nova:focus-within, .md-tarefas .md-nova.aberto {
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .45), 0 0 0 4px rgba(255, 122, 61, .08), 0 12px 30px -14px rgba(255, 122, 61, .5);
}
.md-tarefas .md-nova-linha input,
.md-tarefas .md-nova-linha input:focus { background: transparent !important; box-shadow: none !important; border: 0 !important; font-size: 14px; }
.md-tarefas .md-nova-mais { color: #ff7a3d; }

/* linha de tarefa */
.md-tarefas .md-todo { display: grid; gap: 8px; }
.md-tarefas .md-todo li:not(.md-vazio) {
  position: relative; padding: 13px 14px; border: 0; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: background .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2, .9, .3, 1);
}
.md-tarefas .md-todo li:not(.md-vazio):hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 24px -16px rgba(0, 0, 0, .9);
}
.md-tarefas .md-todo li.md-fazendo {
  background: linear-gradient(90deg, rgba(255, 122, 61, .1), rgba(255, 122, 61, .02) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .3), 0 0 30px -16px rgba(255, 122, 61, .8);
}
.md-tarefas .md-todo li.md-fazendo::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #ffb07a, #ff6a28); box-shadow: 0 0 10px rgba(255, 106, 40, .8);
}
.md-tarefas .md-todo-texto strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.md-tarefas .md-todo-tags { gap: 6px; margin-top: 6px; }
.md-tarefas .md-tag {
  height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.md-tarefas .md-tag.pessoal { color: #c4b5fd; background: rgba(139, 92, 246, .12); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .28); }
.md-tarefas .md-tag.gente { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .04); }
.md-tarefas .md-todo-lado { gap: 8px; }

/* prazo: fonte do sistema, pilula de vidro com ponto */
.md-bloco .prazo-conta {
  font-family: inherit !important; font-size: 11.5px; font-weight: 600; letter-spacing: 0; height: 24px; padding: 0 10px 0 8px;
  border-radius: 999px; border: 0 !important; gap: 6px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px currentColor, inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.md-bloco .prazo-conta svg { width: 12px; height: 12px; }
.md-bloco .prazo-conta.atrasada {
  color: #fca5a5; background: linear-gradient(180deg, rgba(248, 113, 113, .18), rgba(248, 113, 113, .06));
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .45), 0 0 16px -6px rgba(248, 113, 113, .8) !important;
}
.md-bloco .prazo-conta.hoje { box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .45) !important; }
.md-bloco .prazo-conta.perto { box-shadow: inset 0 0 0 1px rgba(255, 180, 60, .4) !important; }
.md-bloco .prazo-conta.folga { box-shadow: inset 0 0 0 1px rgba(60, 200, 120, .35) !important; }

/* ---------------- Em andamento e Producao por etapa: o mesmo acabamento ---------------- */
.md-saindo { --bc: 96, 165, 250; }
.md-grade > #cartao-etapas { --bc: 255, 122, 61; }

.md-bloco.md-saindo,
.md-grade > #cartao-etapas {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 22px 22px 20px; border-radius: 22px; border: 0;
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(var(--bc), .07), transparent 70%),
    linear-gradient(180deg, rgba(24, 28, 37, .92), rgba(14, 17, 23, .96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 60px -30px rgba(0, 0, 0, .8);
}
.md-bloco.md-saindo::before,
.md-grade > #cartao-etapas::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(var(--bc), .7), transparent);
}
.md-grade > #cartao-etapas::after { display: none; }

/* cabecalho do Em andamento, igual aos de cima */
.md-saindo > header { gap: 14px; margin-bottom: 18px; }
.md-saindo .md-bloco-icone {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: rgb(var(--bc));
  background: linear-gradient(180deg, rgba(var(--bc), .2), rgba(var(--bc), .06));
  box-shadow: inset 0 0 0 1px rgba(var(--bc), .3), inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px -8px rgba(var(--bc), .6);
}
.md-saindo h3 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; display: flex; align-items: center; }
.md-saindo .md-sub { font-size: 12.5px; color: rgba(255, 255, 255, .45); margin-top: 2px; }
.md-saindo .md-conta {
  min-width: 30px; height: 26px; padding: 0 10px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85);
}

/* cards do Em andamento: vidro, borda fina da cor do estado */
.md-saindo .mdv {
  --mc: 255, 122, 61;
  border: 0; border-radius: 16px; padding: 14px 16px 16px;
  background: linear-gradient(120deg, rgba(var(--mc), .1), rgba(255, 255, 255, .015) 55%);
  box-shadow: inset 0 0 0 1px rgba(var(--mc), .22), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1), box-shadow .2s ease, opacity .2s ease;
}
.md-saindo .mdv:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(var(--mc), .45), inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 30px -18px rgba(var(--mc), .7);
}
.md-saindo .mdv.mdv-concluida { --mc: 52, 211, 153; }
.md-saindo .mdv.mdv-pausada { --mc: 251, 191, 36; }
.md-saindo .mdv.mdv-parada { opacity: .85; }
.md-saindo .mdv.mdv-parada:hover { opacity: 1; }
.md-saindo .mdv strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.md-saindo .mdv-situacao { font-size: 12.5px; }
.md-saindo .mdv small { color: rgba(255, 255, 255, .4); }
.md-saindo .mdv-pilula { height: 22px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 11px; }
.md-saindo .md-vazio {
  display: grid; place-items: center; padding: 26px 18px; border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, .015); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .45);
}

/* Producao por etapa */
#cartao-etapas .titulo-bloco h2 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
#cartao-etapas .titulo-bloco p { font-size: 12.5px; color: rgba(255, 255, 255, .45); }
#cartao-etapas .corpo-rosca { gap: 26px; align-items: center; }
#cartao-etapas .rosca { filter: drop-shadow(0 0 18px rgba(255, 122, 61, .25)); }
#cartao-etapas .rosca circle { stroke-width: 8; stroke-linecap: round; }
#cartao-etapas .rosca .trilho { stroke: rgba(255, 255, 255, .06); }
#cartao-etapas .miolo strong, #cartao-etapas .miolo b { font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#cartao-etapas .miolo small, #cartao-etapas .miolo span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
#cartao-etapas .lista-etapas { display: grid; gap: 6px; flex: 1; }
#cartao-etapas .lista-etapas li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0 !important; border-radius: 11px;
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  font-size: 13px; color: rgba(255, 255, 255, .75); transition: background .2s ease;
}
#cartao-etapas .lista-etapas li:hover { background: rgba(255, 255, 255, .045); }
#cartao-etapas .lista-etapas li span { flex: 1; }
#cartao-etapas .lista-etapas li i { width: 8px; height: 8px; border-radius: 50%; }
#cartao-etapas .lista-etapas li i.roxo { box-shadow: 0 0 10px var(--serie-4); }
#cartao-etapas .lista-etapas li i.laranja { box-shadow: 0 0 10px var(--destaque); }
#cartao-etapas .lista-etapas li i.vermelho { box-shadow: 0 0 10px var(--alerta); }
#cartao-etapas .lista-etapas li b { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: #fff; }

/* ---------------- Cartao Producao: entregas + fluxo ---------------- */
#cartao-etapas { --pe-roxo: #a78bfa; --pe-laranja: #ff7a3d; --pe-vermelho: #f87171; --pe-azul: #60a5fa; --pe-verde: #34d399; }
#cartao-etapas .cabeca-bloco { margin-bottom: 16px; }

/* as tres entregas: o primeiro em destaque */
.pe-entregas { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.pe-entrega {
  display: grid; gap: 2px; padding: 12px 12px 11px; border-radius: 13px;
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.pe-entrega b { font-size: 24px; font-weight: 300; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.pe-entrega span { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.pe-entrega.destaque {
  background: linear-gradient(160deg, rgba(52, 211, 153, .16), rgba(52, 211, 153, .03) 70%);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .3), 0 10px 26px -16px rgba(52, 211, 153, .8);
}
.pe-entrega.destaque b { font-size: 30px; color: #6ee7b7; text-shadow: 0 0 22px rgba(52, 211, 153, .45); }
.pe-entrega.destaque span { color: rgba(167, 243, 208, .7); }

/* o fluxo: rotulo, barra segmentada e a lista */
.pe-fluxo-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pe-fluxo-topo span { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.pe-fluxo-topo b { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.pe-barra {
  display: flex; gap: 3px; height: 8px; margin-bottom: 14px; padding: 2px; border-radius: 99px;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.pe-barra i { display: block; min-width: 6px; border-radius: 99px; transform-origin: left; animation: pe-cresce .7s cubic-bezier(.2, .9, .3, 1) both; }
.pe-barra i.vazio { flex: 1; background: rgba(255, 255, 255, .05); animation: none; }
.pe-barra i.roxo { background: var(--pe-roxo); box-shadow: 0 0 10px rgba(167, 139, 250, .6); }
.pe-barra i.laranja { background: var(--pe-laranja); box-shadow: 0 0 10px rgba(255, 122, 61, .6); }
.pe-barra i.vermelho { background: var(--pe-vermelho); box-shadow: 0 0 10px rgba(248, 113, 113, .6); }
.pe-barra i.azul { background: var(--pe-azul); box-shadow: 0 0 10px rgba(96, 165, 250, .6); }
.pe-barra i.verde { background: var(--pe-verde); box-shadow: 0 0 10px rgba(52, 211, 153, .6); }
@keyframes pe-cresce { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

#cartao-etapas .pe-lista { gap: 4px; }
#cartao-etapas .pe-lista li { padding: 8px 11px; }
#cartao-etapas .pe-lista li.zerada { opacity: .5; }
#cartao-etapas .pe-lista li.zerada b { color: rgba(255, 255, 255, .6); }
#cartao-etapas .pe-lista li em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .38); font-variant-numeric: tabular-nums; margin-right: 4px; }
#cartao-etapas .pe-lista li i.roxo { background: var(--pe-roxo); box-shadow: 0 0 10px rgba(167, 139, 250, .7); }
#cartao-etapas .pe-lista li i.laranja { background: var(--pe-laranja); box-shadow: 0 0 10px rgba(255, 122, 61, .7); }
#cartao-etapas .pe-lista li i.vermelho { background: var(--pe-vermelho); box-shadow: 0 0 10px rgba(248, 113, 113, .7); }
#cartao-etapas .pe-lista li i.azul { background: var(--pe-azul); box-shadow: 0 0 10px rgba(96, 165, 250, .7); }
#cartao-etapas .pe-lista li i.verde { background: var(--pe-verde); box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
@media (prefers-reduced-motion: reduce) { .pe-barra i { animation: none; } }

/* ---------------- Producao v2: rosca + etapas, e os grupos Publicacoes / Tarefas ---------------- */
#cartao-etapas .rosca .arco.roxo { stroke: var(--pe-roxo); }
#cartao-etapas .rosca .arco.laranja { stroke: var(--pe-laranja); }
#cartao-etapas .rosca .arco.vermelho { stroke: var(--pe-vermelho); }
#cartao-etapas .rosca .arco.azul { stroke: var(--pe-azul); }
#cartao-etapas .rosca .arco.verde { stroke: var(--pe-verde); }
#cartao-etapas .pe-corpo { display: flex; gap: 22px; align-items: center; margin-bottom: 18px; }
#cartao-etapas .pe-corpo .rosca { width: 128px; height: 128px; flex: none; }
#cartao-etapas .pe-lista { flex: 1; min-width: 0; gap: 4px; }
#cartao-etapas .pe-lista li { padding: 7px 10px; font-size: 12.5px; }
#cartao-etapas .pe-lista li::before, #cartao-etapas .pe-lista li::after { display: none !important; }

.pe-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
.pe-grupo {
  --gc: 52, 211, 153;
  position: relative; overflow: hidden; display: grid; gap: 6px; padding: 13px 14px 12px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--gc), .1), rgba(255, 255, 255, .012) 65%);
  box-shadow: inset 0 0 0 1px rgba(var(--gc), .2), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pe-grupo.publicacoes { --gc: 96, 165, 250; }
.pe-grupo.tarefas { --gc: 52, 211, 153; }
.pe-grupo header {
  display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.pe-grupo-icone {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: rgb(var(--gc));
  background: rgba(var(--gc), .14); box-shadow: inset 0 0 0 1px rgba(var(--gc), .3);
}
.pe-grupo-icone svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pe-grupo-numero { display: flex; align-items: baseline; gap: 7px; }
.pe-grupo-numero b {
  font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 22px rgba(var(--gc), .45);
}
.pe-grupo-numero span { font-size: 12px; color: rgba(255, 255, 255, .5); }
.pe-grupo p { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .42); }
.pe-grupo p b { color: rgba(255, 255, 255, .8); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  #cartao-etapas .pe-corpo { flex-direction: column; align-items: stretch; }
  #cartao-etapas .pe-corpo .rosca { align-self: center; }
}

/* ---------------- Aviso de nova versao: premium ---------------- */
.nova-versao {
  position: fixed; left: 50%; bottom: 24px; z-index: 2147482000; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 12px 12px 14px; border-radius: 18px; border: 0; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(255, 122, 61, .18), transparent 60%),
    linear-gradient(180deg, rgba(30, 34, 45, .92), rgba(15, 18, 25, .95));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 30px 60px -20px rgba(0, 0, 0, .8),
    0 0 50px -20px rgba(255, 122, 61, .6);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  color: #f3f4f6; font-size: 13.5px; font-weight: 500;
  animation: nv-entra .6s cubic-bezier(.2, 1.3, .35, 1) both;
}
/* brilho que atravessa o cartao de tempos em tempos */
.nova-versao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 50%, transparent 65%);
  transform: translateX(-100%); animation: nv-brilho 4s 1s ease-in-out infinite;
}
/* fio de luz no topo */
.nova-versao::after {
  content: ""; position: absolute; top: 0; left: 16px; right: 50%; height: 1px; z-index: -1;
  background: linear-gradient(90deg, rgba(255, 122, 61, .9), transparent);
}
.nova-versao.saindo { animation: nv-sai .28s cubic-bezier(.4, 0, 1, 1) forwards; }

.nv-icone {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #ffb07a;
  background: linear-gradient(180deg, rgba(255, 122, 61, .28), rgba(255, 122, 61, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .4), inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 24px -6px rgba(255, 122, 61, .9);
}
.nv-icone svg { width: 19px; height: 19px; fill: currentColor; animation: nv-pisca 2.4s ease-in-out infinite; }
.nv-texto { display: grid; gap: 1px; min-width: 0; }
.nv-texto strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.nv-texto small { font-size: 12.5px; color: rgba(229, 231, 235, .6); }
.nv-acoes { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.nova-versao button {
  height: 36px; margin: 0; padding: 0 14px; border-radius: 11px; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.nova-versao .nv-depois { background: transparent; color: rgba(255, 255, 255, .55); box-shadow: none; }
.nova-versao .nv-depois:hover { background: rgba(255, 255, 255, .06); color: #fff; transform: none; }
.nova-versao .nv-atualizar {
  color: #fff; background: linear-gradient(180deg, #ff8a4c, #f0601f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 18px -6px rgba(255, 106, 40, .9);
}
.nova-versao .nv-atualizar:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -6px rgba(255, 106, 40, 1); }
.nv-atualizar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nv-atualizar.girando svg { animation: nv-gira .6s linear infinite; }

@keyframes nv-entra {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(.94); filter: blur(6px); }
  100% { opacity: 1; transform: translate(-50%, 0); filter: none; }
}
@keyframes nv-sai { to { opacity: 0; transform: translate(-50%, 16px) scale(.96); filter: blur(4px); } }
@keyframes nv-brilho { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes nv-pisca { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.88) rotate(12deg); opacity: .8; } }
@keyframes nv-gira { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .nova-versao { flex-wrap: wrap; bottom: 12px; width: calc(100vw - 24px); }
  .nv-acoes { margin-left: auto; width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .nova-versao, .nova-versao::before, .nv-icone svg { animation: none !important; }
}

/* ---- Chips da equipe: hover ----
   O chip sobe e acende, a foto cresce dentro de um anel em degrade que gira,
   e um brilho atravessa o chip uma vez. Clicar afunda de leve. */
.md-pessoas button.md-pessoa {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), border-color .2s ease, background .2s ease, box-shadow .25s ease, color .2s ease;
}
.md-pessoas button.md-pessoa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .1) 50%, transparent 70%);
  transform: translateX(-120%);
}
.md-pessoas button.md-pessoa:hover {
  transform: translateY(-2px); color: #fff;
  border-color: rgba(255, 122, 61, .45);
  background: linear-gradient(180deg, rgba(255, 122, 61, .1), rgba(255, 122, 61, .03));
  box-shadow: 0 10px 24px -12px rgba(255, 122, 61, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.md-pessoas button.md-pessoa:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.md-pessoas button.md-pessoa:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

.md-pessoas .md-pessoa-rosto { transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.md-pessoas .md-pessoa-rosto::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: -1; opacity: 0;
  background: conic-gradient(from 0deg, #ff7a3d, #ffd0a8, #ff4d6d, #ff7a3d);
  transition: opacity .25s ease;
}
.md-pessoas button.md-pessoa:hover .md-pessoa-rosto { transform: scale(1.12); }
.md-pessoas button.md-pessoa:hover .md-pessoa-rosto::before { opacity: 1; animation: md-anel-gira 2.4s linear infinite; }
.md-pessoas .md-pessoa-rosto img { position: absolute; z-index: 1; box-shadow: 0 0 0 2px #11151c; }
.md-pessoas .md-pessoa-ponto { z-index: 2; }
.md-pessoas button.md-pessoa:hover em { transform: scale(1.1); box-shadow: 0 0 12px rgba(52, 211, 153, .5); }
.md-pessoas button.md-pessoa em { transition: transform .2s ease, box-shadow .2s ease; }
@keyframes md-anel-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .md-pessoas button.md-pessoa, .md-pessoas .md-pessoa-rosto { transition: none; }
  .md-pessoas button.md-pessoa:hover::after { transition: none; }
  .md-pessoas button.md-pessoa:hover .md-pessoa-rosto::before { animation: none; }
}
.md-pessoas button.md-pessoa:hover .md-pessoa-rosto { background: #1a1f29; }

/* ---- Filtros das demandas: hover ----
   Periodo: o botao ganha uma pilula de vidro com um ponto de luz embaixo;
   o ativo, no hover, acende mais. Cliente: borda laranja e halo. */
.md-dem-periodo button { position: relative; transition: color .15s ease, background .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2, .9, .3, 1.3); }
.md-dem-periodo button:not(.ativo):hover {
  color: #fff; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translateY(-1px);
}
.md-dem-periodo button:not(.ativo)::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%;
  background: #ff7a3d; box-shadow: 0 0 8px #ff7a3d; transform: translateX(-50%) scale(0); transition: transform .2s ease;
}
.md-dem-periodo button:not(.ativo):hover::after { transform: translateX(-50%) scale(1); }
.md-dem-periodo button.ativo:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -6px rgba(255, 106, 40, 1);
}
.md-dem-periodo button:active { transform: scale(.95); transition-duration: .08s; }

select.md-dem-cliente { cursor: pointer; transition: box-shadow .2s ease, background-color .2s ease, transform .2s ease; }
select.md-dem-cliente:hover {
  background-color: rgba(255, 122, 61, .06); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .45), 0 8px 20px -12px rgba(255, 122, 61, .8);
}
select.md-dem-cliente:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .6), 0 0 0 3px rgba(255, 122, 61, .15); }
@media (prefers-reduced-motion: reduce) {
  .md-dem-periodo button, select.md-dem-cliente { transition: none; transform: none !important; }
}

/* ---------------- Graficos de linha do Inicio ----------------
   Linhas de 2px, area em degrade bem leve, grade quase invisivel, rotulo
   direto no fim de cada linha (o valor e o nome) e hover com guia vertical,
   pontos e dica. Texto em tinta neutra; a cor fica so na marca. */
.li-grafico { --li-laranja: #ff7a3d; --li-verde: #34d399; --li-roxo: #a78bfa; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; margin-top: 6px; }
.li-eixo-y { position: relative; width: 52px; height: 160px; }
.li-grafico.alta .li-eixo-y, .li-grafico.alta .li-area { height: 200px; }
.li-eixo-y span {
  position: absolute; right: 0; transform: translateY(-50%); font-size: 10.5px; color: rgba(255, 255, 255, .35);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.li-area { position: relative; height: 160px; margin-right: 92px; }
.li-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.li-guia { stroke: rgba(255, 255, 255, .05); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.li-base { stroke: rgba(255, 255, 255, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.li-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.li-linha.laranja { stroke: var(--li-laranja); filter: drop-shadow(0 0 6px rgba(255, 122, 61, .5)); }
.li-linha.verde { stroke: var(--li-verde); filter: drop-shadow(0 0 6px rgba(52, 211, 153, .45)); }
.li-linha.roxo { stroke: var(--li-roxo); filter: drop-shadow(0 0 6px rgba(167, 139, 250, .5)); }
.li-stop.laranja { stop-color: var(--li-laranja); }
.li-stop.verde { stop-color: var(--li-verde); }
.li-stop.roxo { stop-color: var(--li-roxo); }
.li-grafico.vazio .li-linha, .li-grafico.vazio .li-preenche { opacity: .35; }

/* rotulo direto no fim de cada linha */
.li-fim {
  position: absolute; left: 100%; transform: translateY(-50%); margin-left: 10px;
  display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; white-space: nowrap; line-height: 1.15;
}
.li-fim i { grid-row: span 2; width: 8px; height: 8px; border-radius: 50%; margin-left: -14px; box-shadow: 0 0 0 2px #12161e; }
.li-fim.laranja i { background: var(--li-laranja); }
.li-fim.verde i { background: var(--li-verde); }
.li-fim.roxo i { background: var(--li-roxo); }
.li-fim b { font-size: 13px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.li-fim small { font-size: 10.5px; color: rgba(255, 255, 255, .45); }

/* dias em que entrou cliente */
.li-marca {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--li-verde); box-shadow: 0 0 0 2px #12161e, 0 0 10px rgba(52, 211, 153, .8); pointer-events: none;
}

/* hover */
.li-coluna { position: absolute; top: 0; bottom: 0; z-index: 2; cursor: crosshair; }
.li-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .25)); opacity: 0; transition: opacity .12s; }
.li-ponto {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%) scale(.4);
  opacity: 0; box-shadow: 0 0 0 2px #12161e; transition: opacity .12s, transform .15s cubic-bezier(.2, .9, .3, 1.4);
}
.li-ponto.laranja { background: var(--li-laranja); }
.li-ponto.verde { background: var(--li-verde); }
.li-ponto.roxo { background: var(--li-roxo); }
.li-coluna:hover .li-cursor, .li-coluna:hover .li-ponto { opacity: 1; }
.li-coluna:hover .li-ponto { transform: translate(-50%, -50%) scale(1); }
.li-dica {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); z-index: 5;
  display: grid; gap: 3px; min-width: 170px; padding: 10px 12px; border-radius: 12px; pointer-events: none; opacity: 0;
  background: rgba(17, 20, 28, .96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 30px -12px rgba(0, 0, 0, .8);
  backdrop-filter: blur(12px); font-size: 12px; color: rgba(255, 255, 255, .7); transition: opacity .12s, transform .15s;
}
.li-dica.esquerda { left: auto; right: 50%; transform: translate(0, 4px); }
.li-coluna:hover .li-dica { opacity: 1; transform: translate(-50%, 0); }
.li-coluna:hover .li-dica.esquerda { transform: none; }
.li-dica strong { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 2px; }
.li-dica span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.li-dica span b { margin-left: auto; padding-left: 12px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.li-dica span i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.li-dica span i.laranja { background: var(--li-laranja); }
.li-dica span i.verde { background: var(--li-verde); }
.li-dica span i.roxo { background: var(--li-roxo); }
.li-dica .li-dica-dia { padding-left: 14px; font-size: 11px; color: rgba(255, 255, 255, .45); }
.li-dica .li-dica-dia b { color: rgba(255, 255, 255, .8); }

.li-eixo-x { grid-column: 2; position: relative; height: 22px; margin-right: 92px; }
.li-eixo-x span { position: absolute; top: 7px; transform: translateX(-50%); font-size: 10.5px; color: rgba(255, 255, 255, .35); white-space: nowrap; font-variant-numeric: tabular-nums; }
.li-eixo-x span:first-child { transform: none; }
.li-eixo-x span:last-child { transform: translateX(-100%); }

.li-legenda { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.li-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.li-legenda i { width: 14px; height: 2px; border-radius: 2px; }
.li-legenda i.laranja { background: var(--li-laranja); }
.li-legenda i.verde { background: var(--li-verde); }

/* resumo em cima do faturamento */
.li-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.li-resumo span {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.li-resumo span b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.li-resumo span i { width: 8px; height: 8px; border-radius: 50%; }
.li-resumo span i.laranja { background: #ff7a3d; box-shadow: 0 0 8px #ff7a3d; }
.li-resumo span i.verde { background: #34d399; box-shadow: 0 0 8px #34d399; }
.li-resumo-rua b { color: #fcd34d !important; }
.li-vazio { margin: 20px 0; text-align: center; color: rgba(255, 255, 255, .4); font-size: 13px; }
@media (max-width: 640px) {
  .li-area, .li-eixo-x { margin-right: 70px; }
  .li-eixo-y { width: 44px; }
}

/* ---- Menu de escolha: busca e acabamento ----
   Os blocos de cima do Inicio tinham overflow escondido (por causa do fio
   de luz) e cortavam a lista que abre dentro deles: volta a ser visivel. */
.md-bloco.md-demandas, .md-bloco.md-tarefas { overflow: visible; }
.md-bloco.md-demandas .sel, .md-bloco.md-tarefas .sel { position: relative; z-index: 30; }

.sel-lista {
  min-width: max(100%, 240px); padding: 6px; border: 0; border-radius: 14px;
  background: rgba(18, 21, 29, .97);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 24px 50px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .3);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.sel-busca {
  position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px;
  margin: -6px -6px 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(18, 21, 29, .98); border-radius: 14px 14px 0 0;
}
.sel-busca svg { flex: none; width: 15px; height: 15px; fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2.2; stroke-linecap: round; }
.sel-busca input {
  flex: 1; min-width: 0; height: 26px; padding: 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; outline: none; font-size: 13px; color: #fff;
}
.sel-busca input::placeholder { color: rgba(255, 255, 255, .35); }
.sel-busca:focus-within svg { stroke: #ff7a3d; }
.sel-item { border-radius: 9px; transition: background .12s ease, color .12s ease; }
.sel-item[hidden] { display: none !important; }
.sel-nada { margin: 0; padding: 14px 10px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .4); }

/* ---------------- Graficos do Inicio (o fluxo do Financeiro, refinado) ----------------
   Mesma mecanica do Financeiro; aqui so o acabamento: guias finas e
   tracejadas, nada de moldura, linha base discreta, area com brilho, valor
   final ao lado de cada linha e uma dica de vidro. */
.inicio-negocio .fluxo-area { margin-top: 4px; }
.inicio-negocio .fluxo-tela { height: 210px; margin-right: 78px; border: 0 !important; box-shadow: none !important; overflow: visible; }
.inicio-negocio .estreita .fluxo-tela { height: 180px; margin-right: 44px; }
.inicio-negocio .fluxo-meses, .inicio-negocio .fluxo-area > .legenda-grafico { margin-right: 78px; }
.inicio-negocio .estreita .fluxo-meses, .inicio-negocio .estreita .fluxo-area > .legenda-grafico { margin-right: 44px; }

/* guias: 3 linhas de 1px tracejadas, a de baixo um pouco mais firme */
.inicio-negocio .fluxo-area .linhas-guia { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.inicio-negocio .fluxo-area .linhas-guia i {
  height: 0 !important; background: none !important; opacity: 1 !important;
  border: 0 !important; border-top: 1px dashed rgba(255, 255, 255, .07) !important;
}
.inicio-negocio .fluxo-area .linhas-guia i:last-child { border-top: 1px solid rgba(255, 255, 255, .14) !important; }
.inicio-negocio .fluxo-area > .eixo-y { min-width: 54px; color: rgba(255, 255, 255, .35); font-size: 10.5px; }

/* as linhas */
.inicio-negocio .fluxo-svg { overflow: visible; }
.inicio-negocio .fluxo-preenchido { stroke: none !important; }
.inicio-negocio .fluxo-linha { opacity: .9; stroke-width: 2.5; }
.inicio-negocio .fluxo-tracejado { opacity: .55; stroke-width: 1.5; }

/* valor final ao lado da linha */
.fluxo-fim {
  position: absolute; left: 100%; transform: translateY(50%); margin-left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; pointer-events: none;
}
.fluxo-fim::before {
  content: ""; width: 9px; height: 9px; margin-left: -15px; border-radius: 50%; background: var(--cor);
  box-shadow: 0 0 0 2px #12161e, 0 0 12px var(--cor);
}
.fluxo-fim b {
  padding: 2px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--cor) 22%, rgba(17, 20, 28, .9)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 45%, transparent);
}

/* hover: risca com degrade, bolinhas com anel, dica de vidro */
.inicio-negocio .fluxo-ponto:hover, .inicio-negocio .fluxo-ponto:focus-visible { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025)); }
.inicio-negocio .fluxo-risco { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .35)); }
.inicio-negocio .fluxo-ponto:hover .fluxo-risco { opacity: 1; }
.inicio-negocio .fluxo-bolinha { width: 11px; height: 11px; margin: 0 0 -5.5px -5.5px; border: 2px solid #12161e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .6); transform: scale(.5); transition: opacity .1s, transform .18s cubic-bezier(.2, .9, .3, 1.5); }
.inicio-negocio .fluxo-ponto:hover .fluxo-bolinha { transform: scale(1); }
.inicio-negocio .fluxo-dica {
  border: 0; border-radius: 12px; padding: 11px 13px; gap: 6px;
  background: rgba(17, 20, 28, .95); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 34px -14px rgba(0, 0, 0, .85);
}
.inicio-negocio .fluxo-dica strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.inicio-negocio .fluxo-dica span { color: rgba(255, 255, 255, .65); }
.inicio-negocio .fluxo-dica b { color: #fff; padding-left: 14px; }
.inicio-negocio .fluxo-meses span { color: rgba(255, 255, 255, .35); }

/* ================= Tarefas: por pessoa / por cliente ================= */
.tl2-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.tl2-numeros { display: flex; gap: 8px; flex-wrap: wrap; }
.tl2-numeros span {
  display: grid; gap: 1px; min-width: 86px; padding: 9px 14px; border-radius: 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.tl2-numeros b { font-size: 22px; font-weight: 300; letter-spacing: -.02em; color: #fff; text-transform: none; font-variant-numeric: tabular-nums; }
.tl2-numeros .ruim { background: linear-gradient(160deg, rgba(248, 113, 113, .14), rgba(248, 113, 113, .03)); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .3); }
.tl2-numeros .ruim b { color: #fca5a5; }
.tl2-numeros .vivo { background: linear-gradient(160deg, rgba(255, 122, 61, .14), rgba(255, 122, 61, .03)); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .3); }
.tl2-numeros .vivo b { color: #ffb07a; }
.tl2-numeros .bom b { color: #6ee7b7; }

/* barra: visao, busca, nova */
.tl2-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tl2-visao { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.tl2-visao button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .55); background: transparent; box-shadow: none; cursor: pointer;
  transition: color .15s, background .2s, box-shadow .2s;
}
.tl2-visao button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tl2-visao button:hover { color: #fff; background: rgba(255, 255, 255, .06); transform: none; }
.tl2-visao button.ativo { color: #fff; background: linear-gradient(180deg, #ff8a4c, #f0601f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px -4px rgba(255, 106, 40, .8); }
.tl2-busca {
  flex: 1 1 240px; max-width: 380px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: box-shadow .2s;
}
.tl2-busca:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .5), 0 0 0 3px rgba(255, 122, 61, .1); }
.tl2-busca svg { width: 16px; height: 16px; fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.tl2-busca input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 13.5px; color: #fff; }
.tl2-nova { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.tl2-nova svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ---- por pessoa: colunas lado a lado, rolam na horizontal ---- */
.tl2-quadro {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 14px; align-items: start;
  overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.tl2-coluna {
  --cc: 255, 255, 255;
  position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 20px; scroll-snap-align: start; min-height: 220px;
  background: linear-gradient(180deg, rgba(24, 28, 37, .9), rgba(14, 17, 23, .95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -28px rgba(0, 0, 0, .8);
  transition: opacity .2s;
}
.tl2-coluna::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cc), .3), transparent);
}
.tl2-coluna.produzindo { --cc: 255, 122, 61; box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .25), 0 24px 48px -28px rgba(255, 106, 40, .5); }
.tl2-coluna.com-atraso:not(.produzindo) { --cc: 248, 113, 113; }
.tl2-coluna.apagada { opacity: .3; }
.tl2-coluna > header { display: flex; align-items: center; gap: 11px; padding: 2px 2px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tl2-rosto {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .08);
}
.tl2-rosto img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tl2-rosto i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #4b5563; box-shadow: 0 0 0 2.5px #141820; }
.tl2-coluna.produzindo .tl2-rosto i { background: #ff7a3d; animation: md-pessoa-pulso 1.6s ease-out infinite; }
.tl2-coluna.produzindo .tl2-rosto { box-shadow: 0 0 0 2px #141820, 0 0 0 3.5px rgba(255, 122, 61, .7); }
.tl2-rosto.pessoal { border-radius: 12px; color: #c4b5fd; background: rgba(139, 92, 246, .14); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .3); }
.tl2-rosto.pessoal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.tl2-quem { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; }
.tl2-quem strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.tl2-quem small { font-size: 12px; color: rgba(255, 255, 255, .45); }
.tl2-quem small em { font-style: normal; color: #fca5a5; }
.tl2-digita { display: inline-flex; align-items: center; gap: 3px; color: #ffb48a; }
.tl2-digita i { display: inline-flex; gap: 2px; }
.tl2-digita i b { width: 3px; height: 3px; border-radius: 50%; background: #ff7a3d; animation: mdv-pula 1.2s ease-in-out infinite; }
.tl2-digita i b:nth-child(2) { animation-delay: .15s; } .tl2-digita i b:nth-child(3) { animation-delay: .3s; }
.tl2-conta {
  min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.tl2-mais {
  width: 30px; height: 30px; padding: 0; border-radius: 9px; display: grid; place-items: center; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background .15s, color .15s, transform .15s;
}
.tl2-mais svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tl2-mais:hover { color: #fff; background: #f0601f; transform: rotate(90deg); box-shadow: 0 6px 16px -6px rgba(255, 106, 40, .9); }
.tl2-lista { display: grid; gap: 7px; }
.tl2-vazio { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 22px 10px; border-radius: 14px; font-size: 12.5px; color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .015); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.tl2-vazio svg { width: 15px; height: 15px; fill: none; stroke: #34d399; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tl2-vazio.grande { padding: 40px; font-size: 14px; }
.tl2-pe { display: flex; align-items: center; gap: 6px; padding-top: 4px; font-size: 11.5px; color: #6ee7b7; }
.tl2-pe svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* cartao de tarefa (as duas visoes) */
.tl2-tarefa {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1), box-shadow .2s, background .2s, opacity .3s;
}
.tl2-tarefa:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 12px 24px -16px rgba(0, 0, 0, .9); }
.tl2-tarefa:focus-visible { outline: 2px solid rgba(255, 122, 61, .6); outline-offset: 2px; }
.tl2-tarefa.fazendo { background: linear-gradient(90deg, rgba(255, 122, 61, .12), rgba(255, 122, 61, .02) 70%); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .3); }
.tl2-tarefa.fazendo::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ffb07a, #ff6a28); box-shadow: 0 0 10px rgba(255, 106, 40, .8); }
.tl2-tarefa.feita { opacity: .4; }
.tl2-tarefa.feita strong { text-decoration: line-through; }
.tl2-tarefa[hidden] { display: none; }
.tl2-check {
  width: 22px; height: 22px; margin-top: 1px; padding: 0 !important; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .02); color: transparent; cursor: pointer; box-shadow: none; transition: all .2s;
}
.tl2-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: scale(.6); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.tl2-check:hover { border-color: #34d399; color: rgba(52, 211, 153, .8); background: rgba(52, 211, 153, .08); transform: none; }
.tl2-check:hover svg, .tl2-tarefa.feita .tl2-check svg { transform: scale(1); }
.tl2-tarefa.feita .tl2-check { background: #34d399; border-color: #34d399; color: #0b1410; }
.tl2-tarefa-corpo { display: grid; gap: 6px; min-width: 0; }
.tl2-tarefa-corpo strong { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #fff; overflow-wrap: anywhere; }
.tl2-tarefa-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tl2-chip-t-cli, .tl2-chip-t-gente, .tl2-chip-t-vivo {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl2-chip-t-cli.pessoal { color: #c4b5fd; background: rgba(139, 92, 246, .12); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .28); }
.tl2-chip-t-foto { width: 15px !important; height: 15px !important; min-width: 15px; border-radius: 50%; font-size: 7px !important; }
.tl2-chip-t-vivo { color: #ffb48a; background: rgba(255, 122, 61, .1); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .3); }
.tl2-tarefa .prazo-conta { font-family: inherit !important; font-size: 11px; height: 22px; letter-spacing: 0; }

/* ---- por cliente ---- */
.tl2-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.tl2-cli {
  position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(24, 28, 37, .9), rgba(14, 17, 23, .95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -28px rgba(0, 0, 0, .8);
}
.tl2-cli.com-atraso { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .25), 0 24px 48px -28px rgba(248, 113, 113, .35); }
.tl2-cli[hidden] { display: none; }
.tl2-cli-topo {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 2px 2px 10px; margin: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
  border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
div.tl2-cli-topo { cursor: default; }
.tl2-cli-topo:hover { transform: none; background: none; }
.tl2-cli-topo .tl-avatar { width: 40px; height: 40px; flex: none; }
.tl2-selo { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tl2-selo.ruim { color: #fca5a5; background: rgba(248, 113, 113, .12); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .35); }
.tl2-abrir { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: rgba(255, 255, 255, .4); transition: background .15s, color .15s, transform .2s; }
.tl2-abrir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
button.tl2-cli-topo:hover .tl2-abrir { color: #fff; background: rgba(255, 255, 255, .07); transform: translateX(2px); }
.tl2-mais-tarefas {
  height: 32px; border-radius: 10px; border: 0; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); cursor: pointer;
  background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px dashed rgba(255, 255, 255, .1);
}
.tl2-mais-tarefas:hover { color: #fff; background: rgba(255, 255, 255, .05); transform: none; }

.tl2-emdia { margin-top: 26px; }
.tl2-emdia h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.tl2-emdia h3 svg { width: 14px; height: 14px; fill: none; stroke: #34d399; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tl2-emdia h3 span { padding: 1px 8px; border-radius: 999px; letter-spacing: 0; color: #6ee7b7; background: rgba(52, 211, 153, .1); }
.tl2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl2-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 260px; padding: 0 14px 0 5px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), background .2s, box-shadow .2s, color .15s;
}
.tl2-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl2-chip:hover { color: #fff; transform: translateY(-2px); background: rgba(255, 122, 61, .07); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .4), 0 10px 22px -12px rgba(255, 122, 61, .7); }
.tl2-chip[hidden] { display: none; }
.tl2-chip-foto { width: 26px !important; height: 26px !important; min-width: 26px; border-radius: 50%; font-size: 10px !important; }
@media (max-width: 640px) {
  .tl2-quadro { grid-auto-columns: 86%; }
  .tl2-nova { margin-left: 0; }
  .tl2-numeros span { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tl2-tarefa, .tl2-chip, .tl2-mais { transition: none; }
}

/* ================= Tarefas v2: periodo, feitas, cartao de cliente ================= */
.tl2-numeros span.bom { background: linear-gradient(160deg, rgba(52, 211, 153, .12), rgba(52, 211, 153, .02)); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .25); }

/* periodo + calendario */
.tl2-periodo { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.tl2-periodo button {
  height: 34px; padding: 0 12px; border: 0; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: rgba(255, 255, 255, .5); background: transparent; box-shadow: none; transition: color .15s, background .2s;
}
.tl2-periodo button:hover { color: #fff; background: rgba(255, 255, 255, .07); transform: none; }
.tl2-periodo button.ativo { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .08); }
.tl2-calendario {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: box-shadow .2s, color .15s, transform .2s;
}
.tl2-calendario svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.tl2-calendario:hover { color: #fff; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .45); }
.tl2-calendario.ativo { color: #fff; background: rgba(255, 122, 61, .14); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .5); }
.tl2-busca { flex: 1 1 200px; }

/* coluna da pessoa */
.tl2-quadro { grid-auto-columns: minmax(310px, 1fr); }
.tl2-coluna { gap: 12px; align-content: start; }
.tl2-col-topo { display: flex; align-items: center; gap: 12px; }
.tl2-col-topo .tl2-rosto { width: 46px; height: 46px; font-size: 14px; }
.tl2-col-topo .tl2-quem strong { font-size: 15px; }
.tl2-col-numeros, .tl2-cc-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tl2-col-numeros span, .tl2-cc-numeros span {
  display: grid; gap: 1px; padding: 8px 10px; border-radius: 11px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl2-col-numeros b, .tl2-cc-numeros b { font-size: 19px; font-weight: 300; letter-spacing: -.02em; color: #fff; text-transform: none; font-variant-numeric: tabular-nums; }
.tl2-col-numeros .ruim b, .tl2-cc-numeros .ruim b { color: #fca5a5; }
.tl2-col-numeros .bom b, .tl2-cc-numeros .bom b { color: #6ee7b7; }
.tl2-cc-numeros .vivo b { color: #ffb07a; }
.tl2-secao { display: grid; gap: 8px; }
.tl2-secao h4 {
  display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.tl2-secao h4 span { padding: 1px 7px; border-radius: 999px; letter-spacing: 0; color: #6ee7b7; background: rgba(52, 211, 153, .1); }
.tl2-secao.feitas { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
.tl2-nada { margin: 0; padding: 10px 4px; font-size: 12px; color: rgba(255, 255, 255, .32); }

/* linha de tarefa feita */
.tl2-feita {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 11px; cursor: pointer;
  background: rgba(52, 211, 153, .03); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .1); transition: background .15s, box-shadow .15s;
}
.tl2-feita:hover { background: rgba(52, 211, 153, .07); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .25); }
.tl2-feita[hidden] { display: none; }
.tl2-feita-check { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: #34d399; color: #0b1410; box-shadow: 0 0 10px -2px rgba(52, 211, 153, .8); }
.tl2-feita-check svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.tl2-feita-corpo { display: grid; gap: 2px; min-width: 0; }
.tl2-feita-corpo strong { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .7); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); overflow-wrap: anywhere; }
.tl2-feita-corpo small { font-size: 11px; color: rgba(255, 255, 255, .38); }
.tl2-resto { display: grid; gap: 7px; }
.tl2-resto[hidden] { display: none; }
.tl2-ver-todas {
  height: 30px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: color .15s, background .15s;
}
.tl2-ver-todas:hover { color: #fff; background: rgba(255, 255, 255, .06); transform: none; }

/* cartao de cliente */
.tl2-clientes { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.tl2-cc {
  --ec: 52, 211, 153;
  position: relative; display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(80% 50% at 0% 0%, rgba(var(--ec), .06), transparent 70%), linear-gradient(180deg, rgba(24, 28, 37, .92), rgba(14, 17, 23, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -28px rgba(0, 0, 0, .8);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1), box-shadow .25s, opacity .2s;
}
.tl2-cc::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ec), .6), transparent); }
.tl2-cc:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--ec), .25), 0 28px 50px -26px rgba(var(--ec), .35); }
.tl2-cc.pendente { --ec: 255, 122, 61; }
.tl2-cc.atraso { --ec: 248, 113, 113; }
.tl2-cc.pessoal { --ec: 139, 92, 246; }
.tl2-cc.apagada, .tl2-coluna.apagada { opacity: .25; }
.tl2-cc-topo {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
div.tl2-cc-topo { cursor: default; }
.tl2-cc-topo:hover { transform: none; background: none; }
.tl2-cc-foto { width: 50px !important; height: 50px !important; min-width: 50px; border-radius: 14px !important; font-size: 15px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 18px -8px rgba(0, 0, 0, .8); }
.tl2-cc .tl2-rosto.pessoal { width: 50px; height: 50px; border-radius: 14px; }
.tl2-cc-topo .tl2-quem strong { font-size: 15px; }
.tl2-cc-estado { display: inline-flex; align-items: center; gap: 6px; color: rgba(var(--ec), 1) !important; filter: saturate(.85) brightness(1.15); }
.tl2-cc-estado i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--ec)); box-shadow: 0 0 8px rgb(var(--ec)); }
button.tl2-cc-topo:hover .tl2-abrir { color: #fff; background: rgba(255, 255, 255, .07); transform: translateX(2px); }
.tl2-cc-barra { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.tl2-cc-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34d399, #6ee7b7); box-shadow: 0 0 10px rgba(52, 211, 153, .6); }
.tl2-cc-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
.tl2-cc-pe small { font-size: 11.5px; color: rgba(255, 255, 255, .32); }
.tl2-rostos { display: flex; }
.tl2-mini-rosto {
  position: relative; width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; color: #fff; background: #262c38; box-shadow: 0 0 0 2px #141820;
}
.tl2-mini-rosto:first-child { margin-left: 0; }
.tl2-mini-rosto img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tl2-cc-lista {
  height: 30px; padding: 0 12px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: all .15s;
}
.tl2-cc-lista:hover { color: #fff; background: #f0601f; box-shadow: 0 6px 16px -6px rgba(255, 106, 40, .9); transform: none; }
@media (max-width: 760px) {
  .tl2-periodo { order: 3; }
  .tl2-busca { order: 4; flex-basis: 100%; max-width: none; }
}

/* Tarefas: as colunas quebram linha (nada de rolar para o lado) e o
   calendario do periodo abre solido, por cima de tudo. */
.tl2-quadro {
  grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  overflow: visible; padding-bottom: 0; scroll-snap-type: none;
}
.tl2-barra { position: relative; z-index: 50; }
.tl2-barra .cal-janela.periodo {
  z-index: 200; top: calc(100% + 4px); right: auto; left: 50%; transform: translateX(-50%); margin-top: 0;
  background: #141820; border: 0; border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -16px rgba(0, 0, 0, .9);
}
@media (max-width: 640px) {
  .tl2-quadro { grid-template-columns: 1fr; }
  .tl2-barra .cal-janela.periodo { left: 0; transform: none; }
}

/* ================= Tarefas v3: premium e com movimento ================= */

/* grade sem rolagem lateral, com mais forca que as regras anteriores */
.tl2-corpo .tl2-quadro {
  display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  overflow: visible !important; gap: 16px;
}

/* titulo com um brilho que passa */
.tl2-cabeca h2 {
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffb07a 50%, #fff 60%, #fff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tl3-titulo 6s ease-in-out infinite;
}
@keyframes tl3-titulo { 0%, 70% { background-position: 100% 0; } 100% { background-position: -50% 0; } }

/* numeros do topo: entram em cascata, holofote e linha de luz */
.tl2-numeros span {
  position: relative; overflow: hidden; isolation: isolate;
  animation: tl3-sobe .55s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s;
}
.tl2-numeros span::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 70%);
}
.tl2-numeros span:hover { transform: translateY(-2px); }
.tl2-numeros span:hover::before { opacity: 1; }
.tl2-numeros span.vivo b { animation: tl3-respira 2s ease-in-out infinite; }
@keyframes tl3-respira { 50% { text-shadow: 0 0 18px rgba(255, 122, 61, .8); } }

/* seletor de visao: a pilula desliza */
.tl2-visao { position: relative; isolation: isolate; }
.tl2-visao-luz {
  position: absolute; top: 3px; bottom: 3px; left: 0; z-index: -1; border-radius: 9px;
  background: linear-gradient(180deg, #ff8a4c, #f0601f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 18px -6px rgba(255, 106, 40, .9);
  transition: transform .45s cubic-bezier(.3, 1.3, .4, 1), width .45s cubic-bezier(.3, 1.3, .4, 1);
}
.tl2-visao:has(.tl2-visao-luz) button.ativo { background: transparent; box-shadow: none; }
.tl2-periodo button { transition: color .15s, background .2s, transform .2s cubic-bezier(.2, .9, .3, 1.3); }
.tl2-periodo button:active, .tl2-visao button:active { transform: scale(.94); }

/* cartoes: entrada em cascata, holofote e elevacao */
.tl2-coluna, .tl2-cc {
  isolation: isolate;
  animation: tl3-sobe .6s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s, opacity .25s;
}
.tl2-coluna::after, .tl2-cc::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .06), transparent 60%);
}
.tl2-coluna:hover::after, .tl2-cc:hover::after { opacity: 1; }
.tl2-coluna:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -28px rgba(0, 0, 0, .95); }
@keyframes tl3-sobe { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* quem esta produzindo: borda de luz que gira */
.tl2-coluna.produzindo { box-shadow: 0 30px 60px -28px rgba(255, 106, 40, .55); }
.tl2-coluna.produzindo > .tl2-anel,
.tl2-coluna.produzindo::before {
  content: ""; position: absolute; inset: 0; left: 0; right: 0; height: auto; z-index: -2; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--tl3-giro, 0deg), transparent 0 60%, rgba(255, 138, 76, .9) 75%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tl3-gira 4s linear infinite;
}
@property --tl3-giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes tl3-gira { to { --tl3-giro: 360deg; } }

/* foto: anel ao passar */
.tl2-rosto { transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), box-shadow .3s; }
.tl2-coluna:hover .tl2-rosto, .tl2-cc:hover .tl2-cc-foto { transform: scale(1.06); }
.tl2-cc-foto { transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }

/* mini numeros das colunas e dos clientes */
.tl2-col-numeros span, .tl2-cc-numeros span { transition: background .2s, box-shadow .2s, transform .2s; }
.tl2-col-numeros span:hover, .tl2-cc-numeros span:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .05); }

/* tarefas e feitas entram depois do cartao */
.tl2-lista > .tl2-tarefa, .tl2-lista > .tl2-feita {
  animation: tl3-desliza .45s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 300ms);
}
@keyframes tl3-desliza { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.tl2-tarefa { transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s, background .25s, opacity .35s; }
.tl2-tarefa:hover { transform: translateY(-2px) scale(1.01); }
.tl2-tarefa.feita { animation: tl3-feita .45s ease forwards; }
@keyframes tl3-feita { 40% { transform: scale(1.02); } 100% { opacity: .35; transform: scale(.98); } }
.tl2-feita { transition: transform .2s, background .15s, box-shadow .15s; }
.tl2-feita:hover { transform: translateX(3px); }

/* barra de progresso do cliente cresce ao entrar e tem um brilho correndo */
.tl2-cc-barra i { position: relative; overflow: hidden; transform-origin: left; animation: tl3-cresce 1s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 350ms); }
.tl2-cc-barra i::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-100%); animation: tl3-corre 2.6s 1.4s ease-in-out infinite;
}
@keyframes tl3-cresce { from { transform: scaleX(0); } to { transform: none; } }
@keyframes tl3-corre { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.tl2-cc:hover { transform: translateY(-4px); }

/* botoes */
.tl2-nova { position: relative; overflow: hidden; }
.tl2-nova::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%); animation: tl3-reflexo 4s 1s ease-in-out infinite;
}
@keyframes tl3-reflexo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.tl2-nova:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(255, 106, 40, .9); }
.tl2-nova svg { transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.tl2-nova:hover svg { transform: rotate(90deg); }

/* explosao ao concluir */
.tl2-explosao { position: fixed; z-index: 2147483000; width: 0; height: 0; pointer-events: none; }
.tl2-explosao i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 8px #34d399; animation: tl3-estoura .6s cubic-bezier(.2, .9, .3, 1) forwards;
}
.tl2-explosao i:nth-child(even) { background: #a7f3d0; width: 4px; height: 4px; }
@keyframes tl3-estoura { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tl2-cabeca h2, .tl2-numeros span, .tl2-coluna, .tl2-cc, .tl2-lista > *, .tl2-cc-barra i, .tl2-cc-barra i::after,
  .tl2-nova::after, .tl2-coluna.produzindo::before, .tl2-numeros span.vivo b { animation: none !important; }
  .tl2-visao-luz { transition: none; }
}

/* Botao "+" das colunas de Tarefas: sem giro, o + no centro exato. */
.tl2-coluna button.tl2-mais {
  display: inline-flex !important; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; min-width: 32px; padding: 0 !important; margin: 0; line-height: 0;
  border-radius: 10px; transform: none !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tl2-coluna button.tl2-mais svg { display: block; width: 14px; height: 14px; margin: 0; transform: none !important; }
.tl2-coluna button.tl2-mais:hover {
  color: #fff; background: rgba(255, 122, 61, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .5), 0 0 16px -4px rgba(255, 122, 61, .6);
}
.tl2-coluna button.tl2-mais:active { background: rgba(255, 122, 61, .28); }

/* ================= Nova tarefa (janela compacta) =================
   Cabe inteira na tela: titulo e detalhes juntos numa caixa so, pessoas em
   chips numa linha, tipo e prazo lado a lado. */
/* o menu do sistema respeita o hidden do select que ele enfeita */
.sel:has(> select[hidden]) { display: none !important; }

dialog.te2 {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px; overflow: visible;
  background: radial-gradient(70% 40% at 0% 0%, rgba(255, 122, 61, .1), transparent 70%), linear-gradient(180deg, #181c25, #10131a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -20px rgba(0, 0, 0, .9);
  animation: te2-abre .4s cubic-bezier(.2, 1.2, .35, 1) both;
}
dialog.te2::backdrop { background: rgba(5, 7, 11, .6); backdrop-filter: blur(8px); }
@keyframes te2-abre { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.te2-form { display: grid; gap: 16px; padding: 20px 22px 18px; max-height: calc(100vh - 32px); overflow-y: auto; }

.te2-topo { display: flex; align-items: center; gap: 12px; }
.te2-icone {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #ffb07a;
  background: linear-gradient(180deg, rgba(255, 122, 61, .26), rgba(255, 122, 61, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .4), 0 0 22px -6px rgba(255, 122, 61, .8);
}
.te2-icone svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.te2-topo > div { flex: 1; min-width: 0; }
.te2-topo h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.015em; color: #fff; }
.te2-topo p { margin: 2px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
button.te2-fechar {
  flex: none; width: 34px; height: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: pointer;
  transition: background .15s, color .15s;
}
button.te2-fechar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
button.te2-fechar:hover { color: #fff; background: rgba(255, 255, 255, .09); transform: none; }

/* titulo + detalhes numa caixa so */
.te2-texto {
  display: grid; border-radius: 14px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow .2s;
}
.te2-texto:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .55), 0 0 0 4px rgba(255, 122, 61, .1); }
.te2-texto input, .te2-texto textarea {
  width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; color: #fff; font: inherit;
}
.te2-texto input { height: 48px; padding: 0 16px; font-size: 15px; font-weight: 600; }
.te2-texto textarea {
  min-height: 52px; max-height: 120px; padding: 10px 16px 12px; resize: vertical; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8);
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
}
.te2-texto ::placeholder { color: rgba(255, 255, 255, .35); }

.te2-campo { display: grid; gap: 8px; align-content: start; min-width: 0; }
.te2-rotulo { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }

/* pessoas em chips */
.te2-pessoas { display: flex; flex-wrap: wrap; gap: 8px; }
.te2-pessoa { position: relative; cursor: pointer; }
.te2-pessoa input { position: absolute; opacity: 0; pointer-events: none; }
.te2-pessoa-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background .2s, box-shadow .2s, color .15s, transform .2s cubic-bezier(.2, .9, .3, 1.3);
}
.te2-pessoa:hover .te2-pessoa-chip { color: #fff; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.te2-pessoa input:checked + .te2-pessoa-chip {
  color: #fff; background: linear-gradient(180deg, rgba(255, 122, 61, .22), rgba(255, 122, 61, .08));
  box-shadow: inset 0 0 0 1.5px rgba(255, 122, 61, .7), 0 6px 18px -8px rgba(255, 106, 40, .9);
}
.te2-pessoa input:focus-visible + .te2-pessoa-chip { outline: 2px solid rgba(255, 122, 61, .6); outline-offset: 2px; }
.te2-rosto {
  position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff; background: #262c38;
}
.te2-rosto img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.te2-pessoa input:checked + .te2-pessoa-chip .te2-rosto { box-shadow: 0 0 0 2px #1a1e27, 0 0 0 3.5px #ff7a3d; }

/* tipo e prazo lado a lado */
.te2-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.te2 .md-tipo { width: 100%; }
.te2 .md-tipo-op { flex: 1; justify-content: center; }
.te2 .md-atalhos { display: flex; width: 100%; }
.te2 .md-atalho { flex: 1; }
.te2 .md-hora { justify-self: start; }
.te2 .sel { width: 100%; }

.te2 .erro:empty { display: none; }
.te2-pe { display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); }
.te2-pe .cta { height: 42px; padding: 0 20px; border-radius: 12px; }
@media (max-width: 560px) {
  .te2-grade { grid-template-columns: 1fr; }
  .te2-form { padding: 16px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { dialog.te2 { animation: none; } }

/* ================= Escritorio: imersao ================= */
.esc-topo { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.esc-topo > div:first-child { flex: 1; min-width: 260px; }
.esc-topo h1 {
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffb07a 50%, #fff 60%, #fff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tl3-titulo 6s ease-in-out infinite;
}
.esc-relogio {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 8px 16px 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.esc-vivo {
  grid-row: span 2; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffb4b6;
  background: linear-gradient(180deg, rgba(229, 72, 77, .2), rgba(229, 72, 77, .06)); box-shadow: inset 0 0 0 1px rgba(255, 107, 112, .35);
}
.esc-vivo i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 8px #ff5a5f; }
.esc-vivo i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(255, 90, 95, .7); animation: md-vivo-anel 1.6s ease-out infinite; }
.esc-relogio b { font-size: 20px; font-weight: 300; letter-spacing: -.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.esc-relogio small { font-size: 11px; color: rgba(255, 255, 255, .45); }
.esc-legenda span {
  border: 0 !important; background: rgba(255, 255, 255, .03) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: transform .2s, box-shadow .2s;
}
.esc-legenda span:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.esc-legenda i.on { animation: md-pessoa-pulso 1.8s ease-out infinite; }

/* o mapa como uma janela para a sala */
.esc-palco { grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; }
.esc-mapa {
  border: 0; outline: 0; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255, 122, 61, .3), 0 0 60px -20px rgba(255, 106, 40, .5), 0 40px 90px -30px rgba(0, 0, 0, .95);
  animation: esc-entra .8s cubic-bezier(.2, .9, .3, 1) backwards;
}
@keyframes esc-entra { from { opacity: 0; transform: scale(.98); filter: blur(6px) brightness(.6); } to { opacity: 1; transform: none; filter: none; } }
.esc-hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.esc-vinheta { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.esc-luz { position: absolute; inset: 0; mix-blend-mode: soft-light; transition: background 2s; }
.esc-luz[data-turno="manha"] { background: linear-gradient(160deg, rgba(255, 220, 160, .35), transparent 60%); }
.esc-luz[data-turno="tarde"] { background: linear-gradient(200deg, rgba(255, 200, 120, .25), transparent 60%); }
.esc-luz[data-turno="fim"] { background: linear-gradient(200deg, rgba(255, 120, 60, .45), rgba(120, 40, 80, .25)); }
.esc-luz[data-turno="noite"] { background: linear-gradient(180deg, rgba(40, 60, 140, .55), rgba(10, 15, 40, .45)); mix-blend-mode: multiply; }
.esc-hud-canto {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .8); background: rgba(10, 12, 18, .7); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.esc-hud-canto i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.esc-hud-canto b { color: #fff; }

/* lateral: a equipe por estado */
.esc-fora {
  position: relative; padding: 16px 12px 12px; border: 0; border-radius: 22px; overflow: hidden; align-self: stretch;
  background: radial-gradient(80% 40% at 0% 0%, rgba(255, 122, 61, .07), transparent 70%), linear-gradient(180deg, rgba(24, 28, 37, .92), rgba(14, 17, 23, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -30px rgba(0, 0, 0, .9);
  animation: tl3-sobe .6s .15s cubic-bezier(.2, .9, .3, 1) backwards;
}
.esc-fora h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 12px; }
.esc-fora h3 span { font-size: 11px; letter-spacing: 0; padding: 2px 9px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .06); }
.esc-grupo { margin-bottom: 12px; }
.esc-grupo h4 {
  display: flex; align-items: center; gap: 7px; margin: 0 6px 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.esc-grupo h4 i { width: 6px; height: 6px; border-radius: 50%; background: #4b5563; }
.esc-grupo.trabalhando h4 i { background: #34d399; box-shadow: 0 0 8px #34d399; }
.esc-grupo.intervalo h4 i { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.esc-grupo.encerrado h4 i { background: #818cf8; }
.esc-grupo h4 span { margin-left: auto; letter-spacing: 0; color: rgba(255, 255, 255, .55); }
.esc-fora .esc-fora-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; padding: 9px 10px; margin-bottom: 5px; border-radius: 14px;
  background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  animation: tl3-desliza .45s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms + 250ms);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), background .2s, box-shadow .2s;
}
.esc-fora .esc-fora-item:hover { transform: translateX(3px); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.esc-fora .esc-fora-item.trabalhando { background: linear-gradient(90deg, rgba(52, 211, 153, .08), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .2); }
.esc-fora .esc-fora-item.intervalo { background: linear-gradient(90deg, rgba(251, 191, 36, .07), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .18); }
.esc-fora .esc-fora-item.fora, .esc-fora .esc-fora-item.encerrado { opacity: .72; }
.esc-fora .esc-fora-item.fora:hover, .esc-fora .esc-fora-item.encerrado:hover { opacity: 1; }
.esc-fora .esc-fora-av { width: 44px; height: 44px; }
.esc-fora .esc-fora-item.trabalhando .esc-fora-av { box-shadow: 0 0 0 2px #141820, 0 0 0 4px #34d399, 0 0 16px -2px rgba(52, 211, 153, .7); }
.esc-fora .esc-fora-item.intervalo .esc-fora-av { box-shadow: 0 0 0 2px #141820, 0 0 0 4px #fbbf24; }
.esc-fora .esc-fora-item.fora .esc-fora-av img { filter: grayscale(1) brightness(.75); }
.esc-fora-texto { display: grid; gap: 1px; min-width: 0; }
.esc-fora-texto strong { font-size: 13.5px !important; font-weight: 650; }
.esc-fora-item.trabalhando .esc-fora-texto small { color: #6ee7b7 !important; }
.esc-fora-item.intervalo .esc-fora-texto small { color: #fcd34d !important; }
.esc-fazendo {
  margin-top: 3px; font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 7px; border-radius: 6px; background: rgba(255, 122, 61, .1); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .25); width: fit-content; max-width: 100%;
}
.esc-seta { width: 22px; height: 22px; display: grid; place-items: center; color: rgba(255, 255, 255, .25); transition: color .2s, transform .2s; }
.esc-seta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.esc-fora-item:hover .esc-seta { color: #fff; transform: translateX(2px); }
@media (max-width: 980px) { .esc-palco { grid-template-columns: 1fr; } }

/* ================= Perfil: premium ================= */
dialog.perfil-janela { animation: te2-abre .45s cubic-bezier(.2, 1.2, .35, 1) both; }
dialog.perfil-janela::backdrop { background: rgba(5, 7, 11, .6); backdrop-filter: blur(10px); }
dialog.perfil-janela button.pf-fechar {
  display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0; line-height: 0;
  width: 36px; height: 36px; min-width: 36px; border-radius: 12px; transition: background .15s, transform .2s;
}
dialog.perfil-janela button.pf-fechar svg { display: block; width: 15px; height: 15px; margin: 0; }
dialog.perfil-janela button.pf-fechar:hover { background: rgba(0, 0, 0, .55); transform: none; }

.pf-online[data-estado] { background: #4b5563; box-shadow: none; }
.pf-online[data-estado="trabalhando"] { background: #34d399; box-shadow: 0 0 12px rgba(52, 211, 153, .9); animation: md-pessoa-pulso 1.8s ease-out infinite; }
.pf-online[data-estado="intervalo"] { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, .8); }
.pf-online[data-estado="encerrado"] { background: #818cf8; }
.pf-status {
  display: inline-flex; align-items: center; gap: 7px; margin: 10px auto 0; height: 28px; padding: 0 12px; border-radius: 999px; width: fit-content;
  font-size: 12px; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pf-status i { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; }
.pf-status b { font-weight: 600; }
.pf-status[data-estado="trabalhando"] { color: #a7f3d0; background: rgba(52, 211, 153, .1); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .3); }
.pf-status[data-estado="trabalhando"] i { background: #34d399; box-shadow: 0 0 8px #34d399; }
.pf-status[data-estado="intervalo"] { color: #fde68a; background: rgba(251, 191, 36, .1); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .3); }
.pf-status[data-estado="intervalo"] i { background: #fbbf24; }
.pf-status[data-estado="encerrado"] i { background: #818cf8; }
.pf-corpo { text-align: center; }

.pf-add-bio { border-style: solid !important; border-color: rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .02) !important; transition: background .2s, border-color .2s, transform .2s; }
.pf-add-bio:hover { border-color: rgba(255, 122, 61, .45) !important; background: rgba(255, 122, 61, .06) !important; transform: translateY(-1px); }
.pf-numeros > div { transition: transform .2s, box-shadow .2s; }
.pf-numeros > div:hover { transform: translateY(-2px); }

.pf-agora {
  display: grid; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  animation: tl3-sobe .5s cubic-bezier(.2, .9, .3, 1) backwards;
}
.pf-agora-topo { display: grid; gap: 3px; }
.pf-agora-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffb48a; }
.pf-agora-topo strong { font-size: 14.5px; font-weight: 650; color: #fff; }
.pf-agora-topo small { font-size: 12px; color: rgba(255, 255, 255, .45); }
.pf-agora-livre { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.pf-agora-livre i { width: 7px; height: 7px; border-radius: 50%; background: #4b5563; }
.pf-agora-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-agora-numeros span {
  display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.pf-agora-numeros b { font-size: 20px; font-weight: 300; letter-spacing: -.02em; color: #fff; text-transform: none; }
.pf-agora-numeros .bom b { color: #6ee7b7; }
.pf-entregas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-entregas li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 10px;
  background: rgba(52, 211, 153, .04); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .12);
  animation: tl3-desliza .4s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i) * 70ms + 200ms);
}
.pf-entregas li i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #34d399; color: #0b1410; }
.pf-entregas li i svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pf-entregas li span { font-size: 12.5px; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-entregas li small { font-size: 11px; color: rgba(255, 255, 255, .38); white-space: nowrap; }

.pf-acoes { display: flex; gap: 8px; margin-top: 12px; }
.pf-acao {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 0; border-radius: 13px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), background .2s, box-shadow .2s;
}
.pf-acao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pf-acao:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .09); }
.pf-acao.primaria { color: #fff; background: linear-gradient(180deg, #ff8a4c, #f0601f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 20px -8px rgba(255, 106, 40, .9); }
.pf-acao.primaria:hover { background: linear-gradient(180deg, #ff965c, #f56a2a); }
@media (prefers-reduced-motion: reduce) {
  .esc-topo h1, .esc-mapa, .esc-fora, .esc-fora .esc-fora-item, dialog.perfil-janela, .pf-agora, .pf-entregas li { animation: none !important; }
}

/* ================= Agenda (modelo Microsoft To Do) =================
   Uma janela de vidro escuro: listas a esquerda, a lista com a paisagem no
   topo, o detalhe a direita. Linhas planas separadas por um fio. */
.ag { min-height: calc(100vh - 120px); }
.ag-janela {
  display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: calc(100vh - 120px);
  border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #141822, #0f121a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .06), 0 50px 100px -40px rgba(0, 0, 0, .95);
  animation: tl3-sobe .55s cubic-bezier(.2, .9, .3, 1) backwards;
}
.ag.com-detalhe .ag-janela { grid-template-columns: 268px minmax(0, 1fr) 350px; }

/* ---- lateral ---- */
.ag-lado {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; overflow-y: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01)); border-right: 1px solid rgba(255, 255, 255, .06);
}
.ag-eu { display: flex; align-items: center; gap: 11px; padding: 2px 6px 14px; }
.ag-eu-foto {
  position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none;
  font-size: 12px; font-weight: 700; color: #fff; background: #2a303d; box-shadow: 0 0 0 2px #141822, 0 0 0 3.5px rgba(255, 122, 61, .6);
}
.ag-eu-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-eu-nome { flex: 1; display: grid; min-width: 0; }
.ag-eu-nome strong { font-size: 14.5px; font-weight: 650; color: #fff; }
.ag-eu-nome small { font-size: 11px; color: rgba(255, 255, 255, .42); }
button.ag-lupa {
  width: 34px; height: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .65); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); cursor: pointer;
  transition: background .15s, color .15s;
}
button.ag-lupa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
button.ag-lupa:hover, button.ag-lupa.ligada { background: rgba(255, 255, 255, .09); color: #fff; transform: none; }
.ag-busca {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; height: 38px; padding: 0 12px; border-radius: 11px;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.ag-busca[hidden] { display: none; }
.ag-busca:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .55), 0 0 0 3px rgba(255, 122, 61, .1); }
.ag-busca svg { width: 15px; height: 15px; flex: none; fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 2.1; stroke-linecap: round; }
.ag-busca input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 13px; color: #fff; }
.ag-listas { display: grid; gap: 2px; }
.ag-lista {
  --lc: 255, 122, 61;
  position: relative; display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 10px; border: 0; border-radius: 11px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .75); background: transparent; box-shadow: none; text-align: left;
  transition: background .15s, color .15s;
}
.ag-lista-ic {
  width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; color: rgb(var(--lc));
  background: rgba(var(--lc), .12); transition: background .2s, box-shadow .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.ag-lista-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ag-lista > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-lista em { font-style: normal; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .42); font-variant-numeric: tabular-nums; }
.ag-lista:hover { background: rgba(255, 255, 255, .045); color: #fff; transform: none; }
.ag-lista:hover .ag-lista-ic { transform: scale(1.08); }
.ag-lista.ativa {
  color: #fff; font-weight: 600;
  background: linear-gradient(90deg, rgba(var(--lc), .16), rgba(var(--lc), .04));
  box-shadow: inset 0 0 0 1px rgba(var(--lc), .22);
}
.ag-lista.ativa::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--lc)); box-shadow: 0 0 12px rgb(var(--lc)); }
.ag-lista.ativa .ag-lista-ic { background: rgb(var(--lc)); color: #fff; box-shadow: 0 4px 14px -4px rgba(var(--lc), .9); }
.ag-lista.ativa em { color: #fff; }
.l-meudia { --lc: 255, 176, 92; }
.l-importante { --lc: 244, 114, 182; }
.l-planejado { --lc: 45, 212, 191; }
.l-todas { --lc: 129, 140, 248; }
.l-equipe { --lc: 96, 165, 250; }
.l-concluidas { --lc: 52, 211, 153; }
.ag-secoes-topo { display: flex; align-items: center; gap: 8px; margin: 16px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.ag-secoes-topo::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .07); }
.ag-nova-secao, .ag-secao-nova {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 10px; border: 0; border-radius: 11px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: #ff9a62; background: transparent; box-shadow: none;
}
.ag-nova-secao svg { width: 28px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ag-nova-secao:hover { background: rgba(255, 122, 61, .08); transform: none; }
.ag-secao-nova { --lc: 255, 122, 61; background: rgba(255, 122, 61, .08); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .4); cursor: text; }
.ag-secao-nova input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 13.5px; color: #fff; }

/* ---- a lista ---- */
.ag-meio { --lc: 96, 140, 250; --lc2: 140, 110, 245; display: flex; flex-direction: column; min-width: 0; }
.ag-meio.l-meudia { --lc: 96, 140, 250; --lc2: 140, 110, 245; }
.ag-meio.l-importante { --lc: 236, 96, 160; --lc2: 170, 90, 220; }
.ag-meio.l-planejado { --lc: 30, 180, 170; --lc2: 40, 120, 200; }
.ag-meio.l-todas { --lc: 110, 120, 240; --lc2: 80, 90, 200; }
.ag-meio.l-equipe { --lc: 70, 150, 245; --lc2: 60, 110, 220; }
.ag-meio.l-concluidas { --lc: 40, 190, 140; --lc2: 30, 140, 160; }

.ag-banner {
  position: relative; display: flex; align-items: flex-end; gap: 12px; height: 188px; padding: 0 30px 24px; overflow: hidden; isolation: isolate; flex: none;
  background: linear-gradient(160deg, rgb(var(--lc2, var(--lc))) 0%, rgb(var(--lc)) 70%);
}
.ag-paisagem { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.ag-p-estrelas circle { fill: #fff; opacity: .5; animation: ag-brilha 3s ease-in-out infinite; animation-delay: calc(var(--k) * .4s); }
@keyframes ag-brilha { 50% { opacity: .1; } }
.ag-p-halo { fill: rgba(255, 255, 255, .08); animation: ag-pulsa 6s ease-in-out infinite; transform-origin: 640px 58px; }
@keyframes ag-pulsa { 50% { transform: scale(1.12); } }
.ag-p-sol { fill: rgba(255, 255, 255, .3); }
.ag-p-c1 { fill: rgba(255, 255, 255, .14); animation: ag-deriva 26s ease-in-out infinite alternate; }
.ag-p-c2 { fill: rgba(255, 255, 255, .1); animation: ag-deriva 34s ease-in-out infinite alternate-reverse; }
.ag-p-c3 { fill: rgba(10, 14, 30, .24); }
.ag-p-arv { fill: rgba(10, 14, 30, .3); }
@keyframes ag-deriva { to { transform: translateX(-18px); } }
.ag-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .25)); }
.ag-banner-texto { flex: 1; min-width: 0; animation: tl3-sobe .5s .1s cubic-bezier(.2, .9, .3, 1) backwards; }
.ag-banner h2 { margin: 0; font-size: 36px; font-weight: 300; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-banner p { margin: 3px 0 0; font-size: 14px; color: rgba(255, 255, 255, .88); }
.ag-banner-acoes { display: flex; gap: 6px; }
button.ag-lampada {
  position: relative; width: 42px; height: 42px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px); cursor: pointer; transition: background .15s, transform .2s;
}
button.ag-lampada svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.ag-lampada svg circle { fill: currentColor; stroke: none; }
button.ag-lampada:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
button.ag-lampada.ligada { background: rgba(255, 255, 255, .26); }
button.ag-lampada.ligada svg { fill: rgba(255, 230, 140, .55); filter: drop-shadow(0 0 8px rgba(255, 230, 140, .9)); }
button.ag-lampada i {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font-style: normal; font-size: 10.5px; font-weight: 700; color: rgb(var(--lc)); background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.ag-sugestoes { display: grid; gap: 4px; padding: 16px 30px; background: linear-gradient(180deg, rgba(var(--lc), .1), rgba(var(--lc), .03)); border-bottom: 1px solid rgba(255, 255, 255, .06); animation: tl3-sobe .3s ease backwards; }
.ag-sugestoes h4 { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ag-sugestoes p { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.ag-sug { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ag-sug span { flex: 1; display: grid; }
.ag-sug strong { font-size: 13.5px; font-weight: 500; color: #fff; }
.ag-sug small { font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.ag-sug button {
  width: 30px; height: 30px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  color: rgb(var(--lc)); background: rgba(var(--lc), .15); box-shadow: inset 0 0 0 1px rgba(var(--lc), .35); cursor: pointer; transition: all .15s;
}
.ag-sug button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ag-sug button:hover { color: #fff; background: rgb(var(--lc)); transform: rotate(90deg); }

.ag-lista-itens { display: flex; flex-direction: column; padding: 8px 14px 20px; gap: 2px; overflow-y: auto; }
.ag-item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 56px; padding: 8px 12px 8px 16px; border-radius: 12px; cursor: pointer;
  background: transparent; animation: tl3-desliza .3s cubic-bezier(.2, .9, .3, 1) backwards;
  transition: background .15s, box-shadow .2s, opacity .35s, transform .35s;
}
.ag-item::after { content: ""; position: absolute; left: 50px; right: 12px; bottom: -1px; height: 1px; background: rgba(255, 255, 255, .055); }
.ag-item:hover { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ag-item:hover::after { opacity: 0; }
.ag-item.aberto { background: linear-gradient(90deg, rgba(var(--lc), .14), rgba(var(--lc), .04)); box-shadow: inset 0 0 0 1px rgba(var(--lc), .35); }
.ag-item.aberto::after { opacity: 0; }
.ag-item.importante::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #f472b6; box-shadow: 0 0 10px rgba(244, 114, 182, .8); }
.ag-item.saindo { opacity: 0; transform: translateX(16px); }
.ag-item-corpo { display: grid; gap: 3px; min-width: 0; }
.ag-item-corpo strong { font-size: 14px; font-weight: 500; color: #fff; overflow-wrap: anywhere; }
.ag-item.feito .ag-item-corpo strong { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .42); }
.ag-item-corpo small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; font-size: 11.5px; color: rgba(255, 255, 255, .48); }
.ag-item-corpo small > b { color: rgba(255, 255, 255, .22); font-weight: 400; }
.ag-item-corpo small span { display: inline-flex; align-items: center; gap: 4px; }
.ag-item-corpo small svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ag-item-corpo small .atrasado { color: #fca5a5; }
.ag-item-corpo small .hoje { color: #93c5fd; }
.ag-meta-sol { color: #fcd34d; }
.ag-meta-sino { color: #c4b5fd; }
.ag-meta-secao i { width: 7px; height: 7px; border-radius: 2px; background: rgb(var(--sc)); }
.ag-meta-secao { color: rgba(var(--sc), 1); filter: brightness(1.3); }
.ag-meta-autor i {
  position: relative; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font-style: normal; font-size: 7px; font-weight: 700; color: #fff; background: #2a303d;
}
.ag-meta-autor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

button.ag-check {
  width: 22px; height: 22px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, .45); background: transparent; color: transparent; cursor: pointer; box-shadow: none;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
button.ag-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: scale(.5); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
button.ag-check:hover:not(:disabled) { color: rgb(var(--lc)); border-color: rgb(var(--lc)); box-shadow: 0 0 0 4px rgba(var(--lc), .12); transform: none; }
button.ag-check:hover svg { transform: scale(1); }
.ag-item.feito button.ag-check, .ag-passo.feito button.ag-check { background: rgb(var(--lc)); border-color: rgb(var(--lc)); color: #fff; box-shadow: 0 0 12px -2px rgba(var(--lc), .9); }
.ag-item.feito button.ag-check svg, .ag-passo.feito button.ag-check svg { transform: scale(1); }
button.ag-check:disabled { opacity: .4; cursor: not-allowed; }
button.ag-check.grande { width: 26px; height: 26px; margin-top: 3px; }
button.ag-check.mini { width: 18px; height: 18px; }
button.ag-estrela {
  width: 34px; height: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: rgba(255, 255, 255, .35); cursor: pointer;
  transition: color .15s, background .15s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
button.ag-estrela svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
button.ag-estrela:hover:not(:disabled) { color: #f472b6; background: rgba(244, 114, 182, .1); transform: none; }
button.ag-estrela.ligada { color: #f472b6; }
button.ag-estrela.ligada svg { fill: currentColor; filter: drop-shadow(0 0 6px rgba(244, 114, 182, .7)); }
button.ag-estrela.ligada:active { transform: scale(1.3) rotate(-12deg); }

/* adicionar */
.ag-novo {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; margin-top: 6px; padding: 0 14px 0 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .2s, box-shadow .2s;
}
.ag-novo:hover { background: rgba(255, 255, 255, .05); }
.ag-novo:focus-within, .ag-novo.aberto { background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(var(--lc), .55), 0 0 0 4px rgba(var(--lc), .08); }
.ag-novo-mais {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgb(var(--lc));
  box-shadow: 0 0 14px -2px rgba(var(--lc), .9); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.ag-novo:focus-within .ag-novo-mais { transform: rotate(90deg); }
.ag-novo-mais svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.ag-novo input[name="titulo"] { height: 54px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 14.5px; color: #fff; }
.ag-novo input[name="titulo"]::placeholder { color: rgb(var(--lc)); filter: brightness(1.35); }
.ag-novo-ferramentas { grid-column: 1 / -1; display: none; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.ag-novo.aberto .ag-novo-ferramentas { display: flex; animation: tl3-sobe .25s ease backwards; }
.ag-ferr {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .15s, color .15s, box-shadow .15s;
}
.ag-ferr > svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ag-ferr:hover { color: #fff; background: rgba(255, 255, 255, .09); transform: none; }
.ag-ferr.ligada { color: #fff; background: rgba(var(--lc), .18); box-shadow: inset 0 0 0 1px rgba(var(--lc), .5); }
.ag-ferr-estrela.ligada { color: #f472b6; background: rgba(244, 114, 182, .12); box-shadow: inset 0 0 0 1px rgba(244, 114, 182, .45); }
.ag-ferr-estrela.ligada svg { fill: currentColor; }
.ag-add {
  margin-left: auto; height: 32px; padding: 0 16px; border: 0; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #fff; cursor: pointer;
  background: rgb(var(--lc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -6px rgba(var(--lc), .9);
}
.ag-add:hover { transform: translateY(-1px); filter: brightness(1.08); }

.ag-feitos { display: flex; flex-direction: column; gap: 2px; }
.ag-feitos summary {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 16px 2px 6px; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.ag-feitos summary::-webkit-details-marker { display: none; }
.ag-feitos summary svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .2s; }
.ag-feitos[open] summary svg { transform: rotate(90deg); }
.ag-feitos summary em { font-style: normal; color: rgba(255, 255, 255, .45); }
.ag-vazio { display: grid; justify-items: center; gap: 6px; padding: 56px 20px; text-align: center; }
.ag-vazio > span {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 6px;
  background: rgba(var(--lc), .12); box-shadow: inset 0 0 0 1px rgba(var(--lc), .3), 0 0 40px -10px rgba(var(--lc), .8);
  animation: ag-flutua 4s ease-in-out infinite;
}
.ag-vazio > span svg { width: 30px; height: 30px; fill: none; stroke: rgb(var(--lc)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: brightness(1.3); }
.ag-vazio strong { font-size: 16px; font-weight: 600; color: #fff; }
.ag-vazio small { max-width: 340px; font-size: 13px; color: rgba(255, 255, 255, .45); }
@keyframes ag-flutua { 50% { transform: translateY(-6px); } }

/* ---- detalhe ---- */
.ag-detalhe {
  --lc: 96, 165, 250;
  display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01)); border-left: 1px solid rgba(255, 255, 255, .06);
  animation: ag-entra .3s cubic-bezier(.2, .9, .3, 1) backwards;
}
@keyframes ag-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.ag-det-topo { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 14px 12px; border-radius: 14px 14px 0 0; background: rgba(255, 255, 255, .045); }
.ag-det-titulo {
  min-height: 32px; padding: 4px 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; resize: none; overflow: hidden;
  font: inherit; font-size: 17px; font-weight: 650; line-height: 1.35; color: #fff;
}
.ag-passos { display: flex; flex-direction: column; padding: 0 12px 4px; margin-top: -10px; border-radius: 0 0 14px 14px; background: rgba(255, 255, 255, .045); }
.ag-passo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 13px; color: rgba(255, 255, 255, .85); }
.ag-passo.feito span { text-decoration: line-through; color: rgba(255, 255, 255, .4); }
.ag-passo-x { width: 24px; height: 24px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: rgba(255, 255, 255, .3); box-shadow: none; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.ag-passo:hover .ag-passo-x { opacity: 1; }
.ag-passo-x:hover { color: #fca5a5; transform: none; }
.ag-passo-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ag-passo-novo { display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
.ag-passo-novo span { width: 18px; text-align: center; color: rgb(var(--lc)); font-size: 18px; }
.ag-passo-novo input { flex: 1; height: 40px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 13px; color: #fff; }
.ag-passo-novo input::placeholder { color: rgb(var(--lc)); filter: brightness(1.3); }
.ag-det-bloco { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .045); }
.ag-det-bloco .ag-det-linha + .ag-det-linha { border-top: 1px solid rgba(255, 255, 255, .06); }
.ag-det-linha {
  --sc: var(--lc);
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer;
  font-size: 13px; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .045); box-shadow: none; text-align: left; transition: background .15s, color .15s;
}
.ag-det-bloco .ag-det-linha { border-radius: 0; background: transparent; }
.ag-det-linha > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag-det-linha span { flex: 1; display: grid; }
.ag-det-linha span small { font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.ag-det-linha:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; transform: none; }
.ag-det-linha.ligada { color: rgb(var(--sc)); filter: brightness(1.3); }
.ag-det-linha.ligada.sol { color: #fcd34d; filter: none; }
.ag-det-linha.atrasado { color: #fca5a5; filter: none; }
.ag-det-nota {
  flex: 1; min-height: 130px; padding: 14px 16px; border: 0 !important; border-radius: 14px; resize: none; font: inherit; font-size: 13px; line-height: 1.6; color: #fff;
  background: rgba(255, 255, 255, .045) !important; box-shadow: none !important; outline: none; transition: box-shadow .2s;
}
.ag-det-nota:focus { box-shadow: inset 0 0 0 1px rgba(var(--lc), .6), 0 0 0 3px rgba(var(--lc), .1) !important; }
.ag-det-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.ag-det-fechar, .ag-det-lixo {
  width: 34px; height: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); cursor: pointer;
}
.ag-det-fechar svg, .ag-det-lixo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-det-fechar:hover { color: #fff; background: rgba(255, 255, 255, .09); transform: none; }
.ag-det-lixo:hover { color: #fca5a5; background: rgba(248, 113, 113, .14); transform: none; }
.ag-detalhe [disabled] { cursor: not-allowed; }

/* ---- menuzinho (secao) ---- */
.ag-menu {
  position: fixed; z-index: 2147482500; min-width: 220px; max-width: 280px; padding: 8px; border-radius: 14px;
  background: rgba(20, 24, 33, .98); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px -14px rgba(0, 0, 0, .9);
  animation: tl3-sobe .2s ease backwards;
}
.ag-menu-cab { padding: 6px 8px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.ag-menu-item {
  --sc: 255, 255, 255;
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: rgba(255, 255, 255, .85); background: transparent; box-shadow: none; text-align: left;
}
.ag-menu-item i { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--sc)); box-shadow: 0 0 8px rgba(var(--sc), .7); }
.ag-menu-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ag-menu-item:hover { background: rgba(255, 255, 255, .07); transform: none; }
.ag-menu-item.ativo { background: rgba(var(--sc), .14); color: #fff; }
.ag-menu-item.perigo { color: #fca5a5; margin-top: 4px; }
.ag-menu-item.perigo:hover { background: rgba(248, 113, 113, .12); }
.ag-menu-vazio { margin: 0; padding: 8px 10px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.ag-menu-renomear input {
  width: 100%; height: 36px; padding: 0 10px; border: 0 !important; border-radius: 9px; font-size: 13px; color: #fff;
  background: rgba(0, 0, 0, .3) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; outline: none;
}
.ag-menu-renomear input:focus { box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .6) !important; }
.ag-menu-cores { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px 6px; }
.ag-menu-cores button {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgb(var(--sc));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.ag-menu-cores button:hover { transform: scale(1.15); }
.ag-menu-cores button.ativa { box-shadow: 0 0 0 2px #141822, 0 0 0 4px rgb(var(--sc)); }

/* ---- calendario do sistema ---- */
.cp-janela {
  position: fixed; z-index: 2147482600; width: 300px; padding: 12px; border-radius: 18px; color: #fff;
  background: linear-gradient(180deg, rgba(24, 28, 38, .98), rgba(16, 19, 27, .98)); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -16px rgba(0, 0, 0, .95);
  animation: te2-abre .28s cubic-bezier(.2, 1.2, .35, 1) both;
}
.cp-titulo { padding: 2px 4px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.cp-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.cp-atalhos button {
  display: grid; gap: 1px; padding: 8px 6px; border: 0; border-radius: 10px; cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.cp-atalhos button small { font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .4); text-transform: capitalize; }
.cp-atalhos button:hover { background: rgba(255, 122, 61, .12); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .45); transform: translateY(-1px); }
.cp-atalhos button.ativo { background: rgba(255, 122, 61, .2); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .7); }
.cp-mes { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
.cp-mes strong { font-size: 13.5px; font-weight: 650; }
.cp-nav {
  width: 30px; height: 30px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .7); box-shadow: none; cursor: pointer;
}
.cp-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-nav:hover { color: #fff; background: rgba(255, 255, 255, .1); transform: none; }
.cp-semana, .cp-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cp-semana span { padding: 4px 0; text-align: center; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .35); }
.cp-dia {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .85);
  background: transparent; box-shadow: none; font-variant-numeric: tabular-nums; transition: background .12s, color .12s, transform .15s;
}
.cp-dia:hover { background: rgba(255, 255, 255, .08); transform: none; }
.cp-dia.passado { color: rgba(255, 255, 255, .32); }
.cp-dia.hoje { color: #ff9a62; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .55); }
.cp-dia.escolhido { color: #fff; font-weight: 700; background: linear-gradient(180deg, #ff8a4c, #f0601f); box-shadow: 0 6px 16px -6px rgba(255, 106, 40, .9); }
.cp-hora { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); display: grid; gap: 10px; }
.cp-hora-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cp-hora-atalhos button {
  height: 30px; border: 0; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); font-variant-numeric: tabular-nums;
}
.cp-hora-atalhos button:hover { background: rgba(255, 255, 255, .1); transform: none; }
.cp-hora-atalhos button.ativo { color: #fff; background: rgba(255, 122, 61, .22); box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .7); }
.cp-relogio {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 12px;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.cp-relogio b { min-width: 46px; text-align: center; font-size: 26px; font-weight: 300; letter-spacing: .02em; font-variant-numeric: tabular-nums; cursor: ns-resize; }
.cp-relogio i { font-style: normal; font-size: 22px; color: rgba(255, 255, 255, .4); animation: ag-brilha 1.6s ease-in-out infinite; }
.cp-relogio button {
  width: 30px; height: 30px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  font-size: 17px; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .06); box-shadow: none; cursor: pointer;
}
.cp-relogio button:hover { color: #fff; background: rgba(255, 122, 61, .3); transform: none; }
.cp-pe { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.cp-limpar { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .55); background: transparent; box-shadow: none; cursor: pointer; }
.cp-limpar:hover { color: #fca5a5; background: rgba(248, 113, 113, .1); transform: none; }
.cp-ok {
  height: 34px; padding: 0 18px; border: 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #ff8a4c, #f0601f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -6px rgba(255, 106, 40, .9);
}
.cp-ok:hover { transform: translateY(-1px); }

/* ---- bloco do Inicio ---- */
.md-agenda-slot:empty { display: none; }
.md-agenda-slot { margin-bottom: 16px; }
.ag-inicio {
  --lc: 140, 110, 245;
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 80% at 100% 0%, rgba(140, 110, 245, .14), transparent 70%), linear-gradient(180deg, rgba(24, 28, 37, .92), rgba(14, 17, 23, .96)) !important;
  box-shadow: inset 0 0 0 1px rgba(140, 110, 245, .2), inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .9) !important;
  border-radius: 22px; padding: 18px 20px; animation: tl3-sobe .5s cubic-bezier(.2, .9, .3, 1) backwards;
}
.ag-inicio::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(140, 110, 245, .7), transparent); }
.ag-inicio > header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ag-inicio > header > div { flex: 1; min-width: 0; }
.ag-inicio h3 { margin: 0; font-size: 17px; font-weight: 650; color: #fff; }
.ag-inicio .md-sub b { color: #c4b5fd; }
.ag-inicio-ic {
  width: 42px !important; height: 42px !important; border-radius: 13px; display: grid; place-items: center; color: #c4b5fd;
  background: linear-gradient(180deg, rgba(140, 110, 245, .26), rgba(140, 110, 245, .08)); box-shadow: inset 0 0 0 1px rgba(140, 110, 245, .4), 0 8px 20px -8px rgba(140, 110, 245, .8);
}
.ag-inicio-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ag-inicio-abrir {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.ag-inicio-abrir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .2s; }
.ag-inicio-abrir:hover { color: #fff; background: rgba(140, 110, 245, .18); box-shadow: inset 0 0 0 1px rgba(140, 110, 245, .5); transform: none; }
.ag-inicio-abrir:hover svg { transform: translateX(2px); }
.ag-inicio-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ag-inicio-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 13px;
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .2s, background .2s, opacity .35s; animation: tl3-desliza .35s cubic-bezier(.2, .9, .3, 1) backwards;
}
.ag-inicio-item:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .05); }
.ag-inicio-item.atrasado { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .3); }
.ag-inicio-item.saindo { opacity: 0; transform: translateX(14px); }
.ag-inicio-item > span { display: grid; gap: 2px; min-width: 0; }
.ag-inicio-item strong { font-size: 13.5px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-inicio-item small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.ag-inicio-item small b { color: rgba(255, 255, 255, .22); font-weight: 400; }
.ag-inicio-item small svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ag-inicio-estrela svg { width: 15px; height: 15px; fill: #f472b6; stroke: #f472b6; filter: drop-shadow(0 0 5px rgba(244, 114, 182, .7)); }

@media (max-width: 1180px) {
  .ag.com-detalhe .ag-janela { grid-template-columns: 240px minmax(0, 1fr); }
  .ag.com-detalhe .ag-detalhe { position: fixed; right: 16px; top: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); z-index: 60; border-radius: 18px; background: #151922; box-shadow: 0 30px 70px rgba(0, 0, 0, .8); }
}
@media (max-width: 760px) {
  .ag-janela, .ag.com-detalhe .ag-janela { grid-template-columns: 1fr; }
  .ag-lado { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .ag-listas { grid-auto-flow: column; overflow-x: auto; }
  .ag-lista { white-space: nowrap; }
  .ag-banner { padding: 0 18px 16px; height: 150px; }
  .ag-banner h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-janela, .ag-item, .ag-detalhe, .ag-p-c1, .ag-p-c2, .ag-p-estrelas circle, .ag-p-halo, .ag-sugestoes, .ag-vazio > span,
  .cp-janela, .ag-menu, .ag-inicio, .ag-inicio-item, .ag-banner-texto { animation: none !important; }
}

/* ---- Agenda: banner v3 e listas ocultas ----
   Titulo em Plus Jakarta Sans (a fonte de exibicao da Agenda), selo de vidro
   em cima, progresso da lista embaixo; a paisagem desbota no fundo da janela
   em vez de terminar numa borda dura. */
.ag-banner { height: 220px; padding: 0 32px 26px; background:
  radial-gradient(60% 90% at 15% 0%, rgba(255, 255, 255, .22), transparent 60%),
  radial-gradient(50% 70% at 85% 20%, rgba(var(--lc2, var(--lc)), .9), transparent 70%),
  linear-gradient(160deg, rgb(var(--lc2, var(--lc))) 0%, rgb(var(--lc)) 75%); }
.ag-banner::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(15, 18, 26, .35) 75%, #12151d 100%); }
.ag-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ag-banner-texto { display: grid; gap: 6px; }
.ag-banner-selo {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content; height: 26px; padding: 0 11px 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(10px);
}
.ag-banner-selo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-banner h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .78)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .22));
}
.ag-banner p { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.ag-banner-progresso { width: min(260px, 70%); height: 5px; margin-top: 6px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.ag-banner-progresso i { display: block; height: 100%; border-radius: inherit; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .9); transform-origin: left; animation: tl3-cresce .9s .2s cubic-bezier(.2, .9, .3, 1) backwards; }
.ag-banner-conta { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.ag-eu-nome strong, .ag-lista, .ag-secoes-topo, .ag-item-corpo strong, .ag-det-titulo, .ag-vazio strong { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.ag-det-titulo { font-weight: 700; letter-spacing: -.015em; }

.ag-ocultas {
  display: flex; align-items: center; gap: 10px; height: 34px; margin: 6px 0 0; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; color: rgba(255, 255, 255, .5); background: transparent; box-shadow: none;
}
.ag-ocultas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ag-ocultas em { margin-left: auto; font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.ag-ocultas:hover { color: #fff; background: rgba(255, 255, 255, .05); transform: none; }
.ag-menu-dir { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #ff9a62; }
.ag-menu-item[class*="l-"] i { background: rgb(var(--lc)); box-shadow: 0 0 8px rgba(var(--lc), .7); }

/* Agenda: barra do detalhe com o X bem a mao */
.ag-det-barra { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 2px; }
.ag-det-barra span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
button.ag-det-x-topo {
  width: 36px; height: 36px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; line-height: 0;
  border: 0; border-radius: 11px; cursor: pointer; color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background .15s, color .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
button.ag-det-x-topo svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
button.ag-det-x-topo:hover { color: #fff; background: rgba(248, 113, 113, .2); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); transform: rotate(90deg); }

/* Calendario: hora e minuto digitaveis */
.cp-relogio .cp-num {
  width: 52px; height: 40px; padding: 0; border: 0 !important; border-radius: 10px; text-align: center; cursor: text;
  font-size: 26px; font-weight: 300; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff;
  background: transparent !important; box-shadow: none !important; outline: none; caret-color: #ff7a3d; transition: background .15s, box-shadow .15s;
}
.cp-relogio .cp-num:hover { background: rgba(255, 255, 255, .05) !important; }
.cp-relogio .cp-num:focus { background: rgba(255, 122, 61, .12) !important; box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .6) !important; }
.cp-relogio .cp-num::selection { background: rgba(255, 122, 61, .45); }

/* Agenda: janela de nova secao */
dialog.ag-nova-janela { width: min(440px, calc(100vw - 32px)); }
.ag-nova-cores { padding: 2px 0 0; gap: 10px; }
.ag-nova-cores button { width: 30px; height: 30px; }

/* ---- Agenda: o perfil do topo, vivo ----
   Anel em degrade girando em volta da foto, um brilho que respira, o ponto
   de online pulsando, o subtitulo que alterna (agenda / quantos para hoje)
   e, no hover, a foto cresce e o nome vira a saudacao da hora. */
.ag-eu { position: relative; border-radius: 14px; padding: 6px 6px 14px; transition: background .25s; }
.ag-eu-av { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; }
.ag-eu-anel {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from var(--ag-giro, 0deg), #ff7a3d, #c084fc, #60a5fa, #34d399, #ff7a3d);
  animation: ag-eu-gira 4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.ag-eu-anel::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: inherit; filter: blur(10px); opacity: .55; animation: ag-eu-respira 3s ease-in-out infinite;
}
@property --ag-giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ag-eu-gira { to { --ag-giro: 360deg; } }
@keyframes ag-eu-respira { 50% { opacity: .2; transform: scale(.92); } }
.ag-eu .ag-eu-foto {
  position: relative; z-index: 1; width: 36px; height: 36px; box-shadow: 0 0 0 2px #141822;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.4);
}
.ag-eu-on {
  position: absolute; z-index: 2; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 2.5px #141822; animation: md-pessoa-pulso-verde 1.8s ease-out infinite;
}
@keyframes md-pessoa-pulso-verde {
  0% { box-shadow: 0 0 0 2.5px #141822, 0 0 0 2.5px rgba(52, 211, 153, .6); }
  100% { box-shadow: 0 0 0 2.5px #141822, 0 0 0 9px rgba(52, 211, 153, 0); }
}
.ag-eu-nome strong, .ag-eu-nome small { position: relative; display: block; height: 1.3em; overflow: hidden; }
.ag-eu-nome strong { height: 20px; }
.ag-eu-nome small { height: 15px; }
.ag-eu-n1, .ag-eu-n2, .ag-eu-s1, .ag-eu-s2 { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .45s cubic-bezier(.2, .9, .3, 1), opacity .45s; }
.ag-eu-n2 { transform: translateY(110%); opacity: 0; color: #ffb07a; }
.ag-eu:hover .ag-eu-n1 { transform: translateY(-110%); opacity: 0; }
.ag-eu:hover .ag-eu-n2 { transform: none; opacity: 1; }
.ag-eu:hover { background: rgba(255, 255, 255, .03); }
.ag-eu:hover .ag-eu-foto { transform: scale(1.08) rotate(-4deg); }
.ag-eu-s1 { animation: ag-eu-troca-a 8s ease-in-out infinite; }
.ag-eu-s2 { animation: ag-eu-troca-b 8s ease-in-out infinite; color: #c4b5fd; }
@keyframes ag-eu-troca-a { 0%, 42% { transform: none; opacity: 1; } 50%, 92% { transform: translateY(-110%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ag-eu-troca-b { 0%, 42% { transform: translateY(110%); opacity: 0; } 50%, 92% { transform: none; opacity: 1; } 100% { transform: translateY(110%); opacity: 0; } }
.ag-eu-nome { animation: tl3-sobe .5s .1s cubic-bezier(.2, .9, .3, 1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .ag-eu-anel, .ag-eu-anel::after, .ag-eu-on, .ag-eu-s1, .ag-eu-s2, .ag-eu-nome { animation: none !important; }
  .ag-eu-s2 { display: none; }
}

/* Escritorio: a tag "no escritorio" do mapa */
.esc-hud-canto {
  left: 16px; bottom: 16px; height: 36px; gap: 9px; padding: 0 14px 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, rgba(20, 24, 33, .82), rgba(12, 15, 21, .88)); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .3), inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px -10px rgba(0, 0, 0, .9), 0 0 24px -10px rgba(52, 211, 153, .7);
  animation: tl3-sobe .5s .4s cubic-bezier(.2, .9, .3, 1) backwards;
}
.esc-hud-canto > i { display: none; }
.esc-hud-ping { position: relative; width: 8px; height: 8px; }
.esc-hud-ping i { position: absolute; inset: 0; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }
.esc-hud-ping::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(52, 211, 153, .7); animation: md-vivo-anel 1.8s ease-out infinite; }
.esc-hud-rostos { display: flex; }
.esc-hud-rostos:empty { display: none; }
.esc-hud-rostos i {
  position: relative; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font-style: normal; font-size: 8px; font-weight: 700; color: #fff; background: #2a303d; box-shadow: 0 0 0 2px #10131a;
}
.esc-hud-rostos i:first-child { margin-left: 0; }
.esc-hud-rostos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.esc-hud-canto b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 12px; color: #0b1410; background: #34d399; font-variant-numeric: tabular-nums; }
.esc-hud-txt { letter-spacing: .01em; }
.esc-hud-canto.vazio { color: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 26px -10px rgba(0, 0, 0, .9); }
.esc-hud-canto.vazio .esc-hud-ping i { background: #6b7280; box-shadow: none; }
.esc-hud-canto.vazio .esc-hud-ping::after { display: none; }
.esc-hud-canto.vazio b { color: #fff; background: rgba(255, 255, 255, .12); }

/* Escritorio a noite: luz indireta quente (amarelada) no lugar do azul.
   A sala escurece um pouco e ganha pocas de luz ambar sobre as mesas, a
   copa e o lounge, como luminarias; a luz respira devagar. */
.esc-luz[data-turno="noite"] {
  mix-blend-mode: normal;
  background:
    radial-gradient(18% 22% at 25% 12%, rgba(255, 196, 110, .22), transparent 70%),
    radial-gradient(16% 22% at 14% 62%, rgba(255, 186, 96, .2), transparent 70%),
    radial-gradient(14% 18% at 46% 26%, rgba(255, 200, 120, .18), transparent 70%),
    radial-gradient(14% 18% at 66% 26%, rgba(255, 200, 120, .18), transparent 70%),
    radial-gradient(14% 18% at 86% 26%, rgba(255, 200, 120, .18), transparent 70%),
    radial-gradient(14% 18% at 46% 54%, rgba(255, 190, 105, .16), transparent 70%),
    radial-gradient(14% 18% at 66% 54%, rgba(255, 190, 105, .16), transparent 70%),
    radial-gradient(14% 18% at 86% 54%, rgba(255, 190, 105, .16), transparent 70%),
    radial-gradient(14% 18% at 46% 80%, rgba(255, 180, 95, .14), transparent 70%),
    radial-gradient(14% 18% at 66% 80%, rgba(255, 180, 95, .14), transparent 70%),
    radial-gradient(14% 18% at 86% 80%, rgba(255, 180, 95, .14), transparent 70%),
    linear-gradient(180deg, rgba(40, 24, 8, .32), rgba(20, 12, 4, .42));
  animation: esc-noite-respira 7s ease-in-out infinite;
}
.esc-luz[data-turno="noite"]::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(255, 170, 80, .35), rgba(255, 140, 60, .25));
}
@keyframes esc-noite-respira { 50% { opacity: .86; } 52% { opacity: .9; } 54% { opacity: .84; } }
@media (prefers-reduced-motion: reduce) { .esc-luz[data-turno="noite"] { animation: none; } }

/* Escritorio a noite v2: a sala fica escura e a luz vem SO de alguns
   pontos — uma luminaria no lounge, a da copa e quatro de mesa. Escuridao
   em multiply; as luzes em screen, pequenas e quentes. */
.esc-luz[data-turno="noite"] {
  mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgb(70, 66, 82), rgb(52, 48, 62));
  animation: none;
}
.esc-luz[data-turno="noite"]::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(7% 11% at 17% 13%, rgba(255, 190, 100, .55), rgba(255, 170, 80, .18) 45%, transparent 70%),
    radial-gradient(7% 11% at 10% 57%, rgba(255, 196, 110, .55), rgba(255, 170, 80, .16) 45%, transparent 70%),
    radial-gradient(6% 9% at 64% 21%, rgba(255, 200, 120, .5), rgba(255, 170, 80, .14) 45%, transparent 70%),
    radial-gradient(6% 9% at 85% 21%, rgba(255, 200, 120, .5), rgba(255, 170, 80, .14) 45%, transparent 70%),
    radial-gradient(6% 9% at 45% 48%, rgba(255, 196, 110, .45), rgba(255, 170, 80, .12) 45%, transparent 70%),
    radial-gradient(6% 9% at 75% 74%, rgba(255, 196, 110, .45), rgba(255, 170, 80, .12) 45%, transparent 70%);
  animation: esc-lampada 6s ease-in-out infinite;
}
@keyframes esc-lampada { 0%, 100% { opacity: 1; } 48% { opacity: .9; } 50% { opacity: .97; } 52% { opacity: .88; } }
@media (prefers-reduced-motion: reduce) { .esc-luz[data-turno="noite"]::after { animation: none; } }

/* Escritorio a noite v3 — sem mix-blend-mode (a camada fica isolada e o
   blend nao enxerga o mapa: virava um cinza solido). Agora: um veu escuro
   translucido com FUROS nas luminarias (mascara em intersecao) e, por
   cima, um brilho quente leve so nos furos. */
.esc-luz[data-turno="noite"] {
  mix-blend-mode: normal;
  background: rgba(8, 9, 18, .58);
  --furo: radial-gradient(circle, transparent 0, transparent 30%, #000 75%);
  -webkit-mask-image:
    radial-gradient(9% 14% at 17% 13%, transparent 25%, #000 100%),
    radial-gradient(9% 14% at 10% 57%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 64% 21%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 85% 21%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 45% 48%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 75% 74%, transparent 25%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(9% 14% at 17% 13%, transparent 25%, #000 100%),
    radial-gradient(9% 14% at 10% 57%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 64% 21%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 85% 21%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 45% 48%, transparent 25%, #000 100%),
    radial-gradient(8% 12% at 75% 74%, transparent 25%, #000 100%);
  mask-composite: intersect;
  animation: none;
}
.esc-luz[data-turno="noite"]::after { display: none; }
/* o brilho quente: camada irma (o veu tem mascara, entao o brilho nao pode morar nele) */
.esc-hud:has(.esc-luz[data-turno="noite"])::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(7% 11% at 17% 13%, rgba(255, 190, 100, .28), transparent 70%),
    radial-gradient(7% 11% at 10% 57%, rgba(255, 196, 110, .28), transparent 70%),
    radial-gradient(6% 9% at 64% 21%, rgba(255, 200, 120, .24), transparent 70%),
    radial-gradient(6% 9% at 85% 21%, rgba(255, 200, 120, .24), transparent 70%),
    radial-gradient(6% 9% at 45% 48%, rgba(255, 196, 110, .22), transparent 70%),
    radial-gradient(6% 9% at 75% 74%, rgba(255, 196, 110, .22), transparent 70%);
  animation: esc-lampada 6s ease-in-out infinite;
}

/* Escritorio: a tag do mapa ganha movimento — um reflexo que passa, a borda
   que respira em verde, os rostinhos que flutuam um depois do outro e o
   numero que pulsa. No hover, a tag sobe e os rostos se abrem em leque. */
.esc-hud-canto { overflow: hidden; isolation: isolate; pointer-events: auto; transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); }
.esc-hud-canto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
  transform: translateX(-120%); animation: esc-tag-reflexo 5s 1.2s ease-in-out infinite;
}
@keyframes esc-tag-reflexo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.esc-hud-canto:not(.vazio) { animation: tl3-sobe .5s .4s cubic-bezier(.2, .9, .3, 1) backwards, esc-tag-borda 3s ease-in-out infinite; }
@keyframes esc-tag-borda {
  50% { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .6), inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px -10px rgba(0, 0, 0, .9), 0 0 30px -6px rgba(52, 211, 153, .8); }
}
.esc-hud-rostos i { animation: esc-tag-flutua 2.4s ease-in-out infinite; transition: margin .3s cubic-bezier(.2, .9, .3, 1.3); }
.esc-hud-rostos i:nth-child(2) { animation-delay: .3s; }
.esc-hud-rostos i:nth-child(3) { animation-delay: .6s; }
.esc-hud-rostos i:nth-child(4) { animation-delay: .9s; }
@keyframes esc-tag-flutua { 50% { transform: translateY(-2px); } }
.esc-hud-canto:not(.vazio) b { animation: esc-tag-numero 2.4s ease-in-out infinite; }
@keyframes esc-tag-numero { 50% { transform: scale(1.12); box-shadow: 0 0 12px rgba(52, 211, 153, .9); } }
.esc-hud-canto:hover { transform: translateY(-2px); }
.esc-hud-canto:hover .esc-hud-rostos i { margin-left: 2px; }
.esc-hud-canto:hover .esc-hud-rostos i:first-child { margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .esc-hud-canto, .esc-hud-canto::before, .esc-hud-rostos i, .esc-hud-canto b { animation: none !important; }
}

/* ---- Tarefas por cliente: o cartao no nivel do plano ----
   Usa as cores metalicas de .nivel-* (--m1 claro, --m2 meio, --m3 escuro,
   --mbrilho). Fio metalico no topo, reflexo do metal no canto, emblema
   grande e apagado de marca d'agua, moldura na foto e a placa do plano.
   Ouro brilha; Diamante tem a borda girando. */
.tl2-cc.tem-plano {
  background:
    radial-gradient(70% 45% at 100% 0%, color-mix(in srgb, var(--m2) 20%, transparent), transparent 70%),
    radial-gradient(80% 50% at 0% 0%, rgba(var(--ec), .05), transparent 70%),
    linear-gradient(180deg, rgba(24, 28, 37, .94), rgba(14, 17, 23, .97));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m2) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -28px rgba(0, 0, 0, .85);
}
.tl2-cc.tem-plano::before { left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--m3), var(--m1), var(--m2), var(--m3), transparent); opacity: .9; }
.tl2-cc.tem-plano:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m2) 55%, transparent), 0 28px 50px -24px var(--mbrilho); }
.tl2-cc-emblema {
  position: absolute; top: -18px; right: -18px; width: 120px; height: 120px; z-index: -1; pointer-events: none; opacity: .09;
  color: var(--m2); transform: rotate(-12deg); transition: opacity .3s, transform .5s cubic-bezier(.2, .9, .3, 1.3);
}
.tl2-cc-emblema svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.tl2-cc.tem-plano:hover .tl2-cc-emblema { opacity: .16; transform: rotate(-4deg) scale(1.05); }
.tl2-cc-moldura { flex: none; display: grid; place-items: center; border-radius: 16px; }
.tl2-cc-moldura.moldura-plano { border-radius: 17px; }
.tl2-cc-moldura .tl2-cc-foto { border-radius: 14px !important; }
.tl2-cc .tl2-quem { gap: 4px; }
.tl2-cc .tl2-quem .placa-plano { width: fit-content; height: 20px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.tl2-cc .tl2-quem .placa-plano svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.tl2-sem-plano { width: fit-content; padding: 1px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .05); }
/* Ouro: um brilho correndo pelo fio do topo */
.tl2-cc.nivel-ouro::before { background: linear-gradient(90deg, transparent, var(--m3), var(--m1), #fff, var(--m1), var(--m3), transparent); background-size: 200% 100%; animation: tl2-ouro 3.5s linear infinite; }
@keyframes tl2-ouro { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.tl2-cc.nivel-ouro .tl2-cc-emblema { opacity: .13; filter: drop-shadow(0 0 18px var(--mbrilho)); }
/* Diamante: borda iridescente girando em volta do cartao */
.tl2-cc.nivel-diamante::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; opacity: 1 !important; pointer-events: none;
  background: conic-gradient(from var(--tl3-giro, 0deg), var(--m3), var(--m2), var(--m1), var(--m2), var(--m3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tl3-gira 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tl2-cc.nivel-ouro::before, .tl2-cc.nivel-diamante::after { animation: none !important; }
}

/* Cliente sem foto: a foto padrao da agencia (icone-512.png) preenche o avatar. */
.foto-padrao { background: #12151c !important; overflow: hidden; }
.foto-padrao img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Tarefas por cliente: a faixa de filtros (plano, situacao, ordem) */
.tl2-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: -4px 0 16px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: tl3-sobe .4s cubic-bezier(.2, .9, .3, 1) backwards;
}
.tl2-filtro-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl2-filtro-rotulo { margin-right: 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.tl2-fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background .15s, color .15s, box-shadow .15s, transform .2s cubic-bezier(.2, .9, .3, 1.3);
}
.tl2-fchip em { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 99px; color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .07); font-variant-numeric: tabular-nums; }
.tl2-fchip svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.tl2-fchip:hover { color: #fff; transform: translateY(-1px); background: rgba(255, 255, 255, .08); }
.tl2-fchip.ativo { color: #fff; background: linear-gradient(180deg, #ff8a4c, #f0601f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -6px rgba(255, 106, 40, .9); }
.tl2-fchip.ativo em { color: #fff; background: rgba(0, 0, 0, .2); }
/* os chips de plano no metal do nivel */
.tl2-fchip[class*="nivel-"] svg { color: var(--m2); filter: drop-shadow(0 0 4px var(--mbrilho)); }
.tl2-fchip[class*="nivel-"].ativo { color: #1a1206; background: linear-gradient(135deg, var(--m1), var(--m2) 55%, var(--m3)); box-shadow: 0 6px 16px -6px var(--mbrilho), inset 0 1px 0 rgba(255, 255, 255, .5); }
.tl2-fchip[class*="nivel-"].ativo svg { color: rgba(0, 0, 0, .55); filter: none; }
.tl2-fchip.nivel-diamante.ativo { color: #0b1033; }
.tl2-fchip.s-atrasados:not(.ativo) em { color: #fca5a5; }
.tl2-fchip.s-emdia:not(.ativo) em { color: #6ee7b7; }
.tl2-ordem { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.tl2-ordem .sel-botao, .tl2-ordem select { height: 30px; font-size: 12px; border-radius: 9px; }
.tl2-flimpar { height: 30px; padding: 0 10px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 600; color: #ff9a62; background: transparent; cursor: pointer; box-shadow: none; }
.tl2-flimpar:hover { background: rgba(255, 122, 61, .1); transform: none; }