/* A cara do UXauto.
 *
 * ## A marca
 *
 * A paleta não foi escolhida: foi lida do `modelos/uxmed-planejamento.pptx`, que
 * é a marca de verdade da UXMed — roxo #684795 (209 usos nos slides) e
 * verde-limão #C2D346. O sistema tem a mesma cara do que ele produz.
 *
 * O verde-limão é acento, não segunda cor: aparece em confirmação e destaque, e
 * em nada mais. Espalhado, briga com o roxo e a tela vira carnaval.
 *
 * ## A tipografia, e a divisão que ela faz
 *
 * **League Spartan onde a marca aparece** (o logo, os títulos de página) e a
 * **fonte do sistema no resto da interface**. É a divisão que os sistemas da
 * Apple fazem: o cromo do aplicativo usa a fonte do sistema operacional, e a
 * fonte da marca fica para onde a marca fala.
 *
 * Isso trocou o Montserrat do corpo de texto, que vinha do molde. A troca é
 * deliberada e reversível numa linha: `--fonte` de volta para Montserrat traz
 * tudo como era. O ganho é duplo — a interface passa a parecer nativa em cada
 * máquina, e some uma dependência de rede no meio do carregamento.
 *
 * ## Claro e escuro
 *
 * `data-tema` no `<html>` manda: ausente ou `auto` segue o sistema, `claro` e
 * `escuro` mandam mais que ele. Quem grava e aplica é o script curto no
 * `base.html`, antes da primeira pintura — senão a tela pisca no tema errado.
 *
 * O escuro **não é o claro invertido**: as superfícies clareiam conforme sobem
 * (fundo → cartão → cartão dentro de cartão), que é como profundidade se lê sem
 * sombra. No claro é o contrário — a sombra faz o trabalho e as superfícies
 * ficam quase brancas.
 */

:root {
  color-scheme: light;

  /* Superfícies, do fundo para cima. */
  --fundo: #f4f3f7;
  --superficie: #ffffff;
  --superficie-2: #f1eff5;
  --superficie-3: #e8e5ee;

  /* Traço fino de separação. `--separador` é mais fraco que `--borda`: divide
     itens de uma lista sem desenhar uma grade em volta de tudo. */
  --borda: rgb(60 40 90 / 13%);
  --separador: rgb(60 40 90 / 8%);

  --texto: #1c1a22;
  --texto-suave: #6c6678;

  --marca: #684795;
  --marca-forte: #523571;
  --marca-fraca: #efe9f8;
  /* O que se escreve **em cima** do roxo. Branco no claro, escuro no escuro: lá
     o roxo é claro (#b49ae2), e branco sobre ele fica quase ilegível — foi o que
     o render do tema escuro mostrou no item selecionado da lateral. */
  --sobre-marca: #ffffff;
  --limao: #7f8c1f;
  --limao-fundo: #eef3d6;
  --alerta: #b23b34;
  --alerta-fundo: #fbeceb;
  /* "Com o cliente", no quadro de tarefas (22/10): a coluna que espera alguém
     de fora. Âmbar, como no portal da Helen — nem o roxo do trabalho nem o
     vermelho do problema. */
  --ambar: #a2600c;
  --ambar-fundo: #fcf3e6;
  /* "A postar", nas Peças: pronta e aprovada, esperando só a mão de quem posta. */
  --azul: #2c64a8;
  --azul-fundo: #ebf2fb;

  /* O material translúcido das barras. Saturar antes de borrar é o que dá a cor
     "viva" por trás do vidro em vez de um cinza leitoso. */
  /* A pastilha do controle segmentado. Precisa de token próprio porque os dois
     temas a querem em direções opostas: no claro ela é **mais clara** que a
     trilha (branco sobre cinza), no escuro é **mais clara** também — e no escuro
     `--superficie` é justamente a mais escura das três. Usar `--superficie` nos
     dois deixava a opção escolhida rebaixada em vez de elevada. */
  --segmento-ativo: var(--superficie);

  /* A faixa de cor de cada pilar no chip do calendário. No claro são **as cores
     exatas** de `uxauto/apresentacao/grade.py`, para a grade da tela e a do
     slide terem a mesma leitura.

     Eram literais escritas direto na regra, e por isso o tema escuro herdava o
     roxo #684795 sobre um fundo #1d1c22 — a faixa do pilar institucional
     simplesmente sumia. Ficaram assim porque eu tratei "espelhar o deck" como
     algo que não se podia tocar; o Yuri esclareceu em 28/08 que o estilo da
     tela é customização isolada. No escuro elas clareiam mantendo o tom: mesma
     cor, luz suficiente para existir. O slide continua com as do claro. */
  --pilar-institucional: #684795;
  --pilar-comercial: #8aa01f;
  --pilar-relacionamento: #2e8ca6;
  --pilar-educativo: #d2761e;

  --vidro: rgb(255 255 255 / 72%);
  --desfoque: saturate(180%) blur(20px);

  /* Duas camadas: um contorno de contato bem curto e uma sombra larga e fraca.
     Uma sombra só, forte, envelhece a tela; estas duas dão relevo sem peso. */
  --sombra: 0 1px 1px rgb(28 26 34 / 4%), 0 6px 20px -6px rgb(28 26 34 / 10%);
  --sombra-alta: 0 2px 4px rgb(28 26 34 / 5%), 0 18px 40px -12px rgb(28 26 34 / 18%);

  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
    "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --titulo: "League Spartan", -apple-system, "SF Pro Display",
    "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  --raio-g: 18px;
  --raio: 13px;
  --raio-p: 9px;

  /* A curva de saída dos sistemas da Apple: sai rápido e chega devagar. Dá o
     "assentar" que um `ease` comum não dá. */
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Escuro por preferência do sistema — a não ser que a pessoa tenha pedido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --fundo: #141317;
    --superficie: #1d1c22;
    --superficie-2: #26252d;
    --superficie-3: #302f39;

    --borda: rgb(255 255 255 / 11%);
    --separador: rgb(255 255 255 / 7%);

    --texto: #f2f1f6;
    --texto-suave: #9d97a9;

    /* Roxo mais claro: o da marca não tem contraste sobre fundo escuro. */
    --marca: #b49ae2;
    --marca-forte: #cbb8ee;
    --marca-fraca: #2d2440;
    --sobre-marca: #1b1526;
    --segmento-ativo: var(--superficie-3);

    /* Mesmos tons, com luz para existirem sobre o fundo escuro. */
    --pilar-institucional: #a98fd8;
    --pilar-comercial: #a8bd2c;
    --pilar-relacionamento: #4bb3cf;
    --pilar-educativo: #e89344;

    --limao: #c8d94f;
    --limao-fundo: #262b12;
    --alerta: #f0918b;
    --alerta-fundo: #35201f;
    --ambar: #e8a958;
    --ambar-fundo: #33281a;
    --azul: #86b4ea;
    --azul-fundo: #1b2636;

    --vidro: rgb(29 28 34 / 70%);
    --sombra: 0 1px 1px rgb(0 0 0 / 30%), 0 6px 20px -6px rgb(0 0 0 / 45%);
    --sombra-alta: 0 2px 4px rgb(0 0 0 / 35%), 0 18px 40px -12px rgb(0 0 0 / 55%);
  }
}

/* Escuro por escolha explícita. Repetido em vez de fatorado de propósito: um
   `:is()` juntando os dois casos cai inteiro no navegador que não entender. */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --fundo: #141317;
  --superficie: #1d1c22;
  --superficie-2: #26252d;
  --superficie-3: #302f39;

  --borda: rgb(255 255 255 / 11%);
  --separador: rgb(255 255 255 / 7%);

  --texto: #f2f1f6;
  --texto-suave: #9d97a9;

  --marca: #b49ae2;
  --marca-forte: #cbb8ee;
  --marca-fraca: #2d2440;
  --sobre-marca: #1b1526;
  --segmento-ativo: var(--superficie-3);

  --pilar-institucional: #a98fd8;
  --pilar-comercial: #a8bd2c;
  --pilar-relacionamento: #4bb3cf;
  --pilar-educativo: #e89344;

  --limao: #c8d94f;
  --limao-fundo: #262b12;
  --alerta: #f0918b;
  --alerta-fundo: #35201f;
  --ambar: #e8a958;
  --ambar-fundo: #33281a;
  --azul: #86b4ea;
  --azul-fundo: #1b2636;

  --vidro: rgb(29 28 34 / 70%);
  --sombra: 0 1px 1px rgb(0 0 0 / 30%), 0 6px 20px -6px rgb(0 0 0 / 45%);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / 35%), 0 18px 40px -12px rgb(0 0 0 / 55%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: 1.9rem;
  letter-spacing: -0.028em;
}
h2 {
  font-size: 1.12rem;
}

a {
  color: var(--marca);
  text-decoration-color: color-mix(in srgb, var(--marca) 30%, transparent);
  text-underline-offset: 3px;
}

