/* ==========================================================================
   Controle de Movimentação de Solo — Grupo FAJ

   Tokens e componentes-base COPIADOS do Dashboard de Repasse V4, de propósito:
   é o padrão visual das aplicações da empresa. Mexeu num token aqui, veja se
   a mudança vale lá também. O que é só deste sistema está no fim do arquivo,
   a partir de "Controle de Solo — componentes próprios".

   DOIS TEMAS, UM CONJUNTO DE TOKENS.
   O tema claro nasce em `:root`; o escuro só REDEFINE os mesmos tokens em
   `[data-tema="escuro"]`. Nenhum componente abaixo sabe qual tema está ativo —
   por isso não existe hex solto fora deste bloco. Acrescentou cor nova? Crie
   o token aqui, nos dois temas, e use o token lá embaixo.

   Quem escreve o atributo `data-tema` no <html> é `js/tema.js`, antes da
   primeira pintura.
   ========================================================================== */

:root {
  /* --------------------------------------------------------- superfícies
     Os `-rgb` existem porque o Tailwind precisa dos canais separados para
     aplicar opacidade (`bg-superficie/85`). O hex logo abaixo é derivado
     deles: um valor só por tema, sem risco de os dois se desencontrarem. */
  --fundo-rgb: 245 247 251;
  --superficie-rgb: 255 255 255;
  --realce-rgb: 241 245 249;
  --linha-rgb: 226 232 240;

  --fundo: rgb(var(--fundo-rgb));
  /* fundo da página */
  --superficie: rgb(var(--superficie-rgb));
  /* cartões, painéis, modal */
  --realce: rgb(var(--realce-rgb));
  /* cabeçalho de tabela, chips, linhas de lista */
  --linha: rgb(var(--linha-rgb));
  /* bordas padrão */
  --linha-forte: #cbd5e1;
  /* bordas de campo, divisores em destaque */
  --linha-hover: #94a3b8;
  /* borda de campo sob o cursor, polegar da barra de rolagem */
  --barra-fundo: #e2e8f0;
  /* trilho de barra de progresso */

  /* --------------------------------------------------------------- texto */
  --txt: #0f172a;
  /* títulos e números de destaque */
  --txt-forte: #334155;
  /* títulos de seção */
  --txt-suave: #475569;
  /* texto corrente */
  --txt-fraco: #64748b;
  /* rótulos, legendas */
  --txt-apagado: #94a3b8;
  /* legendas decorativas, metadados */

  /* ----------------------------------------------------------- semântica */
  --accent-rgb: 2 132 199;
  --accent: rgb(var(--accent-rgb));
  /* foco, links, elementos interativos */
  --accent-forte: #0369a1;
  /* o mesmo accent pressionado / em hover */
  --accent-2: #6366f1;
  /* segunda parada dos gradientes de barra */
  --sobre-accent: #ffffff;
  /* texto por cima de fundo accent */
  --ok: #059669;
  /* entradas de caixa, SLA dentro do prazo */
  --ok-claro: #10b981;
  /* segunda parada do gradiente de etapa final */
  --warn: #d97706;
  /* atenção, SLA no limite, exigências */
  --crit-rgb: 225 29 72;
  --crit: rgb(var(--crit-rgb));
  /* saídas de caixa, atraso, devolução */
  --pulse-rgb: 245 158 11;
  --pulse: rgb(var(--pulse-rgb));
  /* ponto pulsante do selo de protótipo */
  --gargalo-inicio: #fbbf24;
  /* início do gradiente da barra de gargalo */

  /* Tintas: trio texto/fundo/borda de cada chip, tag e faixa de aviso. */
  --info-txt: #0369a1;
  --info-fundo: #f0f9ff;
  --info-fundo-suave: #eff6ff;
  --info-borda: #bae6fd;
  --info-borda-forte: #7dd3fc;

  --ok-txt: #047857;
  --ok-fundo: #ecfdf5;
  --ok-borda: #a7f3d0;

  --warn-txt: #b45309;
  --warn-fundo: #fffbeb;
  --warn-borda: #fde68a;
  --warn-borda-forte: #fcd34d;

  /* Família do crachá Admin/Gestor. Fora das quatro semânticas de negócio de
     propósito: cargo não é entrada, saída, atenção nem crítico. */
  --gestor-txt: #6d28d9;
  --gestor-fundo: #f5f3ff;
  --gestor-borda: #ddd6fe;

  --crit-txt: #be123c;
  --crit-fundo: #fff1f2;
  --crit-fundo-suave: #fff5f6;
  --crit-borda: #fecdd3;
  --crit-borda-forte: #fda4af;

  /* Delta contra o parâmetro. Roxo e azul de propósito: verde e vermelho já
     significam entrada e saída, e diferença de referência não é nem uma coisa
     nem outra. */
  --delta-acima: #7c3aed;
  --delta-abaixo: #0369a1;

  /* Brilhos e sombras. No claro a sombra é preta e fraca; no escuro precisa
     ser mais densa, porque não há contraste de luminosidade para apoiá-la. */
  --sombra-painel: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .28);
  --sombra-caixa: 0 24px 60px -24px rgba(15, 23, 42, .30), 0 4px 12px -6px rgba(15, 23, 42, .10);
  --brilho-fundo-1: rgba(56, 189, 248, .12);
  --brilho-fundo-2: rgba(99, 102, 241, .10);
  --selecao: rgba(2, 132, 199, .18);
  --anel-foco: rgba(2, 132, 199, .35);
  --sombra-flutuante: 0 16px 40px -16px rgba(15, 23, 42, .20), 0 4px 12px -6px rgba(15, 23, 42, .10);
  --sombra-modal: 0 30px 70px -20px rgba(15, 23, 42, .45);
  --cortina: rgba(15, 23, 42, .45);
  --dia-nao-util: rgba(15, 23, 42, .04);

  --radius: 12px;
}

/* ==========================================================================
   Tema escuro

   Não é o claro invertido: as superfícies sobem de luminosidade conforme se
   aproximam do usuário (fundo < superfície < realce), e as tintas viram fundos
   profundos com texto claro — chip com fundo pastel de tema claro some no
   escuro. As cores semânticas (verde entrada, vermelho saída) ficam mais
   claras para manter contraste sobre fundo escuro, sem trocar de significado.
   ========================================================================== */
