/* ============================================================
   Componentes do sistema.

   O handoff é um protótipo com tudo em `style=""` — é como aquela ferramenta
   exporta. Aqui vira classe, por um motivo que aparece na terceira tela: o
   protótipo repete o mesmo bloco de 240 caracteres de estilo em cada um dos
   ~40 botões de ação de linha. Trocar a cor de foco significaria 40 edições, e
   a 41ª ficaria diferente sem ninguém notar.

   A regra que organiza este arquivo: um componente do handoff = uma classe.
   `tab(on)`, `chip(kind)` e o botão de ícone 28×28 são os três que aparecem em
   todas as telas, e são os três primeiros aqui.
   ============================================================ */

* { box-sizing: border-box; }

/* `hidden` precisa esconder — sempre.
   
   O navegador aplica `[hidden] { display: none }` na folha dele, que QUALQUER
   regra de autor com `display` vence. `.form__campo { display: flex }` fazia
   exatamente isso: o campo de distrato recebia `hidden = true`, o formulário
   parava de ler e de validar o valor dele, e a caixa continuava na tela —
   aceitando uma data que depois era descartada em silêncio.
   
   O `!important` é o ponto: sem ele, a próxima regra de `display` que alguém
   escrever reabre o buraco, e o sintoma aparece longe da causa. Havia um
   remendo pontual (`.perm-sub[hidden]`) de quando isto mordeu pela primeira
   vez; agora vale para tudo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fonte-corpo);
}

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

h1, h2, h3, .titulo { font-family: var(--fonte-titulo); font-weight: 600; margin: 0; }

/* ------------------------------------------------------------ barra lateral */

.lateral {
  /* Em rem para acompanhar a escala do texto (248px na base de 16px);
     o teto em vw impede a gaveta de engolir a tela toda no celular. */
  width: min(15.5rem, 85vw);
  flex-shrink: 0;
  background: var(--lateral);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
}

.lateral__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 10px 8px;
}
/* O logo.png foi recortado (era 500×500 com ~30% de transparência em cima e
   embaixo); a largura caiu junto para o tamanho VISÍVEL não mudar. */
.lateral__marca img { width: 6.25rem; object-fit: contain; }
/* 0.9091rem × base de 22px = 20px. */
.lateral__saudacao { font-size: 0.9091rem; font-weight: 700; color: var(--lateral-muted); line-height: 1; margin-top: 10px; }

.lateral__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.5625rem 0.75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8438rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: oklch(0.75 0.01 260);
  width: 100%;
}
.nav-item:hover { background: var(--lateral-hover); color: #fff; }
.nav-item[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 600; }
/* Em rem, como o texto: com o tamanho no atributo (px), aumentar a escala do
   sistema crescia a letra e deixava o ícone para trás. */
.nav-item svg { flex-shrink: 0; width: 1.0625rem; height: 1.0625rem; }

/* Sub-item da árvore de Clientes (Empresas Parceiras, Coordenadores).
   Sem recuo: tudo numa coluna só — a hierarquia fica por conta da letra
   menor e da cor mais apagada (decisão de 2026-08-16). */
.nav-item--sub { font-size: 0.8125rem; color: oklch(0.68 0.01 260); }
.nav-item--sub[aria-current="page"] { background: var(--lateral-sub); color: #fff; }

.lateral__rodape {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--lateral-borda);
  padding-top: 10px;
}
.lateral__versao {
  padding: 10px 12px 0;
  font-size: 0.6875rem;
  color: oklch(0.55 0.01 260);
  text-align: center;
}

/* -------------------------------------------------------------- área central */

.principal { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.topo__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.125rem; flex: 1; }

.busca-global {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  padding: 8px 14px;
  /* Largura em `ch`, e não em px: assim ela acompanha o tamanho do texto. Com
     280px fixos, o aumento da fonte quebrou o rótulo em duas linhas e o campo
     ficou com 55px de altura no meio da barra. */
  width: 34ch;
  white-space: nowrap;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8438rem;
  cursor: pointer;
  text-align: left;
}
.busca-global:hover { border-color: var(--accent); }
.busca-global kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.6875rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

.avatar {
  width: 38px; height: 38px;
  border-radius: var(--raio-btn);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.875rem;
  flex-shrink: 0;
}

.conteudo { flex: 1; overflow: auto; padding: 28px 32px; }
.tela {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--largura-conteudo);
}
.tela--espacada { gap: 28px; }

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

