/*
 * Estilos do Sistema de Compostagem · Organosolví
 * Mobile first: a base é o celular; telas maiores são ajustadas por @media.
 * Cores, medidas e decisões visuais documentadas em docs/06-identidade-visual.md.
 */

/* --- 1. Fonte e tokens ----------------------------------------------------- */

/* Source Sans 3 (licença OFL, static/fonts/): prima livre da Myriad, a fonte do logo.
   Servida pelo próprio sistema, funciona offline. */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-variavel.9ef356ea553a.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --verde-800: #1f4229;
  --verde-700: #2a5734;
  --verde-600: #346a3e;
  --verde-500: #3e7845; /* verde do logo */
  --verde-100: #e2ede0;
  --verde-50: #f1f6ef;

  --dourado-600: #7f6920; /* texto dourado: 4,8:1 sobre --fundo */
  --dourado-500: #a18a3a; /* dourado do logo */
  --dourado-300: #d6c27e;
  --dourado-100: #f6eed3;

  --tinta: #1d2a21;
  --tinta-suave: #4d5b51;
  --borda: #d3dccf; /* linhas decorativas (cartões, divisórias) */
  --borda-campo: #879683; /* contorno de campos e controles: 3:1 sobre branco */
  --borda-campo-forte: #6f7f6c;
  --neutro-100: #eceeea;
  --fundo: #f4f6f1;
  --fundo-campo: #f6f8f4;
  --superficie: #ffffff;

  --erro: #b3261e;
  --erro-forte: #8f1f18;
  --erro-fundo: #fdeceb;
  --erro-borda: #f2c4bf;
  --aviso-texto: #4f410f;

  /* Etapas do lote (mapa e etiquetas): cor forte no texto e na borda, fundo claro.
     Texto sobre o fundo de 5,3:1 a 6,9:1. A etapa sempre vem escrita, não só na cor. */
  --etapa-montagem: #1f5a96;
  --etapa-montagem-fundo: #e4edf7;
  --etapa-compostagem: #934611;
  --etapa-compostagem-fundo: #f7e9dd;
  --etapa-leito: #66408f;
  --etapa-leito-fundo: #efe8f6;
  --etapa-pronto: #0a6670;
  --etapa-pronto-fundo: #dcefef;
  --etapa-peneiramento: #735f1d;
  --etapa-peneiramento-fundo: #f6eed3;
  --etapa-concluido: #2a5734;
  --etapa-concluido-fundo: #e2ede0;

  /* Séries dos gráficos (temperatura e umidade): par validado para daltonismo e
     contraste de 3:1 sobre o branco. Só nas linhas e nos pontos, nunca no texto. */
  --serie-temperatura: #eb6834;
  --serie-umidade: #2a78d6;

  --raio: 14px;
  --raio-campo: 14px;
  --toque: 48px;
  --fonte: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --curva-suave: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- 2. Base --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
p {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--verde-700);
}

[hidden] {
  display: none !important;
}

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

.icone {
  width: 20px;
  height: 20px;
  flex: none;
}

.texto-suave {
  color: var(--tinta-suave);
}

/* --- 3. Componentes -------------------------------------------------------- */

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--raio-campo);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.05s;
}

.botao:active {
  transform: translateY(1px);
}

.botao-primario {
  background: var(--verde-600);
  color: #fff;
}

.botao-primario:hover {
  background: var(--verde-700);
}

.botao-secundario {
  background: var(--superficie);
  color: var(--verde-800);
  border: 1.5px solid var(--borda);
}

.botao-secundario:hover {
  background: var(--verde-50);
}

.botao-compacto {
  min-height: var(--toque);
  padding: 0 14px;
  font-size: 16px;
}

.botao-bloco {
  width: 100%;
}

.botao:disabled {
  cursor: progress;
}

.botao-giro {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid rgb(255 255 255 / 40%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

.botao.carregando .botao-giro {
  display: inline-block;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Campos com rótulo flutuante: o rótulo fica dentro do campo e sobe ao digitar.
   Depende de placeholder=" " no input (ver apps/contas/forms.py). */
.campo {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.campo-flutuante {
  position: relative;
}

.campo-flutuante input {
  display: block;
  width: 100%;
  height: 62px;
  padding: 24px 16px 6px 50px;
  font-size: 18px; /* 16px ou mais evita o zoom automático do iPhone ao focar */
  background: var(--fundo-campo);
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  transition: border-color 0.2s, background-color 0.2s;
}

.campo-flutuante input:hover {
  border-color: var(--borda-campo-forte);
}

.campo-flutuante input:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--verde-500);
}

.campo-flutuante input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--superficie) inset;
  -webkit-text-fill-color: var(--tinta);
  caret-color: var(--tinta);
}

.campo-flutuante label {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--tinta-suave);
  pointer-events: none;
  transition: top 0.2s var(--curva-suave), font-size 0.2s var(--curva-suave), color 0.2s;
}

.campo-flutuante input:focus + label,
.campo-flutuante input:not(:placeholder-shown) + label {
  top: 17px;
  font-size: 13px;
  font-weight: 650;
}

/* Em regra separada: um navegador que não conheça o seletor descartaria a regra inteira */
.campo-flutuante input:-webkit-autofill + label {
  top: 17px;
  font-size: 13px;
  font-weight: 650;
}

.campo-flutuante input:focus + label {
  color: var(--verde-600);
}

/* Linha de foco que cresce da esquerda, nas cores do logo */
.campo-linha {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--verde-500), var(--dourado-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--curva-suave);
}

.campo-flutuante input:focus ~ .campo-linha {
  transform: scaleX(1);
}

.campo-flutuante input[aria-invalid="true"] {
  border-color: var(--erro);
}

.campo-flutuante input[aria-invalid="true"] + label {
  color: var(--erro);
}

.campo-flutuante.com-acao input {
  padding-right: 56px;
}

.campo-icone {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--tinta-suave);
  pointer-events: none;
  transition: color 0.2s;
}

.campo-flutuante:focus-within .campo-icone {
  color: var(--verde-600);
}

.campo-acao {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  transform: translateY(-50%);
}

.campo-acao:hover {
  background: var(--verde-50);
  color: var(--verde-700);
}

.campo-acao .icone {
  transition: transform 0.25s var(--curva-suave), opacity 0.2s;
}

.campo-acao .icone-ocultar,
.campo-acao[aria-pressed="true"] .icone-mostrar {
  display: none;
}

.campo-acao[aria-pressed="true"] .icone-ocultar {
  display: block;
  animation: girar-olho 0.3s var(--curva-suave);
}

@keyframes girar-olho {
  from {
    opacity: 0;
    transform: rotate(-30deg) scale(0.7);
  }
}

.campo-dica {
  padding-left: 4px;
  font-size: 15px;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.campo-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--aviso-texto);
}

.campo-aviso .icone {
  width: 16px;
  height: 16px;
}

.errorlist {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--erro);
}

/* Interruptor (liga/desliga) sobre um checkbox de verdade, que continua acessível */
.interruptor-opcao {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: var(--toque);
  margin: 4px 0 24px;
}

.interruptor-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 32px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.interruptor {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: var(--borda-campo);
  transition: background-color 0.25s;
}

.interruptor::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(10 30 18 / 28%);
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.interruptor-input:checked + .interruptor {
  background: var(--verde-600);
}

.interruptor-input:checked + .interruptor::after {
  transform: translateX(20px);
}

.interruptor-input:focus-visible + .interruptor {
  outline: 3px solid var(--dourado-500);
  outline-offset: 2px;
}

.interruptor-texto {
  line-height: 1.35;
}

.interruptor-texto label {
  display: block;
  font-weight: 650;
  cursor: pointer;
}

.interruptor-texto small {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 400;
  color: var(--tinta-suave);
}

/* Alertas */
.alerta {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: var(--raio-campo);
  font-size: 16px;
  border: 1px solid transparent;
}

.alerta .icone {
  margin-top: 2px;
}

.alerta-erro,
.alerta-error {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro);
}

/* Erros de formulário e faixas fixas da página; os avisos de acontecimentos vão em balão (.notificacao) */
.alerta-info,
.alerta-success {
  background: var(--verde-50);
  border-color: var(--verde-100);
  color: var(--verde-800);
}

.alerta-warning {
  background: var(--dourado-100);
  border-color: var(--dourado-300);
  color: var(--aviso-texto);
}

.alerta p {
  margin: 0;
}

/* Alertas internos da página inicial (módulo 11) */
.alerta-itens {
  margin: 4px 0 0;
  padding-left: 18px;
}

.alerta-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: inherit;
  font-weight: 600;
}

/* Notificações em balão (D-58; templates/partes/notificacao.html e app.js, parte 9).
   No celular, embaixo e na largura da tela; a partir de 768 px, no canto de baixo à direita,
   longe dos botões do topo da página. Um toque no balão fecha: o que estiver embaixo fica
   livre. Abaixo da gaveta do menu e do fundo dela (z-index 75 e 80). */
.notificacoes {
  position: fixed;
  z-index: 70;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.notificacao {
  --cor-notificacao: var(--verde-600);
  --fundo-notificacao: var(--verde-50);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 4px 14px 14px;
  overflow: hidden;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--cor-notificacao);
  border-radius: var(--raio);
  box-shadow: 0 14px 34px rgb(10 30 18 / 18%), 0 2px 6px rgb(10 30 18 / 8%);
  cursor: pointer;
  pointer-events: auto;
  animation: notificacao-subir 0.34s var(--curva-suave);
}

.notificacao-info {
  --cor-notificacao: var(--etapa-montagem);
  --fundo-notificacao: var(--etapa-montagem-fundo);
}

