/* =============================================================================
   Farm ERP — sistema visual
   -----------------------------------------------------------------------------
   Paleta de campo (verde de cultivo, dourado de colheita, terra) sobre neutros
   quentes. Os nomes --navy/--blue-bg vêm da versão inicial e mantêm-se porque
   são referenciados em atributos style= de alguns templates; os valores é que
   evoluíram.

   Três decisões que sustentam o resto:
   - superfícies brancas com contorno subtil, em vez de blocos de cor sólida:
     a cor passa a ser acento, não fundo, e os dados ficam a mandar no ecrã;
   - sombras em duas camadas (contacto + difusa), que é o que dá sensação de
     profundidade real em vez de um halo cinzento;
   - algarismos tabulares em tudo o que é número, para as colunas de valores
     alinharem na vertical — num sistema com dinheiro isto lê-se logo.
   ========================================================================== */

/* ================================ Tipografia ==============================
   Inter, alojada no projecto em vez de vinda do Google Fonts. A aplicação tem de
   funcionar sem rede (ver sw.js e offline-queue.js) — uma fonte externa falharia
   offline e o sistema mudava de aspecto consoante houvesse ligação ou não. É a
   mesma razão por que os gráficos são desenhados à mão em vez de virem de uma
   biblioteca.

   Um único ficheiro para todos os pesos: a Inter é uma fonte variável, e 47 KB
   cobrem de 100 a 900 sem pedidos adicionais. O unicode-range é o subconjunto
   latino do Google Fonts, que inclui todos os acentos do português. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Marca (paleta oficial do CLAUDE.md) --- */
  --navy: #14532D;            /* Forest Green — barra lateral, títulos, acção principal */
  --navy-dark: #0D3A1F;       /* hover, títulos de impressão */
  --navy-soft: #DCFCE7;       /* verde muito claro — estados activos, chips */
  --navy-borda: #BBF7D0;      /* contorno desses chips */

  /* Azul de tecnologia, gestão, informação e finanças (Deep Blue). Ocupa o papel
     que o dourado tinha: a paleta oficial não tem dourado, e a regra de cor diz
     "azul = tecnologia, gestão, informação e finanças". */
  --azul: #0F3D56;
  --azul-dark: #0A2B3C;
  --azul-soft: #E0F2FE;

  /* Lima — crescimento. É também o único tom da paleta que se lê sobre o verde
     escuro da barra lateral: o "item activo #16A34A" que a especificação sugere
     dá 2,76:1 contra o fundo #14532D, abaixo do mínimo de 3:1 para um indicador,
     e o realce ficaria quase invisível. Com lima são 4,61:1. */
  --lima: #84CC16;

  /* --- Neutros slate (CLAUDE.md) --- */
  --n-0:  #FFFFFF;            /* Surface */
  --n-25: #FCFDFE;
  --n-50: #F8FAFC;            /* Background */
  --n-100:#F1F5F9;
  --n-200:#E2E8F0;            /* Border */
  --n-300:#CBD5E1;
  --n-400:#94A3B8;
  --n-500:#64748B;            /* Text Secondary */
  --n-700:#334155;
  --n-900:#1E293B;            /* Text Primary */

  /* Compatibilidade com templates que referem estes nomes */
  --gray-bg: var(--n-50);
  --blue-bg: var(--navy-soft);
  --text: var(--n-900);

  /* --- Semântica: os tons que se LEEM ---
     Estes são usados quase sempre como cor de texto (ver .badge-*, .estado-*,
     .valor-pos/.valor-neg, .kpi-value). Os tons vivos da especificação falham aí:
     #16A34A dá 3,30:1 sobre branco e #F59E0B dá 2,15:1, ambos abaixo dos 4,5:1
     exigidos. Ficam um degrau mais escuros dentro da mesma família — e os tons
     vivos vivem onde a especificação de facto os põe, nas séries de gráfico. */
  --ok: #15803D;              /* 5,02:1 sobre branco */
  --ok-soft: #DCFCE7;
  --ok-borda: #BBF7D0;
  --warn: #B45309;            /* 5,02:1 */
  --warn-soft: #FEF3C7;
  --warn-borda: #FDE68A;
  --danger: #B91C1C;          /* 6,47:1 */
  --danger-soft: #FEE2E2;
  --danger-borda: #FECACA;

  /* --- Séries de gráfico (CLAUDE.md, seccção "Gráficos") ---
     Cor de preenchimento, onde nada se escreve por cima. */
  --g-producao: #16A34A;
  --g-financeiro: #0F3D56;
  --g-crescimento: #84CC16;
  --g-alerta: #F59E0B;
  --g-perda: #DC2626;

  /* --- Tons claros para o painel escuro de Resultado ---
     Texto e acentos sobre o verde profundo; os tons normais desapareceriam lá. */
  --claro-ok: #86EFAC;
  --claro-warn: #FCD34D;
  --claro-danger: #FCA5A5;
  --claro-danger-forte: #F87171;   /* um degrau mais fundo, para gradientes */
  --navy-claro: #166534;           /* verde aberto — só o halo do login */

  /* --- Elevação: contacto + difusa (agora com tinta slate, não terra) --- */
  --sh-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --sh-2: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.07);
  --sh-3: 0 2px 4px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.12);
  --sh-4: 0 4px 8px rgba(15,23,42,.08), 0 24px 48px rgba(15,23,42,.18);

  /* --- Escala tipográfica (CLAUDE.md) ---
     Um degrau por papel, em vez de um tamanho decidido caso a caso em cada regra. */
  --fs-titulo: 1.875rem;      /* 30px — título de página */
  --fs-seccao: 1.3rem;        /* 20.8px — título de secção */
  --fs-cartao: .95rem;        /* 15.2px — título de cartão */
  --fs-kpi: 1.75rem;          /* 28px — valor de KPI */
  --fs-corpo: .9375rem;       /* 15px */
  --fs-legenda: .8rem;        /* 12.8px — legendas e notas */

  /* --- Ritmo de espaçamento ---
     Escala única; o que existia eram valores avulsos (2, 3, 6, 9, 10, 11, 12, 14, 18,
     22, 24, 26…) escolhidos regra a regra, e por isso nunca alinhados entre secções. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* --- Raios --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Inter à frente: estava em quarto lugar, depois de -apple-system e
     BlinkMacSystemFont, que resolvem sempre em macOS e Windows — nunca chegava a
     ser usada. As seguintes são o recurso enquanto o ficheiro carrega, ou se
     falhar. */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --ring: 0 0 0 3px rgba(20,83,45,.20);
}


* { box-sizing: border-box; }

/* O atributo `hidden` vale menos do que qualquer `display:` escrito numa folha de estilo:
   a regra do browser é do agente do utilizador, e perde para a do autor. Sem isto, um
   `.paginacao { display: flex }` ou um `.perfil-menu { display: flex }` continuavam a
   desenhar-se com hidden posto — e os controlos ficavam à vista quando o JS os julgava
   escondidos. Aconteceu nos dois. */
[hidden] { display: none !important; }

/* ================================ Ícones ==================================
   Traçado vectorial que herda a cor do texto (ver app/icons.py). Substituíram
   os emoji, que mudavam de desenho entre sistemas, não herdavam cor e
   desalinhavam verticalmente uns em relação aos outros. */
.icon {
  width: 1.15em; height: 1.15em; flex-shrink: 0;
  vertical-align: -0.19em;   /* assenta na linha de base do texto ao lado */
}
/* Botões e pastilhas: ícone e rótulo como uma unidade. */
.btn-primary, .btn-secondary, .btn-action, .alert-pill, .fila-offline, .offline-bar {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-action .icon { width: 1em; height: 1em; }
.page-icon { width: 1.05em; height: 1.05em; color: var(--navy); vertical-align: -0.12em; }
.brand-icon { width: 1.4em; height: 1.4em; color: var(--lima); }
h1, h2 { display: flex; align-items: center; gap: 9px; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--n-50);
  color: var(--n-900);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Números alinham em coluna — essencial em quantidades e valores. */
.data-table, .kpi-value, .farm-details-list dd, .matrix-table {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { letter-spacing: -0.011em; }
h1 { color: var(--navy); margin-top: 0; font-size: var(--fs-titulo); font-weight: 600; }
h2 { color: var(--navy); font-size: var(--fs-seccao); font-weight: 600; }

a { color: var(--navy); }
code {
  background: var(--n-100); padding: 1px 6px; border-radius: var(--r-sm);
  font-size: .88em; border: 1px solid var(--n-200);
}

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

/* =============================== Estrutura ================================ */
/* .app-shell ocupa a altura do ecrã e não faz scroll próprio — só a barra
   lateral e o conteúdo scrollam, cada um por si. */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 272px; height: 100vh; flex-shrink: 0;
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--n-200);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-right: 1px solid rgba(0,0,0,.12);
}
.brand {
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
  padding: 18px 20px; font-size: 1.02rem; font-weight: 680;
  letter-spacing: -0.01em; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* O scroll vive no <nav>: a marca e o rodapé ficam sempre visíveis. */
.sidebar nav {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: 8px 10px 14px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.sidebar nav::-webkit-scrollbar { width: 8px; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); border-radius: var(--r-pill);
}

.sidebar nav a, .nav-static {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.80); text-decoration: none;
  padding: 8px 12px; margin: 1px 0; font-size: .885rem;
  border-radius: var(--r-sm); position: relative;
  transition: background .12s ease, color .12s ease;
}
.sidebar nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
/* A busca esconde os links com o atributo [hidden]. O `display: flex` acima é um
   selector de classe e ganha ao `[hidden] { display: none }` do browser, por isso
   sem esta linha os links ficavam marcados como escondidos mas continuavam à vista
   — a busca parecia não filtrar nada. */
.sidebar nav a[hidden] { display: none; }

/* Estado activo: pastilha clara com marca dourada à esquerda — lê-se de
   relance sem escurecer a barra toda. */
.sidebar nav a.active {
  background: rgba(255,255,255,.14); color: #fff; font-weight: 620;
}
.sidebar nav a.active::before {
  content: ''; position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 20px;
  background: var(--lima); border-radius: 0 3px 3px 0;
}
.nav-static.muted { opacity: .45; font-style: italic; }

/* Largura fixa nos ícones: os rótulos alinham todos na mesma vertical. */
.nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .85;
}
.nav-icon .icon { width: 18px; height: 18px; vertical-align: 0; }
.sidebar nav a.active .nav-icon { opacity: 1; color: var(--lima); }

/* --------------------------------------------------------- busca no menu
   Doze grupos fechados com meia centena de ecrãs dentro: escrever o nome é mais
   rápido do que adivinhar em que grupo mora e abrir grupos até dar com ele. */