.btn {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8438rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn--primario { border-color: transparent; background: var(--accent); color: #fff; }
.btn--primario:hover { background: var(--accent-hover); border-color: transparent; color: #fff; }

.btn--pequeno { padding: 8px 14px; font-size: 0.7812rem; border-radius: 9px; }
.btn--link {
  align-self: flex-start;
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 0.8438rem; font-weight: 600; cursor: pointer;
}
.btn--link:hover { background: none; color: var(--accent-hover); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-icone {
  /* Em rem (28px → 34px na base atual) e com o desenho interno maior junto —
     pedido de 2026-08-16 para os botões da coluna Ações. */
  width: 1.55rem; height: 1.55rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
}
.btn-icone svg { width: 0.9rem; height: 0.9rem; }
/* A cor do hover carrega o significado da ação — ver = informação,
   editar/excluir = ação de peso, enviar = conclusão. */
.btn-icone:hover            { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-icone--ver:hover       { border-color: var(--info);   color: var(--info);   background: var(--info-soft); }
.btn-icone--enviar:hover    { border-color: var(--ok);     color: var(--ok);     background: var(--ok-soft); }
.btn-icone[disabled] { opacity: .35; cursor: not-allowed; }
.btn-icone[disabled]:hover { border-color: var(--border); color: var(--muted); background: transparent; }

.acoes-linha { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* --------------------------------------------------------------------- abas */

.abas { display: flex; gap: 8px; align-items: center; }

/*
   A trilha das abas: QUEBRA DE LINHA.

   Já foi `nowrap` + rolagem, e a rolagem tinha um defeito próprio: com a barra
   escondida, "tem mais para o lado" e "acabou" ficavam idênticos, e a aba
   cortada na borda parecia uma aba sumida. Ganhou setas e desbotado nas pontas
   para dizer que dava para rolar.

   A escolha do dono foi outra, e é mais simples: **nenhuma aba escondida**.
   Quebrando a linha, todas ficam visíveis de uma vez — não há o que rolar, nem
   o que sinalizar. O que tornou isso viável foi tirar a aba "Relatórios", que
   só repetia um item do menu lateral.

   O custo é a barra ocupar duas linhas em janela estreita. É um custo visível,
   ao contrário do anterior, que era uma aba que ninguém sabia existir.
*/
.abas__trilho {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.abas__trilho > .aba { flex-shrink: 0; }

/* No celular, o seletor nativo entra no lugar da trilha. */
.abas__seletor { display: none; }

@media (max-width: 720px) {
  .abas__trilho { display: none; }
  .abas__seletor {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--raio-btn);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
  }
  /* O botão de ação que algumas telas põem à direita das abas passa a ocupar
     a linha inteira embaixo — espremido ao lado do seletor, ficaria ilegível. */
  .abas { flex-wrap: wrap; }
  .abas > .empurra { width: 100%; margin-left: 0; }
}
.aba {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8438rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.aba:hover { border-color: var(--accent); color: var(--accent); }
.aba[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -------------------------------------------------------------------- chips */

.chip {
  font-size: 0.7188rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
  /* Filho direto de flex vira bloco e, com o `align-items: stretch` que é o
     padrão, estica até a altura do vizinho — o selo vira uma elipse alta com
     o texto escapando por cima. Fixar aqui evita repetir `align-items` em
     cada container que exibe um chip. */
  align-self: center;
  background: var(--surface2);
  color: var(--muted);
}
.chip--ok   { background: var(--ok-soft);     color: var(--ok); }
.chip--warn { background: var(--warn-soft);   color: var(--warn); }
.chip--info { background: var(--info-soft);   color: var(--info); }
.chip--acc  { background: var(--accent-soft); color: var(--accent); }

.ponto {
  width: 9px; height: 9px;
  border-radius: 99px;
  flex-shrink: 0;
  display: inline-block;
  background: var(--muted);
  box-shadow: 0 0 0 4px var(--surface2);
}
.ponto--ok   { background: var(--ok);     box-shadow: 0 0 0 4px var(--ok-soft); }
.ponto--warn { background: var(--warn);   box-shadow: 0 0 0 4px var(--warn-soft); }
.ponto--info { background: var(--info);   box-shadow: 0 0 0 4px var(--info-soft); }
.ponto--acc  { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.card__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.9375rem; flex: 1; }
.card__corpo { padding: 20px; }

.vazio {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}
.vazio__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 6px;
}

/* ------------------------------------------------------------------ KPI card */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
.kpis--4 { grid-template-columns: repeat(4, 1fr); }
/* Entre o celular e a tela cheia, quatro colunas espremem "R$ 70.580,00" a
   ponto de quebrar no meio do número. Duas por duas cabem. */
@media (max-width: 1100px) {
  .kpis--4 { grid-template-columns: repeat(2, 1fr); }
}
.kpis--3 { grid-template-columns: repeat(3, 1fr); }
.kpis--2 { grid-template-columns: repeat(2, 1fr); }

.kpi {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-alto); }
.kpi--acc:hover  { border-color: var(--accent); }
.kpi--warn:hover { border-color: var(--warn); }
.kpi--info:hover { border-color: var(--info); }
.kpi--ok:hover   { border-color: var(--ok); }

.kpi__cabeca { display: flex; align-items: center; gap: 10px; }
.kpi__icone {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--surface2);
  color: var(--muted);
}
.kpi--acc  .kpi__icone { background: var(--accent-soft); color: var(--accent); }
.kpi--warn .kpi__icone { background: var(--warn-soft);   color: var(--warn); }
.kpi--info .kpi__icone { background: var(--info-soft);   color: var(--info); }
.kpi--ok   .kpi__icone { background: var(--ok-soft);     color: var(--ok); }

.kpi__rotulo { font-size: 0.7812rem; color: var(--muted); font-weight: 600; letter-spacing: .01em; }
.kpi__linha { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kpi__numero {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 2.125rem;
  line-height: 1;
  letter-spacing: -.02em;
}
.kpi__nota { font-size: 0.7188rem; color: var(--muted); margin-top: 8px; }

.barra { height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden; margin-top: 18px; display: flex; }
.barra > span { height: 100%; }

/* KPI simples do financeiro/inspeções — sem gráfico, só rótulo e número. */
.kpi-simples {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-card);
  padding: 20px;
  box-shadow: var(--shadow);
}
.kpi-simples__rotulo { font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.kpi-simples__valor {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.75rem;
  margin-top: 6px;
}
.kpi-simples__nota { font-size: 0.7812rem; color: var(--muted); margin-top: 2px; }

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

.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.8438rem; }
.tabela th {
  text-align: left;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabela td { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.tabela tbody tr:hover { background: var(--surface2); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .forte { font-weight: 600; }
.tabela .fraco { color: var(--muted); }
/* `center` e não `right`: o cabeçalho fica sobre os ícones em vez de encostado
   na borda. `width: 1%` faz a coluna encolher até o conteúdo, então centralizar
   aqui é centralizar sobre os botões — que é o que se quer. */
.tabela .col-acoes { text-align: center; white-space: nowrap; width: 1%; padding-right: 12px; }
/* Os botões acompanham o cabeçalho: alinhados à direita eles ficariam fora do
   eixo do rótulo, e a coluna pareceria torta. */
.tabela .col-acoes .acoes-linha { justify-content: center; }
.tabela tr.clicavel { cursor: pointer; }

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

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.campo, .filtros select, .filtros input {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8438rem;
}
.campo:focus, .filtros select:focus, .filtros input:focus {
  outline: none;
  border-color: var(--accent);
}

.busca { position: relative; max-width: 360px; width: 100%; }
.busca svg {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.busca input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8438rem;
}
.busca input:focus { outline: none; border-color: var(--accent); }

.linha-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.empurra { margin-left: auto; }

/* As ações no topo de uma PÁGINA ficam lado a lado e maiores que as da coluna
   "Ações" de uma tabela. São outra coisa: ali há uma por linha e o alvo é
   pequeno de propósito, para caberem quatro; aqui são as duas decisões do
   documento aberto, e empilhadas num canto elas somem. */
.linha-topo > .empurra {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.linha-topo > .empurra .btn-icone { width: 2.3rem; height: 2.3rem; }
.linha-topo > .empurra .btn-icone svg { width: 19px; height: 19px; }

/* --------------------------------------------------------- grade de presença */

.grade-legenda { display: flex; gap: 18px; font-size: 0.7812rem; color: var(--muted); align-items: center; flex-wrap: wrap; }
.grade-legenda > span { display: flex; align-items: center; gap: 6px; }
.marca {
  width: 18px; height: 18px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 0.6875rem;
  background: var(--surface2);
  color: var(--muted);
}
.marca--ok   { background: var(--ok-soft);     color: var(--ok); }
.marca--acc  { background: var(--accent-soft); color: var(--accent); }
.marca--info { background: var(--info-soft);   color: var(--info); }

.tabela--grade th, .tabela--grade td { padding: 8px 4px; text-align: center; min-width: 30px; }
.tabela--grade th:first-child, .tabela--grade td:first-child {
  padding: 12px 20px; text-align: left; min-width: 220px;
}
.tabela--grade th:last-child, .tabela--grade td:last-child { padding: 12px 20px; text-align: right; }

/* ------------------------------------------------------------------ formulário */

.form { display: flex; flex-direction: column; gap: 16px; }
.form__campo { display: flex; flex-direction: column; gap: 6px; }
.form__campo label { font-size: 0.8125rem; font-weight: 600; }
.form__campo input, .form__campo select, .form__campo textarea {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
}
.form__campo input:focus, .form__campo select:focus { outline: none; border-color: var(--accent); }

.erro-form {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--raio-btn);
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
}

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

.login { flex: 1; display: flex; min-height: 100vh; }
.login__capa {
  /* Cresce com o que sobrar. Quem manda na divisória é a largura do
     formulário, logo abaixo — assim o painel escuro fica mais largo nas telas
     grandes sem que ninguém precise recalcular porcentagem. */
  flex: 1 1 auto;
  background: linear-gradient(to top, oklch(0.15 0.02 260 / .97), oklch(0.15 0.02 260 / .85)), var(--lateral);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 64px;
}
/* A coluna de conteúdo (logo, frase, rodapé) fica CENTRADA na capa; o texto
   segue alinhado à esquerda dentro dela. A largura acompanha a da frase. */
.login__capa > * { width: fit-content; max-width: 100%; margin-inline: auto; }
.login__marca {
  /* Maior e centrada sobre a frase (pedido de 2026-08-16); o tamanho ocupa
     o vazio vertical da capa em vez de deixá-lo em volta. */
  width: clamp(170px, 13.5vw, 270px);
  display: block;
  margin: 0 auto 32px;
}
.login__frase {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  /* Escala com a tela para "Gestão operacional de prevenção" caber inteira
     na primeira linha — a quebra em duas linhas é fixada com <br> na tela. */
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.15;
  text-wrap: pretty;
}
/* Uma linha só (pedido de 2026-08-16): sem teto de largura, e a letra escala
   com a tela para a frase inteira caber; em tela estreita ainda pode quebrar
   em vez de vazar. */
.login__sub { margin-top: 20px; color: oklch(0.72 0.01 260); font-size: clamp(0.8125rem, 1.1vw, 1rem); line-height: 1.6; }
.login__rodape {
  color: oklch(0.6 0.01 260);
  font-size: 0.8125rem;
  text-align: center;
}
/*
   O formulário tem largura PRÓPRIA, e a divisória cai onde ele começa.

   `clamp` porque os dois extremos incomodam: com porcentagem fixa, numa tela
   de 1000px o painel encolhe e a caixa de 380px fica colada nas bordas; num
   monitor ultralargo, 38% viram 800px de vazio ao redor de um formulário
   pequeno. O piso garante respiro, o teto impede o exagero, e no meio ele
   acompanha a tela.
*/
.login__form {
  flex: 0 0 clamp(22rem, 30%, 30rem);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login__caixa { width: 380px; padding: 0 32px; }
/* A logo do formulário existe para o CELULAR, onde a capa (e a marca dela)
   somem. Em tela larga ela seria a segunda logo na mesma vista. */
/* A marca do celular: só existe quando a capa escura sai de cena. Duas
   versões, uma por tema — a de tinta escura para fundo claro, a clara para
   fundo escuro. Ver o comentário em `telas/login.js`.

   Tamanhos diferentes porque os desenhos são diferentes: a de impressão é
   quadrada (220×220) e a clara é deitada (424×204). A mesma largura nas duas
   daria alturas que não se parecem, e a margem negativa que encaixa uma
   afundaria a outra no título. */
.login__logo { display: none; }
@media (max-width: 900px) {
  .login__logo--claro { width: 190px; display: block; margin: -40px auto -30px; }
  .login__logo--escuro { width: 215px; display: block; margin: 0 auto 22px; }
  :root[data-tema="escuro"] .login__logo--claro { display: none; }
  :root:not([data-tema="escuro"]) .login__logo--escuro { display: none; }
}

.senha-campo {
  display: flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  padding-right: 12px;
}
.senha-campo input { flex: 1; border: none; background: transparent; }
.senha-campo input:focus { outline: none; }
.senha-campo button {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}

.cartao-portal {
  margin-top: 40px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow);
  width: 100%;
  font-family: inherit;
  text-align: left;
  color: var(--text);
}
.cartao-portal:hover { border-color: var(--accent); background: var(--accent-soft); }

/* -------------------------------------------------------------------- toast */

.toasts {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 90;
  /* Nunca mais largo que a tela: com `right: 20px` fixo, 380 px de largura
     saíam pela esquerda em celular, e a frase aparecia cortada no começo —
     justamente onde fica o "Plantão do dia 18". */
  max-width: min(380px, calc(100vw - 40px));
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: 12px;
  box-shadow: var(--shadow-alto);
  padding: 14px 16px;
  font-size: 0.8438rem;
  animation: entra .18s ease-out;
  /* Razão social de MEI vem com o CNPJ colado na frente e passa dos 50
     caracteres. Sem isto, um nome comprido estoura a caixa em vez de quebrar. */
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.toast--ok   { border-left-color: var(--ok); }
.toast--erro { border-left-color: var(--accent); }
.toast--info { border-left-color: var(--info); }
.toast__titulo { font-weight: 700; margin-bottom: 2px; }

@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

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

.fundo-modal {
  position: fixed; inset: 0;
  background: oklch(0.15 0.02 260 / .5);
  display: grid; place-items: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-alto);
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
}
.modal__topo { padding: 20px 24px 0; }
.modal__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.0625rem; }
/* `pre-line` para o texto respeitar as quebras que quem escreveu a mensagem
   colocou. Sem isto, um detalhe de dois parágrafos — como o da confirmação de
   concluir inspeção — sai como um bloco corrido, e a instrução que importa
   ("se faltou, não conclua") se perde no meio da frase anterior. */
.modal__corpo {
  padding: 12px 24px 20px;
  font-size: 0.875rem; line-height: 1.55; color: var(--muted);
  white-space: pre-line;
}
.modal__pe { display: flex; gap: 10px; justify-content: flex-end; padding: 0 24px 22px; }

/* ------------------------------------------------------- carregando / listas */

.carregando {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8438rem;
}

.lista { display: flex; flex-direction: column; }
.lista__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  transition: background .15s;
}
.lista__item:last-child { border-bottom: none; }
.lista__item:hover { background: var(--surface2); }
.lista__texto { flex: 1; min-width: 180px; font-size: 0.8438rem; line-height: 1.45; }
.lista__meta { font-size: 0.7188rem; color: var(--muted); margin-top: 3px; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ------------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  #app { overflow: auto; }
  .lateral { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .lateral[data-aberta="sim"] { transform: none; }
  .conteudo { padding: 20px 16px; }
  .topo { padding: 12px 16px; }
  .busca-global { display: none; }
  .kpis--4, .kpis--3, .kpis--2, .grid-3 { grid-template-columns: 1fr; }
  .login { flex-direction: column; }
  .login__capa { display: none; }
}

.abre-menu { display: none; }
@media (max-width: 900px) { .abre-menu { display: grid; } }

/* ------------------------------------------------------- formulário em modal */

/* 1200px, e `92vw` em vez de `100%`.
   Passou por 720 → 940 → 1200: nas duas primeiras o cadastro ainda ocupava
   menos de metade de um monitor grande, com os campos de endereço apertados
   enquanto sobrava tela dos dois lados.
   O `92vw` é o que impede o oposto — num monitor muito largo, um formulário
   colado nas bordas obriga a varrer a tela com os olhos entre o rótulo e o
   campo. Sobra sempre uma margem, e em tela menor que 1200 o modal encolhe
   junto (a grade vira uma coluna só logo abaixo). */
.modal--largo { width: min(1200px, 92vw); }

/* Numa tela estreita, duas colunas espremem os campos a ponto de a máscara de
   CNPJ não caber. Uma coluna é melhor que duas ilegíveis. */
@media (max-width: 720px) {
  .form-grade { grid-template-columns: 1fr; }
}

.form-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form__campo--inteira { grid-column: 1 / -1; }

.form__descricao {
  font-size: 0.8438rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 4px;
}
.form__ajuda { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

/* Célula da grade de frequência que abre a permuta. O cursor e o realce são
   o único aviso de que ali se clica — sem eles a função fica escondida. */
/* A célula de plantão sobre a qual dá para agir.
   O realce é AZUL, e não o vermelho suave da marca: esse é o mesmo tom que
   pinta sábado e domingo na grade, e com os dois iguais não dava para saber se
   a linha estava destacada por ser fim de semana ou por estar sob o cursor.
   A borda interna reforça sem depender de o olho distinguir dois tons
   próximos — quem não separa bem as matizes continua vendo o contorno. */
.celula-clicavel { cursor: pointer; }
.celula-clicavel:hover,
.celula-clicavel:focus-visible {
  background: var(--info-soft);
  box-shadow: inset 0 0 0 2px var(--info);
}

/* ------------------------------------------------------ atalhos do Início */

.atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.atalho {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--raio-card);
  background: var(--surface);
  color: var(--texto);
  font: inherit; font-size: 0.8438rem; font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.atalho:hover { border-color: var(--accent); color: var(--accent); }
.atalho svg { flex-shrink: 0; color: var(--accent); }

/* ---------------------------------------------------------- busca global */

/* Alinhada ao topo, e não centrada: a lista cresce para baixo e a caixa de
   digitação fica sempre no mesmo lugar enquanto os resultados mudam. */
.fundo-modal--busca { align-items: flex-start; padding-top: 12vh; }

.busca-modal {
  width: min(560px, 92vw);
  background: var(--surface);
  border-radius: var(--raio-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.busca__topo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.busca__entrada {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 1rem; color: var(--texto);
}
.busca__entrada::-webkit-search-cancel-button { display: none; }

.busca__lista { overflow-y: auto; padding: 6px; }
.busca__grupo {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
  padding: 10px 10px 4px;
}
.busca__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--raio-btn);
  cursor: pointer;
  color: var(--texto);
}
.busca__item--ativo { background: var(--accent-soft); color: var(--accent); }
.busca__ponto {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--border); flex-shrink: 0; margin: 0 5px;
}
.busca__texto { flex: 1; min-width: 0; font-size: 0.875rem; }
.busca__detalhe {
  font-size: 0.75rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca__vazio { padding: 28px 16px; text-align: center; color: var(--muted);
                font-size: 0.8438rem; }
.busca__dica {
  display: flex; gap: 16px; justify-content: center;
  padding: 8px; border-top: 1px solid var(--border);
  font-size: 0.6875rem; color: var(--muted);
}
.busca__dica kbd {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; margin-right: 3px;
}

/* --------------------------------------------------- portal do parceiro */

/* ----------------------------------------------------- portal do parceiro */
/* Duas telas, o mesmo código.

   No computador o portal aparece dentro de uma MAQUETE de celular: existe para
   quem é da SAFE ver o que a parceira vê, sem precisar de um aparelho. No
   celular de verdade essa moldura é estorvo — desenha uma borda dentro da tela
   e gasta o pouco espaço que há. Foi o que o dono viu ao abrir no aparelho em
   30/08/2026: o portal num cartão no meio da tela, com um botão de "voltar ao
   sistema" que, para a parceira, não leva a sistema nenhum. */
.portal-palco {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* `safe center`: centraliza, MAS desiste quando o conteúdo é maior que a
     área. Com o `center` puro o que transborda sai pelos DOIS lados e o topo
     fica inalcançável — não há para onde rolar de volta. Numa janela mais
     baixa que a moldura, o cabeçalho do portal simplesmente sumia. */
  align-items: safe center;
  justify-content: safe center;
  gap: 20px;
  background: var(--bg);
  padding: 32px;
  overflow: auto;
}
.portal-moldura {
  width: 390px; max-width: 100%; max-height: 820px;
  border-radius: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.portal-voltar { position: absolute; top: 24px; left: 24px; }
.portal-legenda { font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 900px) {
  /* O portal É a tela. Sem moldura, sem margem, sem legenda de maquete — e sem
     o botão de voltar ao sistema, que só faz sentido para quem veio de dentro
     dele. */
  .portal-palco { padding: 0; gap: 0; }
  .portal-voltar, .portal-legenda { display: none; }
  .portal-moldura {
    width: 100%; max-width: none;
    /* `dvh` e não `vh`: no Safari do iPhone a barra de endereço entra e sai, e
       `100vh` é a altura COM ela recolhida. Com `vh`, o pé do portal fica
       debaixo da barra do navegador — e é lá que mora o botão de registrar
       presença. */
    height: 100dvh; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
}

.portal__abas {
  display: flex; gap: 6px;
  background: var(--surface2);
  padding: 4px;
  border-radius: var(--raio-btn);
}
.portal__aba {
  flex: 1;
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  /* Rótulo e contador na mesma linha, centralizados. `nowrap` porque uma aba
     de duas linhas empurra as outras duas e desalinha a barra inteira. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.portal__aba--ativa { background: var(--surface); color: var(--texto); box-shadow: var(--shadow); }

/* A barra escura do topo do portal. */
.portal-topo {
  background: var(--lateral);
  color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.portal-topo__logo { width: 64px; object-fit: contain; }

/* Abaixo de 360px o aparelho é estreito de verdade (o iPhone SE tem 320).
   A logo de 64px mais a folga de 20px deixavam ~160px para o texto, e
   "Portal do Parceiro" quebrava em três linhas. Encolher a marca e a folga
   devolve o espaço a quem precisa dele — o nome de quem está logada. */
@media (max-width: 360px) {
  .portal-topo { padding: 14px 12px; gap: 10px; }
  .portal-topo__logo { width: 46px; }
}

/* Na tela estreita as quatro abas não cabem em partes IGUAIS.
   Medido no aparelho: com `flex: 1` cada uma ganha 77px, e "Inspeções" precisa
   de 81 — o texto vazava do próprio botão (`nowrap`) e encostava em
   "Relatório", que é o que se lia como "RelatórioInspeções".

   `flex: 1 1 auto` faz cada aba pedir o que o rótulo precisa e dividir só a
   sobra; o respiro vem de encolher a folga lateral. Rótulo abreviado seria a
   outra saída, e é pior: "Insp." não é palavra. */
@media (max-width: 420px) {
  .portal__abas { gap: 4px; }
  .portal__aba { flex: 1 1 auto; padding: 10px 4px; }
}
/* Mais estreito ainda: a 320px os quatro rótulos somam mais que a barra mesmo
   sem folga nenhuma, e voltavam a vazar um por cima do outro. Diminuir a letra
   é o que sobra — abreviar o rótulo, não: "Insp." não é palavra, e a aba é a
   navegação inteira do portal. */
@media (max-width: 360px) {
  .portal__aba { font-size: 0.75rem; padding: 10px 3px; }
}

/* Os filhos do conteúdo NÃO encolhem.
   Este é o motivo real de o portal não rolar, e ele é traiçoeiro: `.card` é
   filho de um flex em coluna, então tem `flex-shrink: 1` por herança do padrão
   — encolhia de 950px para 648 e, como `.card` é `overflow: hidden`, CORTAVA o
   próprio conteúdo em vez de empurrar a barra de rolagem. O contêiner via
   `scrollHeight === clientHeight` e concluía que não havia o que rolar.
   `flex:1;min-height:0` no pai era necessário mas não bastava. */
.portal__conteudo > * { flex-shrink: 0; }

/* Os campos que a parceira preenche no posto, pelo celular.
   Herdam o `.campo` do sistema (borda, raio, foco) e ganham o que só faz
   sentido aqui. */
#app-portal .campo {
  width: 100%;
  /* 1rem, e não os 0.8438rem do `.campo`: abaixo de 16px o Safari do iPhone
     DÁ ZOOM na página ao focar o campo, e a tela fica torta no meio do
     preenchimento — com o brigadista de pé no corredor, de uma mão só. Subir a
     fonte é o jeito de não dar zoom que não exige desligar o pinch da página. */
  font-size: 1rem;
  /* O `select` nativo é mais baixo que o `input` no Android; igualar evita a
     coluna de campos com alturas diferentes. */
  min-height: 44px;
}
#app-portal textarea.campo {
  min-height: 0;
  resize: vertical;
  line-height: 1.45;
}

/* Quantas inspeções estão esperando a parceira.
   Quem abre o portal vem registrar presença e fica na primeira aba; sem um
   aviso aqui, a inspeção liberada só é descoberta quando alguém telefona. */
.portal__aba__alerta {
  flex-shrink: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px;
  background: var(--accent); color: #fff;
  font-size: 0.6562rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* As duas ações que fecham a inspeção.
   Sem o `wrap`, "Registrar pendência" era CORTADA pela borda do cartão num
   aparelho de 375px: `.btn` é `white-space: nowrap` e os dois botões somados
   não cabem na linha. Quebrar em duas linhas resolve de vez — diminuir a fonte
   só adiaria o corte para o próximo rótulo um pouco mais longo. */
.portal__acoes {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 12px;
}
.portal__acoes > .btn { flex: 1 1 auto; justify-content: center; }
.portal__rotulo {
  font-size: 0.75rem; font-weight: 600; color: var(--muted);
  margin-bottom: -6px;
}

/* ------------------------------------------------------------ assinatura */

.assinatura {
  border: 1px dashed var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  overflow: hidden;
}
.assinatura__tela {
  display: block; width: 100%;
  /* Sem isto, arrastar o dedo para assinar rola a página e o traço sai
     picotado — é a diferença entre assinar e não conseguir assinar. */
  touch-action: none;
  cursor: crosshair;
  background: #fff;
}
.assinatura__pe {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
}
.assinatura__dica { font-size: 0.75rem; color: var(--muted); }

/* ------------------------------------------------------ editor de texto */

.editor-rico {
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  overflow: hidden;
}
.editor-rico:focus-within { border-color: var(--accent); }
.editor-rico__barra {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.editor-rico__botao {
  min-width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--texto);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0 6px;
}
.editor-rico__botao:hover { background: var(--surface); border-color: var(--border); }
.editor-rico__area {
  padding: 12px 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  outline: none;
  overflow-y: auto;
  max-height: 320px;
}
.editor-rico__area p { margin: 0 0 8px; }
.editor-rico__area p:last-child { margin-bottom: 0; }
.editor-rico__area ul, .editor-rico__area ol { margin: 0 0 8px; padding-left: 22px; }

/* ------------------------------------------------ matriz de permissões */

.perm-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
/* Módulo com sub-permissões ocupa a linha inteira: a lista aberta embaixo
   desalinharia a coluna vizinha. */
.perm-bloco { grid-column: 1 / -1; }
.perm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  cursor: pointer;
  font-size: 0.8438rem;
}
.perm-item:hover { border-color: var(--accent); }
.perm-item input { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
.perm-sub {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 8px 0 4px 28px;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}
.perm-item--sub { font-size: 0.7812rem; padding: 8px 10px; color: var(--muted); }
/* `display:grid` acima vence o `display:none` que o atributo `hidden` traz de
   fábrica — sem esta linha a lista aparece com o módulo pai desmarcado. */
.perm-sub[hidden] { display: none; }

@media (max-width: 720px) {
  .perm-grade { grid-template-columns: 1fr; }
  .perm-sub { margin-left: 12px; }
}

.form__erro {
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--accent);
}
.form__campo input[aria-invalid], .form__campo select[aria-invalid] {
  border-color: var(--accent);
}
.form__campo input[readonly], .form__campo select[disabled] {
  background: var(--surface2);
  color: var(--muted);
  cursor: not-allowed;
}
.form__campo textarea {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
}

/* O rodapé do formulário mora dentro do <form> para o Enter submeter — por
   isso ganha a borda que o `.modal__pe` de fora já tem. */
.form .modal__pe {
  grid-column: 1 / -1;
  padding: 16px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------- ficha */

.ficha {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 10px 18px;
  margin: 0;
  font-size: 0.8438rem;
}
.ficha dt { color: var(--muted); font-weight: 600; }
.ficha dd { margin: 0; color: var(--text); }
/* ------------------------------------------------------------------ cadeia */

/* A linha do tempo do mesmo conjunto de equipamentos: as inspeções anteriores
   (↑), esta (•) e as que partiram dela (↓). Cada elo é um botão — trocar de mês
   é a razão de a seção existir. */
.cadeia { display: flex; flex-direction: column; gap: 2px; }

.cadeia__elo,
.cadeia__atual {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  font-size: 0.8438rem;
  color: var(--text);
}
.cadeia__elo { border: 1px solid transparent; background: none; cursor: pointer; }
.cadeia__elo:hover { border-color: var(--accent); background: var(--accent-soft); }
.cadeia__elo:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A inspeção aberta não é clicável e precisa se distinguir das outras —
   senão a pessoa clica nela esperando ir a algum lugar. */
.cadeia__atual { background: var(--surface2); font-weight: 600; }

.cadeia__marcador {
  flex-shrink: 0;
  width: 1rem;
  color: var(--muted);
  font-weight: 700;
}
.cadeia__atual .cadeia__marcador { color: var(--accent); }
.cadeia__texto { min-width: 0; }

/* ------------------------------------------------------------------ turnos */

/* Uma linha por turno no editor da cidade: o id fixo à esquerda (não se
   digita — a posição o define), rótulo, início, fim e o botão de remover. */
.turno-linha {
  display: grid;
  grid-template-columns: auto 1fr 7.5rem 7.5rem auto;
  gap: 10px;
  align-items: end;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.turno-linha:last-child { border-bottom: none; }
.turno-linha__id {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--muted);
  padding-bottom: 9px;
  min-width: 2.2rem;
}
@media (max-width: 640px) {
  .turno-linha { grid-template-columns: auto 1fr; }
  .turno-linha__id { padding-bottom: 0; }
}

/* ------------------------------------------------------------------ escala */

/* O editor tem 31 linhas e até 4 colunas de turno. O modal cresce até 92% da
   altura e a TABELA rola por dentro — se a rolagem ficasse no modal inteiro,
   o rodapé com "Salvar e liberar" sairia da tela, e a pessoa rolaria 31 dias
   toda vez que quisesse gravar. */
.modal--alto { max-height: 92vh; display: flex; flex-direction: column; }

/* Mais largo que `--largo`: Santa Inês tem QUATRO turnos, e com 720px a quarta
   coluna ficava fora da tela — justamente a que ninguém percebe que faltou. */
.modal--alto .modal__corpo { overflow: auto; flex: 1; min-height: 0; }

/* ------------------------------------------ o editor de escala, como página */
/* Era um modal. Trinta e um dias × quatro turnos não cabem numa caixa: a grade
   rolava dentro de uma janela que rolava dentro da tela, e o clique fora do
   quadro fechava o mês inteiro que estava sendo digitado. */
.escala-pagina { display: flex; flex-direction: column; gap: 16px; }
.escala-corpo { display: flex; flex-direction: column; gap: 16px; }

/* Os três filtros (unidade, mês, ano) numa fileira só. Na grade de duas
   colunas o mês caía numa linha escondida atrás do cliente. */
.escala-corpo .form-grade {
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr;
}
@media (max-width: 720px) {
  .escala-corpo .form-grade { grid-template-columns: 1fr; }
}

/* Os botões acompanham a rolagem: numa escala de 31 linhas, "Salvar e liberar"
   no fim da página fica a uma tela e meia de distância do último dia digitado,
   e o que não se vê não se clica. */
.escala-pe {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Na página a grade rola com a folha; o cabeçalho é que fica preso no topo. */
.escala__rolagem { overflow: visible; }

/* Plantão já assinado: aparece no lugar do select, com o nome de quem cumpriu.
   Some o campo, some a possibilidade de trocar — e o nome fica visível, que é
   o que se precisa saber ao remanejar o dia ao lado. */
.escala__travado {
  display: flex; align-items: center; gap: 6px;
  min-width: 190px; padding: 4px 6px;
  font-size: 0.8125rem; color: var(--muted);
  background: var(--surface2); border: 1px dashed var(--border);
  border-radius: var(--raio, 6px);
  cursor: not-allowed;
}
.escala__cadeado { flex-shrink: 0; font-size: 0.75rem; }

.escala__aviso {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; font-size: 0.8125rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--raio, 8px); color: var(--muted);
}

/* Escala fechada não é um detalhe do rodapé: é o motivo de a página inteira
   estar só de leitura, e quem abriu veio com a intenção de editar. */
.escala__aviso--fechada {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.escala th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2);
  /* `position: sticky` não pinta borda junto; a sombra faz o papel dela ao
     rolar, senão a primeira linha encosta no cabeçalho. */
  box-shadow: 0 1px 0 var(--border);
}
.escala td, .escala th { padding: 4px 8px; white-space: nowrap; }
/* Sem caixa alta no cabeçalho da escala: "Turno Manhã (08h-20h)" caixa-alta
   vira uma faixa de letras que se lê soletrando, e são até quatro delas lado a
   lado. É o formato do modelo do dono. */
.escala th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}
.escala__select { min-width: 220px; }
.escala__select .combo__entrada { padding: 4px 6px; font-size: 0.8125rem; }
/* A lista do dia cai sobre as linhas seguintes e sobre o cabeçalho preso no
   topo — que é `z-index: 1`. Sem passar dele, a lista abriria por baixo do
   cabeçalho justamente nos primeiros dias do mês. */
.escala__select .combo__lista { z-index: 40; }

/* A coluna do dia: `01/09 - Quarta`, na cor da marca. É por ela que se acha a
   linha certa numa tabela de 31 iguais, então ela não se confunde com o miolo. */
.escala__dia {
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}

/* Fim de semana: a cobertura muda no sábado e no domingo, e é lá que o furo
   passa despercebido numa grade de 31 linhas. */
.escala__fds td { background: var(--accent-soft); }
.escala__fds .escala__dia { font-weight: 700; }

/* -------------------------------------------------------------------- sino */

/* O número de pendências, sobre o ícone. `position: relative` no botão e não
   num wrapper: um elemento a mais aqui desalinharia a fileira do topo, que é
   um flex de itens de 38px. */
.sino { position: relative; }
.sino__marca {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  /* O anel na cor do fundo separa a marca do ícone sem precisar de sombra. */
  box-shadow: 0 0 0 2px var(--surface);
  background: var(--muted);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.sino__marca--critico { background: var(--accent); }

/* ------------------------------------------------------------------ trilha */

/* Linha do tempo de um documento — hoje o histórico do relatório técnico.
   A régua vertical é um pseudo-elemento no `li`, e não uma borda na lista:
   assim ela para no último marco em vez de descer no vazio abaixo dele. */

.trilha { list-style: none; margin: 0; padding: 0; }

.trilha__passo {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
}
.trilha__passo:last-child { padding-bottom: 0; }

/* O trecho de régua entre este marco e o próximo. */
.trilha__passo:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.trilha__marco {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--muted);
  /* O anel na cor do fundo isola o marco da régua que passa atrás. */
  box-shadow: 0 0 0 3px var(--surface);
  position: relative;
}
.trilha__marco--ok   { background: var(--ok); }
.trilha__marco--info { background: var(--info); }
.trilha__marco--warn { background: var(--warn); }
.trilha__marco--acc  { background: var(--accent); }

.trilha__corpo { min-width: 0; }
.trilha__cabeca { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trilha__de { font-size: 0.75rem; color: var(--muted); }
.trilha__seta { font-size: 0.75rem; color: var(--muted); }
.trilha__obs {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.45;
}
.trilha__pe { margin-top: 3px; font-size: 0.6875rem; color: var(--muted); }
.trilha__voltou {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Lista dentro de uma ficha (a equipe de um relatório técnico), sem o recuo e
   os marcadores do `ul` padrão, que destoam do resto dos valores. */
.lista-simples { margin: 0; padding: 0; list-style: none; }
.lista-simples li + li { margin-top: 3px; }

/* Par que ocupa a largura toda — para grades (a escala de uma previsão) que
   não cabem na coluna estreita da direita. */
.ficha dt.ficha__largo { grid-column: 1 / -1; margin-top: 6px; }
.ficha dd.ficha__largo { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .form-grade { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; gap: 2px 0; }
  .ficha dd { margin-bottom: 10px; }
}

/* ------------------------------------------------------------------ anexos */
/*
   A área de escolha é grande e clicável inteira, porque metade dos envios vem
   de celular — um botão de texto de 14 px é alvo difícil com o polegar. No
   desktop ela também aceita arrastar-e-soltar, que é como a maioria das
   pessoas espera anexar um PDF.
*/
.campo-arquivo { display: flex; flex-direction: column; gap: 10px; }

.anexo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.anexo-area:hover, .anexo-area:focus-visible, .anexo-area--sobre {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface);
}
.anexo-area--sobre { border-style: solid; }
.anexo-area__titulo { font-size: 0.8438rem; font-weight: 600; color: var(--text); }
.anexo-area__dica { font-size: 0.75rem; color: var(--muted); }
/* Fora de vista, mas ainda o alvo do clique — o `input type=file` nativo não
   é estilizável, e escondê-lo com `display:none` o tiraria do teclado. */
.anexo-entrada { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.anexos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.anexo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--raio-btn);
  background: var(--surface);
  font-size: 0.8125rem;
}
.anexo__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo__peso { font-size: 0.75rem; color: var(--muted); }

.anexo--enviando { color: var(--muted); }
.anexo__barra {
  flex: 0 0 90px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface2);
  overflow: hidden;
}
.anexo__barra::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: var(--accent);
  transition: width .12s linear;
}

.anexos-ficha { display: flex; flex-direction: column; gap: 4px; }
.anexo-linha { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------- campo com busca */
/* O combobox de `combo.js`. A lista flutua sobre o formulário: dentro do fluxo
   ela empurraria os campos de baixo a cada tecla, e o formulário inteiro
   pularia enquanto a pessoa digita.

   Só tokens do tema — nada de cor fixa. `tokens.css` redefine estes valores no
   modo escuro, e um branco cravado aqui deixaria a lista clara sobre a tela
   escura, ilegível justamente onde a pessoa está escolhendo com quem assinar. */
.combo { position: relative; }

/* O input herda a aparência de `.form__campo input`, mas não a largura: essa
   vinha de ele ser filho direto do grid, e agora quem é filho direto é o
   invólucro. Sem isto a caixa de digitar fica estreita e a lista, larga. */
.combo__entrada { width: 100%; box-sizing: border-box; }

.combo__lista {
  position: absolute;
  z-index: 30;               /* acima dos campos vizinhos, dentro do modal */
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 15rem;         /* ~8 linhas: mostra que há mais e ainda cabe */
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--raio-card);
  box-shadow: var(--shadow-alto);
}

.combo__item {
  padding: 8px 10px;
  border-radius: var(--raio-btn);
  cursor: pointer;
}

/* Bloqueada: aparece, diz por quê e não se escolhe. Esconder a parceira faria
   parecer que ela não existe, e quem procura digitaria o nome de novo. */
.combo__item--bloqueado {
  color: var(--muted); cursor: not-allowed; opacity: .7;
}
.combo__item--bloqueado:hover { background: none; color: var(--muted); }
.combo__item small {
  display: block; font-size: 0.6875rem; color: var(--muted);
}

/* O item marcado pelo teclado e o item sob o mouse têm o MESMO destaque: dois
   destaques ao mesmo tempo fazem a pessoa perder de vista qual o Enter escolhe. */
.combo__item--marcado,
.combo__item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.combo__nada {
  padding: 8px 10px;
  color: var(--muted);
  font-size: .92em;
}

/* --------------------------------------------- tela no formato do documento */
/* As telas de detalhe da Previsão, da Frequência e das Inspeções mostram o
   MESMO desenho do papel que a unidade recebe. Quem confere na tela e quem
   confere impresso olham a mesma coisa — e o erro de ler uma linha errada, que
   é o que acontece quando os dois formatos diferem, deixa de existir. */
.documento { display: flex; flex-direction: column; gap: 16px; }

/* Cabeçalho em negrito e sobre fundo próprio, como a faixa escura do papel.
   Numa tabela de 31 linhas iguais, um cabeçalho que se confunde com o corpo faz
   o olho perder a coluna ao rolar. */
.tabela--documento thead th {
  background: var(--surface2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 0.75rem;
  color: var(--text);
  border-bottom: 2px solid var(--border);
  padding-top: 10px; padding-bottom: 10px;
  vertical-align: bottom;
}

/* O horário do turno em linha própria, como no cabeçalho impresso. Colado ao
   rótulo vira "TURNO 107:00-19:00", que se lê como um número. */
.tabela--documento th small {
  display: block; margin-top: 2px;
  font-weight: 400; letter-spacing: 0;
  font-size: 0.6875rem; color: var(--muted);
  text-transform: none;
}

/* Fim de semana destacado: é onde a cobertura muda, e onde o furo passa
   despercebido numa lista de 31 linhas iguais. É o mesmo realce do papel. */
.tabela--documento tbody tr.fds { background: var(--accent-soft); }
/* O realce fica na data, não na célula inteira: pintar todo o `td` tingiria
   também o PRESENTE/FALTA, que tem cor própria e é o que se lê primeiro. */
.tabela--documento tbody tr.fds td:first-child,
.tabela--documento tbody tr.fds td:nth-child(2) {
  color: var(--accent); font-weight: 700;
}

/* Coluna do dia e do dia da semana: estreitas, centradas e sem quebrar. */
.tabela--documento tbody td:first-child,
.tabela--documento tbody td:nth-child(2) { text-align: center; white-space: nowrap; }

/* ------------------------------------- o miolo da célula da grade do mês */
/* Cada turno do dia traz quem cumpriu, o estado e a trilha que prova o
   plantão (horário, coordenada, hash) — o mesmo conteúdo do papel. */
.tabela--documento tbody td { vertical-align: top; }
.tabela--documento td.vazio { text-align: center; color: var(--muted); }

/* Duas parceiras no mesmo turno é dado inconsistente: aparece separado, em vez
   de virar uma linha só que esconde o problema. */
.tabela--documento .turno + .turno {
  border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 6px;
}
.tabela--documento .quem { font-size: 0.75rem; font-weight: 700; }
.tabela--documento .estado {
  font-size: 0.75rem; font-weight: 700; letter-spacing: .03em;
}
.tabela--documento .estado--ok { color: var(--ok, #1f6b3a); }
.tabela--documento .estado--falta { color: var(--accent); }
.tabela--documento .estado--pendente { color: #8a6d1f; }

.tabela--documento .tarjas { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.tabela--documento .tarja {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .04em;
  padding: 0 4px; border: 1px solid currentColor; border-radius: 3px;
}
.tabela--documento .tarja--permuta { color: #3f4ea8; }
.tabela--documento .tarja--retroativa { color: #8a4b1f; }
.tabela--documento .tarja--liberada { color: #6b21a8; }

.tabela--documento .miudo {
  font-size: 0.6875rem; color: var(--muted); line-height: 1.4;
}
/* Coordenada ausente é informação, não rodapé — em itálico e na cor de alerta
   para não se confundir com uma coordenada de verdade na leitura rápida. */
.tabela--documento .miudo.sem-gps { color: var(--accent); font-style: italic; }
.tabela--documento .miudo.anexo { color: #2f5fa8; }

/* Caixas de total do topo, como o bloco do papel. */
.documento-totais { display: flex; gap: 10px; flex-wrap: wrap; }
.documento-totais > div {
  flex: 1; min-width: 120px;
  border: 1px solid var(--border); border-radius: var(--raio, 8px);
  background: var(--surface); padding: 8px 12px;
}
.documento-totais > div.destaque { border-color: var(--accent); }
.documento-totais .rotulo {
  display: block; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.documento-totais b { font-size: 1.25rem; }


/* ------------------------------------------- a inspeção no formato do laudo */
/* A tabela de equipamentos usa as MESMAS colunas da impressão. O que reprova
   sai marcado na célula e na linha: num laudo de 114 extintores, procurar o
   vencido item a item é o que faz um extintor vencido continuar vencido. */
.tabela--laudo thead th {
  background: var(--surface2);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 0.6875rem; color: var(--text);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.tabela--laudo td { font-size: 0.8125rem; }
.tabela--laudo td.centro { text-align: center; white-space: nowrap; }
.tabela--laudo td.ruim { color: var(--accent); font-weight: 700; }
.tabela--laudo tbody tr.reprovado { background: var(--accent-soft); }

/* As pendências antes da tabela, como no papel. */
.laudo-pendencias, .laudo-casa {
  border: 1px solid var(--border); border-radius: var(--raio, 8px);
  background: var(--surface); padding: 12px 16px;
}
.laudo-pendencias h3, .laudo-casa h3 {
  margin: 0 0 6px; font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.laudo-pendencias ol { margin: 0; padding-left: 20px; font-size: 0.8125rem; }
.laudo-pendencias li { margin-bottom: 2px; }
.laudo-pendencias p { margin: 4px 0 0; font-size: 0.8125rem; }

/* Bomba parada com quadro parado é a diferença entre um hidrante que jorra e
   um cano com água — é a primeira coisa que o Corpo de Bombeiros pergunta. */
.laudo-casa__linhas {
  display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.8125rem;
}
.laudo-casa--alerta { border-color: var(--accent); background: var(--accent-soft); }


/* ------------------------------------------------- menu de ações do plantão */
/* Cada ação com a frase que diz o que vai acontecer: há opções aqui que mexem
   em prova de trabalho, e descobrir clicando não é opção. */
.escolha__contexto {
  font-size: 0.8125rem; color: var(--muted); line-height: 1.5;
  margin-bottom: 14px;
}
.escolhas { display: flex; flex-direction: column; gap: 8px; }
.escolha {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--raio, 8px);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.escolha:hover, .escolha:focus-visible {
  border-color: var(--accent); background: var(--accent-soft);
}
.escolha__rotulo { font-weight: 600; font-size: 0.9375rem; }
.escolha__ajuda { font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
.escolha--perigo .escolha__rotulo { color: var(--accent); }


/* ------------------------------------------------ tarja de assinado digital */
/* O PDF assinado sai do sistema e vai para a unidade. Quem abre a tela do
   documento precisa saber que aquele mês JÁ FOI assinado, por quem, e como
   chegar ao arquivo — sem isso a única pista era o ícone na relação, invisível
   para quem entrou direto pelo endereço.

   Verde, e não a cor da marca: assinado é estado consolidado, não alerta nem
   pendência. O vermelho suave da casa já significa fim de semana na grade e
   plantão em falta na célula. */
.assinado {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--ok);
  border-left-width: 4px;
  border-radius: var(--raio, 8px);
  background: var(--ok-soft);
}
.assinado__selo { display: flex; color: var(--ok); flex-shrink: 0; }
.assinado__corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.assinado__titulo {
  font-weight: 700; font-size: 0.8125rem; color: var(--ok);
  text-transform: uppercase; letter-spacing: .05em;
}
.assinado__quem { font-size: 0.875rem; font-weight: 600; }
/* Monoespaçado e com folga entre grupos: o código é para ser DIGITADO no
   validador, e é digitando que se perde o lugar num bloco de 20 caracteres. */
.assinado__codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem; letter-spacing: .06em; color: var(--muted);
}

@media (max-width: 720px) {
  .assinado { flex-wrap: wrap; }
  .assinado .empurra { margin-left: 0; width: 100%; }
}


/* ------------------------------------------------- ficha da parceira */
/* Os dados do cadastro em colunas que se acomodam à largura: no dossiê eles são
   referência (é para conferir a chave PIX antes de pagar, o telefone antes de
   ligar), e uma tabela para seis pares rótulo/valor seria peso demais. */
.ficha-parceira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 24px;
}

/* ------------------------------------------------- relatório agrupado */
/* O nome do cliente vira cabeçalho de bloco, e a coluna correspondente sai das
   linhas. O resumo à direita é o do BLOCO — o do relatório inteiro continua no
   rodapé do card, e são perguntas diferentes: "quanto neste hospital" e
   "quanto no mês". */
.grupo-relatorio + .grupo-relatorio { border-top: 1px solid var(--border); }
.grupo-relatorio__titulo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 20px 10px;
  background: var(--surface2);
  font-weight: 700; font-size: 0.875rem;
}
.grupo-relatorio__resumo {
  font-weight: 500; font-size: 0.8125rem; color: var(--muted);
}

/* --------------------------------------------------------------- chave PIX */
/* Monoespaçada, com fundo próprio e um pouco de folga entre os caracteres.

   Ela é para ser CONFERIDA contra a tela do banco, caractere a caractere, no
   momento de mandar o dinheiro. Em texto proporcional `0` e `O` desenham quase
   igual — e `1`, `l` e `I` também —, e o erro aqui manda um PIX para um
   estranho, que não volta.

   O destaque também serve para ACHAR a coluna de relance: quem paga percorre a
   lista pela chave, não pelo nome da parceira. */
.chave-pix {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* MAIOR que o resto da tabela (0.8438rem), de propósito: numa linha em que
     tudo tem o mesmo tamanho, o olho não sabe onde parar, e o que se lê aqui é
     o que decide para onde o dinheiro vai. */
  font-size: 0.9375rem;
  letter-spacing: .02em;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* O número da nota fiscal — o outro campo que se confere de olho, contra o PDF
   e contra o extrato. Estava em `fraco` (cinza, tamanho da tabela) e sumia ao
   lado do valor. Não ganha fundo como a chave: são dois destaques na mesma
   linha, e dois destaques não destacam nada. */
.nf-numero { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- seleção para assinar em lote */
/* Coluna estreita, com a caixa centralizada na linha. O clique nela não abre a
   linha: `tabela()` já ignora cliques em `input`. */
.col-selecao { width: 40px; text-align: center; }
.col-selecao input { cursor: pointer; width: 16px; height: 16px; accent-color: var(--accent); }

/* A barra só aparece com algo marcado — ocupar espaço para dizer "nada
   selecionado" é ocupar espaço para não informar nada. */
.barra-selecao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  border: 1px solid var(--accent); border-radius: var(--raio, 8px);
  background: var(--accent-soft);
}
.barra-selecao__contagem { font-weight: 600; font-size: 0.875rem; }


/* ------------------------------------------------ próximo plantão, no portal */
/* Discreto de propósito: é informação, não ação. O card do plantão de HOJE tem
   o botão vermelho de registrar presença, e dois blocos disputando a atenção
   fariam a pessoa clicar no errado com o hospital esperando. */
.card--proximo {
  border-left: 4px solid var(--info);
  background: var(--surface2);
}
/* Mais apertado que um cartão comum: são quatro linhas curtas, e o padrão de
   20px de respiro fazia o card ocupar um terço da tela do celular para dizer
   uma data. O topo da tela é do que vem AGORA — os plantões de hoje. */
.card--proximo .card__corpo {
  display: flex; flex-direction: column; gap: 1px;
  padding: 12px 14px;
}
.proximo__rotulo {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--info);
}
/* O posto vem em corpo menor e sem peso: quem abre o card já sabe onde
   trabalha. A pergunta que ele responde é QUANDO — e é a data que se procura
   de relance, com o celular na mão saindo do posto. */
.proximo__cliente {
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  line-height: 1.25;
}
.proximo__quando {
  font-size: 1.0625rem; font-weight: 700; color: var(--text);
  line-height: 1.2;
  margin-top: 3px;
}
/* Só a PRIMEIRA letra. `text-transform: capitalize` maiusculiza cada palavra e
   produz "Quarta-Feira, 26 De Agosto" — em português as preposições e a
   segunda parte do dia composto ficam minúsculas. */
.proximo__quando::first-letter { text-transform: uppercase; }
.proximo__turno {
  font-size: 0.9375rem; font-weight: 600; color: var(--text);
}

/* ------------------------------------------------------- leitor de QR-Code */

/* Tela cheia, e não um cartão: quem está de pé no corredor mira o celular com
   uma mão só, e uma janelinha exigiria enquadrar duas vezes — o QR dentro da
   janela e a janela dentro da tela. */
.qr {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.92);
}
.qr__quadro {
  position: relative;
  width: min(78vw, 320px); aspect-ratio: 1;
  border-radius: 18px; overflow: hidden;
  background: #000;
}
.qr__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A mira não recorta nada — o detector lê o quadro inteiro. Ela existe para a
   pessoa saber onde apontar, que é o que encurta a tentativa. */
.qr__mira {
  position: absolute; inset: 14%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}
.qr__dica {
  max-width: 320px; text-align: center;
  color: #fff; font-size: 0.8438rem; line-height: 1.5;
}
.qr__fechar { background: #fff; }

/* --------------------------------------- inspeções no portal do parceiro */

/* O cartão que abre a inspeção. É um `button` de propósito: a área toda é
   clicável e o teclado alcança, que num celular é a diferença entre acertar o
   alvo de primeira e errar para o cartão de baixo. */
.insp-cartao {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px;
  text-align: left; font: inherit; color: inherit;
  cursor: pointer;
}
.insp-cartao:hover { border-color: var(--accent); }
.insp-cartao__icone {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 10px; object-fit: contain;
}
.insp-cartao__texto { flex: 1; min-width: 0; }
.insp-cartao__linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  /* Quebra quando não cabe. "Reenviada à parceira" ao lado de "Extintores"
     estoura os 390px do portal e o chip saía CORTADO pela borda do cartão — e
     um estado cortado pela metade é pior que um estado numa linha a mais. */
  flex-wrap: wrap;
}
.insp-cartao__linha .chip { white-space: normal; }
.insp-cartao__tipo {
  font-size: 0.9375rem; font-weight: 700; color: var(--text);
}
.insp-cartao__linha .chip { flex-shrink: 0; }
.insp-cartao__cliente {
  font-size: 0.8125rem; font-weight: 600; color: var(--text);
  margin-top: 1px;
}
.insp-cartao__pe { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.insp-cabecalho {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.insp-cabecalho__icone {
  width: 44px; height: 44px; border-radius: 10px; object-fit: contain;
}
.insp-cabecalho__pe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center;
}

/* A ajuda embaixo do campo, com o texto colado nele — o `.portal__rotulo` usa
   margem negativa para grudar no campo de baixo, e sem isto a ajuda herdaria
   aquele espaçamento e flutuaria solta. */
.portal__ajuda {
  font-size: 0.6875rem; line-height: 1.4; color: var(--muted);
  margin-top: -4px;
}

.insp-lancados {
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.insp-lancados__titulo {
  font-size: 0.75rem; color: var(--muted); font-weight: 600;
}
/* Cada equipamento na sua linha, separado por um traço leve.
   Transparência e não a cor da borda: são dezenas de linhas seguidas, e um
   traço sólido a cada uma vira grade — o olho passa a ler a grade em vez da
   lista. */
.insp-lancados__linha {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; color: var(--muted);
  padding: 7px 0;
  border-top: 1px solid rgb(128 128 128 / 0.18);
}
/* A linha logo abaixo do título não leva traço — ali já há a separação do
   próprio título. `:first-of-type` não servia: o título também é `div`, então
   quem casava era ele. */
.insp-lancados__titulo + .insp-lancados__linha { border-top: 0; }
.insp-lancados__texto { flex: 1; min-width: 0; line-height: 1.45; }
/* O que está sendo corrigido fica marcado: o formulário acima mudou de dono, e
   sem isto não se sabe qual das dezenas de linhas ele está editando. */
.insp-lancados__linha--editando {
  background: var(--accent-soft);
  border-radius: 8px;
  padding-left: 8px; padding-right: 4px;
  color: var(--text); font-weight: 600;
}

/* --------------------------------------------- divergências entre inspeções */

/* Fica ACIMA das pendências, e com a cor de aviso e não de erro: o que está
   aqui é "olhe isto", não "está errado". Equipamento pode ter ido para
   manutenção, o posto pode ter recebido mais um — quem decide é a coordenação. */
.laudo-divergencias {
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn, #d08700);
  border-radius: var(--raio-card);
  background: var(--surface);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.laudo-divergencias h3 { margin: 0; font-size: 0.9375rem; }
.laudo-divergencias p { margin: 0; font-size: 0.8125rem; line-height: 1.5; }
.laudo-divergencias li { font-size: 0.8438rem; line-height: 1.5; }
/* O sumiço é o caso grave: equipamento de combate a incêndio que deixou de ser
   conferido. Merece peso diferente do que apenas mudou de tamanho. */
.divergencia--grave { font-weight: 600; color: var(--accent); }

/* O QR só se lê pela câmera — o selo do Inmetro é alfanumérico e longo demais
   para digitar de pé no corredor. O campo mostra o que foi lido, e a aparência
   diz que ele não se edita. */
#app-portal .campo[readonly] {
  background: var(--surface2);
  color: var(--muted);
  cursor: default;
}

/* O X do modal que só mostra alguma coisa (`mostrar`). Fica no canto do topo,
   onde a mão procura antes de procurar botão. */
.modal__topo { position: relative; }
/*
   O X de fechar — visível de longe.

   Era cinza sobre branco, com borda da mesma cor do resto: some no canto de um
   modal claro e desaparece de vez sobre o cinza-escuro do visualizador de PDF
   em tela cheia, que é justamente quando ele é o ÚNICO botão que a pessoa
   procura.

   Fundo próprio, contraste alto e um pouco maior. Não é o vermelho da ação
   perigosa: fechar não destrói nada, e pintá-lo de `--accent` o colocaria no
   mesmo tom de "Excluir" e "Estornar".
*/
.modal__fechar {
  position: absolute; top: -4px; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface2); color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.modal__fechar:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* O foco tem de aparecer sobre qualquer fundo: este é o botão que o teclado
   recebe primeiro ao abrir o pop-up (`botaoX.focus()` em `mostrar`). */
.modal__fechar:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Em tela cheia ele fica sobre o cinza-escuro do leitor de PDF: sem um fundo
   sólido e uma sombra que o descole, vira um ícone perdido no canto. */
.modal--cheio .modal__fechar {
  background: var(--surface);
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
}

/* O rótulo com um link ao lado — "(Qual é o correto?)" junto do QR-Code. */
.portal__rotulo-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.portal__rotulo-linha .portal__rotulo { margin-bottom: 0; }
.portal__qual { font-size: 0.75rem; }

/* A foto do selo dentro do modal. `max-width` e não largura fixa: no celular a
   janela é estreita, e o selo cortado não serviria para reconhecer nada. */
.selo-inmetro {
  display: block; margin: 0 auto;
  width: 100%; max-width: 230px; height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* As fotos do equipamento, na linha dele. Ficam antes do lápis, na mesma
   célula de ações: a foto é sobre AQUELE extintor, e no rodapé da ficha ela
   não dizia de qual era. */
.laudo-fotos { display: inline-flex; gap: 4px; }
.laudo-fotos .btn-icone { text-decoration: none; }

/* O nome da foto é um botão que abre, não um link que baixa — mas continua
   parecendo o nome do arquivo. */
.anexo__ver {
  background: none; border: 0; padding: 0;
  font: inherit; text-align: left; cursor: pointer;
}

/* A foto ampliada no pop-up. `max-height` em `vh` porque uma foto de celular
   em pé é bem mais alta que larga, e sem o teto ela empurra o X para fora da
   tela — justamente o botão que a pessoa procura para fechar. */
.foto-ampliada {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 70vh;
  width: auto; height: auto;
  border-radius: 8px;
}

/* A casa de bombas, no portal. Cartão próprio porque ela é do POSTO e não de
   um hidrante — misturada aos campos do equipamento, pareceria pertencer ao
   que estivesse sendo registrado naquele momento. */
.casa-bombas .card__corpo {
  display: flex; flex-direction: column; gap: 10px;
}
.casa-bombas__titulo {
  font-size: 0.9375rem; font-weight: 700;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.casa-bombas__lista { display: flex; flex-direction: column; gap: 8px; }
.casa-bombas__linha { display: flex; flex-direction: column; gap: 4px; }

/* A identificação do posto em cartão próprio, no topo. Sem a borda de baixo:
   ali ela separava o cabeçalho dos campos que vinham logo abaixo; agora é o
   cartão inteiro, e o traço ficaria sobrando. */
.insp-cabecalho--solto { padding-bottom: 0; border-bottom: 0; }

/* ------------------------------------------------- registro diário do RT */

/* O texto que a parceira escreveu no plantão. Aparece em dois lugares — na
   análise, onde se decide, e na aba Selecionados, onde se relê o que foi
   escolhido — e nunca teve estilo nenhum: os registros saíam colados uns nos
   outros, e num bloco de quarenta parágrafos parecidos não se enxerga onde um
   termina e o outro começa. */
.registro-diario {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.registro-diario:last-child { border-bottom: 0; }
.registro-diario__topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
/* O texto é o conteúdo do documento: linha alta e largura limitada, porque
   parágrafo corrido de ponta a ponta da tela se lê perdendo a linha. */
.registro-diario__texto {
  font-size: 0.8438rem; line-height: 1.6; color: var(--text);
  max-width: 78ch;
}
/* Justificado com recuo na primeira linha, como o relatório impresso. O recuo
   é o que faz um relato de oito parágrafos parecer texto e não lista solta. */
.registro-diario__texto p {
  text-align: justify;
  text-indent: 4em;
  hyphens: auto;
}
.registro-diario__texto p + p { margin-top: 6px; }
.registro-diario__assinatura {
  max-width: 220px; height: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff;
}

/* Correção do texto de um registro, na própria lista. */
.registro-diario__edicao { display: flex; flex-direction: column; gap: 8px; }
.registro-diario__campo {
  width: 100%; max-width: 78ch;
  font-size: 0.8438rem; line-height: 1.6;
  resize: vertical;
}
.registro-diario__acoes { display: flex; gap: 8px; flex-wrap: wrap; }


/* Botões pintados pelo significado da ação (ver `botao({ tom })`). Preenchidos,
   e não só contornados: é o estado escolhido que precisa saltar num bloco de
   quarenta registros parecidos. */
.btn--ok {
  border-color: transparent; background: var(--ok); color: #fff;
}
.btn--ok:hover {
  border-color: transparent; background: var(--ok); color: #fff; filter: brightness(0.92);
}
.btn--perigo {
  border-color: transparent; background: var(--accent); color: #fff;
}
.btn--perigo:hover {
  border-color: transparent; background: var(--accent-hover); color: #fff;
}

/* Registro recolhido: sobra o cabeçalho, que continua dizendo de quem é, de
   quando é e o que foi decidido. */
.registro-diario--recolhido { padding-top: 10px; padding-bottom: 10px; }
.registro-diario__topo { cursor: pointer; }
.registro-diario__topo:hover { color: var(--accent); }
/* O que está DENTRO do cabeçalho não herda o clique de abrir/fechar: o ícone
   de corrigir tem ação própria. */
.registro-diario__topo .btn-icone:hover { color: var(--accent); }

/* Seção que o sistema monta sozinho: ocupa o lugar do campo e diz por quê.
   Sem isto o formulário pula de 3.6 para 5, e buraco na numeração se lê como
   coisa faltando. */
.secao-automatica {
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 0.8125rem; line-height: 1.5;
}

/* Relação de leitura: o cabeçalho do registro não abre nem fecha nada. */
.lista--sem-clique .registro-diario__topo { cursor: default; }
.lista--sem-clique .registro-diario__topo:hover { color: inherit; }

/* O que ficou de fora de uma relação, dito em voz baixa mas dito. */
.nota-rodape {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--muted);
}

/* A mesma nota, acima do que ela explica. O aviso de que um filtro NÃO recorta
   a relação só serve antes da tabela: lido depois de rolar quarenta linhas,
   chega quando a pessoa já desconfiou da lista. */
.nota-rodape--topo {
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

/*
   Documento aberto no pop-up: a JANELA INTEIRA.

   O modal padrão tem 520px, e era ELE que espremia — o iframe pedia 78vw e não
   passava dali. Uma NFS-e em A4 abria a 50% com barra de rolagem horizontal:
   dava para ver que havia um documento, não para lê-lo.

   O tamanho passou a vir do `.modal--cheio`, e o iframe só o preenche. Um teto
   em `vw`/`vh` aqui brigaria com o de lá, e o menor venceria em silêncio.
*/
.documento-ampliado {
  width: 100%; height: 100%; min-height: 60vh;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
}

/* O modal de documento. A folga vem do `padding: 20px` do `.fundo-modal`:
   colado na borda, o X fica em cima do canto da janela. */
.modal--cheio {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* `min-height: 0` é o que permite o corpo ENCOLHER dentro do flex — sem ele o
   iframe empurra o modal para fora da tela, e o X some junto. */
.modal--cheio .modal__corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.modal--cheio .foto-ampliada { max-height: 100%; margin: auto; }

/* ------------------------------------------------------------ card retrátil */

/* O título vira botão. `width: 100%` e `text-align: left` desfazem o que o
   navegador impõe a um `<button>` — sem eles o card encolhe para o tamanho do
   texto e o título vai para o meio. */
.card__alternar {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__alternar:hover .card__titulo { color: var(--accent); }
.card__alternar svg { color: var(--muted); transition: transform 0.15s ease; }
.card__alternar[aria-expanded="true"] svg { transform: rotate(180deg); }
.card__acao-solta { padding: 0 20px 16px; }