:focus-visible {
  /* Duas declarações de propósito. `color-mix` é de 2023, e navegador anterior
     descarta a linha inteira — em qualquer outro lugar isso custa um tom, aqui
     custaria **o anel de foco**, e quem navega por teclado perderia a única
     pista de onde está. A primeira linha é o piso que sempre vale; a segunda
     suaviza onde houver suporte. */
  outline: 2px solid var(--marca);
  outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection {
  background: color-mix(in srgb, var(--marca) 28%, transparent);
}

/* ------------------------------------------------------------- estrutura -- */

.tela {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
}

/* A lateral é material, não painel: translúcida sobre o fundo, como as barras
   laterais do Finder e dos Ajustes. Onde `backdrop-filter` não existe, o
   `--vidro` sozinho ainda dá uma superfície legível. */
.lateral {
  background: var(--vidro);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border-right: 1px solid var(--separador);
  padding: 22px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* O logo: o símbolo à esquerda, ocupando as duas linhas, e o nome com o selo
   "UXMed" embaixo à direita. O símbolo (`marca.svg`) é a telha roxa com o "u"
   e o ponto limão — o "ux." da marca-mãe sem o x, com o ponto que lá é coração
   virando o verde de "feito" daqui. A telha não muda com o tema: é a cor da
   marca, e roxo sobre fundo escuro continua lendo. */
.marca {
  font-family: var(--titulo);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--texto);
  padding: 0 10px;
  text-decoration: none;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 10px;
  align-items: center;
}
.marca img {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: block;
}
.marca .nome {
  display: block;
  align-self: end;
}
/* Cores literais de propósito, ao contrário do resto do arquivo: aqui elas
   **não** podem seguir o tema. O nome fica encostado no símbolo, e o símbolo é
   um SVG de cor fixa — com `var(--marca)` o "auto" virava #b49ae2 no escuro e
   ficava um roxo visivelmente mais claro que a telha ao lado. São os mesmos
   #684795 e #C2D346 de `marca.svg`. */
.marca b {
  color: #684795;
  font-weight: 700;
}
/* O ponto limão que fecha o nome, como o do símbolo: o "ponto final" que a
   automação coloca. Desenhado em CSS em vez de um "." de texto porque assim ele
   é redondo e do mesmo tamanho com qualquer fonte — inclusive quando a League
   Spartan não carrega. O `inline-block` vazio senta a base na linha de base,
   igual a um ponto final. */
.marca .ponto {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.07em;
  border-radius: 50%;
  background: #c2d346;
}
.marca .de {
  display: block;
  font-family: var(--fonte);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 3px;
}

/* **`.lateral nav`, e não `nav`.** Escrito sem escopo, isto pegava qualquer
   `<nav>` do sistema — e a barra de abas da tela do cliente, que também é um
   `<nav>`, nasceu empilhada na vertical por causa daqui. Ela declara o próprio
   `display: flex`, que vence por especificidade, mas nunca declarou a direção:
   o `column` desta regra continuava valendo, e a barra virou uma coluna
   ocupando meia tela.
   Nenhum teste pegou — o HTML estava certo, só o desenho estava errado. */
.lateral nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lateral nav a {
  padding: 7px 11px;
  border-radius: var(--raio-p);
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.94rem;
  transition: background 0.18s var(--mola), color 0.18s var(--mola);
}
.lateral nav a:hover {
  background: color-mix(in srgb, var(--superficie-3) 60%, transparent);
}
/* A seleção é uma pílula sólida, como na lateral dos Ajustes — o item ativo se
   acha de relance, sem precisar ler. */
.lateral nav a[aria-current="page"] {
  background: var(--marca);
  color: var(--sobre-marca);
  font-weight: 600;
}
.lateral nav a[aria-current="page"]:hover {
  background: var(--marca);
}
/* Quantas tarefas no seu nome você ainda não abriu (20/10). É o aviso que o
   sistema pode dar enquanto não manda e-mail: quem entra vê, no menu, que tem
   coisa nova antes de procurar. Verde-limão da marca, e não vermelho: é
   novidade, não alarme. */
.conta-menu {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  background: var(--limao-fundo);
  color: var(--limao);
}
.lateral nav .grupo {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding: 16px 11px 5px;
  margin: 0;
  border: none;
}

.rodape-lateral {
  border-top: 1px solid var(--separador);
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ----------------------------------------------- a lateral recolhida -------- */
/* Pedido do Yuri em 22/10: "a coluna fixa da esquerda ocupa muito espaço —
   minimizar, e abrir ao passar o mouse". Recolhida, é uma faixa de 68 px com os
   ícones; com o mouse (ou o foco do teclado, para quem navega por Tab) ela abre
   **por cima** do conteúdo, sem empurrar a página — empurrar faria o quadro
   pular de lado toda vez que o mouse passasse perto da borda.

   Só em tela larga. No celular a lateral já vira faixa no topo (lá embaixo, em
   "estreito"), e não existe "passar o mouse". */
.lateral nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.icone-lado {
  flex: none;
}
.marca .nome,
.marca .de {
  white-space: nowrap;
}
@media (min-width: 861px) {
  .tela {
    grid-template-columns: 68px 1fr;
  }
  /* Opaca, e não vidro: aberta, ela fica por cima do quadro, e o vidro
     deixaria os cards aparecendo atrás dos nomes do menu. */
  .lateral {
    z-index: 30;
    width: 68px;
    overflow: hidden;
    background: var(--superficie);
    transition: width 0.22s var(--mola), box-shadow 0.22s var(--mola);
  }
  .lateral:hover,
  .lateral:focus-within {
    width: 244px;
    box-shadow: var(--sombra-alta);
  }
  /* Os 12 px da lateral mais estes 7 põem o símbolo, os ícones e a etiqueta de
     quem está logado no mesmo eixo, no meio da faixa. */
  .marca,
  .rodape-lateral {
    padding-left: 7px;
  }
  .lateral nav a {
    padding: 8px 12px;
  }
  /* Os nomes somem antes de a faixa fechar, e aparecem depois de ela abrir:
     sem o esmaecer, o texto cortado no meio da palavra passa pela tela. Tudo
     preso à `.lateral`: solto, o `.marca .nome` apagava também o nome do
     sistema na tela de entrar. */
  .lateral .rotulo-lado,
  .lateral .marca .nome,
  .lateral .marca .de,
  .lateral nav .grupo,
  .lateral .tema,
  .lateral .rodape-lateral .quem,
  .lateral .rodape-lateral form {
    opacity: 0;
    transition: opacity 0.12s;
  }
  .lateral:hover :is(.rotulo-lado, .nome, .de, .grupo, .tema, .quem, form),
  .lateral:focus-within :is(.rotulo-lado, .nome, .de, .grupo, .tema, .quem, form) {
    opacity: 1;
    transition-delay: 0.08s;
  }
  /* A escolha de tema mantém a largura de aberta: espremida em 44 px, ela se
     redesenharia a cada passada do mouse. A faixa só corta o que sobra. */
  .lateral .tema {
    min-width: 220px;
  }
  /* Recolhida, o número de tarefas novas vira um selo no canto do ícone do
     Planner — é o aviso que não pode sumir junto com o nome. */
  .lateral:not(:hover):not(:focus-within) .conta-menu {
    position: absolute;
    top: 1px;
    left: 26px;
    min-width: 16px;
    margin: 0;
    padding: 0 4px;
    font-size: 0.6rem;
  }
}

/* O quadro do planner usa a tela inteira: é o espaço que a lateral recolhida
   devolveu, e um quadro de quatro ou cinco colunas é onde ele mais faz falta. */
.conteudo.largo {
  max-width: none;
  /* Os 72 px de respiro das outras telas, somados a uma coluna cheia, passavam
     da janela: a página inteira rolava um pedaço, além da rolagem da coluna. */
  padding-bottom: 24px;
}
.rodape-lateral .quem {
  min-width: 0;
  flex: 1;
}
.rodape-lateral .quem strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rodape-lateral .quem span {
  font-size: 0.72rem;
  color: var(--texto-suave);
}
/* Os avisos por e-mail de cada um (29/10): miúdo, embaixo do papel. */
.rodape-lateral .quem a {
  display: block;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* --------------------------------------------------- escolha de aparência -- */

/* Controle segmentado, o mesmo desenho do seletor de aparência dos Ajustes: as
   três opções à vista e a escolhida como uma pastilha que desliza por cima. */
.tema {
  /* Empurra a si mesmo e o rodapé para o fim da lateral. O `auto` fica aqui, e
     não no `.rodape-lateral`, porque nos dois o espaço livre se dividiria entre
     eles e abriria um vão no meio. */
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--superficie-2);
  border-radius: 11px;
  border: 1px solid var(--separador);
}
.tema button {
  all: unset;
  text-align: center;
  padding: 5px 2px;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.2s var(--mola), color 0.2s var(--mola),
    box-shadow 0.2s var(--mola);
}
.tema button:hover {
  color: var(--texto);
}
.tema button[aria-pressed="true"] {
  background: var(--segmento-ativo);
  color: var(--texto);
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}
.tema button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent);
  outline-offset: 1px;
}

.conteudo {
  padding: 38px 44px 72px;
  max-width: 1120px;
  width: 100%;
  /* **Item de grid não encolhe abaixo do próprio conteúdo sem isto.** O padrão
     é `min-width: auto`, e por causa dele o quadro de produção — que é largo de
     propósito e tem a própria rolagem lateral — empurrava a página inteira para
     o lado no celular: a lateral saía da tela junto, e rolar de volta para achar
     o menu é o tipo de coisa que faz alguém desistir da tela.

     Vale para toda tela larga, não só o quadro: com isto, `overflow-x` de quem
     precisa rolar (`.rolagem`, `.quadro`) passa a funcionar de verdade em vez
     de vazar para o `body`. */
  min-width: 0;
}

.cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  /* Quebra em vez de espremer. Sem isto, a barra de abas do lado direito ficava
     cortada pela metade num celular — e "Minhas" virava "Minha", que não parece
     defeito e sim descuido. */
  flex-wrap: wrap;
}
.cabeca p {
  margin: 5px 0 0;
  color: var(--texto-suave);
}

/* -------------------------------------------------------------- abas -- */
/* A tela do cliente empilhava seis blocos e o briefing inteiro numa coluna só.
   A barra separa por momento de trabalho e **gruda no topo**: rolando o meio de
   um briefing longo, ainda se sabe onde se está e dá para sair dali sem voltar
   ao começo. Mesmo material da lateral — vidro sobre o conteúdo que passa por
   baixo. */
/* A barra de abas gruda no topo, e por isso **tudo que recebe âncora precisa de
   folga para não parar debaixo dela**. Sem isto, salvar "quem cuida" voltava
   para `#quem-cuida` com o título do cartão escondido atrás da barra — a tela
   parecia ter rolado para o lugar errado. Vale para todo cartão com id, e não só
   para esse: a próxima âncora nasce certa. */
.cartao[id] {
  scroll-margin-top: 70px;
}

.abas {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  /* Declarado, e não deixado no padrão: foi a direção que faltou aqui que
     empilhou a barra inteira na vertical, herdada da regra da lateral. Explícito
     custa uma linha e não depende de ninguém lembrar. */
  flex-direction: row;
  gap: 4px;
  margin: 0 0 24px;
  padding: 6px;
  /* Rola de lado em tela estreita em vez de quebrar em duas linhas: barra de
     navegação que muda de altura empurra o conteúdo e desorienta. */
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--vidro);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--separador);
  border-radius: 14px;
}
.abas::-webkit-scrollbar {
  display: none;
}

.aba {
  all: unset;
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--mola), color 0.2s var(--mola),
    box-shadow 0.2s var(--mola);
}
.aba:hover {
  color: var(--texto);
}
.aba[aria-current="true"] {
  background: var(--segmento-ativo);
  color: var(--texto);
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}
.aba:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent);
  outline-offset: 1px;
}

/* O número do que tem dentro. É o que deixa escolher a aba sem entrar nela. */
.aba .conta {
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  text-align: center;
  background: var(--superficie-3);
  color: var(--texto-suave);
}
.aba[aria-current="true"] .conta,
.aba .conta.marca {
  background: var(--marca-fraca);
  color: var(--marca-forte);
}
/* Campo faltando no briefing é o único número que pede ação, e por isso é o
   único em vermelho — mesmo na aba escolhida. */
.aba .conta.aviso,
.aba[aria-current="true"] .conta.aviso {
  background: var(--alerta-fundo);
  color: var(--alerta);
}

/* Trocar de aba não muda a rolagem da página. Sem uma altura mínima, sair de um
   painel alto para um curto encolhe a página de repente e a barra de abas salta
   junto — parece que a tela recarregou. */
.paineis {
  min-height: 60vh;
}

/* O espaçamento que estava em `style="margin-bottom: 20px"` em cada bloco. */
.painel > * + *,
/* O bloco do planejamento envolve três cartões para a âncora `#planejamento`
   existir sempre; os de dentro precisam do mesmo respiro dos de fora. */
#planejamento > * + * {
  margin-top: 20px;
}
/* O atributo `hidden` do HTML já esconde, mas basta uma regra de `display` em
   outro lugar para vencê-lo em especificidade — e o painel "escondido"
   apareceria por baixo do escolhido. */