.nav-busca {
  position: relative; flex-shrink: 0; padding: 10px 12px 4px;
}
.nav-busca-icone {
  position: absolute; left: 23px; top: 50%; transform: translateY(-40%);
  display: inline-flex; pointer-events: none; color: rgba(255,255,255,.42);
}
.nav-busca-icone .icon { width: 15px; height: 15px; vertical-align: 0; }
#nav-filtro {
  width: 100%; padding: 8px 11px 8px 33px; font: inherit; font-size: .84rem;
  color: #fff; background: rgba(0,0,0,.20); border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
#nav-filtro::placeholder { color: rgba(255,255,255,.42); }
#nav-filtro:focus {
  outline: none; background: rgba(0,0,0,.30);
  border-color: rgba(198,139,44,.75); box-shadow: 0 0 0 3px rgba(198,139,44,.18);
}
#nav-filtro:focus + * { color: rgba(255,255,255,.7); }
/* O X nativo do type=search é cinzento-escuro e some no fundo verde. */
#nav-filtro::-webkit-search-cancel-button {
  -webkit-appearance: none; height: 13px; width: 13px; cursor: pointer;
  background: rgba(255,255,255,.5);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav-sem-resultados {
  color: rgba(255,255,255,.5); font-size: .82rem; text-align: center;
  padding: 18px 10px; margin: 0; font-style: italic;
}
/* A filtrar, os cabeçalhos de grupo deixam de ser botões de acordeão e passam a
   ser só etiquetas do que está por baixo — a seta deixaria de fazer sentido. */
.a-filtrar .nav-group-arrow { opacity: 0; }
.a-filtrar .nav-group-body { transition: none; }

/* Grupo aberto: um fundo quase imperceptível marca o bloco inteiro como uma unidade —
   sem isto, um grupo aberto no meio de onze fechados não se distinguia dos outros até se
   reparar na seta. */
.nav-group.open {
  background: rgba(255,255,255,.025); border-radius: var(--r-md);
}
.nav-group-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; cursor: pointer; border-radius: var(--r-sm);
  padding: 9px 12px; margin: 0; font-family: inherit; text-align: left;
  transition: background .12s ease;
}
.nav-group-toggle:hover { background: rgba(255,255,255,.05); }
.nav-group-toggle:hover .nav-group-label { color: #fff; }
.nav-group-toggle:hover .nav-group-icone { color: var(--lima); }
/* O ícone da categoria ganha um "chip" — o mesmo idioma visual dos cartões do Painel
   (ícone dentro de uma pastilha arredondada). Maior e com fundo próprio, para nunca se
   confundir com os traços finos dos ícones dos itens lá dentro, mesmo à pressa. */
.nav-group-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px;
  color: rgba(255,255,255,.58); background: rgba(255,255,255,.055);
  transition: color .12s ease, background .12s ease;
}
.nav-group-icone .icon { width: 15px; height: 15px; vertical-align: 0; }
.nav-group.open .nav-group-icone { color: var(--lima); background: rgba(132,204,22,.16); }
.nav-group-label {
  flex: 1; min-width: 0;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .085em;
  /* Era .52 de opacidade — ilegível de relance sobre o verde escuro. */
  color: rgba(255,255,255,.72); font-weight: 700;
  transition: color .12s ease;
}
.nav-group.open .nav-group-label { color: #fff; }
.nav-group-arrow {
  color: rgba(255,255,255,.38); display: inline-flex;
  transition: transform .18s ease, opacity .14s ease;
}
.nav-group-arrow .icon { width: 14px; height: 14px; vertical-align: 0; }
.nav-group.open .nav-group-arrow { transform: rotate(90deg); }
.nav-group-body { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.nav-group.open .nav-group-body { max-height: 620px; padding-bottom: 4px; }
/* Os itens ficam recuados sob uma linha-guia fina, alinhada ao centro do chip do grupo
   acima — o olho lê "isto pertence àquilo" pela posição, sem precisar de comparar ícones.
   Os ícones dos itens (.nav-icon, definido mais acima) ficam por si mais pequenos e mais
   apagados do que o do grupo: o chip é a âncora forte, estes são só apoio à leitura do
   rótulo, nunca o principal sinal de qual item é qual — essa é a função do texto. */
.nav-group-body {
  margin-left: 23px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.10);
}
.nav-group-body a { padding-left: 9px; }
.nav-group-body .nav-icon {
  width: 15px; height: 15px; opacity: .55;
}
.nav-group-body .nav-icon .icon { width: 15px; height: 15px; vertical-align: 0; }
.nav-group-body a:hover .nav-icon { opacity: .85; }
.nav-group-body a.active .nav-icon { opacity: 1; }

/* Rodapé de barra lateral — usado só pelo painel da plataforma, que tem uma barra
   própria e não usa a barra de topo das fazendas. Fundo escuro, logo texto claro. */
.sidebar-footer {
  padding: var(--e-3) 14px; flex-shrink: 0; margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.sidebar-footer .user-info { color: #fff; font-size: .855rem; margin-bottom: var(--e-2); }
.sidebar-footer .user-info small { color: rgba(255,255,255,.58); font-size: .74rem; }
.logout-link {
  color: rgba(255,255,255,.68); text-decoration: none; font-size: .78rem;
  font-weight: 600; padding: 5px 9px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.logout-link:hover {
  color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);
}

/* Perfil na barra de topo. Estas regras vinham do rodapé da barra lateral, onde o fundo
   era verde escuro — o texto era branco. Passadas para o topo claro, branco sobre branco
   seria invisível; daí a cor vir agora dos tokens de texto. */
.user-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--azul), var(--azul-dark));
  color: #fff; font-weight: 700; font-size: .88rem; letter-spacing: .01em;
}
.user-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; text-align: left; }
.user-txt strong {
  color: var(--n-900); font-size: .855rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O papel manda no que se pode fazer — vê-lo aqui poupa o "porquê não posso?". */
.user-txt small {
  color: var(--n-500); font-size: .74rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* O .app-shell era barra lateral + conteúdo. Passa a barra lateral + (topo + conteúdo):
   só o conteúdo scrolla, a barra de topo fica. */
.area { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e-5) 38px 60px; }

/* ============================== Barra de topo ============================= */
.topbar {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-3) 38px; background: var(--n-0);
  border-bottom: 1px solid var(--n-200);
}

.busca-global {
  position: relative; display: flex; align-items: center;
  flex: 1; max-width: 460px;
}
.busca-icone {
  position: absolute; left: 11px; display: flex; color: var(--n-400); pointer-events: none;
}
.busca-icone .icon { width: 16px; height: 16px; }
#busca-global {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1px solid var(--n-200); border-radius: var(--r-md);
  background: var(--n-50); color: var(--n-900);
  font-family: inherit; font-size: .875rem;
  transition: background .12s ease, border-color .12s ease;
}
#busca-global::placeholder { color: var(--n-500); }
#busca-global:focus { background: var(--n-0); border-color: var(--navy); outline: none; box-shadow: var(--ring); }

.busca-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-md);
  box-shadow: var(--sh-3); max-height: 60vh; overflow-y: auto; padding: var(--e-2);
}
.busca-vazio { margin: 0; padding: var(--e-3); font-size: .85rem; color: var(--n-500); }
.busca-grupo + .busca-grupo { margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--n-100); }
.busca-grupo-tit {
  display: flex; align-items: center; gap: 6px;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--n-500); font-weight: 700; padding: var(--e-1) var(--e-2);
}
.busca-grupo-tit .icon { width: 13px; height: 13px; }
.busca-item, .busca-mais {
  display: block; padding: 7px var(--e-2); border-radius: var(--r-sm);
  color: var(--n-900); text-decoration: none; font-size: .875rem;
}
.busca-item:hover, .busca-item:focus,
.busca-mais:hover, .busca-mais:focus { background: var(--navy-soft); color: var(--navy); outline: none; }
.busca-mais { font-size: .8rem; color: var(--n-500); font-weight: 600; }

.topbar-dir { display: flex; align-items: center; gap: var(--e-3); margin-left: auto; }

/* Estado da licença: o ponto dá a leitura de relance, o texto diz o quê — nunca só cor. */
.estado-op {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.estado-op-ponto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.estado-op--ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-borda); }
.estado-op--ok .estado-op-ponto { background: var(--ok); }
.estado-op--alerta { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-borda); }
.estado-op--alerta .estado-op-ponto { background: var(--warn); }

.topbar-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  color: var(--n-700); text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.topbar-btn:hover { background: var(--n-100); color: var(--navy); }
.topbar-conta {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--n-0); box-sizing: content-box;
}

.perfil { position: relative; }
.perfil-btn {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 5px 9px 5px 5px; border-radius: var(--r-md);
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; color: var(--n-900);
  transition: background .12s ease, border-color .12s ease;
}
.perfil-btn:hover { background: var(--n-50); border-color: var(--n-200); }
.perfil-seta { display: flex; color: var(--n-400); transform: rotate(90deg); }
.perfil-seta .icon { width: 13px; height: 13px; }
.perfil-btn[aria-expanded="true"] .perfil-seta { transform: rotate(-90deg); }
.perfil-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 190px;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-md);
  box-shadow: var(--sh-3); padding: var(--e-1); display: flex; flex-direction: column;
}
.perfil-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--n-900); text-decoration: none; font-size: .875rem;
}
.perfil-menu a:hover, .perfil-menu a:focus { background: var(--n-50); outline: none; }
.perfil-menu .icon { width: 15px; height: 15px; color: var(--n-500); }
.perfil-sair .icon { transform: rotate(90deg); }
.perfil-menu .perfil-sair:hover { background: var(--danger-soft); color: var(--danger); }
.perfil-menu .perfil-sair:hover .icon { color: var(--danger); }

/* ============================== Superfícies =============================== */
.panel {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--sh-1); margin-bottom: 20px; max-width: 900px;
}
.note {
  background: var(--warn-soft); border: 1px solid var(--warn-borda); color: var(--n-700);
  padding: 12px 16px; border-radius: var(--r-md); font-size: .875rem; max-width: 820px;
}

/* ============================== Painel ==================================== */
.dash-section { margin-bottom: 30px; }
.dash-section h2, .farm-details-panel h2, .items-header { display: block; }
.dash-section h2 {
  font-size: var(--fs-seccao); color: var(--n-900);
  margin: 0 0 var(--e-3); font-weight: 600; letter-spacing: -.012em;
}

