/* Tela de proteção. Nenhum token berry aqui: esta tela não pode parecer parte
   da plataforma, porque para quem olha ela **não é** parte de plataforma
   nenhuma — é um aplicativo de receitas.

   O cromatismo é próprio, quente e comum, do tipo que não se nota. */

.fachada {
  --f-fundo:#FFFBF7;
  --f-tinta:#2A1A12;
  --f-suave:#6B5647;
  --f-linha:#EADBCC;
  --f-marca:#C2410C;
  --f-card:#FFFFFF;

  background:var(--f-fundo);
  color:var(--f-tinta);
  min-height:100vh;
}

.fachada-topo {
  background:var(--f-marca); color:#fff;
  padding:var(--space-4) 0;
}
.fachada-topo h1 { margin:0; font-size:1.4rem; letter-spacing:.01em; }

.fachada-busca { margin:var(--space-5) 0; }
.fachada-busca form { display:flex; gap:var(--space-2); }
.fachada-busca input {
  flex:1; min-height:var(--alvo); padding:var(--space-3);
  font:inherit; border:1px solid var(--f-linha); border-radius:var(--radius-sm);
  background:#fff; color:var(--f-tinta);
}
.fachada-busca button {
  min-height:var(--alvo); padding:0 var(--space-5);
  background:var(--f-marca); color:#fff; border:none;
  border-radius:var(--radius-sm); font:inherit; font-weight:600; cursor:pointer;
}

.fachada-filtros { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-5); }
.fachada-filtros button {
  min-height:var(--alvo); padding:var(--space-2) var(--space-4);
  background:#fff; color:var(--f-suave);
  border:1px solid var(--f-linha); border-radius:999px;
  font:inherit; cursor:pointer;
}
.fachada-filtros button[aria-pressed="true"] {
  background:var(--f-marca); color:#fff; border-color:var(--f-marca);
}

.receitas { display:grid; gap:var(--space-4); grid-template-columns:1fr; list-style:none; padding:0; margin:0 0 var(--space-12); }
@media (min-width:640px) { .receitas { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .receitas { grid-template-columns:repeat(3,1fr); } }

.receita {
  background:var(--f-card); border:1px solid var(--f-linha);
  border-radius:var(--radius); padding:var(--space-5);
}
.receita h3 { margin:0 0 var(--space-2); font-size:1.08rem; }
.receita .meta { color:var(--f-suave); font-size:.9rem; margin:0 0 var(--space-3); }
.receita details summary {
  cursor:pointer; min-height:var(--alvo); display:flex; align-items:center;
  color:var(--f-marca); font-weight:600;
}
.receita ul { margin:var(--space-2) 0 var(--space-3) var(--space-5); padding:0; }
.receita p.modo { margin:0; color:var(--f-tinta); }

.favorito {
  background:none; border:none; cursor:pointer;
  min-height:var(--alvo); min-width:var(--alvo);
  font-size:1.2rem; color:var(--f-suave);
}
.favorito[aria-pressed="true"] { color:var(--f-marca); }

.fachada-vazio { color:var(--f-suave); padding:var(--space-8) 0; }

.fachada-rodape {
  border-top:1px solid var(--f-linha); padding:var(--space-5) 0 var(--space-12);
  color:var(--f-suave); font-size:.88rem;
}

/* --- calculadora --- */

.calc-visor {
  width:100%; min-height:64px; padding:var(--space-4);
  font-size:1.9rem; text-align:right;
  border:1px solid var(--f-linha); border-radius:var(--radius);
  background:#fff; color:var(--f-tinta);
  margin-top:var(--space-6);
}

.calc-resultado {
  display:block; min-height:2.2rem; padding:var(--space-2) var(--space-4);
  font-size:1.5rem; text-align:right; color:var(--f-suave);
}

.calc-teclado {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2);
  margin-top:var(--space-2);
}

.calc-tecla {
  min-height:60px;               /* bem acima dos 44px: é um teclado */
  font:inherit; font-size:1.25rem;
  background:#fff; color:var(--f-tinta);
  border:1px solid var(--f-linha); border-radius:var(--radius);
  cursor:pointer;
}
.calc-tecla:hover { background:var(--f-fundo); }
.calc-tecla:active { background:var(--f-linha); }

.calc-igual {
  grid-column:1 / -1;
  background:var(--f-marca); color:#fff; border-color:var(--f-marca);
  font-weight:700;
}

/* --- notas e agenda --- */

.nota-form { margin:var(--space-6) 0 var(--space-5); }
.nota-form textarea, .nota-form input[type="text"] {
  width:100%; padding:var(--space-3); font:inherit;
  border:1px solid var(--f-linha); border-radius:var(--radius);
  background:#fff; color:var(--f-tinta); resize:vertical;
}
.nota-form input[type="text"] { min-height:var(--alvo); }

.btn-nota {
  min-height:var(--alvo); margin-top:var(--space-3);
  padding:0 var(--space-6);
  background:var(--f-marca); color:#fff; border:none;
  border-radius:var(--radius-sm); font:inherit; font-weight:600; cursor:pointer;
}

.notas { list-style:none; padding:0; margin:0 0 var(--space-12); }

.nota {
  background:var(--f-card); border:1px solid var(--f-linha);
  border-radius:var(--radius); padding:var(--space-4);
  margin-bottom:var(--space-3);
}
.nota-texto { margin:0 0 var(--space-2); white-space:pre-wrap; word-break:break-word; }
.nota-data { margin:0; color:var(--f-suave); font-size:.85rem; }
.nota-apagar {
  min-height:var(--alvo); margin-top:var(--space-2);
  background:none; border:none; padding:0;
  color:var(--f-marca); font:inherit; cursor:pointer;
}