/* ==========================================================================
   Acabamento visual
   Ideia: o menu é a mata fechada (verde-escuro, quieto), a abertura do painel
   é a paisagem da chácara ao amanhecer (o único elemento ilustrado) e o resto
   da tela fica claro e calmo, com a cor de cada área marcando os números.
   ========================================================================== */

:root {
  --mata-funda: #163A2C;
  --ceu: #E4F0EC;
  --ceu-baixo: #F4F5DE;
  --sombra: 0 1px 2px rgb(22 58 44 / 0.05), 0 8px 24px rgb(22 58 44 / 0.07);
  --raio-g: 20px;
}
@media (prefers-color-scheme: dark) {
  :root { --mata-funda: #0B1D15; --sombra: 0 1px 2px rgb(0 0 0 / 0.35); }
}

/* ---------- Menu lateral: mata ---------- */
.lateral {
  background: var(--mata-funda);
  border-right: 0;
  color: #DCE8DB;
  --foco: #F2C94C;
}
.lateral .marca-nome { color: #fff; font-size: 1.375rem; }
.lateral .marca-sub { color: #A9C2AE; }
.lateral .nav a { color: #DCE8DB; font-weight: 400; font-size: 1rem; }
.lateral .nav a svg { color: #8FB09A; }
.lateral .nav a:hover { background: rgb(255 255 255 / 0.07); }
.lateral .nav a[aria-current="page"] {
  background: rgb(255 255 255 / 0.11);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #E3B23C;
}
.lateral .nav a[aria-current="page"] svg { color: #F2C94C; }
.lateral .nav .nav-separador { background: rgb(255 255 255 / 0.12); }
.lateral .lateral-rodape { border-top-color: rgb(255 255 255 / 0.12); color: #9DB8A4; }
.lateral .btn-texto, .lateral .btn-texto:hover { color: #DCE8DB; background: transparent; }

/* ---------- Topo ---------- */
.topo { border-bottom-color: transparent; }
.topo h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 900px) { .topo h1 { font-size: 1.375rem; } }

.faixa {
  display: inline-block;
  align-self: flex-start;
  border-radius: 999px;
  padding: var(--e2) var(--e4);
  font-size: var(--t-xs);
}

/* ---------- Abertura: a chácara ao amanhecer ---------- */
.abertura {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e6) var(--e7);
  background-color: var(--ceu);
  background-image: url("../img/paisagem.svg"), linear-gradient(180deg, var(--ceu) 0%, var(--ceu-baixo) 100%);
  background-repeat: no-repeat;
  background-position: right bottom, center;
  background-size: auto 100%, cover;
  color: #24402F;
  --foco: #163A2C;
}
.abertura-data { color: #46614F; font-size: var(--t-md); }
.abertura h2 {
  color: #163A2C;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.05;
  max-width: 13ch;
  margin: var(--e2) 0 var(--e3);
}
.abertura-frase { color: #24402F; max-width: 36ch; }
.abertura .btn { background: #163A2C; color: #fff; }
.abertura .btn:hover { background: #0F2A1F; }
.abertura .btn-secundario { background: rgb(255 255 255 / 0.85); border-color: rgb(22 58 44 / 0.2); color: #163A2C; }
.abertura .btn-secundario:hover { background: #fff; }

@media (max-width: 760px) {
  .abertura {
    padding: var(--e5) var(--e4) 150px;
    background-size: auto 150px, cover;
    min-height: 0;
  }
  .abertura-frase { max-width: none; }
}

/* ---------- Blocos de conteúdo ---------- */
.secao { border-color: transparent; box-shadow: var(--sombra); }
.secao-cab h2 { font-size: 1.3125rem; }
.registro:hover { background: var(--superficie-2); }

/* ---------- Números: a cor da área preenche o cartão ---------- */
.resumo { gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.resumo-item {
  border-left: 0;
  border-radius: 14px;
  background: var(--tom-claro, var(--superficie-2));
  padding: var(--e4);
}
.resumo-valor { font-size: 1.625rem; font-weight: 700; }
.resumo-rotulo { color: var(--texto); font-weight: 700; font-size: var(--t-sm); }
.resumo-item .lista-curta li { border-bottom-color: color-mix(in srgb, var(--tom, var(--linha)) 25%, transparent); }

.resumo-item.com-icone { position: relative; padding-top: 60px; }
.resumo-icone {
  position: absolute;
  top: var(--e4); left: var(--e4);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--tom);
  color: #fff;
}
.resumo-icone svg { width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) { .resumo-icone { color: #0E1712; } }

/* ---------- Ciclo do mês: estações ligadas ---------- */
.ciclo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* uma coluna por estação, seja qual for o número delas */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.ciclo li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-right: var(--e3);
}
.ciclo li::before {           /* linha que liga uma estação à próxima */
  content: "";
  position: absolute;
  left: 48px; right: 0; top: 21px;
  border-top: 2px dashed var(--linha);
}
.ciclo li:last-child::before { display: none; }
.ciclo-marca {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-bottom: var(--e2);
  border-radius: 999px;
  background: var(--tom);
  color: #fff;
  box-shadow: 0 0 0 5px var(--tom-claro);
}
.ciclo-marca svg { width: 22px; height: 22px; }
.ciclo-titulo { font-weight: 700; font-size: var(--t-sm); color: var(--texto); text-decoration: none; }
.ciclo-titulo:hover { text-decoration: underline; }
.ciclo-valor {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ciclo-nota { color: var(--texto-2); font-size: var(--t-xs); line-height: 1.4; }
.ciclo li.sem-dado .ciclo-marca { background: var(--superficie-2); color: var(--texto-2); box-shadow: 0 0 0 5px var(--superficie-2); }
.ciclo li.sem-dado .ciclo-valor { color: var(--texto-2); font-weight: 500; }
.ciclo-volta {
  margin-top: var(--e5);
  padding: var(--e3) var(--e4);
  border-radius: 14px;
  background: var(--broto-claro);
  color: var(--mata);
  font-size: var(--t-sm);
}
@media (prefers-color-scheme: dark) {
  .ciclo-marca { color: #0E1712; }
  .ciclo-volta { color: var(--broto); }
}

/* Telas menores: as estações descem uma embaixo da outra */
@media (max-width: 1100px) {
  .ciclo { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .ciclo li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "marca titulo valor" "marca nota nota";
    column-gap: var(--e4);
    padding: 0 0 var(--e5);
  }
  .ciclo li::before { left: 21px; right: auto; top: 50px; bottom: 4px; border-top: 0; border-left: 2px dashed var(--linha); }
  .ciclo-marca { grid-area: marca; margin: 0; }
  .ciclo-titulo { grid-area: titulo; align-self: end; font-size: 1rem; }
  .ciclo-valor { grid-area: valor; font-size: 1.25rem; }
  .ciclo-nota { grid-area: nota; font-size: var(--t-sm); }
}

@media (max-width: 640px) {
  .faixa { display: block; border-radius: 14px; }
}

/* ---------- Tela de entrada: a mesma paisagem da abertura ---------- */
.entrada-lado {
  justify-content: flex-start;
  padding-top: clamp(48px, 12vh, 120px);
  background-color: var(--ceu);
  background-image: url("../img/paisagem.svg"), linear-gradient(180deg, var(--ceu) 0%, var(--ceu-baixo) 100%);
  background-repeat: no-repeat;
  background-position: right bottom, center;
  background-size: 100% auto, cover;
  color: #24402F;
}
.entrada-lado h1 { color: #163A2C; }
.entrada-lado p { color: #24402F; }
@media (max-width: 800px) {
  .entrada-lado { min-height: 46dvh; padding-top: var(--e6); background-size: auto 46%, cover; }
}

/* ---------- Tema escuro ---------- */
@media (prefers-color-scheme: dark) {
  .lateral { border-right: 1px solid var(--linha); }
  .secao { border-color: var(--linha); }
  .abertura, .entrada-lado { filter: saturate(0.92) brightness(0.94); }
  .resumo-rotulo { color: var(--texto); }
}

/* ---------- Financeiro: resultado por área ---------- */
.tabela-rolagem { overflow-x: auto; padding: 0 var(--e5) var(--e5); }
.tabela-resultado { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela-resultado th, .tabela-resultado td { padding: var(--e3) var(--e2); border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
.tabela-resultado thead th { color: var(--texto-2); font-weight: 400; font-size: var(--t-xs); padding-top: 0; }
.tabela-resultado tbody th { font-weight: 700; }
.tabela-resultado .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-resultado .forte { font-weight: 700; }
.tabela-resultado tfoot th, .tabela-resultado tfoot td { border-bottom: 0; border-top: 2px solid var(--texto-2); font-weight: 700; }
.res-ponto { display: inline-block; width: 10px; height: 10px; margin-right: var(--e2); border-radius: 999px; background: var(--tom, var(--linha)); }
.res-barras { width: 28%; min-width: 120px; padding-left: var(--e4) !important; }
.res-barra { display: block; height: 7px; min-width: 2px; border-radius: 999px; }
.res-barra.receita { background: var(--broto); margin-bottom: 3px; }
.res-barra.despesa { background: var(--terra); }
/* Celular: cada área vira um bloco, com os três valores lado a lado */
@media (max-width: 640px) {
  .tabela-rolagem { padding: 0 var(--e4) var(--e4); overflow-x: visible; }
  .tabela-resultado, .tabela-resultado tbody, .tabela-resultado tfoot { display: block; }
  .tabela-resultado thead, .res-barras, .tabela-resultado tfoot td:last-child { display: none; }
  .tabela-resultado tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px var(--e2);
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--linha);
  }
  .tabela-resultado tfoot tr { border-bottom: 0; border-top: 2px solid var(--texto-2); }
  .tabela-resultado th, .tabela-resultado td { border: 0 !important; padding: 0; white-space: normal; }
  .tabela-resultado tr > th { grid-column: 1 / -1; }
  .tabela-resultado .num { text-align: left; }
  .tabela-resultado td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--texto-2);
  }
}

/* Gráficos no celular: mantêm tamanho legível e rolam de lado */
@media (max-width: 640px) {
  figure:has(> .grafico) { overflow-x: auto; }
  .grafico { min-width: 520px; }
}

/* ---------- Aviso com botão (Desfazer) ---------- */
.aviso { display: flex; align-items: center; gap: var(--e4); }
.aviso span { flex: 1; }
.aviso-acao {
  flex: none;
  min-height: 36px;
  padding: 0 var(--e3);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: var(--raio);
  background: transparent;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.aviso-acao:hover { background: rgb(255 255 255 / 0.15); }
@media (prefers-color-scheme: dark) { .aviso-acao { border-color: var(--texto-2); } }

/* ---------- Botão "+" (celular e tablet) e menu de atalhos ---------- */
.fab { display: none; }
@media (max-width: 900px) {
  .fab {
    position: fixed;
    right: var(--e4);
    bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    border: 0;
    border-radius: 999px;
    background: var(--ipe);
    color: #2A2105;
    box-shadow: 0 6px 20px rgb(22 58 44 / 0.35);
    cursor: pointer;
  }
  .fab svg { width: 28px; height: 28px; }
  .fab[hidden], body.menu-aberto .fab { display: none; }
  /* espaço para o botão não cobrir o fim da página nem os avisos */
  .conteudo { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .avisos { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
.atalhos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.atalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e2);
  min-height: 96px;
  padding: var(--e4);
  border: 0;
  border-radius: 14px;
  background: var(--tom-claro, var(--superficie-2));
  color: var(--texto);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.atalho:hover { filter: brightness(0.97); }
.atalho-icone {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--tom);
  color: #fff;
}
.atalho-icone svg { width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) { .atalho-icone { color: #0E1712; } }

/* ---------- Relatório do mês ---------- */
.relatorio-cab { padding: var(--e5) var(--e5) var(--e4); }
.relatorio-chacara { font-weight: 700; color: var(--texto-2); font-size: var(--t-sm); }
.relatorio-cab h2 { font-size: 1.75rem; font-weight: 700; }
.relatorio-corpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e3);
  padding: 0 var(--e5) var(--e5);
}
.relatorio-bloco { padding: var(--e4); border-radius: 14px; background: var(--tom-claro, var(--superficie-2)); break-inside: avoid; }
.relatorio-bloco h3 { margin-bottom: var(--e2); }
.relatorio-bloco dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e1) var(--e4); font-size: var(--t-sm); }
.relatorio-bloco dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .relatorio-cab { padding: var(--e4); }
  .relatorio-corpo { padding: 0 var(--e4) var(--e4); }
}

/* ---------- Impressão (qualquer página; Ctrl+P ou o botão do relatório) ---------- */
@media print {
  /* sempre no tema claro, mesmo com o aparelho no escuro */
  :root {
    --mata: #1E4D3A; --mata-escura: #143628; --broto: #4E8B40; --broto-claro: #DCEBD3;
    --ipe: #D9A21B; --ipe-claro: #F8ECC8; --ipe-texto: #7A5A08; --terra: #8B4A33; --terra-claro: #F3E1D8;
    --agua: #2C6E8E; --agua-claro: #D9EAF2; --geleia: #8E3B5E; --geleia-claro: #F3DDE6;
    --lago: #1F6F6A; --lago-claro: #D3EAE7; --farelo: #7A5C2E; --farelo-claro: #EFE3CF; --fruto: #B85A16; --fruto-claro: #F8E2CF; --fruto-texto: #8A4210;
    --alerta: #B3372A; --alerta-claro: #F7DEDA; --alerta-texto: #8F2B20;
    --fundo: #fff; --superficie: #fff; --superficie-2: #F4F7F1; --linha: #D3DCCE; --texto: #1C2B22; --texto-2: #4A5B50;
    color-scheme: light;
  }
  body { background: #fff; }
  .lateral, .veu, .faixa, .avisos, .fab, .pular, .dialogo, .nao-imprimir,
  .btn, .btn-icone, .chips, .busca, .registro-acoes, .link-secao, .marcar, .quantidade button { display: none !important; }
  .app { display: block; }
  .topo { position: static; min-height: 0; padding: 0 0 8px; background: none; backdrop-filter: none; }
  body[data-rota="relatorios"] .topo { display: none; }
  .conteudo { max-width: none; padding: 0; gap: 12px; }
  .secao { box-shadow: none; border: 1px solid var(--linha); break-inside: avoid; }
  .registro { break-inside: avoid; }
  .relatorio { border: 0; }
  .relatorio-cab, .relatorio-corpo { padding-left: 0; padding-right: 0; }
  .relatorio-bloco, .resumo-item { border: 1px solid var(--linha); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- Ajustes: o que a chácara tem ---------- */
.areas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--e3); }
.area-opcao {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: center;
  min-height: 76px;
  padding: var(--e3) var(--e4);
  border: 2px solid var(--linha);
  border-radius: 14px;
  background: var(--superficie);
  cursor: pointer;
}
.area-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; min-height: 0; }
.area-icone {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-2);
}
.area-icone svg { width: 22px; height: 22px; }
.area-texto strong { display: block; }
.area-texto small { display: block; color: var(--texto-2); font-size: var(--t-xs); line-height: 1.35; }
.area-opcao:has(input:checked) { border-color: var(--tom); background: var(--tom-claro); }
.area-opcao:has(input:checked) .area-icone { background: var(--tom); color: #fff; }
.area-opcao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.area-opcao:not(:has(input:checked)) .area-texto strong { color: var(--texto-2); }
@media (prefers-color-scheme: dark) { .area-opcao:has(input:checked) .area-icone { color: #0E1712; } }

/* ---------- Ajustes: planta sugerida do terreno ---------- */
.terreno-controle { display: grid; gap: var(--e1); max-width: 560px; margin-bottom: var(--e5); }
.terreno-leitura { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.terreno-controle input[type="range"] { padding: 0; border: 0; background: transparent; min-height: 44px; accent-color: var(--mata); }
.terreno-escala { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--texto-2); }
.terreno-controle .btn { justify-self: start; margin-top: var(--e3); }
@media (prefers-color-scheme: dark) { .terreno-controle input[type="range"] { accent-color: var(--broto); } }

.terreno-planta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--e5); align-items: start; margin-bottom: var(--e4); }
@media (max-width: 1000px) { .terreno-planta { grid-template-columns: minmax(0, 1fr); } }
.planta { width: 100%; height: auto; display: block; }
.planta-terreno { fill: var(--superficie-2); stroke: var(--linha); stroke-width: 2; stroke-dasharray: 6 6; }
.planta-fundo { fill: var(--tom-claro); stroke: var(--tom); stroke-width: 1.5; }
.planta-motivo .cheio { fill: var(--tom); opacity: 0.45; }
.planta-motivo .traco { fill: none; stroke: var(--tom); stroke-width: 2; stroke-linecap: round; opacity: 0.5; }
.planta-motivo .traco.claro { stroke: var(--superficie); opacity: 0.9; }
.planta-motivo .fruto { fill: var(--fruto); }
.planta-motivo .telhado { fill: var(--terra); opacity: 0.8; }
.planta-motivo .terra { fill: var(--terra); opacity: 0.55; }
.planta-numero { fill: var(--tom); }
.planta-numero-texto { fill: #fff; font: 700 13px var(--fonte); }
.planta-nome { fill: var(--texto); font: 700 14px var(--fonte); }
@media (prefers-color-scheme: dark) { .planta-numero-texto { fill: #0E1712; } }

.planta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.planta-lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--e3); align-items: start; }
.planta-lista-numero {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--tom);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-xs);
}
@media (prefers-color-scheme: dark) { .planta-lista-numero { color: #0E1712; } }
.planta-lista-titulo { display: flex; justify-content: space-between; gap: var(--e3); font-weight: 700; }
.planta-lista-titulo span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.planta-lista-texto { color: var(--texto-2); font-size: var(--t-sm); }

/* ---------- Painel: primeiros passos ---------- */
.primeiros-passos { background: var(--ipe-claro); }
.primeiros-passos .secao-desc { color: var(--texto); }