.alert-panel { background: var(--n-0); max-width: none; border-left: 3px solid var(--warn); }
.alert-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.alert-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-borda);
  padding: 7px 14px; border-radius: var(--r-pill);
  font-size: .84rem; text-decoration: none; font-weight: 600;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.alert-pill:hover { background: var(--warn); border-color: var(--warn); color: #fff; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }

/* Cartões brancos com chip de cor: a cor marca o tipo de indicador sem
   competir com o número, que é o que interessa ler. */
.kpi-card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  box-shadow: var(--sh-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kpi-card:hover {
  transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--n-300);
}
.kpi-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-soft); border-radius: var(--r-md); color: var(--navy);
}
.kpi-icon .icon { width: 21px; height: 21px; vertical-align: 0; }
.kpi-card.highlight .kpi-icon { color: var(--ok); }
.kpi-card.warning .kpi-icon { color: var(--warn); }
.kpi-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kpi-label {
  font-size: .765rem; color: var(--n-500); font-weight: 600;
  letter-spacing: .01em; text-transform: uppercase;
}
.kpi-value {
  font-size: var(--fs-kpi); font-weight: 700; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1.15;
}
.kpi-card.highlight { border-color: var(--ok-borda); }
.kpi-card.highlight .kpi-icon { background: var(--ok-soft); }
.kpi-card.highlight .kpi-value { color: var(--ok); }
.kpi-card.warning { border-color: var(--warn-borda); }
.kpi-card.warning .kpi-icon { background: var(--warn-soft); }
.kpi-card.warning .kpi-value { color: var(--warn); }

/* Uma cor por assunto, não por estado: ao contrário de .highlight/.warning (que julgam
   um valor), estas modificam cartões que só descrevem uma contagem — não há "bom" ou
   "mau" em "3 máquinas". Servem para separar visualmente as secções do Painel sem
   inventar tons fora da paleta de campo já documentada no topo deste ficheiro. */
.kpi-card--producao .kpi-icon { background: var(--gold-soft); color: var(--gold-dark); }
.kpi-card--pessoas .kpi-icon { background: var(--navy-soft); color: var(--navy); }
.kpi-card--maquinas .kpi-icon { background: var(--warn-soft); color: var(--warn); }
.kpi-card--animais .kpi-icon { background: var(--ok-soft); color: var(--ok); }
.kpi-card--inventario .kpi-icon { background: var(--warn-soft); color: var(--warn); }
.kpi-card--operacoes .kpi-icon { background: var(--n-100); color: var(--n-700); }

/* ========================= A Minha Fazenda ================================ */
.farm-profile-header {
  display: flex; align-items: center; gap: 18px;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: 22px 24px; margin-bottom: 22px; box-shadow: var(--sh-1);
  position: relative; overflow: hidden;
}
/* Fio de cor no topo: assina o cartão sem o encher de verde. */
.farm-profile-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--azul));
}
.farm-profile-logo {
  width: 66px; height: 66px; border-radius: var(--r-md);
  object-fit: cover; flex-shrink: 0; box-shadow: var(--sh-1);
}
.farm-profile-logo-placeholder .icon { width: 30px; height: 30px; vertical-align: 0; }
.farm-profile-logo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-soft); color: var(--navy); box-shadow: none;
  border: 1px solid var(--navy-borda);
}
.farm-profile-logo-wrap { position: relative; flex-shrink: 0; }
.farm-profile-logo-trocar {
  position: absolute; bottom: -6px; right: -6px; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; background: var(--navy); color: #fff; border: 2px solid var(--n-0);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--sh-1); transition: background .12s ease;
}
.farm-profile-logo-trocar .icon { width: 14px; height: 14px; }
.farm-profile-logo-trocar:hover { background: var(--navy-dark); }
.farm-cor-campo { display: flex; align-items: center; gap: 10px; }
.farm-cor-campo input[type="color"] {
  width: 44px; height: 34px; padding: 2px; border: 1px solid var(--n-200);
  border-radius: var(--r-sm); cursor: pointer; background: var(--n-0);
}
.farm-cor-campo small { color: var(--n-500); font-size: .78rem; }
.farm-profile-heading { flex: 1; min-width: 0; }
.farm-profile-heading h1 { margin: 0; font-size: 1.45rem; }
.farm-profile-sub { margin: 3px 0 0; color: var(--n-500); font-size: .9rem; }
.farm-details-panel h2 {
  font-size: var(--fs-seccao); color: var(--n-900);
  margin: 0 0 var(--e-4); font-weight: 600; letter-spacing: -.012em;
}
.farm-details-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; margin: 0; }
.farm-details-list dt { font-size: .735rem; color: var(--n-500); margin-bottom: 3px; font-weight: 600; }
.farm-details-list dd { margin: 0; font-size: .92rem; color: var(--n-900); font-weight: 600; }

/* ================================ Tabelas ================================= */
.table-wrap {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  overflow: auto; box-shadow: var(--sh-1); max-height: 70vh;
}
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }

/* Cabeçalho claro com tipo forte: pesa menos no ecrã do que uma barra escura
   e deixa os dados em primeiro plano. Na impressão volta a ser sólido. */
.data-table th {
  background: var(--n-50); color: var(--n-700);
  text-align: left; padding: 11px 14px; font-weight: 680;
  font-size: .715rem; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--n-200);
  position: sticky; top: 0; z-index: 1;
}
.data-table th.sortable-th {
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.data-table th.sortable-th:hover { background: var(--n-100); color: var(--navy); }
.tabela-link { color: var(--navy); font-weight: 650; text-decoration: none; }
.tabela-link:hover { text-decoration: underline; }
.data-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--n-100); color: var(--n-700);
}
.data-table tbody tr { transition: background .1s ease; }
.data-table tbody tr:hover { background: var(--n-25); }
.data-table tbody tr:last-child td { border-bottom: none; }

.table-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 52px 20px; color: var(--n-500); text-align: center; font-size: .9rem;
}
.table-state-icon { opacity: .45; }
.table-state-icon .icon { width: 34px; height: 34px; vertical-align: 0; }
.spinner {
  width: 26px; height: 26px; border: 2.5px solid var(--n-200);
  border-top-color: var(--navy); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ Farm Intelligence =========================== */
.insights { display: flex; flex-direction: column; gap: var(--e-3); }
.insight {
  display: flex; gap: var(--e-3); align-items: flex-start;
  background: var(--n-0); border: 1px solid var(--n-200);
  border-left: 3px solid var(--n-300);
  border-radius: var(--r-lg); padding: var(--e-4) var(--e-4) var(--e-3);
  box-shadow: var(--sh-1);
}
/* A barra à esquerda dá a leitura de relance; o rótulo em texto diz o mesmo por palavras,
   porque a prioridade não pode depender só da cor. */
.insight--alta { border-left-color: var(--danger); }
.insight--media { border-left-color: var(--warn); }
.insight--baixa { border-left-color: var(--azul); }
.insight-icone {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--n-100); color: var(--n-700);
}
.insight--alta .insight-icone { background: var(--danger-soft); color: var(--danger); }
.insight--media .insight-icone { background: var(--warn-soft); color: var(--warn); }
.insight--baixa .insight-icone { background: var(--azul-soft); color: var(--azul); }
.insight-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.insight-topo { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }
.insight-topo h3 {
  margin: 0; font-size: var(--fs-cartao); font-weight: 650; color: var(--n-900);
  letter-spacing: -.01em;
}
.insight-prio {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; margin-left: auto;
}
.insight--alta .insight-prio { background: var(--danger-soft); color: var(--danger); }
.insight--media .insight-prio { background: var(--warn-soft); color: var(--warn); }
.insight--baixa .insight-prio { background: var(--azul-soft); color: var(--azul); }
.insight-impacto { margin: 0; font-size: .9rem; color: var(--n-900); font-weight: 600; }
.insight-recomendacao { margin: 0; font-size: .86rem; color: var(--n-700); line-height: 1.5; }
.insight-accao {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin-top: var(--e-1); font-size: .84rem; font-weight: 650;
  color: var(--navy); text-decoration: none;
}
.insight-accao:hover { text-decoration: underline; }
.insight-accao .icon { width: 14px; height: 14px; }

@media (max-width: 720px) {
  .insight-prio { margin-left: 0; }
}

/* ====================== Receitas vs Despesas (tesouraria) ================ */
/* Verde entra, azul sai. Sem vermelho: a paleta reserva-o para perdas e erros, e gastar
   dinheiro numa fazenda não é nenhuma das duas coisas. */
.g2-a { fill: var(--g-producao); }
.g2-b { fill: var(--g-financeiro); }
.g-legenda i.leg-receita { background: var(--g-producao); }
.g-legenda i.leg-despesa { background: var(--g-financeiro); }
.g-legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* Diz de onde vem o número, para não se ler como a receita facturada do painel acima. */
.grafico-nota { display: block; font-size: var(--fs-legenda); color: var(--n-500); margin-top: var(--e-1); }

/* ============================= Minigráfico ================================
   Dentro de um cartão de KPI. Verde de produção da paleta oficial — é uma série de
   produção, e a secção "Gráficos" do CLAUDE.md atribui-lhe essa cor. */
.kpi-spark { display: block; margin-top: var(--e-2); line-height: 0; }
.minigrafico { width: 100%; height: 28px; display: block; overflow: visible; }
.mg-linha { stroke: var(--g-producao); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mg-area { fill: var(--g-producao); opacity: .12; }
/* O ponto final é o presente — sem ele, o fim da série perde-se na margem. */
.mg-fim { fill: var(--g-producao); }

@media print {
  /* Os browsers não imprimem preenchimentos por omissão: a área sairia vazia e a linha
     sozinha lê-se na mesma. */
  .mg-area { display: none; }
}

/* ============================== Migalhas ================================== */
/* "Onde estou" — com 65 ecrãs em 12 grupos, o título sozinho não chega. Fica acima do
   título e em corpo pequeno: é orientação, não conteúdo. */
.migalhas {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-1);
  font-size: var(--fs-legenda); color: var(--n-500); margin-bottom: var(--e-1);
}
.migalhas a { color: var(--n-500); text-decoration: none; }
.migalhas a:hover { color: var(--navy); text-decoration: underline; }
.migalhas-grupo { color: var(--n-500); }
.migalhas [aria-current="page"] { color: var(--n-700); font-weight: 600; }
.migalhas-sep { display: inline-flex; color: var(--n-300); }
.migalhas-sep .icon { width: 13px; height: 13px; }

/* ============================== Paginação ================================= */
.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin-top: var(--e-3);
}
.paginacao-conta { font-size: var(--fs-legenda); color: var(--n-500); }
.paginacao-botoes { display: flex; align-items: center; gap: var(--e-2); }
.paginacao-posicao {
  font-size: var(--fs-legenda); color: var(--n-700); font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: center;
}
/* Desactivado tem de se ver desactivado — sem isto, o botão em fim de lista parece
   avariado em vez de esgotado. */
.paginacao .btn-action[disabled] {
  opacity: .45; cursor: default; background: var(--n-50);
}
.paginacao .btn-action[disabled]:hover {
  background: var(--n-50); border-color: var(--n-300); color: var(--n-700);
}

