/* ===========================================
   Café 360 — Páginas
   Onboarding, Home, Caderno e formulários.
   =========================================== */

/* ============================================
   ONBOARDING
   ============================================ */

.pagina-onboarding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap-xl) var(--gap-lg);
  background: var(--bege-papel);
  position: relative;
}

.onboarding-progress {
  display: flex;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-xxl);
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--linha-media);
  transition: all var(--transicao-media);
}
.progress-dot.active {
  background: var(--verde-medio);
  width: 24px;
  border-radius: var(--raio-full);
}

.onboarding-slide {
  text-align: center;
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp var(--transicao-lenta) ease-out;
}

.onboarding-icon {
  font-size: 4rem;
  margin-bottom: var(--gap-lg);
}

.onboarding-logo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin-bottom: var(--gap-xl);
  box-shadow: 0 12px 36px rgba(62, 86, 56, 0.22),
              0 4px 12px rgba(62, 86, 56, 0.12);
  border: 3px solid var(--branco);
}

.onboarding-slide h1 {
  font-size: var(--fs-display);
  margin-bottom: var(--gap-md);
}

.onboarding-slide h2 {
  font-size: var(--fs-titulo);
  margin-bottom: var(--gap-md);
}

.onboarding-desc {
  color: var(--texto-secundario);
  font-size: var(--fs-medio);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--gap-xxl);
  max-width: 320px;
}

.onboarding-slide .campo {
  width: 100%;
  text-align: left;
}

.onboarding-slide .btn-primario,
.onboarding-slide .btn-secundario {
  width: 100%;
  margin-top: var(--gap-sm);
  min-height: var(--toque-conforto);
  font-size: var(--fs-medio);
}

.onboarding-slide .btn-secundario {
  border: none;
  background: transparent;
  color: var(--texto-secundario);
}

.opcoes-radio {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  width: 100%;
}

.radio-opcao {
  flex: 1;
  min-width: 90px;
  padding: var(--gap-md) var(--gap-md);
  border: 1.5px solid var(--linha-fina);
  border-radius: var(--raio-md);
  text-align: center;
  cursor: pointer;
  background: var(--branco);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  color: var(--texto-principal);
  transition: all var(--transicao-rapida);
}

.radio-opcao:has(input:checked) {
  border-color: var(--verde-medio);
  background: var(--verde-suave);
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
}

.radio-opcao input { display: none; }

/* ============================================
   HOME
   ============================================ */

.pagina-home {
  padding: var(--gap-lg);
  padding-top: var(--gap-xl);
}

.home-header {
  margin-bottom: var(--gap-xl);
}

.home-saudacao {
  font-family: var(--fonte-manuscrita);
  font-size: var(--fs-cursive-xl);
  font-weight: 700;
  color: var(--verde-escuro);
  line-height: 1.1;
  margin-bottom: var(--gap-xs);
}

.home-fazenda {
  color: var(--texto-secundario);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
}

/* --- Cotação strip --- */

.home-cotacao { margin-bottom: var(--gap-xl); }

.cotacao-strip {
  display: flex;
  gap: var(--gap-md);
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cotacao-strip::-webkit-scrollbar { display: none; }

.cotacao-card {
  flex: 0 0 auto;
  min-width: 156px;
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-md) var(--gap-lg);
  box-shadow: var(--sombra-leve);
  scroll-snap-align: start;
  border: 1px solid var(--linha-fina);
  transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.cotacao-card.editavel { cursor: pointer; }
.cotacao-card.editavel:active {
  transform: scale(0.97);
  box-shadow: var(--sombra-sutil);
}

.cotacao-tipo {
  color: var(--texto-secundario);
  font-size: var(--fs-micro);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--gap-xs);
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.cotacao-flag {
  font-size: 9px;
  background: var(--dourado-suave);
  color: var(--texto-dourado);
  padding: 2px 6px;
  border-radius: var(--raio-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--peso-bold);
}

.cotacao-valor {
  color: var(--verde-escuro);
  font-weight: var(--peso-bold);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

.cotacao-variacao {
  margin-top: 4px;
  font-size: var(--fs-mini);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}
.cotacao-variacao.pos { color: var(--sucesso); }
.cotacao-variacao.neg { color: var(--alerta); }

.cotacao-loading,
.cotacao-indisponivel {
  color: var(--texto-claro);
  font-size: var(--fs-pequeno);
  padding: var(--gap-lg);
  text-align: center;
  background: var(--branco);
  border-radius: var(--raio-md);
  font-style: italic;
}

/* --- Atalhos --- */

.home-atalhos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-sm);
  margin-bottom: var(--gap-xl);
}

.atalho-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-md) var(--gap-sm);
  background: var(--branco);
  border: none;
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-sutil);
  cursor: pointer;
  transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
  font-family: inherit;
  min-height: 76px;
  border: 1px solid var(--linha-fina);
}

.atalho-card:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: var(--sombra-sutil);
  background: var(--verde-suave);
}

.atalho-icon {
  font-size: 24px;
  line-height: 1;
}

.atalho-label {
  font-size: var(--fs-mini);
  font-weight: var(--peso-medio);
  color: var(--texto-secundario);
}

/* --- Resumo --- */

.home-resumo {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-lg);
  box-shadow: var(--sombra-leve);
  border: 1px solid var(--linha-fina);
}

.home-resumo h3 {
  margin-bottom: var(--gap-md);
  font-size: var(--fs-subtitulo);
}

