/*
  Estilo do FintechMed BPO — CSS puro, um arquivo só, sem framework e sem fonte remota.

  ------------------------------------------------------------------------------------------
  A LINGUAGEM VISUAL (F9), em cinco decisões que explicam quase todas as regras abaixo:

  1) TUDO SAI DE TOKENS. Nenhuma cor, nenhum raio e nenhum espaçamento é escrito solto no meio
     do arquivo: eles moram no `:root` e são reusados. É o que faz o tema escuro existir sem um
     segundo arquivo — o escuro só REDEFINE os mesmos tokens — e o que impede a décima tela de
     nascer com um cinza levemente diferente das outras nove.

  2) BORDA NO LUGAR DE SOMBRA. A separação entre superfícies é uma linha de 1px. Sombra só onde
     alguma coisa está de fato FLUTUANDO sobre o resto: modal, aviso e o cartão sendo arrastado.
     Um sistema de trabalho aberto oito horas por dia com sombra em toda caixa vira ruído.

  3) COR COM SIGNIFICADO ÚNICO. Vermelho é prazo vencido, âmbar é vence hoje/amanhã, verde é
     concluído, e o azul da marca é o ÚNICO acento — nada decorativo usa essas cores, senão a
     equipe aprende a ignorá-las. E a cor nunca é a única pista: todo cartão traz o texto
     ("atrasada 3 dias"), para quem não distingue vermelho de verde.

  4) FONTE DO SISTEMA (`system-ui`). Nenhuma fonte é baixada: a tela pinta na primeira passada,
     funciona offline e não sai requisição nenhuma para fora — contrato do projeto (zero
     dependência externa) e higiene de privacidade.

  5) DOIS TEMAS, UM CONTRASTE. Claro por padrão (equipe de escritório, sala com luz) e escuro
     por escolha, respeitando o `prefers-color-scheme` na primeira visita. Os dois fecham em
     contraste AA porque as cores de texto são tokens, e cada token tem valor nos dois temas.
  ------------------------------------------------------------------------------------------
*/

/* ------------------------------------------------------------------ tokens: tema claro */

:root {
  color-scheme: light;

  /* --- superfícies e traços --------------------------------------------------------------
     `--fundo` é o chão da aplicação; `--papel` é toda caixa que se apoia nele; `--papel-2` é a
     superfície REBAIXADA (coluna do kanban, cabeçalho de tabela, item de lista dentro de uma
     caixa). Três níveis bastam: com quatro, ninguém acerta qual usar. */
  --fundo: #f6f7f9;
  --papel: #ffffff;
  --papel-2: #f1f3f6;
  --papel-3: #e9ecf1;
  --linha: #e3e6eb;         /* borda padrão */
  --linha-forte: #d2d7de;   /* borda de campo e de coisa clicável */
  --veu: rgba(16, 24, 40, .45);

  /* --- texto ---
     `--tinta-tenue` é o único que NÃO passa em AA: ele existe só para placeholder e para
     desenho (a barra que separa colunas), nunca para informação. */
  --tinta: #12161d;
  --tinta-media: #475467;
  --tinta-fraca: #5f6b7d;
  --tinta-tenue: #98a2b3;

  /* --- acento único: o azul da marca --- */
  --azul: #1c64f2;
  --azul-escuro: #1650c4;
  --azul-fraco: #eaf0fe;
  --azul-borda: #bcd3fd;
  --azul-tinta: #1650c4;    /* azul legível como TEXTO sobre papel */
  /* Texto POR CIMA do azul (botão primário, selo da marca, dia de hoje). No claro é branco; no
     escuro o azul precisa ser mais claro para aparecer no fundo preto, e aí branco por cima dele
     cairia para 3.5:1 — abaixo do AA. Um token resolve nos dois sentidos. */
  --sobre-azul: #ffffff;

  /* --- semânticas de prazo (as três cores que a equipe lê de longe) --- */
  --vermelho: #c92a1f;
  --vermelho-fraco: #fef3f2;
  --vermelho-borda: #fbc9c4;
  --vermelho-toque: #fee4e2;
  --sobre-vermelho: #ffffff;
  --ambar: #b54708;
  --ambar-fraco: #fffaeb;
  --ambar-borda: #fedf89;
  --verde: #027a48;
  --verde-fraco: #ecfdf3;
  --verde-borda: #a6f4c5;

  /* --- cor das quatro colunas do kanban (o "acento de status") --- */
  --st-a-fazer: #98a2b3;
  --st-fazendo: #1c64f2;
  --st-aguardando: #dc6803;
  --st-concluida: #027a48;

  /* Os mesmos quatro, em versão FUNDO (F10): a tinta do cabeçalho de cada coluna. São tons
     lavados de propósito — a barra de 3px no topo é quem diz a cor, e o fundo só a confirma. Um
     cabeçalho saturado sobre uma coluna com trinta cartões brigaria com o vermelho do prazo
     vencido, que é a única cor deste sistema que precisa gritar. */
  --st-a-fazer-fundo: #eceff3;
  --st-fazendo-fundo: #e9f0fe;
  --st-aguardando-fundo: #fdf2e4;
  --st-concluida-fundo: #e7f6ee;

  /* --- PALETA DE PESSOA E DE CLIENTE (F10): oito tons, sorteados pelo id ------------------
     Por que oito, e por que determinística: numa equipe de seis e numa carteira de algumas
     dezenas de clientes, a cor vira um atalho de reconhecimento — o olho acha "as da Marianne"
     no quadro antes de ler um nome. Oito é o maior número de matizes que ainda se distinguem de
     relance; acima disso viram dois azuis que ninguém separa. Determinística (hash do id) porque
     a cor precisa ser a MESMA em toda tela, em toda máquina e depois de todo F5 — uma cor
     sorteada a cada render seria pior do que cor nenhuma.

     Cada tom tem DOIS tokens: o fundo (bem lavado) e a tinta (escura e saturada), com o par
     fechando AA nos dois temas. A cor NUNCA é a única informação: o nome está escrito ao lado,
     sempre. */
  --p0-fundo: #e6efff;  --p0-tinta: #1d4ed8;
  --p1-fundo: #dcf4f1;  --p1-tinta: #0f766e;
  --p2-fundo: #efe6fd;  --p2-tinta: #6d28d9;
  --p3-fundo: #fde7f0;  --p3-tinta: #be185d;
  --p4-fundo: #fdeadb;  --p4-tinta: #9a4b06;
  --p5-fundo: #e2f5e6;  --p5-tinta: #15803d;
  --p6-fundo: #e6e9fb;  --p6-tinta: #4338ca;
  --p7-fundo: #f2ecdc;  --p7-tinta: #855108;

  /* --- escala tipográfica --- */
  --t-xs: .72rem;
  --t-sm: .8rem;
  --t-md: .875rem;   /* corpo */
  --t-lg: 1rem;
  --t-xl: 1.2rem;
  --t-2xl: 1.75rem;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  /* --- espaçamento (4 / 8 / 12 / 16 / 24 / 32) --- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  /* --- raios --- */
  --raio-p: 6px;
  --raio: 8px;
  --raio-g: 12px;
  --raio-pill: 999px;

  /* --- sombras: só o que flutua --- */
  --sombra-alta: 0 12px 32px -8px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .08);
  --sombra-arrasto: 0 8px 20px -6px rgba(16, 24, 40, .28);

  /* --- movimento --- */
  --rapido: 120ms ease;
  --transicao: 150ms ease;

  /* --- medidas do esqueleto da tela --- */
  --barra-largura: 240px;
  --barra-estreita: 56px;
  --brilho: rgba(255, 255, 255, .65);
}