[data-tema="escuro"] {
  --fundo-rgb: 11 18 32;
  --superficie-rgb: 17 26 43;
  --realce-rgb: 26 36 54;
  --linha-rgb: 38 51 74;

  --linha-forte: #3a4a66;
  --linha-hover: #56698c;
  --barra-fundo: #26334a;

  --txt: #f1f5f9;
  --txt-forte: #e2e8f0;
  --txt-suave: #cbd5e1;
  --txt-fraco: #94a3b8;
  --txt-apagado: #6b7c96;

  --accent-rgb: 56 189 248;
  --accent: rgb(var(--accent-rgb));
  --accent-forte: #0ea5e9;
  --accent-2: #818cf8;
  /* Texto sobre o accent claro do tema escuro precisa ser ESCURO, não branco:
     branco sobre #38bdf8 não passa em contraste. */
  --sobre-accent: #06121f;
  --ok: #34d399;
  --ok-claro: #6ee7b7;
  --warn: #fbbf24;
  --crit-rgb: 251 113 133;
  --crit: rgb(var(--crit-rgb));
  --pulse-rgb: 251 191 36;
  --pulse: rgb(var(--pulse-rgb));
  --gargalo-inicio: #f59e0b;

  --info-txt: #7dd3fc;
  --info-fundo: #0c2536;
  --info-fundo-suave: #102b3d;
  --info-borda: #1d4a66;
  --info-borda-forte: #2c7ea8;

  --ok-txt: #6ee7b7;
  --ok-fundo: #0b2b22;
  --ok-borda: #17563f;

  --warn-txt: #fcd34d;
  --warn-fundo: #2b2210;
  --warn-borda: #5c4413;
  --warn-borda-forte: #7a5c17;

  --gestor-txt: #c4b5fd;
  --gestor-fundo: #1e1735;
  --gestor-borda: #3f2f6b;

  --crit-txt: #fda4af;
  --crit-fundo: #2c1621;
  --crit-fundo-suave: #341926;
  --crit-borda: #5e2436;
  --crit-borda-forte: #8b3450;

  --delta-acima: #c4b5fd;
  --delta-abaixo: #7dd3fc;

  --sombra-painel: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 28px -18px rgba(0, 0, 0, .75);
  --sombra-caixa: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 4px 12px -6px rgba(0, 0, 0, .5);
  --brilho-fundo-1: rgba(56, 189, 248, .10);
  --brilho-fundo-2: rgba(99, 102, 241, .12);
  --selecao: rgba(56, 189, 248, .28);
  --anel-foco: rgba(56, 189, 248, .45);
  --sombra-flutuante: 0 16px 40px -16px rgba(0, 0, 0, .7), 0 4px 12px -6px rgba(0, 0, 0, .5);
  --sombra-modal: 0 30px 70px -20px rgba(0, 0, 0, .85);
  /* Cortina mais opaca: sobre fundo escuro, 45% não separa o modal do resto. */
  --cortina: rgba(2, 6, 15, .70);
  /* No escuro o dia não útil precisa CLAREAR, não escurecer. */
  --dia-nao-util: rgba(226, 232, 240, .06);
}

html {
  color-scheme: light;
}

[data-tema="escuro"] {
  /* Faz o navegador escurecer o que ele mesmo desenha: barra de rolagem
     nativa, autopreenchimento, controles de formulário. */
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--brilho-fundo-1), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--brilho-fundo-2), transparent 55%),
    var(--fundo);
  background-attachment: fixed;
  color: var(--txt-suave);
}

::selection {
  background: var(--selecao);
}

/* ---------- Scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--linha-hover);
  background-clip: content-box;
}

/* ==========================================================================
   Superfícies
   ========================================================================== */
.painel {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--sombra-painel);
}

.painel-alerta {
  border-color: var(--crit-borda);
  background: linear-gradient(180deg, var(--crit-fundo-suave), var(--superficie));
}

/* Logo do cabeçalho. Em CSS próprio (e não em utilities) para manter o tamanho
   correto mesmo se o CDN do Tailwind não carregar — a imagem original é 400×400. */
.logo-cabecalho {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: contain;
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha);
}

.titulo-secao {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-forte);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}


/* ==========================================================================
   Tela de login
   ========================================================================== */
.tela-login {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow: auto;
}

.tela-login.hidden {
  display: none;
}

.login-caixa {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra-caixa);
}

.login-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: contain;
  align-self: center;
}

.login-titulo {
  margin-top: 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--txt);
  text-align: center;
}

.login-subtitulo {
  margin-top: .3rem;
  margin-bottom: 1.5rem;
  font-size: .82rem;
  color: var(--txt-fraco);
  text-align: center;
}

.login-subtitulo strong {
  color: var(--accent);
  font-weight: 600;
}

.login-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--txt-fraco);
  margin-bottom: .35rem;
}

.login-campo {
  margin-bottom: 1rem;
  width: 100%;
}

.input[aria-invalid="true"] { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.campo-erro-msg { margin-top: .3rem; font-size: .8rem; color: var(--crit-txt); }

.login-campo[aria-invalid="true"] {
  border-color: var(--crit);
  box-shadow: 0 0 0 3px rgb(var(--crit-rgb) / .12);
}

.login-erro {
  margin-bottom: 1rem;
  padding: .7rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--crit-borda);
  background: var(--crit-fundo);
  color: var(--crit-txt);
  font-size: .82rem;
  line-height: 1.4;
}

.login-erro.hidden {
  display: none;
}

.login-botao {
  padding: .7rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--sobre-accent);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}

.login-botao:hover {
  background: var(--info-txt);
  box-shadow: 0 8px 18px -8px rgb(var(--accent-rgb) / .8);
}

.login-botao:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.login-nota {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--txt-fraco);
}


/* ==========================================================================
   Abas
   ========================================================================== */
.tab-btn {
  position: relative;
  padding: .8rem 1.2rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--txt-fraco);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  cursor: pointer;
  transition: color .15s, background .15s;
}

.tab-btn:hover {
  color: var(--txt);
  background: var(--info-fundo-suave);
}

.tab-btn.tab-ativa {
  color: var(--info-txt);
  background: var(--info-fundo);
  border-color: var(--info-borda);
}

.tab-btn.tab-ativa::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}

/* ==========================================================================
   Formulários / filtros
   ========================================================================== */
.campo {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}


.campo>label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt-fraco);
  font-weight: 700;
}

.input {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  color: var(--txt);
  border-radius: 8px;
  padding: .5rem .7rem;
  font-size: .85rem;
  min-height: 38px;
  transition: border-color .15s, box-shadow .15s;
}

.input:hover {
  border-color: var(--linha-hover);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15);
}

/* Campos de período: o Flatpickr os deixa somente leitura, então o cursor precisa
   indicar que abrem um calendário. */
.input[data-periodo] {
  cursor: pointer;
  background: var(--superficie);
}


/* ==========================================================================
   Flatpickr — calendário sem caixa, alinhado ao tema claro
   O CSS do Flatpickr é carregado ANTES deste arquivo, então basta empatar a
   especificidade para vencer. Onde a regra original é mais específica, os
   seletores abaixo são prefixados com .flatpickr-calendar.
   ========================================================================== */