.resumo-stat {
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
  font-size: var(--fs-pequeno);
  margin: var(--gap-sm) 0;
}

.resumo-lista {
  list-style: none;
  padding: 0;
  margin: var(--gap-sm) 0 var(--gap-md);
}

.resumo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid var(--linha-caderno);
  font-size: var(--fs-pequeno);
}
.resumo-item:last-child { border-bottom: none; }
.resumo-titulo { color: var(--texto-principal); }
.resumo-data { color: var(--texto-claro); font-size: var(--fs-mini); font-variant-numeric: tabular-nums; }

.resumo-vazio {
  text-align: center;
  padding: var(--gap-md) 0;
}
.resumo-vazio p {
  color: var(--texto-secundario);
  font-size: var(--fs-pequeno);
  margin-bottom: var(--gap-md);
}

/* ============================================
   CADERNO
   ============================================ */

/* === Classe utilitária: fundo de papel com filete dourado e ruído ===
   Usada em todas as páginas-listagem do app pra unificar a estética
   "caderno de campo" de forma consistente. */
.fundo-papel,
.pagina-caderno,
.pagina-vendas,
.pagina-estoque,
.pagina-colheita,
.pagina-dinheiro,
.pagina-ficha,
.pagina-detalhe-anotacao,
.pagina-config {
  background: var(--bege-papel);
  background-image:
    /* Filete dourado vertical à esquerda (18-19px) */
    linear-gradient(to right, transparent 0, transparent 18px, rgba(201, 169, 97, 0.18) 18px, rgba(201, 169, 97, 0.18) 19px, transparent 19px),
    /* Textura ruído sutil de papel (~5% opacidade verde) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.42 0 0 0 0 0.28 0 0 0 0.05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  min-height: 100vh;
}

/* Headers das páginas que reusam .caderno-header ganham padding
   pra abrir espaço pro filete dourado lateral (já tem na pagina-caderno
   por causa do override original) */
.pagina-vendas .caderno-header,
.pagina-estoque .caderno-header,
.pagina-colheita .caderno-header,
.pagina-dinheiro .caderno-header,
.pagina-ficha .caderno-header {
  padding-left: var(--gap-md);
}

.pagina-caderno {
  padding: var(--gap-lg);
  padding-bottom: 96px;
}

.caderno-header {
  margin-bottom: var(--gap-md);
  padding-left: var(--gap-md); /* abre espaço pro filete dourado */
}

.caderno-header h2 {
  font-family: var(--fonte-manuscrita);
  font-size: var(--fs-cursive-xl);
  font-weight: 700;
  color: var(--verde-escuro);
  line-height: 1;
}

.caderno-subtitulo {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  font-weight: var(--peso-normal);
  margin-top: 4px;
  font-family: var(--fonte-principal);
}

.caderno-filtros {
  display: flex;
  flex-wrap: wrap;            /* quebra linha em vez de scroll horizontal */
  gap: var(--gap-xs);
  margin-bottom: var(--gap-md);
}

/* === Busca === */
.caderno-busca {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--branco);
  border: 1.5px solid var(--bege-medio);
  border-radius: var(--raio-sm);
  padding: 0 var(--gap-sm) 0 var(--gap-md);
  margin-bottom: var(--gap-sm);
  margin-left: 4px;
  box-shadow: var(--sombra-sutil);
  min-height: var(--toque-minimo);
}

.caderno-busca:focus-within {
  border-color: var(--verde-medio);
  box-shadow: 0 0 0 3px var(--verde-suave);
}

.caderno-busca-icone {
  font-size: 16px;
  color: var(--texto-claro);
  flex-shrink: 0;
  margin-right: var(--gap-sm);
}

.caderno-busca-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--texto-principal);
  padding: var(--gap-sm) 0;
  min-width: 0;
}

.caderno-busca-input::placeholder { color: var(--texto-claro); }

.caderno-busca-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bege-suave);
  color: var(--texto-secundario);
  border-radius: var(--raio-full);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.caderno-busca-clear:active { background: var(--bege-medio); }

/* === Cabeçalho de grupo de data — manuscrito === */
.caderno-data-grupo {
  font-family: var(--fonte-manuscrita);
  font-size: var(--fs-cursive-md);
  font-weight: 700;
  color: var(--verde-medio);
  margin: var(--gap-md) 0 var(--gap-sm);
  padding-left: 4px;
  line-height: 1;
  letter-spacing: 0.2px;
}
.caderno-data-grupo:first-child { margin-top: 0; }

/* Lista de anotações */
.lista-anotacoes {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* Card de anotação — "folha de caderno" com pautado sutil interno */
.anotacao-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  padding: 14px 16px;
  background: var(--branco);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-sutil);
  cursor: pointer;
  transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
  border: 1px solid var(--linha-fina);
  position: relative;
  overflow: hidden;
}

/* Pseudo-element pautado: linhas horizontais 7% opacidade dentro do card,
   simulando papel de caderno. Não interfere no clique (pointer-events none). */
.anotacao-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(62, 86, 56, 0.07) 27px,
    rgba(62, 86, 56, 0.07) 28px
  );
  pointer-events: none;
  z-index: 0;
}

/* Conteúdo do card sobre o pautado */
.anotacao-icone,
.anotacao-info,
.anotacao-fav {
  position: relative;
  z-index: 1;
}

.anotacao-item:active {
  transform: scale(0.98);
  box-shadow: var(--sombra-leve);
  background: var(--bege-suave);
}

.anotacao-icone {
  font-size: 18px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-suave);
  border-radius: var(--raio-full);
}