/* ------------------------------------------------------------------ tokens: tema escuro

   Duas entradas de propósito: o `@media` atende quem NUNCA escolheu (o sistema decide) e o
   `[data-tema="escuro"]` atende quem escolheu no rodapé da barra. O `:not([data-tema="claro"])`
   no media query é o que faz a escolha manual "claro" ganhar de um sistema em modo escuro —
   sem ele, o botão só funcionaria numa direção. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --fundo: #0e1116;
    --papel: #171a21;
    --papel-2: #1d212a;
    --papel-3: #252a34;
    --linha: #272c35;
    --linha-forte: #363c47;
    --veu: rgba(0, 0, 0, .62);

    --tinta: #e7eaef;
    --tinta-media: #b0b8c4;
    --tinta-fraca: #99a2b0;
    --tinta-tenue: #6d7684;

    --azul: #4b83f8;
    --azul-escuro: #77a3fb;
    --azul-fraco: #172341;
    --azul-borda: #2c4a86;
    --azul-tinta: #8fb4fc;
    --sobre-azul: #0b0e13;

    --vermelho: #f27a70;
    --vermelho-fraco: #2a1614;
    --vermelho-borda: #5d2b26;
    --vermelho-toque: #3a1d1a;
    --sobre-vermelho: #2a1614;
    --ambar: #f5b544;
    --ambar-fraco: #2a1f0f;
    --ambar-borda: #5c421a;
    --verde: #48c98a;
    --verde-fraco: #10241b;
    --verde-borda: #1f5039;

    --st-a-fazer: #6d7684;
    --st-fazendo: #4b83f8;
    --st-aguardando: #f5b544;
    --st-concluida: #48c98a;

    --st-a-fazer-fundo: #1e222b;
    --st-fazendo-fundo: #16233d;
    --st-aguardando-fundo: #2b2314;
    --st-concluida-fundo: #10251b;

    --p0-fundo: #16263f;  --p0-tinta: #a8c7ff;
    --p1-fundo: #102b2a;  --p1-tinta: #7fd8ce;
    --p2-fundo: #241a3d;  --p2-tinta: #c4b0fb;
    --p3-fundo: #351827;  --p3-tinta: #f7a8c8;
    --p4-fundo: #33220f;  --p4-tinta: #f5be7d;
    --p5-fundo: #122a1b;  --p5-tinta: #86d99e;
    --p6-fundo: #1c2044;  --p6-tinta: #aeb6fb;
    --p7-fundo: #2d2513;  --p7-tinta: #dbc078;

    --sombra-alta: 0 14px 34px -10px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .5);
    --sombra-arrasto: 0 10px 22px -8px rgba(0, 0, 0, .75);
    --brilho: rgba(255, 255, 255, .06);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;

  --fundo: #0e1116;
  --papel: #171a21;
  --papel-2: #1d212a;
  --papel-3: #252a34;
  --linha: #272c35;
  --linha-forte: #363c47;
  --veu: rgba(0, 0, 0, .62);

  --tinta: #e7eaef;
  --tinta-media: #b0b8c4;
  --tinta-fraca: #99a2b0;
  --tinta-tenue: #6d7684;

  --azul: #4b83f8;
  --azul-escuro: #77a3fb;
  --azul-fraco: #172341;
  --azul-borda: #2c4a86;
  --azul-tinta: #8fb4fc;
  --sobre-azul: #0b0e13;

  --vermelho: #f27a70;
  --vermelho-fraco: #2a1614;
  --vermelho-borda: #5d2b26;
  --vermelho-toque: #3a1d1a;
  --sobre-vermelho: #2a1614;
  --ambar: #f5b544;
  --ambar-fraco: #2a1f0f;
  --ambar-borda: #5c421a;
  --verde: #48c98a;
  --verde-fraco: #10241b;
  --verde-borda: #1f5039;

  --st-a-fazer: #6d7684;
  --st-fazendo: #4b83f8;
  --st-aguardando: #f5b544;
  --st-concluida: #48c98a;

  --st-a-fazer-fundo: #1e222b;
  --st-fazendo-fundo: #16233d;
  --st-aguardando-fundo: #2b2314;
  --st-concluida-fundo: #10251b;

  --p0-fundo: #16263f;  --p0-tinta: #a8c7ff;
  --p1-fundo: #102b2a;  --p1-tinta: #7fd8ce;
  --p2-fundo: #241a3d;  --p2-tinta: #c4b0fb;
  --p3-fundo: #351827;  --p3-tinta: #f7a8c8;
  --p4-fundo: #33220f;  --p4-tinta: #f5be7d;
  --p5-fundo: #122a1b;  --p5-tinta: #86d99e;
  --p6-fundo: #1c2044;  --p6-tinta: #aeb6fb;
  --p7-fundo: #2d2513;  --p7-tinta: #dbc078;

  --sombra-alta: 0 14px 34px -10px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .5);
  --sombra-arrasto: 0 10px 22px -8px rgba(0, 0, 0, .75);
  --brilho: rgba(255, 255, 255, .06);
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: var(--peso-normal) var(--t-md)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body.travado { overflow: hidden; } /* enquanto o modal está aberto */

h1, h2, h3 { margin: 0; line-height: 1.3; letter-spacing: -.011em; font-weight: var(--peso-forte); }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0; }
b, strong { font-weight: var(--peso-forte); }
a { color: var(--azul-tinta); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--papel-2); border: 1px solid var(--linha);
  padding: 1px 5px; border-radius: var(--raio-p);
}

[hidden] { display: none !important; }
.escondido { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* O foco é visível em TUDO, e é o mesmo anel em toda a tela: teclado é o caminho de quem não
   usa mouse, e um anel que muda de cara a cada componente faz a pessoa perder o próprio
   cursor. `:focus-visible` não pinta o anel no clique de mouse, que é o barulho clássico. */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

/* Link de pulo: só aparece quando recebe foco pelo teclado. */
.pular {
  position: fixed; top: var(--e2); left: var(--e2); z-index: 90;
  padding: var(--e2) var(--e3);
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--azul); border-radius: var(--raio);
  text-decoration: none; font-weight: var(--peso-medio);
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* ------------------------------------------------------------------ ícones

   Todo ícone é um SVG DESENHADO AQUI (traço de 1.75, sem preenchimento, herdando a cor do
   texto). Nenhuma biblioteca e nenhum emoji: emoji muda de desenho a cada sistema operacional
   e nunca combina com a linha do resto da tela. */

.icone {
  flex: none;
  display: block;
  width: 18px; height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icone-p { width: 14px; height: 14px; stroke-width: 2; }
.icone-g { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ cortina de carga */

.cortina {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: var(--fundo);
  color: var(--tinta-fraca);
}
.cortina-caixa { display: grid; gap: var(--e3); justify-items: center; }
.girador {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--linha); border-top-color: var(--azul);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-noscript {
  margin: var(--e5) auto; max-width: 640px; padding: var(--e3) var(--e4);
  background: var(--ambar-fraco); color: var(--ambar);
  border: 1px solid var(--ambar-borda); border-radius: var(--raio);
}

/* ------------------------------------------------------------------ marca */

.marca {
  display: inline-flex; align-items: center; gap: var(--e2); min-width: 0;
  color: var(--tinta); text-decoration: none; font-weight: var(--peso-forte);
  letter-spacing: -.01em;
}
.marca b { font-weight: var(--peso-forte); }
.marca-selo {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--raio-p);
  background: var(--azul); color: var(--sobre-azul);
  font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .02em;
}
.marca-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-grande { font-size: var(--t-xl); gap: var(--e3); }
.marca-grande .marca-selo { width: 34px; height: 34px; border-radius: var(--raio); font-size: var(--t-sm); }

/* ------------------------------------------------------------------ botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 0 var(--e3); min-height: 34px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: var(--t-md); font-weight: var(--peso-medio);
  cursor: pointer; white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.botao:hover { background: var(--papel-2); }
.botao:disabled { opacity: .5; cursor: not-allowed; }

.botao-primario { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.botao-primario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao-primario:disabled { background: var(--azul); border-color: var(--azul); }

/*
  ESPERA NO BOTÃO: um primário desabilitado neste app é sempre uma requisição em andamento
  (salvar, entrar, redefinir). O anel girando diz "está indo", que é a diferença entre esperar
  e clicar de novo. É CSS puro — o app.js não precisa saber que existe.
*/
.botao-primario:disabled::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .7s linear infinite;
}

.botao-discreto { background: transparent; border-color: transparent; color: var(--tinta-media); }
.botao-discreto:hover { background: var(--papel-2); color: var(--tinta); }
.botao-perigo { color: var(--vermelho); border-color: var(--vermelho-borda); background: transparent; }
.botao-perigo:hover { background: var(--vermelho-fraco); color: var(--vermelho); }
.botao-largo { width: 100%; min-height: 40px; }

.botao-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: var(--raio-p);
  background: transparent; color: var(--tinta-fraca);
  font: inherit; font-size: 1rem; line-height: 1;
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.botao-icone:hover:not(:disabled) { background: var(--papel-2); color: var(--tinta); }
.botao-icone:disabled { opacity: .35; cursor: default; }

/* ------------------------------------------------------------------ campos */

.campo { display: grid; gap: var(--e1); min-width: 0; }
.campo-rotulo { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--tinta-media); }
.campo-dica { font-size: var(--t-xs); color: var(--tinta-fraca); line-height: 1.45; }
/* Na F10 esta célula passou a poder ter DOIS controles (o menu de filtros salvos e o "Limpar"):
   flex com quebra, para eles ficarem lado a lado no computador e empilhados no celular. */
.campo-botao { align-self: end; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

input[type="text"], input[type="password"], input[type="search"], input[type="email"],
input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  padding: 7px 10px; min-height: 34px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: var(--t-md);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--tinta-tenue); }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-fraco); }
textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
input:disabled, select:disabled, textarea:disabled { background: var(--papel-2); color: var(--tinta-fraca); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }
input[type="checkbox"] { accent-color: var(--azul); }

/* Erro de formulário: dito em vermelho, com ícone de texto nenhum — a frase basta, e ela é
   lida por leitor de tela porque o elemento é `role="alert"`. */
.erro-inline {
  padding: var(--e2) var(--e3); border-radius: var(--raio-p);
  background: var(--vermelho-fraco); color: var(--vermelho);
  border: 1px solid var(--vermelho-borda); font-size: var(--t-sm);
}

.alternador { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-sm); color: var(--tinta-media); cursor: pointer; }
.alternador input { width: auto; min-height: 0; }

/* ------------------------------------------------------------------ login */

.login {
  min-height: 100dvh;
  display: grid; align-content: center; justify-items: center; gap: var(--e4);
  padding: var(--e6) var(--e4);
  background: var(--fundo);
}
.login-cartao {
  width: 100%; max-width: 360px;
  padding: var(--e5);
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio-g);
  display: grid; gap: var(--e4);
}
.login-sub { color: var(--tinta-fraca); font-size: var(--t-sm); }
.login-cartao form { display: grid; gap: var(--e3); }
.login-nota { font-size: var(--t-xs); color: var(--tinta-fraca); border-top: 1px solid var(--linha); padding-top: var(--e3); }
.login-rodape { font-size: var(--t-xs); color: var(--tinta-tenue); }

/* ------------------------------------------------------------------ esqueleto da aplicação

   Barra lateral FIXA de 240px + conteúdo. A navegação saiu do topo na F9 por uma razão de
   espaço: são dez seções, e dez itens numa fita horizontal ou rolavam para fora da tela ou
   comiam a largura do quadro. Na vertical elas cabem inteiras, com ícone, e a largura que
   sobra vai para as quatro colunas do kanban — que é o que a equipe olha o dia todo. */

#app {
  display: grid;
  grid-template-columns: var(--barra-largura) minmax(0, 1fr);
  min-height: 100dvh;
}

