/* ============ AssinaLab — design system (Intralab IO) ============ */
:root{
  --navy:#1a3a5c; --blue:#4a90c4; --cyan:#00b4d8;
  /* tema claro */
  --bg:#eef2f8; --surface:#ffffff; --surface-2:#f4f7fc; --surface-3:#eef3fa;
  --text:#16243a; --muted:#647488; --line:#e2e9f2; --line-strong:#cdd8e6;
  --topbar:#1a3a5c; --topbar-text:#ffffff;
  --primary:#1a3a5c; --primary-2:#21496f; --primary-text:#fff;
  --ok:#0f7a3d; --ok-bg:#e3f6ea; --bad:#c02626; --bad-bg:#fdeaea;
  --warn:#9a6212; --warn-bg:#fdf2dc;
  --r:16px; --r-sm:11px; --r-pill:999px;
  --sh:0 1px 2px rgba(16,32,64,.06),0 2px 8px rgba(16,32,64,.05);
  --sh-lg:0 6px 24px rgba(16,32,64,.10);
  --ring:0 0 0 3px color-mix(in srgb,var(--blue) 35%,transparent);
  --tap:46px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0c1420; --surface:#141f2d; --surface-2:#182536; --surface-3:#1d2c3f;
  --text:#e9eff6; --muted:#93a4b8; --line:#243443; --line-strong:#314558;
  --topbar:#0a111c; --topbar-text:#eaf2fa;
  --primary:#4a90c4; --primary-2:#5aa0d4; --primary-text:#0a111c;
  --ok:#46d18a; --ok-bg:#0f2c1e; --bad:#f4736b; --bad-bg:#34161680; --warn:#f0b53c; --warn-bg:#332710;
  --sh:0 1px 2px rgba(0,0,0,.4); --sh-lg:0 8px 28px rgba(0,0,0,.45);
}}
[data-theme="dark"]{
  --bg:#0c1420; --surface:#141f2d; --surface-2:#182536; --surface-3:#1d2c3f;
  --text:#e9eff6; --muted:#93a4b8; --line:#243443; --line-strong:#314558;
  --topbar:#0a111c; --topbar-text:#eaf2fa;
  --primary:#4a90c4; --primary-2:#5aa0d4; --primary-text:#0a111c;
  --ok:#46d18a; --ok-bg:#0f2c1e; --bad:#f4736b; --bad-bg:#341616; --warn:#f0b53c; --warn-bg:#332710;
  --sh:0 1px 2px rgba(0,0,0,.4); --sh-lg:0 8px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
.hidden{display:none !important}
.mono{font-family:"Space Mono",ui-monospace,Consolas,monospace}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1rem;background:var(--topbar);color:var(--topbar-text);
  box-shadow:0 1px 0 rgba(255,255,255,.05),0 2px 12px rgba(0,0,0,.12)}
.brand{display:flex;align-items:center;height:32px;flex:0 0 auto}
.brand img{height:28px;display:block}
.appver{font-family:"Space Mono",monospace;font-size:.62rem;opacity:.55;align-self:flex-end;margin:0 0 .25rem -.2rem}
.topnav{display:none;gap:.15rem;margin-left:.6rem}
.navlink{background:transparent;border:0;color:var(--topbar-text);font:inherit;font-size:.92rem;
  padding:.45rem .8rem;border-radius:var(--r-pill);cursor:pointer;opacity:.82;transition:.15s}
.navlink:hover{opacity:1;background:rgba(255,255,255,.1)}
.navlink.active{opacity:1;background:rgba(255,255,255,.16);font-weight:600}
.cluster{display:flex;align-items:center;gap:.4rem}
.whoami{display:flex;align-items:center;gap:.5rem;font-size:.85rem;max-width:42vw}
.whoami .who-mail{opacity:.9}
/* no celular: só o avatar no header (e-mail sai p/ caber avatar + tema + sair) */
@media(max-width:600px){ .who-mail{display:none} .whoami{max-width:none} }
.avatar{width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#04222b;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--topbar-text);
  border-radius:10px;cursor:pointer;font-size:1rem;line-height:1}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- layout ---------- */