.notificacao-warning {
  --cor-notificacao: var(--dourado-600);
  --fundo-notificacao: var(--dourado-100);
}

.notificacao-error {
  --cor-notificacao: var(--erro);
  --fundo-notificacao: var(--erro-fundo);
}

.notificacao-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  color: var(--cor-notificacao);
  background: var(--fundo-notificacao);
  border-radius: 50%;
}

.notificacao-corpo {
  min-width: 0;
  padding-top: 2px;
}

.notificacao-titulo {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cor-notificacao);
}

.notificacao-texto p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.notificacao-texto p + p {
  margin-top: 4px;
  color: var(--tinta-suave);
}

.notificacao-fechar {
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  margin: -6px 0 -6px 0;
  color: var(--tinta-suave);
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.notificacao-fechar:hover {
  color: var(--tinta);
  background: var(--neutro-100);
}

/* Tempo até sumir: a app.js põe a duração em --tempo e a classe .correndo; para junto com ela. */
.notificacao-tempo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--cor-notificacao);
  opacity: 0.5;
  transform-origin: left;
  display: none;
}

.notificacao.correndo .notificacao-tempo {
  display: block;
  animation: notificacao-tempo var(--tempo, 6s) linear forwards;
}

.notificacao.pausada .notificacao-tempo {
  animation-play-state: paused;
}

.notificacao.saindo {
  animation: notificacao-sair 0.24s ease-in forwards;
}

/* Telas sem a barra do topo (login, mensagens): o balão fica em cima em qualquer tamanho,
   longe do cartão (no celular, o botão Entrar fica embaixo) e logo abaixo da faixa de sem
   internet, cuja altura a app.js põe em --altura-aviso. */
.pagina-login .notificacoes,
.pagina-mensagem .notificacoes {
  top: calc(max(16px, env(safe-area-inset-top)) + var(--altura-aviso, 0px));
  bottom: auto;
}

@keyframes notificacao-subir {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

@keyframes notificacao-entrar-do-lado {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}

@keyframes notificacao-sair {
  to {
    opacity: 0;
    transform: translateX(32px);
  }
}

@keyframes notificacao-tempo {
  to {
    transform: scaleX(0);
  }
}

@media (min-width: 768px) {
  .notificacoes {
    right: 24px;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: auto;
    width: min(400px, calc(100vw - 48px));
  }

  .notificacao {
    animation-name: notificacao-entrar-do-lado;
  }
}

/* Aviso de conexão (topo da tela) */
.aviso-conexao {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--dourado-100);
  color: var(--aviso-texto);
  border-bottom: 1px solid var(--dourado-300);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.aviso-conexao.destaque {
  animation: destacar 0.6s ease-in-out 2;
}

@keyframes destacar {
  50% {
    background: var(--dourado-300);
  }
}

/* Selo de conexão */
.selo-conexao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--verde-50);
  color: var(--verde-700);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.selo-conexao i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-500);
}

.selo-conexao.selo-offline {
  background: var(--dourado-100);
  color: var(--aviso-texto);
}

.selo-conexao.selo-offline i {
  background: var(--dourado-500);
}

/* Selo da fila: registros guardados no aparelho (static/js/fila.js) */
.selo-fila {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--toque);
  padding: 0 12px;
  border: 1.5px solid var(--dourado-300);
  border-radius: 999px;
  background: var(--dourado-100);
  color: var(--aviso-texto);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.selo-fila .icone {
  width: 16px;
  height: 16px;
}

.selo-fila-recusado {
  border-color: var(--erro-borda);
  background: var(--erro-fundo);
  color: var(--erro);
}

/* --- 4. Tela de login ------------------------------------------------------ */

/* 4.1 Fundo: foto aérea da fábrica (D-60). À noite a foto escurece. */
.pagina-login {
  --texto-cena: #fbf8e6;
  --chao-pagina: #143a22;
  --altura-cena: clamp(250px, 40vh, 380px);
  --foto-brilho: 1;
  background: var(--chao-pagina);
}

.periodo-noite {
  --foto-brilho: 0.5;
  --chao-pagina: #061a0e;
}

/* 4.2 Cena (a foto está em apps/contas/templates/contas/entrar.html) */
.login {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.cena {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--altura-cena);
  overflow: hidden;
  background: var(--chao-pagina);
}

/* Um pouco maior que a cena: a paralaxe e a abertura não mostram a borda da foto.
   login.js passa a posição do mouse (só no computador) em --px e --py. */
.cena-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
  filter: brightness(var(--foto-brilho));
  transform: translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -8px)) scale(1.05);
  transition: transform 0.8s var(--curva-suave);
}

/* Película verde-escura: o logo e o nome do sistema, em creme, ficam legíveis sobre o
   céu claro da foto (contraste medido), e a foto conversa com as cores da marca */
.cena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(4 22 12 / 74%) 0%, rgb(4 22 12 / 52%) 50%, rgb(4 22 12 / 20%) 80%);
  pointer-events: none;
}

/* Embaixo, a cena se dissolve no fundo da página */
.cena::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 22%;
  background: linear-gradient(180deg, transparent, var(--chao-pagina));
  pointer-events: none;
}

/* No computador a foto ocupa a tela: sombra forte só no canto do logo */
@media (min-width: 960px) {
  .cena::before {
    background:
      radial-gradient(ellipse 52% 48% at 17% 24%, rgb(4 22 12 / 72%), rgb(4 22 12 / 0%) 85%),
      linear-gradient(180deg, rgb(4 22 12 / 40%), rgb(4 22 12 / 12%) 55%, rgb(4 22 12 / 35%));
  }
}

/* Abertura: a foto se aproxima, a saudação e o cartão aparecem.
   Depois de um erro de login não repete: o cartão só treme. */
.pagina-login:not(.com-erro) .cena-foto {
  animation: aproximar 2.2s var(--curva-suave) backwards;
}

@keyframes aproximar {
  from {
    opacity: 0;
    transform: scale(1.14);
  }
}

.pagina-login:not(.com-erro) .login-marca > * {
  animation: surgir 0.9s var(--curva-suave) 0.55s both;
}

.pagina-login:not(.com-erro) .login-marca > * + * {
  animation-delay: 0.7s;
}

.pagina-login:not(.com-erro) .login-cartao {
  animation: surgir-cartao 1s var(--curva-suave) 0.4s both;
}

.com-erro .login-cartao {
  animation: tremer 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.1s both;
}

@keyframes nascer {
  from {
    transform: translateY(190px);
  }
}

@keyframes erguer {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes surgir-cartao {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
}

@keyframes tremer {
  20%,
  80% { transform: translateX(-3px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-6px); }
}

/* 4.3 Conteúdo: logo sobre o céu e cartão do formulário com a saudação */
.login-conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Logo na versão clara (static/img/organosolvi-logo-claro.png) e o nome do sistema */
.login-marca {
  height: calc(var(--altura-cena) - 32px);
  padding: max(24px, env(safe-area-inset-top)) 24px 0;
  color: var(--texto-cena);
}

.login-marca-logo {
  width: min(54vw, 210px);
  height: auto;
  filter: drop-shadow(0 2px 16px rgb(4 16 10 / 40%));
}

.login-marca-sistema {
  margin-top: 6px;
  font-size: 19px;
  font-weight: 700; /* negrito a partir de 19 px conta como texto grande no contraste (3:1) */
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgb(4 16 10 / 45%);
}

.login-cartao {
  flex: 1;
  padding: 30px 22px max(24px, env(safe-area-inset-bottom));
  background: var(--superficie);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 40px -14px rgb(4 18 10 / 55%);
}

.login-titulo {
  font-size: 34px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.login-subtitulo {
  margin: 8px 0 26px;
  font-size: 17px;
  color: var(--tinta-suave);
}

/* Botão Entrar: brilho que atravessa no hover, onda no toque */
.botao-entrar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  font-size: 18px;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--verde-500) 0%, var(--verde-700) 100%);
  box-shadow: 0 12px 26px -12px rgb(30 70 40 / 75%);
  transition: transform 0.2s var(--curva-suave), box-shadow 0.2s;
}

.botao-entrar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 30%) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--curva-suave);
}

.botao-entrar:hover {
  background: linear-gradient(135deg, var(--verde-500) 0%, var(--verde-700) 100%);
  box-shadow: 0 16px 30px -12px rgb(30 70 40 / 85%);
  transform: translateY(-1px);
}

.botao-entrar:hover::before {
  transform: translateX(120%);
}