.painel[hidden] {
  display: none !important;
}
/* Endereço que aponta para o painel inteiro (`#painel-meses`) deixa a página no
   topo. O navegador rola sozinho até a âncora, e o painel começa embaixo da
   barra de abas: o nome do cliente sumia e a barra grudada cobria o título do
   primeiro cartão. Uma margem maior que qualquer distância até o topo faz a
   rolagem parar em zero. Script não resolve — o navegador rola de novo depois
   do `load`. Alvo **dentro** do painel (`#fotos`) não é afetado. */
.painel {
  scroll-margin-top: 10000px;
}

/* ----------------------------------------------------------------- peças -- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--separador);
  border-radius: var(--raio-g);
  padding: 22px 24px;
  box-shadow: var(--sombra);
}

.grade {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pilha {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.selo {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  white-space: nowrap;
}
.selo.marca {
  background: var(--marca-fraca);
  color: var(--marca-forte);
}
.selo.bom {
  background: var(--limao-fundo);
  color: var(--limao);
}

button,
.botao {
  font-family: var(--fonte);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 9px 17px;
  border-radius: var(--raio-p);
  border: 1px solid transparent;
  background: var(--marca);
  color: var(--sobre-marca);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s var(--mola), transform 0.12s var(--mola),
    filter 0.18s var(--mola);
}
button:hover,
.botao:hover {
  background: var(--marca);
  filter: brightness(1.08);
}
/* O botão afunda ao ser pressionado. É o gesto que os sistemas da Apple usam
   para confirmar o toque antes de a ação acontecer. */
button:active,
.botao:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}
button:disabled,
button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
button.discreto,
.botao.discreto {
  background: var(--superficie-2);
  border-color: var(--separador);
  color: var(--texto);
}
button.discreto:hover,
.botao.discreto:hover {
  background: var(--superficie-3);
  filter: none;
}

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

input,
select,
textarea {
  font-family: var(--fonte);
  font-size: 0.95rem;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color 0.18s var(--mola), box-shadow 0.18s var(--mola);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--marca) 20%, transparent);
}
textarea {
  line-height: 1.55;
  resize: vertical;
}

.campo {
  margin-bottom: 15px;
}

.recado {
  padding: 11px 15px;
  border-radius: var(--raio);
  font-size: 0.88rem;
  margin-bottom: 16px;
  background: var(--alerta-fundo);
  color: var(--alerta);
  border: 1px solid color-mix(in srgb, var(--alerta) 22%, transparent);
}

.vazio {
  color: var(--texto-suave);
  font-size: 0.9rem;
  padding: 30px 0;
  text-align: center;
}

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

.rolagem {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--separador);
  vertical-align: top;
}
tr:last-child td {
  border-bottom: none;
}
/* Linha com botão (Arquivar, Abrir): o botão tem o dobro da altura do texto,
   e no topo ele ficava meio corpo abaixo do nome ao lado. */
tr:has(> td > form > button, > td > .botao) > td {
  vertical-align: middle;
}
td.quando {
  color: var(--texto-suave);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Nome e sobrenome numa linha só: partido em dois, cada registro do histórico
   ficava com o dobro da altura por causa de uma coluna estreita. Só em tela
   larga: no celular a tabela já rola de lado, e o nome inteiro espremia o
   "o quê", que é a coluna que se lê. */
@media (min-width: 861px) {
  td.autor {
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------- portaria -- */

.portaria {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.portaria .cartao {
  width: 100%;
  max-width: 400px;
  padding: 34px;
  box-shadow: var(--sombra-alta);
}
/* Na porta o logo é maior: é a única coisa na tela além do formulário. */
.portaria .marca {
  padding: 0;
  margin-bottom: 24px;
  font-size: 1.6rem;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
}
.portaria .marca img {
  width: 40px;
  height: 40px;
}
.portaria button {
  width: 100%;
  margin-top: 8px;
}
.portaria .nota {
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin: 18px 0 0;
}

/* ------------------------------------------------------------ etapas ------ */

.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.etapas li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--separador);
}
.etapas li:last-child {
  border-bottom: none;
}
.etapas .n {
  font-family: var(--titulo);
  font-size: 0.85rem;
  font-weight: 700;
  width: 24px;
  color: var(--texto-suave);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.etapas .titulo {
  flex: 1;
}
.etapas .feito .titulo {
  color: var(--texto);
}
.etapas .esperando .titulo,
.etapas .esperando .n {
  color: var(--texto-suave);
}

/* ------------------------------------------------------------- briefing -- */

.migalha {
  margin: 0 0 5px;
  font-size: 0.82rem;
}
.migalha a {
  color: var(--texto-suave);
  text-decoration: none;
}
.migalha a:hover {
  color: var(--marca);
}

.briefing {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.briefing section[hidden] {
  display: none;
}

.ajuda-secao {
  color: var(--texto-suave);
  font-size: 0.86rem;
  margin: 6px 0 0;
  max-width: 62ch;
}

.campos {
  display: grid;
  gap: 17px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 20px;
}
/* Campo de texto longo ocupa a linha inteira: dois parágrafos lado a lado em
   coluna estreita ficam ilegíveis. */
.campos .campo:has(textarea) {
  grid-column: 1 / -1;
}

/* Só dentro da grade: ali quem separa os campos é o `gap`. Solto, este zero
   anulava o `margin-bottom` lá de cima, e no formulário de entrar e no de dar
   acesso o rótulo grudava no campo anterior. */
.campos .campo {
  margin: 0;
}
.campo label em {
  color: var(--marca);
  font-style: normal;
  font-weight: 700;
}

.ajuda {
  color: var(--texto-suave);
  font-size: 0.78rem;
  margin: 6px 0 0;
}

/* O `|marcado` transforma `cfm.org.br` em <code> — nas ajudas do briefing e na
   conversa. Sem isto o domínio saía na fonte monoespaçada padrão, grande demais
   ao lado do texto. */
.ajuda code,
.texto-da-fala code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--superficie-2);
}

.erro-do-campo {
  color: var(--alerta);
  font-size: 0.78rem;
  font-weight: 600;
  margin: 5px 0 0;
}
.com-erro input,
.com-erro select,
.com-erro textarea {
  border-color: var(--alerta);
}

.caixinhas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 4px;
}
.caixinha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--texto);
  cursor: pointer;
}
.caixinha input {
  width: auto;
  margin: 0;
  accent-color: var(--marca);
}

.grupo {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--separador);
}
.rotulo-grupo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.linhas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.linha {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.linha .celula {
  flex: 1;
  min-width: 180px;
}
.linha .celula label {
  font-size: 0.72rem;
  margin-bottom: 3px;
}
.rotulo-fixo {
  flex: none;
  width: 96px;
  padding-top: 22px;
  font-weight: 600;
  font-size: 0.9rem;
}
/* Nasceu sem estilo próprio e herdava o do botão principal — um "＋ linha" roxo
   com o mesmo peso do "Salvar". É ação secundária, e agora parece uma. */
.adicionar {
  background: transparent;
  border: 1px dashed var(--borda);
  color: var(--texto-suave);
  font-size: 0.82rem;
  padding: 6px 12px;
}
.adicionar:hover {
  background: var(--superficie-2);
  color: var(--texto);
  filter: none;
}

/* A barra que acompanha a rolagem também é material: o conteúdo passa por baixo
   dela borrado, em vez de sumir atrás de um bloco opaco. */
.barra-salvar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 -18px;
  border-radius: var(--raio);
  background: var(--vidro);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
}
.barra-salvar .ajuda {
  margin: 0;
}
/* Empurrado para o extremo oposto do "Salvar". Os dois são apertados sem olhar,
   e um desfaz o trabalho do outro — a distância é o que evita o clique errado. */
.barra-salvar .limpar {
  margin-left: auto;
}

/* ------------------------------------------------------ a tela do cliente -- */
/* Uma ideia por bloco, separadas por traço fino em vez de cartão dentro de
   cartão: quem decide dez ideias seguidas precisa de ritmo, e moldura em volta
   de cada uma vira parede. */
.ideia {
  padding: 20px 0;
  border-top: 1px solid var(--separador);
}
.ideia:first-of-type {
  border-top: none;
  padding-top: 0;
}
.ideia h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* A linha de contexto do post: data, formato, canal. Discreta de propósito —
   ela decide pelo texto, não por estes rótulos. */
.etiquetas {
  margin: 4px 0 0;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

/* O post como ele vai ao ar. Fundo próprio para separar "o que a UXMed diz
   sobre o post" de "o post" — é este bloco que ela está aprovando. */
.peca {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--superficie-2);
  border-radius: var(--raio);
}
.rotulo-peca {
  margin: 14px 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.peca > .rotulo-peca:first-child {
  margin-top: 0;
}

/* O post que ela ainda não decidiu, na grade do mês. Esmaecido com um traço
   tracejado: é o que ela precisa achar, e some da lista conforme decide. Só a
   opacidade não bastaria — quem não distingue bem contraste veria dois chips
   iguais. */
.chip-post.a-decidir {
  opacity: 0.72;
  border: 1px dashed currentColor;
}

.decidir {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* O campo do motivo e o botão andam juntos: reprovar sem dizer por quê não é
   uma opção, e ver os dois lado a lado explica isso antes de qualquer texto. */
.recusar {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}
.recusar input {
  flex: 1;
}

/* Quem perdeu o acesso continua na lista, apagado. Fica para poder ser
   devolvido — e sumir da tela seria sumir do botão que o traz de volta. */
tr.inativo strong,
tr.inativo span {
  opacity: 0.55;
}

/* O que mexe em conta fica atrás de um clique: são ações raras, e tê-las
   abertas em cada linha transformaria a lista de equipe num painel.
   A linha é própria e ocupa a largura toda — dentro de uma célula da tabela o
   campo de senha virava um quadradinho de cem pixels. */
tr.linha-de-mexer > td {
  padding-top: 0;
  border-top: none;
}
.mexer-na-conta summary {
  cursor: pointer;
  margin: 0;
}
.mexer-na-conta[open] > summary {
  margin-bottom: 12px;
}
.mexer-na-conta[open] {
  padding: 14px 16px;
  background: var(--superficie-2);
  border-radius: var(--raio);
}
/* "Quem cuida deste cliente": uma lista por função, cada uma com o seu Salvar.
   Sem o fio entre elas, o Salvar de cima encostava no nome da de baixo e
   parecia salvar as duas. */
.funcao-da-equipe button {
  margin-top: 12px;
}
.funcao-da-equipe + .funcao-da-equipe {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}

/* --------------------------------------------------- o que não tem volta -- */
/* Cartão e botão da exclusão. Vermelho é o único lugar do sistema onde a cor
   sozinha carrega significado, e por isso o texto nunca depende dela: quem não
   distingue a cor lê "Excluir para sempre" e a lista do que some. */
.cartao.perigo {
  border-color: color-mix(in srgb, var(--alerta) 30%, transparent);
}
.cartao.perigo h2 {
  color: var(--alerta);
}
.perdas {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.7;
}
button.perigoso {
  background: var(--alerta);
  /* Branco no claro, quase preto no escuro: o vermelho do tema escuro é um
     salmão claro, e branco em cima dele dava 2,3:1 — ilegível justo no botão
     que não tem volta. */
  color: var(--sobre-marca);
}
button.perigoso:hover {
  /* Escurece em vez de clarear: no hover de um botão destrutivo, ficar mais
     forte lê como aviso; ficar mais claro lê como convite. */
  background: color-mix(in srgb, var(--alerta) 84%, #000000);
}
.confirmar {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--separador);
}
.confirmar label {
  display: block;
  margin-bottom: 8px;
}
.confirmar input {
  max-width: 340px;
}
.confirmar .acoes {
  margin-top: 16px;
}

.linha-de-cadastro {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  /* **Dois campos lado a lado viram dois campos de 90 px no celular**, onde não
     cabe nem o placeholder. Quebrar em linhas é a única saída honesta.
     O `min-width` que obriga a quebra fica em cada campo que precisa dele: aqui
     ele valeria para todo formulário que usa esta classe, e o campo "Ano" de
     Meses tem `max-width: 110px` **de propósito** — um mínimo global maior que
     esse máximo transforma um campo de quatro dígitos numa caixa larga. */
  flex-wrap: wrap;
}

/* Os redirecionamentos do planejamento caem aqui. Sem a folga, o título do
   cartão ficava escondido debaixo da barra de abas, que gruda no topo — a mesma
   folga que `.cartao[id]` já tem. */
#planejamento,
#painel-geracao {
  scroll-margin-top: 70px;
}

/* A arte pronta, na tela da cliente. Do tamanho da coluna e não maior: uma
   imagem de 1080 px empurraria os botões de decidir para fora da primeira
   tela, e é para eles que ela veio. */
.arte-pronta {
  display: block;
  max-width: 100%;
  max-height: 520px;
  margin-top: 14px;
  border-radius: var(--raio);
  border: 1px solid var(--separador);
}

/* Link sem rótulo mostra o endereço inteiro, e endereço de Drive não tem espaço
   nenhum onde quebrar. Sem isto ele empurra a coluna do botão para fora da tela
   no celular — e botão que não se vê é botão que não existe. */
.link-util {
  overflow-wrap: anywhere;
}

/* A direção da landing page: os blocos numerados, como quem constrói os lê. */
.blocos-lp {
  margin: 0;
  padding-left: 22px;
  max-width: 72ch;
}
.blocos-lp > li {
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--separador);
}
.blocos-lp p {
  margin: 0;
}
.nome-bloco {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.titulo-bloco {
  font-weight: 700;
  margin-top: 4px !important;
}
.texto-bloco {
  white-space: pre-line;
}
.blocos-lp ul,
.lista-lp {
  margin: 4px 0 0;
  padding-left: 18px;
  max-width: 72ch;
}
.chamada-bloco {
  display: inline-block;
  margin-top: 6px !important;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--marca-fraca);
  color: var(--marca-forte);
  font-size: 0.85rem;
  font-weight: 600;
}

