/* =============================================================================
   COMPONENTES COMPARTILHADOS do Grillus (todos os ramos usam os mesmos).
   Regra: um ramo (agro, locação...) troca só tokens (--capa-arte, --acento, cores) e ilustrações;
   estrutura, espaçamento, tipografia e comportamento são estes. Classe nova de tela vem para cá
   quando servir a mais de um ramo, nunca uma cópia com outro nome.
   ============================================================================= */
:root { --capa-arte: url(../img/capa-grillus.svg); --capa-cor: #2a1f5c; --acento: var(--brand); --acento-suave: color-mix(in srgb, var(--acento) 14%, transparent);
  --bn-fundo: rgba(25, 25, 29, .92); --bn-borda: rgba(255, 255, 255, .08); --bn-ink: rgba(255, 255, 255, .7); --bn-on-fundo: #f4f3f8; --bn-on-ink: #4527a8; }
html[data-tema="escuro"] { --bn-fundo: rgba(32, 32, 38, .94); --bn-on-ink: #4527a8; }

/* ---------- capa do Início: arte do ramo, saudação e um painel de contexto */
.capa { position: relative; overflow: hidden; border-radius: 20px; min-height: 0; padding: 16px 18px; margin: 0 0 12px; display: grid; align-content: space-between; gap: 12px;
  background: var(--capa-cor) var(--capa-arte) center / cover no-repeat; color: #fff; isolation: isolate; }
.capa-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.capa-t h2 { margin: 2px 0 0; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.capa-t span { color: rgba(255,255,255,.78); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.capa-g img { width: 52px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.capa-painel { display: grid; gap: 10px; min-width: 0; }
.capa-agora { display: flex; align-items: center; gap: 12px; min-width: 0; }
.capa-grande { font-family: var(--fonte-titulo); font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.capa-agora b { display: block; font-weight: 600; }
.capa-agora small { color: rgba(255,255,255,.85); }
.capa-chips, .capa-dias { display: flex; flex-wrap: wrap; gap: 8px; }
.capa-chips > * { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; font-size: 12px; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.capa-chips b { font-weight: 700; }
.capa-dias span { display: grid; justify-items: center; gap: 2px; min-width: 54px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.capa-dias .ti { font-size: 18px; }
.capa-dias small, .capa-fonte { color: rgba(255,255,255,.85); font-size: 11px; }
.hero.hero-capa { padding-top: 0; }

/* ---------- seção com título e link ("Ver todas") */
.secao { display: grid; gap: 10px; min-width: 0; }
.secao-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.secao-h h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.secao-h h3 small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.secao-h a { font-size: 13px; color: var(--acento); text-decoration: none; white-space: nowrap; }
.blocos { display: grid; gap: 14px; margin-bottom: 18px; }

/* ---------- cartão com imagem (talhões, imóveis, clientes): faixa de imagem, selo de situação e texto */
.cartoes-img { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 46%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.cartoes-img::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .cartoes-img { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: visible; } }
.cartao-img { display: grid; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); scroll-snap-align: start; min-width: 0; }
.cartao-img-f { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; max-width: 100%;
  background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.35), transparent 60%), repeating-linear-gradient(115deg, rgba(0,0,0,.07) 0 6px, transparent 6px 14px), linear-gradient(160deg, var(--c1, #a48cfa), var(--c2, #5633c7)); }
.cartao-img-em { font-size: 40px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); color: #fff; }
.cartao-img-selo { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.92); color: #19191d;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-img-selo.ok { background: #e3f5ea; color: #145c38; }
.cartao-img-selo.aviso { background: #fff1d6; color: #7a4f00; }
.cartao-img-tx { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.cartao-img-tx small { color: var(--muted); font-size: 12px; }
.cartao-img.novo .cartao-img-f { background: var(--soft); color: var(--muted); }

/* ---------- números lado a lado */
.numeros { display: flex; flex-wrap: wrap; gap: 10px; }
.numeros > span, .numeros > a { flex: 1 1 140px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--soft); min-width: 0; }
.numeros small { font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.numeros b { font-family: var(--fonte-titulo); font-size: clamp(16px, 4.4vw, 22px); font-weight: 700; white-space: nowrap; }

/* ---------- destaque em linha (um número com ícone e seta) */
.destaque { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--ink); border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--acento) 12%, var(--card)), var(--card) 70%); }
.destaque-em { font-size: 34px; }
.destaque-tx { display: grid; gap: 2px; flex: 1; min-width: 0; }
.destaque-tx b { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; }
.destaque-tx small { color: var(--muted); font-size: 12px; }

/* ---------- lista "o que pede atenção": ícone, título, detalhe e seta */
.lista-ir { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-ir a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.lista-ir a > .ti:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--acento-suave); color: var(--acento); font-size: 18px; flex: none; }
.lista-ir span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.lista-ir small { color: var(--muted); font-size: 12px; }
.lista-ir .ti-chevron-right, .destaque .ti-chevron-right { color: var(--muted); }

/* ---------- tarefas com marcar como feita */
.tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tarefas li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.card .tarefas li { background: var(--soft); border-color: transparent; }
.tarefas li > span { display: grid; gap: 1px; min-width: 0; }
.tarefas small { color: var(--muted); font-size: 12px; }
.tarefas li.atrasada small { color: var(--bad); }
.tarefas li.hoje small { color: var(--acento); font-weight: 600; }
.check { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--acento); background: transparent; color: transparent; display: grid; place-items: center; }
.check:hover, .check:focus-visible { background: var(--acento); color: #fff; }
.check .ti { font-size: 16px; }

/* ---------- passos para começar e atalhos em cápsula */
.passos-ini { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.passo-ini { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--soft); text-decoration: none; color: var(--ink); min-width: 0; }
.passo-ini:hover { background: var(--hover); }
.passo-ini .ti { font-size: 20px; color: var(--acento); margin-top: 2px; }
.passo-ini > span { display: grid; gap: 2px; min-width: 0; }
.atalhos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.atalhos::-webkit-scrollbar { display: none; }
.atalhos a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px; }
.atalhos a:hover { border-color: var(--acento); }
.atalhos .ti { color: var(--acento); }

/* ---------- celular: barra de baixo escura com o item aberto em círculo claro (igual em todos os ramos) */
@media (max-width: 800px) {
  html nav.bn, html[data-tema="escuro"] nav.bn { background: var(--bn-fundo); border-color: var(--bn-borda); }
  html .bn a, html .bn .bn-mais, html[data-tema="escuro"] .bn a, html[data-tema="escuro"] .bn .bn-mais { color: var(--bn-ink); }
  html .bn a.on, html .bn .bn-mais.on, html[data-tema="escuro"] .bn a.on, html[data-tema="escuro"] .bn .bn-mais.on { background: var(--bn-on-fundo); color: var(--bn-on-ink); }
}

/* escritório com marca própria: a capa usa a cor dele, sem a arte do Grillus */
body.marca-propria .capa { --capa-arte: none; --capa-cor: var(--brand); }
.cartao-img-f.arte { background: var(--soft) var(--arte) var(--arte-pos, center) / cover no-repeat; }
.cartao-img-acao { display: flex; gap: 6px; margin-top: 6px; }
.cartao-img-tx b, .cartao-img-tx small { overflow-wrap: anywhere; }
.cartao-img { grid-template-columns: minmax(0, 1fr); }
.secao-h .cartao-img-selo { position: static; flex: none; }
.secao-h .cartao-img-selo:not(.ok):not(.aviso) { background: var(--soft); color: var(--ink); }

/* títulos com a fonte de título da marca (Bricolage Grotesque); o texto segue a Schibsted Grotesk */
h1, h2, h3 { font-family: var(--fonte-titulo); letter-spacing: -.01em; }

/* ---------- faixa da marca no Início: data, saudação, pedido ao assistente e o painel do dia (à direita no computador) */
.capa { padding: 22px 24px 20px; gap: 14px; min-height: 0; align-content: start; grid-template-columns: minmax(0, 1fr); }
.capa > * { position: relative; z-index: 1; }
@media (min-width: 1000px) {
  .capa { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 32px; }
  .capa > .capa-t, .capa > .ask, .capa > .ask-prev { grid-column: 1; }
  .capa > .capa-painel { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
.capa .capa-t h2 { font-size: 28px; }
.capa .ask { max-width: 640px; border: 0; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.capa .ask input { color: #19191d; }
.capa .ask input::placeholder { color: #5e5d6a; }
.capa .ask-prev { color: #fff; padding: 0 4px; max-width: 640px; }
.capa .ask-prev .ti { color: #fff; }
.capa .ask-prev:empty { display: none; }
@media (max-width: 800px) {
  .capa { padding: 18px 16px 16px; gap: 12px; border-radius: 0 0 26px 26px; margin: -12px -16px 14px; }
  .capa .capa-t h2 { font-size: 24px; }
  .capa .capa-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .capa .capa-chips::-webkit-scrollbar { display: none; }
  .capa .capa-chips > * { flex: none; }
  .capa .capa-dias { display: none; }
  .capa .capa-grande { font-size: 34px; }
}
html[data-tema="escuro"] .capa .ask { background: var(--card); }
html[data-tema="escuro"] .capa .ask input { color: var(--ink); }
html[data-tema="escuro"] .capa .ask input::placeholder { color: var(--muted); }

/* ---------- o grilo em cena: lista vazia, erro com saída e resultado (mesmo desenho em todos os ramos) */
.empty { gap: 10px; padding: 36px 16px 40px; font-size: 14.5px; color: var(--ink); }
.empty::before { width: 150px; height: 150px; border-radius: 50%; opacity: 1;
  background: var(--acento-suave) url("../img/grilo-lupa.svg") center 58% / 78% auto no-repeat; }
.empty.tranquilo::before { width: 150px; height: 150px; background: var(--acento-suave) url("../img/grilo-dorme.svg") center 60% / 76% auto no-repeat; }
html[data-ramo="agro"] .empty::before { background-image: url("../img/grilo-agro.svg"); }
.estado { display: grid; justify-items: center; gap: 10px; max-width: 460px; margin: 6vh auto 0; padding: 0 16px; text-align: center; }
.estado-arte { width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); }
.estado.erro .estado-arte { background: color-mix(in srgb, #e5484d 16%, transparent); }
.estado-arte .gr-pose { width: 150px; }
.estado h2 { margin: 6px 0 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.estado p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.estado .pri { min-width: 220px; margin-top: 6px; }
.estado small { font-size: 11.5px; margin-top: 6px; overflow-wrap: anywhere; }
body.marca-propria .estado-arte { display: none; }
.nf-ok .gr-festa { width: 170px; }
.nf-ok h3 { font-size: 24px; font-weight: 800; }
@media (max-width: 800px) {
  .estado { margin-top: 3vh; }
  .estado-arte { width: 150px; height: 150px; }
  .estado-arte .gr-pose { width: 118px; }
  .estado h2 { font-size: 22px; }
  .empty::before, .empty.tranquilo::before { width: 128px; height: 128px; }
}

/* mapa das áreas: desenho próprio (SVG) dos contornos importados, sem mapa de terceiros. Cores por cultura em tokens. */
:root { --mapa-1: #cfe3b8; --mapa-2: #f2dc9b; --mapa-3: #b9d7e8; --mapa-4: #e8c3b0; --mapa-5: #d6cdea; --mapa-6: #c8e0d6; --mapa-vazio: #ecebe6; --mapa-linha: #5d6356; --mapa-fundo: #f7f6f1; }
html[data-tema="escuro"] { --mapa-1: #3f5a33; --mapa-2: #6b5a2a; --mapa-3: #2f5366; --mapa-4: #6a4434; --mapa-5: #4b4266; --mapa-6: #2f5a4c; --mapa-vazio: #2c2c33; --mapa-linha: #b9bfb2; --mapa-fundo: #1d1d22; }
.mapa-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mapa-areas svg { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--mapa-fundo); border: 1px solid var(--line); touch-action: manipulation; }
.mapa-areas .mp-a { stroke: var(--mapa-linha); stroke-width: 1.2; cursor: pointer; transition: opacity .15s; }
.mapa-areas .mp-a:hover, .mapa-areas .mp-a:focus { opacity: .82; outline: none; }
.mapa-areas .mp-a.on { stroke: var(--acento); stroke-width: 3.5; }
.mapa-areas .mp-a.diverge { stroke-dasharray: 6 4; }
.mapa-areas .mp-c0 { fill: var(--mapa-vazio); } .mapa-areas .mp-c1 { fill: var(--mapa-1); } .mapa-areas .mp-c2 { fill: var(--mapa-2); } .mapa-areas .mp-c3 { fill: var(--mapa-3); }
.mapa-areas .mp-c4 { fill: var(--mapa-4); } .mapa-areas .mp-c5 { fill: var(--mapa-5); } .mapa-areas .mp-c6 { fill: var(--mapa-6); }
.mapa-areas .mp-t { font-family: var(--fonte-texto); font-size: 19px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--mapa-fundo); stroke-width: 4px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.mapa-areas .mp-t tspan.mp-ha { font-weight: 500; font-size: 16px; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.mapa-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.mapa-legenda i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--mapa-linha); display: inline-block; }
.mapa-legenda .mp-c0 { background: var(--mapa-vazio); } .mapa-legenda .mp-c1 { background: var(--mapa-1); } .mapa-legenda .mp-c2 { background: var(--mapa-2); } .mapa-legenda .mp-c3 { background: var(--mapa-3); }
.mapa-legenda .mp-c4 { background: var(--mapa-4); } .mapa-legenda .mp-c5 { background: var(--mapa-5); } .mapa-legenda .mp-c6 { background: var(--mapa-6); }
.mapa-sel { display: grid; gap: 8px; }
.mapa-sel h3 { margin: 0; }
@media (min-width: 1000px) { .mapa-areas.com-sel { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
@media (max-width: 640px) { .mapa-areas .mp-t { font-size: 22px; } .mapa-areas .mp-t tspan.mp-ha { font-size: 19px; } }

/* colunas por mês (chuva, e qualquer série curta de meses): barra em var(--acento), rótulo e valor em texto do tema */
.colunas-mes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(34px, 1fr); gap: 6px; align-items: end; height: 170px; overflow-x: auto; padding-bottom: 2px; }
.colunas-mes > div { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; height: 100%; min-width: 0; }
.colunas-mes b { font-family: var(--fonte-texto); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.colunas-mes span { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.colunas-mes i { width: 70%; max-width: 38px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--acento); display: block; }
.colunas-mes small { font-size: 12px; color: var(--muted); text-transform: lowercase; }

/* comparar períodos lado a lado (safras): uma coluna por período; no celular a tabela rola de lado dentro do cartão */
.comparar { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.comparar table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
.comparar th, .comparar td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; color: var(--ink); }
.comparar thead th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); }
.comparar tbody th { text-align: left; font-weight: 600; white-space: normal; position: sticky; left: 0; background: var(--card); min-width: 120px; }
.comparar thead th:first-child { position: sticky; left: 0; z-index: 1; }
.comparar td small { display: block; font-size: 12px; margin-top: 2px; }
/* caixinha de marcar em forma de chip (escolher períodos) */
.chip-ck { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink); background: var(--card); cursor: pointer; }
.chip-ck input { width: auto; margin: 0; accent-color: var(--acento); }
.chip-ck:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }

/* painel duplo: o mapa da fazenda ao lado da tabela da safra; no celular um embaixo do outro */
.painel-duplo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
.painel-duplo.so-um { grid-template-columns: minmax(0, 1fr); }
.painel-duplo > * { min-width: 0; }
.painel-duplo > .card { display: grid; gap: 12px; }
@media (max-width: 900px) { .painel-duplo { grid-template-columns: minmax(0, 1fr); } }
.mapa-areas.mapa-mini { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.mapa-areas.mapa-mini svg { width: 100%; height: auto; max-height: 360px; display: block; border: 0; }
.mapa-areas.mapa-mini .mp-a { stroke-width: 1; }
/* tipo do registro numa etiqueta discreta, com ícone */
.chip-tipo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-tipo .ti { font-size: 14px; color: var(--acento); }

/* rateio da conta entre centros de custo: linhas de centro e percentual */
details.rateio { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--card); }
details.rateio > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.rateio-linhas { display: grid; gap: 6px; margin: 8px 0 6px; }
.rateio-linha { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 6px; align-items: center; }
.rateio-linha select, .rateio-linha input { min-width: 0; width: 100%; }
.rateio-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- dinheiro no Início: saldo conta por conta e o resumo do que entra e sai (todos os ramos) */
.dinheiro { display: grid; gap: 12px; padding: 18px 0 14px; min-width: 0; }
.din-saldo { display: grid; gap: 4px; padding: 16px 16px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.din-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.din-olho { border: 0; background: none; color: var(--acento); font-size: 20px; padding: 4px; min-height: 0; cursor: pointer; }
.din-total { font-family: var(--fonte-titulo); font-size: clamp(26px, 8vw, 34px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: var(--acento); }
.din-contas { display: grid; margin-top: 8px; }
.din-conta { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.din-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--acento-suave); color: var(--acento); font-size: 18px; }
.din-nome { display: grid; gap: 1px; min-width: 0; }
.din-nome b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.din-nome small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.din-conta .vl { font-weight: 700; font-size: 15px; white-space: nowrap; }
.din-mais { display: block; padding: 10px 0 6px; border-top: 1px solid var(--line); font-size: 13px; color: var(--acento); text-decoration: none; }
.din-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .din-resumo { grid-template-columns: minmax(0, 1fr); } }
.din-lado { display: grid; gap: 2px; padding: 14px 16px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.din-lado h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 800; }
.din-lado h4 .ti { color: var(--muted); font-size: 18px; }
.din-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.din-l span { display: grid; gap: 1px; font-size: 14px; min-width: 0; }
.din-l small { color: var(--muted); font-size: 12px; }
.din-l b { font-size: 16px; font-weight: 700; white-space: nowrap; }
.din-l b.pos { color: var(--ok); } .din-l b.neg, .dinheiro .vl.neg { color: var(--bad); } .din-l b.aviso { color: var(--warn); }
/* esconder os valores (o olho): o número some, o resto da tela continua */
.dinheiro.oculto .vl { color: transparent !important; text-shadow: 0 0 9px var(--ink); user-select: none; }

/* ---------- registrar no campo e mapa dos módulos (Campo e Início do agro; vale para qualquer ramo que use) */
.registrar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .registrar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.registrar a { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.2; min-width: 0; }
.registrar a:hover, .registrar a:focus-visible { border-color: var(--acento); }
.registrar .ic, .modulos .ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--acento-suave); color: var(--acento); font-size: 19px; }
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
@media (max-width: 560px) { .modulos { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); } }
.modulos a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
@media (max-width: 560px) { .modulos a { border-radius: 0; border: 0; border-top: 1px solid var(--line); } .modulos a:first-child { border-top: 0; } }
.modulos a:hover { border-color: var(--acento); }
.modulos .tx { display: grid; gap: 2px; min-width: 0; }
.modulos .tx b { font-size: 15px; font-weight: 600; }
.modulos .tx small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modulos .tx small b { font-size: 12.5px; color: var(--ink); } .modulos .tx small b.neg { color: var(--bad); }
.modulos .ir { color: var(--muted); }
.campo-hub { display: grid; gap: 28px; }
.campo-tudo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.campo-tudo .ti:first-child { color: var(--acento); font-size: 20px; } .campo-tudo .ti:last-child { margin-left: auto; color: var(--muted); }