.barra {
  position: sticky; top: 0; z-index: 30;
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--papel);
  border-right: 1px solid var(--linha);
  transition: width var(--transicao);
}
.barra-topo {
  display: flex; align-items: center; gap: var(--e2);
  min-height: 52px; padding: 0 var(--e3);
  border-bottom: 1px solid var(--linha);
}
.barra-topo .marca { flex: 1; min-width: 0; }

/* A navegação rola sozinha se a tela for baixa; o rodapé (usuário, tema, sair) fica preso
   embaixo, porque é o lugar onde todo sistema de trabalho o guarda. */
.menu { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--e3) var(--e2); }

.menu-item {
  display: flex; align-items: center; gap: var(--e2);
  padding: 7px var(--e2); border-radius: var(--raio-p);
  color: var(--tinta-media); text-decoration: none;
  font-size: var(--t-md); font-weight: var(--peso-medio); white-space: nowrap;
  transition: background var(--rapido), color var(--rapido);
}
.menu-item .icone { color: var(--tinta-tenue); transition: color var(--rapido); }
.menu-item:hover { background: var(--papel-2); color: var(--tinta); }
.menu-item:hover .icone { color: var(--tinta-media); }
/* O item ativo: fundo sutil + a cor do acento, e um traço de 2px à esquerda. A cor sozinha
   some para quem não a distingue; o traço resolve sem inventar um segundo azul. */
.menu-item.ativo {
  background: var(--azul-fraco); color: var(--azul-tinta); font-weight: var(--peso-forte);
  box-shadow: inset 2px 0 0 var(--azul);
}
.menu-item.ativo .icone { color: var(--azul); }
.menu-rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.barra-rodape {
  display: grid; gap: var(--e2);
  padding: var(--e3) var(--e2);
  border-top: 1px solid var(--linha);
}
.barra-usuario { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.topo-nome {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--e2);
  padding: 6px var(--e2); border-radius: var(--raio-p);
  color: var(--tinta); text-decoration: none;
  font-size: var(--t-md); font-weight: var(--peso-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--rapido);
}
.topo-nome:hover { background: var(--papel-2); }
.barra-acoes { display: flex; align-items: center; gap: var(--e1); }
.barra-acoes .botao { flex: 1; justify-content: flex-start; }
/* Tema e recolher são só ícone: são preferências, não ações do dia — e um rótulo em cada um
   empurraria o "Sair" para fora dos 240px. O que eles fazem está no `title` e no `aria-label`.
   O seletor repete `.barra-acoes .botao` para ganhar da regra de cima em especificidade — sem
   isso os dois ícones esticariam junto com o Sair. */
.barra-acoes .botao.barra-so-icone { flex: none; width: 32px; padding: 0; justify-content: center; }

/* Botão hambúrguer: só existe no celular (ver o @media do fim do arquivo). */
.botao-barra {
  position: fixed; top: var(--e2); left: var(--e2); z-index: 45;
  display: none; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--papel); color: var(--tinta); cursor: pointer;
}
.barra-veu { position: fixed; inset: 0; z-index: 29; background: var(--veu); }

.conteudo { padding: var(--e5) var(--e5) 64px; min-width: 0; }
.conteudo:focus { outline: none; }

/* BARRA ESTREITA (56px): só os ícones. O rótulo some por `display:none` e não por largura
   zero, senão o texto continuaria capturando o clique e o `title` do ícone nunca apareceria. */
body.barra-estreita #app { grid-template-columns: var(--barra-estreita) minmax(0, 1fr); }
body.barra-estreita .menu-rotulo,
body.barra-estreita .marca-texto,
body.barra-estreita .topo-nome span:not(.avatar),
body.barra-estreita .barra-rotulo { display: none; }
body.barra-estreita .barra-topo { justify-content: center; padding: 0; }
body.barra-estreita .menu-item { position: relative; justify-content: center; padding: 8px 0; }
/* Sem o rótulo, o contador não tem onde ficar na linha: ele vira um selo no canto do ícone,
   que é como todo aplicativo de celular resolve o mesmo problema. */
body.barra-estreita .menu-item .selo-contador { position: absolute; margin: 0; transform: translate(12px, -10px); }
body.barra-estreita .barra-rodape { justify-items: center; }
body.barra-estreita .topo-nome { justify-content: center; padding: 6px 0; }
body.barra-estreita .barra-acoes { flex-direction: column; width: 100%; }
body.barra-estreita .barra-acoes .botao { width: 100%; padding: 0; justify-content: center; }

/* ------------------------------------------------------------------ tela e cabeçalho */

.tela { max-width: 1320px; margin: 0 auto; display: grid; gap: var(--e4); }
/* O relatório é o único que se lê em coluna estreita (ele vira papel): 1100px deixa a tabela
   com a mesma largura na tela e na folha, e evita a linha de 1800px que ninguém acompanha. */
.tela-relatorio { max-width: 1100px; }
.cabecalho { display: flex; align-items: flex-start; gap: var(--e3); flex-wrap: wrap; }
.cabecalho h1 { font-size: var(--t-xl); }
.cabecalho-sub { color: var(--tinta-fraca); font-size: var(--t-sm); margin-top: var(--e1); max-width: 78ch; }
.cabecalho-acoes { margin-left: auto; display: flex; gap: var(--e2); flex-wrap: wrap; }

/* --- estado vazio ---
   O vazio simples é uma frase dentro de uma moldura tracejada; o vazio RICO (`.vazio-rico`)
   traz um desenho de traço, a explicação e a ação que resolve. O desenho não é enfeite: ele é
   o que faz a tela vazia parecer um estado do sistema, e não uma tela que falhou ao carregar. */
.vazio {
  padding: var(--e5); text-align: center; color: var(--tinta-fraca); font-size: var(--t-md);
  background: var(--papel); border: 1px dashed var(--linha-forte); border-radius: var(--raio-g);
}
.vazio-rico { display: grid; gap: var(--e2); justify-items: center; padding: var(--e6) var(--e5); }
.vazio-desenho { width: 76px; height: 76px; color: var(--tinta-tenue); opacity: .9; }
.vazio-titulo { font-size: var(--t-lg); font-weight: var(--peso-forte); color: var(--tinta); }
.vazio-texto { max-width: 46ch; }
.vazio-acao { margin-top: var(--e2); }

.nota { color: var(--tinta-fraca); font-size: var(--t-sm); line-height: 1.55; }
.sub { color: var(--tinta-fraca); font-size: var(--t-xs); margin-top: 2px; }

/* --- esqueleto de carga (shimmer) ---
   Enquanto o mês/dia/relatório não chega, a tela mostra a FORMA do que vem. Um "Carregando…"
   centralizado dá a impressão de que nada está acontecendo; o bloco cinza pulsando ocupa o
   mesmo espaço do conteúdo e evita o pulo de layout quando a resposta chega. */
.esqueleto {
  position: relative; overflow: hidden;
  background: var(--papel-2); border-radius: var(--raio-p);
  min-height: 14px;
}
.esqueleto::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--brilho), transparent);
  animation: brilhar 1.5s infinite;
}
@keyframes brilhar { 100% { transform: translateX(100%); } }
.esqueleto-lista { display: grid; gap: var(--e2); }
.esqueleto-linha {
  height: 56px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--papel-2);
}
.esqueleto-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e2); }
.esqueleto-dia { height: 108px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--papel-2); }
.esqueleto-cards { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.esqueleto-card { height: 72px; border-radius: var(--raio-g); border: 1px solid var(--linha); background: var(--papel-2); }

/* --- erro com nova tentativa --- */
.erro-caixa {
  display: grid; gap: var(--e3); justify-items: center; text-align: center;
  padding: var(--e5);
  background: var(--papel); border: 1px solid var(--vermelho-borda); border-radius: var(--raio-g);
  color: var(--tinta-media);
}
.erro-caixa .icone { color: var(--vermelho); }

@media (prefers-reduced-motion: reduce) {
  .girador { animation-duration: 3s; }
  .esqueleto::after { animation: none; }
  .botao-primario:disabled::before { animation-duration: 3s; }
  * { transition-duration: 1ms !important; }
}

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

.filtros {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: var(--e3);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
}

/* ------------------------------------------------------------------ resumo do quadro

   Quatro números no topo do kanban, tirados da MESMA lista que desenha as colunas (nenhuma
   requisição a mais). Eles respondem de relance a pergunta que a pessoa faz ao abrir a tela —
   "o que está pegando fogo, e o que já saiu hoje?" — sem contar cartão com o dedo. */

.resumo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.resumo-card {
  display: grid; gap: 2px;
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  background: var(--papel); border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio);
}
.resumo-valor { font-size: var(--t-2xl); font-weight: var(--peso-forte); line-height: 1.1; font-variant-numeric: tabular-nums; }
.resumo-rotulo { font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .04em; }
.resumo-a-fazer { border-left-color: var(--st-a-fazer); }
.resumo-fazendo { border-left-color: var(--st-fazendo); }
.resumo-atrasadas { border-left-color: var(--vermelho); }
.resumo-atrasadas .resumo-valor { color: var(--vermelho); }
.resumo-concluidas { border-left-color: var(--st-concluida); }
.resumo-concluidas .resumo-valor { color: var(--verde); }

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