.botao-entrar::after {
  content: "";
  position: absolute;
  top: var(--onda-y, 50%);
  left: var(--onda-x, 50%);
  z-index: -1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(255 255 255 / 45%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.botao-entrar.ondulando::after {
  animation: onda 0.65s ease-out;
}

@keyframes onda {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(26);
  }
}

.login-ajuda {
  margin-top: 22px;
  padding-top: 18px;
  font-size: 16px;
  color: var(--tinta-suave);
  border-top: 1px solid var(--borda);
}

.login-versao {
  margin-top: 6px;
  font-size: 14px;
  color: var(--tinta-suave);
}

/* Tablet em pé: cena maior e cartão flutuando sobre a paisagem */
@media (min-width: 600px) {
  .pagina-login {
    --altura-cena: 56vh;
  }

  .login-marca {
    height: auto;
    padding: max(48px, env(safe-area-inset-top)) 48px 0;
  }

  .login-marca-logo {
    width: 340px;
  }

  .login-marca-sistema {
    margin-top: 10px;
    font-size: 22px;
  }

  .login-conteudo {
    justify-content: space-between;
    gap: 32px;
  }

  .login-cartao {
    flex: none;
    width: min(480px, calc(100% - 48px));
    margin: 0 auto 48px;
    padding: 36px 36px 28px;
    border-radius: 28px;
    box-shadow: 0 40px 80px -30px rgb(3 14 8 / 80%);
  }
}

/* Computador e tablet deitado: a cena ocupa a tela; logo à esquerda, cartão à direita */
@media (min-width: 960px) {
  .cena {
    position: fixed;
    inset: 0;
    height: auto;
  }

  .login-conteudo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px clamp(40px, 6vw, 96px);
  }

  .login-marca {
    align-self: flex-start;
    padding: 7vh 0 0;
  }

  /* Cresce com a largura, mas sem descer até o horizonte em telas baixas */
  .login-marca-logo {
    width: clamp(280px, min(34vw, 52vh), 560px);
  }

  .login-marca-sistema {
    margin-top: 16px;
    font-size: clamp(20px, 1.7vw, 26px);
  }

  .login-cartao {
    width: 440px;
    margin: 0;
    padding: 44px 40px 30px;
    box-shadow:
      0 50px 100px -30px rgb(3 14 8 / 75%),
      0 0 0 1px rgb(255 255 255 / 40%);
  }

  .login-titulo {
    font-size: 40px;
  }
}

@media (min-width: 960px) and (max-height: 820px) {
  .login-conteudo {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .login-cartao {
    padding: 32px 36px 22px;
  }

  .login-subtitulo {
    margin-bottom: 18px;
  }

  .login-ajuda {
    margin-top: 16px;
    padding-top: 14px;
  }
}

/* Telas baixas (celular deitado): menos altura para a cena */
@media (max-height: 520px) and (max-width: 959px) {
  .pagina-login {
    --altura-cena: 200px;
  }

  .login-marca-logo {
    width: 160px;
  }

  .login-marca-sistema {
    margin-top: 6px;
    font-size: 16px;
  }

  /* A cena baixa mostra só o miolo da foto: película forte em toda a altura */
  .cena::before {
    background: linear-gradient(180deg, rgb(4 22 12 / 70%), rgb(4 22 12 / 45%));
  }
}

/* --- 5. Telas internas ----------------------------------------------------- */

/* Aparece só ao receber foco pelo teclado */
.pular-conteudo {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 90;
  padding: 10px 16px;
  border-radius: var(--raio-campo);
  background: var(--verde-700);
  color: #fff;
  font-weight: 700;
  transform: translateY(-160%);
}

.pular-conteudo:focus {
  transform: none;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 5.1 Moldura: menu lateral + área principal */
.app {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.menu-lateral {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(300px, 86vw);
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  box-shadow: 0 0 40px rgb(10 30 18 / 25%);
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.28s var(--curva-suave), visibility 0s linear 0.28s;
}

.menu-aberto .menu-lateral {
  visibility: visible;
  transform: none;
  transition: transform 0.28s var(--curva-suave);
}

.menu-fundo {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgb(10 30 18 / 45%);
}

.menu-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 18px;
}

.menu-marca img {
  width: auto;
  height: 46px;
}

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.botao-icone:hover {
  background: var(--verde-50);
}

.menu-navegacao ul {
  display: grid;
  gap: 2px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.menu-secao {
  margin: 8px 12px 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-suave);
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--toque);
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}

a.menu-item:hover {
  background: var(--verde-50);
}

.menu-item .icone {
  color: var(--verde-600);
}

.menu-item.ativo {
  background: var(--verde-100);
  color: var(--verde-800);
}

.menu-item.ativo::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--dourado-500);
}

/* Módulos ainda não entregues: visíveis para a gestão, sem link */
.menu-item-em-breve {
  color: var(--tinta-suave);
  font-weight: 500;
  min-height: 40px;
  font-size: 15px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.menu-item-em-breve .icone {
  color: var(--tinta-suave);
}

.menu-item .menu-em-breve-marca {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--tinta-suave);
}

.menu-rodape {
  margin-top: auto;
  padding: 16px 12px 0;
  font-size: 13px;
  color: var(--tinta-suave);
}

/* Topo */
.topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px clamp(12px, 3vw, 28px);
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

/* Alvo de toque de 48 px (o logo tem 40 de altura). */
.topo-marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
}

.topo-marca img {
  width: auto;
  height: 40px;
}

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

.topo-acoes form {
  margin: 0;
}

.topo-pessoa {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topo-pessoa-texto {
  display: grid;
  line-height: 1.2;
}

.topo-pessoa-texto strong {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.topo-pessoa-texto small {
  font-size: 13px;
  color: var(--tinta-suave);
}

.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--verde-100);
  color: var(--verde-800);
  font-size: 14px;
  font-weight: 750;
}

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 48px;
}

.conteudo:focus {
  outline: none;
}

/* Computador e tablet deitado: menu lateral sempre aberto */
@media (min-width: 1024px) {
  .app {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
  }

  .menu-lateral {
    position: sticky;
    width: auto;
    height: 100vh;
    height: 100dvh;
    box-shadow: none;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .menu-fundo,
  .menu-fechar,
  .botao-menu,
  .topo-marca {
    display: none;
  }

  .topo {
    min-height: 64px;
  }
}

@media (max-width: 640px) {
  .topo-pessoa-texto,
  .topo-acoes .botao span,
  .selo-fila-texto {
    display: none;
  }

  .topo-marca img {
    height: 34px;
  }

  .selo-conexao {
    padding: 4px 8px;
  }
}

/* Celular estreito: o selo de conexão fica só com a bolinha (a faixa no alto avisa
   quando falta internet) e o topo aperta os espaços para caber o selo da fila. */
@media (max-width: 480px) {
  .topo-acoes {
    gap: 8px;
  }

  .selo-conexao {
    padding: 8px;
  }

  .selo-conexao span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .selo-fila {
    padding: 0 10px;
  }
}

/* 5.2 Cabeçalho das páginas */
.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.cabecalho-pagina h1 {
  margin: 2px 0 6px;
  font-size: clamp(27px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sobretitulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--dourado-600);
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  font-weight: 600;
  text-decoration: none;
}

.voltar .icone {
  width: 18px;
  height: 18px;
}

.secao {
  margin-bottom: 32px;
}

.titulo-secao {
  margin-bottom: 12px;
  font-size: 20px;
}

.nota {
  margin-top: 16px;
  font-size: 15px;
  color: var(--tinta-suave);
}

/* 5.3 Botões complementares */
.botao .icone {
  width: 18px;
  height: 18px;
}

.botao-pequeno {
  min-height: 48px;
  padding: 0 12px;
  font-size: 15px;
  gap: 6px;
}

.botao-perigo {
  background: var(--superficie);
  color: var(--erro);
  border: 1.5px solid var(--erro-borda);
}

.botao-perigo:hover {
  background: var(--erro-fundo);
}

.botao-perigo-cheio {
  background: var(--erro);
  color: #fff;
}

.botao-perigo-cheio:hover {
  background: var(--erro-forte);
}

/* 5.4 Cartões, etiquetas e chips */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 18px;
}

.etiqueta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--neutro-100);
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 700;
}

.etiqueta-pronto {
  background: var(--verde-100);
  color: var(--verde-800);
}

.etiqueta-bloqueado {
  background: var(--erro-fundo);
  color: var(--erro);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--verde-100);
  border-radius: 999px;
  background: var(--verde-50);
  color: var(--verde-800);
  font-size: 14px;
  font-weight: 600;
}

.chip .icone {
  width: 15px;
  height: 15px;
}

.chip-destaque {
  border-color: var(--dourado-300);
  background: var(--dourado-100);
  color: var(--aviso-texto);
}

.detalhe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--tinta-suave);
}

.detalhe .icone {
  width: 16px;
  height: 16px;
}

/* 5.5 Filtros da lista */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.campo-busca {
  position: relative;
  display: flex;
  flex: 1 1 260px;
  align-items: center;
}

.campo-busca .icone {
  position: absolute;
  left: 14px;
  color: var(--tinta-suave);
  pointer-events: none;
}

.campo-busca input {
  width: 100%;
  min-height: var(--toque);
  padding: 10px 14px 10px 44px;
  font-size: 17px;
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  background: var(--superficie);
}

.segmentos {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 4px;
  border-radius: 14px;
  background: var(--neutro-100);
}

.segmento {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--tinta-suave);
  font-weight: 600;
  text-decoration: none;
}

.segmento span {
  font-size: 13px;
}

.segmento.ativo {
  background: var(--superficie);
  color: var(--verde-800);
  box-shadow: 0 1px 3px rgb(10 30 18 / 12%);
}

/* 5.6 Tabela: vira cartões empilhados no celular */
/* Rola em vez de cortar: entre 861 px e a largura em que a tabela cabe (tablet deitado,
   notebook pequeno), os botões da direita ficavam fora de alcance (revisão 0.8.1). */
.cartao-tabela {
  overflow-x: auto;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
}

.tabela th {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-suave);
  text-align: left;
  background: var(--fundo);
}

.tabela td {
  padding: 14px 16px;
  border-top: 1px solid var(--borda);
  vertical-align: middle;
}

