/* ================================================================
   Dog Beer — design system do painel (cliente / afiliado / auth)
   Paleta: creme + dourado + vinho, tipografia Anton + Manrope.
   ================================================================ */
:root{
  --gold:#C8862F; --gold-d:#8A5A18; --gold-l:#E3A94D; --wine:#8A2222; --ink:#1A1206;
  --bg:#F6EDE0; --cream:#FDF7EE; --white:#fff;
  --ok:#1a7f45; --warn:#a86a00; --err:#b3261e;
  --shadow:6px 6px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
  --r:16px; --border:3px solid var(--ink);
  --sans:'Manrope',system-ui,sans-serif; --display:'Anton',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--ink);overflow-x:hidden;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--gold-d);text-decoration:none} a:hover{color:var(--wine)}
img{max-width:100%}
::selection{background:var(--gold-l);color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1}

@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Foco visível (navegação por teclado) ---------- */
:focus-visible{outline:3px solid var(--wine);outline-offset:2px;border-radius:6px}
.painel-top a:focus-visible{outline-color:var(--gold-l)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--gold-l);color:var(--ink);
  font-weight:800;padding:12px 18px;border:var(--border);border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--display);font-size:18px;letter-spacing:.4px;text-transform:uppercase;
  padding:14px 26px;border-radius:14px;border:var(--border);box-shadow:var(--shadow-sm);
  background:var(--white);color:var(--ink);transition:transform .12s,box-shadow .12s;min-height:48px;text-align:center}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);color:var(--ink)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--wine);outline-offset:2px}
.btn-lime,.btn-gold{background:var(--gold-l)}
.btn-pink,.btn-wine{background:var(--wine);color:#fff}
.btn-wine:hover{color:#fff}
.btn-ghost{box-shadow:none;background:transparent} .btn-block{width:100%}
.btn-sm{font-size:14px;padding:9px 16px;min-height:44px;border-radius:11px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}

/* ---------- Cartões ---------- */
.card{background:#fff;border:var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:26px}
.card-flat{background:#fff;border:var(--border);border-radius:var(--r);padding:20px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;padding:6px 12px;border-radius:999px;border:2.5px solid var(--ink)}
.badge-lime,.badge-gold{background:var(--gold-l)} .badge-pink,.badge-wine{background:var(--wine);color:#fff}
.badge-ok{background:#c9f5d8} .badge-warn{background:#ffe6b3} .badge-err{background:#ffd6d6}
.badge-gray{background:#eee}

/* ---------- Formulários ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.input,input:not([type]),input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;padding:13px 14px;border:var(--border);border-radius:12px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.input:focus,input:focus,select:focus,textarea:focus{outline:3px solid var(--gold);outline-offset:1px}
textarea{resize:vertical;min-height:110px}
.hint{font-size:12px;color:#7a6a54;margin-top:4px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1;min-width:150px}

/* ---------- Toast / flash ---------- */
.toasts{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:90vw}
.toast{background:#fff;border:var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:13px 16px;font-weight:600;font-size:14px;animation:rise .25s ease both;display:flex;gap:10px;align-items:center}
.toast.ok{background:#e8fbef}.toast.erro{background:#ffecec}.toast.info{background:#fff6e2}

/* ================= PAINEL (cliente / afiliado) ================= */
.painel{min-height:100vh;background:var(--bg)}
.painel-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px max(22px, calc((100% - 1000px) / 2));background:var(--ink);border-bottom:3px solid var(--gold)}
.painel-top .logo img{height:28px;display:block}
.painel-top nav{display:flex;gap:8px;flex-wrap:wrap}
.painel-top nav a{color:#EFE3D2;font-weight:700;font-size:14px;padding:8px 12px;border-radius:10px;
  display:inline-flex;align-items:center;min-height:44px;transition:background .2s,color .2s}
.painel-top nav a.on,.painel-top nav a:hover{background:rgba(227,169,77,.22);color:#fff}
.painel-wrap{margin:0 auto;padding:26px max(20px, calc((100% - 1000px) / 2)) 60px}
.painel h1{font-size:34px;margin:0 0 4px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.stat{background:#fff;border:var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px}
.stat .n{font-family:var(--display);font-size:38px;line-height:1}
.stat .l{font-size:13px;font-weight:600;color:#6d5c46;text-transform:uppercase;letter-spacing:.4px}

/* tabela */
.tabela{width:100%;border-collapse:collapse;background:#fff;border:var(--border);border-radius:var(--r);overflow:hidden}
.tabela th{background:var(--ink);color:#fff;text-align:left;padding:12px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.tabela td{padding:12px 14px;border-top:2px solid #efe2d1;font-size:14px}
.tabela tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.table-wrap table{min-width:520px}

/* auth card */
.auth{max-width:430px;margin:6vh auto;padding:0 18px}
.auth .card{padding:30px}
.auth h1{font-size:30px;text-align:center;margin:0 0 4px}
.auth .sub{text-align:center;color:#6d5c46;font-size:14px;margin-bottom:22px}
.auth-logo{text-align:center;margin-bottom:18px}.auth-logo img{height:40px}

/* utilidades */
.muted{color:#7a6a54}.center{text-align:center}.mt{margin-top:18px}.mb{margin-bottom:18px}
.flex{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}
.wrap-narrow{max-width:720px;margin:0 auto}
.pill-status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:2px solid var(--ink);text-transform:uppercase;display:inline-block}
button,[role=button],summary,label[for]{cursor:pointer}
table a{text-decoration:underline;text-underline-offset:2px}
.s-ativa,.s-pago,.s-disponivel,.s-entregue{background:#c9f5d8}
.s-pendente,.s-solicitada,.s-aberto,.s-enviado{background:#ffe6b3}
.s-pausada,.s-aguardando{background:#e8e0d4}
.s-cancelada,.s-falhou,.s-inadimplente,.s-recusado,.s-fechado,.s-estornado{background:#ffd6d6}
@media(max-width:600px){.painel h1{font-size:28px}.painel-wrap{padding:18px 14px 50px}.painel-top{padding:14px 14px}}

/* ---- Scroll reveal (opt-in via <html class="motion">) ---- */
html.motion [data-reveal]{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.25,1.15);transition-delay:var(--rd,0ms)}
html.motion [data-reveal="up"]{transform:translateY(38px)}
html.motion [data-reveal="right"]{transform:translateX(48px)}
html.motion [data-reveal="left"]{transform:translateX(-48px)}
html.motion [data-reveal="fade"]{transform:none}
html.motion [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.motion [data-reveal]{opacity:1!important;transition:none!important;transform:none!important}
}