/*
 * Customizações do Lucrafe sobre o Bootstrap.
 * - Tipografia: fonte Inter (self-hosted, sem CDN).
 * - Botões menores/mais elegantes.
 * - Ajustes de navbar (evitar quebra ícone/texto).
 */

/* ---------------------------------------------------------------
 * Fonte Inter (Google Fonts) servida localmente
 * --------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-latin-700-normal.woff2') format('woff2');
}

:root {
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Paleta da marca Lucrafé (derivada do logotipo):
     * verde-floresta (lucra) + verde-esmeralda (fé) + âmbar (acento). */
    --brand-verde: #198754;         /* verde principal — já era a cor do sistema */
    --brand-verde-claro: #1baf7a;   /* esmeralda do "fé" */
    --brand-verde-escuro: #146c43;
    --brand-ambar: #f7951d;         /* laranja/âmbar do acento do logo */
    --brand-ambar-suave: #fff3e2;
}

body {
    font-family: var(--bs-font-sans-serif);
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
 * Botões menores e mais elegantes (Bootstrap 5.3 usa variáveis)
 * --------------------------------------------------------------- */
.btn {
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-font-size: 0.82rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 0.4rem;
}
.btn-sm {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
}
.btn-lg {
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-font-size: 0.95rem;
}

/* ---------------------------------------------------------------
 * Navbar: impede que ícone e texto de cada link quebrem em duas
 * linhas (ícone em cima, texto embaixo) quando o espaço aperta.
 * --------------------------------------------------------------- */
.navbar .nav-link {
    white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Navbar da marca: fundo claro para o logotipo verde/âmbar
 * ganhar contraste, com acentos verde (hover) e âmbar (ativo).
 * --------------------------------------------------------------- */
.navbar-lucrafe {
    background-color: #fff;
    border-bottom: 1px solid rgba(20, 108, 67, 0.12);
}
.navbar-logo {
    height: 34px;
    width: auto;
    display: block;
}
@media (max-width: 575.98px) {
    .navbar-logo { height: 28px; }
}
.navbar-lucrafe .nav-link {
    color: #33413a;
    font-weight: 500;
    border-radius: 0.4rem;
}
.navbar-lucrafe .nav-link:hover,
.navbar-lucrafe .nav-link:focus,
.navbar-lucrafe .nav-link.show {
    color: var(--brand-verde);
}
.navbar-lucrafe .nav-link.active {
    color: var(--brand-verde-escuro);
    box-shadow: inset 0 -2px 0 var(--brand-ambar);
}
.navbar-lucrafe .dropdown-item.active,
.navbar-lucrafe .dropdown-item:active {
    background-color: var(--brand-verde);
}
.navbar-lucrafe .navbar-toggler {
    color: var(--brand-verde);
}

/* ---------------------------------------------------------------
 * Dashboard — paleta verde/amarelo/vermelho e cards temáticos
 * --------------------------------------------------------------- */
.secao-titulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}
.secao-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
}

.stat-tile {
    border: 0;
    border-radius: 0.85rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stat-tile:hover {
    transform: translateY(-2px);
}
.stat-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.stat-valor {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}
.stat-rotulo {
    font-size: 0.75rem;
    color: #6c757d;
}

/* -------------------------------------------------------------------
 * Cards em carrossel horizontal no mobile (arrastar para o lado) e
 * lado a lado (grade de 4) no desktop — usado p/ comparar gráficos.
 * ----------------------------------------------------------------- */
.cards-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}
.cards-scroll > * {
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 992px) {
    .cards-scroll {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-columns: auto;
        overflow: visible;
    }
}
.cards-scroll-dica {
    font-size: 0.72rem;
    color: #6c757d;
}
@media (min-width: 992px) {
    .cards-scroll-dica { display: none; }
}