/* ================================ Emblemas ================================ */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 650; letter-spacing: .01em;
  border: 1px solid transparent;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-borda); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-borda); }
.badge-info { background: var(--n-100); color: var(--n-700); border-color: var(--n-200); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-borda); }

.perm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-tag {
  background: var(--navy-soft); color: var(--navy); border: 1px solid var(--navy-borda);
  padding: 3px 10px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 600;
}

.flash {
  padding: 11px 16px; border-radius: var(--r-md); margin-bottom: 14px;
  font-size: .88rem; border: 1px solid transparent;
}
.flash-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-borda); }
.flash-success { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-borda); }

/* ================================ Botões ================================== */
.btn-primary, .btn-secondary, .btn-action {
  font-family: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--r-sm); transition: background .13s ease, box-shadow .13s ease,
    border-color .13s ease, transform .08s ease;
}
.btn-primary:active, .btn-secondary:active, .btn-action:active { transform: translateY(1px); }

.btn-primary {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  padding: 9px 18px; font-size: .875rem; box-shadow: var(--sh-1);
}
.btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn-primary:focus-visible { box-shadow: var(--ring); }

.btn-secondary {
  background: var(--n-0); color: var(--n-700); border: 1px solid var(--n-300);
  padding: 9px 16px; font-size: .875rem;
}
.btn-secondary:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }

.btn-action {
  background: var(--n-0); color: var(--n-700); border: 1px solid var(--n-300);
  padding: 5px 11px; font-size: .78rem; margin-right: 6px;
}
.btn-action:hover { background: var(--azul-soft); border-color: var(--azul); color: var(--azul); }
.btn-action.btn-delete:hover { background: var(--danger-soft); border-color: var(--danger-borda); color: var(--danger); }
.tabela-accoes { white-space: nowrap; }

/* ============================ Cabeçalho de módulo ========================= */
.module-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.module-actions { display: flex; gap: 9px; align-items: center; }
#search-box {
  padding: 8px 13px; border: 1px solid var(--n-300); border-radius: var(--r-sm);
  width: 230px; font-family: inherit; font-size: .875rem;
  background: var(--n-0); color: var(--n-900);
  transition: border-color .13s ease, box-shadow .13s ease;
}
#search-box::placeholder { color: var(--n-400); }
#search-box:focus { outline: none; border-color: var(--navy); box-shadow: var(--ring); }

/* ================================= Login ================================== */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(1200px 600px at 20% -10%, var(--navy-claro) 0%, transparent 60%),
              linear-gradient(140deg, var(--navy) 0%, var(--navy-dark) 55%, var(--azul) 100%);
}
.login-card {
  background: var(--n-0); padding: 38px 40px; border-radius: 18px; width: 440px;
  box-shadow: var(--sh-4); border: 1px solid rgba(255,255,255,.6);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.login-mark {
  width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0;
  box-shadow: var(--sh-1);
}
.login-card h1 { font-size: 1.35rem; margin: 0; letter-spacing: -0.02em; }
.subtitle { color: var(--n-500); margin: 2px 0 0; font-size: .84rem; }
.login-help {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--n-200);
  font-size: .8rem; color: var(--n-500); text-align: center;
}
.login-card form label {
  display: block; margin-top: 14px; font-size: .8rem; font-weight: 650; color: var(--n-700);
}
.login-card form input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--n-300);
  border-radius: var(--r-sm); margin-top: 5px; font-family: inherit; font-size: .92rem;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.login-card form input:focus { outline: none; border-color: var(--navy); box-shadow: var(--ring); }
.login-card button {
  width: 100%; margin-top: 22px; background: var(--navy); color: #fff; border: none;
  padding: 12px; border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: .93rem; font-weight: 650;
  box-shadow: var(--sh-1); transition: background .13s ease;
}
.login-card button:hover { background: var(--navy-dark); }
.demo-accounts {
  margin-top: 24px; background: var(--n-50); border: 1px solid var(--n-200);
  padding: 13px 15px; border-radius: var(--r-md); font-size: .78rem; color: var(--n-700);
}
.demo-accounts ul { margin: 8px 0 0; padding-left: 18px; }

/* ================================ Modais ================================== */
.modal-backdrop, .confirm-backdrop {
  position: fixed; inset: 0; background: rgba(24,22,19,.48);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop { z-index: 50; }
.confirm-backdrop { z-index: 90; }
.modal-backdrop.hidden { display: none; }

.modal, .confirm-box {
  background: var(--n-0); border-radius: var(--r-lg);
  box-shadow: var(--sh-4); border: 1px solid var(--n-200);
}
.modal { padding: 26px 28px; width: 480px; max-height: 85vh; overflow-y: auto; }
.modal h2 { margin-top: 0; font-size: 1.12rem; }
.modal form label, .form-modal-body label {
  display: block; margin-top: 14px; font-size: .8rem; font-weight: 650; color: var(--n-700);
}
.modal form input, .modal form select,
.form-modal-body input, .form-modal-body select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--n-300);
  border-radius: var(--r-sm); margin-top: 5px;
  font-family: inherit; font-size: .89rem; background: var(--n-0); color: var(--n-900);
  transition: border-color .13s ease, box-shadow .13s ease;
}
.modal form input:focus, .modal form select:focus,
.form-modal-body input:focus, .form-modal-body select:focus {
  outline: none; border-color: var(--navy); box-shadow: var(--ring);
}
.modal-actions, .confirm-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px;
}
.create-note {
  font-size: .78rem; color: var(--n-500); background: var(--n-50);
  border: 1px solid var(--n-200); padding: 9px 12px;
  border-radius: var(--r-md); margin-top: 12px;
}

.confirm-box { padding: 24px 26px; width: 380px; max-width: 90vw; }
.confirm-message { margin: 0 0 20px; color: var(--n-700); font-size: .92rem; line-height: 1.5; }
.form-modal-title { margin: 0 0 4px; font-size: 1.08rem; color: var(--navy); font-weight: 680; }
.form-modal-intro { margin: 8px 0 0; font-size: .85rem; color: var(--n-500); line-height: 1.45; }
.form-modal-body { margin-bottom: 20px; }

/* ===================== Linhas de documento (itens) ======================== */
.items-section { margin-top: 22px; border-top: 1px solid var(--n-200); padding-top: 16px; }
.items-header {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--n-500); margin-bottom: 10px; font-weight: 700;
}
.items-empty { font-size: .82rem; color: var(--n-500); margin: 6px 0 12px; }
.item-row {
  position: relative; background: var(--n-50); border: 1px solid var(--n-200);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px;
}
.item-row-title { font-size: .85rem; font-weight: 680; color: var(--navy); margin-bottom: 2px; }
.item-row-fields label { margin-top: 9px; font-size: .74rem; }
.item-remove {
  position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; line-height: 1;
  border: 1px solid var(--n-200); border-radius: 50%; background: var(--n-0);
  color: var(--n-500); cursor: pointer; font-size: .72rem;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.item-remove:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-borda); }
.btn-add-item { font-size: .82rem; padding: 7px 14px; }

/* ============================ Avisos flutuantes =========================== */
.toast-container {
  position: fixed; bottom: 22px; right: 22px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
}
.toast {
  background: var(--n-0); color: var(--n-900); padding: 13px 17px;
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  font-size: .875rem; line-height: 1.45; border: 1px solid var(--n-200);
  border-left: 3px solid var(--navy);
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-error { border-left-color: var(--danger); }
.toast-success { border-left-color: var(--ok); }

.offline-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--warn); color: #fff; text-align: center;
  padding: 11px 16px; font-size: .85rem; line-height: 1.35; font-weight: 500;
  box-shadow: 0 -2px 12px rgba(34,32,28,.18);
  transform: translateY(100%); transition: transform .22s ease;
}
.offline-bar.visivel { transform: translateY(0); }

.fila-offline {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 115;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-borda);
  border-radius: var(--r-pill); padding: 10px 20px;
  font-family: inherit; font-size: .83rem; font-weight: 650; cursor: pointer;
  box-shadow: var(--sh-3); transition: background .13s ease, color .13s ease;
}
.fila-offline:hover { background: var(--gold-dark); color: #fff; }

/* ============================== Hambúrguer ================================ */
.sidebar-toggle {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 42px; height: 42px; border-radius: var(--r-md); border: none;
  background: var(--navy); color: #fff; font-size: 1.2rem; cursor: pointer;
  box-shadow: var(--sh-3);
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(24,22,19,.5); backdrop-filter: blur(2px);
}
.sidebar-overlay.visible { display: block; }

/* ============================== Responsivo ================================ */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 26px 24px 60px; }
}

@media (max-width: 720px) {
  .sidebar-toggle { display: block; }
  .app-shell { display: block; height: auto; overflow: visible; }
  .sidebar .brand { padding-left: 64px; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 50; width: 268px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(24,22,19,.28);
  }
  .sidebar.open { transform: translateX(0); }
  .area { height: auto; }
  /* O hambúrguer é fixo no canto superior esquerdo: a barra de topo recua para lhe dar
     espaço, em vez de lhe passar por baixo. */
  .topbar { padding: var(--e-2) 16px var(--e-2) 64px; flex-wrap: wrap; gap: var(--e-2); }
  .busca-global { max-width: none; order: 2; flex-basis: 100%; }
  .topbar-dir { order: 1; margin-left: auto; gap: var(--e-2); }
  /* Num ecrã estreito o nome e o papel não cabem — fica a inicial, que é o que identifica
     de relance; o nome completo continua no menu que o botão abre. */
  .perfil-btn .user-txt { display: none; }
  .estado-op { display: none; }
  .content { height: auto; padding: var(--e-4) 16px 40px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .module-header { flex-direction: column; align-items: stretch; }
  .module-actions { flex-wrap: wrap; }
  #search-box { width: 100%; }
  .modal { width: 92vw; padding: 22px; }
  .login-card { width: 100%; padding: 30px 24px; }
  .farm-profile-header { flex-direction: column; text-align: center; }
  .farm-details-list { grid-template-columns: 1fr; }
  .confirm-box { width: 88vw; padding: 22px; }
  .toast-container { left: 16px; right: 16px; bottom: 16px; max-width: none; }

  /* Tabelas viram cartões empilhados: cada linha é um bloco e cada célula
     mostra o nome da coluna à esquerda e o valor à direita, evitando o scroll
     horizontal apertado de uma tabela normal num telemóvel. */
  .table-wrap { max-height: none; background: transparent; box-shadow: none; overflow: visible; border: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr {
    background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-md);
    box-shadow: var(--sh-1); margin-bottom: 12px; padding: 4px 14px;
  }
  .data-table tbody tr:hover { background: var(--n-0); }
  .data-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--n-100); text-align: right;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td::before {
    content: attr(data-label); font-weight: 650; color: var(--n-500);
    text-align: left; flex-shrink: 0; font-size: .78rem;
  }
  .data-table td[data-label="Ações"] { flex-wrap: wrap; justify-content: flex-end; }
  .data-table td[data-label="Ações"]::before { display: none; }
  .btn-action { margin: 3px 0 3px 6px; }
  .data-table td.table-state { display: flex; flex-direction: column; align-items: center; }
  .data-table td.table-state::before { content: none; }
}