.quadro {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
/* O ACENTO DE COLUNA (F10): uma barra de 3px no topo, na cor do status, e o cabeçalho tingido no
   mesmo tom lavado. Cada coluna define os seus dois tokens locais e as regras genéricas os leem —
   é o que evita quatro blocos quase iguais e é o que faz uma quinta coluna, um dia, custar duas
   linhas.

   Por que a barra ficou no TOPO e não à esquerda: à esquerda ela competiria com a borda esquerda
   colorida do cartão (prioridade e prazo), que é a cor que a equipe precisa ler primeiro. No topo
   ela pertence claramente à coluna, e não ao trabalho. */
.coluna {
  --acento: var(--st-a-fazer);
  --acento-fundo: var(--st-a-fazer-fundo);
  display: flex; flex-direction: column; min-height: 200px;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio-g);
  border-top: 3px solid var(--acento);
  transition: background var(--rapido), box-shadow var(--rapido);
}
.coluna-fazendo { --acento: var(--st-fazendo); --acento-fundo: var(--st-fazendo-fundo); }
.coluna-aguardando { --acento: var(--st-aguardando); --acento-fundo: var(--st-aguardando-fundo); }
.coluna-concluida { --acento: var(--st-concluida); --acento-fundo: var(--st-concluida-fundo); }
/* Realce do alvo enquanto se arrasta: sem ele, ninguém sabe onde o cartão vai cair. */
.coluna.alvo { background: var(--azul-fraco); box-shadow: inset 0 0 0 2px var(--azul); }

/* O cabeçalho da coluna GRUDA no topo enquanto a coluna rola: numa coluna com trinta cartões,
   perder o nome da coluna é perder o sentido do que se está lendo. */
.coluna-topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3); border-bottom: 1px solid var(--linha);
  background: var(--acento-fundo);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
}
.coluna-topo h2 { font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--tinta-media); letter-spacing: .01em; }
/* O ponto colorido é o "acento de status": diz qual coluna é qual sem pintar a caixa inteira. */
.coluna-topo::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento);
}

.contador {
  margin-left: auto; min-width: 22px; padding: 0 6px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: var(--peso-forte); color: var(--tinta-fraca);
  text-align: center; line-height: 18px; font-variant-numeric: tabular-nums;
}
.coluna-corpo { display: grid; gap: var(--e2); padding: var(--e2); align-content: start; }
.coluna-vazia {
  color: var(--tinta-tenue); font-size: var(--t-sm); text-align: center;
  padding: var(--e4) 0; border: 1px dashed var(--linha-forte); border-radius: var(--raio);
}

/* ------------------------------------------------------------------ cartão

   Hierarquia do cartão, de cima para baixo: TÍTULO (o trabalho), cliente (para quem), prazo e
   hora (quando), responsável (quem) e as marcas de conversa/anexo. É a ordem em que a pergunta
   aparece na cabeça de quem passa o olho no quadro. */

.cartao {
  display: grid; gap: var(--e2); padding: var(--e3);
  background: var(--papel); border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio);
  cursor: grab;
  transition: border-color var(--rapido), transform var(--rapido);
}
.cartao:hover { border-color: var(--linha-forte); border-left-color: var(--azul); }
/* O cartão arrastado é o ÚNICO elemento do quadro com sombra: ele está literalmente flutuando
   sobre os outros, e a elevação é o que diz isso. */
.cartao.arrastando { opacity: .6; cursor: grabbing; box-shadow: var(--sombra-arrasto); transform: rotate(1deg); }

.cartao-topo { display: flex; align-items: flex-start; gap: var(--e2); }
.cartao-titulo { flex: 1; font-size: var(--t-md); font-weight: var(--peso-forte); line-height: 1.35; overflow-wrap: anywhere; }
.cartao-cliente { font-size: var(--t-sm); color: var(--tinta-fraca); overflow-wrap: anywhere; margin-top: -2px; }
.cartao-prazo { display: flex; align-items: center; gap: var(--e1); font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--tinta-media); }
.cartao-rodape { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-xs); }
.cartao-marcas { display: flex; align-items: center; gap: var(--e2); margin-left: auto; color: var(--tinta-fraca); }

.pessoa { display: inline-flex; align-items: center; gap: var(--e1); color: var(--tinta-fraca); min-width: 0; }
.pessoa > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* AVATAR (F10): as iniciais num disco com a cor da pessoa. O `data-cor` sai de um hash do id
   (ver `corDeterministica` no app.js), então a Marianne é sempre o mesmo tom — no cartão, no
   comentário, no topo da barra e na máquina do colega. Sem `data-cor` (ou com um valor que não
   existe) ele cai no cinza de antes, que continua legível. */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--papel-3); color: var(--tinta-media);
  font-size: .62rem; font-weight: var(--peso-forte); letter-spacing: .02em;
}
.avatar[data-cor] { background: var(--cor-fundo); color: var(--cor-tinta); }
.avatar-g { width: 28px; height: 28px; font-size: .74rem; }

/* Os oito tons, num lugar só. Qualquer elemento com `data-cor` herda o par de tokens; quem os
   usa (avatar, chip de cliente) decide o que pintar com eles. */
[data-cor="0"] { --cor-fundo: var(--p0-fundo); --cor-tinta: var(--p0-tinta); }
[data-cor="1"] { --cor-fundo: var(--p1-fundo); --cor-tinta: var(--p1-tinta); }
[data-cor="2"] { --cor-fundo: var(--p2-fundo); --cor-tinta: var(--p2-tinta); }
[data-cor="3"] { --cor-fundo: var(--p3-fundo); --cor-tinta: var(--p3-tinta); }
[data-cor="4"] { --cor-fundo: var(--p4-fundo); --cor-tinta: var(--p4-tinta); }
[data-cor="5"] { --cor-fundo: var(--p5-fundo); --cor-tinta: var(--p5-tinta); }
[data-cor="6"] { --cor-fundo: var(--p6-fundo); --cor-tinta: var(--p6-tinta); }
[data-cor="7"] { --cor-fundo: var(--p7-fundo); --cor-tinta: var(--p7-tinta); }

/* CHIP DE CLIENTE (F10): o nome do cliente num selo com a cor dele. É o que faz o quadro
   responder "quantos clientes tem aqui dentro?" sem ler linha por linha. O fundo é o tom lavado e
   a tinta é a escura do MESMO par — nunca uma cor solta. */
.chip-cliente {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 1px var(--e2); border-radius: var(--raio-pill);
  background: var(--cor-fundo, var(--papel-2)); color: var(--cor-tinta, var(--tinta-media));
  font-size: var(--t-xs); font-weight: var(--peso-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prazo { font-weight: var(--peso-medio); color: var(--tinta-media); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--e1); }
/* hora limite (F7b): entra logo depois da data, menor e sem quebrar a linha — herda a cor do
   prazo, para o "até 12:00" ficar vermelho junto com a data quando a hora estourou */
.prazo-hora { font-size: var(--t-xs); font-weight: var(--peso-medio); white-space: nowrap; }
.cartao-situacao { font-size: var(--t-xs); color: var(--tinta-fraca); }

.cartao-mover { display: flex; justify-content: flex-end; gap: 2px; }
.cartao-mover .botao-icone { width: 26px; height: 26px; }

/* PRIORIDADE (F10): a etiqueta ganhou um PONTO na frente do rótulo.
   O ponto existe por acessibilidade e por leitura de longe: um selo vermelho pequeno some no meio
   de um cartão que já está com fundo avermelhado por prazo vencido, e o ponto sólido continua
   visível. As três variantes existem — alta em vermelho contido, normal neutra e baixa em cinza —,
   mas o CARTÃO só desenha as duas que fogem do padrão: uma etiqueta "Normal" em noventa por cento
   dos cartões seria ruído puro. A `normal` é usada nas listas (Minha semana) e na paleta, onde a
   prioridade aparece fora do contexto da coluna. */
.etiqueta {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 1px var(--e2); border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .02em;
  border: 1px solid transparent;
}
.etiqueta::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta-alta { background: var(--vermelho-fraco); color: var(--vermelho); border-color: var(--vermelho-borda); }
.etiqueta-normal { background: var(--papel-2); color: var(--tinta-media); border-color: var(--linha-forte); }
.etiqueta-baixa { background: var(--papel-2); color: var(--tinta-fraca); border-color: var(--linha); }
.cartao.prio-alta { border-left-color: var(--vermelho); }
.cartao.prio-baixa { border-left-color: var(--linha-forte); }
.cartao.prio-normal { border-left-color: var(--st-fazendo); }

/* prazo: vermelho vencido, âmbar hoje/amanhã (ESPECIFICACAO.md) — sobrepõe a prioridade,
   porque data estourada é a informação mais urgente do cartão. O fundo é levíssimo: o cartão
   inteiro pintado de vermelho num quadro com noventa atrasadas apaga o próprio alerta. */
.cartao.prazo-vencido { border-left-color: var(--vermelho); background: var(--vermelho-fraco); }
.cartao.prazo-perto { border-left-color: var(--ambar); background: var(--ambar-fraco); }
.cartao.prazo-feito { opacity: .72; }
.cartao.prazo-feito .cartao-titulo { text-decoration: line-through; text-decoration-color: var(--tinta-tenue); }

.prazo-vencido .prazo, .situacao-vencido, .prazo.prazo-vencido { color: var(--vermelho); }
.prazo-perto .prazo, .situacao-perto, .prazo.prazo-perto { color: var(--ambar); }
.situacao-feito, .prazo.prazo-feito { color: var(--verde); }
/* "sem prazo" (F10): o registro antigo/importado que chegou sem data. Cinza, e nunca colorido —
   ele não é urgente nem tranquilo, é incompleto. */
.situacao-neutro, .prazo.prazo-neutro { color: var(--tinta-tenue); }

/* Marcas de conversa e de anexo no cartão: ícone + número, e nada quando é zero. */
.cartao-conversa, .cartao-anexos {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--tinta-fraca); font-size: var(--t-xs); font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ calendário

   Grade de sete colunas (domingo → sábado, como o calendário de parede daqui e como o
   `diaSemana` da API, em que 0 é domingo). As células têm altura MÍNIMA, não fixa: um dia com
   seis vencimentos precisa crescer, e cortar o sexto item seria esconder trabalho.

   No celular a grade vira uma lista de dias (ver o @media lá embaixo): sete colunas numa tela
   de 360px dariam 50px por dia, onde não cabe nem o título de uma atividade. */

.calendario-barra { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.calendario-navegacao { display: flex; align-items: center; gap: var(--e1); }
.calendario-mes { min-width: 180px; text-align: center; font-size: var(--t-lg); }

.calendario-rotulos {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e2);
  padding: 0 2px;
}
.calendario-rotulo {
  font-size: var(--t-xs); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); text-align: center;
}