.anotacao-info {
  flex: 1;
  min-width: 0;
}

.anotacao-titulo {
  font-weight: var(--peso-semi);
  color: var(--texto-principal);
  font-size: var(--fs-base);
  line-height: 1.4;
  margin-bottom: 4px;
}

.anotacao-meta {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.anotacao-fav {
  font-size: 16px;
  flex-shrink: 0;
}

.anotacao-fav-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: flex-start;
}

/* Animação ao favoritar via long-press */
.anotacao-fav-anim {
  animation: starPop 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes starPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Long-press visual feedback */
.anotacao-item.long-press {
  background: var(--dourado-suave);
  transition: background 150ms ease;
}

/* === Botão de ação no header (favoritar no detalhe) === */
.header-acao {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  filter: grayscale(0.5);
  opacity: 0.6;
  transition: all var(--transicao-rapida);
  font-family: inherit;
}
.header-acao.ativo {
  filter: none;
  opacity: 1;
}
.header-acao:active { transform: scale(0.92); }

/* === Tela de detalhe de anotação === */
.pagina-detalhe-anotacao {
  background: var(--bege-papel);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.42 0 0 0 0 0.28 0 0 0 0.05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  min-height: 100vh;
}

.det-cabecalho {
  text-align: center;
  padding: var(--gap-md) var(--gap-md) var(--gap-xl);
  margin-bottom: var(--gap-md);
  border-bottom: 1px solid var(--linha-fina);
}

.det-icone-grande {
  font-size: 48px;
  margin-bottom: var(--gap-sm);
}

.det-tipo-label {
  font-size: var(--fs-mini);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--verde-medio);
  font-weight: var(--peso-bold);
  margin-bottom: var(--gap-xs);
}

.det-titulo {
  font-family: var(--fonte-manuscrita);
  font-size: var(--fs-cursive-xl);
  font-weight: 700;
  color: var(--verde-escuro);
  line-height: 1.2;
  margin-bottom: var(--gap-sm);
}

.det-data {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  text-transform: capitalize;
}

.det-talhao {
  margin-top: var(--gap-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--verde-suave);
  color: var(--verde-escuro);
  border-radius: var(--raio-full);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
}

.det-bloco {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-md) var(--gap-lg);
  margin-bottom: var(--gap-md);
  box-shadow: var(--sombra-sutil);
  border: 1px solid var(--linha-fina);
}

.det-bloco-titulo {
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-bold);
  color: var(--verde-escuro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--gap-md);
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding-bottom: var(--gap-xs);
  border-bottom: 1px solid var(--linha-caderno);
}

.det-campo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-md);
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid var(--linha-caderno);
  font-size: var(--fs-base);
}
.det-campo:last-child { border-bottom: none; }

.det-campo-label {
  color: var(--texto-secundario);
  font-size: var(--fs-pequeno);
  flex-shrink: 0;
}

.det-campo-valor {
  color: var(--texto-principal);
  font-weight: var(--peso-medio);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.det-descricao {
  color: var(--texto-principal);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-base);
  white-space: pre-wrap;
}

.det-vistoria-ok {
  color: var(--sucesso);
  font-weight: var(--peso-semi);
  text-align: center;
  padding: var(--gap-sm) 0;
}

.det-bloco-meta {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: var(--gap-sm) var(--gap-md);
}

.det-meta-linha {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-mini);
  color: var(--texto-claro);
  padding: 3px 0;
}

.det-meta-valor.pendente { color: var(--atencao); }

.det-midias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--gap-sm);
}

.det-midia-foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-sm);
  border: 1px solid var(--linha-fina);
}

.det-midia-audio {
  background: var(--verde-suave);
  padding: var(--gap-sm);
  border-radius: var(--raio-sm);
  font-size: var(--fs-pequeno);
  color: var(--verde-escuro);
}

.acoes-detalhe-anotacao {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-top: var(--gap-xl);
  padding-bottom: env(safe-area-inset-bottom);
}

.acoes-detalhe-anotacao .btn-secundario {
  width: 100%;
  min-height: var(--toque-minimo);
}

/* ============================================
   FORMULÁRIO (nova-anotação, nova-venda etc)
   ============================================ */

.pagina-form {
  padding: var(--gap-lg);
  padding-bottom: 96px;
}

.form-header {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: var(--gap-xl);
  padding-top: env(safe-area-inset-top);
}

.btn-voltar {
  background: var(--branco);
  border: 1px solid var(--linha-fina);
  color: var(--verde-escuro);
  font-size: var(--fs-base);
  font-weight: var(--peso-medio);
  cursor: pointer;
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--raio-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  min-height: var(--toque-minimo);
  transition: background var(--transicao-rapida);
}

.btn-voltar:active {
  background: var(--bege-suave);
}

.form-header h2 {
  flex: 1;
}

.tipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--gap-sm);
}

.tipo-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-md) var(--gap-sm);
  border: 1.5px solid var(--linha-fina);
  border-radius: var(--raio-md);
  background: var(--branco);
  cursor: pointer;
  transition: all var(--transicao-rapida);
  font-family: inherit;
}

.tipo-opcao:active { transform: scale(0.97); }

.tipo-opcao.selected {
  border-color: var(--verde-medio);
  background: var(--verde-suave);
  box-shadow: 0 0 0 3px var(--verde-suave);
}

.tipo-icone {
  font-size: 24px;
  line-height: 1;
}