/* ==================== Impressão / guardar como PDF ======================== */
.print-only { display: none; }




/* Filtros recolhíveis: no computador o resumo não aparece e ficam sempre abertos. */
.filtros-resumo { display: none; }
@media (max-width: 720px) {
  .filtros-resumo {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-weight: 600; color: var(--navy-dark); list-style: none;
  }
  .filtros-resumo::-webkit-details-marker { display: none; }
  .filtros-resumo .icon { width: 18px; height: 18px; }
  #filtros-descricao { font-weight: 400; color: var(--n-500); font-size: .85rem; }
  details.filtros[open] .filtros-resumo { margin-bottom: 10px; }
}


/* ------------------------------------------------- formulário de conta */
.painel-estreito { max-width: 460px; }
.form-vertical { display: flex; flex-direction: column; gap: 4px; }
.form-vertical label { font-size: .82rem; color: var(--n-500); margin-top: 10px; }
.form-vertical input { width: 100%; }
.form-accoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.form-accoes .btn-secondary { display: inline-flex; align-items: center; text-decoration: none; }

/* ------------------------------------------------------- resultado da fazenda
   O primeiro bloco do Painel, e o único em fundo escuro: é a resposta à pergunta
   com que o gestor abre o sistema. Substituiu um convite a ir ver o lucro noutro
   ecrã — dá o número em vez de prometer onde encontrá-lo. */
.resultado {
  margin: 0 0 22px; padding: 20px 24px 18px; border-radius: var(--r-lg);
  background: linear-gradient(112deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff; box-shadow: var(--sh-3); position: relative; overflow: hidden;
}
/* Fio dourado no topo — assina o painel sem lhe acrescentar mais uma cor de fundo. */
.resultado::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--lima), var(--claro-ok) 55%, transparent);
}
.resultado--prejuizo::before { background: linear-gradient(90deg, var(--claro-danger-forte), var(--claro-danger) 55%, transparent); }

/* Pastilha de estado: repete em palavras o que a cor diz, para não depender dela. */
.resultado-estado {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 10px; border-radius: var(--r-pill); margin-right: auto;
  background: rgba(134,239,172,.16); color: var(--claro-ok);
  border: 1px solid rgba(143,227,172,.32);
}
.resultado--atencao .resultado-estado {
  background: rgba(252,211,77,.16); color: var(--claro-warn); border-color: rgba(252,211,77,.34);
}
.resultado--prejuizo .resultado-estado,
.resultado--sem_receita .resultado-estado {
  background: rgba(252,165,165,.15); color: var(--claro-danger); border-color: rgba(252,165,165,.32);
}
.resultado--sem_receita .resultado-estado {
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.20);
}

.resultado-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.resultado-topo h2 {
  margin: 0; color: #fff; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .11em;
}
.resultado-topo h2 .icon { color: var(--lima); width: 16px; height: 16px; }
.resultado-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.78); text-decoration: none; font-size: .82rem;
  font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.20);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.resultado-link:hover {
  background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.42);
}
.resultado-link .icon { width: 14px; height: 14px; }

/* A conta lê-se como uma frase: receita − custo = lucro. */
.resultado-conta {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 20px;
}
.resultado-parcela { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resultado-rot {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255,255,255,.62); font-weight: 700;
}
.resultado-num {
  font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em;
  color: rgba(255,255,255,.92); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.resultado-num em { font-style: normal; font-size: .72em; opacity: .7; font-weight: 600; }
.resultado-op {
  font-size: 1.25rem; color: rgba(255,255,255,.38); font-weight: 400;
  padding-bottom: 3px; user-select: none;
}
/* O total destaca-se pelo tamanho e pela cor, não por uma caixa à volta. */
.resultado-parcela--total .resultado-num { font-size: 2rem; color: var(--claro-ok); }
.resultado--atencao .resultado-parcela--total .resultado-num { color: var(--claro-warn); }
.resultado--prejuizo .resultado-parcela--total .resultado-num { color: var(--claro-danger); }
.resultado--sem_receita .resultado-parcela--total .resultado-num { color: rgba(255,255,255,.85); }
.resultado-margem {
  font-size: .76rem; color: rgba(255,255,255,.62); font-weight: 600; margin-top: 1px;
}
.resultado-margem--alta { color: var(--claro-ok); }
.resultado-margem--baixa { color: var(--claro-danger); }

/* Quanto da receita o custo já consumiu. Passa dos 100% e enche a vermelho. */
.resultado-barra {
  height: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.14);
  margin: 16px 0 0; overflow: hidden;
}
.resultado-barra span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--lima), var(--claro-ok));
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.resultado--prejuizo .resultado-barra span { background: linear-gradient(90deg, var(--g-perda), var(--claro-danger-forte)); }

.resultado-ramos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px;
  padding-top: 15px; border-top: 1px solid rgba(255,255,255,.13);
}
.ramo {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 10px 13px; border-radius: var(--r-md); color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.ramo:hover {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}
.ramo .icon { width: 19px; height: 19px; flex-shrink: 0; opacity: .8; }
.ramo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ramo-txt small { font-size: .72rem; color: rgba(255,255,255,.60); font-weight: 600; }
.ramo-txt strong {
  font-size: .98rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.ramo--ok .icon, .ramo--ok .ramo-txt strong { color: var(--claro-ok); }
.ramo--perda .icon, .ramo--perda .ramo-txt strong { color: var(--claro-danger); }

/* A conta só cabe numa linha com folga a partir daqui. A barra lateral come 272px
   fixos, por isso o ponto de quebra é alto: abaixo disto "receita − custo = lucro"
   partia-se a meio e deixava o "=" pendurado no fim de uma linha, sozinho. */
@media (max-width: 1120px) {
  .resultado-op { display: none; }
  .resultado-conta { gap: 10px 22px; }
  .resultado-parcela--total {
    width: 100%; margin-top: 4px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.13);
  }
}
@media (max-width: 720px) {
  .resultado { padding: 17px 18px 15px; }
  .resultado-num { font-size: 1.12rem; }
  .resultado-parcela--total .resultado-num { font-size: 1.6rem; }
  .resultado-ramos { grid-template-columns: 1fr; }
  .resultado-topo { margin-bottom: 13px; }
  .resultado-link { order: 3; }
}


/* ---------------------------------------------------------- ficha do animal */
.kpi-nota { font-size: .74rem; color: var(--n-500); margin-top: 2px; }
.form-linha {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--n-200);
}
.form-linha label { display: flex; flex-direction: column; gap: 3px;
  font-size: .78rem; color: var(--n-500); }
.form-linha input, .form-linha select { min-width: 140px; }
.form-linha button { white-space: nowrap; }
.historico { width: 100%; }
.historico th { font-size: .74rem; }
.variacao-pos { color: var(--ok); font-weight: 600; }
.variacao-neg { color: var(--danger); font-weight: 600; }
a.btn-action { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 720px) {
  .form-linha { flex-direction: column; align-items: stretch; }
  .form-linha input, .form-linha select, .form-linha button { width: 100%; }
}


