/* FLH ADVOGADOS — identidade visual do sistema de prazos
   ------------------------------------------------------------------
   Amarelo #FFC20F, preto #12110C, cinza #878787, fundo #F2F1F1.

   O amarelo da marca é usado para identidade — cabeçalho, marcação de
   seção ativa, foco — e nunca para dizer "atenção" ou "risco" num dado.
   Sobre fundo claro ele tem contraste de 1,7:1, insuficiente para
   texto e enganoso num gráfico. Estado crítico é vermelho, com ícone e
   palavra ao lado, para quem não distingue cor continuar entendendo.  */

/*  ==================================================== A FONTE: INTER
    Hospedada aqui dentro, e NÃO buscada no Google.
    ------------------------------------------------------------------
    Dá para escrever uma linha apontando para fonts.googleapis.com e
    acabou. O preço é que toda abertura de tela manda uma requisição ao
    Google levando o endereço da página no cabeçalho Referer — e os
    endereços deste sistema carregam número de processo. Somando a isso
    que um tribunal alemão já decidiu, em 2022, que embutir Google Fonts
    sem consentimento viola o GDPR, e que a saída de internet daqui cai,
    o arquivo local ganha em tudo: nada sai do escritório, funciona sem
    internet e carrega antes.

    A licença é a SIL Open Font, que permite expressamente hospedar —
    o texto está em fontes/LICENCA-Inter.txt, junto do arquivo.

    UM arquivo por conjunto, não nove. Esta é a versão VARIÁVEL da
    Inter: os pesos de 100 a 900 vivem todos no mesmo woff2, e o
    navegador interpola o que a folha pedir. São 48 KB para o conjunto
    latino inteiro — menos do que os três pesos separados custariam.

    O `unicode-range` faz o segundo arquivo (latin-ext) só ser baixado
    se aparecer na tela um caractere que o primeiro não tem. Nome de
    cliente com ł ou ș é raro, e quando vier estará certo.

    `font-display:swap`: se por algum motivo o arquivo não carregar, a
    tela aparece na hora com a fonte de reserva em vez de ficar em
    branco esperando. A reserva é a Segoe UI, que é o que havia antes —
    a volta atrás é não ter o arquivo.  */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fontes/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('/static/fontes/inter-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fontes/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('/static/fontes/inter-latin-ext-wght-italic.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --amarelo:#FFC20F;
  --amarelo-fosco:#E0A800;
  --preto:#12110C;
  --cinza:#878787;
  --cinza-claro:#D9D8D4;
  --fundo:#F2F1F1;
  --branco:#FFFFFF;

  /*  Superfícies e tinta.
      ------------------------------------------------------------------
      Separados dos tokens da marca de propósito. --preto e --branco são
      CONSTANTES: o preto do cabeçalho continua preto no tema escuro, e o
      branco de um texto sobre ele continua branco. O que vira ao trocar
      de tema é isto aqui — o papel em que a informação é escrita e a
      tinta com que se escreve. Misturar as duas coisas num token só é o
      que faz um tema escuro sair com o cabeçalho invertido.  */
  --papel:#FFFFFF;          /* superfície de cartão */
  --papel-2:#FBFAF8;        /* painel discreto, linha alternada */
  --papel-3:#F3F2EF;        /* cabeçalho de tabela */
  --linha:#EDECEA;
  --papel-toque:#F7F6F3;   /* fundo ao passar o mouse */
  /*  A grade da planilha tinha as próprias cores fixas — bordas cinza,
      cabeçalho degradê, coluna do vencimento em creme. No tema escuro
      viravam blocos claros com texto escuro por cima: exatamente o que a
      captura de tela mostrava. Agora saem daqui.  */
  --grade-borda:#B9B8B2;      /* moldura externa da grade */
  --grade-fio:#C9C8C2;        /* fio entre colunas */
  --grade-fio-forte:#A9A8A2;  /* fio abaixo do cabeçalho e da coluna presa */
  --grade-cab-2:#E7E6E2;      /* fim do degradê do cabeçalho */
  /*  O FIO ENTRE AS LINHAS, medido.
      ------------------------------------------------------------------
      Ele estava em 1,18:1 sobre o papel branco — abaixo de 1,3, que é o
      limite prático da invisibilidade. Na tela de 250 linhas isso é o que
      faz a leitura "escorregar" de uma linha para a de baixo, que foi
      exatamente a queixa.

      #C4C2BA dá 1,78:1: aparece sem virar gaiola, e fica ABAIXO da
      moldura da grade (1,99:1), para a borda externa continuar sendo a
      borda externa. Vale mais que o fio entre colunas de propósito: ler
      uma planilha é percorrer a LINHA, e o fio que guia tem de ser o
      horizontal.  */
  --fio-linha:#C4C2BA;
  --zebra:#F5F4F0;            /* linha alternada — 1,10:1, um sopro */
  /*  A MIRA e a TRAVA. Ver app/static/mira.js para o porquê de a trava
      não ser amarela: nesta tela o amarelo já quer dizer "marcado para
      dar baixa", e confundir as duas coisas custa um prazo concluído
      por engano.
      Houve aqui um --mira-coluna, para a faixa que acendia a coluna.
      A faixa saiu; o token foi junto. Token morto na folha é pior que
      código morto: parece decisão de cor e ninguém ousa apagar.  */
  /*  A linha da mira. --lavagem-marca dava 1,036:1 sobre o papel — o
      realce existia no código e não na tela. 1,147:1 lê como faixa, e o
      texto preto continua em 16,5:1 sobre ela.  */
  --mira-linha:#FFEFBB;
  --lavagem-aviso:#FFFCF2;   /* caixa de atenção do manual */
  --trava-fundo:#E9F0F7;
  --trava-trilho:#1F4E79;
  --venc-fundo:#FFFBEF;       /* a coluna do vencimento, destacada */
  --venc-cab:#F7EFD6;
  --estrat-toque:#FFF3CB;     /* linha estratégica sob o mouse */
  --concluida-tinta:#7C7B74;
  /*  Tinta clara sobre o cromo preto da marca — cabeçalho, pílulas escuras,
      barra de baixa. NÃO vira no tema escuro: o cromo continua preto nos dois,
      então a tinta continua clara nos dois.  */
  --tinta-inversa:#FFFFFF;
  --tinta-inversa-2:#F2F1F1;  /* o mesmo papel, um tom abaixo */          /* fio interno, mais fraco que a borda */
  --borda-fraca:#E6E5E1;    /* borda mais leve que --cinza-claro */
  --tinta:#12110C;          /* texto principal */
  --tinta-2:#3A382F;        /* texto secundário */
  --tinta-3:#4A483F;        /* texto terciário */
  --tinta-4:#5B5A54;        /* dica, legenda */
  --lavagem-marca:#FFFBEC;  /* fundo amarelado de destaque */
  --lavagem-marca-2:#FFF6D9;
  --lavagem-erro:#FBE9E7;
  --lavagem-erro-2:#FDF3F2;
  --link:#1F4E79;
  /*  Os quatro estados de aviso, cada um com lavagem, borda e tinta. Sem
      token, o aviso verde continuava claro no tema escuro enquanto os
      outros três escureciam — e um aviso que destoa dos vizinhos parece
      defeito, não destaque.  */
  --lavagem-ok:#ECFCCB;  --borda-ok:#D3E8A8;  --tinta-ok:#31500E;
  --borda-erro:#F0C7C2;  --tinta-erro:#7A1B15;
  --borda-link:#C6D9EA;  --tinta-link:#1B3E5F;
  --borda-marca:#F2DC9A; --tinta-marca:#5A4600;
  --tinta-marca-2:#6B5200; --tinta-marca-3:#8A6200;
  /*  OS CARTÕES DE ALERTA DA PUBLICAÇÃO.
      ------------------------------------------------------------------
      Cada um com fundo, borda e tinta PRÓPRIOS, e definidos nos três
      blocos de paleta. Antes eles misturavam cor fixa com token de tema:
      `.grave` tinha fundo #FDECEA cravado e tinta var(--tinta-erro) —
      que no tema escuro vira um vermelho claro. Vermelho claro sobre rosa
      claro. E `.atencao` fazia o inverso: fundo que escurecia com o tema
      e tinta #6B5407 cravada, marrom sobre marrom.
      É a regra que este arquivo repete em outros lugares e que aqui foi
      quebrada: cor não pode ter metade da definição presa a um tema.  */
  --alerta-grave-fundo:#FDECEA; --alerta-grave-borda:#F3C9C4;
  --alerta-grave-tinta:#7A1B15;
  --alerta-atencao-fundo:#FFF6D9; --alerta-atencao-borda:#F1DFA6;
  --alerta-atencao-tinta:#6B5407;
  --alerta-comum-fundo:#F3F2EF; --alerta-comum-borda:#E3E2DE;
  --alerta-comum-tinta:#4A483F;
  --alerta-valor-fundo:#12110C; --alerta-valor-borda:#12110C;
  --alerta-valor-tinta:#FFC20F; --alerta-valor-pe:#D8D6CE;
  --pill-venc-fundo:#FBEBE9; --pill-venc-borda:#F0C7C2; --pill-venc-tinta:#B3261E;
  --pill-hoje-fundo:#FFEDD5; --pill-hoje-borda:#FBD3AE; --pill-hoje-tinta:#C2410C;
  --pill-prox-fundo:#FEF3C7; --pill-prox-borda:#F5DFA0; --pill-prox-tinta:#92400E;
  --pill-conc-fundo:#EDF0F1; --pill-conc-borda:#DBE0E2; --pill-conc-tinta:#4A5760;
  --tracejado:#C9C7BF;
  --lavagem-link:#EEF4FA;

  --vencido:#B3261E;
  --hoje:#C2410C;
  --proximo:#B45309;
  --tranquilo:#3F6212;
  --concluido:#5B6B73;

  --sombra:0 1px 2px rgba(18,17,12,.08), 0 4px 14px rgba(18,17,12,.06);
  --raio:10px;
  --fonte:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

/*  TEMA ESCURO — o sistema inteiro.
    ------------------------------------------------------------------
    Só os tokens mudam; nenhuma regra de layout é duplicada. É por isso
    que o tema escuro cabe em vinte linhas em vez de ser uma segunda
    folha de estilo que envelhece em paralelo com a primeira.

    Duas coisas NÃO viram, e é proposital:
      · o preto e o amarelo da marca — o cabeçalho continua preto com o
        amarelo em cima, que é como a marca existe;
      · as cores de estado escolhidas em Parâmetros, que já são
        calibradas pelo escritório. O que muda é a lavagem de fundo
        atrás delas.

    Os tons de papel não são cinzas neutros: puxam para o quente, na
    mesma direção do preto da marca (#12110C, que tem amarelo dentro).
    Cinza neutro ao lado do preto da marca faz o preto parecer sujo.  */
body.tema-escuro{
  --fundo:#141310;
  --papel:#1C1A15;
  --papel-2:#232019;
  --papel-3:#262218;
  --linha:#332F26;
  --papel-toque:#2A2620;
  --grade-borda:#3A362C;
  --grade-fio:#3C382D;        /* era #2E2A22 — 1,22:1, invisível */
  --grade-fio-forte:#454135;
  --grade-cab-2:#221F18;
  /*  No escuro a borda precisa de mais: o olho distingue pior degrau de
      luminância na faixa baixa. 1,94:1 aqui equivale ao 1,78 do claro.  */
  --fio-linha:#4E493C;
  --zebra:#27231B;
  --mira-linha:#3A3320;
  --lavagem-aviso:#2A2415;
  --trava-fundo:#1E2733;
  --trava-trilho:#7FB2E5;
  --venc-fundo:#241F13;
  --venc-cab:#2B2416;
  --estrat-toque:#332B18;
  --concluida-tinta:#7E7A70;
  /*  Os mesmos seis pares, virados. O fundo escurece, a tinta clareia, e
      o par continua sendo um par — que é o que faltava.  */
  --alerta-grave-fundo:#3A1F1B; --alerta-grave-borda:#6B322B;
  --alerta-grave-tinta:#FFC4BC;
  --alerta-atencao-fundo:#332A12; --alerta-atencao-borda:#5E4E1E;
  --alerta-atencao-tinta:#FFDE94;
  --alerta-comum-fundo:#262319; --alerta-comum-borda:#3E3A2E;
  --alerta-comum-tinta:#D6D3CA;
  /*  O cartão do VALOR era preto com amarelo no tema claro — bonito e
      proposital, porque valor em dinheiro é o que a pessoa procura na
      tela. No escuro, preto sobre escuro some: aqui ele vira o inverso,
      amarelo de fundo com tinta preta, e continua sendo o que salta.  */
  --alerta-valor-fundo:#FFC20F; --alerta-valor-borda:#E0A800;
  --alerta-valor-tinta:#12110C; --alerta-valor-pe:#4A3D00;
  --borda-fraca:#332F26;
  --cinza-claro:#3A362C;
  --cinza:#8F8C83;
  --tinta:#EDECE8;
  --tinta-2:#C9C6BE;
  --tinta-3:#B0ADA4;
  --tinta-4:#9A968D;
  --lavagem-marca:#2A2415;
  --lavagem-marca-2:#332B18;
  --lavagem-erro:#33201D;
  --lavagem-erro-2:#2B1C19;
  --link:#8FBEE8;
  --lavagem-ok:#1E2A16;  --borda-ok:#3A4F28;  --tinta-ok:#A8D67E;
  --borda-erro:#5A2E29;  --tinta-erro:#F0A49C;
  --borda-link:#2C3B4A;  --tinta-link:#9CC6E8;
  --borda-marca:#4A3D1C; --tinta-marca:#E0C87A;
  --tinta-marca-2:#E0C87A; --tinta-marca-3:#D9B45E;
  /*  As pastilhas, viradas: fundo escurece, tinta clareia. Antes o fundo
      era fixo e só a tinta virava — ver o comentário em .pill.  */
  --pill-venc-fundo:#33201D; --pill-venc-borda:#5A2E29; --pill-venc-tinta:#FFB4AC;
  --pill-hoje-fundo:#33241A; --pill-hoje-borda:#5E4029; --pill-hoje-tinta:#F5B183;
  --pill-prox-fundo:#332A12; --pill-prox-borda:#5E4E1E; --pill-prox-tinta:#FFDE94;
  --pill-conc-fundo:#22262A; --pill-conc-borda:#39404A; --pill-conc-tinta:#B7C6CE;
  --tracejado:#4A463C;
  --lavagem-link:#1E2733;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  /*  As cores de estado clareiam um pouco: o mesmo vermelho que tem
      contraste de sobra sobre papel branco fica abafado sobre papel
      escuro.  */
  --vencido:#E4635A;
  --hoje:#E08A4E;
  --proximo:#D9A017;
  --tranquilo:#66B35C;
  --concluido:#8FA0A8;
}

/*  O modo "acompanha o computador". A lista de tokens aparece duas vezes,
    e não há como não aparecer: media query não entra numa lista de
    seletores junto com uma classe. A alternativa seria pôr a classe por
    JavaScript, e aí a tela pisca clara antes de escurecer. Piscar é pior
    que repetir vinte linhas que mudam juntas.  */
@media (prefers-color-scheme: dark){
  body.tema-auto{
  --fundo:#141310;
  --papel:#1C1A15;
  --papel-2:#232019;
  --papel-3:#262218;
  --linha:#332F26;
  --papel-toque:#2A2620;
  --grade-borda:#3A362C;
  --grade-fio:#3C382D;        /* era #2E2A22 — 1,22:1, invisível */
  --grade-fio-forte:#454135;
  --grade-cab-2:#221F18;
  /*  No escuro a borda precisa de mais: o olho distingue pior degrau de
      luminância na faixa baixa. 1,94:1 aqui equivale ao 1,78 do claro.  */
  --fio-linha:#4E493C;
  --zebra:#27231B;
  --mira-linha:#3A3320;
  --lavagem-aviso:#2A2415;
  --trava-fundo:#1E2733;
  --trava-trilho:#7FB2E5;
  --venc-fundo:#241F13;
  --venc-cab:#2B2416;
  --estrat-toque:#332B18;
  --concluida-tinta:#7E7A70;
  /*  Os mesmos seis pares, virados. O fundo escurece, a tinta clareia, e
      o par continua sendo um par — que é o que faltava.  */
  --alerta-grave-fundo:#3A1F1B; --alerta-grave-borda:#6B322B;
  --alerta-grave-tinta:#FFC4BC;
  --alerta-atencao-fundo:#332A12; --alerta-atencao-borda:#5E4E1E;
  --alerta-atencao-tinta:#FFDE94;
  --alerta-comum-fundo:#262319; --alerta-comum-borda:#3E3A2E;
  --alerta-comum-tinta:#D6D3CA;
  /*  O cartão do VALOR era preto com amarelo no tema claro — bonito e
      proposital, porque valor em dinheiro é o que a pessoa procura na
      tela. No escuro, preto sobre escuro some: aqui ele vira o inverso,
      amarelo de fundo com tinta preta, e continua sendo o que salta.  */
  --alerta-valor-fundo:#FFC20F; --alerta-valor-borda:#E0A800;
  --alerta-valor-tinta:#12110C; --alerta-valor-pe:#4A3D00;
  --borda-fraca:#332F26;
  --cinza-claro:#3A362C;
  --cinza:#8F8C83;
  --tinta:#EDECE8;
  --tinta-2:#C9C6BE;
  --tinta-3:#B0ADA4;
  --tinta-4:#9A968D;
  --lavagem-marca:#2A2415;
  --lavagem-marca-2:#332B18;
  --lavagem-erro:#33201D;
  --lavagem-erro-2:#2B1C19;
  --link:#8FBEE8;
  --lavagem-ok:#1E2A16;  --borda-ok:#3A4F28;  --tinta-ok:#A8D67E;
  --borda-erro:#5A2E29;  --tinta-erro:#F0A49C;
  --borda-link:#2C3B4A;  --tinta-link:#9CC6E8;
  --borda-marca:#4A3D1C; --tinta-marca:#E0C87A;
  --tinta-marca-2:#E0C87A; --tinta-marca-3:#D9B45E;
  /*  As pastilhas, viradas: fundo escurece, tinta clareia. Antes o fundo
      era fixo e só a tinta virava — ver o comentário em .pill.  */
  --pill-venc-fundo:#33201D; --pill-venc-borda:#5A2E29; --pill-venc-tinta:#FFB4AC;
  --pill-hoje-fundo:#33241A; --pill-hoje-borda:#5E4029; --pill-hoje-tinta:#F5B183;
  --pill-prox-fundo:#332A12; --pill-prox-borda:#5E4E1E; --pill-prox-tinta:#FFDE94;
  --pill-conc-fundo:#22262A; --pill-conc-borda:#39404A; --pill-conc-tinta:#B7C6CE;
  --tracejado:#4A463C;
  --lavagem-link:#1E2733;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  /*  As cores de estado clareiam um pouco: o mesmo vermelho que tem
      contraste de sobra sobre papel branco fica abafado sobre papel
      escuro.  */
  --vencido:#E4635A;
  --hoje:#E08A4E;
  --proximo:#D9A017;
  --tranquilo:#66B35C;
  --concluido:#8FA0A8;
}
  body.tema-auto{background:var(--fundo);color:var(--tinta)}
}
}
}
}
}
}
}
body.tema-escuro{background:var(--fundo);color:var(--tinta)}
/*  color-scheme diz ao NAVEGADOR que a página é escura, e isso é o que faz ele
    desenhar sozinho, em escuro, tudo o que a folha de estilo não alcança: a
    caixa de seleção, a seta do <select>, o campo de data, a barra de rolagem.
    Sem esta linha, o tema escuro fica com quadradinhos brancos espalhados que
    nenhuma regra CSS consegue pintar — controle nativo não aceita background.
    accent-color pinta a marcação da caixa com o amarelo da casa.  */
body.tema-escuro{color-scheme:dark}
body.tema-claro{color-scheme:light}
body.tema-auto{color-scheme:light dark}
body{accent-color:var(--amarelo-fosco)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fonte);
  background:var(--fundo);
  color:var(--tinta);
  font-size:14px;
  line-height:1.5;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* ------------------------------------------------------------- topo */
.topo{
  background:var(--preto);
  color:var(--branco);
  display:flex;align-items:center;gap:22px;
  padding:0 22px;min-height:60px;
  position:sticky;top:0;z-index:40;
  border-bottom:3px solid var(--amarelo);
  /*  Altura travada e sem quebra era uma armadilha de tempo: cada item novo
      na barra empurrava o bloco do usuário para fora da tela, e com a letra
      aumentada isso passou a acontecer já em monitor grande. Quem sai da tela
      primeiro é justamente o "sair". Agora a barra cresce quando precisa, e o
      menu rola dentro de si em vez de expulsar o vizinho.  */
  flex-wrap:wrap;
}
/*  A marca na barra escura.
    O logo inteiro tem quatro linhas de texto; reduzido à altura de uma barra de
    60px, o nome do escritório fica ilegível. Então a barra usa o monograma como
    imagem e o nome como texto de verdade — assim ele se lê, respeita o tema do
    navegador e continua selecionável.  */
.topo .marca{display:flex;align-items:center;gap:11px;text-decoration:none}
.topo .marca:hover{text-decoration:none}
/*  `width:auto` com altura fixa, sempre: o monograma é 73x119, e qualquer
    par de medidas fixas o deforma. Ver o comentário em estilo-novo.css.  */