.tipo-nome {
  font-size: var(--fs-mini);
  font-weight: var(--peso-medio);
  color: var(--texto-principal);
  text-align: center;
  line-height: 1.2;
}

/* Chips menores pra forms estruturados (modalidade colheita, problemas vistoria, nível) */
.chip-grid-pequeno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.chip-mini {
  background: var(--branco);
  border: 1.5px solid var(--linha-fina);
  border-radius: var(--raio-full);
  padding: 7px 14px;
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  color: var(--texto-principal);
  cursor: pointer;
  transition: all var(--transicao-rapida);
  font-family: inherit;
  min-height: 38px;
}

.chip-mini:active { transform: scale(0.96); }

.chip-mini.selected {
  background: var(--verde-suave);
  border-color: var(--verde-medio);
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
}

/* Linha extra do card de anotação com detalhe estruturado (dose, qtd, problemas) */
.anotacao-detalhe {
  margin-top: 6px;
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  background: var(--bege-suave);
  padding: 3px 8px;
  border-radius: var(--raio-sm);
  display: inline-block;
  line-height: 1.4;
}

.anotacao-detalhe-ok      { background: var(--sucesso-suave); color: var(--sucesso); }
.anotacao-detalhe-atencao { background: var(--atencao-suave); color: var(--texto-dourado); }
.anotacao-detalhe-alerta  { background: var(--alerta-suave); color: var(--alerta); }

/* === Mídias (foto e áudio) na nova-anotacao === */
.midias-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}

.btn-midia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--branco);
  border: 1.5px solid var(--bege-medio);
  border-radius: var(--raio-full);
  padding: 8px 14px;
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  color: var(--verde-escuro);
  cursor: pointer;
  transition: all var(--transicao-rapida);
  font-family: inherit;
  min-height: 40px;
}
.btn-midia:active {
  transform: scale(0.97);
  background: var(--bege-suave);
}

.btn-midia-icone { font-size: 16px; }

/* Estado "gravando" — pulsando vermelho */
.btn-midia.gravando {
  background: var(--alerta);
  border-color: var(--alerta);
  color: var(--branco);
  animation: pulseGravacao 1.2s ease-in-out infinite;
}

@keyframes pulseGravacao {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 68, 58, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(181, 68, 58, 0); }
}

.midias-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--gap-sm);
}

.midia-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--raio-sm);
  overflow: hidden;
  border: 1px solid var(--linha-fina);
  box-shadow: var(--sombra-sutil);
}

.midia-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.midia-preview-audio {
  background: var(--verde-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  color: var(--verde-escuro);
  font-size: var(--fs-pequeno);
  gap: 4px;
}

.midia-audio-icone { font-size: 28px; line-height: 1; }
.midia-audio-info { font-weight: var(--peso-semi); }

.midia-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--branco);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
}
.midia-remove:active { background: rgba(0, 0, 0, 0.75); }

/* === Áudio na tela de detalhe === */
.det-midia-audio {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  background: var(--verde-suave);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--raio-sm);
  grid-column: 1 / -1; /* ocupa toda a linha do grid de mídias */
}

.det-midia-audio-icone { font-size: 22px; flex-shrink: 0; }

.det-midia-audio audio {
  flex: 1;
  height: 36px;
  min-width: 0;
}

.det-midia-audio-dur {
  flex-shrink: 0;
  font-size: var(--fs-mini);
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
}

.acoes-form {
  margin-top: var(--gap-xl);
  margin-bottom: calc(var(--gap-xl) + env(safe-area-inset-bottom));
}

.acoes-form .btn-primario {
  width: 100%;
  min-height: var(--toque-conforto);
  font-size: var(--fs-medio);
}

/* Garantir que páginas longas tenham espaço suficiente embaixo */
.pagina-form,
.pagina-config,
.pagina-pro,
.pagina-home-pec,
.pagina-vendas,
.pagina-caderno,
.pagina-estoque,
.pagina-colheita,
.pagina-dinheiro,
.pagina-ficha,
.pagina-relatorio,
.pagina-ia,
.pagina-assinatura,
.pagina-manutencao,
.pagina-legal {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ====== FAB IA — botão flutuante secundário (acima do FAB +) ====== */

.fab-ia {
  /* Posicionado acima do FAB principal */
  bottom: calc(var(--gap-lg) + 60px + var(--gap-md) + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #C9A961, #B08F45);
  font-size: 26px;
  box-shadow: 0 4px 14px rgba(176, 143, 69, 0.45);
}
.fab-ia .fab-ia-icone {
  display: inline-block;
  line-height: 1;
}
.fab-ia:active {
  background: #A07F3A;
}

/* FAB Diagnóstico por foto (F3) — fica ACIMA do FAB IA */
.fab-diag {
  bottom: calc(var(--gap-lg) + 60px + 52px + var(--gap-md) * 2 + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #5E7C47, #4B6438);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(75, 100, 56, 0.45);
}
.fab-diag:active {
  background: #3A4D2C;
}

/* ====== PÁGINA — Anotação Inteligente (IA) ====== */

.pagina-ia {
  background: #FAF6EB;
  min-height: 100vh;
  padding: var(--gap-lg);
}

.pagina-ia .form-header {
  margin-bottom: var(--gap-lg);
}

.ia-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  background: var(--branco);
  border: 1px solid rgba(94, 124, 71, 0.15);
  border-left: 4px solid var(--dourado);
  border-radius: var(--raio-md);
  padding: var(--gap-md) var(--gap-lg);
  margin-bottom: var(--gap-lg);
  box-shadow: var(--sombra-leve);
}
.ia-emblema {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.ia-frase {
  font-size: var(--fs-medio);
  color: var(--texto-secundario);
  line-height: 1.45;
  margin: 0;
}

.ia-campo {
  position: relative;
  margin-bottom: var(--gap-md);
}
.ia-textarea {
  width: 100%;
  min-height: 110px;
  padding: var(--gap-md);
  padding-right: 64px;
  font-size: var(--fs-medio);
  line-height: 1.5;
  resize: vertical;
  background: var(--branco);
  border: 1.5px solid rgba(94, 124, 71, 0.2);
  border-radius: var(--raio-md);
  color: var(--texto-primario);
  font-family: inherit;
}
.ia-textarea:focus {
  border-color: var(--verde-medio);
  outline: none;
  box-shadow: 0 0 0 3px rgba(94, 124, 71, 0.12);
}

.ia-btn-mic {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde-medio), var(--verde-escuro));
  color: var(--texto-invertido);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--sombra-leve);
  cursor: pointer;
  transition: transform var(--bounce);
}
.ia-btn-mic:active {
  transform: scale(0.92);
}
.ia-btn-mic-icone {
  line-height: 1;
}