/* ---------- 1. Container: sem borda dura, só sombra suave ---------- */
.flatpickr-calendar {
  background: var(--superficie);
  border: 0;
  border-radius: 14px;
  /* o padrão usa 4 box-shadows de 1px simulando borda cinza — substituído por uma sombra só */
  box-shadow: var(--sombra-flutuante);
  font-family: inherit;
  padding: .35rem .35rem .5rem;
  width: 19.5rem;
}

.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-weekdays {
  border: 0;
  background: transparent;
  width: 100%;
}

.flatpickr-calendar .dayContainer {
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* A setinha que aponta para o campo: fica branca e sem o contorno cinza do padrão */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowBottom::before {
  display: none;
}

.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--superficie);
}

.flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--superficie);
}

/* ---------- 2. Cabeçalho limpo: sem caixilho no mês/ano ---------- */
.flatpickr-calendar .flatpickr-months {
  padding: .35rem 0 .15rem;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--txt);
  height: 2.4rem;
}

.flatpickr-calendar .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0;
  font-size: .95rem;
  font-weight: 600;
}

/* Seletor de mês: vira texto puro, sem moldura nem fundo no hover */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  color: var(--txt);
  font-weight: 600;
  font-size: .95rem;
  padding: .1rem .2rem;
  border-radius: 6px;
  cursor: pointer;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  color: var(--accent);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--superficie);
  color: var(--txt);
}

/* Ano: input sem moldura e sem os spinners (o caixilho que aparecia no hover) */
.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .numInputWrapper:hover {
  background: transparent;
}

.flatpickr-calendar .numInputWrapper span {
  display: none;
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month input.cur-year:focus {
  color: var(--txt);
  font-weight: 600;
  font-size: .95rem;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  padding: 0;
}

/* Setas minimalistas: cinza discreto, azul no hover (o padrão vira vermelho) */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  padding: .5rem .7rem;
  height: auto;
  border-radius: 8px;
  transition: background .15s;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 12px;
  height: 12px;
  fill: var(--txt-fraco);
  transition: fill .15s;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--realce);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--accent);
}

/* ---------- 3. Dias da semana ---------- */
.flatpickr-calendar span.flatpickr-weekday {
  background: transparent;
  color: var(--txt-suave);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- 4. Dias e destaque ---------- */
.flatpickr-calendar .flatpickr-day {
  position: relative;
  /* ancora o pontinho de feriado */
  color: var(--txt-suave);
  border: 0;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  height: 2.25rem;
  line-height: 2.25rem;
  max-width: none;
  transition: background .15s, color .15s;
}

.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
  background: var(--realce);
  color: var(--txt);
  outline: none;
}

.flatpickr-calendar .flatpickr-day:focus-visible {
  box-shadow: 0 0 0 2px var(--anel-foco);
}

/* Dias não úteis — marcação sutil. Declarados ANTES de .today e .selected para que
   essas duas vençam a cascata (mesma especificidade: a última regra prevalece). */
.flatpickr-calendar .flatpickr-day.dia-fds {
  color: var(--txt-fraco);
  background: var(--dia-nao-util);
}

.flatpickr-calendar .flatpickr-day.dia-feriado {
  color: var(--crit);
  background: rgb(var(--crit-rgb) / .07);
  font-weight: 600;
}

/* Pontinho embaixo do número identificando o feriado; herda a cor do dia,
   então continua visível quando a data está selecionada (fica branco). */
.flatpickr-calendar .flatpickr-day.dia-feriado::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .32rem;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

/* Hoje: só realce de cor, sem o quadrado/contorno do padrão */
.flatpickr-calendar .flatpickr-day.today {
  border: 0;
  color: var(--accent);
  font-weight: 700;
}

.flatpickr-calendar .flatpickr-day.today:hover {
  background: rgb(var(--accent-rgb) / .10);
  color: var(--accent);
}

/* Selecionado: círculo cheio na cor de destaque do projeto */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus {
  background: var(--accent);
  border: 0;
  color: var(--sobre-accent);
  font-weight: 600;
  box-shadow: 0 4px 10px -4px rgb(var(--accent-rgb) / .7);
}

/* Fora do mês atual: presentes, porém bem apagados */
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: var(--txt-fraco);
  opacity: .3;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-day.nextMonthDay:hover {
  opacity: .6;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  color: var(--linha-forte);
  background: transparent;
  opacity: .5;
}

.atalho {
  padding: .5rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--txt-suave);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  cursor: pointer;
  min-height: 38px;
  transition: all .15s;
}

.atalho:hover {
  color: var(--txt);
  border-color: var(--linha-hover);
  background: var(--realce);
}

.atalho.ativo {
  color: var(--sobre-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.btn-limpar {
  font-size: .78rem;
  color: var(--txt-fraco);
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  border-radius: 8px;
  padding: .5rem .8rem;
  min-height: 38px;
  cursor: pointer;
  transition: all .15s;
}

.btn-limpar:hover {
  color: var(--txt);
  border-color: var(--linha-hover);
  background: var(--realce);
}

/* Etiqueta de dias úteis, ao lado dos campos de período */
.pill-uteis {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 38px;
  padding: 0 .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--info-txt);
  background: var(--info-fundo);
  border: 1px solid var(--info-borda);
  white-space: nowrap;
  cursor: help;
}

.pill-uteis::before {
  content: "📅";
  font-size: .85rem;
}

.pill-uteis[hidden] {
  display: none;
}


/* ==========================================================================
   Tabelas
   ========================================================================== */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
}

.tabela thead th {
  padding: .7rem 1rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--txt-fraco);
  font-weight: 700;
  background: var(--realce);
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabela tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--linha);
  color: var(--txt-suave);
}

.tabela tbody tr:last-child td {
  border-bottom: none;
}

.tabela tbody tr.clicavel-linha {
  cursor: pointer;
  transition: background .15s;
}

.tabela tbody tr.clicavel-linha:hover {
  background: var(--info-fundo);
}

/* Previsão vencida: fora do total, então precisa parecer diferente das semanas. */
.tabela tbody tr.linha-vencida td {
  background: var(--warn-fundo);
  color: var(--warn-txt);
  border-bottom: 1px solid var(--warn-borda);
}

.tabela tbody tr.linha-vencida:hover td {
  background: var(--warn-borda);
}

/* Listas que crescem com o número de blocos/empreendimentos: altura de ~4
   itens e rolagem, para o painel ficar do tamanho dos vizinhos. */
.lista-rolavel {
  max-height: 23rem;
  overflow-y: auto;
  padding-right: .35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}