/* O "Marcar como postado" no fim do cartão Para postar. */
.marcar-postado {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--separador);
}
.ja-postado {
  margin: 0 0 12px;
}
.form-postar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* As ocorrências: o campo em cima, a lista corrida embaixo, a mais nova primeiro. */
.nova-ocorrencia {
  display: grid;
  gap: 8px;
  max-width: 72ch;
}

.nova-ocorrencia button {
  justify-self: start;
}

.ocorrencias {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 72ch;
}

.ocorrencias li {
  padding: 12px 0;
  border-top: 1px solid var(--separador);
}

.ocorrencias .quem-quando {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* `pre-line`, e não `pre-wrap`: guarda as quebras de linha que a pessoa digitou
   sem guardar os espaços do começo, que viram recuo estranho quando se cola de
   um e-mail. `anywhere` porque link colado sem espaço estoura a coluna. */
.ocorrencias .texto {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.recado.bom {
  background: var(--limao-fundo);
  color: var(--limao);
  border-color: color-mix(in srgb, var(--limao) 28%, transparent);
}

/* ------------------------------------------------------------- geração --- */

.cabeca-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.passos {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}
.passo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--texto-suave);
}
.passo .bolinha {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--superficie-3);
  flex: none;
}
.passo.feito {
  color: var(--texto);
}
.passo.feito .bolinha {
  background: var(--limao);
}
.passo.agora {
  color: var(--marca-forte);
  font-weight: 600;
}
.passo.agora .bolinha {
  background: var(--marca);
  animation: pulsando 1.4s ease-in-out infinite;
}

@keyframes pulsando {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.rodando {
  border-color: color-mix(in srgb, var(--marca) 45%, var(--separador));
  box-shadow: var(--sombra), 0 0 0 3px color-mix(in srgb, var(--marca) 10%, transparent);
}

/* O suporte do painel de "está rodando", incluído em várias telas. Fica sem
   nenhuma caixa própria: quando não há trabalho rodando ele vem vazio, e um
   `margin` aqui abriria um buraco no meio da tela o tempo todo. O espaçamento
   é do cartão que aparece dentro dele. */
.painel-rodando:empty {
  display: none;
}

.avisos {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.avisos li {
  margin-bottom: 4px;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--separador);
}

/* Dois botões lado a lado no cabeçalho de um cartão. `.acoes` não serve aqui:
   ele foi feito para rodapé e traz linha em cima, que no topo do cartão vira um
   risco solto no meio do nada. */
.baixar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aviso-briefing {
  border-style: dashed;
  border-color: var(--borda);
  box-shadow: none;
}

/* --------------------------------------------------------------- fotos --- */

.espacos {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.espaco {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--separador);
}
.espaco:last-child {
  border-bottom: none;
}

.miniatura {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--separador);
  display: grid;
  place-items: center;
}
.miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sem-foto {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-align: center;
  padding: 0 4px;
}
.preenchido .miniatura {
  border-color: color-mix(in srgb, var(--limao) 55%, var(--borda));
}

.espaco .descricao {
  flex: 1;
  min-width: 0;
}
.espaco .descricao strong {
  font-size: 0.92rem;
}
.espaco .descricao .ajuda {
  margin-top: 2px;
}

.botoes-espaco {
  display: flex;
  gap: 8px;
  flex: none;
}

/* O botão que o navegador põe dentro do <input type=file> vinha cinza, quadrado
   e na fonte do Windows — o único botão do sistema fora do desenho. */
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--separador);
  border-radius: 8px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--superficie-3);
}

/* Botão de arquivo: o <input type=file> do navegador não aceita estilo, então
   ele fica invisível dentro de um rótulo que parece botão. */
.botao.arquivo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 9px 16px;
  margin: 0;
}
.botao.arquivo input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
}

.envio-anexos {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.envio-anexos input[type="file"] {
  max-width: 100%;
}
.lista-anexos {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--borda);
}
.lista-anexos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.lista-anexos .ajuda {
  display: block;
  margin-top: 2px;
}

@media (max-width: 620px) {
  .espaco {
    flex-wrap: wrap;
  }
  .espaco .descricao {
    flex-basis: calc(100% - 84px);
  }
  .botoes-espaco {
    flex-basis: 100%;
  }
}

/* ------------------------------------------------------------ o mês ------ */

.ligacao {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ligacao:hover {
  background: none;
  color: var(--marca-forte);
  filter: none;
}
.ligacao:active {
  transform: none;
}

.grade-mes {
  table-layout: fixed;
  min-width: 700px;
  border-spacing: 4px;
  border-collapse: separate;
}
.grade-mes th {
  text-align: center;
  padding: 0 0 6px;
  border: none;
}
/* Célula como cartãozinho, não como cela de grade: o traço some e a
   profundidade fica por conta do fundo. É o que deixa o mês leve de olhar. */
.grade-mes td {
  height: 96px;
  vertical-align: top;
  padding: 7px;
  border: none;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
}
.grade-mes td.fora {
  background: transparent;
}
.numero-do-dia {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}

.chip-post {
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 5px 7px;
  margin-bottom: 3px;
  border-radius: 7px;
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  /* Uma linha, cortada com reticências. Era `-webkit-line-clamp: 3`, e o render
     mostrou por que não servia: o clamp corta o **texto** e põe as reticências,
     mas o que sobra continua desenhado dentro do *padding* de baixo, onde o
     `overflow: hidden` não corta — sobrava uma fita de topos de letra embaixo do
     chip, em toda célula com tema comprido.

     Uma linha resolve sem pixel mágico e fica mais limpo: o tema inteiro já
     aparece ao passar o mouse (o `title` do template) e está por extenso no card
     logo abaixo da grade. A grade é para ver o mês, não para ler o mês. */
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 3px solid var(--marca);
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
  transition: transform 0.16s var(--mola);
}
.chip-post:hover {
  transform: translateY(-1px);
}
.chip-post .formato {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* Campanha e extra na grade: o mesmo chip, **tingido**, para não se confundir com
   post — eles não têm pilar e não vão para o designer. Era tracejado sobre
   `--superficie-2`, e o print mostrou as duas falhas: o fundo é o da própria
   célula (o chip sumia) e o tracejado com canto arredondado fazia um rabicho
   embaixo. Extra ganha o limão, o acento de destaque, que o extrato também usa. */
.chip-registro {
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 5px 7px;
  margin-bottom: 3px;
  border-radius: 7px;
  background: var(--marca-fraca);
  color: var(--texto);
  text-decoration: none;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 3px solid var(--marca);
}
.chip-registro.extra {
  background: var(--limao-fundo);
  border-left-color: var(--limao);
}
/* O blog na grade: fundo de post e faixa azul — não é post (não tem pilar nem
   designer), e não é campanha (tem texto que a equipe produz). */
.chip-registro.blog {
  background: var(--superficie);
  border-left-color: var(--pilar-relacionamento);
}

/* O cartão do blog: os temas propostos e o artigo, legível sem sair da tela. */
.temas-blog {
  list-style: none;
  margin: 0;
  padding: 0;
}
.temas-blog > li {
  padding: 12px 0;
  border-top: 1px solid var(--separador);
}
.temas-blog .repor {
  margin-top: 8px;
}
.artigo-blog {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--separador);
  max-width: 72ch;
}
.artigo-blog summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--marca);
}
.titulo-artigo {
  margin: 14px 0 4px;
  line-height: 1.25;
}
.intertitulo {
  margin: 16px 0 6px;
}
.texto-artigo {
  margin: 0 0 10px;
  white-space: pre-line;
}
.chip-registro .formato {
  display: block;
  /* Quebra, ao contrário do chip de post: "campanha · até 31/10" não cabe numa
     célula de 130 px, e o fim cortado era justamente a parte que informa. */
  white-space: normal;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.selo.extra {
  background: var(--limao-fundo);
  color: var(--limao);
}

/* A lista e o formulário do cartão de campanhas e extras. */
.registros {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.registros li {
  padding: 10px 0;
  border-top: 1px solid var(--separador);
}
.linha-registro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.titulo-registro {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.nome-registro {
  margin: 4px 0 0;
}
.registros .texto {
  margin: 4px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-width: 68ch;
}
.novo-registro {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--separador);
}
.novo-registro button {
  justify-self: start;
}
.campos-registro {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.campos-registro select {
  width: auto;
}

/* Cada pilar com a sua faixa, para o equilíbrio do mês se ver de longe. */
.chip-post.institucional { border-left-color: var(--pilar-institucional); }
.chip-post.comercial     { border-left-color: var(--pilar-comercial); }
.chip-post.relacionamento{ border-left-color: var(--pilar-relacionamento); }
.chip-post.educativo     { border-left-color: var(--pilar-educativo); }

.post.reprovada {
  opacity: 0.55;
}
.post.reprovada h2 {
  text-decoration: line-through;
}
.selos {
  display: flex;
  gap: 6px;
  /* Pode encolher, para o `wrap` funcionar. Com `flex: none` a caixa ficava do
     tamanho de todos os selos em fila e alargava a página no celular — o mês de
     outubro tinha 495px numa tela de 390. */
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
}
.selo.alerta {
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.reprovar {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 240px;
}
.reprovar input {
  flex: 1;
}

/* Formulários de uma linha só: rótulo, escolha e botão lado a lado. O `.repor`
   nasceu sem estilo e empilhava em três linhas dentro do cartão. */
.remarcar,
.repor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.remarcar label,
.repor label {
  margin: 0;
  flex: none;
  white-space: nowrap;
}
.remarcar select,
.repor select {
  width: auto;
  flex: 1;
  min-width: 180px;
}
/* O seletor de dia não cresce: ele mostra "07 · qua" e mais nada, e esticado
   até o fim da linha fazia a linha inteira parecer dois campos do mesmo peso —
   quando o que importa ali é a ideia, não o número do dia. O "Publicar em" do
   post tem o mesmo seletor e o mesmo motivo. */
.repor select.dia,
.remarcar select {
  flex: 0 0 auto;
  min-width: 0;
}

.copy,
.editar {
  margin-top: 16px;
  border-top: 1px solid var(--separador);
  padding-top: 14px;
}
.copy summary,
.editar summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-suave);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  border-radius: 6px;
  transition: color 0.18s var(--mola);
}
.copy summary:hover,
.editar summary:hover {
  color: var(--marca);
}
.copy summary::-webkit-details-marker,
.editar summary::-webkit-details-marker {
  display: none;
}
/* Seta própria, que gira ao abrir — a do navegador não aceita cor nem tamanho. */
.copy summary::before,
.editar summary::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--mola);
  flex: none;
}
.copy[open] > summary::before,
.editar[open] > summary::before {
  transform: rotate(45deg);
}
.copy h3,
.editar h3,
/* A tela da peça mostra o mesmo briefing de arte que a tela do mês, mas fora do
   bloco de copy — e sem esta linha os subtítulos saíam como título de seção,
   grudados no parágrafo de cima. É rótulo de campo, não cabeçalho. */
