/* ==========================================================================
   CAT Brasfertil — tema escuro
   Fundo azul-noite, acento verde-limão, verde Brasfertil nas superfícies
   de marca. Tipografia: Sora (títulos) + Manrope (interface).
   ========================================================================== */

:root {
  /* Superfícies */
  --bg: #0A0D14;
  --surface: #141A24;
  --surface-soft: rgba(255, 255, 255, .035);
  --surface-hover: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);

  /* Texto */
  --text: #ECF1EA;
  --text-2: #98A29B;
  --text-3: #6A736D;

  /* Acento e marca */
  --accent: #C8F24F;
  --accent-ink: #10160B;
  --brand-green: #1E5B34;
  --brand-green-dark: #123D22;

  /* Categorias de evento do calendário. Tons dessaturados de propósito: são
     cinco cores lado a lado na mesma linha e não podem competir com o
     verde-limão, que continua sendo o único acento da interface. */
  --evt-feira: #C8F24F;
  --evt-treinamento: #6FA8DC;
  --evt-visita: #7ED3A2;
  --evt-reuniao: #D9A94E;
  --evt-institucional: #B591D8;
  --evt-diadecampo: #4CC3CF;
  --evt-palestra: #EE8A68;
  --evt-confraternizacao: #E48DBF;

  /* Raios */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  /* Brilho sutil no verde-limão para hovers de menu, campos e botões */
  --glow-accent: 0 0 0 1px rgba(200, 242, 79, .22), 0 0 18px rgba(200, 242, 79, .28);
  --glow-alerta: 0 0 0 1px rgba(194, 85, 58, .28), 0 0 16px rgba(194, 85, 58, .28);

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Sem isto, qualquer elemento com o atributo `hidden` E uma classe que
   define `display` (como .botao) fica visível mesmo assim: a declaração da
   classe, vinda da folha de estilo do autor, sempre vence a regra nativa
   [hidden]{display:none} da folha de estilo do navegador. */
[hidden] {
  display: none !important;
}

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Pontos de glow azulado no fundo, dando volume à página sólida — um deles
   fica atrás do menu lateral. z-index negativo para nunca cobrir conteúdo,
   mesmo com o menu ganhando um leve efeito de vidro (glassmorphism) sobre
   ele. Muito suave de propósito: sugestão de profundidade, não decoração. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px circle at 6% 20%, rgba(64, 112, 196, .16), transparent 62%),
    radial-gradient(620px circle at 96% 82%, rgba(56, 98, 176, .12), transparent 66%);
}

@media (prefers-reduced-transparency: reduce) {
  body::before {
    display: none;
  }
}

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

a:hover {
  color: #DCFA96;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.display {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Marca -------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.logo:hover {
  color: var(--text);
}

.logo__img {
  display: block;
  height: 26px;
  width: auto;
}

/* ==========================================================================
   Login
   ========================================================================== */

.login-shell {
  display: flex;
  min-height: 100vh;
}

.login-brand {
  position: relative;
  flex: 1.15;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 48px 64px;
  overflow: hidden;
  background: linear-gradient(150deg, #1E5B34 0%, #123D22 52%, #0C2617 100%);
}

/* Brilho e trama do painel de marca */
.login-brand::before,
.login-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-brand::before {
  opacity: .5;
  background-image: radial-gradient(circle at 78% 18%, rgba(200, 242, 79, .22) 0%, rgba(200, 242, 79, 0) 46%);
}

.login-brand::after {
  opacity: .16;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 22px 22px;
}

.login-brand > * {
  position: relative;
  z-index: 1;
}

.login-brand__leaf {
  position: absolute;
  right: -140px;
  bottom: -150px;
  opacity: .12;
  z-index: 0;
}

.login-brand__title {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

.login-brand__title em {
  font-style: normal;
  color: var(--accent);
}

.login-brand__text {
  margin: 28px 0 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(236, 241, 234, .72);
}

.login-brand__footer {
  font-size: 13px;
  color: rgba(236, 241, 234, .55);
}

.login-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.login-card {
  width: 100%;
  max-width: 424px;
}

.login-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.login-card__text {
  margin: 12px 0 40px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

.ms-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 58px;
  border-radius: 999px;
  background: #F4F6F2;
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease;
}

.ms-button:hover {
  color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.login-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  color: var(--text-2);
}

.login-note strong {
  font-weight: 600;
  color: var(--text);
}

.login-help {
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--text-3);
}

/* ==========================================================================
   Aplicação (páginas internas)
   ========================================================================== */

/* A topbar fica presa no alto ao rolar, em todas as páginas (Eduardo,
   05/10/2026): a logo é o caminho de volta para a home. O fundo é o da página,
   um pouco transparente e desfocado, para o conteúdo passar por baixo sem
   brigar com o menu. */
:root {
  --altura-topbar: 88px;
}

html {
  /* Link com âncora (#resposta, #arte) não para escondido atrás da topbar. */
  scroll-padding-top: calc(var(--altura-topbar) + 12px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  background: rgba(10, 13, 20, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: #F4F6F2;
}

/* Em tela estreita o menu não cabe inteiro, e como item de flex ele empurrava a
   topbar para fora em vez de ceder — o avatar saía da tela e a página inteira
   ganhava rolagem lateral. `min-width: 0` deixa ele encolher e a rolagem fica
   dentro do próprio menu, que a pessoa arrasta com o dedo. A barra de rolagem
   fica escondida: numa pílula de 40px de altura ela come metade do espaço. */
@media (max-width: 900px) {
  .nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }
}

.nav__link {
  /* 17px e não 22: com a entrada do Solo+Fértil o menu passou a cinco seções, e
     no respiro antigo elas empurravam o avatar para fora da tela em janela
     estreita. `nowrap` porque um rótulo de duas palavras quebrava em duas
     linhas e deixava a pílula do item ativo mais alta que as outras. */
  padding: 10px 17px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #4A524C;
  transition: color .16s ease, background .16s ease;
}

.nav__link:hover {
  color: var(--accent-ink);
  background: rgba(16, 22, 11, .06);
  box-shadow: 0 0 14px rgba(200, 242, 79, .35);
}

.nav__link[aria-current="page"] {
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Atalho de e-mail na topbar: só o ícone, com um tooltip customizado (CSS
   puro) explicando o link no hover/foco. */
.topbar__email {
  position: relative;
  display: flex;
  color: var(--text-2);
}

.topbar__email-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.topbar__email:hover .topbar__email-icone,
.topbar__email:focus-visible .topbar__email-icone {
  background: rgba(200, 242, 79, .12);
  color: var(--accent);
  box-shadow: var(--glow-accent);
}

.topbar__email::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
  z-index: 30;
}

.topbar__email:hover::after,
.topbar__email:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(200, 242, 79, .25);
  border-radius: 50%;
  background: var(--brand-green);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #EAF7C9;
  flex-shrink: 0;
}

.avatar--foto {
  object-fit: cover;
}

/* Menu de perfil (avatar clicável) ------------------------------------ */

.perfil-menu {
  position: relative;
}

.perfil-menu__botao {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.perfil-menu__botao:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.perfil-menu__botao[aria-expanded="true"] .avatar {
  box-shadow: var(--glow-accent);
}

.perfil-menu__lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
  z-index: 30;
}

.perfil-menu__item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}

.perfil-menu__item:hover,
.perfil-menu__item:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

.perfil-menu__item--sair {
  color: #C1503A;
}

.perfil-menu__item--sair:hover,
.perfil-menu__item--sair:focus-visible {
  color: #C1503A;
  background: rgba(193, 80, 58, .12);
}

.page {
  padding: 24px 32px 64px;
}

.page-header {
  padding: 20px 0 40px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.page-header__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 600;
  letter-spacing: -.03em;
}

/* Home: sem eyebrow nem texto de apoio acima/abaixo, a saudação sobe para
   perto do topo da coluna central. */
.page-header--home {
  padding: 4px 0 0;
}

.page-header--home .page-header__title {
  margin-top: 0;
}

.page-header__nome {
  background: linear-gradient(45deg, var(--accent) 0%, #FFD93D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-header__text {
  margin: 12px 0 0;
  max-width: 60ch;
  font-size: 16px;
  color: var(--text-2);
}

/* Título + botão de ação (ex.: "+ Nova pessoa"), lado a lado. */
.page-header--acao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Formulário embutido (Jotform) ---------------------------------------- */

.page-header--formulario {
  padding-bottom: 24px;
}

.pagina-formulario__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.pagina-formulario__voltar,
.pagina-formulario__externo {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.pagina-formulario__voltar:hover,
.pagina-formulario__externo:hover {
  color: var(--text);
}

.pagina-formulario__externo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Sem overflow:hidden aqui de propósito: o Jotform reajusta a altura do
   iframe por script assim que uma pergunta condicional revela um campo novo,
   e esse reajuste tem uma pequena folga. Cortar o que ultrapassasse a altura
   anterior esconderia até o botão de enviar; o arredondamento fica só no
   próprio iframe, que sempre acompanha sua altura real. */
.pagina-formulario__card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.pagina-formulario__card iframe {
  display: block;
  width: 100%;
  min-height: 80vh;
  border: 0;
  border-radius: var(--r-lg);
}

/* Seções de links ---------------------------------------------------- */

.section__title {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Busca de pessoa (home) ---------------------------------------------- */

.busca-pessoa {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.busca-pessoa__cabecalho {
  display: flex;
  align-items: center;
  gap: 14px;
}

.busca-pessoa__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  flex-shrink: 0;
}

.busca-pessoa__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* Ancora o dropdown de resultados sem deslocar o resto da seção. */
.busca-pessoa__campo {
  position: relative;
}

.busca-pessoa__resultados {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
}

.busca-pessoa__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-family: var(--font-ui);
  cursor: pointer;
}

.busca-pessoa__item:hover,
.busca-pessoa__item:focus-visible {
  background: var(--surface-hover);
}

.busca-pessoa__nome {
  font-size: 14px;
  font-weight: 600;
}

.busca-pessoa__item small {
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-3);
}

.busca-pessoa__vazio {
  margin: 0;
  padding: 10px;
  font-size: 13px;
  color: var(--text-3);
}

.busca-pessoa__link {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
}

/* Ficha de uma pessoa, dentro do modal aberto pela busca. */

.cartao-pessoa__razao {
  margin: -6px 0 12px;
  font-size: 13px;
  color: var(--text-3);
}

.cartao-pessoa .tag {
  margin-bottom: 12px;
}

.cartao-pessoa__campo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  font-size: 14px;
}

.cartao-pessoa__campo + .cartao-pessoa__campo {
  border-top: 1px solid var(--line);
}

.cartao-pessoa__campo span {
  flex-shrink: 0;
  color: var(--text-3);
}

.cartao-pessoa__campo strong {
  font-weight: 500;
  text-align: right;
}

/* Menu lateral (home) -------------------------------------------------- */

.nav-lateral {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  background: rgba(20, 26, 36, .74);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 24px rgba(0, 0, 0, .22);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-lateral {
    background: var(--surface);
  }
}

.nav-lateral__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: background .16s ease;
}

.nav-lateral__link:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.nav-lateral__link:hover .nav-lateral__icone {
  box-shadow: var(--glow-accent);
}

.nav-lateral__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  flex-shrink: 0;
}

.nav-lateral__rotulo {
  flex-grow: 1;
  font-family: var(--font-ui);
  letter-spacing: -.01em;
}

.nav-lateral__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  flex-shrink: 0;
}

/* Link interno (ex.: formulário embutido): o ícone de chevron do <details>
   reaparece aqui deitado, virando uma seta ">" comum de navegação. */
.nav-lateral__chevron-link {
  transform: rotate(-90deg);
}

/* Link de teor negativo (reportar não conformidade): troca o limão por um
   vermelho queimado, igual ao card de destaque que ele tinha antes. */
.nav-lateral__link--alerta .nav-lateral__icone {
  background: rgba(194, 85, 58, .14);
  color: #C2553A;
}

.nav-lateral__link--alerta .nav-lateral__seta {
  color: #C2553A;
}

.nav-lateral__link--alerta:hover {
  background: rgba(194, 85, 58, .1);
}

.nav-lateral__link--alerta:hover .nav-lateral__icone {
  box-shadow: var(--glow-alerta);
}

.nav-lateral__grupo {
  margin-top: 6px;
}

.nav-lateral__grupo:first-child {
  margin-top: 0;
}

.nav-lateral__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
  transition: background .16s ease;
}

.nav-lateral__resumo::-webkit-details-marker {
  display: none;
}

.nav-lateral__resumo:hover {
  background: var(--surface-hover);
  box-shadow: var(--glow-accent);
}

.nav-lateral__chevron {
  flex-shrink: 0;
  transition: transform .16s ease;
}

.nav-lateral__grupo[open] > .nav-lateral__resumo .nav-lateral__chevron {
  transform: rotate(180deg);
}

.nav-lateral__lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

/* Home: menu + conteúdo + aniversariantes ----------------------------- */

.home-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 324px;
  grid-template-areas: "nav content aside";
  gap: 32px;
  align-items: start;
}