.calendario-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e2); }

.dia {
  display: flex; flex-direction: column; gap: var(--e1); min-height: 108px;
  padding: var(--e2); background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.dia-fim-de-semana { background: var(--papel-2); }
.dia-fora { background: transparent; border-color: transparent; min-height: 0; }

/* O dia de hoje é o ponto de referência da tela inteira: anel azul, e não só uma cor de
   fundo, para continuar visível quando o dia também estiver cheio de fichas. */
.dia-hoje { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.dia-hoje .dia-numero { background: var(--azul); color: var(--sobre-azul); }

.dia-topo { display: flex; align-items: center; gap: var(--e1); }
.dia-numero {
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--raio-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: var(--peso-forte); color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.dia-semana-mini { display: none; font-size: var(--t-sm); color: var(--tinta-fraca); }
.dia-itens { display: grid; gap: var(--e1); }

/* A ficha é o cartão do quadro em miniatura: título, cliente e a MESMA cor de prazo. */
.ficha {
  display: grid; gap: 1px; width: 100%; text-align: left;
  padding: var(--e1) var(--e2); cursor: pointer;
  background: var(--papel-2); border: 1px solid var(--linha); border-left: 3px solid var(--st-fazendo);
  border-radius: var(--raio-p); font: inherit; color: inherit;
  transition: border-color var(--rapido), background var(--rapido);
}
.ficha:hover { border-color: var(--linha-forte); background: var(--papel-3); }
.ficha-titulo { font-size: var(--t-sm); font-weight: var(--peso-medio); line-height: 1.3; overflow-wrap: anywhere; }
.ficha-cliente { font-size: var(--t-xs); color: var(--tinta-fraca); overflow-wrap: anywhere; }
.ficha-hora { font-size: var(--t-xs); font-weight: var(--peso-forte); color: var(--tinta-fraca); }

.ficha.prio-alta { border-left-color: var(--vermelho); }
.ficha.prio-baixa { border-left-color: var(--linha-forte); }
.ficha.prazo-vencido { border-left-color: var(--vermelho); background: var(--vermelho-fraco); }
.ficha.prazo-perto { border-left-color: var(--ambar); background: var(--ambar-fraco); }
.ficha.prazo-feito { border-left-color: var(--verde); opacity: .75; }
.ficha.prazo-feito .ficha-titulo { text-decoration: line-through; text-decoration-color: var(--tinta-tenue); }

/* ------------------------------------------------------------------ minhas atividades */

.grupo { display: grid; gap: var(--e2); }
.grupo-titulo {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--tinta-media);
  text-transform: uppercase; letter-spacing: .04em;
}
.grupo-titulo .contador { margin-left: 0; }
.grupo-vencido { color: var(--vermelho); }
.grupo-perto { color: var(--ambar); }
.grupo-feito { color: var(--verde); }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.linha {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e2) var(--e3);
  background: var(--papel); border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio);
  transition: border-color var(--rapido), background var(--rapido);
}
.linha:hover { background: var(--papel-2); }
.linha.prazo-vencido { border-left-color: var(--vermelho); }
.linha.prazo-perto { border-left-color: var(--ambar); }
.linha.prazo-feito { border-left-color: var(--verde); opacity: .8; }
.linha select { width: auto; min-width: 132px; }
.linha-abrir {
  flex: 1; min-width: 200px; display: grid; gap: 1px; text-align: left;
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer; color: inherit;
}
.linha-titulo { font-weight: var(--peso-medio); }
.linha-abrir:hover .linha-titulo { color: var(--azul-tinta); }
.linha-cliente { font-size: var(--t-xs); color: var(--tinta-fraca); }

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

   Cabeçalho discreto (o dado é que importa), linha com hover e número à direita. */

.tabela-rolagem { overflow-x: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); }
.tabela { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabela th, .tabela td { padding: var(--e2) var(--e3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela th {
  font-size: var(--t-xs); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-fraca); background: var(--papel-2); white-space: nowrap;
}
.tabela tbody tr { transition: background var(--rapido); }
.tabela tbody tr:hover { background: var(--papel-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.inativo { color: var(--tinta-fraca); }
.tabela td.acoes { text-align: right; white-space: nowrap; }
.tabela td.acoes .botao { margin-left: var(--e1); padding: 0 var(--e2); min-height: 28px; font-size: var(--t-sm); }

.selo {
  display: inline-block; padding: 1px var(--e2); border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: var(--peso-medio);
  border: 1px solid transparent;
}
.selo-on { background: var(--verde-fraco); color: var(--verde); border-color: var(--verde-borda); }
.selo-off { background: var(--papel-2); color: var(--tinta-fraca); border-color: var(--linha); }
.selo-eu { margin-left: var(--e1); background: var(--azul-fraco); color: var(--azul-tinta); border-color: var(--azul-borda); }

/* ------------------------------------------------------------------ painéis e formulários */

.cartao-painel {
  display: grid; gap: var(--e3); padding: var(--e4);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
}
.dados { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.dados dt { font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .04em; }
.dados dd { margin: 3px 0 0; font-weight: var(--peso-medio); }

.formulario { display: grid; gap: var(--e3); }
.formulario-estreito { max-width: 380px; }
.formulario-acoes { display: flex; gap: var(--e2); }
.duas-colunas { display: grid; gap: var(--e3); grid-template-columns: 1fr 1fr; }

/* --------------------------------------------------- avisos por e-mail (F7c, Minha conta)
   A caixa alinha em cima do texto (e não no meio) porque cada opção tem duas linhas: o nome
   do aviso e a explicação do que vai chegar. Alinhar ao centro deixaria a caixa flutuando no
   meio do parágrafo, longe do nome a que ela pertence. */
.avisos-lista { display: grid; gap: var(--e3); }
.aviso-opcao { display: grid; grid-template-columns: auto 1fr; gap: var(--e2); align-items: start; cursor: pointer; }
.aviso-opcao input { width: auto; min-height: 0; margin-top: 3px; }
.aviso-opcao b { display: block; font-size: var(--t-md); }
.aviso-opcao .nota { display: block; margin-top: 2px; }

/* O e-mail na tabela de Equipe: fonte de largura fixa, como o nome de usuário ao lado — é
   endereço, e endereço se confere caractere a caractere. Quebra por qualquer ponto para um
   domínio longo não empurrar a tabela para fora da tela no celular. */
.email-celula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-sm); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ modal

   O painel da atividade é a única tela DENSA do sistema (formulário + anexos + conversa +
   histórico), e por isso ele é largo e as seções são separadas por uma linha de 1px em vez de
   caixas empilhadas: quatro caixas dentro de uma caixa é o desenho que faz um modal parecer
   uma gaveta bagunçada. */

.modal-fundo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e4);
  background: var(--veu);
  overflow-y: auto;
}
.modal {
  width: 100%; max-width: 520px; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
}
.modal-largo { max-width: 720px; }
.modal-topo { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); }
.modal-topo h2 { flex: 1; font-size: var(--t-lg); }
.modal-corpo { padding: var(--e4); overflow-y: auto; }
.modal-acoes {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3) var(--e4); border-top: 1px solid var(--linha); background: var(--papel-2);
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}
.modal-info { margin-right: auto; display: flex; gap: var(--e1); flex-wrap: wrap; font-size: var(--t-xs); color: var(--tinta-fraca); }

/* ------------------------------------------------------------------ avisos (flutuantes) */

.avisos {
  position: fixed; z-index: 70; top: var(--e3); right: var(--e3);
  display: grid; gap: var(--e2); max-width: min(380px, calc(100vw - 28px));
}
.aviso {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: var(--e2) var(--e3);
  background: var(--papel); border: 1px solid var(--linha); border-left: 3px solid var(--azul);
  border-radius: var(--raio); box-shadow: var(--sombra-alta);
  font-size: var(--t-sm);
}
.aviso span { flex: 1; }
.aviso-ok { border-left-color: var(--verde); }
.aviso-erro { border-left-color: var(--vermelho); }

/* ------------------------------------------------------------------ F5: contador do menu */