.briefing-arte h4 {
  font-family: var(--fonte);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 18px 0 5px;
}
.texto-copy {
  font-family: var(--fonte);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
  padding: 13px 15px;
  background: var(--superficie-2);
  border-radius: var(--raio);
  max-width: 68ch;
}
.para-o-designer {
  margin-top: 18px;
  padding: 17px 19px;
  border-radius: var(--raio);
  background: var(--superficie-2);
  border-left: 3px solid var(--marca);
}
.para-o-designer .ficha {
  font-size: 0.92rem;
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}
.para-o-designer .ajuda {
  margin-top: 4px;
}
/* O roteiro é texto para copiar; no fundo do próprio bloco ele sumia. */
.para-o-designer .texto-copy {
  background: var(--superficie);
}

.na-arte {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 0.9rem;
}
.na-arte li {
  margin-bottom: 3px;
}
.hashtags {
  font-size: 0.85rem;
  color: var(--marca);
  margin: 4px 0 0;
}

/* ------------------------------------------------- edição humana da copy --- */

.editar label {
  display: block;
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin: 14px 0 5px;
  font-weight: 600;
}
.editar label.caixa {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto);
}
.editar label.caixa input {
  width: auto;
  accent-color: var(--marca);
}
.editar textarea,
.editar input {
  max-width: 68ch;
}
.edicoes {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 0.85rem;
}
.edicoes li {
  padding: 10px 0;
  border-bottom: 1px solid var(--separador);
}
.edicoes li:last-child {
  border-bottom: none;
}
.edicoes summary {
  cursor: pointer;
  font-weight: 400;
}
/* O texto do agente fica visivelmente "antigo": é referência, não o que vale. */
.texto-copy.antes {
  color: var(--texto-suave);
  border-left: 3px solid var(--borda);
}

/* ------------------------------------------- o caderno de preferências --- */

.caderno {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--separador);
}
.caderno h3 {
  font-family: var(--fonte);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 9px;
}

.regras {
  list-style: none;
  padding: 0;
  margin: 0;
}
.regras li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--separador);
}
.regras li:last-child {
  border-bottom: none;
}
.regras li > div {
  min-width: 0;
}
.texto-da-regra {
  margin: 0;
  font-size: 0.93rem;
  max-width: 70ch;
}
/* Regra desmarcada continua visível: ela volta ao Agente 9 como "já recusada",
   e sumir daria a impressão de que a decisão se perdeu. */
.regras li.descartada .texto-da-regra {
  color: var(--texto-suave);
  text-decoration: line-through;
}
.marcador {
  width: 26px;
  height: 26px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
  background: var(--marca);
  color: var(--sobre-marca);
  border: none;
  cursor: pointer;
}
.regras li.descartada .marcador {
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
}

/* ------------------------------------------------------------ histórico --- */

/* Os filtros são um cartão que também é formulário: cada campo numa coluna, e o
   botão alinhado pela base junto com eles. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 20px;
}
.filtros > div {
  flex: 1;
  min-width: 170px;
}
.filtros label {
  margin-bottom: 5px;
}

.paginacao {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--separador);
}
.paginacao .ajuda {
  margin: 0;
  flex: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ conversa --- */

.conversa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0;
}

.fala {
  max-width: 76ch;
}
.fala.minha {
  align-self: flex-end;
}

/* Balão de conversa. O da pessoa vem na cor da marca e alinhado à direita; o do
   assistente, na superfície neutra à esquerda — a mesma convenção de qualquer
   aplicativo de mensagem, que ninguém precisa aprender. */
.texto-da-fala {
  white-space: pre-wrap;
  padding: 12px 16px;
  border-radius: var(--raio-g);
  background: var(--superficie-2);
  font-size: 0.93rem;
  line-height: 1.6;
}
.fala.minha .texto-da-fala {
  background: var(--marca);
  color: var(--sobre-marca);
  border-bottom-right-radius: 6px;
}
.fala.dele .texto-da-fala {
  border-bottom-left-radius: 6px;
}

.responder textarea {
  border-radius: var(--raio);
}

.quem-falou {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 5px;
}
.fala.minha .quem-falou {
  text-align: right;
}
.quem-falou span {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
  margin-left: 6px;
}

/* ------------------------------------------------------- o que falta ------ */

/* Uma linha por pendência: o número grande à esquerda, o que é e de quem no
   meio. O número vem primeiro porque é o que decide se a pessoa clica — "9
   ideias sem decisão" e "1 ideia sem decisão" pedem manhãs diferentes. */
.pendencias {
  display: grid;
  gap: 8px;
}
.pendencia {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: var(--raio);
  background: var(--superficie-2);
  text-decoration: none;
  color: var(--texto);
  transition: background 0.15s var(--mola);
}
.pendencia:hover {
  background: var(--marca-fraca);
}
.pendencia .quantos {
  flex: none;
  min-width: 34px;
  text-align: center;
  font-family: var(--titulo);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--marca);
}
.pendencia .oque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pendencia .oque strong {
  font-size: 0.92rem;
  font-weight: 600;
}
/* Esperar um cliente decidir não é trabalho parado do nosso lado: a linha existe
   para quem quiser cobrar, e não para pesar na lista de tarefas. */
.pendencia.so-esperando .quantos {
  color: var(--texto-suave);
}
.pendencia.so-esperando strong {
  font-weight: 500;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------ etiquetas --- */

/* Iniciais sobre a cor do próprio nome. O matiz vem calculado do nome em
   `webapp/etiquetas.py` e chega como `--matiz`; saturação e luz ficam aqui,
   fixas, para todas terem o mesmo peso e o texto por cima ler em todas.

   No escuro a cor sobe de luz em vez de mudar de tom: é a mesma etiqueta, não
   outra, e quem reconhece a pessoa pela cor não pode perder a referência ao
   trocar de tema. */
.etiqueta {
  /* O matiz real chega por `style="--matiz: N"` no template. O valor aqui é a
     reserva, e existe por dois motivos: o roxo da marca é uma cor decente para
     cair quando o template esquecer de mandar, e uma variável usada sem nunca
     ser declarada passa despercebida — `hsl(0 ...)` sairia vermelho-alerta numa
     etiqueta qualquer, e ninguém ligaria uma coisa à outra. */
  --matiz: 268;
  --luz: 38%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  background: hsl(var(--matiz) 52% var(--luz));
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
/* No escuro a etiqueta vira tom pastel com letra escura. Era o mesmo branco
   sobre a cor clareada a 52%, e nos matizes verdes e azuis isso dava 2,2:1. Com
   fundo a 72% e letra quase preta, todo matiz passa de 7:1. */
:root[data-tema="escuro"] .etiqueta {
  --luz: 72%;
  color: var(--sobre-marca);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .etiqueta {
    --luz: 72%;
    color: var(--sobre-marca);
  }
}
/* **A forma separa a categoria; a cor separa o indivíduo.** Com dezoito matizes
   e uns quinze nomes, duas cores repetem — e no primeiro print a etiqueta de uma
   cliente e a de uma designer caíram no mesmo verde, lado a lado no mesmo card,
   parecendo a mesma coisa. Mais cor não resolveria: dois matizes vizinhos
   ninguém distingue. Círculo contra quadrado, sim. */
.etiqueta.de-cliente {
  border-radius: 50%;
}
.etiqueta.de-pessoa {
  border-radius: 7px;
}
.etiqueta.mini {
  width: 18px;
  height: 18px;
  font-size: 0.54rem;
}
.etiqueta.de-pessoa.mini {
  border-radius: 5px;
}
/* O par etiqueta + nome, alinhado pelo meio. Usado onde o nome vem escrito ao
   lado — que é toda tela, porque duas letras não identificam ninguém sozinhas. */
.com-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.caixinha .etiqueta,
.de-quem .etiqueta {
  margin-right: 6px;
  vertical-align: middle;
}
/* Quem ainda não pegou a peça aparece apagado: "vai para" e "está com" são
   estados diferentes, e a tela não pode dizer os dois do mesmo jeito. */
.apenas-padrao {
  opacity: 0.62;
  font-style: italic;
}
/* Nas iniciais, o itálico empurrava o "MM" para fora do quadradinho de 18 px;
   o esmaecido já diz "padrão" sozinho. */
.apenas-padrao .etiqueta {
  font-style: normal;
}

/* O que sobrou do quadro de produção antigo (que virou a vista Peças no
   desenho da Helen, 22/10): as duas regras que outras telas ainda usam. */
.de-quem {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.atrasado {
  color: var(--alerta);
  font-weight: 600;
}

/* ------------------------------------------------------------- o planner -- */

/* A barra das duas vistas, Tarefas e Peças. Não gruda no topo como a das abas
   do cliente: fica em cima do quadro, e quem rola aqui é cada coluna. Do
   tamanho do que tem dentro, e não da largura toda — são só duas. */
.abas.vistas {
  position: static;
  display: inline-flex;
  margin: -8px 0 18px;
}

/* Os campos da tarefa: lado a lado em tela larga, um embaixo do outro no
   celular, sem media query — o `auto-fit` decide. */
.campos-tarefa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
}
.campos-tarefa .campo {
  margin: 0;
}
.campos-tarefa .campo.largo {
  grid-column: 1 / -1;
}
/* O bloco "Repetir" do formulário da tarefa (27/10), no desenho da série do
   Teams: o botão liga, a cada N unidades, os dias em bolinhas, "até" com a
   lixeira. **O que aparece conforme a unidade é CSS**, com `:has` lendo a
   opção marcada — sem JavaScript, mostrar e esconder continua certo. */
.repeticao {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  justify-items: start;
}
.chave-repetir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--superficie);
  color: var(--texto);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.chave-repetir input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.chave-repetir svg {
  color: var(--marca);
}
.chave-repetir:has(input:checked) {
  border-color: color-mix(in srgb, var(--marca) 45%, transparent);
  background: var(--marca-fraca);
  color: var(--marca);
}
.chave-repetir:has(input:focus-visible) {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}
.repeticao-campos {
  display: none;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--separador);
  border-radius: var(--raio);
  background: var(--superficie-2);
}
.repeticao:has(.chave-repetir input:checked) .repeticao-campos {
  display: grid;
}
.linha-repeticao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 0.86rem;
  color: var(--texto-suave);
}
.linha-repeticao select,
.linha-repeticao input[type="date"] {
  width: auto;
  padding: 6px 10px;
  font-size: 0.86rem;
}
.repeticao .so-semana,
.repeticao .so-mes-ano,
.repeticao .so-mes,
.repeticao .so-ano {
  display: none;
}
.repeticao:has([name="rep_unidade"] [value="semana"]:checked) .so-semana,
.repeticao:has([name="rep_unidade"] [value="mes"]:checked) :is(.so-mes-ano, .so-mes),
.repeticao:has([name="rep_unidade"] [value="ano"]:checked) :is(.so-mes-ano, .so-ano) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* As bolinhas dos dias, como as do Teams: cinza apagado, cor da marca quando
   marcadas. O quadradinho fica por baixo, do tamanho da bolinha. */