.tabela tfoot td {
  padding: .7rem 1rem;
  border-top: 1px solid var(--linha-forte);
  background: var(--realce);
  font-weight: 700;
  color: var(--txt);
}

.tabela-densa tbody td,
.tabela-densa thead th {
  padding: .5rem .75rem;
  font-size: .8rem;
}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--cortina);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: aparecer .15s ease-out;
}

.modal-overlay.hidden {
  display: none;
}

.modal-caixa {
  width: min(1200px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: var(--sombra-modal);
  animation: subir .18s ease-out;
}

.modal-corpo {
  overflow: auto;
  flex: 1;
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
}

.btn-fechar {
  color: var(--txt-fraco);
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: all .15s;
}

.btn-fechar:hover {
  color: var(--crit);
  border-color: var(--crit-borda-forte);
  background: var(--crit-fundo);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--info-txt);
  background: var(--info-fundo);
  border: 1px solid var(--info-borda);
  white-space: nowrap;
}

.tag {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 600;
  border: 1px solid var(--linha);
  color: var(--txt-fraco);
  background: var(--realce);
  white-space: nowrap;
}

.tag-critico {
  color: var(--crit-txt);
  border-color: var(--crit-borda);
  background: var(--crit-fundo);
}

.tag-atencao {
  color: var(--warn-txt);
  border-color: var(--warn-borda);
  background: var(--warn-fundo);
}

.tag-ok {
  color: var(--ok-txt);
  border-color: var(--ok-borda);
  background: var(--ok-fundo);
}


/* ==========================================================================
   Botão de tema (Sol / Lua)

   Mesmo tamanho e mesma família do `.botao-sair`, para o canto direito do
   cabeçalho continuar sendo um bloco só e não uma coleção de botões soltos.
   ========================================================================== */
.botao-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--txt-fraco);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.botao-tema:hover {
  color: var(--accent);
  border-color: var(--info-borda-forte);
  background: var(--info-fundo);
}

.botao-tema:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Âncora do botão na tela de login, que não tem cabeçalho.
   `z-index` acima da `.tela-login` (60), senão o botão fica atrás dela. */
.canto-tema {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 70;
}

/* Um ícone só fica visível por vez: no claro mostra a Lua (o que o clique vai
   trazer), no escuro mostra o Sol. O ícone anuncia o destino, não o estado —
   é o que o usuário espera de um alternador. */
.botao-tema .icone-lua {
  display: block;
}

.botao-tema .icone-sol {
  display: none;
}

[data-tema="escuro"] .botao-tema .icone-lua {
  display: none;
}

[data-tema="escuro"] .botao-tema .icone-sol {
  display: block;
}

/* ==========================================================================
   Tema escuro × utilities do Tailwind

   As utilities de cor do Tailwind carregam hex fixo e não enxergam token
   nenhum — `text-slate-500` continuaria cinza-escuro sobre fundo escuro. As
   quatro cores do tema (`fundo`, `superficie`, `realce`, `linha`) não estão
   aqui porque a config do Tailwind já as aponta para os tokens.

   O seletor de atributo dá especificidade (0,2,0) contra a utility (0,1,0):
   vence sem `!important` e sem depender da ordem em que o Play CDN injeta o
   próprio <style>.

   Acrescentou uma utility de cor no HTML? Mapeie aqui também.
   ========================================================================== */
[data-tema="escuro"] .text-slate-900 {
  color: var(--txt);
}

[data-tema="escuro"] .text-slate-700,
[data-tema="escuro"] .text-slate-600 {
  color: var(--txt-suave);
}

[data-tema="escuro"] .text-slate-500 {
  color: var(--txt-fraco);
}

[data-tema="escuro"] .text-slate-400 {
  color: var(--txt-apagado);
}

[data-tema="escuro"] .text-sky-600,
[data-tema="escuro"] .text-sky-700 {
  color: var(--info-txt);
}

[data-tema="escuro"] .text-rose-600,
[data-tema="escuro"] .text-rose-700 {
  color: var(--crit-txt);
}

[data-tema="escuro"] .text-amber-600,
[data-tema="escuro"] .text-amber-700 {
  color: var(--warn-txt);
}

[data-tema="escuro"] .bg-rose-50 {
  background-color: var(--crit-fundo);
}

[data-tema="escuro"] .border-rose-300 {
  border-color: var(--crit-borda-forte);
}

[data-tema="escuro"] .bg-amber-50 {
  background-color: var(--warn-fundo);
}

[data-tema="escuro"] .border-amber-300 {
  border-color: var(--warn-borda-forte);
}

/* `bg-slate-900` + `text-emerald-300` são o bloco de código do aviso de
   file://. Já nascem escuros e continuam legíveis nos dois temas — ficam
   fora do mapeamento de propósito. */

/* --------------------------------------------------------------------------
   Aviso "Carregando dados…" — fixo no topo, por cima da página, até os
   dados chegarem. Sem ele os painéis vazios pareciam tela quebrada.
   -------------------------------------------------------------------------- */
.carregando-aviso {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--info-borda);
  background: var(--info-fundo);
  color: var(--info-txt);
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 6px 24px rgb(0 0 0 / .18);
}

.carregando-aviso.oculto {
  display: none;
}

.carregando-giro {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: carregando-giro .8s linear infinite;
}

@keyframes carregando-giro {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .carregando-giro { animation-duration: 2.4s; }
}

/* ---------------------------------------------------------------------------
   Atualização automática — indicador "Atualizado às" e botão no cabeçalho
   --------------------------------------------------------------------------- */