.ia-exemplos {
  margin-bottom: var(--gap-lg);
}
.ia-exemplos-titulo {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  margin: 0 0 var(--gap-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ia-exemplo {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(94, 124, 71, 0.3);
  border-radius: var(--raio-sm);
  padding: var(--gap-sm) var(--gap-md);
  margin-bottom: var(--gap-xs);
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  font-style: italic;
  cursor: pointer;
  transition: background var(--transicao-rapida);
}
.ia-exemplo:active {
  background: rgba(201, 169, 97, 0.15);
}

/* ====== Resultado da interpretação ====== */

.ia-resultado-box {
  background: var(--branco);
  border-left: 4px solid var(--verde-medio);
  border-radius: var(--raio-md);
  padding: var(--gap-lg);
  margin-top: var(--gap-lg);
  box-shadow: var(--sombra-leve);
  animation: ia-fade-in 0.3s ease-out;
}
@keyframes ia-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ia-resultado-titulo {
  font-size: var(--fs-mini);
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--gap-xs);
}
.ia-resumo {
  font-size: var(--fs-medio);
  color: var(--texto-primario);
  line-height: 1.5;
  margin: 0 0 var(--gap-md);
}
.ia-campos-detalhe {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-md);
}
.ia-campo-resultado {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-xs) 0;
  border-bottom: 1px dashed rgba(94, 124, 71, 0.15);
}
.ia-campo-resultado:last-child {
  border-bottom: none;
}
.ia-campo-label {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  text-transform: capitalize;
}
.ia-campo-valor {
  font-size: var(--fs-pequeno);
  color: var(--texto-primario);
  font-weight: var(--peso-semi);
  text-align: right;
}
.ia-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}

/* ====== Avisos (sem internet, em ativação, erro) ====== */

.ia-aviso {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-lg);
  text-align: center;
  margin-top: var(--gap-lg);
  box-shadow: var(--sombra-leve);
  animation: ia-fade-in 0.3s ease-out;
}
.ia-aviso-info {
  border-left: 4px solid var(--verde-medio);
}
.ia-aviso-alerta {
  border-left: 4px solid var(--dourado);
}
.ia-aviso-icone {
  font-size: 40px;
  margin-bottom: var(--gap-xs);
  line-height: 1;
}
.ia-aviso h3 {
  font-size: var(--fs-medio);
  color: var(--verde-escuro);
  margin: 0 0 var(--gap-xs);
  font-weight: var(--peso-semi);
}
.ia-aviso p {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  line-height: 1.5;
  margin: 0 0 var(--gap-sm);
}
.ia-aviso-sub {
  color: var(--texto-secundario);
  font-style: italic;
  font-size: var(--fs-mini) !important;
  margin-bottom: var(--gap-md) !important;
}
.ia-aviso button {
  margin-top: var(--gap-xs);
}

/* ====== Bloqueada (não tem acesso) ====== */

.ia-bloqueada {
  background: linear-gradient(135deg, #FFF7E2, #FFEFC8);
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: var(--raio-md);
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
  margin-top: var(--gap-lg);
  box-shadow: var(--sombra-leve);
}
.ia-bloqueada-icone {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--gap-sm);
}
.ia-bloqueada h3 {
  font-size: var(--fs-medio);
  color: var(--verde-escuro);
  margin: 0 0 var(--gap-xs);
  font-weight: var(--peso-semi);
}
.ia-bloqueada p {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  line-height: 1.5;
  margin: 0 0 var(--gap-md);
}
.ia-bloqueada button {
  margin-top: var(--gap-xs);
}

/* ====== PÁGINA — Minha Assinatura ====== */

.pagina-assinatura {
  background: #FAF6EB;
  min-height: 100vh;
  padding: var(--gap-lg);
}