.dias-da-semana {
  flex-wrap: wrap;
  gap: 6px;
}
.dia-bolinha {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.dia-bolinha input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.dia-bolinha:has(input:checked) {
  border-color: var(--marca);
  background: var(--marca);
  color: var(--sobre-marca);
}
.dia-bolinha:has(input:focus-visible) {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}
/* No celular, as sete cabem numa linha com folga — no tamanho cheio
   davam a largura exata da caixa, e o arredondamento jogava o D para baixo. */
@media (max-width: 700px) {
  .repeticao-campos {
    padding: 12px;
  }
  .dia-bolinha {
    width: 31px;
    height: 31px;
  }
}
.ate-repeticao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ate-repeticao label {
  margin: 0;
  font-weight: 400;
}
button.discreto.limpar-ate {
  display: grid;
  place-items: center;
  padding: 6px;
  color: var(--marca);
}
.resumo-repeticao {
  margin: 0;
  color: var(--texto);
  font-size: 0.86rem;
  font-weight: 600;
}
.se-repete {
  display: inline-flex;
  margin-left: 6px;
  color: var(--marca);
}
.ajuda-inline {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.caixa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 18px 0 0;
  font-weight: 500;
  cursor: pointer;
}
.caixa input {
  width: auto;
  margin: 0;
}
.escolha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 4px;
}
.linha-unica {
  display: flex;
  gap: 8px;
  align-items: center;
}
.linha-unica input {
  flex: 1;
  min-width: 0;
}

/* **A etiqueta da tarefa é pílula, e a de pessoa é quadrado.** As duas tiram a
   cor do nome (`etiquetas.matiz`), e por isso precisam de forma diferente: uma
   etiqueta "Dani" e a pessoa Dani cairiam no mesmo tom lado a lado na carta.
   Fundo claro com letra escura do mesmo matiz, e não o contrário: são dez numa
   carta, e dez blocos saturados gritariam mais que o título. */
.rotulos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 0;
}
.rotulo {
  all: unset;
  --matiz: 268;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  background: hsl(var(--matiz) 60% 94%);
  color: hsl(var(--matiz) 45% 28%);
  cursor: pointer;
}
.rotulo:hover,
.rotulo:focus-visible {
  box-shadow: inset 0 0 0 1px hsl(var(--matiz) 45% 45%);
}
:root[data-tema="escuro"] .rotulo {
  background: hsl(var(--matiz) 28% 24%);
  color: hsl(var(--matiz) 60% 84%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .rotulo {
    background: hsl(var(--matiz) 28% 24%);
    color: hsl(var(--matiz) 60% 84%);
  }
}

/* ---------------------------------- o quadro de tarefas, à moda da Helen -- */
/* Refeito em 22/10 a pedido do Yuri: "mais fiel ao planner, parecido com o
   sistema da Helen — o estilo e o tamanho dos cards". A estrutura e as medidas
   são as do portal dela (`kanban.css` e `workspace.css` do Ponto); as cores são
   as do UXauto, e por isso o tema escuro vem junto sem uma linha a mais.

   **Cada etapa tem uma cor**, e ela vai junto para onde a etapa aparece: a
   coluna, a borda do card, o selo da lista e o do painel. Uma variável por
   etapa, e não uma regra por lugar — quatro lugares e quatro etapas seriam
   dezesseis regras para manter iguais. */
.col-a_fazer {
  --col: var(--texto-suave);
  --col-fundo: var(--superficie-2);
}
.col-fazendo {
  --col: var(--marca);
  --col-fundo: var(--marca-fraca);
}
.col-com_o_cliente {
  --col: var(--ambar);
  --col-fundo: var(--ambar-fundo);
}
.col-feito {
  --col: var(--limao);
  --col-fundo: var(--limao-fundo);
}
/* As da vista Peças, no mesmo desenho: "Com a cliente" é o âmbar de quem
   espera alguém de fora, "A postar" o azul do pronto parado, "Postada" o verde
   do que já saiu. "A fazer" e "Fazendo" são as mesmas das tarefas. */
.col-com_a_cliente {
  --col: var(--ambar);
  --col-fundo: var(--ambar-fundo);
}
.col-a_postar {
  --col: var(--azul);
  --col-fundo: var(--azul-fundo);
}
.col-publicada {
  --col: var(--limao);
  --col-fundo: var(--limao-fundo);
}

/* A barra de cima: busca, filtros e a troca entre quadro e lista. */
.barra-planner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  margin: 0;
  color: var(--texto-suave);
}
.busca input {
  width: 100%;
  padding: 6px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.88rem;
}
.busca input:focus {
  outline: none;
  box-shadow: none;
}
/* `.filtros` é também o nome dos filtros do histórico, que têm 20 px embaixo.
   Herdados aqui, eles erguiam os seletores acima da busca e do quadro/lista e
   deixavam a barra mais alta que o conteúdo. */
.barra-planner .filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}
.barra-planner .filtros select {
  width: auto;
  max-width: 180px;
  padding: 6px 28px 6px 10px;
  font-size: 0.8rem;
}
.alternar-vista {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: 9px;
}
/* No celular: a busca e o quadro/lista na primeira linha, e os filtros
   embaixo, ocupando a largura. Antes cada filtro ficava com a largura do
   próprio texto, em degraus, e o quadro/lista sobrava sozinho numa linha. */
@media (max-width: 860px) {
  .alternar-vista {
    order: 1;
  }
  .barra-planner .filtros {
    order: 2;
    flex: 1 1 100%;
  }
  .barra-planner .filtros select {
    flex: 1 1 140px;
    max-width: none;
  }
}
.alternar-vista a {
  display: grid;
  place-items: center;
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--texto-suave);
}
.alternar-vista a.ativo {
  background: var(--marca-fraca);
  color: var(--marca);
}
.info-quadro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 2px 2px 14px;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.info-quadro > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ponto-info {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marca);
}
.info-quadro small {
  margin-left: auto;
  font-size: 0.75rem;
}

/* As colunas: largura fixa como a da Helen (são quatro, e quatro cabem na tela
   do notebook), fundo da cor da etapa, faixa de cor no alto. A pilha de cards
   rola por dentro, e a página fica parada. */
.kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: 10px;
}
/* `1 0 235px`: nunca menos que os 235 px da Helen, e dividindo o que sobra —
   com largura fixa, as quatro passavam 10 px da tela do notebook e o quadro
   ganhava uma rolagem de lado que ninguém procura. */
.col-tarefa {
  flex: 1 0 235px;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  /* 345 = o que vem acima do quadro (título, abas, filtros: ~305 px) mais o
     respiro de baixo. Com menos, a coluna cheia empurra a página para rolar. */
  max-height: calc(100dvh - 345px);
  background: var(--col-fundo);
  border: 1px solid color-mix(in srgb, var(--col) 22%, transparent);
  border-top: 4px solid var(--col);
  border-radius: 10px;
}
.col-cabeca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--col) 18%, transparent);
}
.col-cabeca h2 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--col);
}
.ponto-col {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col);
}
.col-conta {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--col) 25%, transparent);
  background: var(--superficie);
  color: var(--col);
  font-size: 0.72rem;
  font-weight: 650;
}
.col-mais {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--col);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.col-mais:hover {
  background: var(--superficie);
}
.kanban .cartas {
  flex: 1;
  min-height: 0;
  padding: 11px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.col-vazia {
  padding: 32px 12px;
  text-align: center;
  color: var(--texto-suave);
}
.traco {
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 auto 12px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--col) 35%, transparent);
}
.col-vazia p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.8;
}
.col-vazia a {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--col);
  text-decoration: none;
}

/* O card: o tamanho e a ordem do da Helen — de quem é e se é urgente, o
   título, as etiquetas, a linha do que trava, e o rodapé com prazo e dono. O
   card inteiro é o link que abre a tarefa. */