.pessoa {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pessoa-texto {
  display: grid;
  line-height: 1.3;
}

.pessoa-texto small {
  font-size: 14px;
  color: var(--tinta-suave);
}

.celula-acoes {
  text-align: right;
}

/* Vários botões na linha (ex.: tombos e revolvedor): cada um numa linha só; os que não cabem descem. */
.celula-acoes .botao {
  white-space: nowrap;
}

.celula-data {
  white-space: nowrap;
}

.situacao {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}


.acoes {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* Numa linha só a partir de 1280 px; abaixo, os botões quebram em vez de passar do cartão
   (a equipe precisa de ~1.250 px para os três numa linha, revisão 0.8.1). */
@media (min-width: 1280px) {
  .acoes {
    flex-wrap: nowrap;
  }
}

/* Cartões até 860 px e também de 1024 a 1150 px: com o menu lateral aberto (a partir de
   1024 px), a coluna do conteúdo fica mais estreita que a de um tablet de 860 px. As
   regras "só na tabela" usam a faixa complementar (861 a 1023 px e 1151 px ou mais). */
@media (max-width: 860px), (min-width: 1024px) and (max-width: 1150px) {
  .cartao-tabela {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .tabela thead {
    display: none;
  }

  .tabela tr {
    display: block;
    margin-bottom: 12px;
    padding: 6px 16px 12px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 16px;
  }

  .tabela td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--borda);
    text-align: right;
  }

  .tabela td:first-child {
    border-top: 0;
    text-align: left;
  }

  .tabela td[data-rotulo]:not(:first-child)::before {
    content: attr(data-rotulo);
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta-suave);
  }

  .tabela .chips {
    justify-content: flex-end;
  }

  .celula-acoes,
  .acoes {
    justify-content: stretch;
    width: 100%;
  }

  .acoes .botao {
    flex: 1;
  }

  /* Linha sem ação (ex.: lote sem entradas, que ainda não fecha): nada de faixa vazia no cartão. */
  .tabela td.celula-acoes:empty {
    display: none;
  }
}

.tabela-compacta th,
.tabela-compacta td {
  padding: 8px 10px;
  font-size: 15px;
}

/* 5.7 Formulários internos: rótulo acima do campo */
.formulario-interno {
  padding: clamp(18px, 3vw, 28px);
}

.formulario-estreito {
  max-width: 560px;
}

.grupo-campos {
  min-width: 0; /* fieldset cresce até o conteúdo mais largo; assim acompanha a tela */
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.grupo-campos legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 19px;
  font-weight: 700;
}

.grupo-ajuda {
  margin: -6px 0 12px;
  font-size: 15px;
  color: var(--tinta-suave);
}

.grade-formulario {
  display: grid;
  gap: 4px 20px;
}

@media (min-width: 720px) {
  .grade-formulario {
    grid-template-columns: 1fr 1fr;
  }
}

.campo-padrao {
  display: grid;
  align-content: start;
  gap: 6px;
  margin-bottom: 16px;
}

.campo-padrao label {
  font-size: 16px;
  font-weight: 650;
}

/* Campo obrigatório (templates/partes/asterisco.html); o formulário que tem algum explica o sinal */
.obrigatorio {
  margin-left: 3px;
  font-weight: 700;
  color: var(--erro);
}

.formulario-interno:has(.obrigatorio)::before {
  content: "Campos com * são obrigatórios.";
  display: block;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--tinta-suave);
}

.campo-padrao input:not([type="checkbox"]),
.campo-padrao select,
.campo-padrao textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  font-size: 17px;
  background: var(--superficie);
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--raio-campo);
}

.campo-padrao textarea {
  resize: vertical;
}

.campo-padrao input[type="date"] {
  height: 50px; /* o Chromium desenha o campo de data 2 px mais alto e desalinha os filtros */
}

.campo-padrao input[type="file"] {
  padding: 6px 8px;
  font-size: 16px;
}

.campo-padrao input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 14px;
  font: inherit;
  font-weight: 650;
  color: var(--verde-700);
  background: var(--verde-50);
  border: 1.5px solid var(--borda-campo);
  border-radius: 10px;
  cursor: pointer;
}

.campo-padrao input:focus,
.campo-padrao select:focus,
.campo-padrao textarea:focus {
  outline: none;
  border-color: var(--verde-500);
  box-shadow: 0 0 0 3px rgb(62 120 69 / 20%);
}

.campo-padrao.com-erro input,
.campo-padrao.com-erro select,
.campo-padrao.com-erro textarea {
  border-color: var(--erro);
}

.campo-ajuda {
  font-size: 14px;
  color: var(--tinta-suave);
}

.campo-ajuda ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* Funções em cartões marcáveis */
.opcoes-funcao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.opcao-funcao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--toque);
  padding: 14px;
  border: 1.5px solid var(--borda-campo);
  border-radius: 14px;
  background: var(--superficie);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.opcao-funcao:hover {
  border-color: var(--verde-500);
}

.opcao-funcao:has(input:checked) {
  border-color: var(--verde-600);
  background: var(--verde-50);
}

.opcao-funcao input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--verde-600);
}

.opcao-funcao span {
  display: grid;
  gap: 2px;
}

.opcao-funcao small {
  font-size: 14px;
  line-height: 1.35;
  color: var(--tinta-suave);
}

.lista-consequencias {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--tinta-suave);
}

.rodape-formulario {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
}

@media (max-width: 520px) {
  .rodape-formulario .botao {
    flex: 1 1 100%;
  }
}

/* 5.8 Estado vazio */
.vazio {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
}

.vazio h1,
.vazio h2 {
  font-size: 24px;
}

.vazio-icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--verde-50);
  color: var(--verde-600);
}

.vazio-icone .icone {
  width: 28px;
  height: 28px;
}

/* 5.9 Página inicial: o painel (módulo 12) */
.painel-cabecalho {
  align-items: flex-start;
}

.painel-atualizado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--toque);
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta-suave);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.painel-atualizado:hover {
  border-color: var(--verde-500);
  color: var(--verde-700);
}

.painel-atualizado .icone {
  width: 18px;
  height: 18px;
}

/* Título da seção com o total à direita */
.painel-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.painel-titulo .titulo-secao {
  margin-bottom: 0;
}

.painel-total {
  color: var(--tinta-suave);
  font-size: 16px;
  font-weight: 700;
}

/* Indicadores: o número grande, uma palavra em cima e o detalhe embaixo */
.indicadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indicador {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.indicador:hover {
  border-color: var(--verde-500);
  box-shadow: 0 10px 24px -16px rgb(30 70 40 / 45%);
  transform: translateY(-2px);
}

.indicador-topo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.indicador-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--verde-50);
  color: var(--verde-600);
}

.indicador-icone .icone {
  width: 20px;
  height: 20px;
}

.indicador-titulo {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinta-suave);
}

