/* Layout: painel lateral fixo à esquerda + mapa em tela cheia; no celular o painel vira uma gaveta embaixo.
   Paleta inspirada no campo: verde-mata (limites), terra roxa (áreas do usuário), palha (destaques). */
:root {
  --fundo: #f4f6f2;
  --superficie: #ffffff;
  --texto: #1c2620;
  --texto-suave: #5b6a60;
  --linha: #dbe2d8;
  --mata: #1f6b4a;          /* cor principal: limites e ações */
  --mata-claro: #e3efe7;
  --terra: #9a3d24;         /* áreas desenhadas pelo usuário */
  --terra-claro: #f6e6df;
  --palha: #c9a227;         /* realces */
  --sombra: 0 1px 2px rgb(28 38 32 / .06), 0 8px 24px rgb(28 38 32 / .08);

  --f-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #121915; --superficie: #19221d; --texto: #e4ebe5; --texto-suave: #9aab9f;
    --linha: #2b3830; --mata: #5fbf8d; --mata-claro: #1f3328; --terra: #e0805f;
    --terra-claro: #3a231b; --palha: #e2c15a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #121915; --superficie: #19221d; --texto: #e4ebe5; --texto-suave: #9aab9f;
  --linha: #2b3830; --mata: #5fbf8d; --mata-claro: #1f3328; --terra: #e0805f;
  --terra-claro: #3a231b; --palha: #e2c15a; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.5 var(--f-texto); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--palha); outline-offset: 2px; }

.app { display: grid; grid-template-columns: 360px 1fr; height: 100%; position: relative; }
.mapa { height: 100%; min-width: 0; }

/* ---------- Painel ---------- */
.painel {
  background: var(--superficie); border-right: 1px solid var(--linha);
  overflow-y: auto; display: flex; flex-direction: column; z-index: 2;
}
.marca { display: flex; gap: 12px; align-items: center; padding: 20px 20px 16px; border-bottom: 1px solid var(--linha); }
.marca-icone { width: 36px; height: 36px; flex: none; }
.marca-icone .p1 { fill: var(--mata); } .marca-icone .p2 { fill: var(--palha); } .marca-icone .p3 { fill: var(--terra); }
.marca h1 { font: 800 18px/1.1 var(--f-titulo); letter-spacing: .04em; margin: 0; }
.marca p { margin: 2px 0 0; color: var(--texto-suave); font-size: 12.5px; }

.secao { border-bottom: 1px solid var(--linha); }
.secao summary {
  list-style: none; cursor: pointer; padding: 14px 20px; display: flex; align-items: center; gap: 10px;
  font: 700 13px/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .08em;
}
.secao summary::-webkit-details-marker { display: none; }
.secao summary::after { content: "▾"; margin-left: auto; color: var(--texto-suave); transition: transform .2s; }
.secao:not([open]) summary::after { transform: rotate(-90deg); }
.secao-num {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mata-claro); color: var(--mata); font-size: 11px; letter-spacing: 0;
}
.secao-corpo { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 12px; }

.rotulo { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; margin: 0; display: flex; align-items: center; gap: 8px; }
.ajuda, .status, .vazio { margin: 0; color: var(--texto-suave); font-size: 13px; }
.vazio { padding: 12px; border: 1px dashed var(--linha); border-radius: 8px; text-align: center; }

/* Busca */
.busca { position: relative; display: flex; flex-direction: column; gap: 6px; }
.busca input {
  width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--linha); background: var(--fundo);
}
.busca-resultados {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; box-shadow: var(--sombra); z-index: 5;
}
.busca-resultados button {
  width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 6px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 8px;
}
.busca-resultados button:hover, .busca-resultados button:focus-visible { background: var(--mata-claro); }
.busca-resultados small { color: var(--texto-suave); }