/*
  Contador vermelho de atrasadas, no item "Quadro" do menu e no topo da faixa.
  Vermelho aqui é o MESMO vermelho de prazo vencido do resto do sistema — é a mesma
  informação, vista de longe. Ele só existe quando é maior que zero (a SPA nem cria o nó),
  porque um contador cravado em 0 a semana inteira deixa de ser lido.
*/
.selo-contador {
  display: inline-block; min-width: 18px; margin-left: auto; padding: 0 5px;
  background: var(--vermelho); color: var(--sobre-vermelho); border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: var(--peso-forte); line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ F5: faixa de atrasadas */

.faixa {
  background: var(--vermelho-fraco);
  border: 1px solid var(--vermelho-borda); border-radius: var(--raio-g);
  overflow: hidden;
}
.faixa-topo {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  padding: var(--e3); border: 0; background: transparent;
  color: var(--vermelho); font: inherit; font-size: var(--t-md); font-weight: var(--peso-forte);
  text-align: left; cursor: pointer;
}
.faixa-topo:hover { background: var(--vermelho-toque); }
.faixa-seta { display: inline-flex; transition: transform var(--transicao); }
.faixa-fechada .faixa-seta { transform: rotate(-90deg); }
.faixa-topo .selo-contador { margin-left: 0; }
.faixa-dica { margin-left: auto; color: var(--tinta-fraca); font-weight: var(--peso-normal); font-size: var(--t-xs); }

.faixa-lista { list-style: none; margin: 0; padding: 0 var(--e2) var(--e2); display: grid; gap: var(--e1); }
.faixa-item { min-width: 0; }
.faixa-abrir {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  padding: var(--e2) var(--e2); border: 1px solid var(--vermelho-borda); border-radius: var(--raio-p);
  background: var(--papel); color: var(--tinta); font: inherit; font-size: var(--t-sm);
  text-align: left; cursor: pointer;
  transition: border-color var(--rapido);
}
.faixa-abrir:hover { border-color: var(--vermelho); }
.faixa-dias {
  flex: none; min-width: 66px; padding: 1px var(--e2);
  background: var(--vermelho); color: var(--sobre-vermelho); border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: var(--peso-forte); text-align: center;
}
.faixa-titulo { font-weight: var(--peso-medio); }
.faixa-cliente, .faixa-pessoa, .faixa-prazo { color: var(--tinta-fraca); font-size: var(--t-sm); }
.faixa-prazo { margin-left: auto; white-space: nowrap; }

/* ------------------------------------------------------------------ F5: carga da equipe */

.carga { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.carga-linha {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.carga-linha:hover { border-color: var(--azul-borda); background: var(--papel-2); }
.carga-pessoa { display: flex; align-items: center; gap: var(--e2); min-width: 190px; }
.carga-nome { font-weight: var(--peso-medio); }

/* A barra compara com quem tem MAIS atividades abertas; o trecho vermelho é a fatia vencida. */
.carga-barra { flex: 1; height: 8px; background: var(--papel-3); border-radius: var(--raio-pill); overflow: hidden; }
.carga-barra-total { display: block; height: 100%; background: var(--azul); border-radius: var(--raio-pill); }
.carga-barra-atraso { display: block; height: 100%; background: var(--vermelho); border-radius: var(--raio-pill) 0 0 var(--raio-pill); }

.carga-numeros { display: flex; gap: var(--e4); flex: none; }
.carga-num { display: grid; justify-items: center; min-width: 60px; font-size: var(--t-lg); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.carga-num small { color: var(--tinta-fraca); font-size: var(--t-xs); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: .03em; }
.carga-num.carga-atraso { color: var(--vermelho); }
.carga-num.carga-perto { color: var(--ambar); }

/* ------------------------------------------------------------------ F5: conversa e linha do tempo */

.modal-secoes { display: grid; gap: var(--e4); }
.bloco { border-top: 1px solid var(--linha); padding-top: var(--e4); display: grid; gap: var(--e2); }
.bloco-titulo {
  display: flex; align-items: center; gap: var(--e2);
  color: var(--tinta-fraca); text-transform: uppercase;
  font-size: var(--t-xs); font-weight: var(--peso-medio); letter-spacing: .06em;
}
.bloco-titulo .contador { margin-left: 0; }

.conversa { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.conversa-item { background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e2) var(--e3); }
.conversa-topo { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-sm); }
.conversa-quando { color: var(--tinta-fraca); font-size: var(--t-xs); }
.conversa-topo .botao-icone { margin-left: auto; width: 24px; height: 24px; }
/* `pre-wrap` para a quebra de linha que a pessoa digitou continuar existindo. */
.conversa-texto { margin-top: var(--e1); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-md); }
.conversa-envio { display: flex; gap: var(--e2); align-items: flex-start; }
.conversa-entrada { flex: 1; }

.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.linha-tempo-texto { flex: 1; }
.linha-tempo-item {
  display: flex; align-items: baseline; gap: var(--e2);
  padding-left: var(--e3); border-left: 2px solid var(--linha); font-size: var(--t-sm);
  color: var(--tinta-media);
}
.linha-tempo-quando { margin-left: auto; color: var(--tinta-fraca); font-size: var(--t-xs); white-space: nowrap; }

/* ------------------------------------------------------------------ F7e: anexos da atividade */

/* A lista de anexos usa a MESMA moldura dos comentários (mesmo bloco, mesma superfície
   rebaixada): são duas caixas irmãs dentro do mesmo modal, e um desenho diferente para cada uma
   faria a atividade parecer duas telas coladas. */
.anexos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.anexo-item {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--e2) var(--e3); font-size: var(--t-sm);
}
/* `anywhere` porque nome de arquivo de cliente é longo e não tem espaço para quebrar:
   "Extrato_Consolidado_ClinicaX_2026-08.pdf" empurraria o botão de remover para fora do modal. */
.anexo-nome { font-weight: var(--peso-medio); overflow-wrap: anywhere; color: var(--azul-tinta); }
.anexo-meta { color: var(--tinta-fraca); font-size: var(--t-xs); }
.anexo-item .botao-icone { margin-left: auto; width: 24px; height: 24px; }

.anexo-envio { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.anexo-arquivo { font-size: var(--t-sm); max-width: 100%; }
.anexo-limites { color: var(--tinta-fraca); font-size: var(--t-xs); }

/* A barra de progresso: trilho fixo + preenchimento que anda por `width` (o app.js só mexe nele).
   Sem `transition` longa — uma barra que "desliza" depois do fim do upload mente sobre o estado. */
.anexo-progresso { display: grid; gap: var(--e1); }
.anexo-barra-trilho { height: 6px; border-radius: var(--raio-pill); background: var(--papel-3); overflow: hidden; }
.anexo-barra { height: 100%; width: 0; background: var(--azul); transition: width var(--rapido) linear; }
.anexo-progresso-rotulo { color: var(--tinta-fraca); font-size: var(--t-xs); }

/* ------------------------------------------------------------------ F5: alerta de senha inicial */

.alerta {
  padding: var(--e3) var(--e4); border-radius: var(--raio-g);
  background: var(--ambar-fraco); border: 1px solid var(--ambar-borda); color: var(--ambar);
  display: grid; gap: var(--e1);
}
.alerta p { font-size: var(--t-sm); color: var(--ambar); }

/* ------------------------------------------------------------------ F6: diário da equipe */

/* A barra do dia: navegação ‹ hoje › à esquerda e o filtro de pessoa à direita. */
.diario-barra { display: flex; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; }
.diario-barra .campo { margin-left: auto; min-width: 220px; }
.diario-dia { font-size: var(--t-lg); min-width: 180px; text-align: center; }

.diario-grupo { gap: var(--e2); }
.diario-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* Uma linha por ação: hora, frase e cliente. A faixa colorida à esquerda separa o que é
   criação, o que é conclusão e o que é exclusão sem precisar de ícone nenhum. */
.diario-item {
  display: flex; align-items: baseline; gap: var(--e3); font-size: var(--t-sm);
  padding: var(--e1) var(--e2); border-left: 2px solid var(--linha); border-radius: 0 var(--raio-p) var(--raio-p) 0;
  background: var(--papel);
}
.diario-hora { color: var(--tinta-fraca); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diario-texto { flex: 1; overflow-wrap: anywhere; }
.diario-cliente { color: var(--tinta-fraca); font-size: var(--t-xs); white-space: nowrap; }

.diario-item.diario-criou { border-left-color: var(--azul); }
.diario-item.diario-concluiu { border-left-color: var(--verde); }
/* Exclusão em vermelho, e é a única linha que o diário destaca de propósito: é a ação que não
   deixa nada para trás no quadro, e quem lê o dia precisa bater o olho nela. */
.diario-item.diario-excluiu,
.diario-item.diario-excluiu-recorrencia { border-left-color: var(--vermelho); background: var(--vermelho-fraco); }

/* ------------------------------------------------------------------ relatórios (F7d) */
/*
  A tela de relatórios é a única feita para sair do monitor: ela vira planilha (CSV) e vira
  papel (Imprimir → salvar em PDF). Por isso duas coisas aqui não são decoração:

  - todo número fica em coluna alinhada à direita, com `tabular-nums`, para a leitura vertical
    de uma coluna de contagens não dançar;
  - o gráfico é feito de `height` em porcentagem, sem SVG e sem biblioteca — é o único desenho
    que imprime igual em qualquer navegador e não custa dependência nenhuma.
*/

.relatorio-filtros {
  display: grid; gap: var(--e3);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: var(--e3);
}
.relatorio-atalhos { display: flex; gap: var(--e2); flex-wrap: wrap; }
.relatorio-campos { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: flex-end; }
.relatorio-campos .campo { min-width: 150px; }
.relatorio-campos input[type="date"] { min-width: 150px; }

/* O atalho de período que está valendo agora — a pista de qual recorte está na tela. */
.botao-marcado { background: var(--azul-fraco); border-color: var(--azul-borda); color: var(--azul-tinta); font-weight: var(--peso-forte); }
.botao-marcado:hover { background: var(--azul-fraco); }

.relatorio-periodo { color: var(--tinta-fraca); font-size: var(--t-sm); }

.relatorio-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.relatorio-card {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--e3); display: grid; gap: 2px;
}
.relatorio-card-valor { font-size: var(--t-xl); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.relatorio-card-rotulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-fraca); font-weight: var(--peso-medio); }
/* O percentual no prazo é a nota do período: ele ocupa duas colunas e vem no azul do acento. */
.relatorio-card-destaque { grid-column: span 2; background: var(--azul-fraco); border-color: var(--azul-borda); }
.relatorio-card-destaque .relatorio-card-valor { font-size: var(--t-2xl); color: var(--azul-tinta); }
.relatorio-card-destaque .relatorio-card-rotulo { color: var(--azul-tinta); }
.relatorio-card-ruim .relatorio-card-valor { color: var(--vermelho); }

.relatorio-secao { display: grid; gap: var(--e2); }
.relatorio-secao-topo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.relatorio-secao-topo h2 { flex: 1; font-size: var(--t-lg); }
.relatorio-exportar { text-decoration: none; display: inline-flex; align-items: center; }

.relatorio-grafico {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: var(--e3);
}
.relatorio-legenda { display: flex; gap: var(--e3); font-size: var(--t-xs); color: var(--tinta-fraca); }
.relatorio-chave { display: inline-flex; align-items: center; gap: var(--e1); }
.relatorio-chave::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.relatorio-chave-criadas::before { background: var(--azul); }
.relatorio-chave-concluidas::before { background: var(--verde); }

.relatorio-semanas {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--e2); align-items: flex-end; overflow-x: auto;
}
.relatorio-semana { display: grid; gap: var(--e1); justify-items: center; flex: 1 1 46px; min-width: 46px; }
.relatorio-barras { display: flex; align-items: flex-end; gap: 3px; height: 130px; width: 100%; justify-content: center; }
.relatorio-barra { width: 14px; border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.relatorio-barra-criadas { background: var(--azul); }
.relatorio-barra-concluidas { background: var(--verde); }
.relatorio-barra-valor {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--tinta-fraca); font-variant-numeric: tabular-nums;
}
.relatorio-semana-rotulo { font-size: var(--t-xs); color: var(--tinta-fraca); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tabela-relatorio { min-width: 720px; }
.tabela-relatorio th, .tabela-relatorio td { padding: var(--e2) var(--e3); vertical-align: middle; }
.relatorio-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.relatorio-nome { font-weight: var(--peso-medio); margin-right: var(--e1); }
.relatorio-ruim { color: var(--vermelho); font-weight: var(--peso-medio); }
.relatorio-rodape { max-width: 68ch; }


/* ==================================================================== F10

   Cinco blocos novos: a busca da barra, a paleta de comandos (Ctrl+K), o painel de avisos, o
   checklist da atividade e a visão "Minha semana" — mais o menu suspenso dos filtros salvos.

   Todos seguem as cinco decisões da F9 (tokens, borda no lugar de sombra, cor com significado
   único, fonte do sistema, dois temas): não há uma cor solta aqui embaixo, e nenhuma superfície
   nova ganhou sombra — só a paleta, que flutua de verdade sobre a tela inteira. */

/* ------------------------------------------------------------------ busca na barra lateral

   O botão que abre a paleta. Ele tem cara de CAMPO (e não de botão) de propósito: é a forma que
   todo mundo já reconhece como "aqui se digita para procurar", e é o que faz alguém descobrir o
   atalho sem ler documentação — a tecla está escrita dentro dele. */

.barra-busca { padding: var(--e3) var(--e2) 0; }
.botao-busca {
  width: 100%; display: flex; align-items: center; gap: var(--e2);
  padding: 7px var(--e2); border-radius: var(--raio-p);
  background: var(--papel-2); border: 1px solid var(--linha);
  color: var(--tinta-fraca); font: inherit; font-size: var(--t-sm); text-align: left;
  cursor: pointer; transition: border-color var(--rapido), background var(--rapido);
}
.botao-busca:hover { border-color: var(--linha-forte); background: var(--papel-3); color: var(--tinta-media); }
.botao-busca .icone { flex: none; color: var(--tinta-tenue); }
.botao-busca-rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A tecla desenhada: mesma ideia do `<kbd>`, sem depender do estilo que cada navegador dá a ele. */
.atalho-tecla {
  flex: none; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--linha-forte); background: var(--papel);
  font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--tinta-fraca);
  line-height: 17px; white-space: nowrap;
}
/* Na barra estreita sobra a lupa: o rótulo e a tecla sairiam dos 56px. */
body.barra-estreita .botao-busca { justify-content: center; padding: 7px 0; }
body.barra-estreita .botao-busca-rotulo,
body.barra-estreita .botao-busca .atalho-tecla { display: none; }