.nav-lateral {
  grid-area: nav;
  align-self: stretch;
  position: sticky;
  top: calc(var(--altura-topbar) + 16px);
}

.home-content {
  grid-area: content;
}

.sidebar {
  grid-area: aside;
  position: sticky;
  top: calc(var(--altura-topbar) + 16px);
}

/* Rodapé "Recursos": busca de pessoa + a marca da Brasfertil, isolada por uma
   linha divisória. Fica fora do grid de três colunas, ocupando a largura
   toda. */
.recursos-footer {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.recursos-footer__coluna {
  flex: 1;
  min-width: 0;
}

.recursos-footer__separador {
  width: 1px;
  flex-shrink: 0;
  background: var(--line);
}

.recursos-footer__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  flex-shrink: 0;
}

.recursos-footer__marca-img {
  display: block;
  width: 150px;
  height: auto;
}

/* A agenda tem a largura da busca; o que sobra fica para os materiais. */
.recursos-footer__coluna--agenda {
  flex: 0 1 400px;
}

/* Arquivos recentes da pasta de materiais (SharePoint) ------------------ */

.materiais {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

/* Cinco colunas; quando não cabem (telas menores, celular), rolam de lado. */
.materiais__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.materiais__lista > li {
  scroll-snap-align: start;
  min-width: 0;
}

.materiais__arquivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 12px 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: background .15s ease;
}

.materiais__arquivo:hover,
.materiais__arquivo:focus-visible {
  background: var(--surface-hover);
}

.materiais__icone {
  flex-shrink: 0;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.materiais__nome {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.materiais__pasta {
  max-width: 100%;
  overflow: hidden;
  font-size: 10.5px;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.materiais__quando {
  margin-top: auto;
  padding-top: 4px;
  font-size: 11px;
  color: var(--text-2);
}

.materiais__estado--novo {
  font-weight: 600;
  color: var(--accent);
}

.panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.panel__title svg {
  flex-shrink: 0;
}

.panel__subtitle {
  margin: 22px 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.panel__empty {
  margin: 0;
  font-size: 14px;
  color: var(--text-3);
}

/* Aniversariantes do dia: o único bloco da página em cor sólida de acento,
   para que seja a primeira coisa que o olho encontra na lateral. */
.today {
  padding: 18px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
}

.today__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.today__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}

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

.today__list li {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.today__list small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  opacity: .66;
}

/* Folhinha de calendário: substitui o texto dd/mm nas listas e o ícone do
   destaque de hoje. Os dois pinos do topo são pseudo-elementos para não
   sujar a árvore com nós vazios. */
.calendario {
  position: relative;
  width: 34px;
  flex-shrink: 0;
}

/* Easter egg: o calendário do card de "hoje" dispara o confete de novo no
   clique. Sem nenhum outro indício visual — só o cursor — de propósito. */
.calendario[data-confete-gatilho] {
  cursor: pointer;
}

.calendario::before,
.calendario::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 5px;
  height: 7px;
  border-radius: 2px;
  background: var(--text-3);
}

.calendario::before {
  left: 6px;
}

.calendario::after {
  right: 6px;
}

.calendario__corpo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.calendario__mes {
  padding: 3px 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}

.calendario__dia {
  padding: 3px 0 4px;
  background: var(--surface);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* No card verde do destaque de hoje a faixa e o número em limão ficariam
   invisíveis sobre o próprio fundo — a folhinha vira tons escuros, como o
   selo que já existia ali. */
.calendario--hoje::before,
.calendario--hoje::after {
  background: rgba(16, 22, 11, .35);
}

.calendario--hoje .calendario__corpo {
  border-color: rgba(16, 22, 11, .18);
}

.calendario--hoje .calendario__mes {
  background: rgba(16, 22, 11, .16);
  color: var(--accent-ink);
}

.calendario--hoje .calendario__dia {
  background: transparent;
  color: var(--accent-ink);
}

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

.birthday {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.birthday:first-child {
  border-top: 0;
}

.birthday__who {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.birthday__local {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-3);
}

/* Atalho para os próximos dias, só no celular ------------------------- */

.panel__destaque {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.panel__destaque > .today {
  flex: 1;
  min-width: 0;
}

/* Acima do breakpoint a lista aparece inteira logo abaixo, e o botão não
   teria função. */
.proximos-botao {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.proximos-botao:hover {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: var(--glow-accent);
}

/* Confetes do aniversariante do dia: saltam do nome, estouram pela tela quase
   toda e caem até sumir no rodapé da janela. Cores propositalmente foscas
   para não destoar do resto do layout. Camada fixa na janela (não presa ao
   card) para o estouro não ficar contido no painel. */
.confete-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}

@media (prefers-reduced-motion: reduce) {
  .confete-canvas {
    display: none;
  }
}

/* Calendário da semana: os sete dias em uma linha só, do domingo ao sábado,
   sempre a semana vigente. Cada quadrado guarda os pills dos seus eventos, e o
   pill abre o modal de detalhes. A mesma grade de dias serve à tela do mês, que
   só troca o container (.mes__grade) e quebra em várias linhas. ------------- */

.semana__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* O título já tem a margem de baixo do painel; aqui quem espaça é o topo. */
.semana__topo .panel__title {
  margin-bottom: 16px;
}

.semana__acao {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.semana__acao:hover {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: var(--glow-accent);
}

.semana__acao svg {
  flex-shrink: 0;
}

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

.semana__dia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 136px;
  padding: 9px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

.semana__dia--hoje {
  border-color: rgba(200, 242, 79, .32);
  background: rgba(200, 242, 79, .05);
}

.semana__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.semana__sigla {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-3);
}

.semana__numero {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-2);
}

.semana__dia--hoje .semana__sigla,
.semana__dia--hoje .semana__numero {
  color: var(--accent);
}

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

/* Entra no lugar dos sete quadrados quando a semana não tem nada. */
.semana__vazio {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}

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

.semana__vazio a:hover {
  text-decoration: underline;
}

.evento-pill {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 7px;
  border: 0;
  border-left: 3px solid var(--evento-cor, var(--text-3));
  border-radius: 4px 9px 9px 4px;
  background: var(--surface-hover);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.evento-pill:hover {
  background: rgba(255, 255, 255, .1);
}

/* Num notebook de 1366px a coluna de um dia fica com ~55px úteis: sem limite,
   "Treinamento de vendas" viraria uma tira vertical de duas letras por linha.
   Hifeniza em pt-BR, corta em duas linhas e deixa o resto para o modal — que é
   onde o evento é lido de verdade. */
.evento-pill__titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  hyphens: auto;
  overflow-wrap: break-word;
}

.evento-pill__cidade {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Tela do mês: mesma grade de dias, em várias linhas ---------------------- */

.mes__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* "setembro de 2026" — só a inicial sobe, senão viraria "Setembro De 2026". */
.mes__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.mes__titulo::first-letter {
  text-transform: uppercase;
}

.mes__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  text-decoration: none;
  flex-shrink: 0;
}

.mes__seta:hover {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: var(--glow-accent);
}

/* Ponta da janela de seis meses: fica no lugar, apagada. */
.mes__seta--off {
  opacity: .3;
}

.mes__seta--off:hover {
  background: var(--surface);
  color: var(--text-2);
  box-shadow: none;
}

.mes__hoje {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.mes__hoje:hover {
  text-decoration: underline;
}

.mes__dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-3);
}

.mes__dias span {
  padding-left: 7px;
}

.mes__grade {
  grid-auto-rows: minmax(104px, auto);
}

/* A sigla do dia mora no cabeçalho da grade; dentro do quadrado ela só
   reaparece no celular, onde a grade vira lista. */
.mes__grade .semana__sigla {
  display: none;
}

.mes__grade .semana__cabecalho {
  justify-content: flex-end;
}

/* Sobra do mês vizinho nas pontas: continua legível, mas recua. */
.semana__dia--fora {
  background: transparent;
  border-style: dashed;
  opacity: .55;
}

.evento-pill--feira { --evento-cor: var(--evt-feira); }
.evento-pill--treinamento { --evento-cor: var(--evt-treinamento); }
.evento-pill--visita { --evento-cor: var(--evt-visita); }
.evento-pill--reuniao { --evento-cor: var(--evt-reuniao); }
.evento-pill--institucional { --evento-cor: var(--evt-institucional); }
.evento-pill--diadecampo { --evento-cor: var(--evt-diadecampo); }
.evento-pill--palestra { --evento-cor: var(--evt-palestra); }
.evento-pill--confraternizacao { --evento-cor: var(--evt-confraternizacao); }

.modal {
  width: min(400px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
}

.modal::backdrop {
  background: rgba(5, 7, 12, .72);
}

.modal__conteudo {
  padding: 22px;
}

.modal__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.modal__titulo {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.modal__fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
}

.modal__fechar:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Detalhes do evento (abre a partir do pill da semana) -------------------- */

.modal--evento {
  width: min(460px, calc(100vw - 32px));
}

/* A imagem inteira, encaixada no espaço (Eduardo, 05/10/2026): com `cover` numa
   altura fixa, imagem larga (um logo) era cortada nas pontas. Agora cabe em até
   220px de altura pela medida maior, com o fundo do cartão nas sobras. */
.evento-detalhe__imagem {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  margin-bottom: 16px;
  border-radius: var(--r-sm);
  object-fit: contain;
  background: var(--surface-soft);
}

.evento-detalhe__titulo {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.evento-detalhe__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evento-detalhe__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}

.evento-detalhe__meta svg {
  flex-shrink: 0;
  color: var(--text-3);
}

/* A data vem do Intl toda em minúsculas ("terça-feira, 15 de setembro"). Só a
   primeira letra sobe — `capitalize` transformaria em "Terça-Feira, 17 De
   Setembro". */
.evento-detalhe__meta li:first-child::first-letter {
  text-transform: uppercase;
}

.evento-detalhe__texto {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Foto de perfil: card de estado atual (fora do modal) + editor de recorte
   (dentro do modal, aberto ao escolher um arquivo). ------------------------ */

.foto-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.foto-editor__atual {
  flex-shrink: 0;
}

.foto-editor__atual .avatar,
.foto-editor__atual img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 20px;
}

.foto-editor__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.foto-editor small.campo__ajuda {
  flex-basis: 100%;
}

.modal--foto {
  width: min(420px, calc(100vw - 32px));
}

.foto-editor__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #05070C;
  cursor: grab;
  touch-action: none;
}

.foto-editor__viewport:active {
  cursor: grabbing;
}

.foto-editor__viewport img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.foto-editor__zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-2);
}

.foto-editor__zoom input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

/* ==========================================================================
   Administração
   ========================================================================== */

.page--estreita {
  max-width: 760px;
  margin: 0 auto;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

/* Os contadores que abrem o modal "Pedidos em andamento" (só admin). São
   <button>, então desfazem o visual de botão do navegador. */
.stat--link {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.stat--link:hover,
.stat--link:focus-visible {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.modal--andamento {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}

.modal--andamento::backdrop {
  background: rgba(5, 7, 12, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal--andamento .panel__subtitle {
  margin: 0 0 14px;
}

/* No modal, cada pedido em duas linhas fixas: nome e etiqueta em cima, o resto
   embaixo. Na linha única da lista padrão, a etiqueta quebrava e encavalava. */
.modal--andamento .evento-lista__link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
}

.modal--andamento .evento-lista__data {
  grid-row: span 2;
}

/* `order: 0` desfaz o do celular na lista padrão, que põe o nome antes da data. */
.modal--andamento .evento-lista__nome {
  order: 0;
}

.modal--andamento .evento-lista__nome .tag {
  white-space: nowrap;
}

.modal--andamento .evento-lista__cidade {
  text-align: left;
}

@media (max-width: 560px) {
  .modal--andamento .evento-lista__link {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal--andamento .evento-lista__data {
    grid-row: auto;
  }
}

.stat .stat__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: var(--accent);
  flex-shrink: 0;
}

.stat__icone svg {
  width: 20px;
  height: 20px;
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.stat span {
  font-size: 13px;
  color: var(--text-3);
}

/* Formulários e controles -------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.filtros .campo[type="search"] {
  flex: 1 1 280px;
}

.campo {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
}

.campo:disabled {
  color: var(--text-3);
  cursor: not-allowed;
}

/* Campo de pílulas (Departamento, Líder(es)) ---------------------------- */

.chips {
  position: relative;
}

.chips__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
}

.chips__gatilho:hover,
.chips__gatilho[aria-expanded="true"] {
  color: var(--text);
  border-color: rgba(200, 242, 79, .3);
}

.chips__dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
}

.chips__opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}

.chips__opcao:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.chips__opcao input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.chips__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border: 1px solid rgba(200, 242, 79, .3);
  border-radius: 999px;
  background: rgba(200, 242, 79, .1);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.chip__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: rgba(200, 242, 79, .22);
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.chip__x:hover {
  background: rgba(200, 242, 79, .35);
}

.campo::placeholder {
  color: var(--text-3);
}

.campo:hover:not(:disabled),
.campo:focus {
  border-color: rgba(200, 242, 79, .35);
  box-shadow: var(--glow-accent);
}

select.campo {
  width: auto;
  min-width: 190px;
  cursor: pointer;
}

.filtros__opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 45px;
  padding: 0 6px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}

.filtros__opcao input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.campo__rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.campo__ajuda {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}

.botao {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}

.botao:hover {
  color: var(--accent-ink);
  background: #DCFA96;
  transform: translateY(-1px);
  box-shadow: var(--glow-accent);
}

.botao--vazado {
  background: transparent;
  border-color: var(--line);
  color: var(--text-2);
}

.botao--vazado:hover {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: var(--glow-accent);
}

/* "Limpar" filtros: glow vermelho-queimado em vez do verde padrão — é uma
   ação destrutiva (descarta o que foi digitado/selecionado), não neutra. */
.botao--limpar:hover {
  border-color: rgba(194, 85, 58, .4);
  box-shadow: var(--glow-alerta);
}

.formulario {
  display: grid;
  gap: 20px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.campo-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.campo-grupo {
  display: block;
}

.campo-grupo--switch .switch {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 43px;
  font-size: 14px;
  color: var(--text-2);
}

.switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.formulario__acoes {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}

.aviso {
  margin: 0;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.aviso--ok {
  margin-bottom: 20px;
  border-color: rgba(200, 242, 79, .3);
  background: rgba(200, 242, 79, .08);
  color: var(--accent);
}

/* Tabela -------------------------------------------------------------- */

.tabela-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}

.tabela th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-3);
}

.tabela td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: top;
}

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

