/* WineCatalog — paleta bordô/dourado das apps irmãs.
   O VERDE já está tomado noutra app como "boa notícia sobre a procura", e
   por isso aqui não se usa para nada que não seja mesmo isso. */
:root{
  --wine:#6b1230;
  --wine-dk:#3a0d21;
  --gold:#c9932e;
  --gold-lt:#e8b64c;
  --bg:#faf7f2;
  --card:#ffffff;
  --tx:#2a1b1f;
  --mu:#8a7a7d;
  --bo:#ece3e1;
  --vd:#2e7d4f;
  --dg:#c0392b;
  --wr:#b8860b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--tx);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
h1,h2,h3{font-family:'Playfair Display',serif;margin:0}
input,select,button,textarea{font-family:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}

/* ── SPLASH ── */
#wc-splash{
  position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,var(--wine-dk),var(--wine));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .28s ease;color:#fff;
}
.wc-splash-logo{font-size:52px;line-height:1}
.wc-splash-title{font-family:'Playfair Display',serif;font-size:22px;letter-spacing:.5px}
.wc-spin{width:26px;height:26px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:wc-spin .8s linear infinite}
@keyframes wc-spin{to{transform:rotate(360deg)}}

/* ── AUTH PAGES ── */
.auth-page{
  position:fixed;inset:0;z-index:500;display:none;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 20px;background:linear-gradient(160deg,var(--wine-dk),var(--wine));
  color:#fff;text-align:center;overflow-y:auto;
}
.auth-emoji{font-size:40px;margin-bottom:6px}
.auth-page h2{font-size:26px;color:#fff}
.auth-faixa{width:46px;height:3px;background:var(--gold-lt);border-radius:2px;margin:10px 0 14px}
.auth-sub{font-size:13.5px;color:rgba(255,255,255,.78);max-width:320px;line-height:1.5;margin-bottom:22px}
.auth-card{
  background:#fff;color:var(--tx);border-radius:16px;padding:22px 20px;width:100%;max-width:340px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);text-align:left;
}
.auth-card label{display:block;font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 5px}
.auth-card input{width:100%;padding:11px 12px;border:1px solid var(--bo);border-radius:10px;font-size:14.5px;background:#fdfbfa}
.auth-card input:focus{outline:none;border-color:var(--wine)}
.auth-btn{
  width:100%;padding:12px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;
  margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s;
}
.auth-btn:active{opacity:.8}
.auth-btn.prim{background:var(--wine);color:#fff}
.auth-btn.ghost{background:var(--bg);color:var(--tx);border:1px solid var(--bo)}
.auth-btn.link{background:none;color:var(--wine);font-weight:500;text-decoration:underline;padding:6px}
.auth-btn.google{background:#fff;color:#3c4043;border:1px solid var(--bo)}
.auth-divider{text-align:center;font-size:11.5px;color:var(--mu);margin:16px 0 4px}
.auth-status{font-size:12.5px;margin-top:10px;display:none;line-height:1.5}

/* ── HEADER / LAYOUT ── */
header{position:sticky;top:0;z-index:50;background:var(--wine);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.hdr{max-width:720px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px}
.brand-emoji{font-size:22px}
.hdr h1{font-size:19px;color:#fff;letter-spacing:.2px;white-space:nowrap}
.hnav{display:flex;align-items:center;gap:6px}
.hn{background:rgba(255,255,255,.12);border:none;color:#fff;border-radius:9px;padding:8px;display:flex;align-items:center;cursor:pointer}
.hn:active{background:rgba(255,255,255,.22)}
.wrap{max-width:720px;margin:0 auto;padding:16px 14px 90px}
.sec{display:none}
.sec.on{display:block}
.tp{display:none}
.tp.on{display:block}

.itabs{display:flex;gap:6px;margin-bottom:16px;background:var(--card);border:1px solid var(--bo);border-radius:12px;padding:4px}
.it{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 3px;border:none;background:none;
  border-radius:9px;font-size:12px;font-weight:600;color:var(--mu);cursor:pointer;
}
.it.on{background:var(--wine);color:#fff}
.ticon{flex-shrink:0}

/* ── CARDS ── */
.wc-card{background:var(--card);border:1px solid var(--bo);border-radius:14px;padding:18px;margin-bottom:14px}
.wc-card h3{font-size:16px;margin-bottom:4px}
.wc-card-label{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.4px;margin-bottom:9px}
.wc-note{font-size:12.5px;color:var(--mu);line-height:1.55;margin:6px 0}
.wc-note.erro{color:var(--dg)}
.wc-note.ok{color:var(--vd)}
.wc-card input[type=text],.wc-card input[type=password],.wc-card select{
  width:100%;padding:11px 12px;border:1px solid var(--bo);border-radius:10px;font-size:14.5px;background:#fdfbfa;
}
.wc-card select{
  appearance:none;-webkit-appearance:none;color:var(--tx);cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7a7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
.wc-card input:focus,.wc-card select:focus{outline:none;border-color:var(--wine)}
.wc-card label{display:block;font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 5px}
.divi{height:1px;background:var(--bo);margin:14px 0}

.btn-prim,.btn-n,.btn-gold{border:none;border-radius:11px;padding:11px 16px;font-size:14px;font-weight:700;cursor:pointer}
.btn-prim{width:100%;background:var(--wine);color:#fff}
.btn-prim:disabled{opacity:.45;cursor:default}
.btn-n{background:var(--bg);color:var(--tx);border:1px solid var(--bo);font-weight:600;padding:9px 14px;font-size:13px}
.btn-n:active{background:var(--bo)}
.btn-n.larg{width:100%;margin-top:8px}
.btn-gold{background:var(--gold);color:#fff}

/* ── RESUMO ── */
.per-row{display:flex;gap:6px;margin-bottom:14px}
.per{flex:1;padding:7px 4px;border-radius:8px;border:1px solid var(--bo);background:#fdfbfa;color:var(--mu);font-size:12px;font-weight:600;cursor:pointer}
.per.on{background:var(--wine);border-color:var(--wine);color:#fff}

.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:#fdfbfa;border:1px solid var(--bo);border-radius:12px;padding:14px}
.kpi-n{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--wine);line-height:1.1}
.kpi-l{font-size:11.5px;font-weight:600;color:var(--tx);margin-top:4px;line-height:1.35}
.kpi-s{font-size:11px;color:var(--mu);margin-top:3px}

.poupanca{margin-top:12px;padding:12px 14px;border-radius:12px;background:#fdf6e8;border:1px solid #f0e0b8;font-size:12.5px;color:#7a5b0a;line-height:1.5}
.poup-n{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--wr)}
.poup-s{color:#9a7a3a}
/* O aviso sobre o euro não é rodapé: é a diferença entre um número em que
   se pode confiar e um que se está a inventar. Fica à vista. */
.aviso-euro{margin-top:12px;padding:10px 12px;border-radius:10px;background:#fdf1de;border-left:3px solid var(--wr);color:#7a5b0a}

.tbl{margin-top:10px;font-size:12.5px}
.tbl-h,.tbl-r{display:grid;grid-template-columns:1.6fr .7fr 1fr 1fr .8fr;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--bo)}
.tbl-h{font-size:10.5px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.3px}
.tbl-r:last-child{border-bottom:none}
.tbl-r em{font-style:normal;color:var(--mu);font-size:10.5px;display:block}
.tb-acao strong{font-size:12.5px}
.tb-cat{color:var(--wr);font-weight:600}
.erro-n{color:var(--dg);font-size:10.5px}

.vida{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--bo);font-size:12.5px}
.vida:last-child{border-bottom:none}
.vida em{font-style:normal;color:var(--mu);font-size:10.5px;display:block}
.vida.fria{color:var(--dg)}

.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:8px}
.mini-grid div{background:#fdfbfa;border:1px solid var(--bo);border-radius:10px;padding:10px;text-align:center}
.mini-grid strong{display:block;font-family:'Playfair Display',serif;font-size:19px;color:var(--wine)}
.mini-grid span{font-size:10.5px;color:var(--mu);line-height:1.3;display:block;margin-top:2px}

.og-row{margin-bottom:10px}
.og-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px}
.og-nome{font-weight:600}
.og-n{color:var(--mu);white-space:nowrap;font-size:11.5px}
.og-n em{font-style:normal;font-size:10.5px}
.og-bar{height:6px;border-radius:4px;background:var(--bo);overflow:hidden;margin-top:4px}
.og-bar i{display:block;height:100%;border-radius:4px}
/* A cor diz a FORÇA, e é a mesma linguagem da app irmã: dourado é o que
   foi pesquisado ou confirmado, cinzento é o palpite. */
.og-forte,.og-bar i.og-forte{color:var(--wr)}
.og-bar i.og-forte{background:var(--gold)}
.og-media,.og-bar i.og-media{color:var(--wine)}
.og-bar i.og-media{background:var(--wine)}
.og-fraca,.og-bar i.og-fraca{color:var(--mu)}
.og-bar i.og-fraca{background:var(--mu)}

/* ══════════════════════════════════════════════════════════════════
   CATÁLOGO — a camada de filtros

   Cartões e não um formulário: a pergunta que se faz a um catálogo é
   "mostra-me os brancos do Douro até 30 €", e isso são quatro toques, não
   quatro menus. Cada cartão traz a CONTAGEM que vem do mesmo pedido da
   lista (`facetas` no SQL) — um filtro que devolve zero não se carrega.

   E encolhe: a lista é o que interessa, os filtros são o caminho para
   lá. Minimizado fica uma barra com o que está ligado e quantos são.
   ══════════════════════════════════════════════════════════════════ */
.cf{padding:14px}
.cf-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cf-min-btn{background:var(--bg);border:1px solid var(--bo);border-radius:99px;padding:5px 11px;
  font-size:11.5px;font-weight:600;color:var(--wine);cursor:pointer}
.cf-procura{position:relative;margin-bottom:14px}
.cf-procura span{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;
  text-align:center;font-size:13px;line-height:1;color:var(--mu);pointer-events:none}
/* A regra tem de ganhar à `.wc-card input[type=text]` lá de cima, que é
   mais específica (0-2-1 contra 0-1-1) e estava a repor `padding:11px 12px`
   — com a lupa em cima do texto, que é como isto chegou ao ecrã. Selector
   igualmente específico, não `!important`: a seguir ao `.wc-card` ainda há
   quem precise de lhe passar à frente. */
.wc-card .cf-procura input[type=text]{width:100%;padding:11px 12px 11px 38px;
  border:1px solid var(--bo);border-radius:10px;font-size:14px;background:#fdfbfa;color:var(--tx)}
.cf-procura input:focus{outline:none;border-color:var(--wine)}
.cf-grupo{margin-bottom:14px}
.cf-tit{font-size:10px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px}
.cf-tit-l{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.cf-tit-l .cf-tit{margin-bottom:0}

/* DUAS por linha, não três. Com três, "Península de Setúbal", "Touriga
   Nacional" e "Cabernet Sauvignon" chegavam ao ecrã cortadas a meio — e
   um filtro que não se lê não se escolhe.
   E é uma GRELHA, não um `flex-wrap` com `flex:1 1 108px`: era o
   `flex-grow` que fazia o último cartão de uma linha ímpar esticar-se
   sozinho de ponta a ponta. Numa grelha de duas colunas, o que sobra fica
   na primeira coluna, com a largura das outras e alinhado com o de cima.
   `minmax(0,1fr)` (e o `min-width:0` no cartão) porque o mínimo de um
   item de grelha é `auto`, e com isso o `text-overflow:ellipsis` do
   `.cf-op-tx` nunca chegava a disparar: a coluna é que crescia. */
.cf-ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cf-op{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;
  padding:9px 10px;border-radius:10px;border:1px solid var(--bo);background:#fdfbfa;color:var(--tx);
  font-size:12px;text-align:left;cursor:pointer}
.cf-op.on{background:var(--wine);border-color:var(--wine);color:#fff}
/* O texto QUEBRA, não corta. Duas colunas em vez de três dão mais 50px a
   cada cartão, mas não dão os 143 que "Cabernet Sauvignon" precisa num
   ecrã de 390 — e com reticências "Alicante Bousc…" e "Alicante Branco"
   são o mesmo cartão. Numa grelha os dois cartões de uma linha têm sempre
   a mesma altura, por isso uma etiqueta de duas linhas não desalinha nada.
   `anywhere` para o caso de uma casta sem espaços não caber de todo: mais
   vale partir a palavra do que rebentar a coluna. */
.cf-op-tx{display:flex;align-items:center;gap:6px;font-weight:600;min-width:0;
  white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.cf-conta{font-size:10.5px;font-weight:700;color:#a2908f;flex-shrink:0}
.cf-op.on .cf-conta{color:rgba(255,255,255,.75)}
.cf-ponto{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.cf-op.on .cf-ponto{box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
/* O visto das castas: "qualquer uma" (por omissão) contra "todas em
   simultâneo". Só aparece nas castas porque só ali a pergunta tem duas
   respostas — um vinho tem UM tipo e UMA região, e "tinto E branco" não
   existe. */
.cf-modo{display:flex;align-items:center;gap:6px;background:none;border:none;padding:2px 0;
  font-size:11px;font-weight:600;color:var(--mu);cursor:pointer;flex-shrink:0;white-space:nowrap}
.cf-modo.on{color:var(--wine)}
.cf-visto{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--bo);background:#fdfbfa;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:10px;font-weight:700;line-height:1;color:transparent}
.cf-modo.on .cf-visto{background:var(--wine);border-color:var(--wine);color:#fff}

.cf-fim{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--bo)}
.cf-fim-b{display:flex;align-items:center;gap:10px}
.cf-limpar{background:none;border:none;font-size:12px;font-weight:600;color:var(--wine);
  text-decoration:underline;cursor:pointer;padding:4px}
.cf-novo{white-space:nowrap}

.cf-min{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--bo);border-radius:12px;padding:10px 12px;
  margin-bottom:12px;cursor:pointer;text-align:left}
.cf-min-tx{font-size:13px;color:var(--mu);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-min-lado{display:flex;align-items:center;gap:7px;flex-shrink:0}
.cf-n{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;color:#fff;background:#c9bdba}
.cf-n.on{background:var(--wine)}
.cf-seta{font-size:12px;color:var(--mu)}

.cat-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}
.cat-barra-n{font-size:12px;color:var(--mu)}
.cat-barra-n strong{color:var(--tx)}
.cat-modo{display:flex;gap:3px;background:var(--card);border:1px solid var(--bo);border-radius:9px;padding:3px}
.cm{border:none;background:none;border-radius:7px;padding:6px 10px;font-size:11.5px;font-weight:600;
  color:var(--mu);cursor:pointer}
.cm.on{background:var(--wine);color:#fff}

/* ── CATÁLOGO ── */
.cat-row{
  display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--bo);
  border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:pointer;
}
.cat-row:active{background:#fdfbfa}
.cat-main{min-width:0;flex:1}
.cat-nome{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-ano{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;color:var(--mu)}
.cat-sub{font-size:11.5px;color:var(--mu);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-sub em{font-style:normal}
.cat-lado{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
/* A garrafa da linha: a mesma moldura de papel da capa da ficha, em
   pequeno. `overflow:hidden` porque a fotografia entra por cima do
   desenho — sem ele ficava um quadrado branco com a garrafa a espreitar. */
.cat-g{width:40px;height:60px;flex-shrink:0;position:relative;display:flex;align-items:center;
  justify-content:center;overflow:hidden;border-radius:8px;
  background:linear-gradient(160deg,#fff,var(--bg));border:1px solid var(--bo)}
.cat-g svg{width:100%;height:auto;max-height:54px;padding:3px 2px}
.cat-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cat-g.gr{width:60px;height:92px;border-radius:10px}
.cat-g.gr svg{max-height:84px}
.cat-castas{font-size:11px;color:#a2908f;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-preco{font-size:12px;font-weight:600;color:var(--tx);white-space:nowrap}
.cat-sub .cf-ponto{margin-right:6px;vertical-align:middle;width:7px;height:7px}

.cat-grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cat-cartao{background:var(--card);border:1px solid var(--bo);border-radius:12px;padding:12px 10px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center}
.cat-cartao:active{background:#fdfbfa}
.cat-cartao .cat-nome{font-size:13.5px;white-space:normal;margin-top:10px}
.cat-cartao .cat-sub{white-space:normal}
.cat-cartao-n{display:flex;align-items:center;gap:6px;margin-top:8px}
.cat-nota{background:#fdf6e8;border:1px solid #f0e0b8;color:#7a5b0a;font-size:11.5px;font-weight:700;padding:3px 7px;border-radius:20px}
.cat-campos{font-size:11px;color:var(--mu);font-weight:600}
.forca{
  width:19px;height:19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;background:var(--mu);flex-shrink:0;
}
.forca.f3{background:var(--gold)}
.forca.f2{background:var(--wine)}
.forca.f1{background:var(--mu)}
.forca.f0{background:#cfc6c4}

/* ── MODAL DA FICHA ── */
.modal{position:fixed;inset:0;z-index:600;display:none;background:rgba(30,14,20,.55);padding:20px 12px;overflow-y:auto}
.modal.on{display:block}
.modal-box{background:var(--card);border-radius:16px;max-width:620px;margin:0 auto;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:18px 18px 12px;border-bottom:1px solid var(--bo)}
.modal-x{background:var(--bg);border:1px solid var(--bo);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--mu);font-size:14px;flex-shrink:0}
.modal-body{padding:16px 18px 20px}
/* A ficha do vinho traz a sua própria capa bordô encostada ao topo — o
   corpo continua com o mesmo recuo dos lados, e é a `.mhero` que sai para
   fora dele com margens negativas (mesma técnica da Garrafeira). */
.modal-body.capa{padding-top:20px;overflow:hidden;border-radius:16px}
.fi-nome{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;line-height:1.25}
.fi-sub{font-size:12px;color:var(--mu);margin-top:2px}

.fi-campos{display:flex;flex-direction:column;margin-top:12px}
/* Duas colunas, como a `.mdl` da Garrafeira: o rótulo à esquerda com
   largura fixa, o valor à direita. A diferença desta app fica POR BAIXO do
   valor — de onde veio e com que força — em vez de nada. */
.fi-campo{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--bo)}
.fi-campo:last-child{border-bottom:none}
.fi-k{flex:0 0 104px;font-size:10px;font-weight:700;color:var(--mu);text-transform:uppercase;
  letter-spacing:.7px;padding-top:3px}
.fi-c{flex:1;min-width:0}
.fi-v{font-size:13.5px;line-height:1.5;word-break:break-word}
.fi-v a{color:var(--wine)}
.fi-o{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.og-tag{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:20px;background:#f6f2f0}
.og-tag.og-forte{background:#fdf6e8;border:1px solid #f0e0b8}
.og-tag.og-media{background:#f7eef1;border:1px solid #ecdde2}
.og-tag.og-fraca{background:#f3f0ef;border:1px solid var(--bo)}
.fi-em{font-size:10.5px;color:var(--mu)}
.fi-em b{color:var(--wr);font-weight:600}

/* Um campo volátil passado da validade continua a dizê-lo ao lado do
   valor — é a única marca de proveniência que ficou na ficha, porque é a
   única que muda o que se deve fazer com o número. */
.fi-velho{font-size:10px;font-weight:600;color:var(--wr);background:#fdf6e8;border:1px solid #eddfba;
  border-radius:99px;padding:1px 7px;margin-left:6px;white-space:nowrap}

/* ── PROVENIÊNCIA (fim da ficha) ── */
.pv-grid{display:flex;gap:6px;margin:10px 0}
.pv-n{flex:1;border-radius:10px;padding:8px 10px;min-width:0}
.pv-n strong{display:block;font-family:'Playfair Display',serif;font-size:19px;line-height:1}
.pv-n span{display:block;font-size:10px;margin-top:2px;line-height:1.3}
.pv-n.forte{background:#fdf6e8;border:1px solid #f0e0b8;color:#7a5b0a}
.pv-n.media{background:#f7eef1;border:1px solid #ecdde2;color:var(--wine)}
.pv-n.fraca{background:#f3f0ef;border:1px solid var(--bo);color:var(--mu)}
.pv-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--bg);
  border:1px solid var(--bo);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600;
  color:var(--wine);cursor:pointer}
.pv-det{margin-top:8px}
.pv-linha{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bo)}
.pv-linha:last-child{border-bottom:none}
.pv-campo{flex:1;min-width:0;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-em{font-size:10.5px;color:var(--mu);width:62px;text-align:right;flex-shrink:0}
.pv-em b{color:var(--wr);font-weight:600}

.fi-fontes{display:flex;flex-direction:column;gap:5px}
.fi-fontes a{font-size:12px;color:var(--wine);word-break:break-all}
.fi-chaves div{display:flex;gap:8px;align-items:baseline;font-size:11.5px;padding:3px 0}
.fi-chaves span{color:var(--mu);min-width:74px;flex-shrink:0}
.fi-chaves code{color:var(--tx);word-break:break-all}
.fi-alias{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bo)}
.fi-alias:last-child{border-bottom:none}

/* ── DUPLICADOS ── */
.par-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.par-sim{background:var(--wine);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.par-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.par-lado{background:#fdfbfa;border:1px solid var(--bo);border-radius:12px;padding:12px;min-width:0}
.par-nome{font-family:'Playfair Display',serif;font-size:14.5px;font-weight:700;line-height:1.25;cursor:pointer;word-break:break-word}
.par-nome:active{color:var(--wine)}
.par-sub{font-size:11.5px;color:var(--mu);margin-top:3px;word-break:break-word}
.par-sub em{font-style:normal}
.par-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;font-size:11px;color:var(--mu)}
.par-chave{margin-top:6px;font-size:10px;color:var(--mu);word-break:break-all}
.par-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--bo)}
.par-acoes .wc-note{margin:0;flex:1;min-width:140px}

/* ── UTILIZADORES ── */
.ua-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bo);font-size:13px}
.ua-row:last-child{border-bottom:none}
.ua-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ua-adm{font-style:normal;font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.3px}
.jdel{width:28px;height:28px;border-radius:8px;border:1px solid var(--bo);background:var(--bg);color:var(--dg);cursor:pointer;flex:0 0 auto;font-size:13px}
.jdel.ok{color:var(--vd)}

/* ── TOAST ── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:800;
  background:var(--wine-dk);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;font-weight:600;
  max-width:90vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.erro{background:var(--dg)}

/* ── ECRÃS ESTREITOS ── */
@media (max-width:520px){
  .kpi-grid{grid-template-columns:1fr}
  .par-grid{grid-template-columns:1fr}
  .tbl-h,.tbl-r{grid-template-columns:1.4fr .6fr .9fr .9fr;font-size:11.5px}
  .tbl-h span:nth-child(5),.tbl-r span:nth-child(5){display:none}
  .it{font-size:11px}
}

/* ══════════════════════════════════════════════════════════════════
   A CAPA DA FICHA — o mesmo desenho da Garrafeira

   Porque é que isto é copiado e não "inspirado": são as duas a mesma
   coisa vista de dois sítios. Quem anda nas duas não devia ter de
   aprender dois ecrãs para ver um vinho, e a diferença que interessa
   (de onde veio cada campo) está no CONTEÚDO, não na moldura.

   O que NÃO veio de lá: o `modal.pagina` — o cabeçalho que encolhe ao
   rolar. São duzentas linhas de CSS presas a uma variável que o JS
   atualiza a cada scroll, para resolver um problema que lá existe (a
   ficha é uma página cheia de garrafas, prateleiras e consumos) e aqui
   não (cabe quase sempre num ecrã).
   ══════════════════════════════════════════════════════════════════ */
.mhero{position:relative;margin:-20px -18px 4px;padding:18px;
  background:linear-gradient(155deg,#3d0e20,var(--wine-dk) 55%,#8d2748);color:#fff;overflow:hidden}
.mhero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8}
.mhero .mx{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.14);color:#fff;
  border:none;width:30px;height:30px;border-radius:50%;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.mhero .mx:hover{background:rgba(255,255,255,.3)}
.mhero-in{display:flex;gap:14px;align-items:center;padding-right:34px}
/* A moldura da garrafa: fundo de papel, cantos redondos, `overflow:hidden`
   e a fotografia em `cover`. Sem o overflow a foto ficava um quadrado
   branco no meio do bordô com a garrafa desenhada a espreitar por baixo —
   é uma lição que a Garrafeira já pagou. */
.mhero-g{width:64px;height:104px;flex-shrink:0;position:relative;display:flex;align-items:center;
  justify-content:center;overflow:hidden;border-radius:11px;
  background:linear-gradient(160deg,#fff,var(--bg));border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.mhero-g svg{width:100%;height:auto;max-height:94px;padding:5px 3px;
  filter:drop-shadow(0 2px 4px rgba(43,10,22,.22))}
.mhero-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mhero-tx{min-width:0;flex:1}
.mhero-k{font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.mhero h3{font-family:'Playfair Display',serif;font-weight:600;font-size:21px;line-height:1.2;margin-top:4px;
  word-break:break-word}
.mhero-s{font-size:12px;color:rgba(255,255,255,.78);margin-top:4px}
.mhero-s em{font-style:normal;opacity:.7}
.mhero-n{display:inline-flex;align-items:center;gap:5px;margin-top:8px;margin-right:5px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:99px;
  padding:3px 10px;font-size:11px;font-weight:600;color:#f6dfa8}

/* Crachás e secções: também da Garrafeira, mesma ideia — a cor é excepção,
   não regra. Dourado = distinção; o resto vive em tons de papel. */
.vc-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;align-items:center}
.vc-badges:empty{display:none}
.bdg{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:3px 9px;border-radius:99px;
  background:var(--bg);color:var(--mu);border:1px solid var(--bo);white-space:nowrap;line-height:1.5}
.bdg.cas{background:#f7f3f8;color:#5c4166;border-color:#e9dfec}
.bdg.men{background:#fdf6e8;color:#7a5b0a;border-color:#eddfba;font-weight:600}
.msec{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--wine);margin:20px 0 4px}
.msec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--wine),transparent);opacity:.35}
.macoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.macoes.fim{margin-top:20px;padding-top:16px;border-top:1px solid var(--bo)}
.btn-prim.auto{width:auto;flex:1 1 auto;min-width:0}
.fi-espera{padding:30px 0;text-align:center}

/* ── EDITAR ── */
.ed-campo{margin-bottom:10px}
.ed-campo label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.4px;margin:0 0 5px}
/* De onde vem o valor que está lá AGORA, ao lado do rótulo do campo. Sem
   isto, corrige-se às cegas: não se via que se ia escrever por cima de uma
   pesquisa paga. */
.ed-de{display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0}
.ed-campo input[type=text],.ed-campo select,.ed-campo textarea{
  width:100%;padding:10px 12px;border:1px solid var(--bo);border-radius:10px;font-size:14px;
  background:#fff;color:var(--tx)}
.ed-campo textarea{resize:vertical;line-height:1.5}
.ed-campo input:focus,.ed-campo select:focus,.ed-campo textarea:focus{outline:none;border-color:var(--wine)}
.ed-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:4px 0 6px;cursor:pointer}
.ed-oculto{display:none}

/* ── PROCURAR ── */
.pr-acoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.pr-acoes .wc-note{margin:0 0 0 auto}
.pr-campos{display:flex;flex-direction:column;margin-top:6px}
.pr-campo{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--bo);
  font-size:13px;cursor:pointer}
.pr-campo:last-child{border-bottom:none}
.pr-campo input{width:17px;height:17px;flex-shrink:0;accent-color:var(--wine)}
.pr-nome{flex:1;min-width:0;font-weight:600}
.pr-falta{font-size:10.5px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.4px}
.pr-espera{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--bo);
  border-radius:12px;padding:14px;margin-top:14px}
.pr-espera.erro{background:#fdf2f1;border-color:#f2cdcb}
.wc-spin.escuro{border-color:rgba(107,18,48,.2);border-top-color:var(--wine);flex-shrink:0}
.pr-res{background:var(--bg);border:1px solid var(--bo);border-radius:12px;padding:14px;margin-top:14px}
.pr-res-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.pr-res-cab .wc-note{margin:0;font-size:10.5px}
.pr-res-l{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pr-res-fora{margin-top:6px}
.pr-res-fora div{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;font-size:12.5px;padding:4px 0}
.pr-res-fora .wc-note{margin:0}

/* ── PROCURAR, pesquisa manual (copiar prompt, colar resposta) ── */
.pr-manual label{display:block;font-size:11px;font-weight:600;color:var(--mu);
  text-transform:uppercase;letter-spacing:.4px;margin:14px 0 5px}
.pr-manual textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--bo);
  border-radius:10px;font-size:13px;line-height:1.5;font-family:inherit;background:#fff;
  color:var(--tx);resize:vertical}
.pr-manual textarea:focus{outline:none;border-color:var(--wine)}
.pr-manual .wc-note.erro{margin-top:6px}

/* ── ALERTAS ── */
.it-n{display:none;background:var(--dg);color:#fff;font-size:9.5px;font-weight:700;
  border-radius:99px;padding:1px 5px;margin-left:4px;line-height:1.5}
.it-n.on{display:inline-block}
.wc-card.rep{padding:14px}
.rep-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rep-est{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 8px;border-radius:99px;background:var(--bg);color:var(--mu);border:1px solid var(--bo);flex-shrink:0}
.rep-est.aberto{background:#fdf2f1;color:var(--dg);border-color:#f2cdcb}
.rep-est.resolvido{background:#eef7f1;color:var(--vd);border-color:#cfe3d8}
/* Os dois valores lado a lado, que é a única forma de isto se ler num
   segundo. O terceiro ("agora") só aparece quando já mudou. */
.rep-vals{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rep-vals>div{flex:1 1 160px;min-width:0;background:var(--bg);border:1px solid var(--bo);
  border-radius:10px;padding:8px 10px}
.rep-vals>div.deles{background:#fdf6e8;border-color:#f0e0b8}
.rep-vals>div.agora{background:#eef7f1;border-color:#cfe3d8}
.rep-vals span{display:block;font-size:9.5px;font-weight:700;color:var(--mu);
  text-transform:uppercase;letter-spacing:.4px}
.rep-vals b{display:block;font-size:14px;margin-top:2px;word-break:break-word}
.rep-vals .og-tag{display:inline-block;margin-top:5px;text-transform:none;letter-spacing:0;font-weight:600}
.rep-nota{font-style:italic;margin-top:8px}
.rep-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--bo)}

@media (max-width:520px){
  .fi-campo{flex-direction:column;gap:2px}
  .fi-k{flex:none;padding-top:0}
  .mhero{margin:-20px -18px 4px}
}