/* ------------------------------------------------------------------ paleta de comandos (Ctrl+K)

   Ela FLUTUA sobre a tela inteira, e por isso é uma das três superfícies do sistema com sombra
   (as outras são o modal e o aviso). Fica colada no terço superior, e não centralizada: a lista
   cresce para baixo enquanto se digita, e uma caixa centralizada pularia a cada tecla. */

.paleta-fundo {
  position: fixed; inset: 0; z-index: 60;
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(8vh, var(--e5)) var(--e3) var(--e3);
  background: var(--veu);
}
.paleta {
  width: min(640px, 100%); max-height: 70dvh;
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta); overflow: hidden;
}
.paleta-topo { display: flex; align-items: center; gap: var(--e2); padding: var(--e3); border-bottom: 1px solid var(--linha); }
.paleta-topo .icone { flex: none; color: var(--tinta-tenue); }
.paleta-busca {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinta);
  font: inherit; font-size: var(--t-lg); padding: 0;
}
.paleta-busca:focus { outline: none; }
.paleta-lista { list-style: none; margin: 0; padding: var(--e2); overflow-y: auto; }
.paleta-grupo {
  padding: var(--e2) var(--e2) var(--e1);
  font-size: var(--t-xs); font-weight: var(--peso-forte); color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .04em;
}
.paleta-item {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%; padding: var(--e2); border: 0; border-radius: var(--raio-p);
  background: transparent; color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
}
.paleta-item .icone { flex: none; color: var(--tinta-tenue); }
/* O item MARCADO é o que o Enter abre. O fundo sozinho seria fraco para quem não distingue tons,
   então ele leva também o traço de 2px à esquerda — a mesma linguagem do item ativo do menu. */
.paleta-item.marcado { background: var(--azul-fraco); color: var(--azul-tinta); box-shadow: inset 2px 0 0 var(--azul); }
.paleta-item.marcado .icone { color: var(--azul); }
.paleta-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-meta { flex: none; display: flex; align-items: center; gap: var(--e2); font-size: var(--t-xs); color: var(--tinta-fraca); }
.paleta-vazia { padding: var(--e5) var(--e3); text-align: center; color: var(--tinta-fraca); font-size: var(--t-sm); }
.paleta-rodape {
  display: flex; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e2) var(--e3); border-top: 1px solid var(--linha);
  background: var(--papel-2); color: var(--tinta-fraca); font-size: var(--t-xs);
}

/* ------------------------------------------------------------------ sino de avisos

   Prefixo `sino-` e não `aviso-`: `.aviso` já é o balão flutuante de sucesso/erro desde a F2, e
   duas famílias com o mesmo prefixo seriam duas classes trocadas na primeira manutenção. */

.sino-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.sino-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.sino-item {
  display: flex; align-items: flex-start; gap: var(--e2);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  border-left: 3px solid var(--linha-forte);
}
/* Não lida: borda azul + o ponto. O ponto é o que informa quem não distingue a borda — e é o
   mesmo sinal que o selo do menu usa. */
.sino-item.nova { border-left-color: var(--azul); background: var(--papel); }
.sino-abrir {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3); border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.sino-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.sino-ponto-vazio { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); }
.sino-texto { flex: 1; min-width: 12ch; overflow-wrap: anywhere; }
.sino-alvo { font-weight: var(--peso-forte); }
.sino-quando { flex: none; font-size: var(--t-xs); color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.sino-marcar { flex: none; align-self: center; margin-right: var(--e2); }

/* Selo do menu: o contador de não lidas usa o `.selo-contador` que já existe (o mesmo das
   atrasadas), e ganha só a cor de acento — vermelho é prazo vencido neste sistema, e um aviso
   não lido não é uma emergência. */
.selo-contador.selo-aviso { background: var(--azul); color: var(--sobre-azul); border-color: var(--azul); }

/* ------------------------------------------------------------------ checklist da atividade */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.checklist-item {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2); border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--papel-2);
}
.checklist-item input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--azul); }
.checklist-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Item feito fica riscado E esmaecido: o risco é a informação, o esmaecimento é o que faz o olho
   pular para o que falta. Mesma regra do cartão concluído no quadro. */
.checklist-item.feito .checklist-texto { text-decoration: line-through; text-decoration-color: var(--tinta-tenue); color: var(--tinta-fraca); }
.checklist-acoes { flex: none; display: flex; gap: 2px; }
.checklist-acoes .botao-icone { width: 26px; height: 26px; }
.checklist-envio { display: flex; gap: var(--e2); margin-top: var(--e2); }
.checklist-envio input { flex: 1; min-width: 0; }
.checklist-resumo { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); font-size: var(--t-xs); color: var(--tinta-fraca); }
.checklist-trilho { flex: 1; height: 6px; border-radius: var(--raio-pill); background: var(--papel-3); overflow: hidden; }
.checklist-barra { height: 100%; background: var(--verde); border-radius: var(--raio-pill); transition: width var(--transicao); }

/* No CARTÃO do quadro é só a barra fina e o "3/5" — nunca os textos dos itens. O quadro fica
   aberto na tela da sala, e passo de trabalho de cliente é assunto de dentro do cartão. */
.cartao-checklist { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-xs); color: var(--tinta-fraca); }
.cartao-checklist .checklist-trilho { height: 4px; }
.cartao-checklist-numero { flex: none; font-variant-numeric: tabular-nums; font-weight: var(--peso-medio); }
.cartao-checklist.completo .checklist-barra { background: var(--verde); }
.cartao-checklist.completo .cartao-checklist-numero { color: var(--verde); }

/* ------------------------------------------------------------------ menu suspenso (filtros salvos)

   Um `<details>` nativo, e não um popover feito à mão: ele já abre e fecha pelo teclado, já é
   anunciado pelo leitor de tela e não precisa de nenhuma linha de JavaScript para posicionar. O
   que o CSS faz é tirar o triângulo padrão e prender a lista embaixo do gatilho. */

