body {
      padding: 20px;
    }
    .tab-content {
      margin-top: 20px;
    }
	  .card {
    border-radius: 12px;
  }
  .card-title {
    font-size: 0.95rem;
    font-weight: 600;
  }
  .card p {
    font-size: 0.9rem;
  }
  
  
  /* Logo do topo */
img.img-fluid.d-block.mx-auto.mb-4{ max-width: 520px; height:auto; }

	
/* Base dos cards */
#adubDadosLista .nutri-card {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6; /* cor padrão de borda */
}

/* Cards sem classificação (fundo branco e borda cinza) */
#adubDadosLista .nutri-card:not([data-classe]) {
  background-color: #ffffff;
  border-color: #ccc;
}

/* Muito baixo / Baixo / Evitar */
#adubDadosLista .nutri-card[data-classe="Muito baixo"],
#adubDadosLista .nutri-card[data-classe="Baixo"],
#adubDadosLista .nutri-card[data-classe="Evitar"] {
  background-color: #fab9b9;
  border-color: #b03737;
}

/* Médio */
#adubDadosLista .nutri-card[data-classe="Médio"] {
  background-color: #fcf98b;
  border-color: #ebe50c;
}

/* Alto / Muito Alto / Muito alto */
#adubDadosLista .nutri-card[data-classe="Alto"],
#adubDadosLista .nutri-card[data-classe="Muito alto"] {
  background-color: #d2f7cb;
  border-color: #2eb514;
}

/* Título do nutriente */
#adubDadosLista .nutri-card-title {
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

/* Valor em negrito e maior */
#adubDadosLista .nutri-card-text {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  flex-grow: 1;
}

/* Badge base */
#adubDadosLista .nutri-badge {
  font-size: 0.85rem;
  padding: 0.4em 0.6em;
  line-height: 1.2;
  align-self: flex-start;
  color: #fff;
}

/* Badge cores conforme classificação */
#adubDadosLista .nutri-card[data-classe="Muito baixo"] .nutri-badge,
#adubDadosLista .nutri-card[data-classe="Baixo"] .nutri-badge,
#adubDadosLista .nutri-card[data-classe="Evitar"] .nutri-badge {
  background-color: #b03737;
}
#adubDadosLista .nutri-card[data-classe="Médio"] .nutri-badge {
  background-color: #cf8415; /* cinza escuro */
}
/* Badge Alto / Muito Alto / Muito alto */
#adubDadosLista .nutri-card[data-classe="Alto"] .nutri-badge,
#adubDadosLista .nutri-card[data-classe="Muito alto"] .nutri-badge {
  background-color: #2eb514;
}

/* Textos em cinza para cards brancos */
#adubDadosLista .nutri-card:not([data-classe]) .nutri-card-title,
#adubDadosLista .nutri-card:not([data-classe]) .nutri-card-text,
#adubDadosLista .nutri-card:not([data-classe]) .nutri-badge {
  color: #6c757d !important;
}

.badge-destaque {
  background-color: #008035 !important;
  color: #fff       !important;
}


/* ===== ESTILO COMUM PARA TODOS OS PAINÉIS DE ADUBAÇÃO (N, P e K) ===== */
#nitrogenio-panel,
#fosforo-panel,
#potassio-panel,
#extras_N,
#extras_P,
#extras_K {
  background-color: var(--cor-fundo-claro);
  border: 0px solid var(--cor-borda);
  border-radius: 0.5rem;
  padding: 1rem;           /* controle o espaçamento interno aqui */
  margin-bottom: 1.5rem;   /* controle o espaçamento externo aqui */
}


/* ===== CONFIGURAÇÕES GERAIS PARA TODOS OS MÓDULOS DE ADUBAÇÃO (N, P, K) ===== */

/* Fonte base */
:root {
  --font-base: 'Segoe UI', sans-serif;
  --font-size-label: 1.0rem;
  --font-size-badge: 1rem;
  --font-size-titulo: 1.2rem;
  --cor-badge: #008035;
  --cor-texto: #343a40;
  --cor-fundo-claro: #f8f9fa;
  --cor-fundo-escuro: #dee2e6;
  --cor-borda: #ced4da;
  --cor-destaque-clara: #d1f2e2;
  --cor-botao: #005c28;
}


/* Labels e títulos */
label.form-label,
h6.fw-semibold,
label.form-label.fw-bold {
  font-size: var(--font-size-label);
  font-weight: 600;
  color: var(--cor-texto);
}

/* Títulos maiores */
h5, h6 {
  font-size: var(--font-size-titulo);
}

/* Badges de destaque (resultados) */
.badge-destaque {
  font-size: var(--font-size-badge);
  padding: 0.4em 0.8em;
  background-color: var(--cor-badge) !important;
  color: #fff !important;
  border-radius: 0.5rem;
}

/* Badges de nutrientes */
[id^="labelN"],
[id^="labelCa"],
[id^="labelS"],
[id^="labelMg"],
[id^="labelNK"],
[id^="labelCaK"],
[id^="labelSK"],
[id^="labelMgK"],
#linhaNutrientes,
#linhaNutrientesK,
#linhaNutrientesN {
  font-size: 0.95rem;
}

/* Inputs e selects compactos */
select.form-select-sm,
input.form-control-sm,
.input-group-sm .form-control,
.input-group-sm .input-group-text {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
}

/* Conversão */
[id^="convMin"],
[id^="convMax"],
[id^="unitLabel"] {
  font-size: var(--font-size-badge);
  font-weight: 500;
}


button.btn-custom:hover {
  background-color: #006f34;
}

.nav-tabs .nav-link {
  font-size: 1rem;          /* restaurar tamanho padrão */
  font-weight: 400;         /* negrito leve */
  padding: 0.6rem 1rem;     /* melhor preenchimento vertical */
}


/* 20% menor dentro do painel de Nitrogênio */
#nitrogenio-panel {
  font-size: 0.8em;
}

/* labels e títulos */
#nitrogenio-panel .form-label.fs-5,
#nitrogenio-panel h6.fw-semibold.mb-1 {
  font-size: 1rem !important;        /* 1.25rem × 0.8 */
  line-height: 1.2;
  margin-bottom: 0.2rem;             /* 0.25rem × 0.8 */
}