.card-tarefa {
  display: block;
  margin-bottom: 10px;
  padding: 12px 13px 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--col);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(28 26 34 / 5%);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s var(--mola), box-shadow 0.15s var(--mola);
}
.card-tarefa:hover {
  border-color: color-mix(in srgb, var(--col) 55%, transparent);
  border-left-color: var(--col);
  box-shadow: var(--sombra);
}
.card-topo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-cliente {
  max-width: 72%;
  overflow: hidden;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 0.68rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-nova {
  color: var(--marca);
  font-size: 0.68rem;
  font-weight: 700;
}
/* O formato da peça (Carrossel, Reels, Blog), à direita do cliente. */
.card-formato {
  margin-left: auto;
  color: var(--texto-suave);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.card-urgente {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--alerta) 35%, transparent);
  border-radius: 4px;
  color: var(--alerta);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.card-tarefa h3 {
  margin: 9px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
}
.card-tarefa .rotulos {
  margin-top: 9px;
}
.card-tarefa .rotulo {
  cursor: inherit;
}
.card-linha {
  margin: 8px 0 0;
  color: var(--col);
  font-size: 0.75rem;
  line-height: 1.5;
}
.card-linha.bloqueio,
.card-tarefa.bloqueada .card-linha {
  color: var(--alerta);
}
/* A carta que voltou do cliente (Helen, 29/10), na cor do que ele disse:
   aprovou no verde do "Feito", ajuste no vermelho, resposta no azul. */
.card-linha.volta-aprovou,
.card-linha.volta-ajuste,
.card-linha.volta-respondeu {
  font-weight: 600;
}
.card-linha.volta-aprovou { color: var(--limao); }
.card-linha.volta-ajuste { color: var(--alerta); }
.card-linha.volta-respondeu { color: var(--azul); }
.card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--separador);
  color: var(--texto-suave);
  font-size: 0.72rem;
}
.card-rodape > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sem-dono {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px dashed var(--borda);
  border-radius: 5px;
  font-size: 0.6rem;
}

/* A lista: as mesmas tarefas em linhas, para quem prefere ler a arrastar. */
.tabela-tarefas {
  padding: 0;
  overflow: hidden;
}
.linha-tabela {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) 110px;
  align-items: center;
  gap: 16px;
  padding: 13px 20px;
  border-top: 1px solid var(--separador);
  color: var(--texto);
  font-size: 0.85rem;
  text-decoration: none;
}
a.linha-tabela:hover {
  background: var(--superficie-2);
}
.cabeca-tabela {
  border-top: 0;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.linha-tabela small {
  display: block;
  margin-top: 2px;
  color: var(--texto-suave);
  font-size: 0.75rem;
}
.linha-tabela .rotulos {
  margin-top: 6px;
}
.etapa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--col-fundo);
  color: var(--col);
  font-size: 0.75rem;
  font-weight: 650;
}
.etapa i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--col);
}
@media (max-width: 700px) {
  .linha-tabela {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cabeca-tabela {
    display: none;
  }
}

.recado.mini {
  margin: 8px 0 0;
  padding: 6px 9px;
  font-size: 0.78rem;
}
.novo {
  color: var(--marca);
}

/* A lista de tarefas fora do quadro — na aba do cliente e no Início. Uma por
   linha, título primeiro: é por ele que a tarefa se reconhece. */
.lista-tarefas {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.lista-tarefas li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--separador);
}
.lista-tarefas li:first-child {
  border-top: 0;
}
.lista-tarefas a {
  font-weight: 600;
}
.nova-tarefa-aqui {
  margin-top: 16px;
}
.nova-tarefa-aqui > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--marca);
  margin-bottom: 12px;
}

/* O arrastar. A mão aberta só onde arrasta de fato — o computador; no celular
   a carta não se arrasta, e o cursor não existe. */
@media (hover: hover) {
  .card-tarefa[draggable="true"] {
    cursor: grab;
  }
}
.card-tarefa.levando {
  opacity: 0.45;
}
.col-tarefa.alvo {
  box-shadow: inset 0 0 0 2px var(--col);
}

/* A tarefa aberta, num painel à direita, por cima do quadro — o "detail
   sheet" da Helen. O fundo escurece para dizer que o quadro está atrás, e
   clicar nele fecha (é um link de volta ao quadro). */
body:has(.folha),
body:has(.modal-tarefa) {
  overflow: hidden;
}
.folha-fundo,
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(20 18 26 / 34%);
}
.folha {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(640px, 100vw);
  height: 100dvh;
  background: var(--superficie);
  border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-alta);
}
.folha-cabeca {
  position: relative;
  padding: 22px 28px 14px;
  border-bottom: 1px solid var(--separador);
}
.folha-cabeca h2 {
  margin: 6px 40px 10px 0;
  font-size: 1.3rem;
  line-height: 1.3;
}
.folha-fechar {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--texto-suave);
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
}
.folha-fechar:hover {
  background: var(--superficie-2);
  color: var(--texto);
}
.olho {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.folha-rolagem {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px 32px;
  /* Um tom abaixo do branco, para cada seção ser uma caixa branca em cima
     dele (pedido do Yuri, 22/10: "uma linha ou alguma coisa para deixar mais
     claro quando passa de uma seção para outra"). A linha fina de antes, a 8%,
     deixava o painel parecendo um texto corrido. */
  background: var(--fundo);
}
.proximo-passo {
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--marca) 20%, transparent);
  border-radius: 10px;
  background: var(--marca-fraca);
}
.proximo-passo.bloqueio {
  border-color: color-mix(in srgb, var(--alerta) 30%, transparent);
  background: var(--alerta-fundo);
}
.proximo-passo strong {
  color: var(--marca);
  font-size: 0.82rem;
}
.proximo-passo.bloqueio strong {
  color: var(--alerta);
}
.proximo-passo p {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
}
.meta-folha {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
/* A última mudança de prazo (29/10): linha inteira, embaixo dos três dados. */
.meta-folha > .mudou-prazo {
  flex-basis: 100%;
  margin: -6px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--separador);
  color: var(--texto-suave);
  font-size: 0.8rem;
}

/* A repetição no painel da tarefa (27/10): a frase do Teams numa faixa
   discreta, logo abaixo de prazo e responsável — é dado da tarefa, e não
   um passo a dar. */
.repete-folha {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 11px 16px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--marca);
}
.repete-folha svg {
  flex: none;
  margin-top: 1px;
}
.repete-folha strong {
  font-size: 0.86rem;
  color: var(--texto);
}
.repete-folha p {
  margin: 2px 0 0;
  color: var(--texto-suave);
  font-size: 0.8rem;
  line-height: 1.5;
}
.repete-folha.parada {
  color: var(--texto-suave);
}
.meta-folha > div {
  flex: 1;
  min-width: 0;
}
.meta-folha span {
  display: block;
  margin-bottom: 4px;
  color: var(--texto-suave);
  font-size: 0.72rem;
}
.meta-folha strong {
  font-size: 0.86rem;
  font-weight: 600;
}
/* Cada seção é uma caixa: borda, canto arredondado e um respiro entre uma e
   outra. Os dados (responsável, prazo) também — é a primeira caixa depois do
   próximo passo. */
.meta-folha,
.secao-folha {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.secao-folha h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}
.secao-folha h3 small {
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 400;
}
/* Os subtítulos do briefing de arte, dentro do painel da peça, levam o
   desenho de `.briefing-arte h4`; aqui só o respiro do texto embaixo. */
.secao-folha h4 + p {
  margin: 0;
}
.titulo-secao {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.link-acao {
  font-size: 0.82rem;
  font-weight: 600;
}
/* **Ler primeiro, mudar depois** (pedido do Yuri, 22/10). Cada formulário do
   painel mora atrás do seu botão: fechado, é uma linha discreta; aberto, o
   formulário aparece embaixo. `<details>` abre sem JavaScript. */
.mais-acao {
  margin-top: 10px;
}
.mais-acao > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  color: var(--marca);
  font-size: 0.84rem;
  font-weight: 600;
}
.mais-acao > summary::-webkit-details-marker {
  display: none;
}
.mais-acao > summary:hover {
  text-decoration: underline;
}
.mais-acao[open] > summary {
  margin-bottom: 10px;
  color: var(--texto-suave);
}
/* O que fica num botão de verdade, na fileira de "Mudar esta tarefa". */
.mais-acao > summary.botao:hover {
  text-decoration: none;
}
.mais-acao[open] > summary.botao {
  color: var(--texto);
  background: var(--superficie-2);
}
.acao-solta {
  margin-top: 8px;
}
/* A fileira de "Mudar esta tarefa": os botões lado a lado, e o que abre
   (mover, bloquear) cai embaixo deles, ocupando a linha inteira. */
.acoes-folha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.acoes-folha > .mais-acao {
  margin-top: 0;
}
.acoes-folha > .mais-acao[open] {
  flex-basis: 100%;
  order: 1;
}
/* `button.discreto` pinta o texto, e por isso a regra precisa ser tão
   específica quanto ela. */
button.discreto.perigo-texto {
  color: var(--alerta);
}
/* O histórico vem fechado: é para quando alguém pergunta "quem mexeu
   nisto?", e não para quem abre a tarefa para fazê-la. */
.historico-folha > summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
}
.historico-folha > summary small {
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 400;
}
.rotulo-campo {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.82rem;
  white-space: nowrap;
}
.linha-unica select {
  width: auto;
}

/* Criar e editar, numa janela no meio da tela — o "Nova demanda" da Helen. */
.modal-fundo {
  z-index: 50;
}
.modal-tarefa {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 51;
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  transform: translate(-50%, -50%);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
}
.modal-cabeca {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--separador);
}
.modal-cabeca h2 {
  margin: 4px 0 0;
  font-size: 1.25rem;
}
.modal-cabeca .folha-fechar {
  position: static;
  flex: none;
}
.modal-corpo {
  overflow-y: auto;
  padding: 18px 24px 22px;
}
.modal-tarefa.modal-estreito {
  width: min(520px, calc(100vw - 32px));
}

/* As cores da coluna: bolinhas, como as etiquetas de cor de todo quadro. O
   rádio fica por baixo, do tamanho da bolinha — teclado e leitor de tela
   continuam achando. */
.cores-da-coluna {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.cores-da-coluna legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 650;
}
.cores-da-coluna label {
  /* Cada bolinha traz a sua no `style`; esta é só a de reserva. */
  --cor: var(--marca);
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cor);
  cursor: pointer;
}
.cores-da-coluna input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cores-da-coluna label:has(input:checked) {
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--cor);
}
.cores-da-coluna label:has(input:focus-visible) {
  outline: 2px solid var(--texto);
  outline-offset: 4px;
}
.excluir-coluna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--separador);
}
.excluir-coluna .ajuda {
  margin: 0;
}
.excluir-coluna button {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .folha-cabeca,
  .folha-rolagem {
    padding-left: 18px;
    padding-right: 18px;
  }
  .meta-folha {
    flex-wrap: wrap;
  }
}
/* A conversa com o cliente: a dele à direita e na cor da marca, como num
   aplicativo de mensagem — é o desenho que todo mundo já lê sem legenda. */
