/* QuadroForce — painel do gestor. Material Design 3, paleta do handoff.
 *
 * ⚠️ A PALETA É A DO HANDOFF, NÃO INVENTADA: paleta tonal gerada da cor de
 * origem #2D5A27 (o verde do lúpulo), papéis literais do README do handoff,
 * tons 0–100 em md3-palette.json. `warning` é cor ESTENDIDA deliberada (o
 * "pendente / a fazer" que não é erro nem sucesso) — MD3 permite, o nome fica.
 *
 * ⚠️ FONTES LOCAIS, SEM CDN: Roboto, Roboto Mono e Material Symbols
 * (subsetado) vivem em /painel/fonts/ — a CSP de produção é `font-src 'self'`
 * e o painel não depende de rede externa. Todo número conferível contra outro
 * documento vai em Roboto Mono (regra do design system).
 *
 * ⚠️ MD3 NÃO USA PESO 700 NA INTERFACE: títulos e rótulos em 500, corpo em
 * 400. A ênfase vem de escala e cor, não de bold.
 */

@font-face {
  font-family: "Roboto";
  src: url("/painel/fonts/roboto.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/painel/fonts/robotomono.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/painel/fonts/symbols.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

/* Ícone Material Symbols por ligadura: <span class="msr">grid_view</span> */
.msr {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  flex: 0 0 auto;
}

/* ⚠️⚠️ `transition: background` COM `var()` QUE MUDA NO ANCESTRAL TRAVA O
   VALOR — e o defeito parece funcionar por dentro.
   
   Medido: com a transição no `background`, `--fundo-do-modulo` trocava certo
   (#F5FBF4 → #FBF8F4 → #F7F8F7, conferido em `getComputedStyle` da raiz) e o
   fundo pintado ficava CONGELADO no primeiro valor. Sem a transição, trocava
   na hora. O navegador não dispara transição quando o valor vem de uma custom
   property alterada em OUTRO elemento: ele mantém o último valor interpolado.
   
   `@property` resolve pela raiz: registrada com `syntax: '<color>'`, a variável
   deixa de ser texto e vira COR de verdade — animável, e a transição passa a
   valer sobre ela em vez de sobre o `background`. Onde `@property` não for
   suportado, a troca continua acontecendo, só que seca: degrada para o
   comportamento correto, nunca para o congelado. */
@property --fundo-do-modulo {
  syntax: '<color>';
  inherits: true;
  initial-value: #F6FBF4;
}

:root {
  /* ── Papéis de cor MD3 (esquema claro do handoff, literais) ──────────── */
  --md-primary: #3C6934;            --md-on-primary: #FFFFFF;
  --md-primary-container: #BEF0B2;  --md-on-primary-container: #002300;
  --md-secondary: #51634C;          --md-secondary-container: #D3E8CD;
  --md-on-secondary-container: #101F0A;
  --md-tertiary: #166969;           --md-tertiary-container: #A5F0EF;
  --md-error: #B3261E;              --md-error-container: #F9DEDC;
  --md-on-error-container: #410E0B;
  --md-warning: #8A4F00;            --md-warning-container: #FFDCC0;
  --md-on-warning-container: #2E1500;
  --md-surface: #F6FBF4;            --md-on-surface: #191D18;
  --md-on-surface-variant: #41493E; --md-outline: #707A6E;
  --md-outline-variant: #BFC9BC;    --md-scrim: #000000;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F0F5EE;
  --md-surface-container: #EBF0E9;
  --md-surface-container-high: #E5EAE3;
  --md-surface-container-highest: #DFE4DD;
  --md-inverse-surface: #2D312C;

  /* ── Elevação (reservada ao que flutua: modal, menu) ─────────────────── */
  --md-el1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-el2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-el3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);

  /* ── Movimento ───────────────────────────────────────────────────────── */
  --mola: cubic-bezier(0.2, 0, 0, 1);
  --mola-viva: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* ── Forma (escala MD3) ──────────────────────────────────────────────── */
  --canto-p: 12px;   /* medium — cartões pequenos, campos */
  --canto-m: 16px;   /* large — cartões, folhas */
  --canto-g: 28px;   /* extra-large — modais, destaque */
  --canto-total: 999px;

  /* ── Aliases históricos → papéis MD3 ─────────────────────────────────
     O CSS das telas nasceu com estes nomes; eles agora RESOLVEM nos papéis
     e nenhuma regra antiga fica órfã. Código novo usa --md-* direto. */
  --lupulo: var(--md-primary);
  --lupulo-forte: #23501E;              /* P30 — hover do primário */
  --sobre-lupulo: var(--md-on-primary);
  --lupulo-caixa: var(--md-primary-container);
  --sobre-lupulo-caixa: var(--md-on-primary-container);
  --malte: var(--md-warning);
  --malte-caixa: var(--md-warning-container);
  --sobre-malte-caixa: var(--md-on-warning-container);
  --linho: var(--md-surface);
  --linho-fundo: var(--md-surface);
  --linho-alto: var(--md-surface-container-lowest);
  --carvao: var(--md-on-surface);
  --fumaca: var(--md-on-surface-variant);
  --traco: var(--md-outline-variant);
  --sangue-caixa: var(--md-error-container);
  --superficie: var(--md-surface-container-lowest);
  --sobre-superficie-fraca: var(--md-on-surface-variant);

  --drawer-largura: 264px;
  /* Só ícones: 44px de alvo + respiro. Abaixo disso o ícone encosta na borda e
     o alvo de toque cai abaixo do mínimo de 48px que o balcão exige. */
  --drawer-colapsado: 76px;
  /* A largura EFETIVA, que o grid do shell consome. Trocar esta variável é o
     que move a coluna — sem ela, o colapso viraria uma segunda regra de grid
     e as duas discordariam no primeiro breakpoint novo. */
  --drawer-atual: var(--drawer-largura);

  /* ── A régua do shell ────────────────────────────────────────────────
     UMA medida para header, corpo e rodapé. Sem ela, cada faixa escolhia a
     própria largura e a página parecia três páginas empilhadas.

     ⚠️ O TETO GLOBAL DE 1600px FOI DERRUBADO EM 22/08/2026, e o motivo dele
     estava certo pela metade. O comentário antigo dizia: "linha de tabela com
     2400px de largura é ilegível — o olho perde a linha entre a primeira e a
     última coluna". Verdade, e continua valendo. O erro era a CONCLUSÃO:
     resolver isso jogando fora a tela.

     Medido em 2560×1400: o corpo ficava com 1600px e sobravam 962px de fundo
     vazio — 37% do monitor — enquanto o cartão "Trabalhando agora" quebrava um
     nome por linha por falta de espaço. A área existia; ela só não estava
     sendo oferecida ao conteúdo.

     A régua não some: ela deixa de ser TETO DA PÁGINA e vira MEDIDA DE
     LEITURA, aplicada onde há texto corrido ou linha de tabela. A área ganha é
     gasta em COLUNAS — mais cartões lado a lado, painéis paralelos —, que é
     como um app de trabalho usa monitor grande.

     ⚠️ Isso ficou SEIS DIAS como intenção escrita e nada mais: a régua virou
     uma variável que ninguém lia, e o texto continuou correndo a 345
     caracteres por linha. Hoje ela é `max-width` em `ch` nos blocos de texto e
     teto de trilha nas grades — CSS que age. */
  --shell-respiro: 1.25rem;
  --topo-altura: 60px;

  /* ⚠️ `--leitura` FOI REMOVIDA. Ela existia desde que o teto de 1600px caiu,
     documentada como "a medida de leitura aplicada ao bloco" — e nunca foi
     consumida por regra nenhuma. Uma variavel que so descreve uma intencao faz
     o arquivo parecer resolvido: quem revisasse leria a promessa e nao
     procuraria o texto de 345 caracteres por linha que continuava lá.

     A regua vive onde ela age: `max-width` em `ch` nos blocos de texto (ver
     `.ajuda`) e teto de trilha nas grades. */

  /* ── Densidade ───────────────────────────────────────────────────────
     Um par de botões no topo troca estes dois valores, e todo o respiro do
     shell deriva deles. Sem tokens, "compacto" viraria uma segunda folha de
     estilo inteira — e as duas divergiriam na primeira tela nova. */
  --densidade-respiro: 1.4rem;
  --densidade-gap: 1rem;
}

/* ⚠️ COMPACTO É PARA QUEM PASSA O DIA NA TELA, não para tela pequena. O
   operador de balcão quer alvo grande; quem fecha a folha quer ver trinta
   linhas sem rolar. São pessoas diferentes na mesma tela, e a escolha é
   guardada por aparelho. */
:root[data-densidade="compacta"] {
  --densidade-respiro: 0.7rem;
  --densidade-gap: 0.6rem;
}

* { box-sizing: border-box; }

/* ⚠️ SEM ISTO, `hidden` MENTE: qualquer regra com `display` (o drawer é flex)
   vence a folha do navegador e o elemento "escondido" continua na tela — foi
   exatamente como o drawer apareceu para quem nem tinha entrado. */
[hidden] { display: none !important; }

/* ⚠️ COLUNA DE ALTURA MÍNIMA CHEIA: sem isto o rodapé sobe e fica no meio da
   tela quando o conteúdo é curto — assinatura de produto flutuando no vazio
   parece bug, não acabamento. */
/* ⚠️ A PÁGINA NÃO ROLA — o miolo do card rola. `height` (e não `min-height`)
   com `overflow: hidden` é o que mantém header e rodapé sempre à vista: sem
   isso, uma lista de 31 dias empurra a moldura do produto para fora da tela.
   No compacto a regra continua valendo, porque o card ocupa a janela inteira. */
body {
  margin: 0;
  padding: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ AQUI É ONDE A ROLAGEM ACONTECE — e em lugar nenhum mais. O miolo rola
   dentro do card; header e rodapé ficam parados. `min-width: 0` porque sem ele
   uma tabela larga estica a coluna do grid e empurra o layout inteiro. */
#app {
  min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 1.4rem 1.6rem 1.8rem;
}

/* ⚠️ A CENTRALIZAÇÃO VERTICAL DA PORTA MORA NO PAI. `min-height: 100%` na
   própria tela não resolve: o `#app` é item de grid com `min-height: 0`, então
   a porcentagem não tem contra o que resolver e o bloco volta a encostar no
   topo. `safe` evita o outro defeito, o clássico do centramento — numa janela
   baixa, o conteúdo centrado transborda para CIMA e o topo fica inalcançável. */
/* ⚠️⚠️ `stretch` TAMBÉM NO ESTREITO — e o `safe center` daqui virou outra
   coisa, não desapareceu.
   
   Ele centralizava a PORTA INTEIRA dentro do `#app`, e isso passou a estar
   errado quando a moldura comum entrou: a barra é o primeiro item da porta,
   então centralizar a porta descia a barra junto — medido em 412px, 74px de
   branco entre o topo do cartão e uma moldura que nas outras duas telas
   encosta no topo. Era isso que fazia a tela do painel não se reconhecer
   como parte do mesmo produto.
   
   A centralização do MIOLO não se perdeu: ela desceu um nível, para a linha
   `1fr` de `.porta` (ver `grid-template-rows` lá embaixo), onde o `align-items:
   center` continua valendo. A barra fica na linha `auto`, no topo, e o
   formulário segue centrado no espaço que sobra — que era o objetivo do
   `center` original.
   
   E o defeito que o `safe` evitava também não volta, pelo motivo oposto:
   `stretch` nunca centraliza, então janela baixa transborda para BAIXO, com a
   rolagem do próprio `#app` — nunca para cima, que era o caso inalcançável. */
#app:has(> .porta:not([hidden])) {
  display: grid;
  align-content: stretch;
}

/* ⚠️ CADA TELA É UM CARD, como no protótipo: o miolo do Labumo é um cartão
   branco grande (raio 24, borda sutil) flutuando sobre o fundo verde-claro —
   é isso que dá o acabamento. A porta (login/senha/seletor) tem card próprio. */
/* ⚠️ A TELA NÃO É MAIS UM CARD — ela é o CONTEÚDO do card grande. Card dentro
   de card produz duas bordas concêntricas e dois raios brigando, que é o que
   fazia a página parecer empilhada. O respiro vem do `#app`. */
.tela {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ⚠️ O CARD É A ÁREA DE TRABALHO, e área de trabalho tem tamanho estável.
   Sem piso de altura, cada tela terminava onde o conteúdo acabasse: a Equipe
   com quatro linhas virava uma tira no alto da página, com a navegação ao lado
   mais alta que ela — e a próxima tela redesenhava tudo noutra altura. Com o
   piso, o card ocupa a janela e o conteúdo cresce para baixo quando precisa.
   (Só no desktop: no celular, altura mínima grande é rolagem inútil.) */


/* Cabeçalho de página do protótipo: eyebrow verde 10px + título 24px + data. */
.eyebrow {
  margin: 0 0 0.1rem;
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--md-primary);
}
.data-pagina { font-size: 0.82rem; color: var(--md-on-surface-variant); margin: 0.15rem 0 0; }

/* ⚠️ A PORTA É TELA PRÓPRIA, não o app com um formulário dentro: enquanto a
   entrada (ou a troca de senha, ou o seletor de empresa) estiver visível, não
   existe drawer nem recuo — a pessoa ainda não está no produto. */
/* A porta (entrada, troca de senha, seletor de empresa) é tela própria: o
   drawer nem existe ainda, e o `:has` do `.shell-corpo` já devolve uma coluna
   só — aqui basta o card estreito e centrado. */
/* ⚠️ SEM MOLDURA PRÓPRIA: o card grande já é a moldura. Com fundo e borda
   aqui, o formulário virava um cartão branco dentro de outro cartão branco —
   duas bordas concêntricas e dois raios brigando, medido em produção. */
#tela-senha, #tela-seletor {
  max-width: 26rem;
  margin: 6vh auto 0;
  padding: 1rem 0 2rem;
  background: transparent;
  border: none;
}

/* ═══ A PORTA DE ENTRADA ═══════════════════════════════════════════════
   ⚠️ ELA OCUPA O CARD INTEIRO, e isso é correção de um defeito real: com
   `margin: 6vh auto 0` e 26rem de largura, o formulário ficava colado no topo
   de um card de 1500px, com mais de mil pixels de branco embaixo. Centrado no
   eixo horizontal, sim — mas lido como abandonado, porque o olho compara o
   bloco com a moldura, não com o centro geométrico.

   A resposta não é esticar o formulário (campo de senha com 1400px de largura
   é pior) nem centralizar no vazio (um retângulo de 26rem boiando no meio de
   um deserto continua sendo um deserto). São duas colunas: identidade à
   esquerda, formulário à direita, ambas verticalmente centradas. O vazio
   deixa de existir porque há duas coisas para olhar, e cada uma tem trabalho. */
.porta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* ⚠️⚠️ `auto 1fr`, E NÃO DUAS LINHAS AUTOMÁTICAS — senão a MOLDURA estica.
     Medido em 1920×1080: `grid-template-rows` resolvia para `182px 645px` e a
     barra comum, que tem 54px de conteúdo, era pintada com 183px de altura.
     O efeito na tela era uma faixa verde de 130px pendurada acima do split,
     lida como erro de layout — e como a metade da identidade também é verde,
     a barra "derretia" nela e a moldura deixava de se reconhecer como a mesma
     das outras duas portas.
     A causa é discreta: `align-content` normal em grid é `stretch`, e linhas
     `auto` REPARTEM o espaço que sobra. Duas linhas auto num container mais
     alto que o conteúdo não ficam do tamanho do conteúdo — incham juntas. */
  grid-template-rows: auto 1fr;
  align-items: center;
  padding: 2rem 1.25rem;
  background: transparent;
  border: none;
  max-width: none;
  margin: 0;
}

/* ⚠️ A BARRA ATRAVESSA AS DUAS METADES. A porta é um grid, então um `header`
   solto viraria mais um item e se espremeria numa coluna — a moldura tem de
   correr de ponta a ponta, acima do split, como corre no coletor e na porta da
   frente. É o que faz as três telas iniciais se reconhecerem como o mesmo
   produto.

   `--porta-largura` não se aplica aqui: no painel a barra acompanha a largura
   do card, não a régua estreita do coletor. */
.porta-barra { grid-column: 1 / -1; }
.porta-barra .qf-barra-dentro { max-width: none; }
/* ⚠️ SPLIT DE ALTURA INTEIRA, e não duas colunas boiando no meio. A primeira
   correção centralizou o formulário e o vazio continuou lá: numa janela de
   2000px, um bloco de 1000×270 no meio de um card de 1550×1050 lê como
   abandono, por mais centrado que esteja. O que resolve não é mover o
   conteúdo, é dar TRABALHO ao espaço — o painel de identidade ocupa a
   metade esquerda de ponta a ponta, e o branco que sobra à direita passa a
   ser o respiro do formulário, não o resto do card.

   O `overflow: hidden` do card grande recorta o painel nos cantos
   arredondados, então ele encosta na borda sem estourar o raio. */
@media (min-width: 900px) {
  .porta {
    grid-template-columns: minmax(22rem, 0.95fr) minmax(24rem, 1.05fr);
    align-items: stretch;
    padding: 0;
    /* Anula o respiro do `#app`: o painel precisa encostar na borda do card. */
    margin: calc(var(--densidade-respiro) * -1)
            calc(var(--densidade-respiro) * -1.15)
            calc(var(--densidade-respiro) * -1.3);
  }
}

/* ⚠️⚠️ A PORTA TEM PROPORÇÃO PRÓPRIA — E A ÁREA DE TRABALHO NÃO. Confundir as
   duas foi meia-correção minha, no mesmo dia em que derrubei o teto de 1600px.

   Tirar o teto estava certo PARA O PAINEL LOGADO: ali o conteúdo é lista,
   tabela e cartão, e área extra vira coluna. A porta é outro bicho — é um
   OBJETO COMPOSTO, com duas metades que se equilibram. Sem teto, ela esticava
   de ponta a ponta: num monitor grande o painel verde virava um muro de
   1400px e o formulário ficava perdido no meio de um deserto branco, com o
   card sem respiro nenhum nas quatro bordas. Medido em 1528×1552 e visto pelo
   dono antes de mim.

   Aqui o teto volta, e com ele o respiro: o card se auto-proporciona, encosta
   em nada, e o vão em volta é o que diz "isto é uma porta, não uma mesa de
   trabalho". `min()` com `vh` é o que impede a porta de virar uma coluna
   altíssima numa janela estreita e alta — a proporção acompanha as duas
   medidas da janela, não só a largura. */
.shell-corpo:has(> #app > .porta:not([hidden])) {
  max-width: min(88rem, calc(100vw - 2 * var(--shell-respiro)));
  max-height: min(52rem, calc(100dvh - 8rem));
  margin: auto;
}

.porta-identidade {
  display: flex; flex-direction: column; gap: 1.75rem;
  justify-content: center;
  max-width: 34rem;
}
@media (min-width: 900px) {
  .porta-identidade {
    max-width: none;
    background: var(--md-primary);
    color: var(--md-on-primary);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    /* ⚠️ O RAIO VEM PARA CÁ porque quem recorta aqui NÃO é o card grande: o
       `#app` tem `overflow-y: auto`, e isso cria um contexto de recorte
       próprio — retangular, sem raio nenhum. O painel encostava na borda e
       saía com dois cantos vivos contra os cantos arredondados do card, que
       é o tipo de detalhe que faz a tela inteira parecer montada às pressas.
       O valor acompanha o `border-radius: 24px` do `.shell-corpo`. */
    /* ⚠️ SÓ O CANTO DE BAIXO. O de cima existia de quando a identidade
       encostava no topo do cartão; com a moldura comum acima dela, o arco
       superior passou a abrir um DENTE branco de 24px entre duas superfícies
       da mesma cor — visível em 1920×1080 como uma falha de recorte. */
    border-radius: 0 0 0 24px;
    /* Marca no alto, fundamento no meio, saída embaixo: o painel ganha
       estrutura em vez de um bloco boiando no centro de um retângulo verde. */
    justify-content: space-between;
    gap: 2.25rem;
  }
}
.porta-produto {
  margin: 0;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--md-on-primary);
}
.porta-marca { display: flex; flex-direction: column; }
.porta-marca .assinatura {
  margin: 0.4rem 0 0;
  color: var(--md-on-primary);
  opacity: 0.78;
}
.porta-marca .porta-conformidade { margin-top: 1.75rem; }

.porta-conformidade {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--md-on-primary);
  opacity: 0.9;
  text-wrap: pretty;
  max-width: 26rem;
}
.porta-conformidade strong { font-weight: 500; opacity: 1; }

/* ⚠️ O DESVIO PARA O COLETOR. Quem digita o endereço e cai aqui pode ser quem
   BATE PONTO — e o painel não é o lugar dele. Sem esta saída, a pessoa tenta
   a senha que não tem, erra, e conclui que o sistema não funciona. */
.porta-desvio {
  /* Vidro sobre o verde: um cartão claro aqui brigaria com o card branco do
     outro lado e criaria um terceiro plano que a tela não tem. */
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  align-items: flex-start;
  max-width: 24rem;
}
.porta-desvio-titulo {
  margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--md-on-primary);
}
.porta-desvio-texto {
  margin: 0; font-size: 0.82rem; color: var(--md-on-primary);
  opacity: 0.82; text-wrap: pretty;
}
/* ⚠️ 48px DE ALVO — este link é o desvio de QUEM VAI BATER PONTO e caiu no
   painel do gestor por engano. Medido a 412px: 99x34, e o comentário antigo
   ("alvo de toque sem virar botão concorrente") mostrava a intenção certa com
   a conta errada, porque `padding: 0.4rem 0` sobre uma linha de ~20px dá 34.

   Errar aqui não é atrito: é a pessoa não achar o caminho para registrar a
   jornada. `inline-flex` com `min-height` cresce o alvo sem pintar fundo nem
   borda, então ele continua um link — não vira botão concorrente do "Entrar",
   que era a preocupação legítima de quem escreveu a regra. */
