/* ============================================================
   Vila Nova — Área interna · estilos
   ============================================================ */
:root{
  --ink:#0a2c1f; --ink2:#0e3a29; --forest:#1e5c3a; --leaf:#3a9b50; --lime:#86c53c;
  --orange:#e8551f; --amber:#e2a02c;
  --paper:#f4f1e8; --panel:#fcfbf7; --white:#fff;
  --text:#14211a; --muted:#5d6b61; --line:#e3ddcf;
  --topH:88px; --sideW:246px;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(10,44,31,.05),0 16px 34px -22px rgba(10,44,31,.35);
  --font:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Schibsted Grotesk',system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:var(--font); color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--display); letter-spacing:-.01em; margin:0; }
::selection{ background:color-mix(in srgb,var(--lime) 40%,#fff); }

/* ---------- Topbar ---------- */
.vnav-top{ position:fixed; top:0; left:0; right:0; height:var(--topH); z-index:50;
  display:flex; align-items:center; gap:14px; padding:0 18px;
  background:color-mix(in srgb,var(--ink) 96%,#000); color:#fff; }
.vnav-brand{ display:flex; align-items:center; gap:10px; }
.vnav-brand img{ height:80px; width:auto; }
.vnav-badge{ display:none; }
.vnav-user{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.vnav-avatar{ width:34px; height:34px; border-radius:50%; background:var(--forest); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; }
.vnav-uname{ font-size:14px; font-weight:600; }
.vnav-logout{ border:none; background:rgba(255,255,255,.12); color:#fff; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; transition:.2s; }
.vnav-logout:hover{ background:rgba(255,255,255,.24); }
.vnav-logout svg{ width:18px; height:18px; }
.vnav-burger{ display:none; width:40px; height:40px; border:none; background:rgba(255,255,255,.1); border-radius:10px; position:relative; }
.vnav-burger span{ position:absolute; left:10px; right:10px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease); }
.vnav-burger span:nth-child(1){ top:14px; } .vnav-burger span:nth-child(2){ top:19px; } .vnav-burger span:nth-child(3){ top:24px; }
body.vnav-open .vnav-burger span:nth-child(1){ top:19px; transform:rotate(45deg); }
body.vnav-open .vnav-burger span:nth-child(2){ opacity:0; }
body.vnav-open .vnav-burger span:nth-child(3){ top:19px; transform:rotate(-45deg); }

/* ---------- Sidebar ---------- */
.vnav-side{ position:fixed; top:var(--topH); left:0; bottom:0; width:var(--sideW); z-index:40;
  background:var(--panel); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.vnav-link{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font-weight:600; font-size:14.5px; color:var(--muted); transition:.2s var(--ease); }
.vnav-link svg{ width:20px; height:20px; flex-shrink:0; }
.vnav-link:hover{ background:var(--paper); color:var(--forest); }
.vnav-link.active{ background:var(--forest); color:#fff; box-shadow:0 10px 22px -12px rgba(30,92,58,.6); }
.vnav-note{ display:block; margin:-1px 0 5px 46px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:500; }
.vnav-demo{ margin-top:auto; background:color-mix(in srgb,var(--amber) 14%,#fff); border:1px solid color-mix(in srgb,var(--amber) 40%,#fff); border-radius:12px; padding:11px 13px; font-size:12px; font-weight:700; color:#8a5a12; line-height:1.4; }
.vnav-demo small{ font-weight:500; color:#a9803a; }
.vnav-scrim{ position:fixed; inset:0; z-index:35; background:rgba(7,26,18,.5); opacity:0; visibility:hidden; transition:.3s; }

/* ---------- Área de conteúdo ---------- */
body.vnav-ready{ padding-top:var(--topH); padding-left:var(--sideW); }
.vmain{ padding:clamp(18px,3vw,34px); max-width:1240px; }
.vpage-head{ margin-bottom:22px; }
.vpage-head h1{ font-size:clamp(22px,3vw,30px); font-weight:800; }
.vpage-head p{ margin:6px 0 0; color:var(--muted); font-size:14.5px; }

@media(max-width:900px){
  body.vnav-ready{ padding-left:0; }
  .vnav-burger{ display:block; }
  .vnav-side{ transform:translateX(-100%); transition:transform .35s var(--ease); box-shadow:0 30px 60px -20px rgba(0,0,0,.4); }
  body.vnav-open .vnav-side{ transform:none; }
  body.vnav-open .vnav-scrim{ opacity:1; visibility:visible; }
}

/* ---------- Componentes reutilizáveis ---------- */
.vcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }
.vgrid{ display:grid; gap:16px; }
.vstat{ padding:20px 22px; }
.vstat__k{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.vstat__v{ font-family:var(--display); font-size:30px; font-weight:800; color:var(--forest); margin-top:6px; letter-spacing:-.02em; }
.vbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:999px; padding:11px 18px; font-weight:700; font-size:14px; transition:.2s var(--ease); }
.vbtn svg{ width:17px; height:17px; }
.vbtn--primary{ background:var(--orange); color:#fff; box-shadow:0 12px 26px -14px rgba(232,85,31,.7); }
.vbtn--primary:hover{ background:#cf4a18; transform:translateY(-2px); }
.vbtn--forest{ background:var(--forest); color:#fff; }
.vbtn--forest:hover{ background:#174a2f; transform:translateY(-2px); }
.vbtn--ghost{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.vbtn--ghost:hover{ background:var(--paper); }
.vinput{ width:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; font-size:14.5px; font-family:inherit; color:var(--text); outline:none; background:#fff; transition:border-color .2s; }
.vinput:focus{ border-color:var(--leaf); }
.vlabel{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:6px; }

/* tabela genérica */
.vtable{ width:100%; border-collapse:collapse; }
.vtable th{ text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:11px 12px; border-bottom:1px solid var(--line); }
.vtable td{ padding:12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.vtable tr:hover td{ background:var(--paper); }
.vtag{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
.vtag--on{ background:color-mix(in srgb,var(--leaf) 18%,#fff); color:var(--forest); }
.vtag--off{ background:color-mix(in srgb,#d9422b 12%,#fff); color:#c4392c; }

/* modal genérico */
.vmodal-ov{ position:fixed; inset:0; z-index:120; background:rgba(7,26,18,.6); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:none; align-items:flex-end; justify-content:center; }
.vmodal-ov.open{ display:flex; }
@media(min-width:680px){ .vmodal-ov{ align-items:center; padding:24px; } }
.vmodal{ background:var(--panel); width:100%; max-width:520px; max-height:92vh; overflow:hidden; border-radius:20px 20px 0 0; display:flex; flex-direction:column; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); }
@media(min-width:680px){ .vmodal{ border-radius:20px; } }
.vmodal__head{ padding:18px 22px; background:linear-gradient(150deg,var(--ink2),var(--ink)); color:#fff; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.vmodal__head h3{ font-size:18px; font-weight:800; }
.vmodal__x{ border:none; background:rgba(255,255,255,.14); color:#fff; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; }
.vmodal__x svg{ width:17px; height:17px; }
.vmodal__body{ padding:20px 22px; overflow-y:auto; flex:1; }
.vmodal__foot{ padding:14px 22px 20px; border-top:1px solid var(--line); display:flex; gap:10px; flex-shrink:0; }
.vmodal__foot .vbtn{ flex:1; }