/* -------------------------------------------------------------------
 * Linha do tempo (práticas do talhão, mais recentes no topo).
 * ----------------------------------------------------------------- */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0;
    position: relative;
}
.timeline-item {
    position: relative;
    padding: 0 0 1.1rem 1.6rem;
    border-left: 2px solid #d9e7df;
}
.timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0.25rem;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -0.46rem;
    top: 0.15rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: #198754;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #b7d8c6;
}
.timeline-data {
    font-size: 0.72rem;
    font-weight: 600;
    color: #198754;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------
 * Status de saldo do lote de estoque — borda esquerda + semântica.
 * ----------------------------------------------------------------- */
.item-estoque {
    border-left: 5px solid transparent;
}
.item-estoque.st-ok { border-left-color: #198754; }
.item-estoque.st-baixo { border-left-color: #eda100; }
.item-estoque.st-critico { border-left-color: #e34948; }
.item-estoque.st-vencido { border-left-color: #e34948; }
.item-estoque.st-esgotado { border-left-color: #adb5bd; }

/* -------------------------------------------------------------------
 * Borda superior colorida em TODOS os cards, com cor semântica.
 * Padrão: verde (marca). Cards com fundo/classe de significado herdam
 * a cor certa automaticamente. Usa !important para vencer .border-0.
 * ------------------------------------------------------------------- */
.card {
    border-top: 3px solid var(--bs-success) !important;
}
/* amarelo = atenção/pendência */
.card.card-topo-amarelo,
.card.bg-warning-subtle,
.card.text-bg-warning {
    border-top-color: var(--bs-warning) !important;
}
/* vermelho = despesa/perigo/vencido */
.card.card-topo-vermelho,
.card.bg-danger-subtle,
.card.text-bg-danger {
    border-top-color: var(--bs-danger) !important;
}
/* verde = receita/positivo/ok (explícito) */
.card.card-topo-verde,
.card.bg-success-subtle {
    border-top-color: var(--bs-success) !important;
}
/* cinza = neutro, quando não se quer cor semântica */
.card.card-topo-neutro,
.card.bg-body-tertiary,
.card.bg-light {
    border-top-color: var(--bs-border-color) !important;
}
/* cards que não devem ter a faixa (ex.: cabeçalhos de modal já estilizados) */
.card.card-sem-topo { border-top-width: 1px !important; }

.link-card { text-decoration: none; color: inherit; }
.link-card .card { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.link-card:hover .card { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; }

/* ---------------------------------------------------------------
 * Estilo global de cards — mesmo aspecto do dashboard em todo o app
 * --------------------------------------------------------------- */
.card {
    border-radius: 0.85rem;
}
.card .card-header {
    border-top-left-radius: 0.85rem;
    border-top-right-radius: 0.85rem;
}
/* qualquer link que envolve um card ganha o hover de elevação */
a.text-decoration-none .card,
.link-card .card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.text-decoration-none:hover .card,
.link-card:hover .card {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* cabeçalho de página padrão com ícone */
.page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* breadcrumb mais discreto */
.breadcrumb { --bs-breadcrumb-divider-color: #adb5bd; }

/* badges e tabelas um pouco mais suaves */
.table > :not(caption) > * > * { padding: 0.6rem 0.75rem; }
.list-group-item { border-color: rgba(0, 0, 0, 0.05); }

/* utilitário para truncar texto dentro de flex (mobile-first nas listas) */
.min-w-0 { min-width: 0 !important; }

/* ---------------------------------------------------------------
 * Site público (landing + blog) — seções de marketing/SEO.
 * --------------------------------------------------------------- */
.site-body { background-color: #fff; }

.site-hero {
    background:
        radial-gradient(1200px 400px at 90% -10%, rgba(27, 175, 122, 0.10), transparent 60%),
        linear-gradient(180deg, #f6faf7 0%, #ffffff 100%);
}
.site-hero h1 { letter-spacing: -0.02em; }

/* Cartões de funcionalidade */
.feature-card {
    background-color: #fff;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.feature-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(20, 108, 67, 0.10);
    transform: translateY(-2px);
    border-color: rgba(20, 108, 67, 0.25) !important;
}
.feature-ico {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.65rem;
    background: var(--brand-ambar-suave);
    color: var(--brand-verde-escuro);
    font-size: 1.1rem;
}

/* Passos "como funciona" */
.step-num {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--brand-verde);
    color: #fff; font-weight: 700;
}

/* Banner de conversão (CTA) */
.cta-banner {
    background: linear-gradient(120deg, var(--brand-verde-escuro), var(--brand-verde));
    color: #fff;
}
.cta-banner a.text-white { text-decoration: underline; }

/* Corpo do artigo — tipografia de leitura */
.artigo-corpo { font-size: 1.075rem; line-height: 1.75; color: #2b332e; }
.artigo-corpo h2 { margin-top: 2.2rem; margin-bottom: 0.8rem; font-weight: 700; }
.artigo-corpo h3 { margin-top: 1.6rem; margin-bottom: 0.6rem; font-weight: 600; font-size: 1.15rem; }
.artigo-corpo p { margin-bottom: 1.1rem; }
.artigo-corpo ul, .artigo-corpo ol { margin-bottom: 1.1rem; padding-left: 1.3rem; }
.artigo-corpo li { margin-bottom: 0.4rem; }
.artigo-corpo p.lead { font-size: 1.2rem; color: #4a544d; }
.artigo-corpo code {
    background: #f1f4f2; color: var(--brand-verde-escuro);
    padding: 0.1rem 0.35rem; border-radius: 0.3rem; font-size: 0.92em;
}

/* CTA dentro do artigo */
.artigo-cta {
    background: linear-gradient(120deg, var(--brand-verde-escuro), var(--brand-verde));
    color: #fff;
}
.artigo-cta .btn-light { color: var(--brand-verde-escuro); }

.site-footer { background-color: #f6faf7; }

/* ===============================================================
 * Blog — leitura lúdica: callouts, listas com ícone, passos, TOC,
 * chips de categoria, byline e barra de progresso de leitura.
 * =============================================================== */

/* Barra de progresso de leitura (topo, fixa) */
.reading-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: transparent; z-index: 1050; pointer-events: none;
}
.reading-progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--brand-verde), var(--brand-ambar));
}

/* Trilha (breadcrumb) */
.breadcrumb-lucrafe a { color: var(--brand-verde-escuro); text-decoration: none; }
.breadcrumb-lucrafe a:hover { text-decoration: underline; }
.breadcrumb-lucrafe .sep { color: #adb5bd; margin: 0 .4rem; }

/* Selo de categoria com ícone */
.cat-badge {
    background: var(--brand-ambar-suave);
    color: var(--brand-verde-escuro);
    border: 1px solid rgba(20,108,67,.15);
    font-weight: 600;
}
a.cat-badge:hover { background: #ffe9cc; }
.cat-ico, .autor-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .6rem; background: var(--brand-ambar-suave);
    color: var(--brand-verde-escuro);
}
.cat-ico { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; vertical-align: middle; }
.autor-avatar { width: 2.2rem; height: 2.2rem; }

/* Byline do autor */
.autor-byline { line-height: 1.25; }
.autor-byline .d-block { font-size: .78rem; }

/* Chips de categoria (navegação do blog) */
.blog-chips .chip {
    display: inline-flex; align-items: center;
    padding: .4rem .8rem; border-radius: 2rem;
    background: #fff; border: 1px solid #e3e8e4;
    color: #33413a; font-size: .82rem; font-weight: 500;
    text-decoration: none; transition: all .15s ease;
}
.blog-chips .chip:hover { border-color: var(--brand-verde); color: var(--brand-verde-escuro); }
.blog-chips .chip-ativo { background: var(--brand-verde); border-color: var(--brand-verde); color: #fff; }
.blog-chips .chip-num {
    margin-left: .4rem; background: rgba(0,0,0,.08); color: inherit;
    border-radius: 1rem; padding: 0 .45rem; font-size: .72rem; font-weight: 600;
}
.blog-chips .chip-ativo .chip-num { background: rgba(255,255,255,.25); }

/* "O essencial" */
.essencial {
    background: #f6faf7; border: 1px solid rgba(20,108,67,.15);
    border-left: 4px solid var(--brand-verde);
}
.essencial > p { color: var(--brand-verde-escuro); }
.essencial ul { list-style: none; padding-left: 0; margin: 0; }
.essencial ul li { position: relative; padding-left: 1.6rem; margin-bottom: .4rem; }
.essencial ul li::before {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f058";
    color: var(--brand-verde); position: absolute; left: 0; top: .1em;
}

/* Índice (TOC) */
.toc { background: #fff; border: 1px dashed #cdd8d0; }
.toc-titulo { font-weight: 600; color: var(--brand-verde-escuro); font-size: .95rem; }
.toc ol { list-style: none; counter-reset: toc; padding-left: 0; margin: 0; }
.toc ol li { counter-increment: toc; margin-bottom: .3rem; padding-left: 1.9rem; position: relative; }
.toc ol li::before {
    content: counter(toc); position: absolute; left: 0; top: 0;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--brand-ambar-suave); color: var(--brand-verde-escuro);
    font-size: .72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.toc ol li a { color: #33413a; text-decoration: none; }
.toc ol li a:hover { color: var(--brand-verde); text-decoration: underline; }

/* Listas do corpo com ícone */
.artigo-corpo ul { list-style: none; padding-left: 0; }
.artigo-corpo ul li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; }
.artigo-corpo ul li::before {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f4d8"; /* seedling */
    color: var(--brand-verde); position: absolute; left: 0; top: .18em; font-size: .82em;
}
.artigo-corpo ul.checklist li::before { content: "\f058"; /* check-circle */ }

/* Passo a passo numerado */
.artigo-corpo ol.passos { list-style: none; counter-reset: passo; padding-left: 0; }
.artigo-corpo ol.passos > li {
    counter-increment: passo; position: relative;
    padding-left: 2.9rem; margin-bottom: 1rem; min-height: 2rem;
}
.artigo-corpo ol.passos > li::before {
    content: counter(passo); position: absolute; left: 0; top: -.1rem;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--brand-verde); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(20,108,67,.25);
}

/* Callouts (dica / atenção / no sistema) */
.callout {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1rem 1.15rem; border-radius: .8rem; margin: 1.5rem 0;
    border: 1px solid transparent;
}
.callout .callout-ico { font-size: 1.15rem; margin-top: .15rem; flex-shrink: 0; }
.callout strong { display: block; margin-bottom: .15rem; }
.callout p { margin: 0; }
.callout p + p { margin-top: .4rem; }

.callout-dica { background: #eef8f1; border-color: rgba(20,108,67,.18); }
.callout-dica .callout-ico { color: var(--brand-verde); }

.callout-atencao { background: #fff6e6; border-color: rgba(247,149,29,.28); }
.callout-atencao .callout-ico { color: #b06d00; }

.callout-sistema {
    background: linear-gradient(120deg, var(--brand-verde-escuro), var(--brand-verde));
    color: #fff; border: none;
}
.callout-sistema .callout-ico { color: var(--brand-ambar); }
.callout-sistema .btn-light { color: var(--brand-verde-escuro); }

/* Foco de âncora suave ao pular via TOC (só no site público) */
.site-body { scroll-behavior: smooth; }
.artigo-corpo h2 { scroll-margin-top: 1.5rem; }

/* ===============================================================
 * Evolução da análise de solo por talhão (tela de análises).
 * =============================================================== */
.evo-card .card-header h2 { font-weight: 600; }

.evo-hero .h3 { color: var(--brand-verde-escuro); font-weight: 700; }

/* Container do gráfico Chart.js (altura fixa exigida por maintainAspectRatio:false) */
.evo-chart-wrap { position: relative; height: 260px; width: 100%; }
@media (max-width: 575.98px) { .evo-chart-wrap { height: 220px; } }

.evo-lista { display: flex; flex-direction: column; }
.evo-item {
    display: flex; gap: 1.25rem; align-items: flex-start;
    padding: 1rem 0; border-top: 1px solid #eef1ee;
}
.evo-lista .evo-item:first-child { border-top: none; }

.evo-metricas { flex: 0 0 190px; max-width: 190px; }
.evo-label { font-weight: 600; font-size: .9rem; }
.evo-spark { margin: .15rem 0 .25rem; }
.evo-valores { white-space: nowrap; }
.evo-delta {
    display: inline-flex; align-items: center; gap: .15rem;
    background: #f1f4f2; color: #52605a; border-radius: 1rem;
    padding: 0 .45rem; font-size: .72rem; font-weight: 600;
}
.evo-analise { flex: 1 1 auto; min-width: 0; }
.evo-analise .badge { font-weight: 600; }
.evo-acao { color: #52605a; }

@media (max-width: 575.98px) {
    .evo-item { flex-direction: column; gap: .5rem; }
    .evo-metricas { flex-basis: auto; max-width: none; }
}

/* Título acima de cada gráfico de indicador e separador entre linhas */
.evo-chart-titulo { font-weight: 600; }
.evo-hero { border-bottom: 1px solid #f0f3f0; padding-bottom: 1.25rem; }
.evo-hero:last-of-type { border-bottom: none; }