.porta-desvio-link {
  display: inline-flex; align-items: center; min-height: 48px;
  margin-top: 0.5rem;
  font-size: 0.88rem; font-weight: 500;
  color: var(--md-on-primary); text-decoration: underline;
  text-underline-offset: 0.25em;
}
.porta-desvio-link:hover, .porta-desvio-link:focus-visible { opacity: 0.85; }

/* ⚠️ NO CELULAR SOME A MARCA, NUNCA O DESVIO. A primeira versão escondia a
   coluna inteira no estreito — e apagava justamente o que mais importa ali:
   quem bate ponto usa o TELEFONE, e é essa pessoa que cai no painel por
   engano. O nome do produto e a nota da portaria ela já tem no rodapé; o
   caminho para o coletor, não tinha em lugar nenhum.

   Some, então, o que é redundante; fica o que resolve. E fica DEPOIS do
   formulário: quem chegou aqui certo entra primeiro, e só quem não achou o
   que queria continua descendo.

   ⚠️ E O BLOCO MORA AQUI, DEPOIS das regras base — não junto do resto do
   layout. Media query não ganha especificidade: posta antes, as cores do
   painel verde (texto branco, fundo translúcido) a sobrescreviam, e o
   desvio ficava branco sobre branco. Presente no DOM, medível no
   `getBoundingClientRect`, invisível na tela. */
@media (max-width: 899px) {
  .porta { gap: 1.5rem; }
  /* ⚠️ A BARRA ENCOSTA NA BORDA DO CARTÃO TAMBÉM NO ESTREITO. O bloco de
     900px anula o respiro do `#app` com margem negativa; aqui isso não
     existia, e a moldura ficava BOIANDO dentro do cartão branco — 47px de
     branco de cada lado e 101px acima. Foi o que o dono viu em 412px e
     descreveu como "parecem 3 aplicativos diferentes": na porta da frente e no
     coletor a barra corre de ponta a ponta no topo, aqui ela virava um
     retângulo verde solto no meio da tela.
     A margem cancela os DOIS respiros (o do `#app` e o próprio da porta); o
     `overflow: hidden` do `.shell-corpo` recorta os cantos arredondados. */
  .porta-barra {
    margin: calc(var(--densidade-respiro) * -1 - 2rem)
            calc(var(--densidade-respiro) * -1.15 - 1.25rem)
            0;
  }
  .porta-identidade { order: 2; align-items: center; }
  .porta-marca { display: none; }
  .porta-formulario { order: 1; }
  .porta-desvio {
    background: var(--md-surface-container);
    border-color: var(--md-outline-variant);
    color: var(--md-on-surface);
    width: 100%; max-width: 26rem;
  }
  .porta-desvio-titulo { color: var(--md-on-surface); }
  .porta-desvio-texto { color: var(--md-on-surface-variant); opacity: 1; }
  .porta-desvio-link { color: var(--md-primary); }
}

.porta-formulario {
  width: 100%;
  max-width: 26rem;
  justify-self: center;
  align-self: center;
}
@media (min-width: 900px) {
  .porta-formulario {
    justify-self: center;
    padding: 2rem clamp(1.5rem, 3vw, 3rem);
  }
}
#tela-entrada h1 { font-size: 2rem; margin-bottom: 0.25rem; }
.porta-formulario form { margin-top: 1.5rem; }
#tela-senha h2, #tela-seletor h2 { font-size: 1.35rem; }

/* ── Tipografia — escala MD3 (500 no máximo; ênfase por escala e cor) ──── */
h1 {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.25rem); /* display-small */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}
h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem; /* 24px/500 — a medida do título de página do protótipo */
  font-weight: 500;
  line-height: 1.25;
}
.cabecalho-tela h2 { margin-bottom: 0; }
h3 { margin: 0; font-size: 0.95rem; font-weight: 500; } /* title-medium */

/* O "eyebrow": minúsculo, caixa alta, tracking largo. O contraponto do display.
 *
 * ⚠️ `.empresa` SAIU DESTE GRUPO. Ela estava aqui e também na barra superior,
 * com `text-transform` opostos — e qual vencia dependia da ORDEM no arquivo,
 * que é o jeito mais fácil de um estilo voltar sozinho numa refatoração. Nome
 * próprio não é rótulo: rótulo classifica ("JORNADA", "DE", "ATÉ"), nome
 * identifica. */
.rotulo, .dia-titulo, .detalhe {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fumaca);
  margin: 0;
}
.assinatura { font-size: 0.75rem; letter-spacing: 0.06em; opacity: 0.85; }

/* Subtítulo de tela do protótipo: sentence case, corpo pequeno, cor fraca.
   Diferente do .rotulo (que CLASSIFICA em caixa alta), o subtítulo EXPLICA —
   e explicação em uppercase gritava mais que o título. */
.subtitulo {
  font-size: 0.84rem; font-weight: 400;
  color: var(--md-on-surface-variant);
  margin: 0.15rem 0 0; max-width: 60ch;
}
.explicacao { color: var(--fumaca); font-size: 0.95rem; margin: 0 0 1.25rem; max-width: 46ch; }
/* Empty state do protótipo: caixa de borda tracejada, texto centralizado —
   um convite a agir, não um vão em branco. */
.vazio {
  color: var(--fumaca); font-size: 0.9rem;
  border: 1.5px dashed var(--md-outline-variant); border-radius: var(--canto-p);
  padding: 1.1rem 1rem; text-align: center;
}
.dica { color: var(--fumaca); font-size: 0.8rem; margin: 0.4rem 0 0; }
.destaque { font-weight: 500; margin: 0; letter-spacing: -0.01em; }