.conversa-tarefa {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mensagem {
  max-width: 90%;
  padding: 10px 13px;
  border-radius: var(--raio);
  background: var(--superficie-2);
}
.mensagem.cliente {
  align-self: flex-end;
  background: var(--marca-fraca);
}
.quem-fala {
  margin: 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.texto-fala {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.nota {
  padding: 10px 0;
  border-top: 1px solid var(--separador);
}
.checklist,
.anexos,
.historico-curto {
  list-style: none;
  padding: 0;
  margin: 10px 0 12px;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.checklist li.feito .texto-item {
  text-decoration: line-through;
  color: var(--texto-suave);
}
.texto-item {
  flex: 1;
}
.check-item {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  color: var(--sobre-marca);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.check-item[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
}
.tirar {
  padding: 2px 8px;
  font-size: 0.9rem;
  line-height: 1;
}
.anexos li {
  padding: 4px 0;
}
.historico-curto {
  font-size: 0.85rem;
}
.historico-curto li {
  padding: 6px 0;
  border-top: 1px solid var(--separador);
}
.historico-curto li:first-child {
  border-top: 0;
}

/* ------------------------------------------------------------- estreito --- */

/* A lateral vira faixa no topo quando não há largura para ela. Sem isto o
   conteúdo fica espremido em 240px de sobra num celular. */
@media (max-width: 860px) {
  /* `minmax(0, …)`: com `1fr` puro, a fileira do menu (que rola por dentro)
     alargava a coluna até caber inteira, e a página rolava de lado. */
  .tela {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Na faixa do topo os nomes cabem, e o ícone ao lado só disputaria espaço. */
  .icone-lado {
    display: none;
  }
  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    border-right: none;
    border-bottom: 1px solid var(--separador);
    padding: 14px 18px;
  }
  /* Três linhas: o símbolo com quem está logado, o menu numa fileira só e a
     aparência. Antes o menu quebrava em duas colunas ao lado do símbolo, e o
     topo comia um terço da tela do celular antes de qualquer conteúdo. */
  .marca {
    order: 1;
  }
  .rodape-lateral {
    order: 2;
    margin: 0 0 0 auto;
    border-top: none;
    padding-top: 0;
  }
  .rodape-lateral .quem {
    display: none;
  }
  .lateral nav {
    order: 3;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
  }
  .lateral nav a {
    flex: none;
  }
  .lateral nav .grupo {
    display: none;
  }
  .lateral .tema {
    order: 4;
  }
  .conteudo {
    padding: 24px 20px 60px;
  }
  .tema {
    width: 190px;
  }
}

/* ------------------------------------------------ personalização do portal --- */

/* As fontes do portal do Diego, locais (sem CDN). Declaradas aqui para a prévia
   e para o portal; o navegador só baixa quando alguma regra usa. */
@font-face {
  font-family: "Montserrat";
  src: url("portal/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("portal/fonts/pt-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.grade-personalizacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .grade-personalizacao {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* `button { display: inline-block }` vence o atributo `hidden` — o "Ajustar
   enquadramento" aparecia num cliente sem capa (print de 13/10). Escopado, como
   o resto das regras de `[hidden]` desta folha. */
.form-personalizacao [hidden] {
  display: none;
}
.form-personalizacao section {
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--separador);
}
.form-personalizacao .ajuda {
  margin: 6px 0 0;
}
.logo-atual {
  display: block;
  max-height: 56px;
  max-width: 220px;
  margin: 4px 0 10px;
  object-fit: contain;
}
.campo-cor {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 260px;
}
.campo-cor input[type="color"] {
  width: 44px;
  height: 40px;
  padding: 2px;
  flex: none;
  cursor: pointer;
}

/* A prévia: um recorte do topo do portal, sempre claro e na tipografia dele.
   As cores vêm dos tokens que `Theme.apply` põe **só neste elemento**. */
.previa-portal {
  /* O tema padrão UXMed (`Theme.UXMED`). `Theme.apply` escreve por cima, no
     `style` do elemento, quando o cliente tem cor — e sem JS a prévia ainda
     sai coerente, com a marca da agência. */
  --client-primary: #684795;
  --client-primary-soft: #f1ecf7;
  --client-secondary: #c2d346;
  --client-action: #684795;
  --pp-tinta: #1d1a24;
  --pp-tinta-2: #4a4655;
  --pp-linha: #e4e0ea;
  color-scheme: light;
  background: #ffffff;
  color: var(--pp-tinta);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 20px 22px 22px;
  font-family: "Montserrat", var(--fonte);
}
.pp-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  min-height: 34px;
}
.pp-uxmed {
  font-weight: 600;
}
.pp-x {
  color: var(--pp-tinta-2);
  font-size: 0.75rem;
}
.pp-logo {
  max-height: 34px;
  max-width: 160px;
  object-fit: contain;
}
.pp-nome {
  font-weight: 700;
  color: var(--client-action, #684795);
}
.pp-capa {
  position: relative;
  margin-top: 14px;
  aspect-ratio: 3 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--client-primary-soft, #f1ecf7);
}
.pp-capa-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sem capa, o detalhe decorativo nas cores do cliente — como no protótipo. */
.pp-capa-decor span {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
}
.pp-capa-decor span:first-child {
  width: 46%;
  aspect-ratio: 1;
  right: 4%;
  top: -40%;
  background: var(--client-primary, #684795);
}
.pp-capa-decor span:last-child {
  width: 30%;
  aspect-ratio: 1;
  right: 30%;
  top: 10%;
  background: var(--client-secondary, #c2d346);
}
.pp-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pp-tinta-2);
}
.pp-traco {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--client-action, #684795);
}
.pp-traco.curto {
  width: 10px;
  margin-right: 6px;
  background: var(--client-secondary, #c2d346);
}
.pp-mes {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 300;
  color: var(--pp-tinta-2);
}
.pp-mes strong {
  font-weight: 800;
  color: var(--pp-tinta);
}
.pp-abas {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  border-bottom: 1px solid var(--pp-linha);
  font-size: 0.85rem;
}
.pp-abas span {
  padding-bottom: 8px;
  color: var(--pp-tinta-2);
}
.pp-abas .ativa {
  color: var(--pp-tinta);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--client-action, #684795);
}
.pp-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 0.85rem;
}
.pp-botao {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  background: var(--client-action, #684795);
  color: #ffffff;
}
.pp-link {
  color: var(--client-action, #684795);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O diálogo de enquadramento, do `cover-editor.js` do Diego. */
.a-dialog {
  border: none;
  border-radius: var(--raio-g);
  padding: 22px;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-alta);
}
.a-dialog::backdrop {
  background: rgb(20 18 26 / 45%);
}
.a-dialog--frame {
  width: min(46rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
}
.a-dialog__t {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.a-dialog__p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.a-dialog__act {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.a-frame__vp {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  width: 100%;
  margin-top: 16px;
  border-radius: var(--raio);
  background: var(--superficie-3);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.a-frame__vp.is-free-x,
.a-frame__vp.is-free-y {
  cursor: grab;
}
.a-frame__vp.is-drag {
  cursor: grabbing;
}
.a-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
  transition: none;
}
.a-frame__img.is-ease {
  transition: transform 150ms ease;
}
.a-frame__vp.is-drag .a-frame__img {
  transition: none;
}
.a-frame__pos {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.a-frame__ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 16px;
}
.a-frame__zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 14rem;
}
.a-frame__range {
  flex: 1 1 6rem;
  min-width: 5rem;
  accent-color: var(--marca);
}
.a-frame__zb {
  min-width: 2.25rem;
}
.a-frame__zv {
  min-width: 3rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.a-frame__move {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .a-frame__img.is-ease {
    transition: none;
  }
}

/* ---------------------------------------------------------------- extrato --- */

.filtros-extrato {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filtros-extrato select {
  width: auto;
}

/* Os números do período, numa faixa. O extra leva o limão — o mesmo do selo e
   do chip da grade —, porque é o número que se leva para a conversa de cobrança. */
.resumo-extrato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.numero-extrato {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 14px 16px;
}
.numero-extrato strong {
  display: block;
  font-size: 1.8rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.numero-extrato span {
  color: var(--texto-suave);
  font-size: 0.85rem;
}
.numero-extrato.destaque {
  background: var(--limao-fundo);
  border-color: color-mix(in srgb, var(--limao) 30%, transparent);
}
.numero-extrato.destaque strong {
  color: var(--limao);
}
.numero-extrato.pendente strong {
  color: var(--texto-suave);
}

.extras-extrato {
  border: 1px solid color-mix(in srgb, var(--limao) 35%, transparent);
}
/* Sem texto entre o título e a tabela, o cabeçalho dela grudava no título. */
.extras-extrato .rolagem {
  margin-top: 14px;
}

.secao-extrato {
  margin: 16px 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.tabela-extrato td.quando {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabela-extrato .descricao,
.lista-extrato .descricao {
  display: block;
  color: var(--texto-suave);
  font-size: 0.85rem;
  white-space: pre-line;
}
.lista-extrato {
  margin: 0;
  padding-left: 18px;
}
.lista-extrato li {
  margin-bottom: 6px;
}
.pendentes-extrato {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--separador);
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.pendentes-extrato p {
  margin: 0 0 6px;
}

/* --------------------------------------------------------------- no papel --- */
/* O extrato vira PDF pelo "Imprimir" do navegador: sem lateral, sem filtro, sem
   botão, papel branco mesmo no tema escuro. Vale para qualquer tela que marcar
   `nao-imprimir`, mas foi escrito para o extrato. */
@media print {
  /* **Papel é sempre claro**, em qualquer tema. Só `color-scheme` não bastava:
     o escuro redefine as cores em `:root[data-tema="escuro"]`, e o print saiu
     com cartão escuro e texto preto em cima. `html:root` vence os dois
     seletores do escuro por especificidade, e os valores são os do claro. */
  html:root,
  html:root[data-tema] {
    color-scheme: light;
    --fundo: #ffffff;
    --superficie: #ffffff;
    --superficie-2: #f1eff5;
    --superficie-3: #e8e5ee;
    --borda: rgb(60 40 90 / 18%);
    --separador: rgb(60 40 90 / 12%);
    --texto: #1c1a22;
    --texto-suave: #5a5566;
    --marca: #684795;
    --marca-forte: #523571;
    --marca-fraca: #efe9f8;
    --limao: #6b7619;
    --limao-fundo: #eef3d6;
  }
  body {
    background: #fff !important;
  }
  .lateral,
  .nao-imprimir {
    display: none !important;
  }
  /* Sem isto a coluna de 244 px da lateral continua reservada, vazia. */
  .tela {
    display: block !important;
  }
  .conteudo {
    padding: 0 !important;
    max-width: none !important;
  }
  .cartao,
  .numero-extrato {
    box-shadow: none !important;
    break-inside: avoid;
  }
}

/* Conferência das respostas da IA: a resposta de várias linhas (uma lista,
   um parágrafo) aparece quebrada como veio, e cada linha da tabela começa no
   topo, para a pergunta ficar ao lado do começo da resposta. */
.respostas-da-ia td {
  vertical-align: top;
}
.respostas-da-ia td:first-child {
  width: 28px;
}
.texto-pre {
  white-space: pre-line;
}
.nao-entendidas {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.9rem;
}
.respostas-da-ia .vazio {
  white-space: nowrap;
}
/* No celular a tabela de quatro colunas cortava justo a resposta da IA. Cada
   resposta vira um bloco: a pergunta, e embaixo o de hoje e o novo. */
@media (max-width: 620px) {
  .respostas-da-ia thead {
    display: none;
  }
  .respostas-da-ia tr {
    display: grid;
    grid-template-columns: 28px 1fr;
    padding: 10px 0;
  }
  .respostas-da-ia td {
    display: block;
    border: 0;
    padding: 2px 0;
  }
  .respostas-da-ia td[data-rotulo] {
    grid-column: 2;
  }
  .respostas-da-ia td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 6px;
  }
}