/* Identidade Minas Pharma — replicada do checkout/emails transacionais.
   Marca: vermelho #C8102E; cartao branco + filete 3px; rodape institucional. */
:root{
  --brand:#C8102E; --brand-dark:#a30d24;
  --page:#f4f4f4; --surface:#fff; --surface-soft:#fafafa;
  --text:#222; --muted:#8a8a8a; --border:#eee; --border-strong:#e2ded6;
  --ok-bg:#e6f4ec; --ok-tx:#1e7a46; --wait-bg:#f4f4f4; --wait-tx:#6b6b6b;
  --danger-bg:#fdeaea; --danger-tx:#C8102E;
  --radius:10px; --shadow:0 1px 4px rgba(0,0,0,.08);
  --font:-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--page);}
.muted{color:var(--muted); font-weight:400;}
.disc{font-size:11px; color:var(--muted);}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; background:var(--surface); border-bottom:3px solid var(--brand);
  position:sticky; top:0; z-index:5; box-shadow:var(--shadow);}
.brand{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--text);}
.brand img{height:40px; width:auto; display:block;}
.brand small{color:var(--muted); font-weight:400;}
.nav{display:flex; align-items:center; gap:18px;}
.nav a{color:var(--text); text-decoration:none; font-size:14px; display:flex; align-items:center; gap:6px;}
.nav a:hover{color:var(--brand);}

.app{max-width:960px; margin:0 auto; padding:26px 20px 40px;}
.loading{color:var(--muted); padding:48px; text-align:center;}
h1{font-size:21px; font-weight:600; margin:0 0 4px;} h2{font-size:16px; font-weight:600;}
label{font-size:13px; color:var(--text); display:block; margin-bottom:6px; font-weight:500;}

input,select,button,textarea{font-family:inherit; font-size:14px; border:1px solid var(--border-strong);
  border-radius:8px; background:var(--surface); color:var(--text); padding:10px;}
input:focus,select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(200,16,46,.12);}
button{cursor:pointer; transition:.15s;} button:hover{background:var(--surface-soft);} button:active{transform:scale(.99);}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:500;}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark);}
.linkbtn{border:none; background:none; color:var(--muted); padding:0; display:flex; gap:6px; align-items:center;}
.linkbtn:hover{background:none; color:var(--brand);}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);}
.grid{display:grid; gap:14px;} .row{display:flex; gap:10px; align-items:center;}
.chip{padding:9px 6px; font-size:13px; text-align:center; border-radius:8px;}
.on{border-color:var(--brand)!important; background:rgba(200,16,46,.06)!important; color:var(--brand)!important;}
.badge{font-size:12px; padding:3px 10px; border-radius:20px; display:inline-block; font-weight:500;}
.b-ok{background:var(--ok-bg); color:var(--ok-tx);} .b-wait{background:var(--wait-bg); color:var(--wait-tx);}
.b-danger{background:var(--danger-bg); color:var(--danger-tx);}
.toast{margin:14px auto; max-width:900px; padding:11px 15px; border-radius:8px; font-size:14px;}
.stat{background:var(--surface-soft); border:1px solid var(--border); border-radius:8px; padding:13px;}
.stat .k{font-size:12px; color:var(--muted);} .stat .v{font-size:24px; font-weight:600; color:var(--brand);}
.timeline{list-style:none; padding:0; margin:8px 0 0;}
.timeline li{display:flex; gap:10px; align-items:center; padding:6px 0; font-size:14px;}
.dot{width:10px; height:10px; border-radius:50%; background:var(--border-strong);}
.dot.done{background:var(--ok-tx);}
a.plain{color:var(--brand); text-decoration:none;}

.site-footer{max-width:960px; margin:8px auto 0; padding:22px 20px; text-align:center;
  color:var(--muted); font-size:12px; line-height:1.7; border-top:1px solid var(--border);}
.site-footer strong{color:var(--text); font-weight:500;}