/* ==========================================================================
   CALCULADORA DE CUSTOS — Santos e Sousa
   Mesma identidade do site, do painel e do menu: fundo azul quase preto,
   nude como destaque, título em Playfair e texto em Jost.

   Pensada primeiro para o celular: é lá que a conta vai ser feita, muitas
   vezes com a mão suja de creme. Por isso os campos são grandes e cada
   linha cabe inteira na tela sem rolar para o lado.
   ========================================================================== */
:root{
  --bg:#0c1120; --bg-alt:#10182b; --card:#141d33; --card-alto:#182444;
  --accent:#cda183; --accent-claro:#e6c9b3;
  --accent-fraco:rgba(205,161,131,.12); --borda:rgba(205,161,131,.25);
  --texto:#f3ece5; --muted:#a9a9c0; --muted-2:#7d7d96;
  --verde:#25d366; --verde-fraco:rgba(37,211,102,.14);
  --vermelho:#e2707a; --vermelho-fraco:rgba(226,112,122,.14);
  --amarelo:#e8c07d; --amarelo-fraco:rgba(232,192,125,.13);
  --raio:14px;
  --sans:"Jost","Segoe UI",sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--texto);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2{ margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:var(--accent-claro); }
img{ display:block; max-width:100%; }
.mono{ font-family:var(--mono); }
em{ font-style:normal; color:var(--muted-2); font-size:.88em; }