/* badges */
#nitrogenio-panel .badge-destaque.fs-5,
#nitrogenio-panel .badge.bg-light.border.text-secondary {
  font-size: 1rem !important;
  padding: 0.3em 0.5em;              /* ajuste interno */
}

/* espaçamentos verticais */
#nitrogenio-panel .mb-3 { margin-bottom: 0.8rem !important; }   /* 1rem × 0.8 */
#nitrogenio-panel .mb-4 {
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;                              /* 1.5rem × 0.8 ≈1.2rem, arredondei pra 0.8 */
}

/* gaps nos flex */
#nitrogenio-panel .gap-4 { gap: 1.2rem !important; }  /* 1.5rem × 0.8 */
#nitrogenio-panel .gap-2 { gap: 0.4rem !important; }  /* 0.5rem × 0.8 */

/* títulos de seção */
#nitrogenio-panel .form-label.fw-bold.fs-5 {
  font-size: 1rem !important;
}

/* 20% menor dentro do painel de Potássio */
#extras_K {
  font-size: 0.8em;
}

/* labels e títulos */
#extras_K .form-label.fs-5,
#extras_K h6.fw-semibold.mb-1,
#extras_K .form-label.fw-bold.fs-5 {
  font-size: 1rem !important;   /* 1.25rem × 0.8 */
  line-height: 1.2;
  margin-bottom: 0.2rem;        /* 0.25rem × 0.8 */
}

/* badges */
#extras_K .badge-destaque.fs-5,
#extras_K .badge.bg-light.border.text-secondary {
  font-size: 1rem !important;
  padding: 0.3em 0.5em;
}

/* espaçamentos verticais */
#extras_K .mb-3 { margin-bottom: 0.8rem !important; }   /* 1rem × 0.8 */
#extras_K .mb-4 {
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;                      /* 1.5rem × 0.8 ≈1.2rem, arredondado */
}

/* gaps entre itens flex */
#extras_K .gap-2 { gap: 0.4rem !important; }             /* 0.5rem × 0.8 */

/* ajuste de <hr> com my-4 */
#extras_K .my-4 { 
  margin-top: 1.2rem !important;                         /* 1.5rem × 0.8 */
  margin-bottom: 1.2rem !important;
}

/* 20% menor dentro do painel de Fósforo */
#extras_P {
  font-size: 0.8em;
}

/* labels e títulos */
#extras_P .form-label.fs-5,
#extras_P .form-label.fw-bold.fs-5,
#extras_P .form-label.mb-0 {
  font-size: 1rem !important;   /* 1.25rem × 0.8 */
  line-height: 1.2;
  margin-bottom: 0.2rem;        /* 0.25rem × 0.8 */
}

/* badges */
#extras_P .badge-destaque.fs-5,
#extras_P .badge.bg-light.border.text-secondary {
  font-size: 1rem !important;
  padding: 0.3em 0.5em;
}

/* espaçamentos */
#extras_P .mb-3 { margin-bottom: 0.8rem !important; }   /* 1rem × 0.8 */
#extras_P .mb-4 {
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;                      /* 1.5rem × 0.8 ≈1.2rem */
}
#extras_P .my-4 {
  margin-top: 1.2rem !important;                         /* 1.5rem × 0.8 */
  margin-bottom: 1.2rem !important;
}

/* gaps */
#extras_P .gap-2 { gap: 0.4rem !important; }             /* 0.5rem × 0.8 */
#extras_P .gap-3 { gap: 0.8rem !important; }             /* 1rem   × 0.8 */

.tabela-micro {
  background-color: transparent !important;
}
.tabela-micro span {
  font-size: 0.70rem;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.tabela-micro th,
.tabela-micro td {
  padding: 0.3rem !important;
  font-size: 0.70rem;
  background-color: transparent !important;
}
.tabela-micro + div {
  margin-top: 0px !important;
}


.nutri-card {
  border-radius: 0.5rem;
  padding: 0.75rem;
  border: 2px solid transparent;
  background-color: #ffffff;
  color: #111;
  text-align: left;
  transition: all 0.2s ease-in-out;
}

/* Título */
.nutri-card .card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0d47a1;
  margin-bottom: 0.5rem;
}

/* Valor */
.nutri-card p:nth-of-type(1) {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.4rem;
}

/* Classificação */
.nutri-card p:nth-of-type(2) {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0;
}

/* Cores otimizadas */

/* Muito baixo = vermelho suave */
.nutri-card[data-classe="muito baixo"] {
  background-color: #f8c6c6;
  border-color: #e57373;
}

/* Baixo e Médio = amarelo forte */
.nutri-card[data-classe="baixo"],
.nutri-card[data-classe="médio"] {
  background-color: #ffe69c;
  border-color: #f1c40f;
}

/* Alto e Muito alto = verde vibrante */
.nutri-card[data-classe="alto"],
.nutri-card[data-classe="muito alto"] {
  background-color: #b6e7c9;
  border-color: #2ecc71;
}

/* Evitar = vermelho mais intenso */
.nutri-card[data-classe="evitar"] {
  background-color: #f58e8e;
  border-color: #c0392b;
}

/* Define col-md-2_4 para 5 colunas por linha (20%) */
@media (min-width: 768px) {
  .col-md-2_4 {
    flex: 0 0 auto;
    width: 20%;
  }
}


/* === PATCH ESTÉTICO NITROGÊNIO — COLE NO FIM DO <style> === */

/* Cartões visuais sem alterar sua marcação */
#nitrogenio-panel .mb-3,
#nitrogenio-panel .mb-4,
#nitrogenio-panel .mt-4 {
  background: #fff;
  border-radius: .8rem;
  padding: 1rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.06);
}

/* TOP BAR: select + teor (%) na mesma linha a partir de 576px */
@media (min-width:576px){
  /* pega exatamente o container flex já existente no seu HTML gerado pelo JS */
  #nitrogenio-panel .mb-3 > .d-flex.flex-column.flex-sm-row.align-items-start.align-items-sm-center.gap-2 {
    flex-wrap: nowrap;
    gap: .5rem .75rem;
    align-items: center;
  }
  #nitrogenio-panel #selFertN { min-width: 260px; flex: 1 1 auto; }
  #nitrogenio-panel #inputTeorN { width: 110px; }
}