/* -------------------------------------------------------------- lançar custo */
#painel-formulario.hidden, #painel-resultado.hidden { display: none; }
.lc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.lc-tipo {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 16px; border-radius: 12px; border: 1px solid var(--n-200);
  background: var(--n-0); cursor: pointer; box-shadow: var(--sh-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lc-tipo:hover { transform: translateY(-1px); box-shadow: var(--sh-2); border-color: var(--navy); }
.lc-tipo.activo { border-color: var(--navy); background: var(--navy-soft); }
.lc-tipo .icon { width: 26px; height: 26px; color: var(--navy); flex-shrink: 0; margin-top: 2px; }
.lc-tipo span { display: flex; flex-direction: column; gap: 2px; }
.lc-tipo strong { font-size: .95rem; }
.lc-tipo small { color: var(--n-500); font-size: .8rem; }

.lc-painel { margin-bottom: 20px; }
.lc-form-cab { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px; }
.lc-form-cab h2 { margin: 0; font-size: 1.1rem; }
#lc-form { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
#lc-form label { font-size: .82rem; color: var(--n-500); margin-top: 8px; }
#lc-form input, #lc-form select, #lc-form textarea { width: 100%; }
.lc-insumos { margin-top: 6px; }
.lc-insumo-linha {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap: 8px;
  align-items: end; padding: 8px 0; border-bottom: 1px solid var(--n-100);
}
.lc-insumo-linha label { margin-top: 0; }
.lc-remover-insumo { background: none; border: none; color: var(--danger);
  cursor: pointer; padding: 6px; }
.lc-resumo-linha {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px dotted var(--n-200); font-size: .9rem;
}
.lc-resumo-linha:last-child { border-bottom: none; }
.lc-resumo-seta { color: var(--n-400); margin: 0 6px; }
#lc-historico table { width: 100%; border-collapse: collapse; }
#lc-historico td { padding: 8px 6px; border-bottom: 1px solid var(--n-100); font-size: .88rem; }
#lc-historico td:last-child { text-align: right; }
@media (max-width: 720px) {
  .lc-grid { grid-template-columns: 1fr 1fr; }
  .lc-insumo-linha { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- insumos por classificar */
.por-classificar { align-items: flex-start; }
.tabela-classificar { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tabela-classificar td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--n-200);
  vertical-align: middle; }
.tabela-classificar tr:last-child td { border-bottom: none; }
/* --n-700: esta tabela vive dentro da caixa de aviso âmbar, e sobre --warn-soft o tom
   secundário dava 4,27:1. */
.tabela-classificar small { color: var(--n-700); }
.tabela-classificar select { max-width: 220px; }
@media (max-width: 720px) {
  .tabela-classificar, .tabela-classificar tbody, .tabela-classificar tr,
  .tabela-classificar td { display: block; width: 100%; }
  .tabela-classificar tr { padding: 8px 0; border-bottom: 1px solid var(--n-200); }
  .tabela-classificar td { border: none; padding: 3px 0; }
  .tabela-classificar select { max-width: none; width: 100%; }
}

/* ---------------------------------------------------------------- alertas */
.alertas-contagem { margin: 0 0 10px; color: var(--n-500); font-size: .9rem; }
.alerta-vazio { display: flex; align-items: center; gap: 8px; color: var(--n-500); }
.alerta-vazio .icon { color: var(--ok); }
.alertas-lista { display: grid; gap: 10px; }
.alerta {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--n-200); border-left-width: 4px; background: var(--n-0);
}
.alerta-critico { border-left-color: var(--danger); }
.alerta-aviso   { border-left-color: var(--warn); }
.alerta-critico .alerta-icone { color: var(--danger); }
.alerta-aviso   .alerta-icone { color: var(--warn); }
.alerta-texto { flex: 1; min-width: 0; }
.alerta-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.alerta-nivel {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor;
}
.alerta-critico .alerta-nivel { color: var(--danger); }
.alerta-aviso   .alerta-nivel { color: var(--warn); }
.alerta-safra { color: var(--n-500); font-size: .85rem; }
.alerta-texto p { margin: 4px 0 8px; color: var(--n-700); }
.alerta-valores { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.alerta-valores div { display: flex; gap: 6px; align-items: baseline; }
.alerta-valores dt { color: var(--n-500); font-size: .8rem; }
.alerta-valores dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; }

/* -------------------------------------------------------------- relatório */
.relatorio-box { max-width: 860px; width: 92vw; }
#relatorio-corpo { max-height: 62vh; overflow-y: auto; }
.rel-consolidado, .rel-safra { padding: 12px 0; border-top: 1px solid var(--n-200); }
.rel-consolidado { border-top: none; }
.rel-safra h3, .rel-consolidado h3 { margin: 0 0 8px; font-size: 1rem; color: var(--navy-dark); }
.rel-safra h4 { margin: 12px 0 6px; font-size: .85rem; color: var(--n-500);
  text-transform: uppercase; letter-spacing: .05em; }
.rel-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 16px; margin: 0; }
.rel-lista div { display: flex; justify-content: space-between; gap: 10px;
  border-bottom: 1px dotted var(--n-200); padding: 3px 0; }
.rel-lista dt { color: var(--n-500); font-size: .85rem; }
.rel-lista dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; }
.rel-categorias { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rel-categorias td { padding: 3px 0; border-bottom: 1px solid var(--n-100); }
.rel-categorias tfoot td { border-top: 2px solid var(--n-300); border-bottom: none; padding-top: 6px; }

@media print {
  /* O relatório é um modal, e a regra acima esconde todos os modais na impressao. Quando
     se imprime o relatorio a intencao e' o contrario: sai o relatorio e mais nada. */
  body.a-imprimir-relatorio .app-shell { display: none !important; }
  body.a-imprimir-relatorio #relatorio-backdrop {
    display: block !important; position: static; background: none; padding: 0;
  }
  body.a-imprimir-relatorio #relatorio-backdrop .confirm-box {
    box-shadow: none; border: none; max-width: none; width: auto; max-height: none;
    overflow: visible; padding: 0; background: #fff;
  }
  body.a-imprimir-relatorio #relatorio-corpo { max-height: none; overflow: visible; }
  body.a-imprimir-relatorio .confirm-actions,
  body.a-imprimir-relatorio .form-modal-title { display: none !important; }
  .rel-safra, .rel-consolidado { break-inside: avoid; }

  /* Fora tudo o que não é o relatório. */
  .sidebar, .sidebar-toggle, .sidebar-overlay, .module-actions, .modal-backdrop,
  .confirm-backdrop, .toast-container, .create-note, .flash, .alert-panel,
  .offline-bar, .fila-offline, .paginacao, .migalhas, .topbar { display: none !important; }

  .print-only { display: block; }
  .print-header { margin-bottom: 14px; border-bottom: 2px solid var(--cor-fazenda); padding-bottom: 10px; }
  .print-farm { font-size: 10pt; color: var(--cor-fazenda); font-weight: bold; letter-spacing: .04em; }
  .print-header h1 { margin: 2px 0; font-size: 16pt; color: var(--cor-fazenda-escura); }
  .print-sub, .print-meta { font-size: 9pt; color: #555; }

  body { background: #fff; font-size: 10pt; }
  .app-shell { display: block; height: auto; overflow: visible; }
  .content { height: auto; overflow: visible; padding: 0; }
  .content > h1, .module-header h1 { display: none; }

  /* Em ecrã pequeno a tabela vira cartões; no papel volta a ser tabela. */
  .table-wrap { max-height: none; overflow: visible; box-shadow: none; background: #fff; border: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: revert; width: auto; }
  .data-table { width: 100%; font-size: 9pt; }
  .data-table thead { display: table-header-group; }   /* repete em cada página */
  .data-table tr { page-break-inside: avoid; background: #fff !important; box-shadow: none; padding: 0; border: none; }
  .data-table th {
    background: var(--navy) !important; color: #fff !important; position: static;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .data-table td { border-bottom: 1px solid #DDD; text-align: left; color: #000; }
  .data-table td::before { content: none !important; }
  .data-table th:last-child, .data-table td:last-child { display: none; }  /* coluna de botões */
  .badge { border: 1px solid #999; color: #000 !important; background: none !important; }

  .kpi-card, .panel, .farm-profile-header {
    box-shadow: none; border: 1px solid #DDD; background: #fff !important;
    break-inside: avoid;
  }
  .kpi-icon { background: none !important; }
  .kpi-value { color: var(--navy-dark) !important; }

  /* O painel de Resultado é o único bloco de texto branco sobre fundo escuro. Os
     browsers não imprimem fundos por defeito, o que deixaria branco sobre branco —
     os números mais importantes do Painel sairiam do papel invisíveis. No papel
     inverte-se: fundo branco, tinta escura. */
  .resultado {
    background: #fff !important; color: #000 !important;
    border: 1px solid #DDD; box-shadow: none; break-inside: avoid;
  }
  .resultado::before { display: none; }
  .resultado-topo h2, .resultado-topo h2 .icon { color: var(--navy-dark) !important; }
  .resultado-rot, .resultado-margem, .ramo-txt small { color: #555 !important; }
  .resultado-num, .ramo-txt strong, .ramo .icon { color: var(--navy-dark) !important; }
  .resultado-op { color: #888 !important; }
  .resultado-estado {
    color: var(--navy-dark) !important; background: none !important; border: 1px solid #999;
  }
  .resultado-link { display: none !important; }   /* "abrir" não existe no papel */
  .resultado-barra { border: 1px solid #CCC; background: #fff !important; }
  .resultado-barra span { background: #999 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ramo { background: none !important; border: 1px solid #DDD; }
  .resultado-ramos { border-top-color: #DDD; }

  @page { margin: 14mm; }
}

/* ========================= Rentabilidade da Produção ====================== */
.pagina-sub { margin: 2px 0 0; color: var(--n-500); font-size: .88rem; }

.filtros { padding: 14px 18px; margin-bottom: 18px; max-width: none; }
.filtros-campos { display: flex; flex-wrap: wrap; gap: 16px; }
.filtros-campos label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--n-500); font-weight: 700;
}
.filtros-campos select {
  padding: 8px 11px; border: 1px solid var(--n-300); border-radius: var(--r-sm);
  font-family: inherit; font-size: .88rem; background: var(--n-0); color: var(--n-900);
  min-width: 170px; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.filtros-campos select:focus { outline: none; border-color: var(--navy); box-shadow: var(--ring); }

/* Faixa de estado: texto primeiro, cor a reforçar — nunca cor sozinha. */
.estado-faixa {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--r-md); margin-bottom: 16px;
  border-left: 4px solid var(--n-400); background: var(--n-0);
  border: 1px solid var(--n-200); border-left-width: 4px;
}
.estado-faixa span { color: var(--n-500); font-size: .86rem; }
.estado-ok { border-left-color: var(--ok); }
.estado-ok strong { color: var(--ok); }
.estado-warn { border-left-color: var(--warn); }
.estado-warn strong { color: var(--warn); }
.estado-danger { border-left-color: var(--danger); }
.estado-danger strong { color: var(--danger); }
.estado-neutro strong { color: var(--n-500); }

.kpi-card--ok .kpi-value { color: var(--ok); }
.kpi-card--warn .kpi-value { color: var(--warn); }
.kpi-card--danger .kpi-value { color: var(--danger); }

.nota-formulas {
  margin: 12px 0 0; font-size: .8rem; color: var(--n-500); line-height: 1.5;
  max-width: 780px;
}

.aviso-receita {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--warn-soft); border: 1px solid var(--warn-borda); color: var(--n-700);
  padding: 13px 16px; border-radius: var(--r-md); margin: 16px 0;
  font-size: .86rem; line-height: 1.5;
}
.aviso-receita .icon { color: var(--warn); margin-top: 2px; }

h2.seccao {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--n-500); margin: 26px 0 12px; font-weight: 700; display: block;
}

.safra-cartao {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sh-1);
}
.safra-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.safra-cab h3 { margin: 0; font-size: 1.02rem; color: var(--navy); }
.safra-sub { font-size: .8rem; color: var(--n-500); }
.etiqueta-estado {
  padding: 3px 11px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 650;
  border: 1px solid transparent; white-space: nowrap;
}
.etiqueta-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-borda); }
.etiqueta-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-borda); }
.etiqueta-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-borda); }
.etiqueta-neutro { background: var(--n-100); color: var(--n-700); border-color: var(--n-200); }

.safra-numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 20px;
  padding: 14px 0; border-top: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100);
  margin-bottom: 14px;
}
.safra-numeros > div { display: flex; flex-direction: column; gap: 2px; }
.safra-numeros span { font-size: .72rem; color: var(--n-500); text-transform: uppercase; letter-spacing: .04em; }
.safra-numeros strong { font-size: 1rem; color: var(--n-900); font-variant-numeric: tabular-nums; }
.valor-pos { color: var(--ok) !important; }
.valor-neg { color: var(--danger) !important; }

.tabela-categorias { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.tabela-categorias th {
  text-align: left; padding: 7px 10px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--n-500); border-bottom: 1px solid var(--n-200);
}
.tabela-categorias td { padding: 8px 10px; border-bottom: 1px solid var(--n-100); }
.tabela-categorias tr:last-child td { border-bottom: none; }
.tabela-categorias td:nth-child(2), .tabela-categorias td:nth-child(3),
.tabela-categorias th:nth-child(2), .tabela-categorias th:nth-child(3) { text-align: right; }

.sem-fonte {
  margin: 12px 0 0; font-size: .78rem; color: var(--n-500); line-height: 1.5;
  background: var(--n-50); border: 1px dashed var(--n-300);
  padding: 9px 12px; border-radius: var(--r-sm);
}