.ass-card {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
  margin-top: var(--gap-md);
  box-shadow: var(--sombra-leve);
  border-left: 4px solid var(--verde-medio);
}
.ass-card-pro {
  background: linear-gradient(135deg, #FFF7E2, #FFFDF5);
  border-left-color: var(--dourado);
}
.ass-card-trial {
  border-left-color: var(--verde-medio);
}
.ass-card-trial.ass-card-atencao {
  border-left-color: #E0A93C;
  background: linear-gradient(135deg, #FFF8E8, var(--branco));
}
.ass-card-expirado {
  border-left-color: #C62828;
}
.ass-card-basico {
  border-left-color: var(--verde-medio);
}

.ass-icone {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--gap-sm);
}

.ass-card h3 {
  font-size: var(--fs-grande);
  color: var(--verde-escuro);
  margin: 0 0 var(--gap-xs);
  font-weight: var(--peso-semi);
}

.ass-subtitulo {
  font-size: var(--fs-medio);
  color: var(--texto-secundario);
  line-height: 1.5;
  margin: 0 0 var(--gap-md);
}

.ass-validade {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  background: rgba(94, 124, 71, 0.08);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--raio-sm);
  margin: 0 0 var(--gap-md);
  display: inline-block;
}
.ass-validade strong {
  color: var(--verde-escuro);
}

.ass-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin: var(--gap-md) 0;
}

.ass-rodape {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  font-style: italic;
  margin: var(--gap-md) 0 0;
  line-height: 1.5;
}

.btn-link {
  background: none;
  border: none;
  color: var(--verde-medio);
  font-size: var(--fs-pequeno);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--gap-xs);
}
.btn-link:active {
  color: var(--verde-escuro);
}

/* ====== ONBOARDING — elementos do fluxo expandido ====== */

.onboarding-motivos {
  list-style: none;
  padding: 0;
  margin: var(--gap-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.onboarding-motivos li {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  background: rgba(94, 124, 71, 0.08);
  border-radius: var(--raio-md);
  padding: var(--gap-sm) var(--gap-md);
  text-align: left;
}
.motivo-icone {
  font-size: 24px;
  flex-shrink: 0;
}

.onboarding-dica {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  background: rgba(201, 169, 97, 0.12);
  border-left: 3px solid var(--dourado);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--raio-sm);
  margin: var(--gap-md) 0;
  line-height: 1.5;
  text-align: left;
}

.campo-dica {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  margin: var(--gap-xs) 0 0;
  line-height: 1.4;
}

.onboarding-acoes-secundarias {
  display: flex;
  justify-content: space-between;
  margin-top: var(--gap-sm);
}

/* Cards toggle (etapa Operação) */
.onboarding-cards-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin: var(--gap-md) 0 var(--gap-lg);
}
.card-toggle {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  background: var(--branco);
  border: 2px solid rgba(94, 124, 71, 0.15);
  border-radius: var(--raio-md);
  padding: var(--gap-sm) var(--gap-md);
  text-align: left;
  cursor: pointer;
  transition: all var(--transicao-rapida);
  width: 100%;
}
.card-toggle-ativo {
  border-color: var(--verde-medio);
  background: rgba(94, 124, 71, 0.06);
}
.card-toggle-icone {
  font-size: 28px;
  flex-shrink: 0;
}
.card-toggle-info { flex: 1; }
.card-toggle-titulo {
  font-size: var(--fs-medio);
  color: var(--texto-primario);
  font-weight: var(--peso-semi);
  margin-bottom: 2px;
}
.card-toggle-sub {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
}
.card-toggle-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--verde-medio);
  color: var(--texto-invertido);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--peso-semi);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--transicao-rapida);
}
.card-toggle-ativo .card-toggle-check {
  opacity: 1;
}

/* Litros: opções rápidas em pills */
.onboarding-litros-opcoes {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  margin-bottom: var(--gap-sm);
}
.litros-opcao {
  flex: 1;
  min-width: 60px;
  padding: var(--gap-sm);
  border: 2px solid rgba(94, 124, 71, 0.2);
  background: var(--branco);
  border-radius: var(--raio-md);
  font-size: var(--fs-medio);
  font-weight: var(--peso-semi);
  color: var(--texto-primario);
  cursor: pointer;
  transition: all var(--transicao-rapida);
}
.litros-opcao.selected {
  background: var(--verde-medio);
  color: var(--texto-invertido);
  border-color: var(--verde-escuro);
}

/* Dicas finais (etapa pronto) */
.onboarding-dicas-finais {
  background: rgba(94, 124, 71, 0.05);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin: var(--gap-md) 0;
  text-align: left;
}
.onboarding-dicas-titulo {
  font-size: var(--fs-medio);
  color: var(--verde-escuro);
  margin: 0 0 var(--gap-sm);
  font-weight: var(--peso-semi);
}
.onboarding-dicas-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.onboarding-dicas-lista li {
  display: flex;
  gap: var(--gap-sm);
  font-size: var(--fs-pequeno);
  color: var(--texto-primario);
  line-height: 1.5;
}
.dica-icone {
  font-size: 20px;
  flex-shrink: 0;
}

.onboarding-celebra {
  animation: celebra 0.6s ease-out;
}
@keyframes celebra {
  0%   { transform: scale(0.6) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ====== PÁGINA — Manutenção ====== */

.pagina-manutencao {
  background: #FAF6EB;
  min-height: 100vh;
  padding: var(--gap-lg);
}

.manut-intro {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  line-height: 1.5;
  margin-bottom: var(--gap-lg);
  border-left: 3px solid var(--verde-medio);
}

.manut-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);
}
.manut-secao-perigo {
  color: #C62828;
}