main{max-width:980px;margin:0 auto;padding:1.1rem 1rem 1.5rem}
.screen{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.page-head{display:flex;align-items:center;gap:.8rem;margin:.2rem 0 1.1rem}
.page-head h1{flex:1;min-width:0;font-size:1.5rem;font-weight:800;letter-spacing:-.6px;margin:0}
h3{margin:0 0 .9rem;font-size:1.05rem;font-weight:700;letter-spacing:-.2px}
.hint{color:var(--muted);font-size:.85rem;margin:.6rem 0 0}
.stack{display:flex;flex-direction:column;gap:.2rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.2rem;box-shadow:var(--sh);margin-bottom:1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}

/* ---------- fields ---------- */
.field{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:.85rem}
input,select{width:100%;margin-top:.32rem;min-height:var(--tap);padding:.6rem .8rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit;font-size:1rem;font-weight:500;
  background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--muted);opacity:.7;font-weight:400}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:var(--tap);
  padding:.6rem 1.1rem;border:1px solid transparent;border-radius:var(--r-sm);font:inherit;font-size:.95rem;
  font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{background:var(--primary);color:var(--primary-text)}
.btn.primary:hover{background:var(--primary-2)}
.btn.primary:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.link{background:transparent;color:var(--blue);min-height:auto;padding:.5rem}
.btn.link:hover{text-decoration:underline}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line-strong))}
.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{min-height:38px;padding:.4rem .75rem;font-size:.88rem}
.btn.block{display:flex;width:100%;margin-top:.5rem}
.btn-file{cursor:pointer}

/* ---------- auth ---------- */
.auth{max-width:380px;margin:7vh auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.8rem 1.6rem;box-shadow:var(--sh-lg)}
.auth-brand{display:flex;justify-content:center;margin-bottom:1.2rem}
.auth-logo{height:40px}
.auth-title{font-size:1.4rem;font-weight:800;letter-spacing:-.5px;margin:0 0 .25rem;text-align:center}
.auth-sub{color:var(--muted);font-size:.9rem;text-align:center;margin:0 0 1.2rem}
.code-input{text-align:center;letter-spacing:.6rem;font-family:"Space Mono",monospace;font-size:1.5rem;font-weight:700;padding-left:.6rem}
.resend{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.5rem}
.resend .count{font-size:.82rem;color:var(--muted)}

