/* Dom Nucci — provisório, na paleta do rótulo The Nucci Reserve (bordô e dourado).
   A identidade de verdade fica para o fim do projeto, quando houver produto pronto
   para olhar. Isto aqui é andaime honesto, não proposta de marca. */
:root {
  --vinho-fundo: #1A0A0D;
  --vinho-painel: #241014;
  --dourado: #D8A63A;
  --dourado-claro: #F0D07A;
  --creme: #EDE3D2;
  --creme-fraco: #A99A88;
  --alerta: #E0743C;
  --erro: #D9534F;
  --borda: #43222A;
}

* { box-sizing: border-box; }

body {
  margin: 0; padding: 1.5rem 1.25rem 4rem;
  background: var(--vinho-fundo); color: var(--creme);
  font: 16px/1.6 "Segoe UI", system-ui, sans-serif;
}
.folha { max-width: 1000px; margin: 0 auto; }
a { color: var(--dourado); }

/* ---- cabeçalho ---- */
header {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--dourado); padding-bottom: .9rem; margin-bottom: 1.75rem;
}
.marca {
  font-size: 1.5rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--dourado); text-decoration: none;
}
nav { display: flex; gap: 1.35rem; flex-wrap: wrap; }
nav a {
  text-decoration: none; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--creme-fraco); padding-bottom: .2rem;
}
nav a:hover { color: var(--creme); }
nav a.ativo { color: var(--dourado); border-bottom: 1px solid var(--dourado); }
nav a.discreto { color: #6E5C4C; }

h1 { font-size: 1.7rem; font-weight: 400; color: var(--dourado-claro); margin: 0 0 .3rem; }
h2 {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dourado); font-weight: 600; margin: 2.25rem 0 .75rem;
}
.sub { color: var(--creme-fraco); margin: 0 0 1.5rem; font-size: .92rem; }

/* ---- avisos ---- */
.avisos { margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
.aviso {
  border-left: 3px solid var(--alerta); background: rgba(224,116,60,.09);
  padding: .6rem .85rem; font-size: .88rem; border-radius: 0 3px 3px 0;
}
.aviso.grave { border-left-color: var(--erro); background: rgba(217,83,79,.12); }
.aviso b { color: var(--dourado-claro); }

/* ---- cartões (história, receitas) ---- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cartao {
  background: var(--vinho-painel); border: 1px solid var(--borda);
  border-radius: 4px; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  display: block;
}
.cartao:hover { border-color: var(--dourado); }
.cartao h3 { margin: 0 0 .2rem; font-weight: 400; font-size: 1.15rem; color: var(--dourado-claro); }
.cartao .marca-produto {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--creme-fraco);
}
.cartao p { font-size: .9rem; color: var(--creme-fraco); margin: .7rem 0 0; }
.selo {
  display: inline-block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--alerta); color: var(--alerta); padding: .1rem .4rem;
  border-radius: 2px; margin-left: .4rem; vertical-align: middle;
}

/* ---- prosa ---- */
.prosa { max-width: 62ch; }
.prosa p { margin: 0 0 1.1rem; }

/* ---- formulários ---- */
.controles {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  background: var(--vinho-painel); border: 1px solid var(--borda);
  padding: 1rem 1.15rem; border-radius: 4px;
}
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label, .campo > span {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--creme-fraco);
}
input, select, textarea {
  background: #12070A; color: var(--creme); border: 1px solid var(--borda);
  border-radius: 3px; padding: .5rem .6rem; font: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--dourado); outline-offset: 1px; }
input[type=number] { width: 7rem; }
.largo { width: 22rem; max-width: 100%; }
button, .botao {
  background: transparent; color: var(--dourado); border: 1px solid var(--dourado);
  border-radius: 3px; padding: .5rem 1rem; font: inherit; font-size: .85rem;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .botao:hover { background: var(--dourado); color: var(--vinho-fundo); }
button.perigo { color: var(--erro); border-color: var(--erro); }
button.perigo:hover { background: var(--erro); color: var(--creme); }
.opcao {
  font-size: .85rem; letter-spacing: 0; text-transform: none;
  color: var(--creme); display: flex; gap: .4rem; align-items: center;
}
.ajuda { color: var(--creme-fraco); font-size: .85rem; max-width: 62ch; }

/* ---- tabelas ---- */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th {
  text-align: left; font-weight: 600; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--creme-fraco);
  border-bottom: 1px solid var(--borda); padding: .5rem .6rem;
}
td { padding: .5rem .6rem; border-bottom: 1px solid rgba(67,34,42,.55); vertical-align: middle; }
th.num, td.num { text-align: right; white-space: nowrap; }
tr.faltando td { color: var(--alerta); }
tr.embalagem td { color: var(--creme-fraco); font-style: italic; }
tfoot td { border-top: 2px solid var(--dourado); border-bottom: none; font-weight: 600; padding-top: .7rem; }
.marca-suspeita { color: var(--alerta); cursor: help; font-weight: 700; margin-left: .3rem; }
.barra { display: inline-block; height: .5rem; background: var(--dourado); border-radius: 1px;
         vertical-align: middle; min-width: 1px; opacity: .75; margin-left: .3rem; }
.miniatura { width: 34px; height: 34px; object-fit: cover; border-radius: 3px; border: 1px solid var(--borda); }
.sem-imagem {
  width: 34px; height: 34px; border: 1px dashed var(--borda); border-radius: 3px;
  display: inline-block;
}

/* ---- totais ---- */
.totais { display: flex; flex-wrap: wrap; gap: 1px; background: var(--borda); margin-top: 1.5rem; }
.total { flex: 1 1 170px; background: var(--vinho-painel); padding: .95rem 1.1rem; }
.total span {
  display: block; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--creme-fraco); margin-bottom: .25rem;
}
.total strong { font-size: 1.45rem; font-weight: 400; color: var(--dourado-claro); }
.total.incompleto strong { color: var(--alerta); }

footer {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--borda);
  color: var(--creme-fraco); font-size: .82rem;
}
footer b { color: var(--creme); }

/* ---- login ---- */
.entrada { max-width: 22rem; margin: 3rem auto; }
.entrada .campo { margin-bottom: 1rem; }
.entrada input { width: 100%; }