.btn-atualizar {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border-radius: .5rem;
  border: 1px solid var(--linha, #e2e8f0);
  font-size: .75rem;
  font-weight: 600;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.btn-atualizar:hover { background: var(--info-fundo); }
.btn-atualizar:disabled { opacity: .55; cursor: progress; }
.btn-atualizar.girando span { display: inline-block; animation: carregando-giro .8s linear infinite; }
#header-atualizado.novidade { color: var(--info-txt); font-weight: 600; }
#header-atualizado.falhou { color: var(--crit-txt); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Alertas recolhidos quando estão todos em zero (js/app.js, recolherAlertasSeZerados)
   --------------------------------------------------------------------------- */
#secao-alertas .titulo-secao { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.alertas-resumo {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ok-txt);
}
.alertas-resumo.tem-alerta { color: var(--crit-txt); }
.alertas-alternar {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  padding: .15rem .55rem;
  border-radius: .45rem;
  border: 1px solid var(--linha);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .8;
}
.alertas-alternar:hover { opacity: 1; background: var(--info-fundo); }
#secao-alertas.alertas-recolhidos #painel-alertas { display: none; }

/* ---------------------------------------------------------------------------
   Registro de Alterações — "Voltar para" / "Usar" (js/admin.js, usarValorDoRegistro)
   --------------------------------------------------------------------------- */
.botao-usar-valor {
  margin-left: .35rem;
  padding: .2rem .55rem;
  border-radius: .45rem;
  border: 1px solid var(--linha);
  background: transparent;
  color: inherit;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  opacity: .85;
}
.botao-usar-valor:hover { opacity: 1; background: var(--info-fundo); }
@keyframes param-destaque {
  0%   { box-shadow: 0 0 0 2px var(--info-borda); background: var(--info-fundo); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
.param-linha.param-destaque { animation: param-destaque 1.8s ease-out; border-radius: .6rem; }

/* ==========================================================================
   Controle de Solo — componentes próprios
   ========================================================================== */

/* Séries dos gráficos. Paleta categórica VALIDADA para daltonismo (ordem fixa
   azul, laranja, verde-água, amarelo — ver CLAUDE.md §3). O escuro não é o
   claro invertido: são os mesmos matizes em outro degrau, conferidos contra a
   superfície escura. A cor de cada MATERIAL vem do banco (solo.materiais.cor)
   e segue o material, nunca a posição no ranking. */
:root {
  --serie-unica: #2a78d6;
  --grade: #e2e8f0;
}
[data-tema="escuro"] {
  --serie-unica: #3987e5;
  --grade: #26334a;
}

/* ---------------------------------------------------------------- cabeçalho */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--linha);
  background: rgb(var(--superficie-rgb) / .88);
  backdrop-filter: blur(8px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--txt-fraco);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--txt); background: var(--info-fundo-suave); }
.nav-link[aria-current="page"] { color: var(--info-txt); background: var(--info-fundo); }

.usuario-atual {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--txt-fraco);
}
.usuario-nome { font-weight: 600; color: var(--txt); }

.cracha {
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  border: 1px solid var(--info-borda);
  background: var(--info-fundo);
  color: var(--info-txt);
}
.cracha-admin { border-color: var(--gestor-borda); background: var(--gestor-fundo); color: var(--gestor-txt); }

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--txt-fraco);
  cursor: pointer;
}
.botao-icone:hover { color: var(--accent); border-color: var(--info-borda-forte); background: var(--info-fundo); }
.botao-icone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--txt-suave);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.botao:hover:not(:disabled) { border-color: var(--linha-hover); color: var(--txt); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.botao-primario { border-color: transparent; background: var(--accent); color: var(--sobre-accent); }
.botao-primario:hover:not(:disabled) { background: var(--accent-forte); color: var(--sobre-accent); }

.botao-perigo { color: var(--crit-txt); border-color: var(--crit-borda); }
.botao-perigo:hover:not(:disabled) { background: var(--crit-fundo); color: var(--crit-txt); border-color: var(--crit-borda-forte); }

/* O botão principal do celular: grande o bastante para o dedo de luva. */
.botao-grande { width: 100%; padding: 1rem; font-size: 1.05rem; border-radius: 12px; }

/* ------------------------------------------------------------ login (PIN) */
.lista-usuarios { display: flex; flex-direction: column; gap: .75rem; }

.usuario-opcao {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  color: var(--txt);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.usuario-opcao:hover { border-color: var(--info-borda-forte); background: var(--info-fundo-suave); }
.usuario-opcao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.usuario-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--info-fundo);
  color: var(--info-txt);
}

.pin-pontos { display: flex; justify-content: center; gap: 1rem; margin: 1.25rem 0; }
.pin-ponto {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--linha-forte);
  transition: background .1s, border-color .1s;
}
.pin-ponto.cheio { background: var(--accent); border-color: var(--accent); }
.pin-pontos.tremer { animation: tremer .3s ease-in-out 2; }
@keyframes tremer { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 280px; margin: 0 auto; }
.tecla {
  height: 58px;
  border-radius: 14px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--txt);
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .1s;
}
.tecla:active { background: var(--info-fundo); }
.tecla:disabled { opacity: .5; }
.tecla:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------- formulário (campo) */
.form-lancamento .input { width: 100%; min-height: 48px; font-size: 1rem; }
.form-lancamento .campo > label { display: flex; align-items: center; gap: .35rem; }

/* 16px mínimo em campo de formulário: abaixo disso o Safari do iPhone dá zoom
   na página ao tocar no campo, e o apontador perde a tela de vista. */
@media (max-width: 640px) {
  .input { font-size: 16px; }
}

.grade-opcoes { display: grid; gap: .5rem; }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }

.opcao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 48px;
  padding: .5rem .6rem;
  border-radius: 10px;
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--txt-suave);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: all .12s;
}
.opcao:hover { border-color: var(--linha-hover); }
.opcao[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--info-fundo);
  color: var(--info-txt);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .25);
}
.opcao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opcao-material { justify-content: flex-start; text-align: left; }

/* Botões de filtro da lista (Todas · Infra · Concreteira), como no sistema de frotas. */
.chip-filtro {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 36px; padding: .3rem .85rem; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: var(--superficie);
  color: var(--txt-suave); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.chip-filtro:hover { border-color: var(--linha-hover); }
.chip-filtro[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.chip-filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-qtd { padding: 0 .4rem; border-radius: 999px; background: var(--realce); color: var(--txt-suave); font-size: .75rem; }
.chip-filtro[aria-pressed="true"] .chip-qtd { background: rgb(255 255 255 / .25); color: #fff; }

/* Bolinha de cor do material. Sempre acompanhada do NOME — cor sozinha não
   identifica nada para quem não distingue as cores. */
.marca-cor { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 999px; }

.dica { font-size: .75rem; color: var(--txt-fraco); }
.link-acao { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* -------------------------------------------------------------- indicadores */
.kpi {
  padding: .9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--linha);
  background: var(--superficie);
  box-shadow: var(--sombra-painel);
}
.kpi-rotulo { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-fraco); }
.kpi-valor { margin-top: .2rem; font-size: 1.45rem; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .72rem; color: var(--txt-fraco); }
.kpi-destaque { border-color: var(--info-borda); background: linear-gradient(180deg, var(--info-fundo), var(--superficie)); }

.numero { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------------ gráficos
   Barras horizontais em HTML (não em canvas): o rótulo e o valor ficam SEMPRE
   visíveis, o que dispensa legenda, funciona para daltônico e sai igual no PDF. */
.barras { display: flex; flex-direction: column; gap: .7rem; }
.barra-linha { display: flex; flex-direction: column; gap: .3rem; }
.barra-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .82rem; }
.barra-nome { display: flex; align-items: center; gap: .4rem; min-width: 0; color: var(--txt-suave); }
.barra-nome span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-valor { flex: 0 0 auto; color: var(--txt); font-variant-numeric: tabular-nums; }
.barra-valor small { color: var(--txt-fraco); font-weight: 400; }
.barra-trilho { height: 10px; border-radius: 999px; background: var(--barra-fundo); overflow: hidden; }
/* Ponta arredondada de 4px, ancorada no zero. */
.barra-cheia { height: 100%; border-radius: 4px; background: var(--serie-unica); min-width: 3px; }

/* Colunas por dia (SVG). A grade é recessiva; a série é uma cor só. */
.grafico-dias { width: 100%; height: 240px; display: block; }
.grafico-dias .grade-linha { stroke: var(--grade); stroke-width: 1; }
.grafico-dias .eixo-texto { fill: var(--txt-fraco); font-size: 11px; }
.grafico-dias .coluna { fill: var(--serie-unica); }
.grafico-dias .coluna-alvo { fill: transparent; cursor: default; }
.grafico-dias .coluna-alvo:hover + .coluna,
.grafico-dias .coluna:hover { opacity: .8; }

.dica-flutuante {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  padding: .45rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  box-shadow: var(--sombra-flutuante);
  font-size: .78rem;
  color: var(--txt-suave);
}
.dica-flutuante strong { display: block; color: var(--txt); }

.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--txt-fraco); font-size: .88rem; }

