/* ============================================================
   BARRICA — Carta de Vinhos · tema cobre & dourado
   ============================================================ */
:root {
  --cream:      #F4ECE1;
  --cream-2:    #EFE4D6;
  --paper:      #FBF6EE;
  --ink:        #3A2E25;
  --ink-soft:   #6B5A4A;
  --copper:     #8B5E3C;
  --copper-dk:  #6E4526;
  --gold:       #B08D57;
  --gold-lt:    #C8A876;
  --line:       #D8C6AE;
  --shadow:     rgba(58,46,37,.12);
  --serif:      "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:       "Jost", "Century Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(1200px 500px at 50% -10%, var(--cream-2), transparent 60%);
  line-height: 1.5;
}

/* ---------- Cabeçalho ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: rgba(244,236,225,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font-family: var(--serif); font-weight: 700; letter-spacing: .28em; font-size: 20px; color: var(--ink); }
.topbar .brand small { display:block; font-family: var(--sans); font-size: 8px; letter-spacing:.34em; color: var(--gold); margin-top:2px; }
.lang-toggle { display:flex; gap:0; border:1px solid var(--gold); border-radius:999px; overflow:hidden; }
.lang-toggle button {
  font-family: var(--sans); font-size: 11px; letter-spacing:.12em;
  padding: 6px 14px; border:0; background: transparent; color: var(--copper); cursor: pointer;
}
.lang-toggle button.active { background: var(--copper); color: var(--paper); }

/* ---------- Hero ---------- */
.hero { text-align:center; padding: 48px 20px 20px; }
.hero .logo-img { width: min(340px, 74vw); height: auto; display: block; margin: 0 auto; }
.hero .tagline { font-style: italic; color: var(--copper-dk); font-size: clamp(16px,3.4vw,22px); margin-top: 20px; }

.divider { display:flex; align-items:center; justify-content:center; gap:12px; margin: 8px auto 4px; color: var(--gold); }
.divider::before, .divider::after { content:""; height:1px; width: 46px; background: var(--gold-lt); }
.divider span { font-size: 14px; }

/* Seletor de idiomas (agora no hero) */
.hero .lang-toggle { display:inline-flex; margin: 14px auto 0; border:1px solid var(--gold); border-radius:999px; overflow:hidden; }
.hero .lang-toggle button {
  font-family: var(--sans); font-size: 11px; letter-spacing:.1em;
  padding: 6px 13px; border:0; border-right:1px solid var(--line);
  background: transparent; color: var(--copper); cursor: pointer;
}
.hero .lang-toggle button:last-child { border-right:0; }
.hero .lang-toggle button.active { background: var(--copper); color: var(--paper); }

/* ---------- Corpo ---------- */
.wrap { max-width: 820px; margin: 0 auto; padding: 10px 20px 80px; }

.filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin: 26px 0 30px; }
.filters button {
  font-family: var(--sans); font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  padding: 7px 15px; border:1px solid var(--line); border-radius:999px;
  background: var(--paper); color: var(--copper); cursor:pointer; transition:.15s;
}
.filters button:hover { border-color: var(--gold); }
.filters button.active { background: var(--copper); color: var(--paper); border-color: var(--copper); }

.tipo-group { margin-bottom: 40px; }
.tipo-head { text-align:center; margin: 0 0 22px; }
.tipo-head h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing:.18em; text-transform: uppercase;
  font-size: clamp(20px,4.6vw,28px); margin: 0; color: var(--copper-dk);
  display:inline-flex; align-items:center; gap:14px;
}
.tipo-head h2::before, .tipo-head h2::after { content:""; height:1px; width:34px; background: var(--gold); }

.vinho {
  display:grid; grid-template-columns: 1fr auto; gap: 4px 18px;
  padding: 16px 4px; border-bottom: 1px dotted var(--line);
}
.vinho:last-child { border-bottom: 0; }
.v-main { min-width: 0; }
.v-nome { font-size: clamp(19px,4.4vw,23px); font-weight: 600; color: var(--ink); }
.v-nome .ano { color: var(--gold); font-weight:500; }
.v-meta { font-family: var(--sans); font-size: 11.5px; letter-spacing:.06em; color: var(--ink-soft); margin-top: 3px; text-transform: uppercase; }
.v-meta .sep { color: var(--gold-lt); margin: 0 7px; }
.v-nota { font-style: italic; color: var(--copper-dk); font-size: 15px; margin-top: 5px; }
.v-precos { text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }
.v-precos .linha { font-size: 23px; font-weight: 500; color: var(--copper); line-height: 1.25; }
.v-precos .linha + .linha { margin-top: 2px; }
.v-precos .rot { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing:.12em; color: var(--gold); text-transform:uppercase; }

