/* ===========================================================================
   Componentes.

   Herdados do DARE Labs: .panel .stat .badge .empty .cards-grid .btn
   Novos, do dominio:      .leitura .faixa-status .campo-numerico .calendario
                           .carencia-tag .sync-badge

   SEMANTICA DE COR — e regra de negocio, nao estetica:
     --verde-500  dentro do padrao / acao primaria
     --ambar      ALERTA — exige atencao, nao impede nada
     --vermelho   BLOQUEIO — algo esta impedido

   Vermelho SO para bloqueio. pH fora da faixa usa ambar porque e informacao,
   nao falha. Se tudo que desvia vira vermelho, o operador aprende a ignorar
   vermelho — e ai o bloqueio de colheita por carencia perde forca.
   ======================================================================== */

/* ---- Botoes ------------------------------------------------------------ */
.btn, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--texto);
  text-decoration: none;
}
.btn:hover, button:hover, input[type="submit"]:hover {
  border-color: var(--verde-500);
  text-decoration: none;
}
.btn:active, button:active { transform: translateY(1px); }
.btn[disabled], button[disabled] { opacity: .55; cursor: not-allowed; }

.btn--primary, input[type="submit"] {
  background: var(--verde-500);
  border-color: var(--verde-500);
  color: var(--branco);
}
.btn--primary:hover, input[type="submit"]:hover {
  background: var(--verde-700);
  border-color: var(--verde-700);
  color: var(--branco);
}
.btn--perigo { background: var(--vermelho); border-color: var(--vermelho); color: var(--branco); }
.btn--sm { padding: 7px 13px; font-size: 13px; min-height: 36px; }

/* Botao de gravar da tela de campo: fixo no rodape, largura total, alto.
   O operador usa uma mao so, segurando o medidor com a outra.

   O seletor precisa incluir input[type="submit"]: a regra base acima usa esse
   seletor de atributo, cuja especificidade (0,1,1) vence uma classe sozinha
   (0,1,0). Sem isto o botao renderiza com os 44px da regra base e a altura de
   toque em campo fica menor do que o projetado. */
.btn--campo,
input[type="submit"].btn--campo {
  position: sticky;
  bottom: 0;
  width: 100%;
  min-height: 56px;
  font-size: 16px;
  margin-top: 20px;
}

/* ---- Painel ------------------------------------------------------------ */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 18px;
}
.panel > h2, .panel > h3 { margin-top: 0; }
.panel__list { list-style: none; padding: 0; margin: 0; }
.panel__list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* sem isto o badge estica na altura da linha */
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
/* O rotulo da direita nao encolhe: num cartao estreito ele quebrava em tres
   linhas e o border-radius de 999px o transformava num circulo. Quem quebra e
   o texto da esquerda, que e prosa. */
.panel__list li > :last-child { flex-shrink: 0; }
.panel__list li:last-child { border-bottom: 0; }

/* ---- Grade de cartoes -------------------------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
/* Os cartoes do painel tem lista com rotulo a direita — 260px espremia o nome
   do reservatorio em duas linhas. */
.cards-grid--painel { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ---- Faixa de status ---------------------------------------------------
   Barra colorida a esquerda do cartao. Padrao vindo do prototipo do cliente,
   que sinalizava "pH 6.6 fora do padrao" exatamente assim.                */
.faixa-status {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px 16px 22px;
  overflow: hidden;
}
.faixa-status::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--line-strong);
}
.faixa-status--ok::before       { background: var(--verde-500); }
.faixa-status--alerta::before   { background: var(--ambar); }
.faixa-status--bloqueio::before { background: var(--vermelho); }

