/* ==========================================================================
   IBV System — Liquid Glass
   Folha única, sem framework, sem build.

   O material tem três camadas somadas, e é a soma que lê como vidro:
     1. preenchimento translúcido em gradiente (a "espessura")
     2. realce especular de 1px na borda de cima (a luz batendo na quina)
     3. sombra difusa embaixo (a peça flutuando sobre o fundo)

   O fundo em aurora não é enfeite: é o que o desfoque tem para refratar.
   Sobre cinza chapado, vidro vira só cinza.

   REGRA INEGOCIÁVEL: translucidez só no FUNDO das superfícies.
   Texto, número e valor são sempre sólidos e opacos. Isto aqui é operado
   num balcão sob luz de loja — legibilidade ganha de estética sempre.
   ========================================================================== */

:root {
  /* tinta */
  --tinta:        #0f1c24;
  --tinta-media:  #43596a;
  --tinta-fraca:  #7590a3;

  /* acento — o mesmo teal do sistema desde o começo */
  --acento:       #0f6f8c;
  --acento-forte: #0a4f65;
  --acento-fraco: #e2f1f6;
  --acento-sombra: rgba(15, 111, 140, .28);

  /* semânticas */
  --ok:           #12704a;
  --ok-fraco:     #e2f3ea;
  --alerta:       #8a5600;
  --alerta-fraco: #fbf0dc;
  --erro:         #a8261d;
  --erro-fraco:   #fbeae8;
  --roxo:         #6b3fa0;
  --roxo-fraco:   #f0e7f8;
  /* pré-agendado: marcou dia e hora, mas não garante que vem. Magenta porque
     é o único tom que sobrou longe o bastante do vermelho de "não comprou" —
     e, junto dele, o tracejado, que diz "provisório" mesmo sem cor nenhuma. */
  --pre:          #9d3f6e;
  --pre-fraco:    #fbe7f1;

  /* Tinta do preenchimento de progresso na agenda.
     Valor próprio, não os tons "-fraco" das etiquetas: aqueles foram feitos
     pra caber atrás de seis letras e, esticados por um bloco inteiro, viram
     quase branco. E dois deles eram praticamente iguais — o rosa do
     pré-agendado e o vermelho do "não comprou" —, que é justamente o par que
     não pode se confundir: um é quem talvez venha, o outro é quem já foi
     embora sem comprar.
     O texto por cima é a tinta escura do sistema, então dá pra carregar bem
     mais do que parece sem prejudicar a leitura. */
  /* Superfícies que eram branco cravado no CSS. Viraram variável porque o
     arquivo declara o tema escuro DUAS vezes — uma pro computador que já
     está no escuro, outra pra quem escolhe o tema na mão — e o escuro delas
     existia só na segunda. Quem tinha o computador no escuro e nunca mexeu
     no tema via cartão branco com texto claro por cima: ilegível. */
  --bloco:         rgba(255, 255, 255, .48);
  --bloco-alto:    rgba(255, 255, 255, .50);
  --bloco-cabeca:  rgba(255, 255, 255, .35);
  --trilho:        rgba( 15,  28,  36, .07);

  --enche-agendado:    #dae7ee;
  --enche-pre:         #f4c6e3;
  --enche-confirmado:  #b3e0f0;
  --enche-compareceu:  #d9c3f2;
  --enche-patologia:   #f8dfa8;
  --enche-comprou:     #a3e0bf;
  --enche-nao-comprou: #f7c2b8;

  /* o material */
  --vidro:        linear-gradient(157deg, rgba(255,255,255,.76), rgba(255,255,255,.50));
  --vidro-alto:   linear-gradient(157deg, rgba(255,255,255,.90), rgba(255,255,255,.68));
  --vidro-botao:  rgba(255,255,255,.62);
  --desfoque:     saturate(180%) blur(26px);

  --brilho:       inset 0 1px 0 rgba(255,255,255,.95),
                  inset 0 0 0 1px rgba(255,255,255,.55);
  --sombra:       var(--brilho), 0 12px 30px rgba(11, 40, 55, .11);
  --sombra-mini:  inset 0 1px 0 rgba(255,255,255,.85), 0 3px 10px rgba(11, 40, 55, .09);
  --sombra-alta:  var(--brilho), 0 20px 46px rgba(11, 40, 55, .16);

  /* campo é o inverso do painel: afundado, não elevado */
  --campo:        rgba(255,255,255,.42);
  --campo-sombra: inset 0 1px 3px rgba(11,40,55,.10), inset 0 0 0 1px rgba(255,255,255,.55);

  --divisor:      rgba(15, 28, 36, .10);
  --divisor-fraco: rgba(15, 28, 36, .055);

  --raio:         14px;
  --raio-grande:  22px;
  --menu-larg:    212px;
  --topo-alt:     60px;

  --fundo-base:   #eaf1f4;
  --aurora:
    radial-gradient(1200px 660px at 8% -14%,  rgba(126, 208, 227, .70), transparent 62%),
    radial-gradient(1000px 600px at 94% 2%,   rgba(152, 191, 236, .58), transparent 60%),
    radial-gradient(1100px 720px at 55% 112%, rgba(148, 221, 197, .55), transparent 62%);
}

/* --------------------------------------------------------------- escuro ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta:        #e9f2f5;
    --tinta-media:  rgba(233, 242, 245, .74);
    --tinta-fraca:  rgba(233, 242, 245, .50);

    --acento:       #57bcd8;
    --acento-forte: #8ad6ec;
    --acento-fraco: rgba(87, 188, 216, .16);
    --acento-sombra: rgba(20, 120, 150, .50);

    --ok:           #6ed3a3;  --ok-fraco:     rgba(52, 199, 124, .16);
    --alerta:       #e8bd72;  --alerta-fraco: rgba(255, 180, 60, .15);
    --erro:         #f0958c;  --erro-fraco:   rgba(255, 110, 100, .16);
    --roxo:         #c9a6e8;  --roxo-fraco:   rgba(160, 100, 220, .18);
    --pre:          #f0a3c6;  --pre-fraco:    rgba(230, 120, 175, .17);

    --bloco:         rgba(255, 255, 255, .07);
    --bloco-alto:    rgba(255, 255, 255, .08);
    --bloco-cabeca:  rgba(255, 255, 255, .07);
    --trilho:        rgba(255, 255, 255, .09);

    --enche-agendado:    rgba(255, 255, 255, .13);
    /* Menos alfa que no claro: aqui o texto é claro sobre o bloco, e a cor
       forte demais o empurra pro meio-tom, onde ele some. Cor definida sem
       roubar a leitura do nome — que é o que se lê primeiro. */
    --enche-pre:         rgba(235, 110, 175, .34);
    --enche-confirmado:  rgba( 70, 180, 216, .34);
    --enche-compareceu:  rgba(155,  95, 225, .38);
    --enche-patologia:   rgba(250, 175,  55, .30);
    --enche-comprou:     rgba( 42, 200, 120, .34);
    --enche-nao-comprou: rgba(250,  95,  85, .30);

    --vidro:       linear-gradient(157deg, rgba(255,255,255,.15), rgba(255,255,255,.055));
    --vidro-alto:  linear-gradient(157deg, rgba(255,255,255,.21), rgba(255,255,255,.09));
    --vidro-botao: rgba(255,255,255,.13);

    --brilho:      inset 0 1px 0 rgba(255,255,255,.26),
                   inset 0 0 0 1px rgba(255,255,255,.10);
    --sombra:      var(--brilho), 0 16px 38px rgba(2, 12, 18, .40);
    --sombra-mini: inset 0 1px 0 rgba(255,255,255,.20), 0 3px 10px rgba(2, 12, 18, .34);
    --sombra-alta: var(--brilho), 0 24px 54px rgba(2, 12, 18, .50);

    --campo:        rgba(0,0,0,.20);
    --campo-sombra: inset 0 1px 3px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08);

    --divisor:       rgba(255,255,255,.13);
    --divisor-fraco: rgba(255,255,255,.065);

    --fundo-base: #06181f;
    --aurora:
      radial-gradient(1200px 660px at 8% -14%,  rgba(22, 128, 160, .52), transparent 62%),
      radial-gradient(1000px 600px at 94% 2%,   rgba(36,  88, 136, .48), transparent 60%),
      radial-gradient(1100px 720px at 55% 112%, rgba(18, 106,  92, .40), transparent 62%);
  }
}

/* Escolha explícita de tema escuro vence o sistema. */
:root[data-tema="escuro"] {
    --tinta:        #e9f2f5;
    --tinta-media:  rgba(233, 242, 245, .74);
    --tinta-fraca:  rgba(233, 242, 245, .50);

    --acento:       #57bcd8;
    --acento-forte: #8ad6ec;
    --acento-fraco: rgba(87, 188, 216, .16);
    --acento-sombra: rgba(20, 120, 150, .50);

    --ok:           #6ed3a3;  --ok-fraco:     rgba(52, 199, 124, .16);
    --alerta:       #e8bd72;  --alerta-fraco: rgba(255, 180, 60, .15);
    --erro:         #f0958c;  --erro-fraco:   rgba(255, 110, 100, .16);
    --roxo:         #c9a6e8;  --roxo-fraco:   rgba(160, 100, 220, .18);
    --pre:          #f0a3c6;  --pre-fraco:    rgba(230, 120, 175, .17);

    --bloco:         rgba(255, 255, 255, .07);
    --bloco-alto:    rgba(255, 255, 255, .08);
    --bloco-cabeca:  rgba(255, 255, 255, .07);
    --trilho:        rgba(255, 255, 255, .09);

    --enche-agendado:    rgba(255, 255, 255, .13);
    /* Menos alfa que no claro: aqui o texto é claro sobre o bloco, e a cor
       forte demais o empurra pro meio-tom, onde ele some. Cor definida sem
       roubar a leitura do nome — que é o que se lê primeiro. */
    --enche-pre:         rgba(235, 110, 175, .34);
    --enche-confirmado:  rgba( 70, 180, 216, .34);
    --enche-compareceu:  rgba(155,  95, 225, .38);
    --enche-patologia:   rgba(250, 175,  55, .30);
    --enche-comprou:     rgba( 42, 200, 120, .34);
    --enche-nao-comprou: rgba(250,  95,  85, .30);

    --vidro:       linear-gradient(157deg, rgba(255,255,255,.15), rgba(255,255,255,.055));
    --vidro-alto:  linear-gradient(157deg, rgba(255,255,255,.21), rgba(255,255,255,.09));
    --vidro-botao: rgba(255,255,255,.13);

    --brilho:      inset 0 1px 0 rgba(255,255,255,.26),
                   inset 0 0 0 1px rgba(255,255,255,.10);
    --sombra:      var(--brilho), 0 16px 38px rgba(2, 12, 18, .40);
    --sombra-mini: inset 0 1px 0 rgba(255,255,255,.20), 0 3px 10px rgba(2, 12, 18, .34);
    --sombra-alta: var(--brilho), 0 24px 54px rgba(2, 12, 18, .50);

    --campo:        rgba(0,0,0,.20);
    --campo-sombra: inset 0 1px 3px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08);

    --divisor:       rgba(255,255,255,.13);
    --divisor-fraco: rgba(255,255,255,.065);

    --fundo-base: #06181f;
    --aurora:
      radial-gradient(1200px 660px at 8% -14%,  rgba(22, 128, 160, .52), transparent 62%),
      radial-gradient(1000px 600px at 94% 2%,   rgba(36,  88, 136, .48), transparent 60%),
      radial-gradient(1100px 720px at 55% 112%, rgba(18, 106,  92, .40), transparent 62%);
  }
/* o modo futurista herda a paleta escura da Missao do dia; os ajustes de cor dele vêm no fim do arquivo */
:root[data-tema="futuro"] {
    --tinta:        #e9f2f5;
    --tinta-media:  rgba(233, 242, 245, .74);
    --tinta-fraca:  rgba(233, 242, 245, .50);

    --acento:       #57bcd8;
    --acento-forte: #8ad6ec;
    --acento-fraco: rgba(87, 188, 216, .16);
    --acento-sombra: rgba(20, 120, 150, .50);

    --ok:           #6ed3a3;  --ok-fraco:     rgba(52, 199, 124, .16);
    --alerta:       #e8bd72;  --alerta-fraco: rgba(255, 180, 60, .15);
    --erro:         #f0958c;  --erro-fraco:   rgba(255, 110, 100, .16);
    --roxo:         #c9a6e8;  --roxo-fraco:   rgba(160, 100, 220, .18);
    --pre:          #f0a3c6;  --pre-fraco:    rgba(230, 120, 175, .17);

    --bloco:         rgba(255, 255, 255, .07);
    --bloco-alto:    rgba(255, 255, 255, .08);
    --bloco-cabeca:  rgba(255, 255, 255, .07);
    --trilho:        rgba(255, 255, 255, .09);

    --enche-agendado:    rgba(255, 255, 255, .13);
    /* Menos alfa que no claro: aqui o texto é claro sobre o bloco, e a cor
       forte demais o empurra pro meio-tom, onde ele some. Cor definida sem
       roubar a leitura do nome — que é o que se lê primeiro. */
    --enche-pre:         rgba(235, 110, 175, .34);
    --enche-confirmado:  rgba( 70, 180, 216, .34);
    --enche-compareceu:  rgba(155,  95, 225, .38);
    --enche-patologia:   rgba(250, 175,  55, .30);
    --enche-comprou:     rgba( 42, 200, 120, .34);
    --enche-nao-comprou: rgba(250,  95,  85, .30);

    --vidro:       linear-gradient(157deg, rgba(255,255,255,.15), rgba(255,255,255,.055));
    --vidro-alto:  linear-gradient(157deg, rgba(255,255,255,.21), rgba(255,255,255,.09));
    --vidro-botao: rgba(255,255,255,.13);

    --brilho:      inset 0 1px 0 rgba(255,255,255,.26),
                   inset 0 0 0 1px rgba(255,255,255,.10);
    --sombra:      var(--brilho), 0 16px 38px rgba(2, 12, 18, .40);
    --sombra-mini: inset 0 1px 0 rgba(255,255,255,.20), 0 3px 10px rgba(2, 12, 18, .34);
    --sombra-alta: var(--brilho), 0 24px 54px rgba(2, 12, 18, .50);

    --campo:        rgba(0,0,0,.20);
    --campo-sombra: inset 0 1px 3px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08);

    --divisor:       rgba(255,255,255,.13);
    --divisor-fraco: rgba(255,255,255,.065);

    --fundo-base: #06181f;
    --aurora:
      radial-gradient(1200px 660px at 8% -14%,  rgba(22, 128, 160, .52), transparent 62%),
      radial-gradient(1000px 600px at 94% 2%,   rgba(36,  88, 136, .48), transparent 60%),
      radial-gradient(1100px 720px at 55% 112%, rgba(18, 106,  92, .40), transparent 62%);
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--tinta);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  background: var(--fundo-base);
  /* Rede de segurança: uma linha de botões ou uma tabela larga que estoure
     a largura em algum canto do sistema não deveria empurrar a página
     inteira de lado — quem tem overflow de verdade (.tabela-rolagem etc.)
     já rola sozinho por dentro. */
  overflow-x: hidden;
}

/* A aurora fica fixa atrás de tudo: o vidro precisa de algo que não role
   junto, senão o desfoque não muda quando a página se move. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--aurora);
  pointer-events: none;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

.sr, .pular:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  background: var(--vidro-alto); backdrop-filter: var(--desfoque);
  padding: .6rem .9rem; border-radius: 99px; box-shadow: var(--sombra);
}

/* --------------------------------------------------------------- topo ---- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .9rem;
  height: var(--topo-alt); padding: 0 1rem;
  background: var(--vidro);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  box-shadow: inset 0 -1px 0 var(--divisor), inset 0 1px 0 rgba(255,255,255,.7);
}

.marca {
  display: flex; align-items: center; gap: .3rem;
  font-weight: 800; letter-spacing: -.025em; font-size: 1.06rem;
  color: var(--tinta); text-decoration: none;
  padding: .45rem .9rem; border-radius: 99px;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini);
}
.marca:hover { text-decoration: none; }
.marca span { color: var(--acento); font-weight: 500; }
/* o símbolo do Instituto (óculos + quadrado) ao lado do nome do sistema */
.marca { gap: .55rem; }
.marca-simbolo { display: block; width: 50px; height: auto; flex: 0 0 auto; }
.marca .marca-nome { display: inline-flex; gap: .3rem; color: #032859; font-weight: 800; }
.marca .marca-nome span { color: #0391b2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-simbolo { background: #fff; border-radius: 7px; padding: 2px 4px; width: 58px; }
  :root:not([data-tema="claro"]) .marca .marca-nome { color: var(--tinta); }
  :root:not([data-tema="claro"]) .marca .marca-nome span { color: var(--acento); }
}
:root[data-tema="escuro"] .marca-simbolo { background: #fff; border-radius: 7px; padding: 2px 4px; width: 58px; }
:root[data-tema="escuro"] .marca .marca-nome { color: var(--tinta); }
:root[data-tema="escuro"] .marca .marca-nome span { color: var(--acento); }
.marca-login img { display: block; width: 204px; height: auto; margin: 0 auto .4rem; }
.marca-login { text-align: center; }
.marca-login-sistema { display: inline-flex; gap: .3rem; font-size: .8rem; letter-spacing: .12em; color: #032859; }
.marca-login .marca-login-sistema span { margin-left: 0; color: #0391b2; }

.troca-loja { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.troca-loja select {
  border-radius: 99px; padding: .45rem 1rem; font-size: .85rem; font-weight: 600;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini); border: 0;
}
.loja-fixa {
  margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--tinta-media);
  background: var(--vidro-alto); padding: .4rem .9rem; border-radius: 99px;
  box-shadow: var(--sombra-mini);
}

.usuario {
  display: flex; align-items: center; gap: .6rem; font-size: .85rem;
  padding: .3rem .35rem .3rem .95rem; border-radius: 99px;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini);
}
.troca-loja + .usuario, .loja-fixa + .usuario { margin-left: .6rem; }
.usuario .papel {
  color: var(--tinta-fraca); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; border-left: 1px solid var(--divisor); padding-left: .6rem;
}
.usuario form { margin: 0; }

/* --------------------------------------------------------------- menu ---- */
.corpo { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1rem 0; }

.menu {
  position: sticky; top: calc(var(--topo-alt) + 1rem);
  width: var(--menu-larg); flex: 0 0 var(--menu-larg);
  padding: .6rem; display: flex; flex-direction: column; gap: 2px;
  background: var(--vidro);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  max-height: calc(100vh - var(--topo-alt) - 2rem); overflow-y: auto;
}

.menu a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem; border-radius: 11px;
  color: var(--tinta-media); text-decoration: none; font-size: .89rem;
}
.menu a:hover { background: var(--vidro-botao); color: var(--tinta); text-decoration: none; }
.menu a.ativo {
  background: var(--vidro-alto); color: var(--acento-forte); font-weight: 650;
  box-shadow: var(--sombra-mini);
}
/* Vender é a ação mais repetida do dia — precisa saltar aos olhos mesmo
   quando a pessoa não está nela. Mas pílula preenchida é exatamente a
   linguagem de ".ativo" ("estou aqui agora"): usada em toda página, ela
   engana quem não está no PDV. O destaque aqui é texto (caixa alta, negrito,
   cor) e o chip atrás do ícone — nunca a pílula cheia da própria página. */
.menu a.destaque {
  color: var(--acento-forte); font-weight: 750;
  text-transform: uppercase; letter-spacing: .04em; font-size: .8rem;
}
.menu a.destaque .icone { background: var(--acento-fraco); border-radius: 8px; opacity: 1; }
.menu a.destaque:hover { background: var(--acento-fraco); color: var(--acento-forte); }
.menu a.destaque.ativo {
  background: var(--vidro-alto); color: var(--acento-forte);
  box-shadow: var(--sombra-mini), inset 3px 0 0 var(--acento);
}
.menu .icone { width: 1.1rem; text-align: center; opacity: .85; font-size: .92rem; }
.menu-mais, .menu-mobile-painel { display: none; }

/* ------------------------------------------------------------ conteúdo ---- */
main { flex: 1; min-width: 0; padding: 0 .25rem 4rem; }

.cabecalho-pagina {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: .25rem 0 1rem; padding: 0 .25rem;
}
.cabecalho-pagina h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
.cabecalho-pagina-titulos { min-width: 0; }
.cabecalho-subtitulo { margin: .2rem 0 0; font-size: .84rem; color: var(--tinta-media); }
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.cartao {
  background: var(--vidro);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  padding: 1.15rem; margin-bottom: 1rem;
}
.cartao > :last-child { margin-bottom: 0; }
.cartao-titulo {
  display: flex; align-items: center; gap: .75rem;
  margin: -1.15rem -1.15rem 1rem; padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--divisor);
  font-weight: 650; font-size: .95rem; letter-spacing: -.01em;
}
.cartao-titulo .acoes { margin-left: auto; }

/* Cartão que pede uma ação — o caixa fechado no PDV, por exemplo. */
.destaque-acao { box-shadow: var(--sombra-alta), 0 0 0 2px var(--acento); }

.grade { display: grid; gap: 1rem; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }

/* --------------------------------------------------------------- kpis ---- */
.kpi {
  background: var(--vidro);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: .95rem 1.05rem;
}
.kpi .rotulo {
  font-size: .7rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca);
}
.kpi .valor { font-size: 1.6rem; font-weight: 750; letter-spacing: -.035em; margin-top: .2rem; }
.kpi .nota { font-size: .78rem; color: var(--tinta-media); margin-top: .2rem; }
.kpi.bom .valor  { color: var(--ok); }
.kpi.ruim .valor { color: var(--erro); }
.agenda-kpis .kpi { display: flex; gap: .75rem; align-items: flex-start; }
.agenda-kpis .kpi-icone {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 11px; font-size: 1rem; font-weight: 800;
}
.agenda-kpis .kpi-marcadas .kpi-icone,
.agenda-kpis .kpi-confirmadas .kpi-icone { background: var(--acento-fraco); color: var(--acento-forte); }
.agenda-kpis .kpi-compareceram .kpi-icone { background: var(--roxo-fraco); color: var(--roxo); }
.agenda-kpis .kpi-compraram .kpi-icone { background: var(--ok-fraco); color: var(--ok); }
.agenda-kpis .kpi-tendencia.positiva { color: var(--ok); }
.agenda-kpis .kpi-tendencia.negativa { color: var(--erro); }

/* --------------------------------------------------------- dinheiro em jogo -- */
/* Três naturezas de dinheiro lado a lado: fato (verde), disputa em aberto
   (âmbar) e estimativa (azul) — a cor already existe no resto do sistema pra
   essas três ideias, então aqui só reaproveita o mesmo vocabulário. */
.dinheiro-jogo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  margin-bottom: 1rem;
}
.dinheiro-jogo-2 { grid-template-columns: repeat(2, 1fr); }
.dinheiro-jogo-item {
  background: var(--vidro); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: .85rem 1rem;
  border-left: 4px solid var(--tinta-fraca); display: grid; gap: .15rem;
}
.dinheiro-jogo-item.ok     { border-left-color: var(--ok); }
.dinheiro-jogo-item.alerta { border-left-color: var(--alerta); }
.dinheiro-jogo-item.acento { border-left-color: var(--acento); }
.dinheiro-jogo-rotulo {
  font-size: .7rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-fraca);
}
.dinheiro-jogo-valor { font-size: 1.45rem; font-weight: 750; letter-spacing: -.03em; }
.dinheiro-jogo-item.ok     .dinheiro-jogo-valor { color: var(--ok); }
.dinheiro-jogo-item.alerta .dinheiro-jogo-valor { color: var(--alerta); }
.dinheiro-jogo-item.acento .dinheiro-jogo-valor { color: var(--acento-forte); }
.dinheiro-jogo-nota { font-size: .72rem; color: var(--tinta-fraca); }
@media (max-width: 720px) {
  .dinheiro-jogo { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- tabela ---- */
.tabela-rolagem { overflow-x: auto; margin: 0 -1.15rem; padding: 0 1.15rem; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th {
  text-align: left; font-weight: 650; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca); padding: .55rem .6rem;
  border-bottom: 1px solid var(--divisor); white-space: nowrap;
}
tbody td { padding: .6rem; border-bottom: 1px solid var(--divisor-fraco); vertical-align: middle; }
tbody tr:hover { background: var(--vidro-botao); }
tbody tr:last-child td { border-bottom: 0; }
.num, th.num, td.num { text-align: right; white-space: nowrap; }
.centro { text-align: center; }
.encolhe { width: 1%; white-space: nowrap; }

.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--tinta-fraca); }

/* ------------------------------------------------------------ etiquetas ---- */
.tag {
  display: inline-block; padding: .18rem .55rem; border-radius: 99px;
  font-size: .73rem; font-weight: 650; line-height: 1.5; white-space: nowrap;
  background: var(--vidro-botao); color: var(--tinta-media);
  box-shadow: inset 0 0 0 1px var(--divisor);
}
.tag-ok     { background: var(--ok-fraco);     color: var(--ok);     box-shadow: none; }
.tag-alerta { background: var(--alerta-fraco); color: var(--alerta); box-shadow: none; }
.tag-erro   { background: var(--erro-fraco);   color: var(--erro);   box-shadow: none; }
.tag-info   { background: var(--acento-fraco); color: var(--acento-forte); box-shadow: none; }
.tag-roxo   { background: var(--roxo-fraco);   color: var(--roxo);   box-shadow: none; }
.tag-cinza  { background: var(--campo);        color: var(--tinta-media); }
/* Tracejada: a borda carrega o "provisório" para quem não distingue a cor. */
.tag-pre    { background: var(--pre-fraco);    color: var(--pre);
              box-shadow: none; border: 1px dashed var(--pre); padding: .11rem .5rem; }

.apagado { color: var(--tinta-fraca); }
.pequeno { font-size: .82rem; }
.forte   { font-weight: 650; }

/* -------------------------------------------------------------- avisos ---- */
.aviso {
  padding: .8rem 1rem; border-radius: var(--raio); margin-bottom: 1rem;
  font-size: .9rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.aviso-ok     { background: var(--ok-fraco);     color: var(--ok); }
.aviso-erro   { background: var(--erro-fraco);   color: var(--erro); }
.aviso-alerta { background: var(--alerta-fraco); color: var(--alerta); }
.aviso-info   { background: var(--acento-fraco); color: var(--acento-forte); }
.aviso a { color: inherit; text-decoration: underline; }

/* ----------------------------------------------------------- formulário ---- */
.campo { margin-bottom: .9rem; position: relative; }
.campo label, .rotulo {
  display: block; font-size: .78rem; font-weight: 650;
  color: var(--tinta-media); margin-bottom: .3rem;
}
.campo .dica { font-size: .78rem; color: var(--tinta-fraca); margin-top: .3rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=tel], input[type=search],
select, textarea {
  width: 100%; padding: .6rem .8rem; font: inherit; font-size: .92rem;
  color: var(--tinta); border: 0; border-radius: 11px;
  background: var(--campo); box-shadow: var(--campo-sombra);
  appearance: none; -webkit-appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-fraca) 50%),
                    linear-gradient(135deg, var(--tinta-fraca) 50%, transparent 50%);
  background-position: right 1rem center, right .7rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px;
  background: var(--vidro-alto);
}
input[readonly], input:disabled, select:disabled {
  color: var(--tinta-media); box-shadow: inset 0 0 0 1px var(--divisor); background: transparent;
}
textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }

.campo-erro input, .campo-erro select { box-shadow: inset 0 0 0 2px var(--erro); }
.msg-erro { color: var(--erro); font-size: .8rem; margin-top: .3rem; }

fieldset {
  border: 0; border-radius: var(--raio); padding: 1rem; margin: 0 0 1rem;
  background: var(--campo); box-shadow: var(--campo-sombra);
}
legend {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-fraca); padding: 0 .4rem;
}

.linha-campos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.linha-campos .campo { margin-bottom: 0; }

.checa { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; margin-bottom: .6rem; }
.checa input { width: auto; margin-top: .2rem; box-shadow: none; accent-color: var(--acento); }
.checa label { margin: 0; font-weight: 400; color: var(--tinta); }

/* -------------------------------------------------------------- botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.1rem; font: inherit; font-size: .88rem; font-weight: 650;
  border-radius: 99px; border: 0; cursor: pointer; text-decoration: none;
  white-space: nowrap; color: #fff; background: var(--acento);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px var(--acento-sombra);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover {
  background: var(--acento-forte); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px var(--acento-sombra);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-vazio {
  background: var(--vidro-alto); color: var(--tinta-media);
  box-shadow: var(--sombra-mini);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.btn-vazio:hover { background: var(--vidro-alto); color: var(--tinta); box-shadow: var(--sombra); }

.btn-perigo { background: var(--erro); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(168,38,29,.28); }
.btn-perigo:hover { background: #8c1d17; }

.btn-mini { padding: .38rem .8rem; font-size: .8rem; }
.btn-grande { padding: .78rem 1.6rem; font-size: 1rem; }
.btn-bloco { width: 100%; }

/* Em tela sensível ao toque o dedo precisa de mais área que o cursor do mouse —
   sem isso o botão pequeno fica pequeno demais pra acertar de primeira. */
@media (pointer: coarse) {
  .btn-mini { min-height: 44px; padding: .5rem 1rem; }
}

.barra-botoes { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-top: 1.1rem; }
.barra-botoes .direita { margin-left: auto; }

/* --------------------------------------------------------------- busca ---- */
.filtros {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 1rem; padding: .9rem 1rem;
  background: var(--vidro);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-grande); box-shadow: var(--sombra);
}
.filtros .campo { margin: 0; min-width: 155px; }
.filtros .campo.largo { flex: 1; min-width: 225px; }

.paginacao {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  margin-top: 1rem; font-size: .85rem; color: var(--tinta-media);
}
.paginacao a {
  padding: .4rem .9rem; border-radius: 99px;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini);
}
.paginacao a:hover { text-decoration: none; box-shadow: var(--sombra); }

/* ---------------------------------------------------------- autocomplete ---- */
.sugestoes {
  position: absolute; z-index: 40; min-width: 18rem; max-width: 34rem;
  max-height: 17rem; overflow-y: auto; margin-top: 4px;
  background: var(--vidro-alto);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio); box-shadow: var(--sombra-alta);
  padding: .3rem;
}
.sugestao {
  display: block; width: 100%; text-align: left; padding: .55rem .7rem;
  font: inherit; font-size: .88rem; background: none; border: 0;
  border-radius: 9px; cursor: pointer; color: var(--tinta);
}
.sugestao:hover, .sugestao:focus { background: var(--acento-fraco); outline: none; }

/* --------------------------------------------- sugestão de venda extra ---- */
.sugestoes-venda {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .8rem .95rem; margin-bottom: .9rem;
  background: var(--alerta-fraco); border-radius: var(--raio);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.sugestoes-titulo {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--alerta);
}
.sugestao-venda { font-size: .86rem; line-height: 1.45; color: var(--alerta); }
.sugestao-venda strong { color: var(--tinta); }

/* --------------------------------------------------- cadastro inline ---- */
/* O "+ novo" ao lado do campo. Cadastrar uma marca não pode custar o
   formulário inteiro que a pessoa já preencheu. */
.select-com-novo { display: flex; gap: .4rem; align-items: stretch; }
.select-com-novo > select,
.select-com-novo > input { flex: 1; min-width: 0; }
.select-com-novo > .btn { flex: 0 0 auto; align-self: stretch; }

.criar-inline {
  margin-top: .55rem; padding: .8rem;
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--acento-fraco); border-radius: var(--raio);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
/* `display:flex` acima bate de frente com o `[hidden]` do navegador (mesma
   especificidade, e o CSS do site vem depois do padrão do navegador na
   cascata — então ganha e o painel nunca some de verdade). Era por isso que
   o "+ novo" parecia obrigatório mesmo escolhendo uma fonte já existente. */
.criar-inline[hidden] { display: none; }
.criar-inline input { background: var(--vidro-alto); box-shadow: var(--sombra-mini); }
.criar-inline-linha { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.criar-inline-botoes { display: flex; gap: .45rem; flex-wrap: wrap; }
.criar-inline .msg-erro { margin: 0; }
.criar-inline .dica { margin: 0; }

/* ------------------------------------------------- gráficos de relatório -- */
/* Sem biblioteca: barra é <div> com largura ou altura em %. Imprime, funciona
   sem JS, e não puxa 200 KB de dependência para desenhar seis retângulos. */
.barra-rel {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--campo); box-shadow: var(--campo-sombra); min-width: 40px;
}
.barra-rel > div { height: 100%; border-radius: 99px; transition: width .3s ease; }

.grafico-barras {
  display: flex; align-items: flex-end; gap: 2px;
  height: 150px; overflow-x: auto; padding-bottom: 1.2rem; position: relative;
}
.gb-col {
  flex: 1 0 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; position: relative;
}
.gb-barra {
  width: 100%; max-width: 26px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--acento), var(--acento-forte));
  min-height: 2px;
}
.gb-col:hover .gb-barra { filter: brightness(1.15); }
.gb-rot {
  position: absolute; bottom: -1.15rem; font-size: .62rem;
  color: var(--tinta-fraca); white-space: nowrap;
}
/* Em série longa, só um rótulo a cada cinco — senão vira borrão. */
.grafico-barras .gb-col:not(:nth-child(5n)) .gb-rot { display: none; }

/* --------------------------------------------------------------- login ---- */
.tela-publica {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem;
}
.caixa-login {
  width: 100%; max-width: 24rem; padding: 2rem;
  background: var(--vidro-alto);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: 26px; box-shadow: var(--sombra-alta);
}
.marca-login { font-weight: 800; font-size: 1.4rem; letter-spacing: -.03em; margin-bottom: .3rem; }
.marca-login span { color: var(--acento); font-weight: 500; margin-left: .3rem; }
.caixa-login h1 { font-size: 1rem; font-weight: 500; color: var(--tinta-media); margin-bottom: 1.3rem; }
.caixa-login .btn { width: 100%; margin-top: .4rem; }

.codigo-2fa {
  font-size: 1.5rem; letter-spacing: .3em; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.codigos-backup {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem;
  background: var(--campo); box-shadow: var(--campo-sombra);
  padding: 1rem; border-radius: var(--raio); margin: .8rem 0;
}

/* ----------------------------------------------------------------- pdv ---- */
.pdv { display: grid; grid-template-columns: 1fr 355px; gap: 1rem; align-items: start; }
.pdv-total { font-size: 2.1rem; font-weight: 750; letter-spacing: -.04em; }

/* ------------------------------------------------- motor de vendas ---- */
.meta-cartao { position: relative; overflow: hidden; }
.meta-cartao::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--tinta-fraca);
}
.meta-cartao.no-ritmo::before { background: var(--ok); }
.meta-cartao.atras::before    { background: var(--alerta); }
.meta-cartao.bateu::before    { background: var(--acento); }

.meta-topo { display: flex; align-items: baseline; gap: .75rem; }
.meta-titulo {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-fraca);
}
.meta-pct { margin-left: auto; font-size: 1rem; font-weight: 750; color: var(--tinta-media); }
.meta-cartao.bateu .meta-pct { color: var(--ok); }

.meta-valor { font-size: 2.5rem; font-weight: 780; letter-spacing: -.04em; line-height: 1.05; margin-top: .35rem; }
.meta-de { font-size: .85rem; color: var(--tinta-media); margin-top: .1rem; }

/* Ocultar valores — privacidade de balcão: quem passa atrás do caixa não
   precisa ver quanto a loja vendeu. Borra em vez de sumir, pra não mudar o
   tamanho de nada na tela quando a pessoa liga e desliga. */
.valores-ocultos .dado-sigilo {
  filter: blur(8px);
  -webkit-user-select: none;
  user-select: none;
  transition: filter .15s ease;
}
.valores-ocultos .dado-sigilo:hover { filter: blur(2px); }
/* Letra grande precisa de mais desfoque pro traço grosso ficar ilegível
   também — o mesmo blur em px lê como "quase nada" numa fonte de 2.5rem. */
.valores-ocultos .meta-valor .dado-sigilo { filter: blur(14px); }
.valores-ocultos .meta-valor .dado-sigilo:hover { filter: blur(3px); }

.meta-barra {
  position: relative; height: 11px; border-radius: 99px; overflow: hidden;
  margin: .9rem 0 .65rem;
  background: var(--campo); box-shadow: var(--campo-sombra);
}
.meta-preenche {
  height: 100%; border-radius: 99px; background: var(--acento);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.meta-cartao.bateu .meta-preenche { background: var(--ok); }
.meta-cartao.atras .meta-preenche { background: var(--alerta); }
/* A marca é onde a equipe DEVERIA estar hoje. Sem ela a barra só informa;
   com ela, a barra cobra. */
.meta-marca {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--tinta); opacity: .5; border-radius: 2px;
}
.meta-frase { font-size: .9rem; line-height: 1.45; margin: 0; color: var(--tinta-media); }
.meta-cartao.atras .meta-frase { color: var(--alerta); font-weight: 600; }
.meta-cartao.bateu .meta-frase { color: var(--ok); font-weight: 600; }

.fila-cartao {
  display: flex; flex-direction: column; gap: .12rem;
  padding: 1rem 1.1rem; border-radius: var(--raio);
  background: var(--vidro);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra); color: var(--tinta); text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.fila-cartao:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.fila-cartao.tem { box-shadow: var(--sombra), inset 0 0 0 1.5px var(--acento); }
.fila-cartao.ativa { box-shadow: var(--sombra-alta), inset 0 0 0 2px var(--acento); }
.fila-n { font-size: 2rem; font-weight: 780; letter-spacing: -.045em; line-height: 1; }
.fila-cartao.tem .fila-n { color: var(--acento); }
.fila-nome { font-size: .85rem; font-weight: 650; }
.fila-valor { font-size: .75rem; color: var(--tinta-fraca); }

.mini-barra {
  display: inline-block; vertical-align: middle; width: 54px; height: 7px;
  border-radius: 99px; overflow: hidden; margin-right: .4rem;
  background: var(--campo); box-shadow: var(--campo-sombra);
}
.mini-barra > div { height: 100%; background: var(--acento); border-radius: 99px; }
.mini-barra.bateu > div { background: var(--ok); }
.mini-barra.atras > div { background: var(--alerta); }

.lista-seca { list-style: none; margin: 0; padding: 0; }
.lista-seca li {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--divisor-fraco);
}
.lista-seca li:last-child { border-bottom: 0; }
.lista-seca li > :first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------- quadro das ordens ---- */
/* Colunas na ordem física do processo. Rola na horizontal no celular, porque
   espremer seis colunas numa tela de 6 polegadas não ajuda ninguém. */
.quadro {
  display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr));
  gap: .75rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: .5rem;
  align-items: start;
}
.quadro-col {
  background: var(--vidro);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-grande); box-shadow: var(--sombra);
  padding: .8rem .7rem; min-width: 0;
}
.quadro-cabeca { display: flex; align-items: baseline; gap: .5rem; }
.quadro-titulo { font-size: .85rem; font-weight: 700; letter-spacing: -.01em; }
.quadro-n {
  margin-left: auto; font-size: .95rem; font-weight: 750;
  color: var(--acento); font-variant-numeric: tabular-nums;
}
.quadro-sub { font-size: .68rem; color: var(--tinta-fraca); margin: .15rem 0 .6rem; line-height: 1.3; }
.quadro-pilha { display: flex; flex-direction: column; gap: .45rem; }
.quadro-vazio { text-align: center; color: var(--tinta-fraca); padding: .8rem 0; margin: 0; }

.os-card {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .6rem .7rem; border-radius: 12px; text-decoration: none;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini); color: var(--tinta);
}
.os-card:hover { text-decoration: none; box-shadow: var(--sombra); }
/* Vermelho é a única cor que aparece sem ser pedida: OS fora do prazo. */
.os-card.atrasada { box-shadow: var(--sombra-mini), inset 3px 0 0 var(--erro); }
.os-card.urgente  { box-shadow: var(--sombra-mini), inset 3px 0 0 var(--alerta); }
.os-card.atrasada.urgente { box-shadow: var(--sombra-mini), inset 3px 0 0 var(--erro); }

.os-card-topo { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.os-num { font-size: .72rem; font-weight: 700; color: var(--acento); }
.os-cliente { font-size: .86rem; font-weight: 650; line-height: 1.25; }
.os-peca { font-size: .72rem; color: var(--tinta-media); line-height: 1.35; }
.os-rodape {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  font-size: .66rem; color: var(--tinta-fraca); margin-top: .15rem;
}
.os-rodape .alerta { color: var(--alerta); font-weight: 650; }
.os-lab { margin-left: auto; opacity: .8; }

/* -------------------------------------------------- quadro: arrastar ---- */
.os-card[draggable="true"] { cursor: grab; }
.os-card.arrastando { opacity: .4; cursor: grabbing; }
.os-card.enviando { opacity: .55; pointer-events: none; }

.quadro-pilha { border-radius: 10px; transition: background-color .12s ease, box-shadow .12s ease; }
/* Enquanto um cartão está no ar, as colunas onde a régua permite soltar
   ganham um contorno — sem isso a pessoa só descobre que uma transição não
   é permitida depois de soltar e ver o erro, tarde demais pra ser útil. */
.quadro-pilha-alvo { box-shadow: inset 0 0 0 2px var(--acento-sombra); }
.quadro-pilha-invalida { opacity: .45; }
.quadro-pilha-sobre { background-color: var(--acento-fraco); box-shadow: inset 0 0 0 2px var(--acento); }

.os-quadro-aviso {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 95; transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 2rem)); text-align: center;
  box-shadow: var(--sombra-alta);
  animation: os-aviso-entra .18s ease-out;
}
.os-quadro-aviso.sumindo { opacity: 0; transition: opacity .3s ease; }
@keyframes os-aviso-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* -------------------------------------------- dias da semana (automação) -- */
.dia-chip { cursor: pointer; }
.dia-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.dia-chip span {
  display: inline-block; padding: .4rem .7rem; border-radius: 99px;
  font-size: .78rem; font-weight: 600; color: var(--tinta-media);
  background: var(--campo); box-shadow: var(--campo-sombra);
}
.dia-chip input:checked + span {
  background: var(--acento); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px var(--acento-sombra);
}
.dia-chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ------------------------------------------------ prévia de mensagem ---- */
/* Balão parecido com o do WhatsApp: ler no formato em que o cliente lê muda
   a percepção do texto. */
.previa-zap {
  background: #dcf8c6; color: #111b21; border-radius: 12px 12px 12px 4px;
  padding: .7rem .85rem; font-size: .88rem; line-height: 1.45;
  max-width: 30rem; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .previa-zap { background: #005c4b; color: #e9edef; }
}

/* ------------------------------------------------- blocos da tela inicial -- */
/* A pega só aparece no modo "arrumar": fora dele, a tela é para trabalhar,
   não para configurar. */
.bloco-painel { position: relative; }
.bloco-painel .pega { display: none; }

.arrumando .bloco-painel {
  border-radius: var(--raio-grande);
  box-shadow: inset 0 0 0 2px var(--acento);
  padding: 2.2rem .5rem .5rem;
  margin-bottom: .75rem;
  cursor: grab;
}
.arrumando .bloco-painel .pega {
  position: absolute; top: .45rem; left: .6rem; right: .6rem;
  display: flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--acento);
}
.arrumando .bloco-painel.arrastando { opacity: .45; cursor: grabbing; }

.pega-seta {
  font: inherit; font-size: .9rem; line-height: 1;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini);
  color: var(--tinta-media); cursor: pointer;
}
.pega-seta:first-of-type { margin-left: auto; }
.pega-seta:hover { color: var(--acento); }

/* ---------------------------------------------------- menu de ações (⋯) -- */
.menu-acoes { position: relative; display: inline-block; }
.menu-acoes-botao {
  font: inherit; font-size: 1.1rem; line-height: 1;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini);
  color: var(--tinta-media); cursor: pointer;
}
.menu-acoes-botao:hover { color: var(--acento); box-shadow: var(--sombra); }
.menu-acoes-botao[aria-expanded="true"] { background: var(--acento); color: #fff; }

/* O menu é `fixed`, não `absolute`, e o JS calcula a posição na abertura.
   Motivo: a tabela vive dentro de `.tabela-rolagem`, que tem overflow — e
   overflow-x:auto com overflow-y:visible vira overflow-y:auto pela própria
   especificação. Em `absolute` o menu era recortado pela borda da tabela e
   ainda criava uma barra de rolagem vertical. Fixed ignora qualquer
   ancestral com overflow. */
.menu-acoes-caixa {
  position: fixed; z-index: 120;
  min-width: 13rem; max-width: min(20rem, calc(100vw - 1.5rem));
  padding: .3rem; text-align: left;
  background: var(--vidro-alto);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio); box-shadow: var(--sombra-alta);
}

/* Enquanto o JS não mediu (ou não rodou), o menu ainda funciona ancorado no
   botão — degradação honesta em vez de menu no canto da tela. */
.menu-acoes-caixa:not([style*="top"]) {
  position: absolute; right: 0; top: calc(100% + 4px);
}

.menu-acoes-caixa a,
.menu-acoes-caixa button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .55rem .7rem; border: 0; border-radius: 9px;
  font: inherit; font-size: .86rem; text-align: left; white-space: nowrap;
  background: none; color: var(--tinta); text-decoration: none; cursor: pointer;
}
.menu-acoes-caixa a:hover,
.menu-acoes-caixa button:hover { background: var(--acento-fraco); text-decoration: none; }
.menu-acoes-caixa .perigo { color: var(--erro); }
.menu-acoes-caixa .perigo:hover { background: var(--erro-fraco); }
.menu-acoes-caixa hr { border: 0; border-top: 1px solid var(--divisor); margin: .25rem .4rem; }
.menu-acoes-caixa .rotulo-menu {
  padding: .35rem .7rem .15rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca);
}

/* ------------------------------------------------------ paleta de cores -- */
.paleta { display: flex; gap: .6rem; flex-wrap: wrap; }
.cor-chip { cursor: pointer; text-align: center; }
.cor-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cor-chip span {
  display: block; width: 52px; height: 52px; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 10px rgba(11,40,55,.16);
}
.cor-chip input:checked + span { outline: 3px solid var(--tinta); outline-offset: 3px; }
.cor-chip input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 3px; }
.cor-chip em {
  display: block; font-style: normal; font-size: .68rem;
  color: var(--tinta-media); margin-top: .3rem; max-width: 62px; line-height: 1.2;
}

input[type=range] { width: 100%; accent-color: var(--acento); height: 2rem; }

/* ==========================================================================
   FALLBACKS — o vidro é um luxo, a legibilidade não é.
   ========================================================================== */

/* Navegador sem backdrop-filter (ou PC velho do balcão): superfícies opacas.
   O layout inteiro continua de pé, só perde a refração. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --vidro:       #ffffff;
    --vidro-alto:  #ffffff;
    --vidro-botao: #eef3f6;
    --campo:       #f6f9fa;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
      --vidro: #0f2630; --vidro-alto: #14303c; --vidro-botao: #1b3d4a; --campo: #0a1c24;
    }
  }
}

/* Quem pediu menos transparência no sistema operacional recebe menos. */
@media (prefers-reduced-transparency: reduce) {
  :root { --vidro: #ffffff; --vidro-alto: #ffffff; --vidro-botao: #eef3f6; --campo: #f6f9fa; --desfoque: none; }
  body::before { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .fila-cartao:hover { transform: none; }
}

/* --------------------------------------------------------- impressão ---- */
@media print {
  .topo, .menu, .cabecalho-pagina .acoes, .barra-botoes, .filtros,
  .paginacao, .pular, .sugestoes-venda { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  body::before { display: none; }
  .corpo { display: block; padding: 0; }
  main { padding: 0; }
  .cartao, .kpi { box-shadow: none; background: #fff; border: 1px solid #ccc; padding: .5rem; }
  a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------------ monoespaço ---- */
/* Linha digitável, SKU, código de barras: conferir dígito a dígito só funciona
   com largura fixa. E `tabular-nums` mantém as colunas alinhadas. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.bloco-codigo {
  margin: 0;
  padding: .85rem 1rem;
  border-radius: var(--raio);
  background: var(--campo);
  box-shadow: var(--campo-sombra);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  /* Resposta de API é larga e imprevisível: rola dentro do próprio bloco em
     vez de empurrar a página inteira para o lado. */
  overflow-x: auto;
  white-space: pre;
  max-height: 22rem;
  overflow-y: auto;
}

details > summary {
  cursor: pointer;
  color: var(--acento);
  padding: .25rem 0;
}
details > summary::marker { color: var(--tinta-fraca); }

.auditoria-diff { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--tinta-media); }
.auditoria-diff li { margin-bottom: .15rem; }

/* ------------------------------------------------ situação das cobranças ---- */
/* Quatro cartões coloridos, no vocabulário que a equipe já usa do Asaas. A cor
   carrega significado, então cada uma repete a informação em texto — quem não
   distingue verde de vermelho lê "Recebidas" e "Vencidas" do mesmo jeito. */
.kpi-ok     .valor { color: var(--ok); }
.kpi-info   .valor { color: var(--acento); }
.kpi-alerta .valor { color: var(--alerta); }
.kpi-erro   .valor { color: var(--erro); }

.kpi-barra {
  height: 6px;
  border-radius: 99px;
  background: var(--trilho);
  margin: .55rem 0 .5rem;
  overflow: hidden;
}
.kpi-preenche { display: block; height: 100%; border-radius: 99px; background: var(--tinta-fraca); }
.kpi-ok     .kpi-preenche { background: var(--ok); }
.kpi-info   .kpi-preenche { background: var(--acento); }
.kpi-alerta .kpi-preenche { background: var(--alerta); }
.kpi-erro   .kpi-preenche { background: var(--erro); }

.kpi-rodape { display: flex; flex-direction: column; gap: .15rem; }
.kpi-rodape a { color: var(--tinta-media); text-decoration: none; }
.kpi-rodape a:hover { color: var(--acento); text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .kpi-barra { background: rgba(255, 255, 255, .09); }
}

/* ----------------------------------------------------------------- funil ---- */
/* Funil de encaminhamento. A barra existe para o degrau ser visto de longe:
   quem olha isso está de pé no balcão, não sentado analisando. */
.funil { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; }

.funil-linha {
  display: grid;
  grid-template-columns: 10.5rem 1fr 4.5rem;
  align-items: center;
  gap: .7rem;
}

.funil-rotulo { font-size: .88rem; color: var(--tinta-media); }

.funil-barra {
  height: 1.35rem;
  border-radius: 999px;
  background: var(--trilho);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
  overflow: hidden;
}

.funil-preenche {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--acento-forte));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.funil-valor { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.funil-valor small { display: block; font-weight: 400; font-size: .74rem; color: var(--tinta-fraca); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .funil-barra { background: rgba(255, 255, 255, .09); }
}

/* ------------------------------------------------------ checklist fiscal ---- */
/* Lista do que falta para emitir nota. Cada linha é uma coisa que alguém tem
   de fazer — por isso ela não é um parágrafo, é um item que se risca. */
.lista-pendencias { list-style: none; margin: .6rem 0 0; padding: 0; }

.pendencia {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem .8rem .6rem 2rem;
  border-radius: var(--raio);
  background: var(--alerta-fraco);
  position: relative;
}
.pendencia + .pendencia { margin-top: .45rem; }

.pendencia::before {
  content: "!";
  position: absolute; left: .75rem; top: .62rem;
  display: grid; place-items: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--alerta); color: #fff;
  font-size: .7rem; font-weight: 700;
}

.pendencia strong { font-size: .9rem; color: var(--alerta); }
.pendencia span { font-size: .84rem; color: var(--tinta-media); }
.pendencia a { color: var(--acento); }

.passos { margin: .6rem 0 0; padding-left: 1.3rem; }
.passos li { margin-bottom: .55rem; font-size: .88rem; line-height: 1.5; }
.passos code {
  padding: .05rem .3rem; border-radius: 5px;
  background: rgba(15, 28, 36, .07); font-size: .82em;
}

/* Bloco destacado dentro de um cartão — sem virar cartão de novo, que
   empilharia vidro sobre vidro e perderia a hierarquia. */
.cartao-interno {
  margin: .6rem 0 1rem;
  padding: .75rem .9rem;
  border-radius: var(--raio);
  background: rgba(15, 28, 36, .04);
  box-shadow: inset 0 0 0 1px rgba(15, 28, 36, .06);
}
:root[data-tema="escuro"] .cartao-interno { background: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cartao-interno { background: rgba(255, 255, 255, .06); }
}

/* --------------------------------------------------- barra de salvar fixa ---- */
/* Formulário longo esconde o próprio botão de salvar. Quem preenche no meio
   da página não vê saída, sai da tela e perde o que digitou. A barra gruda
   no rodapé da janela e some na impressão. */
.barra-fixa {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-radius: var(--raio);
  background: var(--vidro-alto);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta);
}

.barra-fixa-nota { margin-right: auto; font-size: .84rem; color: var(--tinta-media); }

@media (max-width: 480px) {
  .barra-fixa { flex-direction: column; align-items: stretch; }
  .barra-fixa-nota { margin: 0 0 .4rem; text-align: center; }
  .barra-fixa .btn { width: 100%; }
}

@media print { .barra-fixa { display: none; } }

/* ------------------------------------------------------------- agenda ---- */
.agenda-navegacao {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: .65rem;
  padding: .75rem 1rem;
}

/* =================================================== ficha completa da OS */
.os-formulario .cartao-titulo { color: var(--cor-primaria, #203c78); }
.os-cliente-resumo {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center;
  margin-top: .7rem; padding: .75rem .9rem; border: 1px solid var(--borda, #d8e0e8);
  border-radius: .7rem; background: var(--fundo-suave, #f5f8fb); font-size: .88rem;
}
.os-cliente-resumo strong { color: var(--texto, #17243a); }
.os-cliente-resumo span:empty { display: none; }
.criar-inline-completo { padding: .9rem; }
.criar-inline-completo .criar-inline-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.os-receita-tabela input { min-width: 5.2rem; }
.os-medidas-armacao { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .criar-inline-completo .criar-inline-linha,
  .os-medidas-armacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.agenda-navegacao .campo { margin: 0; min-width: 12rem; }
.agenda-visao-segmentada {
  display: flex; width: max-content; margin: 0 auto .65rem; padding: .22rem;
  border: 1px solid var(--linha); border-radius: 12px; background: rgba(255, 255, 255, .32);
}
.agenda-visao-segmentada a {
  min-width: 6rem; padding: .4rem .85rem; border-radius: 9px;
  color: var(--tinta-media); text-align: center; text-decoration: none; font-size: .78rem; font-weight: 700;
}
.agenda-visao-segmentada a.ativo { color: #fff; background: var(--acento); box-shadow: 0 4px 12px var(--acento-sombra); }

.agenda-rodape-motivacional {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: 1rem; padding: .8rem 1.1rem; border-radius: var(--raio);
  background: var(--acento-fraco); color: var(--acento-forte); font-size: .82rem; font-weight: 600;
}
.agenda-rodape-motivacional a { color: var(--acento-forte); font-weight: 800; text-decoration: none; }
.agenda-rodape-motivacional a:hover { text-decoration: underline; }

.agenda-rolagem {
  overflow-x: auto; padding-bottom: .4rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.agenda-semana {
  display: grid; grid-template-columns: repeat(var(--agenda-dias, 7), minmax(155px, 1fr));
  min-width: 100%; gap: .55rem;
}
.agenda-dia {
  display: flex; flex-direction: column; height: 33rem;
  border-radius: var(--raio-grande); overflow: hidden;
  background: var(--vidro); box-shadow: var(--sombra);
  border: 1px solid rgba(255, 255, 255, .48);
}
.agenda-dia.hoje { box-shadow: inset 0 0 0 2px var(--acento), var(--sombra); }
.agenda-dia-cabecalho {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem;
  padding: .7rem .75rem; background-color: var(--bloco-cabeca);
  border-bottom: 1px solid var(--linha); color: var(--tinta); text-decoration: none;
}
.agenda-dia-cabecalho > span { min-width: 0; font-size: .88rem; font-weight: 800; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-dia-cabecalho > strong { font-size: 1.15rem; font-weight: 800; color: var(--acento-forte); }
.agenda-dia-cabecalho > small { grid-column: 1 / -1; color: var(--tinta-fraca); }
.agenda-dia-corpo { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: .5rem; overflow: hidden; }
.agenda-evento {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem .45rem;
  margin-bottom: .45rem; padding: .55rem .6rem;
  color: var(--tinta); text-decoration: none; border-radius: 11px;
  background-color: var(--bloco); border-left: 4px solid var(--acento);
  box-shadow: 0 2px 8px rgba(15, 28, 36, .06);
}
.agenda-evento:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15, 28, 36, .10); }
.agenda-evento .agenda-hora { font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700; color: var(--acento-forte); }
.agenda-evento strong { min-width: 0; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-evento .tag { grid-column: 1 / -1; justify-self: start; font-size: .62rem; }
.agenda-evento small { grid-column: 1 / -1; color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-evento-compacto { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .08rem .4rem; margin-bottom: .38rem; padding: .48rem .52rem; }
.agenda-evento-compacto small { grid-column: 2; font-size: .64rem; }
/* Cada etapa com o bloco inteiro colorido, não só o risco da lateral.
   A agenda passa a contar a história de longe: quem só marcou, quem
   confirmou, quem sentou na cadeira e quem comprou — sem ler uma linha.
   O fundo é sempre o tom "fraco" da cor, que no tema escuro já é translúcido,
   e por isso a mesma regra serve aos dois temas. */
/* ---------------------------------------------------------------------
   O status vira PROGRESSO: a cor enche o bloco da esquerda pra direita
   conforme a pessoa avança, e só quem comprou enche inteiro.

       pré-agendado  listrado, tracejado — nem começou, é um "talvez"
       agendado      vazio
       confirmado    um terço
       compareceu    dois terços
       comprou       cheio

   É `background-image` e não `background`: a cor de fundo do bloco (clara no
   tema claro, translúcida no escuro) precisa continuar por baixo, senão o
   pedaço "vazio" da barra fica buraco.
   --------------------------------------------------------------------- */
/* Marcar já é um passo: a barra sai do zero. Cinza-azulado, neutro — a cor
   só começa a contar história a partir do "confirmado". */
.agenda-evento.status-agendado {
  background-image: linear-gradient(to right, var(--enche-agendado) 0 15%, transparent 15%);
}

.agenda-evento.status-pre_agendado {
  border-left: 4px dashed var(--pre);
  /* Listras largas e de baixo contraste: dizem "provisório" sem competir com
     o nome da pessoa, que é o que se lê na varrida pela semana. */
  background-image: repeating-linear-gradient(135deg,
    var(--enche-pre) 0 11px, transparent 11px 22px);
}
.agenda-evento.status-pre_agendado .agenda-hora { color: var(--pre); }

.agenda-evento.status-confirmado {
  border-left-color: var(--acento);
  background-image: linear-gradient(to right, var(--enche-confirmado) 0 40%, transparent 40%);
}
.agenda-evento.status-confirmado .agenda-hora { color: var(--acento-forte); }

.agenda-evento.status-compareceu {
  border-left-color: var(--roxo);
  background-image: linear-gradient(to right, var(--enche-compareceu) 0 70%, transparent 70%);
}
.agenda-evento.status-compareceu .agenda-hora { color: var(--roxo); }

/* Patologia é desfecho clínico, não etapa de venda: a pessoa sentou na
   cadeira, então enche o mesmo tanto de "compareceu", em âmbar. */
.agenda-evento.status-patologia {
  border-left-color: var(--alerta);
  background-image: linear-gradient(to right, var(--enche-patologia) 0 70%, transparent 70%);
}
.agenda-evento.status-patologia .agenda-hora { color: var(--alerta); }

.agenda-evento.status-comprou {
  border-left-color: var(--ok);
  background-image: linear-gradient(to right, var(--enche-comprou) 0 100%, transparent 100%);
}
.agenda-evento.status-comprou .agenda-hora { color: var(--ok); }

/* Foi até o fim e não comprou: enche inteiro também — o caminho foi todo
   percorrido — mas apagado, pra não disputar atenção com quem ainda dá pra
   trabalhar. Cancelou nem enche: não chegou a andar. */
.agenda-evento.status-nao_comprou {
  border-left-color: var(--erro); opacity: .74;
  background-image: linear-gradient(to right, var(--enche-nao-comprou) 0 100%, transparent 100%);
}
.agenda-evento.status-cancelou { border-left-color: var(--tinta-fraca); opacity: .5; }

.agenda-adicionar { display: block; padding: .55rem; text-align: center; font-size: .75rem; text-decoration: none; border-top: 1px solid var(--linha); }
.agenda-ver-mais { margin-top: auto; padding: .55rem; text-align: center; text-decoration: none; font-size: .72rem; font-weight: 700; }
.agenda-vazio-elegante { display: grid; place-content: center; flex: 1; min-height: 8rem; color: var(--tinta-fraca); text-align: center; }
.agenda-vazio-elegante strong { color: var(--tinta-media); font-size: .9rem; }
.agenda-vazio-elegante span { font-size: .72rem; }
.agenda-escala-resumo { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: .2rem; margin-top: .2rem; }
.agenda-escala-resumo span { padding: .16rem .35rem; border-radius: 7px; background: rgba(0, 126, 167, .09); color: var(--acento-forte); font-size: .6rem; font-weight: 700; }
.agenda-livres-contagem { grid-column: 1 / -1; color: var(--acento-forte); font-weight: 700; }

.agenda-dia-lista { padding: 0; overflow: hidden; }
.agenda-dia-lista.hoje { box-shadow: inset 0 0 0 2px var(--acento), var(--sombra); }
.agenda-dia-lista-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--linha); }
.agenda-dia-lista-cabecalho > div { display: grid; grid-template-columns: auto auto; gap: .12rem .65rem; align-items: baseline; }
.agenda-dia-lista-cabecalho > div > span { color: var(--tinta-media); font-size: .8rem; font-weight: 700; }
.agenda-dia-lista-cabecalho > div > strong { font-size: 1.15rem; }
.agenda-dia-lista-cabecalho > div > small { grid-column: 1 / -1; color: var(--tinta-fraca); }
/* O vazio precisa incomodar mais que o ocupado — é isso que faz a pessoa
   querer preencher, o mesmo efeito de olhar um álbum de figurinha incompleto. */
.agenda-progresso-dia { padding: 0; }
.agenda-progresso-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .92rem; }
.agenda-progresso-barra {
  margin-top: .4rem; height: 8px; border-radius: 99px; background: var(--divisor); overflow: hidden;
}
.agenda-progresso-preenche {
  height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acento), var(--ok));
  transition: width .4s ease;
}

/* -------------------------------------------------- herói de progresso do dia --- */
.agenda-hero {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.3rem; align-items: center;
  background: var(--vidro); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-grande); box-shadow: var(--sombra); padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}
.agenda-hero-editar {
  position: absolute; top: .7rem; right: .8rem; z-index: 1;
  display: flex; align-items: center; gap: .3rem;
  padding: .3rem .55rem; border-radius: 99px; font-size: .68rem; font-weight: 700;
  background: var(--vidro-alto); color: var(--tinta-media); text-decoration: none;
  box-shadow: var(--sombra-mini);
}
.agenda-hero-editar:hover { color: var(--acento-forte); background: var(--acento-fraco); }
/* O link "Editar meta" fica no canto; sem a coluna lateral ele cobria a etiqueta "Faltam/Completa". */
.agenda-hero:has(.agenda-hero-editar) .agenda-progresso-topo { padding-right: 6.5rem; }
.agenda-hero-data { display: flex; align-items: center; gap: .65rem; padding-right: 1.3rem; border-right: 1px solid var(--divisor); }
.agenda-hero-data-icone {
  display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: var(--acento); color: #fff; font-size: 1.2rem;
}
.agenda-hero-data strong { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--tinta-fraca); }
.agenda-hero-data span { font-size: 1.3rem; font-weight: 800; color: var(--tinta); }
.agenda-hero-progresso { min-width: 0; }
.agenda-hero-dica { margin: .5rem 0 0; font-size: .82rem; color: var(--tinta-media); }
.agenda-hero-lateral { display: grid; gap: .4rem; max-width: 15rem; padding-left: 1.3rem; border-left: 1px solid var(--divisor); }
.agenda-hero-lateral-icone {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px;
  background: var(--ok-fraco); color: var(--ok); font-size: 1rem; margin-bottom: .1rem;
}
.agenda-hero-lateral p { margin: 0; font-size: .78rem; color: var(--tinta-media); line-height: 1.35; }
.agenda-hero-lateral p strong { color: var(--tinta); }
.agenda-hero-lateral .tag { justify-self: start; }

/* ------------------------------------------------ timeline manhã / tarde --- */
.agenda-timeline { display: grid; grid-template-columns: 1fr 1fr; }
.agenda-timeline-col { min-width: 0; padding: .9rem 1.15rem; }
.agenda-timeline-col:first-child { border-right: 1px solid var(--linha); }
.agenda-timeline-col-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-media); margin-bottom: .7rem;
}
.agenda-timeline-col-cabeca small { text-transform: none; font-weight: 600; letter-spacing: 0; color: var(--tinta-fraca); }
.agenda-timeline-item { display: grid; grid-template-columns: 3.2rem minmax(0,1fr); gap: .6rem; margin-bottom: .55rem; }
.agenda-timeline-item time { padding-top: .65rem; font-size: .74rem; font-weight: 700; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.agenda-timeline-card {
  display: flex; align-items: center; gap: .6rem; min-width: 0;
  background-color: var(--bloco-alto); border-radius: 13px; padding: .5rem .65rem;
  border-left: 4px solid var(--acento); box-shadow: 0 2px 7px rgba(15, 28, 36, .06);
}
.agenda-timeline-item.status-agendado .agenda-timeline-card {
  background-image: linear-gradient(to right, var(--enche-agendado) 0 15%, transparent 15%);
}
.agenda-timeline-item.status-pre_agendado .agenda-timeline-card {
  border-left: 4px dashed var(--pre);
  background-image: repeating-linear-gradient(135deg,
    var(--enche-pre) 0 11px, transparent 11px 22px);
}
.agenda-timeline-item.status-confirmado .agenda-timeline-card {
  border-left-color: var(--acento);
  background-image: linear-gradient(to right, var(--enche-confirmado) 0 40%, transparent 40%);
}
.agenda-timeline-item.status-compareceu .agenda-timeline-card {
  border-left-color: var(--roxo);
  background-image: linear-gradient(to right, var(--enche-compareceu) 0 70%, transparent 70%);
}
.agenda-timeline-item.status-patologia .agenda-timeline-card {
  border-left-color: var(--alerta);
  background-image: linear-gradient(to right, var(--enche-patologia) 0 70%, transparent 70%);
}
.agenda-timeline-item.status-comprou .agenda-timeline-card {
  border-left-color: var(--ok);
  background-image: linear-gradient(to right, var(--enche-comprou) 0 100%, transparent 100%);
}
.agenda-timeline-item.status-nao_comprou .agenda-timeline-card {
  border-left-color: var(--erro); opacity: .74;
  background-image: linear-gradient(to right, var(--enche-nao-comprou) 0 100%, transparent 100%);
}
.agenda-timeline-item.status-cancelou .agenda-timeline-card {
  border-left-color: var(--tinta-fraca); opacity: .5;
}

.status-pill { flex: none; padding: .28rem .6rem; border-radius: 99px; font-size: .64rem; font-weight: 750; white-space: nowrap; }
.status-pill-agendado    { background: var(--campo); color: var(--tinta-media); }
.status-pill-pre_agendado { background: var(--pre-fraco); color: var(--pre);
                            border: 1px dashed var(--pre); padding: .21rem .53rem; }
.status-pill-confirmado  { background: var(--acento-fraco); color: var(--acento-forte); }
.status-pill-compareceu  { background: var(--roxo-fraco); color: var(--roxo); }
.status-pill-patologia   { background: var(--alerta-fraco); color: var(--alerta); }
.status-pill-comprou     { background: var(--ok-fraco); color: var(--ok); }
.status-pill-nao_comprou { background: var(--erro-fraco); color: var(--erro); }
.status-pill-cancelou    { background: var(--campo); color: var(--tinta-fraca); }
/* Faltou (056): a pessoa não apareceu — tom de alerta, não de erro: ainda
   dá pra remarcar, e é o que a tela de recuperação faz. */
.status-pill-faltou      { background: var(--alerta-fraco); color: var(--alerta); }
.agenda-timeline-item.status-faltou .agenda-timeline-card {
  border-left-color: var(--alerta); opacity: .8;
  background-image: linear-gradient(to right, var(--alerta-fraco) 0 100%, transparent 100%);
}
.agenda-kpis .kpi-pre .kpi-icone { background: var(--pre-fraco); color: var(--pre); }

/* Texto do cartão da consulta (nome em cima, detalhes embaixo) e o avatar com
   as iniciais. Tinham sumido deste arquivo e o cartão ficava com tudo numa
   linha só. */
.agenda-timeline-info { min-width: 0; flex: 1; color: var(--tinta); text-decoration: none; display: grid; }
.agenda-timeline-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .87rem; }
.agenda-timeline-info small { color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-timeline-agendador { font-size: .72rem; opacity: .9; }
.agenda-avatar {
  flex: none; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  font-size: .7rem; font-weight: 800; letter-spacing: -.02em;
}
.agenda-avatar.av-1 { background: var(--acento-fraco); color: var(--acento-forte); }
.agenda-avatar.av-2 { background: var(--ok-fraco); color: var(--ok); }
.agenda-avatar.av-3 { background: var(--campo); color: var(--acento-forte); }
.agenda-avatar.av-4 { background: var(--alerta-fraco); color: var(--alerta); }
.agenda-avatar.av-5 { background: var(--erro-fraco); color: var(--erro); }
.agenda-avatar.av-6 { background: var(--vidro-alto); color: var(--tinta-media); }

/* Canal (fonte do lead): selo em cada consulta e total no rodapé do dia.
   "Sem fonte" fica tracejado de propósito — é o que falta preencher. */
.agenda-canal {
  display: inline-block; padding: .08rem .5rem; border-radius: 99px; vertical-align: baseline;
  background: var(--acento-fraco); color: var(--acento-forte);
  font-size: .64rem; font-weight: 750; letter-spacing: .01em;
}
.agenda-canal.sem-fonte { background: transparent; color: var(--tinta-fraca); box-shadow: inset 0 0 0 1px var(--tinta-fraca); opacity: .8; }
.agenda-canais {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem;
  padding: .85rem 1.15rem; border-top: 1px solid var(--linha);
}
.agenda-canais-titulo { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-media); }
.agenda-canais ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; }
.agenda-canais li {
  display: inline-flex; align-items: baseline; gap: .45rem; padding: .28rem .7rem; border-radius: 99px;
  background: var(--acento-fraco); color: var(--acento-forte); font-size: .78rem; font-weight: 650;
}
.agenda-canais li strong { font-size: .86rem; font-variant-numeric: tabular-nums; }
.agenda-canais li.sem-fonte { background: transparent; color: var(--tinta-fraca); box-shadow: inset 0 0 0 1px var(--tinta-fraca); }
.agenda-canais-total { margin-left: auto; font-size: .8rem; color: var(--tinta-media); }
.agenda-canais-total strong { font-size: 1rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.agenda-dia-canais { flex: none; display: flex; flex-wrap: wrap; gap: .25rem .55rem; padding: .45rem .6rem .55rem; border-top: 1px solid var(--linha); font-size: .64rem; color: var(--tinta-media); }
.agenda-dia-canais strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.agenda-dia-canais .sem-fonte { color: var(--tinta-fraca); }

.agenda-timeline-livre {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0;
  border: 1.5px dashed var(--alerta); border-radius: 13px; padding: .5rem .65rem;
  background: var(--alerta-fraco); text-decoration: none; color: var(--tinta);
  transition: background .15s ease;
}
.agenda-timeline-livre:hover { background: var(--alerta); }
.agenda-timeline-livre:hover strong, .agenda-timeline-livre:hover small { color: #fff; }
.agenda-timeline-livre strong { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: var(--alerta); }
.agenda-timeline-livre small { color: var(--tinta-media); font-size: .72rem; }
.agenda-timeline-livre .btn { flex: none; pointer-events: none; }

.agenda-lista-rolagem { max-height: 62vh; overflow-y: auto; scrollbar-width: thin; }
.agenda-lista-item { display: grid; grid-template-columns: 4.25rem minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: .75rem 1.15rem; border-bottom: 1px solid var(--linha); border-left: 4px solid var(--acento); }
.agenda-lista-item:hover { background: rgba(255, 255, 255, .25); }
.agenda-lista-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-lista-item small { color: var(--tinta-fraca); }
.agenda-lista-status { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: .3rem; }
.agenda-profissionais-grade { align-items: start; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.agenda-profissional-item { padding: .8rem 0; border-bottom: 1px solid var(--linha); }
.agenda-profissional-item:first-of-type { padding-top: 0; }
.agenda-profissional-item:last-child { border-bottom: 0; padding-bottom: 0; }
.agenda-profissional-item.inativo { opacity: .65; }
.agenda-profissional-item .barra-botoes { margin-top: .55rem; }
.agenda-profissional-dias { display: flex; flex-wrap: wrap; gap: .3rem; margin: .55rem 0; }
.agenda-profissional-dias span { padding: .2rem .4rem; border-radius: 8px; background: var(--fundo-sutil); }
.agenda-escala-cartao { margin-top: 1rem; }
.agenda-escala-cabecalho { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.agenda-mes-navegacao { display: flex; align-items: center; gap: .65rem; white-space: nowrap; }
.agenda-calendario-mes { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); gap: .45rem; overflow-x: auto; padding-bottom: .35rem; }
.agenda-calendario-semana { padding: .35rem; color: var(--tinta-fraca); text-align: center; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.agenda-calendario-vazio { min-height: 7.5rem; }
.agenda-calendario-dia { display: grid; align-content: start; gap: .4rem; min-height: 7.5rem; padding: .55rem; border: 1px solid var(--linha); border-radius: 13px; background: rgba(255,255,255,.22); }
.agenda-calendario-dia:has(input:checked), .agenda-calendario-dia.selecionado { border-color: var(--acento); background: rgba(0,126,167,.08); box-shadow: inset 0 0 0 1px rgba(0,126,167,.2); }
.agenda-calendario-dia.passado { opacity: .45; }
.agenda-calendario-numero { display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.agenda-calendario-numero small { color: var(--acento-forte); font-size: .58rem; text-transform: uppercase; }
.agenda-calendario-dia .checa { margin: 0; font-size: .72rem; }
.agenda-calendario-dia select { min-width: 0; padding: .35rem .4rem; font-size: .7rem; }
.agenda-escala-vazia { margin-top: 1rem; text-align: center; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .agenda-dia-cabecalho,
  :root:not([data-tema="claro"]) .agenda-evento { background: rgba(255, 255, 255, .07); }
}


/* ==========================================================================
   RESPONSIVO — por último de propósito: media query precisa vir depois do
   componente que ela ajusta, senão perde no cascade.

   Três alvos reais, não três larguras arbitrárias:
     computador do balcão  — o padrão, mouse e tela larga
     tablet                — vendedor circulando pela loja com o cliente
     celular               — conferência rápida, fora da loja
   ========================================================================== */

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 1100px) {
  :root { --menu-larg: 74px; }
  .menu a { flex-direction: column; gap: .2rem; padding: .6rem .25rem; font-size: .64rem; text-align: center; }
  .menu a span:not(.icone) { line-height: 1.15; }
  .menu .icone { font-size: 1.05rem; }
  .pdv { grid-template-columns: 1fr 300px; }
  .corpo { padding: .85rem .85rem 0; gap: .8rem; }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------- assistente de IA ---- */
.ia-chat-botao {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: var(--vidro-alto); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta);
  transition: transform .15s ease;
}
.ia-chat-botao:hover { transform: scale(1.06); }
.ia-chat-botao[aria-expanded="true"] { outline: 2px solid var(--acento); outline-offset: 2px; }

.ia-chat {
  position: fixed; right: 1.25rem; bottom: 5.25rem; z-index: 91;
  width: min(380px, calc(100vw - 2.5rem)); height: min(560px, calc(100vh - 8rem));
  flex-direction: column;
  background: var(--vidro-alto); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-grande); box-shadow: var(--sombra-alta);
  overflow: hidden;
}
/* O `display: flex` só entra sem o atributo `hidden` — declarado junto na
   regra de cima, ele bateria em especificidade com `[hidden]{display:none}`
   do navegador e a ordem no arquivo decidiria, não o atributo. Foi
   exatamente esse o bug: o painel nunca fechava porque o CSS sempre
   ganhava do `hidden`, não importava o que o JavaScript fizesse. */
.ia-chat:not([hidden]) { display: flex; }
.ia-chat-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; font-weight: 650; box-shadow: inset 0 -1px 0 var(--divisor);
}
.ia-chat-mensagens {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.ia-chat-vazio { font-size: .85rem; color: var(--tinta-media); line-height: 1.5; }
.ia-chat-msg {
  max-width: 88%; padding: .55rem .8rem; border-radius: var(--raio); font-size: .88rem; line-height: 1.45;
  white-space: pre-wrap;
}
.ia-chat-msg-usuario {
  align-self: flex-end; background: var(--acento); color: #fff;
}
.ia-chat-msg-assistente {
  align-self: flex-start; background: var(--campo); box-shadow: var(--campo-sombra);
}
.ia-chat-msg-assistente.pensando { color: var(--tinta-fraca); font-style: italic; }
.ia-chat-msg-assistente.erro { color: var(--erro); }
.ia-chat-form {
  display: flex; gap: .5rem; padding: .7rem; box-shadow: inset 0 1px 0 var(--divisor);
}
.ia-chat-form textarea {
  flex: 1; resize: none; max-height: 5.5rem; padding: .5rem .7rem; border-radius: var(--raio);
  border: none; background: var(--campo); box-shadow: var(--campo-sombra); color: var(--tinta);
  font: inherit;
}

/* ------------------------------------------------- conversa do WE Sales -- */
.conversa-ghl {
  display: flex; flex-direction: column; gap: .5rem;
  max-height: 360px; overflow-y: auto; padding: .3rem .2rem;
}
.conversa-ghl-msg { max-width: 78%; display: flex; flex-direction: column; gap: .15rem; }
.conversa-ghl-entrada { align-self: flex-start; align-items: flex-start; }
.conversa-ghl-saida { align-self: flex-end; align-items: flex-end; }
.conversa-ghl-corpo {
  padding: .55rem .8rem; border-radius: var(--raio); font-size: .85rem; line-height: 1.45;
  white-space: pre-wrap;
}
.conversa-ghl-entrada .conversa-ghl-corpo { background: var(--campo); box-shadow: var(--campo-sombra); }
.conversa-ghl-saida .conversa-ghl-corpo { background: var(--acento); color: #fff; }
.conversa-ghl-hora { font-size: .66rem; color: var(--tinta-fraca); padding: 0 .3rem; }

/* --------------------------------------------------------------- celular -- */
@media (max-width: 760px) {
  :root { --topo-alt: 56px; --raio-grande: 18px; --raio: 12px; }

  /* Espaço para a barra inferior não cobrir o conteúdo. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* A barra de menu inferior mora na mesma faixa — o botão do assistente
     sobe pra não ficar embaixo dela. */
  .ia-chat-botao { bottom: calc(72px + 1rem + env(safe-area-inset-bottom, 0px)); }
  .ia-chat { bottom: calc(72px + 5rem + env(safe-area-inset-bottom, 0px)); right: .75rem; }

  /* ---- topo: marca, loja e sair sem espremer tudo numa única cápsula. */
  .topo { padding: 0 .65rem; gap: .4rem; }
  .marca { padding: .35rem .7rem; font-size: .92rem; gap: .2rem; }
  .marca span { font-size: .92rem; }
  .usuario {
    padding: 0; gap: .35rem; font-size: .78rem;
    background: transparent; box-shadow: none;
  }
  .usuario .papel { display: none; }
  .usuario > a { display: none; }
  .usuario [data-push-ativar] {
    width: 40px; min-width: 40px; padding: 0; overflow: hidden;
    color: transparent; font-size: 0; border-radius: 50%;
  }
  .usuario [data-push-ativar]::before { content: '🔔'; color: var(--tinta-media); font-size: 1rem; }
  .troca-loja select { max-width: 6rem; font-size: .78rem; padding: .35rem .7rem; }
  .loja-fixa { font-size: .72rem; padding: .3rem .65rem; }

  /* ---- menu: barra inferior fixa, alcance de polegar */
  .corpo { flex-direction: column; padding: .6rem .6rem 0; gap: .6rem; }

  .menu {
    position: fixed; left: .5rem; right: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    top: auto; z-index: 40; width: auto; max-height: none; flex: none;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0; padding: .3rem .35rem;
    overflow: hidden;
    border-radius: 22px; box-shadow: var(--sombra-alta);
  }
  .menu a:not(.menu-mobile-principal) { display: none; }
  .menu a {
    min-width: 0; min-height: 48px; border-radius: 16px;
    flex-direction: column; gap: .12rem; font-size: .6rem; padding: .4rem .45rem;
    justify-content: center; line-height: 1.1;
  }
  .menu .icone { font-size: 1.1rem; width: auto; }
  .menu-mais {
    display: flex; min-width: 0; min-height: 48px; padding: .4rem .45rem;
    align-items: center; justify-content: center; flex-direction: column; gap: .12rem;
    border: 0; border-radius: 16px; background: transparent;
    color: var(--tinta-media); font: inherit; font-size: .6rem; line-height: 1.1;
  }
  .menu-mais[aria-expanded="true"] {
    color: var(--acento-forte); background: var(--vidro-alto); box-shadow: var(--sombra-mini);
  }
  .menu-mobile-painel:not([hidden]) {
    position: fixed; left: .5rem; right: .5rem;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    z-index: 39; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem; max-height: min(62vh, 30rem); overflow-y: auto;
    padding: .7rem; border-radius: 22px;
    background: var(--vidro-alto); backdrop-filter: var(--desfoque);
    -webkit-backdrop-filter: var(--desfoque); box-shadow: var(--sombra-alta);
  }
  .menu-mobile-painel a {
    display: flex; min-width: 0; min-height: 60px; padding: .55rem .3rem;
    align-items: center; justify-content: center; flex-direction: column; gap: .2rem;
    border-radius: 14px; color: var(--tinta-media); text-align: center;
    text-decoration: none; font-size: .7rem; line-height: 1.1;
  }
  .menu-mobile-painel a.ativo {
    color: var(--acento-forte); background: var(--acento-fraco); font-weight: 700;
  }
  .menu-mobile-painel .icone { font-size: 1.05rem; }

  main { padding: 0 0 1.5rem; }

  /* ---- cabeçalho: título em cima, ação de largura cheia embaixo */
  .cabecalho-pagina { gap: .5rem; margin: 0 0 .75rem; padding: 0 .15rem; }
  .cabecalho-pagina h1 { font-size: 1.22rem; width: 100%; }
  .cabecalho-pagina .acoes { margin-left: 0; width: 100%; gap: .4rem; }
  /* flex-basis auto (não 0, que o "flex: 1" puro usa) é o que deixa o
     terceiro botão quebrar linha em vez de estourar a tela — com três ações
     (Nova venda / Ocultar valores / Arrumar blocos) o "flex: 1" cru as
     encolhia até o texto vazar pra fora do viewport em vez de quebrar. */
  .cabecalho-pagina .acoes .btn { flex: 1 1 auto; }

  /* ---- cartões: menos moldura, mais conteúdo */
  .cartao { padding: .85rem; margin-bottom: .75rem; }
  .cartao-titulo { margin: -.85rem -.85rem .75rem; padding: .65rem .85rem; font-size: .88rem; }
  .tabela-rolagem { margin: 0 -.85rem; padding: 0 .85rem; }

  .grade { gap: .75rem; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }

  /* ---- filtros: viram formulário empilhado, botão de largura cheia */
  .filtros { padding: .75rem; gap: .5rem; border-radius: var(--raio); }
  .filtros .campo, .filtros .campo.largo { min-width: 100%; flex: 1 1 100%; }
  .filtros .btn { width: 100%; }

  /* ---- toque: 44px é o piso. 16px no campo impede o zoom automático do iOS. */
  .btn { min-height: 46px; padding: .7rem 1.1rem; font-size: .92rem; }
  .btn-mini { min-height: 40px; padding: .45rem .8rem; font-size: .82rem; }
  .btn-grande { min-height: 52px; font-size: 1rem; }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=month], input[type=tel], input[type=search],
  select, textarea { min-height: 46px; font-size: 16px; padding: .65rem .8rem; }
  .checa input { min-width: 22px; min-height: 22px; }

  /* ---- tabela: rolagem horizontal fluida, sem quebrar coluna */
  table { font-size: .84rem; }
  thead th { font-size: .64rem; padding: .5rem; }
  tbody td { padding: .55rem .5rem; }
  .tabela-rolagem { -webkit-overflow-scrolling: touch; }

  /* ---- números grandes: caber sem estourar a linha */
  .pdv { grid-template-columns: 1fr; }
  .pdv-total { font-size: 1.7rem; }
  .meta-valor { font-size: 2rem; }
  .meta-pct { font-size: .9rem; }
  .kpi .valor { font-size: 1.35rem; }
  .fila-n { font-size: 1.7rem; }
  .fila-cartao { padding: .8rem .9rem; }

  /* ---- listas de ação: botões ocupando a linha */
  .barra-botoes { gap: .45rem; }
  .barra-botoes .btn { flex: 1 1 auto; }
  td.encolhe .btn { margin-bottom: .2rem; }

  .paginacao { flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
  .paginacao a {
    flex: 1; text-align: center; min-height: 42px;
    display: flex; align-items: center; justify-content: center;
  }

  .sugestoes { position: fixed; left: .6rem; right: .6rem; min-width: 0; max-width: none; }

  /* ---- quadro: rola na horizontal, coluna com largura de leitura */
  .quadro { grid-template-columns: repeat(6, 80vw); gap: .6rem; }

  /* ---- gráficos: rótulo mais raro para não virar borrão */
  .grafico-barras { height: 120px; }
  .grafico-barras .gb-col:not(:nth-child(7n)) .gb-rot { display: none; }

  /* ---- login: ocupa a tela sem parecer apertado */
  .caixa-login { padding: 1.5rem 1.25rem; border-radius: 22px; }

  /* ---- formulários longos: campos empilhados de verdade */
  .linha-campos { grid-template-columns: 1fr; gap: .7rem; }
  .criar-inline-linha { grid-template-columns: 1fr; }
  .agenda-navegacao { align-items: stretch; flex-direction: column; }
  .agenda-navegacao .campo { min-width: 100%; }
  .agenda-semana { grid-template-columns: repeat(var(--agenda-dias, 7), 82vw); min-width: 100%; }
  .agenda-dia { height: 28rem; min-height: 0; }
  .agenda-dia-lista-cabecalho, .agenda-escala-cabecalho { align-items: stretch; flex-direction: column; }
  .agenda-lista-item { grid-template-columns: 3.5rem minmax(0,1fr); gap: .7rem; padding: .7rem .8rem; }
  .agenda-lista-status { grid-column: 2; justify-content: start; }
  .agenda-calendario-mes { grid-template-columns: repeat(7, minmax(105px, 1fr)); }
  .agenda-hero { grid-template-columns: 1fr; text-align: left; padding-top: 2.4rem; }
  .agenda-hero:has(.agenda-hero-editar) .agenda-progresso-topo { padding-right: 0; }
  .agenda-hero-data, .agenda-hero-lateral { border: 0; padding: 0; max-width: none; }
  .agenda-hero-editar span { display: none; }
  .agenda-timeline { grid-template-columns: 1fr; }
  .agenda-timeline-col:first-child { border-right: 0; border-bottom: 1px solid var(--linha); padding-bottom: 1.1rem; }
  .agenda-timeline-card, .agenda-timeline-livre { flex-wrap: wrap; }
}

/* ---------------------------------------------------- celular estreito -- */
@media (max-width: 420px) {
  .funil-linha { grid-template-columns: 7.2rem 1fr 3.4rem; gap: .45rem; }
  .funil-rotulo { font-size: .78rem; }
  .cabecalho-pagina h1 { font-size: 1.12rem; }
  .cartao { padding: .75rem; }
  .cartao-titulo { margin: -.75rem -.75rem .65rem; padding: .6rem .75rem; }
  .tabela-rolagem { margin: 0 -.75rem; padding: 0 .75rem; }
  .meta-valor { font-size: 1.75rem; }
  .pdv-total { font-size: 1.5rem; }
  .marca span { display: none; }   /* só "IBV" quando o espaço aperta */
  .topo { padding-left: .5rem; padding-right: .5rem; }
}

/* ------------------------------------------------------------ tela larga -- */
@media (min-width: 1600px) {
  .corpo { padding: 1.25rem 2rem 0; }
  .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------- telefone deitado (baixo) -- */
/* Barra inferior fixa come metade da tela num celular na horizontal. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body { padding-bottom: 0; }
  .menu {
    position: static; left: auto; right: auto; bottom: auto;
    border-radius: var(--raio-grande); box-shadow: var(--sombra);
    margin-bottom: .6rem;
  }
}

/* ============================================================ celebração -- */
/* Comemoração de um agendamento fechado. Confete em CSS puro (sem lib
   externa) espalhado pela tela inteira desde o primeiro frame — não é uma
   chuva que começa lá em cima e demora a preencher, já nasce cheia. A caixa
   entra com uma pequena "mola" (cubic-bezier passando de 1 antes de
   assentar), e tudo some com um clique — nunca trava o fluxo. */
.celebracao-fundo {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6, 20, 28, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: celebracao-fundo-entra .2s ease-out;
}
@keyframes celebracao-fundo-entra { from { opacity: 0; } to { opacity: 1; } }

.celebracao-confete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celebracao-confete-peca {
  position: absolute; top: -10%; opacity: .95;
  animation-name: celebracao-cair; animation-timing-function: cubic-bezier(.35, 0, .65, 1); animation-fill-mode: forwards;
}
.celebracao-confete-peca.quadrado { border-radius: 2px; }
.celebracao-confete-peca.redondo  { border-radius: 50%; }
@keyframes celebracao-cair {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(120vh) rotate(720deg); opacity: .25; }
}

.celebracao-caixa {
  position: relative; max-width: min(440px, calc(100vw - 2rem)); width: 100%;
  background: var(--vidro-alto); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-grande); box-shadow: var(--sombra-alta), 0 0 0 1px rgba(255,255,255,.4) inset;
  padding: 2.25rem 2rem 2rem; text-align: center;
  animation: celebracao-caixa-entra .4s cubic-bezier(.22, 1.2, .32, 1.15);
}
@keyframes celebracao-caixa-entra {
  from { opacity: 0; transform: scale(.8) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.celebracao-fechar {
  position: absolute; top: .7rem; right: .85rem; border: none; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--tinta-fraca); cursor: pointer; padding: .25rem;
}
.celebracao-fechar:hover { color: var(--tinta); }

.celebracao-check {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--ok-fraco); color: var(--ok); font-size: 2.3rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px var(--ok-fraco), 0 8px 20px rgba(18, 112, 74, .25);
  animation: celebracao-check-pop .5s cubic-bezier(.22, 1.4, .36, 1) .05s both;
}
@keyframes celebracao-check-pop {
  from { transform: scale(0); } to { transform: scale(1); }
}

.celebracao-titulo {
  font-size: 1.6rem; font-weight: 850; letter-spacing: -.015em; margin: 0 0 .85rem;
  line-height: 1.15;
}

.celebracao-bonus {
  display: inline-block; margin: 0 0 1rem; padding: .5rem 1.1rem; border-radius: 99px;
  background: linear-gradient(135deg, var(--ok), #1a8f5f); color: #fff; font-weight: 800;
  font-size: 1rem; letter-spacing: .01em; box-shadow: 0 6px 16px rgba(18, 112, 74, .32);
}

.celebracao-progresso { margin: 0 0 .5rem; }
.celebracao-linha { margin: .25rem 0; color: var(--tinta-media); font-size: 1rem; }
.celebracao-linha strong { color: var(--tinta); font-size: 1.2rem; font-weight: 800; }
.celebracao-linha.forte {
  color: var(--alerta); font-weight: 800; font-size: 1.05rem; margin-top: .6rem;
}
.celebracao-barra {
  margin: .5rem auto 0; max-width: 220px; height: 8px; border-radius: 99px;
  background: var(--divisor); overflow: hidden;
}
.celebracao-barra-preenche {
  height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acento), var(--ok));
  transition: width .5s ease;
}

.celebracao-botao { display: block; width: 100%; margin-top: 1.25rem; font-size: 1.05rem; padding: .85rem; }
.celebracao-link-secundario {
  display: block; margin-top: .65rem; font-size: .85rem; color: var(--tinta-fraca); text-decoration: none;
}
.celebracao-link-secundario:hover { color: var(--acento-forte); text-decoration: underline; }

/* ==========================================================================
   CENTRAL DE MISSÃO — a porta da tela inicial
   ==========================================================================

   Aqui o material muda de propósito, e por isso muda de aparência.

   O resto do sistema é vidro: superfície translúcida sobre a aurora, feita
   pra sumir e deixar o dado na frente. Isso é certo numa tabela de 400
   linhas. É errado num placar. Placar precisa de contraste alto, borda
   definida e cor chapada — o olho tem que achar o número antes de procurar.

   Então esta dobra é sólida: cartão branco, hairline, sombra curta. O vidro
   volta logo abaixo, no bloco de indicadores. A quebra é deliberada e marca
   a fronteira entre "o que eu faço agora" e "como a loja está".

   O azul também é outro. O teal da marca continua mandando no sistema
   inteiro; aqui entra um azul de ação, mais saturado, reservado ao que é
   clicável nesta dobra. Cor que aparece em todo lugar não chama atenção em
   lugar nenhum — este azul aparece três vezes na tela e as três são botão.

   A hierarquia da dobra é vertical e tem uma ordem só:
     1. o herói      — um número: quanto falta HOJE
     2. quem é o primeiro — uma pessoa, com nome
     3. quem vem depois   — nomes em cinza, promessa de continuidade
     4. a faixa      — o mês, fininho, sem competir com nada disso
   -------------------------------------------------------------------------- */

:root {
  /* ação */
  --m-azul:        #1b6ef3;
  --m-azul-forte:  #0d51c4;
  --m-azul-fraco:  #e7f0fe;

  /* O botão tem o próprio par de cores, separado do azul de texto. No tema
     escuro o azul de texto precisa CLAREAR pra ser legível — e botão azul
     claro com letra branca perde contraste. Dois pares resolvem os dois
     problemas sem que um estrague o outro. */
  --m-btn-1: #1b6ef3;
  --m-btn-2: #0d51c4;

  /* semânticas da dobra — mais vivas que as do sistema, de propósito */
  --m-verde:  #0c9d6a;  --m-verde-fraco:  #dcf6ea;
  --m-laranja:#ea6a1e;  --m-laranja-fraco:#ffeddf;
  --m-roxo:   #7c4ddb;  --m-roxo-fraco:   #eee7fd;
  --m-ambar:  #c98205;  --m-ambar-fraco:  #fdf1d4;
  --m-rosa:   #d6416e;  --m-rosa-fraco:   #fde7ee;

  /* superfície sólida */
  --m-cartao:     #fff;
  --m-cartao-2:   #f7fafd;
  --m-vidro:      rgba(255, 255, 255, .58);
  --m-borda:      rgba(16, 40, 66, .10);
  --m-borda-forte:rgba(16, 40, 66, .16);
  --m-sombra:     0 1px 2px rgba(16, 40, 66, .05), 0 6px 18px rgba(16, 40, 66, .07);
  --m-sombra-alta:0 2px 4px rgba(16, 40, 66, .06), 0 14px 34px rgba(16, 40, 66, .13);

  --m-texto:   #0d1b2a;
  --m-texto-2: #4a5f75;
  --m-texto-3: #8ba0b6;

  --m-hero:  linear-gradient(104deg, #e9f2ff 0%, #f6fbff 42%, #fffaf2 100%);
  --m-raio:  18px;

  /* a cena do fundo */
  --m-ceu-1: #cfe3f8;  --m-ceu-2: #e7f1fc;  --m-ceu-3: #fdeedd;
  --m-sol: #ffc46b;    --m-sol-nucleo: #ffd99e;
  --m-nuvem:   rgba(255, 255, 255, .72);
  --m-passaro: rgba(84, 116, 148, .45);
  --m-monte-1: #bad3ea;
  --m-monte-2: #8fb4d8;
  --m-neve:    #fff;
  --m-nevoa:   rgba(255, 255, 255, .55);
  --m-monte-4a:#5b7fa6; --m-monte-4b:#3a587a;
  --m-monte-borda: #82a3c6;
  --m-figura:  #22374c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --m-azul:       #4f9dff;
    --m-azul-forte: #7cb8ff;
    --m-azul-fraco: rgba(79, 157, 255, .16);
    --m-btn-1: #2f7fe6;
    --m-btn-2: #17509f;

    --m-verde:  #4fd6a0;  --m-verde-fraco:  rgba(79, 214, 160, .15);
    --m-laranja:#ff9a5c;  --m-laranja-fraco:rgba(255, 154, 92, .15);
    --m-roxo:   #b696f5;  --m-roxo-fraco:   rgba(182, 150, 245, .16);
    --m-ambar:  #f0c257;  --m-ambar-fraco:  rgba(240, 194, 87, .15);
    --m-rosa:   #ff87ab;  --m-rosa-fraco:   rgba(255, 135, 171, .15);

    --m-cartao:      #0d2430;
    --m-cartao-2:    #0a1d27;
    --m-vidro:       rgba(8, 26, 36, .55);
    --m-borda:       rgba(255, 255, 255, .10);
    --m-borda-forte: rgba(255, 255, 255, .18);
    --m-sombra:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .34);
    --m-sombra-alta: 0 2px 6px rgba(0, 0, 0, .36), 0 18px 40px rgba(0, 0, 0, .46);

    --m-texto:   #e9f2f5;
    --m-texto-2: rgba(233, 242, 245, .72);
    --m-texto-3: rgba(233, 242, 245, .46);

    --m-hero: linear-gradient(104deg, #0c2b3d 0%, #0a2230 44%, #13242c 100%);

    --m-ceu-1: #09253a;  --m-ceu-2: #0d3047;  --m-ceu-3: #2b3a46;
    --m-sol: #d9823a;    --m-sol-nucleo: #f0a95f;
    --m-nuvem:   rgba(255, 255, 255, .09);
    --m-passaro: rgba(200, 222, 240, .32);
    --m-monte-1: #163a53;
    --m-monte-2: #0f2c41;
    --m-neve:    rgba(255, 255, 255, .55);
    --m-nevoa:   rgba(126, 176, 208, .13);
    --m-monte-4a:#0c2333; --m-monte-4b:#04141e;
    --m-monte-borda: #1e4864;
    --m-figura:  #93c9e6;
  }
}

:root[data-tema="escuro"] {
  --m-azul:       #4f9dff;
  --m-azul-forte: #7cb8ff;
  --m-azul-fraco: rgba(79, 157, 255, .16);
  --m-btn-1: #2f7fe6;
  --m-btn-2: #17509f;

  --m-verde:  #4fd6a0;  --m-verde-fraco:  rgba(79, 214, 160, .15);
  --m-laranja:#ff9a5c;  --m-laranja-fraco:rgba(255, 154, 92, .15);
  --m-roxo:   #b696f5;  --m-roxo-fraco:   rgba(182, 150, 245, .16);
  --m-ambar:  #f0c257;  --m-ambar-fraco:  rgba(240, 194, 87, .15);
  --m-rosa:   #ff87ab;  --m-rosa-fraco:   rgba(255, 135, 171, .15);

  --m-cartao:      #0d2430;
  --m-cartao-2:    #0a1d27;
  --m-vidro:       rgba(8, 26, 36, .55);
  --m-borda:       rgba(255, 255, 255, .10);
  --m-borda-forte: rgba(255, 255, 255, .18);
  --m-sombra:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .34);
  --m-sombra-alta: 0 2px 6px rgba(0, 0, 0, .36), 0 18px 40px rgba(0, 0, 0, .46);

  --m-texto:   #e9f2f5;
  --m-texto-2: rgba(233, 242, 245, .72);
  --m-texto-3: rgba(233, 242, 245, .46);

  --m-hero: linear-gradient(104deg, #0c2b3d 0%, #0a2230 44%, #13242c 100%);

  --m-ceu-1: #09253a;  --m-ceu-2: #0d3047;  --m-ceu-3: #2b3a46;
  --m-sol: #d9823a;    --m-sol-nucleo: #f0a95f;
  --m-nuvem:   rgba(255, 255, 255, .09);
  --m-passaro: rgba(200, 222, 240, .32);
  --m-monte-1: #163a53;
  --m-monte-2: #0f2c41;
  --m-neve:    rgba(255, 255, 255, .55);
  --m-nevoa:   rgba(126, 176, 208, .13);
  --m-monte-4a:#0c2333; --m-monte-4b:#04141e;
  --m-monte-borda: #1e4864;
  --m-figura:  #93c9e6;
}

/* Tela que traz o próprio cabeçalho desenhado: sobra só a fileira de ações,
   que encosta na direita e encolhe o respiro pra não abrir um buraco. */
.cabecalho-so-acoes { margin-bottom: .5rem; }
.cabecalho-so-acoes .cabecalho-pagina-titulos { flex: 0 0 auto; }

/* -------------------------------------------------------------- o herói -- */
.missao-hero {
  position: relative; overflow: hidden;
  border-radius: calc(var(--m-raio) + 4px);
  background: var(--m-hero);
  box-shadow: var(--m-sombra-alta), inset 0 0 0 1px var(--m-borda);
  padding: 1.5rem 1.7rem 1.6rem;
  margin-bottom: 1rem;
  color: var(--m-texto);
}

/* A cena é uma faixa na base do herói, encostada na direita, com proporção
   FIXA. `height: 100%` seria o reflexo natural e está errado: esticada, a
   ilustração escala pra cobrir, o cume sobe junto e a figura vai parar embaixo
   da data, da citação ou do título — cada largura de tela quebrando de um
   jeito diferente. Com `aspect-ratio` a cena ocupa sempre a mesma fatia,
   e a única coisa que muda entre 1280 e 1600 é o tamanho dela.

   A máscara apaga o começo da faixa, que é onde o texto do herói passa por
   cima. O corte em 34% é o ponto em que a encosta do pico já saiu de baixo
   de "…para fechar o dia." e a figura ainda está em opacidade cheia. */
.missao-cena {
  position: absolute; right: 0; bottom: 0;
  width: min(52%, 600px); aspect-ratio: 700 / 280; height: auto;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
  opacity: .96;
}
.missao-hero-conteudo { position: relative; z-index: 1; }

.missao-topo {
  display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1.35rem;
}
.missao-ola { display: flex; align-items: flex-start; gap: .85rem; }
.missao-mao {
  font-size: 1.9rem; line-height: 1;
  animation: missao-acena 2.6s ease-in-out 1s 2;
  transform-origin: 70% 80%;
}
@keyframes missao-acena {
  0%, 60%, 100% { transform: rotate(0); }
  70% { transform: rotate(14deg); }
  80% { transform: rotate(-8deg); }
  90% { transform: rotate(10deg); }
}

.missao-titulo {
  margin: 0; font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em;
  line-height: 1.1; color: var(--m-texto);
}
.missao-lema { margin: .2rem 0 0; font-size: .92rem; color: var(--m-texto-2); }

.missao-data {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--m-cartao); color: var(--m-texto-2);
  border: 1px solid var(--m-borda); border-radius: 11px;
  padding: .5rem .85rem; font-size: .82rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--m-sombra);
}

/* A citação fica no canto superior direito — que é também o canto onde a
   figura chega no cume. Em tela larga há espaço pros dois; abaixo de 1400px
   não há, e a citação ia parar exatamente em cima de quem subiu a montanha.
   Então ela desce uma linha e volta pra esquerda, onde a máscara já apagou a
   ilustração. O vidro é o seguro pro que sobrar: legível sobre céu, sobre
   montanha e sobre o que a cena puser embaixo dela. */
.missao-citacao {
  margin: 0; max-width: 21rem;
  padding: .55rem .85rem .55rem .8rem; border-radius: 12px;
  border-left: 3px solid var(--m-azul);
  background: var(--m-vidro);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: inset 0 0 0 1px var(--m-borda);
  font-size: .84rem; font-style: italic; line-height: 1.45; color: var(--m-texto-2);
}
@media (max-width: 1400px) {
  .missao-citacao { flex: 0 0 100%; max-width: 30rem; margin-top: -.5rem; }
}

/* ------------------------------------------------------------ o número -- */
.missao-central {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr) auto; align-items: end;
}

.missao-selo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .11em;
  color: var(--m-azul);
}

/* A frase grande é a tela inteira resumida numa linha. Ela responde "já posso
   parar?" e mais nada — tudo que competisse com ela aqui foi removido. */
.missao-chamada {
  margin: .5rem 0 .75rem; font-size: 1.95rem; font-weight: 800;
  letter-spacing: -.038em; line-height: 1.12; color: var(--m-texto);
}
.missao-numero { color: var(--m-azul); font-weight: 850; }
.missao-sub {
  margin: 0; font-size: .92rem; color: var(--m-texto-2);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}

.missao-dia-progresso { display: grid; gap: .5rem; max-width: 30rem; }
.missao-barra {
  display: block; height: 10px; border-radius: 99px;
  background: var(--m-borda); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16, 40, 66, .08);
}
.missao-barra-preenche {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--m-verde), #067a51);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.missao-barra-preenche.atras { background: linear-gradient(90deg, var(--m-azul), var(--m-verde)); }

.missao-sequencia {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--m-laranja-fraco); color: var(--m-laranja);
  font-size: .76rem; font-weight: 800; padding: .25rem .6rem; border-radius: 99px;
}

/* Bolha de ícone: o mesmo objeto em seis cores, usado na tela inteira. */
.missao-bolha {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.missao-bolha-azul    { background: var(--m-azul-fraco);    color: var(--m-azul); }
.missao-bolha-verde   { background: var(--m-verde-fraco);   color: var(--m-verde); }
.missao-bolha-laranja { background: var(--m-laranja-fraco); color: var(--m-laranja); }
.missao-bolha-roxo    { background: var(--m-roxo-fraco);    color: var(--m-roxo); }
.missao-bolha-ambar   { background: var(--m-ambar-fraco);   color: var(--m-ambar); }
.missao-bolha-rosa    { background: var(--m-rosa-fraco);    color: var(--m-rosa); }

.missao-icone { width: 1.25rem; height: 1.25rem; }
.missao-icone-mini { width: 1rem; height: 1rem; }

/* -------------------------------------------------------- o botão único --
   A coluna fica SOBRE a montanha, e ganha o vidro do resto do sistema: vira
   um painel flutuando sobre a paisagem, que é exatamente a metáfora da tela. */
.missao-central-direita {
  display: grid; gap: .65rem; justify-items: stretch; align-content: end;
  min-width: 212px; padding: .85rem 1rem 1rem; border-radius: 16px;
  background: var(--m-vidro);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: inset 0 0 0 1px var(--m-borda);
}
.missao-foco {
  margin: 0; font-size: .82rem; font-weight: 800; line-height: 1.3;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--m-texto);
}
.missao-ritual {
  margin: 0; padding: 0; list-style: none; display: grid; gap: .16rem;
  font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .14em;
  color: var(--m-texto-2);
}
.missao-comecar {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.4rem; border-radius: 13px;
  background: linear-gradient(180deg, var(--m-btn-1), var(--m-btn-2));
  color: #fff; text-decoration: none;
  font-size: 1rem; font-weight: 750; letter-spacing: .01em;
  box-shadow: 0 2px 4px rgba(13, 81, 196, .24), 0 10px 24px rgba(13, 81, 196, .3),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.missao-comecar:hover {
  text-decoration: none; color: #fff; transform: translateY(-2px); filter: saturate(1.1);
  box-shadow: 0 4px 8px rgba(13, 81, 196, .26), 0 16px 34px rgba(13, 81, 196, .38),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}
.missao-comecar:active { transform: translateY(0); }
.missao-comecar-play { font-size: .8rem; }

/* Bateu a meta do dia: o herói inteiro vira verde. É a recompensa da dobra. */
.missao-hero-zerado .missao-selo { color: var(--m-verde); }
.missao-hero-zerado .missao-numero { color: var(--m-verde); }
.missao-hero-zerado .missao-citacao { border-left-color: var(--m-verde); }
.missao-hero-zerado .missao-comecar {
  background: linear-gradient(180deg, var(--m-verde), #067a51);
  box-shadow: 0 2px 4px rgba(6, 122, 81, .24), 0 10px 24px rgba(6, 122, 81, .3),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ------------------------------------------------ quem é o primeiro -- */
.missao-proxima {
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  border-radius: var(--m-raio); box-shadow: var(--m-sombra);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 1.15rem 1.25rem 1.25rem; margin: 0 0 .7rem;
}
.missao-proxima-cabeca { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.missao-proxima-cabeca h3 {
  margin: 0; font-size: 1.12rem; font-weight: 750; letter-spacing: -.02em; color: var(--m-texto);
}
.missao-tag-quente {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  background: var(--m-laranja-fraco); color: var(--m-laranja);
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: .4rem .7rem; border-radius: 99px; white-space: nowrap;
}

.missao-pessoa { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.missao-avatar {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--m-azul-fraco); color: var(--m-azul);
  font-size: .85rem; font-weight: 800; letter-spacing: .02em;
}
.missao-pessoa-nome { display: grid; min-width: 0; }
.missao-pessoa-nome strong { font-size: 1rem; font-weight: 750; color: var(--m-texto); }
.missao-pessoa-canal { font-size: .78rem; color: var(--m-texto-3); }
.missao-quando {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--m-texto-3); white-space: nowrap;
}

.missao-porque {
  margin: 0 0 .7rem; font-size: 1.02rem; font-weight: 700;
  line-height: 1.4; letter-spacing: -.012em; color: var(--m-texto);
}
.missao-contexto {
  margin: 0 0 1.05rem; padding: .65rem .85rem; border-radius: 11px;
  background: var(--m-cartao-2); border: 1px solid var(--m-borda);
  font-size: .86rem; font-style: italic; color: var(--m-texto-2); line-height: 1.45;
}

.missao-proxima-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.missao-botao-principal {
  flex: 0 1 18rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.1rem; border-radius: 12px;
  background: linear-gradient(180deg, var(--m-btn-1), var(--m-btn-2));
  color: #fff; text-decoration: none; font-size: .94rem; font-weight: 700;
  box-shadow: 0 2px 4px rgba(13, 81, 196, .2), 0 8px 20px rgba(13, 81, 196, .26),
              inset 0 1px 0 rgba(255, 255, 255, .26);
  transition: transform .16s ease, box-shadow .16s ease;
}
.missao-botao-principal:hover { text-decoration: none; color: #fff; transform: translateY(-2px); }
.missao-botao-secundario {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .8rem 1.1rem; border-radius: 12px;
  background: var(--m-cartao); border: 1px solid var(--m-borda-forte);
  color: var(--m-texto-2); text-decoration: none; font-size: .94rem; font-weight: 650;
}
.missao-botao-secundario:hover { text-decoration: none; color: var(--m-texto); background: var(--m-cartao-2); }

.missao-proxima-vazia { text-align: left; }
.missao-proxima-vazio-texto { margin: 0 0 1rem; font-size: .9rem; color: var(--m-texto-2); line-height: 1.5; }

/* ------------------------------------------------------- quem vem depois -- */
/* Nomes, não contadores. "Mais 3 pessoas · R$ 8.900 em jogo" é o que faz
   alguém entrar no modo foco em vez de ligar pra uma e voltar pro painel —
   e o que transforma "mais algumas ligações" em dinheiro na mesa. */
.missao-fila {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  border-radius: var(--m-raio); box-shadow: var(--m-sombra);
  padding: .8rem 1.1rem; margin-bottom: .7rem;
  text-decoration: none; color: var(--m-texto);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.missao-fila:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--m-sombra-alta); border-color: var(--m-borda-forte);
}
.missao-fila-titulo { font-size: .86rem; color: var(--m-texto-2); }
.missao-fila-titulo strong { color: var(--m-verde); font-weight: 750; }
.missao-fila-gente { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.missao-fila-item {
  display: flex; align-items: center; gap: .45rem;
  background: var(--m-cartao-2); border: 1px solid var(--m-borda);
  border-radius: 99px; padding: .3rem .75rem .3rem .3rem;
}
.missao-fila-avatar {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--m-azul-fraco); color: var(--m-azul);
  font-size: .6rem; font-weight: 800;
}
.missao-fila-nome { font-size: .8rem; font-weight: 650; color: var(--m-texto-2); }
.missao-fila-tipo { font-size: .72rem; color: var(--m-texto-3); }
.missao-fila-seta { color: var(--m-texto-3); font-size: 1.2rem; line-height: 1; }

/* -------------------------------------------------------------- a faixa -- */
/* O horizonte longo, numa linha. Era um placar de quatro cartões; virou faixa
   porque nenhum desses números muda a próxima ação — eles respondem "como o
   mês vai", que é pergunta de fim de expediente. */
.missao-faixa {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  border-radius: var(--m-raio); box-shadow: var(--m-sombra);
  padding: .8rem 1.15rem; margin-bottom: 1rem;
}
.missao-faixa-item {
  display: flex; align-items: center; gap: .65rem; flex: 1 1 18rem;
  text-decoration: none; color: var(--m-texto); min-width: 0;
}
.missao-faixa-item:hover { text-decoration: none; }
.missao-faixa-item:hover .missao-faixa-rotulo { color: var(--m-azul); }
.missao-faixa-curto { flex: 0 1 auto; gap: .45rem; }
.missao-faixa-curto strong { font-size: 1rem; font-weight: 800; }
.missao-faixa-rotulo {
  font-size: .78rem; font-weight: 650; color: var(--m-texto-3); white-space: nowrap;
}
.missao-faixa-barra {
  flex: 1 1 5rem; min-width: 4rem; height: 7px; border-radius: 99px;
  background: var(--m-borda); overflow: hidden;
}
.missao-faixa-barra > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--m-azul), var(--m-verde));
}
.missao-faixa-barra > span.atras { background: linear-gradient(90deg, var(--m-ambar), var(--m-laranja)); }
.missao-faixa-valor {
  font-size: .78rem; color: var(--m-texto-3); white-space: nowrap;
  display: flex; align-items: baseline; gap: .4rem;
}
.missao-faixa-valor strong { font-size: .95rem; font-weight: 800; color: var(--m-texto); }

.missao-faixa-aviso {
  margin: -.5rem 0 1rem; padding: .7rem 1rem; border-radius: 12px;
  background: var(--m-ambar-fraco); color: var(--m-ambar);
  font-size: .84rem; font-weight: 600; line-height: 1.45;
}

/* ------------------------------------------------------------ respostas -- */
@media (max-width: 1180px) {
  .missao-central { grid-template-columns: minmax(0, 1fr); }
  .missao-central-direita { grid-template-columns: 1fr auto; align-items: center; }
  .missao-ritual { grid-auto-flow: column; gap: .8rem; }
  .missao-fila-gente { margin-left: 0; }
}

@media (max-width: 760px) {
  .missao-hero { padding: 1.15rem 1.1rem 1.25rem; }

  /* No celular a cena vira uma faixa na base, bem apagada: a coluna é
     estreita, e paisagem em opacidade alta atrás de texto empilhado vira
     mancha, não montanha. Pouca tinta e muito ar. */
  .missao-cena {
    width: 100%; opacity: .26;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  }

  .missao-titulo  { font-size: 1.45rem; }
  .missao-chamada { font-size: 1.5rem; }
  .missao-data { margin-left: 0; }
  .missao-citacao { max-width: none; margin-top: 0; }
  .missao-central-direita { grid-template-columns: 1fr; }
  .missao-ritual { grid-auto-flow: column; justify-content: space-between; font-size: .64rem; letter-spacing: .08em; }
  .missao-fila-gente { display: none; }   /* no celular vale o "mais 3 pessoas", não os rostos */
  .missao-faixa { gap: .75rem; }
  .missao-faixa-item { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .missao-mao { animation: none; }
  .missao-fila, .missao-comecar, .missao-botao-principal { transition: none; }
  .missao-fila:hover, .missao-comecar:hover, .missao-botao-principal:hover { transform: none; }
  .missao-barra-preenche { transition: none; }
}

/* ==========================================================================
   MODO FOCO — uma pessoa por vez
   ==========================================================================

   A regra de desenho aqui é subtrativa: se um elemento não ajuda a falar com
   a pessoa que está na tela, ele não entra. Sem menu, sem barra de loja, sem
   busca, sem migalha de pão. Dezessete links na lateral são dezessete
   convites pra sair do que ela está fazendo.

   O cartão é estreito de propósito (~34rem). Linha curta se lê de relance, e
   o olho não precisa varrer a tela pra achar o próximo elemento — tudo cai
   numa coluna só, na ordem exata em que a decisão acontece: quem é, por quê,
   falar, desfecho.
   -------------------------------------------------------------------------- */

body.tela-foco {
  background: var(--fundo-base);
  background-image: var(--aurora);
  background-attachment: fixed;
  min-height: 100vh;
}

.foco {
  max-width: 34rem; margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}

.foco-topo {
  display: flex; align-items: center; gap: 1rem;
  font-size: .85rem; color: var(--m-texto-2);
}
.foco-sair { color: var(--m-texto-2); text-decoration: none; font-weight: 600; }
.foco-sair:hover { color: var(--m-azul); }
.foco-contador {
  margin-left: auto; font-weight: 750; color: var(--m-texto);
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  padding: .35rem .75rem; border-radius: 99px; box-shadow: var(--m-sombra);
}

/* ------------------------------------------------------------ progresso -- */
/* Duas réguas, uma barra. A contagem ("3 de 7") mexe a cada clique e sustenta
   a sensação de avanço; o dinheiro mexe só na venda e é o que encerra o dia.
   Uma sozinha não segura: contagem sem dinheiro vira trabalho sem resultado,
   dinheiro sem contagem fica parado a manhã inteira. */
.foco-progresso { display: grid; gap: .5rem; }
.foco-barra {
  height: 10px; border-radius: 99px; overflow: hidden;
  background: var(--m-borda);
  box-shadow: inset 0 1px 2px rgba(16, 40, 66, .08);
}
.foco-barra-preenche {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--m-azul), var(--m-verde));
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.foco-barra-preenche.bateu { background: linear-gradient(90deg, var(--m-verde), #067a51); }
.foco-falta {
  margin: 0; text-align: center; font-size: .95rem; color: var(--m-texto-2);
}
.foco-falta strong { color: var(--m-texto); font-weight: 800; }

/* --------------------------------------------------------------- cartão -- */
.foco-cartao {
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  border-radius: calc(var(--m-raio) + 4px); box-shadow: var(--m-sombra-alta);
  padding: 1.75rem 1.6rem 1.5rem;
  animation: foco-entra .32s cubic-bezier(.22, 1, .36, 1);
}
/* A próxima pessoa ENTRA, não aparece. O movimento curto marca a troca sem
   pedir atenção — sem ele, dois nomes parecidos em sequência dão a sensação
   de que o clique não fez nada. */
@keyframes foco-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.foco-pessoa { text-align: center; margin-bottom: 1.25rem; }
.foco-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 50%; margin-bottom: .6rem;
  background: var(--m-azul-fraco); color: var(--m-azul);
  font-size: 1.3rem; font-weight: 800; letter-spacing: .02em;
}
.foco-nome {
  margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -.035em;
  line-height: 1.1; color: var(--m-texto);
}
.foco-linha {
  margin: .5rem 0 0; display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap; font-size: .82rem; color: var(--m-texto-3);
}
.foco-valor { color: var(--m-verde); font-weight: 750; }

.foco-porque {
  margin: 0 0 .75rem; font-size: 1.12rem; font-weight: 700; line-height: 1.4;
  letter-spacing: -.015em; color: var(--m-texto);
}
.foco-contexto {
  margin: 0 0 1.25rem; padding: .75rem .95rem; border-radius: 12px;
  background: var(--m-cartao-2); border: 1px solid var(--m-borda);
  font-size: .92rem; font-style: italic; line-height: 1.5; color: var(--m-texto-2);
}

.foco-falar {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.4rem; border-radius: 14px; margin-bottom: 1.5rem;
  background: linear-gradient(180deg, var(--m-btn-1), var(--m-btn-2));
  color: #fff; text-decoration: none; font-size: 1.08rem; font-weight: 750;
  box-shadow: 0 2px 4px rgba(13, 81, 196, .22), 0 10px 26px rgba(13, 81, 196, .3),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.foco-falar:hover { text-decoration: none; color: #fff; transform: translateY(-2px); }
.foco-falar:active { transform: translateY(0); }

.foco-sem-contato {
  margin: 0 0 1.5rem; padding: .85rem; border-radius: 12px; text-align: center;
  background: var(--m-ambar-fraco); color: var(--m-ambar);
  font-size: .9rem; font-weight: 600;
}

/* -------------------------------------------------------------- desfecho -- */
.foco-pergunta {
  margin: 0 0 .6rem; text-align: center;
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--m-texto-3);
}
.foco-desfechos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.foco-desfechos form { margin: 0; display: contents; }

.foco-desfecho {
  width: 100%; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .85rem .5rem; border-radius: 13px;
  border: 1.5px solid var(--m-borda-forte); background: var(--m-cartao);
  color: var(--m-texto-2); font-size: .92rem; font-weight: 700;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.foco-desfecho:hover { transform: translateY(-2px); }
.foco-desfecho:disabled { opacity: .5; cursor: default; transform: none; }

/* A tecla fica impressa no botão. Quem usa mouse ignora; quem usa teclado
   aprende sem ninguém explicar, e em dois dias não olha mais pro botão. */
.foco-tecla {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 6px;
  background: var(--m-cartao-2); border: 1px solid var(--m-borda);
  font-size: .7rem; font-weight: 800; color: var(--m-texto-3);
}

.foco-desfecho-ok { border-color: var(--m-verde); color: var(--m-verde); }
.foco-desfecho-ok:hover { background: var(--m-verde-fraco); }
.foco-desfecho-ok .foco-tecla { background: var(--m-verde-fraco); color: var(--m-verde); border-color: transparent; }

.foco-desfecho-espera:hover { background: var(--m-ambar-fraco); border-color: var(--m-ambar); color: var(--m-ambar); }
.foco-desfecho-nao:hover    { background: var(--m-rosa-fraco);  border-color: var(--m-rosa);  color: var(--m-rosa); }

/* Pular é discreto de propósito: precisa existir (ninguém atende sempre), mas
   não pode competir com os três desfechos que realmente movem a fila. */
.foco-pular { margin: .9rem 0 0; text-align: center; }
.foco-pular button {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: .85rem; color: var(--m-texto-3); text-decoration: underline;
  text-underline-offset: 3px; padding: .3rem;
}
.foco-pular button:hover { color: var(--m-texto-2); }

/* ---------------------------------------------------------------- depois -- */
/* Quem vem depois aparece em CINZA e sem link. É promessa de continuidade —
   "ainda tem gente" —, não um menu: no instante em que dá pra escolher, volta
   o custo de decisão que a tela inteira existe pra eliminar. */
.foco-depois { text-align: center; opacity: .75; }
.foco-depois-titulo {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--m-texto-3);
}
.foco-depois ul {
  margin: .5rem 0 0; padding: 0; list-style: none;
  display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap;
}
.foco-depois li {
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--m-vidro); border: 1px solid var(--m-borda);
  border-radius: 10px; padding: .4rem .7rem;
  font-size: .78rem; color: var(--m-texto-2);
}
.foco-depois li strong { font-weight: 650; color: var(--m-texto-2); }
.foco-depois li span { font-size: .68rem; color: var(--m-texto-3); }

/* ----------------------------------------------------------- fila zerada -- */
.foco-vazio { text-align: center; }
.foco-vazio .foco-porque, .foco-vazio .foco-contexto { text-align: center; }
.foco-vazio-check {
  width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-verde-fraco); color: var(--m-verde);
  font-size: 2rem; font-weight: 800;
  box-shadow: 0 0 0 8px var(--m-verde-fraco);
}

@media (max-width: 480px) {
  .foco { padding: 1rem .8rem 2rem; justify-content: flex-start; }
  .foco-cartao { padding: 1.4rem 1.1rem 1.2rem; }
  .foco-nome { font-size: 1.5rem; }
  .foco-desfechos { grid-template-columns: 1fr; }
  .foco-desfecho { flex-direction: row; justify-content: center; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .foco-cartao { animation: none; }
  .foco-falar, .foco-desfecho { transition: none; }
  .foco-falar:hover, .foco-desfecho:hover { transform: none; }
  .foco-barra-preenche { transition: none; }
}

/* ==========================================================================
   Ajustes de casca (059): menu por gaveta, busca global, atalhos, toasts,
   telas vazias com ação, pendências da ficha do cliente.
   ========================================================================== */

/* ---------------------------------------------------- tela vazia com ação --
   ui_vazio(): diz o que fazer em vez de "Nenhum registro". */
.vazio-acao {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: 1.8rem 1rem; text-align: center;
}
.vazio-acao-titulo { margin: 0; font-weight: 650; color: var(--tinta-media); }
.vazio-acao-porque { margin: 0; max-width: 28rem; font-size: .85rem; color: var(--tinta-fraca); line-height: 1.45; }
.vazio-acao .btn { margin-top: .35rem; }
.btn-pequeno { padding: .5rem 1rem; font-size: .85rem; }

/* ------------------------------------------------------- gavetas do menu -- */
.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
.menu-grupo + .menu-grupo { margin-top: .35rem; padding-top: .35rem; box-shadow: inset 0 1px 0 var(--divisor-fraco); }
.menu-grupo-titulo {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .3rem .75rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .68rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-fraca); border-radius: 8px;
}
.menu-grupo-titulo:hover { color: var(--tinta-media); background: var(--vidro-botao); }
.menu-grupo-seta { transition: transform .15s ease; font-size: .7rem; }
.menu-grupo.fechado .menu-grupo-seta { transform: rotate(-90deg); }
.menu-grupo-itens { display: flex; flex-direction: column; gap: 2px; }
.menu-grupo.fechado .menu-grupo-itens { display: none; }

/* ======================================================= menu (06/10/2026)
   Três camadas que o olho lê sem ler:
     1. as duas AÇÕES (Vender / Agendar) como botões cheios no topo — sempre
        no mesmo lugar, cor própria cada uma;
     2. o dia a dia sem título; Loja e Gestão com rótulo pequeno;
     3. o número ao lado do item = o que está esperando ali.
   Ícone de traço fino, cor herdada do texto. Sem barra de rolagem. */
.menu { scrollbar-width: none; gap: 0; }
.menu::-webkit-scrollbar { display: none; }
.menu .icone { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; opacity: 1; font-size: 0; }
.menu-svg { width: 19px; height: 19px; display: block; }
.menu a { position: relative; transition: background .15s ease, color .15s ease, transform .12s ease; }
.menu a .icone { color: var(--tinta-fraca); transition: color .15s ease, transform .15s ease; }
.menu a:hover .icone { color: var(--acento); transform: scale(1.08); }
.menu a.ativo .icone { color: var(--acento); }
.menu-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a.ativo { background: var(--acento-fraco); box-shadow: none; }
.menu a.ativo::before {
  content: ''; position: absolute; left: -.6rem; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--acento);
}

/* número: o que está esperando nessa tela */
.menu-numero {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  display: inline-grid; place-items: center;
  font-size: .7rem; font-weight: 750; font-variant-numeric: tabular-nums;
  background: var(--acento); color: #fff;
}
.menu a[href="/os"] .menu-numero { background: var(--ok); }

/* as duas ações do topo */
.menu-acoes-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: .55rem; }
.menu-acoes-topo.uma { grid-template-columns: 1fr; }
.menu .menu-acoes-topo a.destaque {
  flex-direction: column; justify-content: center; gap: .3rem; padding: .7rem .4rem;
  border-radius: 14px; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 700;
  color: #fff; background: linear-gradient(160deg, #0aa0c4, #03728f);
  box-shadow: 0 6px 16px -8px rgba(10, 79, 101, .7), inset 0 1px 0 rgba(255,255,255,.18);
}
.menu .menu-acoes-topo a.destaque[href="/agenda/nova"] {
  background: linear-gradient(160deg, #0a5cb3, #023a7a);
  box-shadow: 0 6px 16px -8px rgba(2, 58, 122, .7), inset 0 1px 0 rgba(255,255,255,.18);
}
.menu .menu-acoes-topo a.destaque .icone,
.menu .menu-acoes-topo a.destaque:hover .icone { color: #fff; background: none; }
.menu .menu-acoes-topo a.destaque .menu-svg { width: 21px; height: 21px; }
.menu .menu-acoes-topo a.destaque:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.menu .menu-acoes-topo a.destaque:active { transform: translateY(0) scale(.98); }
.menu .menu-acoes-topo a.destaque.ativo { outline: 2px solid var(--acento-fraco); outline-offset: 2px; }
.menu .menu-acoes-topo a.destaque.ativo::before { display: none; }
.menu .menu-acoes-topo .menu-rotulo { flex: none; }

/* grupos: rótulo pequeno e fixo (não abre/fecha) */
.menu-grupo + .menu-grupo { margin-top: .5rem; padding-top: .5rem; }
p.menu-grupo-titulo {
  margin: 0 0 .15rem; padding: .15rem .75rem; cursor: default;
  font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca);
}
p.menu-grupo-titulo:hover { background: none; color: var(--tinta-fraca); }
.menu-grupo-ajustes { margin-top: auto; }

/* ramos: item principal + setinha; filhos sem ícone, recuados com um fio */
.menu-ramo-linha { display: flex; align-items: center; gap: 2px; }
.menu-ramo-linha > a { flex: 1; min-width: 0; }
.menu-ramo-seta {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--tinta-fraca);
  transition: transform .18s ease, background .15s ease, color .15s ease;
}
.menu-ramo-seta:hover { background: var(--vidro-botao); color: var(--tinta); }
.menu-ramo.aberto .menu-ramo-seta { transform: rotate(90deg); }
.menu-ramo.com-ativo > .menu-ramo-linha > a:not(.ativo) { color: var(--acento-forte); font-weight: 600; }
.menu-ramo.com-ativo > .menu-ramo-linha > a:not(.ativo) .icone { color: var(--acento); }
.menu-ramo-filhos {
  display: none; flex-direction: column; gap: 1px;
  margin: 1px 0 4px 1.55rem; padding-left: .5rem; box-shadow: inset 1.5px 0 0 var(--divisor);
}
.menu-ramo.aberto .menu-ramo-filhos { display: flex; animation: menu-abre .16s ease; }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.menu a.menu-filho { padding: .38rem .6rem; font-size: .83rem; }
.menu a.menu-filho .icone { display: none; }
.menu a.menu-filho.ativo::before { left: -.55rem; }

@media (max-width: 1100px) {
  .menu-ramo-seta { display: none; }
  .menu-ramo-filhos { margin: 0; padding: 0; box-shadow: none; }
  .menu a.menu-filho .icone { display: inline-grid; }
  .menu-acoes-topo { grid-template-columns: 1fr; }
  .menu .menu-acoes-topo a.destaque { padding: .55rem .2rem; font-size: .64rem; }
  .menu-rotulo { white-space: normal; text-align: center; }
  .menu-numero { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; font-size: .6rem; padding: 0 4px; }
  p.menu-grupo-titulo { text-align: center; padding: .15rem 0; font-size: .55rem; letter-spacing: .04em; }
  .menu a.ativo::before { left: -.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .menu a, .menu a .icone, .menu-ramo-seta { transition: none; }
  .menu-ramo.aberto .menu-ramo-filhos { animation: none; }
}

/* ------------------------------------------------------------ busca global */
.busca-global { position: relative; flex: 0 1 22rem; min-width: 0; margin: 0 0 0 .4rem; }
.busca-global input[type=search] {
  width: 100%; padding: .48rem 3.6rem .48rem 1rem; border-radius: 99px; border: 0;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini); color: var(--tinta);
  font: inherit; font-size: .86rem;
}
.busca-global input[type=search]:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.busca-global-tecla {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  font: 600 .66rem/1 system-ui, sans-serif; color: var(--tinta-fraca);
  padding: .2rem .35rem; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--divisor);
  pointer-events: none;
}
.busca-global input:focus ~ .busca-global-tecla { display: none; }
.busca-global-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: min(34rem, calc(100vw - 1.5rem)); max-height: min(70vh, 32rem); overflow-y: auto;
  padding: .35rem; border-radius: var(--raio);
  background: var(--vidro-alto); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta);
}
.busca-global-grupo {
  margin: .45rem .6rem .2rem; font-size: .66rem; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca);
}
.busca-global-item {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem .6rem; border-radius: 10px;
}
.busca-global-item.ativa { background: var(--acento-fraco); }
.busca-global-principal {
  flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column;
  color: var(--tinta); text-decoration: none;
}
.busca-global-principal:hover { text-decoration: none; }
.busca-global-principal strong { font-size: .9rem; font-weight: 650; }
.busca-global-sub { font-size: .76rem; color: var(--tinta-fraca); }
.busca-global-acoes { display: flex; gap: .3rem; flex-wrap: wrap; }
.busca-global-acao {
  padding: .22rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 650;
  background: var(--vidro-botao); box-shadow: inset 0 0 0 1px var(--divisor); color: var(--acento-forte);
}
.busca-global-acao:hover { text-decoration: none; background: var(--acento); color: #fff; box-shadow: none; }
.busca-global-vazio { margin: .6rem; font-size: .85rem; color: var(--tinta-fraca); }

/* ---------------------------------------------- sugestão destacada (↑ ↓) --
   `.ativa` é contrato: o pdv.js a procura antes de tratar o Enter. */
.sugestao.ativa { background: var(--acento-fraco); color: var(--acento-forte); }

/* ------------------------------------------------------ atalhos de teclado */
.atalhos-botao { width: 2rem; min-width: 2rem; padding-left: 0; padding-right: 0; font-weight: 750; }
.atalhos-ajuda {
  position: fixed; top: calc(var(--topo-alt) + .5rem); right: 1rem; z-index: 70;
  width: min(20rem, calc(100vw - 2rem)); padding: .9rem 1rem;
  border-radius: var(--raio);
  background: var(--vidro-alto); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta);
}
.atalhos-ajuda-titulo { margin: 0 0 .5rem; font-weight: 700; }
.atalhos-ajuda dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: 0 0 .5rem; font-size: .85rem; }
.atalhos-ajuda dt { white-space: nowrap; }
.atalhos-ajuda dd { margin: 0; color: var(--tinta-media); }
.atalhos-ajuda kbd, .busca-global kbd {
  display: inline-block; min-width: 1.4em; padding: .08rem .35rem; border-radius: 6px;
  font: 650 .74rem/1.3 system-ui, sans-serif; text-align: center;
  background: var(--campo); box-shadow: inset 0 -1px 0 var(--divisor), inset 0 0 0 1px var(--divisor);
}

/* ------------------------------------------------------------------ toasts */
.toasts {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 120;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
  width: min(24rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem;
  width: 100%; padding: .75rem .9rem; border-radius: var(--raio);
  font-size: .9rem; line-height: 1.4;
  background: var(--vidro-alto); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta); border-left: 4px solid var(--acento);
  animation: toast-entra .2s ease-out;
}
.toast > span { flex: 1; }
.toast-ok     { border-left-color: var(--ok); }
.toast-alerta { border-left-color: var(--alerta); }
.toast-erro   { border-left-color: var(--erro); color: var(--erro); }
.toast-fechar {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: var(--tinta-fraca); padding: 0 .1rem;
}
.toast.saindo { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------ "Usar este cadastro" ---- */
.aviso-usar-cadastro { margin-left: .3rem; vertical-align: middle; }

/* ------------------------------------------- pendências na ficha do cliente */
.pendencias-cliente { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.pendencia-cliente {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .85rem; border-radius: var(--raio); font-size: .86rem;
  background: var(--acento-fraco); color: var(--acento-forte);
}
.pendencia-cliente a { color: inherit; font-weight: 700; text-decoration: underline; }
.pendencia-ok     { background: var(--ok-fraco);     color: var(--ok); }
.pendencia-alerta { background: var(--alerta-fraco); color: var(--alerta); }

/* ------------------------------------------ horários livres (agendadora) -- */
.missao-horarios { display: grid; gap: .35rem; }
.missao-horarios-titulo {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--m-texto-2);
}
.missao-horario {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .4rem .65rem; border-radius: 10px; text-decoration: none;
  background: var(--m-cartao); color: var(--m-texto); box-shadow: inset 0 0 0 1px var(--m-borda);
  font-size: .85rem;
}
.missao-horario span { font-size: .74rem; color: var(--m-texto-2); }
.missao-horario:hover { text-decoration: none; box-shadow: inset 0 0 0 2px var(--m-azul); }

/* ------------------------------------------------- nota da IA com ação ---- */
.ia-dica { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ia-dica > span { flex: 1 1 18rem; }
.ia-dica-acao { flex: 0 0 auto; text-decoration: none !important; }

/* ------------------------------------------------------ chat: markdown ---- */
.ia-chat-msg-assistente { white-space: normal; }
.ia-chat-msg-assistente p { margin: 0 0 .35rem; }
.ia-chat-msg-assistente p:last-child { margin-bottom: 0; }
.ia-chat-msg-assistente ul { margin: .2rem 0 .35rem; padding-left: 1.15rem; }
.ia-chat-msg-assistente li { margin: .1rem 0; }
.ia-chat-sugestoes { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .7rem .5rem; }
.ia-chat-sugestoes[hidden] { display: none; }
.ia-chat-chip {
  border: 0; cursor: pointer; font: inherit; font-size: .76rem; text-align: left;
  padding: .32rem .7rem; border-radius: 99px;
  background: var(--acento-fraco); color: var(--acento-forte);
}
.ia-chat-chip:hover { background: var(--acento); color: #fff; }

/* ------------------------------------------------------------- celular ---- */
@media (max-width: 760px) {
  /* A barra de baixo continua com 4 atalhos + "Mais". As gavetas somem da
     vista (display: contents) e os atalhos voltam a ser filhos diretos da
     grade, na ordem que o papel pede (--ordem-mobile). */
  .menu-grupo, .menu-grupo-itens { display: contents; }
  .menu-grupo.fechado .menu-grupo-itens { display: contents; }
  .menu-ramo, .menu-ramo-linha, .menu-ramo .menu-ramo-filhos, .menu-ramo.aberto .menu-ramo-filhos,
  .menu-acoes-topo { display: contents; }
  .menu .menu-acoes-topo a.destaque {
    background: none; box-shadow: none; color: var(--acento-forte); padding: .4rem .45rem; font-size: .6rem; border-radius: 16px;
  }
  .menu .menu-acoes-topo a.destaque .icone { color: var(--acento); }
  .menu a.ativo::before { display: none; }
  .menu-grupo + .menu-grupo { margin: 0; padding: 0; box-shadow: none; }
  .menu-grupo-titulo { display: none; }
  .menu a.menu-mobile-principal { order: var(--ordem-mobile, 0); }
  .menu-mais { order: 10; }

  .busca-global { flex: 1 1 auto; margin: 0; }
  .busca-global input[type=search] { padding: .42rem .8rem; font-size: .8rem; }
  .busca-global-tecla { display: none; }
  .busca-global-resultados { position: fixed; left: .5rem; right: .5rem; top: calc(var(--topo-alt) + .3rem); width: auto; }
  .atalhos-botao { display: none; }

  .toasts { right: .5rem; left: .5rem; width: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media print {
  .busca-global, .toasts, .atalhos-ajuda, .atalhos-botao { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.saindo, .menu-grupo-seta { transition: none; }
}

/* O atributo hidden sempre vence: .btn, .checa e .linha-campos definem
   display próprio e passavam por cima dele (campos do PDV/caixa apareciam
   quando deviam sumir). */
[hidden] { display: none !important; }

/* ==========================================================================
   Caderno — tarefas (TickTick) e anotações (Capacities)
   Pensado pra quem se perde fácil: UMA coisa em destaque ("Faça agora"),
   cor que diz a prioridade antes de ler, barra do dia que enche, e toque
   grande. Vermelho só em "atrasada" — nunca como bronca na barra do dia.
   ========================================================================== */
:root {
  --prio-3: #e5484d;  --prio-3-fraco: rgba(229, 72, 77, .13);
  --prio-2: #f08c1a;  --prio-2-fraco: rgba(240, 140, 26, .14);
  --prio-1: #2f7de1;  --prio-1-fraco: rgba(47, 125, 225, .12);
  --prio-0: #8aa1b1;  --prio-0-fraco: rgba(138, 161, 177, .12);
  --cad-feito: #1fae6b;
  /* Minimalista: borda fina + sombra quase nenhuma, no lugar das sombras
     grandes do resto do sistema. O vidro continua, só sem peso. */
  --cad-contorno: inset 0 0 0 1px var(--divisor-fraco), 0 1px 2px rgba(11, 40, 55, .05);
  --cad-contorno-alto: inset 0 0 0 1px var(--divisor), 0 8px 24px rgba(11, 40, 55, .08);
  --nota-amarelo: #fff4c2; --nota-verde: #daf5e4; --nota-azul: #dcecff;
  --nota-rosa: #ffe0ec;    --nota-roxo: #ece0ff;  --nota-laranja: #ffe6cc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --prio-3: #ff7b7f; --prio-2: #ffb35c; --prio-1: #72aaff; --prio-0: #9fb3c2;
    --cad-feito: #4fd699;
    --nota-amarelo: rgba(255, 214, 90, .16); --nota-verde: rgba(80, 210, 140, .15); --nota-azul: rgba(90, 160, 255, .16);
    --nota-rosa: rgba(255, 110, 170, .15);    --nota-roxo: rgba(170, 120, 255, .17); --nota-laranja: rgba(255, 150, 60, .16);
  }
}
:root[data-tema="escuro"] {
  --prio-3: #ff7b7f; --prio-2: #ffb35c; --prio-1: #72aaff; --prio-0: #9fb3c2;
  --cad-feito: #4fd699;
  --nota-amarelo: rgba(255, 214, 90, .16); --nota-verde: rgba(80, 210, 140, .15); --nota-azul: rgba(90, 160, 255, .16);
  --nota-rosa: rgba(255, 110, 170, .15);    --nota-roxo: rgba(170, 120, 255, .17); --nota-laranja: rgba(255, 150, 60, .16);
}
.prio-3 { --prio: var(--prio-3); --prio-fraco: var(--prio-3-fraco); }
.prio-2 { --prio: var(--prio-2); --prio-fraco: var(--prio-2-fraco); }
.prio-1 { --prio: var(--prio-1); --prio-fraco: var(--prio-1-fraco); }
.prio-0 { --prio: var(--prio-0); --prio-fraco: var(--prio-0-fraco); }

.cad { max-width: 1400px; }

/* abas Tarefas | Anotações */
.cad-abas {
  display: inline-flex; gap: .25rem; padding: .3rem; margin-bottom: 1rem;
  background: var(--vidro); box-shadow: var(--cad-contorno); border-radius: 99px;
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-abas a {
  padding: .55rem 1.2rem; border-radius: 99px; font-weight: 650; color: var(--tinta-media);
  text-decoration: none; font-size: .95rem;
}
.cad-abas a:hover { color: var(--tinta); text-decoration: none; }
.cad-abas a.ativa { background: var(--acento); color: #fff; }

/* grade de três colunas */
.cad-grade { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.cad-grade.com-detalhe { grid-template-columns: 230px minmax(0, 1fr) minmax(320px, 400px); }

/* ---- barra da esquerda */
.cad-lado {
  position: sticky; top: calc(var(--topo-alt) + 1rem);
  max-height: calc(100vh - var(--topo-alt) - 2rem); overflow-y: auto;
  background: var(--vidro); box-shadow: var(--cad-contorno); border-radius: var(--raio-grande);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  padding: .6rem;
}
.cad-lado-grupo + .cad-lado-grupo { border-top: 1px solid var(--divisor); margin-top: .5rem; padding-top: .5rem; }
.cad-lado-cabeca {
  margin: .35rem .6rem .3rem; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-fraca);
}
.cad-lado-item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 12px;
  color: var(--tinta); text-decoration: none; font-size: .9rem; font-weight: 550;
}
.cad-lado-item:hover { background: var(--bloco-alto); text-decoration: none; }
.cad-lado-item.ativo { background: var(--acento-fraco); color: var(--acento-forte); font-weight: 700; }
.cad-lado-icone { width: 1.3rem; text-align: center; }
.cad-lado-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-lado-n {
  min-width: 1.5rem; padding: .05rem .45rem; border-radius: 99px; text-align: center;
  font-size: .75rem; font-weight: 700; background: var(--trilho); color: var(--tinta-media);
}
.cad-lado-item.destaque .cad-lado-n { background: var(--acento); color: #fff; }
.cad-lado-bolinha { width: .8rem; height: .8rem; border-radius: 50%; background: var(--cor); margin: 0 .25rem; flex: 0 0 auto; }
.cad-chave { font-size: .8rem; }
.cad-nova-lista summary { cursor: pointer; padding: .5rem .6rem; font-size: .88rem; color: var(--acento); font-weight: 600; list-style: none; }
.cad-nova-lista summary::-webkit-details-marker { display: none; }
.cad-nova-lista form { display: grid; gap: .5rem; padding: .2rem .5rem .6rem; }

.cad-cores { display: flex; flex-wrap: wrap; gap: .4rem; }
.cad-cor { position: relative; cursor: pointer; margin: 0; }
.cad-cor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cad-cor::before {
  content: ''; display: block; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--cor, var(--bloco)); box-shadow: inset 0 0 0 1px var(--divisor);
}
.cad-cor:has(input:checked)::before { box-shadow: 0 0 0 2px var(--fundo-base), 0 0 0 4px var(--tinta); }
.cad-cor:has(input:focus-visible)::before { outline: 2px solid var(--acento); outline-offset: 3px; }
.cad-cor.nota-nenhuma { --cor: var(--bloco-alto); }
.cad-cor.nota-amarelo { --cor: var(--nota-amarelo); } .cad-cor.nota-verde { --cor: var(--nota-verde); }
.cad-cor.nota-azul { --cor: var(--nota-azul); }       .cad-cor.nota-rosa { --cor: var(--nota-rosa); }
.cad-cor.nota-roxo { --cor: var(--nota-roxo); }       .cad-cor.nota-laranja { --cor: var(--nota-laranja); }

/* ---- centro */
.cad-meio { min-width: 0; }
.cad-titulo-vista { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .9rem; font-size: 1.55rem; letter-spacing: -.03em; }
.cad-titulo-n { font-size: .95rem; font-weight: 700; color: var(--tinta-fraca); }

.cad-hero {
  position: relative; overflow: hidden;
  padding: 1.3rem 1.4rem 1.1rem; margin-bottom: 1rem; border-radius: var(--raio-grande);
  background: var(--vidro-alto);
  box-shadow: var(--cad-contorno); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-hero-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cad-hero-oi { margin: 0; font-size: .95rem; color: var(--tinta-media); font-weight: 600; }
.cad-hero-titulo { margin: .1rem 0 0; font-size: 1.9rem; letter-spacing: -.04em; line-height: 1.1; }
.cad-hero-data { margin: .2rem 0 0; color: var(--tinta-fraca); font-size: .88rem; }

/* anel de progresso: conic-gradient com o número no meio */
.cad-anel {
  --pct: 0; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--cad-feito) calc(var(--pct) * 1%), var(--trilho) 0);
}
.cad-anel span {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo-base); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em;
}

.cad-progresso { margin-top: 1rem; }
.cad-progresso-trilho { height: 14px; border-radius: 99px; background: var(--trilho); overflow: hidden; }
.cad-progresso-trilho.fino { height: 7px; margin: .3rem 0 .6rem; }
.cad-progresso-enche {
  height: 100%; border-radius: 99px; min-width: 0;
  background-image: linear-gradient(90deg, #2f7de1, #11a3b8 55%, var(--cad-feito));
  background-size: 200% 100%;
  transition: width .7s cubic-bezier(.2, .9, .3, 1.2);
  animation: cad-brilho 3.5s linear infinite;
}
@keyframes cad-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cad-faixa-comeco .cad-progresso-enche { background-image: linear-gradient(90deg, #f08c1a, #f5b83d, #f08c1a); }
.cad-faixa-meio   .cad-progresso-enche { background-image: linear-gradient(90deg, #2f7de1, #11a3b8, #2f7de1); }
.cad-faixa-quase  .cad-progresso-enche { background-image: linear-gradient(90deg, #11a3b8, var(--cad-feito), #11a3b8); }
.cad-faixa-cheia  .cad-progresso-enche { background-image: linear-gradient(90deg, var(--cad-feito), #7ad94c, var(--cad-feito)); }
.cad-progresso-texto { margin: .55rem 0 0; font-size: .92rem; color: var(--tinta-media); }
.cad-progresso-texto strong { color: var(--tinta); }

/* "Faça agora" */
.cad-agora {
  position: relative; margin-bottom: 1.1rem; padding: 1.1rem 1.2rem 1.1rem 1.35rem;
  border-radius: var(--raio-grande); background: var(--vidro-alto);
  box-shadow: var(--cad-contorno-alto);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-agora::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--prio);
}
.cad-agora-rotulo { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--prio); }
.cad-agora-linha { display: flex; align-items: center; gap: .9rem; margin: .5rem 0 .8rem; }
.cad-agora-titulo { font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; color: var(--tinta); line-height: 1.25; }
.cad-agora-titulo:hover { text-decoration: none; color: var(--acento-forte); }
.cad-agora-acoes { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.cad-agora-sub { font-size: .85rem; color: var(--tinta-media); font-weight: 600; }
.cad-agora.saindo { animation: cad-sai .55s ease forwards; }
.cad-depois { margin: 0 0 .4rem; font-size: .85rem; color: var(--tinta-fraca); font-weight: 600; }

/* campo rápido */
.cad-rapido {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem;
  padding: .45rem .45rem .45rem 1rem; border-radius: 18px; background: var(--vidro-alto);
  box-shadow: var(--cad-contorno);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-rapido:focus-within { box-shadow: inset 0 0 0 1.5px var(--acento); }
.cad-rapido-mais { font-size: 1.5rem; font-weight: 300; color: var(--acento); line-height: 1; }
.cad .cad-rapido input[type=text] {
  flex: 1; min-width: 12rem; width: auto; border: 0; background: transparent; box-shadow: none;
  font-size: 1.02rem; padding: .55rem .2rem;
}
.cad-rapido input[type=text]:focus { outline: none; box-shadow: none; }
.cad-fichas { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .35rem; padding-bottom: .2rem; }
.cad-fichas:empty { display: none; }
.cad-fichas .cad-ficha { font-size: .82rem; padding: .25rem .6rem; animation: cad-surge .25s ease; }
.cad-dicas { margin: 0 0 1rem; font-size: .8rem; color: var(--tinta-fraca); }
.cad-dicas summary { cursor: pointer; padding: .2rem .4rem; width: max-content; }
.cad-dicas p { margin: .35rem .4rem; line-height: 1.9; }
.cad-dicas code { background: var(--bloco-alto); padding: .1rem .35rem; border-radius: 6px; font-size: .78rem; }

/* blocos e linhas */
.cad-bloco { margin-bottom: 1.1rem; }
.cad-bloco-titulo {
  display: flex; align-items: center; gap: .5rem; margin: .8rem .2rem .45rem;
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-media);
}
.cad-bloco-titulo span {
  padding: .05rem .5rem; border-radius: 99px; background: var(--trilho); font-size: .72rem; letter-spacing: 0;
}
.cad-bloco-atrasadas .cad-bloco-titulo { color: var(--prio-3); }
.cad-bloco-atrasadas .cad-bloco-titulo span { background: var(--prio-3-fraco); color: var(--prio-3); }
.cad-bloco-hoje .cad-bloco-titulo { color: var(--acento); }

.cad-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cad-tarefa {
  position: relative; display: flex; align-items: center; gap: .8rem;
  padding: .7rem .85rem .7rem 1rem; border-radius: 16px;
  background: var(--vidro-alto); box-shadow: var(--cad-contorno);
  transition: transform .15s ease, box-shadow .15s ease, opacity .3s ease;
}
.cad-tarefa::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--prio);
}
.cad-tarefa.prio-0::before { opacity: .35; }
/* urgência à vista: fundo tingido da esquerda + barra mais grossa quanto mais urgente */
.cad-tarefa:is(.prio-1, .prio-2, .prio-3):not(.feita):not(.so-admin) {
  background: linear-gradient(90deg, var(--prio-fraco), transparent 70%), var(--vidro-alto);
}
.cad-tarefa.prio-3:not(.feita):not(.so-admin) {
  background: linear-gradient(90deg, var(--prio-fraco), var(--prio-fraco) 30%, transparent 85%), var(--vidro-alto);
}
.cad-tarefa.prio-2::before { width: 4px; }
.cad-tarefa.prio-3::before { width: 5px; top: 6px; bottom: 6px; }
.cad-tarefa.feita::before { opacity: .3; }
.cad-tarefa:hover { box-shadow: var(--cad-contorno-alto); }
.cad-tarefa.ativa { box-shadow: inset 0 0 0 1.5px var(--acento); }
.cad-tarefa.so-admin { background: repeating-linear-gradient(135deg, var(--bloco), var(--bloco) 10px, var(--bloco-alto) 10px, var(--bloco-alto) 20px); }
.cad-tarefa-corpo { flex: 1; min-width: 0; display: grid; gap: .3rem; color: var(--tinta); text-decoration: none; }
.cad-tarefa-corpo:hover { text-decoration: none; }
.cad-tarefa-titulo { font-size: .98rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cad-tarefa-fichas { display: flex; flex-wrap: wrap; gap: .3rem; }
.cad-tarefa.feita .cad-tarefa-titulo { text-decoration: line-through; color: var(--tinta-fraca); }
.cad-tarefa.saindo { animation: cad-sai .55s ease forwards; }
@keyframes cad-sai {
  0% { transform: scale(1); }
  30% { transform: scale(1.02); box-shadow: 0 0 0 3px var(--cad-feito); }
  100% { transform: translateX(40px); opacity: 0; }
}
@keyframes cad-surge { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }

/* fichas (data, lista, pessoa…) */
.cad-ficha {
  display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 99px;
  font-size: .74rem; font-weight: 650; background: var(--trilho); color: var(--tinta-media); white-space: nowrap;
}
.cad-ficha.data.atrasada { background: var(--prio-3-fraco); color: var(--prio-3); }
.cad-ficha.data.hoje     { background: var(--ok-fraco); color: var(--ok); }
.cad-ficha.data.amanha   { background: var(--prio-2-fraco); color: var(--prio-2); }
.cad-ficha.data.semana   { background: var(--prio-1-fraco); color: var(--prio-1); }
.cad-ficha.lista::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cor); }
.cad-ficha.cliente { background: var(--roxo-fraco); color: var(--roxo); }
.cad-ficha.de { background: var(--acento-fraco); color: var(--acento-forte); }
.cad-ficha.vis.privada { background: transparent; padding: .12rem .2rem; opacity: .7; }
.cad-ficha.prio-3, .cad-ficha.prio-2, .cad-ficha.prio-1 { background: var(--prio-fraco); color: var(--prio); }
.cad-ficha.pessoa { background: var(--acento-fraco); color: var(--acento-forte); }
.cad-ficha.sub { gap: .4rem; }
.cad-mini-barra { width: 34px; height: 5px; border-radius: 99px; background: var(--divisor); overflow: hidden; }
.cad-mini-barra span { display: block; height: 100%; background: var(--cad-feito); border-radius: 99px; }

.cad-avatar {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cor); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--fundo-base);
}
.cad-avatar.mini { width: 22px; height: 22px; font-size: .6rem; box-shadow: none; }

/* o círculo de marcar */
.cad-check-form { margin: 0; display: flex; }
.cad-check {
  flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 2.5px solid var(--prio); background: var(--prio-fraco);
  color: transparent; cursor: pointer; font-size: .85rem; font-weight: 900; box-shadow: none;
  transition: transform .12s ease, background .2s ease, color .2s ease;
}
.cad-check:hover { transform: scale(1.12); color: var(--prio); }
.cad-check:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.cad-check.grande { width: 38px; height: 38px; font-size: 1.15rem; border-width: 3px; }
.cad-check.mini { width: 20px; height: 20px; font-size: .7rem; border-width: 2px; }
.cad-check.feita { background: var(--cad-feito); border-color: var(--cad-feito); color: #fff; }
.cad-check.travado { cursor: default; opacity: .45; }
.cad-check.pop { animation: cad-pop .45s ease; }
@keyframes cad-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.cad-vazio { text-align: center; padding: 2.2rem 1rem; color: var(--tinta-media); }
.cad-vazio-emoji { font-size: 2.6rem; }
.cad-vazio-titulo { font-size: 1.1rem; font-weight: 700; color: var(--tinta); margin: .4rem 0 .3rem; }
.cad-vazio code { background: var(--bloco-alto); padding: .1rem .35rem; border-radius: 6px; }

.cad-aviso-admin, .cad-aviso-leitura {
  margin: 0 0 .9rem; padding: .6rem .85rem; border-radius: 12px; font-size: .85rem;
  background: var(--alerta-fraco); color: var(--alerta);
}
.cad-aviso-leitura { background: var(--acento-fraco); color: var(--acento-forte); }

/* ---- painel de detalhes */
.cad-detalhe {
  position: sticky; top: calc(var(--topo-alt) + 1rem);
  max-height: calc(100vh - var(--topo-alt) - 2rem); overflow-y: auto;
  padding: 1rem 1.1rem 1.1rem; border-radius: var(--raio-grande);
  background: var(--vidro-alto); box-shadow: var(--cad-contorno-alto), inset 0 3px 0 var(--prio);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  animation: cad-surge .2s ease;
}
.cad-detalhe-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.cad-fechar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--trilho); color: var(--tinta-media); text-decoration: none; font-weight: 700;
}
.cad-fechar:hover { background: var(--divisor); text-decoration: none; }
.cad fieldset.cad-sem-borda, .cad fieldset.cad-vis { border: 0; padding: 0; margin: 0; min-width: 0; background: none; box-shadow: none; border-radius: 0; }
.cad fieldset.cad-vis { margin: .4rem 0 .9rem; }
.cad textarea.cad-detalhe-titulo {
  width: 100%; min-height: 0; border: 0; box-shadow: none; background: transparent; resize: vertical;
  font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; padding: .2rem 0; margin-bottom: .6rem;
}
.cad-detalhe-titulo:focus { outline: none; box-shadow: inset 0 -2px 0 var(--acento); }
.cad-prio { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.cad-prio-opcao { position: relative; cursor: pointer; margin: 0; }
.cad-prio-opcao input { position: absolute; opacity: 0; }
.cad-prio-opcao span {
  display: inline-block; padding: .35rem .7rem; border-radius: 99px; font-size: .8rem; font-weight: 700;
  color: var(--prio); background: var(--prio-fraco); border: 2px solid transparent;
}
.cad-prio-opcao input:checked + span { border-color: var(--prio); background: var(--prio); color: #fff; }
.cad-prio-opcao input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.cad-detalhe .campo label { font-size: .8rem; }
.cad-detalhe-rodape { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; }
.cad-detalhe-rodape form { margin: 0; }
.cad .perigo { color: var(--erro) !important; }
.cad-detalhe-meta { margin: .7rem 0 0; }

/* quem pode ver */
.cad-vis { border: 0; padding: 0; margin: .4rem 0 .9rem; min-width: 0; }
.cad-vis legend, .cad-legenda { font-size: .8rem; font-weight: 650; color: var(--tinta-media); margin-bottom: .4rem; padding: 0; }
.cad-vis-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.cad-vis-opcao {
  position: relative; display: grid; justify-items: center; gap: .1rem; text-align: center; cursor: pointer; margin: 0;
  padding: .6rem .35rem; border-radius: 14px; background: var(--bloco); box-shadow: inset 0 0 0 1.5px var(--divisor);
}
.cad-vis-opcao input { position: absolute; opacity: 0; }
.cad-vis-opcao:has(input:checked) { background: var(--acento-fraco); box-shadow: inset 0 0 0 2px var(--acento); }
.cad-vis-opcao:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.cad-vis-icone { font-size: 1.3rem; }
.cad-vis-rotulo { font-size: .8rem; font-weight: 700; color: var(--tinta); line-height: 1.2; }
.cad-vis-dica { font-size: .68rem; color: var(--tinta-fraca); line-height: 1.25; }
.cad-vis-pessoas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.cad-pessoa-chip {
  position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem .25rem .3rem; margin: 0; cursor: pointer;
  border-radius: 99px; background: var(--bloco); box-shadow: inset 0 0 0 1.5px var(--divisor); font-size: .82rem; font-weight: 600;
}
.cad-pessoa-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cad-pessoa-chip:has(input:checked) { background: var(--acento); color: #fff; box-shadow: none; }
.cad-pessoa-chip:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.cad-vis[disabled] { opacity: .6; }

/* passos (subtarefas) */
.cad-passos { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--divisor); }
.cad-passos h3 { margin: 0 0 .3rem; font-size: .95rem; }
.cad-lista-passos { gap: .15rem; margin-bottom: .5rem; }
.cad-passo { display: flex; align-items: center; gap: .6rem; padding: .35rem .3rem; border-radius: 10px; }
.cad-passo:hover { background: var(--bloco); }
.cad-passo-titulo { flex: 1; font-size: .9rem; }
.cad-passo.feita .cad-passo-titulo { text-decoration: line-through; color: var(--tinta-fraca); }
.cad-passo-tirar { margin: 0; opacity: 0; transition: opacity .15s; }
.cad-passo:hover .cad-passo-tirar, .cad-passo-tirar:focus-within { opacity: 1; }
.cad-passo-tirar button { border: 0; background: none; color: var(--tinta-fraca); cursor: pointer; font-size: .8rem; box-shadow: none; }
.cad-passo-novo { display: flex; gap: .4rem; }
.cad-passo-novo input { flex: 1; }

/* ---- foco (pomodoro) */
.cad-foco {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1rem;
  background: rgba(8, 20, 28, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: cad-surge .25s ease;
}
.cad-foco-caixa { text-align: center; color: #fff; max-width: 34rem; }
.cad-foco-rotulo { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.cad-foco-titulo { font-size: 1.6rem; font-weight: 750; letter-spacing: -.02em; margin: .4rem 0 1.4rem; line-height: 1.25; }
.cad-foco-anel {
  --pct: 0; width: 240px; height: 240px; margin: 0 auto 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#4fd699 calc(var(--pct) * 1%), rgba(255, 255, 255, .12) 0);
}
.cad-foco-anel span {
  width: 204px; height: 204px; border-radius: 50%; display: grid; place-items: center;
  background: #0d1c25; font-size: 3.4rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.cad-foco-botoes { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.cad-foco-botoes .btn-vazio { color: #fff; background: rgba(255, 255, 255, .14); }
.cad-foco-dica { margin-top: 1.2rem; opacity: .65; font-size: .85rem; }

/* ---- anotações */
.cad-notas-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.cad-notas-botoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.cad-notas-botoes form { margin: 0; }
.cad-notas-busca { flex: 1; max-width: 26rem; margin: 0; }
.cad-notas-busca input { border-radius: 99px; padding-left: 1rem; }
.cad-filtros { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.cad-filtro {
  padding: .45rem .9rem; border-radius: 99px; font-size: .86rem; font-weight: 650; text-decoration: none;
  color: var(--tinta-media); background: var(--vidro); box-shadow: var(--sombra-mini);
}
.cad-filtro:hover { text-decoration: none; color: var(--tinta); }
.cad-filtro.ativo { background: var(--tinta); color: var(--fundo-base); }
.cad-filtro-pessoa { margin: 0; }
.cad-filtro-pessoa select { border-radius: 99px; font-size: .86rem; padding: .42rem .9rem; width: auto; }

.cad-mural { columns: 4 250px; column-gap: .9rem; }
.cad-cartao-nota {
  break-inside: avoid; display: grid; gap: .45rem; margin-bottom: .9rem; padding: .95rem 1rem;
  border-radius: 16px; background: var(--vidro-alto); box-shadow: var(--cad-contorno);
  color: var(--tinta); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cad-cartao-nota:hover { box-shadow: var(--cad-contorno-alto); text-decoration: none; }
.cad-cartao-nota.so-admin { box-shadow: var(--sombra-mini), inset 0 0 0 2px var(--alerta-fraco); }
.cad-cartao-nota.cor-amarelo { background: var(--nota-amarelo); } .cad-cartao-nota.cor-verde { background: var(--nota-verde); }
.cad-cartao-nota.cor-azul { background: var(--nota-azul); }       .cad-cartao-nota.cor-rosa { background: var(--nota-rosa); }
.cad-cartao-nota.cor-roxo { background: var(--nota-roxo); }       .cad-cartao-nota.cor-laranja { background: var(--nota-laranja); }
.cad-cartao-topo { display: flex; align-items: center; gap: .35rem; min-height: 1rem; }
.cad-cartao-topo .cad-avatar { margin-left: auto; }
.cad-cartao-titulo { font-weight: 750; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.3; }
.cad-cartao-texto { font-size: .86rem; color: var(--tinta-media); line-height: 1.45; }
.cad-cartao-mencoes { display: flex; flex-wrap: wrap; gap: .3rem; }
.cad-cartao-quando { font-size: .72rem; color: var(--tinta-fraca); }

.cad-mencao {
  display: inline-flex; align-items: center; gap: .2rem; padding: .08rem .5rem; border-radius: 99px;
  font-size: .9em; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--roxo-fraco); color: var(--roxo);
}
.cad-mencao-os { background: var(--alerta-fraco); color: var(--alerta); }
a.cad-mencao:hover { text-decoration: none; filter: brightness(.95); }

.cad-voltar { margin: 0 0 .6rem; font-size: .9rem; }
.cad-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.cad-editor-papel {
  margin: 0; padding: 1.3rem 1.5rem 1.6rem; border-radius: var(--raio-grande); min-height: 60vh;
  background: var(--vidro-alto); box-shadow: var(--cad-contorno);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-editor.cor-amarelo .cad-editor-papel { background: var(--nota-amarelo); }
.cad-editor.cor-verde .cad-editor-papel { background: var(--nota-verde); }
.cad-editor.cor-azul .cad-editor-papel { background: var(--nota-azul); }
.cad-editor.cor-rosa .cad-editor-papel { background: var(--nota-rosa); }
.cad-editor.cor-roxo .cad-editor-papel { background: var(--nota-roxo); }
.cad-editor.cor-laranja .cad-editor-papel { background: var(--nota-laranja); }
.cad .cad-nota-titulo {
  width: 100%; border: 0; box-shadow: none; background: transparent; padding: .2rem 0;
  font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em;
}
.cad .cad-nota-titulo:focus { outline: none; box-shadow: none; }
.cad textarea.cad-nota-titulo { resize: none; overflow: hidden; min-height: 0; line-height: 1.2; }
.cad-ferramentas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: .4rem 0 1rem; padding: 0 0 .5rem;
  border-bottom: 1px solid var(--divisor-fraco);
}
.cad-ferramentas button {
  border: 0; background: transparent; color: var(--tinta-fraca); font: inherit; font-size: .8rem; font-weight: 600;
  padding: .35rem .6rem; border-radius: 9px; cursor: pointer; box-shadow: none;
}
.cad-ferramentas button:hover { background: var(--bloco-alto); color: var(--tinta); }
.cad-ferramentas .cad-modo { color: var(--acento); box-shadow: inset 0 0 0 1px var(--divisor); }
.cad-ferramentas .cad-modo:hover { background: var(--acento-fraco); color: var(--acento-forte); }
.cad-salvo { font-size: .75rem; color: var(--tinta-fraca); margin-left: auto; }
.cad textarea.cad-nota-corpo {
  width: 100%; min-height: 50vh; border: 0; box-shadow: none; background: transparent; resize: vertical;
  font-size: 1.02rem; line-height: 1.7; padding: 0;
}
.cad textarea.cad-nota-corpo:focus { outline: none; box-shadow: none; }
.cad-nota-ver { font-size: 1.02rem; line-height: 1.7; overflow-wrap: anywhere; }
.cad-nota-ver p { margin: 0; }
.cad-nota-ver h2 { font-size: 1.3rem; margin: .8rem 0 .2rem; letter-spacing: -.02em; }
.cad-nota-ver h3 { font-size: 1.12rem; margin: .7rem 0 .2rem; }
.cad-nota-ver h4 { font-size: 1rem; margin: .6rem 0 .2rem; }
.cad-nota-ver > :first-child { margin-top: 0; }
.cad-nota-espaco { height: .7rem; }
.cad-nota-lista { margin: .15rem 0; padding-left: 1.3rem; }
.cad-nota-lista li + li { margin-top: .15rem; }
/* Checklist: caixinha quadrada de canto arredondado, texto alinhado com a
   primeira linha e com a quebra de linha (como no Capacities). */
.cad-caixa { list-style: none; margin-left: -1.3rem; display: flex; align-items: flex-start; gap: .75rem; padding: .3rem 0; }
.cad-caixa input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative;
  width: 1.3rem; height: 1.3rem; margin: .2rem 0 0; padding: 0; cursor: pointer;
  border-radius: 6px; background: var(--vidro-alto); box-shadow: inset 0 0 0 1.5px var(--tinta-fraca);
  transition: background .15s ease, box-shadow .15s ease;
}
.cad-caixa input:hover { box-shadow: inset 0 0 0 1.5px var(--tinta-media); }
.cad-caixa input:checked { background: var(--cad-feito); box-shadow: none; }
.cad-caixa input:checked::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: .32rem; height: .62rem;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: translate(-50%, -50%) rotate(45deg);
}
.cad-caixa input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cad-caixa input:disabled { cursor: default; }
.cad-caixa > span { flex: 1; min-width: 0; line-height: 1.55; }
.cad-caixa.marcada > span { text-decoration: line-through; color: var(--tinta-fraca); }

.cad-busca-mencao {
  position: relative; margin: .5rem 0; padding: .6rem; border-radius: 14px;
  background: var(--vidro-alto); box-shadow: var(--sombra);
}
.cad-busca-mencao-lista { display: grid; gap: .15rem; margin-top: .4rem; max-height: 16rem; overflow-y: auto; }
.cad-busca-mencao-lista button {
  text-align: left; border: 0; background: transparent; padding: .5rem .6rem; border-radius: 9px; font: inherit; font-size: .9rem; cursor: pointer; color: var(--tinta); box-shadow: none;
}
.cad-busca-mencao-lista button:hover, .cad-busca-mencao-lista button.ativa { background: var(--acento-fraco); }

.cad-editor-lado { display: grid; gap: .8rem; position: sticky; top: calc(var(--topo-alt) + 1rem); }
.cad-lado-cartao {
  padding: .9rem 1rem; border-radius: 16px; background: var(--vidro); box-shadow: var(--cad-contorno);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-lado-cartao h3 { margin: 0 0 .5rem; font-size: .92rem; }
.cad-lado-cartao .cad-vis-opcoes { grid-template-columns: 1fr; }
.cad-lado-cartao .cad-vis-opcao { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: .6rem; padding: .5rem .7rem; }
.cad-lado-cartao .cad-vis-icone { grid-row: span 2; align-self: center; }
.cad-fixar { display: flex; align-items: center; gap: .45rem; margin: .8rem 0; font-size: .88rem; font-weight: 600; }
.cad-fixar input { width: auto; box-shadow: none; }
.cad-apagar-nota { margin: 0; }
.cad-dia-tarefas { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .25rem; font-size: .88rem; }
.cad-dia-tarefas a { color: var(--tinta); }
.cad-dia-tarefas li.feita a { color: var(--tinta-fraca); text-decoration: line-through; }

/* ---- na ficha do cliente */
.cad-no-cliente-item {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .4rem; border-radius: 10px;
  color: var(--tinta); text-decoration: none; font-size: .9rem;
}
.cad-no-cliente-item + .cad-no-cliente-item { border-top: 1px solid var(--divisor-fraco); }
.cad-no-cliente-item:hover { background: var(--bloco); text-decoration: none; }
.cad-no-cliente-item > span:nth-child(2) { flex: 1; min-width: 0; }

/* ---- telas menores */
@media (max-width: 1250px) {
  .cad-grade.com-detalhe { grid-template-columns: 210px minmax(0, 1fr); }
  .cad-grade { grid-template-columns: 210px minmax(0, 1fr); }
  .cad-detalhe {
    position: fixed; z-index: 800; top: auto; right: .6rem; bottom: .6rem; left: auto;
    width: min(420px, calc(100vw - 1.2rem)); max-height: calc(100vh - var(--topo-alt) - 1.2rem);
    /* Flutuando por cima da lista: fundo sólido, senão o texto de trás atravessa. */
    background: var(--vidro-alto), var(--fundo-base);
    box-shadow: 0 24px 60px rgba(8, 20, 28, .35), inset 0 4px 0 var(--prio);
  }
}
@media (max-width: 860px) {
  .cad-grade, .cad-grade.com-detalhe { grid-template-columns: minmax(0, 1fr); }
  .cad-lado { position: static; max-height: none; display: flex; gap: .4rem; overflow-x: auto; padding: .4rem; border-radius: 18px; }
  /* No celular a barra vira uma faixa que rola de lado — com TUDO: vistas,
     setores, projetos, listas e equipe (antes só as vistas apareciam). */
  .cad-lado-grupo, .cad-lado-grupo + .cad-lado-grupo { display: contents; }
  .cad-lado-cabeca, .cad-nova-lista, .cad-lado-novo, .cad-mini-barra.largo { display: none; }
  .cad-lado-item { flex: 0 0 auto; padding: .45rem .75rem; }
  .cad-editor { grid-template-columns: minmax(0, 1fr); }
  .cad-editor-lado { position: static; }
  .cad-detalhe { inset: auto 0 0 0; width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; }
  .cad-hero-titulo { font-size: 1.5rem; }
  .cad-anel { width: 68px; height: 68px; }
  .cad-anel span { width: 52px; height: 52px; font-size: .95rem; }
  .cad-agora-titulo { font-size: 1.15rem; }
  .cad-vis-opcoes { grid-template-columns: 1fr; }
  .cad-vis-opcao { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: .6rem; }
  .cad-vis-icone { grid-row: span 2; align-self: center; }
  .cad-rapido .btn { display: none; }
  .cad-foco-anel { width: 200px; height: 200px; }
  .cad-foco-anel span { width: 170px; height: 170px; font-size: 2.8rem; }
  .cad-editor-papel { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cad-progresso-enche, .cad-tarefa.saindo, .cad-agora.saindo, .cad-check.pop { animation: none; }
}
.cad [data-cad-confirmar].armado { background: var(--erro); color: #fff !important; box-shadow: 0 6px 16px rgba(168, 38, 29, .28); }
.cad-ficha.os { background: var(--alerta-fraco); color: var(--alerta); }

/* ---- projetos e setores */
.cad-lado-cabeca { display: flex; align-items: center; justify-content: space-between; }
.cad-lado-cabeca-link { font-size: .68rem; text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--acento); }
.cad-lado-novo { display: block; padding: .45rem .6rem; font-size: .85rem; font-weight: 600; color: var(--acento); }
.cad-lado-n.alerta { background: var(--prio-3-fraco); color: var(--prio-3); }
.cad-lado-projeto .cad-lado-rotulo { display: grid; gap: .25rem; }
.cad-mini-barra.largo { width: 100%; height: 4px; }
.cad-mini-barra.largo span { background: var(--cor, var(--cad-feito)); }

.cad-projeto-topo {
  margin-bottom: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--raio-grande);
  background: var(--vidro-alto);
  box-shadow: var(--cad-contorno), inset 0 3px 0 var(--cor);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-projeto-linha { display: flex; align-items: flex-start; gap: .8rem; }
.cad-projeto-linha .btn { margin-left: auto; }
.cad-projeto-icone {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; font-size: 1.5rem;
  background: color-mix(in srgb, var(--cor) 16%, transparent);
}
.cad-projeto-nomes { min-width: 0; }
.cad-projeto-tipo { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--cor); }
.cad-projeto-topo .cad-titulo-vista { margin: .05rem 0 0; }
.cad-projeto-desc { margin: .2rem 0 0; font-size: .88rem; color: var(--tinta-media); }
.cad-projeto-topo .cad-progresso-enche { background-image: linear-gradient(90deg, var(--cor), color-mix(in srgb, var(--cor) 55%, var(--cad-feito)), var(--cor)); }
.cad-projeto-rodape { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.cad-membros { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.cad-membros .cad-avatar + .cad-avatar { margin-left: -6px; }
.cad-membros .pequeno { margin-left: .5rem; }
.cad-avatar.mais { --cor: var(--tinta-fraca); }
.cad-alternar { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 99px; background: var(--trilho); }
.cad-alternar a { padding: .3rem .75rem; border-radius: 99px; font-size: .8rem; font-weight: 650; color: var(--tinta-media); text-decoration: none; }
.cad-alternar a.ativo { background: var(--vidro-alto); color: var(--tinta); box-shadow: var(--sombra-mini); }
.cad-bloco-pessoa .cad-bloco-titulo { color: var(--tinta); text-transform: none; letter-spacing: 0; font-size: .95rem; }

.cad-painel-acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cad-projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.cad-projeto-cartao {
  display: grid; gap: .5rem; align-content: start; padding: 1rem 1.05rem; border-radius: 18px; text-decoration: none; color: var(--tinta);
  background: var(--vidro-alto);
  box-shadow: var(--cad-contorno), inset 0 3px 0 var(--cor); transition: box-shadow .15s ease;
}
.cad-projeto-cartao:hover { box-shadow: var(--cad-contorno-alto), inset 0 3px 0 var(--cor); text-decoration: none; }
.cad-projeto-cartao-topo { display: flex; align-items: center; gap: .5rem; }
.cad-projeto-cartao .cad-projeto-icone { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 11px; }
.cad-projeto-cartao-nome { font-weight: 750; font-size: 1.05rem; letter-spacing: -.01em; }
.cad-projeto-cartao .cad-progresso-trilho { display: block; }
.cad-projeto-cartao .cad-progresso-enche { background-image: linear-gradient(90deg, var(--cor), var(--cad-feito)); }
.cad-projeto-cartao-numeros { font-size: .85rem; color: var(--tinta-media); }
.cad-projeto-cartao > .cad-ficha { justify-self: start; }

.cad-lista-form {
  max-width: 40rem; padding: 1.3rem 1.4rem; border-radius: var(--raio-grande);
  background: var(--vidro-alto); box-shadow: var(--sombra); backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
.cad-lista-form h1 { margin: 0 0 .3rem; font-size: 1.5rem; letter-spacing: -.03em; }
.cad-lista-form > p.apagado { margin: 0 0 1rem; font-size: .9rem; }
.cad-lista-form fieldset.cad-sem-borda { margin-bottom: .9rem; }
.cad-icones { display: flex; flex-wrap: wrap; gap: .35rem; }
.cad-icone-opcao { position: relative; margin: 0; cursor: pointer; }
.cad-icone-opcao input { position: absolute; opacity: 0; }
.cad-icone-opcao span[aria-hidden] {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.25rem;
  background: var(--bloco); box-shadow: inset 0 0 0 1.5px var(--divisor);
}
.cad-icone-opcao input:checked + span { background: var(--acento-fraco); box-shadow: inset 0 0 0 2px var(--acento); }
.cad-icone-opcao input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.cad-vis-opcoes.cad-vis-2 { grid-template-columns: repeat(2, 1fr); }
.cad-arquivar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 860px) {
  .cad-vis-opcoes.cad-vis-2 { grid-template-columns: 1fr; }
  .cad-projeto-linha { flex-wrap: wrap; }
}

/* Quatro opções de "quem pode ver" (com Todas as lojas): 2 x 2. */
.cad-vis-opcoes.cad-vis-4 { grid-template-columns: repeat(2, 1fr); }
.cad-lado-cartao .cad-vis-opcoes.cad-vis-4 { grid-template-columns: 1fr; }
.cad-ficha.vis.rede { background: var(--acento-fraco); color: var(--acento-forte); }

/* ---- editor de blocos da anotação: escreve já vendo (checklist, lista, título) */
.cad-blocos { position: relative; min-height: 50vh; outline: none; font-size: 1.02rem; line-height: 1.6; overflow-wrap: anywhere; }
.cad-blocos[data-vazio]::before {
  content: "Escreva à vontade. Use @ para citar um cliente, [] + espaço para checklist, - + espaço para lista.";
  position: absolute; top: .12rem; left: 0; color: var(--tinta-fraca); pointer-events: none;
}
.cad-bl { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: .18rem 0; }
.cad-bl-texto { flex: 1; min-width: 0; outline: none; min-height: 1.6em; }
.cad-bl[data-tipo="h1"] .cad-bl-texto { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; }
.cad-bl[data-tipo="h1"] { margin-top: .7rem; }
.cad-bl[data-tipo="h2"] .cad-bl-texto { font-size: 1.12rem; font-weight: 700; }
.cad-bl[data-tipo="h3"] .cad-bl-texto { font-size: 1rem; font-weight: 700; }
.cad-bl[data-tipo="li"] { padding-left: 1.3rem; }
.cad-bl[data-tipo="li"]::before { content: "•"; position: absolute; left: .35rem; top: .18rem; color: var(--tinta-media); }
.cad-bl[data-tipo="todo"] { padding: .3rem 0; }
.cad-bl-caixa { flex: 0 0 auto; display: flex; user-select: none; }
.cad-bl-caixa input {
  appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto;
  width: 1.3rem; height: 1.3rem; margin: .17rem 0 0; padding: 0; cursor: pointer;
  border-radius: 6px; background: var(--vidro-alto); box-shadow: inset 0 0 0 1.5px var(--tinta-fraca);
  transition: background .15s ease, box-shadow .15s ease;
}
.cad-bl-caixa input:hover { box-shadow: inset 0 0 0 1.5px var(--tinta-media); }
.cad-bl-caixa input:checked { background: var(--cad-feito); box-shadow: none; }
.cad-bl-caixa input:checked::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: .32rem; height: .62rem;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: translate(-50%, -50%) rotate(45deg);
}
.cad-bl.feito .cad-bl-texto { text-decoration: line-through; color: var(--tinta-fraca); }
.cad-blocos .cad-mencao { cursor: default; }
/* "→ Tarefa" nos itens de checklist e lista: aparece ao passar o mouse (no celular, sempre). */
.cad-bl-acao {
  flex: 0 0 auto; align-self: center; border: 0; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 650;
  padding: .2rem .55rem; border-radius: 99px; color: var(--acento); background: var(--acento-fraco);
  opacity: 0; transition: opacity .15s ease; box-shadow: none; user-select: none;
}
.cad-bl:hover .cad-bl-acao, .cad-bl:focus-within .cad-bl-acao { opacity: 1; }
@media (hover: none) { .cad-bl-acao { opacity: .85; } }
.cad-mencao-tarefa { background: var(--ok-fraco); color: var(--ok); cursor: pointer !important; }

/* ==========================================================================
   O DINHEIRO E O PLACAR DA EQUIPE
   ==========================================================================

   Duas peças que entraram em 05/10/2026, depois de o painel abrir um mês sem
   meta cadastrada e não mostrar um real na tela.

   O cartão de dinheiro fica logo abaixo da manchete e acima da fila. É uma
   fileira de blocos, não um placar de cartões: o olho lê os três em sequência
   (loja → sua parte → seu bolso) em vez de escolher entre eles.
   -------------------------------------------------------------------------- */

.missao-dinheiro {
  display: grid; gap: .7rem; margin-bottom: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.missao-dinheiro-bloco {
  display: flex; align-items: flex-start; gap: .75rem;
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  border-radius: var(--m-raio); box-shadow: var(--m-sombra);
  padding: .95rem 1.05rem;
  text-decoration: none; color: var(--m-texto);
}
a.missao-dinheiro-bloco {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.missao-dinheiro-bloco:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--m-sombra-alta); border-color: var(--m-borda-forte);
}

.missao-dinheiro-corpo { display: grid; gap: .1rem; min-width: 0; }
.missao-dinheiro-rotulo { font-size: .78rem; font-weight: 650; color: var(--m-texto-3); }
.missao-dinheiro-valor {
  font-size: clamp(1.2rem, .6rem + 1vw, 1.6rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.15; white-space: nowrap;
}
.missao-dinheiro-nota { font-size: .78rem; color: var(--m-texto-2); line-height: 1.35; }

/* O faturamento da loja é o número do time: ganha a barra verde na lateral
   pra ler como "o todo", e os outros dois blocos leem como recortes dele. */
.missao-dinheiro-loja { border-left: 4px solid var(--m-verde); }
.missao-dinheiro-loja .missao-dinheiro-valor { color: var(--m-verde); }

/* A bonificação é o único número da dobra que fala do bolso dela. Cor
   exclusiva: âmbar não aparece em mais nada aqui, e cor que só tem um dono é
   o que o olho acha sem procurar. */
.missao-dinheiro-bonus { border-left: 4px solid var(--m-ambar); }
.missao-dinheiro-bonus .missao-dinheiro-valor { color: var(--m-ambar); }

/* ---------------------------------------------------- seu lugar no time -- */
/* O número grande aqui NÃO é a posição — é o gap. "Faltam R$ 1.180 pra passar
   a Eduarda" se resolve numa venda; "4ª de 4" é um rótulo que a pessoa carrega
   o mês inteiro sem alavanca nenhuma. A posição fica no canto, pequena. */
.missao-lugar {
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  border-radius: var(--m-raio); box-shadow: var(--m-sombra);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 1.15rem 1.25rem 1.2rem; margin: 0;
}
.missao-lugar-cabeca { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.missao-lugar-cabeca h3 {
  margin: 0; font-size: 1.12rem; font-weight: 750; letter-spacing: -.02em; color: var(--m-texto);
}
.missao-lugar-pos {
  margin-left: auto; font-size: .85rem; color: var(--m-texto-3);
  background: var(--m-cartao-2); border: 1px solid var(--m-borda);
  padding: .35rem .75rem; border-radius: 99px; white-space: nowrap;
}
.missao-lugar-pos strong { font-size: 1rem; font-weight: 800; color: var(--m-texto); }

.missao-lugar-valor {
  margin: 0 0 .75rem; font-size: 1.8rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1.1; color: var(--m-texto);
}
.missao-lugar-valor span {
  display: block; font-size: .82rem; font-weight: 600;
  letter-spacing: 0; color: var(--m-texto-3); margin-top: .15rem;
}

.missao-lugar-gap {
  margin: 0; padding: .7rem .9rem; border-radius: 12px;
  background: var(--m-azul-fraco); color: var(--m-texto-2);
  font-size: .92rem; line-height: 1.45;
  display: flex; align-items: baseline; gap: .5rem;
}
.missao-lugar-gap strong { color: var(--m-azul); font-weight: 800; }
.missao-lugar-gap.lider { background: var(--m-ambar-fraco); color: var(--m-ambar); font-weight: 650; }

/* -------------------------------------------------- placar completo ------ */
.missao-placar-equipe { margin: 0; }
.missao-placar-eu { background: var(--m-azul-fraco); }
.missao-placar-eu td { font-weight: 650; }

@media (max-width: 760px) {
  .missao-dinheiro { grid-template-columns: minmax(0, 1fr); }
  .missao-lugar-valor { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  a.missao-dinheiro-bloco { transition: none; }
  a.missao-dinheiro-bloco:hover { transform: none; }
}

/* --- a barra de meta dentro do cartão de faturamento ----------------------
   Ela morava numa faixa fina no rodapé da dobra, longe do número que media —
   e sumia por completo nos meses sem meta cadastrada. Agora fica colada ao
   valor, e a ausência de meta vira um convite, não silêncio. */
.missao-meta-barra {
  display: block; position: relative; height: 7px; border-radius: 99px;
  margin: .4rem 0 .3rem; background: var(--m-borda); overflow: hidden;
}
.missao-meta-preenche {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--m-azul), var(--m-verde));
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.missao-meta-preenche.atras { background: linear-gradient(90deg, var(--m-ambar), var(--m-laranja)); }
.missao-meta-preenche.bateu { background: linear-gradient(90deg, var(--m-verde), #067a51); }

/* "Onde você deveria estar hoje". Sem este risco, 60% é um número sem
   julgamento — 60% no dia 10 é adiantado, 60% no dia 28 é atraso. */
.missao-meta-marca {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--m-texto-2); opacity: .55; border-radius: 2px;
}

.missao-meta-legenda { font-size: .76rem; color: var(--m-texto-3); line-height: 1.3; }
.missao-meta-legenda strong { font-weight: 800; color: var(--m-texto-2); }
.missao-meta-legenda strong.atras { color: var(--m-laranja); }
.missao-meta-legenda strong.bateu { color: var(--m-verde); }

.missao-sem-meta {
  display: inline-block; margin: .35rem 0 .2rem;
  font-size: .76rem; font-weight: 650; color: var(--m-azul); text-decoration: none;
  border-bottom: 1px dashed currentColor; padding-bottom: 1px;
}
.missao-sem-meta:hover { text-decoration: none; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .missao-meta-preenche { transition: none; }
}
/* ==========================================================================
   TAREFAS DE HOJE — o widget do caderno na tela inicial
   ==========================================================================

   Quatro decisões, e nenhuma delas é "fonte bonita" ou "cor que motiva" —
   essas duas coisas não têm evidência de mover ninguém. O que tem:

   1. FITTS (1954): o tempo pra acertar um alvo cresce com a distância e cai
      com o tamanho. O ✓ é o maior elemento clicável da linha e fica na
      esquerda, onde o olho entra. O título é link, mas secundário.
   2. HICK-HYMAN: o tempo de decisão cresce com o número de opções. Cinco
      linhas, zero filtro, zero etiqueta. O resto fica em /caderno.
   3. PROGRESSO DOTADO (Nunes & Drèze, 2006): quem recebe avanço de presente
      persiste mais. A barra abre com o que já foi feito hoje, não em zero.
   4. ZEIGARNIK: o que ficou aberto continua visível — mas "atrasada" é uma
      etiqueta cinza e miúda, não um alarme vermelho. Dívida gritando na cara
      é o jeito mais rápido de a pessoa fechar a aba.
   -------------------------------------------------------------------------- */

.missao-hoje {
  background: var(--m-cartao); border: 1px solid var(--m-borda);
  border-radius: var(--m-raio); box-shadow: var(--m-sombra);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 1.15rem 1.25rem 1.2rem; margin: 0;
}

.missao-hoje-cabeca { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.missao-hoje-cabeca h3 {
  margin: 0; font-size: 1.12rem; font-weight: 750; letter-spacing: -.02em; color: var(--m-texto);
}
.missao-hoje-contagem {
  font-size: .82rem; color: var(--m-texto-3);
  background: var(--m-cartao-2); border: 1px solid var(--m-borda);
  padding: .3rem .7rem; border-radius: 99px; white-space: nowrap;
}
.missao-hoje-contagem strong { font-weight: 800; color: var(--m-verde); }
.missao-hoje-link {
  margin-left: auto; font-size: .82rem; font-weight: 650;
  color: var(--m-texto-2); text-decoration: none; white-space: nowrap;
}
.missao-hoje-link:hover { color: var(--m-azul); text-decoration: none; }

.missao-hoje-barra {
  display: block; height: 6px; border-radius: 99px; margin: .8rem 0 .2rem;
  background: var(--m-borda); overflow: hidden;
}
.missao-hoje-barra > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--m-azul), var(--m-verde));
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

/* O campo de escrever vem ANTES da lista: "adicionar" é a ação que o Jean
   pediu, e campo escondido embaixo de dez linhas não é campo, é segredo. */
.missao-hoje-nova { display: flex; gap: .5rem; margin: .9rem 0 .25rem; }
.missao-hoje-nova input[type="text"] {
  flex: 1; min-width: 0; margin: 0;
  padding: .7rem .9rem; border-radius: 12px;
  border: 1px solid var(--m-borda-forte); background: var(--m-cartao-2);
  font: inherit; font-size: .92rem; color: var(--m-texto);
}
.missao-hoje-nova input[type="text"]::placeholder { color: var(--m-texto-3); }
.missao-hoje-nova input[type="text"]:focus {
  outline: 2px solid var(--m-azul); outline-offset: 1px;
  background: var(--m-cartao); border-color: transparent;
}
.missao-hoje-nova button {
  flex: 0 0 auto; cursor: pointer; font: inherit;
  padding: .7rem 1.2rem; border-radius: 12px; border: 0;
  background: linear-gradient(180deg, var(--m-btn-1), var(--m-btn-2));
  color: #fff; font-size: .92rem; font-weight: 700;
  box-shadow: 0 2px 4px rgba(13, 81, 196, .2), 0 6px 16px rgba(13, 81, 196, .22);
}
.missao-hoje-nova button:hover { filter: saturate(1.1); }

.missao-hoje-lista { list-style: none; margin: .5rem 0 0; padding: 0; }
.missao-hoje-lista li {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .2rem; border-bottom: 1px solid var(--m-borda);
}
.missao-hoje-lista li:last-child { border-bottom: 0; }
/* mesma leitura de urgência da tela de Tarefas: fundo tingido + barra à esquerda */
.missao-hoje-lista li:is(.prio-1, .prio-2, .prio-3):not(.feita) {
  padding-left: .7rem; margin: 3px 0; border-bottom: 0; border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--prio);
  background: linear-gradient(90deg, var(--prio-fraco), transparent 75%);
}
.missao-hoje-lista li.prio-2:not(.feita) { box-shadow: inset 4px 0 0 var(--prio); }
.missao-hoje-lista li.prio-3:not(.feita) {
  box-shadow: inset 5px 0 0 var(--prio);
  background: linear-gradient(90deg, var(--prio-fraco), var(--prio-fraco) 30%, transparent 85%);
}

/* Linha inteira em cinza quando feita — o risco no texto é o fechamento
   visível do laço, e é o que dá vontade de marcar a próxima. */
.missao-hoje-lista li.feita .missao-hoje-titulo {
  color: var(--m-texto-3); text-decoration: line-through;
}

.missao-hoje-titulo {
  flex: 1; min-width: 0; font-size: .96rem; line-height: 1.4;
  color: var(--m-texto); text-decoration: none;
}
.missao-hoje-titulo:hover { color: var(--m-azul); text-decoration: none; }

.missao-hoje-hora, .missao-hoje-atraso {
  flex: 0 0 auto; font-size: .74rem; color: var(--m-texto-3); white-space: nowrap;
}
.missao-hoje-atraso {
  background: var(--m-cartao-2); border: 1px solid var(--m-borda);
  padding: .15rem .5rem; border-radius: 99px;
}

.missao-hoje-vazio { margin: .9rem 0 0; font-size: .9rem; color: var(--m-texto-3); }
.missao-hoje-mais {
  display: inline-block; margin-top: .7rem;
  font-size: .84rem; font-weight: 650; color: var(--m-azul); text-decoration: none;
}
.missao-hoje-mais:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .missao-hoje-nova { flex-wrap: wrap; }
  .missao-hoje-nova button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .missao-hoje-barra > span { transition: none; }
}
/* ==========================================================================
   MENOS PESO — a passada de limpeza de 05/10/2026
   ==========================================================================

   Diagnóstico do Jean: "esse dash tá muito cheio, dá sensação de coisa
   demais". Ele tem razão, e a causa é somatória: cada pedido virou um bloco
   com borda, sombra, bolha colorida e título próprio. Onze caixas empilhadas.

   O corte aqui é de PESO, não de informação — nada sumiu da tela. O que mudou:

   1. O faturamento do mês virou uma linha dentro do herói (eram 3 cartões).
   2. As bolhas coloridas saíram dos cabeçalhos. Elas marcavam seção quando
      havia duas; com oito, viram confete.
   3. As bordas coloridas na lateral dos cartões saíram pelo mesmo motivo.
   4. Sombra mais curta e borda mais clara: a caixa ainda se separa do fundo,
      mas para de gritar.
   5. Mais ar ENTRE os blocos, menos dentro deles — é o espaço entre as coisas
      que dá sensação de limpo, não o espaço dentro de cada uma.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------- o mês, dentro do herói -- */
.missao-mes {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid var(--m-borda);
  font-size: .82rem; color: var(--m-texto-3);
}
.missao-mes-rotulo {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--m-texto-3);
}
.missao-mes-valor {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; color: var(--m-verde);
}
.missao-mes-barra {
  flex: 0 1 7rem; min-width: 4rem; height: 5px; border-radius: 99px;
  background: var(--m-borda); overflow: hidden;
}
.missao-mes-barra > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--m-azul), var(--m-verde));
}
.missao-mes-barra > span.atras { background: linear-gradient(90deg, var(--m-ambar), var(--m-laranja)); }
.missao-mes-barra > span.bateu { background: var(--m-verde); }
.missao-mes-nota { color: var(--m-texto-2); }
.missao-mes-definir { color: var(--m-azul); text-decoration: none; border-bottom: 1px dashed currentColor; }
.missao-mes-definir:hover { text-decoration: none; opacity: .8; }
.missao-mes-sep { width: 1px; height: .85rem; background: var(--m-borda-forte); }
.missao-mes-bonus { color: var(--m-texto-2); text-decoration: none; }
.missao-mes-bonus strong { color: var(--m-ambar); font-weight: 800; }
a.missao-mes-bonus:hover { text-decoration: none; }
a.missao-mes-bonus:hover strong { text-decoration: underline; }

/* ------------------------------------------------------- menos confete ----- */
/* As bolhas coloridas saem dos cabeçalhos: elas marcavam seção quando havia
   duas na tela. Com oito, o olho para de usá-las como marcação e passa a ler
   como enfeite — e enfeite repetido é exatamente o que cansa. O avatar da
   pessoa FICA: ali a bolha identifica alguém, não decora um título. */
.missao-proxima-cabeca > .missao-bolha,
.missao-hoje-cabeca > .missao-bolha,
.missao-lugar-cabeca > .missao-bolha { display: none; }

/* Bordas coloridas na lateral: mesmo raciocínio. */
.missao-dinheiro-loja, .missao-dinheiro-bonus, .missao-rodape { border-left-width: 1px; }

/* Caixa mais discreta: a sombra encurta e a borda clareia. Ela continua se
   separando do fundo — só para de disputar atenção com o conteúdo. */
.missao-proxima, .missao-hoje, .missao-lugar,
.missao-placar-equipe, .missao-fila, .missao-faixa {
  box-shadow: 0 1px 2px rgba(16, 40, 66, .04), 0 2px 8px rgba(16, 40, 66, .045);
}

/* O ar vai pra ENTRE os blocos. É a distância entre as coisas que dá sensação
   de limpo; mais espaço dentro de cada caixa só deixa a caixa maior. */
#painel-blocos .bloco-painel { margin-bottom: 1.4rem; }
.missao-hero { margin-bottom: .9rem; }
.missao-proxima { margin-bottom: .6rem; }
.missao-fila { margin-bottom: .6rem; }

/* Títulos de cartão um pouco menores: eles competiam com a manchete do herói,
   que é a única coisa na tela que deveria ser grande. */
.missao-proxima-cabeca h3, .missao-hoje-cabeca h3, .missao-lugar-cabeca h3 {
  font-size: 1rem; font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .missao-proxima,
  :root:not([data-tema="claro"]) .missao-hoje,
  :root:not([data-tema="claro"]) .missao-lugar,
  :root:not([data-tema="claro"]) .missao-placar-equipe,
  :root:not([data-tema="claro"]) .missao-fila,
  :root:not([data-tema="claro"]) .missao-faixa {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .22);
  }
}
/* A faixa de contexto e a fila "depois dela" eram duas barras finas, uma
   colada na outra, logo abaixo do cartão da pessoa. Duas caixas pra dizer
   coisas do mesmo tamanho de importância. Viram uma só: a fila perde a caixa
   e encosta na faixa, com um filete separando. */
.missao-fila {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom: 0; margin-bottom: 0; box-shadow: none;
}
.missao-faixa {
  border-top-left-radius: 0; border-top-right-radius: 0;
  border-top: 1px solid var(--m-borda);
  box-shadow: 0 1px 2px rgba(16, 40, 66, .04), 0 2px 8px rgba(16, 40, 66, .045);
}
/* A linha do mês com mais peso.

   O Jean não achou ela na captura — e o faturamento do mês é justamente o
   número que ele mais pediu. Discrição demais num dado central é o mesmo que
   escondê-lo. O valor cresce e o rótulo escurece; continua UMA linha, sem
   virar cartão de novo. */
.missao-mes { font-size: .88rem; gap: .65rem; }
.missao-mes-rotulo { font-size: .72rem; color: var(--m-texto-2); }
.missao-mes-valor { font-size: 1.45rem; letter-spacing: -.035em; }
.missao-mes-barra { flex: 0 1 8rem; height: 6px; }
.missao-mes-nota { color: var(--m-texto-2); font-weight: 600; }
/* =================================================== Missão do dia (06/10/2026)
   Topo da tela inicial, versão clara (a escura foi recusada): cabeçalho com
   nome e lema, três cartões de meta (número grande + anel + botão próprio) e
   uma faixa com faturamento, 3 horários livres e a próxima ação. Cores do logo:
   marinho #032859, azul do quadrado #0a5cb3, turquesa do "BELA" #0391b2. */
.mz { display: grid; gap: .9rem; }
.mz-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: .2rem .2rem 0; }
.mz-ola { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 750; letter-spacing: -.015em; color: var(--tinta); }
.mz-lema { margin: .25rem 0 0; font-size: .95rem; font-style: italic; color: #0391b2; }
.mz-status { margin: 0; text-align: right; font-size: .8rem; line-height: 1.45; color: var(--tinta-fraca); white-space: nowrap; }
.mz-status strong { color: var(--tinta); }

.mz-metas { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mz-metas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mz-metas-1 { grid-template-columns: minmax(0, 1fr); }
.mz-meta {
  display: grid; gap: .55rem; padding: 1rem 1.05rem; border-radius: 18px;
  background: var(--vidro-alto); box-shadow: var(--sombra-mini), inset 0 0 0 1px var(--divisor-fraco, rgba(0,0,0,.05));
  transition: transform .15s ease, box-shadow .15s ease;
}
.mz-meta:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.mz-meta.ok { box-shadow: var(--sombra-mini), inset 0 0 0 1.5px rgba(29, 158, 117, .55); }
.mz-meta-cabeca { display: flex; justify-content: space-between; align-items: center; }
.mz-meta-rotulo { font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); }
.mz-meta.ok .mz-meta-rotulo { color: #0f6e56; }
.mz-anel { width: 46px; height: 46px; flex: 0 0 46px; }
.mz-anel-trilho { stroke: var(--divisor); }
.mz-anel-feito { color: #0f6e56; }
.mz-anel-feito circle { fill: #e1f5ee; }
.mz-meta-num { margin: 0; font-size: 2.5rem; font-weight: 750; line-height: 1; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mz-meta-num small { font-size: 1.05rem; font-weight: 600; color: var(--tinta-fraca); letter-spacing: 0; }
.mz-meta.ok .mz-meta-num { color: #0f6e56; }
.mz-meta-sub { margin: 0; font-size: .8rem; color: var(--tinta-media); min-height: 1.2em; }
.mz-meta-botao {
  display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .15rem;
  padding: .6rem .8rem; border-radius: 12px; font-weight: 700; font-size: .88rem;
  color: #fff !important; text-decoration: none; background: #0391b2;
  transition: filter .15s ease, transform .12s ease;
}
.mz-meta-botao:hover { text-decoration: none; filter: brightness(1.08); transform: translateY(-1px); }
.mz-meta-botao:active { transform: scale(.98); }
.mz-meta-botao .menu-svg { width: 18px; height: 18px; }
.mz-cor-agendar { background: #0a5cb3; }

/* --- Os três blocos do dia: maiores, e cada um com a sua cor -------------
   A cor chega inline (`--c`), vinda do PHP, porque quem decide o que é
   agenda, orçamento e venda é a regra de negócio, não a folha de estilo.
   O número cresceu porque ele é a única coisa que a pessoa procura de
   relance: o resto do cartão é contexto, ele é o placar. */
/* Coluna flex (e nao grid) pra que o botao gruda no rodape: nem todo cartao
   tem linha de recorde, e sem isso os tres botoes ficavam em alturas
   diferentes dentro da mesma fileira. */
.mz-meta {
  display: flex; flex-direction: column;
  padding: 1.15rem 1.2rem 1.25rem; border-top: 3px solid var(--c, transparent);
}
.mz-meta-botao { margin-top: auto; }
.mz-meta-rotulo { color: var(--c, var(--tinta-fraca)); }
.mz-meta-num { font-size: clamp(2.9rem, 4.4vw, 3.8rem); }
.mz-meta-num small { font-size: 1.25rem; }
.mz-anel { width: 56px; height: 56px; flex: 0 0 56px; }
.mz-meta-botao { background: var(--c, #0391b2); padding: .72rem .9rem; font-size: .92rem; }
.mz-meta:hover { background: linear-gradient(157deg, var(--c-lavado, rgba(255,255,255,.9)), rgba(255,255,255,.72)); }

/* O recorde da régua. Pequeno de propósito: ele não compete com o placar,
   ele responde à objeção que o placar levanta ("faltam 4" -> "você já fez 9"). */
.mz-meta-marca { margin: 0; font-size: .76rem; font-weight: 650; color: var(--c, var(--tinta-media)); }
.mz-meta-marca.nova { color: #0f6e56; }
.mz-meta.ok .mz-meta-marca { color: #0f6e56; }

/* A prova. Fundo escuro e número em dourado porque esta é a única linha da
   tela que não pede nada — ela só lembra que o alvo de hoje já foi batido
   antes, por esta pessoa, nesta loja. */
.mz-prova {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  padding: .8rem 1.15rem; border-radius: 16px;
  background: linear-gradient(100deg, #0a4f65, #0f6f8c);
  color: #fff; box-shadow: var(--sombra-mini);
}
.mz-prova strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.mz-prova span { font-size: .9rem; color: rgba(255, 255, 255, .86); }
.mz-prova b { font-weight: 800; color: #ffd98a; }
.mz-meta.ok .mz-meta-botao { background: #e1f5ee; color: #085041 !important; }

.mz-faixa { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.mz-bloco { padding: .85rem 1rem; border-radius: 16px; background: var(--vidro); box-shadow: var(--sombra-mini); min-width: 0; }
.mz-rot { display: block; font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); }
.mz-rot strong { color: var(--tinta); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.mz-valor { margin: .25rem 0 .1rem; font-size: 1.4rem; font-weight: 750; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mz-valor small { font-size: .8rem; font-weight: 500; color: var(--tinta-fraca); }
.mz-barra { position: relative; display: block; height: 8px; margin: .45rem 0 .1rem; border-radius: 99px; background: var(--divisor); }
.mz-barra > span { display: block; height: 100%; border-radius: 99px; background: #0391b2; }
.mz-barra.atras > span { background: #ef9f27; }
.mz-barra > i { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid #032859; }
.mz-sub { margin: .35rem 0 0; font-size: .78rem; color: var(--tinta-media); }
.mz-sub a { color: var(--acento); font-weight: 650; }
.mz-bom { color: #0f6e56; } .mz-atras { color: #b26a00; }
.mz-pessoa { margin: .3rem 0 0; font-size: 1.02rem; font-weight: 700; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-horarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-top: .45rem; }
.mz-horario {
  display: grid; gap: .05rem; padding: .45rem .5rem; border-radius: 11px; text-decoration: none; text-align: center;
  background: #e8f1fb; color: #0a5cb3 !important; transition: background .15s ease, transform .12s ease;
}
.mz-horario:hover { background: #0a5cb3; color: #fff !important; text-decoration: none; transform: translateY(-1px); }
.mz-horario strong { font-size: 1rem; font-weight: 750; }
.mz-horario span { font-size: .68rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-encaixe { grid-column: 1 / -1; background: #fff4e0; color: #8a5600 !important; }
.mz-encaixe:hover { background: #8a5600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .mz-horario { background: rgba(87, 160, 230, .16); color: #9cc8f5 !important; }
  :root:not([data-tema="claro"]) .mz-anel-feito circle { fill: rgba(29,158,117,.2); }
  :root:not([data-tema="claro"]) .mz-lema { color: #5ec6e0; }
}
@media (max-width: 1000px) {
  .mz-faixa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mz-faixa .mz-bloco:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .mz-topo { flex-direction: column; align-items: flex-start; }
  .mz-status { text-align: left; }
  .mz-metas, .mz-metas-2, .mz-faixa { grid-template-columns: minmax(0, 1fr); }
  .mz-meta-num { font-size: 2rem; }
}

/* ============================================== Tarefas, versão sóbria (06/10/2026)
   Sem emoji (ícones de traço), sem anel de 0%, sem parede vermelha de
   atrasadas. Uma coisa por vez no bloco "Agora", no marinho do logo. */
.cad-ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -.16em; }
.cad-abas a { display: inline-flex; align-items: center; gap: .4rem; }
.cad-lado-icone { display: inline-grid; place-items: center; color: var(--tinta-fraca); }
.cad-lado-item.ativo .cad-lado-icone { color: var(--acento); }
.cad-lado-icone .cad-ico { width: 17px; height: 17px; }
.cad-lado-icone-cor { color: var(--cor, var(--tinta-fraca)) !important; }
.cad-chave .cad-ico { width: 13px; height: 13px; }
.cad-ficha { gap: .28rem; }
.cad-ficha .cad-ico { width: 12px; height: 12px; vertical-align: -.1em; }

.cad-hoje { margin: .1rem 0 .9rem; }
.cad-hoje-titulo { display: flex; align-items: baseline; gap: .65rem; margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; }
.cad-hoje-titulo span { font-size: .88rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-fraca); }
.cad-hoje .cad-progresso { margin-top: .55rem; }
.cad-hoje .cad-progresso-trilho { height: 6px; background: var(--divisor); }
.cad-hoje .cad-progresso-enche { background: #0391b2; }
.cad-hoje .cad-faixa-cheia .cad-progresso-enche { background: #1d9e75; }
.cad-hoje .cad-progresso-texto { margin-top: .4rem; font-size: .82rem; }

.cad .cad-agora {
  background: #032859; color: #fff; border: 0; border-radius: 18px;
  padding: 1rem 1.15rem 1.05rem; box-shadow: 0 14px 30px -20px rgba(3, 40, 89, .8);
}
.cad .cad-agora::before { display: none; }
.cad .cad-agora-rotulo { color: #85b7eb; font-size: .68rem; letter-spacing: .14em; }
.cad .cad-agora-linha { margin: .4rem 0 .3rem; }
.cad .cad-agora-titulo { color: #fff; font-size: 1.3rem; }
.cad .cad-agora-titulo:hover { color: #cfe6ff; }
.cad-agora-contexto { margin: 0 0 .8rem 3.1rem; font-size: .84rem; color: #b5d4f4; }
.cad .cad-agora .cad-check { background: rgba(255,255,255,.08); }
.cad .cad-agora-acoes .btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #0391b2; color: #fff; box-shadow: none;
}
.cad .cad-agora-acoes .btn:hover { background: #05a5cb; }
.cad .cad-agora-sub { color: #b5d4f4; }
.cad-agora-pular { margin-left: auto; font-size: .84rem; color: #b5d4f4 !important; }
.cad-agora-pular:hover { color: #fff !important; }

.cad-anteriores { margin: .9rem 0 .4rem; border-radius: 14px; background: var(--vidro); box-shadow: var(--sombra-mini); }
.cad-anteriores > summary {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: pointer; list-style: none;
  font-size: .88rem; color: var(--tinta-media);
}
.cad-anteriores > summary::-webkit-details-marker { display: none; }
.cad-anteriores > summary .cad-ico { width: 17px; height: 17px; color: var(--tinta-fraca); }
.cad-anteriores > summary strong { color: var(--tinta); }
.cad-anteriores-ver { margin-left: auto; font-size: .8rem; font-weight: 650; color: var(--acento); }
.cad-anteriores[open] .cad-anteriores-ver { visibility: hidden; }
.cad-anteriores-acao { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: 0 .9rem .6rem; font-size: .8rem; color: var(--tinta-fraca); }
.cad-anteriores .cad-lista { padding: 0 .5rem .6rem; }
@media (max-width: 700px) {
  .cad-agora-contexto { margin-left: 0; }
  .cad-agora-pular { margin-left: 0; }
}
.cad-lado { scrollbar-width: none; }
.cad-lado::-webkit-scrollbar { display: none; }
.cad-hoje-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cad-hoje-conta { font-size: .85rem; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.cad-hoje-conta strong { color: var(--tinta); }
.cad-segmentos { display: flex; gap: 4px; margin-top: .55rem; }
.cad-segmentos i { flex: 1; height: 6px; border-radius: 3px; background: var(--divisor); transition: background .35s ease; }
.cad-segmentos i.f { background: #0391b2; }
/* Tela Hoje: o campo de nova tarefa desce para depois da lista (prévia aprovada) */
.cad-meio-hoje { display: flex; flex-direction: column; }
.cad-meio-hoje > .cad-rapido { order: 20; margin-top: .9rem; }
.cad-meio-hoje > .cad-dicas { order: 21; }
.cad-meio-hoje > .cad-anteriores { order: 15; }
.cad-meio-hoje .cad-bloco-plano .cad-bloco-titulo { color: var(--tinta-fraca); }

/* ===================================================== Tarefas · HOJE v2 (06/10/2026)
   Protótipo aprovado pelo Jean: céu do dia + anéis (Apple Fitness), AGORA com
   uma tarefa só, lista estilo Lembretes, linha do tempo, matriz arrastável,
   evolução, assistente com voz. Tudo sob .ch para não vazar para outras telas. */
.ch { --ch-card:#fff; --ch-t2:#5b6b7b; --ch-t3:#98a6b3; --ch-linha:rgba(13,27,42,.08);
  --ch-sombra:0 1px 2px rgba(13,27,42,.04),0 8px 24px -12px rgba(13,27,42,.12);
  max-width: 900px; margin: 0 auto; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif; }
.ch .cad-abas { margin-bottom: .7rem; }
.ch-ceu { position: relative; border-radius: 22px; padding: 12px 16px 10px; overflow: hidden; transition: background 1s; }
.ch-ceu > * { position: relative; z-index: 1; }
.ch-arco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ch-topo { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ch-titulo { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #0a5cb3; line-height: 1; }
.ch-data { margin: 3px 0 0; color: var(--ch-t2); font-size: 14px; }
.ch-frase { margin: 8px 0 0; font-size: 15px; font-weight: 600; max-width: 36ch; color: var(--tinta); }
.ch-frase em { font-style: normal; color: #0391b2; }
.ch-voz-botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ch-ouvir { border: 0; background: rgba(255,255,255,.8); border-radius: 99px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 650; color: #0a5cb3; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ch-ouvir-leve { background: none; color: var(--ch-t2); font-weight: 500; }
.ch-ceu-txt { margin: 4px 0 0; font-size: 12px; color: var(--ch-t2); }
.ch-aneis-box { display: flex; align-items: center; gap: 12px; }
.ch-legenda { display: grid; gap: 3px; font-size: 12px; color: var(--ch-t2); }
.ch-legenda span { display: flex; align-items: center; gap: 6px; }
.ch-legenda i { width: 9px; height: 9px; border-radius: 50%; }
.ch-legenda b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.ch-extras { display: flex; gap: 8px; margin-top: 10px; }
.ch-evo { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--ch-card); border-radius: 14px; box-shadow: var(--ch-sombra); padding: 6px 12px 6px 6px; min-width: 0; }
.ch-evo-palco { position: relative; width: 64px; height: 44px; flex: 0 0 64px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 50% 60%,#eef6ff,transparent 70%); }
.ch-evo-palco svg { position: relative; z-index: 1; animation: ch-flutua 3.2s ease-in-out infinite; }
@keyframes ch-flutua { 50% { transform: translateY(-3px); } }
.ch-evo-brilho { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle,rgba(255,215,106,.9),transparent 60%); opacity: 0; }
.ch-evo-brilho.on { animation: ch-brilha 1.4s ease-out; }
@keyframes ch-brilha { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.ch-evo.evoluiu svg { animation: ch-evolui 1.2s ease; }
@keyframes ch-evolui { 20% { transform: scale(.6); filter: brightness(3); } 60% { transform: scale(1.25); } }
.ch-evo-info { flex: 1; min-width: 0; }
.ch-evo-nome { font-size: 14px; font-weight: 800; color: #032859; margin-bottom: 4px; }
.ch-evo-barra { height: 6px; border-radius: 3px; background: #eef1f5; overflow: hidden; }
.ch-evo-barra span { display: block; height: 100%; background: linear-gradient(90deg,#0391b2,#0a5cb3); transition: width .7s cubic-bezier(.3,1.3,.5,1); }
.ch-evo-info p { margin: 3px 0 0; font-size: 11.5px; color: var(--ch-t2); }
.ch-atalho { display: flex; align-items: center; gap: 8px; border: 0; background: var(--ch-card); border-radius: 14px; box-shadow: var(--ch-sombra); padding: 6px 12px 6px 6px; font: inherit; cursor: pointer; color: var(--tinta); }
.ch-atalho b { font-size: 13.5px; white-space: nowrap; }
.ch-atalho:hover { transform: translateY(-1px); }
.ch-atalho-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #eef3f9; color: #0a5cb3; }
.ch-atalho-ico.ch-verde { background: #e6f6f1; color: #1d9e75; }
.ch-atalho-ico .cad-ico { width: 17px; height: 17px; }
.ch-atalho-ico.rola { animation: ch-rola .7s ease; }
@keyframes ch-rola { to { transform: rotate(720deg); } }
.ch-rotinas { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.ch-rotinas:empty { display: none; }
.ch-rot { display: flex; align-items: center; gap: 8px; border: 0; background: var(--ch-card); border-radius: 12px; box-shadow: var(--ch-sombra); padding: 4px 10px 4px 5px; font: inherit; font-size: 12px; color: var(--ch-t2); white-space: nowrap; cursor: pointer; text-align: left; }
.ch-rot b { display: block; color: var(--tinta); font-size: 12.5px; }
.ch-ritmo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ch-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ch-card); border-radius: 99px; padding: 5px 11px; font-size: 13px; color: var(--ch-t2); box-shadow: var(--ch-sombra); }
.ch-chip b { color: var(--tinta); }
.ch-chip[hidden] { display: none; }
.ch-chip.ch-aviso { background: #fff7e6; color: #8a5600; }
.ch-chip.ch-aviso b { color: #8a5600; }
.ch-filtro-box { position: relative; margin-left: auto; }
.ch-filtro { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--ch-card); box-shadow: var(--ch-sombra); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ch-t2); cursor: pointer; }
.ch-filtro span { color: #0a5cb3; }
.ch-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 280px; max-height: 70vh; overflow: auto; scrollbar-width: none;
  background: rgba(255,255,255,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; padding: 8px;
  box-shadow: 0 20px 50px -18px rgba(13,27,42,.35), 0 0 0 1px rgba(13,27,42,.06); }
.ch-menu[hidden] { display: none; }
.ch-menu-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px; font-size: 14px; color: var(--ch-t2); text-decoration: none; }
.ch-menu-item:hover { background: rgba(13,27,42,.05); text-decoration: none; color: var(--tinta); }
.ch-menu-item.ativo { background: rgba(10,92,179,.08); color: var(--tinta); font-weight: 650; }
.ch-menu-item span { margin-left: auto; font-size: 13px; color: var(--ch-t3); }
.ch-menu-item .cad-ico { color: var(--ch-t3); width: 16px; height: 16px; }
.ch-menu-cab { margin: 10px 9px 3px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ch-t3); }
.ch-ponto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.ch-seg { display: inline-flex; background: #e4e8ee; border-radius: 10px; padding: 3px; }
.ch-seg button { border: 0; background: none; padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ch-t2); cursor: pointer; }
.ch-seg button.on { background: var(--ch-card); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ch-cab { margin: 12px 0 6px 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ch-t3); display: flex; gap: 8px; align-items: center; }
.ch-cab.ch-noite { color: #7f77dd; margin-top: 18px; }
.ch-kbd { font-size: 11px; color: var(--ch-t3); border: 1px solid var(--ch-linha); border-radius: 5px; padding: 0 5px; letter-spacing: 0; }

/* AGORA — discreto no dia a dia (cartão claro, faixa azul de lado);
   só vira o bloco marinho forte no foco (modo lente). Pedido do Jean. */
.ch-agora { position: relative; background: var(--ch-card); color: var(--tinta); border-radius: 16px; padding: 10px 14px 11px 16px; margin-bottom: 8px;
  box-shadow: var(--ch-sombra), inset 3px 0 0 #0a5cb3; transition: transform .4s, background .4s, box-shadow .4s, color .4s; }
.ch-agora small { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #0a5cb3; }
.ch-agora.foca { animation: ch-foca .7s ease; }
@keyframes ch-foca { 0% { filter: blur(8px); transform: scale(.98); } 60% { filter: blur(0); } 100% { transform: none; } }
.ch-agora-linha { display: flex; gap: 11px; align-items: center; margin-top: 3px; padding-right: 52px; }
.ch-agora-t { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--tinta) !important; text-decoration: none; }
.ch-agora-t:hover { color: #0a5cb3 !important; text-decoration: none; }
.ch-ctx { margin: 1px 0 0; color: var(--ch-t2); font-size: 12.5px; }
.ch-tempo-anel { position: absolute; right: 12px; top: 10px; display: grid; place-items: center; }
.ch-tempo-anel svg { width: 40px; height: 40px; }
.ch-tempo-anel circle:first-child { stroke: #e6eef6; }
.ch-tempo-anel span { position: absolute; text-align: center; font-size: 9px; color: var(--ch-t3); line-height: 1.05; }
.ch-tempo-anel span b { display: block; font-size: 11.5px; color: var(--tinta); }
.ch-acoes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.ch-agora .ch-acoes .ch-btn { padding: 5px 11px; font-size: 12.5px; }
.ch-agora .ch-br { background: #0a5cb3; color: #fff; }
.ch-agora .ch-tint { background: #e6f0fb; color: #0c447c; }
.ch-agora .ch-vidro { background: #f1f4f8; color: var(--ch-t2); }
.ch-agora .ch-g { color: var(--ch-t2); }
.ch-agora .ch-anel-g { background: none; }
/* … e no foco, o destaque forte de antes */
body.ch-lente .ch-agora { background: #032859; color: #fff; padding: 14px 16px; transform: scale(1.03); box-shadow: 0 30px 70px -20px rgba(3,40,89,.9); }
body.ch-lente .ch-agora small { color: #85b7eb; }
body.ch-lente .ch-agora-t { color: #fff !important; font-size: 20px; }
body.ch-lente .ch-ctx { color: #b5d4f4; }
body.ch-lente .ch-tempo-anel circle:first-child { stroke: rgba(255,255,255,.14); }
body.ch-lente .ch-tempo-anel span b { color: #fff; }
body.ch-lente .ch-agora .ch-br { background: #fff; color: #032859; }
body.ch-lente .ch-agora .ch-vidro { background: rgba(255,255,255,.12); color: #fff; }
body.ch-lente .ch-agora .ch-g { color: #b5d4f4; }
body.ch-lente :is(.ch-ceu,.ch-extras,.ch-rotinas,.ch-ritmo,.ch-cards,.ch-sug,.ch-recomeco,#chNoite,.ch-vitrine,.ch-fechar,.ch-cab,.ch .cad-abas,.menu,.topo) { filter: blur(7px) saturate(.6); opacity: .35; pointer-events: none; transition: filter .5s, opacity .5s; }

.ch-passos { margin-top: 10px; background: #f3f7fc; border-radius: 12px; padding: 9px 11px; font-size: 14px; }
body.ch-lente .ch-passos { background: rgba(255,255,255,.08); }
.ch-passos[hidden] { display: none; }
.ch-passos ol { margin: 6px 0 0; padding-left: 20px; }
.ch-passos li { cursor: pointer; margin: 3px 0; }
.ch-passos li.f { text-decoration: line-through; opacity: .55; }
.ch-passo-novo input { width: 100%; margin-top: 8px; border: 1px solid var(--ch-linha); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 14px; }
.ch-passo-novo div { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ch-passo-novo button { border: 0; border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12px; background: #e6f0fb; color: #0c447c; cursor: pointer; }
.ch-btn { border: 0; border-radius: 99px; padding: 7px 13px; font: inherit; font-weight: 650; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: transform .12s, filter .15s; }
.ch-btn:active { transform: scale(.97); }
.ch-btn:disabled { opacity: .5; cursor: default; }
.ch-p { background: #0a5cb3; color: #fff; }
.ch-tint { background: #e6f0fb; color: #0c447c; }
.ch-g { background: none; color: var(--ch-t2); }
.ch-br { background: #fff; color: #032859; }
.ch-vidro { background: rgba(255,255,255,.12); color: #fff; }

/* lista estilo Lembretes */
.ch-cards { background: var(--ch-card); border-radius: 18px; box-shadow: var(--ch-sombra); overflow: hidden; }
.ch-t { display: flex; gap: 12px; align-items: flex-start; padding: 11px 16px; transition: background .2s, opacity .45s, transform .45s; }
.ch-t + .ch-t { border-top: 1px solid var(--ch-linha); }
.ch-t:hover { background: #fafbfc; }
.ch-t.feita { opacity: 0; transform: translateX(30px); }
.ch-anel { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 2px solid var(--c,#c3ccd5); background: none; padding: 0; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; margin-top: 1px; }
.ch-anel:hover { background: color-mix(in srgb, var(--c,#c3ccd5) 15%, transparent); }
.ch-anel.f { background: var(--c,#0a5cb3); transform: scale(1.1); }
.ch-anel.f::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
.ch-anel-g { width: 24px; height: 24px; flex-basis: 24px; border-width: 2.5px; }
.ch-tipo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 30px; margin-top: -3px; }
.ch-tipo svg { width: 16px; height: 16px; }
.ch-corpo { flex: 1; min-width: 0; display: grid; text-decoration: none; color: var(--tinta); }
.ch-corpo:hover { text-decoration: none; }
.ch-tt { font-size: 15px; font-weight: 500; }
.ch-st { margin-top: 2px; font-size: 13px; color: var(--ch-t2); }
.ch-atr { color: #e5484d; }
.ch-est { margin-left: auto; font-size: 12.5px; color: var(--ch-t3); white-space: nowrap; padding-top: 2px; }
.ch-novo { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--ch-linha); margin: 0; }
#chLinhas:empty + .ch-novo { border-top: 0; }
.ch-novo > .cad-ico { width: 22px; height: 22px; color: #0a5cb3; }
.ch-novo input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; background: none; color: var(--tinta); box-shadow: none; padding: 0; }
.ch-novo input::placeholder { color: #0a5cb3; opacity: .85; }
.ch-mic { border: 0; background: #eef3f9; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #0a5cb3; cursor: pointer; }
.ch-mic.on { background: #e5484d; color: #fff; animation: ch-pulsa 1s infinite; }
@keyframes ch-pulsa { 50% { box-shadow: 0 0 0 8px rgba(229,72,77,.15); } }
.ch-entende { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px 50px; }
.ch-entende:empty { display: none; }
.ch-entende span { font-size: 12px; background: #eef3f9; color: #0c447c; border-radius: 99px; padding: 3px 9px; }
.ch-sug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 13px; color: var(--ch-t2); }
.ch-sug button { border: 0; background: #eef3f9; color: #0c447c; border-radius: 99px; padding: 6px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ch-recomeco { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: linear-gradient(135deg,#eaf3ff,#e9f8f6); border-radius: 16px; padding: 11px 14px; }
.ch-recomeco[hidden] { display: none; }
.ch-recomeco p { margin: 0; font-size: 14px; flex: 1; }
.ch-recomeco > .cad-ico { width: 20px; height: 20px; color: #0a5cb3; }

/* linha do tempo e matriz */
.ch-tempo, .ch-matriz { margin-top: 12px; }
.ch-tempo { background: var(--ch-card); border-radius: 18px; box-shadow: var(--ch-sombra); padding: 10px 16px; }
.ch-hora { display: grid; grid-template-columns: 60px 1fr; gap: 10px; min-height: 44px; border-top: 1px solid var(--ch-linha); padding: 6px 0; }
.ch-hora:first-child { border-top: 0; }
.ch-hora > span { font-size: 12px; color: var(--ch-t3); padding-top: 4px; }
.ch-blk { border-radius: 12px; padding: 8px 11px; font-size: 14px; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; text-decoration: none; }
.ch-blk small { opacity: .75; white-space: nowrap; }
.ch-cons { background: #eef1f5; color: #44505c; }
.ch-tar { background: #e6f0fb; color: #0c447c !important; }
.ch-alta { background: #fdecec; color: #7a1f22 !important; box-shadow: inset 3px 0 0 #e5484d; }
.ch-livre { border: 1.5px dashed #cdd6df; color: var(--ch-t3); background: none; }
.ch-agora-l { outline: 2px solid #0391b2; }
.ch-agulha { height: 2px; background: #e5484d; position: relative; margin: 2px 0 6px; }
.ch-agulha::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; }
.ch-matriz:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-quad { background: var(--ch-card); border-radius: 16px; box-shadow: var(--ch-sombra); padding: 12px; min-height: 150px; transition: box-shadow .15s, background .15s; }
.ch-quad.alvo { background: #f2f8ff; box-shadow: inset 0 0 0 2px #0a5cb3; }
.ch-quad h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ch-mcard { display: grid; gap: 2px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: #f6f8fb; color: var(--tinta); text-decoration: none; font-size: 14px; cursor: grab; border: 1px solid transparent; }
.ch-mcard:hover { border-color: #cfe0f3; text-decoration: none; }
.ch-mcard small { color: var(--ch-t3); font-size: 12px; }
.ch-mcard.arrastando { opacity: .4; }
.ch-vazio { margin: 0; font-size: 13px; color: var(--ch-t3); }

/* vitrine + fechar */
.ch-vitrine { background: var(--ch-card); border-radius: 18px; box-shadow: var(--ch-sombra); padding: 12px 16px; margin-top: 16px; display: flex; gap: 16px; align-items: center; }
.ch-vitrine p { margin: 0; font-size: 14px; color: var(--ch-t2); }
.ch-vitrine b { color: var(--tinta); }
.ch-luzes { display: flex; gap: 6px; }
.ch-luzes i { width: 16px; height: 24px; border-radius: 5px 5px 3px 3px; background: #e4e8ee; transition: background .4s, box-shadow .4s; }
.ch-luzes i.on { background: #ffd76a; box-shadow: 0 0 12px rgba(255,200,60,.8); }
.ch-fechar { display: flex; justify-content: center; margin: 16px 0 6px; }

/* sobreposições */
.ch-vela { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(3,40,89,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ch-caixa { background: #fff; border-radius: 26px; padding: 26px; width: min(440px,100%); text-align: center; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); color: var(--tinta); }
.ch-caixa h2 { margin: 6px 0 4px; font-size: 21px; }
.ch-sel { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #0391b2; }
.ch-sub { color: var(--ch-t2); font-size: 13px; margin: 0; }
.ch-pontos { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.ch-pontos i { width: 7px; height: 7px; border-radius: 50%; background: #d6dde5; }
.ch-pontos i.on { background: #0a5cb3; }
.ch-cartao { border-radius: 18px; background: #f2f4f7; padding: 18px; margin: 14px 0; font-size: 17px; font-weight: 650; min-height: 80px; display: grid; place-items: center; transition: transform .25s, opacity .25s; }
.ch-cartao.vai { transform: translateX(60px) rotate(4deg); opacity: 0; }
.ch-escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-escolhas .ch-btn { justify-content: center; padding: 11px; }
.ch-linha-btn { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.ch-passo-grande { font-size: 20px; font-weight: 700; margin: 14px 0 4px; }
.ch-foco-anel { width: 210px; height: 210px; margin: 12px auto; display: block; }
.ch-foco-t { font-size: 44px; font-weight: 800; fill: #032859; font-variant-numeric: tabular-nums; }
.ch-junto { margin: 0; font-size: 13px; color: var(--ch-t2); }
.ch-resumo { text-align: left; margin: 14px 0; font-size: 14px; color: var(--ch-t2); padding-left: 18px; }
.ch-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: #032859; color: #fff; padding: 11px 18px; border-radius: 99px; font-size: 14px; font-weight: 600; opacity: 0; transition: .3s; z-index: 99; pointer-events: none; }
.ch-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ch-confete { position: fixed; width: 9px; height: 14px; top: -20px; z-index: 98; border-radius: 2px; animation: ch-cai 1.8s ease-in forwards; pointer-events: none; }
@keyframes ch-cai { to { transform: translateY(105vh) rotate(720deg); } }
.ch-mais1 { position: fixed; font-weight: 800; color: #1d9e75; font-size: 20px; pointer-events: none; animation: ch-sobe .9s ease-out forwards; z-index: 98; }
@keyframes ch-sobe { to { transform: translateY(-40px); opacity: 0; } }
.ch-bicho { position: fixed; left: -120px; bottom: 22%; z-index: 97; animation: ch-voa 2.6s ease-in-out forwards; pointer-events: none; }
@keyframes ch-voa { 50% { transform: translate(55vw,-60px) rotate(6deg); } 100% { transform: translate(115vw,10px) rotate(-4deg); } }
.ch-sprint { position: fixed; top: 14px; right: 14px; z-index: 95; background: #032859; color: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: 0 14px 34px -14px rgba(3,40,89,.8); font-size: 13px; }
.ch-sprint b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }

/* assistente (Jarvis) */
.ch-jarvis { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; text-align: center; color: #dff6ff; background: radial-gradient(circle at 50% 45%,rgba(3,40,89,.88),rgba(1,12,30,.96)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ch-reator { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.ch-reator i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(94,198,224,.55); }
.ch-reator i:nth-child(1) { border-style: dashed; animation: ch-gira 9s linear infinite; }
.ch-reator i:nth-child(2) { inset: 22px; border-width: 3px; border-color: rgba(94,198,224,.35) transparent rgba(94,198,224,.9) transparent; animation: ch-gira 3.5s linear infinite reverse; }
.ch-reator i:nth-child(3) { inset: 46px; border-color: rgba(255,255,255,.18); box-shadow: 0 0 40px rgba(94,198,224,.45), inset 0 0 30px rgba(94,198,224,.35); }
.ch-reator b { position: absolute; inset: 76px; border-radius: 50%; background: radial-gradient(circle,#fff,#9ff0ff 35%,#1aa7d0 70%,transparent 72%); box-shadow: 0 0 50px 10px rgba(94,198,224,.7); transform: scale(var(--v,1)); transition: transform .08s; }
.ch-reator-p { width: 160px; height: 160px; }
.ch-reator-p b { inset: 54px; }
@keyframes ch-gira { to { transform: rotate(360deg); } }
.ch-ondas { display: flex; gap: 4px; justify-content: center; align-items: center; height: 60px; margin-top: 16px; }
.ch-ondas span { width: 4px; border-radius: 2px; background: #5ec6e0; height: 6px; transition: height .08s; }
.ch-leg { max-width: 620px; margin: 12px auto 0; font-size: 19px; line-height: 1.45; min-height: 84px; padding: 0 20px; text-shadow: 0 0 18px rgba(94,198,224,.4); }
.ch-jarvis small { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .16em; color: rgba(223,246,255,.55); }
.ch-jarvis .ch-btn { margin-top: 16px; }
.ch-mini { position: fixed; left: 18px; bottom: 18px; z-index: 96; display: flex; align-items: center; gap: 12px; max-width: 420px; background: rgba(3,40,89,.95); color: #dff6ff; border-radius: 18px; padding: 10px 16px 10px 10px; box-shadow: 0 18px 40px -16px rgba(1,12,30,.8); transform: translateY(20px); opacity: 0; transition: .35s; pointer-events: none; }
.ch-mini.on { transform: none; opacity: 1; }
.ch-mr { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: radial-gradient(circle,#fff,#9ff0ff 35%,#1aa7d0 68%,transparent 70%); box-shadow: 0 0 22px 4px rgba(94,198,224,.6); animation: ch-pulsaR 1.1s ease-in-out infinite; }
@keyframes ch-pulsaR { 50% { transform: scale(1.12); } }
.ch-mini p { margin: 0; font-size: 14px; line-height: 1.35; }
.ch-mini small { display: block; font-size: 10px; letter-spacing: .14em; color: rgba(223,246,255,.55); margin-bottom: 2px; }
.ch-mini.on { pointer-events: auto; }
.ch-mini-x { flex: none; align-self: flex-start; margin: -2px -6px 0 4px; border: 0; background: none; color: rgba(223,246,255,.6); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 8px; cursor: pointer; }
.ch-mini-x:hover { color: #fff; background: rgba(255,255,255,.12); }
.ch-abertura { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; text-align: center; color: #dff6ff; background: radial-gradient(circle at 50% 40%,#0a4f8a,#021530 70%); }
.ch-abertura h1 { margin: 22px 0 6px; font-size: 30px; font-weight: 800; color: #fff; }
.ch-abertura p { margin: 0; color: rgba(223,246,255,.7); }
.ch-comecar { margin-top: 24px; font-size: 16px; padding: 13px 26px; background: #5ec6e0; color: #021530; }
.ch-pular { margin-top: 14px; border: 0; background: none; color: rgba(223,246,255,.55); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }

/* detalhe aberto por cima */
.ch-detalhe-vela { position: fixed; inset: 0; z-index: 80; background: rgba(3,40,89,.3); display: flex; justify-content: flex-end; }
.ch-detalhe-vela > .cad { width: min(520px, 100%); height: 100%; overflow: auto; background: #f2f4f7; }
.ch-detalhe-vela .cad-detalhe { position: static; max-height: none; width: auto; margin: 0; border-radius: 0; min-height: 100%; }
@media (max-width: 760px) {
  .ch-topo { flex-direction: column; }
  .ch-extras { flex-direction: column; }
  .ch-filtro-box { margin-left: 0; }
  .ch-matriz:not([hidden]) { grid-template-columns: 1fr; }
  .ch-agora-linha { padding-right: 0; }
  .ch-tempo-anel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ch *, .ch-jarvis *, .ch-confete, .ch-bicho { animation: none !important; transition: none !important; } }
.cad-vazio-emoji .cad-ico { width: 42px; height: 42px; color: var(--tinta-fraca); }
.cad-fixada .cad-ico { color: #0a5cb3; }
.cad-mencao .cad-ico, .cad-vis-icone .cad-ico { width: 15px; height: 15px; }

/* ---------- Anotação: Texto | Mapa mental (08/10/2026) ---------- */
.cad-vista { display: inline-flex; gap: 2px; background: rgba(3,40,89,.06); border-radius: 10px; padding: 3px; margin: .2rem 0 .8rem; }
.cad-vista button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--tinta-fraca, #5b6472); cursor: pointer; }
.cad-vista button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cad-vista button.on { background: #fff; color: #032859; font-weight: 600; box-shadow: 0 1px 3px rgba(1,12,30,.14); }
.cad-editor.vista-mapa .cad-ferramentas, .cad-editor.vista-mapa .cad-busca-mencao, .cad-editor.vista-mapa .cad-nota-corpo,
.cad-editor.vista-mapa .cad-blocos, .cad-editor.vista-mapa .cad-nota-ver, .cad-editor.vista-mapa .partida,
.cad-editor.vista-mapa .detector { display: none !important; }
.cad-editor.vista-mapa { grid-template-columns: minmax(0, 1fr); }
.cad-editor.vista-mapa .cad-editor-lado { display: none; }

.mm { position: relative; height: calc(100vh - 260px); min-height: 440px; border-radius: 18px; overflow: hidden; outline: none;
  background: radial-gradient(circle at 50% 45%, #07294f 0%, #031327 55%, #020a17 100%); box-shadow: inset 0 0 0 1px rgba(94,198,224,.15); }
.mm[hidden] { display: none; }
.mm.cheia { position: fixed; inset: 0; height: auto; z-index: 120; border-radius: 0; }
.mm canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-in { position: absolute; transform: translate(-50%, -50%); display: none; background: rgba(4,22,44,.96); border: 1.5px solid #a6f5c9; border-radius: 12px; color: #fff;
  font: 500 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 9px 12px; outline: none; text-align: center; box-shadow: 0 0 30px rgba(94,198,224,.25); z-index: 3; }
.mm-in.on { display: block; }
.mm-in::placeholder { color: #6f98ab; }
.mm-barra { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; background: rgba(4,22,44,.7); border: 1px solid rgba(94,198,224,.25); border-radius: 99px; padding: 4px; backdrop-filter: blur(6px); }
.mm-barra button { border: 0; background: none; color: #cdefff; border-radius: 99px; padding: 6px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.mm-barra button:hover { background: rgba(94,198,224,.2); }
.mm-barra button.verde { color: #a6f5c9; }
.mm-barra button.ouro { color: #ffe08a; }
.mm-dica { position: absolute; left: 14px; bottom: 12px; right: 14px; color: #4f8fae; font-size: 11.5px; pointer-events: none; }
.mm-card { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); width: min(520px, 90%); box-sizing: border-box; background: rgba(4,22,44,.93);
  border: 1px solid rgba(166,245,201,.4); border-radius: 14px; padding: 12px 16px; color: #eafcff; font-size: 14px; line-height: 1.45; display: none; z-index: 2; }
.mm-card.on { display: block; }
.mm-card small { display: block; margin-top: 4px; font-size: 12.5px; }
.mm-card .rot { font-size: 10.5px; letter-spacing: .12em; color: #7fc4a0; }
.mm-card b { color: #a6f5c9; }
.mm-card .acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mm-card button { border: 1px solid rgba(166,245,201,.5); background: rgba(166,245,201,.1); color: #d9ffe9; border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
@media (max-width: 700px) { .mm { height: calc(100vh - 200px); min-height: 360px; } .mm-barra { left: 8px; right: 8px; justify-content: center; flex-wrap: wrap; } .mm-dica { display: none; } }

/* ---------- Anotações: setores da loja (08/10/2026) ---------- */
.cad-setores-notas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: .2rem 0 1rem; }
.cad-setores-rot { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca, #5b6472); margin-right: 4px; }
.cad-setor-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: rgba(3,40,89,.05);
  border: 1px solid rgba(3,40,89,.1); color: #032859; font-size: 13px; text-decoration: none; }
.cad-setor-chip .cad-ico { width: 14px; height: 14px; }
.cad-setor-chip:hover { border-color: #0a5cb3; }
.cad-setor-chip.ativo { background: #032859; border-color: #032859; color: #fff; }
.cad-setor-sobre { margin: -.4rem 0 1rem; font-size: 13.5px; color: var(--tinta-fraca, #5b6472); }
.cad-setor-sobre strong { color: #032859; }
.cad-voltar .cad-setor-chip { font-size: 12px; padding: 3px 9px; vertical-align: middle; }
.cad-nota-setor { width: 100%; margin: .25rem 0 .2rem; }

/* ---------- Anotações: modelos, quem leu, itens que viram tarefa, lente (08/10/2026) ---------- */
.cad-modelos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 .6rem; }
.cad-modelos form { margin: 0; }
.cad-modelo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 10px; border: 1px dashed rgba(3,40,89,.25);
  background: #fff; color: #032859; font: inherit; font-size: 13px; cursor: pointer; }
.cad-modelo .cad-ico { width: 14px; height: 14px; }
.cad-modelo:hover { border-style: solid; border-color: #0a5cb3; }
.cad-ficha-ler { background: #fff4d6 !important; color: #8a5a00 !important; }
.cad-leitura { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: #fff; border: 1px solid rgba(3,40,89,.1); border-radius: 14px; padding: .7rem 1rem; margin: 0 0 .8rem; }
.cad-leitura-pessoas { display: flex; flex-wrap: wrap; gap: 6px; }
.cad-leitura-p { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #8a93a1; padding: 2px 8px 2px 2px; border-radius: 99px; background: rgba(3,40,89,.04); opacity: .7; }
.cad-leitura-p.ok { color: #0b6b4f; background: #e6f6ef; opacity: 1; }
.cad-leitura-txt { margin: 0; font-size: 13px; color: var(--tinta-fraca, #5b6472); flex: 1; }
.cad-leitura form { margin: 0; }
.cad-leitura-eu { margin: 0; font-size: 13px; color: #0b6b4f; display: flex; align-items: center; gap: 5px; }
.cad-faixa-acao { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: #eef5ff; border: 1px solid rgba(10,92,179,.2); border-radius: 14px; padding: .6rem 1rem; margin: 0 0 .8rem; }
.cad-faixa-acao span { flex: 1; font-size: 13.5px; color: #032859; }
.cad-faixa-acao span .cad-ico { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.cad-detector ul { list-style: none; margin: .3rem 0 .4rem; padding: 0; }
.cad-detector li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(3,40,89,.07); font-size: 13px; }
.cad-detector li span { flex: 1; }
.cad-detector li form { margin: 0; }
.cad-lente-botao { display: inline-flex; align-items: center; gap: 5px; }
.cad-lente-botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cad-lente-botao.on { background: #032859 !important; color: #fff !important; }
.cad-blocos.cad-lente > * { opacity: .16; filter: blur(.4px); transition: opacity .25s, filter .25s; }
.cad-blocos.cad-lente > .cad-focado { opacity: 1; filter: none; }

/* ---------- Anotações: lista no jeito do app de Notas (08/10/2026) ---------- */
.cad-notas-vistas { display: inline-flex; gap: 2px; background: rgba(3,40,89,.06); border-radius: 10px; padding: 3px; margin: 0 0 .6rem; }
.cad-notas-vistas button { border: 0; background: none; border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 13px; color: var(--tinta-fraca, #5b6472); cursor: pointer; }
.cad-notas-vistas button.on { background: #fff; color: #032859; font-weight: 600; box-shadow: 0 1px 3px rgba(1,12,30,.14); }
.cad-notas-grupo { margin: 0 0 1.1rem; }
.cad-notas-grupo h2 { font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--tinta-fraca, #5b6472); margin: 0 0 .4rem .2rem; }
.cad-notas-lista:not(.mural) .cad-notas-itens { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(1,12,30,.06), 0 0 0 1px rgba(3,40,89,.06); }
.cad-notas-lista:not(.mural) .cad-cartao-nota { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titulo quando" "texto texto" "topo topo";
  gap: 2px 12px; margin: 0; border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid rgba(3,40,89,.07); padding: .75rem 1rem; background: #fff; min-height: 0; }
.cad-notas-lista:not(.mural) .cad-cartao-nota:last-child { border-bottom: 0; }
.cad-notas-lista:not(.mural) .cad-cartao-nota:hover { background: #f5f9ff; }
.cad-notas-lista:not(.mural) .cad-cartao-titulo { grid-area: titulo; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad-notas-lista:not(.mural) .cad-cartao-quando { grid-area: quando; font-size: 12px; align-self: center; }
.cad-notas-lista:not(.mural) .cad-cartao-texto { grid-area: texto; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; display: block; }
.cad-notas-lista:not(.mural) .cad-cartao-topo { grid-area: topo; margin: 4px 0 0; }
.cad-notas-lista:not(.mural) .cad-cartao-topo:empty { display: none; }
.cad-notas-lista:not(.mural) .cad-cartao-mencoes { display: none; }
.cad-notas-lista.mural .cad-notas-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.cad-ficha-setor { background: rgba(3,40,89,.07) !important; color: #032859 !important; }
.cad-ritmo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tinta-fraca, #5b6472); margin: 0 0 .8rem; }
.cad-ritmo-pontos { display: inline-flex; gap: 4px; }
.cad-ritmo-pontos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(3,40,89,.12); }
.cad-ritmo-pontos i.on { background: #0391b2; }
.cad-ritmo-pontos i.hoje { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(3,145,178,.5); }
.cad-ideia-volta { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, #fff8e6, #fffdf6); border: 1px solid #f2dfa8; border-radius: 16px; padding: .8rem 1rem; margin: 0 0 1rem; }
.cad-ideia-ico .cad-ico { width: 20px; height: 20px; color: #b07d00; }
.cad-ideia-volta small { color: #8a6a14; font-size: 11.5px; letter-spacing: .04em; }
.cad-ideia-volta p { margin: .15rem 0; font-size: 15px; color: #3d2e05; font-weight: 600; }
.cad-ideia-volta p.cad-ideia-mais { font-weight: 400; font-size: 13px; color: #6b5a2e; }
.cad-ideia-acoes { display: flex; gap: 8px; margin-top: .4rem; }

/* ---------- Mapa de ideias: notas como estrelas, HUD do Jarvis (08/10/2026) ---------- */
@keyframes surge{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.grafo{position:fixed;inset:0;z-index:300;background:radial-gradient(circle at 50% 50%,#06264a 0%,#020c1c 60%,#01060f 100%);display:block;cursor:grab}
.grafo.on{display:block;animation:surge .3s ease}
.grafo.arrastando{cursor:grabbing}
.grafo canvas{position:absolute;inset:0;width:100%;height:100%}
.grafo-hud{position:absolute;left:24px;top:20px;color:#9fd8ee;font-size:12px;letter-spacing:.14em;pointer-events:none;text-shadow:0 0 10px rgba(94,198,224,.6)}
.grafo-hud b{display:block;color:#e6fbff;font-size:20px;letter-spacing:.06em;margin-bottom:4px}
.grafo-hud span{display:block;margin-top:2px;color:#5ea9c9}
.grafo-info{position:absolute;right:24px;top:20px;width:280px;color:#dff6ff;font-size:13px;background:rgba(6,38,74,.55);border:1px solid rgba(94,198,224,.35);border-radius:14px;padding:12px 14px;backdrop-filter:blur(6px);box-shadow:0 0 30px rgba(94,198,224,.15) inset;display:none}
.grafo-info.on{display:block}
.grafo-info b{display:block;font-size:15px;color:#fff;margin-bottom:4px}
.grafo-info small{color:#7fc4e0;letter-spacing:.08em}
.grafo-info ul{margin:8px 0 0;padding-left:16px;color:#bfe6f5}
.grafo-sair{position:absolute;right:24px;bottom:22px;border:1px solid rgba(94,198,224,.5);background:rgba(6,38,74,.6);color:#dff6ff;border-radius:99px;padding:8px 16px;font-size:13px;cursor:pointer}
.grafo-legenda{position:absolute;left:24px;bottom:22px;display:flex;gap:16px;color:#7fc4e0;font-size:12px}
.grafo-legenda i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}

.grafo canvas#grafoCv{transition:filter .45s ease}
.grafo.mmAberto canvas#grafoCv{filter:blur(3px) brightness(.45)}
.grafo.mmAberto .grafo-hud,.grafo.mmAberto .grafo-legenda,.grafo.mmAberto .grafo-busca,.grafo.mmAberto .grafo-pensar,.grafo.mmAberto .grafo-dica,
.grafo.mmAberto .grafo-sair,.grafo.mmAberto .jan,.grafo.mmAberto .grafo-card,.grafo.mmAberto .grafo-info,.grafo.mmAberto .pens{opacity:0;pointer-events:none;transition:opacity .3s}
.grafo-mm{position:absolute;inset:0;z-index:60;display:none}
.grafo-mm.on{display:block}
.grafo-mm.entra{animation:mmEntra .5s cubic-bezier(.2,.8,.2,1)}
.grafo-mm.sai{animation:mmSai .35s ease-in forwards}
@keyframes mmEntra{from{transform:scale(.04);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes mmSai{to{transform:scale(.04);opacity:0}}
.grafo-mm .mm{position:absolute;inset:0;height:auto;min-height:0;border-radius:0;box-shadow:none;background:radial-gradient(circle at 50% 50%,rgba(7,41,79,.5) 0%,rgba(2,12,28,.72) 70%)}
.grafo-mm .mm [data-mm="cheia"]{display:none}
.grafo-mm .mm-dica{left:210px}
.grafo-mm-topo{position:absolute;left:20px;top:16px;z-index:5;display:flex;align-items:center;gap:14px}
.grafo-mm-topo button{display:flex;align-items:center;gap:7px;border:1px solid rgba(94,198,224,.45);background:rgba(4,22,44,.8);color:#dff6ff;border-radius:99px;padding:8px 15px;font-size:13px;cursor:pointer;backdrop-filter:blur(8px)}
.grafo-mm-topo button:hover{border-color:#9ff0ff}
.grafo-mm-topo small{color:#7fc4e0;font-size:11px;letter-spacing:.14em}
/* ---------- Mapa que pensa junto: janelas, faísca, soltas, sorteio */
.grafo .jan-corpo::-webkit-scrollbar,.grafo .jan textarea::-webkit-scrollbar{width:5px}
.grafo .jan-corpo::-webkit-scrollbar-thumb,.grafo .jan textarea::-webkit-scrollbar-thumb{background:rgba(94,198,224,.25);border-radius:9px}
.grafo .jan-corpo::-webkit-scrollbar-track,.grafo .jan textarea::-webkit-scrollbar-track{background:transparent}
.grafo .jan-pens{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(166,245,201,.07);border:1px solid rgba(166,245,201,.25);color:#cfeedd;font-size:12.5px}
.grafo .jan-pens b{color:#a6f5c9;font-size:15px}
.grafo .jan-pens span{flex:1}
.grafo .jan-pens button{border:1px solid rgba(166,245,201,.55);background:rgba(166,245,201,.12);color:#d9ffe9;border-radius:99px;padding:5px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
.grafo .jan-link{border:0;background:none;color:#6fb6d4;font-size:12px;padding:8px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.grafo-legenda{top:96px;bottom:auto}
.grafo .jan{position:absolute;width:300px;background:rgba(4,22,44,.88);border:1px solid rgba(94,198,224,.4);border-radius:14px;color:#e6f7ff;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(94,198,224,.12);backdrop-filter:blur(10px);font-size:13px;display:flex;flex-direction:column;max-height:72vh;animation:janIn .22s ease}
@keyframes janIn{from{opacity:0;transform:scale(.92)}}
.grafo .jan.frente{border-color:rgba(159,240,255,.85);box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 50px rgba(94,198,224,.25)}
.grafo .jan-cab{display:flex;align-items:center;gap:8px;padding:9px 8px 4px 14px;cursor:move;color:#7fc4e0;font-size:10.5px;letter-spacing:.12em;user-select:none}
.grafo .jan-cab i{width:8px;height:8px;border-radius:50%;flex:none}
.grafo .jan-cab button{margin-left:auto;background:none;border:0;color:#9fd8ee;font-size:19px;cursor:pointer;line-height:1;padding:2px 7px;border-radius:7px}
.grafo .jan-cab button:hover{background:rgba(94,198,224,.15)}
.grafo .jan-corpo{padding:0 14px 12px;overflow:auto}
.grafo .jan-tit{width:100%;box-sizing:border-box;background:none;border:0;color:#fff;font:650 16.5px/1.3 -apple-system,Segoe UI,sans-serif;outline:none;padding:2px 0 8px;resize:none;overflow:hidden;display:block}
.grafo .jan textarea.jan-txt{width:100%;box-sizing:border-box;min-height:70px;max-height:240px;resize:none;overflow-y:auto;background:rgba(94,198,224,.06);border:1px solid rgba(94,198,224,.18);border-radius:10px;color:#e6f7ff;font:13px/1.55 -apple-system,Segoe UI,sans-serif;padding:9px 10px;outline:none}
.grafo .jan textarea:focus{border-color:rgba(159,240,255,.6);background:rgba(94,198,224,.09)}
.grafo .jan textarea::placeholder{color:#5e8fa8}
.grafo .jan-campos{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0 0 10px;font-size:12px}
.grafo .jan-campos dt{color:#7fc4e0}.jan-campos dd{margin:0}
.grafo .jan-campos input{background:none;border:0;border-bottom:1px solid rgba(94,198,224,.15);color:#e6f7ff;font:inherit;outline:none;width:100%}
.grafo .jan-sec{margin-top:12px;font-size:10px;letter-spacing:.14em;color:#5ea9c9}
.grafo .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.grafo .chip{border:1px solid rgba(94,198,224,.35);background:rgba(94,198,224,.08);color:#dff6ff;border-radius:99px;padding:3px 10px;font-size:12px;cursor:pointer}
.grafo .chip.cli{border-color:rgba(255,215,106,.5);color:#ffe6a3}.chip.ass{border-color:rgba(201,166,255,.5);color:#e2d2ff}
.grafo .chip.nova{animation:chipNova 1.6s ease}
@keyframes chipNova{0%{box-shadow:0 0 0 0 rgba(159,240,255,.9);background:rgba(159,240,255,.45)}100%{box-shadow:0 0 0 12px rgba(159,240,255,0)}}
.grafo .sug{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12.5px;color:#dff6ff}
.grafo .sug span{flex:1;cursor:pointer}.sug small{display:block;color:#6fa9c4;font-size:11px}
.grafo .sug button,.grafo .jan-acao{border:1px solid rgba(94,198,224,.5);background:rgba(94,198,224,.12);color:#dff6ff;border-radius:99px;padding:4px 11px;font-size:12px;cursor:pointer;white-space:nowrap}
.grafo .sug button:hover,.grafo .jan-acao:hover{background:rgba(94,198,224,.28)}
.grafo .jan-dica{color:#6fa9c4;font-size:12px}
.grafo .jan-pe{display:flex;gap:8px;margin-top:12px}
.grafo .jan-info{color:#bfe6f5;font-size:12.5px;margin:-2px 0 8px}
.grafo .jan-lista button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(94,198,224,.12);color:#dff6ff;padding:8px 0;font-size:13px;cursor:pointer}
.grafo .jan-lista button:hover{color:#9ff0ff}
.grafo-pensar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:4px;background:rgba(4,22,44,.75);border:1px solid rgba(94,198,224,.3);border-radius:99px;padding:5px;backdrop-filter:blur(8px)}
.grafo-pensar button{border:0;background:none;color:#cdefff;border-radius:99px;padding:7px 13px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.grafo-pensar button:hover,.grafo-pensar button.on{background:rgba(94,198,224,.2);color:#fff}
.grafo-pensar button.ouro{color:#ffe08a}
.grafo-busca{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:min(340px,40vw);background:rgba(4,22,44,.7);border:1px solid rgba(94,198,224,.3);border-radius:99px;color:#e6f7ff;padding:8px 16px;font-size:13px;outline:none}
.grafo-busca::placeholder{color:#5e8fa8}
.grafo-card{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);width:min(480px,90vw);box-sizing:border-box;background:rgba(4,22,44,.9);border:1px solid rgba(255,215,106,.45);border-radius:14px;padding:12px 16px;color:#fff3cf;display:none;box-shadow:0 0 40px rgba(255,215,106,.12)}
.grafo-card.on{display:block;animation:janIn .2s ease}
.grafo-card small{color:#d9b85a;letter-spacing:.12em;font-size:10.5px}
.grafo-card p{margin:6px 0 10px;font-size:15px;line-height:1.45;color:#fff}
.grafo-card p b{color:#ffe08a;font-weight:650}
.grafo-card .acoes{display:flex;gap:8px;flex-wrap:wrap}
.grafo-card .acoes button{border:1px solid rgba(255,215,106,.5);background:rgba(255,215,106,.1);color:#ffeab0;border-radius:99px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.grafo-card .acoes button:hover{background:rgba(255,215,106,.25)}
.grafo-pensar .sep{width:1px;background:rgba(94,198,224,.25);margin:6px 4px}
.grafo-card p small{display:block;color:#d9b85a;font-size:12px;margin-top:4px}
.grafo-card .trilha{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:6px 0 4px;font-size:13.5px}
.grafo-card .trilha b{color:#ffe08a}.grafo-card .trilha i{color:#d9b85a;font-style:normal}
</head>
<body>
.grafo .grafo-sair{text-decoration:none}
.grafo-pensar button{font-family:inherit}
.grafo .jan-ver{color:#cfe9f5;font-size:13px;line-height:1.5;max-height:240px;overflow:auto;margin:2px 0 8px}
.grafo .jan-ver h2,.grafo .jan-ver h3,.grafo .jan-ver h4{color:#fff;font-size:14px;margin:.6em 0 .2em}
.grafo .jan-ver p{margin:.2em 0}
.grafo .jan-ver ul{margin:.2em 0;padding-left:18px}
.grafo .jan-ver a{color:#9ff0ff}
.grafo .jan-ver .cad-ico{width:12px;height:12px}
.grafo .jan-mais{display:flex;gap:6px;margin-top:8px}
.grafo .jan-mais input{flex:1;min-width:0;background:rgba(94,198,224,.06);border:1px solid rgba(94,198,224,.25);border-radius:99px;color:#fff;font:inherit;font-size:13px;padding:6px 12px;outline:none}
.grafo .jan-mais input:focus{border-color:rgba(159,240,255,.7)}
@media (max-width:760px){.grafo-pensar{left:8px;right:8px;transform:none;overflow-x:auto}.grafo-dica,.grafo-legenda{display:none}.grafo-busca{width:60vw}.jan{width:calc(100vw - 24px)}}
.grafo-legenda i.grafo-cor-nota{background:#9ff0ff;box-shadow:0 0 8px #9ff0ff}
.grafo-legenda i.grafo-cor-cliente{background:#ffd76a;box-shadow:0 0 8px #ffd76a}
.grafo-legenda i.grafo-cor-setor{background:#7ee2a8;box-shadow:0 0 8px #7ee2a8}
.grafo-legenda i.grafo-cor-assunto{background:#c9a6ff;box-shadow:0 0 8px #c9a6ff}
.grafo-nova{position:absolute;transform:translate(-50%,-50%);z-index:900;text-align:center}
.grafo-nova[hidden]{display:none}
.grafo-nova input{width:300px;background:rgba(4,22,44,.94);border:1.5px solid #9ff0ff;border-radius:99px;color:#fff;font:15px -apple-system,Segoe UI,sans-serif;padding:10px 18px;outline:none;box-shadow:0 0 30px rgba(159,240,255,.25)}
.grafo-nova small{display:block;margin-top:7px;color:#9fd8ee;font-size:12px}
.grafo .jan-lista a,.grafo .jan-pe a{text-decoration:none}
.cad-notas-barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.cad-notas-barra .cad-notas-vistas { margin: 0; }
.cad-mapa-ideias { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; text-decoration: none; font-size: 13px; font-weight: 600;
  color: #dff6ff; background: radial-gradient(circle at 30% 30%, #0b4a86, #031a36); box-shadow: 0 0 0 1px rgba(94,198,224,.35), 0 6px 18px -8px rgba(3,40,89,.7); }
.cad-mapa-ideias svg { width: 16px; height: 16px; fill: none; stroke: #9ff0ff; stroke-width: 1.6; }
.cad-mapa-ideias:hover { box-shadow: 0 0 0 1px #9ff0ff, 0 6px 22px -6px rgba(94,198,224,.6); }
.grafo .grafo-dica{position:absolute;right:24px;bottom:66px;color:#4f8fae;font-size:11.5px;text-align:right;pointer-events:none}
@media (max-width:760px){.grafo .grafo-dica{display:none}}
.grafo .jan .jan-corpo{flex:0 0 auto;max-height:calc(72vh - 44px)}
.grafo .grafo-mm-topo small{max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Anotações: esvaziar a cabeça, ditar, organizar com o Jarvis (08/10/2026) ---------- */
.cad-cabeca-papel { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 22px; padding: 1.4rem 1.6rem; box-shadow: 0 1px 2px rgba(1,12,30,.06), 0 18px 40px -24px rgba(3,40,89,.35); }
.cad-cabeca-topo { display: flex; gap: 1rem; align-items: center; }
.cad-cabeca-topo h1 { margin: 0; font-size: 1.5rem; color: #032859; }
.cad-cabeca-topo p { margin: .2rem 0 0; color: var(--tinta-fraca, #5b6472); font-size: 14px; }
.cad-cabeca-anel { position: relative; width: 64px; height: 64px; flex: none; }
.cad-cabeca-anel svg { width: 64px; height: 64px; transform: rotate(-90deg); fill: none; stroke-width: 3; }
.cad-cabeca-anel circle { stroke: rgba(3,145,178,.15); }
.cad-cabeca-anel circle.cad-cabeca-falta { stroke: #0391b2; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear; }
.cad-cabeca-anel b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: #032859; }
.cad-cabeca-pergunta { margin: 1.1rem 0 .5rem; font-size: 1.15rem; color: #0a5cb3; font-weight: 600; min-height: 1.5em; }
.cad-cabeca-pergunta.nova { animation: cadPergunta .6s ease; }
@keyframes cadPergunta { from { opacity: 0; transform: translateY(6px); } }
.cad-cabeca textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(3,40,89,.12); border-radius: 14px; padding: 1rem; font: 17px/1.7 inherit; resize: vertical; min-height: 280px; outline: none; background: #fbfcfe; }
.cad-cabeca textarea:focus { border-color: #0391b2; background: #fff; }
.cad-cabeca-pe { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.cad-cabeca-pe span { flex: 1; color: var(--tinta-fraca, #5b6472); font-size: 13.5px; }
.cad-extra-botao { display: inline-flex; align-items: center; gap: 5px; }
.cad-extra-botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cad-extra-botao.on { background: #c43d2b !important; color: #fff !important; }
.cad-org { position: fixed; inset: 0; z-index: 400; background: rgba(2,12,28,.55); display: grid; place-items: center; padding: 16px; }
.cad-org-caixa { background: #fff; border-radius: 20px; width: min(980px, 100%); max-height: 90vh; overflow: auto; padding: 1.2rem 1.4rem; box-shadow: 0 30px 80px -20px rgba(1,12,30,.6); }
.cad-org-caixa h2 { margin: 0 0 .8rem; color: #032859; font-size: 1.25rem; }
.cad-org-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cad-org-lados section { border: 1px solid rgba(3,40,89,.1); border-radius: 14px; padding: .8rem 1rem; max-height: 55vh; overflow: auto; }
.cad-org-lados h3 { margin: 0 0 .4rem; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca, #5b6472); }
.cad-org-acoes { display: flex; gap: .6rem; margin-top: .8rem; }
@media (max-width: 760px) { .cad-org-lados { grid-template-columns: 1fr; } }

/* ---------- Anotações: notas ligadas (08/10/2026) ---------- */
.cad-ligadas ul { list-style: none; margin: .2rem 0 .5rem; padding: 0; }
.cad-ligadas li { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(3,40,89,.07); font-size: 13.5px; }
.cad-ligadas li a { flex: 1; color: #032859; }
.cad-ligadas li form { margin: 0; }
.cad-ligada-x { border: 0; background: none; color: #8a93a1; font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.cad-ligada-x:hover { background: rgba(196,61,43,.1); color: #c43d2b; }
.cad-ligar-form { display: flex; gap: 6px; margin-top: .3rem; }
.cad-ligar-form input { flex: 1; min-width: 0; }

/* ---------- Anotações: próximo passo e "virou venda" (08/10/2026) ---------- */
.cad-faixa-proximo { background: #fff8e6; border-color: #f2dfa8; }
.cad-faixa-proximo span { color: #5a4300; }
.cad-ficha-venda { background: #e6f6ef !important; color: #0b6b4f !important; font-weight: 600; }
.cad-virou-venda { display: flex; align-items: center; gap: 6px; background: #e6f6ef; border: 1px solid #b7e4cf; color: #0b5a43; border-radius: 14px; padding: .6rem 1rem; margin: 0 0 .8rem; font-size: 14px; }
.cad-virou-venda .cad-ico { width: 16px; height: 16px; }

/* ---------- Anotações: testes, placar, pergunte, resumo, fotos, decisões (08/10/2026) ---------- */
.cad-pensar-junto { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 .8rem; }
.cad-perguntar { flex: 1 1 380px; display: flex; gap: 6px; background: #fff; border: 1px solid rgba(3,40,89,.12); border-radius: 99px; padding: 4px 4px 4px 14px; }
.cad-perguntar input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 14px; }
.cad-resposta { background: #fff; border: 1px solid rgba(10,92,179,.2); border-radius: 16px; padding: .8rem 1rem; margin: 0 0 1rem; box-shadow: 0 10px 30px -22px rgba(3,40,89,.5); }
.cad-resposta-cab { display: flex; align-items: center; gap: 8px; margin-bottom: .3rem; color: #032859; }
.cad-resposta-cab b { flex: 1; }
.cad-resposta-cab button { border: 0; background: none; font-size: 20px; color: #8a93a1; cursor: pointer; }
.cad-resposta p { margin: .3rem 0; font-size: 14.5px; }
.cad-resposta ul { margin: .2rem 0 .4rem; padding-left: 20px; font-size: 14px; }
.cad-resposta-txt { font-size: 14.5px; line-height: 1.55; }
.cad-fonte { display: inline-block; background: #eef5ff; color: #0a5cb3; border-radius: 99px; padding: 0 8px; font-size: 12px; text-decoration: none; margin: 0 2px; }
.cad-testes, .cad-placar { margin: 0 0 1.1rem; }
.cad-testes h2, .cad-placar h2 { font-size: 13px; font-weight: 650; color: var(--tinta-fraca, #5b6472); margin: 0 0 .45rem .2rem; }
.cad-placar h2 small { font-weight: 400; }
.cad-testes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.cad-teste { position: relative; display: block; background: #fff; border-radius: 14px; padding: .7rem .9rem; text-decoration: none; color: #032859; box-shadow: 0 0 0 1px rgba(3,40,89,.08); overflow: hidden; }
.cad-teste small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8a93a1; }
.cad-teste b { display: block; font-size: 14px; margin: .15rem 0; }
.cad-teste span { font-size: 12.5px; color: #5b6472; }
.cad-teste i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: #0391b2; }
.cad-teste.v-funcionou { box-shadow: 0 0 0 1.5px #3fb68b; } .cad-teste.v-funcionou small { color: #0b6b4f; }
.cad-teste.v-piorou small { color: #b34a3a; } .cad-teste.v-igual small { color: #8a6a14; }
.cad-placar ul { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(3,40,89,.07); }
.cad-placar li { display: flex; align-items: center; gap: 8px; padding: .55rem .9rem; border-bottom: 1px solid rgba(3,40,89,.06); font-size: 13.5px; }
.cad-placar li:last-child { border-bottom: 0; }
.cad-placar li b { min-width: 90px; color: #032859; }
.cad-placar li span { color: #5b6472; } .cad-placar li strong { color: #0b6b4f; }
.cad-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 .8rem; }
.cad-fotos figure { position: relative; margin: 0; }
.cad-fotos img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 0 0 1px rgba(3,40,89,.1); }
.cad-fotos figure form { position: absolute; top: 4px; right: 4px; margin: 0; }
.cad-fotos figure button { border: 0; background: rgba(2,12,28,.6); color: #fff; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; line-height: 1; }
.cad-foto-nova { margin: 0; }
.cad-foto-nova label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 112px; height: 112px; border-radius: 12px;
  border: 1.5px dashed rgba(3,40,89,.25); color: #0a5cb3; font-size: 12.5px; cursor: pointer; background: #fff; }
.cad-foto-nova label:hover { border-color: #0a5cb3; }
.cad-foto-nova label.enviando { opacity: .5; pointer-events: none; }
.cad-foto-nova svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
[data-cad-gravar-audio].gravando { background: #c43d2b !important; color: #fff !important; border-color: #c43d2b !important; }
.cad-decisoes h1 { color: #032859; margin: 0 0 .2rem; }
.cad-decisoes-lista { list-style: none; padding: 0; margin: 1rem 0 0; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(3,40,89,.07); }
.cad-decisoes-lista li { padding: .75rem 1rem; border-bottom: 1px solid rgba(3,40,89,.06); }
.cad-decisoes-lista li:last-child { border-bottom: 0; }
.cad-decisoes-lista p { margin: 0 0 .15rem; font-size: 15px; color: #032859; font-weight: 600; }
.cad-decisoes-lista small { color: #8a93a1; }
.mm-card .mm-sel { display: block; width: 100%; margin: .5rem 0 0; background: rgba(4,22,44,.9); color: #eafcff; border: 1px solid rgba(94,198,224,.4); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; }

/* ===================== Anotações · vidro (Liquid Glass) + toque futurista (08/10/2026) =====================
   Vidro: fundo translúcido + desfoque + saturação, borda clara, brilho fino no topo (luz especular).
   Futurista: ciano do mapa nos estados ativos (anel + brilho). Quem pede menos transparência
   (prefers-reduced-transparency) recebe superfícies sólidas. */
.cad-vidro {
  --vd-fundo: rgba(255,255,255,.58);
  --vd-fundo-forte: rgba(255,255,255,.8);
  --vd-borda: rgba(255,255,255,.75);
  --vd-sombra: 0 10px 30px -14px rgba(3,40,89,.28), 0 1px 2px rgba(3,40,89,.06);
  --vd-brilho: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(3,40,89,.05);
  --vd-ciano: #0391b2;
  --vd-ciano-luz: 0 0 0 1px rgba(3,145,178,.35), 0 0 22px -4px rgba(3,145,178,.45);
  --vd-blur: blur(22px) saturate(175%);
}
.cad-vidro .vd-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cad-vidro .vd-ico .vd-cheio { fill: currentColor; stroke: none; }

/* barra de cima: uma cápsula de vidro só */
.vd-barra { position: sticky; top: calc(var(--topo-alt, 64px) + 8px); z-index: 25; display: flex; align-items: center; gap: 8px; padding: 7px;
  margin: 0 0 .7rem; border-radius: 999px; background: var(--vd-fundo); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra);
  -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.vd-busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px; border-radius: 999px; color: #5b6472;
  background: rgba(255,255,255,.55); transition: box-shadow .2s, background .2s; margin: 0; }
.vd-busca:focus-within { background: rgba(255,255,255,.9); box-shadow: var(--vd-ciano-luz); color: var(--vd-ciano); }
.vd-busca input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: #032859; box-shadow: none; padding: 0; }
.vd-busca.pensando { box-shadow: var(--vd-ciano-luz); animation: vdPulso 1.4s ease-in-out infinite; }
@keyframes vdPulso { 50% { box-shadow: 0 0 0 1px rgba(3,145,178,.6), 0 0 30px -2px rgba(3,145,178,.6); } }
.vd-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; list-style: none;
  font: inherit; font-size: 14px; font-weight: 600; color: #032859; background: rgba(255,255,255,.6); text-decoration: none; white-space: nowrap;
  box-shadow: var(--vd-brilho); transition: transform .15s, box-shadow .2s, background .2s; }
.vd-btn::-webkit-details-marker { display: none; }
.vd-btn:hover { background: rgba(255,255,255,.95); }
.vd-btn:active { transform: scale(.97); }
.vd-primario { color: #fff; background: linear-gradient(180deg, #0b62bd, #032859); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -8px rgba(3,40,89,.8); }
.vd-primario:hover { background: linear-gradient(180deg, #0f6fd3, #043469); }
.vd-redondo { width: 42px; padding: 0; justify-content: center; }
.vd-mapa { color: #dff6ff; background: radial-gradient(circle at 30% 25%, #0b4a86, #031a36); box-shadow: inset 0 1px 0 rgba(159,240,255,.35), 0 0 0 1px rgba(94,198,224,.35), 0 0 18px -6px rgba(94,198,224,.7); }
.vd-mapa:hover { background: radial-gradient(circle at 30% 25%, #0d5aa2, #03203f); box-shadow: inset 0 1px 0 rgba(159,240,255,.45), 0 0 0 1px #9ff0ff, 0 0 26px -4px rgba(94,198,224,.8); }
.vd-mapa .vd-ico { stroke: #9ff0ff; }

/* menus suspensos */
.vd-menu { position: relative; }
.vd-menu > summary { list-style: none; }
.vd-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 240px; padding: 6px; border-radius: 18px;
  background: var(--vd-fundo-forte); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), 0 24px 50px -20px rgba(3,40,89,.45);
  -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); animation: vdAbre .16s ease; }
.vd-menu-dir .vd-pop { left: auto; right: 0; }
@keyframes vdAbre { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.vd-pop form { margin: 0; }
.vd-pop a, .vd-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: #032859; text-decoration: none; text-align: left; cursor: pointer; box-shadow: none; height: auto; }
.vd-pop a:hover, .vd-pop button:hover, .vd-pop a.on { background: rgba(3,145,178,.1); color: #025e74; }
.vd-pop .cad-ico { width: 16px; height: 16px; }
.vd-pop-sec { padding: 10px 12px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a93a1; }
.vd-pop [data-cad-gravar-audio].gravando { background: #c43d2b; color: #fff; }

/* linha fina de filtros */
.vd-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 .9rem; }
.vd-segmento { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.45); border: 1px solid var(--vd-borda);
  box-shadow: var(--vd-brilho); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.vd-segmento a, .vd-segmento button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; color: #5b6472; text-decoration: none; cursor: pointer; }
.vd-segmento a.on, .vd-segmento button.on { background: #fff; color: #032859; font-weight: 600; box-shadow: 0 1px 3px rgba(1,12,30,.12), 0 0 0 1px rgba(3,145,178,.18); }
.vd-segmento-mini a, .vd-segmento-mini button { padding: 5px 11px; font-size: 12.5px; }
.cad-vidro .cad-notas-vistas { margin: 0; }
.vd-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--vd-borda);
  background: rgba(255,255,255,.45); color: #032859; font: inherit; font-size: 13px; cursor: pointer; box-shadow: var(--vd-brilho); list-style: none; }
.vd-chip::-webkit-details-marker { display: none; }
.vd-chip.on { background: #032859; color: #fff; border-color: #032859; }
.vd-chip .vd-ico { width: 14px; height: 14px; }
.vd-pessoa { margin: 0; } .vd-pessoa select { appearance: none; padding-right: 14px; }
.vd-espaco { flex: 1; }
.cad-vidro .cad-ritmo { margin: 0; font-size: 12px; gap: 8px; }
.vd-aviso { margin: -.3rem 0 .8rem; font-size: 13px; color: #5b6472; }

/* corpo: notas na frente; "para pensar" ao lado */
.vd-corpo { display: block; }
.vd-lateral { display: grid; gap: .9rem; margin-top: 1rem; }
@media (min-width: 1180px) {
  .vd-corpo.com-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.1rem; align-items: start; }
  .vd-lateral { position: sticky; top: calc(var(--topo-alt, 64px) + 76px); margin-top: 1.6rem; }
}
.vd-lateral .cad-ideia-volta { margin: 0; padding: .7rem .85rem; border-radius: 18px; }
.vd-lateral .cad-ideia-volta p { font-size: 14px; }
.vd-lateral .cad-ideia-mais { display: none; }
.vd-lateral .cad-testes, .vd-lateral .cad-placar { margin: 0; }
.vd-lateral .cad-testes-lista { grid-template-columns: 1fr; }

/* superfícies de vidro */
.cad-vidro .cad-notas-grupo h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6b7a8c; }
.cad-vidro .cad-notas-lista:not(.mural) .cad-notas-itens,
.cad-vidro .cad-placar ul, .cad-vidro .cad-teste, .cad-vidro .cad-resposta,
.cad-vidro .cad-editor-papel, .cad-vidro .cad-lado-cartao, .cad-vidro .cad-leitura, .cad-vidro .cad-faixa-acao, .cad-vidro .cad-decisoes-lista {
  background: var(--vd-fundo); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra);
  -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.cad-vidro .cad-notas-lista:not(.mural) .cad-notas-itens { border-radius: 20px; }
.cad-vidro .cad-notas-lista:not(.mural) .cad-cartao-nota { background: transparent; border-bottom-color: rgba(3,40,89,.06); transition: background .15s, box-shadow .15s; }
.cad-vidro .cad-notas-lista:not(.mural) .cad-cartao-nota:hover { background: rgba(255,255,255,.7); box-shadow: inset 3px 0 0 var(--vd-ciano); }
.cad-vidro .cad-notas-lista.mural .cad-cartao-nota { background: var(--vd-fundo); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra);
  -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); border-radius: 20px; transition: transform .18s, box-shadow .2s; }
.cad-vidro .cad-notas-lista.mural .cad-cartao-nota:hover { transform: translateY(-2px); box-shadow: var(--vd-brilho), var(--vd-ciano-luz); }
.cad-vidro .cad-editor-papel { border-radius: 24px; }
.cad-vidro .cad-lado-cartao { border-radius: 20px; }
.cad-vidro .cad-ficha { background: rgba(3,40,89,.06); border-radius: 999px; }
.cad-vidro .cad-resposta { border-radius: 20px; }
.cad-vidro .cad-abas { background: rgba(255,255,255,.5); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }

@media (max-width: 760px) {
  .vd-barra { flex-wrap: wrap; border-radius: 24px; top: calc(var(--topo-alt, 56px) + 4px); }
  .vd-busca { flex-basis: 100%; order: -1; }
  .vd-mapa span { display: none; } .vd-mapa { width: 42px; padding: 0; justify-content: center; }
  .vd-filtros .vd-espaco, .vd-filtros .cad-ritmo { display: none; }
  .vd-pop { min-width: 220px; }
}
@media (prefers-reduced-transparency: reduce) {
  .cad-vidro { --vd-fundo: #fff; --vd-fundo-forte: #fff; --vd-blur: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cad-vidro { --vd-fundo: rgba(255,255,255,.95); --vd-fundo-forte: #fff; }
}

/* mapa mental: quadro de aviso menor, com × */
.mm-card { width: min(380px, 88%); padding: 11px 38px 11px 14px; font-size: 13px; line-height: 1.45; border-radius: 16px;
  background: rgba(4,22,44,.82); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(159,240,255,.18), 0 18px 40px -18px rgba(0,0,0,.7); }
.mm-card small { font-size: 12px; }
.mm-card .rot { font-size: 10px; }
.mm-card .acoes { margin-top: 8px; }
.mm-card .mm-card-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(159,240,255,.1); color: #cdefff; font-size: 17px; line-height: 1; cursor: pointer; }
.mm-card .mm-card-x:hover { background: rgba(159,240,255,.25); color: #fff; }
.vd-barra { z-index: 60; }
.vd-filtros { position: relative; z-index: 50; }
.vd-corpo { position: relative; z-index: 1; }
.cad-vidro .vd-pop { background: rgba(255,255,255,.94); }
@media (max-width: 760px) { .vd-barra { position: relative; top: auto; } }

/* ===================================================================
   Objetivos e metas (09/10/2026): o destino, as metas do caminho e o
   gráfico "de bolsa". Cockpit escuro (combina com o mapa), resto vidro.
   =================================================================== */
.cobj .s-frente, .cobj .s-ritmo, .cobj .s-chegou { --cobj-cor: #2fd39a; }
.cobj .s-perto { --cobj-cor: #ffcc4d; }
.cobj .s-atras, .cobj .s-acabou { --cobj-cor: #ff8a7a; }
.cobj-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: .4rem 0 1.1rem; flex-wrap: wrap; }
.cobj-cabeca h1 { margin: 0; font-size: 30px; letter-spacing: -.02em; color: #032859; }
.cobj-cabeca p { margin: 4px 0 0; color: #5b6472; }

/* vazio */
.cobj-vazio { display: grid; justify-items: center; gap: 10px; padding: 46px 24px; text-align: center; text-decoration: none; border-radius: 28px; color: #dff6ff;
  background: radial-gradient(120% 120% at 20% 0%, #0b4a86 0%, #031a36 55%, #010c1e 100%); box-shadow: inset 0 1px 0 rgba(159,240,255,.25), 0 30px 60px -30px rgba(1,12,30,.8); }
.cobj-vazio svg { width: min(420px, 90%); height: auto; filter: drop-shadow(0 0 12px rgba(47,211,154,.45)); }
.cobj-vazio b { font-size: 22px; color: #fff; }
.cobj-vazio span { max-width: 520px; color: rgba(223,246,255,.75); line-height: 1.5; }
.cobj-vazio:hover { box-shadow: inset 0 1px 0 rgba(159,240,255,.35), 0 0 0 1px rgba(94,198,224,.4), 0 30px 60px -30px rgba(1,12,30,.8); }

/* cartões */
.cobj-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cobj-cartao { display: grid; gap: 8px; padding: 18px; border-radius: 22px; text-decoration: none; color: #dff6ff; position: relative; overflow: hidden;
  background: radial-gradient(130% 100% at 0% 0%, #0b4a86, #031a36 60%, #020f24); box-shadow: inset 0 1px 0 rgba(159,240,255,.22), 0 18px 40px -22px rgba(1,12,30,.75);
  transition: transform .18s, box-shadow .2s; }
.cobj-cartao:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(159,240,255,.3), 0 0 0 1px rgba(94,198,224,.4), 0 24px 50px -22px rgba(1,12,30,.85); }
.cobj-cartao-topo { display: flex; justify-content: space-between; align-items: center; }
.cobj-cartao-topo small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cobj-cor); font-weight: 700; }
.cobj-cartao-topo b { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.cobj-cartao strong { font-size: 16px; color: #fff; line-height: 1.3; }
.cobj-mini { width: 100%; height: 64px; display: block; overflow: visible; }
.cobj-cartao-pe { font-size: 12.5px; color: rgba(223,246,255,.72); }
.cobj-cartao.mini { padding: 14px; border-radius: 18px; gap: 6px; }
.cobj-cartao.mini strong { font-size: 14px; }
.cobj-cartao.mini .cobj-mini { height: 44px; }
.cobj-painel { display: grid; gap: 10px; margin-bottom: 14px; }
.cobj-painel h2 { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cobj-painel h2 a { color: #6b7a8c; text-decoration: none; }
.cobj-convite { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; text-decoration: none; color: #dff6ff;
  background: linear-gradient(135deg, #0b4a86, #031a36); box-shadow: inset 0 1px 0 rgba(159,240,255,.25); }
.cobj-convite b { color: #fff; }
.cobj-convite span { font-size: 13px; color: rgba(223,246,255,.75); }

/* faixa no topo das Tarefas */
.cobj-faixa { display: flex; align-items: center; gap: 18px; padding: 10px 18px; margin: 0 0 14px; border-radius: 20px; text-decoration: none; color: #dff6ff;
  background: linear-gradient(100deg, #031a36, #0b3f73 60%, #031a36); box-shadow: inset 0 1px 0 rgba(159,240,255,.22), 0 12px 30px -18px rgba(1,12,30,.8); }
.cobj-faixa:hover { box-shadow: inset 0 1px 0 rgba(159,240,255,.3), 0 0 0 1px rgba(94,198,224,.4), 0 12px 30px -18px rgba(1,12,30,.8); }
.cobj-faixa-txt { display: grid; min-width: 0; flex: 1; }
.cobj-faixa-txt small, .cobj-faixa-meta small, .cobj-faixa-num small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cobj-faixa-txt small { color: var(--cobj-cor); font-weight: 700; }
.cobj-faixa-txt b { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cobj-faixa .cobj-mini { width: 160px; height: 34px; flex: none; }
.cobj-faixa-num, .cobj-faixa-meta { display: grid; text-align: right; flex: none; }
.cobj-faixa-num b { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.cobj-faixa-meta { padding-left: 16px; border-left: 1px solid rgba(159,240,255,.15); }
.cobj-faixa-meta b { color: #ffe08a; }

/* novo objetivo */
.cobj-novo { max-width: 720px; margin: .4rem auto 2rem; display: grid; gap: 14px; }
.cobj-novo h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: -.02em; color: #032859; }
.cobj-novo > section { position: relative; display: grid; gap: 8px; padding: 20px 20px 20px 62px; border-radius: 24px; background: var(--vd-fundo);
  border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.cobj-passo { position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: #fff; background: linear-gradient(180deg, #0b62bd, #032859); box-shadow: 0 0 0 4px rgba(3,145,178,.12); }
.cobj-novo label { font-weight: 600; color: #032859; font-size: 14px; }
.cobj-novo label small { font-weight: 400; color: #8a93a1; }
.cobj-novo input, .cobj-novo select, .cobj-novo textarea { width: 100%; border-radius: 14px; border: 1px solid rgba(3,40,89,.12); background: rgba(255,255,255,.8);
  padding: 11px 14px; font: inherit; font-size: 15px; color: #032859; box-sizing: border-box; }
.cobj-novo input:focus, .cobj-novo select:focus, .cobj-novo textarea:focus { outline: none; box-shadow: var(--vd-ciano-luz); border-color: transparent; }
.cobj-novo #cobj-titulo { font-size: 18px; font-weight: 600; }
.cobj-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cobj-novo .cobj-campo { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: #6b7a8c; text-transform: uppercase; letter-spacing: .06em; }
.cobj-novo .cobj-campo input, .cobj-novo .cobj-campo select { text-transform: none; letter-spacing: 0; font-weight: 600; }
.cobj-novo .dica { margin: 0; font-size: 12.5px; color: #8a93a1; }
.cobj-novo > .cobj-previa { padding: 20px; color: #dff6ff; border: 0; background: radial-gradient(130% 120% at 0% 0%, #0b4a86, #031a36 60%, #020f24);
  box-shadow: inset 0 1px 0 rgba(159,240,255,.25), 0 24px 50px -26px rgba(1,12,30,.8); }
.cobj-previa-vazia { margin: 0; color: rgba(223,246,255,.7); }
.cobj-previa-topo { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: 18px; align-items: center; }
.cobj-previa-topo svg { width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(47,211,154,.45)); }
.cobj-previa-topo small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cobj-previa-topo b { display: block; font-size: 26px; color: #fff; margin: 2px 0 4px; }
.cobj-previa-topo span { font-size: 13px; color: rgba(223,246,255,.75); }
.cobj-previa-marcos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.cobj-previa-marcos li { padding: 10px 12px; border-radius: 14px; background: rgba(159,240,255,.07); box-shadow: inset 0 0 0 1px rgba(159,240,255,.12); }
.cobj-previa-marcos li:last-child { background: rgba(255,204,77,.1); box-shadow: inset 0 0 0 1px rgba(255,204,77,.35); }
.cobj-previa-marcos small { display: block; font-size: 11px; color: rgba(223,246,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.cobj-previa-marcos b { color: #fff; font-variant-numeric: tabular-nums; }
.cobj-previa-marcos li:last-child b { color: #ffe08a; }
.cobj-acoes { display: flex; justify-content: flex-end; gap: 10px; }

/* cockpit */
.cobj-cockpit { --cobj-cor: #2fd39a; margin: 0 0 18px; padding: 22px 22px 14px; border-radius: 28px; color: #dff6ff; position: relative; overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgba(47,211,154,.12), transparent 55%), radial-gradient(120% 140% at 0% 0%, #0b4a86, #031a36 55%, #010c1e);
  box-shadow: inset 0 1px 0 rgba(159,240,255,.25), 0 0 0 1px rgba(94,198,224,.12), 0 40px 80px -40px rgba(1,12,30,.9); }
.cobj-cockpit.s-perto { --cobj-cor: #ffcc4d; }
.cobj-cockpit.s-atras, .cobj-cockpit.s-acabou { --cobj-cor: #ff8a7a; }
.cobj-cockpit header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cobj-cockpit header small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--cobj-cor); }
.cobj-cockpit h1 { margin: 2px 0 0; font-size: 28px; letter-spacing: -.02em; color: #fff; }
.cobj-cockpit .vd-segmento { background: rgba(159,240,255,.06); border-color: rgba(159,240,255,.15); box-shadow: none; }
.cobj-cockpit .vd-segmento button { color: rgba(223,246,255,.7); }
.cobj-cockpit .vd-segmento button.on { background: rgba(159,240,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(159,240,255,.3); }
.cobj-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.cobj-numeros > div { padding: 12px 14px; border-radius: 16px; background: rgba(159,240,255,.05); box-shadow: inset 0 0 0 1px rgba(159,240,255,.1); display: grid; gap: 2px; align-content: start; }
.cobj-numeros small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cobj-numeros b { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cobj-numeros i { font-style: normal; font-size: 12px; color: rgba(223,246,255,.55); }
.cobj-numeros .cobj-pct b { color: var(--cobj-cor); }
.cobj-pct span { display: block; height: 6px; border-radius: 99px; background: rgba(159,240,255,.1); overflow: hidden; margin-top: 4px; }
.cobj-pct span i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0391b2, var(--cobj-cor)); box-shadow: 0 0 12px var(--cobj-cor); }
.cobj-grafico { position: relative; }
.cobj-grafico canvas { display: block; width: 100%; height: 360px; cursor: crosshair; }
.cobj-legenda { display: flex; gap: 16px; justify-content: flex-end; font-size: 12px; color: rgba(223,246,255,.6); padding: 2px 4px 0; }
.cobj-legenda span::before { content: ''; display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 3px solid var(--cobj-cor); }
.cobj-legenda .l-ideal::before { border-top: 2px dashed #5ec6e0; }
.cobj-legenda .l-meta::before { width: 8px; height: 8px; border: 0; border-radius: 2px; background: #9ff0ff; }

/* trilha das metas (o micro) */
.cobj-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.cobj-trilha h2, .cobj-lado h2 { margin: 0 0 8px; font-size: 18px; color: #032859; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cobj-trilha h2 small { font-size: 13px; font-weight: 500; color: #6b7a8c; }
.cobj-esforco { margin-bottom: 14px; }
.cobj-esforco span { display: block; height: 8px; border-radius: 99px; background: rgba(3,40,89,.08); overflow: hidden; }
.cobj-esforco span i { display: block; height: 100%; background: linear-gradient(90deg, #0391b2, #2fd39a); border-radius: 99px; }
.cobj-esforco p { margin: 6px 0 0; font-size: 12.5px; color: #8a93a1; }
.cobj-marcos { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 12px; }
.cobj-marcos::before { content: ''; position: absolute; left: 7px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(#2fd39a, #0391b2 60%, #ffcc4d); border-radius: 2px; opacity: .55; }
.cobj-marco { position: relative; padding: 14px 16px; border-radius: 20px; background: var(--vd-fundo); border: 1px solid var(--vd-borda);
  box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.cobj-marco.atual { box-shadow: var(--vd-brilho), var(--vd-ciano-luz); }
.cobj-marco-cab { display: flex; align-items: center; gap: 12px; }
.cobj-marco-cab > div { flex: 1; display: grid; }
.cobj-marco-cab b { color: #032859; font-size: 15px; }
.cobj-marco-cab small { color: #6b7a8c; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cobj-marco-cab em { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(3,40,89,.06); color: #5b6472; }
.cobj-bandeira { position: absolute; left: -26px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #9fb3c8; box-sizing: border-box; }
.cobj-marco.atual .cobj-bandeira { border-color: #0391b2; box-shadow: 0 0 0 5px rgba(3,145,178,.18); animation: cobjPulso 1.8s ease-in-out infinite; }
.cobj-marco.m-batido .cobj-bandeira { background: #2fd39a; border-color: #2fd39a; }
.cobj-marco.m-batido em { background: rgba(47,211,154,.15); color: #138a5f; }
.cobj-marco.m-nao .cobj-bandeira { border-color: #ff8a7a; }
.cobj-marco.m-nao em { background: rgba(255,138,122,.15); color: #b23a2a; }
.cobj-marco:last-child .cobj-bandeira { border-color: #ffcc4d; background: #fff6d6; }
@keyframes cobjPulso { 50% { box-shadow: 0 0 0 9px rgba(3,145,178,.05); } }
.cobj-tarefas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.cobj-tarefas:empty { display: none; }
.cobj-tarefas li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.cobj-tarefas li:hover { background: rgba(255,255,255,.7); }
.cobj-tarefas a { display: flex; align-items: center; gap: 10px; color: #032859; text-decoration: none; font-size: 14px; min-width: 0; }
.cobj-tarefas a i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9fb3c8; box-sizing: border-box; }
.cobj-tarefas li.feita a { color: #8a93a1; text-decoration: line-through; }
.cobj-tarefas li.feita a i { background: #2fd39a; border-color: #2fd39a; }
.cobj-tarefas small { color: #8a93a1; font-size: 12px; flex: none; }
.cobj-nova-tarefa { display: flex; gap: 8px; margin: 10px 0 0; }
.cobj-nova-tarefa input[name=titulo] { flex: 1; min-width: 0; height: 40px; border-radius: 999px; border: 1px dashed rgba(3,40,89,.18); background: rgba(255,255,255,.5);
  padding: 0 14px; font: inherit; font-size: 14px; color: #032859; box-sizing: border-box; }
.cobj-nova-tarefa input[name=titulo]:focus { outline: none; border-style: solid; border-color: transparent; box-shadow: var(--vd-ciano-luz); background: #fff; }
.cobj-nova-tarefa .vd-btn { height: 40px; }
.cobj-lado { display: grid; gap: 14px; }
.cobj-woop, .cobj-registro { padding: 16px; border-radius: 20px; background: var(--vd-fundo); border: 1px solid var(--vd-borda);
  box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.cobj-woop form, .cobj-registro form { display: grid; gap: 10px; margin: 0; }
.cobj-registro form { grid-template-columns: 1fr auto; }
.cobj-woop label { display: grid; gap: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6b7a8c; }
.cobj-woop input, .cobj-woop textarea, .cobj-registro input { border-radius: 12px; border: 1px solid rgba(3,40,89,.12); background: rgba(255,255,255,.8);
  padding: 9px 12px; font: inherit; font-size: 14px; color: #032859; text-transform: none; letter-spacing: 0; box-sizing: border-box; width: 100%; }
.cobj-woop p { margin: 0 0 6px; font-size: 14px; color: #032859; }
.cobj-woop .vd-btn { justify-self: start; }
.cobj-arquivar { margin: 0; text-align: center; }
@media (max-width: 900px) {
  .cobj-colunas { grid-template-columns: 1fr; }
  .cobj-grafico canvas { height: 280px; }
  .cobj-previa-topo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cobj-cockpit { padding: 16px 12px 10px; border-radius: 22px; }
  .cobj-cockpit h1 { font-size: 22px; }
  .cobj-numeros { grid-template-columns: 1fr 1fr; }
  .cobj-numeros b { font-size: 18px; }
  .cobj-grafico canvas { height: 240px; }
  .cobj-faixa { flex-wrap: wrap; gap: 10px; }
  .cobj-faixa .cobj-mini { order: 3; width: 100%; }
  .cobj-faixa-meta { display: none; }
  .cobj-novo > section { padding: 16px 16px 16px 54px; }
}

/* objetivos — a conta do mês, a equação, as jogadas e marcar na trilha */
.cobj-conta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; margin: 12px 0 6px; }
.cobj-conta > div { padding: 16px 18px; border-radius: 18px; background: rgba(159,240,255,.05); box-shadow: inset 0 0 0 1px rgba(159,240,255,.12); }
.cobj-conta small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); margin-bottom: 6px; }
.cobj-conta p { margin: 0 0 8px; font-size: 14px; color: rgba(223,246,255,.85); line-height: 1.45; }
.cobj-conta b { color: #fff; }
.cobj-conta-barra { display: block; height: 6px; border-radius: 99px; background: rgba(159,240,255,.1); overflow: hidden; margin: 0 0 12px; }
.cobj-conta-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0391b2, #2fd39a); box-shadow: 0 0 10px #2fd39a; }
.cobj-conta-dia { display: block; font-size: 30px; line-height: 1.1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cobj-conta-dia em { font-style: normal; font-size: 15px; font-weight: 500; color: rgba(223,246,255,.7); letter-spacing: 0; }
.cobj-conta-dia.ok { color: #2fd39a; font-size: 22px; }
.cobj-conta-mes > span:last-child { font-size: 13px; color: rgba(223,246,255,.75); }
.cobj-eq-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 18px; color: rgba(223,246,255,.5); margin-bottom: 10px; }
.cobj-eq-linha em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); margin-right: 4px; }
.cobj-eq-linha b { font-size: 20px; font-variant-numeric: tabular-nums; }
.cobj-eq-linha i { font-style: normal; font-size: 12px; color: rgba(223,246,255,.55); margin-right: 4px; }
.cobj-equacao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cobj-equacao li { font-size: 13.5px; color: rgba(223,246,255,.8); padding: 6px 10px; border-radius: 10px; background: rgba(159,240,255,.04); }
.cobj-equacao li.melhor { background: rgba(47,211,154,.1); box-shadow: inset 0 0 0 1px rgba(47,211,154,.35); }
.cobj-equacao li.melhor b { color: #8ff0c8; }

.cobj-tarefas li { justify-content: flex-start; }
.cobj-tarefas li > a { flex: 1; }
.cobj-check { margin: 0; flex: none; }
.cobj-check button { width: 26px; height: 26px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.cobj-check button:hover i { border-color: #2fd39a; box-shadow: 0 0 0 4px rgba(47,211,154,.15); }
.cobj-check i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #9fb3c8; box-sizing: border-box; transition: background .2s, border-color .2s, transform .2s; position: relative; }
.cobj-tarefas li.feita .cobj-check i { background: #2fd39a; border-color: #2fd39a; transform: scale(1.08); }
.cobj-tarefas li.feita .cobj-check i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cobj-esforco span i { transition: width .6s cubic-bezier(.2,.8,.2,1); }
.cobj-faisca { position: fixed; z-index: 9999; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: cobjFaisca .85s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes cobjFaisca { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

.cobj-jogadas { margin-top: 22px; }
.cobj-jogadas h2 { flex-wrap: wrap; }
.cobj-jogadas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cobj-jogada { margin: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; padding: 14px; border-radius: 18px; background: var(--vd-fundo); border: 1px solid var(--vd-borda);
  box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); transition: transform .15s, box-shadow .2s; }
.cobj-jogada:hover { transform: translateY(-2px); box-shadow: var(--vd-brilho), var(--vd-ciano-luz); }
.cobj-jogada small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #0391b2; }
.cobj-jogada b { font-size: 14px; color: #032859; line-height: 1.3; }
.cobj-jogada span { font-size: 12.5px; color: #6b7a8c; line-height: 1.4; }
.cobj-jogada button { justify-self: start; margin-top: 6px; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: #fff; background: linear-gradient(180deg, #0b62bd, #032859); }
.cobj-jogada.ja { opacity: .6; }
.cobj-jogada.ja button { background: rgba(47,211,154,.18); color: #138a5f; cursor: default; }
@media (max-width: 900px) { .cobj-conta { grid-template-columns: 1fr; } }

.cobj-mais { margin-top: 10px; }
.cobj-mais > summary { cursor: pointer; list-style: none; display: inline-flex; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #0391b2; background: rgba(3,145,178,.08); margin-bottom: 10px; }
.cobj-mais > summary::-webkit-details-marker { display: none; }

/* objetivos — administrar no gráfico: etapas, cartão em cima do gráfico, esta semana, tendência */
.cobj-grafico canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
.cobj-legenda { flex-wrap: wrap; align-items: center; }
.cobj-legenda .cobj-dica { margin-right: auto; color: rgba(159,240,255,.7); }
.cobj-legenda .cobj-dica::before { display: none; }
.cobj-legenda .l-tend::before { border-top: 2px dotted #ffe08a; }
.cobj-legenda .l-etapa::before { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #9ff0ff; box-shadow: 0 0 6px #9ff0ff; }
.cobj-grafico-pop { position: absolute; z-index: 5; width: min(320px, calc(100% - 16px)); padding: 14px; border-radius: 18px; display: grid; gap: 8px;
  background: rgba(4,26,52,.94); border: 1px solid rgba(159,240,255,.3); box-shadow: 0 24px 50px -16px rgba(0,0,0,.7), 0 0 30px -10px rgba(94,198,224,.5);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); color: #dff6ff; animation: vdAbre .14s ease; }
.cobj-grafico-pop[hidden] { display: none; }
.cobj-grafico-pop small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.65); display: flex; align-items: center; gap: 6px; padding-right: 26px; }
.cobj-grafico-pop small .atr { color: #ff8a7a; } .cobj-grafico-pop small .ok { color: #2fd39a; }
.cobj-grafico-pop input[type=text] { width: 100%; box-sizing: border-box; height: 42px; border-radius: 12px; border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.07);
  color: #fff; padding: 0 12px; font: inherit; font-size: 15px; outline: none; }
.cobj-grafico-pop input[type=text]:focus { border-color: #9ff0ff; box-shadow: 0 0 0 3px rgba(94,198,224,.25); }
.cobj-grafico-pop input[type=date] { border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.07); color: #dff6ff; border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12px;
  text-transform: none; letter-spacing: 0; color-scheme: dark; }
.cobj-pop-data { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(223,246,255,.7); }
.cobj-pop-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(159,240,255,.1); color: #dff6ff; font-size: 16px; line-height: 1; cursor: pointer; }
.cobj-pop-x:hover { background: rgba(159,240,255,.22); }
.cobj-pop-dica { margin: 0; font-size: 12px; color: rgba(223,246,255,.55); }
.cobj-pop-criadas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 120px; overflow: auto; }
.cobj-pop-criadas:empty { display: none; }
.cobj-pop-criadas li { font-size: 13px; padding: 5px 9px; border-radius: 8px; background: rgba(47,211,154,.12); color: #c9f7e4; display: flex; justify-content: space-between; gap: 8px; }
.cobj-pop-criadas li small { color: rgba(201,247,228,.7); padding: 0; }
.cobj-pop-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.cobj-pop-acoes button { flex: 1; height: 34px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(159,240,255,.12); color: #dff6ff; white-space: nowrap; padding: 0 10px; }
.cobj-pop-acoes button:hover { background: rgba(159,240,255,.22); }
.cobj-pop-acoes .feita { background: rgba(47,211,154,.2); color: #8ff0c8; }
.cobj-pop-acoes .apagar { flex: 0 0 auto; background: none; color: #ffb3a8; }
.cobj-aviso { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(47,211,154,.92); color: #03281c; animation: vdAbre .14s ease; pointer-events: none; }
.cobj-aviso.erro { background: rgba(255,138,122,.95); color: #3a0d06; }
.cobj-tendencia { margin: 10px 2px 0; font-size: 13.5px; color: rgba(223,246,255,.8); padding-left: 22px; position: relative; }
.cobj-tendencia::before { content: ''; position: absolute; left: 0; top: 9px; width: 14px; border-top: 2px dotted #ffe08a; }
.cobj-tendencia b { color: #ffe08a; }
.cobj-tendencia.s-ok b { color: #2fd39a; }
.cobj-conta { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cobj-semana p { margin: 0; font-size: 13.5px; color: rgba(223,246,255,.75); line-height: 1.45; }
.cobj-semana small b { color: #fff; margin-left: 6px; font-size: 12px; }
.cobj-semana .cobj-tarefas { margin: 0; }
.cobj-semana .cobj-tarefas li { padding: 4px 4px; }
.cobj-semana .cobj-tarefas li:hover { background: rgba(159,240,255,.06); }
.cobj-semana .cobj-tarefas li > span { flex: 1; font-size: 13.5px; color: #dff6ff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobj-semana .cobj-tarefas li.feita > span { color: rgba(223,246,255,.45); text-decoration: line-through; }
.cobj-semana .cobj-tarefas small { color: rgba(223,246,255,.55); margin: 0; letter-spacing: 0; text-transform: none; font-size: 12px; }
.cobj-semana .cobj-tarefas li.atrasada small { color: #ff8a7a; font-weight: 700; }
.cobj-semana .cobj-check i { border-color: rgba(159,240,255,.45); }

/* objetivos — amplo: a página usa a largura toda e o painel pode tomar a tela */
.cad.cobj-largo { max-width: none; }
.cobj-grafico canvas { height: clamp(380px, 58vh, 680px); }
.cobj-cockpit header { align-items: center; }
.cobj-cockpit header > div:first-child { margin-right: auto; }
.cobj-ampliar { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(159,240,255,.2);
  background: rgba(159,240,255,.06); color: #dff6ff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cobj-ampliar:hover { background: rgba(159,240,255,.16); border-color: rgba(159,240,255,.45); }
.cobj-ampliar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cobj-cockpit.cheia { position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0; overflow: auto; padding: 18px 28px 20px; }
.cobj-cockpit.cheia .cobj-grafico canvas { height: calc(100vh - 250px); min-height: 420px; }
body.cobj-tela-cheia { overflow: hidden; }
@media (max-width: 640px) { .cobj-ampliar span { display: none; } .cobj-cockpit.cheia { padding: 12px 10px; } .cobj-cockpit.cheia .cobj-grafico canvas { height: calc(100vh - 300px); min-height: 300px; } }

/* objetivos — foco: números numa linha só, "Agora" em destaque, rodapé compacto */
.cobj-cockpit { padding: 18px 22px 14px; }
.cobj-cockpit h1 { font-size: 24px; }
.cobj .cobj-numeros { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 10px 0 12px; }
.cobj .cobj-numeros > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; background: none; box-shadow: none; }
.cobj .cobj-numeros small { font-size: 10.5px; }
.cobj .cobj-numeros b { font-size: 16px; }
.cobj .cobj-numeros i { font-size: 11.5px; }
.cobj .cobj-numeros .cobj-pct { align-items: center; }
.cobj .cobj-numeros .cobj-pct > span { width: 90px; margin: 0; height: 5px; }
.cobj-agora { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px 8px 16px; border-radius: 16px; margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(47,211,154,.14), rgba(159,240,255,.04) 60%); box-shadow: inset 0 0 0 1px rgba(47,211,154,.3); }
.cobj-agora > small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2fd39a; }
.cobj-agora .cobj-tarefas { margin: 0; flex: 1; min-width: 200px; }
.cobj-agora .cobj-tarefas li { padding: 2px 0; }
.cobj-agora .cobj-tarefas li:hover { background: none; }
.cobj-agora .cobj-tarefas li > span { flex: 1; font-size: 16px; font-weight: 600; color: #fff; }
.cobj-agora .cobj-tarefas li.feita > span { color: rgba(223,246,255,.5); text-decoration: line-through; }
.cobj-agora .cobj-tarefas small { color: rgba(223,246,255,.6); font-size: 12px; }
.cobj-agora .cobj-tarefas li.atrasada small { color: #ff8a7a; font-weight: 700; }
.cobj-agora .cobj-check i { width: 22px; height: 22px; border-color: #2fd39a; }
.cobj-agora-vazio { flex: 1; color: rgba(223,246,255,.75); font-size: 14px; }
.cobj-agora-conta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(223,246,255,.75); padding-left: 14px; border-left: 1px solid rgba(159,240,255,.15); }
.cobj-agora-conta b { color: #fff; }
.cobj-agora-conta b.ok { color: #2fd39a; }
.cobj-agora-conta i { display: inline-block; width: 60px; height: 5px; border-radius: 99px; background: rgba(159,240,255,.12); overflow: hidden; }
.cobj-agora-conta em { display: block; height: 100%; background: #2fd39a; }
.cobj-rodape { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 24px; margin-top: 8px; font-size: 13px; }
.cobj-rodape .cobj-semana { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 260px; padding: 0; background: none; box-shadow: none; }
.cobj-rodape .cobj-semana > small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); white-space: nowrap; }
.cobj-rodape .cobj-semana .cobj-tarefas { display: flex; flex-wrap: wrap; gap: 6px; }
.cobj-rodape .cobj-semana .cobj-tarefas li { padding: 2px 10px 2px 2px; border-radius: 999px; background: rgba(159,240,255,.06); box-shadow: inset 0 0 0 1px rgba(159,240,255,.12); gap: 4px; }
.cobj-rodape .cobj-semana .cobj-tarefas li.atrasada { box-shadow: inset 0 0 0 1px rgba(255,138,122,.5); }
.cobj-rodape .cobj-semana .cobj-tarefas li > span { font-size: 12.5px; max-width: 220px; }
.cobj-rodape .cobj-check button { width: 22px; height: 22px; }
.cobj-rodape .cobj-check i { width: 15px; height: 15px; }
.cobj-semana-vazia { color: rgba(223,246,255,.5); }
.cobj-rodape .cobj-tendencia { margin: 0; font-size: 13px; }
.cobj-rodape details.cobj-equacao { padding: 0; background: none; box-shadow: none; color: rgba(223,246,255,.75); }
.cobj-rodape details.cobj-equacao summary { cursor: pointer; list-style: none; color: #9ff0ff; }
.cobj-rodape details.cobj-equacao summary::-webkit-details-marker { display: none; }
.cobj-rodape details.cobj-equacao ul { margin-top: 6px; }
.cobj-legenda { padding-top: 4px; }

/* objetivos — projeto completo: modos de ver, quadros, lista, notas, quem faz */
.cobj-modos button { font-weight: 600; }
.cobj-zoom[hidden] { display: none !important; }
.cobj-grafico.em-quadro .cobj-legenda { display: none; }
.cobj-vista { min-height: clamp(380px, 58vh, 680px); }
.cobj-cockpit.cheia .cobj-vista { min-height: calc(100vh - 250px); }
.cobj-quadro { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; align-items: flex-start; scroll-snap-type: x proximity; }
.cobj-col { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px;
  background: rgba(159,240,255,.04); box-shadow: inset 0 0 0 1px rgba(159,240,255,.12); transition: box-shadow .15s, background .15s; }
.cobj-quadro .cobj-col { max-height: calc(100vh - 220px); }
.cobj-col.alvo { background: rgba(47,211,154,.08); box-shadow: inset 0 0 0 2px rgba(47,211,154,.6); }
.cobj-col.destino { box-shadow: inset 0 0 0 1px rgba(255,204,77,.4); }
.cobj-col.s-batido { box-shadow: inset 0 0 0 1px rgba(47,211,154,.5); }
.cobj-col header { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.cobj-col header b { color: #fff; font-size: 15px; }
.cobj-col header b small { color: rgba(223,246,255,.55); font-weight: 500; }
.cobj-col.destino header b { color: #ffe08a; }
.cobj-col header small { grid-column: 1; font-size: 12px; color: rgba(223,246,255,.6); }
.cobj-col header small .atr { color: #ff8a7a; font-weight: 700; }
.cobj-col header em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 12px; font-weight: 700; color: #8ff0c8; padding: 3px 9px; border-radius: 99px; background: rgba(47,211,154,.12); }
.cobj-col-barra { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: rgba(159,240,255,.1); overflow: hidden; margin-top: 4px; }
.cobj-col-barra i { display: block; height: 100%; background: linear-gradient(90deg, #0391b2, #2fd39a); }
.cobj-col-itens { display: grid; gap: 6px; overflow-y: auto; min-height: 24px; }
.cobj-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; padding: 10px 10px 9px; border-radius: 14px;
  background: rgba(4,26,52,.9); box-shadow: inset 0 0 0 1px rgba(159,240,255,.14), 0 6px 14px -10px rgba(0,0,0,.6); cursor: grab; }
.cobj-card:hover { box-shadow: inset 0 0 0 1px rgba(159,240,255,.4), 0 8px 18px -10px rgba(0,0,0,.7); }
.cobj-card.arrastando { opacity: .4; }
.cobj-card.atrasada { box-shadow: inset 3px 0 0 #ff8a7a, inset 0 0 0 1px rgba(255,138,122,.3); }
.cobj-card.k-nota { grid-template-columns: 1fr; background: rgba(28,20,64,.92); box-shadow: inset 0 0 0 1px rgba(196,181,253,.3); }
.cobj-card.k-nota p { margin: 0; font-size: 12.5px; color: rgba(237,233,254,.7); line-height: 1.35; }
.cobj-card-check { grid-row: 1 / span 2; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cobj-card-check i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(159,240,255,.5); box-sizing: border-box; position: relative; transition: background .2s; }
.cobj-card-check:hover i { border-color: #2fd39a; box-shadow: 0 0 0 4px rgba(47,211,154,.15); }
.feita > td .cobj-card-check i, .cobj-card.feita .cobj-card-check i { background: #2fd39a; border-color: #2fd39a; }
.feita > td .cobj-card-check i::after, .cobj-card.feita .cobj-card-check i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #04281c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cobj-card-tit { all: unset; cursor: pointer; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; word-break: break-word; }
.cobj-card-tit:hover { color: #9ff0ff; }
.cobj-card.feita .cobj-card-tit { color: rgba(223,246,255,.45); text-decoration: line-through; }
.cobj-card.k-nota .cobj-card-tit { color: #ede9fe; }
.cobj-card.k-nota .cobj-card-tit::before { content: ''; display: inline-block; width: 9px; height: 11px; margin-right: 7px; background: #c4b5fd; clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%); vertical-align: -1px; }
.cobj-card-pe { grid-column: 2; font-size: 11.5px; color: rgba(223,246,255,.55); }
.cobj-card.k-nota .cobj-card-pe { grid-column: 1; color: rgba(237,233,254,.5); }
.cobj-card-pe b { color: #ffe08a; font-weight: 600; }
.cobj-card.atrasada .cobj-card-pe { color: #ffb3a8; }
.cobj-col-novo { display: flex; gap: 6px; }
.cobj-col-novo input, .cobj-col-novo select { height: 36px; border-radius: 10px; border: 1px dashed rgba(159,240,255,.25); background: rgba(159,240,255,.04); color: #fff; font: inherit; font-size: 13px; padding: 0 10px; min-width: 0; color-scheme: dark; }
.cobj-col-novo input { flex: 1; }
.cobj-col-novo select { flex: none; padding: 0 6px; }
.cobj-col-novo input:focus { outline: none; border-style: solid; border-color: #9ff0ff; background: rgba(159,240,255,.08); }
.cobj-col-mais { opacity: .85; }
.cobj-col-mais .cobj-col-novo { flex-direction: column; }
.cobj-lista { padding: 4px 2px 10px; }
.cobj-lista-novo { margin-bottom: 10px; max-width: 640px; }
.cobj-lista table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cobj-lista th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.5); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid rgba(159,240,255,.12); }
.cobj-lista td { padding: 4px 6px; border-bottom: 1px solid rgba(159,240,255,.06); vertical-align: middle; }
.cobj-lista tr:hover td { background: rgba(159,240,255,.04); }
.cobj-lista td:first-child { width: 32px; }
.cobj-lista input[type=text], .cobj-lista input[type=date], .cobj-lista select { width: 100%; box-sizing: border-box; height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: #fff; font: inherit; font-size: 14px; padding: 0 8px; color-scheme: dark; }
.cobj-lista input:hover, .cobj-lista select:hover { border-color: rgba(159,240,255,.2); }
.cobj-lista input:focus, .cobj-lista select:focus { outline: none; border-color: #9ff0ff; background: rgba(159,240,255,.06); }
.cobj-lista td:nth-child(3) { width: 150px; } .cobj-lista td:nth-child(4) { width: 150px; } .cobj-lista td:nth-child(5) { width: 110px; }
.cobj-lista tr.feita input[data-l-titulo] { text-decoration: line-through; color: rgba(223,246,255,.45); }
.cobj-lista tr.atrasada input[data-l-data] { color: #ff8a7a; }
.cobj-lista select option { background: #031a36; }
.cobj-lista-meta { font-size: 12px; color: rgba(223,246,255,.6); }
.cobj-lista h3 { margin: 18px 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.cobj-lista-notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cobj-pop-tipo { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(159,240,255,.08); justify-self: start; }
.cobj-pop-tipo button { border: 0; background: none; color: rgba(223,246,255,.7); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.cobj-pop-tipo button.on { background: rgba(159,240,255,.2); color: #fff; }
.cobj-pop-tipo button[data-tipo=nota].on { background: rgba(196,181,253,.28); }
.cobj-pop-quem { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(223,246,255,.7); }
.cobj-pop-quem[hidden] { display: none; }
.cobj-pop-quem select { flex: 1; height: 30px; border-radius: 8px; border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.07); color: #fff; font: inherit; font-size: 13px; color-scheme: dark; }
.cobj-pop-quem select option { background: #031a36; }
.cobj-pop-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.cobj-pop-linha > label { flex: 1; min-width: 130px; }
.cobj-grafico-pop textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(196,181,253,.3); background: rgba(196,181,253,.07); color: #fff; padding: 8px 12px; font: inherit; font-size: 14px; resize: vertical; }
.cobj-grafico-pop textarea[hidden] { display: none; }
.cobj-grafico-pop small.nota { color: #c4b5fd; }
.cobj-pop-nota-tit { color: #fff; font-size: 16px; }
.cobj-pop-nota { margin: 0; font-size: 13.5px; color: rgba(237,233,254,.8); line-height: 1.45; max-height: 140px; overflow: auto; }
.cobj-pop-acoes a { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; }
.cobj-pop-acoes a.feita { background: rgba(196,181,253,.22); color: #ede9fe; }
.cobj-pop-link { font-size: 12px; color: #9ff0ff; text-decoration: none; }
.cobj-pop-link:hover { text-decoration: underline; }
.cobj-pop-criadas li.nota { background: rgba(196,181,253,.14); }
.cobj-pop-criadas li a { color: #ede9fe; }
.cobj-legenda .l-nota::before { width: 8px; height: 10px; border: 0; background: #c4b5fd; clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%); }
.cad-ficha.objetivo { background: rgba(47,211,154,.14); color: #11815a; }
.cad-ficha.objetivo svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .cobj-cockpit header { gap: 8px; }
  .cobj-modos button { padding: 6px 10px; }
  .cobj-col { flex-basis: 84vw; }
  .cobj-lista td:nth-child(5), .cobj-lista th:nth-child(5) { display: none; }
  .cobj-lista td:nth-child(3), .cobj-lista td:nth-child(4) { width: auto; }
}
.cobj-col-novo select { flex: 0 0 78px; width: 78px; }
.cobj-col-novo input[data-novo] { flex: 1 1 auto; width: auto; }
.cobj-col-novo.largo select { flex-basis: 90px; }
.cobj .cobj-col header small { text-transform: none; letter-spacing: 0; font-weight: 500; color: rgba(223,246,255,.6); }
.cobj .cobj-lista input, .cobj .cobj-lista select, .cobj .cobj-col-novo input, .cobj .cobj-col-novo select, .cobj .cobj-grafico-pop input, .cobj .cobj-grafico-pop select, .cobj .cobj-grafico-pop textarea { box-shadow: none; }
.cobj .cobj-lista tbody tr:hover > td, .cobj .cobj-lista tbody tr > td { background: transparent; }
.cobj .cobj-lista tbody tr:hover > td { background: rgba(159,240,255,.05); }
.cobj .cobj-col-mais .cobj-col-novo select { flex: none; width: 100%; height: 36px; }
.cobj-col-itens, .cobj-quadro { scrollbar-width: thin; scrollbar-color: rgba(159,240,255,.3) transparent; }
.cobj .cobj-lista tbody tr:hover { background: transparent; }
.cad-objetivo-link { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 13px; color: #6b7a8c; } .cad-objetivo-link .vd-btn { height: 36px; } .cad-objetivo-link svg { width: 16px; height: 16px; }
.cobj .cobj-pop-quem select { padding: 0 8px; height: 32px; line-height: 30px; }

/* objetivos — lista de um ponto cheio de etapas */
.cobj-pop-grupo { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 300px; overflow: auto; }
.cobj-pop-grupo li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; }
.cobj-pop-grupo li:hover { background: rgba(159,240,255,.07); }
.cobj-pop-grupo-tit { all: unset; flex: 1; min-width: 0; cursor: pointer; font-size: 14px; color: #fff; line-height: 1.3; }
.cobj-pop-grupo-tit:hover { color: #9ff0ff; }
.cobj-pop-grupo li.feita .cobj-pop-grupo-tit { color: rgba(223,246,255,.45); text-decoration: line-through; }
.cobj-pop-grupo li.feita .cobj-card-check i { background: #2fd39a; border-color: #2fd39a; }
.cobj-pop-grupo li.atrasada small { color: #ff8a7a; }
.cobj-pop-grupo small { flex: none; font-size: 11.5px; color: rgba(223,246,255,.55); letter-spacing: 0; text-transform: none; padding: 0; }
.cobj-pop-grupo-novo { border: 1px dashed rgba(159,240,255,.3); background: none; color: #9ff0ff; border-radius: 10px; height: 34px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cobj-pop-grupo-novo:hover { background: rgba(159,240,255,.08); }
.cobj-pop-grupo { max-height: 240px; scrollbar-width: thin; scrollbar-color: rgba(159,240,255,.3) transparent; } .cobj-grafico-pop { max-height: calc(100% - 8px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(159,240,255,.3) transparent; }

/* objetivos — evolução em cima, faixa de execução embaixo: o gráfico precisa de mais altura */
.cobj .cobj-grafico canvas { height: clamp(470px, 68vh, 780px); }
.cobj .cobj-cockpit.cheia .cobj-grafico canvas { height: calc(100vh - 230px); min-height: 480px; }
@media (max-width: 640px) { .cobj .cobj-grafico canvas { height: 440px; } }

/* objetivos — a escada */
.cobj-grafico.em-escada .cobj-legenda { display: none; }
.cobj-zoom-esc[hidden] { display: none !important; }
.cobj .cobj-grafico canvas { height: clamp(420px, 62vh, 720px); }
.cobj .cobj-cockpit.cheia .cobj-grafico canvas { height: calc(100vh - 230px); min-height: 440px; }

.cobj-previa-nota { display: block; margin-top: 8px; font-style: normal; font-size: 12px; color: #8ff0c8; }

/* objetivos — ouvir, sugestões da IA, comemoração */
.cobj-ouvir { margin-right: 6px; }
.cobj-pop-grupo-ia { border: 0; background: linear-gradient(135deg, rgba(196,181,253,.25), rgba(159,240,255,.18)); color: #ede9fe; border-radius: 10px; height: 34px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cobj-pop-grupo-ia:hover { background: linear-gradient(135deg, rgba(196,181,253,.4), rgba(159,240,255,.28)); }
.cobj-pop-grupo-ia:disabled { opacity: .6; cursor: wait; }
.cobj-sug { display: grid; gap: 4px; }
.cobj-sug:empty { display: none; }
.cobj-sug > small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.cobj-sug-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 7px 8px 7px 10px; border-radius: 10px; background: rgba(196,181,253,.08); }
.cobj-sug-item b { font-size: 13.5px; color: #fff; }
.cobj-sug-item span { grid-column: 1; font-size: 12px; color: rgba(237,233,254,.7); }
.cobj-sug-item button { grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(47,211,154,.2); color: #8ff0c8; font-size: 18px; font-weight: 700; cursor: pointer; }
.cobj-sug-item.ok { background: rgba(47,211,154,.12); }
.cobj-festa { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(1,12,30,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: vdAbre .25s ease; }
.cobj-festa-caixa { display: grid; justify-items: center; gap: 8px; max-width: 520px; padding: 36px 32px 28px; border-radius: 28px; text-align: center; color: #dff6ff;
  background: radial-gradient(120% 120% at 20% 0%, #0b4a86 0%, #031a36 55%, #010c1e 100%); box-shadow: inset 0 1px 0 rgba(159,240,255,.3), 0 0 0 1px rgba(255,204,77,.35), 0 0 80px -20px rgba(255,204,77,.6); }
.cobj-festa-caixa svg { width: 54px; height: 54px; fill: none; stroke: #ffcc4d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(255,204,77,.7)); }
.cobj-festa-caixa small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(223,246,255,.65); }
.cobj-festa-caixa b { font-size: 30px; letter-spacing: -.01em; color: #ffe08a; line-height: 1.1; }
.cobj-festa-caixa span { font-size: 18px; color: #fff; font-weight: 600; }
.cobj-festa-caixa em { font-style: normal; font-size: 14px; color: rgba(223,246,255,.75); max-width: 380px; }
.cobj-festa-caixa button { margin-top: 10px; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: #04281c; background: linear-gradient(180deg, #5fe3b0, #2fd39a); box-shadow: 0 10px 24px -10px rgba(47,211,154,.8); }
.missao-hoje ~ .cobj-faixa, .cobj-faixa + .missao-hoje { margin-top: 0; }

/* objetivos — barras de progresso (esforço × resultado), + Meta, por pessoa */
.cobj-barras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 2px 0 10px; }
.cobj-barra { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.cobj-barra small { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cobj-barra > span { position: relative; display: block; height: 8px; border-radius: 99px; background: rgba(159,240,255,.1); overflow: visible; }
.cobj-barra > span i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0391b2, #9ff0ff); box-shadow: 0 0 12px rgba(159,240,255,.6); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.cobj-barra > span.r i { background: linear-gradient(90deg, #0391b2, var(--cobj-cor, #2fd39a)); box-shadow: 0 0 12px var(--cobj-cor, #2fd39a); }
.cobj-barra > span.r.s-perto { --cobj-cor: #ffcc4d; } .cobj-barra > span.r.s-atras, .cobj-barra > span.r.s-acabou { --cobj-cor: #ff8a7a; }
.cobj-barra > span u { position: absolute; top: -4px; width: 2px; height: 16px; background: #fff; opacity: .8; border-radius: 2px; }
.cobj-barra b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.cobj-barra em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: rgba(223,246,255,.65); }
.cobj-barra strong { font-weight: 700; } .cobj-barra .sobe { color: #2fd39a; } .cobj-barra .desce { color: #ff8a7a; }
.cobj-mais-meta { align-self: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px dashed rgba(159,240,255,.35); background: none; color: #9ff0ff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cobj-mais-meta:hover { background: rgba(159,240,255,.1); }
.cobj-pessoais { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.cobj-pessoais > small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cobj-pessoal { display: inline-grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline; padding: 6px 12px; border-radius: 14px; text-decoration: none; color: #dff6ff; background: rgba(159,240,255,.06); box-shadow: inset 0 0 0 1px rgba(159,240,255,.14); }
.cobj-pessoal b { color: #fff; font-size: 13px; } .cobj-pessoal span { font-weight: 700; color: var(--cobj-cor, #2fd39a); }
.cobj-pessoal i { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: rgba(223,246,255,.6); }
.cobj-pessoal.s-perto { --cobj-cor: #ffcc4d; } .cobj-pessoal.s-atras { --cobj-cor: #ff8a7a; }
.cobj-pop-meta { border-top: 1px solid rgba(159,240,255,.12); padding-top: 8px; }
.cobj-cabeca-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .cobj-barras { grid-template-columns: 1fr; } }

/* Central de comando da loja */
.cen-cockpit { padding-bottom: 20px; }
.cen-cockpit h1 { display: flex; align-items: center; gap: 10px; }
.cen-vivo { width: 10px; height: 10px; border-radius: 50%; background: #2fd39a; box-shadow: 0 0 12px #2fd39a; animation: cobjPulso 1.8s ease-in-out infinite; }
.cen-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.cen-num { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #dff6ff; background: rgba(159,240,255,.05); box-shadow: inset 0 0 0 1px rgba(159,240,255,.1); transition: background .15s; }
.cen-num:hover { background: rgba(159,240,255,.1); }
.cen-num small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cen-num b { font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cen-num i { font-style: normal; font-size: 12px; color: rgba(223,246,255,.55); }
.cen-num.alerta { box-shadow: inset 0 0 0 1px rgba(255,138,122,.6); background: rgba(255,138,122,.08); }
.cen-num.alerta b { color: #ffb3a8; }
.cen-grade { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; align-items: start; }
.cen-bloco { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: rgba(159,240,255,.04); box-shadow: inset 0 0 0 1px rgba(159,240,255,.1); }
.cen-bloco h2 { margin: 0 0 2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(223,246,255,.65); display: flex; justify-content: space-between; align-items: baseline; }
.cen-bloco h2 small { font-size: 12px; font-weight: 700; color: #ffb3a8; }
.cen-vazio { margin: 0; font-size: 14px; color: rgba(223,246,255,.7); }
.cen-vazio.ok { color: #8ff0c8; }
.cen-vazio a { color: #9ff0ff; }
.cen-obj { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #dff6ff; background: rgba(4,26,52,.9); box-shadow: inset 0 0 0 1px rgba(159,240,255,.14); }
.cen-obj:hover { box-shadow: inset 0 0 0 1px rgba(159,240,255,.45); }
.cen-obj-cab { grid-column: 1 / -1; display: grid; }
.cen-obj-cab small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--cobj-cor, #2fd39a); }
.cen-obj-cab b { font-size: 16px; color: #fff; }
.cen-obj .cobj-mini { grid-column: 1; height: 44px; }
.cen-obj-num { display: grid; text-align: right; }
.cen-obj-num b { font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.cen-obj-num small { font-size: 11.5px; color: rgba(223,246,255,.6); }
.cen-obj-prox { grid-column: 1 / -1; display: grid; font-size: 14px; color: #fff; }
.cen-obj-prox small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #2fd39a; }
.cen-obj-prox em { font-style: normal; color: rgba(223,246,255,.55); }
.cen-obj-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 99px; background: rgba(159,240,255,.1); overflow: hidden; }
.cen-obj-bar i { display: block; height: 100%; background: linear-gradient(90deg, #0391b2, #2fd39a); }
.cen-obj.s-perto { --cobj-cor: #ffcc4d; } .cen-obj.s-atras, .cen-obj.s-acabou { --cobj-cor: #ff8a7a; }
.cen-pessoa { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: #dff6ff; background: rgba(4,26,52,.9); box-shadow: inset 0 0 0 1px rgba(159,240,255,.14); }
.cen-pessoa:hover { box-shadow: inset 0 0 0 1px rgba(159,240,255,.45); }
.cen-pessoa.alerta { box-shadow: inset 3px 0 0 #ff8a7a, inset 0 0 0 1px rgba(255,138,122,.3); }
.cen-pessoa-nome { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cen-pessoa-nome b { color: #fff; font-size: 15px; }
.cen-pessoa-nome small { font-size: 11.5px; color: rgba(223,246,255,.6); } .cen-pessoa-nome strong { color: #ff8a7a; }
.cen-pessoa-prox { font-size: 13.5px; color: #dff6ff; display: flex; justify-content: space-between; gap: 8px; }
.cen-pessoa-prox i { font-style: normal; color: rgba(223,246,255,.55); font-size: 12px; white-space: nowrap; }
.cen-pessoa-prox em { font-style: normal; color: rgba(223,246,255,.5); }
.cen-atrasadas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cen-atrasadas a { display: grid; padding: 8px 10px; border-radius: 12px; text-decoration: none; background: rgba(255,138,122,.07); box-shadow: inset 3px 0 0 #ff8a7a; }
.cen-atrasadas a:hover { background: rgba(255,138,122,.14); }
.cen-atrasadas b { font-size: 13.5px; color: #fff; font-weight: 600; }
.cen-atrasadas small { font-size: 11.5px; color: #ffb3a8; }
.cen .cobj-ampliar span { display: inline; }
@media (max-width: 1000px) { .cen-grade { grid-template-columns: 1fr 1fr; } .cen-objetivos { grid-column: 1 / -1; } }
@media (max-width: 640px) { .cen-grade { grid-template-columns: 1fr; } .cen-cockpit h1 { font-size: 20px; } }

/* Pedidos de compra da equipe */
.pc-novo { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px 12px; align-items: end; padding: 16px 18px; margin: 0 0 18px; border-radius: 22px; background: var(--vd-fundo); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.pc-campo { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: #6b7a8c; text-transform: uppercase; letter-spacing: .06em; }
.pc-campo small { font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a93a1; }
.pc-campo input, .pc-campo select { height: 42px; border-radius: 12px; border: 1px solid rgba(3,40,89,.12); background: rgba(255,255,255,.8); padding: 0 12px; font: inherit; font-size: 15px; color: #032859; text-transform: none; letter-spacing: 0; font-weight: 500; }
.pc-campo input:focus, .pc-campo select:focus { outline: none; box-shadow: var(--vd-ciano-luz); border-color: transparent; }
.pc-item { grid-column: 1 / -1; }
.pc-motivo { grid-column: 1 / 3; }
.pc-lista { display: grid; gap: 8px; margin-bottom: 20px; }
.pc-lista h2 { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #6b7a8c; }
.pc-lista h2 small { font-weight: 700; color: #0391b2; margin-left: 6px; }
.pc-vazio { margin: 0; color: #8a93a1; }
.pc-pedido { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--vd-fundo); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); }
.pc-pedido.urgente { box-shadow: var(--vd-brilho), inset 3px 0 0 #e0493a, var(--vd-sombra); }
.pc-pedido.s-aprovado { box-shadow: var(--vd-brilho), inset 3px 0 0 #0391b2, var(--vd-sombra); }
.pc-pedido.fechado { opacity: .75; }
.pc-pedido-txt { display: grid; gap: 2px; min-width: 0; }
.pc-pedido-txt small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b7a8c; }
.pc-pedido.urgente .pc-pedido-txt small { color: #b23a2a; font-weight: 700; }
.pc-pedido-txt b { font-size: 16px; color: #032859; }
.pc-pedido-txt b span { font-weight: 500; color: #5b6472; }
.pc-pedido-txt p { margin: 0; font-size: 13.5px; color: #5b6472; }
.pc-resposta { color: #025e74 !important; font-weight: 500; }
.pc-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.pc-acoes input { height: 38px; border-radius: 999px; border: 1px dashed rgba(3,40,89,.18); background: rgba(255,255,255,.6); padding: 0 12px; font: inherit; font-size: 13px; color: #032859; width: 200px; }
.pc-acoes .vd-btn { height: 38px; padding: 0 14px; font-size: 13px; }
.pc-recusar { color: #b23a2a; }
@media (max-width: 760px) { .pc-novo { grid-template-columns: 1fr 1fr; } .pc-motivo { grid-column: 1 / -1; } .pc-pedido { grid-template-columns: 1fr; } .pc-acoes input { width: 100%; } }

/* linha do tempo clicável */
.ch-hora > span { display: flex; align-items: center; gap: 6px; }
.ch-mais { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #cdd6df; background: #fff; color: #0391b2; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; padding: 0; }
.ch-hora:hover .ch-mais, .ch-mais:focus { opacity: 1; }
button.ch-livre { width: 100%; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
button.ch-livre:hover { border-color: #0391b2; color: #025e74; background: rgba(3,145,178,.05); }
.ch-add { display: grid; gap: 4px; border: 1.5px solid #0391b2; background: #fff; box-shadow: 0 0 0 3px rgba(3,145,178,.15); }
.ch-add input { border: 0; outline: none; font: inherit; font-size: 15px; color: #032859; background: none; padding: 2px 0; width: 100%; }
.ch-add small { color: #8a93a1; }
@media (pointer: coarse) { .ch-mais { opacity: 1; } }

/* Hoje: nova tarefa em destaque, fundo por prioridade, três colunas em tela larga (08/10/2026) */
.ch-nova-card { position: relative; margin: 0 0 12px; padding: 6px 8px 8px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, rgba(10,92,179,.1), rgba(3,145,178,.06) 50%, rgba(29,158,117,.08)); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff, 0 10px 30px -18px rgba(3,40,89,.35); }
.ch-nova-card .ch-novo { border: 0; padding: 10px 12px; background: rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 1px 2px rgba(3,40,89,.06); transition: box-shadow .2s; }
.ch-nova-card .ch-novo:focus-within { box-shadow: 0 0 0 3px rgba(3,145,178,.25), 0 10px 24px -14px rgba(3,40,89,.4); }
.ch-nova-card .ch-novo input { font-size: 16px; font-weight: 500; }
.ch-nova-card .ch-novo input::placeholder { color: #5b7a9b; font-weight: 400; }
.ch-dicas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 6px 2px; font-size: 12px; color: #6b7a8c; }
.ch-dicas button { border: 1px solid rgba(10,92,179,.2); background: rgba(255,255,255,.7); color: #0a5cb3; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ch-dicas button:hover { background: #0a5cb3; color: #fff; }
.ch-nova-card .ch-entende { padding: 0 8px; }
.ch-t.p3 { background: linear-gradient(90deg, rgba(196,60,64,.1), rgba(196,60,64,.02) 60%, #fff); }
.ch-t.p2 { background: linear-gradient(90deg, rgba(181,107,0,.1), rgba(181,107,0,.02) 60%, #fff); }
.ch-t.p1 { background: linear-gradient(90deg, rgba(10,92,179,.08), rgba(10,92,179,.02) 60%, #fff); }
.ch-t.p0 { background: linear-gradient(90deg, rgba(3,145,178,.06), #fff 60%); }
.ch-t + .ch-t { border-top: 1px solid rgba(255,255,255,.9); }
.ch-faixa-lado { display: none; }
.ch-atalhos { display: none; }
@media (min-width: 1180px) {
  .ch { max-width: 1480px; }
  .ch-grade { display: grid; grid-template-columns: 300px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
  .ch-esq, .ch-dir { position: sticky; top: calc(var(--topo-alt, 64px) + 10px); display: grid; gap: 12px; }
  .ch-esq .ch-extras { grid-template-columns: 1fr; }
  .ch-esq .ch-topo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ch-esq .ch-aneis-box { flex-direction: row; }
  .ch-esq .ch-ceu { padding: 14px 16px 12px; }
  .ch-faixa-topo { display: none; }
  .ch-faixa-lado { display: block; }
  .ch-faixa-lado .cobj-faixa { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; }
  .ch-faixa-lado .cobj-faixa .cobj-mini { width: 100%; }
  .ch-faixa-lado .cobj-faixa-num, .ch-faixa-lado .cobj-faixa-meta { text-align: left; }
  .ch-faixa-lado .cobj-faixa-meta { padding-left: 0; border-left: 0; }
  .ch-atalhos { display: grid; gap: 2px; padding: 12px; border-radius: 18px; background: var(--ch-card); box-shadow: var(--ch-sombra); }
  .ch-atalhos h4 { margin: 0 0 6px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-t3); }
  .ch-atalhos a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: #032859; font-size: 14px; font-weight: 500; }
  .ch-atalhos a:hover { background: rgba(3,145,178,.08); color: #025e74; }
  .ch-atalhos .cad-ico { width: 18px; height: 18px; color: #0391b2; }
  .ch-dir .ch-vitrine { margin: 0; }
  .ch-dir .ch-fechar { margin: 0; }
  .ch-meio .ch-ritmo { margin-top: 0; }
  .ch-matriz { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1180px) { .ch-esq .ch-extras { flex-direction: column; } .ch-esq .ch-extras > * { width: 100%; box-sizing: border-box; } .ch-esq .ch-evo { min-width: 0; } }
@media (min-width: 1180px) { .ch-dir .ch-vitrine { display: grid; gap: 8px; padding: 12px 14px; } .ch-dir .ch-vitrine p { margin: 0; font-size: 12.5px; line-height: 1.4; } .ch-dir .ch-luzes { justify-content: flex-start; flex-wrap: wrap; } }

/* Agenda da equipe */
.cag-barra { flex-wrap: wrap; }
.cag-titulo { flex: 1; margin: 0; font-size: 18px; color: #032859; text-transform: capitalize; min-width: 160px; }
.cag-nav button { font-size: 15px; }
.cag-chip { cursor: pointer; gap: 8px; }
.cag-dica { margin: -2px 0 10px 6px; font-size: 12.5px; color: #8a93a1; }
.cag-corpo { position: relative; min-height: 400px; }
.cag-corpo.carregando { opacity: .6; }
.cag-sem { border-radius: 22px; background: var(--vd-fundo); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); overflow: hidden; }
.cag-cab, .cag-semhora { display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); }
.cag-sem.um .cag-cab, .cag-sem.um .cag-semhora { grid-template-columns: 54px 1fr; }
.cag-dcab { padding: 10px 6px 8px; text-align: center; border-left: 1px solid rgba(3,40,89,.06); }
.cag-dcab small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a93a1; }
.cag-dcab b { font-size: 20px; color: #032859; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.cag-dcab.hoje b { background: #0391b2; color: #fff; }
.cag-canto { display: grid; place-items: center; color: #8a93a1; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.cag-semhora { border-top: 1px solid rgba(3,40,89,.08); border-bottom: 1px solid rgba(3,40,89,.08); background: rgba(255,255,255,.4); min-height: 40px; }
.cag-cel-dia { padding: 4px; border-left: 1px solid rgba(3,40,89,.06); display: grid; gap: 3px; align-content: start; cursor: pointer; }
.cag-cel-dia .cag-it { position: static; }
.cag-grade { position: relative; display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); overflow: auto; max-height: 68vh; }
.cag-sem.um .cag-grade { grid-template-columns: 54px 1fr; }
.cag-horas { position: relative; }
.cag-horas div { position: absolute; right: 8px; transform: translateY(-7px); font-size: 11px; color: #8a93a1; }
.cag-col { position: relative; border-left: 1px solid rgba(3,40,89,.06); }
.cag-col.hoje { background: rgba(3,145,178,.04); }
.cag-cel { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(3,40,89,.06); cursor: pointer; }
.cag-cel:hover { background: rgba(3,145,178,.08); }
.cag-cel.alvo, .cag-cel-dia.alvo, .cag-mdia.alvo { background: rgba(47,211,154,.14); box-shadow: inset 0 0 0 2px rgba(47,211,154,.6); }
.cag-agora { position: absolute; left: 0; right: 0; height: 2px; background: #e0493a; z-index: 3; pointer-events: none; }
.cag-agora::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e0493a; }
.cag-it { position: absolute; left: 3px; right: 3px; z-index: 2; padding: 4px 8px; border-radius: 10px; overflow: hidden; cursor: pointer; font-size: 12.5px; line-height: 1.25;
  background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 3px solid var(--c); box-shadow: 0 1px 2px rgba(3,40,89,.08); color: #032859; }
.cag-it b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cag-it small { display: block; color: #5b6472; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cag-it.comp { background: color-mix(in srgb, var(--c) 22%, #fff); }
.cag-it.feita b { text-decoration: line-through; color: #6b7a8c; }
.cag-it.move { cursor: grab; }
.cag-it.arrastando, .cag-mit.arrastando { opacity: .4; }
.cag-cons { position: absolute; left: 3px; right: 3px; z-index: 1; padding: 3px 8px; border-radius: 10px; overflow: hidden; font-size: 11.5px; background: repeating-linear-gradient(135deg, rgba(3,40,89,.05) 0 6px, rgba(3,40,89,.09) 6px 12px); color: #6b7a8c; border-left: 3px solid #9fb3c8; }
.cag-cons b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cag-mes { border-radius: 22px; background: var(--vd-fundo); border: 1px solid var(--vd-borda); box-shadow: var(--vd-brilho), var(--vd-sombra); -webkit-backdrop-filter: var(--vd-blur); backdrop-filter: var(--vd-blur); overflow: hidden; }
.cag-mcab { display: grid; grid-template-columns: repeat(7, 1fr); }
.cag-mcab div { padding: 8px; text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a93a1; }
.cag-mgrade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cag-mdia { min-height: 108px; padding: 6px; border-top: 1px solid rgba(3,40,89,.07); border-left: 1px solid rgba(3,40,89,.05); cursor: pointer; display: grid; align-content: start; gap: 3px; }
.cag-mdia:hover { background: rgba(3,145,178,.05); }
.cag-mdia.fora { opacity: .45; }
.cag-mnum { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: #032859; }
.cag-mdia.hoje .cag-mnum { color: #0391b2; }
.cag-mnum i { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: rgba(3,40,89,.08); color: #5b6472; }
.cag-mit { font-size: 12px; padding: 2px 6px; border-radius: 7px; background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 3px solid var(--c); color: #032859; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cag-mit small { color: #5b6472; margin-right: 4px; }
.cag-mit.feita { text-decoration: line-through; color: #6b7a8c; }
.cag-mais { border: 0; background: none; color: #0391b2; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; padding: 0 6px; }
.cag-pop { z-index: 30; }
.cag-pop input[type=time] { border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.07); color: #dff6ff; border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12px; color-scheme: dark; }
.cag-pop input[type=text][hidden] { display: none; }
.cag-pop input[type=checkbox] { accent-color: #2fd39a; }
@media (max-width: 760px) {
  .cag-cab, .cag-semhora, .cag-grade { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); }
  .cag-dcab b { font-size: 15px; width: 26px; height: 26px; }
  .cag-it small, .cag-cons small { display: none; }
  .cag-it { font-size: 11px; padding: 3px 5px; }
  .cag-mdia { min-height: 70px; padding: 3px; }
  .cag-mit { font-size: 10.5px; }
  .cag-titulo { font-size: 15px; }
}

/* mural das anotações: cabe na largura, sem vazar */
.cad-vidro .cad-notas-lista.mural .cad-notas-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; columns: auto; }
.cad-vidro .cad-notas-lista.mural .cad-cartao-nota { min-width: 0; break-inside: avoid; margin: 0; }
.cad-vidro .cad-notas-lista.mural .cad-cartao-titulo, .cad-vidro .cad-notas-lista.mural .cad-cartao-texto { overflow-wrap: anywhere; }
.cad-vidro .cad-notas-lista.mural .cad-cartao-topo { flex-wrap: wrap; }
.cad-vidro .cad-notas-grupo, .cad-vidro .cad-notas-lista { min-width: 0; max-width: 100%; }

/* "O sistema sugere" — ideias que o sistema separa sozinho para o objetivo */
.cobj-sugs { display: grid; gap: 6px; margin: 0 0 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(196,181,253,.14), rgba(159,240,255,.06)); box-shadow: inset 0 0 0 1px rgba(196,181,253,.35); }
.cobj-sugs > small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
.cobj-sugs.vazia span { font-size: 13px; color: rgba(223,246,255,.75); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cobj-sug-gerar { border: 1px dashed rgba(196,181,253,.5); background: none; color: #ede9fe; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cobj-sug-item { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: center; margin: 0; padding: 8px 8px 8px 12px; border-radius: 12px; background: rgba(4,26,52,.85); box-shadow: inset 0 0 0 1px rgba(159,240,255,.12); transition: opacity .2s; }
.cobj-sug-item.indo { opacity: .4; }
.cobj-sug-item.ia { box-shadow: inset 3px 0 0 #c4b5fd, inset 0 0 0 1px rgba(196,181,253,.25); }
.cobj-sug-item b { font-size: 14px; color: #fff; }
.cobj-sug-item span { grid-column: 1; font-size: 12.5px; color: rgba(237,233,254,.72); }
.cobj-sug-item i { grid-column: 1; font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(196,181,253,.8); }
.cobj-sug-item button { grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: 50%; border: 0; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.cobj-sug-item button.ok { grid-column: 2; background: rgba(47,211,154,.22); color: #8ff0c8; }
.cobj-sug-item button.ok:hover { background: #2fd39a; color: #04281c; }
.cobj-sug-item button.nao { grid-column: 3; background: rgba(159,240,255,.08); color: rgba(223,246,255,.6); }
.cobj-sug-item button.nao:hover { background: rgba(255,138,122,.25); color: #ffb3a8; }
.cobj-sugs.compacta { margin: 0; }
.cobj-sugs.compacta .cobj-sug-item b { font-size: 13px; }
.cobj-sugs.compacta .cobj-sug-item span { display: none; }
.cobj-sugs-mais { font-size: 12px; color: #c4b5fd; text-decoration: none; justify-self: end; }
.ch-dir .cobj-sugs { background: linear-gradient(135deg, #1c1440, #0b4a86); }

/* agenda: ocorrências que repetem (fantasmas) · nota que vira objetivo */
.cag-it.virt { border-left-style: dashed; opacity: .75; cursor: default; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, #fff) 0 6px, color-mix(in srgb, var(--c) 16%, #fff) 6px 12px); }
.cad-virar-objetivo { display: grid; gap: 4px; justify-items: start; margin: 0 0 10px; }
.cad-virar-objetivo small { color: #8a93a1; font-size: 12px; }
.cobj-de-nota { display: block; font-size: 13px; font-weight: 500; color: #6b7a8c; margin-top: 2px; }

/* ---- celular: nada pode ser mais largo que a tela (09/10/2026).
   No iPhone, um bloco mais largo faz o Safari "afastar o zoom" da página inteira.
   html trava o estouro; os blocos largos de verdade rolam por dentro. */
html { overflow-x: hidden; max-width: 100vw; }
@media (max-width: 760px) {
  body, main, .cabecalho-pagina, .cartao, .cad, .ch, .cobj, .cag, .pc, .cen { max-width: 100vw; min-width: 0; }
  main { overflow-x: clip; }
  .cad-abas { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .cad-abas::-webkit-scrollbar { display: none; }
  .cad-abas a { flex: none; }
  .tabela-rolagem, .agenda-rolagem { max-width: 100%; overflow-x: auto; }
  .tabela-rolagem table { min-width: 560px; }
  .cabecalho-pagina .acoes, .acoes, .botoes, .cobj-cabeca-btns, .vd-filtros { flex-wrap: wrap; }
  .busca-global-tecla { display: none; }
  .busca-global { flex: 1 1 auto; }
  .cobj-cockpit header { gap: 8px; }
  .cobj-cockpit .vd-segmento, .cag-barra .vd-segmento { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
  .cobj-cockpit .vd-segmento button, .cag-barra .vd-segmento button { flex: none; white-space: nowrap; }
  .cobj-numeros > span { max-width: 100%; }
  .cobj-numeros b { white-space: nowrap; }
  .cobj-agora { padding: 8px 10px; }
  .cobj-agora .cobj-tarefas li > span { white-space: normal; font-size: 15px; }
  .cobj-agora-conta { border-left: 0; padding-left: 0; }
  .cobj-cabeca { align-items: flex-start; }
  .cobj-cabeca-btns .vd-btn { height: 38px; padding: 0 12px; font-size: 13px; }
  .grade > * { min-width: 0; }
  .vd-barra { position: static; flex-wrap: wrap; border-radius: 22px; }
  .cen-numeros { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* qualquer tabela solta rola por dentro em vez de alargar a página */
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .busca-global .busca-global-tecla { display: none !important; }
}
@media (max-width: 760px) {
  /* 09/10: nada cortado na direita — encaixa ou quebra linha, não rola escondido */
  .topo { gap: .4rem; padding: 0 .5rem; }
  .topo > * { min-width: 0; }
  .marca-simbolo { width: 38px; }
  .marca .marca-nome { font-size: .95rem; }
  .busca-global { flex: 1 1 60px; min-width: 60px; }
  .troca-loja select, .loja-fixa { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topo .usuario .papel, .topo .usuario .nome, .topo .atalhos-botao { display: none; }
  .cad-abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; overflow: visible; white-space: normal; padding: .25rem; border-radius: 18px; }
  .cad-abas a { flex: auto; justify-content: center; padding: .45rem .2rem; font-size: 12px; border-radius: 14px; gap: .2rem; min-width: 0; }
  .cad-abas a span { flex: none; }
  .cobj-cockpit .vd-segmento, .cag-barra .vd-segmento { overflow: visible; flex-wrap: wrap; max-width: 100%; }
  .cobj-cockpit .vd-segmento button, .cag-barra .vd-segmento button { flex: 1 1 auto; text-align: center; }
  .cobj-cockpit header > div:first-child { flex: 1 1 100%; }
  .cag-barra .cag-titulo { flex: 1 1 100%; order: -1; text-align: center; }
  .ch-faixa-topo .cobj-faixa { gap: 8px; }
}

/* ---- Objetivo: modo Mapa mental e a SWOT dentro das visualizações (12/10/2026) */
.cobj-grafico.em-mapa .cobj-legenda { display: none; }
.cobj-grafico canvas[data-cobj-mapa] { cursor: grab; }
.cobj-zoom-mapa[hidden] { display: none !important; }
.cobj-swot-btn.on { background: rgba(159,240,255,.18); box-shadow: inset 0 0 0 1px rgba(159,240,255,.5); }
.cobj-swot-btn[hidden] { display: none !important; }
.cobj-swot { position: absolute; z-index: 4; top: 10px; right: 10px; width: min(560px, calc(100% - 20px)); padding: 12px 14px 10px; border-radius: 18px;
  background: rgba(4,22,44,.94); border: 1px solid rgba(159,240,255,.22); box-shadow: 0 18px 50px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cobj-swot[hidden] { display: none; }
.cobj-swot-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cobj-swot-cab b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(223,246,255,.75); }
.cobj-swot-cab a { font-size: 12px; color: #9ff0ff; text-decoration: none; margin-right: auto; }
.cobj-swot-cab a:hover { text-decoration: underline; }
.cobj-swot-cab button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(159,240,255,.1); color: #dff6ff; font-size: 16px; cursor: pointer; }
.cobj-swot-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cobj-swot-grade section { --q: #9ff0ff; padding: 8px 10px; border-radius: 12px; background: rgba(159,240,255,.04); box-shadow: inset 0 0 0 1px rgba(159,240,255,.1); border-top: 3px solid var(--q); min-width: 0; }
.cobj-swot-grade .q-forca { --q: #2fd39a; } .cobj-swot-grade .q-fraqueza { --q: #ff8a7a; } .cobj-swot-grade .q-oportunidade { --q: #ffcc4d; } .cobj-swot-grade .q-ameaca { --q: #c4b5fd; }
.cobj-swot-grade h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--q); display: flex; justify-content: space-between; }
.cobj-swot-grade h4 span { font-weight: 600; color: rgba(223,246,255,.5); }
.cobj-swot-grade ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 132px; overflow-y: auto; }
.cobj-swot-grade li button { width: 100%; text-align: left; border: 0; background: none; color: #dff6ff; font: inherit; font-size: 12.5px; line-height: 1.3; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.cobj-swot-grade li button:hover { background: rgba(159,240,255,.1); }
.cobj-swot-mais { margin-top: 4px; border: 1px dashed rgba(159,240,255,.3); background: none; color: rgba(223,246,255,.7); font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.cobj-swot-mais:hover { color: #fff; border-color: #9ff0ff; }
@media (max-width: 640px) {
  .cobj-swot { top: 6px; right: 6px; width: calc(100% - 12px); padding: 10px; }
  .cobj-swot-grade { grid-template-columns: 1fr; }
  .cobj-swot-grade ul { max-height: 90px; }
}

/* ---- Objetivo: matriz de Eisenhower como camada, SWOT estratégica e sugestões suspensas (12/10/2026) */
.cobj-matriz-btn.on, .cobj-sugs-btn.on { background: rgba(159,240,255,.18); box-shadow: inset 0 0 0 1px rgba(159,240,255,.5); }
.cobj-sugs-btn.tem span::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 8px #c4b5fd; vertical-align: middle; }
.cobj-sugs-flut { position: absolute; z-index: 4; top: 10px; left: 10px; width: min(440px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.cobj-sugs-flut[hidden] { display: none; }
.cobj-sugs-flut .cobj-sugs { margin: 0; padding-right: 40px; background: rgba(4,22,44,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cobj-sugs-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(159,240,255,.12); color: #dff6ff; font-size: 16px; cursor: pointer; }
.cobj-pop-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cobj-pop-quad button { --q: #9aa7b8; border: 1px solid rgba(159,240,255,.2); background: rgba(159,240,255,.05); color: rgba(223,246,255,.8); border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.cobj-pop-quad button::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--q); margin-right: 7px; vertical-align: 0; }
.cobj-pop-quad button.on { border-color: var(--q); color: #fff; background: color-mix(in srgb, var(--q) 18%, transparent); }
.cobj-pop-swot { display: grid; gap: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(223,246,255,.65); }
.cobj-pop-swot select { border: 1px solid rgba(159,240,255,.25); background: rgba(4,22,44,.9); color: #dff6ff; border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; max-width: 100%; }
.cobj-swot-leitura { margin: -2px 0 8px; font-size: 12.5px; color: rgba(223,246,255,.7); line-height: 1.4; }
.cobj-swot-leitura strong { color: #ff8a7a; font-weight: 700; } .cobj-swot-leitura strong.ok { color: #2fd39a; }
.cobj-swot-grade li button { display: flex; flex-direction: column; gap: 1px; }
.cobj-swot-grade li button .n { font-style: normal; font-size: 10.5px; color: #8ff0c8; }
.cobj-swot-grade li button .n.zero { color: #ff8a7a; }
.cobj-swot-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.cobj-swot-pe small { font-size: 11.5px; color: rgba(223,246,255,.55); flex: 1; min-width: 180px; }
.cobj-swot-ia { border: 1px solid rgba(196,181,253,.6); background: rgba(196,181,253,.14); color: #ede9fe; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cobj-swot-ia:disabled { opacity: .6; cursor: progress; }
.cobj-swot-tows { margin-top: 8px; display: grid; gap: 4px; }
.cobj-swot-tows > small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.cobj-tows-item { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: center; padding: 7px 8px 7px 10px; border-radius: 10px; background: rgba(196,181,253,.08); }
.cobj-tows-item b { font-size: 13px; color: #fff; }
.cobj-tows-item span { grid-column: 1; font-size: 11.5px; color: rgba(237,233,254,.7); }
.cobj-tows-item i { grid-column: 1; font-style: normal; font-size: 10.5px; color: rgba(223,246,255,.6); }
.cobj-tows-item i u { text-decoration: none; font-weight: 700; }
.cobj-tows-item button { grid-column: 2; grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(47,211,154,.2); color: #8ff0c8; font-size: 18px; font-weight: 700; cursor: pointer; }
.cobj-tows-item.ok { background: rgba(47,211,154,.12); }
.cobj-card[class*=" q-"] { box-shadow: inset 3px 0 0 var(--q), inset 0 0 0 1px rgba(159,240,255,.12); }
.cobj-card.atrasada[class*=" q-"] { box-shadow: inset 3px 0 0 var(--q), inset 0 0 0 1px rgba(255,138,122,.3); }
.cobj-card-q, .cobj-card-swot { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }
.cobj-card-q { color: var(--q, #9aa7b8); background: color-mix(in srgb, var(--q, #9aa7b8) 16%, transparent); }
.cobj-card-swot { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
@media (max-width: 640px) { .cobj-sugs-flut { top: 6px; left: 6px; width: calc(100% - 12px); } }

/* ---- Objetivo: Matriz e SWOT como vistas próprias + vista integrada embaixo (12/10/2026) */
.cobj-integrar { height: 34px; border-radius: 999px; border: 1px dashed rgba(159,240,255,.35); background: rgba(159,240,255,.05); color: #dff6ff; padding: 0 12px; font: inherit; font-size: 12.5px; cursor: pointer; max-width: 100%; }
.cobj-integrar:focus { outline: none; border-color: #9ff0ff; }
.cobj-vista2 { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(159,240,255,.2); }
.cobj-vista2[hidden] { display: none; }
.cobj-vista2-cab { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(223,246,255,.6); display: flex; align-items: center; gap: 8px; }
.cobj-vista2-cab b { color: #9ff0ff; }
.cobj-vista2-cab button { border: 0; background: rgba(159,240,255,.1); color: #dff6ff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.cobj-matriz { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 2px 12px; }
.cobj-matriz .cobj-quad { flex: none; border-top: 3px solid var(--q); min-height: 180px; }
.cobj-matriz .cobj-quad header b { color: var(--q); }
.cobj-matriz .cobj-quad header em { color: var(--q); background: color-mix(in srgb, var(--q) 14%, transparent); }
.cobj-matriz .cobj-quad.alvo { box-shadow: inset 0 0 0 2px var(--q); background: color-mix(in srgb, var(--q) 10%, transparent); }
.cobj-col-vazia { margin: 0; padding: 14px 8px; border-radius: 12px; border: 1px dashed rgba(159,240,255,.2); color: rgba(223,246,255,.4); font-size: 12.5px; text-align: center; }
.cobj-swotv { display: grid; gap: 12px; padding: 4px 2px 12px; }
.cobj-swotv > .cobj-swot-leitura { margin: 0; font-size: 13.5px; }
.cobj-swotv-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cobj-swotq { flex: none; border-top: 3px solid var(--q); }
.cobj-swotq header b { color: var(--q); }
.cobj-swotq header em { color: var(--q); background: color-mix(in srgb, var(--q) 14%, transparent); }
.cobj-swot-it { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(4,26,52,.55); box-shadow: inset 0 0 0 1px rgba(159,240,255,.12); }
.cobj-swot-it.vazio { box-shadow: inset 0 0 0 1px rgba(255,138,122,.35); }
.cobj-swot-it.alvo { box-shadow: inset 0 0 0 2px var(--q); background: color-mix(in srgb, var(--q) 10%, transparent); }
.cobj-swot-it-tit { all: unset; cursor: pointer; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.cobj-swot-it-tit:hover { color: var(--q); }
.cobj-swot-it > small { font-size: 12px; color: rgba(223,246,255,.6); }
.cobj-swot-it > small .atr { color: #ff8a7a; font-weight: 700; }
.cobj-swot-it .cobj-col-itens:empty { display: none; }
.cobj-swot-it .cobj-col-novo input { height: 34px; font-size: 13px; }
.cobj-swot-solto { flex: none; }
.cobj-swot-solto.alvo { box-shadow: inset 0 0 0 2px rgba(159,240,255,.6); }
.cobj-col-itens-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.cobj-col-itens-linha .cobj-card { flex: 1 1 240px; max-width: 320px; }
@media (max-width: 760px) {
  .cobj-matriz, .cobj-swotv-grade { grid-template-columns: 1fr; }
  .cobj-integrar { width: 100%; }
}

/* ---- Objetivo: barra "Ver como / Prazo / Junto", vista 2 por cima, chips de preenchimento, contexto da tarefa (12/10/2026) */
.cobj-barra-ver { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 18px;
  background: rgba(159,240,255,.07); box-shadow: inset 0 0 0 1px rgba(159,240,255,.18); }
.cobj-barra-ferr { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cobj-rot { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: rgba(223,246,255,.6); }
.cobj-barra-ver .cobj-modos button { padding: 8px 14px; font-size: 13.5px; }
.cobj-sel { height: 36px; border-radius: 999px; border: 1px solid rgba(159,240,255,.3); background: rgba(4,22,44,.7); color: #dff6ff; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; max-width: 100%; }
.cobj-sel:focus { outline: none; border-color: #9ff0ff; box-shadow: 0 0 0 3px rgba(94,198,224,.25); }
.cobj-flut-btn.on { background: rgba(159,240,255,.18); box-shadow: inset 0 0 0 1px rgba(159,240,255,.5); }
.cobj-grafico .cobj-vista2 { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(159,240,255,.2); }
.cobj-grafico .cobj-vista2.flutuante { position: absolute; z-index: 4; top: 10px; right: 10px; bottom: 10px; width: min(620px, calc(100% - 20px)); margin: 0; padding: 12px 14px; overflow-y: auto; border: 0; border-radius: 18px;
  background: rgba(4,22,44,.95); box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(159,240,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cobj-grafico.em-quadro .cobj-vista2.flutuante { position: static; width: auto; }
.cobj-vista2.flutuante .cobj-matriz, .cobj-vista2.flutuante .cobj-swotv-grade { grid-template-columns: 1fr; }
.cobj-vista2.flutuante .cobj-quadro { flex-direction: column; }
.cobj-vista2.flutuante .cobj-col { flex-basis: auto; }
.cobj-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cobj-chips i { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.5); margin-right: 2px; }
.cobj-chips button { border: 1px solid rgba(159,240,255,.22); background: rgba(159,240,255,.05); color: #dff6ff; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11.5px; cursor: pointer; }
.cobj-chips button:hover { border-color: rgba(159,240,255,.6); }
.cobj-chips button.on { background: rgba(159,240,255,.22); border-color: #9ff0ff; color: #fff; font-weight: 700; }
.cobj-pop-ctx { display: flex; flex-wrap: wrap; gap: 4px; }
.cobj-pop-ctx em { --c: #9ff0ff; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 999px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobj-grafico-pop input[type=number] { width: 72px; border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.07); color: #dff6ff; border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12px; }
@media (max-width: 760px) {
  .cobj-barra-ver { padding: 8px; gap: 6px; }
  .cobj-barra-ver .cobj-modos { flex: 1 1 100%; }
  .cobj-grafico .cobj-vista2.flutuante { top: 6px; right: 6px; bottom: 6px; width: calc(100% - 12px); }
}
.cobj-barra-ver .cobj-sel { width: auto; flex: 0 0 auto; }
.cobj-barra-ver .cobj-flut-btn { height: 34px; }
@media (max-width: 640px) { .cobj-flut-btn span { display: inline !important; } }

/* ---- Objetivo: Feed (stories + posts) e Quadro livre (12/10/2026) */
.cobj-feed { max-width: 620px; margin: 0 auto; display: grid; gap: 12px; padding: 4px 0 20px; }
.cobj-stories { display: flex; gap: 14px; overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: none; }
.cobj-stories::-webkit-scrollbar { display: none; }
.cobj-story { flex: none; width: 76px; border: 0; background: none; color: #dff6ff; font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 4px; padding: 0; }
.cobj-story-anel { width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: var(--anel); display: grid; place-items: center; box-shadow: 0 0 18px -4px var(--c); }
.cobj-story.lida .cobj-story-anel { background: rgba(159,240,255,.14); box-shadow: none; opacity: .7; }
.cobj-story-miolo { width: 100%; height: 100%; border-radius: 50%; background: #06203f; box-shadow: inset 0 0 0 2px #031a36; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--c); }
.cobj-story b { font-size: 11.5px; font-weight: 600; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobj-story small { font-size: 10.5px; color: rgba(223,246,255,.55); margin-top: -3px; }
.cobj-post { position: relative; display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; background: rgba(4,26,52,.9); box-shadow: inset 0 0 0 1px rgba(159,240,255,.12); overflow: hidden; }
.cobj-post.vez { box-shadow: inset 0 0 0 1.5px #9ff0ff, 0 0 40px -10px #9ff0ff; background: linear-gradient(160deg, rgba(11,98,189,.35), rgba(4,26,52,.95)); }
.cobj-post.atrasada { box-shadow: inset 0 0 0 1px rgba(255,138,122,.5); }
.cobj-post.feita { opacity: .75; }
.cobj-post.feita h3 button { text-decoration: line-through; color: rgba(223,246,255,.6); }
.cobj-post.nota { background: rgba(28,20,64,.9); box-shadow: inset 0 0 0 1px rgba(196,181,253,.3); }
.cobj-post header { display: flex; align-items: center; gap: 10px; }
.cobj-post header div { flex: 1; min-width: 0; display: grid; }
.cobj-post header b { font-size: 13.5px; color: #fff; }
.cobj-post header small { font-size: 12px; color: rgba(223,246,255,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobj-avatar { --c: #9ff0ff; flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, #06203f); color: var(--c); display: grid; place-items: center; font-weight: 800; font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--c); }
.cobj-post-vez { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #031a36; background: #9ff0ff; border-radius: 999px; padding: 4px 10px; animation: cobjPulsoVez 1.6s ease-in-out infinite; }
@keyframes cobjPulsoVez { 50% { box-shadow: 0 0 0 7px rgba(159,240,255,.12); } }
.cobj-post-q { --c: #9aa7b8; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 999px; padding: 3px 9px; }
.cobj-post h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.cobj-post h3 button { all: unset; cursor: pointer; color: #fff; }
.cobj-post h3 button:hover { color: #9ff0ff; }
.cobj-post.vez h3 { font-size: 22px; }
.cobj-post-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cobj-post-meta:empty { display: none; }
.cobj-post-meta span { --c: #9ff0ff; font-size: 11.5px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 999px; padding: 2px 9px; }
.cobj-post-txt { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(237,233,254,.85); }
.cobj-post footer { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid rgba(159,240,255,.1); padding-top: 8px; }
.cobj-post footer button, .cobj-post footer a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(159,240,255,.07); color: #dff6ff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.cobj-post footer button:hover, .cobj-post footer a:hover { background: rgba(159,240,255,.16); }
.cobj-post footer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cobj-post-like { background: rgba(47,211,154,.14) !important; color: #8ff0c8 !important; }
.cobj-post.feita .cobj-post-like { background: #2fd39a !important; color: #04281c !important; }
.cobj-post.curtiu::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; font-weight: 900; color: #2fd39a; text-shadow: 0 0 40px #2fd39a; animation: cobjCurtiu .5s ease-out forwards; pointer-events: none; }
@keyframes cobjCurtiu { 0% { transform: scale(.3); opacity: 0; } 40% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.cobj-post.placar { grid-template-columns: repeat(3, auto) 1fr; align-items: center; gap: 10px 18px; background: linear-gradient(135deg, rgba(47,211,154,.14), rgba(159,240,255,.05)); }
.cobj-placar-n { display: grid; }
.cobj-placar-n b { font-size: 26px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.cobj-placar-n b i { font-style: normal; font-size: 14px; color: rgba(223,246,255,.5); }
.cobj-placar-n small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cobj-post.placar p { margin: 0; grid-column: 1 / -1; font-size: 13.5px; color: rgba(223,246,255,.8); }
.cobj-feed-sep { margin: 8px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #2fd39a; }
.cobj-feed-fim { margin: 8px 0 0; text-align: center; font-size: 13px; color: rgba(223,246,255,.45); }
/* stories em tela cheia */
.cobj-story-ver { position: fixed; inset: 0; z-index: 1000; background: rgba(2,10,22,.92); display: grid; place-items: center; padding: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cobj-story-ver[hidden] { display: none; }
body.cobj-story-aberta { overflow: hidden; }
.cobj-st-caixa { --c: #9ff0ff; position: relative; width: min(440px, 100%); height: min(760px, 100%); border-radius: 26px; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr auto;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 28%, #06203f), #031226 60%); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(159,240,255,.2); }
.cobj-st-barras { display: flex; gap: 4px; padding: 10px 12px 0; }
.cobj-st-barras i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); }
.cobj-st-barras i.ok { background: #fff; } .cobj-st-barras i.on { background: linear-gradient(90deg, #fff 60%, rgba(255,255,255,.3)); }
.cobj-st-caixa header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.cobj-st-caixa header div { flex: 1; display: grid; } .cobj-st-caixa header b { color: #fff; font-size: 14px; } .cobj-st-caixa header small { color: rgba(223,246,255,.65); font-size: 12px; }
.cobj-st-caixa header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; }
.cobj-st-corpo { display: grid; align-content: center; gap: 12px; padding: 20px 26px; text-align: center; }
.cobj-st-corpo em { font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); font-weight: 800; }
.cobj-st-corpo h2 { margin: 0; font-size: 30px; line-height: 1.2; color: #fff; }
.cobj-st-corpo p { margin: 0; color: rgba(223,246,255,.7); font-size: 14px; }
.cobj-st-toque { position: absolute; inset: 60px 0 80px; display: grid; grid-template-columns: 1fr 1fr; }
.cobj-st-toque span { cursor: pointer; }
.cobj-st-caixa footer { position: relative; display: flex; gap: 8px; padding: 14px; }
.cobj-st-caixa footer button { flex: 1; height: 46px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cobj-st-feita { flex: 2 !important; background: #2fd39a !important; color: #04281c !important; box-shadow: 0 0 24px -4px #2fd39a; }
/* quadro livre */
.cobj-quadro-livre { display: grid; gap: 8px; }
.cq-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cq-barra button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.06); color: #dff6ff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cq-barra button.on { background: rgba(159,240,255,.22); border-color: #9ff0ff; color: #fff; }
.cq-barra button em { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(159,240,255,.15); font-size: 11px; }
.cq-barra small { flex: 1 1 100%; font-size: 11.5px; color: rgba(223,246,255,.5); }
.cq-picker { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(4,26,52,.85); box-shadow: inset 0 0 0 1px rgba(159,240,255,.15); }
.cq-picker input[type=search] { height: 36px; border-radius: 10px; border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.06); color: #dff6ff; padding: 0 12px; font: inherit; font-size: 13px; }
.cq-picker-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; max-height: 220px; overflow-y: auto; }
.cq-picker-lista label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; font-size: 13px; color: #dff6ff; cursor: pointer; }
.cq-picker-lista label:hover { background: rgba(159,240,255,.08); }
.cq-picker-lista label.on { background: rgba(47,211,154,.1); }
.cq-picker-lista label.nota span { color: #ede9fe; }
.cq-picker-lista label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-picker-lista label small { font-size: 10.5px; color: rgba(223,246,255,.5); }
.cq-area { position: relative; height: clamp(420px, 62vh, 760px); overflow: hidden; border-radius: 18px; background: rgba(3,18,38,.9) radial-gradient(rgba(159,240,255,.12) 1px, transparent 1px) 0 0 / 28px 28px; box-shadow: inset 0 0 0 1px rgba(159,240,255,.15); cursor: grab; touch-action: none; }
.cq-mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cq-item { position: absolute; width: 260px; cursor: grab; }
.cq-item .cobj-card { box-shadow: inset 0 0 0 1px rgba(159,240,255,.3), 0 14px 30px -14px rgba(0,0,0,.8); }
.cq-item.origem .cobj-card { box-shadow: inset 0 0 0 2px #ffcc4d, 0 0 24px -6px #ffcc4d; }
.cobj-quadro-livre.ligando .cq-item { cursor: crosshair; }
.cq-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #06203f; color: #dff6ff; box-shadow: inset 0 0 0 1px rgba(159,240,255,.4); font-size: 14px; cursor: pointer; display: none; }
.cq-item:hover .cq-x { display: block; }
.cq-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.cq-links path { fill: none; stroke: rgba(159,240,255,.55); stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.cq-links .cq-rot { pointer-events: all; cursor: pointer; }
.cq-links .cq-rot rect { fill: rgba(4,26,52,.95); stroke: rgba(159,240,255,.4); }
.cq-links .cq-rot text { fill: #dff6ff; font-size: 11px; font-weight: 600; text-anchor: middle; }
.cq-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 40px; text-align: center; color: rgba(223,246,255,.5); font-size: 14px; pointer-events: none; }
@media (max-width: 640px) { .cobj-post h3 { font-size: 17px; } .cobj-post.placar { grid-template-columns: repeat(3, auto); } .cq-item { width: 220px; } .cobj-st-corpo h2 { font-size: 26px; } }
.cq-area, .cq-area * { user-select: none; -webkit-user-select: none; }
.cobj-sel, .cobj-cockpit select, .cobj-grafico-pop select { color-scheme: dark; }
.cobj-sel option, .cobj-cockpit select option, .cobj-grafico-pop select option, .cobj-grafico-pop select optgroup { background: #06203f; color: #dff6ff; }

/* quadro livre: alça para ligar por arrasto, fio provisório, pontinho da ligação sem nome */
.cq-alca { position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #06203f; box-shadow: inset 0 0 0 2px #9ff0ff; cursor: crosshair; opacity: .55; z-index: 2; }
.cq-alca:hover, .cq-item:hover .cq-alca { opacity: 1; box-shadow: inset 0 0 0 2px #9ff0ff, 0 0 12px #9ff0ff; }
.cq-alca::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #9ff0ff; }
.cq-item.alvo .cobj-card { box-shadow: inset 0 0 0 2px #2fd39a, 0 0 24px -6px #2fd39a; }
.cq-links .cq-fio { stroke: #9ff0ff; stroke-dasharray: 6 6; stroke-width: 2.5; }
.cq-links .cq-pto circle { fill: rgba(4,26,52,.95); stroke: rgba(159,240,255,.6); stroke-width: 1.5; }
.cq-links .cq-pto:hover circle { fill: #9ff0ff; }

/* ---- Quadro livre v2: vários quadros, blocos, menu, sugestões; vistas maiores e tela cheia (12/10/2026) */
.cobj-grafico canvas { height: clamp(460px, 66vh, 820px); }
.cq-area { height: clamp(540px, 72vh, 900px); }
.cobj-cockpit.cheia .cobj-numeros, .cobj-cockpit.cheia .cobj-barras, .cobj-cockpit.cheia .cobj-agora, .cobj-cockpit.cheia .cobj-pessoais, .cobj-cockpit.cheia .cobj-rodape, .cobj-cockpit.cheia .cobj-legenda { display: none !important; }
.cobj-cockpit.cheia .cobj-grafico canvas { height: calc(100vh - 170px); min-height: 420px; }
.cobj-cockpit.cheia .cq-area { height: calc(100vh - 260px); min-height: 420px; }
.cobj-cockpit.cheia .cobj-vista { min-height: calc(100vh - 190px); }
.cobj-cockpit.cheia .cobj-feed { max-width: 760px; }
.cq-quadros { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px; border-radius: 14px; background: rgba(159,240,255,.05); }
.cq-quadros button { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: rgba(223,246,255,.75); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cq-quadros button.on { background: rgba(159,240,255,.18); color: #fff; }
.cq-quadros .cq-novo { color: #9ff0ff; border: 1px dashed rgba(159,240,255,.35); }
.cq-quadros .cq-mini { font-size: 11.5px; font-weight: 500; color: rgba(223,246,255,.5); margin-left: auto; }
.cq-quadros .cq-mini + .cq-mini { margin-left: 0; }
.cq-quadros .cq-mini.conf { color: #ff8a7a; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cq-chips button { border: 1px solid rgba(159,240,255,.22); background: rgba(159,240,255,.05); color: #dff6ff; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.cq-chips button:hover { border-color: #9ff0ff; color: #fff; }
.cq-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; padding: 10px; border-radius: 14px; background: rgba(4,26,52,.85); box-shadow: inset 0 0 0 1px rgba(159,240,255,.15); }
.cq-menu button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(159,240,255,.15); background: rgba(159,240,255,.04); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cq-menu button:hover { background: rgba(159,240,255,.12); border-color: rgba(159,240,255,.4); }
.cq-menu button small { display: block; font-size: 11px; font-weight: 400; color: rgba(223,246,255,.55); }
.cq-menu button svg, .cq-bloco .cq-ico svg { width: 18px; height: 18px; fill: none; stroke: #9ff0ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cq-menu button b { width: 18px; text-align: center; font-size: 17px; color: #9ff0ff; }
.cq-menu-sep { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(223,246,255,.5); margin-top: 4px; }
.cq-sw { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.cq-sw.amarelo { background: #ffe08a; } .cq-sw.azul { background: #8fd6ff; }
.cq-sugs { display: grid; gap: 4px; padding: 10px; border-radius: 14px; background: rgba(196,181,253,.08); box-shadow: inset 0 0 0 1px rgba(196,181,253,.3); }
.cq-sugs-cab { display: flex; align-items: center; gap: 8px; }
.cq-sugs-cab b { flex: 1; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.cq-sugs-cab button { border: 1px solid rgba(196,181,253,.5); background: none; color: #ede9fe; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.cq-sugs p { margin: 0; font-size: 13px; color: rgba(237,233,254,.7); }
.cq-sug { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(4,26,52,.6); font-size: 13px; color: #fff; }
.cq-sug span i { font-style: normal; color: #c4b5fd; }
.cq-sug em { font-style: normal; font-size: 11px; color: #c4b5fd; }
.cq-sug button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(47,211,154,.2); color: #8ff0c8; font-size: 16px; font-weight: 700; cursor: pointer; }
.cq-vazio { pointer-events: none; }
.cq-item.tipo-area { z-index: 0; width: auto; }
.cq-item { z-index: 1; }
.cq-bloco { position: relative; border-radius: 14px; }
.cq-pega { display: block; height: 10px; border-radius: 14px 14px 0 0; cursor: grab; opacity: .35; background: repeating-linear-gradient(90deg, transparent 0 3px, currentColor 3px 5px) center / 40px 3px no-repeat; }
.cq-texto { padding: 0 12px 10px; color: #1a1a1a; box-shadow: 0 14px 30px -14px rgba(0,0,0,.8); min-height: 90px; }
.cq-texto.cor-amarelo { background: #ffe9a3; } .cq-texto.cor-azul { background: #bfe6ff; } .cq-texto.cor-verde { background: #c6f3d9; } .cq-texto.cor-rosa { background: #ffd0dc; } .cq-texto.cor-roxo { background: #ddd3ff; }
.cq-texto-corpo { min-height: 56px; font-size: 14px; line-height: 1.4; outline: none; white-space: pre-wrap; word-break: break-word; }
[data-cq-edit]:empty::before { content: attr(data-ph); color: rgba(0,0,0,.35); }
.cq-titulo [data-cq-edit]:empty::before, .cq-area-nome:empty::before, .cq-foto figcaption:empty::before { color: rgba(223,246,255,.4); }
.cq-cores { display: flex; gap: 4px; margin-top: 6px; }
.cq-cores button { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); cursor: pointer; padding: 0; }
.cq-cores button.on { box-shadow: 0 0 0 2px #1a1a1a; }
.cq-cores .c-amarelo { background: #ffe08a; } .cq-cores .c-azul { background: #8fd6ff; } .cq-cores .c-verde { background: #9fe8c2; } .cq-cores .c-rosa { background: #ffb4c8; } .cq-cores .c-roxo { background: #c4b5fd; }
.cq-titulo { padding: 0 8px 6px; min-width: 200px; }
.cq-titulo [data-cq-edit] { font-size: 24px; font-weight: 800; color: #fff; outline: none; }
.cq-foto { margin: 0; background: rgba(4,26,52,.9); box-shadow: inset 0 0 0 1px rgba(159,240,255,.25), 0 14px 30px -14px rgba(0,0,0,.8); overflow: hidden; }
.cq-foto img { display: block; width: 100%; max-height: 260px; object-fit: cover; pointer-events: none; }
.cq-foto figcaption { padding: 6px 10px; font-size: 12.5px; color: #dff6ff; outline: none; }
.cq-link, .cq-cliente { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(4,26,52,.92); box-shadow: inset 0 0 0 1px rgba(159,240,255,.3); color: #fff; text-decoration: none; }
.cq-link:hover, .cq-cliente:hover { box-shadow: inset 0 0 0 1px #9ff0ff; }
.cq-link b, .cq-cliente b { display: block; font-size: 14px; }
.cq-link small, .cq-cliente small { display: block; font-size: 11.5px; color: rgba(223,246,255,.55); }
.cq-cliente div { min-width: 0; }
.cq-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(159,240,255,.12); display: grid; place-items: center; flex: none; }
.cq-numero { padding: 10px 14px; background: linear-gradient(135deg, rgba(47,211,154,.14), rgba(4,26,52,.95)); box-shadow: inset 0 0 0 1px rgba(47,211,154,.35); min-width: 180px; }
.cq-numero small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cq-numero b { display: block; font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cq-numero i { display: block; font-style: normal; font-size: 11.5px; color: rgba(223,246,255,.55); }
.cq-numero.alerta { box-shadow: inset 0 0 0 1px rgba(255,138,122,.6); } .cq-numero.alerta b { color: #ff8a7a; }
.cq-area-bloco { border-radius: 18px; resize: both; overflow: hidden; min-width: 200px; min-height: 120px; }
.cq-area-bloco.cor-azul { background: rgba(143,214,255,.07); box-shadow: inset 0 0 0 1.5px rgba(143,214,255,.35); }
.cq-area-nome { padding: 8px 14px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(159,240,255,.8); outline: none; }
.cq-item.tipo-area .cq-alca { display: none; }
@media (max-width: 760px) { .cq-area { height: 70vh; } .cq-menu { grid-template-columns: 1fr; } }
.cq-pop-novo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cq-pop-novo button { border: 1px solid rgba(159,240,255,.2); background: rgba(159,240,255,.06); color: #fff; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.cq-pop-novo button:hover { background: rgba(159,240,255,.16); border-color: #9ff0ff; }
.cq-links { z-index: 0; }
.cq-mundo { z-index: 1; }
.cq-links .cq-fio { z-index: 2; }

/* ---- Quadro do sistema: diagnóstico, projeções e sugestões ligadas (13/10/2026) */
.cq-quadros .cq-sistema { color: #ffe08a; border: 1px dashed rgba(255,224,138,.45); }
.cq-quadros .cq-sistema.on { background: rgba(255,204,77,.16); color: #fff; }
.cq-sistema-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,204,77,.08); box-shadow: inset 0 0 0 1px rgba(255,204,77,.3); font-size: 12.5px; color: rgba(223,246,255,.8); }
.cq-sistema-cab b { color: #ffe08a; }
.cq-sistema-cab button { margin-left: auto; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,224,138,.5); background: none; color: #ffe08a; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cq-sugestao { padding: 10px 12px; background: linear-gradient(135deg, rgba(196,181,253,.16), rgba(4,26,52,.95)); box-shadow: inset 3px 0 0 #c4b5fd, inset 0 0 0 1px rgba(196,181,253,.3); min-width: 240px; }
.cq-sugestao small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.cq-sugestao b { display: block; font-size: 14px; color: #fff; margin: 2px 0; }
.cq-sugestao p { margin: 0 0 6px; font-size: 12px; color: rgba(237,233,254,.75); line-height: 1.35; }
.cq-sugestao button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(47,211,154,.2); color: #8ff0c8; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cq-sugestao button:disabled { background: #2fd39a; color: #04281c; }
.cq-diag { padding: 10px 12px; background: rgba(4,26,52,.92); box-shadow: inset 0 0 0 1px rgba(159,240,255,.3); min-width: 240px; }
.cq-diag.ruim { box-shadow: inset 3px 0 0 #ff8a7a, inset 0 0 0 1px rgba(255,138,122,.35); }
.cq-diag.bom { box-shadow: inset 3px 0 0 #2fd39a, inset 0 0 0 1px rgba(47,211,154,.35); }
.cq-diag small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.55); }
.cq-diag b { display: block; font-size: 14px; color: #fff; margin: 2px 0; }
.cq-diag p { margin: 0; font-size: 12px; color: rgba(223,246,255,.75); line-height: 1.35; }
.cq-area-bloco.cor-ouro { background: rgba(255,204,77,.06); box-shadow: inset 0 0 0 1.5px rgba(255,204,77,.35); }
.cq-area-bloco.cor-roxo { background: rgba(196,181,253,.06); box-shadow: inset 0 0 0 1.5px rgba(196,181,253,.35); }
.cq-area-bloco.cor-verde { background: rgba(47,211,154,.05); box-shadow: inset 0 0 0 1.5px rgba(47,211,154,.3); }

/* quadro: fixar e agrupar */
.cq-pin { position: absolute; top: -8px; right: 18px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #06203f; color: #dff6ff; box-shadow: inset 0 0 0 1px rgba(159,240,255,.4); cursor: pointer; display: none; place-items: center; }
.cq-pin svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cq-item:hover .cq-pin, .cq-pin.on { display: grid; }
.cq-pin.on { background: #ffcc4d; color: #3a2a00; box-shadow: 0 0 10px rgba(255,204,77,.6); }
.cq-item.fixo { cursor: default; }
.cq-item.fixo > .cq-bloco, .cq-item.fixo > .cobj-card { box-shadow: inset 0 0 0 1.5px rgba(255,204,77,.55); }
.cq-item.agrupado > .cobj-card { box-shadow: inset 0 0 0 1px rgba(143,214,255,.45); }
.cq-area-cab { display: flex; align-items: baseline; gap: 10px; padding-right: 12px; }
.cq-area-cab .cq-area-nome { flex: none; }
.cq-area-cab small { font-size: 11px; color: rgba(223,246,255,.45); }
.cq-item.tipo-area .cq-pin { right: 6px; top: 6px; }

/* ---- recompensas, stories com resumo e cronômetro (13/10/2026) */
.cobj-pontos-voa { position: fixed; z-index: 1200; transform: translate(-50%, 0); font-size: 20px; font-weight: 900; color: #ffe08a; text-shadow: 0 0 14px #ffcc4d; pointer-events: none; animation: cobjVoa 1.1s ease-out forwards; }
@keyframes cobjVoa { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -8px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -54px) scale(1); } }
.cobj-placar-n.pts b { color: #ffe08a; text-shadow: 0 0 16px rgba(255,204,77,.5); }
.cobj-st-caixa.resumo { grid-template-rows: auto auto 1fr auto; }
.cobj-st-grade { display: grid; gap: 8px; padding: 10px 14px; overflow-y: auto; align-content: start; }
.cobj-st-mini { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background .25s, opacity .25s; }
.cobj-st-mini b { font-size: 14px; color: #fff; line-height: 1.25; }
.cobj-st-mini small { grid-column: 2; font-size: 11.5px; color: rgba(223,246,255,.6); }
.cobj-st-mini.atrasada small { color: #ff8a7a; }
.cobj-st-mini.feita { background: rgba(47,211,154,.14); opacity: .8; }
.cobj-st-mini.feita b { text-decoration: line-through; color: rgba(223,246,255,.6); }
.cobj-st-check { grid-row: 1 / span 2; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cobj-st-check i { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.55); box-sizing: border-box; transition: all .2s; }
.cobj-st-check:hover i { border-color: #2fd39a; box-shadow: 0 0 0 5px rgba(47,211,154,.18); }
.cobj-st-mini.feita .cobj-st-check i { background: #2fd39a; border-color: #2fd39a; box-shadow: 0 0 16px #2fd39a; }
.cobj-st-relogio { text-align: center; padding: 0 14px 6px; min-height: 22px; }
.cobj-st-relogio small { font-size: 12px; color: rgba(223,246,255,.6); display: block; }
.cobj-st-relogio.on b { display: block; font-size: 36px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-shadow: 0 0 20px var(--c); }
.cobj-st-relogio.on i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff8a7a; box-shadow: 0 0 10px #ff8a7a; animation: cobjPisca 1s ease-in-out infinite; vertical-align: middle; margin-right: 6px; }
@keyframes cobjPisca { 50% { opacity: .25; } }
.cobj-st-comecar { background: rgba(159,240,255,.18) !important; color: #9ff0ff !important; }
.cobj-st-parar { background: rgba(255,138,122,.2) !important; color: #ffb3a8 !important; }
.cobj-st-caixa footer button[data-st-mais] { flex: 0 0 46px !important; font-size: 20px; }
.cobj-st-menu { position: absolute; left: 14px; right: 14px; bottom: 72px; display: grid; gap: 4px; padding: 8px; border-radius: 16px; background: rgba(4,22,44,.97); box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(159,240,255,.25); z-index: 3; }
.cobj-st-menu[hidden] { display: none; }
.cobj-st-menu button { height: 40px; border: 0; border-radius: 10px; background: rgba(159,240,255,.06); color: #dff6ff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; padding: 0 12px; }
.cobj-st-menu button:hover { background: rgba(159,240,255,.16); }
.cobj-st-dominos { display: flex; gap: 6px; padding: 6px 14px 2px; overflow-x: auto; scrollbar-width: none; }
.cobj-st-dominos span { --c: #9ff0ff; flex: none; min-width: 64px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.06); border-left: 3px solid var(--c); display: grid; }
.cobj-st-dominos span b { font-size: 11px; color: #fff; white-space: nowrap; }
.cobj-st-dominos span small { font-size: 10px; color: rgba(223,246,255,.6); white-space: nowrap; }
.cobj-st-dominos span.ok { background: rgba(47,211,154,.18); border-color: #2fd39a; }
.cobj-st-dominos span.agora { background: rgba(255,204,77,.18); box-shadow: 0 0 16px rgba(255,204,77,.35); }
.cobj-st-caixa.unica { grid-template-rows: auto auto auto 1fr auto auto; }
.cobj-st-caixa.unica .cobj-st-corpo h2 { font-size: 26px; }
/* quadro: sinal pelas ligações, destaque e pulso */
.cq-links path { transition: stroke .2s, stroke-width .2s, opacity .2s; }
.cq-links path.on { stroke: #9ff0ff; stroke-width: 3.5; filter: drop-shadow(0 0 6px #9ff0ff); }
.cq-links path.apagada { opacity: .25; }
.cq-links .cq-luz { fill: #fff; filter: drop-shadow(0 0 8px #9ff0ff) drop-shadow(0 0 16px #9ff0ff); }
.cq-item.cq-ping > .cobj-card, .cq-item.cq-ping > .cq-bloco { animation: cqPing .9s ease-out; }
@keyframes cqPing { 0% { box-shadow: 0 0 0 0 rgba(159,240,255,.9), inset 0 0 0 2px #9ff0ff; } 100% { box-shadow: 0 0 0 26px rgba(159,240,255,0), inset 0 0 0 1px rgba(159,240,255,.3); } }

/* ==========================================================================
   Modo FUTURISTA (13/10/2026) — o visual da central de comando em tudo.
   Mesmas variáveis do tema escuro, retintadas no azul-marinho/ciano do
   painel de objetivos; mais a malha de pontos no fundo, os brilhos nos
   elementos ativos, os rótulos em caixa alta espaçada e a linha HUD no topo.
   ========================================================================== */
:root[data-tema="futuro"] {
  --tinta:        #e6f4ff;
  --tinta-media:  rgba(223, 246, 255, .74);
  --tinta-fraca:  rgba(223, 246, 255, .52);

  --acento:       #6fd6f0;
  --acento-forte: #9ff0ff;
  --acento-fraco: rgba(159, 240, 255, .14);
  --acento-sombra: rgba(94, 198, 224, .55);

  --ok:           #2fd39a;  --ok-fraco:     rgba(47, 211, 154, .16);
  --alerta:       #ffcc4d;  --alerta-fraco: rgba(255, 204, 77, .15);
  --erro:         #ff8a7a;  --erro-fraco:   rgba(255, 138, 122, .16);
  --roxo:         #c4b5fd;  --roxo-fraco:   rgba(196, 181, 253, .18);
  --pre:          #f0a3c6;  --pre-fraco:    rgba(230, 120, 175, .17);

  --bloco:         rgba(159, 240, 255, .05);
  --bloco-alto:    rgba(159, 240, 255, .07);
  --bloco-cabeca:  rgba(159, 240, 255, .06);
  --trilho:        rgba(159, 240, 255, .10);

  --enche-agendado:    rgba(159, 240, 255, .13);
  --enche-pre:         rgba(235, 110, 175, .34);
  --enche-confirmado:  rgba( 70, 180, 216, .34);
  --enche-compareceu:  rgba(155,  95, 225, .38);
  --enche-patologia:   rgba(250, 175,  55, .30);
  --enche-comprou:     rgba( 42, 200, 120, .34);
  --enche-nao-comprou: rgba(250,  95,  85, .30);

  --vidro:       linear-gradient(160deg, rgba(10, 50, 92, .55), rgba(4, 22, 44, .78));
  --vidro-alto:  linear-gradient(160deg, rgba(14, 64, 112, .66), rgba(5, 28, 56, .86));
  --vidro-botao: rgba(159, 240, 255, .10);
  --desfoque:    saturate(160%) blur(22px);

  --brilho:      inset 0 1px 0 rgba(159,240,255,.22),
                 inset 0 0 0 1px rgba(159,240,255,.14);
  --sombra:      var(--brilho), 0 16px 40px rgba(0, 8, 22, .55);
  --sombra-mini: inset 0 1px 0 rgba(159,240,255,.18), 0 3px 10px rgba(0, 8, 22, .45);
  --sombra-alta: var(--brilho), 0 26px 60px rgba(0, 8, 22, .65), 0 0 40px -10px rgba(94,198,224,.35);

  --campo:        rgba(0, 10, 26, .45);
  --campo-sombra: inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(159,240,255,.12);

  --divisor:       rgba(159,240,255,.14);
  --divisor-fraco: rgba(159,240,255,.07);

  --fundo-base: #031226;
  --aurora:
    radial-gradient(rgba(159,240,255,.09) 1px, transparent 1.5px) 0 0 / 28px 28px,
    radial-gradient(1200px 700px at 10% -10%, rgba(11, 98, 189, .45), transparent 62%),
    radial-gradient(900px 600px at 95% 0%,   rgba(3, 145, 178, .30), transparent 60%),
    radial-gradient(1100px 760px at 50% 115%, rgba(47, 211, 154, .14), transparent 62%);
}
:root[data-tema="futuro"] .marca-simbolo { background: #fff; border-radius: 7px; padding: 2px 4px; width: 58px; }
:root[data-tema="futuro"] .marca .marca-nome { color: var(--tinta); }
:root[data-tema="futuro"] .marca .marca-nome span { color: var(--acento-forte); }
:root[data-tema="futuro"] .topo { box-shadow: inset 0 -1px 0 rgba(159,240,255,.25), inset 0 1px 0 rgba(159,240,255,.12), 0 10px 40px -20px rgba(94,198,224,.6); }
:root[data-tema="futuro"] .topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #9ff0ff 30%, #2fd39a 70%, transparent); opacity: .7; }
:root[data-tema="futuro"] .topo { position: sticky; }
:root[data-tema="futuro"] h1, :root[data-tema="futuro"] h2 { letter-spacing: -.01em; text-shadow: 0 0 24px rgba(159,240,255,.18); }
:root[data-tema="futuro"] .cartao-titulo, :root[data-tema="futuro"] .cartao > h2:first-child, :root[data-tema="futuro"] .cartao > h3:first-child { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-forte); font-weight: 800; }
:root[data-tema="futuro"] .cartao { position: relative; }
:root[data-tema="futuro"] .cartao::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(159,240,255,.6), transparent); pointer-events: none; }
:root[data-tema="futuro"] .menu a.ativo { background: rgba(159,240,255,.12); color: #9ff0ff; box-shadow: inset 2px 0 0 #9ff0ff, 0 0 24px -8px rgba(159,240,255,.8); }
:root[data-tema="futuro"] .menu a:hover { background: rgba(159,240,255,.07); }
:root[data-tema="futuro"] .btn-primario, :root[data-tema="futuro"] .btn.btn-primario { background: linear-gradient(135deg, #0391b2, #0b62bd); color: #fff; box-shadow: 0 0 0 1px rgba(159,240,255,.35), 0 10px 26px -10px rgba(3,145,178,.9); }
:root[data-tema="futuro"] .btn-primario:hover { box-shadow: 0 0 0 1px #9ff0ff, 0 12px 30px -8px rgba(94,198,224,.9); }
:root[data-tema="futuro"] thead th { color: rgba(159,240,255,.7); letter-spacing: .12em; font-size: .68rem; border-bottom-color: rgba(159,240,255,.22); }
:root[data-tema="futuro"] tbody tr:hover { background: rgba(159,240,255,.05); }
:root[data-tema="futuro"] input, :root[data-tema="futuro"] select, :root[data-tema="futuro"] textarea { color-scheme: dark; }
:root[data-tema="futuro"] input:focus, :root[data-tema="futuro"] select:focus, :root[data-tema="futuro"] textarea:focus { box-shadow: 0 0 0 3px rgba(94,198,224,.3), 0 0 18px -4px rgba(159,240,255,.6); }
:root[data-tema="futuro"] .etiqueta, :root[data-tema="futuro"] .tag, :root[data-tema="futuro"] .chip { letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }
:root[data-tema="futuro"] .barra-mobile { background: rgba(4,22,44,.92); box-shadow: inset 0 1px 0 rgba(159,240,255,.25); }
:root[data-tema="futuro"] .barra-mobile a.ativo, :root[data-tema="futuro"] .barra-mobile .ativo { color: #9ff0ff; text-shadow: 0 0 12px #9ff0ff; }
:root[data-tema="futuro"] ::selection { background: rgba(159,240,255,.35); }
:root[data-tema="futuro"] .cad-vidro, :root[data-tema="futuro"] .cad { --vd-fundo: linear-gradient(160deg, rgba(10,50,92,.5), rgba(4,22,44,.8)); }

/* o seletor Dia · Noite · Futuro no topo */
.tema-troca { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--vidro-botao); box-shadow: var(--sombra-mini); }
.tema-troca button { width: 30px; height: 28px; border: 0; border-radius: 999px; background: none; color: var(--tinta-fraca); cursor: pointer; display: grid; place-items: center; padding: 0; }
.tema-troca button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tema-troca button:hover { color: var(--tinta); }
.tema-troca button.on { background: var(--vidro-alto); color: var(--acento-forte); box-shadow: inset 0 0 0 1px var(--divisor); }
:root[data-tema="futuro"] .tema-troca button.on { color: #ffcc4d; box-shadow: inset 0 0 0 1px rgba(255,204,77,.5), 0 0 14px -2px rgba(255,204,77,.7); }

/* a linha HUD: só no modo futurista */
.hud { display: none; }
:root[data-tema="futuro"] .hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 1rem; font-size: 12px; letter-spacing: .04em; color: rgba(223,246,255,.78);
  background: rgba(3,18,38,.75); box-shadow: inset 0 -1px 0 rgba(159,240,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: sticky; top: var(--topo-alt); z-index: 29; }
.hud[hidden] { display: none !important; }
.hud b { color: #fff; font-weight: 700; }
.hud .hud-ok b { color: #2fd39a; } .hud .hud-alerta b { color: #ff8a7a; }
.hud .hud-hora { font-variant-numeric: tabular-nums; color: #9ff0ff; font-weight: 700; }
.hud .hud-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hud .hud-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #9ff0ff; box-shadow: 0 0 8px #9ff0ff; opacity: .8; }
.hud .hud-alerta::before { background: #ff8a7a; box-shadow: 0 0 8px #ff8a7a; animation: cobjPisca 1.2s ease-in-out infinite; }
.hud .hud-ok::before { background: #2fd39a; box-shadow: 0 0 8px #2fd39a; }
.hud a { color: inherit; text-decoration: none; }
.hud a:hover { color: #9ff0ff; }
.hud .hud-frase { margin-left: auto; color: rgba(223,246,255,.55); font-style: italic; }
@media (max-width: 760px) {
  .tema-troca button { width: 26px; height: 26px; }
  .topo .tema-troca { display: inline-flex !important; }
  .hud { gap: 4px 10px; font-size: 11px; padding: 5px .6rem; }
  .hud .hud-frase { display: none; }
}
.cq-estado { font-size: 11.5px; color: rgba(223,246,255,.5); margin-left: 4px; white-space: nowrap; }
.cq-estado.ok { color: #2fd39a; } .cq-estado.indo { color: #9ff0ff; } .cq-estado.erro { color: #ff8a7a; font-weight: 700; }
.cobj-aviso.fixo { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 9; max-width: min(520px, 92%); padding: 10px 14px; border-radius: 14px; background: #3a0f0f; color: #ffd6d0; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px #ff8a7a; font-size: 13px; animation: none; opacity: 1; }
.cobj-aviso.fixo button { margin-left: 8px; border: 1px solid #ff8a7a; background: none; color: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
@media (max-width: 760px) {
  .tema-troca { padding: 2px; }
  .tema-troca button { display: none; width: 26px; height: 26px; }
  .tema-troca button.on { display: grid; }
  .tema-troca:not(:has(.on)) button[data-tema-por="claro"] { display: grid; }
  .usuario { gap: .3rem; }
}

/* ---- Central de comando v2: ações rápidas, próxima agenda, contas, resumo no Início (13/10/2026) */
.cq-salvar { background: rgba(47,211,154,.18) !important; border-color: rgba(47,211,154,.5) !important; color: #8ff0c8 !important; }
.cen-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.cen-acao { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(159,240,255,.22); background: rgba(159,240,255,.06); color: #dff6ff; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cen-acao:hover { background: rgba(159,240,255,.16); border-color: rgba(159,240,255,.5); text-decoration: none; }
.cen-acao.on { background: rgba(159,240,255,.22); border-color: #9ff0ff; color: #fff; }
.cen-acao.destaque { background: linear-gradient(135deg, #0391b2, #0b62bd); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -10px rgba(3,145,178,.9); }
.cen-acao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cen-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; margin: 8px 0 4px; padding: 12px 14px; border-radius: 16px; background: rgba(4,26,52,.8); box-shadow: inset 0 0 0 1px rgba(159,240,255,.2); }
.cen-form[hidden] { display: none; }
.cen-form label { display: grid; gap: 3px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); flex: 1 1 160px; }
.cen-form label:first-child { flex: 3 1 260px; }
.cen-form input, .cen-form select { height: 38px; border-radius: 10px; border: 1px solid rgba(159,240,255,.25); background: rgba(159,240,255,.07); color: #fff; padding: 0 10px; font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; color-scheme: dark; }
.cen-form input:focus, .cen-form select:focus { outline: none; border-color: #9ff0ff; box-shadow: 0 0 0 3px rgba(94,198,224,.25); }
.cen-form small { flex: 1 1 100%; font-size: 11.5px; color: rgba(223,246,255,.5); }
.cen-form .cobj-ampliar { background: rgba(47,211,154,.2); border-color: rgba(47,211,154,.5); color: #8ff0c8; height: 38px; }
.cen-form-aviso { margin: 6px 0 0; font-size: 13px; color: #8ff0c8; }
.cen-form-aviso.erro { color: #ff8a7a; }
.cen-form-aviso[hidden] { display: none; }
.cen-agenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cen-agenda-lista li { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(159,240,255,.05); font-size: 13.5px; color: #dff6ff; }
.cen-agenda-lista li b { color: #9ff0ff; font-variant-numeric: tabular-nums; }
.cen-agenda-lista li small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: rgba(223,246,255,.55); }
.cen-agenda-lista li.st-confirmado small { color: #2fd39a; } .cen-agenda-lista li.st-comprou small { color: #2fd39a; } .cen-agenda-lista li.st-nao_comprou small { color: #ff8a7a; }
.cen-mais { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #9ff0ff; text-decoration: none; }
.cen-numeros.compacta { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 10px 0 4px; }
.cen-numeros.compacta .cen-num { padding: 9px 12px; }
.cen-numeros.compacta .cen-num b { font-size: 20px; }
.cen-num.alerta { box-shadow: inset 0 0 0 1px rgba(255,138,122,.55); } .cen-num.alerta b { color: #ff8a7a; }
.cen-dash-wrap { margin-bottom: 1rem; }
.cen-dash { padding: 14px 16px 12px; }
.cen-dash header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cen-dash header small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #9ff0ff; }
.cen-dash header h2 { margin: 0; font-size: 20px; color: #fff; }
.cen-grade { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 760px) { .cen-acao { height: 36px; padding: 0 11px; font-size: 12.5px; } .cen-form label { flex: 1 1 100%; } }

/* ---- Stories no Início (13/10/2026): a faixa das bolinhas num cartão escuro, igual ao Feed do objetivo */
.cen-stories-wrap { margin: 0 0 1rem; padding: 10px 12px 0; border-radius: 22px; background: linear-gradient(135deg, #06203f, #041a34 60%, #061b38); box-shadow: 0 14px 40px -24px rgba(3,40,89,.8), inset 0 0 0 1px rgba(159,240,255,.12); }
.cen-stories-wrap .cobj-stories { padding-bottom: 8px; }
:root[data-tema="futuro"] .cen-stories-wrap { background: rgba(159,240,255,.04); }
.cen-dash-wrap .cobj-cockpit { margin: 0; }
body.cen-cheia .topo, body.cen-cheia .hud, body.cen-cheia .cad-abas, body.cen-cheia .cad-voltar { display: none !important; }
body.cen-cheia .cen { max-width: none; }

/* ---- Modo futurista: cores que ainda vinham fixas (Missão do dia, selects, trilha das metas, WOOP, jogadas, formulários) */
:root[data-tema="futuro"] {
  --m-azul:       #6fd6f0;
  --m-azul-forte: #9ff0ff;
  --m-azul-fraco: rgba(159, 240, 255, .14);
  --m-btn-1: #0391b2;
  --m-btn-2: #0b62bd;
  --m-verde:  #2fd39a;  --m-verde-fraco:  rgba(47, 211, 154, .16);
  --m-laranja:#ffb36b;  --m-laranja-fraco:rgba(255, 179, 107, .15);
  --m-roxo:   #c4b5fd;  --m-roxo-fraco:   rgba(196, 181, 253, .16);
  --m-ambar:  #ffcc4d;  --m-ambar-fraco:  rgba(255, 204, 77, .15);
  --m-rosa:   #f0a3c6;  --m-rosa-fraco:   rgba(240, 163, 198, .15);
  --m-cartao:      #071d3a;
  --m-cartao-2:    #061731;
  --m-vidro:       rgba(6, 29, 58, .62);
  --m-borda:       rgba(159, 240, 255, .14);
  --m-borda-forte: rgba(159, 240, 255, .26);
  --m-sombra:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .34);
  --m-sombra-alta: 0 2px 6px rgba(0, 0, 0, .36), 0 18px 40px rgba(0, 0, 0, .46);
  --m-tinta:       #e6f4ff;
  --m-tinta-media: rgba(223, 246, 255, .74);
  --m-tinta-fraca: rgba(223, 246, 255, .52);
  --vd-fundo:      rgba(159, 240, 255, .05);
  --vd-borda:      rgba(159, 240, 255, .14);
}
:root[data-tema="futuro"] select, :root[data-tema="futuro"] .troca-loja select { color-scheme: dark; color: var(--tinta); background: rgba(6, 29, 58, .9); }
:root[data-tema="futuro"] select option { background: #071d3a; color: #dff6ff; }
:root[data-tema="futuro"] .troca-loja select, :root[data-tema="futuro"] .loja-fixa { box-shadow: inset 0 0 0 1px rgba(159,240,255,.25); }
:root[data-tema="futuro"] .cobj-trilha h2, :root[data-tema="futuro"] .cobj-lado h2, :root[data-tema="futuro"] .cobj-marco-cab b, :root[data-tema="futuro"] .cobj-tarefas a, :root[data-tema="futuro"] .cobj-woop p, :root[data-tema="futuro"] .cobj-jogada b,
:root[data-tema="futuro"] .cobj-cabeca h1, :root[data-tema="futuro"] .cobj-novo h1, :root[data-tema="futuro"] .cobj-novo label, :root[data-tema="futuro"] .cad-ligadas li a, :root[data-tema="futuro"] .cad-resposta-cab, :root[data-tema="futuro"] .cad-placar li b,
:root[data-tema="futuro"] .cad-decisoes h1, :root[data-tema="futuro"] .cad-decisoes-lista p, :root[data-tema="futuro"] .vd-chip, :root[data-tema="futuro"] .vd-busca, :root[data-tema="futuro"] .pc-pedido-txt b, :root[data-tema="futuro"] .vd-pop a, :root[data-tema="futuro"] .vd-pop button,
:root[data-tema="escuro"] .cobj-trilha h2, :root[data-tema="escuro"] .cobj-lado h2, :root[data-tema="escuro"] .cobj-marco-cab b, :root[data-tema="escuro"] .cobj-tarefas a, :root[data-tema="escuro"] .cobj-woop p, :root[data-tema="escuro"] .cobj-jogada b,
:root[data-tema="escuro"] .cobj-cabeca h1, :root[data-tema="escuro"] .cobj-novo h1, :root[data-tema="escuro"] .cobj-novo label, :root[data-tema="escuro"] .cad-ligadas li a, :root[data-tema="escuro"] .cad-resposta-cab, :root[data-tema="escuro"] .cad-placar li b,
:root[data-tema="escuro"] .cad-decisoes h1, :root[data-tema="escuro"] .cad-decisoes-lista p, :root[data-tema="escuro"] .vd-chip, :root[data-tema="escuro"] .vd-busca, :root[data-tema="escuro"] .pc-pedido-txt b, :root[data-tema="escuro"] .vd-pop a, :root[data-tema="escuro"] .vd-pop button { color: var(--tinta); }
:root[data-tema="futuro"] .cobj-trilha h2 small, :root[data-tema="futuro"] .cobj-marco-cab small, :root[data-tema="futuro"] .cobj-jogada span, :root[data-tema="futuro"] .cobj-painel h2 a, :root[data-tema="futuro"] .cobj-cabeca p, :root[data-tema="futuro"] .cobj-novo .cobj-campo,
:root[data-tema="futuro"] .pc-campo, :root[data-tema="futuro"] .pc-pedido-txt small, :root[data-tema="futuro"] .pc-pedido-txt b span, :root[data-tema="futuro"] .vd-aviso, :root[data-tema="futuro"] .cad-teste span, :root[data-tema="futuro"] .cad-placar li span, :root[data-tema="futuro"] .vd-pop-sec,
:root[data-tema="escuro"] .cobj-trilha h2 small, :root[data-tema="escuro"] .cobj-marco-cab small, :root[data-tema="escuro"] .cobj-jogada span, :root[data-tema="escuro"] .cobj-painel h2 a, :root[data-tema="escuro"] .cobj-cabeca p, :root[data-tema="escuro"] .cobj-novo .cobj-campo,
:root[data-tema="escuro"] .pc-campo, :root[data-tema="escuro"] .pc-pedido-txt small, :root[data-tema="escuro"] .pc-pedido-txt b span, :root[data-tema="escuro"] .vd-aviso, :root[data-tema="escuro"] .cad-teste span, :root[data-tema="escuro"] .cad-placar li span, :root[data-tema="escuro"] .vd-pop-sec { color: var(--tinta-media); }
:root[data-tema="futuro"] .cobj-esforco p, :root[data-tema="futuro"] .cobj-tarefas small, :root[data-tema="futuro"] .cobj-tarefas li.feita a, :root[data-tema="futuro"] .cobj-novo label small, :root[data-tema="futuro"] .cobj-novo .dica, :root[data-tema="futuro"] .cad-ligada-x,
:root[data-tema="futuro"] .cad-resposta-cab button, :root[data-tema="futuro"] .cad-teste small, :root[data-tema="futuro"] .cad-decisoes-lista small, :root[data-tema="futuro"] .pc-campo small, :root[data-tema="futuro"] .pc-vazio,
:root[data-tema="escuro"] .cobj-esforco p, :root[data-tema="escuro"] .cobj-tarefas small, :root[data-tema="escuro"] .cobj-tarefas li.feita a, :root[data-tema="escuro"] .cobj-novo label small, :root[data-tema="escuro"] .cobj-novo .dica, :root[data-tema="escuro"] .cad-ligada-x,
:root[data-tema="escuro"] .cad-resposta-cab button, :root[data-tema="escuro"] .cad-teste small, :root[data-tema="escuro"] .cad-decisoes-lista small, :root[data-tema="escuro"] .pc-campo small, :root[data-tema="escuro"] .pc-vazio { color: var(--tinta-fraca); }
:root[data-tema="futuro"] .cobj-woop input, :root[data-tema="futuro"] .cobj-woop textarea, :root[data-tema="futuro"] .cobj-registro input, :root[data-tema="futuro"] .cobj-nova-tarefa input[name=titulo], :root[data-tema="futuro"] .cobj-novo input, :root[data-tema="futuro"] .cobj-novo select, :root[data-tema="futuro"] .cobj-novo textarea, :root[data-tema="futuro"] .pc-campo input, :root[data-tema="futuro"] .pc-campo select, :root[data-tema="futuro"] .vd-busca input,
:root[data-tema="escuro"] .cobj-woop input, :root[data-tema="escuro"] .cobj-woop textarea, :root[data-tema="escuro"] .cobj-registro input, :root[data-tema="escuro"] .cobj-nova-tarefa input[name=titulo], :root[data-tema="escuro"] .cobj-novo input, :root[data-tema="escuro"] .cobj-novo select, :root[data-tema="escuro"] .cobj-novo textarea, :root[data-tema="escuro"] .pc-campo input, :root[data-tema="escuro"] .pc-campo select, :root[data-tema="escuro"] .vd-busca input { color: var(--tinta); background: rgba(159,240,255,.07); border-color: rgba(159,240,255,.22); }
:root[data-tema="futuro"] .cobj-nova-tarefa input[name=titulo]:focus, :root[data-tema="escuro"] .cobj-nova-tarefa input[name=titulo]:focus { background: rgba(159,240,255,.12); }
:root[data-tema="futuro"] .vd-segmento a.on, :root[data-tema="futuro"] .vd-segmento button.on, :root[data-tema="escuro"] .vd-segmento a.on, :root[data-tema="escuro"] .vd-segmento button.on { background: rgba(159,240,255,.16); color: var(--tinta); }
:root[data-tema="futuro"] .vd-chip.on, :root[data-tema="escuro"] .vd-chip.on { background: #0b62bd; border-color: #0b62bd; color: #fff; }
:root[data-tema="futuro"] .cad-teste, :root[data-tema="escuro"] .cad-teste { background: var(--m-cartao, #071d3a); }
:root[data-tema="futuro"] .cobj-marco, :root[data-tema="futuro"] .cobj-jogada, :root[data-tema="escuro"] .cobj-marco, :root[data-tema="escuro"] .cobj-jogada { background: rgba(159,240,255,.05); border-color: rgba(159,240,255,.14); }
:root[data-tema="futuro"] .cobj-vista2.flutuante { background: rgba(4, 22, 44, .96); }

/* ---- Cockpit das Tarefas (13/10/2026): as visualizações do objetivo sobre as tarefas */
.ch-seg a { display: inline-block; border: 0; background: none; padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ch-t2); text-decoration: none; }
.ch-seg a:hover { background: var(--ch-card); color: var(--tinta); text-decoration: none; }
.ch-seg-sep { display: inline-block; width: 1px; height: 18px; margin: 0 4px; vertical-align: middle; background: rgba(3,40,89,.14); }
:root[data-tema="futuro"] .ch-seg-sep, :root[data-tema="escuro"] .ch-seg-sep { background: rgba(159,240,255,.25); }
.ct .cobj-cockpit header h1 { font-size: 24px; margin-bottom: 4px; }
.ct-vista { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; }
.ct-vista .cobj-sel { min-width: 200px; max-width: 100%; }
.ct .cobj-numeros span.ct-alerta b { color: #ff8a7a; }
.ct .cobj-grafico { margin-top: 10px; }
@media (max-width: 760px) { .ch-seg { flex-wrap: wrap; } .ch-seg a { padding: 5px 8px; font-size: 12.5px; } }

/* ---- Mapa de ideias v2 (13/10/2026): botões do topo, navegador, possibilidades, janelas novas */
.grafo{touch-action:none;-webkit-user-select:none;user-select:none}
.grafo .jan,.grafo .jan *{-webkit-user-select:text;user-select:text}
.grafo-topo{position:absolute;left:24px;top:128px;display:flex;flex-wrap:wrap;gap:6px;max-width:320px}
.grafo-topo button{display:flex;align-items:center;gap:6px;border:1px solid rgba(94,198,224,.35);background:rgba(4,22,44,.72);color:#dff6ff;border-radius:99px;padding:7px 13px;font:600 12.5px -apple-system,Segoe UI,sans-serif;cursor:pointer;backdrop-filter:blur(8px);white-space:nowrap}
.grafo-topo button:hover,.grafo-topo button.on{background:rgba(94,198,224,.22);border-color:#9ff0ff;color:#fff}
.grafo-topo button.verde{border-color:rgba(166,245,201,.6);color:#d9ffe9}
.grafo-topo button.verde:hover{background:rgba(166,245,201,.2)}
.grafo-topo button.roxo{border-color:rgba(201,166,255,.55);color:#e2d2ff}
.grafo-topo button.roxo.on{background:rgba(201,166,255,.25);border-color:#c9a6ff;animation:pensa 2.4s ease-in-out infinite}
@keyframes pensa{0%,100%{box-shadow:0 0 0 0 rgba(201,166,255,.5)}50%{box-shadow:0 0 0 8px rgba(201,166,255,0)}}
.grafo-topo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grafo-legenda{flex-wrap:wrap;gap:10px 14px;max-width:360px}
.grafo-cor-nota{background:#9ff0ff}.grafo-cor-cliente{background:#ffd76a}.grafo-cor-setor{background:#7ee2a8}.grafo-cor-assunto{background:#c9a6ff}
.grafo-cor-tarefa{background:#8ff0c8;border-radius:2px !important;transform:rotate(45deg)}.grafo-cor-objetivo{background:#f0a3c6;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.grafo-cor-sistema{background:#e6f0ff;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.grafo-poss{position:absolute;left:50%;top:70px;transform:translateX(-50%);width:min(440px,92vw);box-sizing:border-box;background:rgba(10,8,34,.9);border:1px solid rgba(201,166,255,.5);border-radius:14px;padding:11px 15px;color:#efe6ff;display:none;box-shadow:0 0 40px rgba(201,166,255,.18);backdrop-filter:blur(8px);z-index:30}
.grafo-poss.on{display:block;animation:janIn .25s ease}
.grafo-poss small{color:#c9a6ff;letter-spacing:.12em;font-size:10.5px}
.grafo-poss p{margin:5px 0 9px;font-size:14.5px;line-height:1.45;color:#fff}
.grafo-poss p b{color:#e2d2ff;font-weight:650}
.grafo-poss .acoes{display:flex;gap:7px;flex-wrap:wrap}
.grafo-poss .acoes button{border:1px solid rgba(201,166,255,.5);background:rgba(201,166,255,.12);color:#efe6ff;border-radius:99px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.grafo-poss .acoes button:hover{background:rgba(201,166,255,.28)}
.grafo-nav{position:absolute;right:24px;top:64px;bottom:84px;width:300px;display:flex;flex-direction:column;background:rgba(4,22,44,.9);border:1px solid rgba(94,198,224,.4);border-radius:16px;color:#e6f7ff;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(94,198,224,.12);backdrop-filter:blur(10px);font-size:13px;z-index:25;animation:janIn .22s ease}
.grafo-nav[hidden]{display:none}
.grafo.navAberto .grafo-info{display:none}
.grafo-nav .nav-cab{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 14px;color:#7fc4e0;font-size:10.5px;letter-spacing:.12em}
.grafo-nav .nav-cab b{color:#e6fbff;font-size:12px}
.grafo-nav .nav-cab small{color:#5ea9c9}
.grafo-nav .nav-cab button{margin-left:auto;background:none;border:0;color:#9fd8ee;font-size:19px;cursor:pointer;line-height:1;padding:2px 7px;border-radius:7px}
.grafo-nav .nav-tipos{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 8px}
.grafo-nav .nav-tipos button{border:1px solid rgba(94,198,224,.3);background:rgba(94,198,224,.06);color:#cdefff;border-radius:99px;padding:3px 9px;font-size:11.5px;cursor:pointer;--c:#9ff0ff}
.grafo-nav .nav-tipos button span{color:#7fc4e0;margin-left:3px}
.grafo-nav .nav-tipos button.on{background:rgba(94,198,224,.22);border-color:var(--c);color:#fff}
.grafo-nav .nav-setas{display:flex;gap:6px;padding:0 12px 8px}
.grafo-nav .nav-setas button{flex:1;border:1px solid rgba(94,198,224,.35);background:rgba(94,198,224,.08);color:#dff6ff;border-radius:99px;padding:6px 10px;font-size:12px;cursor:pointer}
.grafo-nav .nav-setas button:hover{background:rgba(94,198,224,.22)}
.grafo-nav .nav-lista{flex:1;overflow:auto;padding:0 6px 10px}
.grafo-nav .nav-lista button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:10px;color:#dff6ff;padding:7px 8px;font-size:13px;cursor:pointer}
.grafo-nav .nav-lista button:hover,.grafo-nav .nav-lista button.on{background:rgba(94,198,224,.14);color:#fff}
.grafo-nav .nav-lista button i{width:8px;height:8px;border-radius:50%;flex:none}
.grafo-nav .nav-lista button span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grafo-nav .nav-lista button small{color:#6fa9c4;font-size:11px;white-space:nowrap}
.grafo-nav .nav-lista::-webkit-scrollbar{width:5px}.grafo-nav .nav-lista::-webkit-scrollbar-thumb{background:rgba(94,198,224,.25);border-radius:9px}
.grafo .jan-vivo{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:4px 0 8px;padding:9px 11px;border-radius:12px;background:rgba(159,240,255,.06);border:1px solid rgba(159,240,255,.18)}
.grafo .jan-vivo span{display:grid;gap:1px}
.grafo .jan-vivo small{font-size:9.5px;letter-spacing:.1em;color:#7fc4e0}
.grafo .jan-vivo b{font-size:14px;color:#fff}
.grafo .jan-vivo em{grid-column:1/-1;font-style:normal;font-size:12px;color:#ffe08a}
.grafo .jan-vivo > small{grid-column:1/-1;color:#6fa9c4;font-size:12px;letter-spacing:0}
.grafo .jan-barra{height:6px;border-radius:99px;background:rgba(159,240,255,.12);overflow:hidden;margin:2px 0 6px}
.grafo .jan-barra i{display:block;height:100%;background:linear-gradient(90deg,#0391b2,#2fd39a);border-radius:99px}
.grafo .jan-tit.feita{text-decoration:line-through;color:#8fb4c8}
.grafo .jan-pe{flex-wrap:wrap}
.grafo .jan-pe-2 .jan-acao{flex:1 1 auto;text-align:center;text-decoration:none}
.grafo .chip.tar{border-color:rgba(143,240,200,.55);color:#d9ffe9}.grafo .chip.obj{border-color:rgba(240,163,198,.6);color:#ffd9ea}.grafo .chip.sis{border-color:rgba(230,240,255,.6);color:#fff}
.grafo a.chip{text-decoration:none}
.grafo-nova > div{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:7px}
.grafo-nova > div button{border:1px solid rgba(166,245,201,.6);background:rgba(166,245,201,.15);color:#d9ffe9;border-radius:99px;padding:6px 14px;font-size:12.5px;cursor:pointer}
.grafo-nova > div small{margin:0}
@media (max-width:760px){
  .grafo-hud b{font-size:16px}.grafo-hud{top:14px;left:14px;max-width:48vw}
  .grafo-topo{left:8px;right:8px;top:auto;bottom:74px;max-width:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .grafo-topo button{padding:7px 11px;font-size:12px}
  .grafo-busca{top:auto;bottom:128px;width:calc(100vw - 16px);left:8px;transform:none}
  .grafo-nav{left:8px;right:8px;top:64px;bottom:170px;width:auto}
  .grafo-poss{top:66px}
  .grafo-card{bottom:176px}
  .grafo-sair{right:12px;top:14px;bottom:auto;padding:6px 12px}
  .grafo .jan{width:calc(100vw - 24px);max-height:62vh}
  .grafo-nova input{width:min(300px,80vw)}
}

/* ---- Central de comando · modo rede (13/10/2026): todas as lojas lado a lado para o administrador master */
.cen-rede-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.cen-rede-cab h2 { margin: 0; font-size: 18px; color: #fff; }
.cen-rede-cab small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,246,255,.6); }
.cen-rede-cab .cen-rede-lider { margin-left: auto; font-size: 13px; color: #ffcc4d; }
.cen-rede-lojas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.cen-loja { display: grid; gap: 8px; padding: 12px 14px 14px; border-radius: 18px; background: rgba(159,240,255,.04); box-shadow: inset 0 0 0 1px rgba(159,240,255,.14); position: relative; }
.cen-loja.alerta { box-shadow: inset 0 0 0 1px rgba(255,138,122,.5); }
.cen-loja.atual { box-shadow: inset 0 0 0 2px rgba(47,211,154,.55); }
.cen-loja header { display: flex; align-items: center; gap: 10px; }
.cen-loja header b { font-size: 18px; color: #fff; }
.cen-loja header small { font-size: 11.5px; color: rgba(223,246,255,.55); }
.cen-loja header .cen-pos { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,204,77,.18); color: #ffcc4d; font-size: 12px; font-weight: 800; }
.cen-loja header form { margin-left: auto; }
.cen-loja header form button, .cen-loja header .cen-atual { border: 1px solid rgba(159,240,255,.3); background: rgba(159,240,255,.08); color: #dff6ff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cen-loja header .cen-atual { color: #2fd39a; border-color: rgba(47,211,154,.5); cursor: default; }
.cen-loja header form button:hover { background: rgba(159,240,255,.2); }
.cen-loja .cen-numeros { margin: 2px 0 0; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.cen-loja .cen-num { padding: 8px 10px; border-radius: 12px; }
.cen-loja .cen-num b { font-size: 18px; }
.cen-loja .cen-num small { font-size: 9.5px; }
.cen-loja-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: #dff6ff; }
.cen-loja-linhas li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(159,240,255,.05); }
.cen-loja-linhas li small { color: rgba(223,246,255,.55); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.cen-loja-linhas li b { color: #fff; }
.cen-loja-linhas li.alerta b { color: #ff8a7a; }
.cen-loja-barra { height: 6px; border-radius: 99px; background: rgba(159,240,255,.12); overflow: hidden; }
.cen-loja-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0391b2, #2fd39a); }
.cen-rede-aviso { margin: 4px 0 0; font-size: 12.5px; color: rgba(223,246,255,.6); }
.cobj-ampliar.cen-rede-btn.on { background: rgba(255,204,77,.18); border-color: rgba(255,204,77,.6); color: #ffe08a; }

/* o que ainda faltava da paleta escura da Missao no modo futurista (texto, herói, montes…) */
:root[data-tema="futuro"] {
  --m-texto: #e6f4ff; --m-texto-2: rgba(223, 246, 255, .74); --m-texto-3: rgba(223, 246, 255, .5);
}

/* Trilha "quem mexeu e quando", nas telas de detalhe.
   A linha vertical à esquerda liga os eventos: lê-se como uma conversa em
   ordem, do mais recente para o mais antigo, e não como uma tabela. */
.historico { list-style: none; margin: 0; padding: 0; }
.historico-item {
  position: relative; padding: 0 0 .9rem 1.1rem; margin-bottom: .1rem;
  border-left: 2px solid var(--divisor);
}
.historico-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.historico-item::before {
  content: ''; position: absolute; left: -5px; top: .35rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--acento);
}
.historico-acao { margin: 0; font-weight: 600; font-size: .9rem; color: var(--tinta); }
.historico-quem { margin: .1rem 0 0; font-size: .82rem; color: var(--tinta-media); }
.historico-quando::before { content: '· '; }
.historico-resumo { margin: .2rem 0 0; font-size: .82rem; color: var(--tinta-media); }
.historico-ip { margin: .15rem 0 0; font-size: .74rem; color: var(--tinta-fraca); }
.historico-mudou { margin-top: .3rem; font-size: .8rem; color: var(--tinta-media); }
.historico-mudou summary { cursor: pointer; color: var(--acento); }
.historico-mudou ul { margin: .3rem 0 0; padding-left: 1rem; }
.historico-campo { color: var(--tinta-fraca); }