/* 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; } }