/* ---------- lists / items ---------- */
.list{display:flex;flex-direction:column;gap:.65rem}
.item{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;box-shadow:var(--sh)}
.item .grow{flex:1 1 12rem;min-width:0}
.item .title{font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.item .sub{font-size:.83rem;color:var(--muted);margin-top:.15rem}
.item .actions{display:flex;gap:.5rem;flex:0 0 auto}
@media(max-width:560px){
  .item .actions{flex:1 1 100%}
  .item .actions .btn{flex:1}
}
.badge{font-size:.7rem;padding:.18rem .55rem;border-radius:var(--r-pill);font-weight:700;letter-spacing:.2px}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.signed{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.badge.role{background:var(--surface-3);color:var(--muted);border:1px solid var(--line)}
.empty{color:var(--muted);text-align:center;padding:2.5rem 1rem;border:1px dashed var(--line-strong);border-radius:var(--r)}

/* ---------- sign ---------- */
.sign-layout{display:grid;grid-template-columns:1fr 330px;gap:1rem;align-items:start}
@media(max-width:900px){.sign-layout{grid-template-columns:1fr}}
.viewer-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.viewer-toolbar{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.viewer-scroll{max-height:70vh;overflow:auto;background:var(--surface-3);padding:1rem;display:flex;justify-content:center}
.page-host{position:relative;line-height:0;box-shadow:0 4px 18px rgba(0,0,0,.18);border-radius:2px}
#pdfCanvas{display:block;background:#fff}
.overlay{position:absolute;inset:0}
.sig-rect{position:absolute;border:2px solid var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent);
  cursor:move;touch-action:none;border-radius:4px;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.sig-rect .label{position:absolute;top:-1.35rem;left:0;font-size:.68rem;color:#fff;background:var(--blue);
  font-weight:700;padding:.05rem .4rem;border-radius:4px;white-space:nowrap}
.sig-rect .handle{position:absolute;width:16px;height:16px;right:-8px;bottom:-8px;background:var(--surface);
  border:2px solid var(--blue);border-radius:4px;cursor:se-resize}
.sign-panel{position:sticky;top:4.5rem;margin-bottom:1rem}
.existing{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.existing .e{font-size:.78rem;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem}

/* ---------- validate "selo" ---------- */
.sigcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.sigcard .strip{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;color:#fff;font-weight:800;letter-spacing:.3px}
.sigcard .strip.ok{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 70%,#000 0%))}
.sigcard .strip.bad{background:var(--bad)}
.sigcard .strip .mark{width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);border-radius:50%}
.sigcard .body{padding:1rem 1.1rem}
.kv{display:flex;gap:.6rem;font-size:.9rem;margin:.2rem 0}
.kv b{color:var(--muted);font-weight:600;flex:0 0 96px}
.kv span{min-width:0;word-break:break-word}
.checks{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 .2rem}
.chk{font-size:.78rem;font-weight:600;padding:.28rem .6rem;border-radius:var(--r-pill);border:1px solid var(--line)}
.chk.y{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.chk.n{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.errs{font-size:.82rem;color:var(--bad);margin-top:.6rem}
.warns{font-size:.82rem;color:var(--warn);margin-top:.4rem}

/* ---------- bottom nav (mobile) ---------- */
.bottomnav{display:none}
@media(max-width:900px){
  .bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    background:var(--surface);border-top:1px solid var(--line);
    padding:.3rem .3rem calc(.3rem + env(safe-area-inset-bottom));box-shadow:0 -2px 16px rgba(0,0,0,.08)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;background:transparent;border:0;
    color:var(--muted);font:inherit;font-size:.68rem;font-weight:600;padding:.45rem 0;cursor:pointer;border-radius:10px}
  .tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tab.active{color:var(--blue)}
  main{padding-bottom:5.5rem}
  .topnav{display:none !important}
}
@media(min-width:901px){ .topnav{display:flex} }

/* ---------- feedback ---------- */
.footer{text-align:center;color:var(--muted);font-size:.75rem;padding:1.5rem 0 1rem}
@media(max-width:900px){.footer{padding-bottom:5.5rem}}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:#0a111c;color:#fff;
  padding:.7rem 1.1rem;border-radius:12px;box-shadow:var(--sh-lg);z-index:200;max-width:90vw;font-size:.9rem;font-weight:500}
.toast.ok{background:var(--ok)} .toast.bad{background:var(--bad)}
@media(max-width:900px){.toast{bottom:5.5rem}}
.errbox{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);width:min(720px,94vw);z-index:250;
  background:var(--surface);border:1px solid var(--bad);border-radius:12px;box-shadow:var(--sh-lg);overflow:hidden}
.errbox-head{display:flex;justify-content:space-between;align-items:center;background:var(--bad);color:#fff;padding:.4rem .7rem;font-size:.82rem}
.errbox-head button{background:transparent;border:0;color:#fff;cursor:pointer;font-size:1rem}
.errbox textarea{width:100%;height:150px;border:0;padding:.6rem .7rem;font-family:"Space Mono",monospace;font-size:.78rem;
  background:var(--surface);color:var(--text);resize:vertical;white-space:pre;outline:none}
.loading{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:300;color:var(--muted);font-weight:500}
.spinner{width:42px;height:42px;border:4px solid var(--line-strong);border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}