/* ZeraSign — design system. Identidade visual alinhada ao site zeracompany.com:
   fundo claro, tipografia Inter, azul-aço (#5B7A99) como marca, botões em pílula,
   cards brancos com sombra suave. Tema escuro disponível como opção (data-theme). */
:root{
  /* Claro = padrão (identidade Zera) */
  --bg:#f6f8fb; --panel:#ffffff; --panel-2:#f1f5f9;
  --line:#e9edf2; --line-2:#dfe5ec;
  --blue:#5b7a99; --blue-2:#47617b; --light:#8aa2b8; --lighter:#34495e; --pale:#47617b;
  --ink:#1f2a37; --muted:#647386;
  --ok:#0f9d63; --ok-bg:rgba(15,157,99,.10); --ok-line:rgba(15,157,99,.28);
  --bad:#dc2626; --bad-bg:rgba(220,38,38,.08); --bad-line:rgba(220,38,38,.24);
  --radius:16px;
  --shadow:0 1px 2px rgba(31,42,55,.06), 0 1px 3px rgba(31,42,55,.05);
  --shadow-lg:0 18px 40px -20px rgba(91,122,153,.45);
  --glow:var(--shadow);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:'Inter','Inter var',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(720px 380px at 8% -10%, rgba(91,122,153,.07), transparent 60%),
    radial-gradient(640px 360px at 100% -8%, rgba(138,162,184,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
}

/* Header + navegação (espelha o header do site: branco translúcido, borda clara) */
.zs-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 26px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.zs-header .brand{display:flex; align-items:center; gap:14px}
.zs-header .brand img{height:30px; display:block}
.zs-header .tag{color:var(--muted); font-size:12.5px; padding-left:14px; border-left:1px solid var(--line)}
.zs-nav a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; margin-left:22px;
  transition:color .2s; position:relative}
.zs-nav a:hover, .zs-nav a.on{color:var(--ink)}
.zs-nav a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-17px; height:2px; border-radius:2px;
  background:var(--blue);
}

/* Layout */
.wrap{max-width:1100px; margin:30px auto; padding:0 22px}
.grid{display:grid; gap:22px; grid-template-columns:1fr 1fr}
.full{grid-column:1/-1}

/* Cards brancos com entrada suave (como o reveal do site) */
.card{
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
  transition:box-shadow .35s ease, border-color .35s ease;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.card:hover{box-shadow:var(--shadow-lg); border-color:rgba(91,122,153,.35)}
.card:nth-child(2){animation-delay:.06s}
.card:nth-child(3){animation-delay:.12s}
.card:nth-child(4){animation-delay:.18s}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

h1,h2,h3{margin:0 0 14px; color:var(--ink); letter-spacing:-.01em}
h1{font-weight:800}
h2{font-size:15px; color:var(--lighter); font-weight:700; letter-spacing:0}
h2 .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blue);
  margin-right:9px; vertical-align:middle}

/* Form */
label{display:block; font-size:11px; color:var(--muted); margin:13px 0 5px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:600}
input,select,textarea{
  width:100%; padding:11px 13px; background:#fff; color:var(--ink);
  border:1px solid var(--line-2); border-radius:11px; font-size:14px; font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:#9aa7b5}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(91,122,153,.18);
}
select option{background:#fff}

/* Botões — pílula sólida azul-aço (igual ao CTA do site) */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff; border:0;
  padding:11px 22px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; box-shadow:0 1px 2px rgba(31,42,55,.10);
  transition:background .2s, transform .12s, box-shadow .2s;
}
.btn:hover{background:var(--blue-2); transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(91,122,153,.6)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; border:1px solid var(--line-2); color:var(--lighter); box-shadow:none}
.btn.ghost:hover{border-color:var(--blue); color:var(--blue); background:rgba(91,122,153,.06)}
.btn.mini{padding:7px 14px; font-size:12.5px}

/* Tabela */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.05em}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(91,122,153,.045)}
code{font-family:'JetBrains Mono',Consolas,monospace; font-size:12px; color:var(--pale); word-break:break-all}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-2)}
.muted{color:var(--muted); font-size:12px}
.link{cursor:pointer; color:var(--blue)}
.link:hover{text-decoration:underline}

