﻿html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #F5F5F5;
}

/* Adenda 2026-05-19 — Tooltips/popovers do MudBlazor próximos da borda da
   tela podem disparar um scroll horizontal momentâneo no <body> enquanto
   o popover é posicionado. `overflow-x: clip` mantém o conteúdo visível
   (não recorta) mas suprime o eixo de rolagem — diferente de `hidden`
   que cria contexto de scroll e pode quebrar `position: sticky`. */
html { overflow-x: clip !important; }
body { overflow-x: clip !important; }

/* ---------- Adenda 2026-05-19 (rev 3) — Tabelas ricas de Apontamentos /
   Colheitas + popovers hover-persistentes. Estavam dentro de <style> de
   cada página Razor; ao trocar de página o style desmonta, deixando os
   popovers da outra página sem estilo (transparentes, sem espaçamento).
   Movidos para o CSS global. */
.apont-tabela-rica .mud-table-cell { vertical-align: middle; }
.apont-tabela-rica { overflow-x: clip; }
.apont-col-acoes { width: 140px; max-width: 140px; padding: 0 4px !important; }
.apont-col-cod { width: 72px; max-width: 90px; padding: 0 4px !important; }

/* PopoverHoverPersistente — usado em cada linha da grid de Apontamentos.
   Mantemos as regras globais aqui em vez de <style> dentro do componente
   para evitar N cópias do CSS no DOM (uma por instância renderizada). */
.popover-hover-trigger { display: inline-flex; }
.popover-hover-paper { z-index: 1500; }

/* Popover rico de talhões. */
.apont-tooltip-talhoes {
    display: flex; flex-direction: column; gap: 8px; padding: 8px;
    min-width: 280px; max-width: 380px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 6px;
}
.apont-tooltip-talhoes__header {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.apont-tooltip-talhoes__lista {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 280px; overflow-y: auto;
}
.apont-tooltip-talhao {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 8px; border-radius: 4px;
    background: var(--mud-palette-background-gray);
}
.apont-tooltip-talhao__nome { display: flex; align-items: center; gap: 6px; }
.apont-tooltip-talhao__areas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-left: 24px; }

/* Popover rico de insumos consumidos (mesmo padrão dos talhões). */
.apont-tooltip-insumos {
    display: flex; flex-direction: column; gap: 8px; padding: 8px;
    min-width: 280px; max-width: 380px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 6px;
}
.apont-tooltip-insumos__header {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.apont-tooltip-insumos__lista {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 280px; overflow-y: auto;
}
.apont-tooltip-insumo {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 8px; border-radius: 4px;
    background: var(--mud-palette-background-gray);
}
.apont-tooltip-insumo__nome { display: flex; align-items: center; gap: 6px; }
.apont-tooltip-insumo__detalhes { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-left: 24px; }

/* Dialog rico de detalhe (Apontamento / Colheita) — cards, header, grids. */
.detalhe-apont-dialog__header {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; margin: -16px -24px 0;
    border-radius: 4px 4px 0 0;
}
.detalhe-apont-dialog__numero {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 8px 14px;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    min-width: 92px;
}
.detalhe-apont-dialog__data {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.detalhe-apont-dialog__body {
    display: flex; flex-direction: column; gap: 16px;
    padding-top: 16px;
}
.detalhe-apont-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 14px 16px;
}
.detalhe-apont-card--observacao {
    background: var(--mud-palette-background-gray);
}
.detalhe-apont-card--destaque {
    background: linear-gradient(135deg, var(--mud-palette-background) 0%, var(--mud-palette-background-gray) 100%);
    border-left: 3px solid var(--mud-palette-success) !important;
}
.detalhe-apont-card__titulo {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}
.detalhe-apont-card__conteudo {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px;
}
.detalhe-apont-talhoes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
}
.detalhe-apont-talhao-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background);
    transition: border-color 0.15s;
}
.detalhe-apont-talhao-card:hover { border-color: var(--mud-palette-primary); }
.detalhe-apont-talhao-card__head {
    display: flex; align-items: center; gap: 6px;
}
.detalhe-apont-talhao-card__areas {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
}
.detalhe-apont-meta-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
@media (max-width: 600px) {
    .detalhe-apont-card__conteudo { grid-template-columns: 1fr; }
}

/* Tooltip rico de ação (Ver/Editar/Excluir/etc.). */
.apont-tooltip-acao {
    display: flex; flex-direction: column; gap: 6px; padding: 10px;
    min-width: 240px; max-width: 280px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 6px;
}
.apont-tooltip-acao__head {
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Sentinelas `<div data-test="<pagina>-raiz"></div>` sinalizam para os E2E
   que a pagina renderizou. Com `:empty` sao alvos "Attached" no DOM mas
   ficam sem caixa (0x0) e o Playwright os trata como hidden — o que quebra
   `WaitForAsync` com o default `State=Visible`. Forcamos 1x1 sem afetar
   visualmente o layout. */
div[data-test$="-raiz"]:empty,
div[data-test="painel-raiz"]:empty {
    display: block;
    min-width: 1px;
    min-height: 1px;
}

a {
    color: #00695C;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #FFF3E0;
    border-top: 1px solid #F57C00;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================
   Tela de transição premium — "S.Agro Light"
   ------------------------------------------------------------
   Uma única identidade visual (teal profundo, estilo SaaS) usada
   em DOIS momentos de carregamento, para o usuário perceber
   continuidade e profissionalismo desde o primeiro byte:

   1) BOOT DO WASM  — #app em index.html, antes do Blazor subir.
      Progresso DETERMINADO: o anel é preenchido pela variável
      --blazor-load-percentage e o texto por
      --blazor-load-percentage-text (mecanismo nativo do template).
   2) TelaRedirecionamento.razor — verificação de sessão / redirect
      para o login. Spinner INDETERMINADO + mensagem contextual.

   As classes .loading-progress / .loading-progress-text são as
   nativas do Blazor — preservadas (e reestilizadas) para manter o
   mecanismo de porcentagem funcionando.
   ============================================================ */
.agro-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
    color: #FFFFFF;
    text-align: center;
    color-scheme: light only;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    /* Fundo teal com profundidade: dois focos radiais sobre uma diagonal. */
    background:
        radial-gradient(125% 125% at 26% 16%, #34635F 0%, rgba(52,99,95,0) 52%),
        radial-gradient(115% 115% at 82% 90%, #16302F 0%, rgba(22,48,47,0) 55%),
        linear-gradient(155deg, #2D5656 0%, #1F4040 100%);
    animation: agro-splash-fade 0.35s ease-out both;
}

/* Variante overlay: cobre o chrome do app (header/menu) durante o
   redirect, evitando que o anônimo veja a casca antes do /login. */
.agro-splash--overlay { z-index: 2100; }

/* Glows ambientes suaves — profundidade "viva" sem competir com a marca. */
.agro-splash::before,
.agro-splash::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
}
.agro-splash::before {
    width: 460px; height: 460px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(77,145,145,0.55) 0%, rgba(77,145,145,0) 70%);
    animation: agro-splash-drift-a 15s ease-in-out infinite;
}
.agro-splash::after {
    width: 420px; height: 420px;
    bottom: -150px; right: -110px;
    background: radial-gradient(circle, rgba(143,188,143,0.40) 0%, rgba(143,188,143,0) 70%);
    animation: agro-splash-drift-b 17s ease-in-out infinite;
}

/* Textura sutil de folhas (mesma linguagem do hero de autenticação),
   6% de opacidade — presente mas nunca dominante. */
.agro-splash__textura {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 12C52 12 60 24 60 36C60 48 52 60 40 60C28 60 20 48 20 36C20 24 28 12 40 12Z' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3Ccircle cx='40' cy='36' r='2.4' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

.agro-splash__stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: agro-splash-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- Logo + anel ---- */
.agro-splash__logo-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    display: grid;
    place-items: center;
}
.agro-splash__halo {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(38,166,154,0.38) 0%, rgba(38,166,154,0) 68%);
    animation: agro-splash-breathe 3.6s ease-in-out infinite;
}
.agro-splash__logo {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
    animation: agro-splash-breathe 3.6s ease-in-out infinite;
}

/* Anel DETERMINADO (boot) — SVG nativo do Blazor preenchido pela %. */
.agro-splash .loading-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
}
.agro-splash .loading-progress circle {
    fill: none;
    stroke: rgba(255,255,255,0.12);
    stroke-width: 4px;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.agro-splash .loading-progress circle:last-child {
    stroke: #26A69A;
    stroke-linecap: round;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.1s ease-out;
    filter: drop-shadow(0 0 5px rgba(38,166,154,0.65));
}

/* Anel INDETERMINADO (redirect/auth) — trilha + cometa girando. */
.agro-splash__track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.agro-splash__spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(38,166,154,0) 0%, rgba(38,166,154,0) 55%, rgba(38,166,154,0.55) 82%, #2BD0BD 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    filter: drop-shadow(0 0 5px rgba(38,166,154,0.55));
    animation: agro-splash-spin 1.1s linear infinite;
}

/* ---- Wordmark + tagline ---- */
.agro-splash__titulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.agro-splash__wordmark {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #FFFFFF;
}
.agro-splash__wordmark-accent {
    color: #A7D7AB;
    font-weight: 600;
}
.agro-splash__tagline {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232,240,240,0.60);
}

/* ---- Mensagem (Razor) e texto de % (boot) compartilham estilo ---- */
.agro-splash__msg,
.agro-splash .loading-progress-text {
    position: static;
    margin: 0.25rem 0 0;
    inset: auto;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(232,240,240,0.85);
}
.agro-splash .loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Carregando…");
}

/* ---- Assinatura GR3B ---- */
.agro-splash__footer {
    position: absolute;
    bottom: 1.6rem;
    left: 0;
    right: 0;
    z-index: 1;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(232,240,240,0.50);
    animation: agro-splash-fade 0.9s ease-out both;
}
.agro-splash__footer b {
    color: rgba(255,255,255,0.80);
    font-weight: 600;
    letter-spacing: 0.06em;
}

@keyframes agro-splash-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes agro-splash-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes agro-splash-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
@keyframes agro-splash-spin {
    to { transform: rotate(360deg); }
}
@keyframes agro-splash-drift-a {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(40px, 30px); }
}
@keyframes agro-splash-drift-b {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-36px, -28px); }
}

/* Mobile — encolhe o conjunto sem perder o impacto. */
@media (max-width: 480px) {
    .agro-splash__logo-wrap { width: 118px; height: 118px; }
    .agro-splash__logo { width: 66px; height: 66px; border-radius: 18px; }
    .agro-splash__wordmark { font-size: 1.55rem; }
    .agro-splash__tagline { font-size: 0.72rem; letter-spacing: 0.1em; }
}

/* Acessibilidade — respeita quem pediu menos movimento. O spinner é
   mantido (é o indicador de carregamento), apenas mais lento; o resto
   das animações decorativas é desligado. */
@media (prefers-reduced-motion: reduce) {
    .agro-splash,
    .agro-splash__stage,
    .agro-splash__footer,
    .agro-splash__halo,
    .agro-splash__logo,
    .agro-splash::before,
    .agro-splash::after {
        animation: none;
    }
    .agro-splash__spinner { animation-duration: 2.4s; }
}

/* ---------- Banner de cookies (LGPD) ---------- */
.agroges-banner-cookies {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 1400;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.agroges-banner-cookies__content {
    pointer-events: auto;
    max-width: 760px;
    width: 100%;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-tertiary);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.agroges-banner-cookies__icon {
    color: var(--mud-palette-tertiary);
    font-size: 32px !important;
    flex-shrink: 0;
}

.agroges-banner-cookies__text {
    flex: 1;
    min-width: 0;
}

@media (max-width: 600px) {
    .agroges-banner-cookies__content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ============================================================================
   Menu lateral — versão dark moderna (Onda visual r1).

   Inspirado em SaaS premium (Linear, Vercel, Asana): fundo teal profundo
   com gradiente sutil, texto claro de alto contraste, item ativo destacado
   por barra de acento + glow. Microanimações curtas (120-180ms) preservam
   sensação responsiva sem distrair.

   Tokens scoped em variáveis CSS dentro de .agro-menu-lateral — não
   vazam para o resto do app.
   ============================================================================ */

.mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
}

/* Drawers de LEITURA (glossário de Custos, visão rápida da NF-e): o tema
   pinta TODO MudDrawer com o teal escuro do menu lateral (DrawerBackground
   #1F4040) — certo para a navegação, ilegível para um painel de conteúdo
   cujos textos usam text-primary/secondary. Esta classe devolve a
   superfície clara padrão re-escopando as variáveis de drawer. */
.mud-drawer.drawer-superficie-clara {
    --mud-palette-drawer-background: var(--mud-palette-surface);
    --mud-palette-drawer-text: var(--mud-palette-text-primary);
    --mud-palette-drawer-icon: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* ============================================================================
   DESTAQUE DE ATENÇÃO
   ----------------------------------------------------------------------------
   Usado quando uma tela é aberta por uma ação rápida que aponta para um
   controle específico e o browser NÃO deixa acioná-lo por conta própria —
   o seletor de arquivo do "Importar XML" exige gesto do usuário. Em vez de
   prometer um clique que não acontece, o botão certo pisca algumas vezes.

   Três repetições e para: animação infinita em elemento de ação vira ruído
   e atrapalha justamente quem já achou o botão.
   ========================================================================= */
.pulsar-atencao {
    animation: pulsar-atencao 1.1s ease-out 3;
}

@keyframes pulsar-atencao {
    0%   { box-shadow: 0 0 0 0 rgba(var(--mud-palette-tertiary-rgb), .55); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--mud-palette-tertiary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--mud-palette-tertiary-rgb), 0); }
}

/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    .pulsar-atencao {
        animation: none;
        outline: 2px solid var(--mud-palette-tertiary);
        outline-offset: 2px;
    }
}

/* ============================================================================
   PAINEL DE VISÃO RÁPIDA (drawer de leitura)
   ----------------------------------------------------------------------------
   Sistema visual dos drawers que mostram um registro inteiro sem sair da
   lista (pedido de venda; a NF-e recebida usa a mesma linguagem).

   MORA AQUI, e não num <style> do componente, por um motivo empírico: bloco
   <style> dentro de um .razor só existe enquanto AQUELE componente renderiza.
   O drawer do pedido nasceu reusando as classes declaradas dentro do drawer
   da NF-e e, como esse componente não renderiza na tela de Pedidos, chegou à
   tela com os contêineres crus — divs em display:block, sem painel, sem
   tile, sem zebra. Ficou com cara de rascunho.

   Anatomia: hero (quem + quanto) → tiles → linha do tempo → faixa de dados
   de fonte → seções → itens → totais → rodapé fixo de ações.
   ============================================================================ */

.visao-rapida-drawer {
    display: flex;
    flex-direction: column;
}

/* O corpo rola; o cabeçalho e o rodapé de ações ficam sempre à vista. */
.visao-rapida-corpo {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Hero: o cliente e o valor, que é o que o olho procura primeiro ─────── */
.visao-rapida-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        var(--mud-palette-primary-hover) 0%,
        var(--mud-palette-background-gray) 100%);
    border: 1px solid var(--mud-palette-lines-default);
}

.visao-rapida-hero__identidade {
    min-width: 0;
    flex: 1;
}

.visao-rapida-avatar {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Valor grande, alinhado à direita e com dígitos de largura fixa: coluna de
   dinheiro tremendo entre registros parece defeito. */
.visao-rapida-hero__valor {
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Tiles: os números secundários, em cartões iguais ───────────────────── */
.visao-rapida-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.visao-rapida-tile {
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.visao-rapida-rotulo {
    display: block;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ── Linha do tempo: os passos ligados por um fio, não empilhados soltos ── */
.visao-rapida-linha-tempo {
    position: relative;
    margin: 4px 0;
    padding-left: 30px;
}

/* Tudo abaixo é escopado em .visao-rapida-linha-tempo de propósito: o drawer
   da NF-e usa .visao-rapida-passo com layout próprio (ícone + texto lado a
   lado, sem trilho), e regra solta em .visao-rapida-passo vazaria para lá. */
.visao-rapida-linha-tempo .visao-rapida-passo {
    position: relative;
    padding-bottom: 16px;
}

.visao-rapida-linha-tempo .visao-rapida-passo:last-child {
    padding-bottom: 0;
}

/* O fio é de CADA passo (do seu ponto até o ponto de baixo), não um traço
   único do bloco: assim o trecho já percorrido fica verde e o que falta
   continua apagado — a linha do tempo conta o progresso sozinha. */
.visao-rapida-linha-tempo .visao-rapida-passo::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.visao-rapida-linha-tempo .visao-rapida-passo:last-child::before {
    display: none;
}

.visao-rapida-linha-tempo .visao-rapida-passo--feito::before {
    background: var(--mud-palette-success);
    opacity: .45;
}

/* A bolinha do passo cobre o fio — o trecho já percorrido fica com a cor do
   estado e o que falta, apagado. */
.visao-rapida-linha-tempo .visao-rapida-passo__marca {
    position: absolute;
    left: -30px;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
}

.visao-rapida-linha-tempo .visao-rapida-passo--feito .visao-rapida-passo__marca {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: #FFFFFF;
}

.visao-rapida-linha-tempo .visao-rapida-passo--pendente .visao-rapida-passo__titulo {
    color: var(--mud-palette-text-secondary);
}

/* ── Faixa de dados de fonte: pares rótulo/valor em grade ───────────────── */
.visao-rapida-fonte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px 16px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

.visao-rapida-fonte__campo {
    min-width: 0;
}

.visao-rapida-fonte__valor {
    display: block;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.visao-rapida-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}

/* ── Cabeçalho de seção: overline + régua que ocupa a sobra ─────────────── */
.visao-rapida-secao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 8px;
}

.visao-rapida-secao span {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.visao-rapida-secao::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

/* ── Itens: numerados, zebra suave, dinheiro à direita ──────────────────── */
.visao-rapida-itens {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
}

.visao-rapida-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
}

.visao-rapida-item + .visao-rapida-item {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.visao-rapida-item:nth-child(even) {
    background: var(--mud-palette-background-gray);
}

.visao-rapida-item-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.visao-rapida-item-desc {
    min-width: 0;
    flex: 1;
}

.visao-rapida-item-valores {
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Totais: rodapé de cupom, com o total numa faixa destacada ──────────── */
.visao-rapida-totais {
    margin-top: 8px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

.visao-rapida-linha-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 12px;
    font-variant-numeric: tabular-nums;
}

/* Sem borda própria: quem desenha a moldura é o contêiner — a linha do
   total só entra quando existe subtotal acima dela. */
.visao-rapida-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--mud-palette-primary-hover);
    font-variant-numeric: tabular-nums;
}

.visao-rapida-linha-total + .visao-rapida-total {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── Rodapé de ações: fixo, separado do conteúdo ────────────────────────── */
.visao-rapida-rodape {
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

/* Observação: caixa discreta com o texto que o vendedor escreveu. */
.visao-rapida-observacao {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    white-space: pre-wrap;
}

@media (max-width: 600px) {
    .visao-rapida-drawer {
        width: 100vw !important;
    }

    .visao-rapida-hero {
        flex-wrap: wrap;
    }

    .visao-rapida-hero__valor {
        text-align: left;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Detalhe do TÍTULO FINANCEIRO (conta a pagar / a receber) — 2026-09-12

   A tela de detalhe era uma grade de inputs `ReadOnly`: seis molduras de
   formulário numa tela que não edita nada, e o chip de status preso numa
   caixa cinza esticada só para acompanhar a altura dos inputs vizinhos.
   Estas classes dão o padrão de LEITURA — rótulo overline + valor — e a faixa
   de números que é a assinatura visual da tela.

   Moram aqui (e não num <style> do .razor) porque são compartilhadas pelos
   dois lados (DadosGeraisTituloCard) e pela tabela de classificação contábil
   — classe reusada vai para o app.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Faixa de números: tiles de dígitos tabulares. Coluna de dinheiro tremendo
   entre linhas parece defeito — daí o tabular-nums e o nowrap. */
.titulo-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 40px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

/* Flex e não grade de frações: com `1fr` um título sem baixa ficava com dois
   tiles de 600px cada, o valor perdido num lado e o vencimento no outro. Os
   números andam juntos, à esquerda, e só quebram linha quando não cabem. */
.titulo-numeros__tile {
    min-width: 150px;
    padding: 4px 0;
}

/* O saldo é o número que decide a ação: ganha uma régua que o separa do resto
   sem virar outro cartão. */
.titulo-numeros__tile--destaque {
    border-left: 1px solid var(--mud-palette-lines-default);
    padding-left: 20px;
    margin-left: -20px;
}

.titulo-numeros__rotulo,
.titulo-dado__rotulo {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.titulo-numeros__valor {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.2;
}

.titulo-numeros__prazo {
    display: block;
    font-size: .75rem;
    line-height: 1.4;
}

/* Faixa de dados: colunas IGUAIS que se acomodam sozinhas. A grade de 12 do
   MudBlazor punia a segunda linha — md="3" depois de um md="6" começa na
   coluna 0 e 3, alinhado a coluna nenhuma da linha de cima. Aqui toda coluna
   tem a mesma largura, e o campo largo ocupa duas. */
.titulo-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 24px;
    margin-top: 20px;
}

.titulo-dados__campo {
    min-width: 0;
    overflow-wrap: anywhere;
}

.titulo-dados__campo--largo {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .titulo-dados__campo--largo {
        grid-column: span 1;
    }
}

/* Um dado de leitura: o valor herda o corpo do tema; só o rótulo muda. */
.titulo-dado__mono,
.titulo-dado__codigo,
.titulo-classificacao__codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}

/* O código da máscara do plano identifica a conta — vem antes do nome, num
   tom secundário, para o nome continuar sendo o que se lê. */
.titulo-dado__codigo,
.titulo-classificacao__codigo {
    color: var(--mud-palette-text-secondary);
    margin-right: 6px;
}

.titulo-classificacao__codigo {
    display: block;
    font-size: .72rem;
    margin-right: 0;
}

/* Cabeçalho de seção dentro de um card: overline + régua que ocupa a sobra
   (mesmo desenho de .visao-rapida-secao, aqui sem o drawer). */
.titulo-secao-regua {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
}

.titulo-secao-regua span {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.titulo-secao-regua__contagem {
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.titulo-secao-regua::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
    order: 1;
}

/* Classificação contábil: a coluna de dinheiro quebrava em duas linhas ("R$"
   em cima, o número embaixo) porque a coluna do nome comia toda a largura.
   Largura fixa para o valor + nowrap resolvem — e o overflow-x salva o
   celular, onde nem assim cabe. */
.titulo-classificacao {
    border-radius: 10px;
    overflow-x: auto;
}

.titulo-classificacao__tabela {
    background: transparent;
}

.titulo-classificacao__valor {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    width: 1%;
}

.titulo-classificacao__descricao {
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .titulo-numeros__tile--destaque {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
}

.agro-menu-lateral {
    /* Tokens do tema dark do menu */
    --menu-bg-top: #244949;
    --menu-bg-bottom: #1A3838;
    --menu-texto: #E8F0F0;
    --menu-texto-secundario: #93AEAE;
    --menu-icone: #B7D0D0;
    --menu-borda: rgba(255, 255, 255, 0.08);
    --menu-hover-bg: rgba(255, 255, 255, 0.06);
    --menu-ativo-bg: rgba(78, 216, 198, 0.12);
    --menu-ativo-texto: #FFFFFF;
    --menu-acento: #4ED8C6;
    --menu-acento-suave: rgba(78, 216, 198, 0.32);
    --menu-favorito: #FFC857;

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    flex: 1;
    background: linear-gradient(180deg, var(--menu-bg-top) 0%, var(--menu-bg-bottom) 100%);
    color: var(--menu-texto);
    font-family: 'Inter', sans-serif;
}

/* Scrollbar discreta dentro do menu */
.agro-menu-lateral__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--menu-borda) transparent;
}

.agro-menu-lateral__nav::-webkit-scrollbar {
    width: 6px;
}

.agro-menu-lateral__nav::-webkit-scrollbar-thumb {
    background: var(--menu-borda);
    border-radius: 3px;
}

.agro-menu-lateral__nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ---------- Workspace switcher (multi-tenant) ---------- */

.agro-menu-lateral__workspace {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--menu-borda);
    /* Nome de conta longo NÃO pode alargar o menu (achado do dono,
       2026-08-08: "Conta Dev — Escritório Pedro Contábil" estourava com
       scroll horizontal). O par min-width:0 + overflow contém o filho
       inflexível (o botão do MudMenu). */
    min-width: 0;
    overflow: hidden;
    /* O menu inteiro e um flex column: sem travar o encolhimento, expandir um
       grupo faz o nav crescer e o flexbox ESPREME este bloco — com
       overflow:hidden o seletor de conta era cortado ao meio e parecia
       sobreposto pelo conteudo de baixo (achado do dono, 2026-09-03). O nav
       ja tem overflow proprio para absorver o excesso. */
    flex-shrink: 0;
}

/* O wrapper que o MudMenu renderiza em volta do ActivatorContent é inline —
   sem largura própria, o botão width:100% referencia o CONTEÚDO (cresce com
   o nome) em vez do menu lateral. Bloco + contenção resolve. */
.agro-menu-lateral__workspace .mud-menu {
    display: block;
    width: 100%;
    min-width: 0;
}

.agro-menu-lateral__workspace-rotulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--menu-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    font-weight: 600;
}

.agro-menu-lateral__workspace-rotulo .mud-icon-root {
    font-size: 0.9rem !important;
    color: var(--menu-acento);
}

.agro-menu-lateral__workspace-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--menu-borda);
    border-radius: 8px;
    color: var(--menu-texto);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.agro-menu-lateral__workspace-btn:hover {
    background: var(--menu-hover-bg);
    border-color: var(--menu-acento-suave);
}

.agro-menu-lateral__workspace-btn .mud-icon-root {
    color: var(--menu-icone);
    font-size: 1.1rem !important;
}

.agro-menu-lateral__workspace-nome {
    flex: 1;
    /* Sem min-width:0 o flex item não encolhe abaixo do texto nowrap e o
       ellipsis nunca dispara — o clássico do flexbox. */
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Etiqueta do workspace cujo cliente esta com a licenca bloqueada. O item ja
   vai Disabled; a etiqueta diz POR QUE, para o clique que nao acontece nao
   parecer defeito da tela. */
.agro-menu-lateral__workspace-bloqueado {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-error);
}

/* Ferramentas de Atendimento — etiqueta do workspace de SUPORTE GR3B no
   seletor. Informativa (Info), nunca vermelha: para o suporte a conta
   bloqueada continua abrível, e a etiqueta diz o papel, nao um impedimento. */
.agro-menu-lateral__workspace-suporte {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-info);
}

/* ---------- Busca ---------- */

.agro-menu-lateral__busca {
    position: relative;
    display: flex;
    align-items: center;
    /* Mesma razao do bloco de workspace: a barra de busca fica ancorada no
       topo — quem rola e o nav. */
    flex-shrink: 0;
    margin: 12px 12px 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--menu-borda);
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
}

.agro-menu-lateral__busca:focus-within {
    border-color: var(--menu-acento-suave);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 0 3px rgba(78, 216, 198, 0.08);
}

.agro-menu-lateral__busca-icone {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--menu-texto-secundario);
    font-size: 1.05rem !important;
    pointer-events: none;
}