.indicador-valor {
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.indicador .barra {
  max-width: none;
}

.indicador-detalhe {
  margin-top: auto;
  font-size: 15px;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

.indicador-alerta {
  border-color: var(--dourado-300);
  background: var(--dourado-100);
}

.indicador-alerta .indicador-icone {
  background: var(--superficie);
  color: var(--dourado-600);
}

.indicador-alerta .indicador-detalhe,
.indicador-alerta .indicador-titulo {
  color: var(--aviso-texto);
}

/* Colunas do painel: no computador, a atividade fica ao lado */
.painel-colunas {
  display: grid;
  gap: 0 24px;
}

.painel-principal {
  min-width: 0;
}

/* Lotes por etapa: a barra com a parte de cada etapa e um cartão por etapa, na ordem */
.fluxo-barra {
  width: 100%;
  height: 14px;
  margin-bottom: 12px;
  border-radius: 7px;
  background: var(--neutro-100);
}

.fluxo-barra rect {
  fill: var(--etapa);
}

.fluxo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fluxo-etapa {
  display: grid;
  gap: 2px;
  height: 100%;
  min-height: var(--toque);
  padding: 12px 14px;
  border: 1px solid var(--etapa-fundo);
  border-left: 5px solid var(--etapa);
  border-radius: 14px;
  background: var(--etapa-fundo);
  color: var(--etapa);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.fluxo-etapa:hover {
  box-shadow: 0 10px 24px -16px rgb(30 70 40 / 45%);
  transform: translateY(-2px);
}

.fluxo-etapa strong {
  font-size: 30px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.fluxo-etapa span {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.fluxo-etapa small {
  font-size: 15px;
  color: var(--tinta-suave);
}

/* Etapa sem lote: fica clara, sem perder o lugar no caminho */
.fluxo-vazia {
  border-color: var(--borda);
  border-left-color: var(--etapa);
  background: var(--superficie);
}

.fluxo-vazia strong {
  color: var(--tinta-suave);
}

/* Resíduo em 7 dias: uma coluna por dia, com o peso escrito em cima */
.semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 16px 12px 12px;
  list-style: none;
}

.semana li {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.semana-valor {
  min-height: 2.4em;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.semana-coluna {
  width: 100%;
  max-width: 44px;
  height: 120px;
}

.semana-fundo {
  fill: var(--verde-50);
}

.semana-peso {
  fill: var(--verde-500);
}

.semana-dia {
  display: grid;
  font-size: 13px;
  line-height: 1.25;
  color: var(--tinta-suave);
}

.semana-dia strong {
  font-size: 15px;
  color: var(--tinta);
}

.semana-hoje .semana-peso {
  fill: var(--dourado-500);
}

.semana-hoje .semana-valor,
.semana-hoje .semana-dia strong {
  color: var(--dourado-600);
}

/* Atividade recente: o que foi feito, em que e quando */
.atividade {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.atividade li + li {
  border-top: 1px solid var(--borda);
}

.atividade a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  color: var(--tinta);
  text-decoration: none;
}

.atividade a:hover {
  background: var(--verde-50);
}

.atividade-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--verde-50);
  color: var(--verde-600);
}

.atividade-icone .icone {
  width: 20px;
  height: 20px;
}

.atividade-texto {
  display: grid;
  flex: 1;
  min-width: 0;
}

.atividade-texto strong {
  font-size: 16px;
  line-height: 1.3;
}

/* O detalhe é a parte menos importante: uma linha só, cortada com reticências */
.atividade-texto small {
  overflow: hidden;
  font-size: 15px;
  color: var(--tinta-suave);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atividade-quando {
  display: grid;
  flex: none;
  max-width: 34%;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.atividade-quando small {
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  text-overflow: ellipsis;
}

.atalhos,
.planejados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.atalho {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.atalho:hover {
  border-color: var(--verde-500);
  box-shadow: 0 10px 24px -16px rgb(30 70 40 / 45%);
  transform: translateY(-2px);
}

.atalho-icone,
.planejado-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--verde-50);
  color: var(--verde-600);
}

.atalho-texto {
  display: grid;
  gap: 2px;
}

.atalho-texto strong {
  font-size: 18px;
}

.atalho-texto small {
  font-size: 15px;
  color: var(--tinta-suave);
}

/* No painel, os atalhos são só o ícone e o nome (o que a tela faz fica no title) */
.atalhos-curtos {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.atalhos-curtos .atalho {
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 16px;
}

.atalhos-curtos .atalho strong {
  font-size: 16px;
  line-height: 1.25;
}

.atalhos-curtos .atalho-icone {
  width: 40px;
  height: 40px;
}

.planejados li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--borda-campo);
  border-radius: 14px;
  color: var(--tinta-suave);
}

.planejados .planejado-icone {
  width: 38px;
  height: 38px;
  background: var(--neutro-100);
  color: var(--tinta-suave);
}

.planejados small {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 600px) {
  .atalhos-curtos {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .indicadores {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .fluxo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .semana-valor {
    font-size: 15px;
  }
}

@media (min-width: 1024px) {
  .painel-colunas {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    align-items: start;
  }

}

@media (prefers-reduced-motion: reduce) {
  .indicador,
  .fluxo-etapa,
  .atalho {
    transition: none;
  }

  .indicador:hover,
  .fluxo-etapa:hover,
  .atalho:hover {
    transform: none;
  }
}

/* 5.10 Auditoria */
.filtros-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: end;
  gap: 0 16px;
  margin-bottom: 20px;
  padding: 18px 18px 2px;
}

.filtros-botoes {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.registros {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.registro {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
}

.registro-quando time {
  display: grid;
  font-weight: 700;
}

.registro-quando span {
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta-suave);
}

.registro-texto {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.registro-motivo {
  font-size: 15px;
  color: var(--tinta-suave);
}

.registro-motivo span {
  font-weight: 700;
}

.registro-detalhes {
  width: 100%;
}

.registro-detalhes summary {
  min-height: var(--toque);
  padding: 12px 0;
  font-weight: 600;
  color: var(--verde-700);
  cursor: pointer;
}

.registro-detalhes .tabela th[scope="row"] {
  background: transparent;
}

@media (max-width: 560px) {
  .registro {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .registro-quando time {
    display: flex;
    gap: 8px;
  }
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* 5.11 Cadastros */
.segmentos-isolados {
  margin-bottom: 16px;
}

.atalho-resumo {
  font-size: 15px;
  font-weight: 650;
  color: var(--verde-700);
}

.celula-numero {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* E-mail longo quebra em vez de alargar a tabela dos parceiros. */
.celula-contato {
  overflow-wrap: anywhere;
}

@media (min-width: 861px) and (max-width: 1023px), (min-width: 1151px) {
  .tabela .celula-numero {
    text-align: right;
  }
}

.opcoes-escolha {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.opcao-funcao:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.opcao-unica {
  margin-bottom: 16px;
}

.opcao-unica > .opcao-funcao {
  max-width: 560px;
}

.opcoes-funcao .opcao-unica {
  margin-bottom: 0;
}

/* Pátio: cada galpão com os quadrantes em grade, como no mapa */
.galpoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galpao {
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--superficie);
}

.galpao-fora {
  border-style: dashed;
  background: transparent;
}

.galpao-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.galpao-cabecalho h2 {
  margin-right: auto;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.quadrantes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quadrante {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--verde-100);
  border-radius: 12px;
  background: var(--verde-50);
  color: var(--verde-800);
  font-variant-numeric: tabular-nums;
}

.quadrante span {
  font-size: 14px;
  color: var(--tinta-suave);
}

.quadrante-fora {
  border-style: dashed;
  border-color: var(--borda-campo);
  background: transparent;
  color: var(--tinta-suave);
}

.quadrante-fora strong {
  text-decoration: line-through;
}

/* Linhas repetidas num formulário (quadrantes de um galpão, paradas) */
.linhas-formset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linha-formset {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--borda);
}

.linha-formset:first-child {
  padding-top: 0;
  border-top: 0;
}

.linha-formset .campo-padrao {
  flex: 1 1 140px;
  max-width: 220px;
  margin-bottom: 0;
}

.linha-formset-nome {
  align-self: center;
  min-width: 44px;
  font-size: 18px;
  font-weight: 700;
}

.linha-formset > .detalhe {
  min-height: var(--toque);
}

/* Erro da linha inteira (não de um campo): ocupa a largura toda, embaixo */
.linha-formset > .errorlist {
  flex-basis: 100%;
  grid-column: 1 / -1;
}

/* Parada: início e fim lado a lado; "Remover" embaixo no celular, ao lado no tablet e no computador */
.linha-parada {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.linha-parada > .marcar,
.linha-parada > .detalhe {
  grid-column: 1 / -1;
}

@media (min-width: 600px) {
  .linha-parada {
    grid-template-columns: repeat(2, minmax(0, 200px)) auto;
  }

  .linha-parada > .marcar,
  .linha-parada > .detalhe {
    grid-column: auto;
  }
}

.marcar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--toque);
  font-weight: 600;
  cursor: pointer;
}

.marcar input {
  width: 22px;
  height: 22px;
  accent-color: var(--verde-600);
}

.acrescentar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px dashed var(--borda-campo);
  border-radius: 18px;
}

/* 5.12 Lotes e mapa do pátio */

/* Cada etapa define --etapa (forte) e --etapa-fundo; etiqueta, legenda e quadrante usam as duas */
.etapa-montagem {
  --etapa: var(--etapa-montagem);
  --etapa-fundo: var(--etapa-montagem-fundo);
}

.etapa-compostagem {
  --etapa: var(--etapa-compostagem);
  --etapa-fundo: var(--etapa-compostagem-fundo);
}

.etapa-leito {
  --etapa: var(--etapa-leito);
  --etapa-fundo: var(--etapa-leito-fundo);
}

.etapa-pronto {
  --etapa: var(--etapa-pronto);
  --etapa-fundo: var(--etapa-pronto-fundo);
}

.etapa-peneiramento {
  --etapa: var(--etapa-peneiramento);
  --etapa-fundo: var(--etapa-peneiramento-fundo);
}

.etapa-concluido {
  --etapa: var(--etapa-concluido);
  --etapa-fundo: var(--etapa-concluido-fundo);
}

.etapa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--etapa-fundo);
  color: var(--etapa);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.etapa i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--etapa);
}

.codigo-lote {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; /* código de até 20 caracteres sem separador */
}

/* Código do lote ou ticket que é link, nas listas: alvo de toque de 48 px (no mouse, a
   linha fica baixa como antes). */
@media (pointer: coarse) {
  a.codigo-lote {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
  }
}

.cabecalho-pagina .codigo-lote {
  margin-bottom: 10px;
  font-size: clamp(36px, 5vw, 46px);
}

/* No cabeçalho, as ações sempre quebram linha quando não cabem: a ficha do lote chega a seis
   botões e passava da tela de 1280 e 1440 px. */
.cabecalho-pagina .acoes {
  flex-wrap: wrap;
}

/* Botões da ficha: no celular cada um ocupa a linha inteira, sem quebrar o texto */
.cabecalho-pagina .acoes .botao {
  flex: 1 1 auto;
  white-space: nowrap;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--tinta-suave);
}

.legenda li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legenda i {
  width: 16px;
  height: 16px;
  border: 2px solid var(--etapa);
  border-radius: 5px;
  background: var(--etapa-fundo);
}

.legenda span {
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* Mapa: galpões em grade (um por linha no celular), quadrantes 2 × 2. Com 260 px por
   galpão, "Peneiramento" cabe inteiro no quadrante. */
.mapa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mapa .galpao-cabecalho {
  margin-bottom: 10px;
}

.vagas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vaga {
  display: grid;
  align-content: start;
  gap: 1px;
  height: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border: 2px solid var(--etapa);
  border-radius: 12px;
  background: var(--etapa-fundo);
  color: var(--etapa);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.vaga small {
  font-size: 13px;
  font-weight: 700;
}

.vaga strong {
  font-size: 21px;
  line-height: 1.15;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vaga > span {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

/* Peso do lote (pedido da cliente, 28/10/2026) */
.vaga-peso {
  font-variant-numeric: tabular-nums;
}

a.vaga:hover {
  box-shadow: inset 0 0 0 1px var(--etapa);
}

.vaga-livre {
  --etapa: var(--tinta-suave);
  --etapa-fundo: var(--superficie);
  border-style: dashed;
  border-color: var(--borda-campo);
}

.vaga-livre > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vaga-livre .icone {
  width: 16px;
  height: 16px;
}

a.vaga-livre:hover {
  --etapa: var(--verde-700);
  --etapa-fundo: var(--verde-50);
  border-color: var(--verde-500);
  box-shadow: none;
}

.vaga-fora {
  border: 2px dashed var(--borda);
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--neutro-100) 6px 12px);
  color: var(--tinta-suave);
}

/* Filtro por etapa, ao lado da busca */
.campo-filtro select {
  min-height: var(--toque);
  padding: 0 12px;
  font-size: 17px;
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  background: var(--superficie);
}

.contador {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--neutro-100);
  font-size: 14px;
}

/* Ficha do lote */
.fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 16px 24px;
  margin: 0 0 32px;
  padding: 18px 20px;
}

.fatos dt {
  font-size: 14px;
  font-weight: 650;
  color: var(--tinta-suave);
}

.fatos dd {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.registro-autor {
  font-size: 14px;
  color: var(--tinta-suave);
}

/* Escolha de quadrantes: cada galpão numa linha, os quadrantes como botões de marcar.
   Galpão com mais quadrantes do que cabem continua na linha de baixo. */
.escolha-galpoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 8px 24px;
  margin: 4px 0 14px;
}

.escolha-galpao {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.escolha-galpao-nome {
  flex: none;
  align-self: center;
  width: 42px;
  font-size: 17px;
  font-weight: 800;
}

.escolha-vagas {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  min-width: 0;
}

.escolha-vaga {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 58px;
  padding: 6px 4px;
  border: 1.5px solid var(--borda-campo);
  border-radius: 12px;
  background: var(--superficie);
  text-align: center;
  cursor: pointer;
}

/* A caixa de marcar de verdade cobre o botão: o toque e o leitor de tela usam ela */
.escolha-vaga input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.escolha-vaga-numero {
  font-size: 16px;
  font-weight: 700;
}

.escolha-vaga small {
  font-size: 13px;
  line-height: 1.2;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

.escolha-vaga:hover {
  border-color: var(--verde-500);
}

.escolha-vaga:has(input:checked) {
  border-color: var(--verde-700);
  background: var(--verde-600);
  color: #fff;
}

.escolha-vaga:has(input:checked) small {
  color: #fff;
}

/* Marcado também com o sinal, não só com o preenchimento */
.escolha-vaga:has(input:checked) .escolha-vaga-numero::before {
  content: "✓ ";
}

.escolha-vaga:has(input:focus-visible) {
  outline: 3px solid var(--dourado-500);
  outline-offset: 2px;
}

.escolha-vaga-indisponivel {
  border-style: dashed;
  background: var(--neutro-100);
  color: var(--tinta-suave);
  cursor: not-allowed;
}

.escolha-vaga-indisponivel:hover {
  border-color: var(--borda-campo);
}

.escolha-resumo {
  font-weight: 650;
  color: var(--verde-800);
}

/* 5.12.1 Mapa físico do pátio interno (pedido da cliente, 28/10/2026): cada galpão na
   linha e na coluna do cadastro (LINHAS_DO_MAPA e COLUNAS_DO_MAPA em
   apps/cadastros/models.py). Rola para o lado; o zoom (static/js/mapa.js) muda --zoom. */
.zoom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.zoom-valor {
  min-width: 4.5ch;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.botao-icone-texto {
  min-width: var(--toque);
  padding: 0;
  font-size: 26px;
  line-height: 1;
}

/* position: o texto só para leitor de tela (.visualmente-oculto, absoluto) dos botões
   dentro do mapa fica preso aqui; sem isso, escapava da rolagem e alargava a página. */
.mapa-rolagem {
  position: relative;
  margin: 0 0 16px;
  padding: 2px 2px 12px;
  overflow: auto;
  overscroll-behavior-x: contain;
}

.mapa-fisico {
  grid-template-columns: none;
  grid-auto-columns: 260px;
  width: max-content;
  zoom: var(--zoom, 1);
}

.lin-1 { grid-row: 1; }
.lin-2 { grid-row: 2; }
.lin-3 { grid-row: 3; }
.lin-4 { grid-row: 4; }
.lin-5 { grid-row: 5; }
.lin-6 { grid-row: 6; }

.col-1 { grid-column: 1; }
.col-2 { grid-column: 2; }
.col-3 { grid-column: 3; }
.col-4 { grid-column: 4; }
.col-5 { grid-column: 5; }
.col-6 { grid-column: 6; }
.col-7 { grid-column: 7; }
.col-8 { grid-column: 8; }
.col-9 { grid-column: 9; }
.col-10 { grid-column: 10; }
.col-11 { grid-column: 11; }
.col-12 { grid-column: 12; }

/* Menu de ações do lote no mapa (popover do navegador): no meio da tela; no celular,
   uma folha que sobe do pé da tela. */
.acoes-lote {
  width: min(380px, calc(100vw - 32px));
  /* Com muitas ações (a gestão vê até 7) e o celular deitado, o menu rola em vez de passar da tela. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: 20px;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 30px 60px -20px rgb(3 14 8 / 45%);
}

.acoes-lote::backdrop {
  background: rgb(8 24 14 / 35%);
}

.acoes-lote-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 6px;
}

.acoes-lote-cabecalho h2 {
  font-size: 24px;
}

.acoes-lote-botoes {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 599px) {
  .acoes-lote {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }
}

/* 5.12.2 Pátio externo (pedido da cliente, 28/10/2026): as áreas lado a lado, cada uma
   um SVG em metros, com as leiras soltas (lotes/mapa_externo.html). As cores da leira
   vêm da etapa, como no pátio interno; "Mover leiras" (static/js/mapa.js) liga o arraste. */
.patio-externo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  zoom: var(--zoom, 1);
}

.area-externa {
  flex: none;
}

.area-externa-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.area-externa-cabecalho h2 {
  font-size: 20px;
}

.area-svg {
  display: block;
  border: 1px solid var(--borda-campo);
  border-radius: 12px;
  background: var(--superficie);
}

.area-grade {
  fill: none;
  stroke: var(--borda);
  stroke-width: 0.15;
}

.leira {
  cursor: pointer;
  outline: none;
}

.leira rect {
  fill: var(--etapa-fundo);
  stroke: var(--etapa);
  stroke-width: 0.35;
}

.leira text {
  fill: var(--etapa);
  font-family: var(--fonte);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.leira:hover rect {
  stroke-width: 0.6;
}

.leira:focus-visible rect {
  stroke: var(--dourado-500);
  stroke-width: 1;
}

.movendo .leira[data-mover] {
  cursor: grab;
}

/* O Chromium não respeita touch-action num elemento de dentro do SVG: o dedo rolava a
   página em vez de arrastar a leira. No modo de mover, vale para a área inteira. */
.movendo svg {
  touch-action: none;
}

.leira.arrastando {
  cursor: grabbing;
}

.leira.arrastando rect {
  stroke-width: 0.8;
  stroke-dasharray: 1.2 0.6;
}

/* Lotes em etapas diferentes na mesma leira; marcação sem lote (ex.: a rampa) */
.etapa-varias {
  --etapa: var(--tinta);
  --etapa-fundo: var(--neutro-100);
}

.etapa-marcacao {
  --etapa: var(--tinta-suave);
  --etapa-fundo: var(--fundo);
}

.etapa-marcacao rect {
  stroke-dasharray: 1.2 0.6;
}

.leira-lotes {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.leira-lotes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

/* Escolha dos lotes da leira, em cartões pequenos */
.escolha-lotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.marcar-lote {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque);
  padding: 8px 12px;
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  font-weight: 650;
  cursor: pointer;
}

.marcar-lote:has(input:checked) {
  border-color: var(--verde-500);
  background: var(--verde-50);
}

.marcar-lote:has(input:focus-visible) {
  outline: 3px solid var(--dourado-500);
  outline-offset: 2px;
}

.marcar-lote input {
  width: 22px;
  height: 22px;
  accent-color: var(--verde-600);
}

/* 5.13 Monitoramento e fila do aparelho */
.titulo-com-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.titulo-com-acao .titulo-secao {
  margin-bottom: 0;
}

.leitura {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 10px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 861px) and (max-width: 1023px), (min-width: 1151px) {
  .leitura {
    justify-content: flex-start;
  }
}

.leitura strong {
  font-size: 19px;
}

.leitura small {
  font-size: 14px;
  color: var(--tinta-suave);
}

.chip-alerta {
  border-color: var(--erro-borda);
  background: var(--erro-fundo);
  color: var(--erro);
}

.dialogo-fila {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 22px;
  border: 0;
  border-radius: 18px;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 20px 60px rgb(10 30 18 / 30%);
}

.dialogo-fila::backdrop {
  background: rgb(10 30 18 / 45%);
}

.dialogo-fila h2 {
  margin-bottom: 6px;
  font-size: 22px;
}

.lista-fila {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.item-fila {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 14px;
}

.item-fila small {
  font-size: 14px;
  color: var(--tinta-suave);
}

.item-fila-recusado {
  border-color: var(--erro-borda);
  background: var(--erro-fundo);
}

.item-fila .acoes {
  justify-content: flex-start;
  margin-top: 6px;
}

/* Gráficos da ficha do lote: um por medida, lado a lado a partir de 900 px. Linhas de
   2 px, pontos de 8 px com anel da cor da superfície, grade em linha fina (dataviz). */
.graficos {
  display: grid;
  gap: 16px;
  margin-bottom: 12px;
}

@media (min-width: 900px) {
  .graficos {
    grid-template-columns: 1fr 1fr;
  }
}

.grafico {
  margin: 0;
  padding: 16px 16px 8px;
}

.grafico-titulo {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}

.grafico-titulo span {
  font-size: 15px;
}

.grafico-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
  border-radius: 8px;
}

.grafico-svg:focus-visible {
  outline: 3px solid var(--verde-600);
  outline-offset: 4px;
}

.grafico-grade {
  stroke: var(--neutro-100);
  stroke-width: 1;
}

.grafico-eixo {
  fill: var(--tinta-suave);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.grafico-limite {
  stroke: var(--erro);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.grafico-limite-rotulo {
  fill: var(--erro-forte);
  font-size: 12px;
  font-weight: 600;
}

.grafico-linha {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.grafico-ponto {
  stroke: var(--superficie);
  stroke-width: 2;
}

/* Muitos dias: os pontos tapariam a linha; fica só o último. */
.grafico-denso .grafico-ponto:not(:last-of-type) {
  display: none;
}

.grafico-temperatura .grafico-linha {
  stroke: var(--serie-temperatura);
}

.grafico-temperatura .grafico-ponto {
  fill: var(--serie-temperatura);
}

.grafico-umidade .grafico-linha {
  stroke: var(--serie-umidade);
}

.grafico-umidade .grafico-ponto {
  fill: var(--serie-umidade);
}

.grafico-valor {
  fill: var(--tinta);
  font-size: 13px;
  font-weight: 700;
}

/* Contorno da cor da superfície: o texto continua legível quando cruza a linha. */
.grafico-valor,
.grafico-limite-rotulo {
  paint-order: stroke;
  stroke: var(--superficie);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.grafico-cursor {
  stroke: var(--borda-campo);
  stroke-width: 1;
}

.grafico-dica rect {
  fill: var(--tinta);
}

.grafico-dica text {
  fill: var(--superficie);
  font-size: 12px;
  font-weight: 600;
}

.grafico-tabela {
  margin-bottom: 16px;
}

.grafico-tabela summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  font-weight: 600;
  color: var(--verde-700);
  cursor: pointer;
}

/* Laudo na ficha do lote: o nome do arquivo pode ser longo e sem espaços. */
.botao-arquivo {
  max-width: 100%;
  justify-content: flex-start;
  text-align: left;
  overflow-wrap: anywhere;
}

/* 5.14 Balança */
/* O dia e os botões na mesma linha (na grade da auditoria, os três botões ficavam
   espremidos numa coluna); no celular, os botões descem. */
.filtros-dia {
  display: flex;
  flex-wrap: wrap;
}

.filtros-dia .campo-padrao {
  flex: 0 1 240px;
}

.filtros-dia .filtros-botoes {
  align-self: end;
}

/* Residômetro na página inicial (apps/balanca/templates/balanca/partes/residometro.html) */
.residometro {
  margin-bottom: 16px;
}

.residometro dd {
  font-size: 28px;
  line-height: 1.15;
}

.fatos dd small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--tinta-suave);
}

.valores-pesagem {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.valores-pesagem span {
  font-size: 14px;
  color: var(--tinta-suave);
}

/* Prévia dos valores no formulário da pesagem (static/js/balanca.js). */
.previsao {
  margin: 8px 0 20px;
  padding: 16px 18px;
  background: var(--verde-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.previsao .fatos {
  margin: 0 0 8px;
  padding: 0;
}

/* Previsão do tempo no painel (D-79): os 7 dias; o dia com chuva provável em azul */
.tempo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .tempo {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.tempo-dia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.tempo-dia small {
  font-size: 14px;
  color: var(--tinta-suave);
}

.tempo-chuvoso {
  background: var(--etapa-montagem-fundo);
  border-color: var(--etapa-montagem);
}

.tempo-quando {
  font-size: 16px;
}

.tempo-temperatura {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Produto não conforme (D-66): a marca, a descrição e as miniaturas das fotos */
.fotos-escolhidas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.fotos-escolhidas p {
  margin: 0;
  flex: 1 1 240px;
}

.nao-conforme {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.fotos-nao-conforme {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotos-nao-conforme a {
  display: block;
  border-radius: 10px;
}

.fotos-nao-conforme img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--borda-campo);
  border-radius: 10px;
}

/* 5.15 Recebimento: ocupação e composição do lote. As barras são SVG (templates/partes/barra.html). */
.barra {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 8px;
  border-radius: 4px;
}

.barra-fundo {
  fill: var(--neutro-100);
}

.barra-valor {
  fill: var(--verde-500);
}

.barra-alerta .barra-valor {
  fill: var(--dourado-500);
}

.ocupacao {
  display: grid;
  gap: 6px;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.fatos .ocupacao {
  justify-items: start;
}

@media (min-width: 861px) and (max-width: 1023px), (min-width: 1151px) {
  .ocupacao {
    justify-items: start;
  }
}

.composicao {
  display: grid;
  gap: 14px;
  margin: 0 0 32px;
  padding: 18px 20px;
  list-style: none;
}

.composicao li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
}

.composicao .barra {
  grid-column: 1 / -1;
  max-width: none;
}

.composicao-valor {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.vaga .icone {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

/* 5.16 Relatórios (módulo 13). Reaproveita os cartões do painel (5.9). Barras e colunas em SVG
   com as medidas em atributo; os gráficos largos rolam dentro do cartão no celular. */
.relatorio-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.relatorio-abas a {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: var(--toque);
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta-suave);
  font-weight: 700;
  text-decoration: none;
}

.relatorio-abas a:hover {
  border-color: var(--verde-500);
  color: var(--verde-700);
}

.relatorio-abas a[aria-current="page"] {
  border-color: var(--verde-700);
  background: var(--verde-700);
  color: #fff;
}

.relatorio-abas .icone {
  width: 18px;
  height: 18px;
}

/* Escolha do período: as setas e o nome em cima, o mês e o ano embaixo */
.relatorio-periodo {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
  padding: 16px;
}

.relatorio-navegacao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.relatorio-navegacao-vazio {
  width: 48px;
}

.relatorio-nome {
  display: grid;
  text-align: center;
}

.relatorio-nome strong {
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.15;
  color: var(--verde-800);
}

.relatorio-nome small {
  font-size: 15px;
  color: var(--tinta-suave);
}

.relatorio-navegacao .botao span {
  display: none;
}

.relatorio-escolha {
  display: grid;
  gap: 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}

.relatorio-escolha-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 10px;
}

.relatorio-escolha-form .campo-padrao {
  flex: 1 1 160px;
}

.relatorio-escolha-form .botao {
  margin-bottom: 16px;
}

.relatorio-nota {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.relatorio-nota .icone {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--verde-600);
}

.relatorio-explica {
  margin: -4px 0 14px;
  font-size: 16px;
}

.relatorio-subtitulo {
  margin: 20px 0 10px;
  font-size: 18px;
}

.relatorio-vazio {
  padding: 16px;
  border: 1px dashed var(--borda-campo);
  border-radius: 14px;
}

/* Resumo: os cartões do painel com as comparações embaixo */
.relatorio-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relatorio-cartao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--superficie);
}

.relatorio-cartao .indicador-detalhe {
  margin-top: 0;
}

.relatorio-cartao .indicador-valor {
  font-size: clamp(24px, 5.5vw, 32px);
  white-space: nowrap;
}

.comparacoes {
  display: grid;
  gap: 4px;
  margin: auto 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--borda);
  list-style: none;
}

.comparacao {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--tinta-suave);
}

.comparacao-seta {
  flex: none;
  font-size: 12px;
}

.comparacao-bom {
  color: var(--verde-700);
  font-weight: 650;
}

.comparacao-ruim {
  color: var(--dourado-600);
  font-weight: 650;
}

/* Residômetro comparado: duas barras por linha, este ano (verde) e o anterior (cinza) */
.residometro-comparado {
  margin: 0;
  padding: 4px 16px;
  list-style: none;
}

.residometro-comparado > li {
  display: grid;
  gap: 8px;
  padding: 14px 0;
}

.residometro-comparado > li + li {
  border-top: 1px solid var(--borda);
}

.residometro-comparado-nome {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.residometro-comparado-nome strong {
  font-size: 18px;
}

.residometro-comparado-nome small {
  font-size: 15px;
  color: var(--tinta-suave);
}

.residometro-comparado-barras {
  display: grid;
  gap: 6px;
}

.par-barra {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
}

.par-ano {
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-suave);
}

.par-svg {
  width: 100%;
  height: 14px;
}

.par-valor {
  grid-column: 2;
  font-size: 15px;
  color: var(--tinta-suave);
}

.par-valor strong {
  color: var(--tinta);
}

.par-fundo {
  fill: var(--neutro-100);
}

.par-agora {
  fill: var(--verde-500);
}

.par-antes {
  fill: #a9b4a6;
}

.residometro-comparado .comparacoes {
  padding-top: 0;
  border-top: 0;
}

/* Gráficos de colunas (mês a mês e dia a dia) */
.grafico-cartao {
  padding: 14px 12px 12px;
}

.grafico-rolagem {
  overflow-x: auto;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta-suave);
  list-style: none;
}

.legenda li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legenda i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.legenda-agora {
  background: var(--verde-500);
}

.legenda-antes {
  background: #a9b4a6;
}

.meses,
.dias {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meses {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 480px;
}

.dias {
  min-width: 720px;
}

.dias-28 { grid-template-columns: repeat(28, minmax(0, 1fr)); }
.dias-29 { grid-template-columns: repeat(29, minmax(0, 1fr)); }
.dias-30 { grid-template-columns: repeat(30, minmax(0, 1fr)); }
.dias-31 { grid-template-columns: repeat(31, minmax(0, 1fr)); }

.meses li,
.dias li {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.meses-valor,
.dias-valor {
  min-height: 1.3em;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.dias-valor {
  font-size: 11px;
}

.meses-coluna {
  width: 100%;
  max-width: 48px;
  height: 160px;
}

.dias-coluna {
  width: 100%;
  max-width: 22px;
  height: 140px;
}

.meses-fundo,
.dias-fundo {
  fill: var(--verde-50);
}

.meses-agora,
.dias-peso {
  fill: var(--verde-500);
}

.meses-antes {
  fill: #a9b4a6;
}

.meses-nome {
  display: grid;
  place-items: center;
  min-height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
}

.meses-nome:hover {
  color: var(--verde-700);
  text-decoration: underline;
}

.meses-atual .meses-nome,
.meses-atual .meses-valor {
  color: var(--dourado-600);
}

.meses-futuro .meses-nome {
  color: var(--tinta-suave);
  font-weight: 400;
}

.dias-numero {
  display: grid;
  font-size: 11px;
  line-height: 1.2;
  color: var(--tinta-suave);
}

.dias-numero strong {
  font-size: 13px;
  color: var(--tinta);
}

.dias-fim-de-semana .dias-fundo {
  fill: var(--neutro-100);
}

.dias-fim-de-semana .dias-peso {
  fill: var(--verde-600);
  opacity: 0.6;
}

.dias-hoje .dias-peso {
  fill: var(--dourado-500);
  opacity: 1;
}

.dias-hoje .dias-numero strong {
  color: var(--dourado-600);
}

.dias-futuro {
  opacity: 0.45;
}

.dias-media {
  stroke: var(--tinta);
  stroke-width: 1.2;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.legenda-media {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--tinta-suave);
}

.legenda-media i {
  flex: none;
  width: 22px;
  border-top: 2px dashed var(--tinta);
}

.relatorio-numeros {
  margin-top: 12px;
}

.relatorio-numeros summary {
  display: flex;
  align-items: center;
  min-height: var(--toque);
  font-weight: 700;
  color: var(--verde-700);
  cursor: pointer;
}

/* Listas dos maiores: posição, nome, peso, barra e a parte no total */
.ranking {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.ranking li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
}

.ranking li + li {
  border-top: 1px solid var(--borda);
}

.ranking-posicao {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--verde-50);
  color: var(--verde-700);
  font-weight: 750;
}

.ranking li:first-child .ranking-posicao {
  background: var(--dourado-100);
  color: var(--dourado-600);
}

.ranking-outros .ranking-posicao {
  background: var(--neutro-100);
  color: var(--tinta-suave);
}

.ranking-texto {
  display: grid;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.ranking-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.ranking-linha strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}

.ranking-linha a {
  color: var(--verde-700);
}

.ranking-peso {
  font-size: 17px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ranking .barra {
  max-width: none;
}

.ranking small {
  font-size: 15px;
  color: var(--tinta-suave);
}

.relatorio-duas {
  display: grid;
  gap: 0 24px;
}

.relatorio-duas > .secao {
  min-width: 0;
}

/* Produção: produto e rejeito na mesma barra, o tempo do lote e o estoque */
.producao {
  display: grid;
  gap: 12px;
}

.producao-peneira,
.producao-tempo {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
}

.producao-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.producao-numeros div,
.producao-tempo {
  display: grid;
}

.producao-numeros small,
.producao-tempo small {
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta-suave);
}

.producao-numeros strong {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.15;
}

.producao-tempo strong {
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.1;
}

.producao-tempo p,
.producao-peneira p {
  margin: 0;
}

.producao-ponto {
  width: 12px;
  height: 12px;
  margin-bottom: 4px;
  border-radius: 3px;
}

.producao-ponto-produto,
.producao-produto {
  background: var(--verde-500);
  fill: var(--verde-500);
}

.producao-ponto-rejeito,
.producao-rejeito {
  background: var(--etapa-compostagem);
  fill: var(--etapa-compostagem);
}

.producao-barra {
  width: 100%;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.producao-estoque {
  color: var(--tinta);
  text-decoration: none;
}

.producao-estoque:hover {
  border-color: var(--verde-500);
}

/* Máquinas: um cartão por máquina com diesel, gasto por hora e tempo parado */
.maquinas-relatorio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maquinas-relatorio > li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
}

.maquinas-nome {
  font-size: 20px;
}

.maquinas-medida {
  display: grid;
  gap: 4px;
}

.maquinas-medida small {
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-suave);
}

.maquinas-medida .barra {
  max-width: none;
}

.planilhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.planilhas .atalho {
  align-items: center;
  min-height: 64px;
  padding: 10px 14px;
}

.relatorio-rodape {
  margin-top: 24px;
  font-size: 14px;
}

/* Rastreio: a busca, os três passos e a história em três colunas */
.rastreio-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 12px;
  margin-bottom: 20px;
  padding: 16px 16px 0;
}

.rastreio-busca .campo-padrao {
  flex: 1 1 260px;
}

.rastreio-busca .botao {
  margin-bottom: 16px;
}

.rastreio-passos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.rastreio-passos li {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--superficie);
}

.rastreio-passos strong {
  font-size: 18px;
}

.rastreio-passos small {
  font-size: 15px;
  color: var(--tinta-suave);
}

.rastreio-passo-icone {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--verde-50);
  color: var(--verde-600);
}

.rastreio-passo-icone .icone {
  width: 22px;
  height: 22px;
}

.rastreio-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
  padding: 16px;
  border-left: 6px solid var(--etapa, var(--verde-500));
  border-radius: 14px;
  background: var(--etapa-fundo, var(--verde-50));
}

.rastreio-cabecalho h2 {
  margin: 0 0 4px;
  font-size: 24px;
}

.rastreio-cabecalho p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  color: var(--tinta-suave);
}

.etapa-selo {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--etapa, var(--verde-600));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.rastreio-colunas {
  display: grid;
  gap: 12px;
}

.rastreio-coluna {
  min-width: 0;
  padding: 16px;
}

.rastreio-coluna h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 19px;
}

.rastreio-total {
  margin: 0 0 8px;
  color: var(--tinta-suave);
}

.rastreio-total strong {
  font-size: 22px;
  color: var(--tinta);
}

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

.rastreio-lista li {
  display: grid;
  gap: 2px;
  padding: 10px 0;
}

.rastreio-lista li + li {
  border-top: 1px solid var(--borda);
}

.rastreio-lista a {
  color: var(--verde-700);
}

.rastreio-lista small {
  font-size: 15px;
  color: var(--tinta-suave);
}

.linha-do-tempo {
  margin: 0 0 12px;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--verde-100);
  list-style: none;
}

.linha-do-tempo li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 8px;
  padding: 6px 0;
}

.linha-do-tempo li::before {
  position: absolute;
  top: 12px;
  left: -26px;
  width: 13px;
  height: 13px;
  border: 3px solid var(--superficie);
  border-radius: 50%;
  background: var(--verde-500);
  content: "";
}

.linha-do-tempo small {
  font-size: 15px;
  color: var(--tinta-suave);
}

.rastreio-fatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 8px;
}