/* ------------------------------------------------------------ aviso de erro */
.faixa-erro {
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--crit-borda);
  background: var(--crit-fundo);
  color: var(--crit-txt);
  font-size: .85rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 90;
  max-width: calc(100% - 2rem);
  padding: .7rem 1.1rem;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--sombra-flutuante);
  border: 1px solid var(--ok-borda);
  background: var(--ok-fundo);
  color: var(--ok-txt);
}
.toast.toast-erro { border-color: var(--crit-borda); background: var(--crit-fundo); color: var(--crit-txt); }
.toast.hidden { display: none; }

/* -------------------------------------------------------- impressão (PDF)
   O relatório da diretoria é a própria tela, impressa. `Ctrl+P` / "Gerar
   PDF" → "Salvar como PDF". Cores de fundo forçadas: sem isso o navegador
   imprime as barras em branco e o gráfico some. */
.so-impressao { display: none; }

@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nao-imprimir, .cabecalho, .toast, .dica-flutuante { display: none !important; }
  .so-impressao { display: block !important; }
  .painel, .kpi { box-shadow: none !important; break-inside: avoid; }
  .quebra-antes { break-before: page; }
  main { padding: 0 !important; max-width: none !important; }
  /* No papel, sempre o tema claro — tinta escura em fundo preto não imprime. */
  [data-tema="escuro"] { color-scheme: light; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Sem o CDN do Tailwind a classe `hidden` não existiria e todo aviso
   escondido apareceria na tela. Declarada aqui também, por segurança. */
.hidden { display: none !important; }

/* Login no celular: sem isto a caixa cresce até o conteúdo mais largo (nome +
   crachá) e passa da borda da tela. `minmax(0, …)` deixa o grid encolher. */
.tela-login { grid-template-columns: minmax(0, 1fr); }
.login-caixa { justify-self: center; max-width: 100%; }
.usuario-opcao > span.flex-1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabelas no papel: A4 retrato tem ~180mm úteis. Fonte menor e cabeçalho que
   quebra linha, senão a matriz Obra × Material corta a coluna Total. */
@media print {
  .overflow-x-auto { overflow: visible !important; }
  .tabela { font-size: .7rem; }
  .tabela thead th { position: static; white-space: normal; padding: .35rem .45rem; font-size: .6rem; }
  .tabela tbody td, .tabela tfoot td { padding: .35rem .45rem; }
  .grafico-dias { height: 190px; }
}


/* ==========================================================================
   Celular primeiro (mesmo gesto do app de frotas)

   Quem usa é o apontador, no celular, com uma mão. Abaixo de 768px:
     · o menu sai do topo e vira BARRA INFERIOR (polegar alcança);
     · o cabeçalho encolhe para o título da tela + selo Online/Offline;
     · tabela vira lista de CARTÕES (cada linha um cartão, rótulo à esquerda);
     · janela (modal) sobe de baixo e ocupa a largura inteira.
   No computador nada disso aparece — a tela do admin continua larga.
   ========================================================================== */

/* ------------------------------------------------------- selo de conexão */
.selo-conexao {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid var(--ok-borda);
  background: var(--ok-fundo);
  color: var(--ok-txt);
  white-space: nowrap;
}
.selo-conexao.offline { border-color: var(--crit-borda); background: var(--crit-fundo); color: var(--crit-txt); }
.selo-conexao.pendente { border-color: var(--warn-borda); background: var(--warn-fundo); color: var(--warn-txt); }

/* Lançamento guardado no celular, ainda não aceito pelo servidor. Borda
   tracejada: não é dado oficial, e precisa parecer diferente do que é. */
.cartao-lanc.pendente { border-style: dashed; border-color: var(--warn-borda-forte); }
.cartao-lanc.recusado { border-style: dashed; border-color: var(--crit-borda); }
.faixa-aviso {
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--warn-borda);
  background: var(--warn-fundo);
  color: var(--warn-txt);
  font-size: .85rem;
}

/* --------------------------------------------------------- barra inferior */
.nav-inferior { display: none; }