/* Todo número conferível contra outro documento vai em Roboto Mono. */
.mono, .hora, .nsr, .relogio, .kpi-valor {
  font-family: "Roboto Mono", ui-monospace, "Cascadia Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ═══ O DRAWER — o CARD flutuante do protótipo ══════════════════════════
   A sidebar do Labumo não é um painel colado: é um cartão branco com raio
   grande, margem em volta e borda sutil, flutuando sobre o fundo verde-claro.
   Item de navegação: 42px, raio full, 15px/500, gap 10 — medidas tomadas do
   protótipo por getComputedStyle. Em janela compacta vira modal com scrim. */
/* ⚠️ O TOPO DO DRAWER COMEÇA ABAIXO DO HEADER. Com `top: 12px` ele passava por
   baixo da barra (que tem z-index maior) e o PRIMEIRO item da navegação — a
   Visão geral — ficava escondido no celular: um item de menu invisível é um
   item que não existe. Manter o header à vista também dá saída: o botão que
   fechou o menu continua no lugar. */
.drawer {
  position: fixed;
  inset: calc(var(--topo-altura) + 8px) auto 12px 12px; z-index: 30;
  width: var(--drawer-largura);
  display: flex; flex-direction: column;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  padding: 0.9rem 0.7rem;
  overflow-y: auto;
  transition: transform 300ms var(--mola-viva);
}
@media (max-width: 999px) {
  /* ⚠️ FORA DA TELA NAO E FORA DA ORDEM DE FOCO. Com o menu fechado, Tab
     percorria os 14 botoes do drawer — que estao a -110% da viewport: o foco
     sumia da tela por quatorze paradas e a pessoa nao tinha como saber onde
     estava. `visibility: hidden` os tira da ordem; o atraso na transicao deixa
     a animacao de saida terminar antes. */
  .drawer { transform: translateX(-110%); box-shadow: none; }
  .drawer:not(.aberto) { visibility: hidden; }
  .drawer { transition: transform 300ms var(--mola-viva), visibility 0s 300ms; }
  .drawer.aberto { transition: transform 300ms var(--mola-viva); }
  .drawer.aberto { transform: translateX(0); box-shadow: var(--md-el2); }
}

/* ⚠️ NO DESKTOP O DRAWER DEIXA DE FLUTUAR e vira COLUNA do contêiner: preso
   com `position: fixed`, ele ignorava a régua do conteúdo, e o card do miolo
   precisava de uma margem-esquerda calculada para não passar por baixo dele —
   dois sistemas de medida para a mesma página, que discordavam a cada
   resolução. Como item do grid, a coluna e o card nascem juntos por
   construção, e o `sticky` mantém a navegação à vista na rolagem. */
/* ⚠️ NO DESKTOP O DRAWER É COLUNA DO CARD GRANDE — nem flutua, nem tem card
   próprio: a divisória vertical basta. Enquanto ele era um cartão separado, a
   página tinha três blocos brancos disputando o mesmo plano, e o olho não
   sabia qual era a área de trabalho. */
@media (min-width: 1000px) {
  .drawer {
    position: static; inset: auto; transform: none;
    border: none; border-right: 1px solid var(--md-outline-variant);
    border-radius: 0; box-shadow: none;
    min-height: 0; max-height: none; height: 100%;
    background: transparent;
  }
}

.marca {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.25rem 0.5rem 0.9rem;
  border-bottom: 1px solid var(--md-outline-variant);
  margin-bottom: 0.6rem;
}
.logo-quadro {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.marca-texto { min-width: 0; flex: 1; line-height: 1.25; }
.marca strong { display: block; font-size: 1.05rem; font-weight: 500; }
.marca .assinatura {
  display: block; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; opacity: 1;
  color: var(--md-on-surface-variant);
}
.marca .empresa {
  display: block; margin-top: 0.1rem; font-size: 0.78rem; font-weight: 500;
  color: var(--md-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.abas-dentro { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }

/* Configurações mora no rodapé do drawer, como no protótipo: parametrização
   não é rotina do turno — separada do fluxo diário por uma régua. */
.nav-rodape {
  border-top: 1px solid var(--md-outline-variant);
  margin-top: 0.6rem; padding-top: 0.6rem;
}

/* ⚠️ 48px TAMBEM AQUI — e este era o mais caro dos seis: o menu e a UNICA
   navegacao que existe no telefone, e cada item tinha 42px. Seis pixels abaixo
   da regua que o proprio CSS documenta, na lista que se percorre com o polegar
   para chegar a qualquer tela. */
.aba {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 12px;
  border: none; border-radius: var(--canto-total);
  background: transparent; color: var(--md-on-surface-variant);
  font: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer;
  text-align: left;
  transition: background 160ms var(--mola), color 160ms var(--mola);
}
.aba .msr { font-size: 20px; }
.aba:hover { background: var(--md-surface-container-low); }
.aba[aria-current="page"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* ⚠️ O ITEM ATIVO CARREGA A COR DA NATUREZA, e não só o traço da borda.
   
   O realce era sempre o mesmo `secondary-container` — um verde neutro — em
   qualquer módulo. Quem estava na Jornada e quem estava em Tarefas via
   exatamente a mesma marcação, e o único sinal de que uma delas produz arquivo
   para a fiscalização era um traço de 3px na borda esquerda. O realce é a coisa
   mais visível do menu: é ELE que precisa dizer onde a pessoa está.
   
   Tons FRACOS de propósito (`-container`), não os cheios: o item ativo é fundo
   atrás de texto, e o par container/on-container do MD3 existe justamente para
   isso — mantém o contraste do rótulo sem gritar mais que o conteúdo. */
.aba[data-natureza="clt"][aria-current="page"] {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.aba[data-natureza="freela"][aria-current="page"] {
  background: var(--md-warning-container);
  color: var(--sobre-malte-caixa);
}

/* O contador dentro de um item ativo precisa continuar se destacando DO
   realce, e não some junto quando os dois usam a mesma família de cor. */
.aba[data-natureza="freela"][aria-current="page"] .selo {
  background: var(--md-on-warning-container, #2B1700);
  color: var(--md-warning-container);
}
.selo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; margin-left: auto;
  border-radius: var(--canto-total); background: var(--md-warning); color: #FFF;
  font-size: 0.7rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.aba[aria-current="page"] .selo { background: var(--md-warning-container); color: var(--md-on-warning-container); }

/* Rodapé do drawer: quem está agindo — cada correção vai para a auditoria
   com este nome, e num tablet de balcão isso é segurança, não cortesia. */
.drawer-rodape {
  border-top: 1px solid var(--md-outline-variant);
  padding: 0.7rem 0.4rem 0.1rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.drawer-rodape .avatar { width: 36px; height: 36px; font-size: 0.78rem; }
.quem { min-width: 0; flex: 1; line-height: 1.3; }
.pessoa-nome, .empresa {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pessoa-nome { font-size: 0.88rem; font-weight: 500; }
.drawer-rodape .empresa { font-size: 0.72rem; color: var(--md-on-surface-variant); }
.drawer-rodape .texto {
  border: 1px solid var(--md-outline-variant); min-height: 48px; min-width: 48px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}

/* Scrim do drawer modal (janela compacta). */
.scrim {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--mola);
}
.scrim.aberto { opacity: 1; pointer-events: auto; }

/* ═══ O HEADER — a barra que segura o produto ═══════════════════════════
   Barra sólida na cor da marca, largura total, fixa no topo. O miolo dela usa
   a MESMA régua do corpo (`--shell-largura`), então marca, navegação e card
   se alinham na mesma vertical em qualquer resolução. */
/* ⚠️ SEM FUNDO PRÓPRIO E SEM SOMBRA: o header vive SOBRE o campo verde, junto
   com o card. A barra sólida que existia aqui cortava a página numa faixa e
   competia com o card grande — duas molduras concorrentes na mesma tela. */
.topo {
  flex: none; z-index: 40;
  background: transparent; color: var(--md-on-surface);
}
.topo-dentro {
  /* A MESMA largura efetiva do card, para a marca nascer na vertical da
     navegação e a conta terminar na vertical da borda direita dele. */
  /* A MESMA expressão do corpo — a régua é compartilhada de propósito, e
     mudar só um dos três desalinharia marca, conteúdo e assinatura. */
  max-width: calc(100vw - 2 * var(--shell-respiro));
  margin: 0 auto;
  min-height: var(--topo-altura);
  padding: 0 0.75rem;
  display: flex; align-items: center; gap: 0.9rem;
}
.topo .logo-quadro {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  width: 34px; height: 34px;
}
.topo .logo-quadro .msr { font-size: 20px; }
.topo-marca { min-width: 0; line-height: 1.2; }
/* ⚠️ Sem `ellipsis`, o aperto vira SOBREPOSICAO em vez de reticencias: medido
   em 412px, a caixa da marca ficava com largura ZERO e o texto pintava por cima
   do nome da empresa e do relogio. */
.topo-marca strong {
  display: block; font-size: 1rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-marca .empresa {
  display: block; font-size: 0.74rem; color: var(--md-on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#abrir-menu { display: none; }
@media (max-width: 999px) {
  #abrir-menu {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; min-width: 48px; border: none; background: none;
    border-radius: var(--canto-total); color: var(--md-on-surface);
  }
  #abrir-menu:hover { background: var(--md-surface-container-high); }
  /* Em janela compacta a marca cede o lugar: relógio e batida é que precisam
     caber junto do menu. */
  .topo .logo-quadro { display: none; }
  .topo-marca strong { font-size: 0.9rem; }
}
/* ⚠️ O HEADER TRANSBORDAVA 9px NO CELULAR, EM TODAS AS TELAS. Medido em 412px:
   sete filhos com 0.9rem de gap (86px só de vão) somavam 403px numa faixa de
   372 — o bloco da conta saía do cartão e o botão de sair encostava na borda
   direita da tela. `flex-shrink: 1` não ajuda quem tem `min-width: auto`:
   botão e avatar não encolhem abaixo do próprio conteúdo. O que cabe cortar é
   o VÃO, não o alvo de toque. */
@media (max-width: 47.99rem) {
  .topo-dentro { gap: 0.4rem; padding: 0 0.5rem; }
  .topo-conta { padding-left: 0.35rem; margin-left: 0; }
}

/* O relógio empurra as ações para a direita e é o âncora do lado oposto à
   marca — tabular para não dançar a cada segundo. */
.relogio {
  margin-left: auto; font-size: 1.25rem; font-weight: 600;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
/* Pill do protótipo, agora em contraste INVERSO: sobre a barra da marca, o
   botão sólido some — aqui ele é claro sobre o verde. */
.bater-ponto {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1rem;
  border: none; border-radius: var(--canto-total);
  background: var(--md-primary); color: var(--md-on-primary);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.bater-ponto .msr { font-size: 20px; }
.bater-ponto:hover { background: var(--lupulo-forte); box-shadow: var(--md-el1); }
@media (max-width: 37.49rem) {
  /* O rótulo sai; o ícone e o alvo de 48px ficam. */
  .bater-ponto { padding: 0 0.7rem; font-size: 0; gap: 0; }
  .bater-ponto .msr { font-size: 22px; }
}

/* ⚠️ QUEM ESTÁ LOGADO É INFORMAÇÃO DE SEGURANÇA, não cortesia: cada ação vai
   para a auditoria com este nome, e num tablet de balcão saber em nome de quem
   se está agindo evita aprovar na sessão alheia. Por isso sai do rodapé da
   navegação e sobe para o canto direito, onde se procura conta. */
.topo-conta {
  display: flex; align-items: center; gap: 0.5rem;
  padding-left: 0.9rem; margin-left: 0.4rem;
  border-left: 1px solid var(--md-outline-variant);
}
.topo-conta .quem { line-height: 1.2; min-width: 0; }
.topo-conta .pessoa-nome {
  display: block; font-size: 0.82rem; font-weight: 500;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-conta .empresa { font-size: 0.68rem; color: var(--md-on-surface-variant); }
.topo-conta .avatar { width: 34px; height: 34px; font-size: 0.74rem; }
@media (max-width: 62.49rem) {
  /* No compacto sobra o avatar e o sair — nome e papel viram ruído. */
  .topo-conta .quem { display: none; }
  .topo-conta { padding-left: 0.5rem; margin-left: 0.2rem; }
}

/* ═══ O CORPO — navegação e conteúdo na mesma régua ═════════════════════ */
/* ⚠️ `width: 100%` NÃO É REDUNDANTE AQUI. O `body` é flex-column, e margem
   `auto` no eixo cruzado ANULA o `stretch` do flex: sem a largura explícita o
   corpo encolhe para caber no conteúdo (medido: 1133px contra os 1600px do
   header e do rodapé) e a página volta a parecer três faixas desalinhadas —
   exatamente o defeito que este shell existe para fechar. */
/* ⚠️ O FUNDO É A TELA INTEIRA, e o card está UM DEGRAU ABAIXO dele.
   A sombra interna nas quatro bordas é o que dá essa leitura: o campo verde
   afunda na moldura do monitor e o card grande se apoia lá dentro. Header e
   rodapé ficam SOBRE esse campo, sem fundo próprio — a barra separada que
   existia aqui cortava a página em faixas e brigava com o card. */
.shell-fundo {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  /* ⚠️ TOKEN PRÓPRIO, e NÃO `--md-surface` direto. O fundo muda com o
     módulo (CLT × prestador × mista); as SUPERFÍCIES DOS CARTÕES não — elas
     são do tema, e mexer nelas por natureza seria trocar a identidade do
     produto a cada clique. Redefinir `--md-surface` faria exatamente isso:
     todo cartão, campo e menu que herda o token mudaria junto. */
  background: var(--fundo-do-modulo, var(--md-surface));
  box-shadow:
    inset 0 10px 16px -10px rgba(25, 29, 24, .28),
    inset 0 -10px 16px -10px rgba(25, 29, 24, .22),
    inset 10px 0 16px -10px rgba(25, 29, 24, .18),
    inset -10px 0 16px -10px rgba(25, 29, 24, .18);
}

/* ⚠️ O CARD GRANDE — a área de trabalho inteira, ajustada à JANELA.
   Navegação, conteúdo e os cards internos moram todos aqui dentro; o que rola
   é o MIOLO, nunca a página. Sem isso, uma lista de 31 dias empurra header e
   rodapé para fora da tela, e a moldura do produto some justamente na hora em
   que a pessoa precisa dela para navegar. */
.shell-corpo {
  flex: 1; min-height: 0;
  width: 100%;
  /* ⚠️ SEM TETO. O corpo é a área de trabalho e ocupa a janela inteira, menos
     o respiro que faz o "degrau" do fundo aparecer. O teto de 1600px que
     morava aqui deixava 962px de fundo vazio num monitor de 2560 — 37% da
     tela — enquanto os cartões dentro dele quebravam texto por falta de
     espaço. A régua de leitura continua existindo, mas por BLOCO — hoje como
     `max-width` em `ch` nos textos e teto de trilha nas grades, que é onde ela
     de fato protege o olho. */
  max-width: calc(100vw - 2 * var(--shell-respiro));
  /* Mais respiro em cima que embaixo: espaço igual faz o bloco parecer
     escorregar para baixo — o olho lê o vão superior como menor do que é. */
  margin: 0.35rem auto 0.9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(25, 29, 24, .08), 0 14px 32px -12px rgba(25, 29, 24, .28);
}
/* Só há duas colunas quando existe navegação: na porta (entrada, troca de
   senha, seletor de empresa) o drawer está `hidden` e o miolo fica sozinho. */
@media (min-width: 1000px) {
  .shell-corpo:has(> .drawer:not([hidden])) {
    /* `--drawer-atual` e não `--drawer-largura`: é esta variável que o colapso
       troca, e mantê-la como fonte única impede que a coluna e o próprio
       drawer discordem de largura durante a transição. */
    grid-template-columns: var(--drawer-atual) minmax(0, 1fr);
    transition: grid-template-columns 220ms var(--mola-viva);
  }
}

/* ═══ O MENU COLAPSADO ═════════════════════════════════════════════════
   ⚠️ COLAPSAR NÃO É ESCONDER. O drawer some do caminho mas continua sendo
   navegação: os ícones ficam, o item ativo continua marcado, e o rótulo vira
   `title` — quem não decorou os ícones ainda alcança o nome. Esconder de vez
   deixaria o gestor sem saber onde está, e a única saída seria reabrir o menu
   para descobrir.

   ⚠️ E O RÓTULO NÃO SAI DO DOM. `display: none` no texto o tiraria também do
   leitor de tela, e a navegação inteira viraria uma fileira de botões sem
   nome. Ele encolhe visualmente e permanece acessível. */
:root[data-menu="colapsado"] { --drawer-atual: var(--drawer-colapsado); }

@media (min-width: 1000px) {
  :root[data-menu="colapsado"] .drawer .aba {
    justify-content: center;
    padding-left: 0; padding-right: 0;
    gap: 0;
  }
  :root[data-menu="colapsado"] .drawer .aba > :not(.msr):not(.selo) {
    /* Some da vista, fica para o leitor de tela. */
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  /* O contador (pedidos pendentes, não-conformidades) é a única coisa que NÃO
     pode sumir junto: ele é o motivo de alguém olhar para o menu. Vira um
     ponto sobre o ícone. */
  :root[data-menu="colapsado"] .drawer .aba .selo {
    position: absolute; top: 6px; right: 14px;
    min-width: 18px; height: 18px; padding: 0 4px;
    font-size: 0.62rem; line-height: 18px;
  }
  :root[data-menu="colapsado"] .drawer .aba { position: relative; }
  /* O botão de recolher vira o de expandir, e o ícone acompanha o sentido. */
  :root[data-menu="colapsado"] .colapsar-menu { justify-content: center; padding: 0; }
  /* ⚠️ O RÓTULO DELE TAMBÉM SOME — e ficou de fora na primeira tentativa
     porque o seletor mirava `.aba`, e este botão não é uma aba. Medido em
     tela: o menu encolheu e a palavra "Recolher" continuou lá, esticando o
     painel. Irmão esquecido clássico. */
  :root[data-menu="colapsado"] .colapsar-menu .aba-rotulo {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* ⚠️⚠️ A LARGURA DO PRÓPRIO DRAWER PRECISA CEDER, e não só a coluna do grid.
     O `.drawer` carrega `width: var(--drawer-largura)` desde a versão em que
     ele flutuava com `position: fixed`. Como item do grid, esse valor fixo
     vence a trilha de 76px: medido em tela, os ícones encolheram, o painel
     continuou com 264px e passou POR CIMA do conteúdo, que ficou cortado à
     esquerda. Quem manda na largura aqui é a coluna. */
  .shell-corpo > .drawer { width: auto; }
}

/* ⚠️ O MENU É UM PAINEL SEPARADO, com moldura própria — e não uma coluna
   colada ao conteúdo. Enquanto os dois dividiam o mesmo cartão com uma
   divisória de 1px, a navegação e a área de trabalho pareciam a mesma
   superfície: nas quebras de layout o olho não sabia onde uma terminava e a
   outra começava, e o menu recolhido não tinha o que recolher visualmente.
   Separado, o colapso tem sentido físico — um painel sai, o outro cresce. */
@media (min-width: 1000px) {
  .shell-corpo:has(> .drawer:not([hidden])) {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    gap: 0.7rem;
  }
  .shell-corpo > .drawer,
  .shell-corpo > #app {
    background: var(--md-surface-container-lowest);
    border: 1px solid var(--md-outline-variant);
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(25, 29, 24, .07), 0 12px 28px -14px rgba(25, 29, 24, .26);
    overflow: hidden;
  }
  .shell-corpo > .drawer {
    border-right: 1px solid var(--md-outline-variant);
    padding: 0.7rem 0.55rem;
    overflow-y: auto;
  }
  .shell-corpo > #app { overflow-y: auto; }
}

/* O botão de colapsar, no alto do menu. */
.colapsar-menu {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; min-height: 48px;
  margin-bottom: 0.35rem; padding: 0 0.85rem;
  background: none; border: none; border-radius: var(--canto-total, 999px);
  color: var(--md-on-surface-variant);
  font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: background 140ms ease;
}
.colapsar-menu:hover { background: var(--md-surface-container-low); }
.colapsar-menu .msr { font-size: 20px; }
/* ⚠️ SÓ NO DESKTOP. Em janela compacta o drawer já é modal sobre o scrim e
   sai inteiro da tela — um botão de "recolher" ali competiria com o de fechar
   e deixaria dois jeitos de fazer a mesma coisa, com resultados diferentes. */
@media (max-width: 999px) {
  .colapsar-menu { display: none; }
}

/* ═══ O RODAPÉ — assinatura do produto ═════════════════════════════════ */
/* Sobre o campo verde, como o header — sem faixa própria. */
.rodape-app {
  flex: none;
  background: transparent;
}
.rodape-dentro {
  /* A MESMA expressão do corpo — a régua é compartilhada de propósito, e
     mudar só um dos três desalinharia marca, conteúdo e assinatura. */
  max-width: calc(100vw - 2 * var(--shell-respiro));
  margin: 0 auto;
  padding: 0.15rem 0.75rem 0.7rem;
  display: flex; align-items: baseline; gap: 0.35rem 1.2rem; flex-wrap: wrap;
}
.rodape-marca {
  margin: 0; font-size: 0.85rem; font-weight: 500; color: var(--md-primary);
}
.rodape-marca span { font-weight: 400; color: var(--md-on-surface-variant); }
.rodape-nota {
  margin: 0; font-size: 0.72rem; color: var(--md-on-surface-variant);
  margin-left: auto; text-align: right;
}
@media (max-width: 52.49rem) {
  .rodape-nota { margin-left: 0; text-align: left; }
  /* ⚠️ No celular a altura é o recurso escasso: a segunda frase sai do rodapé
     porque ela já aparece DENTRO de cada documento que o sistema emite. A
     norma fica — é o que identifica o produto. */
  .rodape-extra { display: none; }
  .rodape-dentro { gap: 0.1rem 0.8rem; }
  .rodape-marca { font-size: 0.78rem; }
  .rodape-nota { font-size: 0.66rem; }
}

/* ── Campos (spec MD3: raio 12, outline; foco = primary 2px) ───────────── */
/* Label de campo em sentence case (auditoria pixel: o protótipo não grita
   nos formulários — "Razão social", não "RAZÃO SOCIAL"). Uppercase fica só
   nos classificadores: .rotulo, .kpi-rotulo, .eyebrow. */
label {
  display: block; margin: 1.1rem 0 0.35rem;
  font-size: 0.78rem; font-weight: 500;
  color: var(--md-on-surface-variant);
}
/* Surface tint verde-claríssimo nos campos (auditoria pixel) — o protótipo
   não usa branco puro em input; a borda fica no outline-variant. */
input, textarea, select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-p);
  background: #F3F8F0;
  color: var(--md-on-surface); font: inherit;
  transition: border-color 160ms var(--mola), box-shadow 160ms var(--mola);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}
/* ⚠️ `input:focus` (0,1,1) VENCE `:focus-visible` (0,1,0) — e por isso o
   `outline: none` acima apagava o anel de foco global também em CAIXA DE
   MARCAR e em rádio, onde `border-color` não faz nada (quem desenha é o widget
   do navegador) e o `box-shadow` vira um halo de 1px em volta de 13px.

   O efeito não aparece no toque, porque `:focus-visible` não casa com foco por
   ponteiro. Aparece no tablet com teclado acoplado — que é o mesmo aparelho do
   gestor: percorrer as 42 caixas por Tab não mostrava onde o cursor estava.
   Campo de texto continua com a borda primary; caixa de marcar recupera o anel. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid var(--lupulo); outline-offset: 2px;
}
textarea { min-height: 5.5rem; resize: vertical; }

/* ── Botões (spec MD3: altura 40, raio full, label-large 500) ──────────── */
/* ⚠️ 48px NA BASE, E O BREAKPOINT ESTAVA INVERTIDO.
   `@media (min-width: 37.5rem)` dava padding maior aos primarios, entao o MESMO
   botao media 48,3px no tablet e 40px no telefone: alvo MENOR justamente onde
   se usa o dedo, e abaixo da regua de 48px que o CSS do coletor declara. */
button { min-height: 48px; font: inherit; cursor: pointer; }
.primario {
  width: 100%; margin-top: 1.25rem; padding: 0.55rem 1.5rem;
  border: none; border-radius: var(--canto-total);
  background: var(--md-primary); color: var(--md-on-primary);
  font-weight: 500; font-size: 0.88rem; letter-spacing: 0.01em;
  transition: background 160ms var(--mola), box-shadow 160ms var(--mola);
}
.primario:hover { background: var(--lupulo-forte); box-shadow: var(--md-el1); }
.secundario {
  padding: 0.45rem 1.1rem; border: 1px solid var(--md-outline);
  border-radius: var(--canto-total); background: transparent;
  color: var(--md-primary);
  font-weight: 500; font-size: 0.88rem;
  transition: background 160ms var(--mola), border-color 160ms var(--mola);
}
.secundario:hover { background: var(--md-primary-container); border-color: var(--md-primary); }
.perigo {
  padding: 0.55rem 1.3rem; border: none; border-radius: var(--canto-total);
  background: var(--md-error); color: #FFF; font-weight: 500; font-size: 0.88rem;
}
.perigo:hover { box-shadow: var(--md-el1); }
.texto {
  border: none; background: none; padding: 0.5rem 0.75rem;
  border-radius: var(--canto-total);
  color: var(--md-primary);
  font-weight: 500; font-size: 0.85rem;
}
.texto:hover { background: var(--md-primary-container); }

/* Botão-ícone M3: círculo de 48px com contorno 1px.
   ⚠️ Era 40px, e o ícone dentro dele saía espremido a ~11px por uma colisão de
   especificidade — o botão "Ficha" da lista de equipe, que é a porta mais usada
   do painel, tinha um glifo de 11px num alvo abaixo da régua. */
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-height: 48px; padding: 0;
  border: 1px solid var(--md-outline-variant); border-radius: 50%;
  background: transparent; color: var(--md-on-surface-variant); cursor: pointer;
  transition: background 160ms var(--mola);
}
.botao-icone .msr { font-size: 24px; }
.botao-icone:hover { background: var(--md-surface-container-low); }

/* Switch M3 (toggle de acesso): trilho 44×24, bola que corre; ligado =
   primary. É botão de verdade — role=switch + aria-checked no JS. */
.switch {
  position: relative; width: 44px; height: 24px; min-height: 24px;
  /* A área de toque, não o trilho: ver `.switch::after` logo abaixo. */
  padding: 0; border: 2px solid var(--md-outline); border-radius: var(--canto-total);
  background: var(--md-surface-container-high); cursor: pointer;
  transition: background 200ms var(--mola), border-color 200ms var(--mola);
}
/* ⚠️ 48px DE ALVO SEM MUDAR O TRILHO. O switch de acesso da lista de equipe
   tinha 24px de altura clicável — metade da régua da casa — num controle que
   BLOQUEIA o acesso de alguém. Errar o alvo aqui tira o acesso da pessoa
   errada, e o `<li>` em volta abre a ficha: o dedo que escorrega navega em vez
   de alternar, o que ao menos é reversível — mas o inverso não é. */
/* ⚠️ O `inset` RESOLVE CONTRA O PADDING BOX, e era essa a conta que faltava.
   O botão é `border-box` com `border: 2px`, então o padding box mede 40x20 —
   não 44x24. Com `-12px -2px` o alvo saía 44x48... na teoria; medido no
   Chrome a 412px com `elementFromPoint`, ele dava 44x44. Faltavam 4px em cada
   eixo, num controle que BLOQUEIA o acesso de alguém.

   Pior que o defeito: o guardrail de 48px (`contrato_de_erro.test.mjs`)
   ISENTAVA o switch da varredura justamente citando este pseudo-elemento como
   prova de que a área já era 48. A defesa apontava para uma correção que não
   fechava a conta — falso verde perfeito, do tipo que só o navegador desmente.

   ⚠️ E CRESCE SÓ PARA BAIXO. A primeira versão desta correção usava
   `-14px -4px`, simétrico no vertical — e fechava os 48px roubando 13px ACIMA
   do trilho. Medido: aquele espaço pertence ao `<li>` do cartão, que abre a
   ficha da pessoa. O dedo que escorregava para cima passava a BLOQUEAR o
   acesso em vez de navegar, e é exatamente a inversão contra a qual o
   parágrafo acima adverte: errar para o lado da ficha é reversível, errar para
   o lado do bloqueio não é.

   `-2px` no topo cancela apenas a borda, então o alvo não sobe um pixel além
   do trilho. Os 48px vêm de baixo, onde a linha tem 38px de folga e o vizinho
   (`.acoes-linha`) não é alvo — Editar e Ficha ficam ao LADO, não embaixo.

   Conta, a partir do padding box de 40x20:
     largura 40 + 4 + 4 = 48    altura 20 + 2 + 26 = 48    acima do trilho: 0 */
.switch::after {
  content: ""; position: absolute; inset: -2px -4px -26px;
}

.switch-bola {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--md-outline);
  transition: transform 200ms var(--mola-viva), background 200ms var(--mola);
}
.switch.ligado { background: var(--md-primary); border-color: var(--md-primary); }
.switch.ligado .switch-bola { transform: translateX(20px); background: var(--md-on-primary); }
/* A própria linha: o switch aparece (estado é informação) mas não convida. */
.switch:disabled { opacity: 0.55; cursor: not-allowed; }

:focus-visible { outline: 3px solid var(--lupulo); outline-offset: 2px; }

.erro {
  margin: 0.9rem 0 0; padding: 0.75rem 1rem; border-radius: var(--canto-m);
  background: var(--sangue-caixa); color: #410002; font-weight: 500;
}

/* ⚠️ O COMENTARIO ANTERIOR AQUI ESTAVA FACTUALMENTE ERRADO, e a regra produzia
   o defeito que ele dizia evitar.

   Ele afirmava que `space-between` "joga o titulo num canto e o filtro no
   outro" e que `margin-left: auto` "empurra os controles so ate onde eles
   cabem". Num container flex de dois itens as duas construcoes fazem a MESMA
   coisa: o segundo item vai para a borda. Em 2560px isso punha o filtro de
   periodo a ~2100px do titulo, em sete telas — a mesma travessia de monitor
   que o dono do produto apontou na lista de equipe.

   Sem o empurrao, o `gap` de 2rem do container separa os dois o suficiente
   para nao parecerem a mesma coisa, e eles continuam LEGIVEIS juntos. */
.cabecalho-tela {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end;
  margin-bottom: 1.25rem;
}
.cabecalho-tela h2 { margin: 0; }
/* Uma declaracao so: partida em duas, ela some da vista de quem procura a
   regra e convida a proxima colisao. */
.periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.periodo label { margin: 0; }
.periodo input { width: auto; min-width: 9.5rem; }
/* O cabeçalho DENTRO de um card: título e explicação à esquerda, o período à
   direita, e os dois quebram para linhas separadas no estreito. Irmão do
   `.cabecalho-tela`, com a margem de card. */
.cabecalho-card {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: flex-end;
  justify-content: space-between; margin-bottom: 0.9rem;
}
.cabecalho-card h3 { margin: 0; }
.cabecalho-card .explicacao { margin-bottom: 0; }
/* No celular o período não divide a linha com o título: cada campo com a
   largura toda, o mesmo que a faixa de lançar faz. */
@media (max-width: 47.99rem) {
  .cabecalho-card .periodo { flex: 1 1 100%; }
  .cabecalho-card .periodo input { flex: 1 1 8rem; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A FITA DE JORNADA — o elemento que este painel existe para ter.
   ═══════════════════════════════════════════════════════════════════════
   Um gestor de bar não lê horários: ele olha e vê quem trabalhou quanto, e
   onde falta batida. A fita é o DIA INTEIRO (00h→24h) numa faixa, com cada
   marcação na POSIÇÃO REAL DA HORA — a posição não é decoração, é o dado.

   Verde cheio = tempo dentro, pareado. Âmbar listrado = entrou e não bateu a
   saída, que é o erro mais comum e o mais caro: sem registro, a Súmula 338, III
   do TST presume a jornada contra a empresa. A listra existe para esse caso
   saltar aos olhos sem ninguém precisar somar nada. */
.fita {
  position: relative;
  height: 46px;
  margin: 0.6rem 0 0.3rem;
  border-radius: var(--canto-p);
  background: var(--linho-fundo);
  border: 1.5px solid var(--traco);
  overflow: hidden;
}
.fita-hora {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--traco);
}
/* Raio pequeno: com o canto grande do sistema, o bloco de tempo ficava com
   cara de PÍLULA — a mesma forma dos botões — e o olho lia "clique aqui" em vez
   de "trabalhou daqui até aqui". Forma comunica função; a do bloco é ser uma
   extensão, não um controle. */
.fita-bloco {
  position: absolute; top: 6px; bottom: 6px;
  border-radius: 4px;
  background: var(--lupulo);
}
.fita-bloco.aberto {
  background: repeating-linear-gradient(
    -45deg, var(--malte-caixa), var(--malte-caixa) 6px,
    var(--malte) 6px, var(--malte) 12px
  );
}
/* ⚠️ AS MARCAS VERTICAIS FORAM REMOVIDAS, e a ausência é a melhoria.
   Elas repetiam o que a BORDA do bloco já diz — início e fim são exatamente as
   batidas — e, caindo por cima do verde, viravam duas alças escuras que faziam
   o bloco parecer um controle deslizante. Quando há batida sem par, quem avisa
   é o bloco listrado, não uma marca solta. */
.fita-legenda {
  display: flex; justify-content: space-between;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--fumaca);
  font-family: ui-monospace, monospace;
}

/* ── Cartão de pessoa ──────────────────────────────────────────────────── */
.pessoa {
  margin: 0 0 1rem; padding: 1.1rem;
  border-radius: var(--canto-g);
  background: var(--linho-alto);
  border: 1.5px solid var(--traco);
}
.pessoa-topo { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; align-items: baseline; }
.pessoa-topo strong { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }

/* A natureza do vínculo é informação jurídica, não enfeite: CLT e freelancer
   têm vocabulários que não se misturam (indício de vínculo empregatício). */
.natureza {
  padding: 0.2rem 0.7rem; border-radius: var(--canto-total);
  background: var(--lupulo-caixa); color: var(--sobre-lupulo-caixa);
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.natureza.freela { background: var(--malte-caixa); color: var(--sobre-malte-caixa); }
.inativo { background: var(--sangue-caixa); color: #410002; }

/* ═══ `auto-fit` OU `auto-fill`: A DOUTRINA DA CASA ════════════════════════
   Este arquivo chegou a ter os DOIS, cada um com um comentario defendendo o
   oposto do outro — e comentarios que se contradizem garantem que a proxima
   sessao desfaca o trabalho da anterior. A regra, de uma vez:

   · `auto-fit` quando o item SOZINHO se beneficia de largura. Ele colapsa as
     trilhas vazias, entao um cartao unico ocupa a faixa toda em vez de virar
     uma tira magra com metade da tela vazia ao lado. E o caso do cartao de
     jornada, que tem marcacoes para espalhar.
   · `auto-fill` quando a largura deve virar MAIS ITENS. Ele mantem as trilhas,
     entao cinco pessoas em 2560px viram cinco colunas. E o caso da lista de
     equipe.

   · E EM QUALQUER UM DOS DOIS: o CONTEUDO nao estica junto. Quem cresce e a
     trilha; a linha de dentro precisa do proprio teto, senao volta o defeito
     que originou tudo isto — o nome numa ponta e o botao na outra, com 2000px
     de distancia. Foi exatamente o que acontecia aqui: com o filtro em UMA
     pessoa, `auto-fit` dava ao cartao a faixa inteira e as acoes de cada
     marcacao iam para a borda oposta a hora. */
.dia {
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--traco);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr));
  column-gap: 1.6rem;
}
.dia:first-of-type { border-top: none; padding-top: 0; }

.marcacao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0;
}
.marcacao .hora { font-size: 1rem; font-weight: 600; }
.nsr { font-size: 0.72rem; color: var(--fumaca); letter-spacing: 0.04em; }
.corrigida {
  padding: 0.1rem 0.55rem; border-radius: var(--canto-total);
  background: var(--malte-caixa); color: var(--sobre-malte-caixa);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
/* ═══ A DOUTRINA DO ESPAÇAMENTO ENTRE ALVOS ════════════════════════════════
   Escrita uma vez aqui; os outros pontos apontam para ela em vez de repetir o
   argumento — pela mesma razão que a doutrina de `auto-fit`/`auto-fill` mora
   num lugar só.

   ⚠️ 8px É O MÍNIMO ENTRE ALVOS QUE FAZEM COISAS DIFERENTES. Medido a 412px,
   "Corrigir" e "Anular" ficavam a 3,2px um do outro na tabela do espelho: o
   dedo que erra por dois pixels ANULA uma batida em vez de corrigi-la, e as
   duas coisas são registros distintos no ledger.

   Alvo grande não resolve isso. Tamanho e espaçamento respondem a perguntas
   diferentes: 48px é "consigo acertar o botão?"; 8px é "acertei o botão
   CERTO?". Dois alvos de 48px encostados formam 96px de área em que a fronteira
   é invisível.

   ⚠️ E A REGRA NÃO VALE PARA TUDO — aplicá-la cegamente pioraria a tela em dois
   lugares, e por isso ela nasce com as exceções escritas:

   • ITEM DE LISTA não entra. As 68 linhas da equipe ficam a 1px umas das
     outras, e está certo: são alvos da MESMA natureza, e errar o vizinho abre a
     ficha de outra pessoa — reversível com um toque. Separá-las em 8px somaria
     ~476px de rolagem para resolver um erro que não machuca.

   • SEGMENTED BUTTON não entra. Em `.desligar-segmentos` e `.toggle-par` o gap
     é ZERO de propósito: o par divide um contorno único, que é o desenho do
     componente no MD3 — o espaço entre eles é uma borda, não uma fresta.

   O que entra é o que está aqui embaixo: fileira de ações onde cada botão faz
   uma coisa diferente. */
.acoes-linha { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* ⚠️ `:not(.switch)` NÃO É DETALHE. Esta regra é de BOTÃO DE AÇÃO, e o switch
   também é um <button> dentro da mesma linha: sem a exclusão ele herdava
   min-height 38px e padding, e o trilho de 44×24 virava um retângulo de 44×38
   com a bola de 16px perdida no meio — o toggle "estranho". Especificidade
   (0,1,1) vencia a do `.switch` (0,1,0), então o CSS do componente perdia. */
/* ⚠️ 48px E A REGUA DESTA CASA, escrita no CSS do coletor ("alvo grande, para
   quem esta de maos molhadas na cozinha"). Estes botoes tinham 38px — abaixo
   dela e abaixo ATE do minimo global de 40px que este mesmo arquivo define para
   `button`. Sao os controles de linha (Historico, Corrigir, Anular), que o
   gestor usa em pe, no meio do turno. */
.acoes-linha button:not(.switch) {
  min-height: 48px; padding: 0.3rem 0.85rem; font-size: 0.8rem;
}

/* ── Pedidos ───────────────────────────────────────────────────────────── */
.lista-pedidos, .lista-empresas { list-style: none; padding: 0; margin: 0; }
.pedido {
  margin: 0 0 0.9rem; padding: 1.1rem;
  border-radius: var(--canto-g);
  background: var(--malte-caixa); color: var(--sobre-malte-caixa);
  border: 1.5px solid transparent;
}
.pedido .rotulo { color: var(--malte); }
.pedido .acoes { display: flex; gap: 0.6rem; margin-top: 1rem; }
.pedido .acoes button { flex: 1; margin-top: 0; }
.pedido .secundario { background: transparent; border-color: var(--malte); }
.nota {
  margin: 0.7rem 0 0; padding-left: 0.9rem;
  border-left: 3px solid var(--malte);
  font-style: italic;
}

.lista-empresas li { margin-bottom: 0.6rem; }
.lista-empresas button { width: 100%; text-align: left; padding: 1rem 1.25rem; }

/* ── Integridade ───────────────────────────────────────────────────────── */
.resultado { margin-top: 1.25rem; }
.veredito {
  padding: 1.1rem 1.25rem; border-radius: var(--canto-g);
  background: var(--lupulo-caixa); color: var(--sobre-lupulo-caixa);
  font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em;
}
.veredito.ruim { background: var(--sangue-caixa); color: #410002; }
.casa {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between;
  padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--traco);
}

/* ── Diálogos ──────────────────────────────────────────────────────────── */
.dialogo {
  width: min(34rem, 92vw); padding: 1.5rem;
  border: none; border-radius: var(--canto-g);
  background: var(--linho); color: var(--carvao);
}
.dialogo::backdrop { background: rgba(25, 29, 22, 0.5); }
.dialogo-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
/* ⚠️ `.dialogo-acoes` E `.fechar` VIVIAM NO HTML E EM REGRA NENHUMA — 22 e 21
   usos, contra zero declaração. O CSS definia `.dialogo .acoes`, que é OUTRO
   nome, e só dois diálogos (correção e recusa) usam aquele.
   Sem regra, o contêiner é `display: block`: os botões encostavam à ESQUERDA,
   separados apenas pelos ~4px do nó de texto entre as tags — o oposto do
   `flex-end` que a regra irmã declara —, em 21 dos 24 diálogos.

   A prova de que a regra se PERDEU, e não foi omitida de propósito, está no
   rodapé do desligamento: `.desligar-status { flex: 1 }` e
   `.desligar-rodape { flex-wrap: wrap }` nunca valeram nada, porque ninguém
   tornou o pai um flex container. Alguém escreveu propriedades de flex-item
   para um pai que achava que era flex.

   Os dois seletores viram A MESMA regra, e não duas parecidas: é o que faz os
   24 diálogos ficarem iguais de verdade em vez de quase iguais. */
.dialogo .acoes, .dialogo-acoes {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: flex-end; margin-top: 1.5rem;
}
/* O × é a saída principal do modal no telefone, e caía nos ~24px que o
   navegador dá a um `<button>` sem estilo — metade da régua da casa. */
.dialogo-topo .fechar {
  width: 48px; min-width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent; color: var(--md-on-surface-variant);
  font-size: 1.25rem; line-height: 1;
}
.dialogo-topo .fechar:hover { background: var(--md-surface-container-low); }
.dialogo .primario { width: auto; margin-top: 0; }

.versao { padding: 0.9rem 0; border-bottom: 1px solid var(--traco); }
.versao:last-child { border-bottom: none; }
.versao-topo { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; align-items: baseline; }
.versao .quem { font-size: 0.8rem; color: var(--fumaca); margin-top: 0.3rem; }

.aviso {
  display: flex; align-items: center; gap: 0.7rem;
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 10;
  margin: 0; padding: 0.9rem 1.15rem; border-radius: var(--canto-m);
  background: var(--carvao); color: var(--linho);
  font-weight: 500;
  animation: sobe 320ms var(--mola-viva);
}
@keyframes sobe {
  from { transform: translateY(1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Telas maiores ─────────────────────────────────────────────────────── */
/* ===================================================================
   CLASSES DE JANELA (M3) — cada faixa muda o que precisa, e so isso.
   =================================================================== */

/* Compact (ate 599px): celular em pe.
   A barra superior e o aperto: marca + nome + empresa + Sair nao cabem em
   360px. A assinatura sai (e institucional, nao operacional) e o nome da pessoa
   fica, porque e ele que responde "em nome de quem eu estou agindo" — a
   pergunta que importa num tablet compartilhado. */
@media (max-width: 37.49rem) {
  /* ⚠️ `.dupla` NUNCA COLAPSAVA: em 412px cada metade ficava com 131px, e os
     seletores que decidem forma de pagamento (horista x sessao fechada) e o
     CNPJ da empresa saiam cortados sem como ler. Uma linha, 17 usos. */
  .dupla { grid-template-columns: 1fr; }
  .topo .assinatura { display: none; }
  .topo strong { font-size: 0.95rem; }
  .quem { max-width: 45vw; }
  .cabecalho-tela { gap: 0.75rem; }
  .periodo { margin-left: 0; width: 100%; }
  .periodo input { flex: 1 1 8rem; min-width: 0; }
}

/* Medium (600-839): tablet em pe, celular deitado. */
@media (min-width: 37.5rem) {
  .primario { width: auto; padding: 0.85rem 2.25rem; }
  .pedido .acoes button { flex: 0 0 auto; }
  .aviso { left: auto; right: 1.5rem; max-width: 28rem; }
}

/* Expanded (840-1199): tablet deitado, laptop pequeno. */
@media (min-width: 52.5rem) {
  .fita { height: 54px; }
}

/* Large (1200-1599): desktop comum, 1080p. */
@media (min-width: 75rem) {
  /* `auto-fit` — o cartao de jornada e o caso em que o item SOZINHO se
     beneficia de largura (ver a doutrina em `.dia`, acima). Com colunas fixas,
     uma equipe de uma pessoa virava um cartao magro com metade da tela vazia
     ao lado.

     ⚠️ O preco disso e pago DENTRO do cartao: `.dia` distribui as marcacoes em
     colunas de 34rem, senao a faixa inteira esticaria cada linha e jogaria as
     acoes para a borda oposta a hora. */
  .equipe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.25rem; align-items: start;
  }
  .pessoa { margin: 0; }
}

/* Extra-large (1600+): 2.5K e 4K.
   Crescer nao e preencher: dali em diante quem cresce e o NUMERO DE COLUNAS,
   nao a linha de texto.

   ⚠️ ESTE BLOCO PROMETIA ISSO POR UM TOKEN QUE NINGUEM LIA. `--largura` era
   redeclarada em cinco pontos, um por breakpoint, e `var(--largura)` nao
   aparecia em regra nenhuma — o arquivo inteiro, o HTML e o JS. O bloco PARECIA
   ativo em revisao de codigo, entao ninguem procurava o defeito: os quatro
   cartoes de KPI esticavam a 536px cada e nada aqui os continha.

   Quem cumpre a promessa agora sao os TETOS DE TRILHA (`.kpis`, `.arquivos`) e
   a regua de leitura em `ch` — CSS que age, no lugar de um token que so
   descrevia uma intencao. */
@media (min-width: 100rem) {
  .equipe { grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr)); gap: 1.5rem; }
  h1 { font-size: 2.75rem; }
  .aviso { right: 2.5rem; }
}

/* Quem pediu menos movimento recebe menos movimento — inclusive o shape morph,
   que é movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Contraste alto: as caixas coloridas viram contornos, que é o que o modo
   espera — cor de fundo deixa de ser o portador da informação. */
@media (prefers-contrast: more) {
  .pessoa, .pedido, .veredito, .fita { border-color: var(--carvao); }
  .natureza, .corrigida, .selo { outline: 1px solid currentColor; }
}

/* ─── Escala ──────────────────────────────────────────────────────────────
   As vagas do dia, com o descoberto em destaque. A escala é PREVISÃO: ela
   nunca autoriza nem recusa batida — quem apareceu bate ponto do mesmo jeito
   (art. 74). Esta tela existe para comparar previsto e real, e para chamar
   gente antes que falte.                                                     */

.resumo-escala {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 0.9rem 0 0.4rem;
}

/* ⚠️ O turno descoberto usa a cor de ALERTA, não a de erro: não é defeito do
   sistema, é a casa precisando de gente. Vermelho de erro aqui treinaria o
   gestor a ignorar vermelho. */
.alerta-forte {
  padding: 0.35rem 0.9rem; border-radius: 1.1em;
  background: var(--malte-caixa); color: var(--sobre-malte-caixa);
  font-size: 0.72rem; font-weight: 500;
}
/* ⚠️ RAIO EM `em`, NÃO `--canto-total`. Chip é pensado para uma linha, mas
   `folha.motivo`, "DESFEITO — motivo" e "2 período(s) de férias VENCIDO(s)" são
   frases, e no celular quebram em duas. Com raio de 9999px o bloco de duas
   linhas vira uma cápsula e o texto entra na curva dos cantos. Com 1.1em, uma
   linha continua pílula (o raio passa de meia altura) e duas linhas ganham
   cantos arredondados normais — sem caçar cada chip longo no JS. */
.alerta {
  padding: 0.35rem 0.9rem; border-radius: 1.1em;
  background: var(--lupulo-caixa); color: var(--sobre-lupulo-caixa);
  font-size: 0.72rem; font-weight: 600;
}
/* ⚠️⚠️ `.alerta` É SELO DE UMA LINHA. `#pessoa-registro-sessoes` e
   `#pessoa-desligamento` são BLOCOS de duas ou três — título em `strong` e
   uma frase embaixo — e vestiam a pílula: raio total num bloco de 69px de
   altura faz o texto encostar na curva dos cantos, e 0.35rem de respiro
   vertical é o de um chip, não o de um parágrafo. Foi o print que abriu esta
   auditoria: "texto encavalado nas bordas". E o bloco ainda nascia GRUDADO no
   aviso âmbar de cima, sem margem nenhuma entre dois fundos coloridos.
   A classe de bloco existia (`.aviso-forte`, âmbar); faltava a irmã verde. */
.aviso-registro {
  margin-top: 0.9rem; padding: 0.9rem 1.1rem;
  border-radius: var(--canto-m);
  background: var(--lupulo-caixa); color: var(--sobre-lupulo-caixa);
  font-size: 0.85rem; line-height: 1.5;
}
.aviso-registro > strong { display: block; font-size: 0.92rem; }
/* ⚠️ `.sutil` ERA CLASSE FANTASMA: o JS a põe em seis lugares (texto
   secundário dentro de avisos e cartões) e o CSS nunca a definiu — o texto
   saía no tamanho e na cor do pai, e "secundário" não se distinguia de
   "principal". Medido pela varredura de classes usadas × definidas: 17
   fantasmas, esta a única com efeito visual em bloco de texto. */
.sutil { font-size: 0.85em; opacity: 0.85; }
.aviso-registro > p, .aviso-registro > span { margin: 0.35rem 0 0; display: block; }
.aviso-registro.ambar {
  background: var(--malte-caixa); color: var(--sobre-malte-caixa);
}

.escala-dias { margin-top: 0.6rem; }

.vaga {
  padding: 0.75rem 0; border-top: 1px solid var(--traco);
}
.vaga:first-child { border-top: none; }
.vaga.cancelada { opacity: 0.6; }

.vaga-topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
/* ⚠️ Sem o empurrao global: "Executar" precisa seguir o resumo do modelo
   ("12 itens · diario"), que e a informacao que decide se ele e usado. Na borda
   oposta, o gestor le o resumo aqui e clica a 2000px dali. */
.vaga-topo .acoes-linha { margin-left: 0; }
.vaga-acoes {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem;
}

.natureza.ok { background: var(--lupulo-caixa); color: var(--sobre-lupulo-caixa); }

/* Situações do convite — cada uma com a cor que corresponde ao que ela é.
   `pending` é espera, não problema; `expired` e `declined` são o passado. */
.natureza.pending  { background: var(--malte-caixa); color: var(--sobre-malte-caixa); }
.natureza.accepted,
.natureza.assigned { background: var(--lupulo-caixa); color: var(--sobre-lupulo-caixa); }
.natureza.declined,
.natureza.returned,
.natureza.expired  { background: var(--traco); color: var(--sobre-superficie-fraca, #45483F); }

.designados {
  list-style: none; margin: 0.55rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.designados li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.85rem;
}

.obs { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--sobre-superficie-fraca, #45483F); }

/* ─── Arquivos da fiscalização ────────────────────────────────────────── */

.arquivos {
  display: grid; gap: 1rem; margin-top: 1.1rem;
  /* Dois cartoes de download esticados a ~1.087px cada nao mostram nada a mais
     que a 480px — sao um titulo, uma frase e um botao. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 30rem));
  justify-content: start;
}
.arquivo {
  padding: 1.1rem; border: 1px solid var(--traco); border-radius: var(--canto-m);
}
.arquivo h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.arquivo p { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--sobre-superficie-fraca, #45483F); }

/* ⚠️ O aviso de "não é arquivo válido" é PARTE DA TELA, com peso visual, e não
   um toast que some. Quem baixa precisa ler antes de entregar a alguém. */
.aviso-forte {
  margin-top: 1.2rem; padding: 0.9rem 1.1rem;
  border-radius: var(--canto-m);
  background: var(--malte-caixa); color: var(--sobre-malte-caixa);
  font-size: 0.85rem; line-height: 1.5;
}

/* ⚠️ SEM PENDENCIA, DEIXA DE SER ALERTA. Ambar e a cor do que exige decisao;
   mante-lo sobre coisa ja conferida ensina o olho a ignorar ambar, e quem paga
   a conta e o proximo aviso de verdade. */
.aviso-forte.resolvido {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
}
.aviso-forte > strong { display: block; font-size: 0.95rem; }
.aviso-explicacao { margin: 0.35rem 0 0.9rem; max-width: 68ch; opacity: 0.9; }

/* ═══ TABELA — o componente compartilhado (`tabela.js`) ═══════════════════
   Ordenar, filtrar, teclado, "mostrar mais" e cabeçalho fixo, uma vez para
   todas. As classes de família (`.tabela-batidas`, `.tabela-divergencias`…)
   continuam valendo para a cor e a fonte de cada uma; isto é a mecânica. */
.qf-tabela-barra {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.qf-tabela-filtro {
  flex: 1 1 14rem; max-width: 24rem; min-height: 48px;
  padding: 0.4rem 0.8rem; font-size: 0.9rem;
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-total);
  background: var(--md-surface-container-lowest); color: var(--md-on-surface);
}
.qf-tabela-filtro:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }
.qf-tabela-contagem {
  font-size: 0.8rem; color: var(--md-on-surface-variant);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
/* ⚠️ O CABEÇALHO FICA ENQUANTO ROLA. É o que deixa uma tabela longa legível
   sem voltar ao topo — e é o que dispensa "uma tabela por dia com cabeçalho
   próprio", que a auditoria fazia por esse motivo. */
.qf-tabela-grade thead th { position: sticky; top: 0; z-index: 1; background: var(--md-surface-container-lowest); }
.qf-tabela-ordenar {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  /* 48px: o cabeçalho é ALVO DE TOQUE (ordena), e a régua da casa vale nele. */
  min-height: 48px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.qf-tabela-ordenar:hover { color: var(--md-primary); }
.qf-tabela-ordenar:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; border-radius: 4px; }
.qf-tabela-seta { width: 0.75em; opacity: 0.35; }
.qf-tabela-seta::before { content: '↕'; }
th[aria-sort="ascending"] .qf-tabela-seta { opacity: 1; color: var(--md-primary); }
th[aria-sort="ascending"] .qf-tabela-seta::before { content: '↑'; }
th[aria-sort="descending"] .qf-tabela-seta { opacity: 1; color: var(--md-primary); }
th[aria-sort="descending"] .qf-tabela-seta::before { content: '↓'; }
/* A linha com foco de teclado se vê: sem isto, ↑↓ andam e nada muda na tela. */
.qf-tabela-grade tbody tr:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.qf-tabela-grade tbody tr:hover { background: var(--md-surface-container); }
.qf-tabela-grade .alinhar-direita { text-align: right; font-variant-numeric: tabular-nums; }
.qf-tabela-mais { margin-top: 0.75rem; }

.tabela-divergencias {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-p);
  color: var(--md-on-surface);
}
.tabela-divergencias th {
  text-align: left; font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--md-on-surface-variant);
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
}
.tabela-divergencias td {
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: top;
}
.tabela-divergencias tr:last-child td { border-bottom: none; }
/* Os valores a direita para as casas decimais se alinharem: comparar coluna
   com coluna e a unica razao de isto ser tabela. */
.tabela-divergencias td.mono,
.tabela-divergencias th:nth-child(n+3):nth-child(-n+5) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.tabela-divergencias td:first-child,
.tabela-divergencias th:first-child { text-align: left; }
/* ⚠️ O SINAL DIZ DE QUEM E O PREJUIZO. Negativo e recibo que pagou A MENOS que
   o apurado — o caso que o prestador reclama, e o que o gestor precisa achar
   primeiro numa lista longa. */
.delta-menos { color: var(--md-error); font-weight: 500; }
.delta-mais { color: var(--md-on-surface-variant); }
/* A nota e o unico campo de texto livre: pode ser longa, e e onde a regua de
   leitura volta a fazer sentido. */
.celula-nota { max-width: 44ch; font-size: 0.8rem; color: var(--md-on-surface-variant); }
.acao-conferir { padding: 0.3rem 0.75rem; font-size: 0.78rem; white-space: nowrap; }

.divergencias-conferidas { margin-top: 0.9rem; }
.divergencias-conferidas > summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 500;
  padding: 0.3rem 0; color: var(--md-on-surface-variant);
}
.divergencias-conferidas > summary:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 2px;
}
.divergencias-conferidas[open] > summary { margin-bottom: 0.6rem; }

/* ─── Formulários dos diálogos novos ──────────────────────────────────── */

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
/* O CPF nao divide meio a meio: o campo tem 14 caracteres e o botao tem o
   tamanho do proprio texto. `auto` na segunda coluna evita o botao gigante
   ao lado de um campo curto — e mantem os dois na mesma linha de base. */
.dupla-cpf { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.dupla-cpf input { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.contexto { margin: 0 0 0.9rem; font-weight: 600; }
.ajuda { margin: 0.35rem 0 0.9rem; font-size: 0.78rem; color: var(--sobre-superficie-fraca, #45483F); }

/* ⚠️ A REGUA DE LEITURA, QUE O ARQUIVO PROMETIA E NUNCA APLICAVA.
   O comentario de topo declara uma "medida de leitura, aplicada onde ha texto
   corrido", e a variavel nunca foi consumida por regra nenhuma — 38 paragrafos
   de ajuda corriam a ~345 caracteres por linha em 2560px, tres vezes o limite
   em que o olho ainda acha o comeco da linha seguinte.
   `ch` e nao `px`: a medida acompanha a tipografia se ela mudar, e e a mesma
   tecnica que `.subtitulo` e `.explicacao` ja usam neste arquivo. */
/* ⚠️⚠️ `.aviso-forte` SAIU DAQUI, e a razao esta na diferenca entre PROSA e
   DADO. A regua de 68ch protege o olho em paragrafo. Numa lista de valores
   comparaveis ela faz o contrario: medido em 2560px na ficha do prestador, o
   bloco ficava com 520px de 1154 disponiveis, cada recibo quebrava em seis
   linhas, e os cinco viravam uma parede que empurrava os graficos para fora
   da tela — o mesmo defeito que a regra global proibe, informacao espremida
   numa tripa com o resto vazio. A prosa DENTRO dele mantem a regua
   (`.aviso-explicacao`, `.celula-nota`); o contentor, nao. */
.ajuda, .obs,
.card-config .rotulo, .card-visao .rotulo { max-width: 68ch; }
/* Irmão dos dois acima: rótulo que alterna uma marca, e o alvo é ele. A margem
   de 0.9rem já o separa dos vizinhos, então o desktop não muda de aparência. */
.marcador {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 48px;
  margin: 0.9rem 0; font-size: 0.88rem; font-weight: 500;
}
.marcador input { width: auto; margin: 0; }


/* ─── Visão geral ─────────────────────────────────────────────────────────
   Os números do dia. O card verde é o dinheiro devido a prestador — o número
   que não pode passar despercebido, por isso herda o peso visual do topo.   */

.visao-data { font-size: 0.8rem; color: var(--sobre-superficie-fraca, #45483F); }

/* ⚠️ A TRILHA TEM TETO — sem ele, quatro KPIs numa faixa de 2560px viravam
   quatro cartoes de ~536px cada, com um numero de tres digitos boiando no meio
   de cada um. Cabiam nove trilhas de 14rem, e a largura nao virava informacao
   nenhuma: virava espaco em branco entre o rotulo e o valor.

   `min(100%, 14rem)` fica no MINIMO (e o que protege 412px, onde 14rem nao
   cabe); o teto de 22rem entra no maximo. Com `justify-content: start`, o que
   sobra fica a direita em vez de inflar cada cartao. */
.kpis {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 22rem));
  justify-content: start;
}
.kpi {
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-m);
  background: var(--md-surface-container-lowest);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.kpi-destaque { background: var(--lupulo); border-color: var(--lupulo); }
/* ⚠️ O CARTÃO DE PRESTADOR ESTAVA PINTADO COM A COR DO CLT — e isso e o
   produto AFIRMANDO O OPOSTO do que diz em todo o resto.
   
   "A PAGAR — FREELANCERS" é o cartão mais visível da Visão geral, o primeiro
   que o gestor vê ao entrar, e usava `--lupulo` — o verde que os selos
   `.natureza` usam para dizer CLT. Quem aprendeu a convenção pelos selos lia o
   cartão errado; quem aprendeu pelo cartão lia os selos errado.
   
   Conferido antes de trocar: âmbar sobre branco dá 6,56:1, um fio ACIMA do
   verde que estava lá (6,44:1). A correção não custou legibilidade. */
.kpi-destaque.de-prestador {
  background: var(--malte); border-color: var(--malte);
}
.kpi-destaque .kpi-rotulo, .kpi-destaque .kpi-valor, .kpi-destaque .kpi-nota {
  color: var(--sobre-lupulo);
}
.kpi-rotulo {
  font-size: 0.69rem; letter-spacing: 0.08em; font-weight: 500;
  text-transform: uppercase;
  color: var(--sobre-superficie-fraca, #45483F);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.kpi-rotulo .msr { font-size: 18px; opacity: 0.75; }
/* 30px/500 em Roboto — a medida do protótipo (o mono fica para NSR/horas). */
.kpi-valor { font-size: 1.875rem; font-weight: 500; font-family: Roboto, sans-serif; }
.kpi-nota { font-size: 0.78rem; color: var(--sobre-superficie-fraca, #45483F); }

/* "Precisa da sua decisão" (auditoria pixel): card branco com título de sino;
   cada linha em error-container rosa, ícone vermelho, botão Ver à direita —
   alerta, nunca bloqueio (invariante 9). */
.decisoes {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-m);
}
.decisoes h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.lista-decisoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.decisao {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  background: var(--md-error-container, #F9DEDC); border-radius: var(--canto-p);
}
.decisao-icone { color: var(--md-error); font-size: 20px; flex: 0 0 auto; }
.decisao-texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.decisao strong { color: var(--md-on-error-container, #410E0B); font-size: 0.9rem; }
.decisao-detalhe { color: var(--md-on-error-container, #410E0B); font-size: 0.8rem; }
/* ⚠️ O ALVO É A LINHA INTEIRA. O "Ver" tinha 34px de altura — abaixo dos 48px
   da régua da casa e abaixo até do mínimo global de 40px que este mesmo arquivo
   define para `button` —, e ficava na borda oposta ao texto que descrevia o
   problema. */
.decisao-abrir {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; min-height: 48px; text-align: left;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.decisao-abrir:hover .decisao-seta { transform: translateX(2px); }
.decisao-seta {
  margin-left: auto; flex: 0 0 auto;
  color: var(--md-on-error-container, #410E0B);
  transition: transform 120ms var(--mola-viva, ease);
}
.decisao-abrir:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 2px;
  border-radius: var(--canto-p, 8px);
}

.visao-colunas { margin-top: 1.5rem; }
.visao-colunas h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.lista-atividade { list-style: none; margin: 0; padding: 0; }
/* ⚠️ A LINHA PODE QUEBRAR, e é o `wrap` que impede o desastre abaixo.
   Sem ele, quando o tipo do evento (o `<strong>`) e a hora não deixam espaço, o
   flex só tem um caminho: espremer o rótulo. */
.evento {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  /* 0.5rem, não 0.45: 7,2px entre o texto e o divisor de cima lia como
     encostado na régua de 8px da auditoria de respiro. */
  padding: 0.5rem 0; border-top: 1px solid var(--traco); font-size: 0.86rem;
}
.evento:first-child { border-top: none; }
/* ⚠️ ESTA REGRA JÁ QUEBROU A TRILHA DE AUDITORIA EM PRODUÇÃO — a segunda versão
   dela, não esta. A primeira correção dos 4 transbordos usou a quebra por
   QUALQUER PONTO no rótulo, que tem um efeito colateral documentado e fácil de
   esquecer: o min-content do texto passa a ser UM CARACTERE. Com `min-width: 0`
   junto, o flex pôde espremer o rótulo a LARGURA ZERO na trilha de auditoria
   (onde o `<strong>` do tipo + a hora de 154px lotam a faixa de 304px), e cada
   evento virou uma torre de 36 linhas de um caractere: a tela foi de 33.648px
   para 220.074px — medido, em produção.

   O trio que fecha sem esse buraco:
   - `flex-wrap: wrap` no pai — apertou, o rótulo desce para a própria linha;
   - `flex-basis: 7rem` — é sobre a BASE que o flex decide quebrar a linha,
     então o rótulo nunca divide espaço espremido: ou cabe com 7rem, ou desce
     inteiro (e o `min-width: 0`, que o guardrail pina, segue inofensivo);
   - quebra por PALAVRA no rótulo — só parte o que não caberia sozinho numa
     linha (um hash, por exemplo), sem tocar o min-content do resto.

   A hora é dado de AUDITORIA (a trilha encadeada da Portaria 671, com os
   segundos): não é truncada nem quebrada no meio. Medido depois: 4 transbordos
   → 0, rótulo com 260px, evento médio de 121px. */
.evento-rotulo { color: var(--sobre-superficie-fraca, #45483F); flex: 1 1 7rem; min-width: 0; overflow-wrap: break-word; }
.evento-hora { font-size: 0.8rem; color: var(--sobre-superficie-fraca, #45483F); flex-shrink: 0; }

/* ═══ Equipe — o módulo do prestador ═══════════════════════════════════════ */

/* ⚠️ UMA definição só. O comentário de `.acoes-pessoa` logo acima conta o que
   acontece quando há duas: a de baixo vence pela ordem e a de cima "não pega",
   sem erro nenhum. A grade mora aqui, junto do resto. */
.lista-equipe {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* ⚠️ `min(100%, 360px)`, NAO 360px CRU — e a diferenca entre caber e ser
     RECORTADO. A faixa util do painel num Pixel 7 mede 318,5px: uma trilha de
     360px fixos estoura em 42px, e o que sai da tela e a ponta direita do
     cartao, onde moram o interruptor de acesso e o botao da ficha. Num aparelho
     de 360px de largura eles ficam INALCANCAVEIS.

     ⚠️ E O PAINEL NAO ACUSAVA: `#app` tem `overflow-x: hidden`, entao ele
     RECORTA em vez de rolar. A medicao que concluiu "nao ha transbordo em
     412px" mediu o recorte, nao o encaixe. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 0.75rem;
  align-items: start;
}
.membro { border-top: 1px solid var(--traco); }
.membro:first-child { border-top: none; }
/* A linha inteira é o botão: o alvo de toque é generoso de propósito
   (gestor no celular, entre uma comanda e outra). */
.membro-abrir {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  width: 100%; text-align: left; background: none; border: none;
  padding: 0.85rem 0.35rem; min-height: 52px; cursor: pointer;
  font: inherit; color: inherit; border-radius: var(--canto-p);
}
.membro-abrir:hover { background: var(--lupulo-caixa); }
.membro-abrir strong { font-size: 1rem; letter-spacing: -0.01em; }
.membro-abrir .rotulo { margin-left: auto; }

/* ⚠️ A REGRA DE `.acoes-pessoa` MORA NUM LUGAR SÓ, no cartão da pessoa mais
   abaixo. Havia DUAS definições e a de lá vencia pela ordem, jogando fora o
   `margin-left: auto` desta — cascata que se anula é a forma mais silenciosa de
   um estilo "não pegar". */
.acoes-pessoa button { margin-top: 0; }

.lista-pagamentos { list-style: none; margin: 0; padding: 0; }
.pagamento { padding: 0.55rem 0; border-top: 1px solid var(--traco); font-size: 0.86rem; }
.pagamento:first-child { border-top: none; }
.pagamento-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.pagamento-topo .texto { margin-left: auto; min-height: 48px; padding: 0.2rem 0.6rem; }
/* Desfeito continua LEGÍVEL — marcado, nunca apagado (invariante 8). */
.pagamento-desfeito .pagamento-topo strong,
.pagamento-desfeito .evento-hora { text-decoration: line-through; opacity: 0.7; }

.situacao {
  font-size: 0.72rem; letter-spacing: 0.05em; font-weight: 600;
  color: var(--malte);
}
.situacao.ok { color: var(--lupulo-forte); }

/* ⚠️ Grande e em mono: a pessoa vai COPIAR À MÃO para um papel ou mensagem —
   e "l" vs "1" errado tranca a conta nova no primeiro acesso. */
.senha-provisoria {
  font-size: 1.5rem; letter-spacing: 0.12em; margin: 0.4rem 0 0;
  padding: 0.7rem 0.9rem; background: var(--lupulo-caixa);
  border-radius: var(--canto-m); user-select: all; overflow-wrap: anywhere;
}

/* ═══ Escala — a semana do protótipo ═══════════════════════════════════════ */

.escala-periodo { font-size: 0.9rem; letter-spacing: 0.02em; }
.kpis-escala { margin-top: 0.4rem; }
.alerta-texto { color: var(--malte); }

.card-trocas {
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  border: 1.5px solid var(--malte); border-radius: var(--canto-m);
}
.card-trocas h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.lista-trocas { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.troca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0; border-top: 1px solid var(--traco); font-size: 0.86rem;
}
.troca:first-child { border-top: none; }
.troca .acoes-linha { margin-left: auto; }

.card-realizado {
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  background: var(--superficie, #fff); border: 1px solid var(--traco);
  border-radius: var(--canto-m);
}
.realizado-topo { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; justify-content: space-between; }
.realizado-topo h3 { margin: 0; font-size: 0.95rem; }
.lista-realizado { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.ocorrencia {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  padding: 0.45rem 0; border-top: 1px solid var(--traco); font-size: 0.86rem;
}
.ocorrencia:first-child { border-top: none; }
.chip-realizado {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--lupulo-caixa);
  margin-left: auto;
}
.tipo-falta { background: var(--sangue-caixa); color: #410002; }
.tipo-atraso, .tipo-saiu-antes { background: var(--malte-caixa); color: var(--sobre-malte-caixa); }
.tipo-andamento, .tipo-ok { background: var(--lupulo-caixa); color: var(--lupulo-forte); }

/* A grade: 7 colunas que empilham no celular — o protótipo é desktop, o
   painel é os dois. */
.escala-grade {
  margin-top: 1.2rem; display: grid; gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.escala-coluna {
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-m);
  background: var(--md-surface-container-lowest); overflow: hidden;
  display: flex; flex-direction: column;
}
.escala-coluna > :not(.escala-coluna-topo) { margin: 0 0.8rem; }
.escala-coluna > :last-child { margin-bottom: 0.7rem; }
/* Faixa de header do dia em verde-acinzentado, TODOS os dias (auditoria
   pixel); hoje só reforça o tom. O "+" é círculo preenchido primary. */
.escala-coluna-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.8rem; margin-bottom: 0.55rem;
  background: color-mix(in srgb, var(--md-secondary-container) 55%, var(--md-surface-container-lowest));
  border-bottom: 1px solid var(--md-outline-variant);
}
.escala-coluna-topo strong { font-weight: 500; font-size: 0.9rem; }
.escala-coluna-topo.hoje { background: var(--md-secondary-container); }
.dia-mais {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-height: 48px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary); cursor: pointer;
}
.dia-mais .msr { font-size: 18px; }
.dia-mais:hover { background: var(--lupulo-forte); box-shadow: var(--md-el1); }

.vaga-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.chamar-seletor {
  width: 100%; margin-top: 0.5rem; border: 1px dashed var(--traco);
  border-radius: var(--canto-p); padding: 0.45rem 0.6rem; font: inherit;
  background: transparent; color: inherit;
}

/* ═══ Custos + venda do dia ════════════════════════════════════════════════ */

/* VENDA HOJE embutida como pill verde-clara (auditoria pixel): label inline +
   campo raso no mesmo tom, não um input bordado com label em cima. */
.venda-rotulo { margin: 0.6rem 0 0.2rem; display: block; }
.venda-campo {
  max-width: 10rem; min-height: 48px; padding: 0.35rem 0.9rem;
  background: var(--md-secondary-container); border: none;
  border-radius: var(--canto-total);
  color: var(--md-on-secondary-container); font-weight: 500;
}
.venda-campo:focus { box-shadow: 0 0 0 2px var(--md-primary); }

.custos-dias { margin-top: 0.4rem; }
.custo-dia { border-top: 1px solid var(--traco); }
.custo-dia:first-child { border-top: none; }
.custo-dia-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem;
  /* 48px: o summary é ALVO DE TOQUE — abre e fecha o dia. No banco o conteúdo
     já passava disso; na auditoria o resumo tem uma linha, e sem o piso ficava
     abaixo da régua da casa. */
  min-height: 48px;
  padding: 0.55rem 0.2rem; cursor: pointer; font-size: 0.9rem;
}
.custo-dia-topo .rotulo { flex: 1; }
.custo-real { color: var(--lupulo-forte); }
.custo-pessoas { list-style: none; margin: 0 0 0.6rem; padding: 0 0 0 1rem; }

/* ═══ Configurações ════════════════════════════════════════════════════════ */

.card-config {
  margin-top: 1.2rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--traco); border-radius: var(--canto-m);
}
.card-config h3 { margin: 0 0 0.2rem; font-size: 1rem; }

/* ⚠️ UM CAMPO DE 2.150px NAO ACEITA MAIS TEXTO QUE UM DE 450px — so afasta o
   rotulo do que se digita e faz o cursor aparecer no meio do nada. O
   identificador do REP-P tem 17 caracteres; a inscricao, 14. O `width: 100%`
   global continua valendo no telefone, porque 28rem e maior que 412px. */
.card-config input, .card-config select,
.card-visao input, .card-visao select { max-width: 28rem; }
.card-config textarea, .card-visao textarea { max-width: 60rem; }
#emp-rep, #emp-inscricao, #emp-cno, #emp-caepf { max-width: 16rem; }
.card-config .primario { margin-top: 0.9rem; }
.grade-config {
  display: grid; gap: 0.7rem 1rem; margin-top: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.grade-config label { font-size: 0.72rem; }
.fechamento {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--traco);
}
.fechamento input { max-width: 12rem; }

/* ═══ Visão geral completa — avisos, equipe embutida, fechamento ═══════════ */

/* ⚠️ CADA CARD É UM CONTAINER, e a consulta é pela largura DELE — não da
   janela. É o que faz a mesma lista se comportar certo estando sozinha numa
   coluna larga ou espremida em duas: com `@media`, a regra dispararia pelo
   tamanho do monitor e a lista de uma coluna estreita ganharia duas colunas
   internas numa tela grande, que é o oposto do que se quer. */
.card-visao {
  container-type: inline-size;
  container-name: painel;
  margin-top: 1.2rem; padding: 1.1rem 1.3rem;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: 16px;
}
/* ⚠️ `space-between` num card de largura inteira joga a ação para a borda: em
   2560px, "+ Novo aviso" descolava do título do próprio card que ele cria. O
   botão segue o bloco de título com um respiro fixo, em qualquer largura. */
.card-visao-topo {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center;
  justify-content: flex-start;
}
.card-visao-topo h3 { display: flex; align-items: center; gap: 0.5rem; }
.card-visao-topo .secundario, .card-visao-topo .texto { margin: 0; }

.lista-avisos { list-style: none; margin: 0.6rem 0 0; padding: 0; }
/* ⚠️ `.aviso-equipe`, E O NOME ANTIGO COLIDIA COM O TOAST.
   Havia duas declaracoes de `.aviso` no arquivo: a de cima (o toast do canto)
   com `position: fixed`, fundo escuro e `z-index`, e esta, do item da lista de
   avisos a equipe, que sobrescrevia apenas `padding`. Mesma especificidade, e
   a de baixo so vence no que declara — todo o resto continuava valendo no
   `<li>`: cada aviso publicado saia da tela e virava uma caixa escura fixa no
   canto inferior direito. Dois avisos empilhavam no mesmo ponto e o de baixo
   ficava inalcancavel.

   O toast tambem era danificado na volta: herdava `padding: 0.6rem 0` e um
   `border-top` daqui, e o texto encostava nas bordas.

   `.aviso-topo` nao muda de nome — ja era classe distinta. */
.aviso-equipe { padding: 0.6rem 0; border-top: 1px solid var(--md-outline-variant); }
.aviso-equipe:first-child { border-top: none; }
.aviso-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.aviso-topo .msr { font-size: 20px; color: var(--md-primary); }
.aviso-equipe.urgente .aviso-topo .msr { color: var(--md-error); }
.aviso-topo .texto { margin-left: auto; }
.aviso-equipe .nota { margin: 0.25rem 0 0 1.75rem; }

.visao-colunas.duas {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.visao-colunas.duas .card-visao { margin-top: 0; }
.visao-colunas.duas { margin-top: 1.2rem; }

/* ⚠️ A LISTA GANHA COLUNAS EM VEZ DE ESTICAR A LINHA — é a segunda metade de
   derrubar o teto de 1600px, e sem ela a primeira metade piora a tela.

   Medido: com o corpo ocupando 2560, cada painel desta dupla ficou com 1084px,
   e a linha "NOME · selo · status · horas" passou a ter o nome grudado na
   esquerda e o número na direita, com meio metro de branco no meio. É
   exatamente o que o comentário do teto antigo alertava ("o olho perde a linha
   entre a primeira e a última coluna") — e a prova de que o argumento dele
   estava certo, mesmo com a conclusão errada.

   A resposta é densidade, não encolhimento: onde a coluna passa de ~52rem, a
   lista se divide e cada linha volta à medida em que se lê um nome e um número
   de uma olhada só. A área continua toda usada, agora com o dobro de pessoas
   visíveis sem rolar. */
/* O `0.5rem` no topo é a doutrina do espaçamento (ver `.acoes-linha`): acima
   desta lista fica o botão "Gerenciar", que é AÇÃO, e abaixo dele começa item
   de LISTA. A exceção que dispensa os 8px vale entre itens de mesma natureza —
   aqui as naturezas mudam, e a fronteira precisa ser sentida pelo dedo. */
.lista-equipe-visao { list-style: none; margin: 0.5rem 0 0; padding: 0; }
@container painel (min-width: 52rem) {
  .lista-equipe-visao,
  .lista-atividade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    column-gap: 1.6rem;
  }
  /* A divisória de topo some na primeira linha de CADA coluna, não só na
     primeira do conjunto — senão a segunda coluna nasce com um traço solto no
     alto, que o olho lê como recorte malfeito. */
  .lista-equipe-visao > :first-child,
  .lista-atividade > :first-child { border-top: none; }
}
.linha-equipe { border-top: 1px solid var(--md-outline-variant); }
.linha-equipe:first-child { border-top: none; }
/* Linha de pessoa do protótipo: avatar 40px + coluna de 2 linhas + status ao
   centro + número empilhado à direita. */
.linha-equipe-col { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.linha-equipe-detalhe { font-size: 0.75rem; color: var(--md-on-surface-variant); }
.linha-equipe-direita {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  margin-left: auto; flex: 0 0 auto;
}
.linha-equipe-sub { font-size: 0.72rem; color: var(--md-on-surface-variant); }
.linha-equipe-abrir {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; text-align: left; background: none; border: none;
  padding: 0.7rem 0.35rem; cursor: pointer; font: inherit; color: inherit;
  border-radius: var(--canto-p);
}
.linha-equipe-abrir:hover { background: var(--md-surface-container-low); }
/* ⚠️ `min-width: 0` NO NOME. Sem ele o `strong` não encolhe abaixo do próprio
   texto e, com o selo de natureza ao lado, a linha transbordava 35px na Visão
   geral em 412px — o nome saindo do cartão pela direita. `flex-wrap` deixa o
   selo cair para a linha de baixo quando o nome é longo, em vez de espremer. */
.linha-equipe-nome { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.linha-equipe-nome > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.linha-equipe-valor { font-size: 0.95rem; }

/* O status de agora, com pulso só quando há atividade. */
.status-agora {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--md-on-surface-variant);
}
.status-agora::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-outline-variant);
}
.status-agora.ativo { color: var(--md-primary); }
.status-agora.ativo::before { background: var(--md-primary); animation: pulso 1.6s infinite; }
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .status-agora.ativo::before { animation: none; }
}

.banner-fechamento {
  margin-top: 1.2rem; padding: 1rem 1.3rem;
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--md-surface-container-high); border-radius: var(--canto-m);
}
.banner-fechamento .msr { color: var(--md-on-surface-variant); }
.banner-fechamento strong { font-weight: 500; }

/* ═══ Jornada — solicitações no topo, por dia × por batida ═════════════════ */

.card-pedidos {
  margin-bottom: 1.2rem; padding: 1rem 1.2rem;
  border: 1.5px solid var(--md-warning); border-radius: var(--canto-m);
}
.card-pedidos h3 { margin-bottom: 0.4rem; }

.jornada-controles {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end;
  margin-bottom: 1rem;
}
.jornada-controles label { margin-top: 0; }
.jornada-controles select { min-width: 12rem; width: auto; }

/* Segmented button M3 (auditoria pixel): contorno ÚNICO em volta do par,
   segmento ativo em secondary-container — não dois botões soltos. O JS segue
   trocando .primario/.secundario; o container reinterpreta as duas classes. */
.toggle-par {
  display: inline-flex; gap: 0; width: max-content;
  border: 1px solid var(--md-outline);
  border-radius: var(--canto-total); overflow: hidden;
}
.toggle-par .primario, .toggle-par .secundario {
  width: auto; margin: 0; border: none; border-radius: 0;
  min-height: 48px; padding: 0 1.1rem; box-shadow: none;
}
.toggle-par > button + button { border-left: 1px solid var(--md-outline); }
.toggle-par .primario {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.toggle-par .primario:hover { background: var(--md-secondary-container); box-shadow: none; }
.toggle-par .secundario { background: transparent; color: var(--md-on-surface); }
.toggle-par .secundario:hover { background: var(--md-surface-container-low); }

/* Toolbar das tarefas: à direita, abaixo dos KPIs (auditoria pixel). */
.toolbar-tarefas {
  display: flex; justify-content: flex-end; gap: 0.6rem;
  margin: 1rem 0 0.4rem;
}
.toolbar-tarefas .primario { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.toolbar-tarefas .secundario { display: inline-flex; align-items: center; gap: 0.4rem; }
.toolbar-tarefas .msr { font-size: 18px; }

/* Banner bege da competência em curso (auditoria pixel): hourglass + texto
   marrom — estado, não erro. */
.banner-competencia {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1rem 0; padding: 0.8rem 1.1rem;
  background: #F5EAE0; border-radius: var(--canto-p);
  color: #6D4C2F;
}
.banner-competencia .msr { font-size: 22px; flex: 0 0 auto; }
.banner-competencia .explicacao { margin: 0; max-width: none; color: inherit; font-size: 0.88rem; }

/* Banner tonal de verificação da cadeia (auditoria pixel): faixa em
   secondary-container, shield, botão outlined branco à direita. */
.faixa-verificacao {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.2rem 0; padding: 1rem 1.2rem;
  background: var(--md-secondary-container); border-radius: var(--canto-m);
  color: var(--md-on-secondary-container);
}
.faixa-verificacao > .msr { font-size: 26px; flex: 0 0 auto; }
.faixa-verificacao-texto { flex: 1; min-width: 0; }
/* ⚠️ NO CELULAR A FAIXA QUEBRA. Sem `wrap`, ícone + texto + botão "Verificar"
   dividiam 304px e o texto ficava com 78 — o título transbordava 19px por
   cima do botão. Medido em 412px na Auditoria. */
@media (max-width: 47.99rem) {
  .faixa-verificacao { flex-wrap: wrap; }
  .faixa-verificacao-texto { flex: 1 1 100%; }
}
.faixa-verificacao-texto h3 { margin: 0 0 0.15rem; font-size: 0.95rem; }
.faixa-verificacao-texto p { margin: 0; font-size: 0.82rem; }
.faixa-verificacao-botao {
  flex: 0 0 auto;
  background: var(--md-surface-container-lowest); border-color: var(--md-outline);
  color: var(--md-on-surface);
}
.faixa-verificacao-botao:hover { background: var(--md-surface-container-low); }

/* ═══ A ficha do prestador — réplica do protótipo ═════════════════════════ */
/* ⚠️ ERA FLEX EM UMA LINHA SÓ, COM TRÊS FILHOS, E QUEBROU AO CRESCER.
   Com seis ações ("Cadastro", "Devolver acesso", "Desligar", "Lançar sessão",
   "Relatório de serviços", "Editar"), o bloco de botões passou a ocupar quase
   toda a largura; o texto, que era `flex: 1; min-width: 0`, encolheu até virar
   uma coluna de ~150px. Medido em 1280px na produção: "ATAANDERSON OLIVEIRA
   DAMACENO" quebrando em TRÊS linhas e os detalhes empilhados um por linha,
   com os botões passando por cima.

   `min-width: 0` é o que permite um item flex encolher abaixo do conteúdo —
   necessário para o `text-overflow` funcionar, e exatamente o que transformou
   "aperta um pouco" em "espreme até o nome quebrar".

   Grid com áreas resolve pela estrutura, não por tentativa: a identidade e os
   detalhes ficam com a largura inteira, e as AÇÕES GANHAM LINHA PRÓPRIA. Seis
   botões não disputam espaço com um nome de três palavras — e a barra de ações
   escala para sete, oito, sem nunca mais espremer o cabeçalho. */
.pessoa-cartao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "avatar identidade"
    "avatar detalhes"
    "acoes  acoes";
  align-items: start;
  column-gap: 1rem; row-gap: 0.4rem;
  padding: 1.1rem 1.3rem; margin: 0.8rem 0 1.2rem;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-m);
}
#pessoa-avatar { grid-area: avatar; align-self: center; }
.avatar-g { width: 56px; height: 56px; font-size: 1.15rem; }
/* O `display: contents` faz os dois filhos caírem direto nas áreas do grid —
   sem ele, o wrapper viraria uma célula só e o problema voltaria por dentro. */
.pessoa-cartao-texto { display: contents; }
.pessoa-cartao-nome {
  grid-area: identidade;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.pessoa-cartao-nome h2 {
  margin: 0; font-size: 1.25rem; line-height: 1.25;
  /* Nome de pessoa não se quebra no meio de uma palavra. */
  overflow-wrap: break-word; hyphens: none;
}
#pessoa-detalhes {
  grid-area: detalhes; margin: 0;
  /* Os detalhes vêm do servidor separados por " · " e devem FLUIR, não empilhar:
     "Freelancer · 110.***.***-43 · R$ 12,50/hora · semanal · PIX 48 996228465"
     é uma linha só que quebra sozinha quando precisa. */
  overflow-wrap: anywhere;
}
.acoes-pessoa {
  grid-area: acoes;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.75rem; padding-top: 0.85rem;
  border-top: 1px solid var(--md-outline-variant);
}
.acoes-pessoa .secundario, .acoes-pessoa .primario {
  display: inline-flex; align-items: center; gap: 0.4rem; width: auto; margin: 0;
}
.acoes-pessoa .msr { font-size: 18px; }

/* No estreito o avatar sai da coluna própria: 56px + gap custam um quinto da
   largura de um celular, e o nome é o que a pessoa veio ler. */
@media (max-width: 34rem) {
  .pessoa-cartao {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "avatar" "identidade" "detalhes" "acoes";
  }
  #pessoa-avatar { align-self: start; }
  /* Botão que ocupa a linha inteira é mais fácil de acertar com o polegar do
     que dois pela metade — e "Relatório de serviços" não cabe em meia largura
     de 412px sem truncar.

     ⚠️ 48px DE ALTURA, e não os 40 que a régua do desktop dá: medido em 412×915
     (Pixel 7, o alvo mobile deste produto), os botões desta barra saíam com 40px
     — abaixo do mínimo de alvo de toque. Quem usa esta tela opera um bar, com a
     mão molhada e o celular numa mão só. */
  .acoes-pessoa .secundario, .acoes-pessoa .primario {
    flex: 1 1 100%; justify-content: center; min-height: 48px;
  }
  .acoes-pessoa { gap: 0.5rem; }  /* a doutrina do espaçamento */
}

/* Em aberto: o card DESTACADO da ficha — outline quente do protótipo. */
.kpis-pessoa { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi-aberto {
  border: 1.5px solid var(--md-warning, #8A4F00);
  background: #FBF3EA;
}
.kpi-aberto .kpi-valor { color: var(--md-on-surface); }

/* Gráficos de barras em CSS puro — a altura é o dado. */
.grafico-sub { font-weight: 400; font-size: 0.78rem; color: var(--md-on-surface-variant); }
.grafico-barras {
  display: flex; align-items: stretch; gap: 0.5rem;
  height: 150px; margin: 0.8rem 0 0.4rem;
}
.barra-coluna {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem; min-width: 0;
}
.barra-valor { font-size: 0.62rem; color: var(--md-on-surface-variant); white-space: nowrap; }
/* Oito colunas em 260px dão 32px cada, e "27h 33m" em `nowrap` transbordava
   8px por cima da coluna vizinha. No estreito o valor quebra em duas linhas
   ("27h" / "33m") em vez de invadir. */
@media (max-width: 47.99rem) {
  .barra-valor { white-space: normal; text-align: center; line-height: 1.15; }
}
.barra-trilho { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.barra {
  width: 26px; max-width: 70%;
  background: var(--md-primary); border-radius: 4px 4px 0 0;
}
.barra-atual { background: var(--md-warning, #8A4F00); }
.barra-vazia { background: var(--md-outline-variant); }
.barra-rotulo { font-size: 0.68rem; color: var(--md-on-surface-variant); }

/* O corte de pagamento. */
.corte-pagamento h3 { display: flex; align-items: center; gap: 0.5rem; }
.corte-explicacao { max-width: none; }
.corte-controles { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.corte-controles input[type="date"] { width: auto; min-width: 11rem; }
.corte-controles .subtitulo { margin-bottom: 0.8rem; }
.corte-lista { margin-top: 0.6rem; }
/* ⚠️ O ALVO AQUI É O RÓTULO, NÃO A CAIXA. O JS envolve tudo num `<label>`
   (`desenharCorte` e a leva de pagamento), e clicar em qualquer ponto dele
   alterna a marca — então é ele que precisa dos 48px, e ele tinha ~22px:
   `font-size: 0.9rem` numa linha de 1.5 dá 21,6, e não havia padding nem
   `min-height`.

   ⚠️ Não foi possível MEDIR no navegador: a seção só aparece com sessão de
   serviço em aberto, e não há nenhuma na base de desenvolvimento. A conta vem
   do CSS, que é verificável; a medição fica pendente para quando houver o dado.

   Estas caixas escolhem QUEM ENTRA NUM PAGAMENTO. */
.corte-rotulo {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  min-height: 48px;
  margin: 0; font-size: 0.9rem; text-transform: none; letter-spacing: normal;
  color: var(--md-on-surface); cursor: pointer;
}
.corte-rotulo input { width: auto; min-height: auto; }
.corte-rotulo .evento-hora { margin-left: auto; }
.corte-pagar { width: auto; }

/* O checklist Cadastro · n/8. */
.cadastro-itens { list-style: none; margin: 0.6rem 0 0; padding: 0; }
/* O mesmo caso no checklist do desligamento: o alvo é o rótulo inteiro. Aqui o
   `padding` já dava ~44px; `min-height` fecha a régua sem mudar o desenho. */
.cadastro-item label {
  display: flex; align-items: center; gap: 0.7rem; margin: 0;
  min-height: 48px;
  padding: 0.55rem 0.2rem; font-size: 0.92rem; text-transform: none;
  letter-spacing: normal; color: var(--md-on-surface); cursor: pointer;
  border-top: 1px solid var(--md-outline-variant);
}
.cadastro-item:first-child label { border-top: none; }
.cadastro-item input { width: auto; min-height: auto; }

/* O recibo. */
.recibo-corpo { min-width: 320px; }
.recibo-linha {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0.3rem 0; font-size: 0.9rem;
}

/* ═══ Relatórios & Folha — o shell dos três documentos ═════════════════════ */
.rel-seletores { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-end; }
.rel-seletores select, .rel-seletores input { min-height: 48px; min-width: 10rem; }

#rel-documento { margin-top: 0.4rem; }
.rel-doc-cabecalho {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.2rem; flex-wrap: wrap;
  padding-bottom: 0.9rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--md-outline-variant);
}
.rel-marca {
  font-size: 1.25rem; font-weight: 500; color: var(--md-primary); margin: 0;
}
.rel-gerado { font-size: 0.75rem; color: var(--md-on-surface-variant); margin: 0.15rem 0 0; }
.rel-doc-titulo { text-align: right; }
.rel-doc-titulo h3 { margin: 0; }
.rel-doc-titulo .subtitulo { margin: 0.1rem 0 0; }
.rel-periodo { font-size: 0.8rem; color: var(--md-on-surface-variant); margin: 0.2rem 0 0; }

.tabela-relatorio th.num, .tabela-relatorio td.num { text-align: right; }
.tabela-relatorio th.centro, .tabela-relatorio td.centro { text-align: center; }
.tabela-relatorio td.col-marca, .tabela-relatorio th.col-marca { width: 2.2rem; }

/* ⚠️ A CAIXA QUE ESCOLHE QUEM ENTRA NA LEVA DE PAGAMENTO tinha 20px de largura
   no telefone — medido a 412px. Ela não está dentro de um `<label>` (é `<td>`
   direto, montado em `desenharFolha`), então não há rótulo grande para clicar:
   o alvo É a caixa.

   E `<input>` é elemento substituído — a técnica do `::after` que resolve o
   switch NÃO funciona aqui. O caminho é dimensionar a própria caixa.

   Só na janela compacta, e o motivo é honesto: 48px é a régua do DEDO. Numa
   tabela de folha em 1920px, uma caixa de 48px ao lado de linhas de 20px fica
   desproporcional sem resolver problema nenhum — lá o mouse acerta 20px.
   A tabela cresce 28px e já vive dentro de `.tabela-rolagem`, que rola: medido,
   o documento continua em 412px. */
@media (max-width: 999px) {
  .tabela-relatorio td.col-marca, .tabela-relatorio th.col-marca { width: 3rem; }
  .tabela-relatorio td.col-marca input[type="checkbox"] {
    width: 48px; height: 48px; margin: 0;
  }
}
.tabela-relatorio td.destaque { color: var(--md-primary); font-weight: 500; }

.rel-total {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 0.7rem; padding: 0.85rem 0.9rem;
  background: color-mix(in srgb, var(--md-primary) 7%, transparent);
  border-radius: var(--canto-m); font-size: 0.95rem;
}
.rel-total strong { font-size: 1.15rem; color: var(--md-primary); }
.rel-total-aberto {
  background: color-mix(in srgb, var(--md-warning, #FFB547) 16%, transparent);
}
.rel-total-aberto strong { color: var(--md-on-surface); }

.rel-leva { margin-top: 1rem; }
.rel-secao {
  margin: 1.6rem 0 0.5rem; font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; color: var(--md-on-surface);
}
.rel-clt { list-style: none; margin: 0; padding: 0; }
.rel-clt .evento { display: flex; align-items: center; gap: 0.8rem; }
.rel-clt .evento-rotulo { margin-left: auto; }

.rel-acoes { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.rel-acoes button { width: auto; display: inline-flex; align-items: center; gap: 0.4rem; }

.pill {
  display: inline-block; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 999px;
  white-space: nowrap;
}
.pill-pago {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
}
.pill-aberto {
  background: color-mix(in srgb, var(--md-warning, #FFB547) 22%, transparent);
  color: var(--md-on-surface);
}
/* ⚠️ O ESTADO DO MEIO NÃO TINHA COR, e é justamente o que o `Sessions::Resolve`
   chama de "o do meio é o que importa": um dia parcialmente pago cai aqui, e
   sem estilo próprio ele herdava o de "em aberto" — dizendo que nada foi pago
   quando parte já foi, ou o de "pago", escondendo o que ainda falta. Listrado
   de propósito: a divisão visual é a informação. */
.pill-parcial {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--md-primary) 12%, transparent),
    color-mix(in srgb, var(--md-primary) 12%, transparent) 5px,
    color-mix(in srgb, var(--md-warning) 20%, transparent) 5px,
    color-mix(in srgb, var(--md-warning) 20%, transparent) 10px
  );
  color: var(--md-on-surface);
}

/* A mesma escala no texto solto da ficha (`.situacao`), que até aqui tinha só
   dois estados: o âmbar do padrão e o `.ok` verde. */
.situacao-pago { color: var(--lupulo-forte); }
.situacao-parcial { color: var(--malte); font-weight: 700; }
.situacao-aberto { color: var(--malte); }
/* Em serviço AGORA. Selo, nao so cor: e o unico estado desta tela que muda
   sozinho enquanto o gestor olha, e ele precisa saltar de uma lista longa. */
.situacao-andamento {
  background: var(--md-warning-container); color: var(--md-on-warning-container);
  border-radius: var(--canto-total); padding: 0.15rem 0.6rem;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; white-space: nowrap;
}

/* ── Tela de Sessões de serviço ─────────────────────────────────────
   ⚠️ UMA COLUNA POR PADRAO, DUAS QUANDO CABE. Em 2560px, um cartao por linha
   com seis colunas estreitas desperdicaria metade da tela — e a regra da casa
   e que area extra vira DENSIDADE, nao padding. O `auto-fit` com piso de 34rem
   entrega uma coluna no celular e duas ou tres no monitor, sem media query. */
.servicos-lista {
  display: grid; gap: 1rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(34rem, 100%), 1fr));
}
.card-prestador-topo {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.card-prestador-topo h3 { margin: 0; flex: 1 1 auto; min-width: 0; }
/* O valor a receber e o numero pelo qual esta tela existe: ele nao encolhe. */
.card-prestador-valor { font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.card-prestador-abrir { flex: 0 0 auto; }
/* A tabela de sessoes herda a de divergencias e muda so o que difere: aqui os
   dois primeiros campos sao hora, e alinha-los a direita alinha os minutos. */
.tabela-sessoes th:nth-child(n+2):nth-child(-n+5),
.tabela-sessoes td.mono { text-align: right; }
.tabela-sessoes th:first-child, .tabela-sessoes td:first-child { text-align: left; }
/* Linhas da mesma altura: o botão Anular tem 48px de alvo e fazia a linha dele
   crescer para 67 enquanto a linha paga ficava em 39 — a tabela parecia
   escalonada. Todas as linhas ganham a altura do alvo, e o conteúdo centra. */
.tabela-sessoes tbody tr { height: 56px; }
.tabela-sessoes td { vertical-align: middle; }
.tabela-sessoes td .texto { padding-top: 0; padding-bottom: 0; min-height: 48px; }
.pill-feriado {
  background: var(--md-tertiary-container);
  color: var(--md-on-surface);
}
.tabela-relatorio .pill { margin-left: 0.4rem; }

/* O bloco do art. 84: identificação das partes, antes de qualquer número. */
.rel-art84 {
  margin-bottom: 0.9rem; padding: 0.7rem 0.9rem;
  background: var(--md-surface-container-low); border-radius: var(--canto-p);
}
.rel-art84 p {
  margin: 0; font-size: 0.8rem; color: var(--md-on-surface-variant);
}
.rel-art84 p + p { margin-top: 0.2rem; }

.rel-total-ficta {
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}
.tabela-relatorio td.extras {
  color: var(--md-on-surface-variant); font-size: 0.78rem;
}

.kpi-botao {
  text-align: left; border: none; cursor: pointer; font: inherit;
  display: flex; flex-direction: column;
}
.kpi-botao .msr { font-size: 16px; vertical-align: middle; }

/* ⚠️ NA IMPRESSÃO SAI SÓ O DOCUMENTO. Checkbox, botão e barra de leva não são
   parte do papel — e um relatório impresso com caixa de seleção parece um
   rascunho, não um documento entregável. */
@media print {
  body.imprimindo-relatorio .drawer,
  body.imprimindo-relatorio .topo,
  body.imprimindo-relatorio .cabecalho-tela,
  body.imprimindo-relatorio [data-no-print] { display: none !important; }
  body.imprimindo-relatorio .tela { box-shadow: none; border: none; padding: 0; margin: 0; }
  /* `background: none` junto do `overflow: visible`: a sombra que avisa "rola
     para o lado" é sujeira numa folha de papel — e esta folha é o espelho de
     ponto que vai ao contador e à fiscalização. Sem rolagem não há o que
     avisar. */
  body.imprimindo-relatorio .tabela-rolagem { overflow: visible; background: none; }
  body.imprimindo-relatorio .rel-total { break-inside: avoid; }
  body.imprimindo-relatorio { background: #FFFFFF; }
  /* A tabela do espelho pode passar de uma página — cabeçalho repetido em
     cada folha, senão a segunda página vira uma lista de números sem rótulo. */
  body.imprimindo-relatorio thead { display: table-header-group; }
  body.imprimindo-relatorio tr { break-inside: avoid; }
}

/* ═══ A faixa LANÇAR da Jornada + o lote ═══════════════════════════════════ */
.faixa-lancar {
  display: flex; align-items: flex-end; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem; margin-bottom: 1rem;
  background: var(--md-secondary-container); border-radius: var(--canto-m);
}
.faixa-lancar-rotulo {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--md-on-secondary-container); align-self: stretch;
  display: flex; align-items: center;
}
.faixa-lancar label { margin-top: 0; }
.faixa-lancar select, .faixa-lancar input { width: auto; min-width: 11rem; min-height: 48px; }
/* ⚠️ `input[type=datetime-local]` TEM LARGURA INTRÍNSECA maior que o `min-width`
   — 219px — e no celular ela vencia o `wrap`: a faixa transbordava 16px em
   412px. No estreito cada campo ocupa a linha inteira; é também o que dá o
   alvo de toque de largura cheia. */
@media (max-width: 47.99rem) {
  .faixa-lancar > div { flex: 1 1 100%; min-width: 0; }
  .faixa-lancar select, .faixa-lancar input { width: 100%; min-width: 0; }
}
.faixa-lancar .secundario, .faixa-lancar .primario {
  display: inline-flex; align-items: center; gap: 0.35rem; width: auto; margin: 0;
}
.faixa-lancar .msr { font-size: 18px; }

.dialogo-largo { min-width: min(680px, 92vw); }
.lote-horarios { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.lote-horarios .rotulo { display: block; margin-bottom: 0.2rem; }
.lote-horarios input { width: 6.2rem; min-height: 48px; }
.lote-dias { list-style: none; margin: 0.8rem 0 0; padding: 0; max-height: 300px; overflow-y: auto; }
.lote-dia {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.45rem 0.2rem; border-top: 1px solid var(--md-outline-variant);
}
.lote-dia:first-child { border-top: none; }
.lote-dia input[type="checkbox"] { width: auto; min-height: auto; }

/* ⚠️ A CAIXA QUE DECIDE QUAIS DIAS RECEBEM BATIDA media 13x13 no telefone.
   Como a da folha de pagamento, ela não tem `<label>` em volta — é filha direta
   do `<li>`, montada em `desenharDiasDoLote` —, então o alvo É a caixa.

   Errar o toque aqui não é atrito: grava jornada em dia que a pessoa não
   trabalhou, ou deixa de gravar o dia que ela trabalhou, num ledger
   append-only onde a correção é um novo registro com motivo escrito.

   ⚠️ ESTA CAIXA ESCAPOU DA PRIMEIRA VARREDURA porque o `dialogo-lote` só
   desenha os dias quando aberto pelo FLUXO (Jornada → escolher CLT → Lançar em
   lote): abrir o diálogo por `showModal` direto mede uma lista vazia. Auditoria
   de diálogo que não passa pelo fluxo mede o esqueleto, não a tela.

   A regra vem LOGO DEPOIS da linha acima de propósito: as duas têm a mesma
   especificidade (0,2,1), e quem vence é a última. Medido: caixa 48x48 e a
   altura da linha inalterada em 150px — quem a dita é o campo de hora, que já
   tem 48px próprios. */
@media (max-width: 999px) {
  .lote-dia input[type="checkbox"] {
    width: 48px; height: 48px; min-height: 48px; margin: 0; flex: 0 0 auto;
  }
}
.lote-dia-nome { min-width: 7.5rem; font-weight: 500; font-size: 0.88rem; }
.lote-hora { width: 5.6rem; min-height: 48px; padding: 0.3rem 0.5rem; }

/* A leva em lote na Folha. */
.leva-caixa { margin-top: 1.4rem; }
.leva-controles { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.leva-controles input { width: auto; min-width: 11rem; }
.leva-controles .subtitulo { margin: 0 0 0.7rem auto; }
.leva-fechar { width: auto; }

/* ═══ Banco de horas (auditoria pixel) ═════════════════════════════════════ */
.banco-regime-card {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.9rem 1.1rem; margin-bottom: 1rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-m);
}
.banco-regime-card .msr { color: var(--md-primary); font-size: 22px; }
.banco-regime-texto { margin: 0; max-width: none; }
.kpis-banco { margin-bottom: 1.2rem; }
.banco-linha { align-items: center; gap: 0.8rem; }
/* Verde deve × vermelho a repor, 5px, raio full — a proporção É o dado. */
.banco-barra {
  display: flex; height: 5px; border-radius: var(--canto-total);
  overflow: hidden; margin: 0.3rem 0 0.15rem; max-width: 260px;
}
.banco-barra-credito { background: var(--md-primary); }
.banco-barra-debito { background: var(--md-error); }
.saldo-positivo { color: var(--md-primary); }

/* Chip de tipo da tabela por batida: Entrada/Início em verde-claro,
   Saída/Fim neutra — o protótipo diferencia pela cor, não pelo texto. */
.chip-tipo {
  display: inline-flex; align-items: center;
  min-height: 22px; padding: 0 0.6rem;
  border-radius: var(--canto-total);
  background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
  font-size: 0.72rem; font-weight: 500;
}
.chip-entrada { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* A tabela por batida: números em mono, rolagem própria no celular. */

/* ⚠️⚠️ A TABELA ROLAVA E NADA DIZIA QUE ROLAVA — e o que sumia era apuração de
   jornada.

   Medido a 412px no espelho de ponto do relatório CLT: 959px de conteúdo em
   304px visíveis, 655px fora da vista, e OITO das dez colunas invisíveis —
   Ent. 1º, Saí. 1º, Ent. 2º, Saí. 2º, Horas, Diurnas, Noturnas e **Not.
   fictas**. O gestor abria o espelho no telefone e via a coluna "Dia".

   "Not. fictas" é a hora noturna reduzida do art. 73 §1º da CLT — 52min30s
   valendo por hora. É ela que faz a jornada da casa fechar em 43h59 em vez das
   41h37 de relógio. Uma coluna que existe e ninguém sabe que existe não é
   informação: é a tela AFIRMANDO que o espelho tem menos do que tem.

   A sombra é CSS puro, sem JavaScript e sem medir nada: os dois gradientes
   claros usam `background-attachment: local` (rolam COM o conteúdo) e os dois
   escuros usam `scroll` (ficam presos na moldura). No começo da rolagem o claro
   da esquerda cobre o escuro; assim que a pessoa rola, o escuro aparece daquele
   lado e some do outro. A sombra existe exatamente enquanto há conteúdo além da
   borda, e desaparece sozinha quando não há.

   ⚠️ E ZERA NA IMPRESSÃO. O espelho impresso é o documento que vai ao contador
   e à fiscalização: uma sombra de rolagem numa folha de papel é sujeira sobre
   dado legal. A regra de impressão fica logo abaixo da que devolve
   `overflow: visible`. */
.tabela-rolagem {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--md-surface) 30%, rgba(255, 255, 255, 0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--md-surface) 30%, rgba(255, 255, 255, 0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) right / 12px 100% no-repeat scroll;
}
.tabela-batidas {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-p);
}
.tabela-batidas th {
  text-align: left; padding: 0.6rem 0.8rem;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
}
.tabela-batidas td { padding: 0.5rem 0.8rem; border-top: 1px solid var(--md-outline-variant); }
.tabela-batidas .acoes-linha { display: flex; gap: 0.5rem; }  /* a doutrina do espaçamento */

/* ⚠️ OS TRÊS BOTÕES NÃO EMPILHAM, e é isto que dita a altura da tela mais usada
   do painel. Medido a 412px: com o `flex-wrap: wrap` herdado de `.acoes-linha`,
   Histórico/Corrigir/Anular viravam três andares de 48px e faziam a LINHA DA
   TABELA medir 167px — contra 65px da MESMA linha, com os MESMOS dados, em
   2048. Setenta e quatro batidas assim somam 12.441px de rolagem para 74 fatos.

   Ou seja: a altura não vinha do volume de dado, vinha de três botões que não
   couberam lado a lado. A tabela já vive dentro de `.tabela-rolagem` e já
   rolava 118px na horizontal; passa a rolar 259px, e a linha volta a 80px.
   Trocar altura por deslocamento lateral, num contêiner feito exatamente para
   isso, é o câmbio certo aqui. */
@media (max-width: 37.49rem) {
  .tabela-batidas .acoes-linha { flex-wrap: nowrap; }
}

/* ═══ Equipe rica — avatar, e-mail, status, acesso ═════════════════════════ */

/* ⚠️ A EQUIPE É UMA GRADE, NÃO UMA PILHA DE LINHAS ESTICADAS.

   Em 2560px, uma linha com o nome à esquerda e as ações em `margin-left: auto`
   punha ~2000px entre o que se lê e o que se clica: para abrir a ficha de
   alguém era preciso atravessar o monitor inteiro com o cursor. Cinco pessoas
   ocupavam cinco faixas de 2200px e o resto da tela ficava vazio — largura sem
   densidade, que é o oposto de aproveitar a tela.

   A largura agora vira MAIS PESSOAS POR TELA: cinco a seis cartões por linha em
   2560px, um por linha no telefone, sem media query — `auto-fill` (a outra
   metade da doutrina escrita em `.dia`: aqui a largura vira MAIS ITENS, não um
   item mais largo) com um mínimo
   legível faz a conta sozinho. Dentro do cartão, o nome e o botão ficam a
   poucos centímetros um do outro.

   ⚠️ 360px NÃO é arbitrário: é o que cabe "ATAANDERSON OLIVEIRA DAMACENO" mais
   o selo do vínculo sem quebrar o nome no meio. Nome de pessoa cortado numa
   tela de RH é pior que uma coluna a menos. */
.lista-equipe .membro {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--canto-m, 12px);
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest, var(--md-surface));
}

/* Sem a borda-de-lista: em grade ela vira contorno de cartão, e a regra antiga
   (`border-top` só no primeiro) deixaria um cartão sem topo em cada coluna. */
.lista-equipe .membro:first-child { border-top: 1px solid var(--md-outline-variant); }

.lista-equipe .membro:hover { background: var(--md-surface-container-low); }

/* ⚠️ O cartão inteiro é clicável e nada avisava: o único sinal era a troca de
   fundo no hover, e os dois círculos de 40px pareciam ser a única coisa
   acionável de um cartão de 360px. */
.lista-equipe .membro { cursor: pointer; }

/* A identidade é o alvo de teclado (um Tab por pessoa). Parece texto — é o
   nome de alguém —, mas sublinha no hover e tem foco visível. */
.lista-equipe .membro-abrir {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.lista-equipe .membro-abrir:hover strong { text-decoration: underline; }
.lista-equipe .membro-abrir:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 3px;
  border-radius: var(--canto-p, 8px);
}

.membro-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  padding: 0.7rem 0.35rem;
}

.lista-equipe .membro-linha {
  align-items: flex-start;
  padding: 0.85rem 1rem;
  row-gap: 0.55rem;
}

/* A identidade ocupa a linha inteira do cartão; o detalhe e o status vêm
   abaixo. Sem isto o nome disputaria espaço com o valor e quebraria em duas
   linhas num cartão de 360px. */
.lista-equipe .membro-identidade { flex: 1 1 100%; min-width: 0; }
.lista-equipe .membro-detalhe { flex: 1 1 auto; }

/* ⚠️ `margin-left: auto` fica, mas agora empurra dentro de 360px, não de 2200:
   as ações ficam à direita do próprio cartão. Era a distância que incomodava,
   não o alinhamento. */
.lista-equipe .acoes-linha { flex: 0 0 auto; }

.membro.bloqueado { opacity: 0.55; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font-size: 0.85rem; font-weight: 500; flex: 0 0 auto;
}
.membro-identidade { display: flex; flex-direction: column; min-width: 12rem; }
.membro-nome { display: flex; align-items: baseline; gap: 0.5rem; }
.membro-email { font-size: 0.78rem; color: var(--md-on-surface-variant); }
.membro-detalhe { flex: 1; }
.membro-linha .acoes-linha { margin-left: auto; }
#equipe-busca { width: 16rem; }
.saldo-negativo { color: var(--md-error); }
.situacao.aviso { color: var(--md-warning); }
.situacao.perigo-texto, .perigo-texto { color: var(--md-error); }

/* Tarefas: prioridade e itens. */
.prioridade {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em;
  padding: 0.1rem 0.5rem; border-radius: var(--canto-total);
}
.p-alta { background: var(--md-error-container); color: var(--md-on-error-container); }
.p-media { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.p-baixa { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }
.itens-tarefa { list-style: none; margin: 0.3rem 0; padding: 0; }
.itens-tarefa .texto { padding: 0.15rem 0.3rem; font-weight: 400; color: inherit; }
.itens-tarefa .feito .texto { color: var(--md-primary); text-decoration: line-through; }
.situacao-done { border-color: var(--md-primary); color: var(--md-primary); }
.bloco-progresso { text-transform: none; letter-spacing: normal; }
.verba-cod { min-width: 3.5rem; color: var(--md-on-surface-variant); font-size: 0.78rem; }
.item-execucao { margin-top: 0.6rem; }
.item-execucao label { text-transform: none; letter-spacing: normal; font-size: 0.85rem; }
/* ── Cores do sistema ───────────────────────────────────────────────────────
   ⚠️ Doze amostras de 44px espremidas numa grade de 190px, com o nome e a
   descrição disputando a mesma linha, liam-se como "um monte de quadradinho".
   A amostra cresce para 56px (é o objeto que se compara), o nome e a descrição
   empilham, e o hex vai embaixo em mono — todo número conferível contra outro
   documento vai em mono, e um código de cor é isso. */
.linha-cor {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--canto-p, 8px);
}
.linha-cor input[type="color"] {
  width: 56px; min-height: 48px; padding: 2px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--canto-p, 8px);
  background: none; cursor: pointer; flex: 0 0 auto;
}
.linha-cor > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.linha-cor .rotulo { margin-left: 0; }
.cor-hex {
  font-size: 0.72rem; color: var(--md-on-surface-variant);
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* ⚠️ O grupo do Banco de horas fecha como bloco unico a esquerda. Com o
   `margin-left: auto` herdado, o saldo e o botao "Lancar ajuste" iam para a
   borda oposta ao nome — e o clique na linha so recolhe o accordion, entao
   aquele botao era a unica acao. */
.banco-linha .linha-equipe-col { flex: 0 1 34rem; }
.banco-linha .linha-equipe-direita { margin-left: 0; }

/* ⚠️ 34rem SÃO 544px, E O TELEFONE TEM 304px DE FAIXA ÚTIL.
   O `flex-basis` acima agrupa o bloco em telas largas, e ali está certo. No
   compacto ele pede o dobro da largura que existe: com o `flex-wrap: wrap`
   herdado, avatar, coluna, saldo e botão quebravam em QUATRO ANDARES, e cada
   `<summary>` FECHADO passou a medir 232px.

   Medido a 412px: 45 accordions, todos fechados, somavam 10.491px — 95% da
   tela para mostrar 45 nomes e 45 saldos. Não havia volume de dado para culpar;
   era largura pedida que não existe.

   `flex: 1 1 auto` faz a coluna caber no que há, e o bloco volta a duas faixas.
   Medido depois: lista 8.221px (−22%), `#app` 11.082 → 8.812px, altura média do
   `<summary>` 181px. Uma grade explícita foi testada e deixava tudo uniforme em
   191px — mais bonito e 416px mais alto. Ganhou a correção da causa. */
@media (max-width: 37.49rem) {
  .banco-linha .linha-equipe-col { flex: 1 1 auto; }
}

/* ── DESLIGAMENTO ────────────────────────────────────────────────────────
   O diálogo é longo por natureza: motivo, datas, apuração e checklist são
   quatro assuntos numa decisão só. As seções existem para que ele seja LIDO
   em blocos, não varrido — quem conclui um desligamento precisa ter visto o
   que falta antes de clicar. */
.desligar-secao { margin-top: 1.25rem; }
.desligar-secao h4 {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 500;
}
.desligar-secao h4::after {
  content: ""; flex: 1; height: 1px; background: var(--md-outline-variant);
}
.desligar-contagem {
  font-family: var(--fonte-mono, monospace); font-size: 0.75rem;
  color: var(--md-on-surface-variant); order: 2;
}
.desligar-cartao {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--canto-m, 16px); padding: 0.9rem;
}
.desligar-cartao label { margin-top: 0.75rem; }
.desligar-cartao > label:first-child { margin-top: 0; }
.desligar-datas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.desligar-datas label { margin-top: 0.75rem; }

/* Segmented button do modo de aviso — os três modos são exclusivos e têm
   consequência jurídica diferente, então precisam ser vistos juntos. */
.desligar-segmentos {
  display: flex; border: 1px solid var(--md-outline); border-radius: 999px;
  overflow: hidden; align-self: flex-start; width: max-content; max-width: 100%;
}
.desligar-segmentos button {
  padding: 0.55rem 1rem; border: none; border-left: 1px solid var(--md-outline);
  background: transparent; color: var(--md-on-surface);
  font-size: 0.82rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  width: auto; margin: 0; border-radius: 0;
}
.desligar-segmentos button:first-child { border-left: none; }
.desligar-segmentos button[aria-pressed="true"] {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.desligar-segmentos button:disabled { opacity: 0.55; cursor: not-allowed; }

.desligar-verbas {
  list-style: none; margin: 0; padding: 0 0.9rem;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-m, 16px);
}
.desligar-verba {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--md-outline-variant);
}
.desligar-verba:last-child { border-bottom: none; }
.desligar-verba-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.desligar-verba-rotulo { font-size: 0.85rem; font-weight: 500; }
.desligar-verba-dica { font-size: 0.72rem; color: var(--md-on-surface-variant); text-wrap: pretty; }
/* ⚠️ Todo número conferível contra outro documento vai em mono. */
.desligar-verba-valor {
  font-family: var(--fonte-mono, monospace); font-size: 0.88rem; font-weight: 500;
  white-space: nowrap;
}
.desligar-verba-valor.alerta { color: var(--md-warning, #B26A00); }
.desligar-verba-valor.erro { color: var(--md-error); }

.desligar-prazo { margin: 0.6rem 0 0; font-size: 0.82rem; font-weight: 500; }
.desligar-prazo.alerta { color: var(--md-warning, #B26A00); }
.desligar-prazo.erro { color: var(--md-error); }

.desligar-rodape { flex-wrap: wrap; align-items: center; }
.desligar-status {
  flex: 1; min-width: 10rem; font-size: 0.78rem; text-wrap: pretty;
  color: var(--md-on-surface-variant);
}
.desligar-status.erro { color: var(--md-error); }
.desligar-status.alerta { color: var(--md-warning, #B26A00); }
.desligar-status.ok { color: var(--md-primary); }

/* ── FÉRIAS ──────────────────────────────────────────────────────────────
   A concessão (art. 134), não um tipo de ausência. O bloco de pendência tem
   peso visual de propósito: enquanto houver gozo sem período aquisitivo
   atribuído, a apuração de uma rescisão sai a maior — e quem vai concluir o
   desligamento precisa esbarrar nisso antes, não depois. */
.cabecalho-acoes { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.cabecalho-acoes button { width: auto; margin: 0; }

.ferias-notas {
  list-style: none; margin: 1.25rem 0 0; padding: 0.9rem 1rem;
  background: var(--md-surface-container-low);
  border-radius: var(--canto-m, 16px);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ferias-notas li {
  font-size: 0.76rem; color: var(--md-on-surface-variant); text-wrap: pretty;
  padding-left: 1rem; position: relative;
}
.ferias-notas li::before {
  content: "!"; position: absolute; left: 0; font-weight: 500;
  color: var(--md-warning, #B26A00);
}

.ferias-avisos {
  list-style: none; margin: 0.8rem 0 0; padding: 0.7rem 0.9rem;
  background: var(--md-surface-container-low);
  border-left: 3px solid var(--md-warning, #B26A00);
  border-radius: 0 var(--canto-p, 8px) var(--canto-p, 8px) 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.ferias-avisos li { font-size: 0.78rem; text-wrap: pretty; }

/* ⚠️ A PENDÊNCIA DA TRANSIÇÃO. Vermelha e no topo do bloco da pessoa: é o
   número que o produto assume não saber, e ele muda dinheiro numa rescisão. */
.ferias-pendencia {
  margin: 0.7rem 0; padding: 0.85rem 1rem;
  background: var(--md-error-container, #FFDAD6);
  color: var(--md-on-error-container, #410002);
  border-radius: var(--canto-m, 16px);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ferias-pendencia p { margin: 0; font-size: 0.78rem; text-wrap: pretty; }
.ferias-pendencia .destaque { font-weight: 500; font-size: 0.85rem; }
.ferias-pendencia button { width: auto; margin: 0; align-self: flex-start; }

.ferias-etiqueta {
  display: block; font-size: 0.7rem; font-style: italic;
  color: var(--md-on-surface-variant); text-wrap: pretty; margin-top: 0.15rem;
}

.linha-marca {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 0.9rem; font-weight: 400;
}
.linha-marca input { width: auto; min-height: auto; margin-top: 0.2rem; }
.linha-marca > span { display: flex; flex-direction: column; gap: 0.15rem; }

/* ── RECONFERÊNCIA E INFORMAÇÕES DA RESCISÃO ─────────────────────────────
   ⚠️ OS DOIS LADOS SEM HIERARQUIA VISUAL de "certo × errado": quem decide
   qual vale é o contador, não o software. Por isso as duas colunas têm o
   mesmo peso, a mesma cor e o mesmo tamanho — a tela apresenta a divergência,
   não a julga. */
.desligar-informacoes {
  list-style: none; margin: 0.7rem 0 0; padding: 0.75rem 0.9rem;
  background: var(--md-surface-container-low);
  border-radius: var(--canto-m, 16px);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.desligar-informacao { display: flex; align-items: center; gap: 0.75rem; }
.desligar-informacao .desligar-verba-texto { flex: 1; min-width: 0; }

.desligar-reconferencia {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--canto-m, 16px);
  padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  align-items: flex-start;
}
.desligar-reconferencia.diverge { border-color: var(--md-warning, #B26A00); }
.desligar-reconferencia-texto {
  margin: 0; font-size: 0.82rem; text-wrap: pretty;
  color: var(--md-on-surface-variant);
}
.desligar-reconferencia-lados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem; width: 100%;
}
.desligar-lado {
  background: var(--md-surface-container-low);
  border-radius: var(--canto-p, 12px);
  padding: 0.7rem 0.85rem;
}
.desligar-lado-rotulo {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--md-on-surface-variant);
}
.desligar-lado-valor {
  margin: 0.25rem 0 0; font-family: var(--fonte-mono, monospace);
  font-size: 0.9rem; font-weight: 500;
}
.desligar-reconferencia button { width: auto; margin: 0; }

/* A natureza do vínculo, dita como fato no diálogo de edição — nunca como
   campo. Ela é escolhida na admissão e vale para tudo o que o vínculo já
   registrou; trocá-la reescreveria a natureza jurídica do histórico. */
.natureza-vinculo {
  margin: 0.5rem 0 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--md-surface-container-low);
  border-radius: var(--canto-p, 12px);
  font-size: 0.76rem;
  color: var(--md-on-surface-variant);
  text-wrap: pretty;
}
.natureza-vinculo strong { color: var(--md-on-surface); font-weight: 500; }

/* ⚠️ A PENDÊNCIA GRITA MAIS QUE O RESTO. Ela não é "mais um alerta": é o
   produto dizendo que não sabe uma coisa que muda dinheiro numa rescisão. Com
   o mesmo tom dos outros avisos, some no meio deles. */
.alerta-pendencia {
  background: var(--md-error-container, #FFDAD6);
  color: var(--md-on-error-container, #410002);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

/* O bloco de contato no diálogo de edição — separado do "combinado" porque é
   dado da PESSOA, que vale em todas as empresas onde ela trabalha, e não do
   vínculo com esta casa. */
.bloco-contato {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--canto-m, 16px);
  background: var(--md-surface-container-lowest);
}
.bloco-contato legend {
  padding: 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bloco-contato label:first-of-type { margin-top: 0; }

/* As sessões que compõem um dia — recuadas sob ele, porque são o detalhe do
   número que está acima, e é nelas que se corrige o que foi lançado errado. */
.sessao-do-dia {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0 0.35rem 1.4rem;
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  border-bottom: 1px solid var(--md-outline-variant);
}
.sessao-do-dia:last-child { border-bottom: none; }
.sessao-do-dia .rotulo:first-child { flex: 1; min-width: 0; }
.sessao-do-dia button { width: auto; margin: 0; padding: 0.2rem 0.5rem; font-size: 0.76rem; }

/* ═══ CONTROLE DE LAYOUT — painéis e densidade ═════════════════════════════
   ⚠️ ELE VIVE NO TOPO, e não dentro de Configurações, porque é ajuste de
   POSTURA, não de regra: a pessoa mexe nele no meio da tarefa, olhando para o
   que quer mudar. Enterrado numa tela de configuração, seria usado uma vez e
   esquecido — e o painel voltaria a servir mal os dois turnos. */
.menu-ancora { position: relative; display: inline-flex; }

.botao-topo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none; border: none; border-radius: 50%;
  color: var(--md-on-surface-variant); cursor: pointer;
  transition: background 140ms ease;
}
.botao-topo:hover { background: var(--md-surface-container-low); }
.botao-topo[aria-expanded="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.menu-flutuante {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.85rem 0.9rem 0.6rem;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  box-shadow: var(--md-el2, 0 8px 24px -8px rgba(25, 29, 24, .35));
  /* A lista de painéis de uma tela cheia pode passar da janela; o menu rola
     por dentro em vez de empurrar o rodapé para fora. */
  max-height: min(70vh, 32rem); overflow-y: auto;
}
.menu-titulo {
  margin: 0.5rem 0 0.4rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--md-on-surface-variant);
}
.menu-titulo:first-child { margin-top: 0; }

.menu-densidade { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.densidade-opcao {
  padding: 0.5rem 0.6rem;
  background: none; border: 1px solid var(--md-outline-variant);
  border-radius: var(--canto-total, 999px);
  color: inherit; font: inherit; font-size: 0.82rem; cursor: pointer;
}
.densidade-opcao.ativa {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}

.menu-paineis { display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.2rem; font-size: 0.88rem; cursor: pointer;
  border-radius: var(--canto-p, 8px);
}
.menu-item:hover { background: var(--md-surface-container-low); }
.menu-item input { accent-color: var(--md-primary); width: 18px; height: 18px; }
.menu-vazio {
  margin: 0.2rem 0 0.4rem; font-size: 0.82rem;
  color: var(--md-on-surface-variant);
}
.link-menu {
  width: 100%; margin-top: 0.35rem; padding: 0.45rem 0.2rem;
  background: none; border: none; border-top: 1px solid var(--md-outline-variant);
  color: var(--md-primary); font: inherit; font-size: 0.82rem;
  text-align: left; cursor: pointer;
}
.link-menu:hover { text-decoration: underline; }

/* ⚠️ A DENSIDADE PRECISA CHEGAR AOS RESPIROS, senão o botão troca o token e a
   tela não muda — o pior tipo de controle, o que parece funcionar. O `#app` é
   onde o respiro do miolo mora; os cartões seguem o mesmo par. */
#app { padding: var(--densidade-respiro) calc(var(--densidade-respiro) * 1.15) calc(var(--densidade-respiro) * 1.3); }
:root[data-densidade="compacta"] .card-visao { padding: 0.7rem 0.85rem; margin-top: 0.7rem; }
:root[data-densidade="compacta"] .kpi { padding: 0.7rem 0.8rem; }
:root[data-densidade="compacta"] .kpis { gap: var(--densidade-gap); margin-top: var(--densidade-gap); }
:root[data-densidade="compacta"] .visao-colunas.duas { gap: var(--densidade-gap); margin-top: var(--densidade-gap); }
:root[data-densidade="compacta"] .linha-equipe-abrir { padding: 0.4rem 0.3rem; }
:root[data-densidade="compacta"] .evento { padding: 0.28rem 0; }

/* ═══ A NATUREZA DA TELA TEM COR ═══════════════════════════════════════════
   ⚠️ ISTO NÃO É DECORAÇÃO: É O INVARIANTE 6 VIRANDO SINAL VISUAL.
   
   Vocabulário CLT ≠ vocabulário de prestador, e misturar os dois é indício de
   vínculo empregatício. A separação já existia nas palavras — batida × sessão,
   espelho × recibo — e agora existe também na cor, que é o que o olho lê antes
   de qualquer texto.
   
   E há uma segunda razão, mais dura: as telas CLT produzem os arquivos que a
   FISCALIZAÇÃO lê (AFD tipo 7, AEJ, Portaria MTP 671/2021). Quem está numa
   delas precisa saber, sem ler nada, que o que faz ali vira registro legal.
   
   ⚠️ A CONVENÇÃO VEM DOS SELOS, que já existiam e já eram lidos assim:
     `.natureza`        → verde  (`--lupulo-caixa`)  = CLT
     `.natureza.freela` → âmbar  (`--malte-caixa`)   = prestador
   Inverter agora faria o selo CLT verde aparecer dentro de uma tela verde de
   prestador — a mesma cor significando duas coisas na mesma tela. */
:root {
  --natureza-clt: var(--md-primary);
  --natureza-clt-fraca: var(--md-primary-container);
  --natureza-freela: var(--md-warning);
  --natureza-freela-fraca: var(--md-warning-container);
  --natureza-mista: var(--md-outline-variant);
}


/* ⚠️ A FAIXA SOZINHA NÃO BASTA numa tela cheia de cartão colorido — o olho a
   perde. O classificador acima do título carrega a mesma cor e diz, por
   escrito, o que a faixa sinaliza. Cor sem legenda é adivinhação; legenda sem
   cor não se lê de longe. As duas juntas. */
.tela[data-natureza] .eyebrow { color: var(--natureza-mista); }
.tela[data-natureza="clt"] .eyebrow { color: var(--natureza-clt); }
.tela[data-natureza="freela"] .eyebrow { color: var(--natureza-freela); }

/* ⚠️ O SELO DA NATUREZA, ao lado do título. Ele é o que transforma a cor em
   informação verificável: "esta tela vira arquivo do MTE" é uma afirmação, e
   afirmação sem texto não se confere. */
.selo-natureza {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-left: 0.7rem; padding: 0.18rem 0.7rem;
  border-radius: var(--canto-total, 999px);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  vertical-align: middle;
  background: var(--md-surface-container-low); color: var(--md-on-surface-variant);
}
.selo-natureza .msr { font-size: 14px; }
.tela[data-natureza="clt"] .selo-natureza {
  background: var(--natureza-clt-fraca); color: var(--md-on-primary-container);
}
.tela[data-natureza="freela"] .selo-natureza {
  background: var(--natureza-freela-fraca); color: var(--sobre-malte-caixa);
}

/* ⚠️ O MENU TAMBÉM MARCA, e é o único lugar onde as três naturezas aparecem
   LADO A LADO — é ali que a convenção se aprende. Um traço de 3px na borda
   esquerda do item, que sobrevive ao colapso (a borda não depende do rótulo). */
.drawer .aba[data-natureza] { border-left: 3px solid transparent; }
.drawer .aba[data-natureza="clt"] { border-left-color: var(--natureza-clt); }
.drawer .aba[data-natureza="freela"] { border-left-color: var(--natureza-freela); }

/* ═══ O FUNDO ACOMPANHA O MÓDULO ═══════════════════════════════════════════
   ⚠️ É O FUNDO QUE MUDA, NÃO OS CARTÕES — e a distinção é o desenho.
   
   Cartão, campo e menu tiram a cor do TEMA (`--md-surface-*`): trocá-la por
   natureza seria mudar a identidade do produto a cada clique, e o olho leria
   como instabilidade, não como informação. O fundo é a moldura do ambiente:
   ele banha a tela inteira sem competir com dado nenhum, porque não há texto
   sobre ele — o texto mora nos cartões, que continuam com a superfície do tema
   e o contraste que ela garante.
   
   ⚠️ AS TRÊS CORES TÊM A MESMA SATURAÇÃO E A MESMA LUMINOSIDADE do fundo
   original (#F6FBF4 — S 47%, L 97%); só o MATIZ muda, e ele vem da cor que já
   significa aquela natureza nos selos. Trocar de módulo muda a TEMPERATURA da
   tela, nunca o brilho: fundos de pesos diferentes fariam uma tela parecer
   mais "acesa" que a outra, e isso se lê como hierarquia — que não existe
   entre CLT e prestador. */
:root {
  /* ⚠️ A SATURAÇÃO FOI MEDIDA, NÃO ESCOLHIDA NO OLHO.
     
     A primeira versão copiou S e L do fundo original (47%/97%) e rendeu ΔE de
     3,55 entre CLT e prestador — perceptível LADO A LADO, fraco demais para o
     caso real, que é comparar DE MEMÓRIA: a pessoa vê uma tela, navega, e vê
     outra. Sem as duas juntas, o olho precisa de folga maior.
     
     S=60% L=94% rende ΔE ≈ 9,5 — dentro da faixa em que a diferença se
     reconhece sem comparação. E o preço foi conferido: texto forte 15,6:1 e
     fraco 8,5:1 sobre o fundo (AA pede 4,5:1), com o cartão branco ainda
     ganhando o degrau visual sobre ele.
     
     ⚠️ L idêntico nas três é inegociável: brilho diferente se lê como
     hierarquia, e não existe hierarquia entre CLT e prestador. */
  --fundo-clt: #E9F9E7;        /* matiz 111, do --md-primary */
  --fundo-freela: #F9F1E7;     /* matiz 34, do --md-warning */
  --fundo-mista: #EFF1EE;      /* mesma família, quase sem cor */
}

/* A transição mora AQUI, sobre a variável registrada — não sobre o
   `background` de quem a consome. */
:root { transition: --fundo-do-modulo 220ms var(--mola-viva); }

:root[data-modulo="clt"] { --fundo-do-modulo: var(--fundo-clt); }
:root[data-modulo="freela"] { --fundo-do-modulo: var(--fundo-freela); }
:root[data-modulo="mista"] { --fundo-do-modulo: var(--fundo-mista); }

/* ⚠️ QUEM PREFERE MENOS CONTRASTE NÃO PODE PERDER A INFORMAÇÃO. Com
   `prefers-contrast: less` o fundo volta ao neutro do tema, e o selo com o
   texto continua lá — é ele que carrega o significado, e por isso a cor nunca
   foi o único sinal. */
@media (prefers-contrast: less) {
  :root[data-modulo] { --fundo-do-modulo: var(--md-surface); }
}

/* ⚠️ O BOTÃO DE ENCERRAR SE DISTINGUE DOS OUTROS, e não por estética: ele é o
   único da fileira que FECHA UM VALOR. O tempo apurado vira dinheiro a pagar, e
   o preço congelou na abertura — clicar sem querer produz o número que vai para
   o recibo. Os irmãos ao lado (Cadastro, Relatório, Editar) são navegação.
   Contorno âmbar porque é ação de prestador; preenchido cheio competiria com o
   primário "Editar". */
.acao-encerrar {
  border-color: var(--malte);
  color: var(--malte);
}
.acao-encerrar:hover {
  background: var(--malte-caixa);
  color: var(--sobre-malte-caixa);
}

/* ⚠️ BLOCO DE UMA NATUREZA SÓ, DENTRO DE UMA TELA MISTA.
   
   Das 14 abas, 5 são CLT e 9 mistas — NENHUMA é de prestador. Por isso o âmbar
   quase não aparecia na navegação, e quem entrava no painel via verde e cinza.
   A saída não é dividir a navegação (a separação por natureza já é profunda: 15
   guardas no servidor, 55 pontos no JS, o invariante 6): é marcar o BLOCO que
   pertence a uma natureza só, dentro da tela que serve às duas.
   
   Faixa lateral de 3px, não fundo tingido: dentro de uma tela mista já há
   cartões, tabelas e números disputando atenção — tingir o bloco inteiro
   competiria com o dado. A faixa diz "isto aqui é de prestador" sem tirar
   contraste de nada. */
.card-visao[data-natureza] { border-left: 3px solid var(--natureza-mista); }
.card-visao[data-natureza="clt"] { border-left-color: var(--natureza-clt); }
.card-visao[data-natureza="freela"] { border-left-color: var(--natureza-freela); }

/* ── As abas da ficha da pessoa ──────────────────────────────────────────────
   Segundo nível por abas, não por rolagem: a ficha empilhava numa coluna só os
   números do mês, dois gráficos, o corte de pagamento, duas listas e o espelho
   inteiro.

   ⚠️ A classe é própria, NUNCA `hidden`: `hidden` já pertence ao vínculo (é ele
   que decide se um bloco é de CLT ou de prestador), e dois controles no mesmo
   atributo se atropelariam — a aba reapareceria com o bloco do vínculo errado
   dentro. */
.secao-oculta { display: none !important; }

/* O cartão que o gestor desligou no menu de painéis. Classe, e não `hidden`:
   `hidden` pertence ao vínculo, e disputar o mesmo atributo já fez o corte de
   pagamento do prestador reaparecer na ficha de um empregado. */
.painel-oculto { display: none !important; }

.abas-ficha {
  display: flex;
  gap: 8px;  /* a doutrina do espaçamento: três destinos diferentes */
  margin: 16px 0 8px;
  border-bottom: 1px solid var(--md-outline-variant);
  overflow-x: auto;
}

.aba-ficha {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  /* 48px de alvo: a mesma régua do coletor, para quem opera de pé. */
  min-height: 48px;
  padding: 0 16px;
  white-space: nowrap;
}

.aba-ficha:hover { background: var(--md-surface-container-low); }

.aba-ficha[aria-selected="true"] {
  border-bottom-color: var(--md-primary);
  color: var(--md-primary);
}

.aba-ficha:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}

/* ── O nome que abre a ficha ─────────────────────────────────────────────────
   Sete telas listavam pessoas com o nome em `<strong>` inerte: para abrir a
   ficha de alguém que já estava na tela era preciso ir até Equipe e caçar o
   ícone. O nome vira botão onde o servidor manda `membership_id`.

   Parece texto — é o nome da pessoa, não um controle —, mas sublinha e muda de
   cor no hover, e tem foco visível para quem navega por teclado. */
.nome-que-abre {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.nome-que-abre:hover { color: var(--md-primary); text-decoration: underline; }
.nome-que-abre:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--canto-p, 8px);
}

/* ── Item de sim/nao na execucao do checklist ────────────────────────────────
   Era um campo de texto com placeholder "sim / nao": cada pessoa escrevia o que
   queria ("s", "ok", "Sim", "N"), e o historico ficava sem valor comparavel. */
.execucao-binario { display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.execucao-opcao { min-height: 48px; flex: 0 0 auto; }
.execucao-opcao[aria-pressed="true"] {
  background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary);
}

/* ⚠️ ERRO NAO E AVISO, e o painel usava o mesmo toast discreto para os dois.
   "Salvo" e "Nao foi possivel concluir a operacao" apareciam com o mesmo fundo
   escuro, no mesmo canto, sumindo nos mesmos seis segundos. Num monitor de
   2560px o canto inferior direito esta na periferia da visao de quem opera no
   centro: a pessoa clica, nao ve a mensagem, e conclui que funcionou. */
.aviso-texto { flex: 1; }

.aviso-erro {
  background: var(--md-error-container, #FFDAD6);
  color: var(--md-on-error-container, #410E0B);
  border-left: 4px solid var(--md-error);
  box-shadow: var(--md-el3, 0 8px 24px rgba(0, 0, 0, 0.24));
}
.aviso-erro .msr { color: var(--md-error); font-size: 22px; flex: 0 0 auto; }

.aviso-fechar {
  flex: 0 0 auto; min-height: 48px; min-width: 48px;
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 1rem; line-height: 1;
}
.aviso-fechar:hover { background: rgba(0, 0, 0, 0.08); border-radius: var(--canto-total); }

/* ⚠️ A RESSALVA DO KPI E CONSULTA, NAO MANCHETE. Eram 380 caracteres impressos
   no cartao — onze linhas de letra miuda embaixo de um numero de cinco
   caracteres, o oposto de um indicador. Quem olha um KPI esta decidindo; quem
   quer conferir a conta clica. */
.kpi-hint {
  align-self: start; margin-top: 0.4rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 48px; padding: 0 0.4rem;
  border: 0; background: none; color: var(--md-primary);
  font: inherit; font-size: 0.75rem; cursor: pointer;
}
.kpi-hint:hover { text-decoration: underline; }
.kpi-hint .msr { font-size: 18px; }
.kpi-ressalva {
  margin: 0.2rem 0 0; max-width: 46ch;
  font-size: 0.72rem; line-height: 1.45;
  color: var(--md-on-surface-variant);
}

/* ═══ A VISAO GERAL CABE NUMA TELA ═════════════════════════════════════════
   Ela empilhava seis blocos numa coluna so: cabecalho, quatro KPIs, "precisa
   da sua decisao", avisos, as duas listas e o banner de fechamento. Num
   monitor de 2560x1600 isso desperdicava a largura E estourava a altura — a
   pessoa rolava para ver a equipe enquanto metade da tela ficava vazia ao
   lado.

   ⚠️ A REGRA E A MESMA DA DOUTRINA DO GRID, aplicada uma camada acima: a
   largura vira MAIS BLOCOS LADO A LADO, nao blocos mais largos. O cabecalho e
   os KPIs continuam em faixa (sao leitura horizontal); o miolo se divide.

   A tela e a UNICA do painel que ganha isto, e de proposito: ela existe para
   ser lida de relance, no meio do turno. As outras treze sao de trabalho, com
   uma tarefa por vez, e dividi-las seria dispersao. */
@media (min-width: 100rem) {
  #tela-visao {
    display: grid;
    align-content: start;
    gap: 1rem 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "cabecalho cabecalho"
      "kpis      kpis"
      "venda     venda"
      "decisoes  listas"
      "avisos    listas"
      "banner    banner";
  }

  #tela-visao > [data-area="cabecalho"] { grid-area: cabecalho; }
  #tela-visao > [data-area="kpis"]      { grid-area: kpis; }
  #tela-visao > [data-area="decisoes"]  { grid-area: decisoes; }
  #tela-visao > [data-area="avisos"]    { grid-area: avisos; margin-top: 0; }
  #tela-visao > [data-area="listas"]    { grid-area: listas; align-content: start; }
  #tela-visao > [data-area="venda"]     { grid-area: venda; margin-top: 0; }
  #tela-visao > [data-area="banner"]    { grid-area: banner; }

  /* ⚠️ `hidden` VENCE A GRADE. Um filho de grid com `hidden` continua
     ocupando a trilha se algo lhe der `display` — e "precisa da sua decisao"
     e o banner nascem escondidos. Sem isto, a coluna esquerda abriria com um
     vao do tamanho de um cartao invisivel. */
  #tela-visao > [hidden] { display: none; }
}

/* ⚠️ INDICADOR E ACAO NAO MORAM NO MESMO CARTAO. O campo de lancar faturamento
   vivia dentro do KPI de custo sobre a venda: dez filhos num cartao de
   indicador, 233px de conteudo. Como a grade iguala alturas, os outros tres
   KPIs — com 81px cada — eram esticados para 322px. Tres cartoes quase vazios
   do tamanho de um paragrafo. */
.faixa-venda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2rem;
  margin-top: 0.9rem; padding: 0.6rem 1rem;
  border: 1px solid var(--md-outline-variant); border-radius: var(--canto-m);
}
.faixa-venda-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; }
.faixa-venda-lancar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-left: auto; }
.faixa-venda-lancar .venda-rotulo { margin: 0; }
.faixa-venda .kpi-hint { margin-top: 0; }
.faixa-venda .kpi-ressalva { flex: 1 1 100%; }