/* Badges (pílulas) com leitura melhor */
#nitrogenio-panel .badge-destaque {
  padding: .28rem .6rem;
  border-radius: 999px;
  font-weight: 600;
}
#nitrogenio-panel .badge.bg-light.border.text-secondary {
  border-radius: 999px;
  padding: .25rem .55rem;
}

/* Números ligeiramente maiores, sem estourar */
#nitrogenio-panel .badge-destaque.fs-5 { font-size: 1.1rem !important; }
#nitrogenio-panel .fs-5 { line-height: 1.15; }

/* Espaçamentos mais coesos */
#nitrogenio-panel .row.g-2,
#nitrogenio-panel .row.g-3 { row-gap: .75rem; }
#nitrogenio-panel .d-flex.gap-4 { gap: 1.25rem !important; }





/* ============================
   INTERPRETAÇÃO.js – Estética compacta + fundos por classe
   ============================ */

:root{
  /* Paleta de contraste (fundo + borda por classe) */
  --bg-muito-baixo:#EDE9FE;  --bd-muito-baixo:#7C3AED;
  --bg-baixo:#DBEAFE;        --bd-baixo:#2563EB;
  --bg-medio:#DCFCE7;        --bd-medio:#059669;
  --bg-alto:#FEF3C7;         --bd-alto:#D97706;
  --bg-muito-alto:#FEE2E2;   --bd-muito-alto:#DC2626;
  --bg-evitar:#E5E7EB;       --bd-evitar:#111827;

  --c-text:#111827;
  --c-muted:#6B7280;
  --c-border:#E5E7EB;
  --radius:12px;
}

#interp-toolbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:6px 0 10px;
}
#interp-toolbar .btn{
  border-radius:999px; padding:4px 12px; font-size:.9rem;
}

/* Chips do filtro com as mesmas cores dos cards */
#interp-toolbar [data-filter-classe]{
  border-radius:999px; padding:4px 12px; font-size:.9rem;
  border:1px solid #cbd5e1; color:#475569; background:#f8fafc; transition:.12s;
}
#interp-toolbar [data-filter-classe][data-tone="good"]{
  background:var(--bg-good);   color:var(--tone-good);   border-color:var(--tone-good);
}
#interp-toolbar [data-filter-classe][data-tone="medium"]{
  background:var(--bg-medium); color:var(--tone-medium); border-color:var(--tone-medium);
}
#interp-toolbar [data-filter-classe][data-tone="bad"]{
  background:var(--bg-bad);    color:var(--tone-bad);    border-color:var(--tone-bad);
}
/* Sem representantes -> esmaecido */
#interp-toolbar [data-filter-classe].is-empty{
  opacity:.45; pointer-events:none;
}
/* Fix #7: estado ativo do filtro */
#interp-toolbar [data-filter-classe].active{
  box-shadow: 0 0 0 2px currentColor;
  font-weight: 700;
}


/* 4 colunas fixas nas seções */
#secao-muito-baixo, #secao-baixo, #secao-medio, #secao-alto, #secao-muito-alto, #secao-evitar{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}

/* Container – modo ultra compacto (aplicado via JS) */
#tabelaInterpretacao{ transition:.15s ease; }
#tabelaInterpretacao.modo-ultra .nutri-card{ padding:8px 10px; }
#tabelaInterpretacao.modo-ultra .nutri-name{ font-size:.92rem; }
#tabelaInterpretacao.modo-ultra .nutri-val{ font-size:1rem; }

/* Card base (neutro; sem barra vertical) */
#tabelaInterpretacao .nutri-card.card{
  margin:0;
  border:1px solid var(--c-border);
    box-shadow:0 1px 0 rgba(17,24,39,.04);
  padding:10px 12px;
  background:#fff;
  transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease, background-color .08s ease;
}
.nutri-card.card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}

/* Fundos por classe (robusto: case-insensitive + slug) */
.nutri-card[data-classe="muito baixo" i],
.nutri-card[data-classe-key="muito-baixo"] { background:var(--bg-muito-baixo) !important; border-color:var(--bd-muito-baixo) !important; }

.nutri-card[data-classe="baixo" i],
.nutri-card[data-classe-key="baixo"]       { background:var(--bg-baixo) !important;       border-color:var(--bd-baixo) !important; }

.nutri-card[data-classe="médio" i],
.nutri-card[data-classe-key="medio"]       { background:var(--bg-medio) !important;       border-color:var(--bd-medio) !important; }

.nutri-card[data-classe="alto" i],
.nutri-card[data-classe-key="alto"]        { background:var(--bg-alto) !important;        border-color:var(--bd-alto) !important; }

.nutri-card[data-classe="muito alto" i],
.nutri-card[data-classe-key="muito-alto"]  { background:var(--bg-muito-alto) !important;  border-color:var(--bd-muito-alto) !important; }

.nutri-card[data-classe="evitar" i],
.nutri-card[data-classe-key="evitar"]      { background:var(--bg-evitar) !important;      border-color:var(--bd-evitar) !important; }


/* Cabeçalho (nome) */
.nutri-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:4px;
}
.nutri-name{
  font-weight:700; color:var(--c-text);
  letter-spacing:.2px; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* (Opcional) Chip – mantido caso seja usado em outro lugar */
.nutri-chip{
  font-size:.68rem; font-weight:700; line-height:1;
  padding:3px 8px; border-radius:999px; opacity:.95;
  background:transparent; border:1.5px solid currentColor; color:currentColor;
}
.nutri-card[data-classe="muito baixo"] .nutri-chip{ color:var(--bd-muito-baixo); border-color:var(--bd-muito-baixo); }
.nutri-card[data-classe="baixo"]       .nutri-chip{ color:var(--bd-baixo);       border-color:var(--bd-baixo); }
.nutri-card[data-classe="médio"]       .nutri-chip{ color:var(--bd-medio);       border-color:var(--bd-medio); }
.nutri-card[data-classe="alto"]        .nutri-chip{ color:var(--bd-alto);        border-color:var(--bd-alto); }
.nutri-card[data-classe="muito alto"]  .nutri-chip{ color:var(--bd-muito-alto);  border-color:var(--bd-muito-alto); }
.nutri-card[data-classe="evitar"]      .nutri-chip{ color:var(--bd-evitar);      border-color:var(--bd-evitar); }

/* Valor */
.nutri-main{ display:flex; align-items:baseline; gap:6px; }
.nutri-val{ font-size:1.08rem; font-weight:800; color:var(--c-text); }
.nutri-unit{ font-size:.82rem; color:var(--c-muted); }

/* Tipografia interna */
.nutri-card .card-title{ margin:0; font-size:.98rem; }
.nutri-card .card-body{ padding:0; }

/* Seções (título + contador) */
.interp-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:8px 0 6px;
}
.interp-section-head h6{ margin:0; font-weight:800; letter-spacing:.3px; }
.badge-soft{
  font-size:.72rem; background:#f3f4f6; color:#374151;
  border:1px solid #e5e7eb; border-radius:999px; padding:3px 8px;
}