.tabela tbody tr:hover td {
  background: var(--surface-soft);
}

.tabela__nome {
  font-weight: 600;
  color: var(--text);
}

.tabela__nome:hover {
  color: var(--accent);
}

.tabela td small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
  white-space: normal;
}

.tabela__vazio {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-3);
}

.tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}

.tag--on {
  border-color: rgba(200, 242, 79, .3);
  background: rgba(200, 242, 79, .09);
  color: var(--accent);
}

.tag--off {
  border-color: rgba(226, 122, 122, .32);
  background: rgba(226, 122, 122, .1);
  color: #E9A0A0;
}

/* Led de acesso: só quem é admin ou coordenador recebe o dado na resposta do
   servidor, então não há nada para vazar por CSS aqui. */
.led {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}

.led--on {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 242, 79, .16);
}

.led--off {
  background: #C1503A;
  box-shadow: 0 0 0 3px rgba(193, 80, 58, .16);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 900px) {
  .login-shell {
    flex-direction: column;
  }

  .login-brand {
    flex: none;
    gap: 20px;
    padding: 28px 24px 32px;
  }

  .login-brand__title {
    max-width: none;
    font-size: 30px;
  }

  .login-brand__leaf {
    right: -200px;
    bottom: -240px;
  }

  .login-brand__text,
  .login-brand__footer {
    display: none;
  }

  .login-panel {
    align-items: flex-start;
    padding: 40px 24px 56px;
  }
}

@media (max-width: 1040px) {
  /* Empilha em uma coluna com o menu no topo (como a navegação de antes),
     depois a saudação, depois os aniversariantes. */
  .home-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "content"
      "aside";
  }

  .nav-lateral,
  .sidebar {
    position: static;
  }

  /* O menu vira uma fileira horizontal e compacta — como a navegação de
     antes — em vez de uma coluna alta de grupos empilhados. Fechados por
     padrão (renderGrupoNav), um grupo aberto quebra linha e ocupa a largura
     toda para caber a lista. */
  .nav-lateral {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
  }

  .nav-lateral__grupo,
  .nav-lateral__grupo:first-child {
    margin-top: 0;
  }

  .nav-lateral__resumo {
    padding: 8px 10px;
  }

  .nav-lateral__grupo[open] {
    flex-basis: 100%;
  }

  /* Só o aniversariante do dia fica na tela; os próximos 10 dias passam a
     caber no modal, para não empurrar o rodapé para baixo. */
  .panel {
    padding: 16px;
  }

  .today {
    padding: 14px;
  }

  .panel__proximos {
    display: none;
  }

  .proximos-botao {
    display: flex;
  }

  /* A marca empilha abaixo da busca de pessoa, com a linha divisória virando
     horizontal em vez de vertical. */
  .recursos-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .recursos-footer__coluna--agenda {
    flex: none;
  }

  .recursos-footer__separador {
    width: 100%;
    height: 1px;
  }

  .recursos-footer__marca {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  /* No celular a topbar tem duas linhas (logo e ícones; o menu embaixo):
     com menos respiro, para presa no alto não comer a tela. */
  :root {
    --altura-topbar: 122px;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 16px;
  }

  /* Logo e ícones na mesma linha: a logo cheia (180px) não cabia ao lado. */
  .logo__img {
    height: 22px;
  }

  .topbar__user {
    gap: 12px;
  }

  .nav {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .nav__link {
    padding: 10px 16px;
    font-size: 13px;
  }

  .page {
    padding-left: 20px;
    padding-right: 20px;
  }

  .campo-linha {
    grid-template-columns: 1fr;
  }

  select.campo {
    width: 100%;
  }

  /* Sete colunas não cabem no celular. A semana (e o mês, que usa a mesma
     grade) vira uma lista com apenas os dias que têm evento — a data fica à
     esquerda, os pills à direita. */
  .semana__grade {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .semana__dia {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
  }

  .semana__dia--vazio,
  /* Virando lista, a sobra do mês vizinho só confundiria. */
  .semana__dia--fora {
    display: none;
  }

  .semana__cabecalho {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 34px;
    flex-shrink: 0;
    padding-top: 4px;
  }

  .semana__numero {
    font-size: 18px;
  }

  .semana__eventos {
    flex: 1;
    min-width: 0;
  }

  /* Vira lista: o cabeçalho de colunas não tem mais a que se referir, e a
     sigla do dia volta para dentro de cada linha. */
  .mes__dias {
    display: none;
  }

  .mes__grade .semana__sigla {
    display: block;
  }

  .mes__grade .semana__cabecalho {
    justify-content: flex-start;
  }

  .semana__acao span {
    display: none;
  }

  .semana__acao {
    padding: 8px;
  }

  /* Sem espaço para tudo na mesma linha: o atalho do mês atual desce, e o nome
     do mês fica inteiro entre as setas. */
  .mes__topo {
    flex-wrap: wrap;
  }

  .mes__hoje {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* ==========================================================================
   Mural de recados
   ========================================================================== */

/* Sino da topbar ------------------------------------------------------- */

.sino {
  position: relative;
}

.sino__botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.sino__botao:hover,
.sino__botao[aria-expanded="true"] {
  background: rgba(200, 242, 79, .12);
  color: var(--accent);
  box-shadow: var(--glow-accent);
}

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

.sino__contador {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.sino__lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
  z-index: 30;
}

.sino__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
}

.sino__item:hover {
  background: var(--surface-hover);
}

.sino__titulo {
  font-weight: 600;
  line-height: 1.35;
}

.sino__data,
.sino__vazio,
.sino__carregando {
  font-size: 12px;
  color: var(--text-3);
}

.sino__vazio,
.sino__carregando {
  margin: 0;
  padding: 12px;
}

.sino__todos {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

/* Card da home --------------------------------------------------------- */

.sidebar {
  display: grid;
  gap: 18px;
  align-content: start;
}

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

.mural-resumo__item + .mural-resumo__item {
  border-top: 1px solid var(--line);
}

.mural-resumo__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 0;
  color: var(--text);
}

.mural-resumo__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.mural-resumo__texto {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
}

.mural-resumo__link:hover .mural-resumo__titulo {
  color: var(--accent);
}

.mural-selo {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.mural-resumo__todos {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

/* Listagem ------------------------------------------------------------- */

.mural-busca {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.mural-busca__campo {
  position: relative;
  flex: 1 1 auto;
}

.mural-busca__icone {
  position: absolute;
  top: 50%;
  left: 14px;
  display: flex;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.mural-busca .campo {
  padding-left: 42px;
}

/* Abas à esquerda, "por página" à direita, na mesma linha. O slider fica com
   margin-left auto para encostar na direita mesmo quando não há abas — para
   quem não é admin elas nem são renderizadas. */
.mural-controles {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.mural-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mural-abas__item {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.mural-abas__item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.mural-abas__item--ativa {
  border-color: rgba(200, 242, 79, .3);
  background: rgba(200, 242, 79, .09);
  color: var(--accent);
}

.mural-lista {
  display: grid;
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.mural-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  transition: border-color .16s ease, background .16s ease;
}

.mural-item:hover {
  border-color: rgba(200, 242, 79, .28);
  background: var(--surface-hover);
}

.mural-item__link {
  display: block;
  padding: 20px 22px;
  color: var(--text);
}

.mural-item__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mural-item__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.mural-item__fixado {
  display: flex;
  color: var(--accent);
}

.mural-item__texto {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.mural-item__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--text-3);
}

.mural-item__marca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Itens por página: range de quatro paradas ---------------------------- */

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

.mural-porpagina__rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.mural-porpagina__controle {
  flex: 0 0 auto;
  width: 168px;
}

.mural-porpagina__range {
  width: 100%;
  height: 22px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.mural-porpagina__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.mural-porpagina__range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.mural-porpagina__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-accent);
}

.mural-porpagina__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-accent);
}

.mural-porpagina__range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 999px;
}

.mural-porpagina__marcas {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
}

.mural-porpagina__marca--ativa {
  color: var(--accent);
  font-weight: 700;
}

.mural-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mural-paginacao__posicao {
  font-size: 13px;
  color: var(--text-3);
}

.mural-paginacao__inativo {
  opacity: .35;
  pointer-events: none;
}

/* Leitura do recado ---------------------------------------------------- */

.mural-voltar {
  display: inline-block;
  margin-bottom: 18px;
}

.mural-recado__cabecalho {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.mural-recado__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

.mural-recado__meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
}

.mural-recado__editar {
  color: var(--accent);
  font-weight: 600;
}

.mural-recado__corpo {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}

.mural-recado__corpo h2,
.mural-recado__corpo h3 {
  margin: 28px 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}

.mural-recado__corpo h2 {
  font-size: 20px;
}

.mural-recado__corpo h3 {
  font-size: 17px;
}

.mural-recado__corpo p {
  margin: 0 0 16px;
}

.mural-recado__corpo ul,
.mural-recado__corpo ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.mural-recado__corpo li {
  margin-bottom: 6px;
}

.mural-recado__corpo a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Marca-texto: sem o respiro o fundo encosta nas letras, e sem o clone a
   faixa some nas linhas seguintes quando o trecho quebra. */
.mural-recado__corpo span[style*="background"],
.mural-editor__area span[style*="background"] {
  padding: 1px 4px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mural-recado__corpo blockquote {
  margin: 0 0 16px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid rgba(200, 242, 79, .4);
  color: var(--text);
  font-style: italic;
}

/* Anexos --------------------------------------------------------------- */

.mural-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 24px 0;
}

.mural-galeria__item {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 3;
}

.mural-galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

.mural-galeria__item:hover img {
  transform: scale(1.04);
}

.mural-anexos {
  display: grid;
  gap: 8px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.mural-anexos__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  font-size: 14px;
}

.mural-anexos__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--text);
}

.mural-anexos__item:hover {
  border-color: rgba(200, 242, 79, .28);
}

.mural-anexos__icone {
  display: flex;
  flex-shrink: 0;
  color: var(--text-3);
}

.mural-anexos__nome {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mural-anexos__tamanho {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-3);
}

.mural-anexos__remover {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.mural-anexos__remover:hover {
  border-color: rgba(226, 122, 122, .4);
  color: #E27A7A;
}

.mural-anexos__item--enviando {
  color: var(--text-3);
  font-size: 13px;
}

/* Enquete -------------------------------------------------------------- */

.mural-enquete {
  margin: 28px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.mural-enquete__pergunta {
  display: flex;
  /* Pergunta longa quebra em duas linhas; centralizado, o ícone ficaria
     flutuando no meio delas em vez de junto da primeira. */
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.mural-enquete__pergunta svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.mural-enquete__form {
  display: grid;
  gap: 10px;
}

/* Sem isto o botão esticaria na largura da grade e viraria uma faixa. */
.mural-enquete__form .botao {
  justify-self: start;
}

.mural-enquete__opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .16s ease;
}

.mural-enquete__opcao:hover {
  border-color: rgba(200, 242, 79, .35);
}

.mural-enquete__opcao input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.mural-enquete__resultado {
  margin-bottom: 16px;
}

.mural-enquete__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
  font-size: 14px;
}

.mural-enquete__seu {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.mural-enquete__numero {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-3);
}

.mural-enquete__barra {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}

.mural-enquete__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.mural-enquete__resultado--meu .mural-enquete__barra span {
  box-shadow: var(--glow-accent);
}

.mural-enquete__quem {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

.mural-enquete__total,
.mural-enquete__aviso,
.mural-enquete__ajuda {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
}

.mural-enquete__confirma {
  margin: 0 0 6px;
  font-size: 15px;
}

/* Reações -------------------------------------------------------------- */

.mural-reacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0;
}

/* Só o emoji e o contador: sem o rótulo, as cinco reações cabem numa linha no
   desktop e quebram em duas no celular, em vez de virar uma coluna. */
.mural-reacao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.mural-reacao:hover {
  border-color: rgba(200, 242, 79, .3);
  background: var(--surface-hover);
  color: var(--text);
}

.mural-reacao--minha {
  border-color: rgba(200, 242, 79, .4);
  background: rgba(200, 242, 79, .1);
  color: var(--accent);
}

.mural-reacao__emoji {
  font-size: 18px;
  line-height: 1;
}

.mural-reacao__contador {
  font-weight: 700;
}

/* Comentários ---------------------------------------------------------- */

.mural-comentarios {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.mural-comentarios__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.mural-comentarios__lista {
  display: grid;
  gap: 18px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.mural-comentario {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mural-comentario__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.mural-comentario__corpo {
  flex: 1 1 auto;
  min-width: 0;
}

.mural-comentario__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
}

.mural-comentario__autor {
  font-size: 14px;
  font-weight: 600;
}

.mural-comentario__data {
  font-size: 12px;
  color: var(--text-3);
}

.mural-comentario__texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mural-comentario__apagar button {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--text-3);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}

.mural-comentario__apagar button:hover {
  color: #E27A7A;
}

.mural-comentarios__form {
  display: grid;
  gap: 12px;
  justify-items: start;
}

/* Formulário do admin -------------------------------------------------- */

.mural-form .switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-2);
}

.mural-editor {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.mural-editor__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}

.mural-editor__barra button {
  min-width: 32px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}

.mural-editor__barra button:hover {
  border-color: var(--line);
  background: var(--surface-hover);
  color: var(--text);
}

.mural-editor__divisor {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line);
}

/* Cor do texto e marca-texto ------------------------------------------- */

.mural-cor {
  position: relative;
}

.mural-cor__gatilho {
  display: block;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--accent);
  font-weight: 700;
  line-height: 1.1;
}