/* números de dinheiro todos na mesma largura, para as colunas alinharem */
.dinheiro, input[inputmode="decimal"]{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ---------- faixa do topo ---------- */
.faixa{
  background:var(--bg-alt); border-bottom:1px solid var(--borda);
  display:flex; align-items:center; gap:11px;
  padding:0 16px; height:58px; flex:none;
  position:sticky; top:0; z-index:5;
}
.faixa .marca{ display:flex; align-items:center; gap:10px; min-width:0; }
.faixa .marca img{ width:28px; height:28px; object-fit:contain; flex:none; }
.faixa .marca b{ display:block; font-family:var(--serif); font-size:15px; font-weight:600; }
.faixa .marca .sub{
  display:block; font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.faixa .espaco{ flex:1; }
.volta-menu{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); text-decoration:none; padding:6px 10px;
  border:1px solid var(--borda); border-radius:100px; flex:none;
}
.volta-menu:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- abas ---------- */
.abas{
  display:flex; gap:4px; padding:12px 16px 0;
  max-width:860px; width:100%; margin-inline:auto;
}
.aba{
  flex:1; appearance:none; cursor:pointer;
  background:transparent; color:var(--muted);
  border:1px solid var(--borda); border-bottom:none;
  border-radius:12px 12px 0 0; padding:11px 10px;
  font-family:var(--sans); font-size:14px; font-weight:500;
}
.aba.ativa{ background:var(--card); color:var(--accent-claro); }

/* ---------- conteúdo ---------- */
main{
  flex:1; width:100%; max-width:860px; margin-inline:auto;
  padding:0 16px 48px;
}
.tela{ padding-top:22px; }

.cabeca{ margin-bottom:20px; }
.cabeca h1{ font-size:24px; }
.cabeca p{ margin-top:7px; color:var(--muted); font-size:13.5px; }
.cabeca strong{ color:var(--accent-claro); font-weight:500; }

.voltar{
  appearance:none; background:none; border:none; cursor:pointer;
  color:var(--accent); font-family:var(--sans); font-size:14px;
  padding:14px 0 6px; margin:0;
}

/* título da receita, que dá para reescrever */
.editavel{
  outline:none; border-bottom:1px dashed var(--borda); padding-bottom:3px;
}
.editavel:focus{ border-bottom-color:var(--accent); }

/* ---------- cartões da lista de receitas ---------- */
.grade{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cartao-receita{
  text-align:left; cursor:pointer; appearance:none;
  background:var(--card); border:1px solid var(--borda); border-radius:var(--raio);
  padding:16px; color:inherit; font-family:var(--sans);
  transition:border-color .15s, background .15s, transform .15s;
}
.cartao-receita:hover{ background:var(--card-alto); border-color:var(--accent); transform:translateY(-2px); }
.cartao-receita .nome{ display:block; font-family:var(--serif); font-size:16.5px; font-weight:600; }
.cartao-receita .custo{
  display:block; margin-top:10px; font-size:23px; color:var(--accent-claro);
  font-variant-numeric:tabular-nums lining-nums;
}
.cartao-receita .custo small{ font-size:12.5px; color:var(--muted-2); display:block; font-weight:400; }
.cartao-receita .pendente{ color:var(--amarelo); font-size:13px; margin-top:10px; display:block; }

/* ---------- blocos ---------- */
.bloco{
  background:var(--card); border:1px solid var(--borda); border-radius:var(--raio);
  padding:16px; margin-bottom:14px;
}
.bloco-topo{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.bloco-topo h2{ font-size:16px; }

/* ---------- linhas de ingrediente dentro da receita ---------- */
.linha-item{
  display:grid; grid-template-columns:minmax(0,1fr) 92px 78px 28px;
  align-items:center; gap:8px;
  padding:9px 0; border-top:1px solid rgba(205,161,131,.12);
}
.linha-item:first-child{ border-top:none; padding-top:0; }
.linha-item .nome-item{ min-width:0; font-size:14px; overflow-wrap:anywhere; }
.linha-item .nome-item small{ display:block; color:var(--muted-2); font-size:11.5px; }
.linha-item .custo-item{ text-align:right; font-size:14px; color:var(--muted); }
.linha-item .custo-item.falta{ color:var(--amarelo); font-size:12px; }

.qtd{ display:flex; align-items:center; gap:5px; }
.qtd input{ width:100%; min-width:0; }
.qtd .un{ font-size:12px; color:var(--muted-2); flex:none; }

/* ---------- campos ---------- */
input[type="text"], select{
  width:100%; background:var(--bg); color:var(--texto);
  border:1px solid var(--borda); border-radius:9px;
  padding:10px 11px; font-family:var(--sans); font-size:15px;
}
input[type="text"]:focus, select:focus{ outline:none; border-color:var(--accent); }
select{ appearance:none; background-image:none; }

.campos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.campo > span{ font-size:12.5px; color:var(--muted); }

.linha-add{ display:flex; gap:8px; margin-top:12px; }
.linha-add select{ flex:1; min-width:0; }

/* ---------- resultado ---------- */
.resultado{ background:var(--card-alto); border-color:var(--accent); }
.res-linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 0; font-size:14px; color:var(--muted);
}
.res-linha span:last-child{ color:var(--texto); font-variant-numeric:tabular-nums lining-nums; }
.res-total{
  border-top:1px solid var(--borda); margin-top:8px; padding-top:14px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
}
.res-total .rot{ font-size:13.5px; color:var(--muted); max-width:52%; }
.res-total .val{
  font-family:var(--serif); font-size:30px; color:var(--accent-claro);
  font-variant-numeric:tabular-nums lining-nums; line-height:1.1;
}

/* ---------- lucro ---------- */
.lucro-caixa{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.pastilha{
  flex:1; min-width:120px; border-radius:11px; padding:11px 13px;
  background:var(--bg); border:1px solid var(--borda);
}
.pastilha b{ display:block; font-size:19px; font-variant-numeric:tabular-nums lining-nums; }
.pastilha span{ display:block; font-size:11.5px; color:var(--muted-2); letter-spacing:.06em; text-transform:uppercase; }
.pastilha.bom b{ color:var(--verde); }
.pastilha.ruim b{ color:var(--vermelho); }

/* ---------- cartão de ingrediente ---------- */
.ing{
  background:var(--card); border:1px solid var(--borda); border-radius:12px;
  padding:13px 14px; margin-bottom:10px;
}
.ing-topo{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ing-topo input{ flex:1; min-width:0; font-size:15px; }
.ing-campos{ display:grid; grid-template-columns:1fr 1fr auto; gap:9px; align-items:end; }
.ing-campos .campo > span{ font-size:11px; letter-spacing:.04em; }
.ing-unidade{ display:flex; gap:6px; }
.ing-unidade select{ width:64px; padding:10px 6px; text-align:center; }
.ing-saia{
  text-align:right; font-size:13px; color:var(--accent-claro); white-space:nowrap;
  padding-bottom:10px; font-variant-numeric:tabular-nums lining-nums;
}
.ing-saia small{ display:block; color:var(--muted-2); font-size:10.5px; }
.ing-saia.falta{ color:var(--amarelo); }
.ing-obs{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.45; }
.ing-usos{ margin-top:6px; font-size:11.5px; color:var(--muted-2); }

/* ---------- botões ---------- */
.btn{
  appearance:none; cursor:pointer; font-family:var(--sans);
  border-radius:10px; border:1px solid var(--accent);
  background:var(--accent); color:#1b1206;
  padding:11px 16px; font-size:14px; font-weight:500;
}
.btn:hover{ background:var(--accent-claro); border-color:var(--accent-claro); }
.btn-fino{ background:transparent; color:var(--accent-claro); }
.btn-fino:hover{ background:var(--accent-fraco); color:var(--accent-claro); }
.btn-linha{ width:100%; margin-top:14px; background:transparent; color:var(--accent-claro); border-style:dashed; }
.btn-linha:hover{ background:var(--accent-fraco); }
.btn-perigo{
  width:100%; margin-top:6px; background:transparent;
  color:var(--vermelho); border-color:rgba(226,112,122,.4);
}
.btn-perigo:hover{ background:var(--vermelho-fraco); color:var(--vermelho); }
.btn-apagado{ color:var(--muted-2); border-color:var(--borda); }
.btn-apagado:hover{ background:rgba(255,255,255,.04); color:var(--muted); }
.x{
  appearance:none; cursor:pointer; background:none; border:none;
  color:var(--muted-2); font-size:19px; line-height:1; padding:4px 6px;
}
.x:hover{ color:var(--vermelho); }

/* ---------- avisos ---------- */
.aviso{
  border-radius:11px; padding:12px 14px; margin-bottom:14px;
  font-size:13px; border:1px solid;
  background:var(--amarelo-fraco); border-color:rgba(232,192,125,.4); color:var(--amarelo);
}
.aviso b{ font-weight:600; }

/* ---------- rodapé ---------- */
.rodape{
  border-top:1px solid var(--borda); background:var(--bg-alt);
  padding:20px 16px 26px; text-align:center;
}
.rodape-botoes{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.rodape-aviso{
  max-width:520px; margin:14px auto 0; font-size:12px; color:var(--muted-2); line-height:1.5;
}
.rodape-aviso strong{ color:var(--muted); font-weight:500; }
.rodape-fim{ margin-top:12px; font-size:11.5px; color:var(--muted-2); }

/* ---------- telas estreitas ---------- */
@media (max-width:620px){
  .grade{ grid-template-columns:1fr; }
  .campos{ grid-template-columns:1fr; }
  .cabeca h1{ font-size:21px; }
  .res-total .val{ font-size:26px; }
  .linha-item{ grid-template-columns:minmax(0,1fr) 84px 72px 26px; gap:6px; }
  .ing-campos{ grid-template-columns:1fr 1fr; }
  .ing-saia{ grid-column:1 / -1; text-align:left; padding-bottom:0; padding-top:2px; }
}