/* Trilha (breadcrumb) */
.trilha { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.trilha button {
  border: 0; background: none; padding: 2px 4px; border-radius: 4px; cursor: pointer; color: var(--mata); font-weight: 600;
}
.trilha button:hover { background: var(--mata-claro); }
.trilha span.atual { font-weight: 600; padding: 2px 4px; }
.trilha .sep { color: var(--texto-suave); }

/* Seletor de nível */
.niveis, .segmentado { display: flex; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 3px; gap: 3px; }
.niveis:empty { display: none; }
.niveis button, .segmentado span {
  flex: 1; border: 0; background: none; padding: 6px 4px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; text-align: center; color: var(--texto-suave);
}
.niveis button[aria-pressed="true"], .segmentado input:checked + span { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }
.segmentado label { flex: 1; display: flex; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado input:focus-visible + span { outline: 2px solid var(--palha); }

/* Cartão da seleção */
.cartao { border: 1px solid var(--linha); border-left: 4px solid var(--palha); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cartao-nivel { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.cartao h3 { margin: 0; font: 700 18px/1.2 var(--f-titulo); text-wrap: balance; }
.cartao-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.cartao-dados dt { font-size: 11px; color: var(--texto-suave); }
.cartao-dados dd { margin: 0; font-size: 13px; }
.cartao-acoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* Botões */
.btn { border: 1px solid var(--linha); background: var(--superficie); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn:hover { border-color: var(--mata); }
.btn-primario { background: var(--mata); border-color: var(--mata); color: #fff; }
:root[data-theme="dark"] .btn-primario { color: #0d1611; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primario { color: #0d1611; } }
.btn-discreto { border-color: transparent; color: var(--texto-suave); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Ferramentas de desenho */
.ferramentas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ferramenta {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); cursor: pointer; font-size: 12px;
}
.ferramenta svg { width: 20px; height: 20px; fill: none; stroke: var(--terra); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ferramenta[data-modo="point"] svg circle { fill: var(--terra); }
.ferramenta:hover { border-color: var(--terra); }
.ferramenta[aria-pressed="true"] { background: var(--terra-claro); border-color: var(--terra); font-weight: 600; }
.dica { margin: 0; font-size: 12.5px; background: var(--terra-claro); color: var(--texto); padding: 8px 10px; border-radius: 6px; }

/* Lista de áreas */
.lista-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-areas:empty { display: none; }
.area {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 8px 8px 10px; border: 1px solid var(--linha); border-radius: 8px;
}
.area-cor { width: 10px; height: 10px; border-radius: 2px; background: var(--terra); }
.area-info { min-width: 0; }
.area-nome { border: 0; background: none; padding: 0; width: 100%; font-weight: 600; font-size: 13.5px; text-overflow: ellipsis; }
.area-nome:focus { outline: none; border-bottom: 1px solid var(--terra); }
.area-meta { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-acoes { display: flex; gap: 2px; }
.area-acoes button { border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 4px; color: var(--texto-suave); font-size: 12px; }
.area-acoes button:hover { background: var(--fundo); color: var(--texto); }
.areas-rodape { display: flex; justify-content: space-between; gap: 6px; }

/* Camadas de dados */
.grupo-dados { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.camada { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.camada.desativada { color: var(--texto-suave); }
.etapa { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0; text-transform: none; background: var(--fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 1px 7px; }

.creditos { margin-top: auto; padding: 14px 20px; font-size: 11px; color: var(--texto-suave); }

/* ---------- Elementos sobre o mapa ---------- */
.coordenadas {
  position: absolute; right: 52px; bottom: 10px; font-size: 11.5px; padding: 3px 8px; border-radius: 4px;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); pointer-events: none;
}
.coordenadas:empty { display: none; }
.aviso {
  position: absolute; left: calc(50% + 180px); transform: translateX(-50%); top: 16px;
  background: var(--texto); color: var(--fundo); padding: 9px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--sombra); z-index: 10; max-width: min(90vw, 460px);
}
.maplibregl-popup-content { font: 13px/1.4 var(--f-texto); color: #1c2620; padding: 8px 10px; }

/* ---------- Celular: mapa em cima, painel embaixo ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 55% 45%; }
  .mapa { grid-row: 1; }
  .painel { grid-row: 2; border-right: 0; border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .coordenadas { display: none; }
  .aviso { left: 50%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Etapa 2: Sentinel-2 ---------- */
.produtos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.controles-s2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo label { font-size: 12px; color: var(--texto-suave); }
.campo input[type="date"], .campo select {
  width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--linha);
  background: var(--fundo); font-size: 13px;
}
.campo input[type="range"] { width: 100%; accent-color: var(--mata); }
.campo output { color: var(--texto); }
.legenda { display: flex; flex-direction: column; gap: 4px; }
.legenda-barra { height: 10px; border-radius: 3px; }
.legenda-valores { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-suave); }

/* ---------- Etapa 2: análise ---------- */
.analise-cabecalho h3 { margin: 0; font: 700 17px/1.2 var(--f-titulo); text-wrap: balance; }
.analise-cabecalho p { margin: 2px 0 0; }
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.resumo-item { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--linha); border-radius: 8px; min-width: 0; }
.resumo-rotulo { font-size: 10.5px; color: var(--texto-suave); line-height: 1.25; }
.resumo-valor { font-size: 18px; font-weight: 500; color: var(--texto); }
.resumo-data { font-size: 11px; color: var(--texto-suave); }

.grafico { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.grafico figcaption { font-size: 12.5px; font-weight: 600; }
.grafico figcaption span { font-weight: 400; color: var(--texto-suave); }
.grafico-caixa { position: relative; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-texto { fill: var(--texto-suave); font: 9px var(--f-mono); }
.g-faixa { fill: var(--mata); fill-opacity: .14; stroke: none; }
.g-linha { fill: none; stroke: var(--mata); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-mira { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 2 2; }
.g-ponto { fill: var(--mata); stroke: var(--superficie); stroke-width: 2; }
.g-ponto.ativo { r: 5.5; }
.g-captura { fill: transparent; cursor: pointer; }
.g-dica {
  position: absolute; top: -6px; transform: translate(-50%, -100%); pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 6px; white-space: nowrap;
  background: var(--texto); color: var(--fundo); font-size: 12px; box-shadow: var(--sombra);
}
.g-dica small { opacity: .75; font-size: 11px; }

/* ---------- Recorte: interruptor de camada e botão inicial ---------- */
.linha-camada { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.interruptor input { width: 16px; height: 16px; accent-color: var(--mata); margin: 0; }
.btn-pequeno { padding: 5px 10px; font-size: 12.5px; }
.btn-inicio {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--mata); background: var(--mata-claro); cursor: pointer;
}
.btn-inicio:hover { background: var(--superficie); }
.btn-inicio-titulo { font: 700 16px/1.2 var(--f-titulo); color: var(--mata); }
.btn-inicio-sub { font-size: 12.5px; color: var(--texto-suave); }

/* ---------- Minhas áreas: mostrar/ocultar e exportar ---------- */
.area-visivel { width: 16px; height: 16px; margin: 0; accent-color: var(--terra); cursor: pointer; }
.area { grid-template-columns: 16px 1fr auto; }
.area.oculta .area-nome, .area.oculta .area-meta { opacity: .5; }
.areas-rodape { align-items: center; flex-wrap: wrap; }
.exportar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exportar .rotulo { margin-right: 2px; }

/* ---------- Camadas: área de trabalho, abas e fontes ---------- */
.campo select#area-trabalho { font-size: 13.5px; padding: 8px 10px; }
.abas { display: flex; gap: 0; border-bottom: 1px solid var(--linha); }
.abas [role="tab"] {
  flex: 1; border: 0; background: none; padding: 9px 4px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas [role="tab"][aria-selected="true"] { color: var(--mata); border-bottom-color: var(--mata); }
.abas [role="tab"]:hover { color: var(--texto); }
.painel-fonte { display: flex; flex-direction: column; gap: 10px; }
.fonte-nome { margin: 0; font-size: 12px; color: var(--texto-suave); font-family: var(--f-mono); }
.segmentado label input:disabled + span { opacity: .45; cursor: not-allowed; }
.canais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.canais label { display: flex; align-items: center; gap: 5px; }
.canal { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.canal-r { background: #d63c3c; } .canal-g { background: #3c9d4e; } .canal-b { background: #3c6fd6; }
.ajustes-camada { display: flex; align-items: flex-end; gap: 10px; }
.ajustes-camada .campo { flex: 1; }

/* ---------- Seletor de mapa base (sobre o mapa) ---------- */
.seletor-base { display: flex; gap: 6px; padding: 5px; border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); }
.seletor-base-opcao {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 11px; color: var(--texto-suave);
}
.seletor-base-opcao img { width: 52px; height: 52px; border-radius: 7px; object-fit: cover; border: 2px solid transparent; display: block; background: var(--fundo); }
.seletor-base-opcao[aria-checked="true"] img { border-color: var(--mata); }
.seletor-base-opcao[aria-checked="true"] { color: var(--texto); font-weight: 600; }
.coordenadas { right: 10px; bottom: 36px; }
@media (max-width: 760px) {
  .seletor-base-opcao img { width: 40px; height: 40px; }
}

/* Os botões de rádio escondidos ficam presos ao próprio rótulo (sem isso, alongam a página) */
.segmentado label { position: relative; }
body { overflow: hidden; }
/* Créditos do mapa não passam por cima do seletor de mapa base */
.maplibregl-ctrl-bottom-right { max-width: calc(100% - 200px); }
@media (max-width: 760px) { body { overflow: auto; } .maplibregl-ctrl-bottom-right { max-width: calc(100% - 150px); } }