.detalhe-box { width: 520px; max-width: 92vw; }
.tabela-lancamentos { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.tabela-lancamentos td { padding: 9px 6px; border-bottom: 1px solid var(--n-100); vertical-align: top; }
.tabela-lancamentos small { color: var(--n-700); font-size: .75rem; }
.lanc-data { color: var(--n-500); white-space: nowrap; width: 68px; }
.lanc-valor { text-align: right; white-space: nowrap; }
.tabela-lancamentos tfoot td { border-top: 2px solid var(--n-200); border-bottom: none; }
.confirm-backdrop.hidden { display: none; }

@media (max-width: 1024px) { .safra-numeros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .filtros-campos { flex-direction: column; }
  .filtros-campos select { width: 100%; }
  .safra-numeros { grid-template-columns: repeat(2, 1fr); }
  .tabela-categorias th:nth-child(3), .tabela-categorias td:nth-child(3) { display: none; }
}

/* ---- Gráficos, ranking e comparação (rentabilidade) ---- */
.grafico-painel { max-width: none; }
.grafico { width: 100%; height: auto; max-width: 760px; display: block; }
.g-rotulo { font-size: 11px; fill: var(--n-700); }
.g-valor { font-size: 11px; fill: var(--n-900); font-weight: 600; }
.g-rotulo-eixo { font-size: 10px; fill: var(--n-500); }
.g-valor-eixo { font-size: 10px; fill: var(--n-700); font-weight: 600; }
.g-eixo { stroke: var(--n-300); stroke-width: 1; }
.g-legenda { display: flex; gap: 16px; margin-top: 6px; font-size: .78rem; color: var(--n-500); }
.g-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.g-legenda i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

.ranking-ordem {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--n-500); font-weight: 700;
}
.ranking-btn.activo {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.tabela-ranking, .tabela-comparar {
  width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.tabela-ranking th, .tabela-comparar th {
  text-align: left; padding: 8px 10px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--n-500); border-bottom: 1px solid var(--n-200);
}
.tabela-ranking td, .tabela-comparar td {
  padding: 9px 10px; border-bottom: 1px solid var(--n-100);
}
.tabela-ranking td:not(:nth-child(2)), .tabela-ranking th:not(:nth-child(2)) { text-align: right; }
.tabela-ranking td:first-child, .tabela-ranking th:first-child { text-align: left; }
.rank-pos { color: var(--n-700); font-weight: 700; width: 30px; }
.tabela-ranking small { color: var(--n-500); }

.comparar-ajuda { font-size: .84rem; color: var(--n-500); margin: 0 0 12px; }
.comparar-item {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 14px 8px 0;
  font-size: .85rem; cursor: pointer;
}
.comparar-item small { color: var(--n-500); }
.tabela-comparar { margin-top: 14px; }
.tabela-comparar td { text-align: right; }
.comparar-rotulo {
  text-align: left !important; color: var(--n-700) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: .82rem !important; font-weight: 600; border-bottom: 1px solid var(--n-100);
}
.comparar-melhor { background: var(--ok-soft); font-weight: 650; color: var(--ok); }
.comparar-marca {
  display: block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ok); font-weight: 700;
}

