/* ════════════════════════════════════════════════════════
   GABARITO CAR — Design System (verde + branco, clean)
   Paleta e tipografia herdadas do fluxograma de ideação.
   ════════════════════════════════════════════════════════ */
:root {
  --verde-escuro: #14532d;
  --verde:        #2e7d32;
  --verde-medio:  #43a047;
  --verde-suave:  #f1f8f2;
  --verde-claro:  #e8f5e9;
  --borda:        #cfe3d4;
  --cinza:        #54635a;
  --bg:           #f4f7f4;
  --alerta:       #c62828;
  --atencao:      #f9a825;
  --laranja:      #e65100;
  --azul:         #1e88e5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--verde-escuro);
  min-height: 100vh;
  line-height: 1.5;
}

a { text-decoration: none; }

/* ════════════════ LOGIN ════════════════ */
.login-page {
  min-height: 100vh;
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(241,248,242,.82)),
    url('https://traive.com.br/wp-content/uploads/2025/10/cadastro-ambiental-rural-campo-ao-poe-do-sol.webp')
    center / cover no-repeat fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: #fff;
  border: 1px solid var(--borda);
  border-top: 6px solid var(--verde-medio);
  border-radius: 16px;
  padding: 40px 36px 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 36px rgba(20,83,45,.13);
}
.login-card .logo { text-align: center; font-size: 38px; margin-bottom: 6px; }
.login-card h1 { text-align: center; font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.login-card h1 b { color: var(--verde); }
.login-card .sub { text-align: center; font-size: 13.5px; color: var(--cinza); margin-bottom: 28px; line-height: 1.4; }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.login-card input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--borda); border-radius: 10px;
  font-size: 14px; color: var(--verde-escuro);
  background: var(--verde-suave); margin-bottom: 16px;
  outline: none; transition: border-color .15s;
}
.login-card input:focus { border-color: var(--verde-medio); background: #fff; }
.btn-primary {
  width: 100%; padding: 11px;
  background: var(--verde); color: #fff; border: none;
  border-radius: 10px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .15s; margin-top: 4px;
}
.btn-primary:hover { background: var(--verde-escuro); }
.login-card .erro {
  background: #fdecea; border: 1px solid #f5c6cb; color: var(--alerta);
  border-radius: 8px; padding: 9px 12px; font-size: 13px;
  margin-bottom: 14px; text-align: center;
}
.login-card .rodape { text-align: center; font-size: 12px; color: #9aa89e; margin-top: 20px; }

/* ════════════════ NAVBAR (compartilhada) ════════════════ */
.nav {
  height: 52px;
  background: linear-gradient(135deg, #14532d 0%, #1f6b3b 100%);
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  position: sticky; top: 0; z-index: 1000;
}
.nav-brand { font-size: 17px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.nav-brand i { color: #a5d6a7; }
.nav-brand b { color: #a5d6a7; }

/* ── MARCA (logo + wordmark) ── */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap; }
.logo-mark { width: 36px; height: 36px; flex-shrink: 0; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,.28)); }
.brand-text { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: .2px; line-height: 1; }
.brand-text .brand-car {
  color: #a5d6a7; margin-left: 5px; padding-left: 7px;
  border-left: 2px solid rgba(255,255,255,.28);
}
.brand-suffix { font-weight: 500; color: rgba(255,255,255,.6); font-size: 14px; margin-left: 8px; }

/* lockup grande no hero */
.hero-lockup { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.logo-mark-lg {
  width: 118px; height: 118px; flex-shrink: 0;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
  background: #fff;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 22px; padding: 12px;
}
.hero-lockup h1 { margin: 0; }
.hero-lockup .hero-kicker {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #a5d6a7; margin-bottom: 6px;
}
.hero-lockup .hero-sub {
  display: block; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.2;
}
.nav-links { display: flex; gap: 4px; margin-left: 10px; }
.nav-link {
  color: rgba(255,255,255,.78); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; display: flex; align-items: center; gap: 7px;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-link.active { background: rgba(255,255,255,.16); color: #fff; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-user { color: rgba(255,255,255,.72); font-size: 13px; display: flex; align-items: center; gap: 6px; }

/* botões genéricos */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--verde-medio); color: #fff; border: none;
  padding: 8px 16px; border-radius: 9px; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background .15s, opacity .15s; text-decoration: none;
}
.btn:hover { background: var(--verde); }
.btn:disabled { opacity: .65; cursor: default; }
.btn.ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.btn.ghost:hover { background: rgba(255,255,255,.24); }
.btn.lg { padding: 13px 28px; font-size: 15px; border-radius: 11px; }

/* select na navbar */
.nav-select {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
  padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer; outline: none;
}
.nav-select option { background: #1f6b3b; color: #fff; }

/* ════════════════ ABERTURA / NARRATIVA ════════════════ */
.intro-scroll { height: calc(100vh - 52px); overflow-y: auto; }
.intro-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px 60px; }

.intro-hero {
  background: linear-gradient(135deg, #14532d 0%, #2e7d32 100%);
  color: #fff; border-radius: 0 0 22px 22px;
  padding: 40px 40px 46px; margin-bottom: 36px;
  position: relative; overflow: hidden;
}
.intro-hero::after {
  content: "\f5ee"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: -10px; bottom: -30px; font-size: 200px;
  color: rgba(255,255,255,.06);
}
.intro-hero h1 { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.intro-hero h1 b { color: #a5d6a7; }
.intro-hero p { font-size: 15.5px; color: #d7ecdb; max-width: 680px; line-height: 1.55; }
.intro-hero .hero-meta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-chip {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px; padding: 5px 14px; font-size: 12.5px;
  display: flex; align-items: center; gap: 7px;
}
.hero-chip i { color: #a5d6a7; }

/* títulos de seção */
.sec-head { display: flex; align-items: center; gap: 12px; margin: 38px 0 6px; }
.sec-num {
  background: var(--verde); color: #fff; border-radius: 9px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.sec-head h2 { font-size: 22px; font-weight: 800; color: var(--verde-escuro); }
.sec-sub { color: var(--cinza); font-size: 14px; margin: 4px 0 22px 46px; }

/* cards 3 (problema / persona / solução) */
.cards3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.card {
  background: #fff; border: 1px solid var(--borda);
  border-top: 5px solid var(--verde-medio); border-radius: 14px;
  padding: 22px; box-shadow: 0 3px 12px rgba(20,83,45,.06);
}
.card .card-ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--verde-claro); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 14px;
}
.card h3 { font-size: 16.5px; color: var(--verde-escuro); margin-bottom: 10px; }
.card p { font-size: 13.5px; color: var(--cinza); margin-bottom: 9px; }
.card ul { margin: 6px 0 0 4px; list-style: none; }
.card li { font-size: 13px; color: var(--cinza); margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; }
.card li i { color: var(--verde-medio); margin-top: 3px; flex-shrink: 0; }
.card .big { font-size: 30px; font-weight: 800; color: var(--verde); display: block; margin: 4px 0; }

/* frase-resumo do hero (proposta de valor em 1 linha) */
.hero-madlib { font-size: 17px !important; color: #eaf5ec !important; max-width: 720px; line-height: 1.6; }
.hero-madlib b { color: #fff; }

/* passos numerados (seção 2) */
.card.step { position: relative; border-top-color: var(--verde); }
.step-n {
  position: absolute; top: -14px; right: 16px; width: 30px; height: 30px;
  background: var(--verde); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.card.persona { border-top-color: var(--verde-escuro); }
.persona-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.persona-head b { display: block; font-size: 16px; color: var(--verde-escuro); }
.persona-head span { font-size: 12.5px; color: var(--cinza); }
.tagline {
  background: var(--verde-suave); border-left: 4px solid var(--verde-medio);
  border-radius: 8px; padding: 10px 12px; font-size: 13px;
  color: var(--verde-escuro); font-style: italic; margin-top: 12px;
}

/* fluxo: 3 estágios */
.flow { background: #fff; border: 1px solid var(--borda); border-radius: 16px; padding: 26px; box-shadow: 0 3px 12px rgba(20,83,45,.06); }
.stage-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--verde-escuro); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .8px;
  padding: 6px 15px; border-radius: 20px; margin: 8px 0 16px; text-transform: uppercase;
}
.stage-label:not(:first-child) { margin-top: 6px; }
.flow-row { display: grid; gap: 14px; }
.flow-row.c4 { grid-template-columns: repeat(4, 1fr); }
.flow-row.c5 { grid-template-columns: repeat(5, 1fr); }
.flow-step {
  background: var(--verde-suave); border: 1px solid var(--borda);
  border-radius: 12px; padding: 16px 14px; position: relative;
}
.flow-step .fbadge {
  position: absolute; top: -13px; left: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; box-shadow: 0 2px 6px rgba(20,83,45,.25);
}
.flow-step .fico { font-size: 20px; color: var(--verde-medio); margin: 6px 0 8px; }
.flow-step h4 { font-size: 14px; color: var(--verde-escuro); margin-bottom: 6px; }
.flow-step p { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.flow-step.in { background: #fff; border-style: dashed; border-color: var(--verde-medio); }
.flow-step.out { background: var(--verde); border-color: var(--verde-escuro); }
.flow-step.out .fbadge { background: #fff; color: var(--verde); }
.flow-step.out .fico, .flow-step.out h4, .flow-step.out p { color: #fff; }
.flow-step.out p { color: #d7ecdb; }
.flow-step.out.bonus { background: #fff; border: 1px dashed var(--verde-medio); }
.flow-step.out.bonus .fico, .flow-step.out.bonus h4 { color: var(--verde-escuro); }
.flow-step.out.bonus p { color: var(--cinza); }
.flow-step.out.bonus .fbadge { background: var(--verde-medio); color: #fff; }
.vsep { text-align: center; color: var(--verde-medio); font-size: 22px; margin: 18px 0 8px; }

.opensource {
  display: flex; align-items: center; gap: 14px; margin-top: 22px;
  background: #eafaef; border: 1px solid var(--verde-medio);
  border-radius: 12px; padding: 15px 18px; font-size: 13.5px; color: var(--verde-escuro);
}
.opensource i { font-size: 24px; color: var(--verde); flex-shrink: 0; }
.opensource b { color: var(--verde-escuro); }

/* CTA */
.cta-wrap { text-align: center; margin-top: 40px; }
.cta-wrap p { color: var(--cinza); font-size: 14px; margin-bottom: 16px; }
.cta-pulse {
  font-size: 17px; padding: 16px 36px;
  box-shadow: 0 0 0 0 rgba(46,125,50,.5);
  animation: cta-pulse 2s infinite;
}
.cta-pulse:hover { animation: none; }
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,125,50,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(46,125,50,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
}

/* ════════════════ PAINEL OPERACIONAL ════════════════ */
.painel-grid {
  display: grid;
  grid-template-columns: 20% 52% 28%;
  height: calc(100vh - 52px);
  overflow: hidden;
}
.col { display: flex; flex-direction: column; overflow: hidden; }
.col-sel    { background: var(--verde-suave); border-right: 1px solid var(--borda); overflow-y: auto; padding: 18px 16px; }
.col-mapa   { background: #e9f0eb; position: relative; }
.col-rank   { background: #fff; border-left: 1px solid var(--borda); }

/* títulos */
.col-title {
  font-size: 11px; font-weight: 700; color: var(--verde);
  text-transform: uppercase; letter-spacing: .7px;
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
}
.col-title i { font-size: 12px; }

/* campos de seleção */
.field {
  background: #fff; border: 1px solid var(--borda); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; margin-bottom: 9px;
  color: var(--cinza); display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.field .field-label { display: flex; align-items: center; gap: 8px; }
.field .field-label i { color: var(--verde-medio); width: 15px; text-align: center; }
.field b { color: var(--verde-escuro); }
.field select {
  border: none; background: none; font-weight: 700; color: var(--verde-escuro);
  font-size: 13px; cursor: pointer; outline: none;
  max-width: 100%; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* campo empilhado (label em cima, select 100% embaixo) — evita corte de nomes longos */
.field.field-stack { flex-direction: column; align-items: stretch; gap: 7px; }
.field.field-stack select {
  width: 100%;
  background: var(--verde-suave);
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 6px 9px;
}

/* ── REPOSITÓRIO DE IMAGENS (Sentinel) ── */
.sat-repo { margin-top: 22px; }
.sat-hint { font-size: 10.5px; color: var(--cinza); margin: -4px 0 8px; line-height: 1.4; }
.sent-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-bottom: 6px;
  background: #fff; border: 1px solid var(--borda); border-radius: 9px;
  font-size: 12px; color: var(--verde-escuro); cursor: pointer; transition: all .12s;
}
.sent-item:hover { background: var(--verde-claro); border-color: var(--verde-medio); }
.sent-item.active { background: #e2f0e3; border-color: var(--verde); border-left: 3px solid var(--verde); }
.sent-item > i:first-child { color: var(--verde-medio); }
.sent-item span { flex: 1; }
.sent-item .sent-eye { color: var(--cinza); font-size: 11px; opacity: .6; }
.sent-item.active .sent-eye { color: var(--verde); opacity: 1; }

/* stepper análise ao vivo */
.steps-wrap { margin-top: 20px; }
.stp {
  font-size: 12.5px; padding: 10px 12px; border-radius: 9px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--borda); color: var(--cinza);
  display: flex; align-items: center; gap: 10px; transition: all .25s;
}
.stp .stp-ico {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--verde-claro); color: var(--verde);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.stp .stp-txt { flex: 1; line-height: 1.3; }
.stp.done { background: var(--verde); color: #fff; border-color: var(--verde); }
.stp.done .stp-ico { background: rgba(255,255,255,.25); color: #fff; }
.stp.now  { background: var(--verde-medio); color: #fff; border-color: var(--verde-medio); }
.stp.now  .stp-ico { background: rgba(255,255,255,.3); color: #fff; }

.btn-rodar { width: 100%; justify-content: center; margin-top: 6px; }

/* mapa */
#map { width: 100%; height: 100%; }
.map-ctrl {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600;
  display: flex; background: rgba(255,255,255,.96); border: 1px solid var(--borda);
  border-radius: 9px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.mc { border: none; background: none; padding: 7px 15px; font-size: 12px; font-weight: 700; color: var(--cinza); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.mc.on { background: var(--verde); color: #fff; }
.mc:hover:not(.on) { background: var(--verde-claro); }

.maplabel {
  position: absolute; bottom: 14px; left: 14px; z-index: 600;
  background: rgba(255,255,255,.94); border: 1px solid var(--borda);
  border-radius: 9px; padding: 9px 12px; font-size: 11.5px; color: var(--verde-escuro);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.maplabel .ml-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.maplabel .ml-row:last-child { margin-bottom: 0; }
.ml-dot { width: 14px; height: 5px; border-radius: 3px; flex-shrink: 0; }

.map-hint {
  position: absolute; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--cinza); pointer-events: none; text-align: center; padding: 24px;
}
/* painel de camadas (overlay no mapa) */
.layers-panel {
  position: absolute; top: 12px; right: 12px; z-index: 650;
  width: 232px; background: rgba(255,255,255,.97);
  border: 1px solid var(--borda); border-radius: 11px;
  box-shadow: 0 4px 18px rgba(0,0,0,.16); overflow: hidden;
}
.lp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--verde-suave);
  border-bottom: 1px solid var(--borda);
  font-size: 12px; font-weight: 700; color: var(--verde-escuro);
  cursor: pointer; user-select: none;
}
.lp-head i.fa-chevron-up, .lp-head i.fa-chevron-down { font-size: 11px; color: var(--cinza); }
.lp-body { max-height: calc(100vh - 200px); overflow-y: auto; padding: 6px 10px 10px; }
.lp-sec {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--cinza); margin: 12px 0 5px; display: flex; align-items: center; gap: 6px;
}
.lp-sec:first-child { margin-top: 4px; }
.lp-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--verde-escuro);
  padding: 4px 2px; cursor: pointer;
}
.lp-row input[type=checkbox] { accent-color: var(--verde); cursor: pointer; flex-shrink: 0; }
.lp-row.disabled { color: #9ab09c; cursor: default; }
.lp-dot { width: 13px; height: 6px; border-radius: 3px; flex-shrink: 0; }
.lp-sw  { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.lp-ico { color: var(--verde-medio); width: 14px; text-align: center; }
.lp-count { margin-left: auto; font-size: 10px; color: var(--cinza); font-weight: 600; }
.lp-tag {
  margin-left: auto; font-size: 8.5px; font-weight: 700; text-transform: uppercase;
  background: var(--verde-claro); color: var(--verde); padding: 1px 6px; border-radius: 8px;
}
.lp-soon {
  font-size: 8px; font-weight: 700; text-transform: uppercase;
  background: #fff3e0; color: var(--laranja); padding: 1px 6px; border-radius: 8px; letter-spacing: .3px;
}
.lp-empty { font-size: 11px; color: #9ab09c; padding: 4px 2px; line-height: 1.4; }

/* legenda MapBiomas */
.mapb-legenda { margin: 4px 0 2px; }
.mapb-load { font-size: 10.5px; color: var(--cinza); padding: 4px 2px; }
.mapb-item { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--verde-escuro); padding: 2px 2px; }
.mapb-sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
.mapb-nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapb-pct { color: var(--cinza); font-weight: 700; }

/* slider de opacidade */
.lp-range { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 11.5px; color: var(--verde-escuro); }
.lp-range > span:first-child { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lp-range > span:first-child i { color: var(--verde-medio); }
.lp-range input[type=range] { flex: 1; min-width: 0; accent-color: var(--verde); cursor: pointer; }
.lp-range-val { min-width: 34px; text-align: right; font-weight: 700; color: var(--cinza); }

/* ── FERRAMENTA DE MEDIÇÃO PRÓPRIA ── */
.medir-ctrl a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--verde-escuro); font-size: 14px;
}
.medir-ctrl a.ativo { background: var(--verde); color: #fff; }
.medir-ctrl a:hover { background: var(--verde-claro); }
.medir-ctrl a.ativo:hover { background: var(--verde-escuro); }
.medindo, .medindo .leaflet-interactive { cursor: crosshair !important; }

.medir-caixa {
  position: absolute; bottom: 16px; left: 16px; z-index: 800;
  width: 210px; background: rgba(255,255,255,.98);
  border: 1px solid var(--borda); border-radius: 11px;
  box-shadow: 0 4px 18px rgba(0,0,0,.2); padding: 12px 14px;
  font-size: 12px; color: var(--verde-escuro);
}
.mc-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--verde); display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.mc-linha { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.mc-linha span { color: var(--cinza); }
.mc-linha b { color: var(--verde-escuro); }
.mc-dica { font-size: 10.5px; color: var(--cinza); margin: 7px 0 9px; line-height: 1.4; }
.mc-acoes { display: flex; gap: 7px; }
.mc-btn { flex: 1; border: none; border-radius: 7px; padding: 7px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.mc-btn.ok { background: var(--verde); color: #fff; }
.mc-btn.ok:hover { background: var(--verde-escuro); }
.mc-btn.ghost { background: var(--verde-suave); color: var(--cinza); border: 1px solid var(--borda); }
.mc-btn.ghost:hover { background: #fdecea; color: var(--alerta); border-color: #f5c6cb; }

/* notificação de processo (toast) */
.map-toast {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 700; display: flex; align-items: center; gap: 9px;
  background: rgba(20,83,45,.95); color: #fff;
  padding: 10px 18px; border-radius: 24px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  max-width: 80%; animation: toast-in .25s ease;
}
.map-toast i { color: #a5d6a7; font-size: 14px; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* flags de feedback sobre CARs em conflito */
.car-flag { pointer-events: none; }
.car-flag .flag {
  display: inline-flex; align-items: center; gap: 4px;
  transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 10px; font-weight: 800; color: #fff;
  padding: 3px 9px; border-radius: 12px;
  border: 1.5px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,.35);
}
.car-flag .flag.alto  { background: var(--alerta); }
.car-flag .flag.medio { background: var(--laranja); }

.map-hint i { font-size: 46px; color: var(--verde-medio); opacity: .55; }
.map-hint .mh-title { font-size: 15px; font-weight: 700; color: var(--verde-escuro); }
.map-hint .mh-sub { font-size: 12.5px; max-width: 260px; line-height: 1.5; }

/* ranking */
.rank-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--borda); background: var(--verde-suave); }
.rank-sub { font-size: 11px; color: var(--cinza); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.rank-scroll { flex: 0 1 auto; overflow-y: auto; max-height: 46%; }

/* ── RESUMO / GRÁFICOS ── */
.resumo { padding: 12px 14px; border-top: 1px solid var(--borda); overflow-y: auto; }
.resumo .col-title { margin-bottom: 12px; }
.resumo-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.donut {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--alerta) 0 12%, var(--laranja) 12% 34%, var(--verde-medio) 34% 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(20,83,45,.12);
}
.donut-hole {
  width: 64px; height: 64px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-hole b { font-size: 20px; font-weight: 800; color: var(--verde-escuro); line-height: 1; }
.donut-hole span { font-size: 9px; color: var(--cinza); }
.resumo-leg { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.rl-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--cinza); }
.rl-row b { margin-left: auto; color: var(--verde-escuro); font-size: 13px; }
.rl-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

.resumo-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.rs-card {
  background: var(--verde-suave); border: 1px solid var(--borda);
  border-radius: 9px; padding: 9px 6px; text-align: center;
}
.rs-card b { display: block; font-size: 16px; font-weight: 800; color: var(--verde-escuro); line-height: 1.1; }
.rs-card span { font-size: 9px; color: var(--cinza); display: block; margin-top: 3px; line-height: 1.2; }

.resumo-note {
  margin-top: 10px; font-size: 10.5px; color: #8a6d3b;
  background: #fff8e1; border: 1px solid #ffe0b2; border-radius: 8px;
  padding: 8px 10px; display: flex; gap: 7px; align-items: flex-start; line-height: 1.4;
}
.resumo-note i { color: var(--laranja); margin-top: 1px; }
.resumo-note b { color: #6d5320; }
table.rank { width: 100%; border-collapse: collapse; font-size: 12px; }
table.rank thead th {
  background: var(--verde-escuro); color: #fff; padding: 9px 8px;
  font-size: 10.5px; font-weight: 700; text-align: left; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.rank tbody tr { cursor: pointer; transition: background .12s; }
table.rank tbody tr:hover td { background: var(--verde-claro); }
table.rank tbody tr.sel td { background: #c8e6c9; font-weight: 600; }
table.rank td { padding: 9px 8px; border-bottom: 1px solid #eef3ef; color: var(--cinza); }
table.rank td.t-num { font-weight: 800; color: #9ab09c; width: 24px; }
table.rank td.t-cod { font-family: Consolas, monospace; font-size: 10.5px; color: var(--verde-escuro); }
.risk { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; padding: 3px 9px; border-radius: 11px; color: #fff; font-size: 10px; white-space: nowrap; }
.risk.alto  { background: var(--alerta); }
.risk.medio { background: var(--atencao); color: #5d4037; }
.risk.baixo { background: var(--verde-medio); }

/* badge de equivalência SFB (crosswalk) */
.sfb-badge {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 7px; border-radius: 9px; white-space: nowrap;
  background: var(--verde-claro); color: var(--verde); border: 1px solid #cfe3d4;
}
.sfb-badge.uso { background: #fff3e0; color: #b35c00; border-color: #ffe0b2; }
.sfb-badge.alt { background: #fdecea; color: #c62828; border-color: #f5c6cb; }

.rank-dica {
  padding: 12px 14px; border-top: 1px solid var(--borda); background: #f9fdf9;
  font-size: 11.5px; color: var(--cinza); line-height: 1.5; display: flex; gap: 9px; align-items: flex-start;
}
.rank-dica i { color: var(--verde-medio); margin-top: 2px; }
.rank-dica b { color: var(--verde-escuro); }

.rank-loading { text-align: center; padding: 24px; color: #9ab09c; font-size: 12px; line-height: 1.5; }

/* linhas extras (ocultas até "ver mais") */
table.rank tbody tr.row-extra { display: none; }
table.rank tbody tr.row-extra.show { display: table-row; }
table.rank tbody tr.vermais-row { cursor: pointer; }
table.rank tbody tr.vermais-row td {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--verde);
  background: var(--verde-suave); padding: 8px;
}
table.rank tbody tr.vermais-row td:hover { background: var(--verde-claro); }

/* ════════════════ TELA 2 — DETALHE DA PROPRIEDADE ════════════════ */
.detalhe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - 52px);
  overflow: hidden;
}
.det-left { display: flex; flex-direction: column; background: #e9f0eb; border-right: 1px solid var(--borda); overflow: hidden; }
.det-header { padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--borda); }
.det-header .crumb { font-size: 11.5px; color: var(--verde-medio); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.det-header h3 { font-size: 17px; color: var(--verde-escuro); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.det-header h3 .code { font-family: Consolas, monospace; font-size: 13px; color: var(--verde); }
.det-map-wrap { flex: 1; position: relative; }

.det-right { background: #fff; overflow-y: auto; padding: 22px 26px; }

/* mini-info */
.miniinfo { display: flex; gap: 14px; margin-bottom: 22px; }
.miniinfo div {
  flex: 1; background: var(--verde-suave); border: 1px solid var(--borda);
  border-radius: 11px; padding: 14px 16px; text-align: center;
}
.miniinfo b { display: block; font-size: 24px; font-weight: 800; color: var(--verde-escuro); }
.miniinfo b.alerta { color: var(--alerta); }
.miniinfo span { font-size: 11.5px; color: var(--cinza); }

/* barras */
.barlabel { font-size: 13px; color: var(--verde-escuro); margin: 18px 0 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.barlabel i { color: var(--verde-medio); }
.bar2 { background: #eef3ef; border-radius: 9px; height: 26px; overflow: hidden; display: flex; font-size: 11px; color: #fff; font-weight: 700; }
.bar2 .seg { display: flex; align-items: center; justify-content: center; height: 100%; transition: width .6s ease; white-space: nowrap; overflow: hidden; }
.bar2 .seg.nativa { background: var(--verde); }
.bar2 .seg.uso    { background: var(--alerta); }

/* antes / depois */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 18px; }
.ba .box { border: 1px solid var(--borda); border-radius: 11px; padding: 14px; }
.ba .box .t { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza); }
.ba .box .v { font-size: 15px; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 7px; }
.ba .antes .v { color: var(--verde-medio); }
.ba .depois { border-color: var(--alerta); background: #fdf3f3; }
.ba .depois .v { color: var(--alerta); }
.ba .depois.ok { border-color: var(--borda); background: var(--verde-suave); }
.ba .depois.ok .v { color: var(--verde-medio); }
.ba .antes.parcial { border-color: #ffe0b2; background: #fff8e1; }
.ba .antes.parcial .v { color: var(--laranja); }
.est-tag { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #8a6d3b; background: #fff3cd; border: 1px solid #ffe0b2; border-radius: 7px; padding: 1px 6px; }

/* parecer */
.parecer {
  margin-top: 8px; background: var(--verde-suave);
  border: 1px solid var(--borda); border-left: 4px solid var(--verde-medio);
  border-radius: 10px; padding: 14px 16px; font-size: 13px;
  color: var(--verde-escuro); line-height: 1.6;
}
.parecer b i { color: var(--verde-medio); }

.prod {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 12px;
  background: #fff; border: 1px dashed var(--verde-medio);
  border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--cinza);
}
.prod i { font-size: 18px; color: var(--verde); margin-top: 2px; }
.prod b { color: var(--verde-escuro); }

.det-sim-note {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 16px;
  background: #fff8e1; border: 1px solid #ffe0b2; border-radius: 10px;
  padding: 11px 13px; font-size: 11.5px; color: #8a6d3b; line-height: 1.5;
}
.det-sim-note i { color: var(--laranja); margin-top: 2px; }
.det-sim-note b { color: #6d5320; }

/* ── VEREDITO DIDÁTICO (topo da Tela 2) ── */
.veredito { border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; border: 2px solid; }
.veredito:empty { display: none; }
.veredito.vd-critico { background: linear-gradient(135deg, #fff5f5, #fdecea); border-color: var(--alerta); }
.veredito.vd-ok { background: linear-gradient(135deg, #f1f8f2, #e8f5e9); border-color: var(--verde-medio); }
.vd-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px; padding: 4px 12px; border-radius: 20px; color: #fff;
}
.vd-critico .vd-tag { background: var(--alerta); }
.vd-ok .vd-tag { background: var(--verde-medio); }
.vd-frase { font-size: 16px; line-height: 1.5; color: var(--verde-escuro); margin: 11px 0 0; }
.vd-critico .vd-frase b { color: var(--alerta); }
.vd-ok .vd-frase b { color: var(--verde); }
.vd-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.vd-num > div {
  background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.06); border-radius: 10px;
  padding: 9px 6px; text-align: center;
}
.vd-num b { display: block; font-size: 16px; font-weight: 800; color: var(--alerta); line-height: 1.2; }
.vd-num span { display: block; font-size: 10px; color: var(--cinza); margin-top: 3px; }

/* ── ONDE ESTÁ O CONFLITO ── */
.explica {
  margin-top: 16px; border: 2px solid #f5c6cb; border-radius: 12px;
  background: #fff; padding: 14px 16px; box-shadow: 0 3px 12px rgba(198,40,40,.08);
}
.explica:empty { display: none; }
.explica-head { font-size: 14px; font-weight: 800; color: var(--alerta); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.exp-ok { font-size: 13px; color: var(--verde-escuro); line-height: 1.5; }
.exp-cmp { display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.exp-box { flex: 1; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.exp-box.ref { background: var(--verde-suave); border-color: #cfe3d4; }
.exp-box.div { background: #fdf3f3; border-color: #f5c6cb; }
.exp-t { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza); }
.exp-v { font-size: 14px; font-weight: 700; color: var(--verde-escuro); margin: 5px 0 3px; display: flex; align-items: center; gap: 7px; }
.exp-box.div .exp-v { color: var(--alerta); }
.exp-s { font-size: 11px; color: var(--cinza); }
.exp-v .sw, .exp-cls .sw { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; display: inline-block; border: 1px solid rgba(0,0,0,.12); }
.exp-seta { display: flex; align-items: center; color: var(--cinza); font-size: 16px; }
.exp-onde { font-size: 12.5px; color: var(--verde-escuro); line-height: 1.5; background: #fff8e1; border: 1px solid #ffe0b2; border-radius: 8px; padding: 8px 11px; margin-bottom: 12px; }
.exp-legenda-t { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza); margin-bottom: 6px; }
.exp-cls { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--verde-escuro); padding: 4px 0; border-bottom: 1px solid #f2f5f2; }
.exp-cls:last-of-type { border-bottom: none; }
.exp-cls-nm { flex: 1; }
.exp-cls-ha { font-weight: 700; color: var(--verde-escuro); white-space: nowrap; }
.exp-foco { width: 100%; justify-content: center; margin-top: 12px; }

/* pulso da área de conflito no mapa */
.conflito-pulse { animation: confpulse 1.5s ease-in-out infinite; }
@keyframes confpulse {
  0%, 100% { stroke-opacity: 1; fill-opacity: .55; }
  50%      { stroke-opacity: .4; fill-opacity: .30; }
}

/* rodapé da equipe */
.equipe-footer {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid #e3ece4;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; text-align: center;
}
.equipe-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--verde, #2e7d32); color: #fff; font-weight: 700;
  font-size: 13px; padding: 5px 13px; border-radius: 20px;
}
.equipe-nomes { font-size: 13.5px; color: var(--cinza, #5b6b5e); font-weight: 600; }

/* impressão do parecer (Gerar parecer PDF) */
@media print {
  .nav, #map, .map-ctrl, .layers-panel, .sat-repo, .exp-foco, .det-sim-note { display: none !important; }
  .detalhe-grid { display: block !important; height: auto !important; }
  .det-left, .det-right { width: 100% !important; height: auto !important; overflow: visible !important; border: none !important; }
  .det-left { padding-bottom: 0 !important; }
  .veredito, .explica, .parecer { break-inside: avoid; }
  body { background: #fff !important; }
}

/* responsivo básico */
@media (max-width: 1000px) {
  .cards3 { grid-template-columns: 1fr; }
  .flow-row.c4, .flow-row.c5 { grid-template-columns: 1fr 1fr; }
  .painel-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; height: auto; }
  .detalhe-grid { grid-template-columns: 1fr; grid-template-rows: 60vh auto; height: auto; }
}