/* ====== PÁGINA — Custos ====== */

.pagina-custos {
  background: #FAF6EB;
  min-height: 100vh;
  padding: var(--gap-lg);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.custos-intro {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  background: linear-gradient(135deg, #FFF7E2, #FFFDF5);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  line-height: 1.5;
  margin-bottom: var(--gap-md);
}
.custos-pro-tag {
  display: inline-block;
  background: var(--dourado);
  color: #2A2520;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--peso-bold);
  margin-right: 6px;
  letter-spacing: 0.5px;
}

.custos-abas {
  display: flex;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-md);
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: 4px;
  box-shadow: var(--sombra-leve);
}
.custos-aba {
  flex: 1;
  background: transparent;
  border: none;
  padding: var(--gap-sm);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-semi);
  color: var(--texto-secundario);
  cursor: pointer;
  border-radius: var(--raio-sm);
  transition: all var(--transicao-rapida);
}
.custos-aba.ativa {
  background: var(--verde-medio);
  color: var(--texto-invertido);
}

.custos-card-grande {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
  box-shadow: var(--sombra-leve);
  border-left: 4px solid var(--dourado);
}
.custos-card-icone { font-size: 48px; line-height: 1; margin-bottom: var(--gap-sm); }
.custos-card-grande h3 {
  font-size: var(--fs-medio);
  color: var(--texto-secundario);
  margin: 0 0 var(--gap-sm);
  font-weight: var(--peso-medio);
}
.custos-valor-grande {
  font-size: 36px;
  font-weight: var(--peso-bold);
  color: var(--verde-escuro);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-bottom: var(--gap-xs);
}
.custos-card-sub {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  margin: 0;
}