@media (max-width: 767px) {
  .so-desktop { display: none !important; }

  body.tem-nav-inferior { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .nav-inferior {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linha);
    background: rgb(var(--superficie-rgb) / .97);
    backdrop-filter: blur(8px);
  }
  .nav-inferior a, .nav-inferior button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-height: 54px;
    padding: .35rem .2rem;
    border: 0;
    background: none;
    color: var(--txt-apagado);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .nav-inferior svg { width: 24px; height: 24px; }
  .nav-inferior [aria-current="page"] { color: var(--txt); }
  .nav-inferior [aria-current="page"] svg { color: var(--accent); }

  /* Cabeçalho compacto: o menu de cima e o nome somem (estão na barra e no
     "Sair"); fica a marca, o tema e a chave do PIN. */
  .cabecalho .usuario-nome, .cabecalho .cracha, .cabecalho nav, .cabecalho [data-acao="sair"] { display: none; }
  .cabecalho .texto-marca div + div { display: none; }

  /* --------------------------------------------- tabela → lista de cartões
     Cada <td> traz `data-rotulo`; no celular a linha vira cartão e o rótulo
     aparece à esquerda do valor. Sem rolagem lateral, que no celular esconde
     justamente a coluna das ações. */
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
  .tabela-cartoes tbody tr {
    margin-bottom: .6rem;
    padding: .55rem .8rem;
    border: 1px solid var(--linha);
    border-radius: 12px;
    background: var(--superficie);
    box-shadow: var(--sombra-painel);
  }
  .tabela-cartoes tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .3rem 0 !important;
    border: 0 !important;
    text-align: right;
    white-space: normal !important;
  }
  .tabela-cartoes tbody td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--txt-fraco);
    text-align: left;
  }
  /* A primeira célula é o título do cartão; a de ações vira rodapé. */
  .tabela-cartoes tbody td:first-child { font-weight: 700; color: var(--txt); font-size: .95rem; }
  .tabela-cartoes tbody td:first-child::before { display: none; }
  .tabela-cartoes tbody td.acoes { justify-content: flex-end; gap: .5rem; padding-top: .5rem !important; border-top: 1px solid var(--linha) !important; margin-top: .3rem; }
  .tabela-cartoes tbody td.acoes::before { display: none; }
  .tabela-cartoes tbody td.acoes .botao-icone { width: 44px; height: 40px; }
  .tabela-cartoes tbody td[colspan] { justify-content: center; }
  .tabela-cartoes tbody td[colspan]::before { display: none; }
  .tabela-cartoes tfoot { display: none; }

  /* ----------------------------------------------------- abas que rolam */
  .abas-rolam { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .abas-rolam::-webkit-scrollbar { display: none; }
  .abas-rolam .tab-btn { flex: 0 0 auto; padding: .7rem .9rem; }

  /* ------------------------------------------- janela que sobe de baixo */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-caixa { width: 100% !important; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .modal-caixa .input { min-height: 48px; font-size: 16px; }

  /* Painel: KPI mais compacto, dois por linha. */
  .kpi { padding: .75rem .85rem; }
  .kpi-valor { font-size: 1.2rem; }

  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------- seletor em cartão
   O <select> nativo continua (no celular abre a lista do próprio aparelho),
   mas vestido de cartão grande com ícone, como no app de frotas. */
.seletor {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  padding: .55rem .9rem .55rem .6rem;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  background: var(--superficie);
  transition: border-color .15s, box-shadow .15s;
}
.seletor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15); }
.seletor-icone {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--info-fundo);
  color: var(--info-txt);
}
.seletor-icone svg { width: 22px; height: 22px; }
.seletor-texto { min-width: 0; flex: 1; }
.seletor-titulo { font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seletor-titulo.sem-valor { color: var(--txt-apagado); font-weight: 500; }
.seletor-sub { font-size: .82rem; color: var(--txt-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seletor-seta { color: var(--txt-apagado); flex: 0 0 auto; }
/* O select fica POR CIMA, invisível: o toque abre a lista nativa, e o
   leitor de tela continua lendo um <select> de verdade. */
.seletor select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

.campo-titulo { font-size: .9rem; font-weight: 600; color: var(--txt-suave); }
.dica-campo { font-size: .82rem; color: var(--txt-fraco); }
.dica-campo b { color: var(--txt); }

/* Campo com ícone à esquerda (volume, viagens). */
.input-icone { position: relative; }
.input-icone svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--txt-apagado); pointer-events: none; }
.input-icone .input { padding-left: 2.6rem; }

/* Filtros do painel: no celular começam recolhidos. */
@media (max-width: 767px) {
  .filtros-recolhidos .filtros-corpo { display: none; }
}
.botao-filtros { display: none; }
@media (max-width: 767px) { .botao-filtros { display: inline-flex; } }

@media print { .nav-inferior, .selo-conexao, .botao-filtros { display: none !important; } .filtros-corpo { display: none !important; } }

/* Lançamento: no celular, uma vista por vez (Lançar / Histórico), escolhida
   pela barra inferior. No computador as duas ficam lado a lado. */
@media (max-width: 767px) {
  body[data-vista="lancar"] #vista-historico { display: none; }
  body[data-vista="historico"] #vista-lancar { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Cartão de lançamento no histórico. */
.cartao-lanc { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem; }
.cartao-lanc .acoes-cartao { display: flex; flex-direction: column; gap: .4rem; }
.cartao-lanc .acoes-cartao .botao-icone { width: 42px; height: 40px; }
@media (max-width: 767px) {
  /* No lançamento o selo fica ao lado do título "Lançar"; no topo seria repetido. */
  body[data-vista] .cabecalho .selo-conexao { display: none; }
  /* Atalhos de período: uma linha que rola, em vez de quebrar em três. */
  #atalhos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #atalhos::-webkit-scrollbar { display: none; }
  #atalhos .opcao { flex: 0 0 auto; }
}

/* O cartão-seletor é um <label> dentro de `.campo`: sem isto ele herdaria o
   estilo de rótulo pequeno em maiúsculas de `.campo > label`. */
.campo > label.seletor { font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: inherit; }
.form-lancamento .campo > label.campo-titulo,
.form-lancamento .campo > .campo-titulo { font-size: .9rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--txt-suave); }
.seletor-titulo, .seletor-sub { display: block; }
/* Texto longo ("VW 17.230 CONSTELLATION…") corta com reticências em vez de
   alargar a página: flex e grid não encolhem abaixo do conteúdo sem min-width:0. */
.seletor, .seletor-texto, .campo, .form-lancamento, #vista-lancar, #vista-historico { min-width: 0; }
.seletor { width: 100%; }
html, body { overflow-x: hidden; }
.seletor-sub:empty { display: none; }
@media (max-width: 767px) {
  /* Cabeçalho numa linha só: marca à esquerda, selo + PIN + tema à direita. */
  .cabecalho > div { flex-wrap: nowrap; }
  .cabecalho .texto-marca { display: none; }
}

/* ------------------------------------------------- folha de escolha (js/folha.js)
   A lista do <select> trocada por uma folha que sobe de baixo, como no app de
   frotas: busca, filtro por divisão e um cartão por item. No computador vira
   uma janela centralizada. */
.seletor.com-folha { cursor: pointer; }
.seletor.com-folha select { pointer-events: none; }
html.folha-aberta, html.folha-aberta body { overflow: hidden; }

.folha-fundo {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--cortina);
  animation: aparecer .15s ease-out;
}
.folha {
  width: 100%; max-width: 560px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--sombra-modal);
  padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  animation: subir .2s ease-out;
  outline: none;
}
@media (min-width: 768px) {
  .folha-fundo { align-items: center; padding: 1.5rem; }
  .folha { border-radius: 18px; max-height: 80vh; }
  .folha-alca { visibility: hidden; }
}
.folha-alca { width: 44px; height: 5px; border-radius: 999px; background: var(--linha-forte); margin: .2rem auto .6rem; flex: 0 0 auto; }
.folha-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.folha-titulo { font-size: 1.15rem; font-weight: 700; color: var(--txt); }
.folha-fechar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  color: var(--txt-fraco); background: transparent; border: 0; cursor: pointer;
}
.folha-fechar:hover { background: var(--realce); color: var(--txt); }
.folha-fechar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.folha-busca {
  display: flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: 0 .9rem;
  border: 1px solid var(--linha-forte); border-radius: 14px;
  background: var(--superficie); color: var(--txt-fraco);
  flex: 0 0 auto;
}
.folha-busca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15); }
.folha-busca-campo { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--txt); font-size: 16px; }
.folha-busca-campo::placeholder { color: var(--txt-apagado); }