.agro-menu-lateral__busca-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 8px 32px 8px 36px;
    color: var(--menu-texto);
    font-size: 0.85rem;
    font-family: inherit;
}

.agro-menu-lateral__busca-input::placeholder {
    color: var(--menu-texto-secundario);
}

/* Esconde o "x" nativo do <input type=search> em Chrome/Safari para usar o nosso */
.agro-menu-lateral__busca-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.agro-menu-lateral__busca-limpar {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--menu-texto-secundario);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.agro-menu-lateral__busca-limpar:hover {
    color: var(--menu-texto);
    background: var(--menu-hover-bg);
}

.agro-menu-lateral__busca-limpar .mud-icon-root {
    font-size: 0.9rem !important;
}

/* ---------- Itens (link individual ou cabeçalho de grupo) ---------- */

.agro-menu-lateral__item-wrapper {
    position: relative;
    display: block;
}

.agro-menu-lateral__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 8px;
    color: var(--menu-texto);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    position: relative;
}

.agro-menu-lateral__item:hover {
    background: var(--menu-hover-bg);
    color: var(--menu-ativo-texto);
    text-decoration: none;
}

.agro-menu-lateral__item:active {
    transform: scale(0.98);
}

.agro-menu-lateral__item-icone {
    color: var(--menu-icone);
    font-size: 1.25rem !important;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.agro-menu-lateral__item:hover .agro-menu-lateral__item-icone {
    color: var(--menu-acento);
}

.agro-menu-lateral__item-texto {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estado ativo: fundo destacado + barra de acento vertical à esquerda + glow */
.agro-menu-lateral__item--ativo {
    background: var(--menu-ativo-bg) !important;
    color: var(--menu-ativo-texto) !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(78, 216, 198, 0.18),
                0 1px 8px rgba(78, 216, 198, 0.08);
}

.agro-menu-lateral__item--ativo::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--menu-acento);
    box-shadow: 0 0 8px var(--menu-acento-suave);
}

.agro-menu-lateral__item--ativo .agro-menu-lateral__item-icone {
    color: var(--menu-acento);
}

/* Filhos (dentro de grupo) — indentação maior */
.agro-menu-lateral__item--filho {
    padding-left: 32px;
    font-size: 0.84rem;
    font-weight: 400;
}

.agro-menu-lateral__item--filho .agro-menu-lateral__item-icone {
    font-size: 1.05rem !important;
}

/* ---------- Grupos (accordion) ---------- */

.agro-menu-lateral__grupo {
    margin-bottom: 2px;
}

.agro-menu-lateral__grupo-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    margin: 2px 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--menu-texto);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}

.agro-menu-lateral__grupo-cabecalho:hover {
    background: var(--menu-hover-bg);
    color: var(--menu-ativo-texto);
}

.agro-menu-lateral__grupo-cabecalho .agro-menu-lateral__item-icone {
    color: var(--menu-icone);
    font-size: 1.25rem !important;
}

.agro-menu-lateral__grupo-cabecalho:hover .agro-menu-lateral__item-icone {
    color: var(--menu-acento);
}

.agro-menu-lateral__grupo--com-ativo .agro-menu-lateral__grupo-cabecalho {
    color: var(--menu-ativo-texto);
}

.agro-menu-lateral__grupo--com-ativo .agro-menu-lateral__grupo-cabecalho .agro-menu-lateral__item-icone {
    color: var(--menu-acento);
}

.agro-menu-lateral__grupo-seta {
    margin-left: auto;
    color: var(--menu-texto-secundario);
    font-size: 1.15rem !important;
    transition: transform 0.2s ease;
}

.agro-menu-lateral__grupo--aberto .agro-menu-lateral__grupo-seta {
    transform: rotate(180deg);
    color: var(--menu-acento);
}

.agro-menu-lateral__grupo-itens {
    margin-left: 0;
    padding-left: 14px;
    border-left: 1px solid var(--menu-borda);
    margin-top: 2px;
    margin-bottom: 6px;
    animation: agro-menu-fadein 0.18s ease-out;
}

@keyframes agro-menu-fadein {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.agro-menu-lateral__grupo-itens .agro-menu-lateral__item--filho {
    padding-left: 18px;
}

.agro-menu-lateral__grupo-itens .agro-menu-lateral__item--ativo::before {
    left: -15px;
}

/* ---------- Separador "Favoritos" ---------- */

.agro-menu-lateral__separador {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 12px 6px;
    color: var(--menu-favorito);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.agro-menu-lateral__separador .mud-icon-root {
    font-size: 0.95rem !important;
}

.agro-menu-lateral__divisor {
    height: 1px;
    background: var(--menu-borda);
    margin: 10px 4px 4px;
}

/* ---------- Sub-cabeçalhos por categoria (intra-módulo) ----------
   Aparecem dentro de cada grupo expandido quando o módulo tem ≥2
   categorias (Painel/Cadastros/Movimentação/Relatórios). Tom mais
   discreto que o __separador "Favoritos" (sem ícone, sem cor de
   destaque) para não competir com o título do módulo. */
.agro-menu-lateral__subcabecalho {
    padding: 10px 8px 4px 18px;
    margin-top: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--menu-texto-secundario);
    opacity: 0.65;
    user-select: none;
}

.agro-menu-lateral__subcabecalho:first-child {
    padding-top: 2px;
    margin-top: 0;
}

/* Painel-do-módulo: peso visual ligeiramente maior para sinalizar
   que é o ponto de partida do módulo (ex: "Painel Financeiro"). */
.agro-menu-lateral__item--painel-modulo {
    font-weight: 500 !important;
    color: var(--menu-ativo-texto, var(--menu-texto));
}

/* ---------- Estrela (favoritar) ---------- */

.agro-menu-lateral__estrela {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--menu-texto-secundario);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    z-index: 2;
}

.agro-menu-lateral__item-wrapper:hover .agro-menu-lateral__estrela {
    opacity: 0.7;
}

.agro-menu-lateral__estrela:hover {
    opacity: 1 !important;
    color: var(--menu-favorito);
    background: var(--menu-hover-bg);
}

.agro-menu-lateral__estrela--ativa {
    opacity: 1;
    color: var(--menu-favorito);
}

.agro-menu-lateral__estrela .mud-icon-root {
    font-size: 1rem !important;
}

/* ---------- Estado vazio (busca sem resultados) ---------- */

.agro-menu-lateral__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--menu-texto-secundario);
    font-size: 0.82rem;
    text-align: center;
}

.agro-menu-lateral__vazio .mud-icon-root {
    font-size: 2rem !important;
    opacity: 0.6;
}

/* ---------- Rodapé (GR3B + versão) ---------- */

.agro-menu-lateral__rodape {
    margin-top: auto;
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid var(--menu-borda);
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.agro-menu-lateral__assinatura {
    width: 100%;
    display: flex;
    justify-content: center;
}

.agro-menu-lateral__gr3b {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--menu-texto-secundario);
    text-decoration: none;
    transition: opacity 0.15s, color 0.15s;
    min-width: 0;
}

.agro-menu-lateral__gr3b:hover {
    opacity: 1;
    color: var(--menu-texto);
    text-decoration: none;
}

.agro-menu-lateral__gr3b img {
    height: 22px;
    width: auto;
    flex-shrink: 0;
    opacity: 0.85;
    filter: brightness(1.4) contrast(1.05);
}

.agro-menu-lateral__gr3b:hover img {
    opacity: 1;
}