.custos-margem {
  margin-top: var(--gap-md);
  padding: var(--gap-md);
  border-radius: var(--raio-md);
  text-align: center;
}
.custos-margem.positiva {
  background: #E0F2E0;
  border: 1px solid #5E7C47;
}
.custos-margem.negativa {
  background: #FFE8E8;
  border: 1px solid #C62828;
}
.custos-margem.custos-margem-cinza {
  background: rgba(94, 124, 71, 0.06);
  border: 1px dashed rgba(94, 124, 71, 0.3);
}
.custos-margem-titulo {
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-semi);
  margin-bottom: 4px;
}
.custos-margem.positiva .custos-margem-titulo { color: #2E7D32; }
.custos-margem.negativa .custos-margem-titulo { color: #B71C1C; }
.custos-margem-valor {
  font-size: 24px;
  font-weight: var(--peso-bold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.custos-margem.positiva .custos-margem-valor { color: #1B5E20; }
.custos-margem.negativa .custos-margem-valor { color: #B71C1C; }
.custos-margem-sub {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
}

.custos-periodo {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  text-align: center;
  font-style: italic;
  margin-top: var(--gap-md);
}

.custos-resumo-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  padding: var(--gap-sm) 0;
  margin-bottom: var(--gap-sm);
}

.custos-talhao-linha {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin-bottom: var(--gap-sm);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px var(--gap-md);
  box-shadow: var(--sombra-sutil);
}
.custos-talhao-info { grid-column: 1; grid-row: 1 / span 2; }
.custos-talhao-valor { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
.custos-talhao-barra-wrap {
  grid-column: 1 / span 2;
  grid-row: 3;
  height: 4px;
  background: rgba(94, 124, 71, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--gap-xs);
}
.custos-talhao-barra { height: 100%; }
.custos-barra-alta  { background: linear-gradient(90deg, #C62828, #FF6F00); }
.custos-barra-media { background: linear-gradient(90deg, #FF6F00, #C9A961); }
.custos-barra-baixa { background: var(--verde-medio); }

.custos-talhao-titulo {
  font-size: var(--fs-medio);
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.custos-talhao-rank {
  background: rgba(94, 124, 71, 0.12);
  color: var(--verde-escuro);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--peso-bold);
}
.custos-talhao-area {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  font-weight: var(--peso-medio);
}
.custos-talhao-meta {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  margin-top: 2px;
}
.custos-talhao-valor-num {
  font-size: var(--fs-medio);
  font-weight: var(--peso-bold);
  color: var(--verde-escuro);
  font-variant-numeric: tabular-nums;
}
.custos-talhao-pct {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
}

.custos-resumo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}
.custos-resumo-card {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  text-align: center;
  box-shadow: var(--sombra-leve);
}
.custos-resumo-entrada { border-left: 4px solid #2E7D32; }
.custos-resumo-saida   { border-left: 4px solid #C62828; }
.custos-resumo-saldo.positivo { border-left: 4px solid var(--dourado); background: linear-gradient(135deg, #FFF7E2, var(--branco)); }
.custos-resumo-saldo.negativo { border-left: 4px solid #B71C1C; background: linear-gradient(135deg, #FFE8E8, var(--branco)); }

.custos-resumo-label {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: var(--gap-xs);
}
.custos-resumo-valor {
  font-size: 18px;
  font-weight: var(--peso-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  color: var(--verde-escuro);
}

.custos-dica, .custos-dica-resumo {
  background: rgba(94, 124, 71, 0.06);
  border-left: 3px solid var(--verde-medio);
  border-radius: var(--raio-sm);
  padding: var(--gap-md);
  margin-top: var(--gap-md);
  font-size: var(--fs-pequeno);
  color: var(--texto-primario);
  line-height: 1.5;
}
.custos-dica-resumo h4 { margin: 0 0 var(--gap-xs); color: var(--verde-escuro); font-size: var(--fs-pequeno); }
.custos-dica-resumo ul { padding-left: var(--gap-md); margin: 0; }
.custos-dica-resumo li { margin-bottom: 4px; }

.custos-bloqueado {
  background: linear-gradient(135deg, #FFF7E2, #FFEFC8);
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: var(--raio-md);
  padding: var(--gap-xl);
  text-align: center;
}
.custos-bloqueado-icone { font-size: 56px; margin-bottom: var(--gap-md); }
.custos-bloqueado h3 { color: var(--verde-escuro); margin: 0 0 var(--gap-sm); }
.custos-bloqueado p { color: var(--texto-secundario); margin: 0 0 var(--gap-md); line-height: 1.5; }

/* ====== PÁGINA — Lembretes ====== */

.pagina-lembretes {
  background: #FAF6EB;
  min-height: 100vh;
  padding: var(--gap-lg);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.lembrete-permissao-aviso {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  background: #FFF8E8;
  border: 1px solid #E0A93C;
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin-bottom: var(--gap-md);
}
.aviso-icone { font-size: 24px; flex-shrink: 0; }
.aviso-info { flex: 1; }
.aviso-titulo { font-weight: var(--peso-semi); color: #5C4500; font-size: var(--fs-pequeno); }
.aviso-sub { font-size: var(--fs-mini); color: #856300; }
.btn-pequeno { padding: 6px 12px; font-size: var(--fs-mini); flex-shrink: 0; }

.lembretes-secao-titulo {
  font-size: var(--fs-mini);
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: var(--gap-lg) 0 var(--gap-sm);
}
.lembretes-secao-passados { color: var(--texto-secundario); }

.lembrete-item {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin-bottom: var(--gap-sm);
  border-left: 4px solid var(--verde-medio);
  box-shadow: var(--sombra-sutil);
}
.lembrete-hoje      { border-left-color: #C62828; background: #FFFAFA; }
.lembrete-amanha    { border-left-color: #FF6F00; }
.lembrete-breve     { border-left-color: var(--dourado); }
.lembrete-passado   { opacity: 0.6; border-left-color: var(--texto-secundario); }

.lembrete-icone { font-size: 28px; line-height: 1; flex-shrink: 0; }
.lembrete-info { flex: 1; min-width: 0; }
.lembrete-titulo {
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-semi);
  color: var(--verde-escuro);
  margin-bottom: 2px;
}
.lembrete-desc {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  margin-bottom: 4px;
  line-height: 1.4;
}
.lembrete-prazo {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--peso-semi);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.lembrete-prazo-hoje    { background: #FFE0E0; color: #B71C1C; }
.lembrete-prazo-amanha  { background: #FFE8C8; color: #E65100; }
.lembrete-prazo-breve   { background: #FFF7E2; color: #5C4500; }
.lembrete-prazo-longe   { background: rgba(94, 124, 71, 0.12); color: var(--verde-escuro); }
.lembrete-prazo-passado { background: rgba(94, 124, 71, 0.08); color: var(--texto-secundario); }

.lembrete-apagar {
  background: none;
  border: none;
  color: var(--texto-secundario);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
}
.lembrete-apagar:active { color: #C62828; }

/* ====== Anotação IA — botão de microfone com estado ativo ====== */

.ia-btn-mic-ativo {
  background: linear-gradient(135deg, #C62828, #B71C1C) !important;
  animation: pulseMic 1s ease-in-out infinite;
}
@keyframes pulseMic {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}