/* Status pills */
.status{font-size:11px; padding:3px 11px; border-radius:99px; font-weight:600;
  background:#eef2f6; color:var(--lighter); border:1px solid var(--line)}
.status.completed{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.status.partially_signed,.status.sent,.status.viewed{background:rgba(91,122,153,.12); color:var(--blue-2); border-color:rgba(91,122,153,.25)}
.status.refused,.status.cancelled{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}

/* Badge grande (verificação) */
.badge{display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:99px;
  font-size:14px; font-weight:600; border:1px solid var(--line)}
.badge.ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.badge.bad{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}
.badge.neutral{background:rgba(91,122,153,.12); color:var(--blue-2)}

footer.zs-foot{max-width:1100px; margin:18px auto 40px; padding:0 22px; color:var(--muted); font-size:11.5px}

/* ---------- Tema escuro (opção, via toggle) ---------- */
[data-theme="dark"]{
  --bg:#0f1620; --panel:#19222e; --panel-2:#141c27;
  --line:rgba(138,162,184,.14); --line-2:rgba(138,162,184,.24);
  --blue:#6f90b0; --blue-2:#5b7a99; --light:#8aa2b8; --lighter:#cbd9e8; --pale:#bcd0e4;
  --ink:#eaf1f8; --muted:#8ea0b4;
  --ok:#5cd99a; --ok-bg:rgba(92,217,154,.12); --ok-line:rgba(92,217,154,.28);
  --bad:#f6a3a3; --bad-bg:rgba(246,163,163,.12); --bad-line:rgba(246,163,163,.28);
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 20px 44px -22px rgba(0,0,0,.6);
}
[data-theme="dark"] body{
  background:
    radial-gradient(820px 460px at 8% -12%, rgba(91,122,153,.18), transparent 60%),
    radial-gradient(680px 440px at 102% -6%, rgba(111,144,176,.12), transparent 55%),
    var(--bg);
}
[data-theme="dark"] .zs-header{background:rgba(15,22,32,.78)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,
[data-theme="dark"] .tab,[data-theme="dark"] .chip{background:#101a26}
[data-theme="dark"] select option{background:#101a26}
[data-theme="dark"] .sso a{background:#101a26}
[data-theme="dark"] .status{background:rgba(138,162,184,.12)}
[data-theme="dark"] .btn{color:#0f1620}

/* ---------- Toggle de tema ---------- */
.theme-btn{background:transparent;border:1px solid var(--line-2);color:var(--lighter);
  width:34px;height:34px;border-radius:999px;cursor:pointer;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:all .2s;margin-left:18px}
.theme-btn:hover{border-color:var(--blue);color:var(--blue);background:rgba(91,122,153,.08)}

/* ---------- Stats / KPIs ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
  transition:box-shadow .3s ease, border-color .3s ease;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.stat:hover{box-shadow:var(--shadow-lg);border-color:rgba(91,122,153,.3)}
.stat .n{font-size:26px;font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;font-weight:600}
.stat.accent .n{color:var(--blue)}
.stat:nth-child(2){animation-delay:.05s}.stat:nth-child(3){animation-delay:.1s}.stat:nth-child(4){animation-delay:.15s}

/* ---------- Tabs ---------- */
.tabbar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabbar .t{padding:7px 15px;border-radius:999px;border:1px solid var(--line-2);background:transparent;
  color:var(--muted);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}
.tabbar .t.on{border-color:transparent;background:var(--blue);color:#fff}
.tabbar .t:hover:not(.on){color:var(--ink);border-color:var(--blue)}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:34px 16px;color:var(--muted)}
.empty .ic{font-size:30px;opacity:.5;margin-bottom:8px}

.tosign{display:flex;flex-direction:column;gap:10px}
.tosign .item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
[data-theme="dark"] .tosign .item{background:rgba(91,122,153,.06)}

/* ---------- Sidebar de navegação por jornada (telas de app) ---------- */
.zs-side{position:fixed;left:0;top:0;height:100vh;width:236px;z-index:30;overflow-y:auto;
  display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);padding:18px 14px}
.zs-brand{display:block;margin:4px 8px 14px}
.zs-brand img{height:30px;display:block}
.zs-snav{display:flex;flex-direction:column;gap:2px;flex:1}
.zs-grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:16px 10px 6px}
.zs-snav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--lighter);
  text-decoration:none;font-size:13.5px;font-weight:500;transition:background .15s,color .15s}
.zs-snav a .ic{width:17px;height:17px;flex:none;opacity:.75}
.zs-snav a:hover{background:rgba(91,122,153,.08);color:var(--ink)}
.zs-snav a:hover .ic{opacity:1}
.zs-snav a.on{background:rgba(91,122,153,.12);color:var(--blue)}
.zs-snav a.on .ic{opacity:1}
.zs-side-foot{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.zs-user{padding:2px 10px 10px}
.zs-uname{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zs-uplan{font-size:11px;color:var(--muted);text-transform:capitalize}
.zs-side-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px}
.zs-logout{font-size:13px;color:var(--muted);text-decoration:none}
.zs-logout:hover{color:var(--blue)}
body.app{padding-left:236px}
body.app .wrap{margin:30px auto}
@media(max-width:880px){
  .zs-side{position:static;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);padding:10px 14px}
  .zs-brand{margin:0 10px 0 0}
  .zs-snav{flex-direction:row;flex-wrap:wrap;flex:1}
  .zs-grp{display:none}
  .zs-snav a span{display:none}
  .zs-snav a{padding:9px 11px}
  .zs-side-foot{border-top:0;margin:0;padding:0;display:flex;align-items:center;gap:10px}
  .zs-user{display:none}
  body.app{padding-left:0}
}