.faixa-status__rotulo { color: var(--dim); font-size: 13px; margin: 0 0 4px; }
.faixa-status__nota   { font-size: 13px; margin: 6px 0 0; }
.faixa-status--alerta   .faixa-status__nota { color: #92400E; font-weight: 600; }
.faixa-status--bloqueio .faixa-status__nota { color: var(--vermelho); font-weight: 600; }

/* ---- Leituras numericas ------------------------------------------------ */
.leitura {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.leitura__unidade { font-size: 15px; font-weight: 500; color: var(--dim); margin-left: 4px; }

/* A dose em gramas na tela de campo: e o numero que o operador vai pesar. */
.leitura--dose { font-size: 32px; color: var(--verde-700); }

/* ---- Campo numerico de campo (EC, pH, gramas) ---------------------------
   Mesma questao de especificidade: base.css estiliza input[type=...] por
   seletor de atributo. */
.campo-numerico,
input.campo-numerico,
select.campo-numerico {
  min-height: 56px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  padding: 12px 14px;
  max-width: 100%;
}
/* `tabular-nums` nao serve para nome de gente, e a lista de operadores e o
   unico campo nao numerico da tela de campo. */
select.campo-numerico { font-variant-numeric: normal; }

/* ---- Badge ------------------------------------------------------------- */
.badge {
  display: inline-block;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  background: var(--verde-100);
  color: var(--verde-700);
}
.badge--alerta   { background: var(--ambar-fundo);   color: #92400E; }
.badge--bloqueio { background: var(--vermelho-fundo); color: var(--vermelho); }
.badge--neutro   { background: #F1F5F9; color: var(--dim); }

/* Contagem regressiva de carencia. Sempre vermelho: e bloqueio de colheita. */
.carencia-tag {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--vermelho-fundo);
  color: var(--vermelho);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Calendario de manutencao ------------------------------------------ */
.calendario {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}
.calendario__cabecalho {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  padding-bottom: 6px;
}
.calendario__dia {
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px;
  font-size: 12px;
}
.calendario__dia.is-hoje { border-color: var(--verde-500); background: var(--verde-100); }
.calendario__dia.is-fora-do-mes { opacity: .4; }
.calendario__numero { font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.calendario__evento {
  display: block;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  background: #F1F5F9;
  color: var(--texto);
}
.calendario__evento.is-realizada { background: var(--verde-100);    color: var(--verde-700); }
.calendario__evento.is-atrasada  { background: var(--ambar-fundo);  color: #92400E; font-weight: 600; }
.calendario__evento.is-cancelada { text-decoration: line-through; color: var(--dim); }

/* ---- Badge de sincronizacao offline -------------------------------------
   Visivel em TODAS as telas (requisito I-5): a fila pendente nao pode ficar
   escondida numa tela so.                                                 */
/* NAO e fixo no rodape: ali ele cobriria o botao de gravar da tela de campo,
   que e sticky em bottom: 0 e ocupa a largura toda. Um badge informativo nunca
   pode ficar por cima da acao principal — em campo isso significa o operador
   nao conseguir registrar a medicao. Vive na topbar, visivel em toda tela. */
.sync-badge {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar);
  color: #92400E;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.sync-badge.is-visivel { display: inline-flex; }
/* App nao instalado com fila pendente: risco real de perda no iOS. */
.sync-badge.is-risco {
  background: var(--vermelho-fundo);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

/* ---- Estado vazio -------------------------------------------------------
   Todo painel vazio mostra texto explicito. Area em branco comunica
   "quebrou", nao "esta tudo certo".                                       */
.empty {
  text-align: center;
  color: var(--dim);
  padding: 36px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  font-size: 14px;
}

/* ---- Cabecalho de pagina ----------------------------------------------- */
.page-head { margin-bottom: 24px; }
.page-head h1 { margin-bottom: 6px; }
.page-head p { color: var(--dim); margin: 0; }

/* ---- Aviso de manuseio / caixa de destaque ------------------------------ */
.aviso {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--verde-100);
  border: 1px solid var(--verde-500);
  color: var(--verde-700);
  font-size: 14px;
  margin: 14px 0;
}
.aviso--alerta   { background: var(--ambar-fundo);    border-color: var(--ambar);    color: #92400E; }
.aviso--bloqueio { background: var(--vermelho-fundo); border-color: var(--vermelho); color: var(--vermelho); }

/* ---- Hint de formulario ------------------------------------------------- */
.hint {
  display: block;
  font-size: 12px;
  color: var(--dim);
  font-weight: 400;
  margin: 4px 0 0;
  max-width: 460px;
}

/* ---- Login --------------------------------------------------------------
   Tela sem sidebar (content_for :tela_cheia).                             */
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--verde-900);
}
.login__caixa { width: min(420px, 100%); margin: 0; }
.login__caixa h1 { margin-bottom: 2px; }
.login__sub { color: var(--dim); font-size: 13px; margin-bottom: 22px; }
.login__enviar { width: 100%; min-height: 52px; margin-top: 6px; }
.campo { margin-bottom: 16px; }
.campo input { max-width: 100%; }

/* ---- Linha de adubo na receita ------------------------------------------ */
.item-receita {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.item-receita:last-of-type { border-bottom: 0; }
.item-receita .campo { margin-bottom: 0; }

@media (max-width: 640px) {
  .item-receita { grid-template-columns: 1fr; }
}

/* ---- Dose na tela de campo ---------------------------------------------- */
.dose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.dose:last-of-type { border-bottom: 0; }
.dose form { display: flex; gap: 8px; align-items: flex-end; }
.dose form .campo-numerico { max-width: 130px; }

@media (max-width: 560px) {
  .dose { grid-template-columns: 1fr; }
  .dose form { width: 100%; }
}

/* ---- Serie temporal (SVG gerado no servidor) ---------------------------- */
.serie { width: 100%; height: auto; display: block; }

.form-periodo { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-periodo .campo { margin-bottom: 0; }
/* O rotulo do ciclo carrega cultura, variedade, estufa e data — num
   campo de largura automatica o texto seria cortado justo onde o
   operador distingue um lote do outro. */
.form-periodo .campo--largo { flex: 1 1 320px; min-width: 0; }
.form-periodo .campo--largo select { width: 100%; }

/* ---- Foto da embalagem da semente --------------------------------------- */
.foto-semente {
  max-width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* ---- Convite de instalacao ----------------------------------------------
   Instalar nao e estetica: o Safari descarta o IndexedDB de site NAO
   instalado depois de ~7 dias, e a fila de medicoes iria junto (R-9). Por
   isso o convite fica no rodape da tela, acima do badge de sincronizacao,
   e ganha borda vermelha quando ha fila pendente.                         */
/* Em fluxo, no topo do conteudo — mesma razao do .sync-badge: sobreposicao
   fixa no rodape disputa espaco com o botao de gravar. */
.instalacao__caixa {
  max-width: 640px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
.instalacao--risco .instalacao__caixa { border-color: var(--vermelho); }

.instalacao__texto { margin: 0 0 12px; }
.instalacao__acoes { display: flex; gap: 8px; justify-content: flex-end; }

/* Rodape do login: caminho para o autocadastro. Sem ele, quem chega sem conta
   fica olhando um formulario que nao tem como preencher. */
.login__rodape { text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--dim); }

/* Linha de acoes de uma pagina de detalhe. Sem isto os botoes ficam colados
   e quebram sem respiro no celular. */
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }

/* Valor que vem do catalogo e nao se edita na aplicacao — o tipo do produto.
   Parece campo para manter o ritmo do formulario, mas nao e input: inseticida
   e sempre inseticida. */
.rotulo-estatico {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--texto);
}
.valor-derivado {
  margin: 0;
  padding: 11px 0;
  font-size: 15px;
  color: var(--dim);
}