.topo .marca img{height:30px;width:auto;display:block;flex:none}
/*  O logotipo inteiro só entra na barra lateral; aqui ele fica de fora.  */
.topo .marca .lockup{display:none}
.topo .marca .nome-firma{
  font-size:11.5px;line-height:1.22;font-weight:700;letter-spacing:.02em;
  color:var(--branco);text-transform:uppercase;white-space:nowrap;
}
.topo .marca .nome-firma i{
  font-style:normal;font-weight:600;letter-spacing:.2em;font-size:9px;
  color:var(--cinza);
}
.topo .marca .modulo{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amarelo);border-left:1px solid var(--tinta-2);padding-left:11px;
  align-self:stretch;display:flex;align-items:center;font-weight:600;
}
/*  flex:1 com min-width:0 é o que permite ao menu ENCOLHER; sem o min-width
    zero, um contêiner flex se recusa a ficar menor que o conteúdo e o excesso
    vaza para fora da tela. A rolagem lateral fica sem barra visível — ela
    existe para o caso extremo, não para ser usada todo dia.  */
.menu{
  display:flex;gap:2px;margin-left:auto;min-height:57px;align-self:stretch;
  flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.usuario{flex:none}
.menu a{
  color:#D8D6CE;display:flex;align-items:center;padding:0 15px;
  font-size:13px;border-bottom:3px solid transparent;margin-bottom:-3px;
  text-decoration:none;white-space:nowrap;
}
.menu a:hover{color:var(--tinta-inversa);background:#211F18;text-decoration:none}
.menu a.ativo{color:var(--amarelo);border-bottom-color:var(--amarelo);font-weight:600}
.menu a .selo{
  /*  O selo do menu fica no vermelho FIXO, e não no --vencido do tema: no
      escuro o --vencido clareia para ter contraste sobre papel escuro, e
      branco sobre vermelho claro caía para 3,4:1 dentro do selo.  */
  background:#B3261E;color:var(--tinta-inversa);border-radius:9px;font-size:10px;
  padding:1px 6px;margin-left:6px;font-weight:700;
}
.usuario{
  display:flex;align-items:center;gap:10px;color:#9C9A92;font-size:12px;
  border-left:1px solid #34322A;padding-left:16px;margin-left:6px;
}
.usuario b{color:var(--branco);font-weight:600}
.usuario a{color:#9C9A92}

/* ------------------------------------------------------------ layout */
.corpo{max-width:1680px;margin:0 auto;padding:20px 22px 60px}
/*  O teto de largura é uma RÉGUA DE LEITURA, e por isso não vale para
    tabela. Ver o comentário em base.html: 1680px mantém a linha de texto
    legível, e estrangula uma grade de 28 colunas que precisa de 2.583.  */
body.tela-larga .corpo{max-width:none}

/*  ================================ ALTURA DA PLANILHA: onde ela estava indo
    Medido em 1640x892, com a grade em 604px de 892 — 68% da tela para o
    que a pessoa veio ver. Os 288px restantes, banda a banda:

        20   respiro do topo da página
        48   título + a frase de instrução, EMPILHADOS
         8   margem
        90   barra de filtros (duas linhas)
         8   margem
        14   barra de rolagem de cima
       ---
       188   acima da grade
        43   a faixa "rolando… 60 de 453"
        46   o rodapé da página, com margem e filete
        16   respiro do fim da página
       ---
       105   abaixo da grade

    O que muda aqui NÃO tira informação de lugar nenhum: o título e a frase
    passam a dividir uma linha em vez de duas (a frase continua lá, inteira,
    e volta a empilhar sozinha quando a tela é estreita), e as três faixas
    de respiro encolhem para o mínimo que ainda separa. Ganho medido: ~90px,
    quase três linhas de prazo.

    Vale só em body.tela-larga — as telas de leitura continuam com o
    espaçamento generoso, porque ali o espaço É o desenho.  */
body.tela-larga .corpo{padding-top:12px;padding-bottom:10px}

/*  Título e instrução na MESMA linha QUANDO CABEM, sem número mágico.
    ------------------------------------------------------------------
    A frase explica como usar a tabela e se lê uma vez; empilhada sob o
    título ela custa 22px em toda visita, para sempre. Lado a lado, o
    cabeçalho cai de 48px para 30.

    Duas versões erradas antes desta, e as duas por motivo diferente:

      1. Lado a lado em QUALQUER largura. Em 1640px a frase não cabia ao
         lado do título com os botões no outro canto: quebrava em três
         linhas DENTRO da própria caixa e o cabeçalho subia para 70px —
         o oposto do que eu queria.

      2. Lado a lado acima de 1800px, por media query. Número mágico não
         sobrevive ao mundo real: a escala da própria tela (90%, 110%), o
         menu recolhido e a largura da janela mudam quanto sobra, e a
         media query só enxerga a janela. Na tela do escritório o corte
         não pegou, e a mesma página saiu diferente da minha.

    O que resolve é deixar o FLEXBOX decidir, que é quem sabe se cabe:
    `flex-wrap` no container e `white-space:nowrap` na frase. Sem poder
    quebrar por dentro, ou ela cabe ao lado do título, ou desce inteira
    para a linha de baixo. Nenhuma largura escrita à mão, e o resultado
    é o certo em qualquer escala, com o menu aberto ou recolhido.  */
body.tela-larga .cabecalho{align-items:baseline;gap:14px}
body.tela-larga .cabecalho > div:first-child{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  flex:1 1 auto;min-width:0;
}
body.tela-larga .cabecalho h1{margin-bottom:0;flex:none}
body.tela-larga .cabecalho .sub{
  margin:0;flex:0 1 auto;min-width:0;
  /*  O nowrap é o que faz a frase descer INTEIRA em vez de quebrar em
      três linhas onde está. O overflow/ellipsis é a rede de segurança
      para a janela estreitíssima, onde nem sozinha ela caberia — e aí o
      title do elemento continua com o texto completo.  */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/*  A faixa de "rolando…" é um rodapé de tabela, não um cartão: 12px de
    recheio em cima e embaixo faziam dela uma banda de 43px para uma frase
    de doze palavras. O !important é contra a folha nova, que a redefine
    depois desta e com a mesma especificidade de classe única — sem ele a
    regra daqui parece aplicada e não é.  */
body.tela-larga .fim-rolagem{padding:4px 12px !important;font-size:12px}

/*  O rodapé da página encosta mais na tabela e afina a letra. Ele é uma
    linha de resseguro — quem é o escritório, que a planilha PRAZOS continua
    intacta, a data do código — lida uma vez e consultada raramente. Numa
    tela em que cada 33px é um prazo a mais à vista, 48px de rodapé são uma
    linha e meia de trabalho. O filete continua separando: é ele que faz o
    trabalho, e não a margem.  */
body.tela-larga .rodape-pag{
  margin-top:8px !important;padding-top:6px !important;
  font-size:11px;gap:10px;
}
h1{font-size:21px;margin:0 0 3px;font-weight:650;letter-spacing:-.2px}
h2{font-size:15px;margin:26px 0 10px;font-weight:650}
.sub{color:var(--cinza);font-size:12.5px;margin:0 0 18px}
.cabecalho{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.cabecalho .acoes{margin-left:auto;display:flex;gap:8px;align-items:center}

.cartao{
  background:var(--papel);border:1px solid var(--cinza-claro);
  border-radius:var(--raio);box-shadow:var(--sombra);padding:16px 18px;margin-bottom:16px;
}
.cartao > h2:first-child{margin-top:0}

/* --------------------------------------------------------- indicadores */
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.ind{
  background:var(--papel);border:1px solid var(--cinza-claro);border-radius:var(--raio);
  padding:13px 15px;box-shadow:var(--sombra);border-top:3px solid var(--cinza-claro);
}
.ind .rot{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--cinza)}
.ind .val{font-size:27px;font-weight:680;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
.ind .pe{font-size:11.5px;color:var(--cinza);margin-top:2px}
.ind.critico{border-top-color:var(--vencido)} .ind.critico .val{color:var(--vencido)}
.ind.alerta{border-top-color:var(--hoje)}     .ind.alerta .val{color:var(--hoje)}
.ind.atencao{border-top-color:var(--proximo)} .ind.atencao .val{color:var(--proximo)}
.ind.bom{border-top-color:var(--tranquilo)}   .ind.bom .val{color:var(--tranquilo)}
.ind.marca{border-top-color:var(--amarelo)}

/* -------------------------------------------------------------- tabela */
.rolagem{overflow:auto;max-height:70vh;border:1px solid var(--cinza-claro);border-radius:var(--raio);background:var(--papel)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
thead th{
  position:sticky;top:0;z-index:5;background:var(--linha);text-align:left;
  padding:9px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-3);border-bottom:2px solid var(--cinza-claro);white-space:nowrap;
}
tbody td{padding:8px 10px;border-bottom:1px solid #ECEBE8;vertical-align:top}
tbody tr:hover{background:#FCFBF7}
tbody tr.concluido td{color:var(--concluido)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/*  `.dir` quer dizer "à direita" — em qualquer tabela, e não só nas do
    Quadro. A regra existia escopada em `.q-tabela`, então as tabelas da
    Gestão, que usam `<th class="dir">` sem essa classe, ficavam com o
    título à esquerda e os números à direita. Medido: 64 colunas do
    sistema com título de um lado e conteúdo do outro.  */
/*  `table th.dir` e não `th.dir`: a especificidade tem de vencer regras
    de tabela específica que dizem `text-align:left` para todo cabeçalho
    — a do Quadro faz isso, e por vir depois na folha ganhava de um
    `.dir` de mesma especificidade. `.dir` é decisão explícita de coluna:
    ela ganha do padrão da tabela em qualquer ordem.  */
table td.dir,table th.dir{text-align:right}
td.nowrap{white-space:nowrap}
.vazio{padding:38px 20px;text-align:center;color:var(--cinza)}

/* ------------------------------------------------------------- estados */
.pill{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:2px 9px;font-size:11.5px;font-weight:620;white-space:nowrap;border:1px solid transparent;
}
/*  A PÍLULA DE SITUAÇÃO PODE QUEBRAR EM DUAS LINHAS.
    ------------------------------------------------------------------
    "RELATIVAMENTE PRÓXIMO" é o rótulo mais longo do vocabulário e não
    cabe na largura que os outros pedem. Com `nowrap`, o que sobrava era
    "RELATIVAMENTE P…" — e um rótulo cortado no meio é pior que um
    rótulo em duas linhas: "RELATIVAMENTE P" não diz nada, e ainda
    parece defeito.

    Alargar a coluna para caber o pior caso custaria em TODAS as linhas,
    e as outras não precisam. Quebrar custa só na linha que precisa.
    `line-height` menor e `text-align:center` fazem as duas linhas se
    lerem como um selo só, e não como duas palavras empilhadas.

    Vale só dentro da planilha: pílula em cartão e em aviso vive solta,
    onde não há coluna estreitando nada.  */
table.planilha td .pill{
  white-space:normal;text-align:center;line-height:1.15;
  display:inline-block;padding:3px 9px;
}
/*  MESMO DEFEITO DOS CARTOES DE ALERTA, e vale escrever por extenso porque
    ele reapareceu em dois lugares independentes desta folha.

    `background:#FFEDD5; color:var(--hoje)` parece inofensivo: fundo claro,
    tinta escura. Só que --hoje é token de tema — no escuro ele CLAREIA, para
    #E08A4E, e continua caindo sobre o mesmo #FFEDD5 fixo, que não clareia
    nem escurece porque não é token. Resultado 2,32:1, e nada quebra: a
    pastilha continua desenhada, só ilegível.

    A regra que ficou: fundo e tinta de um mesmo componente ou são AMBOS
    token, ou são AMBOS fixos. Nunca um de cada.  */
.pill.vencido  {background:var(--pill-venc-fundo);color:var(--pill-venc-tinta);border-color:var(--pill-venc-borda)}
.pill.hoje     {background:var(--pill-hoje-fundo);color:var(--pill-hoje-tinta);border-color:var(--pill-hoje-borda)}
.pill.proximo  {background:var(--pill-prox-fundo);color:var(--pill-prox-tinta);border-color:var(--pill-prox-borda)}
.pill.tranquilo{background:var(--lavagem-ok);color:var(--tinta-ok);border-color:var(--borda-ok)}
.pill.concluido{background:var(--pill-conc-fundo);color:var(--pill-conc-tinta);border-color:var(--pill-conc-borda)}
.pill.neutro   {background:var(--papel-3);color:var(--tinta-3);border-color:var(--cinza-claro)}
.pill.marca    {background:var(--lavagem-marca-2);color:var(--tinta-marca-2);border-color:#F2DC9A}

.tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;
     background:var(--papel-3);color:var(--tinta-3);border:1px solid var(--cinza-claro);white-space:nowrap}
.tag.estrategico{background:var(--lavagem-marca-2);border-color:var(--amarelo);color:var(--tinta-marca-2);font-weight:640}
.tag.subsidiaria{background:var(--lavagem-link);border-color:#C6D9EA;color:var(--link)}
.sigla{
  display:inline-block;min-width:34px;text-align:center;font-weight:700;font-size:11px;
  letter-spacing:.04em;background:var(--preto);color:var(--amarelo);
  border-radius:5px;padding:2px 6px;
}
.sigla.vazia{background:var(--linha);color:var(--cinza);font-weight:600}

/* -------------------------------------------------------------- filtros */
.filtros{
  background:var(--papel);border:1px solid var(--cinza-claro);border-radius:var(--raio);
  padding:12px 14px;margin-bottom:14px;box-shadow:var(--sombra);
}
.filtros form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.campo{display:flex;flex-direction:column;gap:3px}
.campo > label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza)}
input,select,textarea{
  font-family:inherit;font-size:13px;padding:6px 9px;border:1px solid #CFCEC9;
  border-radius:7px;background:var(--papel);color:var(--tinta);min-height:32px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--amarelo-fosco);box-shadow:0 0 0 3px rgba(255,194,15,.28);
}
input[readonly],input:disabled,select:disabled{background:#F4F3F1;color:#6B6A63}
/*  A altura mínima de 32px vale para campos de digitar; numa caixinha de marcar
    ela viraria espaçamento em branco e esticaria as listas de filtro.  */
input[type=checkbox],input[type=radio]{
  min-height:0;width:15px;height:15px;padding:0;margin:0;accent-color:var(--amarelo-fosco);
}
textarea{min-height:70px;resize:vertical;width:100%}
/*  `min-width` fixo é largura escrita à mão, e ela cresce com a escala:
    230px na escala de 200% viram 460px de tela, e a linha de campos sai
    para fora da página — medido em /certidoes, 1600px com escala 200%,
    24px de estouro, o bastante para levar o menu fixo junto. `min()`
    mantém os 230px onde eles cabem e desiste deles onde não cabem, que é
    o que "mínimo" deveria ter significado desde o começo.  */
.campo.largo input,.campo.largo select{min-width:min(230px,100%)}

.btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--cinza-claro);background:var(--papel);
  color:var(--tinta);border-radius:7px;padding:7px 13px;font-size:13px;font-weight:560;
  cursor:pointer;min-height:34px;text-decoration:none;
}
.btn:hover{background:var(--papel-toque);text-decoration:none}
.btn.primario{background:var(--amarelo);border-color:var(--amarelo-fosco);color:var(--preto);font-weight:680}
.btn.primario:hover{background:var(--amarelo-fosco)}
.btn.escuro{background:var(--preto);border-color:var(--preto);color:var(--branco)}
.btn.escuro:hover{background:#2A2820}
.btn.perigo{background:var(--papel);border-color:#E3B4AF;color:var(--vencido)}
.btn.perigo:hover{background:var(--lavagem-erro)}
.btn.pequeno{padding:3px 9px;font-size:12px;min-height:26px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* --------------------------------------------------------------- avisos */
.aviso{
  border-radius:var(--raio);padding:11px 14px;margin-bottom:14px;font-size:13px;
  border:1px solid;display:flex;gap:10px;align-items:flex-start;
}
/*  `display:flex` vence o `hidden` do navegador: a confirmação "cumprido
    sem protocolo" da ficha, que o script esconde com `hidden`, aparecia
    sempre. Esta linha devolve ao atributo o que ele promete.  */
.aviso[hidden]{display:none}
.aviso b{display:block;margin-bottom:1px}
/*  O × do aviso. Recado que só some recarregando a página é recado que
    fica: o escritório reclamou de dois avisos velhos na tela e a saída
    que existia era apertar F5. Um botão custa 20px e devolve à pessoa o
    controle do que ocupa a tela dela — que aqui vale linhas de prazo.  */
.aviso > .fechar{
  margin-left:auto;border:0;background:none;color:inherit;cursor:pointer;
  font-size:16px;line-height:1;padding:0 2px;opacity:.55;flex:none;
}
.aviso > .fechar:hover{opacity:1}
.aviso.erro {background:var(--lavagem-erro);border-color:var(--borda-erro);color:var(--tinta-erro)}
.aviso.ok   {background:var(--lavagem-ok);border-color:var(--borda-ok);color:var(--tinta-ok)}
.aviso.info {background:var(--lavagem-link);border-color:var(--borda-link);color:var(--tinta-link)}
.aviso.marca{background:var(--lavagem-marca);border-color:var(--borda-marca);color:var(--tinta-marca)}

/* ---------------------------------------------------------- formulário */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.grade .cheio{grid-column:1/-1}
fieldset{border:1px solid var(--cinza-claro);border-radius:var(--raio);padding:14px 16px;margin:0 0 15px}
legend{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--cinza);padding:0 6px}
.dica{font-size:11.5px;color:var(--cinza);margin-top:2px}
.obrigatorio::after{content:" *";color:var(--vencido)}
.linha-acoes{display:flex;gap:9px;align-items:center;margin-top:6px}
.linha-acoes .esquerda{margin-right:auto}

/*  CARTÃO DENTRO DO CARTÃO — a porta de entrada de um titular novo.
    Precisa se distinguir do resto do cartão sem virar outro cartão: é um
    passo ANTES da escolha, não uma seção paralela a ela. Fundo levemente
    recuado e uma borda fina bastam; caixa dentro de caixa com sombra faria
    a tela parecer ter duas hierarquias onde há uma. */
.cartao-interno{
  border:1px solid var(--linha);border-radius:7px;padding:9px 10px;
  background:var(--papel-2);margin-bottom:12px;
}

/*  LISTA DE MARCAR — usada para escolher titulares e tribunais na emissão.
    Rola por dentro: 264 clientes numa lista aberta empurram o resto da tela
    para fora, e um cartão que ocupa a página deixa de ser um cartão.
    A linha inteira é clicável (é um <label>), porque acertar a caixinha de
    13px é o tipo de mira que cansa depois da décima. */
.lista-marcar{
  border:1px solid var(--linha);border-radius:6px;padding:4px;
  background:var(--papel-2);
}
.linha-marcar{
  display:flex;align-items:center;gap:7px;padding:3px 6px;border-radius:4px;
  font-size:12.5px;cursor:pointer;line-height:1.4;
}
.linha-marcar:hover{background:var(--amarelo)}
.linha-marcar input{flex:none;margin:0}
/*  O documento fica à direita e encolhe primeiro: o nome é o que
    identifica, o número é conferência. */
.linha-marcar .mono{margin-left:auto;font-size:11px;white-space:nowrap}
.linha-marcar .pill{flex:none}

/* ------------------------------------------------------------- barrinha */
.barra{height:7px;background:var(--linha);border-radius:4px;overflow:hidden;min-width:78px}
.barra > span{display:block;height:100%;border-radius:4px}
.barra.ok > span{background:var(--tranquilo)}
.barra.atencao > span{background:var(--proximo)}
.barra.critico > span{background:var(--vencido)}

/* ---------------------------------------------------------- publicações */
.pub{border:1px solid var(--cinza-claro);border-radius:var(--raio);background:var(--papel);
     margin-bottom:12px;box-shadow:var(--sombra);overflow:hidden}
.pub .topo-pub{display:flex;gap:12px;align-items:center;padding:11px 15px;background:var(--papel-2);
     border-bottom:1px solid #ECEBE8;flex-wrap:wrap}
.pub .topo-pub .proc{font-weight:680;font-size:13.5px;font-variant-numeric:tabular-nums}
.pub .corpo-pub{padding:13px 15px}
.pub .texto{font-size:12.5px;color:var(--tinta-2);max-height:130px;overflow:auto;
     background:var(--papel-2);border:1px solid var(--linha);border-radius:7px;padding:9px 11px;white-space:pre-wrap}
.pub .porque{font-size:12.5px;color:var(--tinta-3);border-left:3px solid var(--amarelo);
     padding:3px 0 3px 11px;margin:10px 0}
.pub .acoes-pub{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;align-items:center}

/* Alertas do que a publicação anuncia. Ficam acima do texto porque, quando é
   penhora, é isso que precisa ser lido primeiro — não o número do processo.
   Cada um carrega o que fazer, para não virar só um selo bonito. */
/* Barra de baixa: aparece colada embaixo quando há prazo marcado. Fixa, porque
   a lista é longa e a barra precisa continuar ao alcance depois de rolar. */
.barra-baixa{
  position:fixed;right:18px;bottom:18px;z-index:40;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--preto);color:var(--tinta-inversa-2);border-radius:12px;padding:9px 12px;
  box-shadow:0 8px 28px rgba(0,0,0,.32);max-width:calc(100vw - 36px);
}
/* Sem esta linha o atributo hidden não tem efeito: o display:flex acima ganha
   da regra do navegador, e a barra ficava na tela dizendo "0 marcado(s)". */
.barra-baixa[hidden]{display:none}
.barra-baixa.recolhida > .so-aberta{display:none}
.barra-baixa .conta b{color:var(--amarelo);font-size:15px}
.barra-baixa .discreto{color:#C9C7BF}
.barra-baixa input{background:#1D1B14;border-color:var(--tinta-2);color:var(--tinta-inversa-2)}
.barra-baixa input::placeholder{color:#807D73}
.barra-baixa .puxador{
  cursor:grab;color:#807D73;font-size:15px;line-height:1;padding:2px 4px;
  user-select:none;letter-spacing:-1px;
}
.barra-baixa .puxador:active{cursor:grabbing}
.barra-baixa.arrastando{opacity:.9;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.barra-baixa .icone{
  background:none;border:1px solid var(--tinta-2);color:#C9C7BF;border-radius:7px;
  min-height:0;height:26px;width:26px;padding:0;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.barra-baixa .icone:hover{background:#1D1B14;color:var(--tinta-inversa-2)}
/* Volta a aparecer quando há algo marcado e a pessoa a tinha escondido */
.aviso-marcados{
  position:fixed;right:18px;bottom:18px;z-index:39;
  background:var(--amarelo);color:var(--preto);border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:700;cursor:pointer;border:none;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.aviso-marcados[hidden]{display:none}

/* Sugestão do modelo local. Visualmente distinta do resto para que ninguém a
   confunda com o que o sistema apurou por regra — uma é conferível, a outra é
   palpite de máquina. */
.sugestao-ia{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:10px 0;
  border:1px dashed var(--tracejado);border-radius:9px;padding:8px 11px;background:var(--papel-2);
  font-size:12.5px;
}
.marca-ia{
  background:#E8E6E0;color:var(--tinta-3);border-radius:999px;padding:1px 9px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}

/* Linha que o sistema não conseguiu classificar na leitura do calendário.
   Fica marcada porque é exatamente a que precisa de olho humano. */
tr.destaque-duvida > td{background:var(--lavagem-marca-2)}
tr.destaque-duvida:hover > td{background:#FDEFC9}

/* ==================================================================
   MANUAL DO USUÁRIO
   ------------------------------------------------------------------
   Texto para ler, não tabela para consultar: medida de linha curta,
   entrelinha maior. E imprime limpo, porque parte da equipe vai
   querer no papel na primeira semana.
   ================================================================== */
.manual .cartao{max-width:860px}
.manual h2{font-size:16px;margin-bottom:10px}
.manual p{font-size:13.5px;line-height:1.65;margin:0 0 10px;max-width:74ch}
.manual ul{margin:0 0 10px 20px;padding:0}
.manual li{font-size:13.5px;line-height:1.6;margin-bottom:6px;max-width:72ch}
.manual .atencao{
  border-left:3px solid var(--amarelo);background:var(--lavagem-aviso);
  padding:8px 12px;margin:12px 0 4px;font-size:13px;
}
.tabela-manual{width:100%;border-collapse:collapse;margin:4px 0 12px}
.tabela-manual th{
  text-align:left;vertical-align:top;width:150px;padding:8px 12px 8px 0;
  font-size:13.5px;font-weight:700;color:var(--tinta);
  border-bottom:1px solid var(--cinza-claro);white-space:nowrap;
}
.tabela-manual td{
  padding:8px 0;font-size:13.5px;line-height:1.6;
  border-bottom:1px solid var(--cinza-claro);
}

@media print {
  /* menu, botões e sombras não servem no papel */
  header, .menu, .acoes, .rodape-pag, nav, .barra-baixa { display:none !important; }
  body{background:var(--papel)}
  .cartao{
    box-shadow:none;border:none;border-top:1px solid #999;border-radius:0;
    padding:0;margin:0 0 18px;break-inside:avoid;
  }
  .manual .cartao{max-width:100%}
  .manual h2{margin-top:14px}
  .atencao{border-left:3px solid #999;background:none}
  a{text-decoration:none;color:#000}
}

/* Marcador do fim da rolagem contínua: diz quantas já vieram, para a pessoa
   saber que ainda há mais e que o sistema está trabalhando. */
/*  A coluna do vencimento é a que se procura, e na ordem que o escritório
    escolheu ela pode não estar mais no começo. Então ela se identifica sozinha:
    um fundo levemente âmbar e a borda da marca dos dois lados. Cor sozinha não
    informa nada a quem não a distingue — aqui ela não CARREGA informação, só
    ajuda o olho a achar a coluna, e o dado continua legível em preto.  */
table.planilha th.col-venc, table.planilha td.col-venc{
  background:var(--venc-fundo);
  border-left:2px solid var(--amarelo);
  border-right:2px solid var(--amarelo);
}
table.planilha th.col-venc{background:var(--venc-cab)}
table.planilha tbody tr:hover td.col-venc{background:var(--lavagem-marca-2)}

/* Painel de colunas: cada linha é uma coluna, e a ordem das linhas é a ordem
   das colunas. As setas movem uma posição por clique. */
#lista-colunas .linha-col{display:flex;align-items:center;gap:7px}
#lista-colunas .linha-col > span:first-of-type{flex:1;min-width:0}
.mover-col{display:flex;gap:2px;margin-left:auto}
.mover-col button{
  border:1px solid var(--cinza-claro);background:var(--papel);color:var(--tinta-3);
  border-radius:5px;width:20px;height:20px;min-height:0;padding:0;font-size:9px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.mover-col button:hover{background:var(--amarelo);border-color:var(--amarelo-fosco)}

.fim-rolagem{
  text-align:center;padding:12px;background:var(--papel);
  border:1px solid var(--cinza-claro);border-top:none;
  border-radius:0 0 var(--raio) var(--raio);font-size:12.5px;
}

.alertas{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 2px}
.alerta{
  display:flex;flex-direction:column;gap:1px;border-radius:8px;padding:6px 10px;
  font-size:12px;line-height:1.35;border:1px solid;max-width:340px;
}
.alerta b{font-size:12.5px;font-weight:700;letter-spacing:.01em}
.alerta .fazer{font-size:11.5px;opacity:.85}
.alerta.grave{background:var(--alerta-grave-fundo);
  border-color:var(--alerta-grave-borda);color:var(--alerta-grave-tinta)}
.alerta.atencao{background:var(--alerta-atencao-fundo);
  border-color:var(--alerta-atencao-borda);color:var(--alerta-atencao-tinta)}
.alerta.comum{background:var(--alerta-comum-fundo);
  border-color:var(--alerta-comum-borda);color:var(--alerta-comum-tinta)}
.alerta.valor{background:var(--alerta-valor-fundo);
  border-color:var(--alerta-valor-borda);color:var(--alerta-valor-tinta)}
/*  A LINHA DE BAIXO NÃO PODE SER "A MESMA COR MAIS CLARA": ela é a
    explicação, e explicação ilegível é decoração. Ganha token próprio,
    escolhido contra o fundo do cartão e não contra o fundo da tela.  */
.alerta .fazer{opacity:1;color:inherit;filter:none}
.alerta.grave .fazer,.alerta.atencao .fazer,.alerta.comum .fazer{opacity:.82}
.alerta.valor .fazer{color:var(--alerta-valor-pe);opacity:1}

/* ---------------------------------------------------------------- login */
.entrada{min-height:100vh;display:flex;align-items:center;justify-content:center;
     background:var(--preto);padding:20px}
.entrada .caixa{background:var(--papel);border-radius:14px;padding:32px 34px;width:100%;
     max-width:390px;box-shadow:0 18px 46px rgba(0,0,0,.42);border-top:4px solid var(--amarelo)}
.entrada img.logo-inteiro{width:200px;max-width:70%;height:auto;display:block;margin:0 auto 10px}
.entrada .nome{text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
     color:var(--cinza);margin-bottom:24px}
.entrada .campo{margin-bottom:13px}
.entrada input{width:100%}
.entrada .btn{width:100%;justify-content:center;margin-top:6px}
.entrada .rodape{text-align:center;font-size:11.5px;color:var(--cinza);margin-top:18px;line-height:1.6}

/* -------------------------------------------------------------- diversos */
/*  O papel de quem está logado saiu de dentro do texto para um <small>
    próprio — é o que permite escondê-lo na barra recolhida, onde
    "Coordenação" não cabia. O ponto separador vem daqui, e não do html,
    porque ele é pontuação de desenho: some junto com o papel.  */
.topo .usuario > span .papel{opacity:.8}
.topo .usuario > span .papel::before{content:"·";margin:0 5px;opacity:.7}

.rodape-pag{margin-top:26px;padding-top:14px;border-top:1px solid var(--cinza-claro);
     color:var(--cinza);font-size:11.5px;display:flex;gap:14px;flex-wrap:wrap}
/*  Na tela de tabela o rodapé é uma linha fina: os 26+14px de respiro que
    separam três frases miúdas do conteúdo, numa página de leitura, aqui
    são uma linha de prazo a menos. A informação fica toda; o ar sai.  */
body.tela-larga .rodape-pag{margin-top:8px;padding-top:6px}
.rodape-pag .versao{margin-left:auto;font-variant-numeric:tabular-nums;
     border:1px solid var(--cinza-claro);border-radius:12px;padding:1px 9px;cursor:help}
.paginas{display:flex;gap:6px;align-items:center;margin-top:12px;font-size:13px;flex-wrap:wrap}
.paginas a,.paginas span{padding:4px 10px;border:1px solid var(--cinza-claro);border-radius:7px;
     background:var(--papel);text-decoration:none}
.paginas .atual{background:var(--preto);color:var(--amarelo);border-color:var(--tinta);font-weight:650}
/*  A paginação na barra de filtros (ver `contador` em planilha.html):
    sem a margem de rodapé, e as setas em botão do tamanho dos vizinhos.  */
.paginas.na-barra{margin:0;gap:4px;font-size:12px;flex-wrap:nowrap}
.paginas.na-barra a,.paginas.na-barra span{padding:3px 8px;min-height:26px;box-sizing:border-box;
     display:inline-flex;align-items:center;white-space:nowrap}
.paginas.na-barra a{font-weight:700;font-size:14px;line-height:1;color:var(--tinta)}
details.ajuda{margin:10px 0;font-size:12.5px;color:var(--tinta-3)}
details.ajuda summary{cursor:pointer;color:var(--link)}
.mono{font-family:"Consolas","SF Mono",monospace;font-size:12px}
.discreto{color:var(--cinza);font-size:12px}
.chip-fila{display:inline-flex;gap:6px;align-items:center;background:var(--lavagem-marca-2);border:1px solid #F2DC9A;
     border-radius:999px;padding:3px 11px;font-size:12px;color:var(--tinta-marca-2)}

@media (max-width:900px){
  .topo{height:auto;padding:10px 14px;flex-wrap:wrap}
  .menu{margin-left:0;width:100%;overflow-x:auto}
  .corpo{padding:14px}
}
@media print{
  .topo,.filtros,.acoes,.btn{display:none!important}
  .rolagem{max-height:none;border:none}
  body{background:var(--papel)}
}

/* ==================================================================
   MODO PLANILHA
   ------------------------------------------------------------------
   A lista de prazos com a densidade e a mecânica de um Excel: grade
   visível em todas as células, linhas compactas, cabeçalho fixo,
   primeiras colunas congeladas e filtro por coluna no próprio
   cabeçalho.

   A escala de urgência é sequencial de propósito — urgência tem
   ordem, e a cor precisa refletir isso. O rótulo em texto acompanha
   sempre, para quem não distingue cor ler a mesma informação.
   ================================================================== */

.grade-planilha{
  overflow:auto;max-height:var(--altura-grade, calc(100vh - 250px));
  border:1px solid var(--grade-borda);border-radius:8px;background:var(--papel);
  position:relative;
}

/*  A BARRA DE ROLAGEM DE LADO, VISÍVEL E GROSSA.
    ------------------------------------------------------------------
    "Não estou conseguindo deslocar para o lado" foi o relato, numa tela
    em que a tabela é mais larga que a caixa. O `overflow:auto` acima
    sempre esteve certo — o que faltava era a barra APARECER.

    Duas coisas a produziam invisível. A primeira: navegador com barra
    sobreposta (overlay) desenha um filete que só surge enquanto se rola,
    e quem não sabe que pode rolar nunca a faz surgir. Declarar
    `::-webkit-scrollbar` desliga a sobreposição no Chrome e devolve a
    barra que ocupa espaço — a que se vê parada. A segunda está logo
    abaixo, na barra espelhada.

    14px é largura de alvo de mouse, não de enfeite: a barra fina padrão
    tem 6px, e acertar 6px com o ponteiro é um gesto de precisão que
    ninguém deveria fazer dez vezes por dia.  */
.grade-planilha{scrollbar-width:auto;scrollbar-color:#B4B2AA transparent}
.grade-planilha::-webkit-scrollbar{width:14px;height:14px}
.grade-planilha::-webkit-scrollbar-track{background:var(--papel-2)}
.grade-planilha::-webkit-scrollbar-thumb{
  background:#B4B2AA;border-radius:8px;border:3px solid var(--papel-2);
}
.grade-planilha::-webkit-scrollbar-thumb:hover{background:#8E8C85}
.grade-planilha::-webkit-scrollbar-corner{background:var(--papel-2)}

/*  A BARRA ESPELHADA NO ALTO — que existia em javascript e não existia
    em CSS.
    ------------------------------------------------------------------
    O mira.js cria este <div> desde sempre e põe dentro dele um filho com
    a largura da tabela, para o navegador desenhar uma segunda barra
    horizontal acima da grade. Só que nunca houve regra nenhuma para
    `.rolagem-cima`: sem `overflow-x` e sem altura, o div não rolava nada
    — apenas esticava, com um filho de 2715px dentro, empurrando a
    largura da página. A barra que devia resolver a rolagem lateral era,
    ela mesma, invisível.

    Aqui ela ganha o que precisava: altura de barra, rolagem horizontal
    própria, e a moldura encostada no topo da grade para as duas lerem
    como uma peça só.  */
.rolagem-cima{
  overflow-x:auto;overflow-y:hidden;height:14px;
  background:var(--papel-2);
  border:1px solid var(--grade-borda);border-bottom:none;
  border-radius:8px 8px 0 0;
  scrollbar-width:auto;scrollbar-color:#B4B2AA transparent;
}
.rolagem-cima > div{height:1px}
.rolagem-cima::-webkit-scrollbar{height:13px}
.rolagem-cima::-webkit-scrollbar-track{background:transparent}
.rolagem-cima::-webkit-scrollbar-thumb{
  background:#B4B2AA;border-radius:8px;border:3px solid var(--papel-2);
}
.rolagem-cima::-webkit-scrollbar-thumb:hover{background:#8E8C85}
/*  Com a barra em cima, a grade perde o canto arredondado de cima para
    as duas parecerem contínuas.  */
.rolagem-cima + .grade-planilha{border-radius:0 0 8px 8px}

/*  ================================================== TELA CHEIA
    Some tudo o que não é dado: barra de menu, título, rodapé, e as margens
    generosas. O que sobra é a tabela, e ela cresce para ocupar o que os outros
    deixaram. Os FILTROS ficam — tela cheia é para ver muita linha de uma vez, e
    quem quer ver muita linha quase sempre quer filtrar antes.

    O botão liga duas coisas ao mesmo tempo: esta classe, que reorganiza a
    página, e a tela cheia do próprio navegador, que tira a barra de endereço.
    A segunda pode ser recusada pelo navegador — em quiosque, em iframe, sem
    gesto do usuário — e por isso a primeira não depende dela: mesmo que o
    navegador negue, a tela ganha as linhas.  */
body.tela-cheia .topo,
body.tela-cheia .cabecalho,
body.tela-cheia .rodape-pag,
body.tela-cheia .tira-avisos{display:none}
body.tela-cheia .corpo{max-width:none;padding:8px 10px 4px}
body.tela-cheia{--altura-grade:calc(100vh - 132px)}
body.tela-cheia .barra-topo{margin-bottom:6px}
body.tela-cheia .aplicados{margin:2px 0 6px}
/*  Sem filtro na tela, a grade cresce mais: é o caso do painel de parede. */
body.tela-cheia .grade-planilha{border-radius:6px}

/*  O botão de voltar. Fica flutuando porque a barra que o continha sumiu — e
    sem uma saída visível, tela cheia vira armadilha para quem não conhece o
    Esc.  */
.sair-cheia{
  position:fixed;right:12px;bottom:12px;z-index:60;display:none;
  align-items:center;gap:7px;padding:7px 13px;border-radius:22px;
  background:var(--preto);color:var(--tinta-inversa);border:2px solid var(--amarelo);
  font-size:12.5px;font-weight:650;cursor:pointer;
  box-shadow:0 3px 12px rgba(18,17,12,.3);
}
body.tela-cheia .sair-cheia{display:flex}
.sair-cheia:hover{background:#2A281E}
.sair-cheia b{color:var(--amarelo);font-variant-numeric:tabular-nums}

/*  O botão de entrar, na barra escura. */
.btn-cheia{
  background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--tinta-inversa);
  border-radius:6px;padding:3px 9px;font-size:12px;cursor:pointer;
  font-weight:600;white-space:nowrap;
}
.btn-cheia:hover{border-color:var(--amarelo);color:var(--amarelo)}

@media print{.sair-cheia{display:none!important}}
table.planilha{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}

table.planilha thead th{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--papel-3),var(--grade-cab-2));
  border-right:1px solid var(--grade-fio);border-bottom:2px solid var(--grade-fio-forte);
  padding:0;text-align:left;white-space:normal;
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
table.planilha thead th .cabeca{display:flex;align-items:center;gap:4px;padding:6px 7px}
/*  E AQUI ESTAVA A OUTRA METADE DAS 64.
    ------------------------------------------------------------------
    O título da coluna da planilha não é texto solto: é uma caixa flex,
    porque ao lado dele moram a seta de ordenação e o funil do filtro.
    `text-align` não move filho de flex — então `th.num{text-align:right}`
    estava certo, aplicado, e sem efeito nenhum. As colunas de Dias,
    Horas e Prazo tinham o número à direita e o título à esquerda.

    Quem alinha caixa flex é `justify-content`. A coluna do número da
    linha continua no centro, que é onde ela sempre esteve.  */
table.planilha thead th.num .cabeca,
table.planilha thead th.dir .cabeca{justify-content:flex-end}
table.planilha thead th.n .cabeca{justify-content:center}
table.planilha thead th .rot{
  /*  O TÍTULO QUEBRA EM VEZ DE SER CORTADO.
      ----------------------------------------------------------------
      Era `overflow:hidden` com reticências, e numa coluna estreita
      "Situação" virava "Situaç…". Cortar o título é o pior corte da
      tabela: o conteúdo a pessoa lê na célula, mas o que a coluna É só
      está escrito ali.
      Quebrar custa altura no cabeçalho, uma vez, no alto — e o
      cabeçalho está congelado, então essa altura não se repete linha a
      linha. `max-width` sai junto: ele existia para limitar o texto
      antes do corte, e sem corte não tem o que limitar.  */
  font-weight:700;white-space:normal;overflow-wrap:break-word;
  line-height:1.2;
  color:inherit;text-decoration:none;
}
table.planilha thead th a.rot:hover{text-decoration:underline}
/*  E QUEBRA ATÉ DENTRO DA PALAVRA — mas SÓ na tabela de largura fixa.
    ------------------------------------------------------------------
    Quando a pessoa arrasta uma coluna para mais estreita que o título
    ("EXECUTOR" numa coluna de 60px), `overflow-wrap:break-word` não
    quebra — só quebra entre palavras — e o título transbordava por cima
    do vizinho: "EXECUTOR▾ISOR" (foto da coordenação). Aqui, `min-width:0`
    (o título é filho de flex, e flex não encolhe abaixo do conteúdo sem
    isso) mais `overflow-wrap:anywhere` e `hyphens:auto` (o html é pt-br):
    a quebra cai na sílaba quando o navegador sabe, e em qualquer lugar
    quando não sabe.

    SÓ NO MODO AJUSTADO, de propósito. A primeira versão pôs isto em todo
    cabeçalho, e o "ajustar ao quadro" passou a medir a largura natural
    das colunas com o título já esmagado em uma letra por linha — piso de
    24px, tabela ilegível. No modo automático o título continua mandando
    na largura mínima da coluna, que é o comportamento certo para medir.  */
table.planilha.quadro-ajustado thead th .rot{
  min-width:0;flex:0 1 auto;overflow-wrap:anywhere;hyphens:auto;
}
table.planilha thead th .seta{font-size:9px;color:var(--amarelo-fosco);font-weight:900}

/*  A LINHA MEDE O QUE O MAIOR FILHO MEDE — e o maior era o botão "abrir".
    ------------------------------------------------------------------
    Medido: a pílula de situação tem 21px, a sigla 20px, o texto 15px, e
    o botão `.btn.pequeno` 26px. Era ele que ditava os 33px de cada
    linha (26 + 3 + 3 de padding + 1 de fio). Com o botão em 22px dentro
    da célula — o que ainda é área de clique confortável para um botão
    que fica no fim de uma linha estreita — a linha vai a 29px, e a
    mesma grade mostra 15% mais prazos. Fora da tabela o botão continua
    com os 26px de sempre.  */
table.planilha tbody td .btn.pequeno{min-height:22px;padding:1px 8px;font-size:11.5px}
table.planilha tbody td{
  padding:3px 7px;border-right:1px solid var(--grade-fio);
  border-bottom:1px solid var(--fio-linha);
  vertical-align:middle;max-width:250px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
table.planilha tbody td.solto{white-space:normal;min-width:150px}

/*  ALGARISMOS TABULARES na grade inteira.
    A Inter tem duas formas de algarismo: a proporcional, em que o 1 é
    estreito, e a tabular, em que todos ocupam a mesma largura. Numa
    coluna de datas e prazos a proporcional faz 11/09 e 22/08 saírem com
    comprimentos diferentes, e o olho perde o alinhamento que é a única
    razão de a coluna existir. Vale só na planilha: em texto corrido a
    tabular abre buracos.  */
table.planilha{font-variant-numeric:tabular-nums}
table.planilha tbody tr:nth-child(even) td{background:var(--zebra)}
.grade-planilha:not(.sem-realce) table.planilha tbody tr:hover td{background:var(--mira-linha)}
/*  As colunas congeladas têm fundo próprio e com !important; sem repetir
    a regra para elas, a faixa da linha nasce cortada nas duas primeiras
    colunas — que são justamente as que a pessoa está olhando.  */
.grade-planilha:not(.sem-realce) table.planilha tbody tr:hover .fix1,
.grade-planilha:not(.sem-realce) table.planilha tbody tr:hover .fix2
{background:var(--mira-linha)!important}
table.planilha tbody tr.concluida td{color:var(--concluida-tinta)}

/*  ============================================ ESCOLHAS COM EXPLICAÇÃO
    Um <select> mostra sete nomes de modelo e esconde o que os separa. As
    duas procurações do escritório diferem numa cláusula com efeito
    jurídico, e as duas cartas de preposição em quem representa a empresa
    — isso não cabe numa linha de lista suspensa. Aqui cada opção tem
    espaço para dizer o que é, e a área de clique é o rótulo inteiro.  */
.alternativas{display:grid;gap:7px;margin:8px 0 4px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.alternativa{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  padding:9px 11px;border:1px solid var(--borda-fraca);
  border-radius:var(--raio);background:var(--papel-2);line-height:1.35}
.alternativa:hover{background:var(--papel-toque);border-color:var(--cinza-claro)}
.alternativa input{margin-top:2px;flex:none}
.alternativa > span{display:block;min-width:0}
.alternativa .discreto{display:block;font-size:11.5px;margin-top:1px}
/*  A opção marcada fica visivelmente marcada. Sem isto, num cartão com
    sete opções a bolinha marcada é o único sinal — e ela tem 13 pixels.  */
.alternativa:has(input:checked){background:var(--lavagem-marca);
  border-color:var(--borda-marca)}
.alternativa:has(input:focus-visible){
  outline:2px solid var(--amarelo-fosco);outline-offset:1px}

/*  ================================================ A BARRA DA LEITURA
    Ela existe porque a leitura de um processo inteiro leva até um minuto
    e meio, e uma tela parada não é lida como "está trabalhando" — é lida
    como "travou". Nada aqui é decoração: o que ela mostra é a fase, a
    contagem e o tempo.  */
.barra-andamento{height:10px;border-radius:999px;overflow:hidden;
  background:var(--papel-3);border:1px solid var(--borda-fraca);
  margin:10px 0 8px}
.barra-andamento .preenchida{height:100%;width:2%;
  background:var(--amarelo-fosco);
  transition:width .25s ease}
/*  SEM TOTAL CONHECIDO, A BARRA NÃO INVENTA UM NÚMERO: fica listrada e
    andando, que é o desenho honesto de "não sei quanto falta, mas estou
    trabalhando". Uma barra que finge 60% e depois volta é pior que
    nenhuma.  */
#andamento.indefinida .preenchida{
  background-image:linear-gradient(115deg,
    var(--amarelo-fosco) 25%, var(--amarelo) 25%, var(--amarelo) 50%,
    var(--amarelo-fosco) 50%, var(--amarelo-fosco) 75%, var(--amarelo) 75%);
  background-size:22px 22px;animation:andando 1s linear infinite}
@keyframes andando{from{background-position:0 0}to{background-position:22px 0}}
#andamento.com-erro .preenchida{background:var(--vencido);
  background-image:none;animation:none}
#andamento #and-fase{text-transform:lowercase}
/*  Quem pediu para o sistema não animar nada não deve ganhar uma faixa
    piscando por causa de uma espera.  */
@media (prefers-reduced-motion:reduce){
  #andamento.indefinida .preenchida{animation:none}
  .barra-andamento .preenchida{transition:none}
}

/*  O NÚMERO DO PROCESSO É UM LINK, e continua parecendo um dado.
    Pintá-lo de azul numa planilha de trinta colunas criaria uma coluna
    que grita mais alto que a escala de urgência — que é a informação
    mais importante desta tela. Ele herda a cor da linha (inclusive o
    cinza da linha concluída) e só ganha o sublinhado sob o ponteiro; o
    cursor e o title dizem o resto. O foco de teclado continua visível,
    porque essa é a única pista de quem não usa o mouse.  */
table.planilha tbody td a{color:inherit;text-decoration:none}
table.planilha tbody td a:hover{text-decoration:underline;
  text-underline-offset:2px}
table.planilha tbody td a:focus{outline:2px solid var(--amarelo-fosco);
  outline-offset:1px;border-radius:2px;text-decoration:underline}

/*  ============================================================ A TRAVA
    A faixa que acendia a coluna morava aqui e saiu a pedido: com a linha
    e a coluna acesas ao mesmo tempo, o olho vai para o cruzamento e não
    para o dado. Ficou só a linha, que é o que se percorre ao ler uma
    planilha, e ela é `tr:hover` — CSS puro, sem javascript nenhum.  */

/*  Prazo sem processo: o assunto ocupa a coluna do número, em itálico e
    sem a fonte monoespaçada, para ninguém ler como se fosse numeração.  */
table.planilha .sem-numero{font-family:var(--fonte);font-style:italic;color:var(--tinta-2)}

/*  ============================================ LANÇAR A PARTIR DE E-MAIL
    A área de soltar. Tracejada porque é a convenção que todo mundo já
    entende sem legenda, e alta o bastante para acertar o alvo arrastando
    com pressa — área pequena transforma um gesto simples em perícia.  */
/*  A área de soltar É UM <label>, então precisa de `display` explícito:
    label é inline por natureza e a caixa tracejada sairia do tamanho do
    texto. E `cursor:pointer` no label todo, porque o label todo abre o
    seletor — o clique não depende mais de javascript.  */
.solta{
  display:flex;align-items:center;gap:16px;
  border:2px dashed var(--grade-fio-forte);border-radius:10px;
  background:var(--papel);padding:20px 22px;margin:14px 0;cursor:pointer;
}
.solta:focus-within{
  border-color:var(--amarelo);
  box-shadow:0 0 0 3px var(--mira-linha);
}
.solta:hover{background:var(--papel-toque)}
.solta.sobre{border-color:var(--amarelo);background:var(--mira-linha)}
.solta.cheia{border-style:solid;border-color:var(--amarelo-fosco)}
.solta-icone{font-size:32px;line-height:1;color:var(--tinta-4)}
.solta p{margin:3px 0 0}
/*  Escondido, mas ALCANÇÁVEL pelo teclado: sem width/height zero e sem
    `display:none`, para o Tab continuar chegando nele. O contorno de foco
    aparece no label, via :focus-within — foi o que a auditoria de teclado
    cobrou nos outros campos e vale aqui também.  */
.arquivo-escondido{
  position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
  clip-path:inset(50%);
}
/*  O rótulo do campo de arquivo tem de PARECER clicável sem ser um botão:
    é a saída para quem não pode arrastar, e precisa ser óbvia.  */
.como-link{color:var(--link);text-decoration:underline;cursor:pointer}

/*  O painel do que o e-mail trouxe. Cada linha é um tipo de achado, e o
    trecho fica ao lado da candidata — sem o trecho, escolher entre duas
    datas é adivinhar.  */
.do-email .achado{padding:8px 0;border-top:1px solid var(--linha)}
.do-email .achado:first-of-type{border-top:none}
.do-email .achado .rot{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-4);margin-bottom:5px;
}
.do-email .achado .btn{margin:0 6px 4px 0}
.do-email .achado .btn.usado{border-color:var(--amarelo-fosco)}
.do-email .trecho{font-size:11.5px;display:inline-block;margin:0 10px 4px 0}
/*  A etiqueta de origem: candidata que veio de anexo, e não do corpo. A
    distinção é a diferença entre o prazo do ofício e uma data da certidão
    que veio junto — e ela precisa ser visível sem passar o mouse.  */
.do-email .do-anexo{
  display:inline-block;font-size:10.5px;font-weight:650;
  background:var(--papel-3);border:1px solid var(--grade-fio);
  border-radius:4px;padding:0 5px;margin-left:5px;color:var(--tinta-3);
}

.texto-email{
  white-space:pre-wrap;font-size:12px;max-height:280px;overflow:auto;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:7px;
  padding:10px;margin:8px 0 0;
}

/*  A CHAVE do realce.
    ------------------------------------------------------------------
    Um botão escrito "realce ligado" obriga a LER para saber o estado, e
    muda de largura ao trocar, fazendo a barra inteira pular. Uma chave
    se lê de relance, pela posição do pino, e não muda de tamanho.

    Trilho de 32×18 e pino de 14: o deslocamento é óbvio a um metro do
    monitor. Ligada, trilho amarelo e pino preto — as duas cores da casa,
    na ordem em que aparecem no logotipo.

    Nada de `outline:none`. O anel de foco do navegador é o que passou na
    auditoria de teclado, e apagá-lo por achar feio é exatamente o que
    aquela auditoria existe para pegar.  */
.chave{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:none;padding:4px 6px;min-height:34px;
  font:inherit;font-size:12.5px;color:var(--tinta-2);border-radius:7px;
}
.chave:hover{background:var(--papel-toque)}
.chave .trilho{
  position:relative;width:32px;height:18px;border-radius:9px;flex:none;
  background:var(--cinza-claro);border:1px solid var(--grade-fio);
  transition:background .12s ease;
}
.chave .pino{
  position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;
  background:var(--papel);box-shadow:0 1px 2px rgba(18,17,12,.35);
  transition:transform .12s ease;
}
.chave.ligada .trilho{background:var(--amarelo);border-color:var(--amarelo-fosco)}
.chave.ligada .pino{transform:translateX(14px);background:var(--preto)}
.chave[aria-checked="false"] .rotulo{color:var(--tinta-4)}
/*  Quem desativou animação no sistema não quer o pino deslizando.  */
@media (prefers-reduced-motion:reduce){
  .chave .trilho,.chave .pino{transition:none}
}

/*  Desligada, a chave apaga a metade do realce que é CSS puro.
    ------------------------------------------------------------------
    A primeira tentativa foi um contra-estilo — `background:inherit` por
    cima do realce. Não funciona: `inherit` pega o fundo do <tr>, que é
    transparente, e some com a listra alternada junto. Regra não se
    desfaz por cima; o certo é NÃO APLICAR. Por isso o `:not(.sem-realce)`
    mora na própria regra do hover, e não aqui.  */

/*  A fileira de conjuntos, no alto do painel de colunas. Envolve para a
    linha de baixo em vez de esticar o painel: cinco nomes curtos cabem
    em duas linhas e o painel continua estreito o bastante para não
    cobrir a tabela inteira.  */
.conjuntos{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px 2px}
.conjuntos .btn{min-height:26px;padding:3px 9px;font-size:11.5px}

/*  O PUNHO DE ARRASTAR a largura da coluna.
    Seis pixels de área de pega, colados na borda direita do cabeçalho.
    Invisível até o mouse chegar perto: uma alça desenhada em trinta
    colunas seriam trinta riscos competindo com o dado.  */
/*  E AQUI MOROU UM DEFEITO CARO, POR UMA PALAVRA.
    ------------------------------------------------------------------
    Esta regra dizia `position:relative`, para o punho absoluto se
    prender ao cabeçalho. Só que o cabeçalho JÁ era `position:sticky` —
    é assim que ele fica preso no alto enquanto a lista rola —, e as
    duas regras têm a mesma especificidade, com esta vindo depois. O
    `relative` venceu, e o cabeçalho da planilha deixou de congelar:
    rolava 600px e sumia junto com as linhas, deixando quem estava na
    linha 200 sem saber que coluna era qual.

    Não precisava trocar nada: `sticky` também é posição, e um filho
    absoluto se prende a ele igual. A regra some, e o punho continua no
    lugar — verificado nas duas coisas ao mesmo tempo.  */
.punho-col{
  position:absolute;top:0;right:-3px;width:6px;height:100%;
  cursor:col-resize;z-index:26;
}
.punho-col:hover{background:var(--amarelo)}
/*  Durante o arraste o cursor é de redimensionar em QUALQUER lugar da
    tela, e nada é selecionável: sem isto, arrastar rápido para fora da
    coluna troca o cursor e começa a selecionar texto no meio do gesto.  */
body.arrastando-col{cursor:col-resize!important;user-select:none}
body.arrastando-col .punho-col{background:var(--amarelo)}

/*  A linha travada vence a listra e o hover: ela é uma decisão de quem
    está lendo, e some só quando essa pessoa mandar.  */
table.planilha tbody tr.travada td{background:var(--trava-fundo)!important}
table.planilha tbody tr.travada .fix1{
  box-shadow:inset 3px 0 0 var(--trava-trilho);
}
/*  O trilho vale também para a coluna que fica presa quando não há a
    primeira — telas que congelam o processo em vez do número da linha. */
table.planilha tbody tr.travada td:first-child{
  box-shadow:inset 3px 0 0 var(--trava-trilho);
}
table.planilha td.n{
  text-align:right;font-variant-numeric:tabular-nums;color:var(--cinza);
  font-size:11px;background:var(--papel-3)!important;border-right:1px solid var(--grade-fio);
}

/*  Colunas congeladas: o número da linha e a situação acompanham a rolagem.
    A largura da primeira precisa ser fixa e igual ao deslocamento da segunda —
    se a primeira encolher, a segunda é empurrada para a direita e cobre o
    começo da coluna seguinte.  */
table.planilha .fix1{
  position:sticky;left:0;z-index:15;
  width:46px;min-width:46px;max-width:46px;
}
table.planilha .fix2{
  position:sticky;left:46px;z-index:15;
  /*  92 e não 118: a coluna carrega uma sigla de três letras numa
      pílula, e 118 eram 26px de vão à direita dela em toda linha da
      planilha. O que sobra vai para as colunas que têm texto.
      104 desde que a situação nomeia a data: "FATAL VENCIDO" e "MUITO
      PRÓXIMO" têm 13 letras e cortavam em 92.  */
  width:110px;min-width:110px;max-width:110px;
  border-right:2px solid var(--grade-fio-forte)!important;
}
/*  A etiqueta dentro da congelada: um ponto menor e sem o espaçamento entre
    letras, para "FATAL VENCIDO" e "MUITO PRÓXIMO" caberem inteiras onde a
    tabela aperta as colunas. O rótulo cortado ("FATAL VEN…") deixava de
    dizer justamente a palavra que distingue as duas datas.  */
table.planilha .fix2 .est{font-size:9.5px;letter-spacing:0;padding:3px 4px}
/* algumas telas congelam o número do processo, que é mais largo que uma pílula */
table.planilha .fix2.largo{width:208px;min-width:208px;max-width:208px}
table.planilha thead .fix1,table.planilha thead .fix2{z-index:25}
table.planilha tbody .fix1,table.planilha tbody .fix2{background:var(--papel)}
table.planilha tbody tr:nth-child(even) .fix1,
table.planilha tbody tr:nth-child(even) .fix2{background:var(--papel-2)}
table.planilha tbody tr:hover .fix1,table.planilha tbody tr:hover .fix2{background:var(--lavagem-marca)}

/*  ------------------------------------------- processo estratégico
    Uma linha destacada precisa se distinguir de uma linha urgente — senão o
    destaque compete com a escala de vencimento, que é o que a tela existe para
    mostrar. Por isso a marca é uma barra amarela na borda esquerda, que a
    escala de urgência não usa, e um fundo apenas um tom mais quente. Vem
    depois das regras de zebra e de :hover porque tem a mesma especificidade —
    em CSS, empate se decide por quem vem por último.  */
table.planilha tbody tr.estrategico td,
table.planilha tbody tr.estrategico .fix1,
table.planilha tbody tr.estrategico .fix2{background:var(--lavagem-marca)}
table.planilha tbody tr.estrategico:hover td,
table.planilha tbody tr.estrategico:hover .fix1,
table.planilha tbody tr.estrategico:hover .fix2{background:var(--estrat-toque)}
table.planilha tbody tr.estrategico td.fix1{
  background:var(--lavagem-marca)!important;               /* vence o cinza fixo de td.n */
  box-shadow:inset 4px 0 0 var(--amarelo);
}
table.planilha tbody tr.estrategico td.col-venc{font-weight:700}
.estrela{color:#C08A00;font-size:12px;line-height:1}

/*  ---------------------------------- escolher o que vai para o canal  */
.lista-blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px}
.bloco-aviso{
  display:flex;gap:9px;align-items:flex-start;padding:9px 11px;
  border:1px solid var(--cinza-claro);border-radius:8px;cursor:pointer;
  background:var(--papel);
}
.bloco-aviso:hover{border-color:var(--amarelo-fosco);background:var(--lavagem-marca)}
.bloco-aviso:has(input:checked){border-color:var(--amarelo);background:var(--lavagem-marca)}
.bloco-aviso input{margin-top:3px;flex:none}
.bloco-aviso b{display:block;font-size:13px;font-weight:650}
.bloco-aviso em{display:block;font-style:normal;font-size:11.5px;color:var(--cinza);
  margin-top:2px;line-height:1.4}
/*  Bloco que escreve nome de cliente no canal fica marcado desde o começo, e
    não só depois de alguém reparar no texto.  */
.bloco-aviso.sensivel{border-left:4px solid var(--vencido)}

/*  A prévia imita um cartão do Teams: o objetivo é reconhecer o formato de
    relance, não reproduzi-lo com fidelidade.  */
.previa-teams{
  margin-top:14px;border:1px solid var(--cinza-claro);border-radius:8px;
  overflow:hidden;background:#FAFAF8;max-width:640px;
}
.pt-cab{
  background:var(--preto);color:var(--tinta-inversa);padding:6px 12px;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:3px solid var(--amarelo);
}
.pt-corpo{padding:10px 12px}
.pt-linha{font-size:12.5px;line-height:1.55;color:#2B2A24}
.pt-linha:empty{height:8px}
.pt-tabela{margin:8px 0;border:1px solid var(--cinza-claro);border-radius:6px;
  background:var(--papel);overflow:hidden}
.pt-tt{font-size:11.5px;font-weight:700;padding:6px 9px;background:var(--papel-3);
  border-bottom:1px solid var(--cinza-claro)}
.pt-tabela table{border-collapse:collapse;width:100%;font-size:11.5px}
.pt-tabela th,.pt-tabela td{padding:3px 9px;text-align:left;
  border-bottom:1px solid var(--linha);white-space:nowrap}
.pt-tabela th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--cinza);font-weight:700}
.pt-tabela td{font-variant-numeric:tabular-nums}
.pt-nota{font-size:11px;color:var(--cinza);padding:5px 9px}

/*  Rótulo curto antes de um filtro na barra: sem ele, seis botões "▾" em
    sequência não dizem por que cada um filtra.  */
.rotulo-filtro{
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--cinza);font-weight:650;margin-left:4px;
}
/* sigla como atalho: apagada enquanto não é o filtro ativo */
a.sigla{text-decoration:none}
a.sigla.apagada{opacity:.45}
a.sigla:hover{opacity:1}

/* faixa de relevância na tela do prazo */
.faixa-relev{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;
  padding:8px 12px;margin-bottom:10px;border:1px solid var(--cinza-claro);border-radius:8px;
  background:var(--papel);
}
.faixa-relev.ligada{border-color:var(--amarelo);background:var(--lavagem-marca);border-left-width:4px}
.faixa-relev .acoes{display:flex;align-items:center;gap:8px}

/* -------------------------------------------- escala de urgência */
.est{
  display:block;text-align:center;font-weight:750;font-size:10.5px;
  letter-spacing:.03em;padding:3px 6px;border-radius:4px;white-space:nowrap;
}
/*  O fundo vem da configuração; a cor do texto é calculada a partir dele, para
    que nenhuma escolha de cor produza um rótulo ilegível.  */
.est.vencido  {background:var(--c-vencido,#7A1B15);  color:var(--t-vencido,var(--papel))}
.est.fatal    {background:var(--c-fatal,#B3261E);    color:var(--t-fatal,var(--papel))}
.est.muito    {background:var(--c-muito,#C2410C);    color:var(--t-muito,var(--papel))}
.est.proximo  {background:var(--c-proximo,#E8A33D);  color:var(--t-proximo,#2B2205)}
.est.relativo {background:var(--c-relativo,#F7DFA5); color:var(--t-relativo,#5A4600)}
.est.tranquilo{background:var(--c-tranquilo,#DCF0BC);color:var(--t-tranquilo,#31500E)}
.est.concluido{background:var(--c-concluido,#E4E3DF);color:var(--t-concluido,var(--tinta-4))}
.est.neutro   {background:var(--c-neutro,var(--linha));   color:var(--t-neutro,#6B6A63);font-style:italic}

/* amostra de cor na tela de parâmetros */
.escolher-cor{display:flex;align-items:center;gap:9px}
.escolher-cor input[type=color]{
  width:44px;height:30px;padding:2px;border-radius:6px;border:1px solid #CFCEC9;
  background:var(--papel);cursor:pointer;min-height:0;
}
.amostra-cores{display:flex;flex-direction:column;gap:5px;max-width:260px}
.grade-cores{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}
.linha-cor{display:flex;align-items:center;gap:11px;padding:7px 9px;border:1px solid var(--cinza-claro);
  border-radius:8px;background:var(--papel-2)}
.linha-cor .est{flex:none;min-width:150px}
.paleta-rapida{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.tag.conta-partes{
  min-width:19px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--preto);color:var(--amarelo);border-color:var(--preto);flex:none;
}
.tag.conta-partes.alerta{background:#7A1B15;color:var(--tinta-inversa);border-color:var(--tinta-erro)}

.linha-parte{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:7px;
  padding:7px 9px;background:var(--papel-2);border:1px solid var(--linha);border-radius:8px;
}
.linha-parte:hover{background:var(--lavagem-marca)}

.paleta-rapida button{
  width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.2);cursor:pointer;padding:0;
}

td.dias{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;font-size:12px}
td.dias.negativo{color:var(--vencido)}
td.dias.zero{color:#B3261E}

/*  A barra lateral é do visual NOVO. Aqui, no desenho clássico, as peças
    que ela usa ficam escondidas: os títulos de grupo não têm onde caber
    numa fileira horizontal, e o botão de recolher não recolhe nada.
    O clássico continua byte por byte o que era.  */
.menu .grupo,
.topo > .recolher{display:none}

/* -------------------------------------------- filtro por coluna */
.filtro-col{position:relative;display:inline-flex}
.filtro-col > summary{
  list-style:none;cursor:pointer;width:17px;height:17px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--grade-borda);background:var(--papel);color:var(--tinta-4);font-size:9px;
}
.filtro-col > summary::-webkit-details-marker{display:none}
.filtro-col > summary:hover{background:var(--amarelo);border-color:var(--amarelo-fosco)}
.filtro-col[open] > summary{background:var(--amarelo);border-color:var(--amarelo-fosco);color:var(--preto)}
.filtro-col.ativo > summary{background:var(--amarelo);border-color:var(--amarelo-fosco);color:var(--preto);font-weight:900}

.painel-filtro{
  position:absolute;top:22px;left:0;z-index:60;min-width:252px;max-width:340px;
  background:var(--papel);border:1px solid #A9A8A2;border-radius:8px;
  box-shadow:0 10px 30px rgba(18,17,12,.22);padding:8px;
  text-transform:none;letter-spacing:normal;font-size:12.5px;font-weight:400;
}
.painel-filtro.direita{left:auto;right:0}
.painel-filtro .lista{max-height:250px;overflow:auto;margin:5px 0;border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);padding:3px 0}
.painel-filtro label{
  display:flex;gap:7px;align-items:flex-start;padding:3px 4px;border-radius:4px;
  cursor:pointer;color:var(--tinta);line-height:1.35;
}
.painel-filtro label:hover{background:var(--lavagem-marca)}
.painel-filtro input[type=checkbox]{margin-top:2px;flex:none}
.painel-filtro .pe{display:flex;gap:6px;align-items:center;justify-content:space-between}
.painel-filtro .busca{width:100%;margin-bottom:4px;font-size:12px;padding:4px 7px}
.painel-filtro .titulo{font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--cinza);margin-bottom:3px}

/* ------------------------------------- barra de filtros aplicados */
.aplicados{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
/*  A explicação do filtro guardado vive AQUI dentro, ao lado das
    pastilhas, e não numa faixa própria abaixo delas — ver o comentário
    do macro chips em planilha.html.  */
.aplicados .guardado{font-size:11.5px}
.aplicados .guardado a{color:var(--link)}

/*  AS PASTILHAS DENTRO DA BARRA DE FILTROS, e a medida que mandou.
    ------------------------------------------------------------------
    A barra quebra em duas linhas em QUALQUER largura: os controles da
    primeira linha terminam em 1211px e o grupo da direita (realce,
    colunas, contador, tamanho de página) mede 564 — 1785 no total, contra
    1620 disponíveis mesmo num monitor de 1920. Não é ajuste de breakpoint:
    não cabe em uma linha em tela nenhuma que o escritório use.

    Aceita a segunda linha, o desperdício era outro: o grupo da direita se
    encosta na direita e deixa 791px VAZIOS à esquerda dela — e logo abaixo
    vinha uma faixa inteira de 36px só para as pastilhas de filtro, que
    somadas mediam 292px. Trezentos pixels de conteúdo ocupando uma faixa
    própria com oitocentos livres na linha de cima.

    Agora as pastilhas são um item da própria barra. Quando são poucas — que
    é o caso quase sempre — não custam altura nenhuma: preenchem espaço que
    já estava lá. Quando forem muitas, a barra cresce, que é o mesmo que a
    faixa fazia, só que agora ela cresce por necessidade e não por padrão.  */
.aplicados.na-barra{
  margin:0;flex:1 1 auto;min-width:0;
}
/*  Sem o pino de "filtrando por:" aqui dentro: o rótulo pertencia a uma
    faixa isolada, que precisava se apresentar. Dentro da barra de filtros o
    contexto já está dado por tudo que está ao lado.  */
.aplicados.na-barra > .discreto:first-child{display:none}
.aplicados .marca-filtro{
  display:inline-flex;align-items:center;gap:6px;background:var(--preto);color:var(--branco);
  border-radius:999px;padding:3px 6px 3px 11px;font-size:11.5px;
}
.aplicados .marca-filtro b{color:var(--amarelo);font-weight:700}
.aplicados .marca-filtro a{
  color:#C9C8C2;text-decoration:none;width:16px;height:16px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:#2E2C24;font-size:11px;
}
.aplicados .marca-filtro a:hover{background:var(--vencido);color:var(--tinta-inversa)}

.barra-topo{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;
  background:var(--papel);border:1px solid var(--cinza-claro);border-radius:8px;
  padding:8px 10px;box-shadow:var(--sombra);
}
.barra-topo .conta{font-size:12.5px;color:var(--tinta-2)}
.barra-topo .conta b{font-variant-numeric:tabular-nums}
/*  `flex-wrap` porque a fila cresce. Cada controle novo na barra —
    o realce, as colunas, agora o ajuste — empurra os outros, e numa
    linha que não quebra o empurrão sai pela borda da página: medido a
    200%, 148px para fora em 1280, levando junto o menu lateral fixo.
    `justify-content:flex-end` mantém a fila encostada à direita quando
    ela cabe, que é o alinhamento que ela sempre teve.  */
.barra-topo .dir{
  margin-left:auto;display:flex;gap:7px;align-items:center;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;
}
.barra-topo input[type=search]{min-width:min(250px,100%)}

.link-ato{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:650;
  background:var(--lavagem-link);border:1px solid #C6D9EA;color:var(--link);border-radius:4px;
  padding:1px 6px;text-decoration:none;white-space:nowrap;
}
.link-ato:hover{background:#DCE9F5;text-decoration:none}

/*  Painel de escolha de colunas.
    A largura e a altura precisam ser reafirmadas: o botão herda de
    .filtro-col > summary, que é um quadradinho de 17px feito para o ▾ da
    coluna, e aqui o botão tem palavra escrita.  */
.colunas-menu > summary,
.exibicao-menu > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  width:auto;height:auto;min-height:26px;padding:3px 10px;white-space:nowrap;
  /*  A cor precisa ser declarada aqui.
      ------------------------------------------------------------------
      `.filtro-col > summary` pinta a tinta de --tinta-4 porque lá o
      summary é um quadradinho de 17px com um ▾ dentro — marca, não texto.
      Este é um BOTÃO com a palavra "colunas" escrita, e herdava a mesma
      tinta fraca: 2,23:1 no tema escuro, acusado pela auditoria de
      contraste. Texto de botão usa a tinta de texto.  */
  color:var(--tinta);
}
.colunas-menu > summary::-webkit-details-marker,
.exibicao-menu > summary::-webkit-details-marker{display:none}
.colunas-menu[open] > summary,
.exibicao-menu[open] > summary{background:var(--amarelo);border-color:var(--amarelo-fosco)}
/*  O painel "exibição": uma preferência por linha, rótulo em cima do
    controle, como no formulário — é o único lugar da barra em que se
    LÊ antes de clicar, então não vale a fileira apertada da barra.  */
.opcoes-exibicao{display:flex;flex-direction:column;gap:10px;padding:8px 10px 10px}
.opcoes-exibicao > *{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.opcoes-exibicao .rotulo{
  flex:0 0 100%;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-3);
}
.opcoes-exibicao select{font-size:12.5px}
.colunas-menu > summary b{color:var(--vencido);font-weight:700}
.colunas-menu #lista-colunas{max-height:320px}

/*  Controle do tamanho da letra, no canto do cabeçalho.  */
.escala-letra{display:inline-flex;align-items:center;gap:2px;margin-right:8px}
.escala-letra button{
  border:1px solid rgba(242,241,241,.35);background:transparent;color:var(--tinta-inversa-2);
  border-radius:4px;cursor:pointer;font:650 12px/1 var(--fonte);
  padding:4px 6px;min-width:26px;
}
.escala-letra button:hover:not(:disabled){background:var(--amarelo);color:var(--preto);
  border-color:var(--amarelo)}
.escala-letra button:disabled{opacity:.35;cursor:default}
.escala-letra b{font-size:11px;opacity:.75;min-width:34px;text-align:center;
  font-variant-numeric:tabular-nums}

/*  Menu cujo botão tem PALAVRA ESCRITA, e não o ▾ de uma coluna.
    ------------------------------------------------------------------
    É o mesmo estrago que a .colunas-menu acima já resolvia por conta
    própria, repetido no botão do Outlook: .filtro-col > summary fixa
    17 × 17 px porque foi desenhado para o triangulinho no cabeçalho da
    tabela. Um botão com "📅 Outlook" dentro estoura essa caixa e passa
    por cima do vizinho.

    Esta classe devolve ao botão o tamanho do seu próprio conteúdo.
    Existe separada da .colunas-menu para que o próximo menu com texto
    tenha onde se pendurar, em vez de a correção nascer de novo.  */
.filtro-col.menu-texto > summary{
  width:auto;height:auto;min-height:26px;padding:3px 10px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12px;line-height:1.2;
}
/*  O painel pendurava de um ponto fixo (top:22px), medido para o botão
    baixinho. Com botão de altura própria ele subia por cima do botão.
    Ancorado no fim do botão, acompanha qualquer altura.  */
.filtro-col.menu-texto > .painel-filtro{top:calc(100% + 4px)}

/* ==================================================================
   AGENDA DE AUDIÊNCIAS
   ------------------------------------------------------------------
   Grade de semanas. Cada dia é uma caixa; dentro, manhã e tarde
   separadas, porque é assim que se olha um dia de audiência.
   Cada audiência leva uma faixa com a cor da pessoa: em uma grade
   cheia, a cor é o que permite achar "as minhas" sem ler nada.
   ================================================================== */
/* Tira de avisos recolhida. Aberto, o bloco de conflitos ocupava a tela inteira
   e o calendário só aparecia depois de rolar — o aviso passava a esconder
   justamente aquilo que ele manda conferir. Aqui ele cabe em uma linha. */
.tira-avisos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.av-item{
  border:1px solid var(--cinza-claro);border-radius:var(--raio);background:var(--papel);
  box-shadow:var(--sombra);flex:1 1 300px;min-width:0;
}
.av-item > summary{
  cursor:pointer;list-style:none;padding:7px 11px;font-size:13px;font-weight:600;
  display:flex;gap:7px;align-items:center;color:var(--tinta);
}
.av-item > summary::-webkit-details-marker{display:none}
.av-item > summary::after{content:'▾';margin-left:auto;color:var(--cinza);font-size:11px}
.av-item[open] > summary::after{content:'▴'}
.av-item > summary:hover{background:var(--papel-2)}
.av-item .av-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;
  padding:0 5px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--preto);color:var(--branco);font-variant-numeric:tabular-nums;
}
.av-item.erro{border-left:3px solid var(--vencido)}
.av-item.erro .av-n{background:var(--vencido);color:var(--tinta-inversa)}
.av-item.marca{border-left:3px solid var(--amarelo)}
.av-item.marca .av-n{background:var(--amarelo);color:var(--tinta)}
.av-corpo{
  padding:2px 11px 11px;font-size:12.5px;line-height:1.55;
  max-height:260px;overflow:auto;border-top:1px solid var(--cinza-claro);margin-top:2px;
}
.av-corpo p{margin:6px 0}
.av-corpo > div{margin-top:3px}

.calendario{
  /* minmax(0,1fr) e não 1fr: sem isso, o nome comprido de um cliente estica a
     coluna e esmaga sábado e domingo */
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;
  background:var(--papel);border:1px solid var(--cinza-claro);
  border-radius:var(--raio);padding:11px;box-shadow:var(--sombra);
}
.cal-cab{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--cinza);
  text-align:center;padding:2px 0 6px;font-weight:700;
  border-bottom:1px solid var(--cinza-claro);margin-bottom:2px;
}
.cal-dia{
  min-height:112px;border:1px solid #E4E3DF;border-radius:8px;padding:6px;
  display:flex;flex-direction:column;gap:2px;background:var(--papel);
}
.cal-dia.fora{background:var(--papel-3);border-color:var(--linha)}
.cal-dia.fora .cal-num b{color:var(--cinza)}
.cal-dia.passou{opacity:.55}
.cal-dia.hoje{
  border-color:var(--amarelo-fosco);border-width:2px;padding:5px;
  box-shadow:0 0 0 3px rgba(255,194,15,.22);
}
.cal-dia.cheio{background:var(--lavagem-marca)}

.cal-num{
  display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tinta-3);
  padding-bottom:3px;margin-bottom:2px;border-bottom:1px solid var(--papel-3);flex-wrap:wrap;
}
.cal-num b{font-size:15px;font-variant-numeric:tabular-nums;line-height:1}
.cal-mes{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza);
  font-weight:750;
}
/*  No dia 1 e na abertura da grade o mês vem inteiro e destacado; nas outras
    semanas ele é só a âncora discreta de "onde estou".  */
.cal-mes.forte{
  color:var(--tinta-marca-2);background:var(--lavagem-marca-2);border:1px solid var(--amarelo);
  border-radius:4px;padding:1px 5px;font-size:9.5px;font-weight:800;
}
/*  O período por extenso ao lado do título. É a resposta para "que mês é
    este?" sem obrigar ninguém a ler duas datas e fazer a conta.  */
.periodo{
  font-size:13px;font-weight:650;text-transform:none;letter-spacing:0;
  color:var(--tinta-marca-2);background:var(--lavagem-marca-2);border:1px solid var(--amarelo);
  border-radius:20px;padding:2px 12px;margin-left:10px;vertical-align:3px;
  white-space:nowrap;
}
.cal-feriado{
  font-size:9.5px;color:var(--vencido);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%;
}
.cal-conta{
  margin-left:auto;background:var(--preto);color:var(--amarelo);border-radius:9px;
  font-size:10px;font-weight:800;padding:1px 7px;line-height:1.5;
}

.cal-turno{
  font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--cinza);
  font-weight:700;margin-top:4px;display:flex;align-items:center;gap:5px;
}
.cal-turno::after{content:"";flex:1;height:1px;background:var(--linha)}
.cal-turno.sem{color:var(--vencido)}
/*  A FAIXA DO PRAZO usa o mesmo vermelho do fatal na planilha — é a mesma
    informação, e cor diferente para a mesma coisa obriga a reaprender a
    tela. `--vencido` já se ajusta sozinho no tema escuro; um vermelho fixo
    perderia contraste sobre papel escuro. */
.cal-turno.prazo{color:var(--vencido)}
/*  O tipo do ato ocupa o lugar da hora no cartão do prazo. Não é número,
    então perde o `tabular-nums`, e ganha teto de largura para não empurrar
    o nome do cliente para fora da célula. */
.cal-hora.cal-tipo{
  font-variant-numeric:normal;font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--vencido);
  max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* a faixa da esquerda é a cor da pessoa: é por ela que se acha "as minhas" */
.cal-item{
  display:flex;align-items:center;gap:5px;font-size:11.5px;text-decoration:none;
  background:var(--papel-2);border:1px solid #E4E3DF;border-left:4px solid var(--dono,var(--tinta));
  border-radius:5px;padding:3px 5px;color:var(--tinta);overflow:hidden;line-height:1.35;
}
.cal-item:hover{background:var(--amarelo);text-decoration:none;border-color:var(--amarelo-fosco)}
.cal-hora{font-variant-numeric:tabular-nums;flex:none;font-size:11.5px;font-weight:700}
.cal-item .sigla{min-width:0;padding:1px 5px;font-size:9.5px;flex:none}
.cal-quem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.cal-onde{
  font-size:9.5px;color:var(--cinza);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:76px;flex:none;
}
.cal-item:hover .cal-onde{color:var(--tinta-marca-2)}
.cal-item.com-conflito{
  border-color:var(--vencido);border-width:1px 1px 1px 4px;background:var(--lavagem-erro);
  outline:1px solid var(--vencido);
}
.cal-item.dia-cheio{border-color:var(--hoje);background:#FFF4E8}
/*  Estratégico na agenda: barra amarela à esquerda. Não sobrepõe o vermelho do
    conflito de horário — conflito é problema de hoje, estratégico é peso do
    caso, e o vermelho tem de continuar ganhando a atenção.  */
.cal-item.estrategico:not(.com-conflito){
  border-left:4px solid var(--amarelo);background:var(--lavagem-marca);
}
/*  ============================================ semana por horário
    Colunas de dia, faixas de hora, e cada audiência posicionada pela
    altura. A régua da esquerda tem largura fixa e igual à do cabeçalho,
    senão as colunas desalinham do dia — e um calendário desalinhado
    mostra a audiência no dia errado, que é pior que não mostrar.  */
.semana-horas{
  border:1px solid var(--cinza-claro);border-radius:10px;overflow:hidden;
  background:var(--papel);margin-top:4px;
}
.sh-cab,.sh-corpo{display:grid;grid-template-columns:58px repeat(7, 1fr)}
.sh-cab{
  position:sticky;top:0;z-index:12;background:var(--papel);
  border-bottom:1px solid var(--cinza-claro);
}
.sh-canto{border-right:1px solid var(--cinza-claro)}
/*  ---------------------------------------- o contorno que separa os dias
    A semana tinha as colunas divididas por --linha, que é o fio de dentro
    de tabela: 1,04:1 sobre o papel claro e 1,50:1 sobre o escuro. Como
    separador de LINHA de tabela isso está certo — ali o que separa é o
    espaço, e o fio só apoia. Mas a semana não é uma tabela: é uma grade em
    que o eixo horizontal (o dia) carrega significado, e dois compromissos
    lado a lado em dias diferentes não podiam ser lidos como dias diferentes
    sem contar as colunas do cabeçalho.

    Agora o dia tem contorno de verdade — --fio-linha, o mesmo fio que a
    folha já reserva para divisão estrutural — e o par de dias do fim de
    semana fica dentro de um bloco com fundo próprio. O fio é mais forte no
    tema escuro (#4E493C contra #332F26) porque o olho distingue pior degrau
    de luminância na faixa baixa.  */
.sh-dia-cab{
  padding:6px 8px;text-align:center;border-left:1px solid var(--fio-linha);
  display:flex;flex-direction:column;gap:1px;
}
.sh-dia-cab b{font-size:17px;font-variant-numeric:tabular-nums;line-height:1.1}
.sh-dia-cab span{
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza);
  font-weight:650;
}
.sh-dia-cab.hoje{background:var(--lavagem-marca);box-shadow:inset 0 -3px 0 var(--amarelo)}
.sh-dia-cab.hoje b{color:var(--tinta-marca-2)}
.sh-dia-cab.fora{background:var(--papel-3)}
.sh-dia-cab.fora b,.sh-dia-cab.fora span{color:var(--cinza)}
.sh-feriado{font-size:9.5px;color:var(--vencido);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sh-horas{border-right:1px solid var(--cinza-claro);background:var(--papel-2)}
.sh-hora{position:relative;border-bottom:1px solid var(--linha)}
.sh-hora span{
  position:absolute;top:-7px;right:6px;font-size:10.5px;color:var(--cinza);
  background:var(--papel-2);padding:0 2px;font-variant-numeric:tabular-nums;
}
.sh-rot{display:block;padding:6px;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--cinza);font-weight:650;text-align:right}

/*  As linhas de hora são pintadas no fundo da coluna, não desenhadas uma por
    uma: assim a régua e a coluna nunca podem divergir por um pixel.  */
.sh-coluna{position:relative;border-left:1px solid var(--fio-linha)}
.sh-coluna.grade{
  background-image:linear-gradient(to bottom, var(--linha) 1px, transparent 1px);
  background-repeat:repeat-y;
}
.sh-coluna.hoje{background-color:var(--lavagem-marca)}
.sh-coluna.fora{background-color:var(--papel-toque)}
/*  O fim de semana é UM bloco, não dois dias quaisquer: o fio da esquerda
    do sábado fecha o bloco de dias úteis, e por isso é mais forte.  */
.sh-coluna.fora.abre-fds,.sh-dia-cab.fora.abre-fds{border-left:2px solid var(--fio-linha)}
/*  Era #FDFCF9 fixo: no tema escuro sobrava uma faixa branca atravessando
    o alto da agenda, com os cartões escuros dentro dela.  */
.sh-sem-hora{border-bottom:2px solid var(--fio-linha);background:var(--papel-2)}
.sh-sem-hora .sh-coluna{min-height:34px;padding:3px;display:flex;
  flex-direction:column;gap:3px}

.sh-item{
  position:absolute;overflow:hidden;border-radius:6px;padding:3px 5px;
  background:var(--papel);border:1px solid var(--cinza-claro);
  border-left:4px solid var(--dono);text-decoration:none;color:var(--tinta);
  font-size:11px;line-height:1.25;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 1px 2px rgba(18,17,12,.07);
}
.sh-item:hover{
  text-decoration:none;z-index:9;box-shadow:0 2px 8px rgba(18,17,12,.18);
  border-color:var(--amarelo-fosco);
}
.sh-item.sem-hora{position:static;width:auto!important;left:auto!important;
  height:auto!important;flex-direction:row;align-items:center;gap:5px}
.sh-item.com-conflito{
  border-color:var(--vencido);border-left-color:var(--vencido);
  background:var(--lavagem-erro);outline:1px solid var(--vencido);
}
.sh-item.estrategico:not(.com-conflito){background:var(--lavagem-marca)}
.sh-linha1{display:flex;align-items:center;gap:4px;flex:none}
.sh-hora-item{font-size:11.5px;font-variant-numeric:tabular-nums}
.sh-item .sigla{padding:0 4px;font-size:9px;flex:none}
/*  Caixa dividida com outra fica estreita: aí só cabe a hora e a sigla, e o
    resto vai para a dica. Melhor um dado inteiro que dois pela metade.  */
.sh-item.estreita .sh-quem{display:none}
.sh-quem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#3A3830}
.sh-onde{font-size:9.5px;color:var(--cinza);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media (max-width: 980px){
  /*  Sete colunas de hora não caber num telefone é o caso normal, não a
      exceção: a grade rola na horizontal, com a régua de horas presa.  */
  .semana-horas{overflow-x:auto}
  .sh-cab,.sh-corpo{min-width:860px}
}

.cal-falta{color:var(--vencido);font-weight:900;flex:none}
.cal-modo{color:var(--link);flex:none;font-size:12px}

@media (max-width:1100px){
  .calendario{grid-template-columns:minmax(0,1fr)}
  .cal-cab{display:none}
  .cal-dia{min-height:0}
  .cal-dia:not(:has(.cal-item)){display:none}
}

/* ==================================================================
   QUADRO DE PAREDE
   ------------------------------------------------------------------
   Uma tela para ficar aberta numa TV ou num segundo monitor. Não tem
   filtro, não tem clique, não tem hover — então tudo que informa
   precisa estar escrito, grande, de uma vez.

   Sobre as cores desta tela, e por que são três e não as quatro do
   resto do sistema: passei os tons pelo validador de paleta e o par
   laranja/âmbar do sistema (#C2410C e #B45309) fica a ΔE 4,1 na visão
   normal e a 0,1 em deuteranopia — indistinguíveis. De perto, com a
   palavra ao lado, isso passa; a três metros de distância, não. Este
   trio passa nas cinco verificações (banda de luminosidade, croma,
   separação em daltonismo, separação em visão normal e contraste
   sobre o fundo var(--fundo)):

       crítico  #A31410      atenção  #9A6A00      bom  #2F5E10

   O amarelo da marca continua fora de qualquer dado, como no resto do
   sistema: 1,7:1 sobre fundo claro não serve para dizer "atenção".
   ================================================================== */
.q-topo{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.q-topo h1{font-size:34px;margin:0;letter-spacing:-.01em;color:var(--q-tinta)}
.q-topo .q-acoes{margin-left:auto;display:flex;gap:8px}
.q-sub{font-size:15px;font-weight:500;color:var(--q-tinta-fraca);letter-spacing:0}
.q-legenda{font-size:14px;color:var(--q-tinta-fraca);margin:4px 0 0}

/*  Valores de reserva. Os de verdade vêm de Parâmetros e entram na própria
    página, presos a body.q-tema-claro / .q-tema-escuro / .q-tema-auto. Estes
    aqui existem para o quadro nunca ficar sem cor caso a folha da página falhe
    em carregar.  */
/*  ESTE BLOCO MORA EM `body`, E NÃO EM `:root`. A diferença não é estilo.
    ------------------------------------------------------------------
    `--q-tinta-fraca:var(--tinta-4)` é um atalho: ele copia o valor que
    --tinta-4 tiver NO ELEMENTO onde a linha está escrita. Escrito em
    :root (que é o <html>), ele copia o valor CLARO — porque o tema
    escuro redefine --tinta-4 em `body`, um nível abaixo. O atalho
    congelava a cor clara e a descia, herdada, para dentro do tema
    escuro.

    O efeito: todo componente de quadro usado numa tela comum (o resumo
    da tela inicial, os cartões da gestão) saía com legenda #5B5A54
    sobre papel #1C1A15 — 2,51:1, quando o mínimo é 4,5:1. Eram 8 das 29
    reprovações da auditoria, e todas com a mesma origem.

    Em `body`, o atalho lê o --tinta-4 do próprio body, que é o do tema
    em vigor. Achado por auditar_contraste.py, não a olho.  */
body{
  --q-critico:#A31410;
  --q-atencao:#A07400;
  --q-bom:#0F766E;
  --q-fundo:var(--fundo);
  --q-papel:var(--papel);
  --q-tinta:var(--tinta);
  --q-tinta-fraca:var(--tinta-4);
  --q-trilho:var(--linha);
  --q-borda:var(--cinza-claro);
  --q-link:var(--link);
}
/*  O tema só vale nas telas de quadro: o resto do sistema continua claro.
    Pintar tudo de escuro seria outra decisão, e não foi essa a pedida.  */
body.quadro{background:var(--q-fundo);color:var(--q-tinta)}
body.quadro .corpo{color:var(--q-tinta)}

/*  Os cartões de número. auto-fit com mínimo largo: numa TV cabem os seis numa
    linha; num notebook quebram em duas, sem nada ficar ilegível.  */
.q-cartoes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-bottom:20px;
}
.q-cartao{
  background:var(--q-papel);border:1px solid var(--q-borda);border-radius:14px;
  padding:18px 20px;box-shadow:var(--sombra);
  border-top:6px solid var(--cinza-claro);
}
.q-cartao .q-rot{font-size:14px;font-weight:750;letter-spacing:.06em;color:var(--q-tinta)}
.q-cartao .q-num{
  font-size:72px;line-height:1.02;font-weight:800;font-variant-numeric:tabular-nums;
  margin:6px 0 2px;
}
.q-cartao .q-pe{font-size:14px;color:var(--q-tinta-fraca)}
.q-cartao.g-critico{border-top-color:var(--q-critico)}
.q-cartao.g-critico .q-num{color:var(--q-critico)}
.q-cartao.g-atencao{border-top-color:var(--q-atencao)}
.q-cartao.g-atencao .q-num{color:var(--q-atencao)}
.q-cartao.g-bom{border-top-color:var(--q-bom)}
.q-cartao.g-bom .q-num{color:var(--q-bom)}
/*  Zero não é notícia. Fica cinza para os números que importam saltarem — num
    quadro em que tudo grita, nada grita.  */
.q-cartao.zerado{border-top-color:var(--q-borda);opacity:.62}
.q-cartao.zerado .q-num{color:var(--q-tinta-fraca)}

.q-bloco{
  background:var(--q-papel);border:1px solid var(--q-borda);border-radius:14px;
  padding:16px 20px 18px;box-shadow:var(--sombra);margin-bottom:16px;
}
.q-bloco h2{font-size:20px;margin:0 0 12px;color:var(--q-tinta)}
/*  O mesmo problema com nome diferente: 420px é um piso, e piso que não
    cede vira estouro quando a escala dobra a letra. `min(420px,100%)`
    desiste do piso quando ele não cabe.  */
.q-duas{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}

/*  ----------------------------------------------- barras de carga  */
/*  UMA grade para todas as linhas, e não uma grade por linha.
    ------------------------------------------------------------------
    Com uma grade por linha, a coluna do meio (1fr) media o que sobrava
    DEPOIS do texto da direita — e o texto da direita é mais comprido
    em quem tem prazo atrasado. Resultado: o trilho de quem estava pior
    era mais curto, o mesmo percentual desenhava barras de tamanhos
    diferentes, e o traço dos 100% aparecia em lugares distintos em
    cada linha. Um gráfico de comparação em que cada barra tem sua
    própria escala não compara nada.
    display:contents nas linhas dissolve o invólucro e faz as três
    células entrarem nesta grade — colunas alinhadas, escala única, e
    a marcação de acessibilidade de linha preservada.  */
.q-barras{
  display:grid;grid-template-columns:62px 1fr auto;gap:10px 14px;align-items:center;
}
.q-linha{display:contents}
.q-quem .sigla{font-size:16px;padding:4px 9px;border-radius:6px}
.q-trilho{
  position:relative;height:30px;background:var(--q-trilho);border-radius:6px;
}
/*  Ponta arredondada só do lado do dado, ancorada na linha de base: é o que
    deixa claro onde a barra começa e para onde ela cresce.  */
.q-barra{
  height:100%;border-radius:6px 4px 4px 6px;min-width:5px;
  /*  Folga de 2px contra o trilho, para o fim da barra não colar na borda e
      virar uma barra cheia falsa.  */
  box-shadow:0 0 0 2px var(--q-papel) inset;
}
.q-barra.g-critico{background:var(--q-critico)}
.q-barra.g-atencao{background:var(--q-atencao)}
.q-barra.g-bom{background:var(--q-bom)}
/*  O traço dos 100% cai por cima da barra quando alguém passa disso — e é
    exatamente nesses casos que ele precisa ser lido. Linha branca com contorno
    escuro se vê sobre o vermelho e sobre o trilho cinza, sem depender de qual
    dos dois está atrás.  */
.q-marca-100{
  position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--q-papel);
  box-shadow:0 0 0 1px var(--q-tinta);z-index:4;
}
.q-valor{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-size:15px;font-variant-numeric:tabular-nums;color:var(--q-tinta);z-index:3;
  text-shadow:0 0 4px var(--q-papel), 0 0 4px var(--q-papel);
}
.q-detalhe{font-size:14px;color:var(--q-tinta);white-space:nowrap}
.q-alerta{color:var(--q-critico)}

/*  ------------------------------------------- listas do quadro  */
.q-tabela{width:100%;border-collapse:collapse;font-size:16px}
.q-tabela td{padding:7px 8px;border-bottom:1px solid var(--q-borda);vertical-align:middle;color:var(--q-tinta)}
.q-tabela tr:last-child td{border-bottom:none}
.q-data{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;width:1%}
.q-hora{white-space:nowrap;font-variant-numeric:tabular-nums;width:1%;color:var(--q-tinta-fraca)}
.q-onde,.q-tipo{color:var(--q-tinta)}
.q-dias{text-align:right;white-space:nowrap;font-size:14px;color:var(--q-tinta-fraca)}
.q-tabela tr.q-atrasado .q-data,
.q-tabela tr.q-atrasado .q-dias{color:var(--q-critico);font-weight:750}
.q-tag{
  display:inline-block;font-size:12px;font-weight:700;border:1px solid var(--q-borda);
  border-radius:4px;padding:0 5px;margin-left:5px;color:var(--q-tinta-fraca);
}
.q-tag.estrela{border-color:var(--q-atencao);color:var(--q-atencao)}
.q-vazio{font-size:16px;color:var(--q-bom);margin:0}

/*  Em tela cheia o quadro é o único conteúdo: o cabeçalho da página some
    junto com o resto e sobra tela para os números crescerem.  */
body.tela-cheia .q-cartao .q-num{font-size:88px}
body.tela-cheia .q-topo{display:none}

/* ------------------------------------------------- quadro da carteira */
/*  Números de dinheiro não cabem em 72px como "42" cabe. A classe pequeno
    existe para o cartão continuar sendo um cartão quando o conteúdo é
    "R$ 12,4 mi" em vez de dois dígitos.  */
.q-cartao .q-num.pequeno{font-size:40px;letter-spacing:-.02em}
body.tela-cheia .q-cartao .q-num.pequeno{font-size:52px}

/*  Sem fundo próprio: o th herdava --papel-3, que é o cinza de cabeçalho
    do tema do SISTEMA. Na carteira com parede escura e sistema claro isso
    punha --q-tinta-fraca (#A5A29A) sobre #F3F2EF — 2,28:1.  */
.q-tabela th{
  background:transparent;text-align:left;font-size:12.5px;font-weight:750;letter-spacing:.04em;
  text-transform:uppercase;color:var(--q-tinta-fraca);padding:0 8px 6px;
  border-bottom:2px solid var(--q-borda);
}
/*  (a regra de `.dir` agora é geral, lá em cima — esta era a escopada
    que deixava as tabelas da Gestão de fora.)  */
.q-tabela td.num{font-variant-numeric:tabular-nums}
.q-porque{font-size:13.5px;color:var(--q-tinta)}
.q-dias-inline{font-size:12px;font-weight:500;color:var(--q-tinta-fraca);margin-left:5px}

/*  A curva de oito semanas.
    ------------------------------------------------------------------
    Colunas verticais, e não linha, porque a semana é um bloco discreto de
    trabalho — não há "meio caminho entre a semana 35 e a 36". Linha sugeriria
    continuidade que não existe.
    A altura é uma só para todas as colunas, e a linha de capacidade fica dentro
    de cada uma na mesma altura relativa: assim ela se lê como uma linha
    atravessando o gráfico, sem depender de cálculo absoluto que erra quando a
    letra muda de tamanho.  */
.q-curva{
  /*  `1fr` NÃO É "pode encolher". O mínimo automático de uma faixa de
      grade é `auto`, ou seja, o tamanho do conteúdo: as colunas do
      gráfico paravam de encolher no número escrito dentro delas e a
      linha inteira saía da página. Com a escala em 200% isso é 377px
      para fora, medido em 1280. `minmax(0,1fr)` é o que quase todo
      mundo quer dizer ao escrever `1fr`.  */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;
  align-items:end;margin-bottom:6px;
}
.q-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.q-col-valor{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--q-tinta)}
.q-col-trilho{
  position:relative;width:100%;height:150px;background:var(--q-trilho);border-radius:6px;
  display:flex;align-items:flex-end;overflow:hidden;
}
.q-col-barra{
  width:100%;border-radius:5px 5px 4px 4px;min-height:3px;
  box-shadow:0 0 0 2px var(--q-papel) inset;
}
.q-col-barra.g-critico{background:var(--q-critico)}
.q-col-barra.g-atencao{background:var(--q-atencao)}
.q-col-barra.g-bom{background:var(--q-bom)}
.q-col-cap{
  position:absolute;left:0;right:0;height:2px;background:var(--q-tinta);opacity:.55;
  z-index:3;
}
.q-col-rot{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--q-tinta)}
.q-col-pe{font-size:12px;color:var(--q-tinta-fraca);text-align:center;line-height:1.35}
/*  A semana em curso: fundo amarelo pálido da marca. Aqui o amarelo é
    identidade ("é esta"), não gravidade — que é o uso que a folha reserva
    para ele.  */
/*  Amarelo da marca continua marcando a semana em curso — mas como
    ANEL, não como tinta. O anel é área de cor sobre o fundo do quadro
    (piso 3:1, e o amarelo passa nos dois temas); tinta amarela em letra
    de 14px pede 4,5:1 e não passava: --tinta-marca-3 é #8A6200 no tema
    claro do sistema, e a parede escura punha isso sobre #1C1A14 — 3,17:1.
    O rótulo agora é a tinta do próprio quadro, em negrito; quem diz
    'é esta semana' é o anel.  */
.q-col.atual .q-col-trilho{box-shadow:0 0 0 2px var(--amarelo)}
.q-col.atual .q-col-rot{color:var(--q-tinta);font-weight:800}

/*  Barrinha de proporção dentro de tabela. Uma série, sem eixo: serve para
    comparar entre linhas, e o número ao lado é quem dá o valor exato.  */
.q-mini{height:12px;background:var(--q-trilho);border-radius:4px;overflow:hidden}
.q-mini-barra{height:100%;background:var(--q-tinta-fraca);border-radius:4px;min-width:3px}

/* ------------------------------- escolher as cores dos quadros */
.cores-tema{border-top:1px solid var(--cinza-claro);padding-top:14px;margin-top:14px}
/*  A amostra usa o fundo escolhido, não o fundo da página: é a única forma de
    ver o que a combinação vai fazer de verdade. Cor num quadradinho de seletor
    não diz nada sobre como ela se lê a três metros.

    O nome é 'amostra-quadro' e não 'amostra-cores' porque este arquivo já tinha
    uma .amostra-cores, das cores de estado — e ela é uma coluna estreita. Reusar
    o nome fazia esta virar coluna também, sem erro nenhum em tela: a regra antiga
    vinha antes e a nova não sobrescrevia flex-direction. Classe repetida é
    conflito silencioso.  */
.amostra-quadro{
  display:flex;flex-direction:row;gap:26px;flex-wrap:wrap;border-radius:10px;
  padding:14px 18px;margin:12px 0;border:1px solid var(--cinza-claro);
  max-width:none;
}
.amostra-quadro .am{display:flex;flex-direction:column;gap:1px}
.amostra-quadro .am-n{font-size:38px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
/*  O NÚMERO usa a cor escolhida — 38px é texto grande, piso 3:1, e é ele
    que a pessoa está avaliando. O RÓTULO ('CRÍTICO') é legenda de 11,5px:
    pintá-lo com a mesma cor cobrava 4,5:1 de uma cor que não foi escolhida
    para ser lida pequena. #C0322A sobre #12110C dava 3,36:1. A legenda
    agora usa a tinta do fundo da amostra, que é o par garantido.  */
.amostra-quadro .am-r{font-size:11.5px;font-weight:750;letter-spacing:.06em;
  color:inherit;opacity:.92}

.conferencia{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px}
.conferencia td{padding:5px 8px;border-bottom:1px solid var(--linha);vertical-align:top}
.conferencia .sinal{width:20px;text-align:center;font-weight:800}
.conferencia .tit{white-space:nowrap;font-weight:650;width:1%}
.conferencia .det{color:var(--tinta-4);line-height:1.45}
.conferencia tr.e-ok .sinal{color:var(--tranquilo)}
.conferencia tr.e-aviso .sinal{color:var(--proximo)}
.conferencia tr.e-falha .sinal{color:var(--vencido)}
.conferencia tr.e-falha .tit{color:var(--vencido)}
.conferencia tr.e-falha{background:var(--lavagem-erro)}

/*  Os botões do quadro seguem o tema. Sem isto, no tema escuro sobram dois
    retângulos brancos no alto da tela — e num quadro de parede o que é branco
    é o que o olho procura primeiro, que deveria ser o número, não o botão.  */
body.quadro .btn{
  background:var(--q-papel);color:var(--q-tinta);border-color:var(--q-borda);
}
body.quadro .btn:hover{border-color:var(--q-tinta-fraca)}
/*  Link dentro da parede usa o azul DA PAREDE. Ver o comentário do
    gerador em cores.py: o tema do quadro é independente do tema do
    sistema, e misturar os dois produz pares que ninguém escolheu.  */
body.quadro .corpo a{color:var(--q-link)}
body.quadro .rodape-pag{color:var(--q-tinta-fraca);border-top-color:var(--q-borda)}

/*  O botão do tema, na barra. Redondo e do tamanho de um ícone porque não
    precisa de rótulo: o símbolo já diz em que tema se está, e o title conta o
    resto. Vive sobre o preto da marca, então usa a tinta invertida.  */
.btn-tema{
  border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--tinta-inversa-2);
  border-radius:50%;cursor:pointer;width:26px;height:26px;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;padding:0;margin-right:2px;
}
.btn-tema:hover{background:var(--amarelo);color:var(--preto);border-color:var(--amarelo)}

/*  A coluna de marcar.
    ------------------------------------------------------------------
    A célula herdava text-align:right de td.n — a classe dos números —
    porque a coluna carrega as duas classes, "fix1" e "n". Resultado: a
    caixa de seleção encostada na borda direita, desalinhada do ✓ que
    aparece no lugar dela quando o prazo está concluído.

    Centralizar aqui, e não tirar a classe "n" do template, porque é ela
    que dá a esta coluna o fundo e a borda das colunas presas.  */
table.planilha .fix1,
table.planilha .fix1.n{text-align:center}
table.planilha .fix1 input[type=checkbox]{
  margin:0;vertical-align:middle;cursor:pointer;
  /*  Alvo maior que o desenho: a caixa tem 13px, e clicar em 13px numa
      linha de 24px de altura obriga a mirar. O padding cresce a área
      sensível sem crescer o quadrado.  */
  padding:6px;
}
table.planilha .fix1 .discreto{display:inline-block;line-height:1}

/*  ================================================ índice da tela Gestão  */
/*  Cinco blocos numa página longa sem índice viram rolagem às cegas. Fica
    preso ao topo porque a resposta que se procura costuma estar no meio da
    página — um índice que sai de vista no primeiro rolar não é índice.  */
.g-indice{
  position:sticky;top:0;z-index:30;
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 16px;padding:8px;
  background:var(--papel);border:1px solid var(--linha);border-radius:12px;
  box-shadow:var(--sombra);
}
.g-indice a{
  display:flex;flex-direction:column;gap:1px;flex:1 1 150px;
  padding:7px 12px;border-radius:8px;text-decoration:none;
  border:1px solid transparent;
}
.g-indice a b{font-size:14px;font-weight:750;color:var(--tinta)}
.g-indice a span{font-size:12px;color:var(--tinta-4);line-height:1.25}
.g-indice a:hover{background:var(--fundo);border-color:var(--linha)}
.g-indice a:hover b{color:var(--amarelo-tinta, var(--tinta))}
/*  O alvo da âncora não pode ficar debaixo do índice fixo.  */
.cartao[id]{scroll-margin-top:64px}

/*  A linha de prazo apertado também vale fora da tabela do quadro.  */
tr.q-atrasado td{color:var(--q-critico)}
tr.q-atrasado td:first-child{font-weight:700}

/*  ============================================ régua de carga (Hoje)  */
/*  A tabela inteira mora em Gestão § 1. Aqui fica só a régua: quem está em
    que percentual, num relance, e clicável para a lista da pessoa. É o
    resumo que muda a decisão de quem olha o próprio dia — o detalhe que
    muda a decisão do gestor está na tela do gestor.  */
.regua-carga{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.rc-item{
  display:flex;align-items:center;gap:7px;
  padding:7px 12px 7px 8px;border-radius:999px;text-decoration:none;
  background:var(--fundo);border:1px solid var(--linha);
  border-left:4px solid var(--cinza-claro);
}
.rc-item:hover{border-color:var(--tinta-4)}
.rc-item b{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--tinta)}
.rc-item.ok{border-left-color:var(--q-bom)}
.rc-item.atencao{border-left-color:var(--q-atencao)}
.rc-item.atencao b{color:var(--q-atencao)}
.rc-item.critico{border-left-color:var(--q-critico)}
.rc-item.critico b{color:var(--q-critico)}
/*  O contador de atrasado é um selo, não um número solto: solto ao lado de
    outro número, os dois se leem como um só.  */
.rc-item .rc-atraso{
  font-style:normal;font-size:11px;font-weight:750;line-height:1;
  padding:3px 6px;border-radius:999px;
  background:var(--q-critico);color:var(--q-critico-tinta,#fff);
}

/*  ================================================= caixa de perguntas  */
/*  As prontas vêm primeiro e são clicáveis diretas: a maior parte do que se
    pergunta no dia a dia está nesta lista, e um clique é melhor que digitar
    uma frase e torcer.  */
.pg-prontas{display:flex;flex-wrap:wrap;gap:8px}
.pg-pronta{
  display:block;padding:9px 14px;border-radius:999px;text-decoration:none;
  background:var(--fundo);border:1px solid var(--linha);
  color:var(--tinta);font-size:14px;line-height:1.3;
}
.pg-pronta:hover{border-color:var(--tinta-4)}
.pg-pronta.ativa{background:var(--amarelo);border-color:var(--amarelo);color:var(--preto);font-weight:700}

.pg-forma{display:flex;gap:8px;align-items:center}
.pg-forma input[type=text]{flex:1;min-width:0}
.pg-forma input[type=text]:disabled{opacity:.55;cursor:not-allowed}

/*  A leitura em português fica destacada porque é ela que pega o erro que
    importa: a consulta certa para a pergunta errada.  */
.pg-leitura{
  margin:0 0 12px;padding:10px 14px;border-radius:10px;font-size:15px;
  background:var(--fundo);border-left:4px solid var(--amarelo);color:var(--tinta);
}
/*  A caixa do gráfico rola SOZINHA quando aperta — a página nunca.
    ------------------------------------------------------------------
    A grade é `grid-auto-columns:1fr`, e 1fr não encolhe abaixo do
    min-content do conteúdo. Rótulo de quatro palavras vira min-content
    largo, a grade fica maior que a caixa, e quem passa a rolar na
    horizontal é o documento inteiro: menu, tabela e rodapé junto. Com
    minmax(0,1fr) a coluna pode encolher, e o overflow-x aqui garante que,
    quando não couber mesmo, o que rola é este retângulo.  */
.pg-grafico{margin-bottom:10px;overflow-x:auto;overscroll-behavior-x:contain}
.pg-grafico .q-curva{grid-auto-columns:minmax(86px,1fr);min-width:min-content}
/*  Rótulo de categoria: quebra em até três linhas e corta com reticência.
    Cortar é melhor que empurrar — o nome inteiro fica no title, e a tabela
    logo abaixo traz todos por extenso.  */
.pg-grafico .q-col-rot{
  font-size:12px;line-height:1.25;text-align:center;
  /*  break-word quebra no ESPAÇO primeiro e só parte a palavra quando ela
      sozinha não cabe. `anywhere` partia "Manifestação" no meio mesmo
      havendo espaço logo antes, e rótulo cortado em "Manifestaç / ão" não
      se lê — o nome inteiro fica no title e na tabela.  */
  overflow-wrap:break-word;word-break:normal;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%;
}
.pg-grafico .q-col-valor{font-size:13px}

.pg-sql{margin-top:14px}
.pg-sql summary{
  cursor:pointer;font-size:13px;color:var(--tinta-4);
  padding:6px 0;list-style:none;
}
.pg-sql summary::-webkit-details-marker{display:none}
.pg-sql summary::before{content:"› ";font-weight:700}
.pg-sql[open] summary::before{content:"⌄ "}
.pg-sql summary:hover{color:var(--tinta)}
.pg-sql pre{
  margin:6px 0 0;padding:12px 14px;border-radius:10px;overflow-x:auto;
  background:var(--fundo);border:1px solid var(--linha);
  font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  color:var(--tinta);
}

/*  Campo desabilitado: sem isto o navegador pinta o fundo dele de cinza-claro
    de fábrica, e no tema escuro isso vira uma faixa clara no meio da tela que
    parece defeito.  */
.pg-forma input[type=text]:disabled{
  background:var(--fundo);color:var(--tinta-4);
  border-color:var(--linha);-webkit-text-fill-color:var(--tinta-4);
}

/*  ------------------------------------------------ gráfico de linha  */
/*  SVG com viewBox 0..100 e preserveAspectRatio="none": estica na largura que
    tiver, sem cálculo de pixel e sem biblioteca. Os pontos são span
    posicionados em porcentagem, na mesma caixa.  */
.pg-linha{position:relative;height:190px;margin:4px 0 0}
.pg-linha svg{width:100%;height:100%;display:block;overflow:visible}
.pg-linha polyline{
  fill:none;stroke:var(--q-bom);stroke-width:2.4;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
}
.pg-linha polygon{fill:var(--q-bom);opacity:.13;stroke:none}
.pg-ponto{
  position:absolute;width:9px;height:9px;margin:0 0 -4.5px -4.5px;
  border-radius:50%;background:var(--papel);
  border:2.4px solid var(--q-bom);
}
/*  O eixo embaixo é texto girado só quando aperta; em tela larga fica reto.  */
.pg-eixo{position:relative;height:44px;margin-top:6px}
.pg-eixo span{
  position:absolute;transform:translateX(-50%);text-align:center;
  font-size:11px;color:var(--tinta-4);line-height:1.35;white-space:nowrap;
}
.pg-eixo span b{
  display:block;font-size:13px;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.pg-eixo span.inicio{transform:none;text-align:left}
.pg-eixo span.fim{transform:translateX(-100%);text-align:right}

/*  ---------------------------------- perguntas guardadas e ações  */
.pg-par{display:inline-flex;align-items:stretch}
.pg-par .pg-pronta{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.pg-tirar{display:flex}
.pg-tirar button{
  border:1px solid var(--linha);border-left:none;background:var(--fundo);
  border-radius:0 999px 999px 0;padding:0 11px;cursor:pointer;
  color:var(--tinta-4);font-size:15px;line-height:1;
}
.pg-tirar button:hover{color:var(--q-critico);border-color:var(--q-critico)}
.pg-seguir{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;color:var(--tinta-4);cursor:pointer;
}
.pg-seguir input{margin:0;cursor:pointer}
.pg-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.pg-acoes form{display:flex}
.pg-ja{font-size:13px;color:var(--tinta-4)}

/*  ------------------------------------- botão de ler com IA (Publicações)  */
/*  Fica no lugar onde a leitura apareceria. Discreto de propósito: é uma ação
    que custa uma ida à internet, não um enfeite para clicar sem pensar.  */
.ler-ia{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:10px 0 0;padding:9px 12px;border-radius:10px;
  background:var(--fundo);border:1px dashed var(--linha);
}
.ler-ia .discreto{font-size:12px;line-height:1.35;flex:1 1 240px}

/*  --------------------------------------- a conta das horas, por extenso  */
/*  Número mágico ninguém contesta; número explicado alguém corrige. Esta
    linha é o que faz a calibração se auto-corrigir — quem vê "× 1,00
    telepresencial" numa audiência remota entende na hora que falta calibrar.  */
.conta-horas{
  margin-top:12px;padding:11px 14px;border-radius:10px;
  background:var(--fundo);border-left:4px solid var(--amarelo);
}
.conta-horas > b{font-size:13px;display:block;margin-bottom:7px}
.ch-passos{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.ch-passo{
  display:inline-flex;align-items:baseline;gap:5px;font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--tinta);
}
.ch-passo i{font-style:normal;font-size:11px;color:var(--tinta-4)}
.ch-total{
  font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;
  color:var(--tinta);padding-left:4px;
}
.conta-horas .discreto{display:block;margin-top:7px;font-size:12px}

/* >>> ÍCONES — gerado por icones.py, não edite à mão */
/*  Um desenho, uma caixa, uma espessura — e a cor vem do texto.
    ------------------------------------------------------------------
    `mask` em vez de `background-image` não é preciosismo: a máscara
    recorta a cor de `currentColor`, então o ícone do item ativo fica
    amarelo junto com o rótulo, o do item comum fica na tinta clara da
    barra, e cada desenho existe UMA vez. Com imagem de fundo eu
    precisaria de uma segunda cópia de cada um só para a cor.

    Os desenhos e o porquê de cada escolha estão em icones.py.  */
.topo [data-i]::before{
  /*  `inline-block` não é detalhe: num pseudoelemento INLINE a largura e a
      altura são simplesmente ignoradas, e o ícone nasce com 0×0. Foi o que
      aconteceu com a seta do botão de recolher — o rótulo aparecia, o
      desenho não, e nada no CSS parecia errado. Nos itens de menu, que são
      contêineres flex, o navegador já bloqueia o pseudoelemento sozinho;
      dizer aqui cobre os dois casos.  */
  content:"";display:inline-block;vertical-align:-3px;
  width:18px;height:18px;flex:none;
  background-color:currentColor;
  -webkit-mask:var(--ic) center/17px 17px no-repeat;
          mask:var(--ic) center/17px 17px no-repeat;
}
/*  Se o navegador não souber recortar máscara, o ícone sumiria e a barra
    recolhida ficaria em branco. O quadradinho não é bonito, mas é uma
    marca de posição legível — e ninguém fica sem saber onde clicar.  */
@supports not ((-webkit-mask-image:none) or (mask-image:none)){
  .topo [data-i]::before{
    background:currentColor;-webkit-mask:none;mask:none;
    width:7px;height:7px;margin:0 5px;border-radius:2px;opacity:.7;
  }
}
/*  Na barra de cima o menu não tem ícone — doze desenhos numa fileira
    horizontal viram uma cerca. O estilo-novo.css devolve o `content` para
    a barra lateral, onde o ícone é o que sobra quando ela se recolhe.  */
.topo .menu a[data-i]::before{content:none}

/*  Como o ícone se senta ao lado do rótulo. No pé da barra os atalhos são
    links e botões que existem nos dois visuais: sem display de caixa, o
    ::before de 18px não se alinha com o texto, e sem o vão ele encosta na
    primeira letra.  */
.topo .usuario > a[data-i],
.topo .usuario > button[data-i]{display:inline-flex;align-items:center;gap:7px}
.topo [data-i="abrir"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m10.6%207.4%204.6%204.6-4.6%204.6M5%207.4%209.6%2012%205%2016.6'/%3E%3C/svg%3E")}
.topo [data-i="agenda"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.4'%20y='5'%20width='17.2'%20height='15.6'%20rx='2.6'/%3E%3Cpath%20d='M3.4%2010h17.2M8.6%202.9v4.2M15.4%202.9v4.2'/%3E%3C/svg%3E")}
.topo [data-i="ajuda"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%206.9C10.6%205.4%208.6%204.6%206%204.6H3.6v13H6c2.6%200%204.6.8%206%202.3'/%3E%3Cpath%20d='M12%206.9c1.4-1.5%203.4-2.3%206-2.3h2.4v13H18c-2.6%200-4.6.8-6%202.3'/%3E%3Cpath%20d='M12%206.9v13'/%3E%3C/svg%3E")}
.topo [data-i="andamentos"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6.4%204.2v15.6'/%3E%3Ccircle%20cx='6.4'%20cy='7.2'%20r='1.7'/%3E%3Ccircle%20cx='6.4'%20cy='12'%20r='1.7'/%3E%3Ccircle%20cx='6.4'%20cy='16.8'%20r='1.7'/%3E%3Cpath%20d='M10.6%207.2h9.4M10.6%2012h7M10.6%2016.8h9.4'/%3E%3C/svg%3E")}
.topo [data-i="auditoria"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='10.8'%20cy='10.8'%20r='6.3'/%3E%3Cpath%20d='m15.4%2015.4%204.8%204.8'/%3E%3C/svg%3E")}
.topo [data-i="carteira"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='7.4'%20width='18'%20height='12.2'%20rx='2.2'/%3E%3Cpath%20d='M8.6%207.4V6a2%202%200%200%201%202-2h2.8a2%202%200%200%201%202%202v1.4'/%3E%3Cpath%20d='M3%2012.4h18'/%3E%3C/svg%3E")}
.topo [data-i="certidoes"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203.6h7.4l4.6%204.6v11.8a1.6%201.6%200%200%201-1.6%201.6H6a1.6%201.6%200%200%201-1.6-1.6V5.2A1.6%201.6%200%200%201%206%203.6z'/%3E%3Cpath%20d='M13.2%203.8v4.6h4.6'/%3E%3Ccircle%20cx='11'%20cy='14.6'%20r='2.9'/%3E%3Cpath%20d='M9.4%2017.2l-.8%203.2%202.4-1.3%202.4%201.3-.8-3.2'/%3E%3C/svg%3E")}
.topo [data-i="cheia"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.6%203.6h-5v5M15.4%203.6h5v5M20.4%2015.4v5h-5M3.6%2015.4v5h5'/%3E%3C/svg%3E")}
.topo [data-i="clientes"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020.4V6.6a1.6%201.6%200%200%201%201.6-1.6h7.2a1.6%201.6%200%200%201%201.6%201.6v13.8'/%3E%3Cpath%20d='M14.4%2020.4V10.4h4a1.6%201.6%200%200%201%201.6%201.6v8.4'/%3E%3Cpath%20d='M2.6%2020.4h18.8'/%3E%3Cpath%20d='M7.2%208.6h1.4M10.6%208.6H12M7.2%2012.2h1.4M10.6%2012.2H12'/%3E%3Cpath%20d='M8.2%2020.4v-4.2h3v4.2'/%3E%3C/svg%3E")}
.topo [data-i="contingencia"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205.9v13.3M8.4%2019.6h7.2'/%3E%3Cpath%20d='M4.6%208.2h14.8'/%3E%3Cpath%20d='M1.9%208.4a2.7%202.7%200%200%200%205.4%200'/%3E%3Cpath%20d='M16.7%208.4a2.7%202.7%200%200%200%205.4%200'/%3E%3Ccircle%20cx='12'%20cy='4.4'%20r='1.5'/%3E%3C/svg%3E")}
.topo [data-i="entrada"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.6%2013.8h4.8l1.5%203h4.2l1.5-3h4.8'/%3E%3Cpath%20d='M3.6%2013.8%206%206.1a2%202%200%200%201%201.9-1.4h8.2A2%202%200%200%201%2018%206.1l2.4%207.7v3.8a2%202%200%200%201-2%202H5.6a2%202%200%200%201-2-2z'/%3E%3C/svg%3E")}
.topo [data-i="equipe"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9.4'%20cy='8.4'%20r='3.3'/%3E%3Cpath%20d='M3.4%2019.6a6%206%200%200%201%2012%200'/%3E%3Cpath%20d='M16.2%206.1a3.3%203.3%200%200%201%200%206.6'/%3E%3Cpath%20d='M17.2%2014.6a5.5%205.5%200%200%201%203.4%205'/%3E%3C/svg%3E")}
.topo [data-i="faturamento"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5.4%203.4h13.2v17.2l-2.64-1.5-2.64%201.5-2.64-1.5-2.64%201.5-2.64-1.5z'/%3E%3Cpath%20d='M8.8%208.4h6.4M8.8%2012.4h6.4'/%3E%3C/svg%3E")}
.topo [data-i="gestao"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.6%2020.4h16.8'/%3E%3Cpath%20d='M6.8%2017.2v-5.6M12%2017.2V5.4M17.2%2017.2V9'/%3E%3C/svg%3E")}
.topo [data-i="hoje"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.4'/%3E%3Cpath%20d='M12%207.2V12l3.2%201.9'/%3E%3C/svg%3E")}
.topo [data-i="mesa"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.6%2013.2h4.2l1.6%202.6h5.2l1.6-2.6h4.2'/%3E%3Cpath%20d='M3.6%2013.2v5.4a1.8%201.8%200%200%200%201.8%201.8h13.2a1.8%201.8%200%200%200%201.8-1.8v-5.4'/%3E%3Cpath%20d='M8.4%208.2%2012%204.6l3.6%203.6M12%204.6v6'/%3E%3C/svg%3E")}
.topo [data-i="parametros"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.8%207.6h9.6M18.6%207.6h1.6M3.8%2016.4h3.8M12.6%2016.4h7.6'/%3E%3Ccircle%20cx='16'%20cy='7.6'%20r='2.4'/%3E%3Ccircle%20cx='10.1'%20cy='16.4'%20r='2.4'/%3E%3C/svg%3E")}
.topo [data-i="perfis"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.2%2019%206.1v5.5c0%204.4-2.9%207.4-7%208.9-4.1-1.5-7-4.5-7-8.9V6.1z'/%3E%3Cpath%20d='m9.1%2011.9%202.2%202.2%204-4'/%3E%3C/svg%3E")}
.topo [data-i="perguntar"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.4%2013.6a3%203%200%200%201-3%203H10l-4.4%203.6V6.6a3%203%200%200%201%203-3h8.8a3%203%200%200%201%203%203z'/%3E%3Cpath%20d='M10.2%208.9a1.9%201.9%200%201%201%202.7%201.9c-.6.4-.9.9-.9%201.5v.2'/%3E%3Ccircle%20cx='12'%20cy='14.2'%20r='.95'%20fill='%23000'%20stroke='none'/%3E%3C/svg%3E")}
.topo [data-i="prazos"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.2%206.4h10M10.2%2012h10M10.2%2017.6h10'/%3E%3Cpath%20d='m3.6%206.2%201.4%201.5%202.7-2.8'/%3E%3Cpath%20d='m3.6%2011.8%201.4%201.5%202.7-2.8'/%3E%3Cpath%20d='M3.8%2017.6h3.6'/%3E%3C/svg%3E")}
.topo [data-i="processos"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.4%207.6a2%202%200%200%201%202-2h4.4l2.1%202.6h6.7a2%202%200%200%201%202%202v7.6a2%202%200%200%201-2%202H5.4a2%202%200%200%201-2-2z'/%3E%3C/svg%3E")}
.topo [data-i="publicacoes"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.4'%20y='5.4'%20width='17.2'%20height='13.2'%20rx='2.2'/%3E%3Cpath%20d='m4.6%207.4%207.4%205.5%207.4-5.5'/%3E%3C/svg%3E")}
.topo [data-i="quadro"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.9'%20y='4.4'%20width='18.2'%20height='12.6'%20rx='2.2'/%3E%3Cpath%20d='M9%2020.4h6M12%2017v3.4'/%3E%3C/svg%3E")}
.topo [data-i="recolher"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m13.4%207.4-4.6%204.6%204.6%204.6M19%207.4%2014.4%2012l4.6%204.6'/%3E%3C/svg%3E")}
.topo [data-i="relatorios"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.4%206.2a1.6%201.6%200%200%201%201.6-1.6h3.4l1.6%202h5.2a1.6%201.6%200%200%201%201.6%201.6v9.6a1.6%201.6%200%200%201-1.6%201.6H6a1.6%201.6%200%200%201-1.6-1.6z'/%3E%3Cpath%20d='M13.6%2012.4h6.6'/%3E%3Cpath%20d='M17.9%2010.1l2.3%202.3-2.3%202.3'/%3E%3C/svg%3E")}
.topo [data-i="sair"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13.6%204.6H6.4a2%202%200%200%200-2%202v10.8a2%202%200%200%200%202%202h7.2'/%3E%3Cpath%20d='M17.4%208.4%2021%2012l-3.6%203.6M21%2012H9.4'/%3E%3C/svg%3E")}
.topo [data-i="senha"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='7.8'%20cy='12'%20r='3.6'/%3E%3Cpath%20d='M11.4%2012h9M17.4%2012v3.2M20.4%2012v2.4'/%3E%3C/svg%3E")}
.topo [data-i="tema-auto"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.4'/%3E%3Cpath%20d='M12%203.6a8.4%208.4%200%200%201%200%2016.8z'%20fill='%23000'%20stroke='none'/%3E%3C/svg%3E")}
.topo [data-i="tema-claro"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.2'/%3E%3Cpath%20d='M12%203.2v2.2M12%2018.6v2.2M5.8%205.8l1.6%201.6M16.6%2016.6l1.6%201.6M3.2%2012h2.2M18.6%2012h2.2M5.8%2018.2l1.6-1.6M16.6%207.4l1.6-1.6'/%3E%3C/svg%3E")}
.topo [data-i="tema-escuro"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.2%2014.2A8.4%208.4%200%200%201%209.8%203.8a8.5%208.5%200%201%200%2010.4%2010.4z'/%3E%3C/svg%3E")}
/* <<< fim dos ícones */

/*  ================================================== COR POR TIPO DE ATO
    Para achar as audiências no meio de 250 linhas sem filtrar.
    ------------------------------------------------------------------
    Filtrar responde "só as audiências". A cor responde "onde elas estão
    no meio do resto" — que é a pergunta de quem olha a semana inteira de
    uma vez, e a que a tabela não atendia.

    Oito cores e nem uma a mais, escolhidas aqui e não pelo usuário. Um
    seletor livre de cor parece generoso e produz, na segunda semana,
    amarelo sobre branco: ilegível, e ilegível numa tela em que se lê
    data de vencimento. Estas oito têm par claro e escuro, e passam a
    medição de contraste do auditar_contraste.py.

    A cor tinge a CÉLULA do tipo, não a linha inteira. A linha já carrega
    a escala de urgência (vencido, hoje, próximo), que é a informação mais
    importante da tela — pintar a linha por cima dela seria trocar o que
    urge pelo que é.  */
td.cor-tipo{border-radius:0}
td.cor-t1{background:#FFF0BF !important}   /* amarelo  */
td.cor-t2{background:#D8EFD6 !important}   /* verde    */
td.cor-t3{background:#D6E6F7 !important}   /* azul     */
td.cor-t4{background:#E6DDF5 !important}   /* roxo     */
td.cor-t5{background:#FBDCE4 !important}   /* rosa     */
td.cor-t6{background:#FBE0C8 !important}   /* laranja  */
td.cor-t7{background:#D2EDEE !important}   /* ciano    */
td.cor-t8{background:#E3E2DD !important}   /* cinza    */

/*  No escuro a mesma cor não serve: fundo claro sobre tela escura vira
    lanterna e cansa em quinze minutos. São os mesmos oito matizes, com a
    luminosidade invertida — reconhecíveis como "o verde", legíveis como
    fundo de texto claro.  */
/*  A COR ESCURA SÓ NO ESCURO — e "auto" NÃO É ESCURO.
    ------------------------------------------------------------------
    Estas dezesseis regras diziam `body.tema-escuro X, body.tema-auto X`,
    sem media query nenhuma. `tema-auto` quer dizer "acompanha o
    computador", e é o padrão de muita gente: num computador em modo
    CLARO a página saía clara e a célula do tipo saía com o fundo do tema
    ESCURO. Verde-escuro com letra escura em cima, na coluna que diz se o
    ato é audiência — a tela mais lida do sistema.

    Nada quebrava e nada aparecia em log. E a auditoria de contraste não
    pegava porque ela testa `tema-claro` e `tema-escuro` trocando a classe
    do body — nunca `tema-auto`, que é justamente onde o defeito morava.
    A auditoria passou a testar os três.  */
body.tema-escuro td.cor-t1{background:#4A3F16 !important}
body.tema-escuro td.cor-t2{background:#25401F !important}
body.tema-escuro td.cor-t3{background:#1E3550 !important}
body.tema-escuro td.cor-t4{background:#33254D !important}
body.tema-escuro td.cor-t5{background:#4A2130 !important}
body.tema-escuro td.cor-t6{background:#4A3218 !important}
body.tema-escuro td.cor-t7{background:#1C4142 !important}
body.tema-escuro td.cor-t8{background:#3A3833 !important}
body.tema-escuro .cor-amostra-t1{background:#4A3F16}
body.tema-escuro .cor-amostra-t2{background:#25401F}
body.tema-escuro .cor-amostra-t3{background:#1E3550}
body.tema-escuro .cor-amostra-t4{background:#33254D}
body.tema-escuro .cor-amostra-t5{background:#4A2130}
body.tema-escuro .cor-amostra-t6{background:#4A3218}
body.tema-escuro .cor-amostra-t7{background:#1C4142}
body.tema-escuro .cor-amostra-t8{background:#3A3833}

@media (prefers-color-scheme: dark){
  body.tema-auto td.cor-t1{background:#4A3F16 !important}
  body.tema-auto td.cor-t2{background:#25401F !important}
  body.tema-auto td.cor-t3{background:#1E3550 !important}
  body.tema-auto td.cor-t4{background:#33254D !important}
  body.tema-auto td.cor-t5{background:#4A2130 !important}
  body.tema-auto td.cor-t6{background:#4A3218 !important}
  body.tema-auto td.cor-t7{background:#1C4142 !important}
  body.tema-auto td.cor-t8{background:#3A3833 !important}
  body.tema-auto .cor-amostra-t1{background:#4A3F16}
  body.tema-auto .cor-amostra-t2{background:#25401F}
  body.tema-auto .cor-amostra-t3{background:#1E3550}
  body.tema-auto .cor-amostra-t4{background:#33254D}
  body.tema-auto .cor-amostra-t5{background:#4A2130}
  body.tema-auto .cor-amostra-t6{background:#4A3218}
  body.tema-auto .cor-amostra-t7{background:#1C4142}
  body.tema-auto .cor-amostra-t8{background:#3A3833}
}

/*  A amostra da cor no formulário e na tabela de tipos. Classe própria
    porque as regras de cima são de <td> — a amostra é um <span>.  */
.cor-amostra-t1{background:#FFF0BF}
.cor-amostra-t2{background:#D8EFD6}
.cor-amostra-t3{background:#D6E6F7}
.cor-amostra-t4{background:#E6DDF5}
.cor-amostra-t5{background:#FBDCE4}
.cor-amostra-t6{background:#FBE0C8}
.cor-amostra-t7{background:#D2EDEE}
.cor-amostra-t8{background:#E3E2DD}

.amostra-cor{
  display:inline-block;width:15px;height:15px;border-radius:4px;
  border:1px solid rgba(18,17,12,.18);vertical-align:-3px;margin-right:6px;
}
/*  As caixinhas de coluna do relatório. Uma por linha e clicáveis no
    rótulo inteiro: a lista é escolha, não formulário — quem está montando
    um relatório passa por ela marcando e desmarcando várias vezes, e alvo
    de clique do tamanho da palavra é o que faz isso não cansar.  */
.marcar{
  display:flex;gap:7px;align-items:baseline;font-size:13px;
  padding:3px 4px;border-radius:6px;cursor:pointer;
}
.marcar:hover{background:var(--papel-toque)}
.marcar input{margin:0;flex:none}

.escolha-cor{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.escolha-cor label{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  border:1px solid var(--cinza-claro);border-radius:var(--r-min, 5px);
  padding:3px 8px;font-size:12px;
}
.escolha-cor input{margin:0}
.escolha-cor label:has(input:checked){
  border-color:var(--amarelo-fosco);box-shadow:0 0 0 2px rgba(255,194,15,.3);
}

/* ------------------------------------------------ TABELA QUE NÃO CABE
   A escala grande é acessibilidade, não capricho.

   O sistema oferece escalas de 90% a 200%. Na Gestão as onze tabelas
   estavam soltas no cartão, sem caixa que role — então a 200% elas
   empurravam a PÁGINA de lado, e a barra lateral, que é fixa, andava
   junto: o menu aparecia cortado pela esquerda. Medido: em 1280px com
   escala 200%, 884px de estouro.

   Quem precisa de letra grande é exatamente quem menos consegue caçar
   um menu que saiu da tela.

   A tabela rolar dentro da própria caixa é o desenho — é o que a
   planilha de prazos já faz. Aqui é a mesma ideia, com a caixa mais
   simples: sem cabeçalho grudado, sem segunda barra em cima, porque
   estas tabelas são curtas.  */
.rolavel{overflow-x:auto;max-width:100%}
.rolavel > table{min-width:100%}

/*  O seletor de arquivo tem largura própria do navegador (~290px) e não
    encolhe sozinho. Numa coluna estreita — ou na escala de 200% — ele
    empurra a página de lado. Medido em /certidoes, 1600px a 200%.  */
input[type=file]{max-width:100%}

/*  Os dois botões de ajuste andam juntos e se leem como um controle só:
    "ajustar" e a volta atrás dele. Separados por 8px na barra, pareciam
    duas ações sem relação, e "soltar" sozinho não quer dizer nada.  */
.par-botoes{display:inline-flex;gap:0}
.par-botoes > .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.par-botoes > .btn:last-child{
  border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;
  color:var(--cinza);
}

/*  A TABELA ENCAIXADA NA MOLDURA.
    -----------------------------------------------------------------
    `table-layout: fixed` é o que transforma a largura declarada em
    ordem: no modo automático o navegador estica a coluna quando o
    conteúdo não cabe, e o "ajuste" virava sugestão — a tabela ficava
    com a caixa certa e 160px de conteúdo para fora dela.

    Com o layout fixo, quem tem de ceder é o texto. Por isso as regras
    de corte por reticências saem aqui: numa coluna estreitada de
    propósito, cortar o nome é perder justamente o que se queria ver.
    Vale só dentro desta classe — a planilha solta continua sendo uma
    linha por registro, que é o que se lê de relance.  */
table.planilha.quadro-ajustado{table-layout:fixed}
/*  `td.nowrap` e `td.mono` saíram desta lista, e a saída é o conserto:
    elas são justamente as colunas que NÃO podem quebrar (número de
    processo, data, contagem), e estando aqui venciam por especificidade
    a regra que o ajuste gera para protegê-las. O resultado era o número
    do processo partido em duas linhas depois de eu ter escrito o código
    para impedir exatamente isso.  */
table.planilha.quadro-ajustado tbody td{
  /*  `break-word` e não `anywhere`: `anywhere` quebra no meio da
      palavra e produziu 'Comar/ca 9', 'Telepres/encial' e uma data
      partida em '10/11/20' + '25'. Quebrar palavra é o último
      recurso, não o primeiro.  */
  white-space:normal;overflow-wrap:break-word;word-break:normal;
  text-overflow:clip;max-width:none;
  /*  CENTRALIZADO NA VERTICAL, e não colado no topo.
      Com `top`, uma linha de duas alturas deixava a célula de uma linha
      só grudada em cima e um vão embaixo — a linha parecia desalinhada
      mesmo estando certa. Centralizar faz as células de alturas
      diferentes se lerem como uma linha, que é o que uma linha é.  */
  vertical-align:middle;
}
/*  O cabeçalho quebra junto. Uma tabela em que o conteúdo reflui e o
    título não é uma tabela com o título cortado — e o título é o que diz
    o que a coluna é.  */
table.planilha.quadro-ajustado thead th{
  white-space:normal;vertical-align:middle;
}
table.planilha.quadro-ajustado thead th .rot{
  max-width:none;white-space:normal;overflow:visible;text-overflow:clip;
}
table.planilha.quadro-ajustado thead th .cabeca{align-items:center}

/*  A DATA FATAL, EM VERMELHO.
    ------------------------------------------------------------------
    O fatal é a data que não se perde: perder o vencimento interno custa
    uma conversa, perder o fatal custa o direito. Ela estava em cinza,
    igual a uma observação, e era a única coluna da planilha em que a
    cor não dizia nada.

    O vermelho é o mesmo `--vencido` já usado na contagem de dias, e não
    um vermelho novo: duas famílias de vermelho na mesma linha fazem o
    olho procurar diferença onde não há. Números tabulares para as datas
    ficarem uma embaixo da outra, que é como se comparam.  */
td.data-fatal{
  color:var(--vencido);font-weight:640;
  font-variant-numeric:tabular-nums;
}
/*  A pastilha de margem ("D-2") ao lado da data, compacta, para caber
    junto com a data na largura que a coluna costuma ter.  */
td.data-fatal .pill{padding:1px 5px;font-size:10px;margin-left:2px}

/*  O "?" DO TÍTULO, E A LINHA QUE ELE DEVOLVE.
    ------------------------------------------------------------------
    Com a explicação fora da linha, o título passa a caber ao lado dos
    botões — e a linha inteira que ela ocupava volta para a tabela. Na
    janela do escritório isso é uma linha de prazo a mais, todo dia, em
    toda tela de lista.

    O botão é redondo e discreto: uma interrogação do tamanho do texto,
    que não disputa atenção com "Novo prazo". Ele não pode ser um `?`
    solto sem área de clique — 22px é o mínimo em que se acerta com o
    mouse sem mirar.  */
.ajuda-tela{position:relative;display:inline-block;flex:none}
.ajuda-tela > summary{
  list-style:none;cursor:help;width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--cinza-claro);color:var(--cinza);
  font-size:12px;font-weight:700;background:var(--papel);
}
.ajuda-tela > summary::-webkit-details-marker{display:none}
.ajuda-tela > summary:hover{
  border-color:var(--amarelo-fosco);color:var(--tinta);background:var(--papel-toque);
}
.ajuda-tela[open] > summary{
  border-color:var(--amarelo-fosco);color:var(--tinta);background:var(--papel-toque);
}
.ajuda-tela > .painel-filtro{
  position:absolute;top:26px;left:0;z-index:60;min-width:340px;max-width:min(460px,90vw);
  white-space:normal;font-weight:400;text-transform:none;letter-spacing:0;
}
.ajuda-tela > .painel-filtro p{margin:6px 0 0;font-size:12.5px;line-height:1.5}
/*  O título e o "?" ficam juntos, e os botões vão para a direita. Antes
    o `div` do título ocupava a linha sozinho porque a frase de apoio era
    larga; sem ela, `align-items:center` alinha os três pelo meio.

    A CONTA QUE FICA AO LADO ("78 audiências entre 31/08 e 27/09") NÃO
    PODE SER ESPREMIDA. Na agenda ela saiu em seis linhas de uma palavra.
    O que acontecia, medido no navegador: o `div` do título é um flex que
    QUEBRA LINHA por dentro, e o Chrome mede a largura natural de um flex
    que quebra pelo item mais largo, não pela soma — então o `.cabecalho`
    achava que o título cabia em 225px, colocava os botões ao lado, e o
    `div` de 225px empilhava pílula e frase, palavra por palavra.

    A saída é NÃO deixar o `div` quebrar por dentro: em linha única a
    largura natural dele é a soma dos pedaços, sem ambiguidade, e aí o
    `.cabecalho` (que quebra) decide certo — ou os botões cabem ao lado
    do título inteiro, ou descem inteiros para a linha de baixo. A frase
    só encolhe se sozinha for mais larga que a tela, e então corta com
    reticências em vez de estourar a página para o lado (é a regra que a
    planilha, `tela-larga`, já seguia).  */
.cabecalho{align-items:center}
.cabecalho > div:first-child{
  display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;
}
.cabecalho h1{margin-bottom:0}
.cabecalho > div:first-child > .periodo{flex:none;margin-left:0}
.cabecalho > div:first-child > .sub{
  margin:0;flex:0 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/*  A linha do processo que o PDF traz e o cadastro não tem: número,
    arquivo e o botão de cadastrar, com o botão encostado à direita para
    a coluna de botões se ler de cima a baixo.  */
.linha-sem-cadastro{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/*  ====================================================================
    A MESA EM TRÊS FAIXAS (templates/mesa.html, app/mesa.py)
    --------------------------------------------------------------------
    Cada faixa é um papel: quem EXECUTA, quem REVISA, quem PROTOCOLA. As
    três têm a mesma anatomia — cabeçalho com ícone, nome, frase e números,
    e a tabela embaixo — e cada uma tem a sua cor, para o olho saber em
    que faixa está antes de ler. A cor é da faixa, não do risco: risco
    continua sendo vermelho/laranja nas pílulas, como no resto do sistema.
      · executor  — o amarelo da casa: é o "meu" trabalho
      · revisor   — o azul da trava (--link), o segundo par de olhos
      · protocolo — o verde de "tranquilo": a peça está pronta
    O TRILHO de quatro bolinhas (lançado → entregue → revisado →
    protocolado) é o mesmo em todas, preenchido na cor da faixa.  */
:root{
  --faixa-exec:#FFC20F;      --faixa-exec-tinta:#5A4600;  --faixa-exec-lav:#FFF6D9;
  --faixa-rev:#1F4E79;       --faixa-rev-tinta:#1B3E5F;   --faixa-rev-lav:#EEF4FA;
  --faixa-prot:#3F6212;      --faixa-prot-tinta:#31500E;  --faixa-prot-lav:#ECFCCB;
  --trilho-vazio:#D9D8D4;
}
body.tema-escuro{
  --faixa-exec:#FFC20F;      --faixa-exec-tinta:#F2D27A;  --faixa-exec-lav:#3A3320;
  --faixa-rev:#7FB2E5;       --faixa-rev-tinta:#A9CDEF;   --faixa-rev-lav:#1E2733;
  --faixa-prot:#9CCB5A;      --faixa-prot-tinta:#BFE08A;  --faixa-prot-lav:#22301A;
  --trilho-vazio:#4E493C;
}
@media (prefers-color-scheme: dark){
  body.tema-auto{
  --faixa-exec:#FFC20F;      --faixa-exec-tinta:#F2D27A;  --faixa-exec-lav:#3A3320;
  --faixa-rev:#7FB2E5;       --faixa-rev-tinta:#A9CDEF;   --faixa-rev-lav:#1E2733;
  --faixa-prot:#9CCB5A;      --faixa-prot-tinta:#BFE08A;  --faixa-prot-lav:#22301A;
  --trilho-vazio:#4E493C;
  }
}

.faixa{
  background:var(--papel);border:1px solid var(--cinza-claro);border-radius:var(--raio);
  box-shadow:var(--sombra);margin-bottom:18px;overflow:hidden;
  border-left:6px solid var(--faixa-cor,var(--cinza));
}
.faixa-exec{--faixa-cor:var(--faixa-exec);--faixa-tinta:var(--faixa-exec-tinta);--faixa-lav:var(--faixa-exec-lav)}
.faixa-rev {--faixa-cor:var(--faixa-rev); --faixa-tinta:var(--faixa-rev-tinta); --faixa-lav:var(--faixa-rev-lav)}
.faixa-prot{--faixa-cor:var(--faixa-prot);--faixa-tinta:var(--faixa-prot-tinta);--faixa-lav:var(--faixa-prot-lav)}

.faixa-cab{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px 14px 16px;
  background:linear-gradient(90deg,var(--faixa-lav) 0,var(--papel) 62%);
  border-bottom:1px solid var(--linha);
}
.faixa-icone{
  flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--preto);color:var(--faixa-cor);
}
.faixa-exec .faixa-icone{color:var(--amarelo)}
.faixa-titulo{flex:1 1 260px;min-width:0}
.faixa-titulo h2{margin:0;font-size:19px;letter-spacing:-.01em;color:var(--faixa-tinta)}
.faixa-titulo p{margin:2px 0 0;font-size:12.5px;color:var(--tinta-4);line-height:1.35}
.faixa-numeros{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.faixa-numeros .num{
  min-width:74px;padding:6px 10px;border-radius:8px;border:1px solid var(--linha);
  background:var(--papel);text-align:center;line-height:1.1;
}
.faixa-numeros .num b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinta)}
.faixa-numeros .num span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--cinza);margin-top:2px}
.faixa-numeros .num.destaque{background:var(--preto);border-color:var(--preto)}
.faixa-numeros .num.destaque b{color:var(--faixa-cor)}
.faixa-exec .faixa-numeros .num.destaque b{color:var(--amarelo)}
.faixa-numeros .num.destaque span{color:var(--tinta-inversa-2)}
.faixa-numeros .num.critico{border-color:var(--pill-venc-borda);background:var(--pill-venc-fundo)}
.faixa-numeros .num.critico b{color:var(--vencido)}
.faixa-numeros .num.alerta{border-color:var(--pill-hoje-borda);background:var(--pill-hoje-fundo)}
.faixa-numeros .num.alerta b{color:var(--hoje)}
.faixa .grade-planilha.faixa-grade{max-height:none;border:0;border-radius:0;box-shadow:none;margin:0}
.faixa .vazio{padding:26px 20px}
.faixa-sub{border-top:1px dashed var(--tracejado);padding:12px 16px 4px}
.faixa-sub .titulo-secao{margin-top:0}

/*  As linhas que pedem o olho: a que voltou (devolvida), a que acabou de
    chegar (a revisar) e a que está no fatal.  */
table.mesa-tabela td.col-trilho{width:96px;padding-right:4px}
table.mesa-tabela td.col-sit{max-width:260px}
table.mesa-tabela tr.linha-devolvida td{background:var(--pill-hoje-fundo)}
table.mesa-tabela tr.linha-chegou td{background:var(--faixa-lav)}
table.mesa-tabela tr.linha-fatal td{background:var(--pill-venc-fundo)}
table.mesa-tabela .motivo{
  margin-top:3px;font-size:11.5px;color:var(--tinta-2);white-space:normal;line-height:1.3;
  border-left:3px solid var(--hoje);padding-left:6px;
}
table.mesa-tabela .fatal-perto{color:var(--vencido);font-weight:600}
.tag.perigo{background:var(--pill-venc-fundo);border-color:var(--pill-venc-borda);color:var(--pill-venc-tinta);font-weight:640}
details.devolver{display:inline-block;vertical-align:middle}
details.devolver > summary{list-style:none;cursor:pointer;display:inline-block}
details.devolver > summary::-webkit-details-marker{display:none}
details.devolver .devolver-form{margin:6px 0 0;padding:8px;background:var(--faixa-lav);border-radius:8px;border:1px solid var(--linha)}
details.devolver .devolver-form input[name=motivo]{width:240px}

/*  O TRILHO  */
.trilho{display:inline-flex;align-items:center;vertical-align:middle;--trilho-cor:var(--faixa-cor,var(--preto))}
.trilho i{
  position:relative;flex:none;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--trilho-vazio);background:var(--papel);box-sizing:border-box;
}
.trilho i.feito{background:var(--trilho-cor);border-color:var(--trilho-cor)}
.trilho i.atual{border-color:var(--trilho-cor);box-shadow:0 0 0 3px var(--faixa-lav,var(--lavagem-marca-2))}
.trilho.atrasado i.atual{border-color:var(--vencido);box-shadow:0 0 0 3px var(--pill-venc-fundo)}
.trilho i.volta::before{
  content:"↩";position:absolute;left:-1px;top:-15px;font-size:11px;line-height:1;
  color:var(--hoje);font-weight:700;
}
.trilho b{flex:none;width:12px;height:2px;background:var(--trilho-vazio)}
.trilho b.feito{background:var(--trilho-cor)}
.trilho i em{display:none}
/*  Em grande (ficha do prazo), com os nomes embaixo.  */
.trilho.grande{gap:0;--trilho-cor:var(--tinta)}
.trilho.grande i{width:16px;height:16px;border-width:3px}
.trilho.grande b{width:64px;height:3px}
.trilho.grande i em{
  display:block;position:absolute;top:20px;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:11px;color:var(--tinta-4);white-space:nowrap;letter-spacing:.02em;
}
.trilho.grande i.feito em{color:var(--tinta);font-weight:600}
.trilho.grande i.atual em{color:var(--tinta);font-weight:700}
.trilho.grande{margin-bottom:22px}
.trilho.grande i.volta::before{display:none}
.trilho.grande i.volta{border-color:var(--hoje)}
.trilho.grande i.volta em{color:var(--hoje);font-weight:700}
.faixa-exec .trilho i.feito{background:var(--amarelo-fosco);border-color:var(--amarelo-fosco)}
.faixa-exec .trilho b.feito{background:var(--amarelo-fosco)}
.faixa-exec .trilho i.atual{border-color:var(--amarelo-fosco)}

.mesa-legenda{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 14px;
  font-size:12px;color:var(--tinta-4);
}
.mesa-legenda .trilho.e-legenda{--trilho-cor:var(--tinta);--faixa-lav:var(--lavagem-marca-2)}
.mesa-legenda .trilho.e-legenda i.volta{margin-top:10px}
.mesa-legenda .trilho.e-legenda i.volta::before{top:-15px}