.menu-suspenso { position: relative; }
.menu-suspenso > summary { list-style: none; cursor: pointer; }
.menu-suspenso > summary::-webkit-details-marker { display: none; }
.menu-suspenso-lista {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 250px; max-width: 320px; max-height: 300px; overflow-y: auto;
  display: grid; gap: 2px; padding: var(--e2);
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.menu-suspenso-linha { display: flex; align-items: center; gap: var(--e1); }
.menu-suspenso-item {
  flex: 1; min-width: 0; display: block; padding: 6px var(--e2); border: 0; border-radius: var(--raio-p);
  background: transparent; color: var(--tinta); font: inherit; font-size: var(--t-sm);
  text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-suspenso-item:hover { background: var(--papel-2); }
.menu-suspenso-vazio { padding: var(--e2); color: var(--tinta-fraca); font-size: var(--t-xs); max-width: 34ch; }
.menu-suspenso-separador { border-top: 1px solid var(--linha); margin: var(--e1) 0; }

/* ------------------------------------------------------------------ Minha semana

   Colunas VERTICAIS, uma por dia, como o quadro — e não uma lista com subtítulos. A comparação
   entre segunda e quinta é a razão de a tela existir, e ela só acontece quando os dois dias estão
   lado a lado. */

.semana { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }
.semana-coluna {
  --acento: var(--linha-forte);
  display: flex; flex-direction: column; min-height: 120px;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio-g);
  border-top: 3px solid var(--acento);
}
.semana-vencido { --acento: var(--vermelho); }
.semana-perto { --acento: var(--ambar); }
.semana-tranquilo { --acento: var(--st-fazendo); }
/* Fim de semana e feriado: a coluna só aparece quando tem trabalho, e aparece apagada — para o
   olho registrar que aquilo caiu fora do expediente. */
.semana-folga { --acento: var(--tinta-tenue); }
.semana-neutro { --acento: var(--tinta-tenue); }
.semana-topo {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3); border-bottom: 1px solid var(--linha);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
}
.semana-topo h2 { font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--tinta-media); }
.semana-data { font-size: var(--t-xs); color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.semana-topo .contador { margin-left: auto; }
.semana-corpo { display: grid; gap: var(--e2); padding: var(--e2); align-content: start; }
.semana-vazia { color: var(--tinta-tenue); font-size: var(--t-xs); text-align: center; padding: var(--e3) 0; }
.semana-item {
  display: grid; gap: var(--e1); width: 100%;
  padding: var(--e2) var(--e3); border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio); background: var(--papel);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.semana-item:hover { border-color: var(--linha-forte); border-left-color: var(--azul); }
.semana-item.prazo-vencido { border-left-color: var(--vermelho); }
.semana-item.prazo-perto { border-left-color: var(--ambar); }
.semana-item-titulo { font-size: var(--t-sm); font-weight: var(--peso-forte); line-height: 1.35; overflow-wrap: anywhere; }
.semana-item-linha { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font-size: var(--t-xs); color: var(--tinta-fraca); }

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

@media (max-width: 1100px) {
  /*
    Tablet e celular: as 4 colunas viram uma faixa que rola na horizontal, com encaixe.
    A metáfora do kanban sobrevive (colunas lado a lado), e cada coluna ocupa quase a tela
    inteira, que é o único jeito de o cartão continuar legível. Como arrastar-e-soltar do
    HTML5 não existe no toque, cada cartão traz as setas ‹ › — mesmo efeito do arrastar.
  */
  .quadro {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 320px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--e1);
  }
  .coluna { scroll-snap-align: start; }
}

@media (max-width: 860px) {
  /*
    Celular: a grade de sete colunas vira uma LISTA por dia. Num aparelho de 360px cada
    coluna teria 50px, onde não cabe o título de nenhuma atividade — e um calendário ilegível
    não é calendário. Os dias sem nada (e as células de enchimento das pontas) somem: a lista
    passa a responder "o que tem para fazer neste mês", que é a pergunta de quem está no
    corredor do cliente com o celular na mão. A grade completa continua no computador.
  */
  .calendario-rotulos { display: none; }
  .calendario-grade { grid-template-columns: 1fr; gap: var(--e1); }
  .esqueleto-grade { grid-template-columns: 1fr; }
  .esqueleto-dia { height: 56px; }
  .dia { min-height: 0; flex-direction: row; align-items: flex-start; gap: var(--e2); }
  .dia-fora, .dia-sem-itens { display: none; }
  /* Depois da regra acima, e de propósito: HOJE fica na lista mesmo sem nada marcado — é a
     âncora que diz onde a pessoa está no mês, e um "nada para hoje" é informação. */
  .dia-hoje { display: flex; }
  .dia-topo { flex: none; width: 120px; flex-wrap: wrap; }
  .dia-semana-mini { display: inline; }
  .dia-itens { flex: 1; }
  .calendario-mes { min-width: 0; flex: 1; }

  .diario-barra .campo { margin-left: 0; width: 100%; }
  .diario-item { flex-wrap: wrap; gap: var(--e1); }
  .carga-linha { flex-wrap: wrap; }
  .carga-barra { order: 3; width: 100%; flex-basis: 100%; }
  .carga-numeros { margin-left: auto; }
  .faixa-abrir { flex-wrap: wrap; }
  .faixa-prazo { margin-left: 0; }
}

@media (max-width: 768px) {
  /*
    CELULAR: a barra lateral vira gaveta. Ela sai da grade (o conteúdo passa a ocupar a tela
    inteira), fica fixa fora da tela e desliza para dentro quando o hambúrguer é apertado —
    com um véu por cima do conteúdo, que fecha a gaveta no toque. É o padrão que todo mundo já
    conhece do celular, e é o único jeito de 240px de navegação não comerem metade de uma tela
    de 360px.
  */
  #app, body.barra-estreita #app { grid-template-columns: minmax(0, 1fr); }
  .barra {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    width: min(84vw, var(--barra-largura));
    transform: translateX(-102%);
    transition: transform var(--transicao);
    box-shadow: var(--sombra-alta);
  }
  body.barra-aberta .barra { transform: none; }
  /* No celular a gaveta é sempre a versão completa: colapsar não faz sentido num painel que
     já vive escondido. */
  body.barra-estreita .menu-rotulo,
  body.barra-estreita .marca-texto,
  body.barra-estreita .topo-nome span:not(.avatar),
  body.barra-estreita .barra-rotulo { display: initial; }
  body.barra-estreita .barra-topo { justify-content: flex-start; padding: 0 var(--e3); }
  body.barra-estreita .menu-item { justify-content: flex-start; padding: 7px var(--e2); }
  body.barra-estreita .barra-acoes { flex-direction: row; }
  body.barra-estreita .barra-acoes .botao { width: auto; padding: 0 var(--e3); justify-content: flex-start; }
  body.barra-estreita .barra-acoes .botao.barra-so-icone { width: 32px; padding: 0; justify-content: center; }
  body.barra-estreita .barra-rodape { justify-items: stretch; }
  body.barra-estreita .topo-nome { justify-content: flex-start; padding: 6px var(--e2); }
  body.barra-estreita .menu-item .selo-contador { position: static; transform: none; margin-left: auto; }
  .botao-colapsar { display: none; }

  .botao-barra { display: grid; }
  .conteudo { padding: 56px var(--e3) 48px; }

  .duas-colunas { grid-template-columns: 1fr; }
  .cabecalho-acoes { margin-left: 0; width: 100%; }
  .cabecalho-acoes .botao { flex: 1; }
  .avisos { top: auto; bottom: var(--e3); left: var(--e3); right: var(--e3); max-width: none; }
  .tabela td.acoes { text-align: left; }
  .tabela td.acoes .botao { margin: 3px var(--e1) 3px 0; }
  .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* F10 no celular: a semana vira uma coluna só (dois dias lado a lado em 360px não caberiam),
     a paleta encosta no topo e o menu suspenso dos filtros salvos ocupa a largura da tela. */
  .semana { grid-template-columns: minmax(0, 1fr); }
  .paleta-fundo { padding: var(--e2); }
  .paleta { max-height: 84dvh; }
  .menu-suspenso-lista { left: auto; right: 0; min-width: min(280px, calc(100vw - 2 * var(--e3))); }
  .sino-abrir { padding: var(--e2); }
  .modal-fundo { padding: var(--e2); align-items: flex-end; }
  .modal { max-height: 94dvh; }
  .relatorio-card-destaque { grid-column: span 2; }
  .relatorio-campos .campo, .relatorio-campos .botao { width: 100%; }
}

@media print {
  /*
    IMPRIMIR É O "PDF" DO RELATÓRIO (F7d): o gestor manda para a impressora e escolhe "Salvar
    em PDF" — é o que evita um gerador de PDF no servidor, que seria a dependência mais pesada
    do projeto inteiro. Para a folha sair limpa, some tudo o que só serve para operar a tela
    (navegação, filtros, atalhos, botões de exportar) e some a rolagem lateral das tabelas: no
    papel não existe rolagem, e uma tabela com `overflow` corta as últimas colunas em silêncio.
  */
  .topo, .barra, .barra-veu, .botao-barra, .pular,
  .filtros, .cartao-mover, .cabecalho-acoes, .avisos,
  /* F10: a paleta de comandos e as ações do sino são ferramentas de operar a tela — no papel
     elas só ocupariam espaço. */
  .paleta-fundo, .sino-acoes, .sino-marcar, .checklist-acoes, .checklist-envio,
  .calendario-navegacao .botao, .calendario-navegacao .botao-icone { display: none !important; }
  #app { grid-template-columns: 1fr; }
  body { background: #fff; color: #000; }
  .conteudo { padding: 0; }
  .coluna, .cartao, .linha, .dia, .modal { box-shadow: none; }

  .relatorio-filtros, .relatorio-exportar { display: none !important; }
  .tabela-rolagem { overflow: visible !important; border: 0; }
  .tabela-relatorio { min-width: 0; font-size: var(--t-xs); }
  .relatorio-secao, .relatorio-cards { break-inside: avoid; page-break-inside: avoid; }
  .relatorio-secao-topo h2 { break-after: avoid; page-break-after: avoid; }
}