.rastreio-fatos div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--fundo);
}

.rastreio-fatos dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-suave);
}

.rastreio-fatos dd {
  display: grid;
  margin: 0;
  font-size: 20px;
  font-weight: 750;
}

.rastreio-fatos dd small {
  font-size: 13px;
  font-weight: 400;
  color: var(--tinta-suave);
}

@media (min-width: 600px) {
  .relatorio-navegacao .botao span {
    display: inline;
  }

  .relatorio-cartoes {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }

  .relatorio-escolha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .residometro-comparado > li {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
  }

  .residometro-comparado-nome {
    display: grid;
  }

  .residometro-comparado .comparacoes {
    grid-column: 2;
  }

  .producao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .producao-peneira {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .relatorio-duas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .producao {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .producao-peneira {
    grid-column: auto;
  }

  .rastreio-colunas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .meses,
  .dias {
    min-width: 0;
  }
}

/* Impressão (o botão "Imprimir ou salvar em PDF"): só o relatório, sem o menu, o topo, a
   escolha do período e as planilhas; os gráficos inteiros, sem rolagem. */
@media print {
  .menu-lateral,
  .topo,
  .notificacoes,
  .pular-conteudo,
  .relatorio-abas,
  .relatorio-escolha,
  .relatorio-navegacao .botao,
  .relatorio-imprimir,
  .relatorio-planilhas,
  .rastreio-busca {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .relatorio-cartao,
  .ranking li,
  .maquinas-relatorio > li,
  .residometro-comparado > li,
  .rastreio-coluna {
    break-inside: avoid;
  }

  .grafico-rolagem {
    overflow: visible;
  }

  .meses,
  .dias {
    min-width: 0;
  }

  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* --- 6. Páginas de mensagem (offline, erros) ------------------------------- */

.pagina-mensagem {
  background: var(--superficie);
}

.mensagem {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 520px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 32px 20px;
  align-content: center;
  text-align: center;
}

.mensagem-logo {
  width: 170px;
  height: auto;
  margin-bottom: 12px;
}

.mensagem-icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dourado-100);
  color: var(--aviso-texto);
}

.mensagem-icone .icone {
  width: 30px;
  height: 30px;
}

.mensagem h1 {
  font-size: 26px;
  line-height: 1.25;
}

.mensagem p,
.mensagem-lista {
  color: var(--tinta-suave);
}

.mensagem-lista {
  margin: 0 0 8px;
  padding-left: 20px;
  text-align: left;
}

/* --- 7. Acessibilidade ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* A barrinha encolhe devagar e em linha reta: continua mostrando quanto falta. */
  .notificacao.correndo .notificacao-tempo {
    animation-duration: var(--tempo, 6s) !important;
  }
}