/* ── Sticky table headers — OPT-IN via classe .vox-table-sticky.

   Padrão GitHub Issues / Notion / Linear: scroll da PÁGINA toda.
   Título, filtros e stats scrollam junto, o thead fica grudado
   relativo ao viewport (abaixo do navbar fixo) quando ultrapassa.

   Estratégia técnica:
   - Desktop: overflow: visible — sem contexto de scroll, sticky
     relativo ao viewport
   - Mobile: overflow-x: auto — permite scroll horizontal (tabela
     larga em tela pequena)
   - :has() detecta se há toolbar global para ajustar o offset
     (Chrome 105+, Safari 15.4+, Firefox 121+)

   Uso (substitui .table-responsive):
     <div class="table-responsive vox-table-sticky">
       <table class="table">...</table>
     </div>
*/
.table-responsive.vox-table-sticky {
    overflow: visible;  /* remove scroll context em desktop para sticky funcionar no viewport */
}
@media (max-width: 767.98px) {
    .table-responsive.vox-table-sticky {
        overflow-x: auto;  /* em mobile, permite scroll horizontal quando tabela é larga */
    }
}
.vox-table-sticky thead th {
    position: sticky;
    top: 70px;  /* altura do navbar fixo */
    z-index: 2;
    background-color: var(--card-primary, #fff);
    box-shadow: inset 0 -2px 0 var(--border-color, #dee2e6);
}
/* Quando a tela tem toolbar de filtros globais, sticky offset considera a toolbar */
body:has(.vox-filtros-toolbar) .vox-table-sticky thead th {
    top: 126px;  /* 70px navbar + ~56px toolbar */
}
[data-bs-theme="dark"] .vox-table-sticky thead th {
    background-color: var(--card-primary, #212529);
}
/* Mobile: desabilita sticky do thead. O navbar mobile tem altura diferente do
   desktop e o offset top:70px faz o header flutuar em posicao confusa
   (sobreposto ou fora do viewport esperado). Em telas pequenas o usuario
   scrolla pouca distancia, sticky perde valor e atrapalha mais que ajuda. */
@media (max-width: 767.98px) {
    .vox-table-sticky thead th,
    body:has(.vox-filtros-toolbar) .vox-table-sticky thead th {
        position: static;
        top: auto;
    }
}

/* ── Sticky hierarquico multi-nivel — OPT-IN via classe .vox-table-hier.
   Para tabelas com accordion/agrupamento (ex: insumo_lista: Tipo > Categoria
   > Insumos). Empilha thead + tipo-row + categoria-row naturalmente via
   stacking do position: sticky (padrao iOS section headers / Notion).

   Heights assumidos (height da linha Bootstrap padrao ~42px):
     thead: top = 70px (navbar)
     tipo-row: top = 112px (70 + 42)
     categoria-row: top = 154px (70 + 42 + 42)

   Quando ha toolbar global, todos os offsets sobem +56px.

   Uso (substitui .table-responsive):
     <div class="table-responsive vox-table-hier">
       <table class="table">
         <thead>...</thead>
         <tbody>
           <tr class="tipo-row">...</tr>        -- nivel 1
           <tr class="categoria-row">...</tr>   -- nivel 2
           <tr class="insumo-row">...</tr>      -- nivel 3 (itens)
           ...
         </tbody>
       </table>
     </div>

   O CSS nativo de sticky resolve stacking: ao rolar, o proximo tipo-row
   "empurra" o anterior para cima. Igual comportamento de section headers
   em iOS UITableView.
*/
.table-responsive.vox-table-hier {
    overflow: visible;
}
@media (max-width: 767.98px) {
    .table-responsive.vox-table-hier {
        overflow-x: auto;
    }
    /* Mobile: desabilita sticky multi-nivel pelo mesmo motivo do .vox-table-sticky
       (offset top fixo conflita com altura do navbar mobile). */
    .vox-table-hier thead th,
    .vox-table-hier tr.tipo-row > td,
    .vox-table-hier tr.cultura-row > td,
    .vox-table-hier tr.ordem-row > td,
    .vox-table-hier tr.categoria-row > td,
    .vox-table-hier tr.subordem-row > td,
    .vox-table-hier tr.grande-grupo-row > td,
    .vox-table-hier tr.subgrupo-row > td,
    .vox-table-hier tr.insumo-row > td,
    .vox-table-hier tr.item-row > td {
        position: static;
        top: auto;
    }
}
/* Bootstrap 5 usa border-collapse: collapse por padrao, que tem bug conhecido
   com position:sticky em <th>/<td> (gaps antes de ativar sticky e saltos de
   posicionamento em alguns browsers). Forcar border-collapse: separate
   resolve — cada celula tem box independente e sticky funciona precisamente.
   border-spacing: 0 mantem a aparencia visual identica. */
.vox-table-hier table.table {
    border-collapse: separate;
    border-spacing: 0;
}
/* Cor do trilho lateral (rail) — cada template define via style inline
   na raiz .vox-table-hier, ex.: style="--vox-table-hier-rail: var(--color-insumos);"
   Fallback: border-color padrao. */
.vox-table-hier {
    --vox-table-hier-rail: var(--border-color, #dee2e6);
}

/* thead — nivel 0 (topo absoluto, abaixo do navbar).
   Offsets dinamicos: JS (vox-table-hier.js) mede alturas reais e grava
   --vox-thier-top-* no container. Fallback CSS cobre o caso do JS nao
   ter rodado ainda. */
.vox-table-hier thead th {
    position: sticky;
    top: var(--vox-thier-top-thead, 70px);
    z-index: 4;
    background-color: var(--card-primary, #fff);
    box-shadow: inset 0 -2px 0 var(--border-color, #dee2e6);
}

/* Nivel 1 — borda superior adicional desenha o separador thead↔nivel1
   que ficaria sobreposto pelos 2px de overlap aplicado no JS. */
.vox-table-hier tr.tipo-row > td,
.vox-table-hier tr.cultura-row > td,
.vox-table-hier tr.ordem-row > td {
    position: sticky;
    top: var(--vox-thier-top-1, 110px);
    z-index: 3;
    background-color: var(--card-secondary, #f1f3f5);
    box-shadow:
        inset 0 2px 0 var(--border-color, #dee2e6),
        inset 0 -1px 0 var(--border-color, #dee2e6);
}

/* Nivel 2 — sombra de profundidade por padrao (valida para tabelas de 3 niveis).
   Quando existe nivel 3 (.grande-grupo-row), a sombra eh suprimida aqui e
   transferida para nivel 3 abaixo via :has() — evita sombra dupla.
   NOTA: variedade-row (cultura_lista) NAO esta aqui — ela eh a LEAF do
   cultura_lista, nao um grupo intermediario. Folhas nao stickam (evita
   empilhamento ao rolar). */
.vox-table-hier tr.categoria-row > td,
.vox-table-hier tr.subordem-row > td {
    position: sticky;
    top: var(--vox-thier-top-2, 150px);
    z-index: 2;
    background-color: var(--card-secondary, #f1f3f5);
    box-shadow:
        inset 0 -1px 0 var(--border-color, #dee2e6),
        0 4px 6px -4px rgba(0, 0, 0, 0.08);
}
.vox-table-hier:has(tr.grande-grupo-row) tr.subordem-row > td {
    box-shadow: inset 0 -1px 0 var(--border-color, #dee2e6);
}

/* Nivel 3 — ex.: grande-grupo-row em tipo_solo_lista (hierarquia de 4 niveis).
   Sombra inferior sutil marca o fim do bloco sticky sobre o conteudo. */
.vox-table-hier tr.grande-grupo-row > td {
    position: sticky;
    top: var(--vox-thier-top-3, 190px);
    z-index: 1;
    background-color: var(--card-secondary, #f1f3f5);
    box-shadow:
        inset 0 -1px 0 var(--border-color, #dee2e6),
        0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

/* ── Rails coloridos progressivos por nivel ──
   Cada nivel da hierarquia desenha um rail vertical de 3px na primeira
   celula, posicionado cada vez mais a direita para refletir a profundidade.
   Implementacao via ::before absoluto (evita conflito com box-shadow
   interno do Bootstrap em .table > * > *). */
/* Reset borders do template + paddings ajustados por nivel (step ~12px).
   Paddings originais (40/60/80px) criavam espacamento excessivo. */
.vox-table-hier tr.tipo-row > td:first-child,
.vox-table-hier tr.cultura-row > td:first-child,
.vox-table-hier tr.ordem-row > td:first-child {
    border-left: 0 !important;
    padding-left: 16px !important;
}
.vox-table-hier tr.categoria-row > td:first-child,
.vox-table-hier tr.subordem-row > td:first-child {
    border-left: 0 !important;
    padding-left: 28px !important;
}
/* variedade-row eh LEAF do cultura_lista (nao-sticky) — recebe indent L2 e
   position:relative para contexto do ::before. */
.vox-table-hier tr.variedade-row > td:first-child {
    border-left: 0 !important;
    padding-left: 28px !important;
    position: relative;
}
.vox-table-hier tr.grande-grupo-row > td:first-child {
    border-left: 0 !important;
    padding-left: 40px !important;
}
/* Leaf rows — nao-sticky, precisam position:relative para contexto do ::before.
   Cada leaf usa indent do seu nivel de profundidade no respectivo template:
     - item-row (alvo_lista, 2 niveis): indent de nivel 2
     - insumo-row (insumo_lista, 3 niveis): indent de nivel 3
     - subgrupo-row (tipo_solo_lista, 4 niveis): indent de nivel 4
   (variedade-row em cultura_lista eh folha tambem, mas ja recebe indent L2 acima) */
.vox-table-hier tr.item-row > td:first-child {
    border-left: 0 !important;
    padding-left: 28px !important;
    position: relative;
}
.vox-table-hier tr.insumo-row > td:first-child {
    border-left: 0 !important;
    padding-left: 40px !important;
    position: relative;
}
.vox-table-hier tr.subgrupo-row > td:first-child {
    border-left: 0 !important;
    padding-left: 52px !important;
    position: relative;
}
.vox-table-hier tr.tipo-row > td:first-child::before,
.vox-table-hier tr.cultura-row > td:first-child::before,
.vox-table-hier tr.ordem-row > td:first-child::before,
.vox-table-hier tr.categoria-row > td:first-child::before,
.vox-table-hier tr.variedade-row > td:first-child::before,
.vox-table-hier tr.subordem-row > td:first-child::before,
.vox-table-hier tr.grande-grupo-row > td:first-child::before,
.vox-table-hier tr.insumo-row > td:first-child::before,
.vox-table-hier tr.item-row > td:first-child::before,
.vox-table-hier tr.subgrupo-row > td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--vox-table-hier-rail);
    pointer-events: none;
    z-index: 1;
}
/* Leaf insumo-row: usa a cor especifica do grupo do insumo (herbicida,
   fungicida, acaricida, etc.) definida inline no template via --grupo-cor.
   Fallback para o rail generico se a variavel nao estiver setada. */
.vox-table-hier tr.insumo-row > td:first-child::before {
    background-color: var(--grupo-cor, var(--vox-table-hier-rail));
}
/* Posicao horizontal do rail por nivel (profundidade cresce para direita).
   Rail fica 12px a esquerda do conteudo, alinhado com o step de indentacao. */
.vox-table-hier tr.tipo-row > td:first-child::before,
.vox-table-hier tr.cultura-row > td:first-child::before,
.vox-table-hier tr.ordem-row > td:first-child::before {
    left: 4px;   /* L1 */
}
.vox-table-hier tr.categoria-row > td:first-child::before,
.vox-table-hier tr.variedade-row > td:first-child::before,
.vox-table-hier tr.subordem-row > td:first-child::before,
.vox-table-hier tr.item-row > td:first-child::before {
    left: 16px;  /* L2 (inclui item-row leaf do alvo_lista) */
}
.vox-table-hier tr.grande-grupo-row > td:first-child::before,
.vox-table-hier tr.insumo-row > td:first-child::before {
    left: 28px;  /* L3 (inclui insumo-row leaf do insumo_lista) */
}
.vox-table-hier tr.subgrupo-row > td:first-child::before {
    left: 40px;  /* L4 (subgrupo-row leaf do tipo_solo_lista) */
}
/* Offsets para telas com toolbar global sao calculados dinamicamente
   por vox-table-hier.js (mede navbar + toolbar + alturas reais das linhas).
   Fallback CSS quando JS ainda nao rodou: */
body:has(.vox-filtros-toolbar) .vox-table-hier thead th {
    top: var(--vox-thier-top-thead, 126px);
}
body:has(.vox-filtros-toolbar) .vox-table-hier tr.tipo-row > td,
body:has(.vox-filtros-toolbar) .vox-table-hier tr.cultura-row > td,
body:has(.vox-filtros-toolbar) .vox-table-hier tr.ordem-row > td {
    top: var(--vox-thier-top-1, 166px);
}
body:has(.vox-filtros-toolbar) .vox-table-hier tr.categoria-row > td,
body:has(.vox-filtros-toolbar) .vox-table-hier tr.subordem-row > td {
    top: var(--vox-thier-top-2, 206px);
}
[data-bs-theme="dark"] .vox-table-hier thead th {
    background-color: var(--card-primary, #212529);
}
[data-bs-theme="dark"] .vox-table-hier tr.tipo-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.cultura-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.ordem-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.categoria-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.subordem-row > td {
    background-color: var(--card-secondary, #2b3036);
}

/* ── Loading state transicional durante htmx swap (ao trocar filtros globais).
   O conteúdo fica meio-transparente brevemente enquanto o swap acontece,
   indicando "carregando". Muito sutil — se o swap for rápido nem aparece. ── */
.vox-content-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease-in;
}
@media (prefers-reduced-motion: reduce) {
    .vox-content-loading { transition: none; }
}

/* ── Micro-animações de feedback (todas OPT-IN via classe específica) ── */

/* Slide-out para linhas de tabela removidas (usado por vox-exclusao.js
   antes do reload — adiciona classe no <tr>/<div> da linha via JS) */
@keyframes vox-row-remove {
    to { opacity: 0; transform: translateX(-20px); max-height: 0; padding: 0; border: 0; }
}
.vox-row-removing {
    animation: vox-row-remove 0.3s ease-in forwards;
    overflow: hidden;
}

/* Feedback de sucesso em botão após submit — checkmark animado.
   OPT-IN: adicionar classe vox-success-flash via JS após save bem-sucedido. */
.btn.vox-success-flash {
    position: relative;
    overflow: hidden;
}
.btn.vox-success-flash::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success, #28a745);
    color: #fff;
    font-weight: 700;
    animation: vox-success-flash 1.2s ease-out forwards;
}
@keyframes vox-success-flash {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vox-row-removing,
    .btn.vox-success-flash::after,
    .vox-success-pop { animation: none; }
}

/* Pop-in animation aplicado a alerts/toasts de sucesso que aparecem logo
   apos um form submit (UX-1.5 — plugado via base.html sessionStorage).
   Sutil bounce + glow verde para reforcar o feedback de "save bem-sucedido". */
.vox-success-pop {
    animation: vox-success-pop 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.2);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25), 0 4px 12px rgba(40, 167, 69, 0.15);
}
@keyframes vox-success-pop {
    0%   { transform: scale(0.92); opacity: 0.6; }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* Skeleton overlay durante htmx swap de filtros globais (UX-1.3).
   Injetado dinamicamente por base.html somente se o swap demorar >250ms,
   evitando flicker em requests rapidos. Posicionado no topo do target, por
   cima do conteudo semi-transparente (.vox-content-loading). */
.vox-content-skeleton {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 5;
    padding: 1.5rem;
    background: var(--card-primary, #fff);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
[data-bs-theme="dark"] .vox-content-skeleton {
    background: var(--card-primary, #212529);
}
/* Target precisa ser positioning context para skeleton absoluto funcionar */
#vox-content.vox-content-loading {
    position: relative;
}

/* ── Empty state unificado (listas sem dados ou sem match de filtros) ── */
.vox-empty-state {
    padding: 3rem 1.5rem;
}
.vox-empty-state .vox-empty-icon {
    animation: vox-empty-pulse 3s ease-in-out infinite;
}
@keyframes vox-empty-pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .vox-empty-state .vox-empty-icon { animation: none; }
}

/* ── Skeleton loading placeholder ── */
.skeleton {
    background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-300) 50%, var(--bs-gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-title { height: 1.5em; width: 60%; margin-bottom: 0.75em; }
.skeleton-card { height: 120px; }
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--bs-gray-700) 25%, var(--bs-gray-600) 50%, var(--bs-gray-700) 75%);
    background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ── Override global do Bootstrap .btn — unifica tipografia do sistema ──
   Usa CSS custom properties para preservar o cascade do Bootstrap 5.3.
   .btn-sm e .btn-lg continuam ajustando --bs-btn-border-radius normalmente. ── */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 8px;
}

/* Cards modernos */
.card-modern {
    background-color: var(--card-primary);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-medium);
}

/* Cards secundários (internos) */
.card-modern .card {
    background-color: var(--card-secondary);
}

.card {
    background-color: var(--card-primary);
}

.card .card {
    background-color: var(--card-secondary);
}

/* Badges de status */
.status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    margin: 4px;
}

.status-badge i {
    margin-right: 6px;
}

.status-executadas {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-pendentes {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-atrasadas {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-fora-prazo {
    background: linear-gradient(135deg, #e2e3e5, #d6d8db);
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* Formulários modernos */
.form-control-modern {
    border-radius: 8px;
    border: 2px solid var(--border-light);
    padding: 12px 16px;
    transition: all 0.3s ease;
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.form-control-modern:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para todos os form-controls do sistema */
.form-control:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para selects */
.form-select:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para textareas */
textarea.form-control:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para checkboxes e radios */
.form-check-input:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.btn-custom {
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Timeline específica */
.timeline-container-modern {
    background: var(--card-primary);
    border-radius: 16px;
    box-shadow: 0 6px 20px var(--shadow-medium);
    padding: 2rem;
    margin: 2rem 0;
}

.timeline-marker-modern {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--card-secondary);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    position: relative;
    z-index: 3;
}

.timeline-card-modern {
    background: var(--card-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.timeline-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow-medium);
    border-color: var(--accent-green);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* Breadcrumb personalizado */
.breadcrumb-item a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--accent-green);
    text-decoration: underline;
}

/* Avatar Circle */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Classes de cores por módulo */
/* Gestão Cadastral */
/* Classes ``.btn-produtores``, ``.btn-outline-produtores``, ``.badge-produtores``,
   ``.text-produtores`` etc. são geradas em runtime por ``gerar_css_tipos_vinculo``
   a partir de ``TipoVinculo`` ativo na organização — qualquer tipo dinâmico
   ganha o mesmo conjunto de utilitárias sem duplicação no arquivo estático. */

.btn-fazendas { background-color: var(--color-fazendas); border-color: var(--color-fazendas); color: white; }
.btn-fazendas:hover { background-color: #4a7958; border-color: #4a7958; color: white; }
.btn-outline-fazendas { background-color: transparent !important; border-color: var(--color-fazendas) !important; color: var(--color-fazendas) !important; }
.btn-outline-fazendas:hover { background-color: var(--color-fazendas) !important; border-color: var(--color-fazendas) !important; color: white !important; }
.badge-fazendas { background-color: var(--color-fazendas); color: white; }
.bg-fazendas { background-color: rgba(90, 138, 104, 0.1) !important; }
.bg-fazendas-solid { background-color: var(--color-fazendas) !important; }
.text-fazendas { color: var(--color-fazendas); }
.border-fazendas { border-color: var(--color-fazendas) !important; }

.btn-talhoes { background-color: var(--color-talhoes); border-color: var(--color-talhoes); color: white; }
.btn-talhoes:hover { background-color: #54865d; border-color: #54865d; color: white; }
.btn-outline-talhoes { background-color: transparent !important; border-color: var(--color-talhoes) !important; color: var(--color-talhoes) !important; }
.btn-outline-talhoes:hover { background-color: var(--color-talhoes) !important; border-color: var(--color-talhoes) !important; color: white !important; }
.badge-talhoes { background-color: var(--color-talhoes); color: white; }
.bg-talhoes { background-color: rgba(111, 168, 122, 0.1) !important; }
.text-talhoes { color: var(--color-talhoes); }
.border-talhoes { border-color: var(--color-talhoes) !important; }

/* ``.btn-agronomos`` / ``.btn-operadores`` e variantes idem — geradas
   dinamicamente em runtime. Ver bloco ``produtores`` acima. */

.btn-safras { background-color: var(--color-safras); border-color: var(--color-safras); color: white; }
.btn-safras:hover { background-color: #7a6345; border-color: #7a6345; color: white; }
.btn-outline-safras { background-color: transparent !important; border-color: var(--color-safras) !important; color: var(--color-safras) !important; }
.btn-outline-safras:hover { background-color: var(--color-safras) !important; border-color: var(--color-safras) !important; color: white !important; }
.badge-safras { background-color: var(--color-safras); color: white; }
.bg-safras { background-color: rgba(139, 115, 85, 0.1) !important; }
.text-safras { color: var(--color-safras); }

.btn-maquinarios { background-color: var(--color-maquinarios); border-color: var(--color-maquinarios); color: white; }
.btn-maquinarios:hover { background-color: #2a2a2a; border-color: #2a2a2a; color: white; }
.btn-outline-maquinarios { background-color: transparent !important; border-color: var(--color-maquinarios) !important; color: var(--color-maquinarios) !important; }
.btn-outline-maquinarios:hover { background-color: var(--color-maquinarios) !important; border-color: var(--color-maquinarios) !important; color: white !important; }
.badge-maquinarios { background-color: var(--color-maquinarios); color: white; }
.bg-maquinarios { background-color: rgba(58, 58, 58, 0.1) !important; }
.text-maquinarios { color: var(--color-maquinarios); }

/* Controle de Acesso */
.btn-atribuir-fazendas { background-color: var(--color-atribuir-fazendas); border-color: var(--color-atribuir-fazendas); color: white; }
.btn-atribuir-fazendas:hover { background-color: #4a7a7a; border-color: #4a7a7a; color: white; }
.badge-atribuir-fazendas { background-color: var(--color-atribuir-fazendas); color: white; }
.bg-atribuir-fazendas { background-color: rgba(90, 138, 138, 0.1) !important; }
.text-atribuir-fazendas { color: var(--color-atribuir-fazendas); }

.btn-usuarios { background-color: var(--color-usuarios); border-color: var(--color-usuarios); color: white; }
.btn-usuarios:hover { background-color: #5b4b85; border-color: #5b4b85; color: white; }
.btn-outline-usuarios { background-color: transparent !important; border-color: var(--color-usuarios) !important; color: var(--color-usuarios) !important; }
.btn-outline-usuarios:hover { background-color: var(--color-usuarios) !important; border-color: var(--color-usuarios) !important; color: white !important; }
.badge-usuarios { background-color: var(--color-usuarios); color: white; }
.bg-usuarios { background-color: rgba(107, 91, 149, 0.1) !important; }
.text-usuarios { color: var(--color-usuarios); }

.btn-admin { background-color: var(--color-admin); border-color: var(--color-admin); color: white; }
.btn-admin:hover { background-color: #5c636a; border-color: #5c636a; color: white; }
.btn-outline-admin { background-color: transparent !important; border-color: var(--color-admin) !important; color: var(--color-admin) !important; }
.btn-outline-admin:hover { background-color: var(--color-admin) !important; border-color: var(--color-admin) !important; color: white !important; }
.badge-admin { background-color: var(--color-admin); color: white; }
.bg-admin-entity { background-color: rgba(108, 117, 125, 0.1) !important; }
.text-admin { color: var(--color-admin); }

.btn-superadmin { background-color: var(--color-superadmin); border-color: var(--color-superadmin); color: white; }
.btn-superadmin:hover { background-color: #5b4b85; border-color: #5b4b85; color: white; }
.btn-outline-superadmin { background-color: transparent !important; border-color: var(--color-superadmin) !important; color: var(--color-superadmin) !important; }
.btn-outline-superadmin:hover { background-color: var(--color-superadmin) !important; border-color: var(--color-superadmin) !important; color: white !important; }
.badge-superadmin { background-color: var(--color-superadmin); color: white; }
.bg-superadmin { background-color: rgba(107, 91, 149, 0.1) !important; }
.text-superadmin { color: var(--color-superadmin); }

.btn-organizacoes { background-color: var(--color-organizacoes); border-color: var(--color-organizacoes); color: white; }
.btn-organizacoes:hover { background-color: #7a6a5a; border-color: #7a6a5a; color: white; }
.btn-outline-organizacoes { background-color: transparent !important; border-color: var(--color-organizacoes) !important; color: var(--color-organizacoes) !important; }
.btn-outline-organizacoes:hover { background-color: var(--color-organizacoes) !important; border-color: var(--color-organizacoes) !important; color: white !important; }
.badge-organizacoes { background-color: var(--color-organizacoes); color: white; }
.bg-organizacoes { background-color: rgba(138, 122, 106, 0.1) !important; }
.text-organizacoes { color: var(--color-organizacoes); }

/* ============================================================
 * Action Card — pattern compacto unificado para grids de atalhos.
 * Substitui `.summary-card` (que duplicava ícone + tinha badge
 * "Gerenciar/Acessar/Configurar" redundante).
 *
 * Uso:
 *   <div class="card action-card hover-lift">
 *     <div class="card-body d-flex align-items-center gap-3">
 *       <div class="action-card-icon" style="--icon-color: var(--color-fazendas);">
 *         <i class="fas fa-tractor"></i>
 *       </div>
 *       <div>
 *         <div class="action-card-title">Fazendas</div>
 *         <div class="action-card-meta text-muted small">0 fazendas · 0 ha</div>
 *       </div>
 *       <i class="action-card-chevron fas fa-chevron-right"></i>
 *     </div>
 *   </div>
 * ============================================================ */

.action-card {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    border: 1px solid transparent;
}

.action-card .card-body {
    padding: .85rem 1rem;
}

.action-card:hover {
    border-color: rgba(0, 0, 0, 0.06);
}

.action-card-icon {
    width: 44px;
    height: 44px;
    border-radius: .55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    /* Fallback p/ navegadores sem color-mix */
    background-color: rgba(108, 117, 125, 0.12);
    color: var(--icon-color, #6c757d);
}

@supports (background-color: color-mix(in srgb, red 10%, transparent)) {
    .action-card-icon {
        background-color: color-mix(in srgb, var(--icon-color, #6c757d) 14%, transparent);
    }
}

.action-card-title {
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.3;
    font-size: .95rem;
}

.action-card-meta {
    line-height: 1.35;
    margin-top: .15rem;
}

.action-card-extras {
    margin-top: .35rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.action-card-chevron {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
    font-size: .8rem;
    align-self: center;
    color: var(--bs-secondary-color, #6c757d);
}

.action-card:hover .action-card-chevron {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .action-card,
    .action-card-chevron { transition: none; }
}

.btn-pessoas { background-color: var(--color-pessoas, #6c757d); border-color: var(--color-pessoas, #6c757d); color: white; }
.btn-pessoas:hover { background-color: #5c636a; border-color: #5c636a; color: white; }
.btn-outline-pessoas { background-color: transparent !important; border-color: var(--color-pessoas, #6c757d) !important; color: var(--color-pessoas, #6c757d) !important; }
.btn-outline-pessoas:hover { background-color: var(--color-pessoas, #6c757d) !important; border-color: var(--color-pessoas, #6c757d) !important; color: white !important; }
.badge-pessoas { background-color: var(--color-pessoas, #6c757d); color: white; }
.bg-pessoas { background-color: rgba(108, 117, 125, 0.1) !important; }
.text-pessoas { color: var(--color-pessoas, #6c757d); }

.btn-vinculos { background-color: var(--color-vinculos); border-color: var(--color-vinculos); color: white; }
.btn-vinculos:hover { background-color: #2a6f51; border-color: #2a6f51; color: white; }
.btn-outline-vinculos { background-color: transparent !important; border-color: var(--color-vinculos) !important; color: var(--color-vinculos) !important; }
.btn-outline-vinculos:hover { background-color: var(--color-vinculos) !important; border-color: var(--color-vinculos) !important; color: white !important; }
.badge-vinculos { background-color: var(--color-vinculos); color: white; }
.bg-vinculos { background-color: rgba(52, 131, 97, 0.1) !important; }
.text-vinculos { color: var(--color-vinculos); }

.btn-delegacoes { background-color: var(--color-delegacoes); border-color: var(--color-delegacoes); color: white; }
.btn-delegacoes:hover { background-color: #6a5b7a; border-color: #6a5b7a; color: white; }
.btn-outline-delegacoes { background-color: transparent !important; border-color: var(--color-delegacoes) !important; color: var(--color-delegacoes) !important; }
.btn-outline-delegacoes:hover { background-color: var(--color-delegacoes) !important; border-color: var(--color-delegacoes) !important; color: white !important; }
.badge-delegacoes { background-color: var(--color-delegacoes); color: white; }
.bg-delegacoes { background-color: rgba(122, 107, 138, 0.1) !important; }
.text-delegacoes { color: var(--color-delegacoes); }
.border-delegacoes { border-color: var(--color-delegacoes) !important; }

/* Botões customizados para filtros */
.btn-dark-filled { background-color: #3a3a3a; border-color: #3a3a3a; color: white; }
.btn-dark-filled:hover { background-color: #2a2a2a; border-color: #2a2a2a; color: white; }
.btn-secondary-filled { background-color: #6c757d; border-color: #6c757d; color: white; }
.btn-secondary-filled:hover { background-color: #5c636a; border-color: #5c636a; color: white; }

.btn-usuarios { background-color: var(--color-usuarios); border-color: var(--color-usuarios); color: white; }
.btn-usuarios:hover { background-color: #5b4b85; border-color: #5b4b85; color: white; }
.badge-usuarios { background-color: var(--color-usuarios); color: white; }
.text-usuarios { color: var(--color-usuarios); }

.btn-organizacoes { background-color: var(--color-organizacoes); border-color: var(--color-organizacoes); color: white; }
.btn-organizacoes:hover { background-color: #7a6a5a; border-color: #7a6a5a; color: white; }
.badge-organizacoes { background-color: var(--color-organizacoes); color: white; }
.text-organizacoes { color: var(--color-organizacoes); }

.btn-vinculos { background-color: var(--color-vinculos); border-color: var(--color-vinculos); color: white; }
.btn-vinculos:hover { background-color: #2a6f51; border-color: #2a6f51; color: white; }
.badge-vinculos { background-color: var(--color-vinculos); color: white; }
.text-vinculos { color: var(--color-vinculos); }

/* Programações (singular + plural apontam para --color-programacoes) */
.btn-programacao, .btn-programacoes { background-color: var(--color-programacoes); border-color: var(--color-programacoes); color: white; }
.btn-programacao:hover, .btn-programacoes:hover { background-color: #5b6b95; border-color: #5b6b95; color: white; }
.btn-outline-programacao, .btn-outline-programacoes { background-color: transparent !important; border-color: var(--color-programacoes) !important; color: var(--color-programacoes) !important; }
.btn-outline-programacao:hover, .btn-outline-programacoes:hover { background-color: var(--color-programacoes) !important; border-color: var(--color-programacoes) !important; color: white !important; }
.badge-programacao, .badge-programacoes { background-color: var(--color-programacoes); color: white; }
.bg-programacao, .bg-programacoes { background-color: rgba(107, 123, 165, 0.1) !important; }
.text-programacao { color: var(--color-programacoes); }
/* `.border-programacao` faltava — mesmo buraco já documentado em
   `.text-pendencias` abaixo: a família tinha token e a utility nunca foi escrita.
   A ficha de programação pedia `border-programacao border-2` para destacar a
   versão aberta no Histórico de Versões e recebia só a espessura, com a cor
   default da borda. Sem par de dark-mode, como o resto da família (cor de
   entidade é a mesma nos dois temas). */
.border-programacao, .border-programacoes { border-color: var(--color-programacoes) !important; }

.pagination-programacao .page-item.active .page-link {
    background-color: var(--color-programacoes);
    border-color: var(--color-programacoes);
}

.pagination-programacao .page-link {
    color: var(--color-programacoes);
}

.pagination-programacao .page-link:hover {
    color: #5b6b95;
}

/* Templates */
.btn-templates { background-color: var(--color-templates); border-color: var(--color-templates); color: white; }
.btn-templates:hover { background-color: #6a5b7a; border-color: #6a5b7a; color: white; }
.btn-outline-templates { background-color: transparent !important; border-color: var(--color-templates) !important; color: var(--color-templates) !important; }
.btn-outline-templates:hover { background-color: var(--color-templates) !important; border-color: var(--color-templates) !important; color: white !important; }
.badge-templates { background-color: var(--color-templates); color: white; }
.bg-templates { background-color: rgba(122, 107, 138, 0.1) !important; }
.text-templates { color: var(--color-templates); }
.border-templates { border-color: var(--color-templates) !important; }

/* Pendências em Catálogos — a entidade tinha token (`--color-pendencias`,
   registrado em `apps/configuracoes/colors.py` e injetado por org) e docs
   (`docs/PADRAO_CORES_SISTEMA.md`), mas a utility class da família nunca foi
   escrita: o hub e a tela de análise da unificação pediam `.text-pendencias`
   e caíam na cor herdada. O fallback repete o default do `colors.py` e só
   entra se o context processor não rodar (o token é injetado em toda página
   que estende base.html, inclusive no modo cross-tenant, onde `org=None` cai
   nos defaults). Não há par de dark-mode aqui de propósito: cor de entidade é
   a mesma nos dois temas em toda a família acima. */
.text-pendencias { color: var(--color-pendencias, #c0612f); }

.btn-recomendacoes { background-color: var(--color-recomendacoes); border-color: var(--color-recomendacoes); color: white; }
.btn-recomendacoes:hover { background-color: #b7852d; border-color: #b7852d; color: white; }
.btn-outline-recomendacoes, .btn-outline-recomendacao { background-color: transparent !important; border-color: var(--color-recomendacoes) !important; color: var(--color-recomendacoes) !important; }
.btn-outline-recomendacoes:hover, .btn-outline-recomendacao:hover { background-color: var(--color-recomendacoes) !important; border-color: var(--color-recomendacoes) !important; color: white !important; }
.badge-recomendacoes { background-color: var(--color-recomendacoes); color: white; }
.bg-recomendacoes { background-color: var(--color-recomendacoes) !important; }
.text-recomendacoes { color: var(--color-recomendacoes); }
/* Idem `.border-programacao`: a utility da família faltava e o card de Histórico
   de Versões da ficha de recomendação precisa dela para destacar a revisão
   corrente. Existia só como regra local no `<style>` de
   `recomendacao_selecionar_aplicacoes.html` — aquela cópia pode sair quando
   alguém passar por lá. */
.border-recomendacoes { border-color: var(--color-recomendacoes) !important; }

.btn-plantios { background-color: var(--color-plantios); border-color: var(--color-plantios); color: white; }
.btn-plantios:hover { background-color: #5b7a4a; border-color: #5b7a4a; color: white; }
.btn-outline-plantios { background-color: transparent !important; border-color: var(--color-plantios) !important; color: var(--color-plantios) !important; }
.btn-outline-plantios:hover { background-color: var(--color-plantios) !important; border-color: var(--color-plantios) !important; color: white !important; }
.badge-plantios { background-color: var(--color-plantios); color: white; }
.bg-plantios { background-color: rgba(107, 138, 90, 0.1) !important; }
.text-plantios { color: var(--color-plantios); }

.btn-colheitas { background-color: var(--color-colheitas); border-color: var(--color-colheitas); color: white; }
.btn-colheitas:hover { background-color: #8a6a4a; border-color: #8a6a4a; color: white; }
.btn-outline-colheitas { background-color: transparent !important; border-color: var(--color-colheitas) !important; color: var(--color-colheitas) !important; }
.btn-outline-colheitas:hover { background-color: var(--color-colheitas) !important; border-color: var(--color-colheitas) !important; color: white !important; }
.badge-colheitas { background-color: var(--color-colheitas); color: white; }
.bg-colheitas { background-color: rgba(154, 122, 90, 0.1) !important; }
.text-colheitas { color: var(--color-colheitas); }

.btn-aplicacoes { background-color: var(--color-aplicacoes); border-color: var(--color-aplicacoes); color: white; }
.btn-aplicacoes:hover { background-color: #4a8a7a; border-color: #4a8a7a; color: white; }
.btn-outline-aplicacoes { background-color: transparent !important; border-color: var(--color-aplicacoes) !important; color: var(--color-aplicacoes) !important; }
.btn-outline-aplicacoes:hover { background-color: var(--color-aplicacoes) !important; border-color: var(--color-aplicacoes) !important; color: white !important; }
.badge-aplicacoes { background-color: var(--color-aplicacoes); color: white; }
.bg-aplicacoes { background-color: rgba(90, 154, 138, 0.1) !important; }
.text-aplicacoes { color: var(--color-aplicacoes); }

.btn-timeline { background-color: var(--color-timeline); border-color: var(--color-timeline); color: white; }
.btn-timeline:hover { background-color: #3a5a7a; border-color: #3a5a7a; color: white; }
.btn-outline-timeline { background-color: transparent !important; border-color: var(--color-timeline) !important; color: var(--color-timeline) !important; }
.btn-outline-timeline:hover { background-color: var(--color-timeline) !important; border-color: var(--color-timeline) !important; color: white !important; }
.badge-timeline { background-color: var(--color-timeline); color: white; }
.bg-timeline { background-color: rgba(90, 123, 154, 0.1) !important; }

/* Mapa de Situação */
.text-mapa-situacao { color: var(--color-mapa-situacao) !important; }
.btn-mapa-situacao { background-color: var(--color-mapa-situacao); border-color: var(--color-mapa-situacao); color: white; }
.btn-mapa-situacao:hover { background-color: #3a6a5a; border-color: #3a6a5a; color: white; }
.btn-outline-mapa-situacao { background-color: transparent !important; border-color: var(--color-mapa-situacao) !important; color: var(--color-mapa-situacao) !important; }
.btn-outline-mapa-situacao:hover { background-color: var(--color-mapa-situacao) !important; border-color: var(--color-mapa-situacao) !important; color: white !important; }
.badge-mapa-situacao { background-color: var(--color-mapa-situacao); color: white; }
.bg-mapa-situacao { background-color: var(--color-mapa-situacao) !important; color: white !important; }
.text-timeline { color: var(--color-timeline); }
.text-colheitas { color: var(--color-colheitas); }

.btn-maquinarios:hover { background-color: #2a2a2a; border-color: #2a2a2a; color: white; }
.badge-maquinarios { background-color: var(--color-maquinarios); color: white; }
.text-maquinarios { color: var(--color-maquinarios); }

/* Paginação personalizada por módulo (entidades fixas) — paginação de tipos
   dinâmicos (.pagination-{slug}) é gerada em runtime por gerar_css_tipos_vinculo. */
.pagination-fazendas .page-item.active .page-link { background-color: var(--color-fazendas); border-color: var(--color-fazendas); color: white; }
.pagination-fazendas .page-link { color: var(--color-fazendas); }
.pagination-fazendas .page-link:hover { background-color: rgba(90, 138, 104, 0.1); color: var(--color-fazendas); }

.pagination-safras .page-item.active .page-link { background-color: var(--color-safras); border-color: var(--color-safras); color: white; }
.pagination-safras .page-link { color: var(--color-safras); }
.pagination-safras .page-link:hover { background-color: rgba(139, 115, 85, 0.1); color: var(--color-safras); }

.pagination-maquinarios .page-item.active .page-link { background-color: var(--color-maquinarios); border-color: var(--color-maquinarios); color: white; }
.pagination-maquinarios .page-link { color: var(--color-maquinarios); }
.pagination-maquinarios .page-link:hover { background-color: rgba(58, 58, 58, 0.1); color: var(--color-maquinarios); }

.pagination-usuarios .page-item.active .page-link { background-color: var(--color-usuarios); border-color: var(--color-usuarios); color: white; }
.pagination-usuarios .page-link { color: var(--color-usuarios); }
.pagination-usuarios .page-link:hover { background-color: rgba(107, 91, 149, 0.1); color: var(--color-usuarios); }

.pagination-vinculos .page-item.active .page-link { background-color: var(--color-vinculos); border-color: var(--color-vinculos); color: white; }
.pagination-vinculos .page-link { color: var(--color-vinculos); }
.pagination-vinculos .page-link:hover { background-color: rgba(52, 131, 97, 0.1); color: var(--color-vinculos); }

.pagination-atribuir-fazendas .page-item.active .page-link { background-color: var(--color-atribuir-fazendas); border-color: var(--color-atribuir-fazendas); color: white; }
.pagination-atribuir-fazendas .page-link { color: var(--color-atribuir-fazendas); }
.pagination-atribuir-fazendas .page-link:hover { background-color: rgba(90, 138, 138, 0.1); color: var(--color-atribuir-fazendas); }

.pagination-recomendacoes .page-item.active .page-link { background-color: var(--color-recomendacoes); border-color: var(--color-recomendacoes); color: white; }
.pagination-recomendacoes .page-link { color: var(--color-recomendacoes); }
.pagination-recomendacoes .page-link:hover { background-color: rgba(199, 149, 61, 0.1); color: var(--color-recomendacoes); }

.pagination-aplicacoes .page-item.active .page-link { background-color: var(--color-aplicacoes); border-color: var(--color-aplicacoes); color: white; }
.pagination-aplicacoes .page-link { color: var(--color-aplicacoes); }
.pagination-aplicacoes .page-link:hover { background-color: rgba(90, 154, 138, 0.1); color: var(--color-aplicacoes); }

/* ========================================
   ESTILOS PARA ORDENAÇÃO DE COLUNAS
   ======================================== */

/* Esconder ícones de ordenação não ativos por padrão */
th a .fa-sort {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Mostrar ícones não ativos apenas no hover */
th a:hover .fa-sort {
    opacity: 0.5;
}

/* Ícones ativos (fa-sort-up e fa-sort-down) sempre visíveis */
th a .fa-sort-up,
th a .fa-sort-down {
    opacity: 1 !important;
}

/* Melhorar a transição no hover dos cabeçalhos */
th a {
    transition: all 0.2s ease;
}

/* ─── Dark mode: components ─── */
[data-bs-theme="dark"] .status-executadas {
    background: linear-gradient(135deg, #1a3020, #1e3a24);
    color: #78d078; border-color: #2a5a30;
}
[data-bs-theme="dark"] .status-pendentes {
    background: linear-gradient(135deg, #302a18, #3a3018);
    color: #f0c050; border-color: #5a4a20;
}
[data-bs-theme="dark"] .status-atrasadas {
    background: linear-gradient(135deg, #301a1e, #3a2024);
    color: #f08080; border-color: #5a2a30;
}
[data-bs-theme="dark"] .status-fora-prazo {
    background: linear-gradient(135deg, #252a27, #2a302c);
    color: #a0a8a2; border-color: #344038;
}
/* Cards de importação (templates/configuracoes/api_sync.html) — mesmas
   variantes light em background-color (#e8f0fe, #d1e7dd, #f8d7da) ficam
   ilegíveis no tema dark. Variantes escuras com border-left mantendo
   a identidade visual de cada estado. */
[data-bs-theme="dark"] .import-card.running {
    background-color: #1a2538;
    border-left-color: #4a8ad6;
    color: var(--text-primary);
}
[data-bs-theme="dark"] .import-card.success {
    background-color: #1a3020;
    border-left-color: #2a5a30;
    color: var(--text-primary);
}
[data-bs-theme="dark"] .import-card.error {
    background-color: #301a1e;
    border-left-color: #5a2a30;
    color: var(--text-primary);
}
[data-bs-theme="dark"] .import-card.running .text-muted,
[data-bs-theme="dark"] .import-card.success .text-muted,
[data-bs-theme="dark"] .import-card.error .text-muted {
    color: var(--text-secondary) !important;
}
/* Abas (nav-tabs) — estilo ÚNICO e genérico do sistema: acento verde
   (--accent-green, o mesmo dos links), uniforme em todas as telas e nos dois
   temas. Centralizado aqui — antes cada template repetia este bloco com a cor da
   própria seção (~10 cópias) e o dark vazava o azul-acinzentado da página
   Integrações. Inativo usa --text-secondary (troca por tema sozinho). */
.nav-tabs {
    border-bottom: 2px solid var(--accent-green);
}
.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.nav-tabs .nav-link:hover {
    color: var(--accent-green);
    border-bottom-color: color-mix(in srgb, var(--accent-green) 30%, transparent);
    background-color: color-mix(in srgb, var(--accent-green) 6%, transparent);
}
.nav-tabs .nav-link.active {
    color: var(--accent-green);
    border-bottom-color: var(--accent-green);
    background-color: color-mix(in srgb, var(--accent-green) 8%, transparent);
    font-weight: 600;
}
.nav-tabs .nav-link i { font-size: 1rem; }
/* Botão sync da página Integrações em dark. Azul-aço saturado (#3f74c0) que
   LÊ como ativo no fundo escuro — o antigo #5f7596 era dessaturado demais e
   parecia desabilitado (contraste ~4.7:1 com texto branco, passa AA). */
[data-bs-theme="dark"] .btn-sync {
    background-color: #3f74c0;
    border-color: #3f74c0;
}
[data-bs-theme="dark"] .btn-sync:hover {
    background-color: #4f83cc;
    border-color: #4f83cc;
}
[data-bs-theme="dark"] .text-sync { color: #8aa0c0 !important; }
[data-bs-theme="dark"] .timeline-marker-modern {
    border-color: var(--card-primary);
    box-shadow: 0 3px 10px var(--shadow-heavy);
}
[data-bs-theme="dark"] .page-link {
    background-color: var(--card-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-light);
    border-color: var(--border-color);
    color: var(--text-muted);
}
[data-bs-theme="dark"] th a { color: var(--text-primary); }
[data-bs-theme="dark"] th a:hover { color: var(--accent-green); }

/* Dark mode: cards e formulários inherit */
[data-bs-theme="dark"] .card-modern { box-shadow: 0 4px 15px var(--shadow-color); }
[data-bs-theme="dark"] .card-modern:hover { box-shadow: 0 8px 25px var(--shadow-medium); }

/* Input-group: wrappers customizados (dropdown, divs com .flex-grow-1) precisam
   de min-width:0 para encolher abaixo do tamanho intrinseco. O Bootstrap aplica
   isso automaticamente em .form-control / .form-select / .form-floating, mas
   nao em divs custom — sem o min-width:0 o botao acoplado quebra de linha no
   mobile quando o conteudo excede a largura disponivel. */
.input-group > .dropdown,
.input-group > .flex-grow-1 {
    min-width: 0;
}

/* Toggle de visualizacao (cards/lista): cor do estado ativo derivada da
   entidade da tela via data-vox-visualizacao-tela. Mantem coerencia com as
   cores de entidade ja usadas em botoes (.btn-fazendas, .btn-produtores etc). */
.vox-toggle-visualizacao[data-vox-visualizacao-tela="fazendas"] { --tela-color: var(--color-fazendas); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="plantios"] { --tela-color: var(--color-plantios); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="safras"] { --tela-color: var(--color-safras); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="colheitas"] { --tela-color: var(--color-colheitas); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="maquinarios"] { --tela-color: var(--color-maquinarios); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="recomendacoes"] { --tela-color: var(--color-recomendacoes); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="programacoes"] { --tela-color: var(--color-programacoes); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="templates_programacao"] { --tela-color: var(--color-templates); }
.vox-toggle-visualizacao[data-vox-visualizacao-tela="organizacoes"] { --tela-color: var(--color-organizacoes); }

.vox-toggle-visualizacao .btn.active {
    background-color: var(--tela-color, #6c757d) !important;
    border-color: var(--tela-color, #6c757d) !important;
    color: #fff !important;
}

/* Botoes de acao no cabecalho de pagina (ao lado do titulo): em mobile estreito
   (xs, <576px) esconde o texto dos botoes que tem icone+texto, deixando so o
   icone. Evita que botoes longos quebrem linha quando o titulo da pagina ja
   ocupa espaco horizontal.

   Padrao: o texto do botao deve vir embrulhado em <span class="btn-text"> apos
   o <i>. Botoes que ja sao icon-only (sem texto/sem span) nao sao afetados —
   mantem altura/padding/display nativos do Bootstrap, identicos no desktop e
   mobile (uniformidade entre telas que tem ou nao tem botao de "Novo X"). */
@media (max-width: 575.98px) {
    .page-header-actions .btn-text {
        display: none;
    }
    /* Remove a margem direita do icone que separava do texto (agora oculto). */
    .page-header-actions .btn > i {
        margin-right: 0 !important;
    }
}

/* Form footer (Cancelar + Salvar X) e barra sticky (programacao/recomendacao/
   relatorio): icon-only somente quando o container do botao fica estreito o
   bastante pra que o texto + icone causariam quebra de linha. Usa container
   query (Chrome 105+, Safari 16+, FF 110+) — reage a largura REAL do
   container, nao do viewport. Em telas largas/desktop os textos permanecem. */
.form-footer-actions {
    container-type: inline-size;
}

@container (max-width: 380px) {
    .form-footer-actions .btn-text {
        display: none;
    }
    .form-footer-actions .btn > i {
        margin-right: 0 !important;
    }
}

.barra-acoes-sticky {
    container-type: inline-size;
}

/* .btn-cancelar-barra e .btn-acao-barra tem icone fora do span de texto —
   facil esconder so o texto.
   .btn-progresso (em relatorio_criar) recebeu refactor: o texto foi wrappado
   em <span class="btn-text"> dentro de .btn-progresso-conteudo, deixando o
   icone fora do span de texto mas ainda dentro do conteudo. Templates que NAO
   foram refatorados (programacao_form, recomendacao_criar_direta) nao tem
   .btn-text dentro de .btn-progresso, entao a regra abaixo nao os afeta. */
@container (max-width: 480px) {
    .barra-acoes-sticky .cancelar-texto,
    .barra-acoes-sticky .acao-rotulo,
    .barra-acoes-sticky .btn-progresso .btn-text {
        display: none;
    }
    .barra-acoes-sticky .btn-cancelar-barra > i,
    .barra-acoes-sticky .btn-acao-barra > i {
        margin: 0 !important;
    }
}

/* Toolbars de acoes equivalentes (ex: "Adicionar Talhao" + "Importar Talhoes"):
   no mobile estreito (xs, <576px) os botoes empilham verticalmente e cada um
   ocupa 100% da linha. Padrao do botao Buscar nas listas — touch target maior,
   visual deliberado, sem botao orfao por wrap natural do flex. */
@media (max-width: 575.98px) {
    .actions-stack-mobile {
        flex-direction: column;
        align-items: stretch;
    }
    .actions-stack-mobile > .btn,
    .actions-stack-mobile > a.btn {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* form-select: cor mutada para o placeholder (option value="" selecionada),
   replicando o visual de um placeholder de input. Sem isso o texto "Selecione X"
   sai com a cor padrao, destoando dos demais placeholders (text-muted). */
.form-select:has(option[value=""]:checked) {
    color: var(--bs-secondary-color, #6c757d);
}

/* Dark mode: Bootstrap buttons — garantir contraste */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--text-muted);
    --bs-btn-hover-bg: var(--panel-hover);
    --bs-btn-hover-border-color: var(--text-secondary);
    --bs-btn-hover-color: var(--text-primary);
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--accent-green);
    --bs-btn-border-color: var(--accent-green);
    --bs-btn-hover-bg: var(--accent-green);
    --bs-btn-hover-border-color: var(--accent-green);
    --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #f08080;
    --bs-btn-border-color: #f08080;
    --bs-btn-hover-bg: rgba(240, 128, 128, 0.15);
    --bs-btn-hover-border-color: #f08080;
    --bs-btn-hover-color: #f08080;
}
[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-bg: var(--card-secondary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-color: var(--text-primary);
    --bs-btn-hover-bg: var(--panel-hover);
    --bs-btn-hover-border-color: var(--text-muted);
    --bs-btn-hover-color: var(--text-primary);
}
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--card-secondary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-color: var(--text-primary);
    --bs-btn-hover-bg: var(--panel-hover);
    --bs-btn-hover-border-color: var(--text-muted);
    --bs-btn-hover-color: var(--text-primary);
}

/* Dark mode: botões outline de módulo — forçar visibilidade do texto/ícone */
[data-bs-theme="dark"] [class*="btn-outline-"]:not(.btn-outline-secondary):not(.btn-outline-primary):not(.btn-outline-danger):not(.btn-outline-success):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark) {
    --bs-btn-color: currentColor;
    --bs-btn-hover-color: #fff;
}

/* Dark mode: form-select (dropdown arrows, contraste) */
[data-bs-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca8a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Dark mode: table headers */
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
    background-color: var(--card-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Cor única de loading pra spinners utilitários (spinner-border etc.) —
   mesma linguagem da barra fina/skeleton (docs/PARIDADE_LOADING.md). */
.text-loading { color: var(--vox-loading, #f39c12) !important; }

/* ── Kebab (⋮) dentro de .btn-group ──────────────────────────────────────
   O <ul> do dropdown é o último filho do grupo, então o Bootstrap trata o
   botão como "miolo" e zera o raio do lado direito. Devolve o acabamento
   arredondado: integral quando o kebab está solto (grupo próprio, fora de
   grupo fundido) e só no lado direito quando ele fecha um grupo fundido. */
.btn-group:not(.btn-group *) > .btn[data-bs-toggle="dropdown"]:first-child:not(.dropdown-toggle) {
    border-radius: var(--bs-btn-border-radius);
}
.btn-group > .btn-group:last-child > .btn[data-bs-toggle="dropdown"]:not(.dropdown-toggle) {
    border-top-right-radius: var(--bs-btn-border-radius);
    border-bottom-right-radius: var(--bs-btn-border-radius);
}

/* ── Grupo de ações que RECOLHE abaixo de 1400px (.vox-acoes-recolhe) ─────
   Usado pela coluna "Ações" da lista de recomendações (11 colunas, a única
   tela que empurrava a página na horizontal em notebook). Abaixo do breakpoint
   xxl os botões inline saem via `d-none d-xxl-inline-block` e viram itens do
   kebab — quem faz o recolhimento é o template, não este arquivo.
   O que sobra para o CSS: o Bootstrap zera o raio pela POSIÇÃO no DOM, não
   pela visibilidade, então o kebab que fica sozinho herdaria o canto esquerdo
   quadrado de "miolo de grupo". Aqui ele volta a ser botão solto, arredondado
   dos dois lados — a linguagem de kebab do sistema. Sem cor nova: nada a
   parear no dark-mode. */
@media (max-width: 1399.98px) {
    .vox-acoes-recolhe > .btn-group > .btn[data-bs-toggle="dropdown"]:not(.dropdown-toggle) {
        border-radius: var(--bs-btn-border-radius);
    }
}

/* Dark mode: row clicável */
[data-bs-theme="dark"] tr[data-href] { cursor: pointer; }
[data-bs-theme="dark"] tr[data-href]:hover td { background-color: var(--table-row-hover); }

/* ============================================================
   Dark mode: hover-bg-light (modais de seleção)
   ============================================================ */
.hover-bg-light {
    transition: background-color 0.2s ease;
}
.hover-bg-light:hover {
    background-color: #f8f9fa !important;
}
[data-bs-theme="dark"] .hover-bg-light:hover {
    background-color: var(--panel-hover) !important;
}
[data-bs-theme="dark"] .hover-bg-light.text-dark {
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .hover-bg-light .text-muted {
    color: var(--text-secondary) !important;
}

/* Itens do menu de criação (Recomendação × Aplicação) — âncoras sem text-dark:
   sem esta cor os títulos renderizam no azul de link do Bootstrap. */
.vox-escolha-item {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .vox-escolha-item {
    color: var(--text-primary);
}

/* Dark mode: avatar modal items */
[data-bs-theme="dark"] .vox-modal-user-item:hover {
    background: var(--panel-hover) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode: modal de busca de similares (padrão form-check usado em vários templates) */
[data-bs-theme="dark"] #lista_similares,
[data-bs-theme="dark"] #plantio_lista_similares,
[data-bs-theme="dark"] #edit_lista_similares {
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] #lista_similares .form-check,
[data-bs-theme="dark"] #plantio_lista_similares .form-check,
[data-bs-theme="dark"] #edit_lista_similares .form-check {
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] #lista_similares .form-check.bg-light,
[data-bs-theme="dark"] #plantio_lista_similares .form-check.bg-light,
[data-bs-theme="dark"] #edit_lista_similares .form-check.bg-light {
    background-color: var(--card-secondary) !important;
}
[data-bs-theme="dark"] #lista_similares .form-check-label strong,
[data-bs-theme="dark"] #plantio_lista_similares .form-check-label strong,
[data-bs-theme="dark"] #edit_lista_similares .form-check-label strong {
    color: var(--text-primary);
}
[data-bs-theme="dark"] #lista_similares .list-group-item,
[data-bs-theme="dark"] #plantio_lista_similares .list-group-item,
[data-bs-theme="dark"] #edit_lista_similares .list-group-item {
    background-color: var(--card-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-bs-theme="dark"] #lista_similares .list-group-item:hover,
[data-bs-theme="dark"] #plantio_lista_similares .list-group-item:hover,
[data-bs-theme="dark"] #edit_lista_similares .list-group-item:hover {
    background-color: var(--panel-hover);
}

/* =========================================================================
   BARRA DE AÇÕES STICKY — Rodapé de criação de recomendações
   Inspiração: mobile BarraAcoesCriar (barra inferior sempre visível)
   ========================================================================= */

.barra-acoes-sticky {
    position: fixed;
    bottom: 0;
    left: 70px;
    right: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 20px;
    background: var(--navbar-bg-start);
    box-shadow: 0 -4px 12px var(--shadow-medium);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded .barra-acoes-sticky {
    left: 250px;
}

body.no-sidebar .barra-acoes-sticky {
    left: 0;
}

.barra-acoes-sticky .spacer {
    flex: 1 1 auto;
}

/* Respiro para a barra fixa não cobrir o fim do conteúdo nos formulários de
   cadastro (que usam o partial _barra_acoes_form, marcado com .barra-acoes-form).
   Aplica padding no #vox-content (fora do card) em vez de um spacer dentro do
   card — evita espaço vertical visível sobrando no card. Escopo pela classe
   para não somar com o spacer próprio de recomendação/programação. */
body:has(.barra-acoes-form) #vox-content {
    padding-bottom: 96px;
}

/* ── Botão Cancelar/Voltar (sólido, à esquerda) ── */

.btn-cancelar-barra {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #6c757d;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none !important;
    white-space: nowrap;
}

.btn-cancelar-barra:hover {
    background: #5a6268;
}

/* ── Botão Rascunho (secundário, mesma tipografia da barra) ── */

.btn-rascunho-barra {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: #f0ad4e;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-rascunho-barra:hover {
    background: #ec971f;
}

/* ── Botões de Ação Secundários (Foto, Mapa, Vincular) ── */

.btn-acao-barra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--chrome-text);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
    position: relative;
    min-width: 52px;
}

.btn-acao-barra:hover {
    background: color-mix(in srgb, var(--color-recomendacoes) 25%, transparent);
    color: var(--chrome-text-hover);
    text-decoration: none;
}

.btn-acao-barra.active {
    background: color-mix(in srgb, var(--color-recomendacoes) 40%, transparent);
    color: var(--chrome-text-hover);
}

.btn-acao-barra .acao-icone {
    font-size: 20px;
    line-height: 1;
}

.btn-acao-barra .acao-rotulo {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-acao-barra[disabled],
.btn-acao-barra.disabled {
    color: var(--chrome-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-acao-barra .badge {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 10px;
    min-width: 18px;
    padding: 2px 5px;
    background-color: var(--color-recomendacoes, #c7953d) !important;
    color: white !important;
}

/* ── Botão Principal com Progresso (Recomendar) ── */

.btn-progresso {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: var(--border-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    white-space: nowrap;
    --btn-progress-color: var(--color-recomendacoes);
}

.btn-progresso::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--progress-pct, 0%);
    background: color-mix(in srgb, var(--btn-progress-color) 70%, transparent);
    border-radius: 8px;
    transition: width 0.4s ease-in-out;
    z-index: 0;
}

.btn-progresso .btn-progresso-conteudo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-progresso.completo {
    background: var(--btn-progress-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--btn-progress-color) 50%, transparent);
}

.btn-progresso.completo::before {
    width: 100%;
    background: var(--btn-progress-color);
}

.btn-progresso.processando {
    pointer-events: none;
    opacity: 0.85;
}

.btn-progresso[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Variantes de cor por entidade */
.btn-progresso.btn-programacoes { --btn-progress-color: var(--color-programacoes); }
.btn-progresso.btn-templates    { --btn-progress-color: var(--color-templates); }
.btn-progresso.btn-relatorios   { --btn-progress-color: var(--color-relatorios); }

/* Largura dos botões de progresso: Programação/Recomendar = 1/3, Template = 1/9, Relatório = 1/4 */
.barra-acoes-sticky .btn-progresso {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
}
.barra-acoes-sticky .btn-progresso.btn-templates {
    flex: 0 0 calc(100% / 9);
    max-width: calc(100% / 9);
}
.barra-acoes-sticky .btn-progresso.btn-relatorios {
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
}

/* =========================================================================
   SEÇÕES ACCORDION — Formulário de criação colapsável
   ========================================================================= */

.secao-accordion {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--card-secondary);
    transition: border-color 0.3s;
}

.secao-accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    background: var(--card-primary);
    border-radius: 12px;
}

.secao-accordion.aberta .secao-accordion-header {
    border-radius: 12px 12px 0 0;
}

.secao-accordion-header:hover {
    background: var(--panel-hover);
}

.secao-accordion-header .secao-titulo {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.secao-accordion-header .secao-status {
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.secao-accordion-header .toggle-icon {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.secao-accordion-header[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.secao-accordion-body {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.secao-accordion.aberta .secao-accordion-body {
    padding: 16px 18px;
    opacity: 1;
    overflow: visible;
    /* max-height definido via JS com scrollHeight real */
}

/* ─── VoxWizard: Step Indicators ─── */
.step-indicator,
.stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.step-item,
.stepper-step {
    display: flex;
    align-items: center;
}

.step-circle,
.stepper-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    color: #6c757d;
    background: white;
    transition: all 0.3s ease;
}

.step-item.active .step-circle,
.stepper-step.active .stepper-circle {
    border-color: var(--bs-success);
    color: #fff;
    background: var(--bs-success);
}

.step-item.completed .step-circle,
.stepper-step.completed .stepper-circle {
    border-color: #1e7e34;
    color: #fff;
    background: #1e7e34;
}

.step-label,
.stepper-label {
    margin-left: 0.5rem;
    font-weight: 500;
    color: #6c757d;
    font-size: 0.9rem;
}

.step-item.active .step-label,
.stepper-step.active .stepper-label {
    color: var(--bs-success);
    font-weight: 600;
}

.step-item.completed .step-label,
.stepper-step.completed .stepper-label {
    color: #1e7e34;
}

.step-connector,
.stepper-line {
    width: 60px;
    height: 2px;
    background: #dee2e6;
    margin: 0 12px;
    align-self: center;
    transition: background 0.3s ease;
}

/* Painéis do wizard */
.step-panel,
.etapa-panel {
    display: none;
}

.step-panel.active,
.etapa-panel.active {
    display: block;
}

/* Dark mode: step indicators */
[data-bs-theme="dark"] .step-circle,
[data-bs-theme="dark"] .stepper-circle {
    background: var(--card-secondary, #2d3238);
    color: var(--text-muted, #6c757d);
    border-color: var(--border-color, #495057);
}

[data-bs-theme="dark"] .step-item.active .step-circle,
[data-bs-theme="dark"] .stepper-step.active .stepper-circle {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

[data-bs-theme="dark"] .step-item.completed .step-circle,
[data-bs-theme="dark"] .stepper-step.completed .stepper-circle {
    background: #1e7e34;
    border-color: #1e7e34;
    color: #fff;
}

[data-bs-theme="dark"] .step-label,
[data-bs-theme="dark"] .stepper-label {
    color: var(--text-muted, #6c757d);
}

[data-bs-theme="dark"] .step-connector,
[data-bs-theme="dark"] .stepper-line {
    background: var(--border-color, #495057);
}

/* Resumo visível quando colapsado */
.secao-resumo {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.secao-accordion.aberta .secao-resumo {
    display: none;
}

/* Estados visuais da seção */
.secao-accordion.secao-vazia .secao-status {
    background: var(--border-light);
    color: var(--text-muted);
}

.secao-accordion.secao-parcial .secao-status {
    background: rgba(243, 156, 18, 0.15);
    color: #e67e22;
}

.secao-accordion.secao-parcial {
    border-color: rgba(243, 156, 18, 0.3);
}

.secao-accordion.secao-completa .secao-status {
    background: rgba(40, 167, 69, 0.12);
    color: var(--accent-green);
}

.secao-accordion.secao-completa {
    border-color: rgba(40, 167, 69, 0.25);
}

.secao-accordion.secao-erro .secao-status {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.secao-accordion.secao-erro {
    border-color: rgba(220, 53, 69, 0.3);
}

/* =========================================================================
   VALIDAÇÃO INLINE — Erros e highlights em campos
   ========================================================================= */

.campo-erro-inline {
    border-color: var(--bs-danger, #dc3545) !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.2) !important;
}

.mensagem-erro {
    display: block;
    font-size: 12px;
    color: var(--bs-danger, #dc3545);
    margin-top: 4px;
    padding-left: 2px;
}

/* Pulse de highlight — usado no scroll-to-error (auto-remove em 2s) */
@keyframes highlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.5); }
    50%  { box-shadow: 0 0 0 6px rgba(243, 156, 18, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

.campo-highlight-pulse {
    animation: highlightPulse 0.8s ease-in-out 2;
    border-color: #f39c12 !important;
}

/* =========================================================================
   INSUMO CARDS — Borda colorida por categoria + resumo colapsado
   ========================================================================= */

.insumo-card-categoria {
    border-left: 4px solid var(--grupo-cor, #6c757d) !important;
    transition: border-color 0.3s;
}

.insumo-resumo-colapsado {
    display: none;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mostrar resumo quando card está colapsado (body hidden) */
.insumo-card-categoria.collapsed .insumo-resumo-colapsado {
    display: inline-block;
}

/* =========================================================================
   WIZARD STEP INDICATOR — Etapas numeradas (reutilizável)
   ========================================================================= */

.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.wizard-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    transition: background 0.3s, color 0.3s;
}

.wizard-step.ativa .step-number,
.wizard-step.completa .step-number {
    background: var(--accent-green);
    color: #fff;
}

.wizard-step.ativa .step-label,
.wizard-step.completa .step-label {
    color: var(--text-primary);
}

.wizard-step-separator {
    width: 40px;
    height: 2px;
    background: var(--border-color);
    margin: 0 8px;
    transition: background 0.3s;
}

.wizard-step-separator.completa {
    background: var(--accent-green);
}

/* =========================================================================
   MODAL DE IMAGENS POR TALHÃO — Upload wizard
   ========================================================================= */

.talhao-sidebar {
    border-right: 1px solid var(--border-color);
    max-height: 500px;
    overflow-y: auto;
}

.talhao-sidebar-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.talhao-sidebar-item:hover {
    background-color: var(--panel-hover);
}

.talhao-sidebar-item.active {
    background-color: rgba(199, 149, 61, 0.1);
    border-left: 3px solid var(--color-recomendacoes, #c7953d);
}

.talhao-sidebar-item .talhao-count {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: var(--border-light);
    color: var(--text-primary);
    margin-left: auto;
    white-space: nowrap;
}

.talhao-sidebar-item.active .talhao-count {
    background-color: var(--color-recomendacoes, #c7953d);
    color: #fff;
}

.talhao-sidebar-item .talhao-check {
    color: var(--accent-green);
    display: none;
}

.talhao-sidebar-item.has-images .talhao-check {
    display: inline;
}

.wizard-upload-area {
    min-height: 350px;
}

.wizard-upload-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.wizard-upload-dropzone.drag-over {
    border-color: var(--color-recomendacoes, #c7953d);
    background-color: rgba(199, 149, 61, 0.05);
}

.wizard-upload-dropzone:hover {
    border-color: var(--color-recomendacoes, #c7953d);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Kebab dropdown (⋮) — arredondamento do último botão
 *
 * Bootstrap remove border-radius-right de .btn:not(:last-child). Quando o
 * botão de dropdown é seguido por <ul class="dropdown-menu"> dentro de um
 * btn-group, o <ul> é :last-child no DOM, não o <button>. Resultado: o
 * botão perde o arredondamento à direita. O fix usa --bs-btn-border-radius
 * (já definido pelo BS por tamanho sm/md/lg) para restaurar o raio correto.
 * ──────────────────────────────────────────────────────────────────────── */
.btn-group > .btn-group:last-child > .btn[data-bs-toggle="dropdown"] {
    border-top-right-radius: var(--bs-btn-border-radius) !important;
    border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Dropdown com animação suave (menu kebab de ações)
 * Uso: <ul class="dropdown-menu vox-dropdown-anim">
 *
 * Anima APENAS opacity para não conflitar com o transform inline que o
 * Popper.js define para posicionar o menu abaixo do botão. Animar transform
 * aqui causaria o menu aparecer na origem default e "pular" para a posição.
 * ──────────────────────────────────────────────────────────────────────── */
@keyframes voxDropdownFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vox-dropdown-anim.show {
    animation: voxDropdownFade 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .vox-dropdown-anim.show {
        animation: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Mapa de Situação — View Transitions (UX-0.13 Fase 3)
 *
 * Crossfade entre breadcrumb/titulo/sidebar ao navegar entre N1<->N2 e entre
 * fazendas. Depende do navegador suportar startViewTransition (Chrome 111+,
 * Safari 18+, Firefox 127+). Browsers antigos simplesmente trocam o DOM sem
 * animacao — fallback gracioso ja embutido no controller.
 *
 * prefers-reduced-motion: zeramos a duracao (swap instantaneo) — mas o ganho
 * principal (nao recarregar a pagina) continua valendo.
 * ──────────────────────────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0s !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Loading indicator durante SPA nav (UX-0.13 — Commit C).
 * Ativado pelo controller via body.vox-mapa-nav-loading apos 200ms de fetch
 * (evita flicker em requests rapidos).
 * ──────────────────────────────────────────────────────────────────────── */
body.vox-mapa-nav-loading { cursor: progress; }

body.vox-mapa-nav-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 30%;
    background: linear-gradient(90deg,
        transparent 0%, var(--vox-loading, #f39c12) 50%, transparent 100%);
    z-index: 9999;
    animation: voxMapaNavProgress 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes voxMapaNavProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
    body.vox-mapa-nav-loading::before {
        animation: none;
        width: 100%;
        opacity: 0.4;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Loading indicator durante SPA nav global (UX-2 — hx-boost na sidebar/navbar).
 * Mesma mecânica do mapa de situação, ativado pelo listener htmx:beforeRequest
 * em base.html após 250ms (evita flicker em swaps rápidos). Cor de loading
 * unificada (laranja --vox-loading) — paridade web↔mobile, ver
 * docs/PARIDADE_LOADING.md.
 * ──────────────────────────────────────────────────────────────────────── */
body.vox-spa-nav-loading { cursor: progress; }

body.vox-spa-nav-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 30%;
    background: linear-gradient(90deg,
        transparent 0%, var(--vox-loading, #f39c12) 50%, transparent 100%);
    z-index: 9999;
    animation: voxSpaNavProgress 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes voxSpaNavProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
    body.vox-spa-nav-loading::before {
        animation: none;
        width: 100%;
        opacity: 0.4;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Barra de loading reutilizável (indeterminada, laranja) — espelha o
 * `VoxBarraSyncHeader` do mobile (2.5–3px, --vox-loading). Coloque dentro de
 * um container; ela ocupa a largura total. Use para "trabalhando" de duração
 * desconhecida (ex.: preparar imagem pro recorte, topo do skeleton de
 * catálogo). Ver docs/PARIDADE_LOADING.md.
 * ──────────────────────────────────────────────────────────────────────── */
.vox-loading-bar {
    position: relative;
    height: 3px;
    width: 100%;
    overflow: hidden;
    background: color-mix(in srgb, var(--vox-loading, #f39c12) 14%, transparent);
    border-radius: 2px;
}
.vox-loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -35%;
    height: 100%;
    width: 35%;
    background: var(--vox-loading, #f39c12);
    animation: voxLoadingBar 1.1s ease-in-out infinite;
}
.vox-loading-bar.hidden { display: none; }
@keyframes voxLoadingBar {
    0% { left: -35%; }
    100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .vox-loading-bar::after { animation: none; left: 0; width: 100%; opacity: 0.4; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Skeleton-cover de catálogo (insumos, alvos, tipos de solo). Substitui o
 * antigo overlay escuro bloqueante por um skeleton claro on-brand: barra
 * laranja no topo + linhas shimmer. Cobre a 1ª carga / init do JS pesado da
 * árvore e some no `vox:load` (JS adiciona `.fade-out`). Markup único em
 * templates/shared/partials/_skeleton_catalogo.html.
 * ──────────────────────────────────────────────────────────────────────── */
.vox-catalogo-loading {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: var(--body-bg, #dde8dd);
    display: flex;
    justify-content: center;
    padding: 4.5rem 1rem 1rem;
    overflow: hidden;
    transition: opacity 0.3s ease;
}
.vox-catalogo-loading.fade-out {
    opacity: 0;
    pointer-events: none;
}
[data-bs-theme="dark"] .vox-catalogo-loading {
    background: var(--body-bg, #181a18);
}
.vox-catalogo-loading .vox-skeleton-inner {
    width: 100%;
    max-width: 1100px;
}
.vox-skeleton-row {
    height: 3rem;
    margin-bottom: 0.6rem;
    border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Fallback sutil sem View Transitions API (Firefox <127, Safari <18).
 * Crossfade por CSS nos elementos swap-OOB que o controller substitui.
 * Aplicado so quando :not(:has(...)) indica browser sem suporte nativo VT.
 * Atual: fade-in em replace de #vox-mapa-titulo e #vox-mapa-sidebar-wrapper.
 * ──────────────────────────────────────────────────────────────────────── */
@supports not (animation-timeline: view()) {
    #vox-mapa-titulo,
    #vox-mapa-sidebar-wrapper {
        animation: voxMapaFadeIn 0.25s ease-out;
    }
}

@keyframes voxMapaFadeIn {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    @supports not (animation-timeline: view()) {
        #vox-mapa-titulo,
        #vox-mapa-sidebar-wrapper {
            animation: none;
        }
    }
}

/* ==========================================================================
 * Filtros Locais das Listas de Manejo
 * Usado em recomendacao_lista, plantio_lista, colheita_lista, programacao_lista.
 * Layout: busca (linha 1) + chips de talhao selecionados (entre linhas) +
 * picker/status chips (linha 2). Chips no estilo do mobile: nome+fazenda, X.
 * Visual: inspirado em filtros-globais; usa variaveis de tema para dark mode.
 * ========================================================================== */

.vox-manejo-filtros {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.vox-manejo-filtros__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.vox-manejo-filtros__busca {
    flex: 1 1 280px;
    min-width: 220px;
}

.vox-manejo-filtros__acoes {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* ---------- Status chips (multi-select, submit automatico ao clicar) ---------- */

.vox-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    flex: 1 1 auto;
}

.vox-status-chips__label {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    font-weight: 500;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.vox-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.78125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--chip-color, #adb5bd);
    color: var(--chip-color, #495057);
    background: transparent;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
    line-height: 1.25;
    white-space: nowrap;
    position: relative;
}

.vox-status-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.vox-status-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #adb5bd) 12%, transparent);
}

.vox-status-chip.is-active {
    background: var(--chip-color, #adb5bd);
    color: var(--chip-text, #ffffff);
    border-color: var(--chip-color, #adb5bd);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.vox-status-chip:focus-within {
    outline: 2px solid var(--chip-color, #0d6efd);
    outline-offset: 2px;
}

.vox-status-chip .vox-status-chip__icon {
    font-size: 0.75rem;
}

/* Dark mode: suaviza borda e clareia texto inativo pra nao parecer "apagado" */
[data-bs-theme="dark"] .vox-status-chip {
    border-color: color-mix(in srgb, var(--chip-color, #adb5bd) 70%, transparent);
    color: color-mix(in srgb, var(--chip-color, #adb5bd) 85%, #ffffff 15%);
}

[data-bs-theme="dark"] .vox-status-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #adb5bd) 22%, transparent);
}

[data-bs-theme="dark"] .vox-status-chip.is-active {
    border-color: var(--chip-color, #adb5bd);
    color: var(--chip-text, #ffffff);
}

/* ---------- Multi-talhao picker (largura menor, estilo filtros-globais) ---------- */

.vox-talhao-picker {
    position: relative;
    flex: 0 1 320px;
    min-width: 240px;
    max-width: 320px;
}

.vox-talhao-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--input-bg, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    color: var(--text-primary, #495057);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    line-height: 1.4;
    font-family: inherit;
    width: 100%;
    justify-content: space-between;
}

.vox-talhao-picker__trigger:hover {
    background-color: color-mix(in srgb, var(--input-bg, #f8f9fa) 70%, var(--border-color, #ced4da) 30%);
    border-color: var(--border-color, #ced4da);
}

.vox-talhao-picker__trigger:focus-visible,
.vox-talhao-picker[aria-expanded="true"] .vox-talhao-picker__trigger {
    outline: 2px solid var(--accent-green, #0d6efd);
    outline-offset: 1px;
}

.vox-talhao-picker__trigger.is-active {
    background-color: color-mix(in srgb, var(--accent-green, #0d6efd) 12%, var(--input-bg, transparent));
    border-color: color-mix(in srgb, var(--accent-green, #0d6efd) 45%, var(--border-color, #9ec5fe));
    color: var(--accent-green, #0d6efd);
}

.vox-talhao-picker__icon {
    opacity: 0.75;
}

.vox-talhao-picker__label {
    flex-grow: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vox-talhao-picker__caret {
    font-size: 0.5625rem;
    opacity: 0.7;
    transition: transform 0.15s;
}

.vox-talhao-picker[aria-expanded="true"] .vox-talhao-picker__caret {
    transform: rotate(180deg);
}

/* Popover — largura fixa (independe da largura do trigger) */
.vox-talhao-picker__popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 320px;
    max-width: calc(100vw - 2rem);
    z-index: 1030;
    background: var(--card-primary, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.10);
    max-height: 360px;
    flex-direction: column;
    overflow: hidden;
    display: none;
}

.vox-talhao-picker[aria-expanded="true"] .vox-talhao-picker__popover {
    display: flex;
}

.vox-talhao-picker__search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e9ecef);
    flex-shrink: 0;
}

.vox-talhao-picker__search input {
    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-size: 0.8125rem;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #212529);
}

.vox-talhao-picker__search input:focus {
    outline: none;
    border-color: var(--input-focus-border, #86b7fe);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--input-focus-border, #86b7fe) 25%, transparent);
}

.vox-talhao-picker__opcoes {
    overflow-y: auto;
    padding: 0.25rem 0;
    flex-grow: 1;
}

.vox-talhao-picker__grupo-label {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6c757d);
    font-weight: 600;
}

.vox-talhao-picker__opcao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.1s;
    color: var(--text-primary, #212529);
}

.vox-talhao-picker__opcao:hover {
    background-color: var(--panel-hover, #f1f3f5);
}

.vox-talhao-picker__opcao input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--accent-green, #0d6efd);
    cursor: pointer;
}

.vox-talhao-picker__opcao-nome {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vox-talhao-picker__opcao-area {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    flex-shrink: 0;
}

.vox-talhao-picker__vazio {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted, #6c757d);
}

/* ---------- Chips dos talhoes selecionados (estilo mobile) ---------- */

.vox-talhao-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.vox-talhao-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 0.5rem;
    background: var(--panel-hover, #f1f3f5);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 10px;
    line-height: 1.15;
}

.vox-talhao-chip__texto {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vox-talhao-chip__nome {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-primary, #212529);
    line-height: 1.2;
}

.vox-talhao-chip__fazenda {
    font-size: 0.5625rem;
    color: var(--text-muted, #6c757d);
    opacity: 0.9;
    line-height: 1.15;
}

.vox-talhao-chip__remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0;
    background: transparent;
    color: var(--text-muted, #6c757d);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    font-size: 0.625rem;
    transition: background-color 0.15s, color 0.15s;
}

.vox-talhao-chip__remover:hover {
    background: #dc3545;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .vox-status-chip,
    .vox-talhao-picker__trigger,
    .vox-talhao-picker__caret,
    .vox-talhao-chip__remover {
        transition: none;
    }
}


/* ── Campo de área auto-calculado (talhão com geometria)
   Mesma cor do readonly padrão do Bootstrap, mas via classe para
   que o dark mode consiga sobrescrever (evita inline style). */
.area-auto-readonly {
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .area-auto-readonly {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.15);
}


/* ============================================================
 * Dark-mode pairing global para utilities Bootstrap hardcoded.
 *
 * Bootstrap 5.3 introduziu tokens theme-aware (bg-body, bg-body-tertiary)
 * mas centenas de templates legacy ainda usam ``bg-white``, ``bg-light``,
 * ``border-bottom`` com cor implícita. Ao invés de refatorar 50+ arquivos,
 * cobrimos os padrões mais comuns aqui via overrides do tema escuro.
 *
 * NÃO usar !important fora destes overrides — quebra encadeamento de
 * specificity de outros componentes (.card-header, .navbar-light, etc.).
 * ============================================================ */

[data-bs-theme="dark"] .bg-white {
    background-color: var(--card-primary, #1e1e1e) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .card-footer.bg-white {
    background-color: var(--card-secondary, #2a2a2a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--card-secondary, #2a2a2a) !important;
    color: var(--bs-body-color);
}


/* ============================================================
 * Utilitários de formulário (toggle uniforme + feedback)
 *
 *   .form-switch (Bootstrap) — toggle universal do sistema na cor
 *                              --vox-toggle-color (laranja, definido
 *                              em base-layout.css). Cor única para
 *                              "ligado/desligado" desacopla o widget
 *                              da identidade da entidade e mantém
 *                              par com o app mobile.
 *   .vox-flash-on-fill       — pulse curto para confirmar preenchimento
 *                              programático (botão "wand" de sugestão).
 *   .vox-slug-preview        — preview ao vivo do slug abaixo do campo.
 * ============================================================ */

.form-switch .form-check-input:checked {
    background-color: var(--vox-toggle-color);
    border-color: var(--vox-toggle-color);
}
.form-switch .form-check-input:focus {
    border-color: var(--vox-toggle-color);
    box-shadow: 0 0 0 0.25rem
        color-mix(in srgb, var(--vox-toggle-color) 25%, transparent);
}

@keyframes vox-flash-on-fill {
    0%   { background-color: color-mix(in srgb, var(--vox-flash-color, #198754) 18%, transparent); }
    100% { background-color: transparent; }
}
.vox-flash-on-fill {
    animation: vox-flash-on-fill 0.6s ease-out;
}

.vox-slug-preview {
    display: block;
    min-height: 1.25em;  /* reserva linha para evitar layout shift */
}
.vox-slug-preview code {
    background-color: var(--bs-tertiary-bg, #f0f0f0);
    padding: 0.1em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.95em;
}

@media (prefers-reduced-motion: reduce) {
    .vox-flash-on-fill {
        animation: none;
    }
}

/* ── Envio assíncrono com feedback em tempo real (vox-envio-status.js) ── */
.vox-envio-toast {
    min-width: 320px;
    max-width: 420px;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.vox-envio-toast .text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}
.vox-envio-toast .text-dark-emphasis {
    color: rgba(33, 37, 41, 0.85) !important;
}

.vox-envio-morph {
    transition: background-color 0.3s ease;
}
.vox-envio-morph > * {
    animation: vox-envio-fade-in 0.25s ease-out;
}
@keyframes vox-envio-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vox-icon-pulse {
    animation: vox-icon-pulse 1.4s ease-in-out infinite;
}
@keyframes vox-icon-pulse {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50%      { transform: translateX(3px); opacity: 0.65; }
}

.vox-progress-indeterminate {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative;
}
.vox-progress-indeterminate > div {
    position: absolute;
    height: 100%;
    width: 40%;
    background: rgba(255, 255, 255, 0.85);
    animation: vox-progress-indeterminate 1.3s ease-in-out infinite;
}
@keyframes vox-progress-indeterminate {
    0%   { left: -40%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .vox-icon-pulse,
    .vox-progress-indeterminate > div,
    .vox-envio-morph > * {
        animation: none;
    }
    .vox-envio-morph {
        transition: none;
    }
}

/* ── Select de UF do CREA — compacto e harmonizado com input-group ──
 * Aplicado em pessoa_form, completar_cadastro, configuracoes,
 * organizacao_bootstrap e no modal de criar agrônomo (fazenda_form).
 * O `flex: 0 0 ...` precisa estar no próprio <select> (descendente
 * direto de .input-group) para que o Bootstrap zere o border-radius
 * direito automaticamente — wrappers extras quebram esse reset. */
.vox-uf-select {
    flex: 0 0 6.5rem;
    max-width: 6.5rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mostrar/ocultar senha — componente global (vox-password-toggle.js)
   Padrão de mercado (GitHub/Stripe): olhinho dentro do campo, à direita.
   ────────────────────────────────────────────────────────────────────────── */
.password-wrapper {
    position: relative;
}
/* Reserva espaço p/ o botão e some com o ícone de feedback do Bootstrap
   (is-valid/is-invalid) que ocuparia o mesmo lugar do olhinho. */
.password-wrapper .form-control {
    padding-right: 3rem;
    background-image: none !important;
}
.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    min-width: 2.75rem; /* alvo de toque ≥ 44px (WCAG 2.5.5) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    padding: 0 0.875rem;
    border-radius: 0 0.375rem 0.375rem 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.password-toggle:hover {
    color: var(--color-success, #198754);
    background: rgba(25, 135, 84, 0.08);
}
.password-toggle:focus-visible {
    outline: 2px solid var(--color-success, #198754);
    outline-offset: -2px;
}
.password-toggle i {
    font-size: 1rem;
    line-height: 1;
}
[data-bs-theme="dark"] .password-toggle {
    color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .password-toggle:hover {
    color: var(--color-success, #28a745);
    background: rgba(40, 167, 69, 0.15);
}
@media (prefers-reduced-motion: reduce) {
    .password-toggle {
        transition: none;
    }
}

/* =========================================================================
   Ajuda contextual (?) — padrão único (partial shared/partials/_ajuda_popover.html)
   Substitui banners alert persistentes no topo de forms por ajuda sob demanda.
   ========================================================================= */
.vox-ajuda {
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    font-size: 0.95rem;
    vertical-align: middle;
}
.vox-ajuda:hover,
.vox-ajuda:focus-visible {
    color: var(--vox-toggle-color, #f39c12);
    outline: none;
}
[data-bs-theme="dark"] .vox-ajuda {
    color: var(--bs-secondary-color, #9aa0a6);
}