.mural-cor__gatilho--fundo {
  border-bottom-color: rgba(242, 193, 79, .55);
  background: rgba(242, 193, 79, .18);
}

.mural-cor__paleta {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 188px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .45);
}

.mural-cor__grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.mural-editor__barra .mural-cor__opcao {
  min-width: 0;
  width: 100%;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  /* O chip fica sobre o mesmo fundo do editor para que um marca-texto
     translúcido apareça na paleta com a cor que terá no texto. */
  background: var(--bg);
  overflow: hidden;
}

.mural-editor__barra .mural-cor__opcao:hover {
  border-color: rgba(200, 242, 79, .5);
}

.mural-cor__chip {
  display: block;
  width: 100%;
  height: 100%;
}

.mural-cor__livre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
}

.mural-cor__livre input[type="color"] {
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.mural-editor__area {
  min-height: 260px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
}

.mural-editor__area:focus {
  outline: none;
}

.mural-editor__area h2 {
  font-size: 20px;
  margin: 20px 0 10px;
}

.mural-editor__area h3 {
  font-size: 17px;
  margin: 18px 0 10px;
}

.mural-editor__area blockquote {
  margin: 0 0 14px;
  padding-left: 16px;
  border-left: 3px solid rgba(200, 242, 79, .4);
  font-style: italic;
}

.mural-editor__area a {
  color: var(--accent);
}

.mural-upload {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.mural-upload .mural-anexos {
  width: 100%;
  margin: 4px 0 0;
}

.mural-form-enquete {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.mural-form-enquete__campos {
  display: grid;
  gap: 20px;
  margin-top: 18px;
}

.mural-opcoes {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

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

.mural-opcoes__remover {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.mural-opcoes__remover:hover {
  border-color: rgba(226, 122, 122, .4);
  color: #E27A7A;
}

.mural-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .mural-recado__titulo {
    font-size: 24px;
  }

  /* Sem espaço para as duas coisas lado a lado: as abas ficam numa linha e o
     "por página" desce, ocupando a largura toda. */
  .mural-controles {
    align-items: stretch;
    gap: 14px;
  }

  .mural-porpagina {
    width: 100%;
    margin-left: 0;
  }

  .mural-porpagina__controle {
    flex: 1 1 auto;
    width: auto;
  }

  .mural-paginacao {
    flex-direction: column-reverse;
  }

  .mural-paginacao .botao {
    width: 100%;
    justify-content: center;
  }

  .mural-busca {
    flex-wrap: wrap;
  }
}

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

/* ==========================================================================
   Administração do calendário
   ========================================================================== */

/* Cabeçalho com ação à direita (o "Novo evento", o "Gerenciar eventos"). */
.page-header--acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.botao__contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
}

/* Fila de aprovação: só aparece quando há pedido esperando decisão. -------- */

.fila {
  margin-bottom: 32px;
  padding: 22px;
  border: 1px solid rgba(200, 242, 79, .22);
  border-radius: var(--r-md);
  background: rgba(200, 242, 79, .04);
}

.fila__titulo {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.fila__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.fila__dados {
  flex: 1;
  min-width: 240px;
}

.fila__nome {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

/* O RTV marcou o SIM do "calendário oficial" no pedido de verba. */
.fila__sim {
  margin: 0 0 6px;
}

.fila__linha {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

.fila__pedido {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

.fila__obs {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.fila__acoes {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* O que o vendedor escreveu, mostrado na edição para conferência. ---------- */

.pedido {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.pedido__titulo {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pedido__lista {
  display: grid;
  gap: 8px;
  margin: 0;
}

.pedido__lista div {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.pedido__lista dt {
  color: var(--text-3);
  min-width: 90px;
}

.pedido__lista dd {
  margin: 0;
  color: var(--text-2);
}

/* Listagem de eventos ----------------------------------------------------- */

.evento-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.evento-lista__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.evento-lista__link:hover {
  background: var(--surface-soft);
}

.evento-lista__data {
  width: 96px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-3);
}

.evento-lista__nome {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.evento-lista__nome .tag {
  margin-left: 8px;
}

.evento-lista__cidade {
  font-size: 13px;
  color: var(--text-2);
  text-align: right;
}

/* Imagem do evento, enviada sem sair do formulário ------------------------- */

.evento-imagem__previa {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 160px;
  margin-bottom: 12px;
  border-radius: var(--r-sm);
  /* Como no modal do evento: a imagem inteira, sem corte. */
  object-fit: contain;
  background: var(--surface-soft);
}

.evento-imagem__acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* A exclusão fica separada do formulário principal, para não ficar ao lado do
   "Salvar" e virar clique errado. */
.formulario--perigo {
  margin-top: 20px;
  border-color: rgba(194, 85, 58, .3);
}

@media (max-width: 720px) {
  .fila__acoes {
    width: 100%;
  }

  .evento-lista__link {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .evento-lista__nome {
    order: -1;
    flex-basis: 100%;
  }

  .evento-lista__cidade {
    text-align: left;
  }
}

/* Na lista de produtos toda linha tem campos e botões, mais altos que o texto
   das colunas de tipo e uso; alinhar ao topo, como o resto das tabelas, deixava
   o texto flutuando acima deles. */
.tabela--produtos td {
  vertical-align: middle;
}

.produtos-novo {
  margin-bottom: 24px;
}

/* Nome, fórmula e tipo lado a lado; no celular, um embaixo do outro. */
.produtos-novo__campos {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 720px) {
  .produtos-novo__campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.produtos-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.produtos-filtro .panel__title {
  margin: 0;
}

.produtos-filtro__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tabela--produtos .campo {
  min-width: 140px;
}

/* O nome é o texto mais comprido da linha ("EXCLUSIVE + 20% Oxi. +ACQUA"). */
.tabela--produtos td:first-child {
  width: 34%;
}

.tabela--produtos td:nth-child(2) {
  width: 22%;
}

.linha-edicao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Cada plantio do envio de laudo: até três, o primeiro sempre aberto. A borda
   separa um do outro, porque os campos são os mesmos e sem ela a pessoa perde
   em qual está escrevendo. */
.plantio {
  margin: 0 0 16px;
  padding: 16px 18px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

.plantio__titulo {
  padding: 0 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.plantio__titulo small {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--text-3);
}

.plantio [data-remover] {
  margin-bottom: 12px;
}

[data-adicionar] {
  margin-bottom: 20px;
}

/* Linha do tempo do talhão (Solo+Fértil). A inicial no topo; embaixo, as duas
   trilhas lado a lado, para comparar Brasfertil e concorrente no mesmo talhão.
   A linha vertical de cada trilha é a borda esquerda da coluna, e cada laudo é
   um ponto sobre ela. No celular as trilhas ficam uma embaixo da outra. */
.linha-tempo {
  margin-bottom: 24px;
}

.linha-tempo__raiz {
  margin-bottom: 8px;
  padding-left: 22px;
  border-left: 2px solid var(--line);
}

.linha-tempo__trilhas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 720px) {
  .linha-tempo__trilhas {
    grid-template-columns: 1fr;
  }
}

.linha-tempo__trilha {
  padding-left: 22px;
  border-left: 2px solid rgba(200, 242, 79, .35);
}

.linha-tempo__trilha--concorrente {
  border-left-color: rgba(194, 85, 58, .4);
}

.linha-tempo__titulo {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.linha-tempo__trilha--brasfertil .linha-tempo__titulo {
  color: var(--accent);
}

.linha-tempo__trilha--concorrente .linha-tempo__titulo {
  color: #C2553A;
}

.linha-tempo__no {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

/* O ponto do laudo sobre a linha. */
.linha-tempo__no::before {
  content: '';
  position: absolute;
  top: 16px;
  left: -29px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 3px var(--bg);
}

.linha-tempo__no--brasfertil::before { background: var(--accent); }
.linha-tempo__no--concorrente::before { background: #C2553A; }
.linha-tempo__no--inicial::before { background: var(--text); }

.linha-tempo__data {
  font-size: 12px;
  color: var(--text-3);
}

.linha-tempo__arquivo {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.linha-tempo__arquivo:hover {
  color: var(--accent);
}

.linha-tempo__meta {
  font-size: 13px;
  color: var(--text-2);
}

.linha-tempo__excluir {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
}

.linha-tempo__excluir:hover {
  color: #C2553A;
}

/* O trecho entre dois laudos: os plantios daquele intervalo. */
.linha-tempo__intervalo {
  margin: 0 0 4px;
  padding: 8px 0 8px 2px;
}

.linha-tempo__plantio {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text-2);
}

.linha-tempo__plantio span {
  color: var(--text-3);
}

.linha-tempo__intervalo--vazio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
}

/* O "+" que completa os plantios de um laudo herdado. */
.linha-tempo__mais {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px dashed rgba(200, 242, 79, .55);
  border-radius: 50%;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.linha-tempo__mais:hover {
  box-shadow: var(--glow-accent);
}

.linha-tempo__vazia {
  font-size: 13px;
  color: var(--text-3);
}

/* Acervo do Solo+Fértil: RTVs agrupados por equipe e, do RTV escolhido, os
   talhões por produtor e fazenda. O script só liga e desliga o atributo
   hidden; a busca acrescenta .acervo--buscando para mostrar o RTV de cada
   talhão, já que o resultado mistura todos. */
/* A busca e, ao lado, o filtro "a pagar" (Junior e admins). */
.acervo__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.acervo__busca {
  display: block;
  flex: 0 1 520px;
  min-width: 0;
}

/* As equipes se enfileiram lado a lado enquanto couber, cada caixa do tamanho
   dos seus RTVs: em tela larga, equipe pequena não deixa meia linha vazia. */
.acervo__equipes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 14px;
}

.acervo--buscando .acervo__equipes {
  opacity: .45;
}

/* <fieldset> para o nome do coordenador ficar sobre a linha da borda. O
   min-width: 0 desfaz o min-content que o navegador dá ao fieldset, que no
   celular empurraria a caixa para fora da tela. */
.acervo__equipe {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
}

.acervo__lider {
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.acervo__rtvs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acervo__rtv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.acervo__rtv span {
  color: var(--text-3);
  font-size: 12px;
}

.acervo__rtv:hover {
  background: var(--surface-hover);
}

.acervo__rtv--on {
  border-color: rgba(200, 242, 79, .45);
  background: rgba(200, 242, 79, .1);
  color: var(--accent);
}

.acervo__rtv--on span {
  color: var(--accent);
}

/* O RTV escolhido em destaque, e o ponto para onde a tela desce ao escolher. O
   scroll-margin deixa o nome abaixo da barra de cima, que fica fixa. */
.acervo__status {
  margin: 22px 0 4px;
  font-size: 13px;
  color: var(--text-2);
  scroll-margin-top: 96px;
}

.acervo__status-rtv {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}

.acervo__status-total {
  font-size: 14px;
  color: var(--text-2);
}

/* Produtor: uma linha que abre para baixo. */
.acervo__produtor {
  border-bottom: 1px solid var(--line);
}

.acervo__produtor-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
}

.acervo__produtor-linha::-webkit-details-marker {
  display: none;
}

.acervo__produtor-linha:hover {
  background: var(--surface-soft);
}

.acervo__seta {
  display: inline-flex;
  color: var(--text-3);
  transition: transform .15s ease;
}

.acervo__produtor[open] .acervo__seta {
  transform: rotate(90deg);
  color: var(--accent);
}

.acervo__produtor-nome {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.acervo__produtor-meta {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Fazendas: caixas de borda definida, lado a lado enquanto couber. */
.acervo__fazendas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 4px 18px 30px;
}

.acervo__fazenda {
  min-width: 0;
  max-width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

.acervo__fazenda-nome {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.acervo__fazenda-nome span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}

.acervo__talhoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Talhão: card com as informações empilhadas, uma por linha. */
.acervo__talhao {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 190px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.acervo__talhao:hover {
  border-color: rgba(200, 242, 79, .45);
}

.acervo__talhao-nome {
  margin-bottom: 2px;
  font-weight: 600;
  line-height: 1.3;
}

.acervo__talhao-linha {
  font-size: 13px;
  color: var(--text-2);
}

.acervo__talhao-conferir {
  font-size: 12px;
  font-weight: 600;
  color: #E7C66B;
}

/* Análise a pagar: o detalhe pequeno do card (Junior, admins e o dono). */
.acervo__talhao-pagar {
  font-size: 12px;
  color: var(--text-2);
}

/* Toggle em pílula, da altura do campo de busca: discreto apagado, verde do
   CAT ligado. O checkbox vira o trilho do interruptor. */
.acervo__filtro-pagar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.acervo__filtro-pagar:hover {
  border-color: rgba(255, 255, 255, .16);
}

.acervo__filtro-pagar input {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  appearance: none;
  cursor: pointer;
  transition: background .15s ease;
}

.acervo__filtro-pagar input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform .15s ease, background .15s ease;
}

.acervo__filtro-pagar input:checked {
  background: var(--accent);
}

.acervo__filtro-pagar input:checked::before {
  background: var(--accent-ink);
  transform: translateX(14px);
}

.acervo__filtro-pagar input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.acervo__filtro-pagar:has(input:checked) {
  border-color: rgba(200, 242, 79, .35);
  background: rgba(200, 242, 79, .06);
  color: var(--text);
}

.acervo__filtro-total {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--text-3);
}

/* Paga ou a pagar, na linha do laudo. Para a diretoria e os admins é botão. */
.laudo-paga {
  align-self: flex-start;
  font-size: 12px;
  color: var(--text-3);
}

.laudo-paga--sim {
  color: #7ED3A2;
}

.laudo-paga--botao {
  padding: 2px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.laudo-paga--botao:hover {
  border-color: var(--text-3);
}

.laudo-paga--botao.laudo-paga--sim {
  border-style: solid;
  border-color: rgba(126, 211, 162, .35);
}

.acervo__talhao-rtv {
  display: none;
  font-size: 12px;
  color: var(--text-3);
}

.acervo--buscando .acervo__talhao-rtv {
  display: block;
}

@media (max-width: 720px) {
  .acervo__equipe {
    flex: 1 1 100%;
  }

  .acervo__fazendas {
    padding-left: 0;
  }

  .acervo__fazenda {
    flex: 1 1 100%;
  }

  .acervo__talhao {
    flex: 1 1 140px;
    width: auto;
  }
}

/* Notificação no sino: é para a pessoa e pede ação, então se distingue dos
   recados com a borda do acento. */
.sino__item--aviso {
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}

.sino__texto {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}

/* Leitura do laudo por IA, dentro do nó da linha do tempo. */
.leitura {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.leitura:empty {
  display: none;
}

.leitura__status {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
}

.leitura__status--lendo::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: leitura-pulso 1.2s ease-in-out infinite;
}

@keyframes leitura-pulso {
  50% { opacity: .25; }
}

.leitura__status--conferir {
  color: #E7C66B;
}

.leitura__status--ok {
  color: var(--accent);
}

.leitura__status--erro {
  color: #E9A0A0;
}

.leitura__resumo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 13px;
}

.leitura__lab {
  color: var(--text-2);
}

.leitura__amostra {
  font-weight: 600;
}

.leitura__valores {
  color: var(--text-2);
}

.leitura__acao {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid rgba(200, 242, 79, .45);
  border-radius: 999px;
  background: rgba(200, 242, 79, .1);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.leitura__acao--discreta {
  border-color: var(--line);
  background: transparent;
  color: var(--text-2);
}

.leitura__aviso {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(226, 122, 122, .35);
  border-radius: var(--r-sm);
  background: rgba(226, 122, 122, .1);
  color: #F0B4B4;
  font-size: 13px;
  line-height: 1.45;
}

.leitura__contra {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
}

.leitura__nota {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #E7C66B;
}

/* Conferência: título de cada bloco, a escolha da amostra e a grade de
   resultados (determinação, valor, unidade, método). */
.formulario__secao {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.leitura-amostra {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.leitura-amostra:has(input:checked) {
  border-color: rgba(200, 242, 79, .45);
  background: rgba(200, 242, 79, .06);
}

.leitura-amostra > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leitura-grade {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leitura-grade__linha {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.leitura-grade__rotulo {
  font-size: 14px;
  color: var(--text-2);
}

@media (max-width: 720px) {
  .leitura-grade__linha {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .leitura-grade__rotulo {
    grid-column: 1 / -1;
  }

  .leitura-grade__linha > span:empty {
    display: none;
  }
}

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

.leitura__acoes form {
  margin: 0;
}

/* Nova análise: o botão fica embaixo de cada trilha, na cor dela, e abre o
   formulário já nela. */
.nova-analise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(200, 242, 79, .45);
  border-radius: var(--r-sm);
  background: rgba(200, 242, 79, .05);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.nova-analise span {
  font-size: 18px;
  line-height: 1;
}

.nova-analise:hover {
  background: rgba(200, 242, 79, .1);
}

.nova-analise--concorrente {
  border-color: rgba(224, 135, 95, .5);
  background: rgba(224, 135, 95, .05);
  color: #E0875F;
}

.nova-analise--concorrente:hover {
  background: rgba(224, 135, 95, .1);
}

.nova-analise--inicial {
  width: auto;
  margin-top: 16px;
}

/* O formulário aberto: uma caixa própria, com a cor da trilha no topo e as
   duas partes (plantios, laudo) separadas. */
.envio {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  scroll-margin-top: 96px;
}

.envio--concorrente {
  border-top-color: #E0875F;
}

.envio--inicial {
  border-top-color: var(--text-2);
}

.envio__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.envio__rotulo {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.envio__titulo {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}

.envio--concorrente .envio__titulo {
  color: #E0875F;
}

.envio--inicial .envio__titulo {
  color: var(--text);
}

.envio__fechar {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.envio__fechar:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.envio__secao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.envio__secao-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.envio__secao-titulo span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
}

.envio .plantio {
  margin: 0;
  background: var(--bg);
}

@media (max-width: 720px) {
  .envio {
    padding: 16px;
  }
}

/* ============================================================ Resultados ====
   Um universo à parte dentro do CAT (views/resultados.js). As cores significam
   sempre a mesma coisa, em todas as telas: o lado Brasfertil em verde-limão e o
   concorrente em cinza-azulado; a diferença em verde quando o Brasfertil ganhou,
   laranja quando perdeu, cinza no empate; uma cor por cultura e uma por
   situação (a da cultura vem do cadastro de culturas). Quem bate o olho sabe o
   que é cada número antes de ler. */

.res {
  --res-brasfertil: var(--accent);
  --res-concorrente: #8A9BB0;
  --res-ganhou: #7ED3A2;
  --res-perdeu: #EE9A5B;
  --res-empate: var(--text-2);
}

/* A cor da cultura vem do cadastro (tabela Cultura) como --cultura no atributo
   style do elemento (views/resultados.js). Este é o cinza de quem não tem cor. */
.res-cultura,
.res-cartao {
  --cultura: #9AA5B1;
}

.res-topo {
  padding: 20px 0 4px;
}

.res-topo__texto {
  margin: 8px 0 0;
  color: var(--text-2);
}

/* O menu do universo: abas sob o cabeçalho, que no celular rolam de lado. */
.res-abas {
  display: flex;
  gap: 4px;
  margin: 20px 0 26px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.res-abas::-webkit-scrollbar {
  display: none;
}

.res-abas__item {
  margin-bottom: -1px;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.res-abas__item:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.res-abas__item[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------ componentes */

.res-cultura {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.res-cultura__ponto {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cultura);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cultura) 22%, transparent);
}

.res-cultura__safra {
  font-weight: 500;
  color: var(--text-2);
}

.res-situacao {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.res-situacao--aguardando_produtor { color: #E3B25B; }
.res-situacao--devolvido { color: #EE7B6E; }
.res-situacao--autorizado { color: #7ED3A2; }
.res-situacao--sem_divulgacao { color: var(--text-2); }

.res-dif {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.res-dif--ganhou { color: var(--res-ganhou); }
.res-dif--perdeu { color: var(--res-perdeu); }
.res-dif--empate { color: var(--res-empate); }

.res-dif--sem {
  font-weight: 500;
  color: var(--text-3);
}

/* As duas colheitas, cada barra proporcional à maior. */
.res-barra {
  display: grid;
  gap: 6px;
  margin: 10px 0 6px;
}

.res-barra__linha {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}

.res-barra__trilho {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-hover);
  overflow: hidden;
}

.res-barra__valor {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.res-barra__linha--brasfertil .res-barra__valor { background: var(--res-brasfertil); }
.res-barra__linha--concorrente .res-barra__valor { background: var(--res-concorrente); }

.res-barra__numero {
  min-width: 4ch;
  font-weight: 600;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* O cartão de um resultado: a arte em pé (quase todas são 9:16, de Stories),
   sem corte, e os dados ao lado. */
.res-cartao {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  overflow: hidden;
  transition: border-color .15s;
}

.res-cartao:hover {
  border-color: color-mix(in srgb, var(--cultura) 55%, transparent);
}

.res-cartao__imagem {
  aspect-ratio: 9 / 16;
  background: #05070C;
}

.res-cartao__arte {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sem arte (o produtor não autorizou, o resultado foi negativo ou a arte ainda
   não foi feita): a cor da cultura no lugar dela. */
.res-cartao__sem-arte {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cultura) 38%, #05070C), #05070C 75%);
  color: color-mix(in srgb, var(--cultura) 80%, white);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.res-cartao__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px;
}

.res-cartao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.res-cartao__produtor {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.res-cartao__onde {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
}

.res-cartao__dif {
  margin: auto 0 0;
  font-size: 15px;
}

/* ------------------------------------------------------------ visão geral */

.res-visao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.res-janela {
  grid-column: 1 / -1;
}

.res-visao__coluna {
  display: grid;
  gap: 18px;
}

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

.res-topo5__item {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
}

.res-topo5__item--voce {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.res-topo5__posicao {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-3);
}

.res-topo5__item:first-child .res-topo5__posicao {
  color: var(--accent);
}

.res-topo5__nome {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-topo5__pontos {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* As regionais por número de trabalhos. Barra fina (18px) com um pouco de
   profundidade: uma face de cima mais clara e uma lateral mais escura,
   desenhadas em pseudo-elementos inclinados. A ponta arredondada e o valor fora
   dela, em cor de texto. */
.res-regionais .panel__subtitle {
  margin: -8px 0 16px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
}

.res-regionais__lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-regionais__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3ch;
  align-items: center;
  gap: 12px;
  padding: 5px 6px;
  border-radius: 10px;
  outline: none;
}

.res-regionais__item:hover,
.res-regionais__item:focus-visible {
  background: var(--surface-hover);
}

.res-regionais__nome {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O trilho dá a folga de cima para a face de topo, que sobe 5px. */
.res-regionais__trilho {
  padding-top: 5px;
}

.res-regionais__barra {
  position: relative;
  display: block;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #D4F76A, #A8CF35);
}

/* Face de cima: um retângulo da largura da barra, logo acima dela, inclinado
   a partir da base — a borda de cima anda 5px para a direita. */
.res-regionais__barra::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  height: 5px;
  background: #E6FC9C;
  transform: skewX(-45deg);
  transform-origin: bottom left;
}

/* Face lateral: encostada na ponta, inclinada a partir do topo — a borda de
   trás sobe 5px e encontra a face de cima. */
.res-regionais__barra::after {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 5px;
  height: 18px;
  background: #7E9E24;
  transform: skewY(-45deg);
  transform-origin: top left;
}

.res-regionais__valor {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A dica: a parte de cada regional no total. */
.res-regionais__item[data-dica]:hover::after,
.res-regionais__item[data-dica]:focus-visible::after {
  content: attr(data-dica);
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}

.res-janela .panel__subtitle,
.res-ganho .panel__subtitle,
.res-voce .panel__subtitle {
  margin: -8px 0 16px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
}

.res-voce .panel__subtitle {
  margin: 12px 0 0;
}

.res-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.res-numero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  font-size: 13px;
  color: var(--text-2);
}

.res-numero .display,
.res-voce__pontos .display {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}

.res-voce__pontos {
  margin: 0 0 14px;
  color: var(--text-2);
}

.res-voce__estrela {
  color: var(--accent);
}

.res-progresso {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-hover);
  overflow: hidden;
}

.res-progresso span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-green), var(--accent));
}

.res-pendencias__lista,
.res-ganho__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-pendencias__lista {
  display: grid;
  gap: 10px;
  color: var(--text-2);
}

.res-pendencias__lista strong {
  margin-right: 6px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text);
}

.res-ganho__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.res-ganho__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.res-ganho__media {
  justify-self: end;
}

.res-ganho__base {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-3);
}

.res-secao__titulo {
  margin: 36px 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.res-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .res-visao {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .res-numeros {
    grid-template-columns: minmax(0, 1fr);
  }

  .res-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .res-cartao {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* ============================================================== Em breve ====
   A tela de quem ainda não tem acesso, enquanto a trava provisória estiver
   ligada (views/em-breve.js). A ampulheta: a areia escorre por 80% do ciclo e,
   no resto, ela gira meia volta — simétrica, a volta termina igual ao começo. */

.em-breve {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(200, 242, 79, .10), transparent 70%),
    var(--bg);
}

.em-breve__palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
  text-align: center;
}

.em-breve__logo {
  width: 150px;
  margin-bottom: 40px;
}

.em-breve__ampulheta {
  width: 132px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(200, 242, 79, .28));
}

.em-breve__giro {
  transform-box: fill-box;
  transform-origin: center;
  animation: em-breve-giro 8s cubic-bezier(.65, 0, .35, 1) infinite;
}

.em-breve__vidro {
  fill: url(#eb-vidro);
  stroke: rgba(236, 241, 234, .38);
  stroke-width: 2;
}

.em-breve__moldura {
  fill: var(--accent);
}

.em-breve__haste {
  fill: color-mix(in srgb, var(--accent) 55%, var(--bg));
}

.em-breve__areia-cima {
  animation: em-breve-esvazia 8s linear infinite;
}

.em-breve__areia-baixo {
  animation: em-breve-enche 8s linear infinite;
}

/* O fio de areia: tracejado que corre para baixo enquanto há o que escorrer. */
.em-breve__fio {
  stroke: #D9FF6E;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
  animation: em-breve-fio 8s linear infinite, em-breve-corre .5s linear infinite;
}

@keyframes em-breve-giro {
  0%, 80% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

@keyframes em-breve-esvazia {
  0% { transform: translateY(0); }
  78%, 100% { transform: translateY(46px); }
}

@keyframes em-breve-enche {
  0% { transform: translateY(42px); }
  78%, 100% { transform: translateY(0); }
}

@keyframes em-breve-fio {
  0%, 76% { opacity: 1; }
  79%, 100% { opacity: 0; }
}

@keyframes em-breve-corre {
  to { stroke-dashoffset: -8; }
}

.em-breve__titulo {
  margin: 44px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--text);
}

.em-breve__texto {
  max-width: 34ch;
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
}

.em-breve__conta {
  margin: 40px 0 0;
  font-size: 13px;
  color: var(--text-3);
}

.em-breve__conta a {
  color: var(--text-2);
}

/* Sem movimento para quem pediu: a ampulheta para no meio da areia. */
@media (prefers-reduced-motion: reduce) {
  .em-breve__giro,
  .em-breve__areia-cima,
  .em-breve__areia-baixo,
  .em-breve__fio {
    animation: none;
  }

  .em-breve__areia-cima { transform: translateY(23px); }
  .em-breve__areia-baixo { transform: translateY(21px); }
}

/* --------------------------------------------------------------- galeria
   Os filtros numa faixa, o resumo e a grade de artes em pé (9:16). O modal
   abre a arte grande com os dados ao lado (embaixo, no celular). */

.gal-filtros {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

.gal-filtros__campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px 14px;
}

/* O botão que recolhe os filtros só existe em tablet e celular (ver o @media
   abaixo). */
.gal-filtros__alternar {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gal-filtros__alternar::after {
  content: "▾";
  color: var(--text-3);
  transition: transform .15s;
}

.gal-filtros__alternar[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.gal-filtros__ativos {
  margin-right: auto;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.gal-filtro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gal-filtro[hidden] {
  display: none;
}

/* O select do CAT tem largura mínima de 190px (select.campo), maior que a
   coluna do filtro: ele vazava por cima do vizinho. Aqui cada campo ocupa a
   sua coluna, e só ela. */
.gal-filtro .campo {
  width: 100%;
  min-width: 0;
}

.gal-filtro--largo {
  grid-column: span 2;
}

.gal-chaves {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  grid-column: span 3;
  margin: 0;
  padding: 0;
  border: 0;
}

.gal-chaves legend {
  float: left;
  width: 100%;
  margin-bottom: 2px;
}

/* As chaves viram pílulas: marcada, acesa. A caixinha continua lá para o
   teclado e o leitor de tela. */
.gal-chave {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.gal-chave input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.gal-chave span {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: background .15s, color .15s, border-color .15s;
}

.gal-chave input:checked + span {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}

.gal-chave input:focus-visible + span {
  box-shadow: var(--glow-accent);
}

.gal-filtros__acoes {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  grid-column: -2 / -1;
}

.gal-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 14px;
}

.gal-resumo strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
}

.gal-resumo__dica {
  color: var(--text-3);
}

.gal-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 14px;
}

.gal-grade[aria-busy="true"] {
  opacity: .5;
  transition: opacity .15s;
}

.gal-item {
  --cultura: #9AA5B1;
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #05070C;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.gal-item:hover,
.gal-item:focus-visible {
  border-color: color-mix(in srgb, var(--cultura) 60%, transparent);
  transform: translateY(-2px);
  outline: none;
}

.gal-item__imagem,
.gal-item__arte,
.gal-item__sem-arte {
  display: block;
  width: 100%;
  height: 100%;
}

.gal-item__arte {
  object-fit: cover;
}

.gal-item__sem-arte {
  padding: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cultura) 38%, #05070C), #05070C 70%);
  color: color-mix(in srgb, var(--cultura) 80%, white);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

/* A faixa de dados sobre a arte: escurece o pé da imagem para o texto ler. */
.gal-item__faixa {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 36px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 12, .88) 45%);
}

.gal-item__faixa .res-cultura {
  font-size: 12px;
}

.gal-item__produtor {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gal-item__onde {
  font-size: 12px;
  color: var(--text-2);
}

.gal-item__dif {
  margin-top: 4px;
  font-size: 14px;
}

.gal-vazio {
  margin-top: 8px;
}

.gal-mais {
  display: block;
  margin: 24px auto 0;
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.gal-mais:hover {
  color: var(--text);
  border-color: var(--accent);
}

.gal-mais[hidden] {
  display: none;
}

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

.modal--galeria {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.modal--galeria::backdrop {
  background: rgba(5, 7, 12, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gal-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  max-height: calc(100vh - 34px);
}

.gal-modal__palco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: #05070C;
  touch-action: pan-y;
}

.gal-modal__arte {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 34px);
  object-fit: contain;
}

.gal-modal__seta {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(10, 13, 20, .72);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.gal-modal__seta:hover:not(:disabled) {
  border-color: var(--accent);
}

.gal-modal__seta:disabled {
  opacity: .3;
  cursor: default;
}

.gal-modal__seta--anterior { left: 14px; }
.gal-modal__seta--proxima { right: 14px; }

.gal-modal__contador {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10, 13, 20, .72);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

.gal-modal__painel {
  overflow-y: auto;
  padding: 26px 24px 24px;
}

.gal-modal__fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.gal-modal__carregando {
  color: var(--text-3);
}

/* Aberto num resultado sem arte: só os dados, sem palco nem setas. */
.modal--galeria-sem-arte {
  width: min(520px, calc(100vw - 32px));
}

.modal--galeria-sem-arte .gal-modal {
  grid-template-columns: minmax(0, 1fr);
}

.modal--galeria-sem-arte .gal-modal__palco {
  display: none;
}

/* O painel de dados. */
.gal-detalhe__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-right: 40px;
}

.gal-detalhe__produtor {
  margin: 12px 0 2px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.gal-detalhe__onde {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

.gal-detalhe__dif {
  margin: 16px 0 0;
  font-size: 20px;
}

/* Os dois lados por etapa (painelDetalhe): uma grade só, para o plantio, a
   cobertura, a área e a colheita ficarem na mesma linha dos dois lados. Cada
   coluna parece um cartão: as células têm o mesmo fundo, sem espaço entre as
   linhas, e o cabeçalho e a colheita arredondam as pontas. A colheita fecha o
   cartão, maior, na cor do lado. */
.gal-comparativo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  margin: 16px 0;
}

.gal-comparativo--1 {
  grid-template-columns: minmax(0, 1fr);
}

.gal-comparativo__lado,
.gal-etapa,
.gal-colheita {
  padding: 0 14px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
}

.gal-comparativo__lado {
  margin: 0;
  padding-top: 12px;
  padding-bottom: 4px;
  border-top: 1px solid var(--line);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gal-comparativo__lado--brasfertil {
  box-shadow: inset 0 3px 0 var(--res-brasfertil);
}

.gal-comparativo__lado--concorrente {
  box-shadow: inset 0 3px 0 var(--res-concorrente);
}

.gal-etapa {
  display: grid;
  align-content: start;
  gap: 2px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.gal-etapa__rotulo {
  font-size: 11px;
  color: var(--text-3);
}

.gal-etapa__produto {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.gal-etapa__dose {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

/* Valor da tonelada, abaixo da dose. */
.gal-etapa__preco {
  font-size: 12px;
  color: var(--text-3);
}

.gal-etapa__vazio {
  font-size: 13px;
  color: var(--text-3);
}

.gal-colheita {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  padding-bottom: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

.gal-colheita__valor {
  font-size: 13px;
  color: var(--text-2);
}

.gal-colheita__valor strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.gal-colheita--brasfertil .gal-colheita__valor strong {
  color: var(--res-brasfertil);
}

.gal-colheita--concorrente .gal-colheita__valor strong {
  color: var(--res-concorrente);
}

.gal-dados {
  display: grid;
  gap: 8px;
  margin: 0;
}

.gal-dados dt {
  font-size: 11px;
  color: var(--text-3);
}

.gal-dados dd {
  margin: 1px 0 0;
  font-size: 13px;
  font-weight: 600;
}

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

.gal-detalhe__depoimento {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--cultura, var(--accent));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-soft);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-2);
}

.gal-detalhe__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.gal-detalhe__baixar,
.gal-detalhe__editar {
  display: flex;
  flex: 1 1 140px;
  justify-content: center;
}

@media (max-width: 900px) {
  .gal-filtro--largo,
  .gal-chaves {
    grid-column: 1 / -1;
  }

  .gal-filtros__acoes {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  /* No celular o modal ocupa a tela: a arte em cima, os dados embaixo, e o
     conjunto rola. */
  .modal--galeria {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
  }

  .gal-modal {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .gal-modal__arte {
    max-height: 72dvh;
  }

  .modal--galeria-sem-arte {
    width: 100vw;
  }
}

/* Em tablet e celular os filtros ficam recolhidos atrás do botão, para as artes
   aparecerem logo; abertos, ocupariam meia tela. */
@media (max-width: 900px) {
  .gal-filtros {
    padding: 14px 16px;
  }

  .gal-filtros__alternar {
    display: flex;
  }

  .gal-filtros__campos {
    margin-top: 14px;
  }

  .gal-filtros:not(.gal-filtros--aberto) .gal-filtros__campos {
    display: none;
  }
}

@media (max-width: 560px) {
  .gal-filtros__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gal-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .gal-lados,
  .gal-dados--lavoura {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- ranking */

.rk-janelas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.rk-janelas__item {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
}

.rk-janelas__item:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.rk-janelas__item[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}

.rk-cabeca {
  margin-bottom: 18px;
}

.rk-cabeca__texto {
  margin: 0;
  color: var(--text-2);
}

.rk-cabeca__texto strong {
  color: var(--text);
}

.rk-cabeca__regra {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

.rk-colunas {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
}

.rk-rtvs .panel__subtitle,
.pn-quadro .panel__subtitle {
  margin: -8px 0 16px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
}

.rk-lista {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-item__botao {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1.4fr) auto minmax(80px, 1fr) 5.5em;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rk-item__botao:hover,
.rk-item__botao:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.rk-item--voce .rk-item__botao {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.rk-item__posicao {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-3);
}

.rk-item:first-child .rk-item__posicao {
  color: var(--accent);
}

.rk-item__nome {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rk-item__trabalhos {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.rk-item__pontos {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rk-item__pontos small {
  font-weight: 500;
  color: var(--text-3);
}

/* Na regional clicável, o botão ocupa a linha inteira com o mesmo desenho. */
.res-regionais__item--botao {
  padding: 0;
}

.res-regionais__botao {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3ch;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.res-regionais__botao:hover,
.res-regionais__botao:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

/* O modal das listas. */
.modal--fragmento {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}

.modal--fragmento::backdrop {
  background: rgba(5, 7, 12, .7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal--fragmento .modal__titulo {
  font-size: 13px;
}

.rk-fragmento__resumo {
  margin: 0 0 12px;
  color: var(--text-2);
}

.rk-fragmento__resumo strong {
  color: var(--text);
}

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

.rk-trabalho__link {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.rk-trabalho:first-child .rk-trabalho__link {
  border-top: 0;
}

.rk-trabalho__link:hover {
  background: var(--surface-hover);
}

.rk-trabalho__data {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.rk-trabalho__quem {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rk-trabalho__quem strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rk-trabalho__quem span {
  font-size: 12px;
  color: var(--text-3);
}

.rk-trabalho__pontos {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- painel */

.pn-chaves {
  grid-column: auto;
}

.pn-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.pn-quadro--largo {
  grid-column: 1 / -1;
}

/* Os gráficos de barra do painel. Barra fina (14px), ponta arredondada, 2px de
   folga entre os dois pedaços da empilhada, valor na ponta em cor de texto. */
.gr-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: -6px 0 14px;
  font-size: 13px;
  color: var(--text-2);
}

.gr-legenda__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gr-chave {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.gr-chave--lado { background: #76A426; }
.gr-chave--area { background: #3F8BE0; }

.gr-barras {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-linha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 5px 6px;
  border-radius: 10px;
  outline: none;
}

.gr-linha:hover,
.gr-linha:focus-visible {
  background: var(--surface-hover);
}

.gr-rotulo {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gr-trilho {
  display: flex;
  gap: 2px;
  height: 14px;
}

.gr-seg {
  display: block;
  height: 100%;
}

.gr-seg:last-child {
  border-radius: 0 4px 4px 0;
}

.gr-seg--lado { background: #76A426; }
.gr-seg--area { background: #3F8BE0; }

.gr-valor {
  min-width: 3ch;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A divergente: o zero no meio, a barra cresce para um lado ou para o outro. */
.gr-trilho--divergente {
  position: relative;
  display: block;
}

.gr-zero {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--line);
}

.gr-trilho--divergente .gr-seg {
  position: absolute;
  top: 0;
}

.gr-seg--ganhou {
  background: #3FA672;
  border-radius: 0 4px 4px 0;
}

.gr-seg--perdeu {
  background: #D9772E;
  border-radius: 4px 0 0 4px;
}

.gr-barras--divergente .gr-valor {
  min-width: 7.5em;
}

/* A dica com os números, como nas regionais. */
.gr-linha[data-dica]:hover::after,
.gr-linha[data-dica]:focus-visible::after {
  content: attr(data-dica);
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}

.gr-mais {
  margin-top: 8px;
}

.gr-mais summary {
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}

.gr-mais summary:hover {
  color: var(--text);
}

/* Safra a safra: as duas colheitas médias de cada safra. */
.pn-safras {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-safra {
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr) 8em;
  align-items: center;
  gap: 16px;
  padding: 8px 6px;
  border-top: 1px solid var(--line);
}

.pn-safra:first-child {
  border-top: 0;
}

.pn-safra__nome {
  display: flex;
  flex-direction: column;
}

.pn-safra__nome span {
  font-size: 12px;
  color: var(--text-3);
}

.pn-safra .res-barra {
  margin: 0;
}

.pn-safra__dif {
  text-align: right;
}

@media (max-width: 900px) {
  .rk-colunas,
  .pn-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .rk-item__botao {
    grid-template-columns: 2.2em minmax(0, 1fr) auto;
  }

  .rk-item__trabalhos,
  .rk-item__botao .res-progresso {
    display: none;
  }

  .rk-trabalho__link {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rk-trabalho__data,
  .rk-trabalho__link .res-cultura {
    grid-column: 1 / -1;
  }

  .gr-linha {
    grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto;
  }

  .pn-safra {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pn-safra .res-barra {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ------------------------------------------------------------- lançamento
   O formulário do RTV (views/resultados-lancamento.js). Pensado para o
   celular, no campo: uma coluna, blocos numerados, campos grandes e o botão de
   enviar sempre à mão no pé da tela. */

.res-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.res-topo__lancar {
  flex-shrink: 0;
}

.res .eyebrow a {
  color: var(--text-2);
  text-decoration: none;
}

.res .eyebrow a:hover {
  color: var(--accent);
}

.lc {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin-top: 14px;
  /* Rádio, calendário e escolha de arquivo nativos no tema escuro. */
  color-scheme: dark;
}

.lc__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.lc .campo,
.lc select.campo {
  width: 100%;
  min-width: 0;
}

.lc-bloco {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}

/* O float tira a legenda de cima da borda (o jeito nativo do fieldset): ela vira
   a primeira linha do bloco. */
.lc-bloco__titulo {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.lc-bloco__titulo > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text-2);
  font-size: 13px;
}

.lc-bloco__titulo small,
.lc .campo__rotulo small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}

/* Os dois lados levam a cor de sempre: verde-limão o Brasfertil, cinza-azulado
   o concorrente — na borda à esquerda e no número do bloco. */
.lc-bloco--brasfertil {
  border-left: 3px solid var(--res-brasfertil);
}

.lc-bloco--brasfertil .lc-bloco__titulo > span {
  background: color-mix(in srgb, var(--res-brasfertil) 18%, transparent);
  color: var(--res-brasfertil);
}

.lc-bloco--concorrente {
  border-left: 3px solid var(--res-concorrente);
}

.lc-bloco--concorrente .lc-bloco__titulo > span {
  background: color-mix(in srgb, var(--res-concorrente) 20%, transparent);
  color: var(--res-concorrente);
}

.lc-bloco [data-lado-concorrente] {
  display: grid;
  gap: 16px;
}


/* Os pares (dose e área, plantio e colheita) ficam lado a lado até no celular:
   menos rolagem no campo. Rótulo que quebra em duas linhas não desalinha os
   campos, que se alinham pelo pé. */
.lc-linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}

.lc-linha:has(> .lc-curto) {
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
}

.lc-link {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lc-link:hover {
  text-decoration: underline;
}


[data-produtor-busca] {
  display: grid;
  gap: 10px;
}


.lc-sugestoes {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-sugestoes:empty {
  display: none;
}

.lc-sugestao {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.lc-sugestao span {
  font-size: 12px;
  color: var(--text-3);
}

.lc-sugestao:hover,
.lc-sugestao:focus-visible {
  border-color: rgba(200, 242, 79, .35);
  box-shadow: var(--glow-accent);
}

.lc-escolhido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(200, 242, 79, .3);
  border-radius: var(--r-sm);
  background: rgba(200, 242, 79, .08);
}


.lc-produtor-novo,
.lc-produto-novo {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
}


.lc-produto {
  display: grid;
  gap: 8px;
}

.lc-produto-novo .campo__ajuda {
  margin: 0;
}

.lc-tipo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.lc-tipo legend {
  width: 100%;
  padding: 0;
}

.lc-tipo label,
.lc-chave,
.lc-foto label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}

.lc-tipo input,
.lc-chave input,
.lc-foto input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Custo do adubo por hectare, calculado enquanto se digita. */
.lc-custo {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.lc-chave {
  color: var(--text);
}

.lc-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-fotos:empty {
  display: none;
}

.lc-foto {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.lc-foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.lc-foto label {
  font-size: 13px;
}

.lc-foto:has(input:checked) img {
  opacity: .35;
}

.lc input[type="file"].campo {
  padding: 9px 12px;
  color: var(--text-2);
  cursor: pointer;
}

/* O botão fica preso ao pé da tela no celular: o formulário é longo e o RTV
   não precisa rolar até o fim para enviar. */
.lc-enviar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 10px;
  margin: 0 -4px;
  padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}

.lc-enviar .botao {
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  font-size: 15px;
}

.lc-enviar .botao:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}

.lc [data-erro] {
  border-color: rgba(238, 123, 110, .35);
  background: color-mix(in srgb, #EE7B6E 12%, var(--bg));
  color: #F2A79E;
}

.lc [data-produtor-parecidos] {
  border-color: rgba(227, 178, 91, .35);
  background: rgba(227, 178, 91, .08);
  color: #E8C47F;
}

/* Por último: vence o display de cada bloco acima. */
.lc [hidden] {
  display: none;
}

/* ---------------------------------------------------------- meus resultados */

.meus-grupo + .meus-grupo,
.meus-vazio {
  margin-top: 16px;
}

.meus-vazio {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.meus-grupo__texto {
  margin: -8px 0 14px;
  font-size: 13px;
  color: var(--text-3);
}

.meus-grupo--devolvido {
  border-color: rgba(238, 123, 110, .3);
}

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

.meu {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cultura, var(--line));
  border-radius: var(--r-sm);
  background: var(--surface);
}

.meu__link {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.meu__link:hover .meu__produtor {
  color: var(--accent);
}

.meu__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.meu__produtor {
  font-size: 15px;
  color: var(--text);
}

.meu__onde {
  font-size: 12px;
  color: var(--text-3);
}

.meu__motivo {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(238, 123, 110, .08);
  font-size: 13px;
  line-height: 1.45;
  color: #F2A79E;
}

.meu__acao {
  justify-self: start;
  padding: 9px 16px;
  font-size: 13px;
}

/* ---------------------------------------------------- a página do resultado */

.res-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 16px;
}

.res-pagina__situacao {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.res-pagina--aguardando_produtor { border-left: 3px solid #E3B25B; }
.res-pagina--devolvido { border-left: 3px solid #EE7B6E; }
.res-pagina--autorizado { border-left: 3px solid #7ED3A2; }
.res-pagina--sem_divulgacao { border-left: 3px solid var(--text-3); }

/* ---------------------------------------------------------------- regionais */

.rg-texto {
  margin: -6px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

.rg-tabela td {
  vertical-align: middle;
}

.rg-tabela .campo {
  min-width: 200px;
}

.rg-tabela form {
  margin: 0;
}

.rg-nova {
  max-width: 760px;
  margin-top: 16px;
}

.rg-nova .panel__title {
  margin: 0;
}

.rg-nova select.campo {
  width: 100%;
  min-width: 0;
}

@media (max-width: 560px) {
  .res-topo__lancar {
    width: 100%;
    justify-content: center;
  }

  .lc-bloco {
    padding: 16px 16px 18px;
  }

  .lc-linha {
    gap: 10px;
  }

  .lc-linha:has(> .lc-curto) {
    grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
  }

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

@media (max-width: 359px) {
  .lc-linha,
  .lc-linha:has(> .lc-curto) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ conferência
   O marketing confere com o produtor (views/resultados-conferencia.js). As
   cores das respostas são as das situações (.res-situacao): âmbar aguardando,
   verde confirmado, vermelho devolvido. */

.res-pendencias__lista a {
  color: inherit;
  text-decoration: none;
}

.res-pendencias__lista a:hover {
  color: var(--accent);
}

.gal-detalhe__depoimento {
  white-space: pre-line;
}

.cf-grupo + .cf-grupo {
  margin-top: 16px;
}

.cf-grupo__texto,
.cf-bloco__texto {
  margin: -8px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

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

.cf-item {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cultura, var(--line));
  border-radius: var(--r-sm);
  background: var(--surface);
}

.cf-item__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cf-item__espera {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
}

/* Uma semana ou mais esperando o produtor: o marketing cobra primeiro. */
.cf-item--antigo .cf-item__espera {
  color: #E3B25B;
}

.cf-item__produtor {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.cf-item__produtor:hover {
  color: var(--accent);
}

.cf-item__onde,
.cf-item__contato {
  font-size: 12px;
  color: var(--text-3);
}

.cf-item__contato strong {
  color: var(--text-2);
}

.cf-item__numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--text-2);
}

.cf-item__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.cf-item__acoes .botao {
  padding: 9px 16px;
  font-size: 13px;
}

.cf-item__motivo {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(238, 123, 110, .08);
  font-size: 13px;
  line-height: 1.45;
  color: #F2A79E;
}

.cf-whats {
  gap: 8px;
}

/* --------------------------------------- na página do resultado (admin) */

.cf-bloco,
.cf-trocar {
  margin-bottom: 16px;
}

.cf-bloco {
  border-left: 3px solid #E3B25B;
}

#depoimento.cf-bloco {
  border-left-color: #7ED3A2;
}

.cf-contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
  color: var(--text-2);
}

.cf-contato strong {
  margin-right: 6px;
  color: var(--text);
}

.cf-form,
.cf-depoimento {
  display: grid;
  gap: 14px;
  max-width: 720px;
  color-scheme: dark;
}

.cf-depoimento {
  margin-top: 14px;
}

.cf-opcoes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.cf-opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
}

.cf-opcao input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.cf-opcao span {
  display: grid;
  gap: 3px;
}

.cf-opcao strong {
  font-size: 14px;
  color: var(--text);
}

.cf-opcao small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}

.cf-opcao:hover {
  border-color: rgba(255, 255, 255, .18);
}

.cf-opcao--autorizado:has(input:checked),
.cf-opcao--sem_divulgacao:has(input:checked) {
  border-color: rgba(126, 211, 162, .45);
  background: rgba(126, 211, 162, .07);
}

.cf-opcao--devolvido:has(input:checked) {
  border-color: rgba(238, 123, 110, .45);
  background: rgba(238, 123, 110, .07);
}

/* O motivo só aparece com "não confirmou" marcado. Sem :has (navegador
   antigo), fica sempre à vista — e o servidor cobra quando precisa. */
.cf-form:has(.cf-opcoes input) .cf-motivo {
  display: none;
}

.cf-form:has(.cf-opcao--devolvido input:checked) .cf-motivo {
  display: block;
}

.cf-form textarea.campo,
.cf-depoimento textarea.campo {
  resize: vertical;
  font-family: var(--font-ui);
  line-height: 1.5;
}

.cf-trocar summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}

.cf-trocar summary:hover {
  color: var(--text);
}

.cf-trocar[open] summary {
  margin-bottom: 14px;
}

.cf-trocar .cf-bloco__texto {
  margin-top: 0;
}

@media (max-width: 560px) {
  .cf-lista {
    grid-template-columns: minmax(0, 1fr);
  }

  .cf-item__acoes .botao,
  .cf-contato .botao {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* -------------------------------------------------------------- cadastros
   A aba Cadastros dos Resultados (views/resultados-cadastros.js): o menu de
   cima, culturas com as safras e o seletor de cor, cidades. */

.cad-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -8px 0 20px;
}

.cad-menu__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.cad-menu__item:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.cad-menu__item[aria-current="page"] {
  border-color: rgba(200, 242, 79, .35);
  background: rgba(200, 242, 79, .08);
  color: var(--accent);
}

.cad-menu__conta {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(227, 178, 91, .16);
  color: #E3B25B;
  font-size: 11px;
}

.cad-texto {
  max-width: 760px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
}

.cad-texto strong {
  color: var(--text-2);
}

/* Uma cultura: o resumo (nome, cor, contas) abre a edição e as safras. */
.cad-cultura {
  margin-bottom: 10px;
  padding: 0;
  border-left: 3px solid var(--cultura, var(--line));
}

.cad-cultura__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.cad-cultura__resumo::-webkit-details-marker {
  display: none;
}

.cad-cultura__resumo .res-cultura {
  font-size: 15px;
}

.cad-cultura__contas {
  font-size: 12px;
  color: var(--text-3);
}

.cad-cultura[open] .cad-cultura__resumo {
  border-bottom: 1px solid var(--line);
}

.cad-cultura > form,
.cad-cultura > .cad-safras {
  margin: 18px 20px;
}

.cad-cultura__edicao {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: start;
  gap: 16px 24px;
  max-width: 820px;
}

.cad-cultura__edicao .formulario__acoes {
  grid-column: 1 / -1;
  padding-top: 0;
}

/* O seletor de cor: a prévia e a régua de matiz pintada no tom escolhido. */
.cad-cor {
  display: grid;
  gap: 10px;
  color-scheme: dark;
}

.cad-cor .campo__rotulo {
  margin-bottom: 0;
}

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

.cad-cor__previa {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cultura);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cultura) 22%, transparent);
}

.cad-cor__matiz {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  /* Sem script, a régua do tom claro; com ele, a do tom escolhido (culturas.js). */
  background: linear-gradient(to right, #FEA6C1, #FEAC9E, #F9B379, #E0C16D, #BBCF7C, #8FD89E, #68DCC7, #60D8EB, #86CDFF, #AEC2FE, #CEB5FF, #EDAAE6, #FEA6C1);
  appearance: none;
  cursor: pointer;
}

.cad-cor__matiz::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
  appearance: none;
}

.cad-cor__matiz::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--text);
}

.cad-cor__tons {
  display: flex;
  gap: 18px;
}

.cad-cor__tons label,
.cad-confirma {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}

.cad-cor__tons input,
.cad-confirma input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.cad-cor__aviso {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #E3B25B;
}

.cad-safras .campo {
  min-width: 0;
}

.cad-safras td:first-child {
  min-width: 190px;
}

.cad-safras select.campo {
  width: 100%;
  min-width: 170px;
}

.cad-curto {
  width: 90px;
}

.cad-confirma {
  margin-top: 8px;
  white-space: normal;
  color: #E3B25B;
}

.cad-confirma[hidden] {
  display: none;
}

.cad-safras__nova td {
  background: var(--surface-soft);
}

.cad-nova {
  max-width: 760px;
  margin-top: 16px;
}

.cad-nova .panel__title {
  margin: 0;
}

.cad-nova select.campo,
.cad-busca select.campo,
.cad-cidades select.campo {
  width: 100%;
  min-width: 0;
}

.cad-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  gap: 14px;
}

.cad-busca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto;
  align-items: end;
  gap: 12px;
  max-width: 820px;
  margin-bottom: 16px;
}

.cad-cidades td:first-child {
  min-width: 220px;
}

.cad-cidades td:nth-child(2) {
  min-width: 150px;
}

.cad-juntar .cad-busca {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cad-candidatas {
  display: grid;
  gap: 8px;
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cad-candidatas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
  color: var(--text-2);
}

.cad-candidatas strong {
  color: var(--text);
}

.cad-candidatas form {
  margin: 0;
}

/* ------------------------------------------------ produtos a revisar */

.produtos-revisar {
  margin-bottom: 24px;
  border-left: 3px solid #E3B25B;
}

.produtos-revisar__texto {
  margin: -6px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

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

.produtos-revisar__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.produtos-revisar__item > div:first-child {
  display: grid;
  gap: 3px;
}

.produtos-revisar__item span {
  font-size: 12px;
  color: var(--text-3);
}

.produtos-revisar__acoes,
.produtos-revisar__juntar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.produtos-revisar__acoes form {
  margin: 0;
}

.produtos-revisar__juntar select.campo {
  width: 260px;
  min-width: 0;
}

@media (max-width: 700px) {
  .cad-cultura__edicao,
  .cad-linha,
  .cad-busca {
    grid-template-columns: minmax(0, 1fr);
  }

  .produtos-revisar__juntar,
  .produtos-revisar__juntar select.campo {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ artes
   A fila do marketing e o envio da arte (views/resultados-artes.js). As artes
   são 9:16 (Stories): a miniatura aparece em pé. */

.ar-grupo__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.ar-grupo__topo .panel__title {
  margin: 0;
}

.ar-grupo__texto,
.ar-bloco__texto {
  max-width: 760px;
  margin: -6px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

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

.ar-item {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cultura, var(--line));
  border-radius: var(--r-sm);
  background: var(--surface);
}

.ar-item__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ar-item__espera {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
}

.ar-item__produtor {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.ar-item__produtor:hover {
  color: var(--accent);
}

.ar-item__onde {
  font-size: 12px;
  color: var(--text-3);
}

.ar-item__dif {
  font-size: 15px;
}

.ar-lado {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}

.ar-lado strong {
  color: var(--text);
}

.ar-lado__rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ar-lado__colheita {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.ar-item__depoimento {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--cultura, var(--accent));
  border-radius: 0 10px 10px 0;
  background: var(--surface-soft);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--text-2);
}

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

.ar-fotos a {
  position: relative;
  display: block;
  width: 84px;
  border-radius: 10px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}

.ar-fotos img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
}

.ar-fotos span {
  position: absolute;
  inset: auto 0 0;
  padding: 3px 0;
  background: rgba(10, 13, 20, .72);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.ar-fotos a:hover span {
  color: var(--accent);
}

/* Enviar arte · Não fazer arte (ou Voltar para a fila). */
.ar-item__acoes,
.ar-bloco__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ar-item__acoes {
  margin-top: 6px;
}

.ar-bloco__acoes {
  margin: -4px 0 16px;
}

.ar-item__acoes form,
.ar-bloco__acoes form {
  margin: 0;
}

.ar-item__acoes .botao,
.ar-bloco__acoes .botao {
  padding: 9px 16px;
  font-size: 13px;
}

.ar-grupo__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------- na página do resultado (admin) */

.ar-bloco {
  margin-bottom: 16px;
  border-left: 3px solid var(--accent);
}

.ar-bloco__sub {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ar-atual,
.ar-envio__previa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.ar-atual {
  margin-bottom: 18px;
}

.ar-atual img,
.ar-envio__previa img {
  display: block;
  width: 120px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.ar-atual__dados,
.ar-envio__previa > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-3);
}

.ar-atual__dados strong,
.ar-envio__previa strong {
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.ar-atual__escondida,
.ar-envio__nota {
  max-width: 420px;
  line-height: 1.45;
  color: #E3B25B;
}

.ar-atual__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.ar-atual__acoes form {
  margin: 0;
}

.ar-envio {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.ar-envio__escolher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  cursor: pointer;
}

/* O input de arquivo fica escondido; o botão ao lado é o que se clica. */
.ar-envio__escolher input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ar-envio__escolher:focus-within .botao {
  box-shadow: var(--glow-accent);
}

.ar-envio__escolher small {
  font-size: 12px;
  color: var(--text-3);
}

.ar-envio [hidden] {
  display: none;
}

.ar-envio .botao:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 560px) {
  .ar-lista {
    grid-template-columns: minmax(0, 1fr);
  }

  .ar-lado {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ar-lado__rotulo {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------- pedido do Solo+Fértil (6d)
   O produtor pela busca (com as cidades), a fazenda entre as dele ou nova
   (views/solo.js, public/js/pedido-solo.js). As sugestões reaproveitam as
   do lançamento de resultado (.lc-sugestao, .lc-escolhido, .lc-link). */

.sp-pedido [hidden] {
  display: none;
}

.sp-bloco {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sp-bloco > legend {
  padding: 0;
}

.sp-busca,
.sp-fazenda-nova,
.sp-fazendas,
.sp-fazendas > div {
  display: grid;
  gap: 10px;
}

.sp-busca .campo__ajuda {
  margin-top: 0;
}

.sp-novo {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text-2);
}

.sp-novo p {
  margin: 0;
}

.sp-novo strong {
  color: var(--text);
}

.sp-parecidos {
  font-size: 13px;
  line-height: 1.5;
  color: #E8C47F;
}

.sp-fazenda {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  color-scheme: dark;
}

.sp-fazenda strong {
  margin-right: 6px;
  font-size: 14px;
  color: var(--text);
}

.sp-fazenda input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.sp-fazenda:has(input:checked) {
  border-color: rgba(200, 242, 79, .4);
  background: rgba(200, 242, 79, .06);
}

.sp-pedido select.campo {
  width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------- janelas do ranking */

.cad-janelas .campo {
  min-width: 0;
}

.cad-janelas td:first-child {
  min-width: 130px;
}

.cad-janelas input[type="date"] {
  min-width: 150px;
  color-scheme: dark;
}

.cad-janelas td small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
}

.cad-janela {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cad-janela--atual {
  background: rgba(200, 242, 79, .12);
  color: var(--accent);
}

.cad-janela--futura {
  background: rgba(111, 168, 220, .14);
  color: #8DBBE6;
}

.cad-janela--encerrada {
  background: var(--surface-hover);
  color: var(--text-3);
}

.cad-linha--janela {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 140px);
}

.cad-linha--janela input[type="date"] {
  color-scheme: dark;
}

@media (max-width: 700px) {
  .cad-linha--janela {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ------------------------------------- conferência em duas etapas (020) */

/* Lançado, ainda não enviado ao produtor: o marketing está conferindo. */
.res-situacao--em_conferencia { color: #8DBBE6; }

.cf-enviar {
  display: inline-flex;
  margin: 0;
}

.cf-etapa {
  margin-top: -6px;
}

.cf-etapa strong {
  color: var(--text-2);
}

@media (max-width: 560px) {
  /* O envio é um formulário: no celular ocupa a linha como os outros botões. */
  .cf-item__acoes .cf-enviar,
  .cf-contato .cf-enviar {
    flex: 1 1 auto;
  }

  .cf-enviar .botao {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------ coluna central
   As telas de conteúdo numa coluna central (Eduardo, 05/10/2026): 1200px de
   conteúdo, a medida comum de container, mais o respiro lateral da página.
   Os Resultados inteiros e as listas (produtos, Solo+Fértil, mural, eventos,
   pessoas). Formulários têm a .page--estreita (760px); a home e o calendário,
   com o menu lateral, usam a tela toda. */
.page.res,
.page--larga {
  max-width: 1264px;
  margin-inline: auto;
}

/* O lançamento em duas colunas na tela larga: produtor e onde, cultura e
   lavoura, o lado Brasfertil ao lado do comparativo (como no painel), fotos e
   quem confirma. O título, os avisos e o botão de enviar ocupam a linha toda. */
@media (min-width: 960px) {
  .lc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    column-gap: 20px;
    max-width: none;
  }

  .lc > :not(.lc-bloco) {
    grid-column: 1 / -1;
  }

  /* O bloco estica até a altura do vizinho; o conteúdo fica no topo. */
  .lc-bloco {
    align-content: start;
  }
}

/* Os cartões de "Últimos resultados" abrem o resultado ampliado (ampliar.js). */
.res-cartao--ampliar {
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}

.res-cartao--ampliar:hover,
.res-cartao--ampliar:focus-visible {
  border-color: color-mix(in srgb, var(--cultura) 55%, transparent);
  transform: translateY(-1px);
  outline: none;
}

/* Organograma comercial: a folha branca, como sai no PDF. */
.page-header__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.organograma {
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.organograma svg {
  display: block;
  width: 100%;
  height: auto;
}