.folha-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; flex: 0 0 auto; }
.folha-chips .chip-filtro { min-height: 40px; padding: .35rem 1rem; font-size: .9rem; }
/* Escolhido em cinza-escuro, como no app de frotas. Texto na cor da superfície: no tema escuro o
   fundo vira claro e o texto escuro, sem perder contraste. */
.folha-chips .chip-filtro[aria-pressed="true"] { background: var(--txt-forte); border-color: var(--txt-forte); color: var(--superficie); }
.folha-chips .chip-filtro[aria-pressed="true"] .chip-qtd { background: var(--superficie); color: var(--txt-forte); }

.folha-lista {
  display: flex; flex-direction: column; gap: .6rem;
  margin-top: .75rem; padding-bottom: .25rem;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; min-height: 120px;
}
.folha-grupo {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-fraco); margin: .35rem .25rem 0;
}
.folha-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  min-height: 68px; padding: .6rem .8rem .6rem .6rem;
  border: 1px solid var(--linha); border-radius: 14px;
  background: var(--superficie); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.folha-item:hover { border-color: var(--linha-hover); }
.folha-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.folha-item.escolhido { border-color: var(--accent); background: var(--info-fundo); }
.folha-item-icone {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 12px; background: var(--realce); color: var(--txt-suave);
}
.folha-item.escolhido .folha-item-icone { background: var(--accent); color: var(--sobre-accent); }
.folha-item-texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.folha-item-titulo { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--txt); }
.folha-item-sub { font-size: .85rem; color: var(--txt-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folha-item-extra { font-size: .78rem; color: var(--txt-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folha-item-seta { color: var(--txt-apagado); flex: 0 0 auto; }
.folha-etiqueta {
  font-size: .68rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px;
  background: var(--realce); color: var(--txt-fraco); border: 1px solid var(--linha);
}
.folha-vazia { padding: 2rem 1rem; text-align: center; color: var(--txt-fraco); }

/* ------------------------------------------------- relatório por divisão (painel)
   Geral · Infra · Concreteira, lado a lado como no app de frotas. Três colunas
   iguais no celular; no computador, do tamanho do texto. */
.grade-divisao { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 768px) { .grade-divisao { display: flex; flex-wrap: wrap; } }
.opcao-divisao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 42px; padding: .35rem .8rem; white-space: nowrap; }
.opcao-divisao svg { flex: 0 0 auto; }
/* Celular estreito: "Concreteira" não cabe com o ícone em um terço da tela. */
@media (max-width: 420px) { .opcao-divisao { padding: .35rem .4rem; } .opcao-divisao svg { display: none; } }

/* ------------------------------------------------- saldo de corte da obra
   Previsto no projeto − já retirado. Barra = % retirado; passou do previsto
   fica em âmbar (aviso, não erro: empolamento faz sair mais que o projeto). */
.saldo-obra {
  margin-top: .5rem; padding: .6rem .8rem; border-radius: 12px;
  background: var(--info-fundo); border: 1px solid var(--info-borda); color: var(--txt-forte);
  font-size: .88rem;
}
.saldo-obra.passou { background: var(--warn-fundo); border-color: var(--warn-borda); }
.saldo-obra-texto { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; }
.saldo-obra-pct, .saldo-linha-sub { color: var(--txt-fraco); font-size: .8rem; }
.saldo-barra { height: 8px; margin-top: .4rem; border-radius: 999px; background: var(--barra-fundo); overflow: hidden; }
.saldo-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--serie-unica, var(--accent)); }
.passou .saldo-barra > span { background: var(--warn); }
.saldo-linha-topo { display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; }
.saldo-linha-nome { color: var(--txt); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saldo-linha-valor { color: var(--txt-forte); white-space: nowrap; }
.saldo-linha.passou .saldo-linha-valor { color: var(--warn-txt); }
.saldo-linha-sub { margin-top: .2rem; }
@media print { .saldo-barra > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Barra do saldo dividida por material: cada trecho na cor do material, com
   2px de respiro entre eles (fundo da superfície). Passou do previsto: a
   barra enche e um traço marca onde estava o previsto. */
.saldo-barra-seg { position: relative; display: flex; gap: 2px; height: 10px; }
.saldo-barra-seg .saldo-seg { display: block; height: 100%; min-width: 3px; }
/* Seletor mais forte que `.passou .saldo-barra > span` (que pinta de âmbar). */
.saldo-barra.saldo-barra-seg > span.saldo-marca { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 0; background: var(--txt); box-shadow: 0 0 0 1px var(--superficie); }
.saldo-legenda, .saldo-detalhe { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .35rem; font-size: .8rem; color: var(--txt-suave); }
.saldo-leg { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.saldo-leg b { color: var(--txt); }
.saldo-leg-pct { color: var(--txt-fraco); }
.saldo-detalhe { display: none; padding: .5rem .6rem; border-radius: 10px; background: var(--realce); }
.saldo-linha.aberto .saldo-detalhe { display: flex; }
.saldo-linha.aberto .saldo-legenda { display: none; }
.saldo-linha.com-detalhe { cursor: pointer; border-radius: 10px; padding: .35rem .4rem; margin: -.35rem -.4rem; }
.saldo-linha.com-detalhe:hover { background: var(--realce); }
.saldo-linha.com-detalhe:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.saldo-ver { margin-left: .5rem; color: var(--accent); font-weight: 600; }
/* Papel não tem clique: o detalhe por material sai sempre. */
@media print {
  .saldo-detalhe { display: flex !important; background: none; padding: 0; }
  .saldo-legenda { display: none !important; }
  .saldo-seg, .marca-cor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Célula com dois números (volume em cima, viagens embaixo) — tabela Caminhões × material. */
.cel-dupla { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.cel-dupla small { color: var(--txt-fraco); font-size: .72rem; font-weight: 400; }
/* Linha de total dentro do corpo (para virar cartão também no celular). */
.tabela tr.linha-total td { font-weight: 700; background: var(--realce); }
/* No cartão do celular: rótulo longo ("Resíduos da construção civil (RCC)")
   quebra linha; o número nunca encolhe. */
@media (max-width: 767px) {
  .tabela-cartoes tbody td:has(.cel-dupla)::before { flex: 1 1 auto; white-space: normal; }
  .cel-dupla { flex: 0 0 auto; white-space: nowrap; }
}