.rodape { text-align:center; padding: 30px 20px 60px; color: var(--ink-soft); }
.rodape .assin { font-style: italic; color: var(--copper-dk); }
.rodape .curadoria { font-style: italic; color: var(--copper-dk); font-size: 17px; margin: 0 0 4px; }
.rodape .curadoria span { color: var(--gold); font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing:.14em; text-transform: uppercase; margin-right: 4px; }
.rodape .aviso { font-size: 12.5px; font-style: italic; margin-top: 14px; }
.rodape .up { font-family: var(--sans); font-size: 10px; letter-spacing:.14em; color: var(--gold); margin-top: 18px; text-transform: uppercase; }
.rodape a.admin-link { color: var(--gold); text-decoration: none; border-bottom:1px dotted var(--gold); }

.estado { text-align:center; padding: 60px 20px; color: var(--ink-soft); font-style: italic; }

@media (max-width: 560px) {
  .wrap { padding: 6px 16px 70px; }
  .hero { padding: 34px 16px 14px; }
  .vinho { grid-template-columns: 1fr; gap: 8px 0; padding: 15px 2px; }
  .v-precos {
    text-align:left; margin-top: 2px;
    display:flex; flex-wrap:wrap; gap: 6px 22px; align-items: baseline;
  }
  .v-precos .linha { font-size: 22px; }
  .v-precos .linha + .linha { margin-top: 0; }
  .v-nome { font-size: 21px; }
  .v-nota { font-size: 15.5px; }
  .filters button { padding: 8px 14px; }
}

/* ============================================================
   BACKOFFICE
   ============================================================ */
.admin-body { background: var(--cream); font-family: var(--sans); color: var(--ink); }
.admin-head {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px; background: var(--copper); color: var(--paper);
}
.admin-head .brand { font-family: var(--serif); letter-spacing:.24em; font-weight:700; }
.admin-head .brand small { font-family: var(--sans); font-size:8px; letter-spacing:.3em; display:block; color: var(--gold-lt); }
.admin-head .right { display:flex; gap:10px; align-items:center; }
.btn {
  font-family: var(--sans); font-size: 13px; letter-spacing:.04em;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--gold); cursor: pointer;
  background: var(--paper); color: var(--copper-dk); transition:.15s;
}
.btn:hover { border-color: var(--copper); }
.btn-primary { background: var(--copper); color: var(--paper); border-color: var(--copper); }
.btn-primary:hover { background: var(--copper-dk); }
.btn-danger { color: #9c3b2e; border-color:#d8a99f; background:#fbeeeb; }
.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.5); }
.btn-sm { padding: 6px 11px; font-size: 12px; }

.admin-wrap { max-width: 1000px; margin: 0 auto; padding: 22px; }

.card { background: var(--paper); border:1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 6px 22px var(--shadow); }
.card + .card { margin-top: 20px; }
.card h3 { font-family: var(--serif); font-size: 22px; color: var(--copper-dk); margin: 0 0 14px; letter-spacing:.04em; }

/* Login */
.login-screen { min-height: 78vh; display:flex; align-items:center; justify-content:center; padding: 20px; }
.login-box { width: 100%; max-width: 380px; text-align:center; }
.login-box .login-logo { width: min(260px, 70%); height:auto; display:block; margin: 0 auto 4px; }
.login-box .by { font-size: 9px; letter-spacing:.4em; color: var(--gold); margin-bottom: 22px; }

label.field { display:block; text-align:left; margin: 12px 0; font-size: 13px; color: var(--ink-soft); }
label.field span { display:block; margin-bottom: 5px; letter-spacing:.04em; }
input, select, textarea {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,87,.18); }
textarea { min-height: 62px; resize: vertical; font-family: var(--serif); font-size:16px; }

.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.toolbar .group { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.search { max-width: 240px; }

table.lista { width:100%; border-collapse: collapse; }
table.lista th, table.lista td { text-align:left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
table.lista th { font-size: 11px; text-transform: uppercase; letter-spacing:.1em; color: var(--gold); }
table.lista td .nome { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.pill { display:inline-block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding: 3px 9px; border-radius:999px; background: var(--cream-2); color: var(--copper-dk); }
.pill.off { background:#f0e3df; color:#9c3b2e; }
.acoes { display:flex; gap:6px; justify-content:flex-end; }

.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
@media (max-width:640px){ .grid2,.grid3{ grid-template-columns:1fr; } .col-hide{ display:none; } }

/* Modal */
.modal-bg { position:fixed; inset:0; background: rgba(58,46,37,.5); display:none; align-items:flex-start; justify-content:center; padding: 30px 16px; overflow:auto; z-index: 50; }
.modal-bg.open { display:flex; }
.modal { width:100%; max-width: 620px; background: var(--paper); border-radius: 16px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal h3 { margin-top:0; }
.modal-actions { display:flex; justify-content:space-between; gap:10px; margin-top: 18px; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); opacity:0; transition:.25s;
  background: var(--copper-dk); color: var(--paper); padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 100; pointer-events:none; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
.toast.err { background:#9c3b2e; }

.help { font-size:12.5px; color: var(--ink-soft); line-height:1.5; }
.help code { background: var(--cream-2); padding: 1px 6px; border-radius: 5px; font-family: ui-monospace, monospace; font-size: 12px; }
.drag-handle { cursor: grab; color: var(--gold); font-size:16px; user-select:none; }
tr.dragging { opacity:.5; }