.manut-card {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  background: var(--branco);
  border: 1.5px solid rgba(94, 124, 71, 0.15);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin-bottom: var(--gap-sm);
  text-align: left;
  cursor: pointer;
  transition: all var(--transicao-rapida);
  width: 100%;
}
.manut-card:active {
  transform: scale(0.99);
  box-shadow: var(--sombra-leve);
}
.manut-card-green   { border-left: 4px solid #5E7C47; }
.manut-card-blue    { border-left: 4px solid #4A6E9C; }
.manut-card-orange  { border-left: 4px solid #E0A93C; }
.manut-card-red     { border-left: 4px solid #C62828; background: #FFFAFA; }

.manut-card-icone {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.manut-card-info { flex: 1; min-width: 0; }
.manut-card-titulo {
  font-size: var(--fs-medio);
  color: var(--texto-primario);
  font-weight: var(--peso-semi);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  flex-wrap: wrap;
}
.manut-card-desc {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  line-height: 1.5;
}
.manut-card-seta {
  font-size: 24px;
  color: var(--texto-secundario);
  flex-shrink: 0;
}

.manut-badge {
  font-size: 10px;
  font-weight: var(--peso-semi);
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.manut-badge-safe   { background: #E0F2E0; color: #2E7D32; }
.manut-badge-rec    { background: #DCEAF6; color: #1565C0; }
.manut-badge-warn   { background: #FFE8C8; color: #E65100; }
.manut-badge-danger { background: #FFD6D6; color: #B71C1C; }

.manut-aviso {
  display: flex;
  gap: var(--gap-sm);
  background: #FFF8E8;
  border: 1px solid #E0A93C;
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin-top: var(--gap-md);
  align-items: flex-start;
}
.manut-aviso-icone { font-size: 20px; flex-shrink: 0; }
.manut-aviso-texto {
  font-size: var(--fs-pequeno);
  color: #5C4500;
  line-height: 1.5;
}

/* ====== PÁGINAS LEGAIS (Privacidade / Termos / Licenças) ====== */

.pagina-legal {
  background: #FAF6EB;
  min-height: 100vh;
  padding: var(--gap-lg);
}

.legal-conteudo {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-lg);
  box-shadow: var(--sombra-leve);
  line-height: 1.6;
  font-size: var(--fs-pequeno);
  color: var(--texto-primario);
}
.legal-data {
  color: var(--texto-secundario);
  font-style: italic;
  font-size: var(--fs-mini);
  margin-bottom: var(--gap-md);
}
.legal-conteudo h3 {
  color: var(--verde-escuro);
  font-size: var(--fs-medio);
  font-weight: var(--peso-semi);
  margin: var(--gap-lg) 0 var(--gap-xs);
}
.legal-conteudo h3:first-of-type {
  margin-top: 0;
}
.legal-conteudo p {
  margin: 0 0 var(--gap-sm);
}
.legal-conteudo ul {
  padding-left: var(--gap-lg);
  margin: 0 0 var(--gap-sm);
}
.legal-conteudo li {
  margin-bottom: var(--gap-xs);
}
.legal-conteudo a {
  color: var(--verde-medio);
  text-decoration: underline;
  word-break: break-all;
}
.legal-conteudo strong {
  color: var(--verde-escuro);
}

.legal-licenca-item {
  border-bottom: 1px dashed rgba(94, 124, 71, 0.2);
  padding: var(--gap-sm) 0;
}
.legal-licenca-item:last-child {
  border-bottom: none;
}
.legal-licenca-nome {
  font-weight: var(--peso-semi);
  color: var(--verde-escuro);
  font-size: var(--fs-pequeno);
}
.legal-licenca-meta {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  margin: 2px 0;
}
.legal-licenca-uso {
  font-size: var(--fs-mini);
  color: var(--texto-primario);
  font-style: italic;
}
.legal-licencas-rodape {
  margin-top: var(--gap-lg);
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  text-align: center;
}

/* ====== PÁGINA — Outras Culturas ====== */

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

.culturas-intro {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  background: var(--branco);
  border-left: 3px solid var(--verde-medio);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  line-height: 1.5;
  margin-bottom: var(--gap-lg);
}

.culturas-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);
}
.culturas-secao-disponiveis { color: var(--texto-secundario); }

.cultura-card {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  background: var(--branco);
  border: 1.5px solid rgba(94, 124, 71, 0.15);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin-bottom: var(--gap-sm);
  text-align: left;
  cursor: pointer;
  transition: all var(--transicao-rapida);
  width: 100%;
}
.cultura-card:active { transform: scale(0.99); }

/* Linha de cultura com interruptor (toggle) à direita — ativa/desativa */
.cultura-linha {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  background: var(--branco);
  border: 1.5px solid rgba(94, 124, 71, 0.15);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  margin-bottom: var(--gap-sm);
  transition: all var(--transicao-rapida);
}
.cultura-linha-toque {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  flex: 1;
  min-width: 0;
  text-align: left;
}
.cultura-linha-ativa { cursor: pointer; }
.cultura-linha-ativa .cultura-linha-toque { cursor: pointer; }
.cultura-linha-ativa {
  border-left: 4px solid var(--verde-medio);
  background: linear-gradient(135deg, rgba(94, 124, 71, 0.04), var(--branco));
}
.cultura-cor-amarelo.cultura-linha-ativa { border-left-color: #C9A961; }
.cultura-cor-laranja.cultura-linha-ativa { border-left-color: #D87F2E; }
.cultura-cor-marrom.cultura-linha-ativa  { border-left-color: #8B5A2B; }
.cultura-cor-verde.cultura-linha-ativa   { border-left-color: var(--verde-medio); }
.cultura-switch { align-self: center; }

.cultura-card-ativa {
  border-left: 4px solid var(--verde-medio);
  background: linear-gradient(135deg, rgba(94, 124, 71, 0.04), var(--branco));
}
.cultura-card-inativa { opacity: 0.7; }
.cultura-card-inativa:hover { opacity: 1; }

.cultura-cor-amarelo.cultura-card-ativa { border-left-color: #C9A961; }
.cultura-cor-laranja.cultura-card-ativa { border-left-color: #D87F2E; }
.cultura-cor-marrom.cultura-card-ativa  { border-left-color: #8B5A2B; }
.cultura-cor-verde.cultura-card-ativa   { border-left-color: var(--verde-medio); }

.cultura-card-icone {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cultura-card-info { flex: 1; min-width: 0; }
.cultura-card-titulo {
  font-size: var(--fs-medio);
  color: var(--verde-escuro);
  font-weight: var(--peso-semi);
  margin-bottom: var(--gap-xs);
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}
.cultura-badge-ativa {
  font-size: 10px;
  font-weight: var(--peso-semi);
  padding: 2px 8px;
  border-radius: 12px;
  background: #DCEAD0;
  color: #2E7D32;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cultura-card-desc {
  font-size: var(--fs-pequeno);
  color: var(--texto-secundario);
  line-height: 1.5;
  margin-bottom: var(--gap-xs);
}
.cultura-card-meta {
  font-size: var(--fs-mini);
  color: var(--verde-medio);
  font-weight: var(--peso-semi);
}
.cultura-card-dicas {
  list-style: none;
  padding: 0;
  margin: var(--gap-sm) 0 0;
  background: rgba(94, 124, 71, 0.06);
  border-radius: var(--raio-sm);
  padding: var(--gap-sm) var(--gap-md);
}
.cultura-card-dicas li {
  font-size: var(--fs-mini);
  color: var(--texto-primario);
  padding: 2px 0;
  position: relative;
  padding-left: var(--gap-md);
}
.cultura-card-dicas li::before {
  content: '✓';
  color: var(--verde-medio);
  font-weight: var(--peso-semi);
  position: absolute;
  left: 0;
}

.cultura-card-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  background: rgba(94, 124, 71, 0.2);
  border-radius: 12px;
  padding: 2px;
  transition: background var(--transicao-rapida);
  margin-top: 4px;
}
.cultura-card-ativa .cultura-card-toggle {
  background: var(--verde-medio);
}
.cultura-toggle-bola {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--branco);
  transition: transform var(--transicao-rapida);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cultura-toggle-on {
  transform: translateX(16px);
}

.culturas-empty {
  text-align: center;
  padding: var(--gap-lg);
  color: var(--texto-secundario);
  background: rgba(94, 124, 71, 0.04);
  border-radius: var(--raio-md);
  margin-top: var(--gap-md);
}
.culturas-empty-icone { font-size: 40px; margin-bottom: var(--gap-sm); }
.culturas-empty p { font-size: var(--fs-pequeno); line-height: 1.5; margin: 0; }

/* ====== HOME — variante Pro (hero dourado + cards exclusivos) ====== */

.hero-pro {
  background: linear-gradient(135deg, #3E5638 0%, #5C7F47 60%, #C9A961 100%);
  position: relative;
}
.hero-pro::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #FFD986, #C9A961, #FFD986, transparent);
}

.hero-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 217, 134, 0.95);
  color: #5C4500;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fs-mini);
  font-weight: var(--peso-bold);
  margin-bottom: var(--gap-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.hero-pro-icone { font-size: 14px; line-height: 1; }

/* Seção Inteligência da Fazenda (Pro) */
.home-secao-pro {
  background: linear-gradient(135deg, #FFF7E2, #FFFDF5);
  border-radius: var(--raio-md);
  padding: var(--gap-lg) var(--gap-md);
  margin: 0 calc(-1 * var(--gap-md)) var(--gap-xl);
  border-left: 4px solid var(--dourado);
}
.section-title-pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-md);
}
.section-pro-tag {
  font-size: 10px;
  background: var(--dourado);
  color: #2A2520;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: var(--peso-bold);
  letter-spacing: 0.5px;
}

.section-link-pro {
  background: none;
  border: none;
  color: var(--dourado);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-semi);
  cursor: pointer;
  padding: 0;
}
.section-link-pro:active { color: #B08F45; }

.cards-pro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-sm);
}

.card-pro {
  position: relative;
  background: var(--branco);
  border: 1.5px solid rgba(201, 169, 97, 0.3);
  border-radius: var(--raio-md);
  padding: var(--gap-md);
  text-align: left;
  cursor: pointer;
  transition: all var(--transicao-rapida);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-pro:active {
  transform: scale(0.97);
  box-shadow: var(--sombra-leve);
}

.card-pro-icone {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.card-pro-titulo {
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-semi);
  color: var(--verde-escuro);
}
.card-pro-sub {
  font-size: var(--fs-mini);
  color: var(--texto-secundario);
  line-height: 1.3;
}

/* Variant: Preview pra Básico/Trial — visual de cadeado */
.cards-pro-grid-preview .card-pro-preview {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px dashed rgba(94, 124, 71, 0.25);
  position: relative;
}
.card-pro-cadeado {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  opacity: 0.6;
}

/* Atalho rápido em modo Pro (sem badge) */
.atalho-rapido-pro {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.12), var(--branco));
  border-color: rgba(201, 169, 97, 0.4);
}
.atalho-rapido-pro .atalho-rapido-icone {
  color: var(--dourado);
}

/* Drawer item badge (mostra culturas ativas como emoji compacto) */
.drawer-item-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  vertical-align: middle;
  opacity: 0.8;
}