@media (max-width: 720px) {
  .tabela-ranking th:nth-child(3), .tabela-ranking td:nth-child(3),
  .tabela-ranking th:nth-child(5), .tabela-ranking td:nth-child(5) { display: none; }

  /* Mesmo com colunas escondidas, estas tabelas continuam mais largas do que um telemóvel.
     Sem isto, o único antepassado que rolava era o .content — e a página INTEIRA arrastava
     de lado para se ler uma tabela, que é precisamente o scroll horizontal desnecessário
     que há a evitar. Com display:block a própria tabela passa a ser a caixa que rola. */
  .tabela-ranking, .tabela-comparar, .tabela-categorias, .tabela-simulacao, .matrix-table {
    display: block; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Simulador e projecção ---- */
.simular-box { width: 460px; max-width: 92vw; }
.safra-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabela-simulacao { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.tabela-simulacao th {
  text-align: left; padding: 8px 0; font-weight: 500; color: var(--n-500);
  font-size: .82rem; border-bottom: 1px solid var(--n-100);
}
.tabela-simulacao td { text-align: right; padding: 8px 0; border-bottom: 1px solid var(--n-100); }
.tabela-simulacao small { color: var(--n-500); font-size: .72rem; }
#simular-resultado { margin-bottom: 6px; }

#projeccao-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.proj-coluna h3 {
  margin: 0 0 8px; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--n-500); font-weight: 700;
}
.proj-estimado {
  background: var(--n-50); border: 1px dashed var(--n-300);
  border-radius: var(--r-md); padding: 12px 14px; margin: -12px -14px;
}
@media (max-width: 720px) { #projeccao-corpo { grid-template-columns: 1fr; } }

/* ============================ Factura para o cliente ======================
   Página autónoma (sem barra lateral): o documento inteiro é a "folha A4", com
   uma barra de ecrã fina por cima que desaparece por completo na impressão. */
.factura-body { margin: 0; background: var(--n-100); min-height: 100vh; }

.factura-chrome {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: 12px 24px;
  background: var(--n-0); border-bottom: 1px solid var(--n-200); box-shadow: var(--sh-1);
}
.rot-180 { transform: rotate(180deg); }

.factura-pagina {
  position: relative; max-width: 210mm; margin: 28px auto 60px; background: #fff;
  padding: 18mm 16mm; box-shadow: var(--sh-3); border-radius: 2px;
  color: #1a1a1a; font-size: 13px; line-height: 1.5;
}

.factura-selo {
  position: absolute; top: 18mm; right: 16mm; padding: 6px 16px; border-radius: var(--r-sm);
  font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  transform: rotate(6deg);
}
.factura-selo--rascunho { background: var(--warn-soft); color: var(--warn); border: 1.5px dashed var(--warn); }
.factura-selo--cancelada { background: var(--danger-soft); color: var(--danger); border: 1.5px dashed var(--danger); }

.factura-cab {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 2px solid var(--cor-fazenda);
}
.factura-emitente { display: flex; gap: 14px; align-items: flex-start; }
.factura-logo { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.factura-emitente-nome { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.factura-emitente-linha { font-size: .8rem; color: #444; line-height: 1.45; }

.factura-titulo { text-align: right; }
.factura-titulo h1 {
  margin: 0; color: var(--navy); font-size: 1.7rem; letter-spacing: .06em; font-weight: 800;
}
.factura-numero { font-size: .92rem; font-weight: 700; color: #444; margin: 2px 0 10px; }
.factura-meta { margin: 0; font-size: .8rem; }
.factura-meta div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.factura-meta dt { color: #777; }
.factura-meta dd { margin: 0; font-weight: 600; }

.factura-cliente { margin-bottom: 22px; }
.factura-cliente h2 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #888;
  margin: 0 0 6px; font-weight: 700;
}
.factura-cliente-nome { font-size: 1rem; font-weight: 700; color: #1a1a1a; }
/* Rótulo e valor em vez de uma linha corrida separada por pontos: numa factura o NIF do
   cliente tem de se encontrar de relance, e "Cooperativa · Huambo · 5417000111" obriga a
   adivinhar qual dos números é qual. */
.factura-cliente-dados {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 7px 22px; margin: 8px 0 0; font-size: .82rem;
}
.factura-cliente-dados > div { display: flex; flex-direction: column; min-width: 0; }
.factura-cliente-dados dt {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #999;
  font-weight: 700;
}
.factura-cliente-dados dd { margin: 1px 0 0; color: #333; }
.factura-cliente-morada { grid-column: span 2; }
.factura-emitente-actividade { font-style: italic; }
.factura-emitente-rep { margin-top: 3px; }

.factura-itens { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.factura-itens th {
  background: var(--navy); color: #fff; text-align: left; padding: 9px 10px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.factura-itens td { padding: 9px 10px; border-bottom: 1px solid var(--n-200); font-size: .87rem; }
.factura-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Menção de isenção colada à linha a que se aplica: no resumo fiscal ela aparece outra
   vez, mas é aqui que se percebe QUAL dos produtos é que está isento. */
.factura-isencao {
  display: block; font-size: .72rem; color: #777; font-style: italic; margin-top: 2px;
}

/* ------------------------- resumo fiscal e totais ------------------------- */
/* Os dois lado a lado: à esquerda a decomposição por taxa (que a administração fiscal
   quer poder reconstituir), à direita o que o cliente tem de pagar. */
.factura-fecho {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; flex-wrap: wrap; margin-bottom: 14px;
}
.factura-resumo-iva { border-collapse: collapse; font-size: .78rem; min-width: 260px; }
.factura-resumo-iva th {
  text-align: left; padding: 5px 12px 5px 0; border-bottom: 1px solid var(--n-200);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: #888; font-weight: 700;
}
.factura-resumo-iva td { padding: 5px 12px 5px 0; border-bottom: 1px solid #EEE; color: #444; }
.factura-isento-nota { color: #999; font-size: .9em; }

.factura-totais { margin: 0 0 0 auto; min-width: 268px; }
.factura-totais > div {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 5px 0; font-size: .87rem; color: #444;
}
.factura-totais dt { color: #666; }
.factura-totais dd { margin: 0; font-variant-numeric: tabular-nums; }
.factura-total-final {
  border-top: 2px solid var(--navy); margin-top: 5px; padding-top: 10px !important;
}
.factura-total-final dt { font-weight: 800; color: var(--navy) !important; letter-spacing: .03em; }
.factura-total-final dd { font-weight: 800; font-size: 1.15rem; color: var(--navy); }

.factura-extenso {
  margin: 0 0 22px; padding: 9px 12px; background: var(--n-50);
  border-left: 3px solid var(--navy); font-size: .82rem; color: #333;
}
.factura-extenso span {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  color: #888; font-weight: 700; display: block; margin-bottom: 1px;
}

/* ------------------------------- pagamento -------------------------------- */
.factura-pagamento { margin-bottom: 20px; }
.factura-pagamento h2 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #888;
  margin: 0 0 7px; font-weight: 700;
}
.factura-bancos { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.factura-banco { font-size: .82rem; }
.factura-banco-nome { font-weight: 700; color: #1a1a1a; }
/* Um IBAN mal copiado é dinheiro que não chega: em monoespaçado, os grupos de dígitos
   não se confundem. */
.factura-banco-iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em; color: #333;
}
.factura-banco-titular { color: #777; font-size: .76rem; }
.factura-pagamento-prazo { margin: 9px 0 0; font-size: .8rem; color: #555; }

.factura-obs { margin-bottom: 20px; font-size: .85rem; color: #444; }
.factura-obs h2 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #888;
  margin: 0 0 5px; font-weight: 700;
}
.factura-obs p { margin: 0; white-space: pre-wrap; }

.factura-rodape { text-align: center; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--n-200); }
.factura-rodape p { margin: 0 0 4px; font-size: .84rem; color: #555; }
.factura-rodape-legal { font-size: .72rem !important; color: #999 !important; }

@media (max-width: 720px) {
  .factura-chrome { flex-direction: column; align-items: stretch; }
  .factura-pagina { margin: 12px; padding: 20px 16px; }
  .factura-cab { flex-direction: column; }
  .factura-titulo { text-align: left; }
  .factura-meta div { justify-content: flex-start; }
}

@media print {
  .factura-chrome { display: none !important; }
  .factura-body { background: #fff; }
  .factura-pagina {
    box-shadow: none; margin: 0; max-width: none; width: auto; padding: 0; border-radius: 0;
  }
  .factura-selo { position: fixed; }
  /* Uma factura com muitos produtos passa a segunda página. Sem isto, essa página sairia
     com números soltos e sem dizer a que coluna pertencem. */
  .factura-itens thead { display: table-header-group; }
  .factura-itens tr { break-inside: avoid; }
  /* O que fecha o documento não se parte ao meio: os dados do cliente, o total, o valor
     por extenso e o IBAN ou saem inteiros ou passam para a página seguinte. */
  .factura-cliente, .factura-fecho, .factura-extenso, .factura-pagamento {
    break-inside: avoid;
  }
  @page { size: A4; margin: 16mm; }
}

/* =============================================================================
   Folhas de registo de campo — o papel que o técnico preenche no terreno e o
   gestor lança no sistema. Geradas a partir da entities_config (ver folhas.py).
   ========================================================================== */

.folha-body { background: var(--n-100); }
.folha-chrome {
  display: flex; justify-content: space-between; gap: var(--e-3);
  max-width: 1000px; margin: var(--e-4) auto 0; padding: 0 var(--e-3); flex-wrap: wrap;
}
.folha-pagina {
  background: #fff; max-width: 1000px; margin: var(--e-3) auto var(--e-6);
  padding: 22px 26px; border-radius: var(--r-md); box-shadow: var(--sh-2); color: #1a1a1a;
}
.folha-cab {
  display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
  border-bottom: 2px solid var(--cor-fazenda, #14532D); padding-bottom: 12px; margin-bottom: 14px;
}
.folha-emitente { display: flex; gap: 12px; align-items: center; }
.folha-logo { height: 46px; width: auto; object-fit: contain; }
.folha-fazenda { font-size: 1.1rem; font-weight: 800; color: var(--cor-fazenda, #14532D); }
.folha-doc { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #888; }
.folha-titulo { text-align: right; }
.folha-titulo h1 { margin: 0; font-size: 1.35rem; font-weight: 800; color: #1a1a1a; }
.folha-ajuda { margin: 3px 0 0; font-size: .78rem; color: #666; max-width: 40ch; }

/* Campos de identificação: preenchidos uma vez, valem para a folha toda. O <dd> vazio é a
   linha onde se escreve à mão. */
.folha-ident { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 14px; }
.folha-ident > div { flex: 1 1 200px; }
.folha-ident-larga { flex: 2 1 320px !important; }
.folha-ident dt { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: #999; font-weight: 700; }
.folha-ident dd { margin: 2px 0 0; border-bottom: 1px solid #999; min-height: 20px; }

.folha-legendas {
  display: flex; flex-wrap: wrap; gap: 5px 18px; margin: 0 0 12px;
  padding: 8px 11px; background: var(--n-50); border-left: 3px solid var(--cor-fazenda, #14532D);
  border-radius: 3px; font-size: .74rem; color: #444;
}
.folha-legenda-rotulo { font-weight: 700; color: #222; }

.folha-tabela { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.folha-tabela th {
  background: var(--n-50); border: 1px solid #bbb; padding: 6px 7px; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .02em; color: #333; font-weight: 700; text-align: left;
}
/* Células altas e vazias: é onde se escreve. A borda define o campo sem o encher de tinta. */
.folha-tabela td { border: 1px solid #ccc; height: 26px; padding: 2px 6px; }
.folha-num-linha { width: 34px; text-align: center; color: #999; font-size: .72rem; background: var(--n-50); }

.folha-itens { margin-top: 16px; }
.folha-itens h2 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #666;
  margin: 0 0 7px; font-weight: 700;
}

.folha-rodape { margin-top: 20px; display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-end; }
.folha-assinatura { flex: 1 1 220px; font-size: .72rem; color: #666; }
.folha-assinatura span { display: block; border-bottom: 1px solid #999; height: 34px; margin-bottom: 4px; }
.folha-legal { flex: 1 1 100%; margin: 8px 0 0; font-size: .68rem; color: #999; }

@media (max-width: 640px) {
  .folha-cab { flex-direction: column; }
  .folha-titulo { text-align: left; }
}

@media print {
  .folha-chrome { display: none !important; }
  .folha-body { background: #fff; }
  /* Paisagem só para as folhas, através de uma página NOMEADA. Um @page sem nome é global
     ao documento inteiro: o último a aparecer no CSS ganhava para tudo, e o da folha
     (landscape) colidia com o da factura (retrato) — a factura saía de lado e a orientação
     da folha ficava ao acaso, chegando a sair uma página em branco. Com nome, a folha pede
     paisagem sem tocar em mais nada. Estas folhas são tabelas largas; em retrato as colunas
     ficariam estreitas demais para caber a escrita à mão. */
  .folha-pagina {
    page: paisagem; box-shadow: none; margin: 0; max-width: none; border-radius: 0; padding: 0;
  }
  @page paisagem { size: A4 landscape; margin: 11mm; }

  /* O cabeçalho da grelha repete-se em cada página; nenhuma linha se parte ao meio. */
  .folha-tabela thead { display: table-header-group; }
  .folha-tabela tr { break-inside: avoid; }
  .folha-cab, .folha-ident, .folha-legendas { break-inside: avoid; }

  /* Grelha visível no papel. As bordas de ecrã (#ccc) e os fundos claros quase não saem na
     impressão — a folha chegava ao papel a parecer uma página em branco, sem onde escrever.
     No papel: bordas escuras, e print-color-adjust para os fundos das colunas de cabeçalho e
     as linhas de escrita saírem mesmo. */
  .folha-tabela th, .folha-tabela td { border-color: #555 !important; }
  .folha-ident dd { border-bottom-color: #555; }
  .folha-tabela th, .folha-num-linha, .folha-legendas, .folha-ident dd, .folha-assinatura span {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* =============================================================================
   Painel premium — cabeçalho com saudação, gráfico de tendência, desempenho por
   cultura, atividades recentes e ações rápidas.
   ========================================================================== */

.painel-saudacao {
  margin: 2px 0 0; color: var(--n-500); font-size: .92rem;
}
.painel-data { color: var(--n-500); }

/* ------------------------------------------------------- gráfico de tendência */
.grafico-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.grafico-meta { font-size: .92rem; color: var(--n-700); }
.grafico-meta strong { font-size: 1.3rem; color: var(--navy); font-weight: 750; }
.grafico-meta-alvo { color: var(--n-500); margin-left: 4px; }
.producao-tendencia {
  display: block; margin-top: 3px; font-size: .78rem; font-weight: 650;
}
.producao-tendencia--alta { color: var(--ok); }
.producao-tendencia--baixa { color: var(--danger); }

.periodo-grupo { display: inline-flex; background: var(--n-100); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.periodo-btn {
  border: none; background: none; padding: 6px 13px; border-radius: var(--r-pill);
  /* --n-700 e não --n-500: estes botões assentam sobre --n-100, não sobre branco, e aí o
     tom secundário dava 4,34:1 — abaixo do mínimo. O que distingue o período escolhido é a
     pastilha branca com sombra, não o peso do texto. */
  font-size: .78rem; font-weight: 650; color: var(--n-700); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.periodo-btn:hover { color: var(--n-900); }
.periodo-btn.activo { background: var(--n-0); color: var(--navy); box-shadow: var(--sh-1); }

/* --------------------------------------------------------------- atividades recentes */
.timeline { display: flex; flex-direction: column; max-width: none; }
.timeline-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid var(--n-100); text-decoration: none; color: inherit;
  border-radius: var(--r-sm); transition: background .12s ease;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item:hover { background: var(--n-50); }
.timeline-item--sem-link { cursor: default; }
.timeline-item--sem-link:hover { background: none; }
.timeline-icone {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-soft); color: var(--navy);
}
.timeline-icone .icon { width: 17px; height: 17px; }
.timeline-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.timeline-rotulo { font-size: .88rem; color: var(--n-900); font-weight: 600; }
.timeline-detalhe { color: var(--n-500); font-weight: 500; }
.timeline-meta { font-size: .76rem; color: var(--n-500); }

/* ------------------------------------------------------------------- ações rápidas */
.acoes-rapidas { display: flex; flex-wrap: wrap; gap: 10px; }
.acao-rapida {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-md);
  text-decoration: none; color: var(--n-900); font-size: .88rem; font-weight: 650;
  box-shadow: var(--sh-1); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.acao-rapida:hover {
  transform: translateY(-1px); box-shadow: var(--sh-2); border-color: var(--navy); color: var(--navy);
}
.acao-rapida .icon { width: 18px; height: 18px; color: var(--azul); }

/* Rodopio breve no ícone de "Actualizar" — a página recarrega logo de seguida, mas o clique
   ganha uma resposta visual imediata em vez de parecer que não registou nada. */
@keyframes girar { to { transform: rotate(360deg); } }
.girar { animation: girar .6s linear infinite; }

/* Entrada subtil das secções do Painel ao abrir a página — um pouco de movimento na
   primeira vez que os olhos chegam ao ecrã, não em cada interacção depois disso.
   `backwards` aplica o estado inicial (opacidade 0) antes do delay começar, para as
   secções mais tardias não aparecerem em branco por uns instantes antes de animar.
   Desligada por completo para quem pede menos movimento no sistema operativo. */
@media (prefers-reduced-motion: no-preference) {
  .resultado, .alert-panel, .dash-section {
    animation: entrada-painel .35s ease-out backwards;
  }
  .resultado { animation-delay: 0s; }
  .alert-panel { animation-delay: .03s; }
  .dash-section:nth-of-type(1) { animation-delay: .06s; }
  .dash-section:nth-of-type(2) { animation-delay: .09s; }
  .dash-section:nth-of-type(3) { animation-delay: .12s; }
  .dash-section:nth-of-type(4) { animation-delay: .15s; }
  .dash-section:nth-of-type(n+5) { animation-delay: .18s; }
}
@keyframes entrada-painel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .grafico-cab { flex-direction: column; }
  .periodo-grupo { align-self: stretch; justify-content: space-between; }
  .periodo-btn { flex: 1; text-align: center; }
  .acoes-rapidas { flex-direction: column; }
  .acao-rapida { justify-content: center; }
}

@media print {
  .periodo-grupo, .acoes-rapidas { display: none !important; }
}