.agro-menu-lateral__texto {
    font-size: 0.72rem;
    color: inherit;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.agro-menu-lateral__versao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.7rem;
    color: var(--menu-texto-secundario);
    background: transparent;
    border: 1px solid var(--menu-borda);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.agro-menu-lateral__versao:hover {
    color: var(--menu-acento);
    border-color: var(--menu-acento-suave);
    background: var(--menu-ativo-bg);
}

.agro-menu-lateral__versao .mud-icon-root {
    font-size: 0.95rem !important;
}

/* ---------- Modo mini do drawer (rail colapsado, desktop) ----------
   No rail colapsado esconde tudo que não seja ícone e NÃO expande mais por
   hover (OpenMiniOnHover=false). As opções de cada módulo aparecem num menu
   flutuante (ver "Menu flutuante do rail" abaixo). Os ícones ficam
   centralizados pelo MudBlazor que ajusta o container. */

.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__workspace,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__busca,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__separador,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__divisor,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__item-texto,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__grupo-seta,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__estrela,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__texto,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__versao span,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__vazio {
    display: none;
}

.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__nav {
    padding: 12px 6px;
}

.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__item,
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__grupo-cabecalho {
    justify-content: center;
    padding: 10px 0;
}

/* No rail colapsado, as estruturas do accordion ficam achatadas — não há
   indentação esquerda nem borda vertical (que ficaria órfã sem itens). */
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__grupo-itens {
    padding-left: 0;
    border-left: none;
}

.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__item--filho {
    padding-left: 0;
}

/* A barra de acento da esquerda sai do rail; reposiciona um pouco para dentro */
.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__item--ativo::before {
    left: 0;
}

.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__rodape {
    padding: 10px 4px 12px;
}

.mud-drawer-mini.mud-drawer--closed .agro-menu-lateral__versao {
    padding: 4px 6px;
    border: none;
    background: transparent;
}

/* ---------- Grupo no rail colapsado (gatilho do flyout) ----------
   Cada módulo é um MudMenu (hover) cujo ActivatorContent é só o ícone.
   O .mud-menu precisa ocupar a largura do rail para o ícone centralizar. */
.agro-menu-lateral__grupo--rail.mud-menu {
    display: block;
    width: 100%;
}

.agro-menu-lateral__grupo--rail.mud-menu > .mud-menu-activator {
    display: block;
    width: 100%;
}

.agro-menu-lateral__grupo-cabecalho--rail {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    margin: 2px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.agro-menu-lateral__grupo-cabecalho--rail:hover {
    background: var(--menu-hover-bg);
}

.agro-menu-lateral__grupo-cabecalho--rail .agro-menu-lateral__item-icone {
    color: var(--menu-icone);
    font-size: 1.25rem !important;
    transition: color 0.15s ease;
}

.agro-menu-lateral__grupo-cabecalho--rail:hover .agro-menu-lateral__item-icone {
    color: var(--menu-acento);
}

/* Módulo com página ativa: ícone destacado no rail */
.agro-menu-lateral__grupo--com-ativo .agro-menu-lateral__grupo-cabecalho--rail .agro-menu-lateral__item-icone {
    color: var(--menu-acento);
}

/* ---------- Menu flutuante do rail (flyout do módulo) ----------
   Popover portado para o body (fora do drawer) com as opções do módulo.
   Tokens literais porque as variáveis --menu-* vivem em .agro-menu-lateral,
   que não é ancestral do popover. */
.mud-popover.agro-menu-flyout-pop {
    background: linear-gradient(180deg, #244949 0%, #1d3c3c 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
    color: #E8F0F0;
    min-width: 226px;
}

/* Reseta o MudList interno — o card escuro do popover controla o visual. */
.agro-menu-flyout-pop .mud-list,
.agro-menu-flyout__lista {
    padding: 6px !important;
    background: transparent !important;
}

.agro-menu-flyout__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agro-menu-flyout__titulo-icone {
    color: #4ED8C6;
    font-size: 1.05rem !important;
}

.agro-menu-flyout__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #E8F0F0;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    transition: background 0.13s ease, color 0.13s ease;
}

.agro-menu-flyout__item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #FFFFFF;
    text-decoration: none;
}

.agro-menu-flyout__item-icone {
    color: #B7D0D0;
    font-size: 1.1rem !important;
    flex-shrink: 0;
    transition: color 0.13s ease;
}

.agro-menu-flyout__item:hover .agro-menu-flyout__item-icone {
    color: #4ED8C6;
}

.agro-menu-flyout__item--ativo {
    background: rgba(78, 216, 198, 0.14);
    color: #FFFFFF;
    font-weight: 600;
}

.agro-menu-flyout__item--ativo .agro-menu-flyout__item-icone {
    color: #4ED8C6;
}

/* ---------- Mobile (touch-friendly) ---------- */

@media (max-width: 959px) {
    .agro-menu-lateral__item,
    .agro-menu-lateral__grupo-cabecalho {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 0.95rem;
    }

    .agro-menu-lateral__item--filho {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .agro-menu-lateral__estrela {
        opacity: 0.5;
    }

    .agro-menu-lateral__busca-input {
        font-size: 0.95rem;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ---------- Override do popover do workspace switcher ----------
   MudMenu cria um popover sobre o drawer. Como o popover usa Surface do
   tema (branco), garantimos contraste do hover nele. */
.mud-popover .mud-menu-item:hover {
    background: rgba(45, 86, 86, 0.06);
}

/* ============================================================================
   Header (AppBar) — versão Onda visual r1.

   3 zonas internas (esquerda / direita; centro flexível) com gradient
   sutil do teal escuro pra um teal um pouco mais aceso, borda inferior
   brilhante de 1px que sinaliza separação com o conteúdo, e altura 56px
   alinhada ao novo padrão SaaS moderno.

   Tokens scoped em variáveis CSS dentro de .agro-header.
   ============================================================================ */

.mud-appbar.agro-header {
    --hdr-bg-de: #1F4040;
    --hdr-bg-ate: #2D5656;
    --hdr-borda-inferior: rgba(78, 216, 198, 0.18);
    --hdr-texto: #FFFFFF;
    --hdr-texto-secundario: rgba(255, 255, 255, 0.65);
    --hdr-divisor: rgba(255, 255, 255, 0.14);
    --hdr-hover-bg: rgba(255, 255, 255, 0.08);
    --hdr-acento: #4ED8C6;

    background: linear-gradient(90deg, var(--hdr-bg-de) 0%, var(--hdr-bg-ate) 100%);
    color: var(--hdr-texto);
    box-shadow: 0 1px 0 var(--hdr-borda-inferior),
                0 6px 18px rgba(0, 0, 0, 0.18);
    border-bottom: none;
    padding: 0 16px;
}

/* Reset do toolbar interno do MudAppBar (display flex já vem) */
.agro-header .mud-toolbar {
    height: 100%;
    width: 100%;
    min-height: 56px;
    padding: 0;
    gap: 0;
}

.agro-header__zona {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.agro-header__zona--esquerda {
    flex: 1 1 auto;
    min-width: 0;
}

.agro-header__zona--direita {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 14px;
}

.agro-header__hamburger {
    color: var(--hdr-texto) !important;
}

/* ---------- Brand (logo + nome do app) ---------- */

.agro-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hdr-texto);
    text-decoration: none;
    padding: 4px 8px 4px 4px;
    border-radius: 8px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.agro-header__brand:hover {
    background: var(--hdr-hover-bg);
    text-decoration: none;
    color: var(--hdr-texto);
}

.agro-header__brand-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(78, 216, 198, 0.18), rgba(78, 216, 198, 0.04));
    box-shadow: inset 0 0 0 1px rgba(78, 216, 198, 0.32);
}

.agro-header__brand-icone .mud-icon-root {
    color: var(--hdr-acento) !important;
    font-size: 1.25rem !important;
}

.agro-header__brand-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.agro-header__brand-nome {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.agro-header__brand-tagline {
    font-size: 0.7rem;
    color: var(--hdr-texto-secundario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* ---------- Divisor entre brand e título ---------- */

.agro-header__divisor {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: var(--hdr-divisor);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ---------- Page title (ícone + grupo + título) ---------- */

.agro-header__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
}

.agro-header__titulo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.agro-header__titulo-icone .mud-icon-root {
    color: var(--hdr-texto-secundario) !important;
    font-size: 1.15rem !important;
}

.agro-header__titulo-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.agro-header__titulo-grupo {
    font-size: 0.68rem;
    color: var(--hdr-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 1px;
}

.agro-header__titulo-nome {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hdr-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* ---------- Switch de Produtor (botão custom) ---------- */

.agro-switch-produtor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px 0 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    color: var(--hdr-texto, #fff);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    max-width: 280px;
    min-width: 0;
}

.agro-switch-produtor:hover {
    background: rgba(78, 216, 198, 0.12);
    border-color: rgba(78, 216, 198, 0.42);
}

.agro-switch-produtor:active {
    transform: scale(0.98);
}

.agro-switch-produtor--carregando {
    cursor: default;
    opacity: 0.75;
}

.agro-switch-produtor--carregando:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.agro-switch-produtor--vazio {
    background: rgba(245, 124, 0, 0.12);
    border-color: rgba(245, 124, 0, 0.42);
    color: #FFCC80;
}

.agro-switch-produtor--vazio:hover {
    background: rgba(245, 124, 0, 0.18);
    border-color: rgba(245, 124, 0, 0.6);
}

.agro-switch-produtor--solo {
    cursor: default;
}

.agro-switch-produtor__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00897B, #26A69A);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.agro-switch-produtor__rotulo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
    min-width: 0;
}

.agro-switch-produtor__sup {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hdr-texto-secundario);
    font-weight: 600;
}

.agro-switch-produtor__nome {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hdr-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.agro-switch-produtor__chevron {
    color: var(--hdr-texto-secundario) !important;
    font-size: 1.05rem !important;
    margin-left: 2px;
    flex-shrink: 0;
}

.agro-switch-produtor--carregando .agro-switch-produtor__nome,
.agro-switch-produtor--vazio .agro-switch-produtor__nome {
    color: inherit;
    font-weight: 600;
    padding-left: 4px;
}

.agro-switch-produtor--vazio .mud-icon-root {
    margin-left: 4px;
    color: #FFCC80;
}

.agro-switch-produtor--carregando .mud-icon-root {
    margin-left: 4px;
    color: var(--hdr-texto-secundario);
}

/* ---------- Área direita: ações ---------- */

.agro-header__acoes {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agro-header__acoes .mud-icon-button {
    color: var(--hdr-texto) !important;
}

.agro-header__acoes .mud-icon-button:hover {
    background: var(--hdr-hover-bg);
}

/* Badge das notificações — corner-notification clássico estilo Material:
   pílula pequena ancorada no canto superior direito do sino, ligeiramente
   deslocada pra fora pra não cobrir o ícone. Os 3 problemas que esta
   regra corrige:
     1) MudBadge default usa `inset` (top+right+bottom+left) que joga o
        badge pra cima do viewport (header é position:fixed; top:0) —
        reescrevemos o inset.
     2) MudBadge default tem `width:20px` com box-sizing:border-box que
        esmaga texto longo ("99+") — usamos width:auto + min-width pra
        crescer com o conteúdo.
     3) Badge grande cobria o sino — ancoramos com translate fora do
        wrapper pra que a maior parte fique à direita do ícone. */
.agro-header__acoes .mud-badge-root .mud-badge.mud-badge-overlap.mud-badge-top.right {
    inset: 2px 0 auto auto !important;
    transform: translateX(45%);
    width: auto !important;
    min-width: 18px !important;
    height: auto !important;
    min-height: 18px;
    padding: 2px 6px;
    border: 2px solid var(--hdr-bg-ate);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    box-sizing: content-box;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
    white-space: nowrap;
}

/* ---------- Usuário (avatar + nome + chevron) ---------- */

.agro-header__usuario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 2px 8px 2px 3px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 22px;
    color: var(--hdr-texto);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.agro-header__usuario:hover {
    background: var(--hdr-hover-bg);
    border-color: var(--hdr-divisor);
}

.agro-header__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00897B, #4ED8C6);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.agro-header__usuario-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
    min-width: 0;
}

.agro-header__usuario-nome {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.agro-header__usuario-papel {
    font-size: 0.68rem;
    color: var(--hdr-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.agro-header__usuario-chevron {
    color: var(--hdr-texto-secundario) !important;
    font-size: 1.1rem !important;
    margin-left: 2px;
    flex-shrink: 0;
}

/* ============================================================================
   Mobile / breakpoints
   - < 1280px (md): esconde tagline + papel + texto do usuário (deixa só avatar)
   - < 960px  (sm): esconde texto do brand + grupo do título; comprime switch
   - < 600px  (xs): esconde título completo (só ícone); switch compacto
   ============================================================================ */

@media (max-width: 1279px) {
    .agro-header__brand-tagline {
        display: none;
    }
    .agro-header__usuario-texto {
        display: none;
    }
    .agro-header__usuario {
        padding: 2px 4px;
    }
    .agro-header__usuario-chevron {
        display: none;
    }
    .agro-switch-produtor__nome {
        max-width: 130px;
    }
}

@media (max-width: 959px) {
    .mud-appbar.agro-header {
        padding: 0 10px;
    }
    .agro-header__zona {
        gap: 8px;
    }
    .agro-header__zona--direita {
        gap: 8px;
    }
    .agro-header__brand-texto {
        display: none;
    }
    .agro-header__brand {
        padding: 4px;
    }
    .agro-header__divisor {
        display: none;
    }
    .agro-header__titulo-grupo {
        display: none;
    }
    .agro-header__titulo-nome {
        font-size: 0.9rem;
        max-width: 160px;
    }
    .agro-switch-produtor {
        padding: 0 8px 0 3px;
        height: 36px;
    }
    .agro-switch-produtor__sup {
        display: none;
    }
    .agro-switch-produtor__nome {
        max-width: 100px;
        font-size: 0.8rem;
    }
}

@media (max-width: 599px) {
    .agro-header__titulo-texto {
        display: none;
    }
    .agro-header__titulo {
        gap: 0;
    }
    /* Em xs, comprime ainda mais: switch vira só avatar + chevron */
    .agro-switch-produtor__rotulo {
        display: none;
    }
    .agro-switch-produtor {
        padding: 0 6px 0 3px;
    }
}

/* ============================================================================
   Shell compartilhado das telas de autenticação (Login, Registrar, Esqueci,
   Redefinir). Split-panel em desktop: hero teal à esquerda + formulário à
   direita. Em mobile (<960px) o hero é escondido e o formulário ocupa 100%.

   Princípio de design: sóbrio, estático, reutilizável. O usuário passa por
   essas telas várias vezes — nada deve chamar atenção excessiva.
   ============================================================================ */

.agro-auth {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: 100vh;
    background: var(--mud-palette-background);
}

/* -------- HERO (lado esquerdo) -------- */
.agro-auth__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 64px;
    background: linear-gradient(135deg, #2D5656 0%, #377D7D 100%);
    color: #FFFFFF;
    overflow: hidden;
}

/* Padrão SVG repetido no fundo do hero. Sempre atrás do conteúdo,
   com opacity muito baixa — é textura, não decoração protagonista. */
.agro-auth__hero-padrao {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    pointer-events: none;
}

.agro-auth__hero-conteudo {
    position: relative;
    z-index: 1;
    max-width: 480px;
    width: 100%;
}

.agro-auth__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
}

.agro-auth__marca-nome {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.agro-auth__hero-titulo {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
    color: #FFFFFF;
}

.agro-auth__hero-subtitulo {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 40px 0;
    color: rgba(255, 255, 255, 0.82);
    max-width: 440px;
}

/* Lista de 3 benefícios compartilhada entre todas as telas de auth —
   reforça a identidade "primas" sem criar variações confusas. */
.agro-auth__beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 56px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agro-auth__beneficios li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.92);
}

.agro-auth__beneficios .mud-icon-root {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px;
    border-radius: 50%;
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    flex-shrink: 0;
}

/* Rodapé do hero com assinatura GR3B discreta, alinhada ao canto inferior. */
.agro-auth__hero-rodape {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}

.agro-auth__rodape-rotulo {
    text-transform: uppercase;
    font-weight: 500;
}

.agro-auth__hero-rodape img {
    height: 20px;
    width: auto;
    opacity: 0.75;
    transition: opacity 0.15s;
}

.agro-auth__hero-rodape a:hover img {
    opacity: 1;
}

/* -------- FORMULÁRIO (lado direito) -------- */
.agro-auth__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: #FFFFFF;
}

.agro-auth__form-conteudo {
    width: 100%;
    max-width: 420px;
}

/* A marca compacta (logo + Agroges + subtítulo) só aparece em mobile,
   quando o hero está oculto. Em desktop o hero já traz a marca. */
.agro-auth__form-marca-mobile {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

/* Título específico da tela de auth (fica acima do formulário, após a
   marca em desktop). Pequeno espaçamento para dar respiro antes do form. */
.agro-auth__titulo-form {
    margin-bottom: 8px;
}

/* -------- Bloco "benefícios + assinatura GR3B" em mobile --------
   Reproduz o conteúdo do hero (oculto em <960px) abaixo do formulário,
   para que o usuário primeira-vez ainda enxergue a venda do produto e
   a continuidade de marca, sem competir com o CTA principal. */
.agro-auth__beneficios-mobile {
    display: none;
}

.agro-auth__beneficios.agro-auth__beneficios--mobile {
    margin: 32px 0 16px 0;
    gap: 12px;
}

.agro-auth__beneficios.agro-auth__beneficios--mobile li {
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
}

.agro-auth__beneficios.agro-auth__beneficios--mobile .mud-icon-root {
    color: var(--mud-palette-primary) !important;
    background: rgba(45, 86, 86, 0.10);
}

.agro-auth__rodape-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.04em;
}

.agro-auth__rodape-mobile-rotulo {
    text-transform: uppercase;
    font-weight: 600;
}

.agro-auth__rodape-mobile img {
    height: 28px;
    width: auto;
    opacity: 0.85;
}

/* -------- Responsividade: mobile/tablet estreito -------- */
@media (max-width: 959px) {
    .agro-auth {
        grid-template-columns: 1fr;
        min-height: auto;
        background: var(--mud-palette-background);
    }

    .agro-auth__hero {
        display: none;
    }

    .agro-auth__form {
        min-height: 100vh;
        padding: 24px 16px;
    }

    .agro-auth__form-marca-mobile {
        display: flex;
    }

    .agro-auth__beneficios-mobile {
        display: block;
    }
}

/* -------- Ajuste em telas muito largas: limita o hero -------- */
@media (min-width: 1600px) {
    .agro-auth__hero-conteudo {
        max-width: 520px;
    }
}

/* ---------- Assinatura GR3B (telas públicas/auth) ---------- */
.agro-assinatura-gr3b {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    padding: 24px 16px;
}

.agro-assinatura-gr3b__rotulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.agro-assinatura-gr3b a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
    line-height: 0;
}

.agro-assinatura-gr3b a:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    text-decoration: none;
}

.agro-assinatura-gr3b img {
    height: 64px;
    width: auto;
    display: block;
}

.agro-assinatura-gr3b__slogan {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.agro-assinatura-gr3b__slogan i {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* ---------- Atribuição GR3B na AppBar ---------- */
.agro-appbar-gr3b {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    height: 36px;
}

.agro-appbar-gr3b__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agro-appbar-gr3b a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: opacity 0.15s;
}

.agro-appbar-gr3b a:hover { opacity: 0.8; }

.agro-appbar-gr3b img {
    height: 32px;
    width: auto;
    display: block;
}

/* ---------- Helper "última operação com X" no diálogo de lançamento ---------- */
.agro-ultimo-lancamento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(45, 86, 86, 0.06);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 6px;
}

.agro-ultimo-lancamento__info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.agro-ultimo-lancamento__info .mud-icon-root {
    color: var(--mud-palette-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.agro-ultimo-lancamento__titulo {
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
}

.agro-ultimo-lancamento__detalhe {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

/* ---------- Dica de atalhos de teclado (kbd) ---------- */
kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    vertical-align: baseline;
}

/* ---------- Campo de valor em destaque (diálogo de lançamento) ----------
   O valor é o dado que o produtor confere de relance, então ele é o único
   campo do formulário com corpo maior. A regra mira o `.mud-input` (a caixa),
   não o `<input>`: o MudBlazor declara `.mud-input > input.mud-input-root
   { font-size: inherit }`, com especificidade maior que a de um seletor de
   classe + elemento — mirar o input direto perdia em silêncio. Pela caixa, o
   input herda e o adorno "R$" acompanha; o rótulo flutuante fica de fora
   (é irmão do .mud-input) e mantém o tamanho dos outros campos. */
.agro-campo-valor-destaque .mud-input {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---------- Edição inline na grid (clique duplo) ---------- */
.agro-celula-editavel {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    min-height: 20px;
    transition: background 0.12s;
}

.agro-celula-editavel:hover {
    background: rgba(45, 86, 86, 0.06);
    outline: 1px dashed rgba(45, 86, 86, 0.25);
}

.text-right {
    text-align: right;
}

/* ---------- Barra de ações em massa (seleção múltipla na grid) ---------- */
.agro-barra-acoes-massa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #E0F2F1 0%, #E8F5F5 100%);
    border: 1px solid rgba(45, 86, 86, 0.2);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(45, 86, 86, 0.08);
}

.agro-barra-acoes-massa__info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-primary);
    font-size: 0.95rem;
}

.agro-barra-acoes-massa__info .mud-icon-root {
    color: var(--mud-palette-primary);
}

.agro-barra-acoes-massa__botoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .agro-barra-acoes-massa {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

/* ---------- Preview de linhas afetadas nos diálogos de massa ---------- */
.agro-preview-linha {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.agro-preview-linha:last-child {
    border-bottom: none;
}

.agro-preview-substituicao .agro-preview-linha {
    display: block;
    padding: 8px 0;
}

/* ---------- Stats do diálogo de import CSV ---------- */
.agro-import-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.agro-import-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    border-left: 4px solid var(--mud-palette-lines-default);
}

.agro-import-stat--sucesso { border-left-color: var(--mud-palette-success); }
.agro-import-stat--erro { border-left-color: var(--mud-palette-error); }

.agro-import-stat__valor {
    font-family: 'Manrope', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.agro-import-stat__label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.agro-import-erro {
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.agro-import-erro:last-child {
    border-bottom: none;
}

/* ==================== BATCH 6: Presets de data, busca, stats, sparkline ==================== */

.agro-presets-data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agro-busca-tipo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.agro-busca-campo {
    flex: 1 1 320px;
    min-width: 260px;
}

.agro-rodape-totais {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    gap: 24px;
    flex-wrap: wrap;
}

.agro-rodape-totais__valores {
    display: flex;
    gap: 32px;
}

.agro-sparkline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.agro-sparkline__label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.agro-stats-toggle {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.agro-stats-painel {
    margin-top: 8px;
    padding: 12px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
}

.agro-stat-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px 16px;
    height: 100%;
}

.agro-stat-card__titulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.agro-stat-card__valor {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.agro-stat-card__detalhe {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agro-stat-card__linhas {
    font-size: 0.85rem;
    line-height: 1.6;
}

.text-success { color: var(--mud-palette-success); }
.text-error { color: var(--mud-palette-error); }

.agro-top-contrapartes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.agro-top-linha {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 12px;
}

.agro-top-linha__nome {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agro-top-linha__barra {
    height: 8px;
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.agro-top-linha__preenchido {
    height: 100%;
    background: var(--mud-palette-tertiary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.agro-top-linha__valor {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.agro-top-linha__qtde {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    font-size: 0.78rem;
    margin-left: 4px;
}

@media (max-width: 640px) {
    .agro-rodape-totais {
        flex-direction: column;
        align-items: flex-start;
    }

    .agro-rodape-totais__valores {
        gap: 16px;
        width: 100%;
        justify-content: space-between;
    }

    .agro-top-linha {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ==================== Ajustes finos da grid de Lançamentos ==================== */

/* A coluna "Ações" tem até 4 botões + tooltip e estava sendo cortada como "Aço".
   Garante largura mínima suficiente para todos caberem sem truncar o header. */
.mud-table-cell:has(.agro-celula-editavel) + .mud-table-cell .d-flex.justify-end,
.mud-table-head-cell:last-child,
.mud-table-cell:last-child {
    min-width: 180px;
    white-space: nowrap;
}

/* Alerta info discreto para quando a análise de inconsistências foi suprimida
   por filtro. Visualmente mais leve que Warning para não competir com alertas
   reais. */
.agro-analise-suprimida {
    font-size: 0.82rem;
    opacity: 0.88;
}

/* Sparkline: cursor help indica que há tooltip nativo via <title> ao hover */
.agro-sparkline svg {
    cursor: help;
}

/* ==================== IndicadorForcaSenha ==================== */
.agro-forca-senha {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
}

.agro-forca-senha__criterios {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.agro-forca-senha__criterios li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.agro-forca-senha__criterios li .mud-icon-root {
    font-size: 1rem !important;
}

.agro-forca-senha__criterios .agro-forca-senha__criterios--ok,
li.agro-forca-senha__criterios--ok {
    color: var(--mud-palette-success);
}

.agro-forca-senha__criterios li.agro-forca-senha__criterios--ok .mud-icon-root {
    color: var(--mud-palette-success);
}

li.agro-forca-senha__criterios--pendente {
    opacity: 0.85;
}

/* ==================== Banner de cookies — empurra o conteúdo no mobile ====================
   Em viewports estreitos o banner sticky cobria os últimos KPIs do Painel
   ("Vencimentos da semana", "Margem da safra ativa"). Adicionando padding na
   base do MudMainContent garantimos que o último card fique acessível com
   rolagem. A classe é adicionada/removida pelo BannerCookies via JS interop. */
body.agro-com-banner-cookies .mud-main-content {
    padding-bottom: 140px;
}

@media (min-width: 600px) {
    body.agro-com-banner-cookies .mud-main-content {
        padding-bottom: 96px;
    }
}

/* ==================== EmptyState — 3 variantes calibradas =====================
   Onda agro-first §design-review: o EmptyState padrão (Hero, 4rem, pa-8) era
   reutilizado dentro de KPI cards de 180 px, inflando-os ~50% acima dos cards
   preenchidos vizinhos. As variantes Compact e Medium têm proporção pensada
   para casar visualmente com os cards preenchidos no Stat Strip e no Mosaico
   de gráficos, respectivamente. */
.agro-empty--compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 140px;
}

.agro-empty--compact.agro-empty--clicavel {
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.agro-empty--compact.agro-empty--clicavel:hover,
.agro-empty--compact.agro-empty--clicavel:focus-visible {
    background-color: rgba(125, 125, 125, 0.06);
    outline: none;
}

.agro-empty__compact-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.agro-empty__compact-icone {
    font-size: 1.25rem !important;
    opacity: 0.85;
}

.agro-empty__compact-titulo {
    color: var(--mud-palette-text-secondary);
    line-height: 1;
}

.agro-empty__compact-placeholder {
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 2px;
}

.agro-empty__compact-mensagem {
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agro-empty__compact-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-tertiary);
}

.agro-empty--medium {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    /* §design-review: 290 px casa com a altura de um ApexChart 280 px + título
       de CardSecao, mantendo a linha de 3 cards alinhada no Modo B. */
    min-height: 290px;
}

.agro-empty__medium-icone {
    font-size: 3rem !important;
    opacity: 0.55;
    margin-bottom: 4px;
}

.agro-empty__medium-mensagem {
    color: var(--mud-palette-text-secondary);
    max-width: 320px;
    margin-bottom: 8px;
}

/* ==================== Linha "Mosaico de Safras + Agenda 7d" — altura igual ====
   §design-review: o card de Safras Ativas (esquerda, Empty Medium ~280 px)
   ficava significativamente mais curto que a Agenda 7d (direita, ~540 px com
   8 linhas), criando um "buraco" visual entre as duas colunas. Esticamos a
   coluna mais curta via flex-stretch — o CardSecao já tinha `h-100` (linter
   ajustou); só faltava o pai esticar os filhos. */
.agro-painel-row--match {
    align-items: stretch;
}

.agro-painel-row--match > .mud-grid-item {
    display: flex;
}

.agro-painel-row--match > .mud-grid-item > * {
    flex: 1;
    min-width: 0;
}

/* ==================== Sparkline KPI — clip de overflow visual ================
   §design-review: o ApexCharts em modo sparkline desenha o curve+gradiente
   próximo das bordas; em telas estreitas o pico do dia mais alto (ou a área
   de fill) parecia "vazar" para o card do lado direito ("Estoque crítico").
   Forçamos overflow: hidden no MudPaper de todos os KPIs do strip — qualquer
   conteúdo (sparkline atual, futuros graficos) fica contido pela borda. */
[data-test="stat-strip-agro"] > .mud-grid-item > .mud-paper,
[data-test="stat-strip-carteira"] > .mud-grid-item > .mud-paper {
    overflow: hidden;
}

/* ==================== Stat Strip — altura uniforme dos KPI cards =============
   §design-review: empty Compact, filled simples e filled com sparkline tinham
   alturas diferentes (136 / 172 / 211 px) mesmo com h-100 nos papéis. O h-100
   do MudPaper depende de o MudItem-pai esticar para a altura da linha — o que
   nem sempre acontece no flex do MudGrid. Forçamos um piso de 200 px para
   todos os cards do strip (KPI) e usamos align-items: stretch nos itens para
   que a linha inteira fique alinhada, mesmo quando um card cresce por
   conteúdo extra (ex.: sparkline 14d). */
[data-test="stat-strip-agro"],
[data-test="stat-strip-carteira"] {
    align-items: stretch;
}

[data-test="stat-strip-agro"] > .mud-grid-item,
[data-test="stat-strip-carteira"] > .mud-grid-item {
    display: flex;
}

[data-test="stat-strip-agro"] > .mud-grid-item > .mud-paper,
[data-test="stat-strip-carteira"] > .mud-grid-item > .mud-paper {
    flex: 1;
    min-height: 200px;
    /* §design-review bug fix: o card "Atividades em atraso" tem um ApexChart
       de sparkline com largura intrínseca 300 px. Sem min-width: 0, o flex
       não consegue encolher abaixo do conteúdo, fazendo o card vazar para
       cima do vizinho (overflow visual no Modo A com 1 produtor). Forçando
       min-width: 0 + overflow: hidden no canvas, o card respeita seu 1/6 da
       largura da linha e o sparkline se adapta ao espaço disponível. */
    min-width: 0;
}

[data-test="stat-strip-agro"] .apexcharts-canvas,
[data-test="stat-strip-carteira"] .apexcharts-canvas {
    max-width: 100% !important;
}

[data-test="chart-atividades-sparkline"] {
    width: 100%;
    overflow: hidden;
}

/* ==================== Linha expansível da tabela de Carteira =================
   §design-review: o ChildRowContent recebe o wrapper visual da expansão (fundo
   cinza claro + padding). NÃO usamos <td> aqui — MudDataGrid já gera o TD
   colspan próprio. Aninhar TD criava uma sub-tabela auto-sized que encolhia
   o card de fazenda para 99px quando o produtor tinha 1 fazenda só, cortando
   o chip "Acompanhar" para "Acomp". */
.agro-carteira-expansao {
    background: rgba(125, 125, 125, 0.04);
}

/* §design-review: o cabeçalho do card de fazenda tem 3 itens (ícone + nome +
   chip de status). Em layouts estreitos o nome empurrava o chip para fora.
   flex-shrink: 0 nos extremos + min-width: 0 no centro garantem que o nome
   trunca com elipse e o chip nunca aparece cortado ("Acompanhar" virando
   "Acomp"). */
.agro-card-fazenda__cabecalho {
    min-width: 0;
}

.agro-card-fazenda__titulo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-none {
    flex: 0 0 auto;
}

/* ==================== Rodapé "Plano e cobrança" do Modo B (carteira) ============
   §design-review: o card "Plano e cobrança" virou um rodapé discreto até a
   Etapa 05 entregar uso × limite real. Mantém data-test estável e link para
   futura página, sem ocupar espaço de hero. */
.agro-painel-rodape-plano {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ==================== NotFound — shell mínimo com marca + GR3B ==================== */
.agro-not-found {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--mud-palette-background);
}

.agro-not-found__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: #FFFFFF;
}

.agro-not-found__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.agro-not-found__rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: #FFFFFF;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.04em;
}

.agro-not-found__rodape-rotulo {
    text-transform: uppercase;
    font-weight: 600;
}

.agro-not-found__rodape img {
    height: 28px;
    width: auto;
    opacity: 0.85;
}

/* ==================== Ajustes de tom do snackbar ==================== */

/* O Error do palette (#C62828) é adequado para textos, bordas e chips
   — onde o tom forte ajuda a marcar o estado de erro — mas fica agressivo
   quando cobre todo o background do snackbar. Aqui suavizamos APENAS o
   snackbar para um vermelho médio (Material Red 400), mantendo contraste
   WCAG AA com texto branco mas visualmente menos "gritante". O ícone e
   a tipografia são preservados.
   Também adicionamos uma faixa sutil mais escura na borda esquerda para
   reforçar o estado sem precisar saturar o background. */
.mud-snackbar .mud-alert-filled-error,
.mud-snackbar.mud-alert-filled-error {
    background-color: #EF5350 !important;
    color: #FFFFFF !important;
    border-left: 4px solid #C62828 !important;
}

/* Botão de ação (ex.: "Tentar novamente") e close dentro do snackbar
   de erro ficam bem legíveis sobre o novo tom suave. */
.mud-snackbar .mud-alert-filled-error .mud-icon-root,
.mud-snackbar .mud-alert-filled-error .mud-button-root {
    color: #FFFFFF !important;
}

/* ===== Alvo de toque WCAG AA (44px) em mobile =====
   O style-guide §3.5 fixa Margin.Dense em todos os inputs, o que dá ~40px
   de altura — confortável em desktop mas abaixo do alvo de toque WCAG 2.1
   AA SC 2.5.5 em telas touch. Nesta media query, dentro de qualquer
   MudDialog, ajustamos APENAS o slot interno do input (a área onde o
   usuário toca) para 44px, sem inflar o wrapper externo. */
@media (max-width: 600px) {
    .mud-dialog .mud-input-outlined.mud-input-margin-dense .mud-input-slot {
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* ===== Oculta conteúdo durante aterrissagem de atalho (Etapa 04 Item 17) =====
   Usado em /campo/talhoes?novo=1 para suprimir a listagem até o dialog abrir.
   Mantém layout reservado (sem deslocamento de página) em vez de display:none. */
.agro-oculto {
    visibility: hidden;
}

/* ===== Destaque visual da safra "Em andamento" (Etapa 04 Item 14) =====
   Linha da safra ativa ganha borda esquerda na cor Tertiary, seguindo o
   padrão KPI do style-guide §13. Entre 2+ safras, a ativa fica óbvia
   sem inflar o layout nem repetir o chip de status. */
.mud-table-row.safra-ativa-destaque > td:first-child,
tr.safra-ativa-destaque > td:first-child {
    border-left: 4px solid var(--mud-palette-tertiary);
    padding-left: calc(16px - 4px);
}

/* ===== Espaçamento entre cards empilhados em mobile (Etapa 04 Item 15) =====
   No viewport mobile o DataGrid colapsa em cards. Sem margin-bottom os
   cards ficam colados, dificultando a leitura. Este espaçamento aplica
   só em mobile e só nos DataGrids das páginas de Campo. */
@media (max-width: 600px) {
    [data-test="tabela-safras"] .mud-table-row,
    [data-test="tabela-talhoes"] .mud-table-row,
    [data-test="tabela-apontamentos"] .mud-table-row {
        margin-bottom: 12px;
        border-radius: 4px;
    }
}

/* ============================================================================
   PADRÕES DE TELAS DE CONSULTA
   ============================================================================
   Estilos compartilhados pelos componentes <FaixaKpiConsulta>,
   <BarraFiltrosConsulta> e <CartaoLinhaMobile> da pasta
   `Componentes/Padrao/`, além de resets globais aplicáveis a TODA tela de
   consulta. Documentação: docs/revisao-ux/padroes-consulta.md. */

/* ---------- Reset global: esconde o indicador numérico do sort.
   Sub-regra MudBlazor 8.13 — a classe canônica `mud-sort-index` aparece em
   colunas ordenáveis e mostra o número da coluna na ordenação. Antes era
   escondido per-page via <style> escopado; agora é global e remove o
   ruído visual de TODOS os MudDataGrid do sistema. ---------- */
.mud-data-grid .mud-sort-index {
    display: none !important;
}

/* ---------- KPI cards clicáveis (FaixaKpiConsulta) ----------
   Os cards têm border-left colorido pelo `CorPaleta` do item (inline-style)
   e ganham hover sutil + outline ao ficarem ativos. */
.kpi-card {
    transition: box-shadow 120ms ease, transform 120ms ease;
    /* Auditoria 2026-07-25: sem `height: 100%` cada card ficava com a altura do
       próprio conteúdo (106/82/82/106 px na mesma faixa) e a borda de baixo saía
       serrilhada. O MudItem já estica; falta o card preencher o item. */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
/* Card informativo (sem drill-down): não finge ser clicável. */
.kpi-card--informativo {
    cursor: default;
}
.kpi-card--informativo:hover {
    box-shadow: none;
    transform: none;
}
.kpi-card-ativo {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
/* Repaginação: cabeçalho do KPI (ícone + rótulo) e numeral tabular. */
.kpi-card__head {
    margin-bottom: 2px;
}
.kpi-card__valor {
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Varredura de UX do Light_v3 (item 9) — o texto do card quebrava em quase
   toda faixa (medido a 1.366 px em 16 telas da Pecuária): o detalhe vinha NA
   MESMA LINHA do valor ("3.800 · cabeças, sem contar o mesmo espaço duas
   vezes") e qualquer detalhe longo derrubava o número para duas, três,
   quatro linhas; com seis cards de 164 px, o rótulo também ("Conversão /
   alimentar"). A causa sai no componente (detalhe na linha DELE; seis cards
   viram três por linha). A régua aqui: rótulo em até DUAS linhas, detalhe em
   até duas, com o texto inteiro no title — e o VALOR nunca é cortado: cortar
   "Pedidos confirmados (30d)" perdia o período e um valor em reais com
   reticências esconderia dígitos (medido no painel comercial e em
   movimentos de estoque na 1ª versão, que cortava em uma linha). Aqui, e não
   no <style> do componente: as classes do card moram neste arquivo, e um
   <style> de componente vale para a página inteira. */
.kpi-card__head {
    min-width: 0;
}
.kpi-card__rotulo {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.kpi-card__detalhe {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 2px;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}
/* No celular o title que guarda o texto inteiro não existe no toque: ali o
   detalhe vai até três linhas. */
@media (max-width: 599.95px) {
    .kpi-card__detalhe {
        -webkit-line-clamp: 3;
    }
}

/* ---------- FiltroProdutos (campo de chips que abre a tela de seleção) ----------
   Auditoria 2026-07-25: o MudField renderizava 45px de altura contra os 40px dos
   MudSelect/MudTextField `Margin.Dense` vizinhos — a barra de filtros ficava com
   um campo desalinhado. Fixa a altura do controle na mesma métrica dos irmãos. */
.filtro-produtos-campo .mud-input.mud-input-outlined {
    min-height: 40px;
    max-height: 40px;
    align-items: center;
}
.filtro-produtos-campo .mud-input-control-input-container > .mud-input {
    padding-top: 0;
    padding-bottom: 0;
}

/* ====================================================================
   Módulo PATRIMÔNIO — repaginação visual.
   Tokens + estilos dos componentes próprios em Componentes/Patrimonio/
   (HeaderDetalhePatrimonio, TimelinePatrimonio, BarraProgressoManutencao).
   Prefixo `pat-`. Mantém marca teal + Inter.
   ==================================================================== */
:root {
    --pat-radius-lg: 14px;
    --pat-shadow-card: 0 6px 20px rgba(45, 86, 86, 0.10);
    --pat-transition: 160ms ease;
    --pat-hero-de: #2D5656;   /* Primary */
    --pat-hero-ate: #1F4040;  /* PrimaryDarken */
}

/* ---------- Cabeçalho hero (telas de detalhe) ---------- */
.pat-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--pat-radius-lg);
    padding: 1.25rem 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--pat-hero-de) 0%, var(--pat-hero-ate) 100%);
    box-shadow: var(--pat-shadow-card);
}
.pat-hero--encerrada {
    --pat-hero-de: #37563F;  /* verde-teal sóbrio (encerrada = concluída) */
    --pat-hero-ate: #243A2C;
}
.pat-hero--cancelada {
    --pat-hero-de: #595959;  /* cinza neutro (cancelada) */
    --pat-hero-ate: #3D3D3D;
}
.pat-hero__corpo {
    position: relative;
    z-index: 1;
}
.pat-hero__icone {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pat-hero__icone .mud-icon-root {
    font-size: 2rem;
    color: #fff;
}
.pat-hero__titulo {
    color: #fff;
    line-height: 1.15;
}
.pat-hero__subtitulo {
    color: rgba(255, 255, 255, 0.82);
}
.pat-hero__chips {
    margin-top: 0.5rem;
    gap: 0.4rem;
}
/* chips de identidade (outlined) ficam brancos translúcidos sobre o teal.
   Obs.: a classe do MudBlazor é `mud-chip-outlined` (não `*-variant-outlined`),
   e a cor do texto vive no filho `.mud-chip-content` — daí o alvo explícito. */
.pat-hero__chips .mud-chip.mud-chip-outlined {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
}
.pat-hero__chips .mud-chip.mud-chip-outlined,
.pat-hero__chips .mud-chip.mud-chip-outlined .mud-chip-content,
.pat-hero__chips .mud-chip.mud-chip-outlined .mud-icon-root {
    color: #fff;
}
/* botões do slot de ações (ex.: Voltar Outlined Default) legíveis no escuro */
.pat-hero__acoes .mud-button-root.mud-button-outlined {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 599.95px) {
    .pat-hero { padding: 1rem; }
    .pat-hero__icone { width: 44px; height: 44px; }
    .pat-hero__icone .mud-icon-root { font-size: 1.5rem; }
}

/* ---------- Timeline conectada (aba Linha do tempo) ---------- */
.pat-timeline {
    position: relative;
}
.pat-timeline__item {
    position: relative;
    padding-left: 44px;
    padding-bottom: 1rem;
}
.pat-timeline__item:last-child {
    padding-bottom: 0;
}
/* linha vertical contínua ligando os nós */
.pat-timeline__item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: -4px;
    width: 2px;
    background: var(--mud-palette-divider);
}
.pat-timeline__item:last-child::before {
    display: none;
}
.pat-timeline__no {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-divider);
    z-index: 1;
}
.pat-timeline__no .mud-icon-root {
    font-size: 1.1rem;
}
.pat-timeline__card {
    transition: box-shadow var(--pat-transition), transform var(--pat-transition);
}
.pat-timeline__card:hover {
    box-shadow: var(--pat-shadow-card);
    transform: translateY(-1px);
}

/* ---------- Barra de progresso de manutenção ---------- */
.pat-progress {
    min-width: 150px;
}
.pat-progress__rotulo {
    margin-top: 3px;
    white-space: nowrap;
}

/* ---------- Ícone de categoria por linha (listagens) ---------- */
.pat-linha-categoria {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* ---------- Linha clicável no MudDataGrid (RowClassFunc) ---------- */
.mud-data-grid tr.linha-clicavel {
    cursor: pointer;
}

/* ---------- Barra de filtros: atalhos (chips) com scroll horizontal mobile
   No mobile a faixa de chips pode estourar largura; permite scroll lateral
   sem quebrar visual. */
@media (max-width: 599.95px) {
    .barra-filtros-atalhos {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }
    .barra-filtros-atalhos .mud-chip-set {
        flex-wrap: nowrap;
    }
}

/* ---------- Cartões de linha (CartaoLinhaMobile) ----------
   Renderizados em <div class="consulta-grade-mobile"> dentro da tela. */
.cartao-linha {
    border-left: 3px solid transparent;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cartao-linha-clicavel {
    cursor: pointer;
}
.cartao-linha-clicavel:active {
    border-left-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.cartao-linha-titulo {
    line-height: 1.2;
    word-break: break-word;
}
.cartao-linha-metadata {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}
.cartao-linha-metadata > div {
    margin-top: 2px;
}
.cartao-linha-status {
    flex-shrink: 0;
}
.cartao-linha-acoes {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    gap: 0.5rem;
}

/* ---------- Alternância grade desktop ↔ cards mobile (< 600px) ----------
   Convenção: a tela renderiza DUAS estruturas — a grade (MudDataGrid) e a
   lista de cards (CartaoLinhaMobile dentro de @foreach) — cada uma envolta
   por uma div com a classe correspondente. O CSS controla qual fica
   visível, evitando lógica de viewport em C#/JS e mantendo HMR responsivo. */
.consulta-grade-desktop {
    display: block;
}
.consulta-grade-mobile {
    display: none;
}
@media (max-width: 599.95px) {
    .consulta-grade-desktop {
        display: none;
    }
    .consulta-grade-mobile {
        display: block;
    }
}

/* ---------- Barra da grade (`consulta-grade-barra`) ----------
   Consultas de imóveis e contas bancárias (2026-09-11). O botão "Selecionar
   vários" morava no canto DIREITO do PageHeader — com o menu lateral aberto o
   operador rolava a tela para alcançá-lo. A barra fica colada na grade, à
   esquerda, com o botão de seleção e o menu "Colunas"; à direita, o
   ContadorResultados. Ela vive DENTRO do CardSecaoCompacto e FORA do
   MudDataGrid (os testes leem o texto da grade e não podem achar "Colunas"
   ali). O ContadorResultados traz `mb-2` próprio, que desalinharia a linha —
   por isso o zero abaixo. */
.consulta-grade-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 8px;
}
.consulta-grade-barra__acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.consulta-grade-barra .mb-2 {
    margin-bottom: 0 !important;
}
@media (max-width: 599.95px) {
    /* No celular a lista vira cartões — não há coluna para escolher. */
    .consulta-grade-barra__colunas {
        display: none;
    }
}

/* ---------- Grade sem quebra de linha (`grade-sem-quebra`) ----------
   Opt-in por classe no wrapper `consulta-grade-desktop`: célula que quebra em
   duas ou três linhas dá cara de rascunho à consulta. Com nowrap a grade
   cresce para o lado e o MudDataGrid rola dentro do card — junto com
   `grade-acoes-fixas`, as ações continuam à mão. Não é global de propósito:
   41 telas usam a grade e algumas dependem da quebra. */
.grade-sem-quebra .mud-table-cell,
.grade-sem-quebra .mud-table-head-cell {
    white-space: nowrap;
}
/* Chip com nome longo (o produtor "COOP. DOS EMPRESARIOS RURAIS DE ... E
   REGIAO" levava a coluna a 533 px, provado ao vivo em 2026-09-11): dentro da
   grade sem quebra o chip trunca com reticências — o nome inteiro está no
   drawer e no filtro. */
.grade-sem-quebra .mud-chip {
    max-width: 220px;
}
.grade-sem-quebra .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* A regra global `.mud-table-cell:last-child { min-width: 180px }` (escrita
   para os Lançamentos) sobra aqui: a coluna Ações tem dois ou três ícones e
   ficava 80 px vazia — e é justamente a coluna fixa, que cobre as outras. */
.grade-sem-quebra .mud-table-cell:last-child,
.grade-sem-quebra .mud-table-head-cell:last-child {
    min-width: 112px;
}
/* Padding lateral do MudBlazor na grade densa (16 + 24 px por célula: 400 px
   só de respiro em 10 colunas). Com a célula numa linha só a grade precisa
   desse espaço para o CONTEÚDO — medido em Contas a pagar (2026-09-11):
   1.622 px de tabela para 1.236 px de container. 12 px de cada lado; o
   seletor com .mud-table-dense ganha do padrão do MudBlazor por
   especificidade, não por ordem. */
.grade-sem-quebra .mud-table-cell,
.grade-sem-quebra .mud-table-dense .mud-table-cell {
    padding-left: 12px;
    padding-right: 12px;
}

/* ---------- Célula truncada compartilhada ----------
   O nome da fazenda e a descrição da conta são os textos que variam; uma
   linha só, reticências e o conteúdo inteiro no `title`. Generaliza as cópias
   `lc-celula-truncada` (Livro Caixa) e `os-celula-truncada` (OS) para as
   grades que NÃO usam `table-layout: fixed` — por isso o max-width em px, não
   em %. */
.consulta-celula-truncada {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.consulta-celula-truncada--larga {
    max-width: 320px;
}
/* Contas a pagar/receber (2026-09-11): o padrão de 7 colunas só cabe sem
   rolar em ~1.240 px com Contraparte, Descrição e Conta contábil em 200 px
   (medido: 220 px deixava a coluna Status sob a coluna Ações fixa). */
.consulta-celula-truncada--compacta {
    max-width: 200px;
}

/* ---------- Coluna de ações fixa à direita (`grade-acoes-fixas`) ----------
   Auditoria E2E Estoque (2026-07-22) — E-01. Grades largas (Produtos, Saldo,
   Movimentos, Combustível) estouram o container em telas de 1366–1500px: o
   MudDataGrid rola horizontalmente e a ÚLTIMA coluna — justamente a de ações —
   fica fora da viewport. Em Produtos isso deixava "Inativar" inalcançável (só
   "Editar" tinha o atalho de clique na linha).

   Solução: fixar a última célula da grade no canto direito do container
   rolável. Opt-in por classe para não mexer em grades cuja última coluna é de
   dados. O fundo opaco é obrigatório (sticky não recorta o que passa embaixo);
   por isso repetimos a cor nos estados hover/selected, senão a célula fixa
   destoaria da linha realçada. */
.grade-acoes-fixas .mud-table-container {
    /* Cria o contexto de rolagem que o `position: sticky` usa como referência. */
    position: relative;
}
.grade-acoes-fixas table > thead > tr > th:last-child,
.grade-acoes-fixas table > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    /* Sombra sutil só enquanto há corte à direita; sem overflow o box-shadow
       fica encostado na borda e passa despercebido. */
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.18);
}
.grade-acoes-fixas table > thead > tr > th:last-child {
    z-index: 3;
    background-color: var(--mud-palette-background-gray);
}
/* Linhas realçadas (hover) e selecionadas do MudBlazor pintam o <tr>; a célula
   fixa precisa acompanhar para não virar um retângulo claro no meio da linha.

   ATENÇÃO (2026-07-23): as cores de estado da paleta são rgba() com alpha
   baixíssimo — `--mud-palette-table-hover` é rgba(0,0,0,0.039) e
   `--mud-palette-primary-hover`, rgba(...,0.059). Usá-las direto em
   `background-color` substituía o fundo opaco e deixava a célula ~94%
   TRANSPARENTE: no hover as colunas que rolam por baixo reapareciam por cima
   dos botões de ação, que continuavam clicáveis mas ilegíveis.

   Por isso o tom do estado entra como CAMADA (`background-image`) sobre o
   `background-color: surface` definido na regra base acima — o resultado
   visual é o mesmo da linha, só que 100% opaco. Não trocar por
   `background-color` sem compor a cor com a superfície antes. */
.grade-acoes-fixas table > tbody > tr:hover > td:last-child {
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}
.grade-acoes-fixas table > tbody > tr.mud-table-row-selected > td:last-child {
    background-image: linear-gradient(var(--mud-palette-primary-hover), var(--mud-palette-primary-hover));
}
@media (max-width: 599.95px) {
    /* Abaixo de 600px a grade nem aparece (cards mobile assumem) — desliga o
       sticky para não deixar resíduo em impressões/edge cases. */
    .grade-acoes-fixas table > thead > tr > th:last-child,
    .grade-acoes-fixas table > tbody > tr > td:last-child {
        position: static;
        box-shadow: none;
    }
}

/* ---------- Larguras da grade do Livro Caixa ----------
   Revisão E2E do Livro Caixa (2026-08-31). Doze colunas pediam 1579 px num
   container de 936 px: Entrada, Saída e a coluna de ações ficavam fora da
   viewport. Duas colunas viraram linha secundária (origem do evento no
   histórico, tipo de documento na contraparte) e a de ações passou a ser fixa
   — mas fixar sem apertar as larguras só troca o defeito de lugar: a coluna
   fixa passa a COBRIR os valores que rolam por baixo, e o valor é justamente
   o que se vem ver num livro caixa.

   Mesma receita da grade de OS: `table-layout: fixed` + `width: 100%` é o que
   faz a tabela CABER (sem isso as larguras são sugestão e a tabela cresce com
   o conteúdo). As colunas de tamanho previsível ganham largura fixa e o espaço
   que sobra vai para o histórico, que é o texto que varia. */
.lc-grade table {
    table-layout: fixed;
    width: 100%;
}
.lc-grade table > tbody > tr > td { overflow: hidden; }

/* A coluna de seleção é o caso especial da grade. O MudBlazor não aceita
   HeaderClass/CellClass nela (passá-los faz a SelectColumn não renderizar) E
   escreve `style="width:0%"` INLINE no cabeçalho — estilo inline vence
   qualquer regra de folha, então o `!important` aqui não é preguiça, é a única
   saída. Sem ele o cabeçalho fica com 0 px, o checkbox transborda a célula e a
   tabela passa a rolar 64 px por baixo da coluna fixa de ações. Ela é mirada
   pela POSIÇÃO porque para quem só lê a seleção não existe e a primeira coluna
   passa a ser a Data (que já tem a sua classe). */
.lc-grade table > thead > tr > th:first-child:not([class*="lc-col-"]),
.lc-grade table > tbody > tr > td:first-child:not([class*="lc-col-"]) {
    width: 48px !important;
    padding: 0 4px !important;
}
/* 96 px: "31/08/2026" mais o ícone de competência sem quebrar em duas linhas. */
.lc-col-data { width: 96px; padding-left: 8px !important; padding-right: 8px !important; }
/* Imóvel e conta bancária na MESMA coluna, uma por linha. */
.lc-col-onde { width: 150px; }
.lc-col-contraparte { width: 112px; }
.lc-col-categoria { width: 150px; }
/* 96 px comporta "999.999,00" — acima disso o produtor lê pelo totalizador. */
.lc-col-valor { width: 96px; }
.lc-col-acoes { width: 148px; padding: 0 4px !important; }

/* Texto que não cabe trunca com reticências e leva o conteúdo inteiro no
   `title` — sem isto ele escapa por cima da coluna vizinha. */
.lc-celula-truncada {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Larguras da grade de Ordens de Serviço ----------
   Revisão E2E da OS (rodada 1). A tabela pedia 1414 px num container de
   1006 px em tela de 1366: a coluna de ações — fixa à direita e com 337 px,
   porque tinha sete controles soltos, um deles um botão com texto — passava
   por cima de Prestador, Custo e Status. Quem consulta OS quer ver
   exatamente o custo e o estado.

   As ações passaram a ser três ícones + menu "⋮" (ver OrdensServico.razor) e
   as colunas de tamanho previsível ganharam largura fixa, para o espaço
   sobrar onde o texto varia (bem, descrição, prestador). Mesmo recurso que
   `apont-col-acoes`/`apont-col-cod` já usavam em Apontamentos. */
/* `table-layout: fixed` + `width: 100%` é o que faz a grade CABER: sem ele
   as larguras abaixo são só sugestão, a tabela cresce com o conteúdo e volta
   a rolar por baixo da coluna fixa. Toda coluna de texto trunca com
   reticências e leva o texto inteiro no `title`. */
.os-grade table {
    table-layout: fixed;
    width: 100%;
}
.os-col-num { width: 52px; padding: 0 4px !important; }
/* Padding apertado pelo mesmo motivo do Tipo: "ha 1108 dias" nao pode virar
   "ha 1108..." — o numero de dias e a informacao. */
.os-col-data { width: 98px; padding-left: 8px !important; padding-right: 8px !important; }
/* Padding apertado: com os 16 px de cada lado do MudDataGrid, o ícone e o
   gap, "Preventiva" saía como "Preven…". */
.os-col-tipo { width: 122px; padding-left: 6px !important; padding-right: 6px !important; }
/* 120 px: "R$ 17.000,00" saía cortado em "R$ 17.000,0(" com 104. */
.os-col-custo { width: 120px; }
.os-col-status { width: 144px; }
.os-col-acoes { width: 120px; padding: 0 4px !important; }

/* Com layout fixo a célula precisa recortar o que passa do limite; sem isto
   o texto escapa por cima da coluna vizinha. */
.os-grade table > tbody > tr > td { overflow: hidden; }

/* O prestador vem na segunda linha da célula do serviço — secundário na
   hierarquia, como no cartão mobile. */
.os-celula-secundaria {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

/* Descrição e prestador são os campos que esticam a linha sem acrescentar
   informação: uma linha só, com reticências, e o texto inteiro no title. */
.os-celula-truncada {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Larguras da grade de Bens ----------
   Mesmo caso da grade de OS (revisão E2E da OS, rodada 4): onze colunas
   pediam 1511 px num container de 1006 e a coluna fixa cobria quatro colunas
   de dado. Aqui a identificação do bem (código, marca/modelo) e a do valor
   (data, contábil) viraram segunda linha da própria célula. */
.bem-grade table {
    table-layout: fixed;
    width: 100%;
}
.bem-grade table > tbody > tr > td { overflow: hidden; }
.bem-col-categoria { width: 108px; }
/* 152 px: o identificador e a placa/serie que separa duas maquinas iguais —
   "S/N-DEF0-00023" nao pode virar "S/N-DEF0-...". */
.bem-col-identificador { width: 152px; }
.bem-col-leitura { width: 124px; }
.bem-col-valor { width: 148px; }
.bem-col-status { width: 92px; }
.bem-grade table > thead > tr > th:last-child,
.bem-grade table > tbody > tr > td:last-child { width: 116px; padding: 0 4px !important; }

/* ---------- FAB "voltar ao topo" (BotaoVoltarAoTopo) ----------
   Fica fixed no canto inferior direito. Snackbar default do MudBlazor é
   bottom-left → sem colisão. Visibilidade controlada via classe `--visivel`
   alternada pelo JS quando window.scrollY > limite (default 300px).
   z-index 1300: acima da AppBar (1100) e abaixo de Dialog (1400). */
.botao-voltar-topo {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.95);
    transition: opacity 200ms ease, transform 200ms ease;
}
.botao-voltar-topo--visivel {
    /* !important porque alguma regra de .mud-fab/.mud-button-root vencia
       a cascade em opacity+transform (mas não em pointer-events) na build
       atual do MudBlazor — replicar via specificity quebraria com upgrades. */
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* CRÍTICO: enquanto o FAB está visível, o JS adiciona `tem-fab-topo` no body.
   Esse padding-bottom garante que o FAB nunca sobreponha o último item da
   lista nem botões de ação dentro dele (problema relatado: FAB cobria o
   último card no fim do scroll). 88px = altura FAB Small (~40px) + folga. */
body.tem-fab-topo {
    padding-bottom: 88px;
}
@media (max-width: 599.95px) {
    /* No mobile o FAB fica um pouco mais para dentro para não conflitar com
       gestos de borda (Android back) e com o pager numérico do final da lista. */
    .botao-voltar-topo {
        bottom: 16px;
        right: 16px;
    }
}

/* ============================================================
   Onda Agenda v4 (C0 mobile) — Bottom sheets.
   Quando a viewport é < 600px, MudDialog ancora na parte inferior da tela
   e sobe com slide-up, preservando contexto da tela atrás (em vez de
   ocupar toda a tela como modal full-screen). Padrão Material Design.
   Aplicado a TODOS os dialogs do app — ganho de UX universal.
   ============================================================ */
@media (max-width: 599.95px) {
    .mud-dialog-container {
        align-items: flex-end !important;
    }
    .mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh;
        animation: bottom-sheet-slide-in 220ms ease-out;
    }
    .mud-dialog-content {
        max-height: calc(90vh - 120px); /* deixa headerActions visíveis */
        overflow-y: auto;
    }
    /* Drag handle visual no topo do bottom sheet (CSS puro, indica
       affordance — não captura touch real, só sinaliza). */
    .mud-dialog::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--mud-palette-lines-default);
        border-radius: 2px;
        margin: 8px auto 4px;
    }
}
@keyframes bottom-sheet-slide-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@media (max-width: 599.95px) and (prefers-reduced-motion: reduce) {
    .mud-dialog { animation: none; }
}

/* ============================================================
   Onda Agenda v4 (C0 mobile) — Pull-to-refresh em /agenda (hub unificado).
   Marker hover, animação simples. JS no pull-refresh.js controla o offset.
   ============================================================ */
.ptr-host {
    position: relative;
    overflow-anchor: none;
}
.ptr-indicator {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-tertiary);
    border-top-color: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}
.ptr-host.ptr-pulling .ptr-indicator {
    opacity: 1;
}
.ptr-host.ptr-refreshing .ptr-indicator {
    opacity: 1;
    animation: ptr-spin 600ms linear infinite;
}
@keyframes ptr-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ptr-host.ptr-refreshing .ptr-indicator { animation: none; }
}

/* ============================================================
   Rodapé canônico de DialogActions — padronização global.

   Todos os ~80 dialogs do app seguem o mesmo wrapper dentro do
   <DialogActions>:
       <div class="d-flex flex-wrap align-center justify-end gap-2 pa-2" …>

   Três problemas que estas regras corrigem:

   1) "Cancelar acima de Salvar" — quando o dialog é estreito
      (MaxWidth.Small em desktop ou bottom sheet em mobile), o
      flex-wrap horizontal joga o último botão pra linha de baixo
      sozinho. O detector é a largura do CONTAINER (o próprio
      dialog), não a viewport — Small ≈ 600 px ainda tem o problema
      mesmo em monitor 4K. Por isso usamos container queries.

   2) Em telas < 600 px (bottom sheet), os botões são empilhados
      verticalmente com a ação primária (Filled, geralmente
      Salvar/Confirmar) sempre no topo — padrão Material para
      bottom sheets, mais alcançável com o polegar.

   3) Hint "Esc: cancelar · Ctrl+Enter: salvar" aparecendo em
      mobile/tablet touch. O `d-none d-sm-inline` original só
      controlava por largura — tablets touch ≥ 600 px continuavam
      mostrando o atalho. Agora ele só aparece em ponteiro fino
      (mouse) — dispositivos com teclado físico real.

   Nota: alguns dialogs envolvem o botão Salvar num <div>
   data-test extra para selectors E2E. As regras abaixo lidam
   tanto com botão direto quanto com botão dentro de wrapper.
   ============================================================ */

/* Dica de atalho de teclado: apenas em ponteiro fino (mouse).
   Cobre todo dispositivo touch independente da largura — as classes
   utilitárias `d-none d-sm-inline` que as dicas também usam medem LARGURA, e
   tablet touch de 600px+ continuava mostrando "Esc: cancelar".

   🔴 A mira era `.mud-dialog-actions .mud-typography-caption`, ou seja, TODO
   caption de TODO rodapé de diálogo. Medido na passada mobile de 2026-08-31:
   além das 5 dicas de atalho que ela existe para esconder, apagava 7 captions
   que são INFORMAÇÃO — os contadores "N produtos/contrapartes/bens/itens
   selecionados" (o único lugar que diz quantos itens estão marcados) e, pior,
   a linha de PENDÊNCIA em cor de erro de AplicarEmVeiculosDialog e
   AplicarNoCampoDialog. Essa linha existe, nas palavras do comentário do
   próprio componente, porque o botão ficava "apagado sem nenhuma pista do que
   faltava" — e no celular a regra apagava justamente a pista, deixando o
   produtor diante de um botão morto sem explicação.

   Agora a mira é a classe da dica. */
@media (pointer: coarse), (hover: none) {
    .mud-dialog-actions .dialog-dica-atalho {
        display: none !important;
    }
}

/* Container queries — detecta largura do próprio dialog, não da viewport.
   Mantido para futuras regras responsivas ao tamanho do dialog. */
.mud-dialog-actions > .d-flex.flex-wrap.justify-end {
    container-type: inline-size;
    container-name: dialog-rodape;
}

/* Caption antigo "Esc: cancelar · Ctrl+Enter: salvar" substituído por
   tooltip pseudo-element nos próprios botões (ver bloco "Tooltip de
   atalho" abaixo). Mantém o nó no markup para não exigir mudança em
   80+ dialogs — apenas esconde visualmente. */
.mud-dialog-actions > .d-flex.flex-wrap.justify-end > .mud-typography-caption {
    display: none !important;
}

/* ----------------------------------------------------------------
   Chip de atalho de teclado (pseudo-element ::after).
   O JS dialog-atalhos.js adiciona data-atalho="Esc" / "Ctrl + Enter"
   aos botões Cancelar/Salvar/Confirmar do rodapé. Renderizado como
   um pequeno chip sempre visível encostado ao texto do botão —
   padrão Linear/Notion/Slack: discreto e parte do UI, não um popup.

   Só em ponteiro fino (mouse/teclado real) — sem efeito em touch.
   Também escondido em mobile (botão full-width fica limpo).
   ---------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* MudButton já usa ::after internamente (efeito ripple), então
       posicionamos o chip via ::before e reordenamos com order:1 para
       ficar visualmente à DIREITA do .mud-button-label (que tem ordem
       padrão 0 no flex container do botão). */
    .mud-dialog-actions button.mud-button-root[data-atalho]::before {
        content: attr(data-atalho);
        order: 1;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 8px;
        padding: 2px 6px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.02em;
        color: var(--mud-palette-text-secondary);
        background: rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0.7;
    }
    /* Dentro do botão Filled (Salvar/Confirmar) o chip precisa
       contrastar com fundo escuro do tema — usamos branco translúcido. */
    .mud-dialog-actions button.mud-button-filled[data-atalho]::before {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.18);
        opacity: 0.85;
    }
    /* Em modo loading ("Salvando…") o chip atrapalha — esconde. */
    .mud-dialog-actions button.mud-button-root[data-atalho][disabled]::before {
        display: none;
    }
}

/* Mobile: botões viram full-width empilhados — o chip dentro
   poluiria o layout. Esconde. */
@media (max-width: 599.95px) {
    .mud-dialog-actions button.mud-button-root[data-atalho]::before {
        display: none !important;
    }
}

/* Mobile / bottom sheet: empilha botões com a ação primária no topo. */
@media (max-width: 599.95px) {
    .mud-dialog-actions > .d-flex.flex-wrap.justify-end {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px !important;
    }
    /* Filhos diretos esticam (cobre tanto MudButton direto quanto
       botão envolvido num <div data-test="…"> wrapper). */
    .mud-dialog-actions > .d-flex.flex-wrap.justify-end > .mud-button-root,
    .mud-dialog-actions > .d-flex.flex-wrap.justify-end > div:not(.mud-checkbox):not(.mud-input-control) {
        width: 100%;
        margin: 0;
    }
    /* Dentro do wrapper <div>, o MudButton em si também estica. */
    .mud-dialog-actions > .d-flex.flex-wrap.justify-end > div > .mud-button-root {
        width: 100%;
    }
    /* Checkbox "Continuar cadastrando/editando" não estica — fica alinhado
       à esquerda abaixo dos botões para não parecer mais um botão. */
    .mud-dialog-actions > .d-flex.flex-wrap.justify-end > .mud-input-control-boolean-input,
    .mud-dialog-actions > .d-flex.flex-wrap.justify-end > .mud-checkbox {
        align-self: flex-start;
        width: auto;
        margin: 0;
    }
    /* Caption de atalho não aparece em mobile (regra acima já cobre,
       mas garante mesmo se for desktop pequeno com mouse). */
    .mud-dialog-actions > .d-flex.flex-wrap.justify-end > .mud-typography-caption {
        display: none !important;
    }
}

/* ============================================================
   Padronização global de diálogos — DialogHeader + RodapeDialogo
   (Componentes/Padrao). Generaliza o cabeçalho do Patrimônio
   (ícone em círculo teal + título + subtítulo explicativo) para
   todos os módulos, e dá ao rodapé um layout que não aglomera:
   a flag "Continuar" fica à esquerda e os botões formam um grupo
   INDIVISÍVEL à direita — se faltar largura, o grupo inteiro
   desce junto (nunca "Cancelar" numa linha e "Salvar" noutra).
   ============================================================ */
.dialog-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    /* Sem o wrap, um chip no slot Extras (ex.: "Produtor: João Pereira")
       espreme a coluna de textos em telefone: em 375px o título "Novo imóvel
       rural" quebrava em TRÊS linhas e o subtítulo em cinco. O chip tem
       flex-shrink: 0 e vence a disputa; a saída é ele descer de linha em vez
       de estreitar o título. Revisão E2E do cadastro de imóvel, 2026-08-31. */
    flex-wrap: wrap;
}
@media (max-width: 599.98px) {
    /* Na quebra, o chip ocupa a linha inteira e alinha à esquerda, junto do
       texto — encostado à direita ele parecia órfão do cabeçalho. */
    .dialog-header__contador,
    .dialog-header__extras {
        flex-basis: 100%;
    }
}
.dialog-header__icone {
    background: rgba(0, 137, 123, 0.12); /* Tertiary translúcido */
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dialog-header__textos {
    min-width: 0;
    flex: 1 1 auto;
}
.dialog-header__contador,
.dialog-header__extras {
    flex-shrink: 0;
}

.mud-dialog-actions .dialog-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    padding: 8px;
    width: 100%;
}
.dialog-rodape__permanecer {
    margin-right: auto;
}
.dialog-rodape__extras {
    flex-shrink: 0;
}
.dialog-rodape__acoes {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
/* Mobile / bottom sheet: empilha com a ação primária no topo
   (mesmo padrão Material das regras legadas acima). */
@media (max-width: 599.95px) {
    .mud-dialog-actions .dialog-rodape {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }
    .dialog-rodape__acoes {
        flex-direction: column-reverse;
        align-items: stretch;
        margin-left: 0;
    }
    .dialog-rodape__acoes .mud-button-root {
        width: 100%;
        margin: 0;
    }
    .dialog-rodape__permanecer {
        margin-right: 0;
        align-self: flex-start;
    }
}

/* ------------------------------------------------------------------
   MudTabs dentro de diálogo em MOBILE (bottom sheet).

   Problema: num diálogo estreito (< 600px), a barra de abas do
   MudTabs cresce com a soma das larguras das abas — quando os
   rótulos são longos (ex.: "PIX e dados bancários" na Contraparte),
   o .mud-tabs-tabbar-wrapper ultrapassa a largura do diálogo e a
   2ª aba fica CORTADA à direita. Os botões de scroll nativos do
   MudTabs não funcionam neste contexto (bottom sheet).

   Fix: limita o wrapper à largura do diálogo (max-width: 100%) e
   deixa-o rolar horizontalmente (overflow-x: auto) — em telas
   estreitas as abas quebram/encolhem para caber, e o que sobrar é
   alcançável por swipe. Esconde as setas de scroll mortas para não
   roubar espaço. Escopo em .mud-dialog: NÃO afeta abas de página.
   ------------------------------------------------------------------ */
@media (max-width: 599.95px) {
    .mud-dialog .mud-tabs-tabbar-wrapper {
        max-width: 100% !important;
        overflow-x: auto !important;
        scrollbar-width: none; /* Firefox — barra discreta */
    }
    .mud-dialog .mud-tabs-tabbar-wrapper::-webkit-scrollbar {
        height: 0;
    }
    .mud-dialog .mud-tabs-scroll-button {
        display: none !important;
    }
}

/* =========================================================================
   Onda Agro-First — Polimento visual do painel (Fase 5).

   Objetivo: dar identidade agro sem trocar o tema MUD inteiro. Aplica
   hover-lift sutil nos cards do painel (Stat Strip, lista de fazendas,
   mosaico de safras) para sensação tátil de interação. As cores são
   herdadas do tema MUD — apenas ajustamos a sombra e transições para
   reforçar que cards do painel são interativos.
   ========================================================================= */
[data-test="stat-strip-agro"] .mud-paper,
[data-test="stat-strip-carteira"] .mud-paper,
[data-test="lista-fazendas-cards"] .mud-paper[role="button"],
[data-test^="card-fazenda-"] {
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}

[data-test="stat-strip-agro"] .mud-paper:hover,
[data-test="stat-strip-carteira"] .mud-paper:hover,
[data-test="lista-fazendas-cards"] .mud-paper[role="button"]:hover,
[data-test^="card-fazenda-"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* ApexCharts — força a fonte da legend a usar Inter (consistência visual
   com o resto da app). */
.apexcharts-legend-text,
.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-yaxis-label,
.apexcharts-xaxis-label,
.apexcharts-datalabel {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Donut central (Mosaico de Safras / Distribuição de cultura): rotula
   "Total" e o número em duas linhas com hierarquia visual clara. */
.apexcharts-datalabel-label {
    font-weight: 600;
    font-size: 12px;
}
.apexcharts-datalabel-value {
    font-weight: 700;
    font-size: 18px;
}

/* ===================================================================
   "Novo apontamento" — padronização das telas de lançamento (2026-07).
   O antigo MudDrawer Anchor=Bottom virou MudDialog inline (.apont-dialog);
   o bottom sheet no mobile vem de graça do bloco global "Onda Agenda v4".
   Só resta manter o fundo cinza claro do conteúdo, que dá contraste aos
   cartões brancos de seção (.apont-secao).
   =================================================================== */
.apont-dialog .mud-dialog-content {
    background: var(--mud-palette-background-gray);
}

/* Cada seção do drawer é um cartão branco com sombra leve.
   Substitui o CardSecaoCompacto+Elevation=1 que dava pouco contraste. */
.apont-secao {
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Seção obrigatória tem borda lateral verde para marcar a âncora da
   ação. O olho do produtor cai aqui primeiro. */
.apont-secao--obrigatoria {
    border-left: 4px solid var(--mud-palette-tertiary);
}

/* Empty state da seção Insumos — texto centralizado em coluna,
   borda dashed para indicar "área de drop conceitual". */
.apont-insumos-empty {
    background: var(--mud-palette-background);
}

/* ExpansionPanel da Observação — visual mais leve que o default
   (sem elevation, integrado ao fluxo). */
.apont-observacao-panels.mud-expansion-panels {
    border-radius: 8px;
    overflow: hidden;
}
.apont-observacao-panels .mud-expand-panel {
    background: var(--mud-palette-surface);
}


/* === Relatórios interativos (RelatorioInterativo) ======================= */
/* A "planilha viva": tabela densa com header fixo, grupos recolhíveis,
   subtotais, total geral fixo no rodapé e controles de exibição
   (densidade/zebra/grade) que emulam a sensação de domínio do Excel. */

.relatorio-visoes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.relatorio-visoes__chips {
    flex: 1;
    min-width: 0;
}

.relatorio-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.relatorio-toolbar__busca {
    flex: 1 1 260px;
    max-width: 420px;
}

.relatorio-toolbar__acoes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.relatorio-tabela-wrapper {
    overflow: auto;
    max-height: var(--relatorio-altura, 65vh);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

table.relatorio-tabela {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums; /* números alinhados como no Excel */
}

.relatorio-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--mud-palette-primary);
}

.relatorio-tabela th.texto-direita,
.relatorio-tabela td.texto-direita {
    text-align: right;
}

.relatorio-th {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.relatorio-th__titulo {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    user-select: none;
}

.relatorio-th__titulo:hover {
    color: var(--mud-palette-tertiary);
}

.relatorio-th__sort {
    font-size: 1rem !important;
    color: var(--mud-palette-tertiary);
}

.relatorio-th__filtro {
    opacity: 0.35;
    padding: 2px !important;
}

th:hover .relatorio-th__filtro,
.relatorio-th__filtro--ativo {
    opacity: 1;
}

.relatorio-th__filtro--ativo {
    color: var(--mud-palette-tertiary) !important;
}

/* Célula de uma linha só (ColunaRelatorio.UmaLinha) — item 11 da varredura de
   UX: a linha da planilha tem UMA altura. O teto (max-width) vem da coluna no
   style do span; passou dele, reticências, e o texto inteiro fica no title. */
.relatorio-celula-uma-linha {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Densidades (altura de linha estilo Excel) */
.relatorio-tabela.densidade-compacta th,
.relatorio-tabela.densidade-compacta td {
    padding: 4px 10px;
    height: 30px;
}

.relatorio-tabela.densidade-normal th,
.relatorio-tabela.densidade-normal td {
    padding: 8px 10px;
    height: 38px;
}

.relatorio-tabela.densidade-confortavel th,
.relatorio-tabela.densidade-confortavel td {
    padding: 13px 12px;
    height: 48px;
}

/* Linhas de grade + zebra opcionais */
.relatorio-tabela.com-grade td {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.relatorio-tabela.com-grade td + td,
.relatorio-tabela.com-grade th + th {
    border-left: 1px solid var(--mud-palette-table-lines);
}

.relatorio-tabela.com-zebra tr.linha-par td {
    background: var(--mud-palette-background-gray);
}

.relatorio-tabela tbody tr.linha-dado:hover td {
    background: rgba(0, 137, 123, 0.08); /* teal 600 a 8% */
}

/* Grupos e agregações */
.relatorio-linha-grupo td {
    background: #DDE9E9;
    cursor: pointer;
    user-select: none;
}

.relatorio-linha-grupo--n1 td {
    background: #EEF4F4;
}

.relatorio-linha-grupo__conteudo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.relatorio-linha-grupo__qtd {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.relatorio-linha-subtotal td {
    background: #F3F7F7;
    font-weight: 600;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.relatorio-linha-total td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #DDE9E9;
    border-top: 2px double var(--mud-palette-primary);
}

.relatorio-col-numero {
    width: 44px;
    min-width: 44px;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    font-size: 0.7rem;
}

/* Popover do AutoFilter por coluna */
.relatorio-filtro-popover {
    min-width: 230px;
    max-width: 290px;
}

.relatorio-filtro-popover__lista {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Menu de colunas — o do relatório interativo e o `MenuColunasGrade` das
   telas de consulta (2026-09-11) são o mesmo desenho: uma regra, dois nomes. */
.relatorio-menu-colunas,
.menu-colunas-grade {
    min-width: 260px;
    max-height: 360px;
    overflow-y: auto;
}

.relatorio-menu-colunas__item,
.menu-colunas-grade__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 4px;
}

.relatorio-menu-colunas__setas {
    display: inline-flex;
}

/* Caption que separa os grupos ("Identificação oficial", "Áreas (ha)"). */
.menu-colunas-grade__grupo {
    display: block;
    padding: 8px 12px 0;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

/* Gráfico ocultável */
.relatorio-grafico {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px;
}

.relatorio-grafico__controles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* Mobile: toolbar empilha; tabela mantém rolagem horizontal (Excel-like) */
@media (max-width: 599.95px) {
    .relatorio-toolbar__busca {
        max-width: none;
    }

    .relatorio-toolbar__acoes {
        margin-left: 0;
        width: 100%;
    }

    .relatorio-tabela-wrapper {
        max-height: 70vh;
    }
}

.relatorio-linha-limite td {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

/* =========================================================================
   DRE (Demonstração do Resultado) — /fiscal/dre (DreTabela)
   Tabela hierárquica de estrutura fixa: 1ª coluna sticky, negrito por
   natureza (subtotal/total), colunas por bucket com scroll horizontal.
   ========================================================================= */

.dre-tabela-wrapper {
    overflow-x: auto;
}

.dre-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
    min-width: 640px;
}

.dre-tabela th,
.dre-tabela td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    white-space: nowrap;
}

.dre-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    text-align: right;
    z-index: 2;
}

.dre-tabela .dre-col-linha {
    position: sticky;
    left: 0;
    background: var(--mud-palette-surface);
    text-align: left;
    min-width: 240px;
    max-width: 340px;
    white-space: normal;
    z-index: 1;
}

.dre-tabela thead th.dre-col-linha { z-index: 3; }

.dre-tabela .dre-col-valor {
    text-align: right;
    min-width: 104px;
    font-variant-numeric: tabular-nums;
}

.dre-tabela .dre-col-total { font-weight: 600; }

/* Média por bucket: presente mas discreta — o Total continua o protagonista. */
.dre-tabela .dre-col-media { color: var(--mud-palette-text-secondary); }

.dre-tabela td.dre-col-media.dre-negativo { color: var(--mud-palette-error); }

.dre-linha-subtotal td {
    font-weight: 700;
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dre-linha-subtotal td.dre-col-linha { background: var(--mud-palette-background-gray); }

/* Total geral (Resultado Líquido): destaque com borda dupla — convenção contábil. */
.dre-tabela tr.dre-linha-subtotal:has(td):last-of-type td { border-bottom-width: 1px; }

.dre-linha-informativa td {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.dre-linha-categoria td {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 40%, transparent);
}

.dre-linha-categoria td.dre-col-linha {
    background: var(--mud-palette-surface);
}

.dre-indent-categoria { padding-left: 34px; }

.dre-negativo { color: var(--mud-palette-error); }

.dre-botao-expandir,
.dre-botao-lancamentos { padding: 2px !important; }

.dre-espaco-expandir { display: inline-block; width: 30px; }

/* Densidade compacta: 12+ colunas cabendo na tela. */
.dre-tabela.dre-compacta { font-size: 0.8rem; }

.dre-tabela.dre-compacta th,
.dre-tabela.dre-compacta td { padding: 2px 8px; }

/* Meses da linha expandida — existem só no mobile "Total-first". */
.dre-linha-meses-mobile { display: none; }

.dre-meses-mobile-grade {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 16px;
    padding: 6px 10px 6px 40px;
}

.dre-meses-mobile-rotulo {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.dre-meses-mobile-valor {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
}

/* Mobile "Total-first": some o grid de buckets — fica Linha + Total; a
   expansão da linha devolve os meses como lista vertical. */
@media (max-width: 640px) {
    .dre-tabela { min-width: 0; }

    .dre-tabela th.dre-col-valor:not(.dre-col-total),
    .dre-tabela td.dre-col-valor:not(.dre-col-total) { display: none; }

    .dre-tabela .dre-col-linha {
        min-width: 0;
        max-width: none;
    }

    .dre-linha-meses-mobile { display: table-row; }

    .dre-linha-meses-mobile td {
        background: color-mix(in srgb, var(--mud-palette-background-gray) 40%, transparent);
    }
}

/* ---- Preview de impacto do mapeamento (/fiscal/dre/configuracao) ---- */

.dre-impacto-painel { border-left: 3px solid var(--mud-palette-info); }

.dre-impacto-item {
    padding: 3px 0;
    border-bottom: 1px dashed var(--mud-palette-table-lines);
}

.dre-impacto-item:last-of-type { border-bottom: none; }

.dre-impacto-valor { font-variant-numeric: tabular-nums; }

/* ---- Banner do recorte por safra (preset Safra) ---- */

.dre-banner-safra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-left: 3px solid var(--mud-palette-tertiary);
}

.dre-banner-safra-icone { flex-shrink: 0; }

/* ---- Cascata (waterfall) do total do período — DreCascata ----
   Gramática: barra CHEIA = subtotal (estado); barra CLARA com tampa colorida
   = movimento (a tampa marca onde o movimento terminou). */

.dre-cascata-cartao { padding: 18px 16px 10px; }

/* Âncora do cartão de detalhe. NÃO pode recortar: o cartão não cabe dentro do
   palco porque `overflow-x: auto` faz o CSS converter o eixo Y para auto —
   o cartão era engolido e nascia uma barra de rolagem vertical. */
.dre-cascata-moldura {
    position: relative;
    overflow: visible;
}

.dre-cascata-palco { overflow-x: auto; }

.dre-cascata-svg {
    width: 100%;
    min-width: 720px;
    height: auto;
    display: block;
}

.dre-cascata-grade {
    stroke: var(--mud-palette-table-lines);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.dre-cascata-zero {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1.5;
    stroke-dasharray: none;
}

.dre-cascata-eixo {
    fill: var(--mud-palette-text-disabled);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.dre-cascata-rotulo {
    fill: var(--mud-palette-text-secondary);
    font-size: 11.5px;
}

.dre-cascata-valor {
    fill: var(--mud-palette-text-primary);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dre-cascata-valor-marco { font-size: 13px; font-weight: 700; }

.dre-cascata-percentual {
    fill: var(--mud-palette-text-disabled);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.dre-cascata-conector {
    stroke: var(--mud-palette-text-disabled);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
}

/* Corpos translúcidos (movimento) × sólidos (subtotal). */
.dre-cascata-corpo-positivo { fill: var(--mud-palette-success); fill-opacity: 0.28; }
.dre-cascata-corpo-negativo { fill: var(--mud-palette-error); fill-opacity: 0.28; }
.dre-cascata-corpo-marco { fill: var(--mud-palette-primary); fill-opacity: 0.88; }
.dre-cascata-corpo-resultado-positivo { fill: var(--mud-palette-success); fill-opacity: 0.92; }
.dre-cascata-corpo-resultado-negativo { fill: var(--mud-palette-error); fill-opacity: 0.92; }

.dre-cascata-tampa-positiva { fill: var(--mud-palette-success); }
.dre-cascata-tampa-negativa { fill: var(--mud-palette-error); }

/* Sombra do período comparado: neutra e discreta — é referência, não
   protagonista. Fica ATRÁS e mais larga, então a barra do período atual
   "pousa" dentro dela e a diferença de altura/posição salta aos olhos. */
.dre-cascata-sombra {
    fill: var(--mud-palette-text-primary);
    fill-opacity: 0.11;
    stroke: var(--mud-palette-text-disabled);
    stroke-width: 0.6;
    stroke-dasharray: 3 2;
}

/* Alvo invisível da coluna inteira: movimento pequeno vira barra de 3px. */
.dre-cascata-alvo { fill: transparent; }

.dre-cascata-passo {
    cursor: pointer;
    outline: none;
    transition: opacity 120ms ease;
}

.dre-cascata-passo rect:not(.dre-cascata-alvo) { transition: fill-opacity 120ms ease; }

/* Foco + contexto: o degrau apontado ganha peso, os outros recuam. */
.dre-cascata-com-ativo .dre-cascata-passo:not(.dre-cascata-passo-ativo) { opacity: 0.42; }

.dre-cascata-passo-ativo .dre-cascata-corpo-positivo,
.dre-cascata-passo-ativo .dre-cascata-corpo-negativo { fill-opacity: 0.48; }

.dre-cascata-passo:focus-visible .dre-cascata-alvo {
    fill: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    stroke: var(--mud-palette-primary);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
}

/* Cartão de composição — segue a barra apontada (posição em % do palco). */
.dre-cascata-cartao-detalhe {
    position: absolute;
    z-index: 3;
    min-width: 190px;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--mud-elevation-8);
    font-size: 0.78rem;
    line-height: 1.45;

    /* O cartão CAPTURA o ponteiro desde que as categorias viraram links: com
       ele transparente, o caminho do mouse até o link cruzava a coluna
       vizinha, trocava o degrau ativo e o link sumia antes do clique. O
       degrau ativo só é limpo ao sair da moldura — e o cartão vive DENTRO
       dela, então apontar o cartão o mantém aberto. */
    pointer-events: auto;
}

.dre-cascata-detalhe-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.dre-cascata-detalhe-link:hover,
.dre-cascata-detalhe-link:focus-visible { text-decoration: underline; }

.dre-cascata-detalhe-centro { transform: translate(-50%, calc(-100% - 12px)); }
.dre-cascata-detalhe-esquerda { transform: translate(-10%, calc(-100% - 12px)); }
.dre-cascata-detalhe-direita { transform: translate(-90%, calc(-100% - 12px)); }

/* Barra alta: não há espaço acima do topo — o cartão desce a partir dele e
   fica sobre o corpo da barra (o rótulo de valor mora acima do topo, então
   continua visível). */
.dre-cascata-detalhe-abaixo.dre-cascata-detalhe-centro { transform: translate(-50%, 10px); }
.dre-cascata-detalhe-abaixo.dre-cascata-detalhe-esquerda { transform: translate(-10%, 10px); }
.dre-cascata-detalhe-abaixo.dre-cascata-detalhe-direita { transform: translate(-90%, 10px); }

.dre-cascata-detalhe-titulo {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.dre-cascata-detalhe-valor {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.dre-cascata-detalhe-nota {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.dre-cascata-detalhe-lista {
    display: grid;
    grid-template-columns: 1fr max-content max-content;
    gap: 1px 10px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--mud-palette-table-lines);
}

.dre-cascata-detalhe-fatia {
    text-align: right;
    color: var(--mud-palette-text-disabled);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}

/* Faixa de evolução: mini-barras dos buckets do período dentro do cartão. */
.dre-cascata-faixa {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--mud-palette-table-lines);
}

.dre-cascata-faixa-titulo {
    color: var(--mud-palette-text-disabled);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.dre-cascata-faixa-svg {
    width: 100%;
    height: 26px;
    display: block;
}

.dre-cascata-faixa-barra { fill: var(--mud-palette-success); fill-opacity: 0.34; }
.dre-cascata-faixa-pico { fill: var(--mud-palette-success); fill-opacity: 0.95; }
.dre-cascata-faixa-barra.dre-cascata-faixa-saida { fill: var(--mud-palette-error); fill-opacity: 0.34; }
.dre-cascata-faixa-pico.dre-cascata-faixa-saida { fill: var(--mud-palette-error); fill-opacity: 0.95; }

.dre-cascata-faixa-legenda {
    display: flex;
    justify-content: space-between;
    color: var(--mud-palette-text-disabled);
    font-size: 0.68rem;
    margin-bottom: 2px;
}

.dre-cascata-detalhe-categoria {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dre-cascata-detalhe-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.dre-cascata-detalhe-acao {
    margin-top: 6px;
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    font-weight: 500;
}

/* Legenda da gramática visual. */
.dre-cascata-legenda {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 4px 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.dre-cascata-amostra {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-left: 10px;
}

.dre-cascata-amostra:first-child { margin-left: 0; }

.dre-cascata-amostra-marco { background: var(--mud-palette-primary); opacity: 0.88; }

.dre-cascata-amostra-positiva {
    background: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
    border-top: 3px solid var(--mud-palette-success);
}

.dre-cascata-amostra-negativa {
    background: color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
    border-bottom: 3px solid var(--mud-palette-error);
}

.dre-cascata-amostra-sombra {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 11%, transparent);
    border: 1px dashed var(--mud-palette-text-disabled);
}

.dre-cascata-legenda-dica { color: var(--mud-palette-text-disabled); }

/* Tela estreita: o palco rola na horizontal e o cartão absoluto sairia do
   lugar (ele não acompanha o scroll). Vira um bloco fixo abaixo do gráfico. */
@media (max-width: 780px) {
    .dre-cascata-cartao-detalhe {
        position: static;
        transform: none !important;
        max-width: none;
        margin-top: 10px;
        box-shadow: none;
    }
}

/* Linha da tabela alvo do clique na cascata — pisca uma vez e assenta. */
@keyframes dre-destaque-linha {
    0% { background: color-mix(in srgb, var(--mud-palette-primary) 26%, transparent); }
    100% { background: transparent; }
}

.dre-tabela tr.dre-linha-destacada td { animation: dre-destaque-linha 1.8s ease-out 1; }

/* ---- Visão empilhada "Por fazenda": uma DRE completa por imóvel ---- */

.dre-secao-fazenda { margin-bottom: 18px; }

.dre-secao-fazenda-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 3px solid var(--mud-palette-tertiary);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 55%, transparent);
    cursor: pointer;
    user-select: none;
}

.dre-secao-fazenda-header:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.dre-secao-fazenda-nome { font-weight: 600; }

.dre-secao-fazenda-kpis {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Impressão da tela da DRE (Ctrl+P) — o PDF formal continua sendo a
   exportação; aqui é a conveniência de um print decente. Escopo TOTAL pela
   .dre-pagina (marcador do raiz da tela): nenhuma outra tela muda. ---- */

@media print {
    body:has(.dre-pagina) .mud-appbar,
    body:has(.dre-pagina) .mud-drawer,
    body:has(.dre-pagina) .dre-nao-imprime { display: none !important; }

    /* Botão não faz sentido no papel — some exportar, atualizar, chevron, olho. */
    body:has(.dre-pagina) .mud-main-content button { display: none !important; }

    body:has(.dre-pagina) .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    body:has(.dre-pagina) .dre-tabela-wrapper {
        overflow: visible;
        border: none;
    }

    /* Sticky quebra a paginação do print — volta ao fluxo normal. */
    body:has(.dre-pagina) .dre-tabela thead th,
    body:has(.dre-pagina) .dre-tabela .dre-col-linha { position: static; }

    body:has(.dre-pagina) .dre-tabela {
        min-width: 0;
        font-size: 0.72rem;
    }

    body:has(.dre-pagina) .dre-tabela th,
    body:has(.dre-pagina) .dre-tabela td { padding: 3px 6px; }

    body:has(.dre-pagina) .dre-cascata-wrapper {
        overflow: visible;
        border: none;
    }

    body:has(.dre-pagina) .dre-cascata-svg { min-width: 0; }

    /* Alinhamento ao padrão de relatórios (2026-08-14): a demonstração vive
       num CardSecao na tela, mas o papel não precisa da moldura do card. */
    body:has(.dre-pagina) .dre-card-relatorio {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

/* ============================================================================
   COCKPIT DO CONTADOR (Escritório + Painel Modo C) — Onda 5 do épico Contador
   Badges tri-state de saúde fiscal + acabamento do cartão de cliente.
   Regra: verde = em dia, amarelo = pendente, vermelho = atrasada,
   CINZA = não se aplica (zero não é success).
   ========================================================================= */

.badge-fiscal {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: default;
}

.badge-fiscal--emdia {
    color: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
}

.badge-fiscal--pendente {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
}

.badge-fiscal--atrasada {
    color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

.badge-fiscal--neutro {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default);
    background: transparent;
}

.cartao-cliente-fiscal { transition: box-shadow 120ms ease; }

.cartao-cliente-fiscal:hover { box-shadow: var(--mud-elevation-4); }

.cartao-cliente-fiscal__nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * F3-S13 (N18) — telas mobile-first: as ABAS que o polegar não alcança.
 *
 * O lançamento diário da granja é feito NO GALPÃO, PELO CELULAR — está
 * escrito no menu desde a F1. A varredura a 375px encontrou UM defeito
 * real, e ele é grave: no detalhe do lote, a barra de abas mede 884px
 * dentro de um contêiner de 295px, e `.mud-tabs-tabbar-content` a corta
 * com `overflow-x: hidden`. As setas de rolagem do MudBlazor são
 * renderizadas, mas NÃO movem nada (medido: `transform` continua
 * identidade depois do clique). Resultado: "Pesagens" e "Custos e
 * resultado" — a aba que responde a pergunta que justifica o módulo —
 * eram inalcançáveis no telefone.
 *
 * A cura é devolver a rolagem ao elemento que corta e esconder as setas
 * mortas (96px de tela que não faziam nada). O gesto passa a ser o
 * arrasto, que é o gesto do telefone de qualquer forma.
 *
 * Só até 899px: no desktop a barra cabe e o comportamento do MudBlazor
 * fica intocado. Vale para TODAS as telas com abas (11 no app) porque o
 * defeito é do componente, não da Pecuária — e uma cópia por tela seria
 * a divergência garantida.
 *
 * ⚠️ O que NÃO precisou de conserto, medido antes de escrever CSS: as
 * telas de trato, vacina, morte, apuração e as listagens não têm nada
 * preso fora da tela a 375px, e `MudSimpleTable` já embrulha a tabela
 * num `.mud-table-container` que rola sozinho.
 * ------------------------------------------------------------------ */

@media (max-width: 899.98px) {
    .mud-tabs .mud-tabs-tabbar-content {
        overflow-x: auto;
        /* Momentum no iOS; sem isto o arrasto "gruda" no fim do curso. */
        -webkit-overflow-scrolling: touch;
    }

    /* O MudBlazor posiciona a barra por transform quando as setas
       funcionam. Aqui elas não funcionam, e um transform residual
       brigaria com a rolagem nativa que acabamos de devolver. */
    .mud-tabs .mud-tabs-tabbar-wrapper {
        transform: none !important;
    }

    .mud-tabs .mud-tabs-scroll-button {
        display: none;
    }
}

/* ---- Curva de peso do lote — CurvaPesoLote (F4-S2) ----
   Gramática: faixa sombreada = referência ± tolerância; tracejado fino = média
   da referência; linha sólida = entre dois pesos reais; tracejada = estimado;
   pontilhada = projeção de abate. Cores via palette vars — à prova de tema. */

.curva-lote-moldura { position: relative; overflow: visible; }
.curva-lote-palco { overflow-x: auto; }

.curva-lote-svg {
    width: 100%;
    min-width: 640px;
    height: auto;
    display: block;
}

.curva-lote-fase-a { fill: var(--mud-palette-primary); fill-opacity: 0.035; }
.curva-lote-fase-b { fill: var(--mud-palette-primary); fill-opacity: 0.08; }

.curva-lote-fase-rotulo {
    fill: var(--mud-palette-text-disabled);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.curva-lote-grade {
    stroke: var(--mud-palette-table-lines);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.curva-lote-eixo {
    fill: var(--mud-palette-text-disabled);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.curva-lote-eixo-titulo { fill: var(--mud-palette-text-secondary); font-size: 11px; }

.curva-lote-faixa { fill: var(--mud-palette-tertiary); fill-opacity: 0.14; stroke: none; }

.curva-lote-referencia {
    fill: none;
    stroke: var(--mud-palette-tertiary);
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
    opacity: 0.8;
}

.curva-lote-real { stroke: var(--mud-palette-primary); stroke-width: 2.4; stroke-linecap: round; }

.curva-lote-estimada {
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
    stroke-dasharray: 5 5;
    opacity: 0.75;
}

.curva-lote-hoje { stroke: var(--mud-palette-text-disabled); stroke-width: 1; stroke-dasharray: 2 3; }
.curva-lote-hoje-rotulo { fill: var(--mud-palette-text-disabled); font-size: 10.5px; }

.curva-lote-projecao { stroke: var(--mud-palette-info); stroke-width: 2; stroke-dasharray: 2 4; }

.curva-lote-projecao-faixa {
    stroke: var(--mud-palette-info);
    stroke-width: 6;
    stroke-opacity: 0.25;
    stroke-linecap: round;
}

.curva-lote-ponto-projecao {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-info);
    stroke-width: 2.5;
}

.curva-lote-projecao-rotulo { fill: var(--mud-palette-info); font-size: 12px; font-weight: 600; }

/* Alvo invisível ao redor do ponto — ponto de 5px é impossível de acertar. */
.curva-lote-alvo { fill: transparent; }
.curva-lote-ponto-grupo { cursor: pointer; outline: none; }
.curva-lote-ponto { stroke: var(--mud-palette-surface); stroke-width: 1.5; }
.curva-lote-ponto-pesagem { fill: var(--mud-palette-primary); }
.curva-lote-ponto-entrada { fill: var(--mud-palette-secondary); }
.curva-lote-ponto-saida { fill: var(--mud-palette-warning); }
.curva-lote-ponto-ativo .curva-lote-ponto { stroke: var(--mud-palette-primary); stroke-width: 3; }

.curva-lote-ponto-grupo:focus-visible .curva-lote-alvo {
    fill: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* Cartão do ponto — segue o ponto apontado (posição em % da moldura). */
.curva-lote-cartao {
    position: absolute;
    z-index: 3;
    min-width: 170px;
    max-width: 260px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--mud-elevation-8);
    font-size: 0.78rem;
    line-height: 1.45;
    transform: translate(-50%, calc(-100% - 14px));
    pointer-events: none;
}

.curva-lote-cartao-direita { transform: translate(-90%, calc(-100% - 14px)); }

.curva-lote-cartao-titulo {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.curva-lote-cartao-valor { font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.curva-lote-cartao-nota { color: var(--mud-palette-text-secondary); }
.curva-lote-desvio-fora { color: var(--mud-palette-warning); font-weight: 600; }
.curva-lote-desvio-dentro { color: var(--mud-palette-success); font-weight: 600; }

.curva-lote-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.curva-lote-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.curva-lote-legenda i {
    display: inline-block;
    width: 22px;
    height: 0;
    border-top: 2.5px solid var(--mud-palette-primary);
}

.curva-lote-legenda-faixa {
    height: 10px !important;
    border: none !important;
    background: var(--mud-palette-tertiary);
    opacity: 0.2;
    border-radius: 2px;
}

.curva-lote-legenda-estimada { border-top-style: dashed !important; }
/* Revisão E2E F4 (2026-08-22) — marcador da saída pesada no caminhão (fora da série). */
.curva-lote-legenda-saida {
    width: 10px !important;
    height: 10px !important;
    border: 0 !important;
    border-radius: 2px;
    background: var(--mud-palette-warning);
}

.curva-lote-legenda-projecao {
    border-top-style: dotted !important;
    border-top-color: var(--mud-palette-info) !important;
}

/* Tela estreita: o palco rola na horizontal e o cartão absoluto sairia do
   lugar. Vira um bloco abaixo do gráfico. */
@media (max-width: 780px) {
    .curva-lote-cartao {
        position: static;
        transform: none !important;
        max-width: none;
        margin-top: 8px;
        box-shadow: none;
        pointer-events: auto;
    }
}

/* ------------------------------------------------------------------------
   F4-S6 — tendência mensal do painel zootécnico (SVG puro). Mesma gramática
   da curva do lote: cores pela paleta MudBlazor, classe por estado.
   ------------------------------------------------------------------------ */
.tendencia-moldura { width: 100%; }
.tendencia-palco { width: 100%; overflow-x: auto; }
.tendencia-svg { width: 100%; min-width: 640px; height: auto; display: block; }
.tendencia-grade { stroke: var(--mud-palette-lines-default); stroke-width: 1; stroke-dasharray: 2 4; }
.tendencia-base { stroke: var(--mud-palette-text-secondary); stroke-width: 1; }
.tendencia-eixo { font-size: 12px; fill: var(--mud-palette-text-secondary); }
.tendencia-eixo-titulo { font-size: 12px; font-weight: 600; fill: var(--mud-palette-text-secondary); }
/* O rótulo do valor fica no TOPO da barra, e é justamente quando o mês está
   perto da meta que ele cai em cima da linha tracejada dela — o caso que mais
   interessa ler. O halo da cor do fundo (paint-order: stroke antes do fill)
   recorta a linha ao redor das letras. */
.tendencia-valor {
    font-size: 12px;
    font-weight: 600;
    fill: var(--mud-palette-text-primary);
    paint-order: stroke fill;
    stroke: var(--mud-palette-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.tendencia-vazio { font-size: 14px; fill: var(--mud-palette-text-disabled); }
.tendencia-barra { rx: 3; }
.tendencia-barra--neutra { fill: var(--mud-palette-tertiary); opacity: 0.85; }
.tendencia-barra--verde { fill: var(--mud-palette-success); opacity: 0.85; }
.tendencia-barra--amarela { fill: var(--mud-palette-warning); opacity: 0.9; }
.tendencia-barra--vermelha { fill: var(--mud-palette-error); opacity: 0.85; }
/* Revisão E2E F4 (2026-08-22) — mês com valor fora do possível: hachura em cima
   do warning, para não se confundir com "perto da meta" (amarelo liso). */
.tendencia-barra--implausivel {
    fill: var(--mud-palette-warning);
    opacity: 0.55;
    stroke: var(--mud-palette-warning);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
}
.tendencia-meta { stroke: var(--mud-palette-primary); stroke-width: 2; stroke-dasharray: 8 5; }
.tendencia-meta-rotulo { font-size: 12px; font-weight: 600; fill: var(--mud-palette-primary); }
.tendencia-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8rem; color: var(--mud-palette-text-secondary); margin-top: 0.25rem; }
.tendencia-legenda i { display: inline-block; width: 14px; height: 10px; margin-right: 4px; vertical-align: middle; }
.tendencia-legenda-barra { background: var(--mud-palette-tertiary); border-radius: 2px; }
.tendencia-legenda-meta { border-top: 2px dashed var(--mud-palette-primary); height: 0 !important; }

/* ------------------------------------------------------------------------
   F4-S7 — comparador de curvas: uma cor por lote (0..5), sólida entre
   leituras e tracejada depois da última; o mesmo palco/faixa da curva do lote.

   A ORDEM das cores é o que faz o comparador funcionar. A sequência natural
   da paleta (primary → tertiary → success) põe três VERDES seguidos, e com
   três lotes no gráfico — o caso mais comum — as linhas ficam
   indistinguíveis. Aqui elas alternam matiz E luminosidade a cada passo, de
   modo que os primeiros escolhidos sejam sempre os mais separados. Laranja e
   vermelho entram como cor CATEGÓRICA (quem é o lote), não como semáforo: o
   comparador não julga, e a legenda nomeia cada linha.
   ------------------------------------------------------------------------ */
.curvas-serie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.curvas-serie-estimada { stroke-dasharray: 6 5; opacity: 0.8; }
.curvas-ponto { stroke: var(--mud-palette-surface); stroke-width: 1.5; }
.curvas-serie-0 { stroke: var(--mud-palette-primary); }
.curvas-serie-1 { stroke: var(--mud-palette-warning); }
.curvas-serie-2 { stroke: var(--mud-palette-info); }
.curvas-serie-3 { stroke: var(--mud-palette-error); }
.curvas-serie-4 { stroke: var(--mud-palette-success); }
.curvas-serie-5 { stroke: var(--mud-palette-secondary); }
.curvas-ponto.curvas-serie-0 { fill: var(--mud-palette-primary); }
.curvas-ponto.curvas-serie-1 { fill: var(--mud-palette-warning); }
.curvas-ponto.curvas-serie-2 { fill: var(--mud-palette-info); }
.curvas-ponto.curvas-serie-3 { fill: var(--mud-palette-error); }
.curvas-ponto.curvas-serie-4 { fill: var(--mud-palette-success); }
.curvas-ponto.curvas-serie-5 { fill: var(--mud-palette-secondary); }
.curvas-legenda-cor { display: inline-block; width: 14px; height: 4px; margin-right: 4px; vertical-align: middle; border-radius: 2px; background: currentColor; }
.curvas-legenda-cor.curvas-serie-0 { background: var(--mud-palette-primary); }
.curvas-legenda-cor.curvas-serie-1 { background: var(--mud-palette-warning); }
.curvas-legenda-cor.curvas-serie-2 { background: var(--mud-palette-info); }
.curvas-legenda-cor.curvas-serie-3 { background: var(--mud-palette-error); }
.curvas-legenda-cor.curvas-serie-4 { background: var(--mud-palette-success); }
.curvas-legenda-cor.curvas-serie-5 { background: var(--mud-palette-secondary); }

/* ------------------------------------------------------------------------
   Plano de contas (PlanoContas.razor e páginas satélites — modelo oficial,
   importação, desdobramento). Classes movidas do <style> do antigo
   Categorias.razor e estendidas para o plano com código hierárquico.
   ------------------------------------------------------------------------ */
.plano-contas-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.plano-contas-item { padding: 0; margin: 0; }
/* flex-wrap + min-width:0: sem isso a linha (código + nome + chips + ações)
   não quebrava e, no celular, os chips e os botões de ação saíam da tela e
   eram cortados pelo overflow-x: clip do body. */
.plano-contas-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
    padding: 6px 8px;
    /* Recuo por nível via --pc-nivel (int setado inline pelo RenderNode —
       sem separador decimal, imune ao gotcha do CSS em pt-BR). */
    padding-left: calc(8px + var(--pc-nivel, 0) * 20px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.plano-contas-linha:hover { background: var(--mud-palette-background-gray); }
/* Conta inativa: linha inteira esmaecida (o chip "inativa" diz o porquê). */
.plano-contas-linha--inativa { opacity: 0.55; }
.plano-contas-nome {
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Código hierárquico ("3.4.1.01") — monoespaçado, cor secundária: os
   segmentos alinham na vertical e o nome continua sendo o protagonista. */
.plano-contas-codigo {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}
.plano-contas-hifen {
    margin: 0 6px;
    color: var(--mud-palette-text-disabled);
}
/* Vão do chevron nas folhas — mantém os códigos alinhados entre irmãos. */
.plano-contas-toggle-vao {
    display: inline-block;
    width: 30px;
    flex-shrink: 0;
}
/* Badge discreto de uso (total CP + CR + livro caixa; detalhe no tooltip). */
.plano-contas-uso {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 0 8px;
    line-height: 18px;
    cursor: default;
}
.plano-contas-acoes {
    display: inline-flex;
    gap: 4px;
    opacity: 0.7;
}
.plano-contas-linha:hover .plano-contas-acoes { opacity: 1; }
/* Touch não tem hover: as ações (kebab incluso) ficam sempre visíveis. */
@media (hover: none) {
    .plano-contas-acoes { opacity: 1; }
}
@media (max-width: 600px) {
    /* No celular o recuo de 20px/nível comeria a largura útil. O recuo cai
       para 8px/nível — via aninhamento das <ul>, com linha-guia vertical
       marcando o nível — e a linha perde o padding calculado. */
    .plano-contas-linha { padding-left: 4px; }
    .plano-contas-tree .plano-contas-tree {
        margin-left: 8px;
        border-left: 2px solid var(--mud-palette-lines-default);
    }
}


/* ------------------------------------------------------------------------
   Contas do sistema (/financeiro/plano-contas/contas-do-sistema, 2026-09).
   Faixa com o placar da configuração (a assinatura da tela), índice das
   seções — sticky à esquerda no desktop, chips roláveis no celular, o MESMO
   markup — e uma seção recolhível por grupo do catálogo de finalidades.
   ------------------------------------------------------------------------ */
.contas-sistema-faixa {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.contas-sistema-faixa__numero {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}
.contas-sistema-faixa__texto { color: var(--mud-palette-text-secondary); }
/* Darken: o laranja puro do Warning não passa AA sobre o branco. */
.contas-sistema-faixa__pendencia {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}
.contas-sistema-faixa__dica { color: var(--mud-palette-text-secondary); }

.contas-sistema-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
/* top = scroll-margin das seções: o índice e o título da seção param no
   mesmo ponto, logo abaixo da barra do app. */
.contas-sistema-indice {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.contas-sistema-indice__titulo {
    color: var(--mud-palette-text-secondary);
    padding: 0 12px;
}
.contas-sistema-indice__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color 150ms ease;
}
.contas-sistema-indice__item:hover { background: var(--mud-palette-action-default-hover); }
.contas-sistema-indice__item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
.contas-sistema-indice__item .mud-icon-root { color: var(--mud-palette-text-secondary); }
.contas-sistema-indice__rotulo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
}
.contas-sistema-indice__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.contas-sistema-indice__contagem {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* A seção é o cartão: o container dos painéis é chapado de propósito.
   scroll-margin-top: a âncora #grupo-x para o título abaixo da barra do app,
   em vez de escondê-lo atrás dela.
   Os !important vencem as regras (0,2,0) do MudBlazor 8.13 sobre o MESMO
   elemento: .mud-panel-expanded, :last-child e .mud-panel-next-expanded tiram
   o border-bottom (a seção ABERTA — justamente a com pendência — perdia a
   borda de baixo), e .mud-panel-expanded põe margin 16px 0 (o espaçamento
   entre seções fica só no mb-3). */
.contas-sistema-secao {
    scroll-margin-top: 88px;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 12px !important;
    background: var(--mud-palette-surface);
}
.contas-sistema-secao.mud-panel-expanded { margin-top: 0 !important; }
.contas-sistema-secao__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    flex: none;
}
.contas-sistema-secao--pendente .contas-sistema-secao__icone {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: var(--mud-palette-warning-darken);
}
.contas-sistema-secao__resumo { color: var(--mud-palette-text-secondary); }
/* Mesma tipografia do TituloSecaoCampos (overline com tracking), sem o
   divisor: logo abaixo vem o cartão das linhas, que já tem borda. */
.contas-sistema-subgrupo {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 8px;
}
.contas-sistema-linhas { border-radius: 8px; }
.contas-sistema-linha { padding: 12px 16px; }
.contas-sistema-linha__descricao {
    display: block;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
}
.contas-sistema-legenda {
    display: block;
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
}
.contas-sistema-legenda--pendente { color: var(--mud-palette-warning-darken); }
.contas-sistema-legenda--erro { color: var(--mud-palette-error); }
/* O rótulo da sugerida ("3.1.1.01.003 - RECEITA DE VENDA - CANA-DE-AÇÚCAR")
   é longo: quebra em vez de empurrar o botão para fora da tela. */
.contas-sistema-sugerida { white-space: normal; text-align: left; }

@media (max-width: 959px) {
    .contas-sistema-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    /* Celular: o índice vira uma fileira de chips rolável, sem sticky —
       grudado no topo ele comeria a dobra de uma tela de 375px. */
    .contas-sistema-indice {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
    }
    .contas-sistema-indice__titulo { display: none; }
    .contas-sistema-indice__item {
        flex: 0 0 auto;
        white-space: nowrap;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 999px;
        background: var(--mud-palette-surface);
        padding: 4px 12px;
    }
    .contas-sistema-indice__rotulo { flex: 0 0 auto; }
}


/* Dropzone de importação (CSV do Livro Caixa + planilha do Plano de Contas).
   Morava num <style> local do LancamentoImportarCsvDialog; virou classe
   compartilhada quando o segundo diálogo nasceu — regra da casa. */
.agro-csv-dropzone .agro-csv-dropzone__paper {
    border: 2px dashed var(--mud-palette-tertiary);
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.agro-csv-dropzone:hover .agro-csv-dropzone__paper {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-tertiary-darken);
}


/* ==========================================================================
   Categoria de produto — paleta SUAVE (revisão de 2026-08-31)
   --------------------------------------------------------------------------
   O mapa canônico de IconesProduto dá um hex saturado por tipo/subgrupo. Ele
   estava sendo aplicado como FUNDO SÓLIDO com texto branco: a grade de
   Produtos saía com um avatar cheio + dois chips sólidos por linha (verde,
   azul, laranja, vermelho…) e o olho não achava mais o nome do produto. No
   extremo oposto, a tela de seleção genérica não usava cor NENHUMA — 68 linhas
   de texto cinza idênticas.

   O equilíbrio: a cor identifica, não grita. Ela entra como fundo tênue e como
   cor do ícone/rótulo, nunca como bloco chapado.

   O contraste sai do color-mix contra --mud-palette-text-primary, e não de um
   cinza fixo: hoje o app só tem o tema claro (o MudThemeProvider do MainLayout
   não declara IsDarkMode), onde essa variável é quase preta e ESCURECE a cor da
   categoria. Se o tema escuro entrar um dia, a mesma regra clareia sozinha, sem
   @media e sem duplicar a paleta — mas isso não foi exercitado ao vivo, porque
   não há como ligar o escuro nesta versão.

   A cor da categoria chega pela custom property --cat, escrita inline por
   IconesProduto.EstiloDaCategoria().
   ========================================================================== */

.cat-produto-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 9px;
    background: color-mix(in srgb, var(--cat) 14%, transparent);
    color: color-mix(in srgb, var(--cat) 78%, var(--mud-palette-text-primary));
}

.cat-produto-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 9px 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
    background: color-mix(in srgb, var(--cat) 12%, transparent);
    color: color-mix(in srgb, var(--cat) 72%, var(--mud-palette-text-primary));
    border: 1px solid color-mix(in srgb, var(--cat) 28%, transparent);
}

.cat-produto-chip .mud-icon-root {
    font-size: 0.95rem;
    flex: none;
}

.cat-produto-chip__texto {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Linha da tela de seleção: a mesma anatomia do picker rico de insumo
   (SelecionarInsumoDialog), para as duas telas não parecerem de produtos
   diferentes. O hover marca a linha inteira porque ela é clicável. */
.selecionar-produto-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
}

.selecionar-produto-linha:hover {
    background-color: var(--mud-palette-action-default-hover);
    border-color: color-mix(in srgb, var(--mud-palette-tertiary) 35%, transparent);
}

.selecionar-produto-linha--marcada {
    background-color: color-mix(in srgb, var(--mud-palette-tertiary) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-tertiary) 45%, transparent);
}

.selecionar-produto-linha__codigo {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    flex: none;
}

/* A altura da lista era 420px FIXOS: numa janela de 720px o conteúdo do
   diálogo passava a rolar por fora e a paginação ficava escondida atrás do
   rodapé (medido: scrollHeight 545 contra clientHeight 517). Agora sai da
   viewport, descontando cabeçalho + filtros + contador + paginação + rodapé,
   com piso para não sumir em janela baixa e teto para não virar uma lista de
   40 itens num monitor 4K. */
.selecionar-produto-lista,
.selecionar-lista {
    max-height: clamp(180px, calc(100vh - 330px), 520px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Caption INFORMATIVO no rodapé do diálogo — o contador de selecionados das
   quatro telas de seleção (produtos, contrapartes, bens, itens) e a linha de
   pendência de AplicarEmVeiculos/AplicarNoCampo, que diz por que o botão está
   apagado. É o oposto de `.dialog-dica-atalho`: aquela é dispensável no
   celular, esta é a informação.

   Além de escapar da regra de touch (ver o bloco da dica, acima), ele precisa
   caber: o .mud-dialog-actions não quebra linha, e em 375px o texto era
   comprimido até largura ZERO. Medido em 2026-08-31 com
   getBoundingClientRect(): 0×0. */
.mud-dialog-actions:has(> .dialog-rodape-info) {
    flex-wrap: wrap;
    row-gap: 4px;
}

.dialog-rodape-info {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 599px) {
    .dialog-rodape-info {
        flex-basis: 100%;
        margin: 0 0 2px 0 !important;
    }

    /*  Card do picker rico: em telas estreitas o saldo desce para baixo do
        nome. Na mesma linha, o nome sobrava com ~90px e virava "2,4-D..."
        enquanto o subtítulo quebrava em quatro linhas por trás do número. */
    .picker-insumo-cabecalho {
        flex-wrap: wrap;
    }

    /*  O saldo desce e leva o chevron consigo, na mesma linha: sem o
        desconto da largura dele, o botão de expandir caía sozinho numa
        terceira linha, solto no canto esquerdo do card. */
    .picker-insumo-cabecalho__saldo {
        flex: 1 1 calc(100% - 48px) !important;
        align-items: flex-start !important;
        padding-left: 38px;
    }
}

/* =========================================================================
   Árvore de custos (/custos/drill-down, 2026-09-01)
   Tabela hierárquica própria (treegrid): indentação por nível, chevron,
   barra de participação inline como assinatura visual, painel do nó ao lado
   (mestre-detalhe em >= 960px; uma coluna abaixo disso).
   ========================================================================= */

.arvore-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1279px) {
    .arvore-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 959px) {
    .arvore-layout { grid-template-columns: minmax(0, 1fr); }
    .arvore-painel-no { position: static !important; }
}

.arvore-painel-no {
    position: sticky;
    top: 72px;
}

.arvore-tabela-wrapper {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

.arvore-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.arvore-tabela th,
.arvore-tabela td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    vertical-align: middle;
}

.arvore-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    z-index: 2;
}

.arvore-tabela thead th.arvore-col-nome,
.arvore-tabela .arvore-col-nome { text-align: left; }

.arvore-tabela .arvore-col-valor,
.arvore-tabela .arvore-col-qtd {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.arvore-tabela .arvore-col-valor { min-width: 120px; }
.arvore-tabela .arvore-col-qtd { min-width: 56px; }
.arvore-tabela .arvore-col-pct { min-width: 150px; white-space: nowrap; }

.arvore-linha {
    cursor: pointer;
    transition: background-color 150ms ease;
}

.arvore-linha:hover { background: var(--mud-palette-table-hover); }

.arvore-linha:focus-visible,
.arvore-folha:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.arvore-linha--selecionada,
.arvore-linha--selecionada:hover {
    background: color-mix(in srgb, var(--mud-palette-tertiary) 12%, transparent);
}

.arvore-linha--selecionada .arvore-col-nome {
    box-shadow: inset 3px 0 0 var(--mud-palette-tertiary);
}

.arvore-linha--n1 .arvore-rotulo { font-weight: 600; }

.arvore-linha--sintetica .arvore-rotulo,
.arvore-linha--sintetica .arvore-valor {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.arvore-nome {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

.arvore-chevron { display: inline-flex; flex: 0 0 auto; }

.arvore-chevron .mud-icon-button { padding: 2px !important; }

.arvore-chevron-vazio { display: inline-block; width: 28px; flex: 0 0 auto; }

.arvore-icone { flex: 0 0 auto; color: var(--mud-palette-text-secondary); }

.arvore-rotulo-bloco {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.arvore-rotulo { overflow-wrap: anywhere; }

.arvore-detalhe {
    display: block;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.arvore-chip { margin-left: 4px; height: 20px !important; font-size: 0.7rem !important; }

.arvore-valor { font-variant-numeric: tabular-nums; }

/* A assinatura: barra de participação inline, do tamanho do percentual. */
.arvore-barra {
    display: inline-block;
    vertical-align: middle;
    width: 88px;
    height: 8px;
    margin-right: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent);
    overflow: hidden;
}

.arvore-barra__fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--mud-palette-tertiary);
    transition: width 200ms ease;
}

.arvore-linha--sintetica .arvore-barra__fill { background: var(--mud-palette-text-disabled); }

.arvore-pct {
    display: inline-block;
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.arvore-folha {
    cursor: pointer;
    font-size: 0.82rem;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 45%, transparent);
    transition: background-color 150ms ease;
}

.arvore-folha:hover { background: var(--mud-palette-table-hover); }

.arvore-folha--selecionada,
.arvore-folha--selecionada:hover {
    background: color-mix(in srgb, var(--mud-palette-tertiary) 12%, transparent);
}

.arvore-folha--realocacao .arvore-rotulo,
.arvore-folha--realocacao .arvore-valor {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.arvore-folha--mais { background: transparent; cursor: default; }

.arvore-linha-total td {
    font-weight: 700;
    background: var(--mud-palette-background-gray);
    border-top: 2px solid var(--mud-palette-lines-default);
    border-bottom: 0;
}

@media (max-width: 959px) {
    .arvore-tabela .arvore-col-secundaria { display: none; }
    .arvore-tabela .arvore-col-pct { min-width: 110px; }
    .arvore-barra { width: 48px; }
}

/* Painel do nó */
.arvore-trilha { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.arvore-painel-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.arvore-painel-kpi {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    border-left: 3px solid var(--mud-palette-tertiary);
}

.arvore-painel-kpi__rotulo {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.arvore-painel-kpi__valor {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.arvore-painel-kpi__detalhe {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

.arvore-painel-lista .mud-list-item { padding-top: 2px; padding-bottom: 2px; }
.arvore-painel-lista__texto { min-width: 0; overflow-wrap: anywhere; }

.arvore-ficha-campos {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    font-size: 0.875rem;
}

.arvore-ficha-campos dt { color: var(--mud-palette-text-secondary); }
.arvore-ficha-campos dd { margin: 0; overflow-wrap: anywhere; }

.arvore-mini-barras { display: block; max-width: 100%; }

/* Barra de ferramentas da árvore (visões, expansão, %, ordenação) */
.arvore-barra-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.arvore-barra-ferramentas__grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.arvore-seletor-hierarquia { margin-bottom: 12px; }

.arvore-seletor-passo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.arvore-seletor-ordem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 4px;
}

.arvore-seletor-nome { font-size: 0.85rem; margin-right: 2px; }

@media print {
    .arvore-painel-no { position: static; }
    .arvore-tabela-wrapper { border: 0; }
}

/* ---------- Conferencia da NF-e (2026-09-14) ----------
   Pedido do dono: o formulario da entrada feria as regras de design. Tres pecas
   com a mesma regua de 4/8px: o cabecalho da nota (emitente, destinatario e
   operacao lado a lado, o total como numero forte), os itens sem estoque em
   dois niveis (o que a nota diz em cima, o que o usuario decide embaixo, os
   valores sempre numa linha e alinhados a direita) e a barra de acoes fixa. */

.nota-rotulo {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}
.nota-rotulo--direita { justify-content: flex-end; }
.nota-apoio {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}
.nota-apoio--alerta { color: var(--mud-palette-warning-darken); }
.nota-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.nota-numero {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nota-cabecalho__topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.nota-cabecalho__numero { line-height: 1.3; }
.nota-cabecalho__complemento {
    margin-left: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}
.nota-cabecalho__total { text-align: right; }
.nota-cabecalho__partes,
.nota-cabecalho__detalhes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.nota-cabecalho__detalhes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.nota-parte { min-width: 0; }
.nota-parte__nome { overflow-wrap: anywhere; line-height: 1.4; }
.nota-parte__chip { margin: 8px 0 0 0 !important; max-width: 100%; }
.nota-parte__chip .mud-chip-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-cabecalho__rodape {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.nota-cabecalho__chave {
    flex: 1 1 360px;
    min-width: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}
.nota-cabecalho__texto-livre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Itens sem estoque: a grade dos dados da nota e a das decisoes. */
.nota-itens__cabecalho,
.nota-item__dados {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 104px 112px 120px;
    column-gap: 16px;
    align-items: baseline;
}
.nota-itens__cabecalho {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.nota-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.nota-item__numero { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.nota-item__descricao { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.nota-item__codigo {
    margin-left: 8px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.nota-item__valores { display: contents; }
.nota-direita { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nota-item__decisoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 40px;
    column-gap: 16px;
    align-items: start;
    margin: 12px 0 0 48px;
}
.nota-item__decisoes--bem { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 40px; }
.nota-item__estado {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}
.nota-item__acao { padding-top: 4px; display: flex; justify-content: center; }
.nota-itens__rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 12px;
}

/* Barra de acoes: o total, a pendencia e o botao principal sempre a vista. */
.entrada-barra-acoes {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 12px 24px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.entrada-barra-acoes__resumo { display: flex; flex-direction: column; min-width: 0; }
.entrada-barra-acoes__botoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 959.95px) {
    .nota-cabecalho__partes,
    .nota-cabecalho__detalhes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .nota-cabecalho__total,
    .nota-rotulo--direita { text-align: left; justify-content: flex-start; }
    .nota-itens__cabecalho { display: none; }
    .nota-item__dados { grid-template-columns: 24px minmax(0, 1fr); row-gap: 4px; }
    .nota-item__valores {
        display: flex;
        grid-column: 2;
        gap: 16px;
        flex-wrap: wrap;
    }
    .nota-item__valores .nota-direita { text-align: left; }
    .nota-item__decisoes,
    .nota-item__decisoes--bem { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 12px; margin-left: 0; }
    .nota-item__decisoes > :not(.nota-item__acao) { grid-column: 1; }
    .nota-item__acao { grid-column: 2; grid-row: 1; }
    .entrada-barra-acoes { padding: 12px 16px; }
    .entrada-barra-acoes__botoes { width: 100%; }
    .entrada-barra-acoes__botoes .mud-button-root { flex: 1 1 auto; }
}

/* Leitura nos itens (2026-09-14, 2a rodada): o que nao se troca na nota - o tipo do
   produto reconhecido, o do item que segue outro - e texto, sem moldura de campo. Com
   cara de input, o usuario acha que da para trocar. Altura minima de um input para a
   linha das decisoes continuar na mesma regua. */
.nota-item__leitura {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    padding: 2px 0;
}
.nota-item__leitura-rotulo {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}
.nota-item__leitura-valor {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}
.nota-item__leitura-origem {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Detalhe do produto da nota (2026-09-14): a modal com o item inteiro do XML. O total do
   item e o numero forte do cabecalho; identificacao e valor lado a lado; cada tributo num
   cartao com a situacao, os tres numeros que importam e o resto em blocos. */
.nota-item__detalhes { display: flex; width: fit-content; margin: 2px 0 0 -5px; }
.produto-nota { display: flex; flex-direction: column; gap: 24px; }
.produto-nota__navegacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: -12px;
}
.produto-nota__posicao {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}
.produto-nota__hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}
.produto-nota__identidade { min-width: 0; flex: 1 1 320px; }
.produto-nota__descricao { overflow-wrap: anywhere; line-height: 1.35; margin: 2px 0 4px; }
.produto-nota__avisos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.produto-nota__avisos .mud-chip { margin: 0; }
.produto-nota__total { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.produto-nota__total-valor {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-primary);
}
.produto-nota__colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.produto-nota__secao { min-width: 0; }
.produto-nota__secao-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.produto-nota__secao-titulo .mud-icon-root { color: var(--mud-palette-tertiary); }
.produto-nota__cadastro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}
.produto-nota__cadastro .mud-icon-root { color: var(--mud-palette-success); }
.produto-nota__campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0;
}
.produto-nota__campos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.produto-nota__campos--denso { gap: 8px 16px; }
.produto-nota__campo { min-width: 0; }
.produto-nota__campo dt {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}
.produto-nota__campo dd {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.produto-nota__campos--denso .produto-nota__campo dd { font-size: 0.8125rem; }
.produto-nota__campo dd.produto-nota__apoio {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.produto-nota__campo dd.produto-nota__apoio--alerta {
    font-weight: 500;
    color: var(--mud-palette-warning-darken);
}
.produto-nota__composicao {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.produto-nota__composicao caption {
    padding-bottom: 4px;
    text-align: left;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.produto-nota__composicao th { padding: 4px 0; text-align: left; font-weight: 400; }
.produto-nota__composicao td { padding: 4px 0; text-align: right; }
.produto-nota__composicao tfoot th,
.produto-nota__composicao tfoot td {
    padding-top: 8px;
    font-weight: 700;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.produto-nota__sinal { display: inline-block; width: 16px; color: var(--mud-palette-text-secondary); }
.produto-nota__nota-rodape {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}
.produto-nota__tributos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.produto-nota__tributo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}
.produto-nota__tributo--largo { grid-column: 1 / -1; }
.produto-nota__tributo--largo .produto-nota__campos--denso { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.produto-nota__tributo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.produto-nota__tributo-cabecalho h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.produto-nota__situacao {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
    background: rgba(0, 137, 123, 0.10); /* Tertiary translucido, como o icone do DialogHeader */
    color: var(--mud-palette-tertiary-darken);
}
.produto-nota__destaques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px 16px;
    padding: 8px 0;
    border-top: 1px dashed var(--mud-palette-lines-default);
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}
.produto-nota__destaques .nota-rotulo { margin-bottom: 0; }
.produto-nota__destaque-valor { display: block; font-size: 1rem; font-weight: 600; }
.produto-nota__parte-titulo {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}
.produto-nota__outros summary { cursor: pointer; font-size: 0.75rem; color: var(--mud-palette-tertiary); }
.produto-nota__outros[open] summary { margin-bottom: 8px; }
.produto-nota__tributo-rodape {
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.produto-nota__tabela-rolagem { overflow-x: auto; }
.produto-nota__lotes { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.produto-nota__lotes th {
    padding: 0 16px 6px 0;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.produto-nota__lotes td {
    padding: 8px 16px 8px 0;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.produto-nota__lotes .nota-direita { text-align: right; }
.produto-nota__validade {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    background: rgba(255, 152, 0, 0.14);
    color: var(--mud-palette-warning-darken);
}
.produto-nota__validade--vencida { background: rgba(244, 67, 54, 0.12); color: var(--mud-palette-error-darken); }
.produto-nota__texto-livre {
    margin: 0 0 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.5;
}
.produto-nota__texto-livre .nota-rotulo { display: block; margin-bottom: 0; }

@media (max-width: 959.95px) {
    .produto-nota__colunas,
    .produto-nota__tributos { grid-template-columns: minmax(0, 1fr); }
    .produto-nota__campos--tres,
    .produto-nota__tributo--largo .produto-nota__campos--denso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .produto-nota__total { align-items: flex-start; text-align: left; }
}
/* Detalhe da entrada (2026-09-14): a linha de codigos do item sob a descricao (cProd, NCM,
   CFOP do XML guardado), o destino em tom secundario e a chave de acesso que quebra no
   celular sem estourar a coluna. */
.entrada-item__codigos {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.entrada-item__destino { color: var(--mud-palette-text-secondary); white-space: nowrap; }
.entrada-chave { overflow-wrap: anywhere; }

@media (max-width: 599.95px) {
    .produto-nota__hero { padding: 12px 16px; }
    .produto-nota__campos,
    .produto-nota__campos--tres,
    .produto-nota__tributo--largo .produto-nota__campos--denso { grid-template-columns: minmax(0, 1fr); }
}

/* Destino da entrada em grupos fixos (2026-09-14, 2a rodada): cada grupo na sua linha,
   separado por espaco; a frase do dono da nota fica acima dos campos, fora da grade. */
.destino-dono {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}
.destino-grupo + .destino-grupo { margin-top: 24px; }
.destino-grupo__titulo { margin-bottom: 4px !important; }
.destino-grupo__ajuda {
    display: block;
    margin-bottom: 8px;
    color: var(--mud-palette-text-secondary);
}
/* A classe cai no mesmo elemento do .mud-input-control: repetir as duas empata com a regra
   do MudBlazor (.mud-input-control.mud-input-control-boolean-input .mud-radio-group, que
   poe as opcoes em linha) e o app.css, carregado depois, vence sem !important. */
.mud-input-control.destino-custo-opcoes .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}


/* ------------------------------------------------------------------------
   ASSISTENTE DE CADASTRO SUGERIDO — a casca comum das telas que oferecem um
   ponto de partida pronto (plano de contas em /financeiro/plano-contas/modelo
   e centros de custo em /financeiro/centros-de-custo/modelo).

   Nasceu no <style> da página do plano; virou classe compartilhada quando o
   segundo assistente chegou e as duas telas ficaram PARECIDAS mas não iguais
   — cartão com outra borda, prévia com outro respiro, rodapé em outro lugar.
   Quem abre as duas tem de sentir o mesmo sistema (pedido do dono, 17/09/2026).
   Padrão: passo 1 escolhe a opção nos cartões, passo 2 marca os itens e o
   rodapé sticky conta e cria.
   ------------------------------------------------------------------------ */
.assistente-card {
    /* Respiro para o rodapé sticky não cobrir a última linha da lista. */
    margin-bottom: 8px;
}
.assistente-rodape {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
}
/* O cartão de cada ponto de partida (passo 1). */
.assistente-opcao {
    transition: border-color 120ms ease-in-out;
}
.assistente-opcao:hover {
    border-color: var(--mud-palette-tertiary);
}
/*  A PRÉVIA do cartão: amostra de itens de verdade, com o código em fonte de
    largura fixa para alinhar coluna. */
.assistente-previa {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    overflow-x: auto;
}
.assistente-previa-linha {
    display: flex;
    gap: 10px;
    align-items: baseline;
    line-height: 1.7;
    white-space: nowrap;
}
.assistente-previa-codigo {
    font-family: var(--mud-typography-caption-family, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-tertiary);
    flex-shrink: 0;
}
.assistente-previa-nome {
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}
.assistente-previa-resto {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    padding-top: 2px;
}
/*  Lista do passo 2 quando os itens são PLANOS (centros de custo). O plano de
    contas usa a árvore .plano-contas-tree no mesmo lugar. */
.assistente-grupo {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 12px 0 4px;
}
.assistente-lista {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}
.assistente-linha {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 4px 8px 6px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.assistente-linha:last-child { border-bottom: none; }
.assistente-linha-texto {
    padding-top: 8px;
    min-width: 0;
}
.assistente-linha-nome {
    font-weight: 600;
    font-size: 0.9rem;
}
.assistente-linha-exemplos {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}
/*  Código que o item VAI receber — mesma fonte da coluna Código da consulta,
    para o usuário reconhecer o que vai encontrar depois na lista. */
.assistente-codigo {
    font-family: var(--mud-typography-caption-family, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}
.assistente-codigo-vago {
    /* Item que não vai ser criado (já existe ou está desmarcado): o espaço da
       coluna continua reservado, senão a lista "pula" a cada clique. */
    color: var(--mud-palette-lines-default);
}

/*  Linha COM CAMPOS — a particularidade do assistente de contas bancárias
    (/conta-bancaria/modelo): o sistema não adivinha agência nem conta, então
    abaixo do nome do papel vem o bloco de banco, agência, conta, descrição e
    saldo. O modificador --campos deixa o texto crescer; nos outros dois
    assistentes .assistente-linha-texto continua como está. */
.assistente-linha--campos .assistente-linha-texto {
    flex: 1 1 auto;
}
.assistente-linha-campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px 12px;
    margin-top: 6px;
    width: 100%;
}
.assistente-linha-campos .mud-input-control {
    margin-top: 0;
}
.assistente-linha-bancos,
.assistente-campo-banco-livre,
.assistente-linha-hint,
.assistente-linha-convencao,
.assistente-linha-acoes {
    grid-column: 1 / -1;
}
.assistente-linha-bancos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.assistente-campo-agencia,
.assistente-campo-conta {
    grid-column: span 3;
}
.assistente-campo-dv {
    grid-column: span 1;
}
.assistente-campo-descricao {
    grid-column: span 8;
}
.assistente-campo-saldo {
    grid-column: span 4;
}
.assistente-linha-hint {
    font-size: 0.75rem;
    color: var(--mud-palette-error);
}
.assistente-linha-convencao {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}
.assistente-grupo-acoes {
    padding: 4px 0 8px;
}
/*  A data única do saldo na barra do passo 2. */
.assistente-campo-data {
    max-width: 220px;
}
/*  Tipo humanizado ao lado do nome na prévia do cartão ("Conta corrente"). */
.assistente-previa-tipo {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
/*  Linha FILHA — a particularidade do assistente de locais
    (/estoque/locais/modelo): o perfil Detalhado sugere POSIÇÕES dentro dos
    locais, então abaixo da linha do local vêm as das posições, recuadas. É o
    mesmo gesto da árvore de /estoque/locais (.local-no--posicao): o recuo diz
    "dentro de" sem precisar de texto. */
.assistente-linha--filha {
    padding-left: 36px;
}
.assistente-linha--filha .assistente-linha-nome {
    font-weight: 400;
}
/*  Assistente de instalações (/pecuaria/instalacoes/modelo): a linha é por
    FASE, com os campos de quantidade na mesma grade de 12 colunas das contas
    bancárias (.assistente-linha-campos) — nunca baia por baia. Abaixo dos
    campos, o RESUMO do que a linha cria ("Terminação T1…T3 › Baia 01…20 ·
    63 instalações · 1.500 cabeças"). */
.assistente-campo-qtd {
    grid-column: span 3;
}
.assistente-linha-resumo {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}
/*  A fazenda (e a granja) na barra do passo 2. */
.assistente-campo-fazenda {
    max-width: 420px;
}
@media (max-width: 599.98px) {
    .assistente-linha--filha {
        padding-left: 20px;
    }
    .assistente-campo-qtd {
        grid-column: span 6;
    }
    .assistente-campo-fazenda {
        max-width: none;
    }
    .assistente-campo-agencia,
    .assistente-campo-conta {
        grid-column: span 5;
    }
    .assistente-campo-dv {
        grid-column: span 2;
    }
    .assistente-campo-descricao,
    .assistente-campo-saldo {
        grid-column: 1 / -1;
    }
    .assistente-campo-data {
        max-width: none;
        width: 100%;
        margin-left: 0 !important;
    }
}

/* ------------------------------------------------------------------------
   VARREDURA DE UX DAS TELAS DO LIGHT_V3 (2026-09-23)
   Pedido do dono depois dos PRs 3716/3717/3719: as telas faziam o que
   prometiam, mas com buracos, textos espremidos e rolagem lateral onde não
   devia. Estas são as regras que valem para MAIS DE UMA tela; o que é de uma
   tela só ficou no <style> dela.
   ------------------------------------------------------------------------ */

/* Contas a pagar/receber: as três colunas de texto (contraparte, conta
   contábil, descrição) acompanham a largura da JANELA. Com 200 px fixos a
   grade pedia ~1.200 px, e a 1.440 px com o menu aberto o contêiner tem
   1.069: a coluna Ações fixa cobria o fim do Valor ("R$ 4.500,0") e o Status
   inteiro — medido ao vivo. O 5º ícone (rateio, Light_v3) é que empurrou a
   grade para fora. A conta: as outras colunas somam ~524 px, o respiro do
   layout ~371 px e cada célula tem 24 px de padding. Até 1.590 px a coluna
   encolhe; acima disso volta aos 200 px de sempre. */
.grade-titulos .consulta-celula-truncada--compacta {
    max-width: clamp(140px, calc((100vw - 990px) / 3), 200px);
}

/* Motor de relatórios: a 1ª coluna de dados fica FIXA ao rolar para o lado.
   O relatório de lotes na visão Analítico tem 2.097 px de tabela num
   contêiner de 1.068 — rolando para ver custo e conversão, sumia o código do
   lote e a linha deixava de dizer de quem era. O fundo é opaco (sticky não
   recorta o que passa embaixo) e acompanha zebra, hover, subtotal e total. */
.relatorio-tabela .relatorio-col-fixa {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    box-shadow: inset -1px 0 0 var(--mud-palette-lines-default);
}
.relatorio-tabela .relatorio-col-fixa--apos-numero {
    left: 44px;
}
.relatorio-tabela thead th.relatorio-col-fixa {
    z-index: 3;
}
.relatorio-tabela.com-zebra tr.linha-par td.relatorio-col-fixa {
    background: var(--mud-palette-background-gray);
}
.relatorio-tabela tbody tr.linha-dado:hover td.relatorio-col-fixa {
    background: linear-gradient(rgba(0, 137, 123, 0.08), rgba(0, 137, 123, 0.08)), var(--mud-palette-surface);
}
.relatorio-linha-subtotal td.relatorio-col-fixa {
    background: #F3F7F7;
}
.relatorio-linha-total td.relatorio-col-fixa {
    z-index: 3;
    background: #DDE9E9;
}

/* Painel lateral que acompanha a rolagem: "Confira antes de gravar" nos
   Tratos e no Manejo sanitário, e a ação escolhida em Ações por lote. O
   formulário à esquerda é mais alto que o painel, e o botão de gravar sumia
   da tela enquanto o produtor preenchia o fim do formulário. Só a partir de
   960 px (md): abaixo disso as colunas empilham e grudar não faz sentido. */
@media (min-width: 960px) {
    .painel-lateral-fixo {
        position: sticky;
        top: 76px;
    }
}

/* Opções que pertencem a UMA escolha do formulário (o plantel junto dos
   "Vários lotes"): em vez de empilhar interruptor, seletor e ajuda dentro da
   coluna estreita do alvo — que deixava um buraco de 140 px ao lado —, elas
   ocupam a linha inteira, numa faixa que diz de quem são. */
.opcoes-do-alvo {
    padding: 8px 12px 4px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

/* "Como funciona" RESUMIDO: aberto, o painel mostra só o primeiro bloco do
   conteúdo; o resto fica atrás do "Ler tudo". Na primeira visita ele ocupava
   ~270 px nos Tratos e ~380 px no Painel de avisos numa tela de 982 — o
   formulário começava na metade da tela. O botão só aparece quando HÁ um
   segundo bloco (a regra olha os filhos, sem medir nada), e o painel de
   parágrafo único segue inteiro, como antes. */
.como-funciona__texto--resumido > :not(:first-child) {
    display: none;
}
.como-funciona:not(:has(.como-funciona__texto > :nth-child(2))) .como-funciona__mais {
    display: none;
}

/* O que falta para o botão principal habilitar (RequisitosDoLancamento). */
.requisitos-lancamento {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}
.requisitos-lancamento__titulo {
    margin-right: 2px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.requisitos-lancamento__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px 1px 6px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.requisitos-lancamento__item .mud-icon-root {
    font-size: 0.95rem;
    color: var(--mud-palette-text-disabled);
}

/* Rodapé de salvar dos formulários longos (RodapeDoFormulario) — item 7 das
   sugestões da varredura. Na Nova carga, no Novo lote e na Reprodução do
   rebanho os botões ficavam no FIM da página: quem preenchia o topo não via
   o Salvar nem o que faltava para ele habilitar. Sticky (e não fixed): gruda
   no pé da janela enquanto o formulário passa por ela e volta ao lugar
   natural no fim dele, sem cobrir o que vem depois (o extrato da Reprodução).
   Só gruda a partir de 600 px: no celular o rodapé tem de 62 a 134 px (a
   carga empilha resumo e três botões em três linhas, medido) e, somado ao
   teclado virtual, esconderia o campo que se está digitando. Ali ele fica no
   fim do formulário, como antes, com a mesma moldura. */
.rodape-formulario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 16px;
}
.rodape-formulario--fixo {
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: 0;
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
@media (min-width: 600px) {
    .rodape-formulario--fixo {
        position: sticky;
        bottom: 0;
        z-index: 3;
    }
}
.rodape-formulario__resumo {
    flex: 1 1 280px;
    min-width: 0;
}
.rodape-formulario__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}
/* Dentro do rodapé a lista do que falta perde a caixa cinza: o próprio
   rodapé já é a moldura, e caixa dentro de caixa só engrossa a faixa. */
.rodape-formulario .requisitos-lancamento {
    padding: 0;
    background: transparent;
}

/* O FAB "voltar ao topo" é fixed no canto inferior direito (24 px) — bem em
   cima do botão principal de um rodapé que gruda no pé da janela.
   - Formulário com rodapé fixo (a partir de 600 px, onde ele gruda): o FAB
     SOME. Levantá-lo não serve aos dois
     estados do sticky — grudado, o rodapé ocupa os primeiros 62 px do pé;
     no fim da rolagem ele volta ao lugar natural (~70 px acima do pé, medido
     na Nova carga) e o FAB levantado caía em cima do "Salvar carga". A ação
     principal já está sempre à vista; um botão flutuante no mesmo canto só
     disputa com ela.
   - Assistente de cadastro sugerido: a lista é longa e o topo faz falta, e
     o rodapé termina bem acima do pé da página — levantar resolve (medido:
     com 24 px o FAB cobria o "Criar" no meio da rolagem; com 88 px, nem no
     meio nem no fim). No celular, não: o rodapé do assistente tem 103 px
     (texto e botão em duas linhas) e o FAB caía no botão a 16 px e no texto
     a 88 px — a janela livre dependia da altura do texto de cada tela. */
@media (min-width: 600px) {
    body:has(.rodape-formulario--fixo) .botao-voltar-topo {
        display: none;
    }
}
body:has(.assistente-rodape) .botao-voltar-topo {
    bottom: 88px;
}
@media (max-width: 599.95px) {
    body:has(.assistente-rodape) .botao-voltar-topo {
        display: none;
    }
}

/* Folhas de lançamento (mortalidade do dia, coberturas dos rebanhos) — item 5
   da varredura: a linha que já tem número se destaca, e numa folha de dez
   lotes é isso que mostra, de relance, o que já foi digitado. Fundo leve e
   filete à esquerda na cor do botão da folha (tertiary); a linha gravada sai
   do destaque (fica esmaecida pelo opacity da própria tela). */
.folha-linha--preenchida > td {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.08);
}
.folha-linha--preenchida:hover > td {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.14);
}
.folha-linha--preenchida > td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-tertiary);
}
.mud-paper-outlined.folha-cartao--preenchido {
    border-color: var(--mud-palette-tertiary);
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.06);
}

/* Campo com ⓘ (CampoComDica) — item 8 da varredura: a ajuda do campo é UMA
   linha; a explicação longa mora no ⓘ ao lado, que abre no hover, no foco e
   no toque. O botão tem 40 px (a área de toque do tablet do campo) e fica
   centrado no input denso de 40 px, não na ajuda: medido, o controle começa
   8 px acima do input. */
.campo-com-dica {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}
.campo-com-dica__campo {
    flex: 1 1 auto;
    min-width: 0;
}
.campo-com-dica .campo-com-dica__icone {
    margin-top: 8px;
    padding: 10px;
    color: var(--mud-palette-text-secondary);
}
/* width: max-content — perto da borda direita o balão encolhia para caber
   (medido: 165 px e seis linhas para o ⓘ do regime). Com a largura fixada
   no conteúdo, ele abre à esquerda do ⓘ (Placement.Left no componente), por
   cima do próprio campo. */
.campo-com-dica__texto {
    display: block;
    width: max-content;
    max-width: 300px;
    white-space: normal;
    text-align: left;
}
/* No celular o campo ocupa a linha e o ⓘ fica a ~40 px da borda: com 300 px
   o balão não cabia à esquerda dele e encostava no ícone (medido a 375). */
@media (max-width: 599.95px) {
    .campo-com-dica__texto {
        max-width: 240px;
    }
}

/* ------------------------------------------------------------------------
   PAINEL DE AVISOS EM CARTÕES (CartaoDeAviso) — item 10 das sugestões da
   varredura de UX do Light_v3. O painel misturava alerta laranja de três
   parágrafos (140 px), tabela de UMA linha dentro de cartão (162 e 173 px) e
   legenda solta; a 1.366 px os KPIs começavam abaixo da dobra. Todo aviso
   agora tem a mesma forma: ícone, título com a quantidade, uma linha de
   resumo e os itens como atalhos. A cor da borda e do ícone diz o peso — e
   só ela: o fundo continua neutro (cor semântica não decora).
   ------------------------------------------------------------------------ */
.avisos-cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.avisos-cabecalho__titulo {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.avisos-cabecalho__contagem {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 11px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
}
.cartao-aviso {
    --cartao-aviso-cor: var(--mud-palette-warning);
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--cartao-aviso-cor);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}
.cartao-aviso--info {
    --cartao-aviso-cor: var(--mud-palette-info);
}
.cartao-aviso--ok {
    --cartao-aviso-cor: var(--mud-palette-success);
}
.cartao-aviso + .cartao-aviso {
    margin-top: 12px;
}
.cartao-aviso__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.cartao-aviso__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--cartao-aviso-cor);
    background: color-mix(in srgb, var(--cartao-aviso-cor) 14%, transparent);
}
/* Base de 200 px: com 260 o texto não cabia ao lado do ícone num celular de
   375 (sobram ~259 px) e o ícone ficava sozinho numa linha (medido). */
.cartao-aviso__texto {
    flex: 1 1 200px;
    min-width: 0;
}
.cartao-aviso__titulo {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}
/* Uma linha: o que não couber vira reticências (o texto inteiro no title). */
.cartao-aviso__resumo {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cartao-aviso__acao {
    flex: 0 0 auto;
    margin-left: auto;
}
/* Os itens alinham com o texto do título, não com o ícone. */
.cartao-aviso__itens {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0 48px;
}
.cartao-aviso__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cartao-aviso__chips .mud-chip {
    margin: 0;
}
.cartao-aviso__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding-top: 6px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    font-size: 0.8125rem;
}
.cartao-aviso__linha:first-child {
    padding-top: 0;
    border-top: 0;
}
.cartao-aviso__sinal {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--cartao-aviso-cor);
}
.cartao-aviso__secundario,
.cartao-aviso__nota {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.avisos-rodape {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
/* No celular os itens começam na borda (o recuo de 48 px comeria um sétimo da
   tela) e o resumo QUEBRA a linha: com reticências, a carência perdia o "antes
   disso, o alvo não vai para o abate" (medido a 375), e o title que guarda o
   texto inteiro não existe no toque. */
@media (max-width: 599.95px) {
    .cartao-aviso__itens {
        margin-left: 0;
    }
    .cartao-aviso__resumo {
        white-space: normal;
    }
}

/* ─── Formulário de conta a pagar/receber (2026-09-24) ──────────────────────
   Um formulário para os dois lados e os três jeitos de a conta nascer: única,
   parcelada ou recorrente. O seletor de modo é a assinatura visual da tela —
   três cartões com o exemplo de cada caso, porque "parcelar" e "recorrente"
   eram botões soltos na lista e o operador não sabia qual servia para quê. */
.modo-lancamento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.modo-lancamento__opcao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.modo-lancamento__opcao:hover {
    border-color: var(--mud-palette-tertiary);
}
.modo-lancamento__opcao:focus-visible {
    outline: 2px solid var(--mud-palette-tertiary);
    outline-offset: 2px;
}
.modo-lancamento__opcao--ativa {
    border-color: var(--mud-palette-tertiary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-tertiary);
    background: rgba(var(--mud-palette-tertiary-rgb), 0.06);
}
.modo-lancamento__cabeca {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.modo-lancamento__cabeca .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}
.modo-lancamento__opcao--ativa .modo-lancamento__cabeca .mud-icon-root {
    color: var(--mud-palette-tertiary);
}
.modo-lancamento__exemplo {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* A tabela do cronograma: número e valor à direita, data e dia da semana
   juntos, a linha ajustada à mão marcada na borda esquerda. */
.cronograma-serie {
    width: 100%;
    border-collapse: collapse;
}
.cronograma-serie th {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    color: var(--mud-palette-text-secondary);
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}
.cronograma-serie td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    vertical-align: middle;
}
.cronograma-serie .cronograma-serie__num,
.cronograma-serie .cronograma-serie__valor {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cronograma-serie td.cronograma-serie__num {
    width: 48px;
    color: var(--mud-palette-text-secondary);
}
.cronograma-serie td.cronograma-serie__data {
    width: 190px;
}
.cronograma-serie td.cronograma-serie__valor {
    width: 180px;
}
.cronograma-serie__dia {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.cronograma-serie__dia--fim-de-semana {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}
.cronograma-serie__descricao {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}
.cronograma-serie tr.cronograma-serie__linha--ajustada td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-tertiary);
}
.cronograma-serie__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}
.cronograma-serie__total {
    font-variant-numeric: tabular-nums;
}
/* No celular a descrição sai (ela repete o modelo com o número) e a data
   encolhe — sem isso a tabela passava da tela a 375 px. Os três cartões de
   modo viram uma fileira compacta: empilhados, com o exemplo, ocupavam a
   primeira tela inteira antes do primeiro campo (medido a 375 px). */
@media (max-width: 599.95px) {
    .modo-lancamento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .modo-lancamento__opcao {
        align-items: center;
        text-align: center;
        padding: 12px 8px;
    }
    .modo-lancamento__cabeca {
        flex-direction: column;
        gap: 4px;
        font-size: 0.8125rem;
        line-height: 1.25;
    }
    .modo-lancamento__exemplo {
        display: none;
    }
    .cronograma-serie th.cronograma-serie__col-descricao,
    .cronograma-serie td.cronograma-serie__descricao {
        display: none;
    }
    .cronograma-serie td.cronograma-serie__data {
        width: auto;
    }
    .cronograma-serie td.cronograma-serie__valor {
        width: 130px;
    }
}

/* ------------------------------------------------------------------
   "Não informado" — classe CANÔNICA (2026-09-24). A receita já se repetia
   inline pela casa (cadeia de retificação do LCDPR, "sem cliente definido"
   da contranota, prévia do lote do Livro Caixa, linha informativa da DRE):
   o dado que falta sai em itálico e no tom secundário, e o RESTO da linha
   continua igual. Nasceu com a forma de pagamento dos títulos.
   ------------------------------------------------------------------ */
.texto-nao-informado {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Forma de pagamento (2026-09-24): ícone tingido pela cor da forma (--cat,
   de IconesMeioPagamento) + rótulo na cor normal do texto. Mesma mistura do
   .cat-produto-chip, mas SEM fundo: numa grade cheia, um chip colorido por
   linha vira mostruário; o ícone basta para diferenciar batendo o olho. */
.meio-pagamento {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    vertical-align: middle;
}
.meio-pagamento__icone.mud-icon-root {
    flex: none;
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--cat) 78%, var(--mud-palette-text-primary));
}
/* Sem forma, o espaço do ícone fica reservado: os rótulos da coluna alinham. */
.meio-pagamento__icone--vazio {
    display: inline-block;
    flex: none;
    width: 1.05rem;
}
.meio-pagamento__texto {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* O vazio do seletor da forma fala na mesma voz do rótulo "Não informado". */
.seletor-meio-pagamento--vazio input::placeholder {
    font-style: italic;
}