/* Centro do card (compat) */
.nutri-class-center{
  display:flex; justify-content:center; align-items:center; margin-top:6px;
}

/* Linha única de Classificação (já existe; mantido aqui por clareza) */
.nutri-class-row{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:6px; text-align:center; }
.nutri-class-label{ color:var(--c-muted); font-weight:600; font-size:.86rem; }
.nutri-badge{ padding:4px 10px; border-radius:999px; font-weight:700; font-size:.78rem; background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; }

/* Cores do badge por classe (robusto: case-insensitive + slug) */
.nutri-card[data-classe="muito baixo" i] .nutri-badge,
.nutri-card[data-classe-key="muito-baixo"] .nutri-badge{ background:var(--bd-muito-baixo) !important; color:#fff !important; border-color:var(--bd-muito-baixo) !important; }

.nutri-card[data-classe="baixo" i] .nutri-badge,
.nutri-card[data-classe-key="baixo"] .nutri-badge{ background:var(--bd-baixo) !important; color:#fff !important; border-color:var(--bd-baixo) !important; }

.nutri-card[data-classe="médio" i] .nutri-badge,
.nutri-card[data-classe-key="medio"] .nutri-badge{ background:var(--bd-medio) !important; color:#fff !important; border-color:var(--bd-medio) !important; }

.nutri-card[data-classe="alto" i] .nutri-badge,
.nutri-card[data-classe-key="alto"] .nutri-badge{ background:var(--bd-alto) !important; color:#fff !important; border-color:var(--bd-alto) !important; }

.nutri-card[data-classe="muito alto" i] .nutri-badge,
.nutri-card[data-classe-key="muito-alto"] .nutri-badge{ background:var(--bd-muito-alto) !important; color:#fff !important; border-color:var(--bd-muito-alto) !important; }

.nutri-card[data-classe="evitar" i] .nutri-badge,
.nutri-card[data-classe-key="evitar"] .nutri-badge{ background:var(--bd-evitar) !important; color:#fff !important; border-color:var(--bd-evitar) !important; }


/* Utilitário */
.nutri-hide{ display:none !important; }


/* Grid base do container antes de organizar por seções: 4 colunas */
#tabelaInterpretacao > .row.g-3{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px; /* aproxima do g-3 */
}
#tabelaInterpretacao > .row.g-3 > [class*="col-"]{
  width:auto; max-width:none; padding:0; /* ignora largura das col- do Bootstrap */
}
/* ======= Paleta por grupo ======= */
:root{
  --tone-good:#16a34a;   --bg-good:#EAF7F0;   --chip-good:#DCFCE7;
  --tone-medium:#d97706; --bg-medium:#FFF7E6; --chip-medium:#FEF3C7;
  --tone-bad:#dc2626;    --bg-bad:#FDECEC;    --chip-bad:#FEE2E2;
}

/* Cartão base + faixa superior colorida */
.nutri-card{ position:relative; }
.nutri-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  border-top-left-radius:12px; border-top-right-radius:12px;
  background:#e5e7eb;
}

/* TONS por grupo (green/amber/red) */
.nutri-card[data-tone="good"]{
  background:var(--bg-good) !important; border-color:var(--tone-good) !important;
}
.nutri-card[data-tone="good"]::before{ background:var(--tone-good); }

.nutri-card[data-tone="medium"]{
  background:var(--bg-medium) !important; border-color:var(--tone-medium) !important;
}
.nutri-card[data-tone="medium"]::before{ background:var(--tone-medium); }

.nutri-card[data-tone="bad"]{
  background:var(--bg-bad) !important; border-color:var(--tone-bad) !important;
}
.nutri-card[data-tone="bad"]::before{ background:var(--tone-bad); }

/* Título, linha inline (valor | chip) */
.nutri-title{
  font-weight:700; color:#1f2937; margin-bottom:6px;
}
.nutri-inline{ display:flex; align-items:center; gap:8px; }
.nutri-val{ font-weight:900; font-size:1.15rem; color:#111827; }
.nutri-sep{ color:#9ca3af; font-weight:700; }

/* Chip */
.nutri-chip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-weight:700; font-size:.78rem; line-height:1;
  background:#f3f4f6; color:#374151; border:1.5px solid #e5e7eb;
}
.nutri-card[data-tone="good"]  .nutri-chip{ background:var(--chip-good);  color:var(--tone-good);   border-color:var(--tone-good); }
.nutri-card[data-tone="medium"] .nutri-chip{ background:var(--chip-medium); color:var(--tone-medium); border-color:var(--tone-medium); }
.nutri-card[data-tone="bad"]   .nutri-chip{ background:var(--chip-bad);   color:var(--tone-bad);    border-color:var(--tone-bad); }

/* Legenda: quadrados com as mesmas cores dos cards */
#interp-legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 8px; }
#interp-legend > strong{ margin-right:4px; }
#interp-legend .legend-item{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#374151; }
#interp-legend .legend-swatch{
  width:0.9rem; height:0.9rem; border-radius:0.25rem;
  display:inline-block; border:1px solid currentColor;
}
#interp-legend .lg-good   .legend-swatch{ background:var(--bg-good);   color:var(--tone-good);   border-color:var(--tone-good); }
#interp-legend .lg-medium .legend-swatch{ background:var(--bg-medium); color:var(--tone-medium); border-color:var(--tone-medium); }
#interp-legend .lg-bad    .legend-swatch{ background:var(--bg-bad);    color:var(--tone-bad);    border-color:var(--tone-bad); }


/* ===== HERO (logo grande) ===== */
#logoHero {
  max-width: 100%;   /* respeita a largura da .container (não estoura) */
  height: auto;
}
/* Se quiser limitar um pouco no desktop grande (opcional): */
@media (min-width: 992px) {
  #logoHero { max-width: 90%; }
}

/* ===== Header compacto (não full-bleed; sem "piscar") ===== */
#compactHeader {
  position: sticky;
  top: 0;
  z-index: 1030;                  /* acima do conteúdo */
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
#compactHeader.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}



/* Indicadores (camadas de solo) */
.soil-layer {
  width: 18px; height: 18px;
  background: #d2b48c;
  border: 1px solid #8b5a2b;
  border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
}
.soil-layer.layer2 { background: #c68642; }
.soil-layer.layer3 { background: #8b5a2b; }
.soil-layer.layer4 { background: #5c4033; }

@media (prefers-reduced-motion: reduce) {
  #compactHeader { transition: none; }
}

/* ===== Painel Derivados — layout e paleta tri-color ===== */
:root{
  --ok:#16a34a;     /* verde 600 */
  --warn:#f59e0b;   /* âmbar 500 */
  --bad:#ef4444;    /* vermelho 500 */
  --card:#ffffff;
  --border:#e5e7eb;
  --ink:#0f172a;
  --muted:#6b7280;
}

.derived-wrap{
  border:1px solid #d1d5db;
  border-radius:14px;
  background:var(--card);
  padding:12px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  margin-top:10px;
}
.derived-head h5{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:800;
  color:var(--ink);
}

/* Grid: 12 colunas (3 cards por linha; “big” ocupa 6) */
.derived-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(12,1fr);
}
.metric{
  grid-column:span 4;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  padding:10px 12px;
  position:relative;
  transition:box-shadow .12s ease, transform .12s ease;
}
.metric--big{ grid-column:span 6; }
@media (max-width:1200px){
  .metric{ grid-column:span 6; }
  .metric--big{ grid-column:span 12; }
}
@media (max-width:768px){
  .metric, .metric--big{ grid-column:span 12; }
}
.metric:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06); transform:translateY(-1px); }

/* Filete superior (apenas 3 tons) */
.metric::before{
  content:"";
  position:absolute; left:10px; right:10px; top:6px; height:4px;
  border-radius:999px; background:#e5e7eb;
}
.metric.tone-ok::before   { background:var(--ok); }
.metric.tone-warn::before { background:var(--warn); }
.metric.tone-bad::before  { background:var(--bad); }

/* .metric__head/.metric__title/.metric__value/.metric__sub — definidos abaixo (bloco único) */

/* Badges de qualidade — tri-color */
.qual-badge{
  margin-left:auto;
  font-size:.72rem; font-weight:800;
  padding:.2rem .45rem;
  border-radius:999px;
  border:1px solid transparent;
}
.qual-ok   { background:#ecfdf5; border-color:var(--ok);   color:#14532d; }
.qual-warn { background:#fff7ed; border-color:var(--warn); color:#7c2d12; }
.qual-bad  { background:#fee2e2; border-color:var(--bad);  color:#7f1d1d; }
.qual-muted{ background:#f3f4f6; border-color:#cbd5e1;     color:#374151; }

/* ===== Lâmpada (SVG) ===== */
.hint-btn{
  width:24px; height:24px;
  border:none; background:transparent; padding:0;
  cursor:pointer; color:var(--warn);
}
.hint-btn .hint-ico{
  width:22px; height:22px; display:block;
  stroke:currentColor; fill:none;
}
.hint-btn:hover{ filter:brightness(1.05); }

/* ===== Popover da dica ===== */
.derived-popover{
  position:absolute; z-index:1000; width:min(360px,90vw);
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.16);
  padding:10px 12px; transform-origin:top left;
  transform:scale(.98); opacity:0; pointer-events:none;
  transition:transform .12s ease, opacity .12s ease;
}
.derived-popover.is-open{ transform:scale(1); opacity:1; pointer-events:auto; }
.derived-popover .dp-title{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-weight:800; color:var(--ink);
}
/* “bolinha” amarela no título do popover */
.derived-popover .bulb{
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 50% 40%, #fde68a 0 55%, #fff0 56% 100%),
              radial-gradient(circle at 50% 85%, #f59e0b 0 30%, #fff0 31% 100%);
  box-shadow: inset 0 0 0 2px var(--warn);
}
.derived-popover .dp-body{ font-size:.9rem; color:#374151; line-height:1.35; }

/* ===== Removidos nesta versão =====
   .meter, .meter__fill (barras)
   .metric--green/.orange/.blue/... (paleta antiga por tile)
   .qual-low/.qual-high (substituídas por warn/bad)
*/


/* === PATCH: fundos coloridos por tom (3 cores) === */
/* Se quiser regular a “força” dos fundos, aumente/diminua estas % */
:root{
  --tone-bg-strength: 10%;   /* intensidade do fundo */
  --tone-bd-strength: 40%;   /* intensidade da borda  */
}

/* Fallbacks caso color-mix não esteja disponível no seu navegador */
.metric.tone-ok   { background:#f0fbf4; border-color:#bfe9cf; }
.metric.tone-warn { background:#fff7e8; border-color:#f7d28c; }
.metric.tone-bad  { background:#feeeee; border-color:#f3b7b7; }

/* Se color-mix for suportado, estes seletores abaixo entram e refinam as cores */
@supports (background: color-mix(in oklab, white 90%, black)) {
  .metric.tone-ok{
    background:  color-mix(in oklab, var(--ok)   var(--tone-bg-strength), #fff);
    border-color:color-mix(in oklab, var(--ok)   var(--tone-bd-strength), #e5e7eb);
  }
  .metric.tone-warn{
    background:  color-mix(in oklab, var(--warn) var(--tone-bg-strength), #fff);
    border-color:color-mix(in oklab, var(--warn) var(--tone-bd-strength), #e5e7eb);
  }
  .metric.tone-bad{
    background:  color-mix(in oklab, var(--bad)  var(--tone-bd-strength), #fff);
    border-color:color-mix(in oklab, var(--bad)  var(--tone-bd-strength), #e5e7eb);
  }
}

/* Mantém o filete superior já existente nas mesmas cores */
.metric::before{ background:#e5e7eb; }


/* ================================
   DERIVADOS — 3 TEMAS FIXOS
   (fundo claro + barra escura)
   ================================ */

/* paleta base (ajuste se quiser tons diferentes) */
:root{
  --theme-green: #16a34a;  /* verde  */
  --theme-amber: #d97706;  /* âmbar  */
  --theme-red:   #dc2626;  /* vermelho */
  /* intensidades (quanto mais %, mais forte o fundo/borda) */
  --bg-strength: 12%;
  --bd-strength: 42%;
}

/* helper: aplica um tom ao card */
.metric[class*="theme-"]{
  /* fallback quando color-mix não existe */
  background:#f9fafb; border-color:#e5e7eb;
}
@supports (background: color-mix(in oklab, white 90%, black)) {
  .metric.theme-green{
    --tone: var(--theme-green);
    background:   color-mix(in oklab, var(--tone) var(--bg-strength), #fff);
    border-color: color-mix(in oklab, var(--tone) var(--bd-strength), #e5e7eb);
  }
  .metric.theme-amber{
    --tone: var(--theme-amber);
    background:   color-mix(in oklab, var(--tone) var(--bg-strength), #fff);
    border-color: color-mix(in oklab, var(--tone) var(--bd-strength), #e5e7eb);
  }
  .metric.theme-red{
    --tone: var(--theme-red);
    background:   color-mix(in oklab, var(--tone) var(--bg-strength), #fff);
    border-color: color-mix(in oklab, var(--tone) var(--bd-strength), #e5e7eb);
  }
}

/* filete superior do card acompanha o tema */
.metric[class*="theme-"]::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:12px 12px 0 0;
  background: var(--tone, #e5e7eb);
}

/* barra: trilho claro do tema + preenchimento sólido do mesmo tom */
.metric[class*="theme-"] .meter{
  height:8px; border-radius:999px; margin-top:8px;
  background: color-mix(in oklab, var(--tone, #9ca3af) 14%, #fff);
  opacity:1;     /* sem transparência pastel */
}
.metric[class*="theme-"] .meter__fill{
  background: var(--tone, #9ca3af);
  opacity:1;
}

/* metric__title e metric__sub — definidos abaixo (bloco único) */

/* deixa os selos de qualidade neutros (sem “semáforo”) */
.qual-badge{
  background:#fff; border-color:#cbd5e1; color:#334155;
}


#interp-col-right .sidebox{
  position: sticky; top: 10px;
  border: 1px solid #e5e7eb; border-radius: 12px;
  background: #f8fafc; padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
@media (max-width: 991.98px){
  #interp-col-right .sidebox{ position: static; }
}

/* Evita que regras do modo-ultra deformem o layout 2/3 */
#tabelaInterpretacao #interp-2col .nutri-card{
  writing-mode: initial;
  width: auto;
}
/* Reset para o layout 2/3 + 1/3: neutraliza estilos do modo antigo */
#tabelaInterpretacao #interp-2col .nutri-card,
#tabelaInterpretacao #interp-2col .nutri-card .card-body{
  writing-mode: initial !important;
  width: auto !important;
  height: auto !important;
}

#tabelaInterpretacao #interp-2col .nutri-title{
  writing-mode: initial !important;
  transform: none !important;
  white-space: normal !important;
  letter-spacing: normal !important;
}

/* Caixa lateral básica */
#interp-col-right .sidebox{
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px;
  padding:12px 14px;
}
#interp-col-right .sidebox-title{ font-weight:800; color:#0f172a; }

/* ===== Layout externo da interpretação (casca 2/3–1/3) ===== */
#tabelaInterpretacao .interp-layout{
  display: grid;
  grid-template-columns: 2fr 1fr;   /* 2/3 e 1/3 */
  gap: 16px;
}

/* Responsivo: abaixo de xl vira 1 coluna */
@media (max-width: 1199.98px){
  #tabelaInterpretacao .interp-layout{
    grid-template-columns: 1fr;
  }
}

/* Área esquerda (só agrupa; conteúdo interno continua com Bootstrap como já estava) */
#tabelaInterpretacao .interp-left{
  min-width: 0; /* evita overflow horizontal */
}

/* Painel da direita (cartão fixo e leve) */
#tabelaInterpretacao .interp-right{
  position: relative;
  min-width: 0;
}

#tabelaInterpretacao .interp-panel{
  border: 0px solid #e5e7eb;
    background: #ffffff;
  min-height: auto;            /* se quiser que role igual aos cards, pode trocar para 'auto' */
    position: static;            /* <-- era sticky */
  top: auto;                   /* <-- reseta */
  display: flex;
  flex-direction: column;
}


#tabelaInterpretacao .interp-panel__body{
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tabelaInterpretacao .side-status{
  color: #6b7280;
  font-weight: 700;
  letter-spacing: .2px;
}

/* ===== GradientFertilityBar – estilos mínimos ===== */
.gfb-tooltip{
  position: absolute;
  background: #111827;
  color: #fff;
  font-size: 8px;
  line-height: 1.2;
  border-radius: 6px;
  padding: 4px 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 10000;
}

.gfb-stack{ display:flex; flex-direction:column; gap:8px; }
.gfb-row{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:auto 1fr; /* label | barra */
  padding:2px 2px; border:1px solid #e5e7eb; border-radius:10px; background:#f8fafc;
}
.gfb-row-label{ font-weight:800; color:#0f172a; min-width:28px; }
.gfb-row-bar{ width:100%; }

/* (opcional) se existir no CSS antigo, neutraliza a terceira coluna */
.gfb-row-val{ display:none; }

/* Overlay em tela cheia */
.map-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1055; /* acima do bootstrap modal padrão */
  display: grid;
  place-items: center;
  padding: 1rem;
}

/* Janela do mapa */
.map-dialog {
  background: #fff;
  width: min(1100px, 96vw);
  height: min(80vh, 900px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.map-header, .map-footer {
  padding: .75rem 1rem;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-bottom: 1px solid #e5e7eb;
}

.map-footer {
  border-top: 1px solid #e5e7eb;
  border-bottom: none;
}

#mapContainer {
  width: 100%;
  height: 100%;
}

/* Ajuste simples do input interno */
#mapBusca {
  min-width: 280px;
}


/* ======= Paleta & base ======= */
:root{
  --bg: #f8fafc;            /* fundo geral */
  --card: #ffffff;          /* caixas/painéis */
  --text: #0f172a;          /* texto principal */
  --text-dim: #475569;      /* texto secundário */
  --muted: #e2e8f0;         /* bordas leves */
  --muted-2:#cbd5e1;        /* bordas mais fortes */
  --primary: #2563eb;       /* azul principal */
  --primary-2:#1d4ed8;
  --accent: #10b981;        /* verde de sucesso */
  --warn: #f59e0b;          /* aviso */
  --danger:#ef4444;         /* erro */
  --shadow: 0 6px 24px rgba(15,23,42,0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --gap: 14px;
  --gap-sm: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

html,body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.45;
}

/* ======= Topbar compacta ======= */
.sr-topbar-mini{
  background: #0b1220;
  color: #cbd5e1;
  font-size: 13px;
  border-bottom: 1px solid #0f1b32;
}
.sr-topbar-mini .wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sr-topbar-mini a{ color:#e2e8f0; text-decoration: none; }
.sr-topbar-mini a:hover{ color:#fff; text-decoration: underline; }
.sr-pipe{ opacity:.35; margin: 0 .4rem; }

/* ======= Cabeçalho da página ======= */
header{
  max-width: 1180px;
  margin: 24px auto 12px auto;
  padding: 0 16px;
}
header h1{
  margin: 0 0 8px 0;
  font-size: 28px;
  letter-spacing: .2px;
}
.meta{ color: var(--text-dim); }

/* ======= Cartões (filtros, barras e tabela) ======= */
section{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}
.filters, .toolbar, .table-wrap{
  background: var(--card);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ======= Formulário de filtros ======= */
.filters{
  padding: 16px;
  margin-bottom: 16px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.filters > div{ display:flex; flex-direction: column; gap:6px; }
.filters .full{ grid-column: 1 / -1; }

.filters label{
  font-size: 12px;
  color: var(--text-dim);
}
.filters input[type="text"],
.filters input[type="date"],
.filters select{
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  background:#fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.filters input:focus,
.filters select:focus{
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* layout responsivo dos filtros (móbile → desktop) */
.filters > div:nth-child(1){ grid-column: span 6; }   /* Busca */
filters > div:nth-child(2){ grid-column: span 2; }   /* UF */
.filters > div:nth-child(3){ grid-column: span 4; }   /* Cidade */
.filters > div:nth-child(4){ grid-column: span 3; }   /* Profundidade */
.filters > div:nth-child(5){ grid-column: span 3; }   /* De */
.filters > div:nth-child(6){ grid-column: span 3; }   /* Até */

.filters > div:nth-child(7),
.filters > div:nth-child(8),
.filters > div:nth-child(9),
.filters > div:nth-child(10),
.filters > div:nth-child(11),
.filters > div:nth-child(12),
.filters > div:nth-child(13),
.filters > div:nth-child(14){ grid-column: span 3; }  /* faixas numéricas */

.filters > div:nth-child(15){ grid-column: span 3; }  /* Sort */
.filters > div:nth-child(16){ grid-column: span 2; }  /* Order */
.filters > div:nth-child(17){ grid-column: span 2; }

.filters button{
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .15s, transform .02s;
}
.filters button:hover{ background: var(--primary-2); }
.filters button:active{ transform: translateY(1px); }

.filters a{
  display:inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--muted-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  background:#fff;
}
.filters a:hover{ border-color: var(--primary); color: var(--primary); }

/* ======= Toolbar ======= */
.toolbar{
  padding: 10px 14px;
  margin: 0 0 12px 0;
  display:flex; justify-content: space-between; align-items:center;
  gap: 10px;
}
.pill{
  background: #eef2ff;
  color: #3730a3;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid #e0e7ff;
}

/* ======= Tabela ======= */
.table-wrap{ /* se quiser envolver a tabela numa div */
  overflow: hidden;
}

.table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border-radius: var(--radius);
  overflow: hidden;
}
.table thead th{
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table thead th a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.table thead th a:hover{
  border-color: var(--primary);
  color: var(--primary);
}
.table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--muted);
  vertical-align: middle;
  font-size: 14px;
}
.table tbody tr:nth-child(odd){ background:#fcfdff; }
.table tbody tr:hover{ background:#f8fbff; }

.table .meta{ color: var(--text-dim); font-size: 12px; }

/* Ações (links Editar/Ver) */
.table td a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.table td a:hover{ color: var(--primary-2); text-decoration: underline; }

/* ======= Badges de papel ======= */
.role-badge{
  display:inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid var(--muted-2);
  background:#f8fafc;
}
.role-admin{ background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.role-editor{ background:#eef6ff; border-color:#bfdbfe; color:#1e40af; }

/* ======= Paginação ======= */
.pagination{
  display:flex; align-items:center; gap:8px;
}
.pagination a{
  display:inline-block;
  padding: 6px 10px;
  border:1px solid var(--muted-2);
  border-radius: 10px;
  text-decoration:none;
  color: var(--text);
  background:#fff;
}
.pagination a:hover{
  border-color: var(--primary);
  color: var(--primary);
}

/* ======= Responsividade ======= */
@media (max-width: 1024px){
  .filters{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px){
  header h1{ font-size: 22px; }
  .filters{ grid-template-columns: repeat(2, 1fr); }
  .filters > div{ grid-column: span 2 !important; }
  .table thead{ display:none; }
  .table tbody tr{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; }
  .table tbody td{ border:0; padding: 2px 4px; }
  .table tbody td:nth-child(1){ grid-column: 1 / -1; font-weight:700; }
}



/* === Rampa 6 cores (apenas na barra interna) =======================
   vermelho → laranja → amarelo → verde-claro → verde → verde-escuro
   ================================================================== */
:root{
  --ramp-6: linear-gradient(
    90deg,
    #D52B1E 0%,
    #FF6A00 20%,
    #FFD428 35%,
    #B6E66F 55%,
    #43B049 75%,
    #117A31 100%
  );
}
.sr-bar-track{ background:#e9ecef; border-radius:8px; overflow:hidden; }
.sr-bar-fill{ height:10px; border-radius:8px; background:var(--ramp-6); }
.sr-bar-fill.sr-evitar{ background:#D52B1E; }

/* GFB (componente grande): NÃO pinte o container.
   Deixe o degradê para o track interno da lib. */
.gfb-row-bar{
  position:relative;
  background:transparent;        /* <--- remove o degradê do host */
  border-radius:8px;
}

/* Pin vermelho para "Evitar" (é adicionado via JS quando a classe é Evitar) */
.gfb-evitar-pin{
  position:absolute;
  top:-6px;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:10px solid #D52B1E;
  z-index:4;
}

/* Cartões de Indicadores derivados, aparência neutra (creme) */
.metric.metric--neutral {
  background: #fafafa;              /* creme */
  border: 1px solid #f3e0c2;        /* borda suave */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.metric.metric--neutral .metric__value strong { color: #333; }
.metric.metric--neutral .metric__sub { color: #6b6b6b; }

/* garante que o holder possa ter overlay absoluto */
#leafletHolder { position: relative; }

/* overlay de carregamento do mapa */
.map-loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
  z-index: 1000;               /* acima de labels/hud */
}


.refs-abnt { margin: 0; padding-left: 1.2rem; }
.refs-abnt .ref-item { margin-bottom: .4rem; }
.interp-panel__head h5 { margin: 0; }


/* ===== Indicadores derivados — tema de alto contraste ===== */
:root{
  color-scheme: light;
  --card-bg: #ffffff;
  --card-fg: #0b1220;
  --card-border: #d9dde6;
  --card-shadow: 0 1px 1px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);

  /* Paleta por estado (bg / border / text) */
  --ok-bg:   #E6F4EA;  --ok-bd:   #9AD1A4; --ok-fg:   #146C43; /* verde teal */
  --warn-bg: #FFF4D6;  --warn-bd: #F6D98B; --warn-fg: #7A5700; /* âmbar */
  --bad-bg:  #FBE6EB;  --bad-bd:  #E7A8B6; --bad-fg:  #8B1D3A; /* rubi */
  --muted-bg:#EFF2F6;  --muted-bd:#D7DCE4; --muted-fg:#475467; /* cinza */

  --accent: #0B63E5; /* botões/ícones */
}


/* Container */
.derived-wrap .derived-head h5{
  color: var(--card-fg);
  font-weight: 700;
}

/* Card base */
.metric{
  background: var(--card-bg);
  color: var(--card-fg);
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 14px 16px;
  position: relative;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.metric--big .metric__value strong{ font-size: 1.25rem; }
.metric:hover{ transform: translateY(-1px); }
.metric:focus-within{ outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); }

/* Cabeçalho + ícone */
.metric__head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem;
}
.metric__title{ font-weight: 700; letter-spacing:.2px; }
.hint-btn{ border:0; background:transparent; padding:2px; line-height:0; border-radius:10px; }
.hint-btn .hint-ico{ stroke: var(--accent); opacity:.9; }
.hint-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Valor e unidade */
.metric__value{ display:flex; align-items:baseline; gap:.35rem; }
.metric__value strong{ font-variant-numeric: tabular-nums; }
.metric__unit{ opacity:.8; }

/* Subtexto (faixa/target) */
.metric__sub{
  margin-top:.35rem;
  font-size:.85rem;
  color: color-mix(in srgb, var(--card-fg) 70%, transparent);
}

/* Barra de 3px na esquerda para reforçar o estado */
.metric::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; border-radius:16px 0 0 16px;
  background: var(--card-border);
}

/* Estados */
.metric--ok{ background: var(--ok-bg); border-color: var(--ok-bd); }
.metric--ok .metric__title, .metric--ok .metric__value strong{ color: var(--ok-fg); }
.metric--ok::before{ background: var(--ok-bd); }

.metric--warn{ background: var(--warn-bg); border-color: var(--warn-bd); }
.metric--warn .metric__title, .metric--warn .metric__value strong{ color: var(--warn-fg); }
.metric--warn::before{ background: var(--warn-bd); }

.metric--bad{ background: var(--bad-bg); border-color: var(--bad-bd); }
.metric--bad .metric__title, .metric--bad .metric__value strong{ color: var(--bad-fg); }
.metric--bad::before{ background: var(--bad-bd); }

.metric--muted{ background: var(--muted-bg); border-color: var(--muted-bd); }
.metric--muted .metric__title, .metric--muted .metric__value strong{ color: var(--muted-fg); }
.metric--muted::before{ background: var(--muted-bd); }

/* Grid respira melhor em telas pequenas */
/* Opcional: cartões "grandes" ocupam a linha inteira nas 2 colunas */
.metric--big{ grid-column: span 4; }
@media (max-width: 680px){
  .metric--big{ grid-column: auto; } /* volta ao normal no mobile */
}

/* === SoloRadar – Adubação Orgânica (aba7) – alinhamento/altura === */
#aba7 .row.align-items-end > [class*="col-"]{
  display: flex; flex-direction: column;
}
#aba7 .form-label{ margin-bottom: .25rem; font-weight: 500; }
#aba7 .form-text{ margin-top: .25rem; line-height: 1.2; }

#aba7 .form-select,
#aba7 .form-control{
  height: calc(2.5rem + 2px); /* 40px-ish – padroniza altura */
  padding-top: .375rem; padding-bottom: .375rem;
}

#aba7 #btnCalcOrg{ height: calc(2.5rem + 2px); } /* iguala ao input */

#aba7 #areaAvancOrg .card.card-body{
  padding: .75rem 1rem;
}

/* Espaçamento mais justo entre colunas em telas largas */
@media (min-width: 992px){
  #aba7 .row.gx-2{ --bs-gutter-x: .75rem; }
}

/* Switch “Mostrar avançado” na mesma linha, com alinhamento vertical ok */
#aba7 .form-check.form-switch{
  padding-left: 2.75rem; /* melhora alinhamento do switch */
}
#aba7 .form-check.form-switch .form-check-input{
  width: 2.5rem; height: 1.25rem;
}

/* Caixa de resultado com tipografia mais firme */
#aba7 #resOrg .display-6{ font-size: 1.75rem; }