:root{
  --bg:#F0F3F6; --bg2:#E6EBF0; --surface:#FFFFFF; --surface2:#F6F8FA;
  --topbar:#0E76BC; --topbar-ink:#FFFFFF; --topbar-ink2:#CBE3F5;
  --sidebar:#FFFFFF; --sidebar2:#E7F0F8;
  --line:#DFE4EA; --line2:#C4CDD6;
  --ink:#2B3036; --ink2:#3F4650; --muted:#6B7480; --muted2:#98A2AE;
  --accent:#0E76BC; --accent-strong:#0B5E97; --accent-soft:#DCEBF8; --on-accent:#FFFFFF;
  --seal:#A5680C; --seal-soft:#FAEEDA;
  --ok:#2E9E4F; --ok-soft:#E1F3E7; --warn:#B07908; --warn-soft:#FBEFD5;
  --crit:#C0392B; --crit-soft:#FAE3E0; --info:#0E76BC; --info-soft:#DCEBF8; --neutral-soft:#E3E7EB;
  --shadow:0 1px 3px rgba(20,32,44,.09); --shadow-lg:0 18px 44px -14px rgba(20,32,44,.34);
  --r:6px; --r-sm:4px;
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --display:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --serif:"Roboto Slab",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1216; --bg2:#141A20; --surface:#171E24; --surface2:#1E262D;
    --topbar:#0B4F80; --topbar-ink:#FFFFFF; --topbar-ink2:#B8D6EC;
    --sidebar:#141A20; --sidebar2:#152B3D;
    --line:#28313A; --line2:#3A444F; --ink:#E6ECF2; --ink2:#C7D0D9; --muted:#93A0AC; --muted2:#70808D;
    --accent:#4FA9E8; --accent-strong:#7CC2F2; --accent-soft:#12283A; --on-accent:#06212F;
    --seal:#D9A45E; --seal-soft:#2C2413;
    --ok:#3FA968; --ok-soft:#12291B; --warn:#D2A03C; --warn-soft:#2B2411;
    --crit:#DB6C60; --crit-soft:#2E1715; --info:#4FA9E8; --info-soft:#12283A; --neutral-soft:#1F272E;
    --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-lg:0 18px 44px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1216; --bg2:#141A20; --surface:#171E24; --surface2:#1E262D;
  --topbar:#0B4F80; --topbar-ink:#FFFFFF; --topbar-ink2:#B8D6EC;
  --sidebar:#141A20; --sidebar2:#152B3D;
  --line:#28313A; --line2:#3A444F; --ink:#E6ECF2; --ink2:#C7D0D9; --muted:#93A0AC; --muted2:#70808D;
  --accent:#4FA9E8; --accent-strong:#7CC2F2; --accent-soft:#12283A; --on-accent:#06212F;
  --seal:#D9A45E; --seal-soft:#2C2413;
  --ok:#3FA968; --ok-soft:#12291B; --warn:#D2A03C; --warn-soft:#2B2411;
  --crit:#DB6C60; --crit-soft:#2E1715; --info:#4FA9E8; --info-soft:#12283A; --neutral-soft:#1F272E;
  --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-lg:0 18px 44px -14px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* ---------- barra superior azul ---------- */
.appbar{position:sticky;top:0;z-index:50;height:56px;background:var(--topbar);color:var(--topbar-ink);display:flex;align-items:center;gap:14px;padding:0 16px}
.appbar .ab-btn{width:36px;height:36px;display:grid;place-items:center;border:none;background:transparent;color:#fff;border-radius:50%;cursor:pointer;position:relative}
.appbar .ab-btn:hover{background:rgba(255,255,255,.14)}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:32px;height:32px;flex:0 0 32px}
.brand-name{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.01em;line-height:1}
.brand-div{width:1px;height:22px;background:rgba(255,255,255,.4)}
.brand-mod{font-size:16px;color:#fff;font-weight:400;letter-spacing:.01em}
.ab-right{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Símbolo, sem borda: o nome completo ocupava um terço da barra e chegava
   truncado de qualquer forma. As iniciais preservam o que não podia sumir,
   que é saber em qual organização se está agindo, e o nome inteiro fica no
   título, a um repouso do ponteiro.                                     */
.ab-org{display:flex;align-items:center;gap:5px;height:36px;padding:0 8px;color:#fff;
  background:transparent;border:none;border-radius:999px;cursor:pointer;
  transition:background .18s ease}
.ab-org:hover{background:rgba(255,255,255,.14)}
.ab-org:active{background:rgba(255,255,255,.2)}
.ab-org svg{transition:transform .24s cubic-bezier(.2,.9,.3,1.4)}
.ab-org:hover svg{transform:scale(1.12)}
.ab-org-sigla{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  opacity:.82;line-height:1}
@media (prefers-reduced-motion: reduce){ .ab-org,.ab-org svg{transition:none!important;transform:none!important} }
.ab-user{display:flex;align-items:center;gap:9px;background:transparent;border:none;cursor:pointer;color:#fff;padding:4px 6px;border-radius:4px}
.ab-user:hover{background:rgba(255,255,255,.12)}
.ab-user b{font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.avatar{width:32px;height:32px;border-radius:50%;background:#0B5E97;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;border:1px solid rgba(255,255,255,.5)}
.badge-red{position:absolute;top:2px;right:2px;background:#D93025;color:#fff;font-size:9.5px;font-weight:700;line-height:1;padding:2px 4px;border-radius:9px;font-family:var(--mono)}

/* ---------- barra de abas ---------- */
.tabsbar{position:sticky;top:56px;z-index:45;background:var(--surface);border-bottom:1px solid var(--line);display:flex;gap:0;padding:0 16px;overflow-x:auto}
.tabsbar a{padding:12px 16px;font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabsbar a:hover{color:var(--ink)}
.tabsbar a.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:264px 1fr;align-items:start}
.app.nav-hidden{grid-template-columns:0 1fr}
.app.nav-hidden .sidebar{display:none}
.sidebar{background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:99px;height:calc(100vh - 99px);overflow-y:auto}
.quick{padding:14px 14px 8px}
.quick .qbox{position:relative;display:flex;align-items:center}
.quick svg{position:absolute;left:11px;color:var(--muted2)}
.quick input{width:100%;padding:9px 12px 9px 35px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);font:inherit;font-size:13px;color:var(--ink)}
.quick input::placeholder{color:var(--muted2)}
.nav{padding:0 8px 18px;display:flex;flex-direction:column;gap:1px}
.nav-group{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);padding:16px 12px 6px;font-weight:500}
.nav a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink2);font-size:14px;font-weight:400}
.nav a svg{flex:none;color:var(--muted)}
.nav a:hover{background:var(--surface2)}
.nav a.on{background:var(--sidebar2);color:var(--accent);font-weight:500;box-shadow:inset 3px 0 0 var(--accent)}
.nav a.on svg{color:var(--accent)}
.nav .badge-n{margin-left:auto;background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px;font-family:var(--mono)}
.side-foot{margin-top:auto;padding:14px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted2);display:flex;flex-direction:column;gap:5px}
.main{min-width:0}
.content{padding:22px 24px 64px;max-width:1400px;width:100%}

/* ---------- page furniture ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.eyebrow{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:5px}
h1.page-title{font-size:24px;font-weight:500;color:var(--ink)}
.page-sub{color:var(--muted);font-size:13px;margin-top:5px;max-width:70ch}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:14px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--surface);color:var(--ink2);font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface2);border-color:var(--muted2)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface2);color:var(--ink)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-pad{padding:16px 18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.card-title{font-family:var(--display);font-size:14px;font-weight:500;color:var(--ink)}
.card-note{font-size:11.5px;color:var(--muted)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.kpi{padding:14px 16px;display:flex;flex-direction:column;gap:3px;box-shadow:inset -1px -1px 0 var(--line)}
.kpi-label{font-size:11.5px;color:var(--muted);font-weight:400;display:flex;align-items:center;gap:6px}
.kpi-val{font-family:var(--display);font-size:25px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi-val small{font-size:12px;font-weight:400;color:var(--muted)}
.kpi-delta{font-size:11px;font-family:var(--mono);display:flex;align-items:center;gap:4px}
.up{color:var(--ok)} .down{color:var(--crit)} .flat{color:var(--muted)}

/* chips */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:3px;font-size:11px;font-weight:500;white-space:nowrap;line-height:1.5;text-transform:uppercase;letter-spacing:.03em}
.pill i{display:none}
.p-ok{background:var(--ok);color:#fff}
.p-warn{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.p-crit{background:var(--crit-soft);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 35%,transparent)}
.p-info{background:var(--info-soft);color:var(--accent-strong)}
.p-mute{background:var(--neutral-soft);color:var(--ink2)}
.p-seal{background:var(--seal-soft);color:var(--seal)}
.tag{display:inline-flex;padding:2px 7px;border-radius:3px;background:var(--surface2);border:1px solid var(--line);font-size:11px;color:var(--muted);font-weight:400}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--muted)}
.sm{font-size:12.5px}
.xs{font-size:11.5px}

/* tabelas */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:12px 14px;border-bottom:2px solid var(--line);white-space:nowrap;background:var(--surface)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink2)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr.clickable:hover{background:var(--surface2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px}
.doc-cell{display:flex;align-items:center;gap:10px;min-width:230px}
.doc-ic{width:28px;height:34px;border-radius:3px;border:1px solid var(--line2);background:var(--surface2);flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.doc-name{font-weight:500;font-size:13.5px;color:var(--ink)}
.doc-meta{font-size:11.5px;color:var(--muted)}

/* filtros */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.select,.input,textarea.input{padding:8px 11px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:13px;color:var(--ink)}
.select{padding-right:28px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
label.fl{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--muted);font-weight:400}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg button{padding:7px 13px;border:none;background:transparent;font-size:12.5px;cursor:pointer;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--accent);color:#fff;font-weight:500}

/* timeline */
.tl{display:flex;flex-direction:column;position:relative;padding-left:6px}
.tl-item{display:grid;grid-template-columns:66px 22px 1fr;gap:12px;padding:8px 0;position:relative}
.tl-item::before{content:"";position:absolute;left:72px;top:0;bottom:0;width:1px;background:var(--line)}
.tl-item:first-child::before{top:14px}
.tl-item:last-child::before{bottom:calc(100% - 14px)}
.tl-time{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;padding-top:1px}
.tl-dot{width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);margin-top:3px;z-index:1;justify-self:center}
.tl-dot.d-ok{border-color:var(--ok)} .tl-dot.d-warn{border-color:var(--warn)} .tl-dot.d-crit{border-color:var(--crit)} .tl-dot.d-mute{border-color:var(--line2)}
.tl-body strong{font-size:13.5px;font-weight:500;display:block;color:var(--ink)}
.tl-body .tl-meta{font-size:11.5px;color:var(--muted);font-family:var(--mono);margin-top:2px;word-break:break-word}

/* blocos diversos */
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 18px;font-size:13.5px}
.kv dt{color:var(--muted);font-size:12.5px}
.kv dd{margin:0;font-weight:400;color:var(--ink);word-break:break-word}
.notice{display:flex;gap:11px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface2);font-size:12.5px;color:var(--ink2);line-height:1.55}
.notice.n-legal{border-color:color-mix(in srgb,var(--seal) 45%,transparent);background:var(--seal-soft);color:var(--ink2)}
.notice.n-warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-soft)}
.notice.n-info{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--info-soft)}
.notice b{font-weight:500}
.stub{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--mono);color:var(--seal);border:1px dashed var(--seal);border-radius:3px;padding:2px 7px;background:var(--seal-soft)}
.bar-track{height:6px;border-radius:3px;background:var(--neutral-soft);overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:3px}
.hash{font-family:var(--mono);font-size:11.5px;background:var(--surface2);border:1px solid var(--line);border-radius:3px;padding:2px 6px;word-break:break-all;color:var(--ink2)}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}
.split-3{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:start}
.stack{display:flex;flex-direction:column;gap:14px}
.divider{height:1px;background:var(--line);margin:4px 0}
.empty{padding:34px;text-align:center;color:var(--muted);font-size:13px}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(20,32,44,.5);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-lg);width:100%;max-width:720px;overflow:hidden}
.modal.wide{max-width:940px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.modal-body{padding:20px}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface2)}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line2);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;color:var(--ink2)}
.icon-btn:hover{background:var(--surface2)}
.steps{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:400}
.step-n{width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:10px;font-family:var(--mono)}
.step.on{color:var(--accent)} .step.on .step-n{border-color:var(--accent);background:var(--accent);color:#fff}
.step.done .step-n{border-color:var(--ok);background:var(--ok);color:#fff}
.step-line{width:16px;height:1px;background:var(--line2)}

/* toast */
.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{background:#2B3036;color:#F1F4F7;border-radius:var(--r-sm);padding:11px 14px;font-size:12.5px;box-shadow:var(--shadow-lg);display:flex;gap:9px;align-items:flex-start;animation:tin .2s ease-out;border-left:3px solid var(--accent)}
.toast.t-ok{border-left-color:var(--ok)} .toast.t-warn{border-left-color:var(--warn)} .toast.t-crit{border-left-color:var(--crit)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* rotas de tela cheia */
.bleed{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.bleed-bar{background:var(--topbar);color:#fff;height:56px;display:flex;align-items:center;gap:12px;padding:0 18px}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-side{background:linear-gradient(160deg,#0E76BC 0%,#0A4E7E 100%);color:#DCEBF8;padding:44px 48px;display:flex;flex-direction:column;justify-content:space-between}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--surface)}
.auth-card{width:100%;max-width:392px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:400;color:var(--ink2)}
.field input{padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:13.5px;color:var(--ink)}
.claim{font-family:var(--display);font-size:31px;font-weight:700;line-height:1.18;color:#fff;text-wrap:balance}
.claim em{font-style:normal;color:#9FD2F5}
.chain{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.chain span{font-size:10.5px;font-family:var(--mono);color:#CDE5F7;border:1px solid rgba(255,255,255,.32);border-radius:20px;padding:3px 9px}

/* fluxo do signatário */
.signer{max-width:660px;margin:0 auto;width:100%;padding:0 18px 60px}
.signer-bar{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 18px;position:sticky;top:56px;z-index:10}
.prog{display:flex;align-items:center;gap:0;max-width:660px;margin:0 auto;width:100%}
.prog-step{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center;font-size:10.5px;color:var(--muted);text-align:center}
.prog-step .pl{height:3px;width:100%;background:var(--neutral-soft);border-radius:3px}
.prog-step.done .pl,.prog-step.on .pl{background:var(--accent)}
.prog-step.on{color:var(--accent);font-weight:500}
.otp-inputs{display:flex;gap:8px}
.otp-inputs input{width:44px;height:52px;text-align:center;font-family:var(--mono);font-size:20px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.cam{aspect-ratio:4/3;border-radius:var(--r);background:linear-gradient(160deg,#123449,#0B2233);display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid var(--line)}
.cam-oval{width:44%;aspect-ratio:3/4;border:2px dashed rgba(255,255,255,.5);border-radius:50%}
.sig-pad{border:1px dashed var(--line2);border-radius:var(--r);background:var(--surface2);height:150px;touch-action:none;display:block;width:100%}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{padding:10px 14px;background:none;border:none;border-bottom:3px solid transparent;color:var(--muted);font-size:12.5px;cursor:pointer;white-space:nowrap;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}

/* papel do documento */
.paper{background:#fff;color:#22262A;border:1px solid var(--line);border-radius:4px;padding:34px 38px;font-family:var(--serif);font-size:13px;line-height:1.75;box-shadow:var(--shadow)}
.paper h4{font-family:var(--serif);font-size:15px;text-align:center;margin-bottom:16px;letter-spacing:.02em}
.paper p{margin-bottom:10px;text-align:justify}
.paper .clause{font-weight:600}
.field-chip{display:inline-flex;align-items:center;gap:5px;border:1px dashed #0E76BC;background:#DCEBF8;color:#0B5E97;border-radius:3px;padding:1px 7px;font-family:var(--sans);font-size:11px;font-weight:500}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .paper{background:#F7F8F9;color:#16181A}}
:root[data-theme="dark"] .paper{background:#F7F8F9;color:#16181A}

.meter{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--ok) 0 30%,var(--warn) 30% 60%,#D2892C 60% 80%,var(--crit) 80% 100%);position:relative;opacity:.9}
.meter-pin{position:absolute;top:-4px;width:3px;height:17px;background:var(--ink);border-radius:2px;box-shadow:0 0 0 2px var(--surface)}
.qr{display:grid;background:#fff;padding:6px;border-radius:3px;border:1px solid var(--line2)}
.matrix{display:grid;gap:0}
.matrix i{display:block;width:4px;height:4px}
.mapgrid{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface2);aspect-ratio:16/9;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:38px 38px}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:3px}
.pin i{width:11px;height:11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pin span{font-size:10px;background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:1px 5px;white-space:nowrap;font-family:var(--mono)}
.chk{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.chk .tick{width:18px;height:18px;border-radius:3px;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none;font-size:11px;font-weight:700}
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.arch-node{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;background:var(--surface);display:flex;flex-direction:column;gap:3px}
.arch-node b{font-size:12.5px;font-weight:500}
.arch-node span{font-size:11px;color:var(--muted);font-family:var(--mono)}

@media (max-width:1080px){.split,.split-3{grid-template-columns:1fr}}
@media (max-width:900px){
  .app,.app.nav-hidden{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:99px;bottom:0;width:264px;z-index:60;box-shadow:var(--shadow-lg);height:auto}
  .content{padding:18px 14px 60px}
  .auth-wrap{grid-template-columns:1fr}
  .auth-side{display:none}
  .ab-org{display:none}
  .ab-user b{display:none}
  .brand-mod{display:none}
}


/* ---------------- animação da tela de login ---------------- */
.auth-side{position:relative;overflow:hidden}
.auth-side > *{position:relative;z-index:2}
.auth-brilho{position:absolute;border-radius:50%;filter:blur(48px);z-index:1;pointer-events:none}
.auth-brilho.b1{width:420px;height:420px;left:-130px;top:-100px;opacity:.5;
  background:radial-gradient(circle,#4FB0EE 0%,rgba(79,176,238,0) 68%);animation:deriva1 24s ease-in-out infinite}
.auth-brilho.b2{width:540px;height:540px;right:-180px;bottom:-200px;opacity:.55;
  background:radial-gradient(circle,#0A4E7E 0%,rgba(10,78,126,0) 70%);animation:deriva2 30s ease-in-out infinite}
@keyframes deriva1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(64px,44px) scale(1.14)}}
@keyframes deriva2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-54px,-34px) scale(1.09)}}

/* rubrica que se desenha sozinha, o gesto de assinar */
.auth-rubrica{position:absolute;left:0;right:0;bottom:14%;width:100%;height:190px;z-index:1;pointer-events:none}
.auth-rubrica path{fill:none;stroke:#9FD2F5;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:assinar 9s cubic-bezier(.62,.02,.35,1) infinite}
.auth-rubrica path.traco2{stroke-width:1.6;animation-delay:.9s}
@keyframes assinar{
  0%{stroke-dashoffset:1400;opacity:.55}
  30%{stroke-dashoffset:0;opacity:.55}
  74%{stroke-dashoffset:0;opacity:.55}
  86%{stroke-dashoffset:0;opacity:0}
  87%{stroke-dashoffset:1400;opacity:0}
  100%{stroke-dashoffset:1400;opacity:.55}}

/* entrada dos elementos, concluída em menos de um segundo */
.anim-sobe{animation:sobe .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.auth-marca{animation:marcaEntra .8s cubic-bezier(.2,.7,.3,1) both}
@keyframes marcaEntra{from{opacity:0;transform:scale(.88) rotate(-7deg)}to{opacity:1;transform:none}}

/* a cadeia de evidências acende elo a elo, em ciclo */
.chain span{--d1:0s;--d2:0s;animation:chipEntra .45s ease both, chipPulso 7s ease-in-out infinite;
  animation-delay:var(--d1),var(--d2)}
@keyframes chipEntra{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes chipPulso{
  0%,14%,100%{background:transparent;border-color:rgba(255,255,255,.32);color:#CDE5F7;box-shadow:none}
  4%{background:rgba(159,210,245,.24);border-color:#9FD2F5;color:#fff;box-shadow:0 0 0 4px rgba(159,210,245,.10)}}

@media (prefers-reduced-motion:reduce){
  .auth-brilho,.auth-rubrica path,.chain span,.anim-sobe,.auth-marca{animation:none !important;opacity:1 !important;transform:none !important}
  .auth-rubrica path{stroke-dashoffset:0;opacity:.5}
}

/* referências de mercado incorporadas: TAGs, seleção em massa e fases */
.btn-tag{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;padding:1px 4px;border-radius:3px;display:inline-flex;align-items:center;gap:4px}
.btn-tag:hover{color:var(--accent);background:var(--accent-soft)}
tr.marcada td{background:var(--accent-soft)}

/* ---------- animação de confirmação de envio ---------- */
.sucesso-fundo{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(3px);animation:sucFundo .25s ease both}
.sucesso-fundo.saindo{animation:sucFundoSai .3s ease both}
@keyframes sucFundo{from{opacity:0}to{opacity:1}}
@keyframes sucFundoSai{to{opacity:0}}
.sucesso-cartao{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:34px 40px;text-align:center;max-width:420px;animation:sucCartao .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes sucCartao{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.sucesso-selo{position:relative;width:96px;height:96px;margin:0 auto 18px}
.sucesso-selo .anel{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ok);opacity:0;
  animation:sucAnel 1.8s cubic-bezier(.2,.7,.3,1) infinite}
.sucesso-selo .anel:nth-child(2){animation-delay:.45s}
.sucesso-selo .anel:nth-child(3){animation-delay:.9s}
@keyframes sucAnel{0%{transform:scale(.72);opacity:.55}70%{opacity:0}100%{transform:scale(1.5);opacity:0}}
.sucesso-selo svg{position:relative;z-index:2}
.sucesso-selo .disco{fill:var(--ok-soft);stroke:var(--ok);stroke-width:3;
  stroke-dasharray:283;stroke-dashoffset:283;animation:sucDisco .6s cubic-bezier(.4,0,.2,1) .1s both}
@keyframes sucDisco{to{stroke-dashoffset:0}}
.sucesso-selo .tique{fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48;animation:sucTique .38s cubic-bezier(.6,0,.3,1) .55s both}
@keyframes sucTique{to{stroke-dashoffset:0}}
.sucesso-cartao h3{font-size:19px;margin-bottom:7px;animation:sucTexto .4s ease .5s both}
.sucesso-cartao p{font-size:13.5px;color:var(--muted);animation:sucTexto .4s ease .62s both}
.sucesso-etapas{display:flex;flex-direction:column;gap:7px;margin-top:18px;text-align:left}
.sucesso-etapas div{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink2);
  animation:sucLinha .38s ease both}
.sucesso-etapas span.marca{color:var(--ok);flex:none}
@keyframes sucTexto{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sucLinha{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sucesso-fundo,.sucesso-cartao,.sucesso-cartao h3,.sucesso-cartao p,.sucesso-etapas div{animation:none !important;opacity:1 !important;transform:none !important}
  .sucesso-selo .anel{display:none}
  .sucesso-selo .disco,.sucesso-selo .tique{stroke-dashoffset:0;animation:none !important}
}


/* girador usado durante a leitura do token */
.spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--neutral-soft);
  border-top-color:var(--accent);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}



/* ============================ MODO SIMPLES ==============================
   Tudo escalonado por --escala-simples, que a pessoa controla na Ajuda. A
   escala multiplica tamanho de letra, altura de botão e espaçamento juntos:
   aumentar só a fonte quebraria o alinhamento e deixaria a tela pior.     */
:root{ --escala-simples:1; --folha:#2E9E4F; --folha-clara:#E8F6EC; }

/* Confirmação discreta: entra por baixo, informa, sai sozinha. */
.aviso-simples{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);z-index:9000;
  display:flex;align-items:flex-start;gap:11px;max-width:min(440px,92vw);
  background:#fff;border:1px solid var(--folha);border-left:5px solid var(--folha);
  border-radius:10px;padding:14px 18px;box-shadow:0 14px 40px rgba(15,40,25,.18);
  opacity:0;transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.2,.64,1)}
.aviso-simples.entrou{opacity:1;transform:translate(-50%,0)}
.aviso-simples b{display:block;font:600 15px/1.35 Roboto,system-ui,sans-serif;color:#14351F}
.aviso-simples .aviso-det{display:block;font:400 13px/1.5 Roboto,system-ui,sans-serif;color:#4A6154;margin-top:3px}
.aviso-folha{flex:none;margin-top:1px}
:root[data-theme="dark"] .aviso-simples{background:#16211B;color:#E8F2EC}
:root[data-theme="dark"] .aviso-simples b{color:#E8F6EC}

@media (prefers-reduced-motion: reduce){
  .folha-btn .folha-svg,.folha-btn.brotando .folha-svg,.folha-onda,.aviso-simples{animation:none!important;transition:none!important}
}

/* ---------------------------- a tela simples ---------------------------- */
:root[data-simples="on"]{ font-size:calc(16px * var(--escala-simples)) }
:root[data-simples="on"] body{background:#F4F7FA}

.s-app{--s:var(--escala-simples);min-height:100vh;display:flex;flex-direction:column;
  font-family:Roboto,system-ui,-apple-system,sans-serif;color:#16232F;background:#F4F7FA}
:root[data-theme="dark"] .s-app{background:#0E1620;color:#E7EEF5}

.s-barra{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#143A5E;color:#fff;padding:calc(14px * var(--s)) calc(22px * var(--s))}
.s-barra-marca{display:flex;align-items:center;gap:11px;font:600 calc(19px * var(--s))/1 Roboto,sans-serif}
.s-barra-dir{display:flex;align-items:center;gap:10px}
.s-barra-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:0;color:#fff;
  font:600 calc(15px * var(--s))/1 Roboto,sans-serif;padding:calc(11px * var(--s)) calc(17px * var(--s));
  border-radius:8px;cursor:pointer;min-height:calc(46px * var(--s))}
.s-barra-btn:hover{background:rgba(255,255,255,.24)}
.s-barra-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Menu: ícone com texto, sempre. Ícone sozinho obriga a adivinhar. */
.s-menu{display:flex;gap:calc(8px * var(--s));padding:calc(14px * var(--s)) calc(22px * var(--s));
  background:#fff;border-bottom:1px solid #DCE4EC;overflow-x:auto;scrollbar-width:thin}
:root[data-theme="dark"] .s-menu{background:#152030;border-color:#25384C}
.s-menu-item{display:flex;align-items:center;gap:9px;flex:none;background:#F0F4F8;border:2px solid transparent;
  border-radius:10px;padding:calc(13px * var(--s)) calc(19px * var(--s));cursor:pointer;
  font:500 calc(16px * var(--s))/1 Roboto,sans-serif;color:#16232F;min-height:calc(54px * var(--s))}
:root[data-theme="dark"] .s-menu-item{background:#1D2C3E;color:#E7EEF5}
.s-menu-item:hover{background:#E2EBF3}
.s-menu-item.on{background:var(--folha-clara);border-color:var(--folha);color:#14351F;font-weight:700}
.s-menu-item:focus-visible{outline:3px solid #0E76BC;outline-offset:2px}
.s-menu-icone{font-size:calc(21px * var(--s));line-height:1}

.s-conteudo{flex:1;width:100%;max-width:calc(1020px * var(--s));margin:0 auto;
  padding:calc(30px * var(--s)) calc(22px * var(--s)) calc(50px * var(--s))}

.s-saudacao{margin-bottom:calc(26px * var(--s))}
.s-saudacao h1{font:700 calc(32px * var(--s))/1.2 Roboto,sans-serif;margin:0 0 calc(7px * var(--s))}
.s-saudacao p{font:400 calc(20px * var(--s))/1.45 Roboto,sans-serif;color:#4A5C6E;margin:0}
:root[data-theme="dark"] .s-saudacao p{color:#A8BCCE}

/* Cartões grandes: alvo de clique inteiro, nunca só o texto. */
.s-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(300px * var(--s)),1fr));
  gap:calc(15px * var(--s))}
.s-cartao{display:flex;align-items:center;gap:calc(16px * var(--s));width:100%;text-align:left;
  background:#fff;border:2px solid #DCE4EC;border-radius:13px;
  padding:calc(20px * var(--s)) calc(22px * var(--s));cursor:pointer;
  min-height:calc(92px * var(--s));transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
:root[data-theme="dark"] .s-cartao{background:#17233350;border-color:#2A3F55}
.s-cartao:hover{border-color:#0E76BC;transform:translateY(-2px);box-shadow:0 8px 22px rgba(14,118,188,.14)}
.s-cartao:focus-visible{outline:3px solid #0E76BC;outline-offset:3px}
.s-cartao.destaque{border-color:var(--folha);background:var(--folha-clara)}
:root[data-theme="dark"] .s-cartao.destaque{background:#17301F;border-color:var(--folha)}
.s-cartao-icone{font-size:calc(34px * var(--s));line-height:1;flex:none}
.s-cartao-texto{display:flex;flex-direction:column;gap:calc(4px * var(--s));flex:1;min-width:0}
.s-cartao-titulo{font:600 calc(19px * var(--s))/1.3 Roboto,sans-serif}
.s-cartao-desc{font:400 calc(15px * var(--s))/1.45 Roboto,sans-serif;color:#5B6B7A}
:root[data-theme="dark"] .s-cartao-desc{color:#A8BCCE}
.s-cartao-seta{font-size:calc(28px * var(--s));color:#9AAEBF;flex:none}

.s-cabecalho-tela{margin-bottom:calc(22px * var(--s))}
.s-cabecalho-tela h1{font:700 calc(28px * var(--s))/1.25 Roboto,sans-serif;margin:calc(12px * var(--s)) 0 calc(6px * var(--s))}
.s-cabecalho-tela p{font:400 calc(17px * var(--s))/1.5 Roboto,sans-serif;color:#5B6B7A;margin:0;max-width:62ch}
:root[data-theme="dark"] .s-cabecalho-tela p{color:#A8BCCE}
.s-voltar{background:none;border:0;color:#0E76BC;cursor:pointer;padding:calc(10px * var(--s)) 0;
  font:600 calc(16px * var(--s))/1 Roboto,sans-serif;min-height:calc(44px * var(--s))}
.s-voltar:hover{text-decoration:underline}
.s-voltar:focus-visible{outline:3px solid #0E76BC;outline-offset:2px;border-radius:4px}

.s-acoes-topo{margin-bottom:calc(18px * var(--s))}
.s-lista{display:flex;flex-direction:column;gap:calc(11px * var(--s))}
.s-item{display:flex;align-items:center;justify-content:space-between;gap:calc(14px * var(--s));
  width:100%;text-align:left;background:#fff;border:2px solid #DCE4EC;border-radius:11px;
  padding:calc(17px * var(--s)) calc(20px * var(--s));min-height:calc(78px * var(--s))}
:root[data-theme="dark"] .s-item{background:#17233350;border-color:#2A3F55}
button.s-item{cursor:pointer;transition:border-color .18s ease}
button.s-item:hover{border-color:#0E76BC}
button.s-item:focus-visible{outline:3px solid #0E76BC;outline-offset:3px}
.s-item-texto{display:flex;flex-direction:column;gap:calc(3px * var(--s));min-width:0}
.s-item-titulo{font:600 calc(17px * var(--s))/1.35 Roboto,sans-serif}
.s-item-linha{font:400 calc(14.5px * var(--s))/1.45 Roboto,sans-serif;color:#5B6B7A}
:root[data-theme="dark"] .s-item-linha{color:#A8BCCE}
.s-etiqueta{flex:none;font:600 calc(13.5px * var(--s))/1 Roboto,sans-serif;
  padding:calc(9px * var(--s)) calc(14px * var(--s));border-radius:20px;background:#EEF2F6;color:#4A5C6E}
.s-etiqueta.ok{background:#E4F5E9;color:#1E7A3D}
.s-etiqueta.aguarda{background:#FFF3DC;color:#8A5B00}
.s-etiqueta.urgente{background:#FDE7E7;color:#A32020}

.s-vazio{background:#fff;border:2px dashed #C9D6E2;border-radius:11px;
  padding:calc(30px * var(--s));text-align:center;color:#5B6B7A;
  font:400 calc(17px * var(--s))/1.55 Roboto,sans-serif}
:root[data-theme="dark"] .s-vazio{background:#17233340;border-color:#33465C;color:#A8BCCE}

.s-secao{margin-top:calc(30px * var(--s))}
.s-secao h2{font:700 calc(21px * var(--s))/1.3 Roboto,sans-serif;margin:0 0 calc(13px * var(--s))}
.s-texto{font:400 calc(16.5px * var(--s))/1.65 Roboto,sans-serif;color:#4A5C6E;max-width:66ch}
:root[data-theme="dark"] .s-texto{color:#A8BCCE}
.s-nota{font:400 calc(14.5px * var(--s))/1.6 Roboto,sans-serif;color:#6B7C8C;margin-top:calc(11px * var(--s))}

/* ------------------------------- ajuda ---------------------------------- */
.s-ajuda{display:flex;flex-direction:column;gap:calc(10px * var(--s))}
.s-ajuda-item{background:#fff;border:2px solid #DCE4EC;border-radius:11px;overflow:hidden}
:root[data-theme="dark"] .s-ajuda-item{background:#17233350;border-color:#2A3F55}
.s-ajuda-item.aberta{border-color:#0E76BC}
.s-ajuda-p{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;
  padding:calc(18px * var(--s)) calc(20px * var(--s));min-height:calc(66px * var(--s));
  font:600 calc(17.5px * var(--s))/1.4 Roboto,sans-serif}
.s-ajuda-p:hover{background:#F4F8FB}
:root[data-theme="dark"] .s-ajuda-p:hover{background:#1D2C3E}
.s-ajuda-p:focus-visible{outline:3px solid #0E76BC;outline-offset:-3px}
.s-ajuda-sinal{font-size:calc(26px * var(--s));color:#0E76BC;flex:none;line-height:1}
.s-passos{margin:0;padding:0 calc(24px * var(--s)) calc(20px * var(--s)) calc(46px * var(--s));
  font:400 calc(16.5px * var(--s))/1.85 Roboto,sans-serif;color:#33465C}
:root[data-theme="dark"] .s-passos{color:#C4D4E2}
.s-passos li{margin-bottom:calc(5px * var(--s))}

.s-ajustes{display:flex;flex-direction:column;gap:calc(18px * var(--s))}
.s-ajuste-nome{display:block;font:600 calc(16px * var(--s))/1 Roboto,sans-serif;margin-bottom:calc(9px * var(--s))}
.s-ajuste-botoes{display:flex;flex-wrap:wrap;gap:calc(9px * var(--s))}

.s-botao{background:#fff;border:2px solid #C4D2DE;border-radius:9px;cursor:pointer;color:#16232F;
  font:600 calc(16px * var(--s))/1 Roboto,sans-serif;
  padding:calc(13px * var(--s)) calc(20px * var(--s));min-height:calc(50px * var(--s))}
:root[data-theme="dark"] .s-botao{background:#1D2C3E;color:#E7EEF5;border-color:#3A5068}
.s-botao:hover{border-color:#0E76BC}
.s-botao:focus-visible{outline:3px solid #0E76BC;outline-offset:2px}
.s-botao.on{background:var(--folha-clara);border-color:var(--folha);color:#14351F}
.s-botao.grande{min-height:calc(58px * var(--s));font-size:calc(17px * var(--s));
  padding:calc(16px * var(--s)) calc(26px * var(--s))}
.s-botao.destaque{background:#0E76BC;border-color:#0E76BC;color:#fff}
.s-botao.destaque:hover{background:#0A5E97;border-color:#0A5E97}
.s-botao.perigo{background:#A32020;border-color:#A32020;color:#fff}
.s-botao.perigo:hover{background:#871818;border-color:#871818}

/* ------------------------------- rodapé --------------------------------- */
.s-rodape{display:flex;align-items:center;justify-content:space-between;gap:calc(18px * var(--s));
  flex-wrap:wrap;background:#fff;border-top:2px solid #DCE4EC;
  padding:calc(18px * var(--s)) calc(24px * var(--s))}
:root[data-theme="dark"] .s-rodape{background:#152030;border-color:#25384C}
.s-rodape b{display:block;font:600 calc(16px * var(--s))/1.4 Roboto,sans-serif}
.s-rodape span{font:400 calc(14.5px * var(--s))/1.55 Roboto,sans-serif;color:#5B6B7A}
:root[data-theme="dark"] .s-rodape span{color:#A8BCCE}

/* ------------------------------- modais --------------------------------- */
.s-modal-fundo{position:fixed;inset:0;z-index:9500;background:rgba(12,26,40,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.s-modal{background:#fff;border-radius:14px;max-width:calc(560px * var(--escala-simples));width:100%;
  padding:calc(30px * var(--escala-simples));box-shadow:0 24px 60px rgba(10,25,40,.3)}
.s-modal.larga{max-width:calc(680px * var(--escala-simples))}
:root[data-theme="dark"] .s-modal{background:#152030;color:#E7EEF5}
.s-modal h2{font:700 calc(23px * var(--escala-simples))/1.3 Roboto,sans-serif;margin:0 0 calc(11px * var(--escala-simples))}
.s-modal p{font:400 calc(16.5px * var(--escala-simples))/1.6 Roboto,sans-serif;color:#4A5C6E;margin:0 0 calc(14px * var(--escala-simples))}
:root[data-theme="dark"] .s-modal p{color:#A8BCCE}
.s-modal-botoes{display:flex;gap:calc(11px * var(--escala-simples));flex-wrap:wrap;margin-top:calc(20px * var(--escala-simples))}
.s-modal-botoes .s-botao{flex:1;min-width:calc(190px * var(--escala-simples))}

.s-achados{display:grid;grid-template-columns:auto 1fr;gap:calc(11px * var(--escala-simples)) calc(18px * var(--escala-simples));
  background:#F4F8FB;border-radius:10px;padding:calc(20px * var(--escala-simples));margin:0}
:root[data-theme="dark"] .s-achados{background:#1D2C3E}
.s-achados dt{font:400 calc(14.5px * var(--escala-simples))/1.4 Roboto,sans-serif;color:#5B6B7A}
.s-achados dd{font:600 calc(16px * var(--escala-simples))/1.4 Roboto,sans-serif;margin:0}
.s-arquivo{position:relative;display:block;margin:calc(18px * var(--escala-simples)) 0}
.s-arquivo .s-botao{width:100%;text-align:center}
.s-progresso{height:calc(10px * var(--escala-simples));background:#E2EBF3;border-radius:6px;overflow:hidden;margin-top:14px}
.s-progresso span{display:block;height:100%;width:40%;background:#0E76BC;border-radius:6px;
  animation:s-andando 1.3s ease-in-out infinite}
@keyframes s-andando{0%{margin-left:-40%}100%{margin-left:100%}}
@media (prefers-reduced-motion: reduce){ .s-progresso span{animation:none;width:100%} }

/* ---------------------------- alto contraste ---------------------------- */
/* Preto sobre branco, bordas grossas e foco muito visível. Pensado para quem
   enxerga pouco, não para efeito visual.                                   */
:root[data-contraste="alto"] .s-app{background:#fff;color:#000}
:root[data-contraste="alto"] .s-barra{background:#000;color:#fff}
:root[data-contraste="alto"] .s-menu{background:#fff;border-bottom:3px solid #000}
:root[data-contraste="alto"] .s-menu-item{background:#fff;border:3px solid #000;color:#000}
:root[data-contraste="alto"] .s-menu-item.on{background:#000;color:#fff;border-color:#000}
:root[data-contraste="alto"] .s-cartao,
:root[data-contraste="alto"] .s-item,
:root[data-contraste="alto"] .s-ajuda-item,
:root[data-contraste="alto"] .s-vazio{background:#fff;border:3px solid #000;color:#000}
:root[data-contraste="alto"] .s-cartao-desc,
:root[data-contraste="alto"] .s-item-linha,
:root[data-contraste="alto"] .s-cabecalho-tela p,
:root[data-contraste="alto"] .s-saudacao p,
:root[data-contraste="alto"] .s-texto,
:root[data-contraste="alto"] .s-nota,
:root[data-contraste="alto"] .s-rodape span{color:#000}
:root[data-contraste="alto"] .s-botao{background:#fff;border:3px solid #000;color:#000}
:root[data-contraste="alto"] .s-botao.on,
:root[data-contraste="alto"] .s-botao.destaque{background:#000;color:#fff;border-color:#000}
:root[data-contraste="alto"] .s-botao.perigo{background:#8B0000;color:#fff;border-color:#000}
:root[data-contraste="alto"] .s-etiqueta{background:#fff;border:2px solid #000;color:#000}
:root[data-contraste="alto"] .s-voltar,
:root[data-contraste="alto"] .s-ajuda-sinal{color:#000;font-weight:700}
:root[data-contraste="alto"] :focus-visible{outline:4px solid #000;outline-offset:3px}
:root[data-contraste="alto"] .s-cartao:hover,
:root[data-contraste="alto"] button.s-item:hover{border-color:#000;background:#EDEDED}

/* ------------------------------ telas menores --------------------------- */
@media (max-width:640px){
  .s-barra{padding:12px 14px}
  .s-barra-marca span{display:none}
  .s-conteudo{padding:20px 14px 40px}
  .s-grade{grid-template-columns:1fr}
  .s-item{flex-direction:column;align-items:flex-start}
  .s-rodape{flex-direction:column;align-items:flex-start}
  .s-rodape .s-botao{width:100%}
}


/* ------------------- chips da barra: um padrão só ----------------------- */
/* A folhinha e o idioma seguem exatamente o mesmo desenho dos demais
   controles da barra: fundo transparente, sem traço de borda, tinta branca,
   canto de 4px e realce só no repouso do ponteiro. Antes cada um tinha caixa
   e contorno próprios, e os dois destoavam do resto.

   O alvo de clique continua confortável sem engordar o botão: um retângulo
   invisível de 44px cobre a área ao redor pelo ::before, então o desenho fica
   com 36px, igual aos vizinhos, e a mão acerta do mesmo jeito.            */
.bar-chip{position:relative;display:flex;align-items:center;gap:7px;height:36px;padding:0 9px;
  background:transparent;border:none;border-radius:4px;color:#fff;cursor:pointer;
  font:600 12.5px/1 Roboto,system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;
  transition:background .2s ease}
.bar-chip::before{content:"";position:absolute;inset:-4px;border-radius:8px}
.bar-chip:hover{background:rgba(255,255,255,.12)}
.bar-chip:active{background:rgba(255,255,255,.18)}
.bar-chip:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:1px}
/* Ativo: um véu discreto, do mesmo tom do repouso do ponteiro. Nada de caixa
   clara chapada, que puxava o olho e brigava com a barra.                 */
.bar-chip.on{background:rgba(255,255,255,.16)}
.bar-chip .bar-chip-txt{opacity:.92}

/* Em superfície clara, a mesma lógica com tinta escura. */
.bar-chip.escuro{color:var(--ink)}
.bar-chip.escuro:hover{background:rgba(20,58,94,.08)}
.bar-chip.escuro.on{background:rgba(20,58,94,.11)}
.bar-chip.escuro:focus-visible{outline-color:var(--accent)}

/* folhinha */
.folha-svg{display:block;flex:none;transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.bar-chip:hover .folha-svg{transform:rotate(-7deg) scale(1.05)}
/* Verde claro quando ativo: sobre o azul da barra, o verde saturado some.  */
.bar-chip.on .folha-corpo{fill:#9FE3B4;stroke:#9FE3B4}
.bar-chip.on .folha-haste{stroke:#9FE3B4}
.bar-chip.escuro.on .folha-corpo{fill:var(--folha);stroke:var(--folha)}
.bar-chip.escuro.on .folha-haste{stroke:var(--folha)}

/* bandeira do idioma */
.bar-chip .bandeira-svg{display:block;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}

@keyframes brotar{
  0%{transform:scale(.55) rotate(-24deg);opacity:.45}
  55%{transform:scale(1.16) rotate(6deg);opacity:1}
  78%{transform:scale(.97) rotate(-2deg)}
  100%{transform:scale(1) rotate(0)}
}
.bar-chip.brotando .folha-svg{animation:brotar .58s cubic-bezier(.34,1.3,.64,1) both}
@keyframes onda-folha{ from{transform:scale(.35);opacity:.3} to{transform:scale(2.1);opacity:0} }
.folha-onda{position:absolute;left:9px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;
  background:#9FE3B4;pointer-events:none;animation:onda-folha .7s ease-out forwards}

/* menu de idiomas: sem borda pesada, apoiado só na sombra */
.idioma-wrap{position:relative}
.idioma-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:238px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 10px 34px rgba(15,32,50,.16);padding:5px;color:var(--ink)}
.idioma-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  background:none;border:0;border-radius:6px;cursor:pointer;font:inherit;font-size:13px;
  color:var(--ink);text-align:left}
.idioma-menu button:hover{background:var(--surface2)}
.idioma-menu button.on{font-weight:600}
.idioma-menu .bandeira-svg{box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.idioma-ok{margin-left:auto;color:var(--ok)}
.idioma-nota{padding:9px 10px 6px;border-top:1px solid var(--line);margin-top:4px;
  font-size:10.5px;line-height:1.55;color:var(--muted)}

/* Dentro do Modo Simples, o chip adota a medida dos botões daquela barra: ali
   o alvo grande e visível é proposital, e os dois precisam formar um par.  */
.s-barra .bar-chip{height:calc(46px * var(--s));padding:0 calc(17px * var(--s));
  border-radius:8px;font:600 calc(15px * var(--s))/1 Roboto,system-ui,sans-serif;
  background:rgba(255,255,255,.14)}
.s-barra .bar-chip:hover{background:rgba(255,255,255,.24)}
.s-barra .bar-chip::before{inset:0}

@media (prefers-reduced-motion: reduce){
  .bar-chip,.folha-svg,.bar-chip.brotando .folha-svg,.folha-onda{animation:none!important;transition:none!important}
}
@media (max-width:760px){ .bar-chip .bar-chip-txt{display:none} .bar-chip{padding:0 7px} }


/* ====================== PLANOS E PAGAMENTO =============================
   A paleta aqui é a do sistema, com um detalhe deliberado: a área de
   pagamento não usa vermelho nem sinal de alerta. Susto não é segurança.
   O que tranquiliza é a tela dizer, com clareza, o que acontece com o dado
   do cartão, e o desenho ficar calmo o bastante para a pessoa ler.       */

.planos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;align-items:start}
.plano{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;
  display:flex;flex-direction:column;gap:14px;transition:border-color .2s ease,box-shadow .2s ease}
.plano:hover{border-color:var(--accent);box-shadow:0 8px 26px rgba(14,118,188,.10)}
.plano.destaque{border-color:var(--accent);box-shadow:0 8px 26px rgba(14,118,188,.14)}
.plano.atual{border-color:var(--ok)}
.plano-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.plano-topo h3{font-size:17px;font-weight:600;margin:0}
.plano-desc{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.45}
.plano-selo{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:20px;background:var(--ok-soft);color:var(--ok)}
.plano-selo.forte{background:var(--accent);color:#fff}
.plano-preco{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.plano-valor{font-size:29px;font-weight:700;letter-spacing:-.02em}
.plano-ciclo{font-size:13px;color:var(--muted)}
.plano-economia{flex-basis:100%;font-size:11.5px;color:var(--ok);margin-top:3px}
.plano-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.plano-itens li{font-size:12.8px;line-height:1.45;padding-left:19px;position:relative;color:var(--ink2)}
.plano-itens li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.plano-atual-marca{text-align:center;font-size:12.5px;font-weight:600;color:var(--ok);
  padding:9px;border:1px dashed var(--ok);border-radius:7px}

/* ------------------------------ pagamento ------------------------------ */
.pg-tela{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:26px;align-items:start;
  max-width:1080px;margin:0 auto;padding:6px 0 40px}
.pg-titulo{font-size:24px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.pg-sub{font-size:13.5px;color:var(--muted);margin:0 0 22px;max-width:60ch;line-height:1.55}

.pg-bloco{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:20px 22px;margin-bottom:15px}
.pg-bloco-topo{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.pg-bloco-topo b{font-size:14.5px;font-weight:600}
.pg-passo{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}
.pg-bandeira{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 9px;border-radius:5px;color:#fff;background:var(--b)}
.pg-texto{font-size:13.2px;line-height:1.65;color:var(--ink2);margin:0 0 10px;max-width:62ch}

/* meios de pagamento: cartões grandes, um por linha, fáceis de comparar */
.pg-meios{display:flex;flex-direction:column;gap:9px}
.pg-meio{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:9px;padding:14px 16px;
  transition:border-color .18s ease,background .18s ease}
.pg-meio:hover{border-color:var(--accent)}
.pg-meio.on{border-color:var(--accent);background:var(--accent-soft)}
.pg-meio:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg-meio-icone{font-size:21px;line-height:1.2;flex:none}
.pg-meio-txt{display:flex;flex-direction:column;gap:2px}
.pg-meio-txt b{font-size:13.8px;font-weight:600}
.pg-meio-txt span{font-size:12.2px;color:var(--muted);line-height:1.45}
.pg-meio-prazo{font-size:11px!important;color:var(--ok)!important;font-weight:600}

/* cartão desenhado: dá referência visual do que está sendo digitado */
.pg-cartao-visual{position:relative;border-radius:11px;padding:20px 22px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--b) 0%,color-mix(in srgb,var(--b) 60%,#101820) 100%);
  color:#fff;min-height:148px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 8px 24px rgba(16,24,32,.18);transition:background .5s ease}
.pg-cv-chip{width:34px;height:25px;border-radius:5px;
  background:linear-gradient(135deg,#E8C766 0%,#B9954A 100%);opacity:.9}
.pg-cv-numero{font-size:18px;letter-spacing:.12em;opacity:.96}
.pg-cv-linha{display:flex;justify-content:space-between;gap:16px;font-size:12px}
.pg-cv-linha small{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.62;margin-bottom:2px}
.pg-cv-linha span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pg-campo{display:block;margin-bottom:13px}
.pg-rotulo{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.pg-input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;
  transition:border-color .16s ease,box-shadow .16s ease}
.pg-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pg-campo.erro .pg-input{border-color:var(--warn)}
.pg-ajuda{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.pg-erro{display:block;font-size:11.5px;color:var(--warn);margin-top:5px}
.pg-linha{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* bloco de segurança: verde discreto, sem alarme */
.pg-seguro{border-color:color-mix(in srgb,var(--ok) 32%,var(--line))}
.pg-cadeado{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-soft);color:var(--ok)}
.pg-seguro-itens{display:flex;flex-direction:column;gap:12px}
.pg-seguro-item{display:flex;gap:11px;align-items:flex-start}
.pg-seguro-item > span:last-child{display:flex;flex-direction:column;gap:2px}
.pg-seguro-item b{font-size:13px;font-weight:600}
.pg-seguro-item span span{font-size:12.2px;color:var(--muted);line-height:1.55}
.pg-check{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-soft);color:var(--ok);font-size:11px;font-weight:700;margin-top:1px}

/* resumo fixo */
.pg-resumo{position:sticky;top:74px}
.pg-resumo-caixa{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:20px}
.pg-resumo-caixa h2{font-size:14px;font-weight:600;margin:0 0 14px;letter-spacing:.02em}
.pg-resumo-linha{display:flex;justify-content:space-between;gap:12px;font-size:13px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.pg-resumo-linha span{color:var(--muted)}
.pg-resumo-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 0 4px;font-size:13px}
.pg-resumo-total b{font-size:22px;font-weight:700;letter-spacing:-.01em}
.pg-resumo-nota{font-size:11.5px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.pg-confirmar{width:100%;margin-top:16px;padding:14px;border:0;border-radius:9px;cursor:pointer;
  background:var(--accent);color:#fff;font:inherit;font-size:14.5px;font-weight:600;
  transition:background .18s ease,transform .12s ease}
.pg-confirmar:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 85%,#000)}
.pg-confirmar:active:not(:disabled){transform:translateY(1px)}
.pg-confirmar:disabled{opacity:.45;cursor:not-allowed}
.pg-confirmar:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pg-selo-linha{display:flex;align-items:flex-start;gap:8px;margin-top:13px;
  font-size:11.5px;color:var(--muted);line-height:1.5}
.pg-selo-linha svg{flex:none;margin-top:1px;color:var(--ok)}
.pg-resumo-mini{font-size:10.8px;color:var(--muted2);line-height:1.5;margin:11px 0 0}
.pg-alerta{margin-top:14px;padding:12px 14px;border-radius:8px;font-size:12.5px;line-height:1.55;
  background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}

/* ------------------------- meios já cadastrados ------------------------- */
.meio-linha{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.meio-linha:last-child{border-bottom:0}
.meio-bandeira{flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;padding:5px 8px;
  border-radius:5px;color:#fff;background:var(--b)}
.meio-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.uso-item{display:block}
.uso-linha{display:flex;justify-content:space-between;align-items:center;gap:10px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.kpi-rot{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.kpi-val{font-size:22px;font-weight:700;letter-spacing:-.01em}

@media (max-width:900px){
  .pg-tela{grid-template-columns:1fr}
  .pg-resumo{position:static}
}
@media (max-width:520px){ .pg-linha{grid-template-columns:1fr} }

/* ===== BLUEJUS: CSS DE VALIDAÇÃO E CONTRIBUIÇÃO ===== */
/* ===================== VALIDAÇÃO DE DOCUMENTOS =========================
   A página pública é lida quase sempre no celular, com o papel na outra mão.
   O veredito ocupa a primeira dobra e não divide espaço com nada. Tudo o que
   é técnico fica abaixo, para quem quiser conferir.                       */

.vfy-wrap{max-width:720px;margin:0 auto;width:100%;padding:32px 18px 64px}
.vfy-voltar{margin-left:auto;background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

.vfy-hero h1{font-size:26px;margin:0 0 8px;letter-spacing:-.2px}
.vfy-hero p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 22px;max-width:56ch}

/* ------------------------------ veredito ------------------------------- */
.vfy-res{border-radius:12px;padding:26px 22px;margin-bottom:18px;text-align:center;
  border:1px solid var(--line);background:var(--surface)}
.vfy-res h2{font-size:19px;margin:12px 0 6px;letter-spacing:.3px}
.vfy-res p{font-size:13.5px;line-height:1.6;margin:0 auto;max-width:52ch;color:var(--ink2)}
.vfy-res .xs{margin-top:9px}
.vfy-res .btn{margin-top:15px}

.vfy-selo{width:56px;height:56px;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;font-weight:600}

.vfy-ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  background:color-mix(in srgb,var(--ok) 7%,var(--surface))}
.vfy-ok .vfy-selo{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.vfy-ok h2{color:var(--ok)}

.vfy-crit{border-color:color-mix(in srgb,var(--crit) 40%,transparent);
  background:color-mix(in srgb,var(--crit) 7%,var(--surface))}
.vfy-crit .vfy-selo{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.vfy-crit h2{color:var(--crit)}

.vfy-warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.vfy-warn .vfy-selo{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.vfy-warn h2{color:var(--warn)}

.vfy-nao{border-color:var(--line)}
.vfy-nao .vfy-selo{background:var(--surface2);color:var(--muted)}
.vfy-nao h2{color:var(--ink)}

/* Na área autenticada o veredito é uma faixa, não um bloco central: ali ele
   é cabeçalho de uma tela de trabalho, e não a resposta única da página. */
.vfy-res-int{display:flex;align-items:center;gap:16px;text-align:left;padding:18px 20px}
.vfy-res-int .vfy-selo{width:42px;height:42px;font-size:21px;margin:0;flex:none}
.vfy-res-int h2{margin:0 0 3px;font-size:16px}
.vfy-res-int p{margin:0;font-size:12.5px}

/* ------------------------------ formulário ----------------------------- */
.vfy-card{margin-bottom:16px}
.vfy-tabs{padding:0 16px;border-bottom:1px solid var(--line)}
.vfy-linha{display:flex;gap:9px;margin-top:5px;flex-wrap:wrap}
.vfy-linha .input{flex:1;min-width:220px}
.vfy-codigo{font-family:var(--mono);font-size:14px;letter-spacing:.4px}
.vfy-dica{margin-top:10px;line-height:1.55}
.vfy-mt{margin-top:14px}
.vfy-erro{color:var(--crit);font-size:12.5px;margin-top:11px;line-height:1.5}
.vfy-file{padding:9px}
.vfy-kv dd .hash{word-break:break-all}
.vfy-txt-ok{color:var(--ok)}
.vfy-txt-crit{color:var(--crit)}
.vfy-ausente{color:var(--muted);font-style:italic}

.vfy-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.vfy-rodape{margin-top:20px;line-height:1.6;max-width:60ch}

/* -------------------------------- câmera -------------------------------- */
.vfy-qr-inicio{text-align:center;padding:12px 0}
.vfy-qr-icone{color:var(--accent);margin-bottom:10px}
.vfy-qr-inicio p{max-width:44ch;margin:0 auto 12px}
.vfy-camera{position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:4/3;max-width:420px;margin:0 auto}
.vfy-camera video{width:100%;height:100%;object-fit:cover;display:block}
.vfy-mira{position:absolute;inset:18%;border:2px solid rgba(255,255,255,.85);border-radius:10px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.28)}

/* ----------------------------- assinaturas ------------------------------ */
.vfy-ass{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.vfy-ass-item{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:8px 0;border-bottom:1px solid var(--line)}
.vfy-ass-item:last-of-type{border-bottom:0}
.vfy-ass-nome{font-size:13px;font-weight:500}

.vfy-hist{margin-top:14px}
.vfy-hist-item{display:flex;gap:12px;align-items:baseline;padding:6px 0;font-size:12.5px;line-height:1.5}
.vfy-hist-data{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;min-width:112px}

.vfy-ev{margin-bottom:0}
.vfy-ev-topo{justify-content:space-between;gap:12px;margin-bottom:10px}

/* ---------------------------- comprovante ------------------------------- */
.vfy-comp-topo{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
.vfy-comp-qr{width:104px;flex:none}
.vfy-comp-qr svg{width:100%;height:auto;display:block}
.vfy-comp-tit{font-weight:500;margin:3px 0 2px}

/* ------------------------------- carimbo -------------------------------- */
.vfy-carimbo-quadro{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:12px;margin:12px 0;overflow-x:auto}
.vfy-carimbo-quadro svg{max-width:100%;height:auto;display:block}
.vfy-modal{max-width:640px}
.vfy-td-acoes{display:flex;gap:6px;flex-wrap:wrap}
.vfy-tbl .hash{font-size:10.5px}

/* Impressão do comprovante: sai só o comprovante, sem menu e sem botão. */
@media print{
  .bleed-bar,.vfy-tabs,.vfy-acoes,.vfy-hero,.topbar,.sidebar,.tabs{display:none !important}
  .vfy-wrap{padding:0;max-width:none}
  .vfy-card{border:0;box-shadow:none}
  .vfy-res{break-inside:avoid}
}

@media (max-width:520px){
  .vfy-wrap{padding:22px 14px 48px}
  .vfy-res{padding:22px 16px}
  .vfy-res h2{font-size:17px}
  .vfy-hist-item{flex-direction:column;gap:2px}
  .vfy-hist-data{min-width:0}
  .vfy-tabs{overflow-x:auto}
}

/* ==================== APOIE O PROJETO E TRIAGEM ========================= */

.ctr-wrap{max-width:900px;margin:0 auto;width:100%;padding:34px 20px 66px}
.ctr-voltar{margin-left:auto;background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.ctr-titulo{font-size:25px;margin:6px 0 8px;letter-spacing:-.2px}
.ctr-sub{color:var(--muted);font-size:13.5px;line-height:1.62;margin:0 0 22px;max-width:62ch}
.ctr-split{align-items:start}

.ctr-valores{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.ctr-mt{margin-top:13px}
.ctr-mt-s{margin-top:7px}
.ctr-erro{color:var(--crit);font-size:12.5px;margin-top:11px;line-height:1.5}
.ctr-lista{gap:7px;margin-top:9px}
.ctr-item{gap:8px}
.ctr-ponto{color:var(--accent)}

/* ------------------------- código gerado -------------------------------- */
/* O QR e o valor ficam lado a lado, porque a pessoa precisa dos dois ao mesmo
   tempo: aponta a câmera do banco e confere o valor antes de confirmar.   */
.ctr-qr-bloco{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.ctr-qr{width:210px;flex:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px}
.ctr-qr svg{width:100%;height:auto;display:block}
.ctr-qr-lado{flex:1;min-width:200px}
.ctr-valor-grande{font-size:27px;font-weight:600;letter-spacing:-.4px;margin:3px 0 0;color:var(--ink)}
.ctr-centavos{color:var(--warn);margin-top:6px;line-height:1.5;max-width:34ch}
.ctr-chave{margin:4px 0 9px;word-break:break-all}

.ctr-cec{border-top:1px solid var(--line)}
.ctr-payload{font-family:var(--mono);font-size:10.5px;line-height:1.5;resize:vertical;margin-top:5px;
  word-break:break-all}
.ctr-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.ctr-kv{margin-top:11px}
.ctr-kv dd .hash{word-break:break-all}

/* ------------------------------- painel --------------------------------- */
.ctr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:16px}
.ctr-tabs{margin-bottom:15px}
.ctr-tbl .hash{font-size:10.5px}
.ctr-td-acoes{display:flex;gap:6px;flex-wrap:wrap}
.ctr-extrato{font-family:var(--mono);font-size:11.5px;margin-top:6px;resize:vertical}
.ctr-modal{max-width:560px}

.ctr-nivel{border-left:3px solid var(--line)}
.ctr-nivel.on{border-left-color:var(--ok)}
.ctr-nivel-topo{justify-content:space-between;gap:12px}

@media (max-width:640px){
  .ctr-wrap{padding:24px 14px 48px}
  .ctr-qr{width:100%;max-width:260px;margin:0 auto}
  .ctr-valor-grande{font-size:24px}
  .ctr-kpis{grid-template-columns:repeat(2,1fr)}
}

/* ===== BLUEJUS: CSS DE CERTIFICADOS E ARMAZENAMENTO ===== */
/* --------------------------- CERTIFICADOS ------------------------------
   A folha é a protagonista. Todo o resto da tela existe para não competir
   com ela: painéis claros, contornos finos e nenhuma cor forte fora da arte
   do próprio certificado, para que a pessoa julgue o certificado, e não a
   interface em volta dele.                                                */

/* ------------------------------ galeria ------------------------------- */
.cert-galeria{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.cert-galeria.compacta{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}

.cert-cartao{margin:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s;cursor:default}
.cert-cartao[role="button"]{cursor:pointer}
.cert-cartao:hover{border-color:var(--line2);box-shadow:0 6px 18px rgba(20,32,44,.09);transform:translateY(-2px)}
.cert-cartao.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 6px 18px rgba(20,32,44,.1)}
.cert-cartao:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cert-cartao figcaption{display:flex;flex-direction:column;gap:2px;padding:11px 13px 13px;
  border-top:1px solid var(--line)}
.cert-cartao figcaption b{font-size:13px;font-weight:600}

/* A miniatura recorta a folha inteira em proporção fixa, para que a grade
   fique alinhada mesmo com modelos de tamanhos diferentes.               */
.cert-mini{position:relative;aspect-ratio:297/210;background:var(--surface2);overflow:hidden}
.cert-mini svg{position:absolute;inset:0;width:100%;height:100%}

@media (prefers-reduced-motion: reduce){
  .cert-cartao{transition:none}
  .cert-cartao:hover{transform:none}
}

/* ---------------------------- assistente ------------------------------ */
.cert-wiz{max-width:1080px}
.cert-wiz-corpo{min-height:380px;max-height:min(64vh,620px);overflow-y:auto}

.cert-passos{display:flex;gap:0;padding:0 20px;overflow-x:auto;border-bottom:1px solid var(--line);
  background:var(--surface2)}
.cert-passo{display:flex;align-items:center;gap:6px;padding:11px 10px;white-space:nowrap;
  font-size:11.5px;color:var(--muted);border-bottom:2px solid transparent}
.cert-passo-n{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--line2);font-size:10.5px;font-weight:600;flex:none}
.cert-passo.on{color:var(--accent);border-bottom-color:var(--accent)}
.cert-passo.on .cert-passo-n{border-color:var(--accent);background:var(--accent);color:#fff}
.cert-passo.feito{color:var(--ok)}
.cert-passo.feito .cert-passo-n{border-color:var(--ok);background:var(--ok);color:#fff}
@media (max-width:760px){ .cert-passo-t{display:none} .cert-passo{padding:11px 8px} }

.cert-progresso{height:3px;background:var(--neutral-soft)}
.cert-progresso span{display:block;height:100%;background:var(--accent);
  transition:width .3s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion: reduce){ .cert-progresso span{transition:none} }

.cert-pergunta{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}

.cert-escolhas{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cert-escolha{position:relative;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  text-align:left;padding:13px 15px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,background .15s}
.cert-escolha b{font-size:13.5px;font-weight:600}
.cert-escolha:hover:not(:disabled){border-color:var(--line2);background:var(--surface2)}
.cert-escolha.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cert-escolha:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cert-escolha.bloqueada,.cert-escolha:disabled{opacity:.55;cursor:not-allowed;background:var(--surface2)}
.cert-escolha.nova{align-items:center;justify-content:center;text-align:center;border-style:dashed;color:var(--muted)}
.cert-ordem{position:absolute;top:9px;right:10px;display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:600}

.cert-frase{margin-top:16px;padding:13px 15px;border-left:3px solid var(--accent);
  background:var(--surface2);border-radius:0 6px 6px 0}
.cert-frase p{margin:5px 0 0;font-size:13.5px;line-height:1.6}

.cert-linha-ruim{background:var(--crit-soft)}

.cert-revisao{display:grid;gap:16px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
.cert-previa-grande{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface2)}
.cert-previa-grande svg{display:block;width:100%;height:auto}
@media (max-width:900px){ .cert-revisao{grid-template-columns:1fr} }

.cert-emissao{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:40px 0}
.cert-emissao-num{font-family:var(--display,inherit);font-size:66px;font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--accent)}

.cert-entrega{display:flex;gap:9px;flex-wrap:wrap}

.cert-conclusao{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 0 10px}
.cert-conclusao h3{margin:14px 0 6px;font-size:20px;font-weight:600;letter-spacing:-.015em}
.cert-selo-ok{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:var(--ok-soft);color:var(--ok)}
.cert-lista{margin:10px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink2);line-height:1.7}

/* ------------------------------ editor -------------------------------- */
.cert-editor{display:grid;gap:16px;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);align-items:start}
@media (max-width:940px){ .cert-editor{grid-template-columns:1fr} }

/* O palco não recorta: os rótulos são ancorados no ponto do campo e centrados
   sobre ele, então os campos de canto ficariam metade para fora. Recortar
   esconderia justamente o rótulo do código de validação, que mora no rodapé
   esquerdo. A folha guarda a borda arredondada por conta própria.        */
.cert-palco{position:relative;border:1px solid var(--line);border-radius:6px;overflow:visible;
  background:var(--surface2);touch-action:none;margin:6px 8px}
.cert-folha{border-radius:5px;overflow:hidden}
.cert-folha svg{display:block;width:100%;height:auto}
.cert-alvos{position:absolute;inset:0}

/* O rótulo arrastável fica ancorado no ponto exato do campo, e é por isso
   que ele é traduzido em metade da própria largura: o que se arrasta é o
   ponto de origem do texto, não a caixa em volta dele.                   */
.cert-alvo{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;
  padding:2px 8px;border:1px dashed var(--accent);border-radius:12px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--accent);font:inherit;font-size:10.5px;font-weight:600;white-space:nowrap;
  cursor:grab;touch-action:none;opacity:.72;transition:opacity .15s}
.cert-alvo:hover{opacity:1}
.cert-alvo.on{opacity:1;background:var(--accent);color:#fff;border-style:solid}
.cert-alvo.arrastando{cursor:grabbing;opacity:1;box-shadow:0 3px 10px rgba(20,32,44,.22)}
.cert-alvo:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}

.cert-controles{border:1px solid var(--line);border-radius:6px;padding:0 15px 15px;background:var(--surface)}
.cert-controles .tabs{margin:0 -15px 0;padding:0 15px}

/* --------------------- quadro de assinatura --------------------------- */
.cert-quadro{border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#fff}
.cert-quadro canvas{display:block;width:100%;height:auto;aspect-ratio:600/190;
  cursor:crosshair;touch-action:none;
  background:linear-gradient(to bottom,transparent calc(100% - 34px),var(--line) calc(100% - 34px),
    var(--line) calc(100% - 33px),transparent calc(100% - 33px))}
.cert-quadro-acoes{display:flex;align-items:center;gap:12px;padding:9px 11px;
  border-top:1px solid var(--line);background:var(--surface2)}

/* ------------------------------ painel -------------------------------- */
.cert-colunas{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px}
.cert-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;height:100%}
.cert-col span{display:block;width:100%;max-width:44px;border-radius:3px 3px 0 0;background:var(--accent);
  transition:height .3s cubic-bezier(.22,.61,.36,1)}
.cert-col b{font-size:10.5px;font-weight:500;color:var(--muted)}
@media (prefers-reduced-motion: reduce){ .cert-col span{transition:none} }

/* Coluna de ações: os botões ficam em uma linha só e a coluna encolhe ao
   conteúdo. Sem isso eles quebram e escapam da largura da tabela.       */
.tbl td.cel-acoes{white-space:nowrap;width:1%}
.tbl td.cel-acoes .btn{display:inline-flex;vertical-align:middle;margin-left:6px}
.tbl td.cel-acoes .btn:first-child{margin-left:0}

.cert-detalhe{display:grid;gap:16px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){ .cert-detalhe{grid-template-columns:1fr} }

/* ------------------- validação pública de certificado ------------------ */
.cvfy{min-height:100vh;background:var(--surface2)}
.cvfy-wrap{max-width:760px;margin:0 auto;padding:34px 16px 60px}
.cvfy-titulo{margin:0 0 6px;font-size:27px;font-weight:600;letter-spacing:-.02em}
.cvfy-sub{margin:0 0 22px;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:52ch}
.cvfy-form{display:flex;flex-direction:column;gap:0}
.cvfy-form .campo{margin-bottom:12px}
.cvfy-codigo{font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.cvfy-mt{margin-top:14px}

.cvfy-veredito{display:flex;gap:16px;align-items:flex-start;margin-top:20px;padding:20px 22px;
  border-radius:8px;border:1px solid var(--line)}
.cvfy-veredito b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.cvfy-veredito p{margin:5px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.cvfy-veredito.bom{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.cvfy-veredito.bom b{color:var(--ok)}
.cvfy-veredito.atencao{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.cvfy-veredito.atencao b{color:var(--warn)}
.cvfy-veredito.ruim{background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.cvfy-veredito.ruim b{color:var(--crit)}
.cvfy-marca{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--surface);font-size:22px;font-weight:700;line-height:1}
.cvfy-veredito.bom .cvfy-marca{color:var(--ok)}
.cvfy-veredito.atencao .cvfy-marca{color:var(--warn)}
.cvfy-veredito.ruim .cvfy-marca{color:var(--crit)}

.cvfy-dados{margin-top:14px}
.cvfy-grade{display:grid;gap:14px 20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cvfy-dado{display:flex;flex-direction:column;gap:2px}
.cvfy-dado b{font-size:13.5px;font-weight:500;line-height:1.45}
.cvfy-assinantes{display:flex;flex-direction:column;gap:8px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line)}
.cvfy-assinante{display:flex;flex-direction:column}
.cvfy-assinante b{font-size:13.5px;font-weight:500}
.cvfy-hist{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cvfy-hist-item{margin-top:8px}
.cvfy-hist-item p{margin:2px 0 0}
.cvfy-selo{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.cvfy-selo .hash{font-family:var(--mono);font-size:10.5px;color:var(--muted);word-break:break-all;line-height:1.6}
.cvfy-rodape{margin-top:22px;max-width:60ch}

@media (max-width:600px){
  .cvfy-titulo{font-size:22px}
  .cvfy-veredito{padding:16px;gap:12px}
  .cvfy-veredito b{font-size:15px}
  .cert-escolhas{grid-template-columns:1fr}
  .cert-galeria{grid-template-columns:1fr}
}

/* --------------------------- impressão -------------------------------- */
@media print{
  .cert-wiz .modal-head,.cert-passos,.cert-progresso,.cert-wiz .modal-foot,
  .cert-controles,.cert-alvos{display:none !important}
  .cert-previa-grande,.cert-palco{border:none}
}

/* ------------------- ARMAZENAMENTO E CONSUMO ---------------------------
   A barra é a peça central destas telas, e por isso ela recebe mais cuidado
   do que o resto: altura suficiente para se ver a proporção de relance, cor
   que muda de significado nas faixas, e uma segunda faixa mais clara para a
   lixeira, porque espaço ocupado por arquivo que ainda pode ser restaurado
   também é espaço ocupado, e esconder isso seria a parte desonesta.      */

.arm-barra{display:flex;flex-direction:column;gap:7px}
.arm-barra-topo{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.arm-barra-topo b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.arm-pct{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--muted)}
.arm-pct.warn{color:var(--warn)}
.arm-pct.crit{color:var(--crit)}

.arm-track{position:relative;height:11px;border-radius:6px;background:var(--neutral-soft);overflow:hidden}
.arm-track.mini{height:7px;border-radius:4px;margin-bottom:3px}
.arm-fill{position:absolute;top:0;left:0;height:100%;border-radius:6px;
  transition:width .35s cubic-bezier(.22,.61,.36,1)}
/* A lixeira aparece listrada: mesma cor de fundo da barra, textura diferente,
   para que ninguém confunda com espaço livre nem com arquivo ativo.      */
.arm-lixo{border-radius:0 6px 6px 0;background:repeating-linear-gradient(
  135deg, var(--line2) 0 4px, var(--neutral-soft) 4px 8px)}
.arm-barra-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.arm-legenda-lixo{display:inline-flex;align-items:center;gap:6px}
.arm-legenda-lixo::before{content:"";width:14px;height:8px;border-radius:2px;
  background:repeating-linear-gradient(135deg,var(--line2) 0 4px,var(--neutral-soft) 4px 8px)}
.arm-aviso{margin-top:4px}
.arm-barra.compacta .arm-barra-topo b{font-size:13px}
.arm-barra.compacta .arm-track{height:8px}

@media (prefers-reduced-motion: reduce){ .arm-fill{transition:none} }

.arm-graf{width:100%;height:180px;display:block}

/* A barra fina reaproveitada do sistema espera um bloco dentro dela. Como
   aqui o preenchimento é um <span>, ele precisa virar bloco: altura não se
   aplica a elemento em linha, e sem isso a barra sai vazia.              */
.bar-track>.bar-fill{display:block}

/* ------------------------------ planos -------------------------------- */
.arm-planos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.arm-plano{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.arm-plano.atual{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.arm-plano-tag{position:absolute;top:-9px;left:14px;padding:2px 8px;border-radius:3px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.arm-plano-espaco{font-family:var(--display,inherit);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.arm-plano-nome{font-size:12.5px;font-weight:500;color:var(--ink2)}
.arm-plano p{margin:2px 0 0;flex:1}
.arm-plano-preco{display:flex;align-items:baseline;gap:5px;margin-top:6px}
.arm-plano-preco b{font-size:17px;font-weight:600}
.arm-plano .btn{margin-top:10px;align-self:flex-start}

/* --------------------- campos usados pelos modais ---------------------- */
/* O sistema já tem .field, que espera um <label> filho. Estas telas montam o
   campo como um único <label> envolvendo rótulo e controle, que é o que
   mantém o clique no texto funcionando sem repetir identificadores.      */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo>span{font-size:12.5px;color:var(--ink2)}
.campo input,.campo select,.campo textarea{padding:9px 11px;border:1px solid var(--line2);
  border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:13.5px;color:var(--ink);width:100%}
.campo textarea{resize:vertical;min-height:52px;line-height:1.5}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.grid2{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

@media (max-width:760px){
  .arm-barra-topo b{font-size:14px}
  .arm-planos{grid-template-columns:1fr}
}

/* ===== BLUEJUS: CSS DE COFRE ===== */
/* ------------------------------- COFRE ---------------------------------
   Três colunas, que espelham como a pessoa procura: o cofre, a pasta, o
   documento. A largura de cada uma foi escolhida para que a lista de cofres
   caiba inteira sem cortar nome de condomínio, que é longo por natureza.  */

.cof-tela{display:grid;grid-template-columns:272px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1080px){ .cof-tela{grid-template-columns:1fr} }

/* ---------------------------- barra de cofres -------------------------- */
.cof-lado{border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:12px 0 8px;position:sticky;top:112px;max-height:calc(100vh - 132px);overflow-y:auto}
.cof-busca{margin:0 12px 10px}
.cof-grupo{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px 6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.cof-conta{font-family:var(--mono);font-weight:400;letter-spacing:0}

.cof-item{display:flex;align-items:stretch;gap:0;border-left:3px solid transparent}
.cof-item.on{border-left-color:var(--accent);background:var(--surface2)}
.cof-item.arquivado{opacity:.62}
.cof-item:hover{background:var(--surface2)}

.cof-estrela{width:26px;flex:none;background:none;border:none;cursor:pointer;
  color:var(--line2);font-size:13px;line-height:1;padding:0}
.cof-estrela.on{color:var(--seal)}
.cof-estrela:hover{color:var(--seal)}
.cof-estrela:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.cof-abrir{flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  padding:9px 12px 9px 0;background:none;border:none;cursor:pointer;font:inherit;
  color:inherit;text-align:left}
.cof-abrir:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cof-nome{flex:1;min-width:0;font-size:12.5px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cof-item.on .cof-nome{font-weight:600}
.cof-qtd{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none}
.cof-cadeado{display:inline-flex;vertical-align:-2px;margin-left:5px;color:var(--muted)}
.cof-soltos{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:11px 12px 9px;
  border:none;border-top:1px solid var(--line);border-left:3px solid transparent;
  background:none;cursor:pointer;font:inherit;color:inherit;text-align:left}
.cof-soltos.on{border-left-color:var(--accent);background:var(--surface2)}

/* A cor é a etiqueta: o olho a lê antes do nome, e é ela que torna uma lista
   de trinta cofres navegável.                                             */
.cof-cor{width:9px;height:9px;border-radius:2px;flex:none;background:var(--line2)}
.cof-cor.grande{width:14px;height:14px;border-radius:3px}
.cof-cor.neutro{background:var(--line2)}
.cof-cor.azul{background:#2F6FB5}
.cof-cor.verde{background:#2E9E4F}
.cof-cor.ambar{background:#C9901E}
.cof-cor.vermelho{background:#C0392B}
.cof-cor.roxo{background:#6B4BA8}
.cof-cor.turquesa{background:#1D8C8C}
.cof-cor.grafite{background:#5A636E}

.cof-cores{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cof-cor-op{width:28px;height:28px;border-radius:5px;border:2px solid transparent;cursor:pointer;
  padding:0;background:var(--line2)}
.cof-cor-op.neutro{background:var(--line2)} .cof-cor-op.azul{background:#2F6FB5}
.cof-cor-op.verde{background:#2E9E4F}      .cof-cor-op.ambar{background:#C9901E}
.cof-cor-op.vermelho{background:#C0392B}   .cof-cor-op.roxo{background:#6B4BA8}
.cof-cor-op.turquesa{background:#1D8C8C}   .cof-cor-op.grafite{background:#5A636E}
.cof-cor-op.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}
.cof-cor-op:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------- centro -------------------------------- */
.cof-centro{min-width:0}
.cof-cabeca{border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:16px 18px;margin-bottom:14px}
.cof-titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cof-titulo h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em}
.cof-desc{margin:8px 0 0;max-width:70ch}
.cof-acoes{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}

.cof-renome{padding:6px 10px;border:1px solid var(--accent);border-radius:var(--r-sm);
  background:var(--surface);font:inherit;font-size:15px;font-weight:600;min-width:220px;flex:1;max-width:420px}
.cof-renome:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.cof-corpo{display:grid;grid-template-columns:212px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:900px){ .cof-corpo{grid-template-columns:1fr} }

/* ------------------------------ árvore --------------------------------- */
.cof-arvore{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 6px}
.cof-pasta-linha{display:flex;align-items:center;gap:2px;padding-left:calc(var(--nivel) * 14px)}
.cof-giro{width:18px;flex:none;background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:10px;padding:0;line-height:1}
.cof-giro.vazio{cursor:default;visibility:hidden}
.cof-pasta{flex:1;display:flex;align-items:center;gap:7px;min-width:0;padding:7px 8px;
  border:none;border-radius:5px;background:none;cursor:pointer;font:inherit;font-size:12.5px;
  color:inherit;text-align:left}
.cof-pasta:hover{background:var(--surface2)}
.cof-pasta.on{background:var(--info-soft);color:var(--accent);font-weight:600}
.cof-pasta span:not(.cof-qtd){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cof-pasta:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cof-mini{width:20px;flex:none;background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:12px;line-height:1;padding:0;opacity:0;transition:opacity .12s}
.cof-pasta-linha:hover .cof-mini,.cof-mini:focus-visible{opacity:1}
.cof-mini:hover{color:var(--ink)}
@media (hover:none){ .cof-mini{opacity:1} }

/* ---------------------------- documentos ------------------------------- */
.cof-docs{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;min-width:0}
.cof-barra{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 13px;
  border-bottom:1px solid var(--line);background:var(--surface2)}
.cof-barra select{padding:7px 10px;border:1px solid var(--line2);border-radius:var(--r-sm);
  background:var(--surface);font:inherit;font-size:12.5px;color:var(--ink)}
.cof-selecao{font-size:12px;font-weight:600;color:var(--accent);margin-left:auto}

/* Larguras fixas: sem elas, o nome do documento cresce até empurrar as ações
   para fora da tela, e a coluna que a pessoa mais usa é justamente a que
   some. Nome longo quebra em duas linhas, que é o comportamento certo.   */
.cof-docs table.tbl{table-layout:fixed;width:100%;min-width:0}
.cof-docs .tbl th:nth-child(1){width:38px}
.cof-docs .tbl th:nth-child(2){width:auto}
.cof-docs .tbl th:nth-child(3){width:104px}
.cof-docs .tbl th:nth-child(4){width:104px}
.cof-docs .tbl th:nth-child(5){width:152px}
/* A regra geral de coluna de ações encolhe ao conteúdo, o que briga com o
   layout de largura fixa desta tabela. Aqui vale a largura declarada.   */
.cof-docs .tbl td.cel-acoes{width:auto}
.cof-docs .tbl th,.cof-docs .tbl td{padding-left:9px;padding-right:9px}
.cof-docs .doc-name{white-space:normal;overflow-wrap:anywhere}
.cof-docs .doc-cell{align-items:flex-start}
.cof-marcada{background:var(--info-soft)}

/* Barra de progresso das assinaturas: fina, porque é informação de apoio, e
   verde só quando fecha, porque 3 de 4 não é o mesmo que pronto.         */
.cof-prog{height:4px;border-radius:2px;background:var(--neutral-soft);overflow:hidden;
  max-width:110px;margin-bottom:3px}
.cof-prog span{display:block;height:100%;border-radius:2px;background:var(--warn)}
tr:has(.pill.p-ok) .cof-prog span{background:var(--ok)}

/* ------------------------------ histórico ------------------------------ */
.cof-pasta-tag{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:3px;
  background:var(--surface2);border:1px solid var(--line);font-size:10.5px;color:var(--muted)}

.cof-hist{margin-bottom:14px}
.cof-hist-item{border-top:1px solid var(--line);padding-top:8px}
.cof-hist-item:first-child{border-top:none;padding-top:0}

.cof-check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  font-size:12.5px;line-height:1.6;color:var(--ink2)}
.cof-check input{margin-top:3px;flex:none}
.cof-check b{font-weight:600;color:var(--ink)}

@media (max-width:600px){
  .cof-lado{position:static;max-height:none}
  .cof-titulo h2{font-size:16px}
  .cof-acoes .btn{flex:1}
}

/* ===== BLUEJUS: CSS DA PÁGINA DE ENTRADA ===== */
/* ---------------------- PÁGINA DE ENTRADA ------------------------------
   O topo tem duas colunas porque o argumento tem duas metades: a promessa ao
   advogado, à esquerda, e a prova visual dela, à direita, no formato em que
   o cliente dele vai ver, que é a tela de um celular. Descrever a facilidade
   convence menos do que mostrá-la.                                        */

.ent-larg{max-width:1120px;margin:0 auto;padding:0 22px}
.ent-h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.ent-sub{color:var(--muted);max-width:72ch;margin:0 0 22px;font-size:14px;line-height:1.65}
.ent-mt{margin-top:16px}
.ent-mb{margin-bottom:18px}

.ent-btn-vazio{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.ent-btn-claro{background:#fff;border-color:#fff;color:var(--topbar);font-weight:500}
.btn.grande{padding:12px 24px;font-size:14px}
/* Dentro das seções claras o botão vazado precisa de contorno escuro. */
.ent-fecho .ent-btn-vazio{border-color:rgba(255,255,255,.55)}

/* ------------------------------- topo ---------------------------------- */
.ent-topo{background:linear-gradient(158deg,#0E76BC 0%,#0A4E7E 62%,#083F66 100%);
  color:#fff;padding:58px 0 66px;position:relative;overflow:hidden}
.ent-topo-grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:44px;align-items:center;position:relative;z-index:2}
@media (max-width:920px){
  .ent-topo-grade{grid-template-columns:1fr;gap:34px}
  .ent-celular{justify-self:center}
}

.ent-selo{display:inline-block;padding:4px 11px;border-radius:20px;font-size:11px;
  font-weight:500;letter-spacing:.03em;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);color:#DDEFFB;margin-bottom:16px}
.ent-h1{font-size:36px;max-width:19ch;line-height:1.14}
@media (max-width:600px){ .ent-h1{font-size:27px} .ent-h2{font-size:20px} }
.ent-lead{animation-delay:.15s;color:#CDE5F7;font-size:15.5px;max-width:56ch;
  margin-top:16px;line-height:1.65}
.ent-cta{animation-delay:.3s;gap:10px;margin-top:26px;flex-wrap:wrap}
.ent-chain{margin-top:26px}

/* --------------------------- celular do cliente ------------------------ */
/* Desenhado em CSS, e não com imagem: a moldura acompanha o tema e não pesa
   nada. O conteúdo é o percurso do signatário, congelado no passo em que ele
   assina, que é o instante que interessa mostrar.                        */
.ent-celular{animation-delay:.45s;display:flex;justify-content:flex-end}
.ent-celular-corpo{width:250px;border-radius:26px;background:#0B2E4A;padding:9px;
  box-shadow:0 22px 50px rgba(4,26,44,.42), 0 0 0 1px rgba(255,255,255,.14) inset}
.ent-cel-topo{height:16px;display:flex;align-items:center;justify-content:center}
.ent-cel-topo span{width:52px;height:4px;border-radius:3px;background:rgba(255,255,255,.22)}
.ent-cel-tela{background:#F7F9FB;border-radius:19px;padding:13px 12px 14px;color:#1B2430}
.ent-cel-marca{display:flex;align-items:center;gap:6px;font-size:11px;color:#143A5E;
  padding-bottom:9px;border-bottom:1px solid #E3E8ED;margin-bottom:10px}
.ent-cel-rot{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:#7C8794;margin-bottom:3px}
.ent-cel-doc{padding:9px 10px;border:1px solid #E3E8ED;border-radius:7px;background:#fff;margin-bottom:9px}
.ent-cel-doc b{display:block;font-size:11.5px;line-height:1.35;color:#1B2430}
.ent-cel-meta{display:block;font-size:9.5px;color:#7C8794;margin-top:4px}
.ent-cel-passo{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#2E7D4F;margin-bottom:6px}
.ent-cel-passo span{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;
  background:#DEF2E5;font-size:9px;flex:none}
.ent-cel-assin{margin-top:9px;padding:9px 10px;border:1px dashed #B9C4CE;border-radius:7px;background:#fff}
.ent-cel-rubrica{width:100%;height:36px;display:block}
.ent-cel-botao{margin-top:11px;padding:10px;border-radius:7px;background:#0E76BC;color:#fff;
  text-align:center;font-size:12px;font-weight:500}

/* ----------------------------- percurso -------------------------------- */
.ent-passos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ent-passo{position:relative;padding:20px 18px 18px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface)}
.ent-passo b{display:block;font-size:15px;margin:12px 0 6px}
.ent-passo p{margin:0}
.ent-passo-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--info-soft);color:var(--accent);font-weight:600;font-size:14px}

/* ------------------------- grades e cartões ---------------------------- */
.ent-grade{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.ent-seg{display:flex;flex-direction:column}
.ent-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}

.ent-caso{display:flex;flex-direction:column}
.ent-caso-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ent-caso-setor{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent)}
.ent-caso p{flex:1}
.ent-caso-num{border-top:1px solid var(--line);padding-top:10px;display:flex;
  flex-direction:column;gap:2px}
.ent-caso-num b{font-family:var(--display,inherit);font-size:19px;font-weight:600;letter-spacing:-.02em}

/* ------------------------------ prova ---------------------------------- */
.ent-prova{display:grid;gap:18px;grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);
  align-items:start}
@media (max-width:860px){ .ent-prova{grid-template-columns:1fr} }
.ent-prova-item{padding:13px 0;border-top:1px solid var(--line)}
.ent-prova-item:first-child{border-top:none;padding-top:0}
.ent-prova-item p{margin:4px 0 0;max-width:66ch}
.ent-prova-lado{background:var(--surface)}
.ent-codigo{padding:11px 13px;border:1px dashed var(--line2);border-radius:6px;
  background:var(--surface2);font-size:14px;letter-spacing:.09em;text-align:center;color:var(--ink)}

/* ------------------------------ preço ---------------------------------- */
.ent-preco{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ent-preco-livre{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;
  background:var(--surface)}
.ent-preco-valor{font-family:var(--display,inherit);font-size:38px;font-weight:700;
  letter-spacing:-.03em;line-height:1.1;margin:12px 0 2px}

/* ------------------------------- FAQ ----------------------------------- */
.ent-faq{display:flex;flex-direction:column;gap:9px;max-width:80ch}
.ent-faq-item{border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:14px 16px}
.ent-faq-item summary{cursor:pointer;font-size:14.5px;font-weight:500;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.ent-faq-item summary::-webkit-details-marker{display:none}
.ent-faq-item summary::after{content:"+";color:var(--accent);font-size:17px;font-weight:400;flex:none}
.ent-faq-item[open] summary::after{content:"−"}
.ent-faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ent-faq-item p{margin:10px 0 0;max-width:74ch;line-height:1.7}

/* ------------------------------ fecho ---------------------------------- */
.ent-fecho{background:linear-gradient(158deg,#0A4E7E 0%,#0E76BC 100%);color:#fff;
  padding:56px 0;text-align:center}
.ent-fecho h2{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px;
  max-width:24ch;margin-inline:auto;line-height:1.25}
.ent-fecho p{color:#CDE5F7;max-width:56ch;margin:0 auto 24px;font-size:14.5px;line-height:1.65}
@media (max-width:600px){ .ent-fecho h2{font-size:21px} }

/* ------------------------------ rodapé --------------------------------- */
.ent-rodape{border-top:1px solid var(--line);padding:28px 0;background:var(--surface2)}
.ent-rodape-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ent-rodape-links{gap:16px;flex-wrap:wrap}
.ent-rodape-aviso{max-width:88ch;margin-top:16px;line-height:1.7}

@media (prefers-reduced-motion: reduce){
  .ent .anim-sobe{animation:none}
}

/* ===== BLUEJUS: CSS DA CAMADA DE MOVIMENTO ===== */
/* ------------------- MOVIMENTO DA PÁGINA DE ENTRADA --------------------
   Regra que organiza o arquivo inteiro: o estado natural de todo elemento
   aqui é visível. As classes `mov-rev` e `mov-visivel` são postas pelo
   script, e só depois de ele confirmar que sabe revelar. Sem script, a
   página aparece inteira, parada, e ninguém percebe falta.

   As durações ficam entre 0,45s e 0,7s, com saída rápida e chegada lenta
   (cubic-bezier com primeiro controle baixo). Movimento de interface que
   passa de 0,8s deixa de parecer resposta e passa a parecer espera.      */

/* ----------------------- entrada ao aparecer --------------------------- */
.ent.mov-ligado .mov-rev{
  opacity:0;
  transform:translateY(18px);
  will-change:opacity,transform;
}
.ent.mov-ligado .mov-rev.mov-visivel{
  opacity:1;
  transform:none;
  transition:opacity .62s cubic-bezier(.16,.84,.34,1) var(--mov-atraso,0ms),
             transform .62s cubic-bezier(.16,.84,.34,1) var(--mov-atraso,0ms);
  will-change:auto;
}
/* Título e subtítulo de seção sobem menos: eles ancoram a leitura, e
   deslocamento grande em texto de cabeçalho dá sensação de página frouxa. */
.ent.mov-ligado .ent-h2.mov-rev,
.ent.mov-ligado .ent-sub.mov-rev{ transform:translateY(10px) }

/* Cartão que entra ganha um leve avanço em profundidade, não só em altura. */
.ent.mov-ligado .ent-seg.mov-rev,
.ent.mov-ligado .ent-caso.mov-rev,
.ent.mov-ligado .ent-passo.mov-rev{ transform:translateY(20px) scale(.985) }
.ent.mov-ligado .ent-seg.mov-visivel,
.ent.mov-ligado .ent-caso.mov-visivel,
.ent.mov-ligado .ent-passo.mov-visivel{ transform:none }

/* -------------------------- resposta ao toque -------------------------- */
/* Elevação ao passar o ponteiro. É o efeito que mais comunica "isto é um
   sistema vivo", e o mais barato de todos.                               */
.ent .ent-seg,.ent .ent-caso,.ent .ent-passo,.ent .ent-preco > .card{
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .ent .ent-seg:hover,.ent .ent-caso:hover,.ent .ent-passo:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(8,42,70,.10);
    border-color:var(--line2);
  }
  .ent .ent-preco > .card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(8,42,70,.12) }
  .ent .btn.grande{ transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease }
  .ent .btn.grande:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(4,26,44,.24) }
}
/* O número do passo ganha um halo quando o cartão entra em foco. */
.ent .ent-passo-n{ transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease }
@media (hover:hover) and (pointer:fine){
  .ent .ent-passo:hover .ent-passo-n{ transform:scale(1.08); box-shadow:0 0 0 6px var(--info-soft) }
}

/* ----------------------- barra de progresso ---------------------------- */
/* Fica no alto, com 2px. Serve para dizer o tamanho da página, que numa
   página de entrada longa é informação útil, não enfeite.                */
.mov-progresso{
  position:sticky;top:0;z-index:40;height:2px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.mov-progresso i{
  display:block;height:100%;background:linear-gradient(90deg,#7FC4EE,#fff);
  transform:scaleX(0);transform-origin:0 50%;
}
.ent.mov-ligado .mov-progresso i{ transition:transform .12s linear }

/* Cabeçalho que adensa depois da primeira rolagem. */
.ent .bleed-bar{ transition:background .3s ease, box-shadow .3s ease, padding .3s ease }
.ent .bleed-bar.mov-densa{
  background:rgba(9,60,99,.94);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 6px 22px rgba(4,26,44,.24);
}

/* --------------------------- topo animado ------------------------------ */
.ent-topo .auth-brilho{ will-change:transform }
/* Cada elemento do topo entra em sequência. O celular entra por último e de
   mais longe, porque é a prova visual: ele deve chegar depois da promessa. */
.ent.mov-ligado .ent-topo .ent-selo{ animation:movSobe .6s cubic-bezier(.16,.84,.34,1) .05s both }
.ent.mov-ligado .ent-topo .ent-h1{ animation:movSobe .68s cubic-bezier(.16,.84,.34,1) .14s both }
.ent.mov-ligado .ent-topo .ent-lead{ animation:movSobe .68s cubic-bezier(.16,.84,.34,1) .24s both }
.ent.mov-ligado .ent-topo .ent-cta{ animation:movSobe .68s cubic-bezier(.16,.84,.34,1) .34s both }
.ent.mov-ligado .ent-topo .ent-chain{ animation:movSobe .6s cubic-bezier(.16,.84,.34,1) .44s both }
.ent.mov-ligado .ent-celular{ animation:movCelular .9s cubic-bezier(.16,.84,.34,1) .3s both }

@keyframes movSobe{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes movCelular{
  from{opacity:0;transform:translateY(34px) scale(.94) rotate(1.5deg)}
  to{opacity:1;transform:none}
}
.ent .ent-celular-corpo{ transition:transform .5s cubic-bezier(.2,.7,.3,1) }

/* ---------------------- demonstração do celular ------------------------ */
/* O estado é um único atributo no palco, e o CSS deriva todo o resto. Cada
   cena mexe só no que muda, o que evita o quadro inteiro piscar a cada
   avanço.                                                                */
/* Sobrepõe o alinhamento herdado de `.ent-celular`, que empurrava um item
   único para a direita. Com a legenda e o ponteiro embaixo, o bloco passa a
   ser uma coluna, e a coluna inteira é que se alinha à direita.          */
.ent-celular.ent-demo{
  display:flex;flex-direction:column;align-items:flex-end;
  justify-content:flex-start;gap:13px;
}
@media (max-width:920px){ .ent-celular.ent-demo{ align-items:center } }
.ent-demo .ent-demo-pontos{ align-self:center }
.ent-cel-passo{ transition:opacity .45s ease, transform .45s cubic-bezier(.16,.84,.34,1) }
.ent-cel-doc{ transition:opacity .5s ease, transform .5s cubic-bezier(.16,.84,.34,1),
                         border-color .4s ease, box-shadow .4s ease }

.ent.mov-ligado [data-demo] .ent-cel-passo{ opacity:.28;transform:translateX(-6px) }
.ent.mov-ligado [data-demo] .ent-cel-passo span{ background:#EDF0F3;color:#9AA5B1;transition:background .4s ease,color .4s ease }

.ent.mov-ligado [data-demo][data-cena="0"] .ent-cel-doc{
  border-color:#0E76BC;box-shadow:0 0 0 3px rgba(14,118,188,.14);
}
.ent.mov-ligado [data-demo][data-cena="1"] .ent-cel-passo[data-passo="1"],
.ent.mov-ligado [data-demo][data-cena="2"] .ent-cel-passo[data-passo="1"],
.ent.mov-ligado [data-demo][data-cena="3"] .ent-cel-passo[data-passo="1"],
.ent.mov-ligado [data-demo][data-cena="4"] .ent-cel-passo[data-passo="1"],
.ent.mov-ligado [data-demo][data-cena="2"] .ent-cel-passo[data-passo="2"],
.ent.mov-ligado [data-demo][data-cena="3"] .ent-cel-passo[data-passo="2"],
.ent.mov-ligado [data-demo][data-cena="4"] .ent-cel-passo[data-passo="2"]{
  opacity:1;transform:none;
}
.ent.mov-ligado [data-demo][data-cena="1"] .ent-cel-passo[data-passo="1"] span,
.ent.mov-ligado [data-demo][data-cena="2"] .ent-cel-passo[data-passo="1"] span,
.ent.mov-ligado [data-demo][data-cena="3"] .ent-cel-passo[data-passo="1"] span,
.ent.mov-ligado [data-demo][data-cena="4"] .ent-cel-passo[data-passo="1"] span,
.ent.mov-ligado [data-demo][data-cena="2"] .ent-cel-passo[data-passo="2"] span,
.ent.mov-ligado [data-demo][data-cena="3"] .ent-cel-passo[data-passo="2"] span,
.ent.mov-ligado [data-demo][data-cena="4"] .ent-cel-passo[data-passo="2"] span{
  background:#DEF2E5;color:#2E7D4F;
}

/* A rubrica se desenha sozinha na cena de assinatura, e permanece desenhada
   depois. Traço que reaparece do zero a cada volta chamaria atenção para a
   repetição, e o que interessa mostrar é o gesto, uma vez.               */
.ent-cel-traco{ stroke-dashoffset:var(--traco,400) }
/* 1,2s de traço mais 0,15s de espera cabem folgados nos 2s da cena, e ainda
   sobra um instante com a rubrica pronta antes de virar comprovante. */
.ent.mov-ligado [data-demo][data-cena="3"] .ent-cel-traco{
  animation:movRubrica 1.2s cubic-bezier(.4,.1,.3,1) .15s forwards;
}
.ent.mov-ligado [data-demo][data-cena="4"] .ent-cel-traco{ stroke-dashoffset:0 }
.ent.mov-ligado [data-demo][data-cena="0"] .ent-cel-traco,
.ent.mov-ligado [data-demo][data-cena="1"] .ent-cel-traco,
.ent.mov-ligado [data-demo][data-cena="2"] .ent-cel-traco{ stroke-dashoffset:var(--traco,400) }
@keyframes movRubrica{ to{stroke-dashoffset:0} }

.ent.mov-ligado [data-demo][data-cena="3"] .ent-cel-assin{
  border-color:#0E76BC;border-style:solid;background:#F4FAFE;
}
.ent-cel-assin{ transition:border-color .4s ease, background .4s ease }

/* Botão vira selo de concluído na última cena. */
.ent-cel-botao{ transition:background .45s ease, transform .3s cubic-bezier(.2,.7,.3,1) }
.ent.mov-ligado [data-demo][data-cena="3"] .ent-cel-botao{ transform:scale(.97) }
.ent-cel-final{
  display:none;margin-top:11px;padding:10px;border-radius:7px;background:#E8F6ED;
  border:1px solid #BFE3CD;color:#1F6640;text-align:center;
}
.ent-cel-final b{ display:block;font-size:11.5px;font-weight:600 }
.ent-cel-final span{ display:block;font-size:9.5px;margin-top:3px;letter-spacing:.06em }
.ent.mov-ligado [data-demo][data-cena="4"] .ent-cel-botao{ display:none }
.ent.mov-ligado [data-demo][data-cena="4"] .ent-cel-final{
  display:block;animation:movSelo .5s cubic-bezier(.16,.84,.34,1) both;
}
@keyframes movSelo{ from{opacity:0;transform:translateY(8px) scale(.96)} to{opacity:1;transform:none} }

/* Legenda e ponteiro da demonstração. */
/* Fica dentro da moldura, abaixo da tela: é a narração da cena em curso, e
   ali ela acompanha o quadro em vez de flutuar solta ao lado dele.       */
.ent-demo-leg{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11px;color:#CDE5F7;min-height:15px;padding:8px 4px 3px;
}
.ent-demo-leg i{
  width:6px;height:6px;border-radius:50%;background:#7FC4EE;flex:none;
  animation:movPulso 1.8s ease-in-out infinite;
}
@keyframes movPulso{ 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }
.ent-demo-leg b{ font-weight:500 }
.ent.mov-ligado [data-demo] .ent-demo-leg b{ display:none }
.ent.mov-ligado [data-demo][data-cena="0"] .ent-demo-leg b[data-leg="0"],
.ent.mov-ligado [data-demo][data-cena="1"] .ent-demo-leg b[data-leg="1"],
.ent.mov-ligado [data-demo][data-cena="2"] .ent-demo-leg b[data-leg="2"],
.ent.mov-ligado [data-demo][data-cena="3"] .ent-demo-leg b[data-leg="3"],
.ent.mov-ligado [data-demo][data-cena="4"] .ent-demo-leg b[data-leg="4"]{ display:inline }

.ent-demo-pontos{ display:flex;gap:7px }
.ent-demo-pontos button{
  width:22px;height:4px;border-radius:3px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.26);transition:background .3s ease,width .3s ease;
}
.ent-demo-pontos button.ativo{ background:#fff;width:30px }
.ent-demo-pontos button:focus-visible{ outline:2px solid #fff;outline-offset:3px }

/* ------------------------------ FAQ ------------------------------------ */
/* Abertura com altura animada. `grid-template-rows` de 0fr para 1fr é o
   único jeito de animar altura desconhecida sem medir em JavaScript.     */
.ent-faq-item summary::after{ transition:transform .25s ease }
.ent-faq-item[open] summary::after{ transform:rotate(180deg) }
.ent-faq-corpo{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1) }
.ent-faq-item[open] .ent-faq-corpo{ grid-template-rows:1fr }
.ent-faq-corpo > div{ overflow:hidden }
.ent-faq-item{ transition:border-color .3s ease, box-shadow .3s ease }
.ent-faq-item[open]{ border-color:var(--line2);box-shadow:0 6px 18px rgba(8,42,70,.06) }

/* --------------------------- fecho e chamada --------------------------- */
.ent-fecho{ position:relative;overflow:hidden }
.ent.mov-ligado .ent-fecho::after{
  content:"";position:absolute;inset:-40% -10% auto auto;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(127,196,238,.22),transparent 66%);
  animation:movFlutua 14s ease-in-out infinite;pointer-events:none;
}
@keyframes movFlutua{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-26px,22px,0)}
}

/* ------------------------- obediência literal -------------------------- */
/* Quem pediu menos movimento recebe a página inteira, imóvel. Nada de
   "versão suave": a preferência é sobre movimento, não sobre intensidade. */
@media (prefers-reduced-motion: reduce){
  .ent *,.ent *::before,.ent *::after{
    animation:none !important;
    transition:none !important;
  }
  .ent .mov-rev{ opacity:1 !important;transform:none !important }
  .ent .ent-cel-passo{ opacity:1 !important;transform:none !important }
  .ent .ent-cel-traco{ stroke-dashoffset:0 !important }
  .mov-progresso{ display:none }
}
.ent.mov-parado .mov-rev{ opacity:1;transform:none }
.ent.mov-parado .ent-cel-passo{ opacity:1;transform:none }
.ent.mov-parado .ent-cel-traco{ stroke-dashoffset:0 }
.ent.mov-parado .mov-progresso{ display:none }
.ent.mov-parado .ent-demo-pontos{ display:none }


/* ===== BLUEJUS: CSS DAS PROCURAÇÕES ===== */
/* ------------------ PROCURAÇÃO AD JUDICIA ET EXTRA ---------------------
   A tela tem duas metades permanentes: à esquerda o que se preenche, à
   direita o que o preenchimento produz. A prévia da peça e a conferência
   ficam sempre visíveis porque o erro que essa tela existe para evitar é o
   campo em branco que só aparece no documento assinado.                  */

.pr-mb{ margin-bottom:14px }
.pr-mt{ margin-top:12px }

.pr-split{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:16px;align-items:start }
@media (max-width:1080px){ .pr-split{ grid-template-columns:1fr } }

/* ------------------------------ passos --------------------------------- */
.pr-passos{ display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px }
.pr-passo{ display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink2);font-size:13px;cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease }
.pr-passo:hover{ border-color:var(--line2) }
.pr-passo.on{ border-color:var(--accent);background:var(--info-soft);color:var(--ink);font-weight:500 }
.pr-passo.feito{ color:var(--ok) }
.pr-passo-n{ display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--neutral-soft);font-size:11px;font-weight:600;flex:none }
.pr-passo.on .pr-passo-n{ background:var(--accent);color:#fff }
.pr-passo.feito .pr-passo-n{ background:var(--ok-soft);color:var(--ok) }

.pr-rodape{ display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line) }

/* ---------------------------- formulário -------------------------------- */
.pr-grade{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px }
.pr-dobro{ grid-column:span 2 }
@media (max-width:620px){ .pr-dobro{ grid-column:span 1 } }

.pr-erro input{ border-color:var(--crit) }
.pr-dica{ display:block;font-size:11px;margin-top:4px;color:var(--muted) }
.pr-dica.grave{ color:var(--crit) }

.pr-selo-ia{ display:inline-block;margin-left:6px;padding:1px 6px;border-radius:10px;
  background:var(--info-soft);color:var(--accent);font-size:9.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:middle }

.pr-pessoa{ gap:8px;margin-top:4px }
.pr-opc{ padding:7px 13px;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  color:var(--ink2);font-size:12.5px;cursor:pointer;transition:all .18s ease }
.pr-opc:hover{ border-color:var(--line2) }
.pr-opc.on{ border-color:var(--accent);background:var(--info-soft);color:var(--accent);font-weight:500 }
.pr-causas{ display:flex;flex-wrap:wrap;gap:7px }

/* O campo de arquivo é um rótulo com input escondido: o botão nativo de
   upload não aceita estilo, e a tela precisa que ele pareça um botão. */
.pr-arquivo{ position:relative;overflow:hidden;cursor:pointer }
.pr-arquivo input{ position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100% }

.pr-amostra{ font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.7;
  text-align:justify;color:var(--ink);margin:10px 0 0;padding:12px 14px;
  border:1px dashed var(--line2);border-radius:7px;background:var(--surface2) }

/* ------------------------------ listas ---------------------------------- */
.pr-lista{ gap:8px;margin-top:10px }
.pr-item{ display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-radius:7px;
  background:var(--surface2);font-size:12.5px;color:var(--ink2);line-height:1.5 }
.pr-item.grave{ background:var(--crit-soft);color:var(--ink) }
.pr-item svg{ flex:none;margin-top:1px }

.pr-lido{ display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface) }
.pr-lido > div{ display:flex;flex-direction:column;gap:2px;min-width:0 }
.pr-lido b{ text-transform:capitalize }
.pr-lido span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap }

.pr-ia-vazio{ border-style:dashed }

.pr-poder{ display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:7px;background:var(--surface2) }

.pr-outorgado{ display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface) }
.pr-outorgado.on{ border-color:var(--accent) }
.pr-outorgado > div{ display:flex;flex-direction:column;gap:2px }

.pr-emitida{ display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface) }
.pr-emitida > div{ display:flex;flex-direction:column;gap:2px;min-width:0 }

/* ------------------------------ peças ----------------------------------- */
.pr-peca{ display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);text-align:left;cursor:pointer;width:100%;
  transition:border-color .2s ease, background .2s ease }
.pr-peca:hover{ border-color:var(--line2) }
.pr-peca.on{ border-color:var(--accent);background:var(--info-soft) }
.pr-peca > span:last-child{ display:flex;flex-direction:column;gap:3px }
.pr-peca b{ font-size:14px }

/* ------------------------------ molduras -------------------------------- */
.pr-artes{ display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px }
.pr-arte{ display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);cursor:pointer;text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease }
.pr-arte:hover{ border-color:var(--line2) }
.pr-arte.on{ border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset }
.pr-arte-mini{ display:block;width:100%;aspect-ratio:210/297;max-width:100%;border-radius:4px;
  background:#FBFBF9 center/contain no-repeat;border:1px solid var(--line) }

/* ------------------------------ folha ----------------------------------- */
/* A prévia é a folha A4 em escala. Manter a proporção exata é o que faz o
   advogado confiar no que vê: prévia que não corresponde ao papel obriga a
   imprimir para conferir, e aí a prévia não serviu para nada.           */
.pr-folhas{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px }
.pr-folha{ aspect-ratio:210/297;background:#FBFBF9 center/100% 100% no-repeat;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;position:relative;
  box-shadow:0 3px 16px rgba(20,40,60,.10) }
.pr-folha-corpo{ position:absolute;inset:0;padding:11.5% 11% 9%;overflow:hidden;
  font-family:Georgia,"Times New Roman",serif;color:#1B2430;
  /* A folha é sempre clara, com ou sem tema escuro: papel não tem modo
     noturno, e a prévia precisa mostrar o que vai sair impresso. */
  background:transparent }
.pr-folha-corpo h3{ text-align:center;font-size:clamp(11px,2.1cqw,15px);letter-spacing:.06em;
  margin:0;font-weight:700;color:#1B2430 }
.pr-folha-corpo h3 small{ display:block;font-size:.72em;font-style:italic;font-weight:400;
  letter-spacing:.02em;margin-top:.25em }
.pr-regua{ width:22%;height:1px;background:#3E6E9E;margin:3.5% auto 5%;opacity:.85 }
.pr-folha-corpo p{ font-size:clamp(6px,1.02cqw,8.5px);line-height:1.55;text-align:justify;
  margin:0 0 2.6%;text-indent:8%;color:#1B2430 }
.pr-folha-corpo p.qual{ text-indent:0 }
.pr-local{ margin-top:5%;text-align:right;font-size:clamp(6px,1.02cqw,8.5px);color:#1B2430 }
.pr-rubrica{ margin-top:8%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px }
.pr-rubrica span{ display:block;width:52%;border-top:1px solid #1B2430 }
.pr-rubrica b{ font-size:clamp(6px,.95cqw,8px);color:#1B2430 }
.pr-rubrica i{ font-size:clamp(5px,.82cqw,7px);color:#5A6472;font-style:normal }
.pr-folha-rodape{ margin-top:6%;padding-top:3%;border-top:1px solid #8FB3D0;
  font-size:clamp(5.5px,.9cqw,7.5px);text-align:center;letter-spacing:.03em;color:#1B2430 }
.pr-folha{ container-type:inline-size }

/* ------------------------------ tabela ---------------------------------- */
/* A base impõe largura mínima de 640px às tabelas, para que colunas não se
   espremam. Aqui a tabela precisa caber no cartão em telas estreitas, e as
   colunas têm largura declarada em vez de mínima global. */
.pr-tabela.tbl{ table-layout:fixed;width:100%;min-width:0 }
.pr-tabela th:nth-child(1){ width:26% }
.pr-tabela th:nth-child(2){ width:24% }
.pr-tabela th:nth-child(3){ width:16% }
.pr-tabela th:nth-child(4){ width:13% }
.pr-tabela th:nth-child(5){ width:13% }
.pr-tabela td{ overflow:hidden;text-overflow:ellipsis }
.pr-tabela td.cel-acoes{ width:auto;text-align:right }
.pr-tabela .tag{ margin:1px 2px 1px 0 }

/* A moldura desenhada no próprio navegador, quando não há servidor de onde
   buscá-la por endereço. Fica atrás do texto e não recebe eventos. */
.pr-folha-arte{ position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0 }
.pr-folha-corpo{ z-index:1 }


/* ===== BLUEJUS: CSS DE ORGANIZAÇÕES E NOTIFICAÇÕES ===== */
/* -------------- ORGANIZAÇÕES E NOTIFICAÇÕES (caixas do topo) ------------ */

.og-modal{ max-width:500px }

/* ------------------------------ cartões -------------------------------- */
.og-cartao{ display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);
  transition:border-color .2s ease, background .2s ease, transform .18s ease }
.og-cartao:hover{ border-color:var(--line2) }
.og-cartao.on{ border-color:var(--accent);background:var(--info-soft) }
.og-cartao.arq{ opacity:.72 }

.og-abrir{ display:flex;align-items:center;gap:11px;flex:1;min-width:0;background:none;border:0;
  padding:0;text-align:left;cursor:pointer;color:inherit }
.og-abrir:disabled{ cursor:default }
.og-txt{ display:flex;flex-direction:column;gap:1px;min-width:0 }
.og-txt b,.og-txt span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap }

.og-avatar{ display:grid;place-items:center;width:36px;height:36px;border-radius:9px;flex:none;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#fff }
/* A cor é etiqueta, não decoração: é por ela que o olho separa as
   organizações antes de ler o nome, por isso os tons são bem distintos. */
.og-avatar.c-azul     { background:#2E6FA8 }
.og-avatar.c-verde    { background:#2E7D4F }
.og-avatar.c-ambar    { background:#9A6414 }
.og-avatar.c-vermelho { background:#A33B31 }
.og-avatar.c-roxo     { background:#6A4A9C }
.og-avatar.c-turquesa { background:#1F7A80 }
.og-avatar.c-grafite  { background:#4A5560 }
.og-avatar.c-neutro   { background:#7C8794 }

.og-lado{ display:flex;align-items:center;gap:6px;flex:none }
.og-estrela{ background:none;border:0;cursor:pointer;font-size:15px;line-height:1;padding:2px;
  color:var(--line2);transition:color .2s ease, transform .2s ease }
.og-estrela:hover{ transform:scale(1.15) }
.og-estrela.on{ color:#C79A2B }

/* ---------------------------- adicionar -------------------------------- */
.og-nova{ display:flex;align-items:center;gap:11px;padding:12px;border:1px dashed var(--line2);
  border-radius:9px;background:var(--surface2);cursor:pointer;text-align:left;width:100%;
  transition:border-color .2s ease, background .2s ease }
.og-nova:hover{ border-color:var(--accent);background:var(--info-soft) }
.og-nova > span:last-child{ display:flex;flex-direction:column;gap:2px }
.og-nova-mais{ display:grid;place-items:center;width:36px;height:36px;border-radius:9px;flex:none;
  background:var(--info-soft);color:var(--accent) }

.og-mais{ background:none;border:0;cursor:pointer;color:var(--muted);font-size:12px;
  display:flex;align-items:center;gap:5px;padding:4px 2px }
.og-mais:hover{ color:var(--ink2) }

/* ----------------------------- formulário ------------------------------ */
.og-chips{ display:flex;flex-wrap:wrap;gap:6px }
.og-chip{ padding:6px 11px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  color:var(--ink2);font-size:12px;cursor:pointer;transition:all .18s ease }
.og-chip:hover{ border-color:var(--line2) }
.og-chip.on{ border-color:var(--accent);background:var(--info-soft);color:var(--accent);font-weight:500 }

.og-cores{ display:flex;flex-wrap:wrap;gap:7px }
.og-cor{ width:26px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;
  padding:0;transition:transform .18s ease, box-shadow .18s ease }
.og-cor:hover{ transform:scale(1.08) }
.og-cor.on{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent) }
.og-cor.c-azul{ background:#2E6FA8 } .og-cor.c-verde{ background:#2E7D4F }
.og-cor.c-ambar{ background:#9A6414 } .og-cor.c-vermelho{ background:#A33B31 }
.og-cor.c-roxo{ background:#6A4A9C } .og-cor.c-turquesa{ background:#1F7A80 }
.og-cor.c-grafite{ background:#4A5560 } .og-cor.c-neutro{ background:#7C8794 }

.og-convite{ border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface) }
.og-convite summary{ cursor:pointer;font-size:12.5px;color:var(--ink2);list-style:none }
.og-convite summary::-webkit-details-marker{ display:none }
.og-convite summary::before{ content:"+ ";color:var(--accent) }
.og-convite[open] summary::before{ content:"− " }
.og-cod{ flex:1;font-family:var(--mono);font-size:12px }

/* --------------------------- notificações ------------------------------ */
.nt-item{ display:flex;align-items:flex-start;gap:10px;padding:0 0 11px;
  border-bottom:1px solid var(--line);transition:opacity .25s ease }
.nt-item:last-of-type{ border-bottom:0;padding-bottom:0 }
.nt-item.lida{ opacity:.55 }
.nt-ponto{ width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none }
.nt-txt{ display:flex;flex-direction:column;gap:2px;flex:1;min-width:0 }

/* O apagar de um item aparece ao aproximar o ponteiro, e fica sempre visível
   no toque, onde não existe aproximação.                                  */
.nt-x{ background:none;border:0;cursor:pointer;color:var(--muted);padding:3px;border-radius:5px;
  flex:none;opacity:0;transition:opacity .18s ease, background .18s ease, color .18s ease }
.nt-item:hover .nt-x,.nt-x:focus-visible{ opacity:1 }
.nt-x:hover{ background:var(--crit-soft);color:var(--crit) }
@media (hover:none){ .nt-x{ opacity:.65 } }

.nt-acoes{ flex-wrap:wrap }
.nt-perigo{ margin-left:auto;color:var(--crit) }
.nt-perigo:hover{ background:var(--crit-soft);border-color:var(--crit) }
.btn.btn-crit{ background:var(--crit);border-color:var(--crit);color:#fff }
.btn.btn-crit:hover{ filter:brightness(.94) }

.nt-desfazer{ align-items:center }
.nt-desfazer .btn{ margin-left:auto;flex:none }

.nt-vazio{ display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 16px;color:var(--muted) }
.nt-vazio span{ max-width:40ch }

@media (max-width:520px){
  .og-modal{ max-width:100% }
  .og-lado{ flex-direction:column;align-items:flex-end;gap:4px }
}

/* Alternador. A folha base tem `.chk` como linha de lista e `.tick` como a
   caixa dentro dela: são para marcar item de checklist, e não para ligar e
   desligar uma opção. Reaproveitá-las produziria uma caixa que nunca muda de
   aparência, que foi o que aconteceu na primeira versão. */
.og-marca{ display:flex;align-items:center;gap:10px;padding:9px 2px;background:none;border:0;
  cursor:pointer;text-align:left;color:inherit;width:100% }
.og-caixa{ display:grid;place-items:center;width:19px;height:19px;border-radius:4px;flex:none;
  border:1.5px solid var(--line2);background:var(--surface);color:#fff;
  font-size:12px;font-weight:700;line-height:1;
  transition:background .18s ease, border-color .18s ease }
.og-caixa.on{ background:var(--accent);border-color:var(--accent) }
.og-marca:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:6px }
.og-marca:hover .og-caixa{ border-color:var(--accent) }


/* ===== BLUEJUS: CSS DO PERFIL ===== */
/* ----------------------- MEU PERFIL E SELO ------------------------------ */

.pf-modal{ max-width:600px }
.pf-mt{ margin-top:10px }

/* -------------------------------- topo ---------------------------------- */
.pf-topo{ display:flex;align-items:center;gap:16px;flex-wrap:wrap }
.pf-foto-caixa{ position:relative;flex:none }
.pf-foto{ display:block;width:78px;height:78px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line);background:var(--surface2) }
.pf-iniciais{ display:grid;place-items:center;font-size:26px;font-weight:600;
  color:var(--accent);background:var(--info-soft);letter-spacing:.02em }

/* O selo encosta na foto, como no aplicativo de mensagens de que veio a
   ideia: ali ele é lido junto com o rosto, e não como uma etiqueta à parte. */
.pf-foto-selo{ position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--surface);
  box-shadow:0 0 0 2px var(--surface) }

.pf-topo-acoes{ display:flex;flex-direction:column;gap:7px;align-items:flex-start;flex:1;min-width:200px }
.pf-topo-acoes .xs{ max-width:44ch;line-height:1.5 }
.pf-arquivo{ position:relative;overflow:hidden;cursor:pointer }
.pf-arquivo input{ position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100% }

/* ------------------------------- selo ----------------------------------- */
/* Cada nível tem forma própria, e não só cor: quem olha de relance precisa
   distinguir "contato confirmado" de "identidade conferida" sem ler o texto.
   Dois selos iguais em azul seriam lidos como a mesma coisa, que é
   exatamente a confusão que este módulo existe para evitar. */
.pf-selo{ display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface2) }
.pf-selo > span{ display:flex;flex-direction:column;gap:3px }
.pf-selo .xs{ color:var(--muted);line-height:1.55;max-width:62ch }
.pf-selo.n-azul   { border-color:var(--accent);background:var(--info-soft) }
.pf-selo.n-verde  { border-color:var(--ok);background:var(--ok-soft) }
.pf-selo.n-ambar  { border-color:var(--warn);background:var(--warn-soft) }
.pf-selo.n-neutro { background:var(--neutral-soft) }

.pf-selo-i{ flex:none;margin-top:1px }
.pf-selo-i.c-azul  { color:#1D9BF0 }   /* o azul de selo, reconhecível de imediato */
.pf-selo-i.c-verde { color:#2E7D4F }
.pf-selo-i.c-ambar { color:#9A6414 }
.pf-selo-i.c-neutro{ color:#9AA5B1 }

.pf-tag{ display:inline-block;margin-left:6px;padding:1px 6px;border-radius:10px;
  font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle }
.pf-tag.ok  { background:var(--ok-soft);color:var(--ok) }
.pf-tag.pend{ background:var(--warn-soft);color:var(--warn) }

/* ------------------------------ campos ---------------------------------- */
.pf-grade{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px }
.pf-dobro{ grid-column:span 2 }
@media (max-width:560px){ .pf-dobro{ grid-column:span 1 } }
.pf-grade input[readonly]{ background:var(--surface2);color:var(--muted) }

/* ------------------------------ passos ---------------------------------- */
.pf-passos{ display:flex;flex-direction:column;gap:8px }
.pf-passo{ display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface) }
.pf-passo.feito{ border-color:var(--ok);background:var(--ok-soft) }
.pf-passo .sm{ flex:1;min-width:0 }
.pf-passo-n{ display:grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none;
  border:1.5px solid var(--line2);font-size:11px;font-weight:700;color:#fff }
.pf-passo.feito .pf-passo-n{ background:var(--ok);border-color:var(--ok) }

.pf-codigo{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 12px;
  border:1px dashed var(--accent);border-radius:8px;background:var(--info-soft) }
.pf-codigo input{ width:110px;text-align:center;letter-spacing:.32em;font-size:15px;
  padding:7px 8px }
.pf-codigo .xs{ flex:1;min-width:150px }

/* ------------------------------- fila ----------------------------------- */
.pf-fila{ border-color:var(--line) }
.pf-fila > .row > div{ display:flex;flex-direction:column;gap:2px;min-width:0 }

@media (max-width:560px){
  .pf-modal{ max-width:100% }
  .pf-topo{ gap:12px }
  .pf-foto{ width:64px;height:64px }
}

/* ----------------------- triagem e legibilidade ------------------------- */
.pf-leg span{ display:flex;flex-direction:column;gap:2px }
.pf-leg .xs{ line-height:1.5 }
.pf-leitura{ border-style:dashed }
.pf-lido{ display:flex;align-items:baseline;gap:8px }
.pf-lido .xs{ width:88px;flex:none;text-transform:capitalize }
.pf-oab .mono{ display:block }

.pf-parecer{ padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface2) }
.pf-ponto{ display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:6px;
  background:var(--surface);border-left:3px solid var(--line2) }
.pf-ponto.ok{ border-left-color:var(--ok) }
.pf-ponto.atencao{ border-left-color:var(--warn) }
.pf-ponto.grave{ border-left-color:var(--crit);background:var(--crit-soft) }

/* ===== BLUEJUS: CSS DO TERMO DE ACEITE ===== */
/* O texto é para ser lido, não para ser rolado até o botão. Daí a medida
   de linha limitada, a entrelinha larga e o destaque próprio das cláusulas
   que limitam direito, que o § 4º do art. 54 da Lei nº 8.078/1990 manda
   redigir com destaque.                                                   */

.term-corpo{ overflow:auto; padding:4px 16px 16px; font-size:14px; line-height:1.75; color:var(--ink2) }
.term-corpo p{ margin:0 0 11px; max-width:74ch }
.term-sec{ margin:0 0 20px }
.term-sec h4{ font-size:13.5px; color:var(--ink); margin:0 0 8px; letter-spacing:.01em }
.term-sec.destacada{ border-left:3px solid var(--warn); background:var(--warn-soft);
  padding:14px 16px; border-radius:var(--r-sm); margin-bottom:22px }
.term-sec.destacada h4{ color:var(--ink) }
.term-sec.destacada h4::after{ content:"cláusula em destaque"; display:inline-block; margin-left:9px;
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--warn);
  border:1px solid var(--warn); border-radius:999px; padding:1px 7px; vertical-align:middle }

/* A modal de aceite não fecha por fora nem pelo Esc: ela não tem
   data-a="fecharfora" e não tem botão de fechar. Fechar sem manifestar
   deixaria a conta num estado que a barreira do servidor recusa de todo
   jeito, e a tela ficaria pedindo de novo a cada clique.                 */
.term-overlay{ backdrop-filter:blur(2px) }
.term-travada{ opacity:.55 }
.term-travada .og-caixa{ border-style:dashed }

/* ===== BLUEJUS: CSS DO MOVIMENTO DO MENU ===== */
/* O ícone é o que se move, e o rótulo apenas acompanha. Mover o bloco
   inteiro faz a lista dançar; mover só o ícone dá a sensação de resposta
   sem tirar o texto do lugar onde o olho já o procurou.                  */

.nav a{ position:relative; overflow:hidden;
  transition:background .18s ease, color .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.3) }
.nav a svg{ transition:transform .26s cubic-bezier(.2,.9,.3,1.4), color .18s ease }
.nav a span:not(.badge-n){ transition:transform .22s cubic-bezier(.2,.9,.3,1.2) }

.nav a:hover{ transform:translateX(3px) }
.nav a:hover svg{ transform:scale(1.18) rotate(-6deg); color:var(--accent) }
.nav a:hover span:not(.badge-n){ transform:translateX(2px) }
.nav a:focus-visible svg{ transform:scale(1.14); color:var(--accent) }

/* Um brilho que atravessa o item no sentido da leitura. Dura o suficiente
   para ser notado e some antes de virar enfeite.                         */
.nav a::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 12%,
    color-mix(in srgb, var(--accent) 12%, transparent) 46%, transparent 78%);
  transform:translateX(-115%); transition:transform .55s ease }
.nav a:hover::before{ transform:translateX(115%) }

/* No clique, o item recua um pouco. É o gesto que confirma o toque, e é o
   que o som acompanha.                                                   */
.nav a:active{ transform:translateX(1px) scale(.985) }
.nav a:active svg{ transform:scale(.94) rotate(0deg) }

/* O item ativo não pulsa nem se mexe sozinho: ele já está escolhido, e
   movimento permanente numa barra fixa vira ruído em dez minutos de uso. */
.nav a.on:hover{ transform:translateX(3px) }
.nav a.on:hover svg{ transform:scale(1.12) rotate(-4deg) }

/* Ícones da barra superior, mesmo princípio, sem deslocamento lateral. */
.appbar .icon-btn svg{ transition:transform .24s cubic-bezier(.2,.9,.3,1.4) }
.appbar .icon-btn:hover svg{ transform:scale(1.16) rotate(-7deg) }
.appbar .icon-btn:active svg{ transform:scale(.93) }

/* Botão do som, no rodapé da barra lateral. */
.menu-som{ display:flex; align-items:center; gap:8px; width:100%;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; font-size:11px; color:var(--muted); cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease }
.menu-som:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft) }
.menu-som.on{ color:var(--ink2) }
.menu-som-ico{ font-size:12px; line-height:1 }
.menu-som.on .menu-som-ico{ color:var(--accent) }

@media (prefers-reduced-motion: reduce){
  .nav a, .nav a svg, .nav a span:not(.badge-n),
  .appbar .icon-btn svg, .nav a::before{ transition:none !important; transform:none !important }
  .nav a:hover, .nav a:hover svg, .nav a:hover span:not(.badge-n),
  .appbar .icon-btn:hover svg{ transform:none !important }
}

/* ===== BLUEJUS: CSS DO APOIO E DO AVISO DE TERMOS ===== */

/* Botão na barra superior. Fica ao lado dos demais controles, com o mesmo
   desenho de fundo transparente e realce no repouso do ponteiro: pedir
   apoio com um botão colorido e destacado no alto de todas as telas seria
   cobrar atenção o dia inteiro por algo que é opcional.                   */
.ab-apoio{ display:flex; align-items:center; gap:7px; height:36px; padding:0 11px;
  background:transparent; border:1px solid rgba(255,255,255,.42); border-radius:999px;
  color:#fff; cursor:pointer; font-size:12.5px; font-weight:500; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease }
.ab-apoio:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.8) }
.ab-apoio:active{ background:rgba(255,255,255,.24) }
.ab-apoio svg{ transition:transform .28s cubic-bezier(.2,.9,.3,1.5) }
.ab-apoio:hover svg{ transform:scale(1.16) }

/* Aviso de termos pendentes, também na barra. Âmbar, e não vermelho: é
   pendência, não é erro, e alarme para o que a própria pessoa adiou seria
   punir a escolha que o sistema ofereceu.                                 */
.term-aviso{ display:flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); border-radius:999px;
  color:#fff; cursor:pointer; font-size:12.5px; font-weight:500; white-space:nowrap;
  transition:background .18s ease }
.term-aviso:hover{ background:rgba(255,255,255,.28) }
.term-aviso-ponto{ width:8px; height:8px; border-radius:50%; background:#FFD267; flex:none;
  box-shadow:0 0 0 0 rgba(255,210,103,.7); animation:term-pulsa 2.4s ease-out infinite }
@keyframes term-pulsa{
  0%{ box-shadow:0 0 0 0 rgba(255,210,103,.65) }
  70%{ box-shadow:0 0 0 7px rgba(255,210,103,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,210,103,0) }
}

/* Painel de apoio. */
.apoio-modal{ max-width:900px }
.apoio-head{ background:var(--topbar); border-bottom:none }
.apoio-fechar{ background:transparent; border-color:rgba(255,255,255,.45); color:#fff }
.apoio-fechar:hover{ background:rgba(255,255,255,.16) }

.apoio-valores{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.apoio-valores .btn{ min-width:104px; justify-content:center }
.apoio-campos{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:14px }

.apoio-qr-bloco{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start }
.apoio-qr{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px;
  width:max-content; max-width:100% }
.apoio-qr svg{ display:block; width:210px; height:210px; max-width:100% }
.apoio-valor{ font-family:var(--display); font-size:29px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); margin:2px 0 4px }

.apoio-destinos .apoio-lista{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:9px; margin-top:10px }
.apoio-destino{ display:flex; gap:9px; align-items:flex-start; line-height:1.55 }
.apoio-ponto{ color:var(--accent); font-size:9px; line-height:1.9; flex:none }

@media (max-width:760px){
  .ab-apoio .ab-apoio-txt{ display:none }
  .ab-apoio{ padding:0 9px }
  .apoio-qr-bloco{ grid-template-columns:1fr }
  .apoio-qr{ margin:0 auto }
}
@media (prefers-reduced-motion: reduce){
  .ab-apoio, .ab-apoio svg, .term-aviso, .term-aviso-ponto{
    transition:none !important; animation:none !important; transform:none !important }
}

/* ===== BLUEJUS: CSS DA CORRESPONDÊNCIA REGISTRADA ===== */

/* A cronologia é o coração da tela, e o que ela precisa é de hierarquia:
   o evento em primeiro plano, o que ele demonstra logo abaixo, e o que ele
   não demonstra sempre visível, nunca escondido atrás de um ícone. Quem vai
   juntar a peça a um processo precisa ler a ressalva antes de afirmar
   demais, e ressalva que exige um clique não é lida.                      */

.corr-tl .tl-item{ padding:12px 0 }
.corr-item .tl-body strong{ font-size:13.5px; line-height:1.45 }
.corr-meta{ gap:8px; margin-top:6px; align-items:center }

.corr-dem, .corr-nao{ font-size:11.5px; line-height:1.6; margin-top:7px;
  padding:7px 10px; border-radius:var(--r-sm); border-left:2.5px solid }
.corr-dem{ border-left-color:var(--ok); background:var(--ok-soft); color:var(--ink2) }
.corr-dem b{ color:var(--ok); font-weight:600 }
.corr-nao{ border-left-color:var(--warn); background:var(--warn-soft); color:var(--ink2) }
.corr-nao b{ color:var(--warn); font-weight:600 }
.corr-agente{ margin-top:5px; font-family:var(--mono); word-break:break-all }

.corr-kv{ margin-top:10px }
.corr-mt{ margin-top:6px }

.corr-dests{ gap:12px }
.corr-dest{ border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px;
  display:flex; flex-direction:column; gap:3px }

.corr-ok{ border-color:color-mix(in srgb, var(--ok) 40%, var(--line)) }
.corr-quebrada{ border-color:color-mix(in srgb, var(--crit) 45%, var(--line));
  background:var(--crit-soft) }

/* -------------------- destaque na página de entrada -------------------- */
/* A seção fica ao lado do acesso porque é o diferencial que se quer que a
   pessoa veja antes de decidir entrar, e não depois de navegar três telas. */

.ent-corr{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.ent-corr-selo{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:5px 12px; margin-bottom:14px }
.ent-corr h2{ font-size:27px; line-height:1.2; margin-bottom:12px }
.ent-corr .ent-corr-sub{ font-size:14.5px; line-height:1.7; color:var(--ink2); max-width:56ch }
.ent-corr-lista{ display:flex; flex-direction:column; gap:11px; margin-top:20px }
.ent-corr-item{ display:flex; gap:11px; align-items:flex-start }
.ent-corr-num{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; font-family:var(--mono) }
.ent-corr-item b{ font-size:13.5px; display:block }
.ent-corr-item span{ font-size:12.5px; color:var(--muted); line-height:1.55 }

/* A prévia do rodapé: é o que a pessoa vai ver chegar na caixa do cliente,
   e mostrar isso vale mais do que descrever.                             */
.ent-corr-previa{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); overflow:hidden }
.ent-corr-previa-barra{ background:var(--surface2); border-bottom:1px solid var(--line);
  padding:9px 14px; display:flex; align-items:center; gap:7px }
.ent-corr-ponto{ width:9px; height:9px; border-radius:50%; background:var(--line2) }
.ent-corr-previa-corpo{ padding:16px 18px }
.ent-corr-previa-corpo p{ font-size:12.5px; line-height:1.65; color:var(--ink2); margin:0 0 9px }
.ent-corr-previa-corpo .ent-corr-link{ color:var(--accent); font-size:12.5px;
  text-decoration:underline; display:inline-block; margin-bottom:12px }
.ent-corr-previa-selo{ margin-top:12px; border-top:1px solid var(--line); padding-top:12px }
.ent-corr-previa-selo svg{ max-width:100%; height:auto }
.ent-corr-nota{ font-size:11px; color:var(--muted); line-height:1.6; margin-top:12px }

@media (max-width:900px){
  .ent-corr{ grid-template-columns:1fr; gap:22px }
  .ent-corr h2{ font-size:23px }
}

/* ------------------------- peça para juntada --------------------------- */
.corr-camadas{ gap:8px }
.corr-camada{ display:flex; gap:9px; align-items:flex-start; line-height:1.55 }
.corr-camada-m{ flex:none; width:16px; height:16px; border-radius:50%; margin-top:2px;
  display:grid; place-items:center; background:var(--ok); color:#fff; font-size:9px; font-weight:700 }
.corr-via{ border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
  display:flex; flex-direction:column; gap:4px; background:var(--surface2) }

/* ===== BLUEJUS: estilos da tela do signatário ===== */
.asl-estreito{max-width:760px;margin:0 auto;padding:26px 18px 60px}
.asl-largo{max-width:1320px;margin:0 auto;padding:22px 18px 60px}

.asl-topo{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.asl-topo-marca{display:flex;align-items:center;gap:11px}
.asl-topo-nome{font-size:15px;line-height:1.2}
.asl-topo-doc{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.asl-doc-nome{font-weight:600;font-size:13.5px;max-width:340px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.asl-grade{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:18px;align-items:start}
.asl-lado{display:flex;flex-direction:column;gap:13px;position:sticky;top:16px}
.asl-principal{display:flex;flex-direction:column;gap:13px;min-width:0}

.asl-card{margin:0}
.asl-mt{margin-top:13px}
.asl-mb{margin-bottom:13px}
.asl-nota{margin-top:8px;line-height:1.65}
.asl-lista{margin:8px 0 0 18px;line-height:1.7}
.asl-linha{gap:8px;align-items:center;margin-top:10px}
.asl-stack{gap:13px}
.asl-h1{font-size:20px;line-height:1.3;margin:0}
.asl-sub{margin:6px 0 14px}
.asl-kv dd{word-break:break-word}
.asl-centro{text-align:center;padding:34px 20px}
.asl-spin{margin:0 auto 12px}
.asl-codigo{letter-spacing:.3em;font-size:17px}
.asl-chip-ok{color:var(--ok);display:inline-flex;align-items:center;gap:5px}

/* ------------------------------- ação ---------------------------------- */
.asl-acao{border-color:var(--accent-soft)}
.asl-acao-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.asl-acao-tit{margin-bottom:4px}
.asl-decl{display:flex;gap:10px;align-items:flex-start;margin-top:13px;padding:11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface2);cursor:pointer}
.asl-decl input{margin-top:3px;flex:0 0 auto}
.asl-decl span{line-height:1.6}
.asl-botao{width:100%;margin-top:13px;justify-content:center}
.asl-recusar{width:100%;margin-top:8px;justify-content:center}
.asl-recusa{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* ------------------------------ partes ---------------------------------- */
.asl-partes{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.asl-parte{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--r-sm)}
.asl-parte + .asl-parte{border-top:1px solid var(--line)}
.asl-voce{background:var(--accent-soft)}
.asl-parte-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.asl-parte-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asl-tag-voce{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-strong);
  border:1px solid var(--accent);border-radius:3px;padding:1px 4px;margin-left:4px;vertical-align:1px}
.asl-bolinha{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:600;line-height:1}
.asl-bolinha.b-ok{background:var(--ok-soft);color:var(--ok)}
.asl-bolinha.b-crit{background:var(--crit-soft);color:var(--crit)}
.asl-bolinha.b-espera{background:var(--neutral-soft);color:var(--muted)}
.asl-pill{flex:0 0 auto;font-size:9.5px}

/* ---------------------------- cronologia -------------------------------- */
.asl-tl{margin-top:10px}

/* ------------------------------ visor ----------------------------------- */
.asl-visor{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.asl-visor-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.asl-visor-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.asl-visor-acoes{gap:7px;flex-wrap:wrap}
.asl-visor-corpo{background:var(--surface2);min-height:420px;display:flex}
.asl-quadro{width:100%;height:min(76vh,880px);border:0;background:#fff;display:block}
.asl-visor-vazio{padding:44px 26px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:8px;margin:auto;max-width:460px;color:var(--muted)}
.asl-visor-vazio p{margin:0;line-height:1.7}
.asl-visor-rodape{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;border-top:1px solid var(--line)}
.asl-hash{word-break:break-all;font-size:10.5px}

/* ----------------------------- mensagem --------------------------------- */
.asl-msg{border-left:3px solid var(--accent)}
.asl-msg-txt{margin-top:7px;white-space:pre-wrap;line-height:1.7}

/* ---------------------------- tela final -------------------------------- */
.asl-final{text-align:center}
.asl-selo-ok{width:60px;height:60px;border-radius:50%;background:var(--ok-soft);color:var(--ok);
  display:grid;place-items:center;font-size:30px;font-weight:700;margin:4px auto 14px;line-height:1}
.asl-final-tit{font-size:21px;line-height:1.3;margin:0}
.asl-final-sub{margin:6px 0 0}
.asl-final-cod{margin-top:16px;padding:12px;border:1px dashed var(--line2);border-radius:var(--r-sm);
  background:var(--surface2);display:flex;flex-direction:column;gap:5px;align-items:center}
.asl-final-id{font-size:14px;font-weight:600;word-break:break-all}
.asl-final .kv,.asl-final .notice{text-align:left}
.asl-acoes-fim{gap:8px;flex-wrap:wrap;margin-top:16px;justify-content:center}

/* ----------------------------- confirmação ------------------------------ */
.asl-modal{max-width:520px}

@media (max-width:960px){
  .asl-grade{grid-template-columns:1fr}
  .asl-lado{position:static;order:2}
  .asl-principal{order:1}
  .asl-quadro{height:62vh}
  .asl-doc-nome{max-width:200px}
  .asl-topo-doc{align-items:flex-start}
}
@media (max-width:560px){
  .asl-estreito,.asl-largo{padding:18px 14px 48px}
  .asl-visor-corpo{min-height:300px}
  .asl-quadro{height:54vh}
  .asl-pill{display:none}
}
/* ===== BLUEJUS: fim dos estilos da tela do signatário ===== */

/* ===== BLUEJUS: estilos do texto do convite ===== */
.txt-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:16px;align-items:start}
.txt-editor{display:flex;flex-direction:column;min-width:0}
.txt-lado{min-width:0}
.txt-mt{margin-top:13px}
.txt-nota{margin-top:6px;line-height:1.6}
.txt-linha{gap:10px;flex-wrap:wrap;margin-top:10px}
.txt-f1{flex:1;min-width:150px}
.txt-f2{flex:2;min-width:200px}
.txt-area{min-height:190px;line-height:1.7;resize:vertical;font-family:inherit}
.txt-conta{justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ----------------------------- modelos ---------------------------------- */
.txt-modelos{margin-bottom:14px}
.txt-modelos-topo{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.txt-chips{display:flex;flex-wrap:wrap;gap:7px}
.txt-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;font:inherit;
  transition:border-color .15s,background .15s}
.txt-chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.txt-chip.on{border-color:var(--accent);background:var(--accent-soft)}
.txt-chip b{font-size:12.5px;font-weight:600}
.txt-chip-limpo{flex-direction:row;align-items:center;gap:6px;color:var(--muted);border-style:dashed}
.txt-pill{margin-top:3px;font-size:9px}
.txt-gerir{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r-sm)}
.txt-gerir-l{justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 11px}
.txt-gerir-l + .txt-gerir-l{border-top:1px solid var(--line)}
.txt-gerir-b{gap:6px}

/* ---------------------------- marcadores -------------------------------- */
.txt-marcadores{margin-top:14px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface2)}
.txt-marc{font-family:var(--mono);font-size:11.5px;padding:4px 8px;border-radius:4px;
  border:1px solid var(--line2);background:var(--surface);color:var(--accent-strong);cursor:pointer}
.txt-marc:hover{border-color:var(--accent);background:var(--accent-soft)}

.txt-guardar{margin-top:14px}
.txt-padrao{gap:8px;align-items:center;margin-top:10px;cursor:pointer}
.txt-btn-salvar{margin-top:12px}

/* ------------------------------ prévia ---------------------------------- */
.txt-previa{position:sticky;top:14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface2);overflow:hidden}
.txt-previa-topo{display:flex;flex-direction:column;gap:2px;padding:10px 13px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.txt-env{padding:10px 13px;border-bottom:1px solid var(--line);background:var(--surface)}
.txt-env-linha{display:flex;gap:9px;align-items:baseline;padding:2px 0}
.txt-env-linha > span:first-child{flex:0 0 52px}
.txt-env-linha > *:last-child{min-width:0;overflow-wrap:anywhere}

.txt-corpo-previa{margin:13px;border:1px solid var(--line);border-radius:8px;
  background:#fff;overflow:hidden;color:#16232F}
.txt-cab{background:#143A5E;padding:11px 14px;display:flex;flex-direction:column;gap:2px}
.txt-cab-marca{color:#fff;font-weight:600;font-size:13px}
.txt-cab-sub{color:#9FD2F5;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.txt-corpo-pad{padding:14px}
.txt-p{margin:7px 0 0;line-height:1.65;color:#16232F}
.txt-bloco-remetente{margin-top:12px;border-left:3px solid #2E8FB3;padding:3px 0 3px 11px}
.txt-bloco-remetente .eyebrow{color:#5B6B7A}
.txt-msg{margin:5px 0 0;white-space:pre-wrap;line-height:1.7;color:#16232F;
  max-height:230px;overflow:auto}
.txt-bloco-vazio{margin-top:12px;padding:10px;border:1px dashed #DFE6EC;border-radius:6px;line-height:1.6}
.txt-ficha{margin-top:12px;border:1px solid #DFE6EC;border-radius:6px}
.txt-ficha-l{display:flex;justify-content:space-between;gap:10px;padding:6px 10px}
.txt-ficha-l + .txt-ficha-l{border-top:1px solid #DFE6EC}
.txt-ficha-l span:first-child{color:#5B6B7A}
.txt-ficha-l span:last-child{color:#16232F;text-align:right;overflow-wrap:anywhere}
.txt-botao{margin:13px auto 0;max-width:230px;text-align:center;background:#0E76BC;color:#fff;
  border-radius:6px;padding:11px 14px;font-size:12.5px;font-weight:600}
.txt-fixo{margin-top:14px;padding-top:12px;border-top:1px solid #DFE6EC}
.txt-fixo b{color:#16232F}
.txt-fixo-l{margin:6px 0 0 16px;line-height:1.65;color:#5B6B7A}
.txt-fixo .txt-nota{color:#5B6B7A}

@media (max-width:1080px){
  .txt-grade{grid-template-columns:1fr}
  .txt-previa{position:static}
}
@media (max-width:560px){
  .txt-env-linha{flex-direction:column;gap:1px}
  .txt-env-linha > span:first-child{flex:none}
}
/* ===== BLUEJUS: fim dos estilos do texto do convite ===== */

/* ===== BLUEJUS: estilos do envio para assinatura ===== */
.env-stack{gap:13px}
.env-mt{margin-top:12px}
.env-nota{margin-top:7px;line-height:1.65}
.env-linha{gap:10px;flex-wrap:wrap;margin-top:10px}
.env-f1{flex:1;min-width:150px}
.env-f2{flex:2;min-width:210px}
.env-mid{display:flex;align-items:center}
.env-b{display:block;margin-top:2px;line-height:1.55}
.env-check{gap:10px;align-items:flex-start;cursor:pointer}
.env-check input{margin-top:3px;flex:0 0 auto}
.env-add{align-self:flex-start}

/* ------------------------------ partes ---------------------------------- */
.env-parte{position:relative}
.env-parte-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.env-parte-tit{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.env-parte-acoes{gap:5px;flex:0 0 auto}
.env-ordem{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-strong);font-size:12px;font-weight:700;line-height:1}
.env-chips{gap:5px;flex-wrap:wrap;margin-left:8px}
.env-chip{font-size:9px}

.env-fat{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.env-painel{flex:1 0 100%;margin-top:11px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface2)}
.env-lista{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.env-item{padding:9px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.env-item + .env-item{margin-top:6px}
.env-item-top{display:flex;gap:9px;align-items:center;cursor:pointer}
.env-item-top input{flex:0 0 auto}
.env-item-top > span{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.env-item-txt{margin-top:6px;padding-left:25px}
.env-item-txt p{margin:3px 0;line-height:1.6}
.env-off{opacity:.6}
.env-off .env-item-top{cursor:not-allowed}

/* ------------------------------ revisão --------------------------------- */
.env-fluxo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface2)}
.env-fluxo-no{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);min-width:0}
.env-fluxo-meio{flex:1;min-width:140px}
.env-fluxo-seta{color:var(--muted);font-size:15px;flex:0 0 auto}

.env-resumo{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.env-resumo li{display:flex;align-items:center;gap:10px;padding:8px 0}
.env-resumo li + li{border-top:1px solid var(--line)}
.env-resumo-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.env-resumo-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.env-passos{margin:12px 0 0 18px;padding:0;line-height:1.8}
.env-modal{max-width:540px}

.env-final{text-align:center}
.env-final-tit{font-size:17px;margin:0}
.env-final .kv,.env-final .notice{text-align:left}

@media (max-width:640px){
  .env-fluxo{flex-direction:column;align-items:stretch}
  .env-fluxo-seta{transform:rotate(90deg);text-align:center}
  .env-fluxo-no{width:100%}
  .env-item-txt{padding-left:0}
}
/* ===== BLUEJUS: fim dos estilos do envio ===== */

/* ===== BLUEJUS: estilos da prévia ampliada ===== */
.cert-mini{position:relative}
.cert-mini-abrir{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:transparent;cursor:zoom-in;display:grid;place-items:center}
.cert-mini-abrir span{opacity:0;transform:translateY(4px);
  background:rgba(15,32,48,.82);color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:6px 11px;border-radius:999px;transition:opacity .16s ease, transform .16s ease}
.cert-mini-abrir:hover span,.cert-mini-abrir:focus-visible span{opacity:1;transform:translateY(0)}
.cert-mini-abrir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pv-overlay{padding:20px;align-items:flex-start;overflow:auto}
.pv-caixa{width:min(1080px,100%);margin:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.pv-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.pv-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-acoes{gap:6px;flex-wrap:wrap}

.pv-palco{flex:1;min-height:0;overflow:auto;padding:20px;background:var(--surface2);
  display:flex;align-items:center;justify-content:center}
.pv-arte{width:100%;max-width:960px;background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--shadow);overflow:hidden;line-height:0}
.pv-arte svg{width:100%;height:auto;display:block}

.pv-pe{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 16px;border-top:1px solid var(--line)}
.pv-dica{white-space:nowrap}

@media (max-width:720px){
  .pv-overlay{padding:10px}
  .pv-caixa{max-height:calc(100vh - 20px)}
  .pv-palco{padding:12px}
  .pv-acoes{width:100%}
  .pv-dica{display:none}
}
/* ===== BLUEJUS: fim dos estilos da prévia ampliada ===== */

/* ===== BLUEJUS: estilos da sessão ===== */
.ses-mb{margin-bottom:12px}
.ses-mt{margin-top:12px}
.ses-nota{margin-top:7px;line-height:1.65}
.ses-botao{width:100%;justify-content:center;padding:11px}
.ses-voltar{width:100%;justify-content:center;margin-top:9px}
.ses-codigo{letter-spacing:.3em;font-size:17px;text-align:center}
.ses-acesso{max-width:640px}
.ses-acesso-topo{gap:10px;align-items:center;color:var(--warn)}
.ses-acesso-topo b{color:var(--ink);font-size:15px}
.ses-conta{display:flex;flex-direction:column;gap:1px;align-items:flex-end}
.ses-conta .pill{font-size:9px}
/* ===== BLUEJUS: fim dos estilos da sessão ===== */

/* ===== BLUEJUS: estilos dos favoritos ===== */
.fav-grupo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fav-editar{border:0;background:transparent;color:var(--muted);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:2px 4px;border-radius:4px}
.fav-editar:hover{color:var(--accent-strong);background:var(--accent-soft)}
.nav a.fav-linha{position:relative}
.fav-estrela{border:0;background:transparent;color:var(--muted2);cursor:pointer;
  font-size:14px;line-height:1;padding:2px 4px;border-radius:4px;margin-left:auto;opacity:0;
  transition:opacity .14s ease, color .14s ease}
.nav a:hover .fav-estrela,.fav-estrela.on,.fav-estrela:focus-visible{opacity:1}
.fav-estrela.on{color:var(--warn)}
.fav-estrela:hover{color:var(--accent-strong);background:var(--accent-soft)}
.fav-mover{display:flex;gap:2px;margin-left:auto}
.fav-seta{border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  width:20px;height:20px;border-radius:4px;font-size:11px;line-height:1;cursor:pointer;padding:0}
.fav-seta:disabled{opacity:.35;cursor:not-allowed}
.fav-aviso{padding:4px 14px 8px;color:var(--warn);line-height:1.5}

.fav-stack{gap:13px}
.fav-mt{margin-top:12px}
.fav-nota{margin-top:8px;line-height:1.65}
.fav-kv dd{word-break:break-word}
.fav-grupo-admin + .fav-grupo-admin{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fav-lista{list-style:none;margin:9px 0 0;padding:0}
.fav-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:9px 0}
.fav-item + .fav-item{border-top:1px solid var(--line)}
.fav-item.off{opacity:.72}
.fav-item-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fav-item-acoes{gap:8px;flex:0 0 auto}
.fav-pill{align-self:flex-start;font-size:9px}
.fav-modal{max-width:520px}
@media (max-width:560px){
  .fav-item{align-items:flex-start}
  .fav-item-acoes{width:100%;justify-content:space-between}
}
/* ===== BLUEJUS: fim dos estilos dos favoritos ===== */

/* ===== BLUEJUS: CSS DO MODO ASSINATURA NO PERFIL ===== */
.pass-atuais{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pass-atual{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;background:var(--surface)}
.pass-atual .eyebrow{margin-bottom:6px}

.pass-visor{border:1px dashed var(--line2);border-radius:var(--r-sm);background:var(--surface2);
  min-height:76px;display:flex;align-items:center;justify-content:center;padding:8px;margin-bottom:8px}
.pass-visor svg{max-width:100%;height:auto}
.pass-vazio{font-size:12px;color:var(--muted);text-align:center;line-height:1.45}

.pass-prancheta{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);overflow:hidden}
.pass-prancheta canvas{display:block;width:100%;height:auto;aspect-ratio:3/1;touch-action:none;cursor:crosshair}
/* A linha de base existe para a pessoa saber onde assinar, como no papel. */
.pass-linha{position:absolute;left:8%;right:8%;bottom:22%;height:1px;background:var(--line2);pointer-events:none}
.pass-dica{position:absolute;inset:auto 0 8px 0;text-align:center;font-size:11.5px;color:var(--muted2);
  pointer-events:none}

.pass-estilos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.pass-estilo{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:border-color .16s ease, background .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.2)}
.pass-estilo:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.pass-estilo.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.pass-amostra{font-size:22px;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
/* Aproximações da prévia. A marcação definitiva é montada no servidor. */
.pass-e-cursiva{font-family:"Segoe Script","Brush Script MT",cursive}
.pass-e-inclinada{font-family:var(--serif);font-style:italic}
.pass-e-firme{font-family:var(--serif);font-weight:600;letter-spacing:.02em}
.pass-e-sobria{font-family:var(--sans);letter-spacing:.06em}

.pass-rubrica{display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer}
.pass-hist{display:flex;flex-direction:column;gap:6px}
.pass-hist-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;background:var(--surface)}

@media (max-width:720px){
  .pass-atuais{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .pass-estilo:hover{transform:none}
}
/* ===== BLUEJUS: FIM DO CSS DO MODO ASSINATURA NO PERFIL ===== */

/* ===== BLUEJUS: CSS DAS ÁREAS DO MENU E DO GUIA ===== */
/* ------------------------------------------------------------------ menu */
.nav-fixo{margin-bottom:1px}
.nav-area{margin-top:2px}

/* O BlueJus IA fecha o menu, separado do resto por uma linha: ele não é mais
   uma etapa do trabalho, é para onde se vai quando as etapas não bastaram. A
   linha diz isso sem precisar de rótulo. */
.nav-fixo-fim{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}

/* Título curto e apertado de propósito: com a contagem e a seta ao lado, um
   grau a mais de espaçamento faz "Documentos e modelos" virar reticências. */
.nav-area-topo{display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 10px;border:none;background:none;cursor:pointer;border-radius:var(--r-sm);
  color:var(--ink2);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  font-family:inherit;text-align:left;
  transition:background .16s ease, color .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.3)}
.nav-area-topo svg{flex:none;color:var(--muted)}
.nav-area-topo:hover{background:var(--surface2);color:var(--accent-strong);transform:translateX(2px)}
.nav-area-topo:hover svg{color:var(--accent)}
.nav-area-topo:active{transform:translateX(1px) scale(.985)}
.nav-area-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* O número diz quantos destinos estão dobrados ali dentro: sem ele, a área
   fechada parece um item, e não um grupo.                                 */
.nav-area-conta{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted2);
  background:var(--surface2);border-radius:9px;padding:1px 6px;flex:none}
.nav-area.aqui .nav-area-conta{background:var(--accent-soft);color:var(--accent)}
.nav-area-seta{display:flex;flex:none;color:var(--muted2);transition:transform .2s ease}
.nav-area.aberta .nav-area-seta{transform:rotate(90deg)}

/* Fechado não é só escondido: é altura zero, senão a lista continua longa. */
.nav-area-itens{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .22s cubic-bezier(.2,.7,.3,1)}
.nav-area.aberta .nav-area-itens{grid-template-rows:1fr}
/* Um único filho, porque grid-template-rows:0fr dobra a primeira faixa e não
   as seguintes: com os itens soltos, o segundo em diante continuaria na
   tela.                                                                   */
.nav-area-lista{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1px;
  visibility:hidden;transition:visibility 0s linear .22s}
/* Recolhido de verdade: só cortar a altura deixaria os links ainda
   alcançáveis pelo teclado, e quem navega por Tab passearia por um submenu
   que não está na tela.                                                   */
.nav-area.aberta .nav-area-lista{visibility:visible;transition:visibility 0s}
/* Recuo suficiente para ler como submenu e curto o bastante para o rótulo
   caber numa linha: "Documentos para editar" em duas linhas devolve ao menu
   a altura que as áreas acabaram de economizar.                           */
.nav-area-itens a{padding-left:18px;gap:9px;font-size:13.5px;position:relative}
.nav-area-itens a span:not(.badge-n){min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Um fio ligando os itens ao grupo, para o olho saber onde o submenu começa
   e termina.                                                              */
.nav-area-itens::before{content:"";position:absolute;left:16px;width:1px;background:var(--line);
  top:0;bottom:0;opacity:0;transition:opacity .2s ease}
.nav-area{position:relative}
.nav-area.aberta .nav-area-itens::before{opacity:1}

.nav-area.aqui > .nav-area-topo{color:var(--accent);background:var(--accent-soft)}
.nav-area.aqui > .nav-area-topo svg{color:var(--accent)}

.nav-atalho-busca{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .16s ease, background .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.3)}
.nav-atalho-busca:hover{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-strong);transform:translateY(-1px)}
.nav-atalho-busca:active{transform:translateY(1px) scale(.99)}
/* A folha antiga posiciona .quick svg em absoluto, para a lupa flutuar
   sobre o campo de texto. Este botão não é campo de texto: herdar aquela
   regra jogava a lupa para fora da caixa, encostada na borda esquerda. */
.nav-atalho-busca svg{flex:none;position:static;color:var(--muted2)}
/* A etiqueta do atalho saiu do botão. O atalho continua valendo, e agora
   aparece na dica ao parar o cursor: quem usa Ctrl+K já sabe de cor, e quem
   não usa lia uma sigla que não significava nada ali. O estilo fica, sem
   uso, porque ele volta no dia em que a etiqueta voltar.               */
.nav-atalho-busca .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted2);
  border:1px solid var(--line2);border-radius:4px;padding:1px 5px;flex:none}

/* ------------------------------------------------------------------ guia */
.guia-overlay{align-items:flex-start;padding-top:9vh}
.guia-modal{max-width:660px;width:100%;padding:0;overflow:hidden}

.guia-campo{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.guia-campo svg{flex:none;color:var(--muted)}
.guia-campo input{flex:1;border:none;outline:none;background:none;font-size:16px;
  color:var(--ink);font-family:inherit;min-width:0}
.guia-campo input::placeholder{color:var(--muted2)}

.guia-corpo{padding:12px 12px 14px;max-height:56vh;overflow-y:auto}
.guia-chips{display:flex;flex-wrap:wrap;gap:6px}

.guia-item{display:flex;align-items:flex-start;gap:11px;padding:10px 10px;border-radius:var(--r-sm);
  text-decoration:none;color:inherit;
  transition:background .14s ease, transform .16s cubic-bezier(.2,.9,.3,1.3)}
.guia-item:hover{background:var(--accent-soft);transform:translateX(3px)}
.guia-ic{flex:none;color:var(--accent);display:flex;padding-top:2px}
.guia-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.guia-nome{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.guia-area{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted2);background:var(--surface2);border-radius:8px;padding:1px 7px}
.guia-faz{font-size:12.5px;color:var(--ink2);line-height:1.5}
.guia-quando{font-size:11.5px;color:var(--muted);line-height:1.45;font-style:italic}
.guia-seta{flex:none;color:var(--muted2);display:flex;padding-top:4px}

.guia-rodape{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px 16px;border-top:1px solid var(--line);background:var(--surface2)}
.guia-rodape kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line2);
  border-radius:4px;padding:1px 4px;background:var(--surface)}

@media (max-width:640px){
  .guia-overlay{padding-top:0;align-items:stretch}
  .guia-modal{max-width:100%;border-radius:0;height:100%}
  .guia-corpo{max-height:none;flex:1}
}
@media (prefers-reduced-motion: reduce){
  .nav-area-itens{transition:none}
  .nav-area-topo:hover,.guia-item:hover,.nav-atalho-busca:hover{transform:none}
}
/* ===== BLUEJUS: FIM DO CSS DAS ÁREAS E DO GUIA ===== */

/* ------------------------------------------------- sair, no pé do menu */
/* Ele fecha a coluna, separado por linha, e não disputa atenção com os
   destinos: quem procura Sair sabe o que procura, e quem não procura não
   pode tropeçar nele.                                                   */
.nav-sair{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px}
.nav-sair-quem{font-size:10.5px;color:var(--muted);padding:0 10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-sair-botao{display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 10px;border:1px solid transparent;border-radius:var(--r-sm);
  background:none;cursor:pointer;font:inherit;font-size:13px;color:var(--ink2);
  text-align:left;transition:background .16s ease,color .16s ease,border-color .16s ease}
.nav-sair-botao svg{flex:none;color:var(--muted)}
.nav-sair-botao:hover{background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
.nav-sair-botao:hover svg{color:var(--crit)}
.nav-sair-botao:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A confirmação abre no lugar do botão, sem modal e sem trocar de tela: a
   pergunta cabe onde o clique foi dado.                                 */
.nav-sair-perguntando{gap:8px}
.nav-sair-aviso{font-size:11px;line-height:1.45;color:var(--ink2);padding:0 10px}
.nav-sair-botoes{display:flex;gap:6px;padding:0 6px}
.nav-sair-botoes .btn{flex:1;justify-content:center;padding:7px 8px;font-size:12px}

/* ===== BLUEJUS: CSS DA ENTRADA DO BLUEJUS SIGN ===== */
/* O azul, o gradiente e os brilhos são os mesmos da tela de acesso: a
   entrada tem de parecer a continuação dela, e não uma peça colada depois. */
.abertura{
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #1B4E7A 0%, #123A5C 46%, #0C2840 100%);
  color:#fff; overflow:hidden; cursor:pointer;
  animation:abertura-entra .34s ease both;
}
.abertura-saindo{ animation:abertura-sai .3s ease both }

@keyframes abertura-entra{ from{opacity:0} to{opacity:1} }
@keyframes abertura-sai{ from{opacity:1} to{opacity:0; transform:scale(1.015)} }

/* Dois focos de luz, parados. Luz que pulsa em tela de três segundos vira
   a única coisa que a pessoa olha.                                        */
.abertura-brilho{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.abertura-brilho.b1{width:460px;height:460px;left:-120px;top:-140px;background:rgba(46,143,179,.34)}
.abertura-brilho.b2{width:380px;height:380px;right:-110px;bottom:-130px;background:rgba(143,203,236,.20)}

.abertura-palco{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:12px;padding:24px;text-align:center;max-width:560px;width:100%}

.abertura-ola{margin:0;font-size:26px;font-weight:500;letter-spacing:-.01em;color:#fff;
  animation:abertura-sobe .5s cubic-bezier(.2,.8,.3,1) both}
.abertura-sub{margin:0;font-size:13px;color:#BBD9EF;letter-spacing:.02em;
  animation:abertura-sobe .5s cubic-bezier(.2,.8,.3,1) .12s both}

@keyframes abertura-sobe{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ------------------------------------------------------------- documento */
.abertura-doc{width:min(310px,74vw);height:auto;margin-top:6px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.34))}

.abertura-folha{ animation:abertura-folha .62s cubic-bezier(.2,.85,.3,1.05) .22s both }
@keyframes abertura-folha{ from{opacity:0;transform:translateY(16px) scale(.96)} to{opacity:1;transform:none} }

.abertura-cabeca{ animation:abertura-aparece .34s ease .62s both }
.abertura-linhas .l1{ animation:abertura-linha .3s ease .74s both }
.abertura-linhas .l2{ animation:abertura-linha .3s ease .84s both }
.abertura-linhas .l3{ animation:abertura-linha .3s ease .94s both }
@keyframes abertura-aparece{ from{opacity:0} to{opacity:1} }
@keyframes abertura-linha{ from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }

.abertura-campo{ animation:abertura-aparece .3s ease 1.05s both }
/* A moldura tracejada gira devagar uma volta curta: é o sinal de que ali é o
   lugar de assinar, e não enfeite permanente.                             */
.abertura-moldura{ animation:abertura-moldura 1.1s linear 1.15s both }
@keyframes abertura-moldura{ from{stroke-dashoffset:0} to{stroke-dashoffset:-36} }

/* O traço se desenha da esquerda para a direita, como caneta sobre papel. */
.abertura-rubrica{
  stroke-dasharray:300; stroke-dashoffset:300;
  animation:abertura-assina .82s cubic-bezier(.45,.05,.3,1) 1.38s both;
}
@keyframes abertura-assina{ to{stroke-dashoffset:0} }

.abertura-selo{ transform-origin:206px 160px;
  animation:abertura-selo .44s cubic-bezier(.2,.9,.3,1.5) 2.24s both }
@keyframes abertura-selo{ from{opacity:0;transform:scale(.4)} to{opacity:1;transform:scale(1)} }

/* --------------------------------------------------------------- estágios */
.abertura-passos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.abertura-passos span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#9FD2F5;border:1px solid rgba(159,210,245,.34);border-radius:20px;padding:3px 11px;
  animation:abertura-passo .34s ease both;
  animation-delay:calc(.7s + var(--i) * .42s)}
@keyframes abertura-passo{ from{opacity:0;transform:translateY(6px)} to{opacity:.95;transform:none} }

/* ------------------------------------------------------------------ marca */
.abertura-marca{display:flex;align-items:center;gap:12px;margin-top:10px;
  animation:abertura-sobe .55s cubic-bezier(.2,.8,.3,1) 2.5s both}
.abertura-marca .brand-name{font-size:22px}
.abertura-slogan{margin:3px 0 0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#9FD2F5;text-align:left}

/* A versão curta traz só a saudação e a marca, e a marca não espera nada. */
.abertura-curta .abertura-marca{ animation-delay:.18s }
.abertura-simples .abertura-marca{ animation-delay:.1s }

/* ----------------------------------------------------------------- rodapé */
.abertura-rodape{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;
  gap:10px;flex-wrap:wrap;padding:0 16px;
  animation:abertura-aparece .3s ease .5s both}
.abertura-btn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);
  color:#DCEBF7;border-radius:20px;padding:6px 15px;font-size:12px;cursor:pointer;
  font-family:inherit;
  transition:background .16s ease, border-color .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.3)}
.abertura-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);color:#fff;
  transform:translateY(-1px)}
.abertura-btn:active{transform:translateY(1px) scale(.98)}

@media (max-width:560px){
  .abertura-ola{font-size:21px}
  .abertura-marca{flex-direction:column;gap:8px}
  .abertura-slogan{text-align:center}
  .abertura-rodape{bottom:14px}
}

/* Quem pediu menos movimento recebe a cena parada: sem desenho de traço, sem
   deslocamento e sem escala. Fica a saudação, a marca e a frase, que é o que
   a entrada precisa dizer.                                                */
@media (prefers-reduced-motion: reduce){
  .abertura, .abertura-saindo{ animation:abertura-aparece .2s ease both }
  .abertura-ola,.abertura-sub,.abertura-marca,.abertura-rodape,.abertura-cabeca,.abertura-campo,.abertura-selo,
  .abertura-linhas .l1,.abertura-linhas .l2,.abertura-linhas .l3,.abertura-folha,.abertura-passos span{
    animation:none !important; opacity:1; transform:none }
  .abertura-rubrica{ animation:none !important; stroke-dashoffset:0 }
  .abertura-moldura{ animation:none !important }
  .abertura-btn:hover,.abertura-btn:active{ transform:none }
}
/* ===== BLUEJUS: FIM DO CSS DA ENTRADA ===== */

/* ===== BLUEJUS: barra do topo no celular ===== */
@media (max-width:560px){
  .appbar{gap:8px;padding:0 10px}
  .appbar .brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* A barra encolhe pela marca, e não pelos botões: marca pela metade ainda
     é reconhecível, botão espremido deixa de ser clicável e some da tela. */
  .ab-right{gap:3px;flex:0 0 auto}
  .ab-user{padding:4px}
  .bar-chip{padding:0 6px}
}
/* ===== BLUEJUS: fim da barra do topo no celular ===== */

/* ===== BLUEJUS: animação dos botões claros ===== */
/* O botão claro responde ao cursor: cresce de leve e o fundo vira azul
   pastel. O primário tem o próprio estado e fica de fora. O crescimento é
   por transform, que não reflui a página: animar font-size faria a linha
   inteira tremer a cada quadro.                                          */
.btn:not(.btn-primary):not(:disabled),
.icon-btn,
.tabs button:not(.on),
.txt-chip,
.txt-marc{
  transition:background .16s ease, border-color .16s ease, color .16s ease,
             transform .16s cubic-bezier(.2,.9,.3,1.2);
}
.btn:not(.btn-primary):not(:disabled):hover,
.icon-btn:hover,
.tabs button:not(.on):hover,
.txt-chip:hover,
.txt-marc:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-strong);
  transform:scale(1.04);
}
.btn.btn-crit:not(:disabled):hover{
  background:var(--crit-soft);
  border-color:var(--crit);
  color:var(--crit);
}
.btn:not(.btn-primary):not(:disabled):active,
.icon-btn:active,
.tabs button:not(.on):active{ transform:scale(.98) }

/* Foco pelo teclado recebe o mesmo destaque, sem depender do cursor. */
.btn:not(.btn-primary):not(:disabled):focus-visible,
.icon-btn:focus-visible,
.tabs button:focus-visible{ background:var(--accent-soft); border-color:var(--accent) }

/* A barra do topo tem fundo escuro: pastel ali sumiria. */
.appbar .btn:not(.btn-primary):not(:disabled):hover,
.appbar .icon-btn:hover{
  background:rgba(255,255,255,.16); border-color:transparent; color:#fff;
}

@media (prefers-reduced-motion: reduce){
  .btn,.icon-btn,.tabs button,.txt-chip,.txt-marc{ transition:background .16s ease, color .16s ease }
  .btn:hover,.icon-btn:hover,.tabs button:hover,.txt-chip:hover,.txt-marc:hover,
  .btn:active,.icon-btn:active,.tabs button:active{ transform:none !important }
}
/* ===== BLUEJUS: fim da animação dos botões claros ===== */

/* ===== BLUEJUS: pulinho dos menus de aba ===== */
@keyframes bj-pulinho{
  0%   { transform:translateY(0) }
  38%  { transform:translateY(-4px) }
  64%  { transform:translateY(-1px) }
  100% { transform:translateY(0) }
}

.tabsbar a,
.tabs button{
  position:relative;
  transition:color .16s ease, background .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.3);
  transform-origin:center bottom;
}

/* O salto roda uma vez por entrada do cursor: sair e voltar repete, parar em
   cima não.                                                               */
.tabsbar a:hover,
.tabs button:not(.on):hover{
  animation:bj-pulinho .34s cubic-bezier(.2,.9,.3,1.3);
  color:var(--accent-strong);
}
.tabsbar a:hover{ background:var(--accent-soft) }
.tabsbar a.on:hover{ animation:bj-pulinho .34s cubic-bezier(.2,.9,.3,1.3) }

/* No clique, afunda. */
.tabsbar a:active,
.tabs button:active{ animation:none; transform:translateY(2px) scale(.97) }

/* O sublinhado cresce do centro ao ser escolhido, em vez de aparecer
   inteiro: é o que liga o clique ao resultado.                            */
.tabsbar a::after,
.tabs button::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-3px; height:3px;
  background:var(--accent); border-radius:2px; pointer-events:none;
  transition:left .22s cubic-bezier(.2,.9,.3,1.2), right .22s cubic-bezier(.2,.9,.3,1.2);
}
.tabsbar a.on::after,
.tabs button.on::after{ left:0; right:0 }

/* A borda inferior que já marcava a aba escolhida sai de cena: duas marcas
   no mesmo lugar engrossariam a linha.                                    */
.tabsbar a.on{ border-bottom-color:transparent }
.tabs button.on{ border-bottom-color:transparent }

.tabsbar a:focus-visible,
.tabs button:focus-visible{ background:var(--accent-soft); color:var(--accent-strong) }

@media (prefers-reduced-motion: reduce){
  .tabsbar a:hover,.tabs button:hover,.tabsbar a.on:hover{ animation:none }
  .tabsbar a,.tabs button{ transition:color .16s ease, background .16s ease }
  .tabsbar a:active,.tabs button:active{ transform:none }
  .tabsbar a::after,.tabs button::after{ transition:none }
}
/* ===== BLUEJUS: fim do pulinho dos menus de aba ===== */

/* ===== BLUEJUS: CSS DO PAINEL VIVO ===== */
/* O movimento vale só na entrada do painel, marcada por .pv-entrando. Sem
   essa condição, cada filtro reanima o gráfico inteiro.                  */
@keyframes pv-sobe{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes pv-surge{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pv-fatia{ from{ opacity:0; transform:scale(.72) } to{ opacity:1; transform:none } }
@keyframes pv-enche{ from{ width:0 } to{ width:var(--larg) } }

.pv-entrando .pv-barra{
  /* fill-box faz a escala partir da própria barra, e não do canto do SVG:
     sem isso a barra cresce vindo de fora da área do gráfico.          */
  transform-box:fill-box; transform-origin:bottom center;
  animation:pv-sobe .52s cubic-bezier(.2,.85,.3,1.05) both;
  animation-delay:calc(var(--i) * .06s);
}
.pv-entrando .pv-valor{
  animation:pv-surge .3s ease both;
  animation-delay:calc(.28s + var(--i) * .06s);
}
.pv-entrando .pv-fatia{
  transform-box:fill-box; transform-origin:center;
  animation:pv-fatia .44s cubic-bezier(.2,.9,.3,1.2) both;
  animation-delay:calc(var(--i) * .08s);
}
.pv-entrando .pv-preenche{
  animation:pv-enche .62s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:.1s;
}

/* Resposta ao cursor: a barra clareia e sobe um fio, e a fatia da rosca se
   destaca. Nada pisca sozinho.                                           */
.pv-barra{ transition:filter .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.3); cursor:default }
.pv-barra:hover{ filter:brightness(1.12) saturate(1.05) }
.pv-fatia{ transition:transform .18s cubic-bezier(.2,.9,.3,1.3), filter .18s ease;
  transform-box:fill-box; transform-origin:center }
.pv-fatia:hover{ filter:brightness(1.1); transform:scale(1.035) }
.bar-fill{ transition:filter .16s ease }
.bar-track:hover .bar-fill{ filter:brightness(1.1) }

@media (prefers-reduced-motion: reduce){
  .pv-entrando .pv-barra,.pv-entrando .pv-valor,.pv-entrando .pv-fatia,
  .pv-entrando .pv-preenche{ animation:none !important; opacity:1; transform:none; width:var(--larg) }
  .pv-barra:hover,.pv-fatia:hover{ transform:none }
}
/* ===== BLUEJUS: FIM DO CSS DO PAINEL VIVO ===== */

/* ===== BLUEJUS: CSS DOS ATALHOS DO TOPO ===== */
.topo-lista{display:flex;flex-direction:column;gap:6px}
.topo-item{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  transition:border-color .16s ease, background .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.3)}
.topo-item:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateX(2px)}
.topo-item.on{border-color:var(--accent)}
.topo-item input{margin-top:2px;flex:none}
.topo-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.topo-txt b{font-size:13.5px}
/* O item fixo não é clicável e não finge ser: sem caixa de seleção, com o
   motivo escrito ao lado.                                                */
.topo-item.fixo{cursor:default;background:var(--accent-soft);border-color:var(--accent);
  border-style:dashed}
.topo-item.fixo:hover{transform:none}
.topo-fixo-ico{flex:none;color:var(--accent);display:flex;padding-top:1px}
@media (prefers-reduced-motion: reduce){ .topo-item:hover{transform:none} }
/* ===== BLUEJUS: FIM DO CSS DOS ATALHOS DO TOPO ===== */

/* ===== BLUEJUS: CSS DOS ARQUIVOS DE TESTE ===== */
.am-cartao{margin-bottom:14px}
.am-nota{margin:0 0 10px;line-height:1.55}
.am-lista{display:flex;flex-direction:column;gap:7px}
.am-item{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  transition:border-color .16s ease, background .16s ease}
.am-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.am-ic{flex:none;color:var(--accent);display:flex}
.am-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.am-txt b{font-size:13.5px}
@media (max-width:560px){
  .am-item{flex-wrap:wrap}
  .am-item .btn{width:100%;justify-content:center}
}
/* ===== BLUEJUS: FIM DO CSS DOS ARQUIVOS DE TESTE ===== */

/* ===== BLUEJUS: CSS DA CONTA E SESSAO ===== */
.pc-stack{gap:12px}
.pc-nota{margin:0;line-height:1.55}
.pc-mt{margin-top:9px}
.pc-kv{margin-top:4px}
.pc-acoes{gap:8px;margin-top:10px;flex-wrap:wrap}
.pc-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}

.pc-sessoes{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.pc-sessao{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  transition:border-color .16s ease, background .16s ease, transform .16s ease}
.pc-sessao:hover{border-color:var(--accent);transform:translateY(-1px)}
.pc-sessao.aqui{border-color:var(--ok);background:var(--ok-soft)}
.pc-sessao.morta{opacity:.62}
.pc-sessao-ic{flex:none;color:var(--accent);display:flex}
.pc-sessao.aqui .pc-sessao-ic{color:var(--ok)}
.pc-sessao-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}

.pc-atalhos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pc-atalho{display:flex;align-items:center;gap:10px;padding:10px 11px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  cursor:pointer;font-family:inherit;color:var(--ink);
  transition:border-color .16s ease, background .16s ease, transform .16s ease}
.pc-atalho:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.pc-atalho-ic{flex:none;color:var(--accent);display:flex}
.pc-atalho-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pc-atalho-seta{flex:none;color:var(--muted);display:flex;transform:rotate(-90deg)}

/* Sair fica por último e sem destaque de cor: é ação de saída, não de uso. */
.pc-saida{border-color:var(--line2)}

@media (max-width:640px){
  .pc-grade{grid-template-columns:1fr}
  .pc-atalhos{grid-template-columns:1fr}
  .pc-sessao{flex-wrap:wrap}
  .pc-sessao .btn{width:100%;justify-content:center}
}
/* ===== BLUEJUS: FIM DO CSS DA CONTA E SESSAO ===== */

/* ===== BLUEJUS: CSS DOS PAINEIS VIVOS ===== */
/* A mesma abertura em todos os painéis, e o cartão de número deixando de ser
   caixa branca. Tudo preso a .content, que só existe dentro do sistema: as
   telas públicas continuam paradas de propósito.                          */
@keyframes pv-cartao{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }

/* ---------------------------------------------------- entrada dos cartões */
.pv-entrando .content .kpi,
.pv-entrando .content .card,
.pv-entrando .content .kpis{
  animation:pv-cartao .42s cubic-bezier(.2,.85,.3,1) both;
}
/* Cartão dentro de cartão não se anima outra vez: o de fora já levou o de
   dentro junto, e animar os dois produz um deslizar dentro do outro.     */
.pv-entrando .content .card .card,
.pv-entrando .content .card .kpis,
.pv-entrando .content .kpis .kpi{ animation:none }
.pv-entrando .content .kpis{ animation-delay:.02s }

/* A escada é curta e para no oitavo: passar disso faz o último cartão
   aparecer quando quem abriu a tela já está lendo o primeiro.            */
.pv-entrando .content .kpis > .kpi{ animation:pv-cartao .4s cubic-bezier(.2,.85,.3,1) both }
.pv-entrando .content .kpis > .kpi:nth-child(1){ animation-delay:.04s }
.pv-entrando .content .kpis > .kpi:nth-child(2){ animation-delay:.09s }
.pv-entrando .content .kpis > .kpi:nth-child(3){ animation-delay:.14s }
.pv-entrando .content .kpis > .kpi:nth-child(4){ animation-delay:.19s }
.pv-entrando .content .kpis > .kpi:nth-child(5){ animation-delay:.23s }
.pv-entrando .content .kpis > .kpi:nth-child(6){ animation-delay:.26s }
.pv-entrando .content .kpis > .kpi:nth-child(n+7){ animation-delay:.29s }
/* Dentro de um cartão, quem se move é o cartão: a escada de números ali
   dentro faria duas coisas deslizarem uma dentro da outra.              */
.pv-entrando .content .card .kpis > .kpi{ animation:none }

.pv-entrando .content > .card,
.pv-entrando .content > .grid > .card,
.pv-entrando .content > .split > .card,
.pv-entrando .content > .stack > .card{ animation-delay:.1s }

/* ------------------------------------------------- o cartão em descanso */
/* Um fio de cor na borda de dentro, um fundo com leve profundidade. O
   número segue sendo a coisa mais forte do cartão.                      */
.content .kpi{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .18s ease,
             border-color .18s ease;
}
.content .kpi::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:.3;
  transition:opacity .18s ease, width .18s ease;
}
.content .kpi:hover{
  transform:translateY(-2px); border-color:var(--accent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent);
}
.content .kpi:hover::after{ opacity:.9; width:4px }

/* Cartão de número que leva a algum lugar se comporta como botão; o que não
   leva não finge que leva.                                              */
.content .kpi[data-a]{ cursor:pointer }
.content .kpi[data-a]:active{ transform:translateY(0) scale(.995) }
.content .kpi:not([data-a]){ cursor:default }

/* ----------------------------------------------------- o painel em volta */
.content .card{ transition:box-shadow .2s ease, border-color .2s ease }
.content > .card:hover,
.content > .grid > .card:hover,
.content > .split > .card:hover{
  box-shadow:0 5px 16px color-mix(in srgb, var(--ink) 7%, transparent);
}

/* A barra de progresso ganha um brilho que atravessa uma vez na entrada. Ela
   é o elemento mais estático dos painéis de consumo, e é justamente o que
   muda de valor.                                                         */
@keyframes pv-brilho{ from{ transform:translateX(-100%) } to{ transform:translateX(320%) } }
.pv-entrando .content .bar-fill{ position:relative; overflow:hidden }
.pv-entrando .content .bar-fill::after{
  content:""; position:absolute; inset:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation:pv-brilho 1.1s ease-out .35s both;
}

@media (prefers-reduced-motion: reduce){
  .pv-entrando .content .kpi,
  .pv-entrando .content .card,
  .pv-entrando .content .kpis,
  .pv-entrando .content .kpis > .kpi{ animation:none !important; opacity:1; transform:none }
  .pv-entrando .content .bar-fill::after{ animation:none; content:none }
  .content .kpi:hover{ transform:none }
}
/* ===== BLUEJUS: FIM DO CSS DOS PAINEIS VIVOS ===== */

/* ===== BLUEJUS: CSS DOS AVISOS E CONTAS ===== */

/* ------------------------------ a caixa que aparece na entrada ---------- */
.av-caixa{max-width:560px}
.av-cabeca{align-items:flex-start;gap:12px}
.av-cabeca-txt{min-width:0}
.av-titulo{font-size:17px;margin:2px 0 0;line-height:1.35}
.av-corpo{font-size:14px;line-height:1.65;margin:0;color:var(--ink)}
.av-rodape{margin:12px 0 0;line-height:1.5}
.av-mt{margin-top:11px}

/* Uma faixa de cor no alto diz o peso do aviso antes de a pessoa ler. É o
   único enfeite da caixa: aviso é para ser lido, não admirado.           */
.av-caixa{border-top:4px solid var(--info)}
.av-caixa.av-atencao{border-top-color:var(--warn)}
.av-caixa.av-critico{border-top-color:var(--crit)}
.av-caixa .eyebrow{color:var(--info)}
.av-caixa.av-atencao .eyebrow{color:var(--warn)}
.av-caixa.av-critico .eyebrow{color:var(--crit)}

.av-step{max-width:440px}

/* ------------------------------------------------- a tela do responsável */
.av-abas{margin-bottom:14px}
.av-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.av-nota{margin:0 0 10px;line-height:1.55}
.av-acoes{gap:8px;margin-top:13px;flex-wrap:wrap}
.av-datas{grid-template-columns:1fr 1fr;gap:10px}

.av-escolhas{gap:7px;flex-wrap:wrap;margin-top:2px}
.av-escolha{padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink2);
  transition:border-color .16s ease, background .16s ease, transform .14s ease}
.av-escolha:hover{border-color:var(--accent);transform:translateY(-1px)}
.av-escolha.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}

.av-marca{gap:10px;align-items:flex-start;cursor:pointer;margin-top:13px}
/* Nome próprio, e não .av-caixa: esse já é o da caixa de aviso, e duas
   coisas diferentes com o mesmo nome acabam herdando o estilo uma da
   outra no dia em que alguém mexer numa delas.                          */
.av-quadro{display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:18px;height:18px;margin-top:1px;border:1px solid var(--line2);
  border-radius:4px;background:var(--surface);font-size:12px;color:var(--on-accent);
  transition:background .16s ease, border-color .16s ease}
.av-quadro.on{background:var(--accent);border-color:var(--accent)}
.av-marca .sm{display:flex;flex-direction:column;gap:3px}

/* ------------------------------------------------------- lista de avisos */
.av-lista{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.av-item{display:flex;flex-direction:column;gap:4px;padding:11px 13px;
  border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:var(--r-sm);
  background:var(--surface);transition:border-color .16s ease, transform .16s ease}
.av-item:hover{transform:translateY(-1px)}
.av-item.no-ar{border-left-color:var(--ok)}
.av-item.rascunho{border-left-color:var(--warn)}
.av-item.fora{border-left-color:var(--line2);opacity:.66}
.av-item-topo{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.av-resumo{line-height:1.5}
.av-item-acoes{gap:7px;margin-top:7px;flex-wrap:wrap}

.av-leituras{display:flex;flex-direction:column;gap:6px;margin-top:8px;
  max-height:320px;overflow:auto}
.av-leitura{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.av-leitura-txt{display:flex;flex-direction:column;gap:1px;min-width:0}

/* ------------------------------------------------------ contas e senhas */
.av-contas{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.av-conta{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  transition:border-color .16s ease}
.av-conta.aberta{border-color:var(--accent)}
.av-conta-topo{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.av-conta-topo:hover{background:var(--accent-soft)}
.av-conta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.av-conta-seta{flex:none;color:var(--muted);display:flex;transition:transform .18s ease}
.av-conta.aberta .av-conta-seta{transform:rotate(180deg)}
.av-conta-corpo{padding:0 12px 12px;display:flex;flex-direction:column;gap:11px}
.av-conta-blocos{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.av-bloco{display:flex;flex-direction:column;gap:7px;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface2)}
.av-bloco .xs{line-height:1.5}
.av-id{opacity:.75;word-break:break-all}

/* A senha provisória aparece uma vez. O destaque é para ela ser copiada
   agora, e não procurada depois: depois ela não existe mais em lugar
   nenhum.                                                                */
.av-provisoria .av-senha{display:block;margin:8px 0;padding:9px 12px;
  border:1px dashed var(--crit);border-radius:var(--r-sm);background:var(--surface);
  font-size:17px;letter-spacing:.06em;color:var(--ink);user-select:all}

@media (max-width:1000px){
  .av-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .av-datas{grid-template-columns:1fr}
  .av-conta-blocos{grid-template-columns:1fr}
  .av-item-acoes .btn{flex:1;justify-content:center}
}
/* ===== BLUEJUS: FIM DO CSS DOS AVISOS E CONTAS ===== */

/* ===== BLUEJUS: CSS DAS GRADES VIVAS ===== */
/* A grade de cartões ganha a mesma entrada dos painéis e passa a responder ao
   cursor. Ver o cabeçalho de animar-cartoes.py para o porquê de cada limite. */

/* ------------------------------------------- a escada de entrada da grade */
.pv-entrando .content .grid > .card,
.pv-entrando .content .split > .card,
.pv-entrando .content .stack > .card{
  animation:pv-cartao .44s cubic-bezier(.2,.85,.3,1) both;
}
.pv-entrando .content .grid > .card:nth-child(1){ animation-delay:.04s }
.pv-entrando .content .grid > .card:nth-child(2){ animation-delay:.08s }
.pv-entrando .content .grid > .card:nth-child(3){ animation-delay:.12s }
.pv-entrando .content .grid > .card:nth-child(4){ animation-delay:.16s }
.pv-entrando .content .grid > .card:nth-child(5){ animation-delay:.19s }
.pv-entrando .content .grid > .card:nth-child(6){ animation-delay:.22s }
.pv-entrando .content .grid > .card:nth-child(7){ animation-delay:.25s }
.pv-entrando .content .grid > .card:nth-child(8){ animation-delay:.27s }
.pv-entrando .content .grid > .card:nth-child(9){ animation-delay:.29s }
.pv-entrando .content .grid > .card:nth-child(10){ animation-delay:.31s }
.pv-entrando .content .grid > .card:nth-child(11){ animation-delay:.33s }
.pv-entrando .content .grid > .card:nth-child(n+12){ animation-delay:.35s }

/* ----------------------------------------------- o cartão fora do repouso */
/* O fio de cor nasce no meio e abre para os lados ao passar o cursor. Em
   repouso ele não existe, para que doze cartões não virem doze tarjas.    */
.content .grid > .card,
.content .split > .card{
  position:relative;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s ease, border-color .2s ease;
}
.content .grid > .card::before{
  content:""; position:absolute; left:50%; right:50%; top:-1px; height:2px;
  background:var(--accent); border-radius:2px; opacity:0;
  transition:left .22s cubic-bezier(.2,.85,.3,1), right .22s cubic-bezier(.2,.85,.3,1), opacity .18s ease;
}
.content .grid > .card:hover{
  transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 13%, transparent);
}
.content .grid > .card:hover::before{ left:0; right:0; opacity:1 }
.content .grid > .card:active{ transform:translateY(-1px) }

/* O botão de dentro não herda o movimento do cartão: dois elementos subindo
   ao mesmo tempo, um dentro do outro, embaralham o ponto de clique.      */
.content .grid > .card .btn{ transition:background .12s, border-color .12s, transform .12s }
.content .grid > .card:hover .btn-primary{ box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent) }

/* A etiqueta de categoria acompanha, de leve. */
.content .grid > .card .tag{ transition:background .18s ease, color .18s ease }
.content .grid > .card:hover .tag{ background:var(--accent-soft); color:var(--accent-strong) }

/* --------------------------------------------------- a linha da tabela */
/* Um fio na margem esquerda, em vez de pintar a linha inteira: diz onde o
   cursor está sem competir com o que está escrito nela.                 */
.content .tbl tbody tr.clickable{ position:relative }
.content .tbl tbody tr.clickable td:first-child{
  box-shadow:inset 3px 0 0 transparent; transition:box-shadow .16s ease;
}
.content .tbl tbody tr.clickable:hover td:first-child{ box-shadow:inset 3px 0 0 var(--accent) }

/* A linha marcada por seleção já tem cor própria; o fio dela é o do selo,
   para que selecionar e apenas passar o cursor não se confundam.        */
.content .tbl tbody tr.marcada td:first-child{ box-shadow:inset 3px 0 0 var(--seal) }

@media (prefers-reduced-motion: reduce){
  .pv-entrando .content .grid > .card,
  .pv-entrando .content .split > .card,
  .pv-entrando .content .stack > .card{ animation:none !important; opacity:1; transform:none }
  .content .grid > .card:hover,
  .content .grid > .card:active{ transform:none }
  .content .grid > .card::before{ transition:opacity .18s ease }
}
/* ===== BLUEJUS: FIM DO CSS DAS GRADES VIVAS ===== */

/* ===== BLUEJUS: CSS DO CARTAO QUE LEVA ===== */
/* O cartão de número que tem destino vira botão. Como botão, precisa perder
   a aparência de botão do navegador e manter a do cartão: mesma caixa, mesmo
   texto, alinhado à esquerda.                                            */
.kpi-liga{ font:inherit; color:inherit; text-align:left; width:100%;
  display:flex; flex-direction:column; gap:3px; cursor:pointer; position:relative }
.kpi-liga .kpi-label,.kpi-liga .kpi-val,.kpi-liga .kpi-delta{ pointer-events:none }

/* A seta só aparece com o cursor em cima, e é o que diz "isto leva a algum
   lugar" sem poluir oito cartões com oito setas em repouso.              */
.kpi-seta{ position:absolute; right:12px; top:50%; display:flex; color:var(--accent);
  transform:translateY(-50%) rotate(-90deg) translateX(3px); opacity:0;
  transition:opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.3) }
.kpi-liga:hover .kpi-seta,.kpi-liga:focus-visible .kpi-seta{
  opacity:1; transform:translateY(-50%) rotate(-90deg) translateX(0) }

/* O foco pelo teclado precisa ser visível: quem chega aqui pelo Tab não tem
   o cursor para saber onde está.                                         */
.kpi-liga:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Espaço à direita para a seta não passar por cima do número. */
.kpi-liga .kpi-val{ padding-right:16px }

@media (prefers-reduced-motion: reduce){
  .kpi-seta{ transition:opacity .18s ease; transform:translateY(-50%) rotate(-90deg) }
  .kpi-liga:hover .kpi-seta,.kpi-liga:focus-visible .kpi-seta{
    transform:translateY(-50%) rotate(-90deg) }
}
/* ===== BLUEJUS: FIM DO CSS DO CARTAO QUE LEVA ===== */
/* ===== BLUEJUS: CSS DO TRACO DO CURSOR ===== */
/* A camada de tinta cobre a área da capa inteira e não recebe evento nenhum.
   Essa é a regra que importa aqui: a tela de entrada existe para levar a
   pessoa a criar conta ou entrar, e enfeite que engole clique custa cliente. */
/* A área ganha contexto de empilhamento próprio, e é isso que permite pôr a
   tinta ATRÁS do conteúdo sem encostar em nenhum filho.

   A primeira versão fazia o contrário: empurrava todo filho para z-index 2 com
   um seletor universal. O efeito colateral apareceu na tela de entrar, e foi
   grave: os dois brilhos decorativos do painel eram `position:absolute`, a
   regra os tornou `relative`, e eles voltaram ao fluxo com quatrocentos e
   quinhentos pixels de altura cada um. O painel, que ocupava a janela, passou
   a ter mil e setecentos pixels, e a tela ganhou uma rolagem inteira de espaço
   vazio.

   A lição fica registrada aqui porque ela se repete: seletor universal que
   mexe em `position` quebra todo filho que dependia de posicionamento, e o
   estrago aparece longe de onde a regra foi escrita.                     */
.pincel-area{ position:relative; isolation:isolate }
canvas.pincel{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:-1;
  /* --pincel-cor é lida pelo desenho. Fica no CSS para acompanhar o fundo
     de cada tela sem que o código precise saber de cor nenhuma.        */
  --pincel-cor:255,255,255;
  /* A tinta clareia o fundo escuro em vez de pintar por cima dele: numa
     capa azul, tinta branca chapada parece adesivo, e clarear parece
     tinta.                                                             */
  mix-blend-mode:screen; opacity:.9;
}

@media (prefers-reduced-motion: reduce){
  canvas.pincel{ display:none }
}
/* ===== BLUEJUS: FIM DO CSS DO TRACO DO CURSOR ===== */
/* ===== BLUEJUS: CSS DOS CARTOES DA CAPA ===== */
/* Os painéis da capa e das telas de entrada respondem ao cursor.

   A capa é a única tela em que a pessoa ainda não decidiu nada, e é onde o
   movimento tem função: ele diz que a página está viva e convida a percorrer
   os cartões em vez de passar direto. Dentro do sistema o critério é o
   oposto, e por isso lá o efeito é bem mais contido: quem está trabalhando
   não quer a tela reagindo a cada passagem do cursor.

   Quatro camadas, e cada uma some junto com o cursor:

     1. O cartão sobe e ganha sombra.
     2. Um fio de cor abre do centro para os lados, no alto.
     3. Um brilho suave segue o cursor por dentro do cartão. É ele que dá a
        impressão de superfície, e não de retângulo pintado. A posição vem do
        JavaScript, em --mx e --my; sem ele o brilho fica no meio, que é um
        estado válido e não quebra nada.
     4. O ícone cresce um fio e ganha halo.                               */

/* A elevação usa `translate`, e não `transform`.

   A capa já tem uma revelação ao rolar que anima `transform` dos cartões, e
   ela vence esta regra por especificidade. O resultado era um cartão que
   acendia o brilho e não subia: metade do efeito, sem erro aparente em
   lugar nenhum. `translate` é propriedade independente, compõe com o
   `transform` da revelação e não disputa com ela.                      */
.ent .card,
.auth-wrap .card{
  /* `isolation` cria contexto de empilhamento próprio, e é o que permite pôr
     o brilho atrás do conteúdo sem mexer em nenhum filho. Empurrar os filhos
     para uma camada acima com seletor universal já quebrou a tela de entrar
     uma vez: ver a nota em pincel.css.                                  */
  position:relative; overflow:hidden; isolation:isolate;
  transition:translate .24s cubic-bezier(.2,.9,.3,1.2), box-shadow .24s ease,
             border-color .24s ease;
}

/* 3. o brilho que segue o cursor */
.ent .card::before,
.auth-wrap .card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  opacity:0; transition:opacity .24s ease;
}
.ent .card:hover::before,
.auth-wrap .card:hover::before{ opacity:1 }

/* 2. o fio de cor no alto */
.ent .card::after,
.auth-wrap .card::after{
  content:""; position:absolute; left:50%; right:50%; top:0; height:2px; z-index:1;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 35%, transparent), var(--accent),
    color-mix(in srgb, var(--accent) 35%, transparent));
  opacity:0; pointer-events:none;
  transition:left .26s cubic-bezier(.2,.85,.3,1), right .26s cubic-bezier(.2,.85,.3,1),
             opacity .2s ease;
}
.ent .card:hover::after,
.auth-wrap .card:hover::after{ left:0; right:0; opacity:1 }

/* 1. a elevação */
.ent .card:hover,
.auth-wrap .card:hover{
  translate:0 -4px; border-color:var(--accent);
  box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 16%, transparent);
}
.ent .card:active,
.auth-wrap .card:active{ translate:0 -1px }

/* 4. o ícone */
.ent .card svg,
.auth-wrap .card svg{ transition:transform .24s cubic-bezier(.2,.9,.3,1.3), filter .24s ease }
.ent .card:hover svg,
.auth-wrap .card:hover svg{
  transform:scale(1.14);
  filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent));
}

/* O título acompanha de leve. Mais do que isto e o texto começa a dançar
   debaixo do olho de quem está lendo.                                    */
.ent .card:hover b,
.auth-wrap .card:hover b{ letter-spacing:.006em }
.ent .card b,
.auth-wrap .card b{ transition:letter-spacing .24s ease }

/* Cartão que já é um link ou botão ganha o cursor certo; o que é só leitura
   não finge que leva a lugar nenhum.                                     */
.ent .card:has(a[href]),
.ent .card:has(button){ cursor:default }

@media (prefers-reduced-motion: reduce){
  .ent .card,.auth-wrap .card,
  .ent .card svg,.auth-wrap .card svg,
  .ent .card b,.auth-wrap .card b{ transition:none }
  .ent .card:hover,.auth-wrap .card:hover,
  .ent .card:active,.auth-wrap .card:active{ translate:none }
  .ent .card:hover svg,.auth-wrap .card:hover svg{ transform:none; filter:none }
  .ent .card::before,.auth-wrap .card::before{ display:none }
}
/* ===== BLUEJUS: FIM DO CSS DOS CARTOES DA CAPA ===== */
/* ===== BLUEJUS: CSS DO CANCELAR ENVIO ===== */
/* A caixa de cancelamento entra em etapas: o fundo escurece e desfoca, a
   caixa sobe com leve elasticidade, o ícone da folha se desenha e é riscado,
   a barra mostra quanto do envio já foi assinado e as partes do formulário
   aparecem uma depois da outra. Tudo isso acontece uma vez, na abertura:
   a tela é redesenhada a cada tecla, e a classe canc-calmo desliga a
   entrada depois do primeiro instante.                                    */

.canc-overlay{align-items:center;background:rgba(14,24,34,.46);
  -webkit-backdrop-filter:blur(5px) saturate(1.1);backdrop-filter:blur(5px) saturate(1.1)}
.canc-overlay:not(.canc-calmo){animation:canc-fundo .32s ease-out both}
@keyframes canc-fundo{from{background:rgba(14,24,34,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}

.canc-modal{max-width:520px;position:relative;isolation:isolate;border-radius:14px;
  box-shadow:0 24px 60px -18px rgba(12,22,32,.45),0 2px 6px rgba(12,22,32,.12)}
/* Fio de cor no alto: o crítico do sistema correndo para o acento. */
.canc-modal::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--crit),color-mix(in srgb,var(--crit) 40%,var(--accent)),var(--crit));
  background-size:200% 100%}
.canc-overlay:not(.canc-calmo) .canc-modal::before{animation:canc-fio 1.6s ease-in-out both}
@keyframes canc-fio{from{background-position:100% 0;opacity:.2}to{background-position:0 0;opacity:1}}

.canc-overlay:not(.canc-calmo) .canc-modal:not(.canc-feito){animation:canc-subir .52s cubic-bezier(.2,1.25,.35,1) both}
@keyframes canc-subir{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ topo */
.canc-topo{display:flex;align-items:center;gap:14px;padding:20px 20px 14px}
.canc-topo-txt{flex:1;min-width:0}
.canc-topo-txt h3{margin:2px 0 0;font-size:18px}
.canc-icone{position:relative;flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:var(--crit-soft);color:var(--crit);overflow:hidden}
.canc-icone svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.canc-folha,.canc-dobra{stroke-dasharray:90;stroke-dashoffset:0}
.canc-risco{stroke-width:2.6;stroke-dasharray:40;stroke-dashoffset:0}
.canc-overlay:not(.canc-calmo) .canc-folha{animation:canc-traco .7s .12s ease-out both}
.canc-overlay:not(.canc-calmo) .canc-dobra{animation:canc-traco .4s .5s ease-out both}
.canc-overlay:not(.canc-calmo) .canc-risco{animation:canc-riscar .38s .78s cubic-bezier(.5,0,.2,1) both}
@keyframes canc-traco{from{stroke-dashoffset:90}}
@keyframes canc-riscar{from{stroke-dashoffset:40}}
/* Varredura de leitura: uma faixa de luz atravessa o ícone uma vez. */
.canc-icone::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0}
.canc-overlay:not(.canc-calmo) .canc-icone::after{animation:canc-varrer .9s 1.05s ease-in-out both}
@keyframes canc-varrer{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:130%;opacity:0}}

/* ------------------------------------------------------------ corpo */
.canc-corpo{padding:0 20px 6px;display:flex;flex-direction:column;gap:14px}
.canc-overlay:not(.canc-calmo) .canc-passo{animation:canc-passo .42s calc(.18s + var(--p,0) * 70ms) ease-out both}
@keyframes canc-passo{from{opacity:0;transform:translateY(8px)}}

.canc-doc{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:color-mix(in srgb,var(--surface) 92%,var(--crit-soft))}
.canc-doc-nome{font-size:14px;word-break:break-word}

.canc-balanco{display:flex;flex-direction:column;gap:9px}
.canc-barra{height:7px;border-radius:99px;background:color-mix(in srgb,var(--crit) 22%,var(--line));overflow:hidden}
.canc-barra i{display:block;height:100%;width:var(--larg);border-radius:inherit;
  background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 70%,#fff))}
.canc-overlay:not(.canc-calmo) .canc-barra i{animation:canc-encher .9s .35s cubic-bezier(.3,.9,.3,1) both}
@keyframes canc-encher{from{width:0}}
.canc-linhas{display:flex;flex-direction:column;gap:6px;font-size:13px}
.canc-linhas > span{display:flex;gap:8px;align-items:flex-start}
.canc-linhas > span > svg{flex:none;margin-top:2px}
.canc-fica{color:var(--ok)} .canc-fica span{color:var(--ink)}
.canc-morre{color:var(--crit)} .canc-morre span{color:var(--ink)}

.canc-campo{display:flex;flex-direction:column;gap:7px}
.canc-campo > label{font-size:13px;font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.canc-campo textarea,.canc-campo input{width:100%;box-sizing:border-box;font:inherit;font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 11px;resize:vertical;
  transition:border-color .18s,box-shadow .18s}
.canc-campo textarea:focus,.canc-campo input:focus{outline:none;border-color:var(--crit);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 18%,transparent)}
.canc-chips{display:flex;flex-wrap:wrap;gap:6px}
.canc-chip{font:inherit;font-size:12px;line-height:1.25;text-align:left;cursor:pointer;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 11px;
  transition:border-color .16s,background .16s,translate .16s}
.canc-chip:hover{border-color:var(--crit);translate:0 -1px}
.canc-chip.on{background:var(--crit-soft);border-color:var(--crit);color:var(--crit)}
.canc-conta{font-size:11.5px;color:var(--muted);text-align:right;transition:color .2s}
.canc-conta.ok{color:var(--ok)}

.canc-marca{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:10px 12px;border-radius:10px;
  border:1px dashed var(--line);transition:border-color .16s,background .16s}
.canc-marca:hover{border-color:var(--accent)}
.canc-marca > span:last-child{display:flex;flex-direction:column;gap:2px}
.canc-quadro{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:12px;line-height:1;color:#fff;transition:background .18s,border-color .18s,transform .18s}
.canc-quadro.on{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}

.canc-mt{margin-top:12px}
.canc-erro{animation:canc-passo .3s ease-out both}

/* ------------------------------------------------------------ ações */
.canc-acoes{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px 18px;flex-wrap:wrap}
.btn.canc-perigo{background:var(--crit);border-color:var(--crit);color:#fff;display:inline-flex;align-items:center;gap:7px;
  transition:filter .16s,box-shadow .2s,opacity .2s}
.btn.canc-perigo:not([disabled]):hover{filter:brightness(1.07);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--crit) 70%,transparent)}
.btn.canc-perigo[disabled]{opacity:.5;cursor:not-allowed}
.canc-giro{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:canc-girar .7s linear infinite}
@keyframes canc-girar{to{transform:rotate(360deg)}}

/* Senha recusada: a caixa balança uma vez, como quem diz "não". */
.canc-tremer{animation:canc-tremer .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes canc-tremer{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* ------------------------------------------------------------ concluído */
.canc-feito{text-align:center;padding:28px 22px 4px}
.canc-feito:not(.canc-calmo){animation:canc-pulo .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes canc-pulo{from{transform:scale(.94);opacity:.4}}
.canc-selo{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,var(--crit-soft) 58%,transparent 60%)}
.canc-selo svg{width:64px;height:64px;fill:none;stroke:var(--crit);stroke-width:3;stroke-linecap:round}
.canc-anel{stroke-dasharray:170;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center}
.canc-x1,.canc-x2{stroke-dasharray:26;stroke-dashoffset:0}
.canc-feito:not(.canc-calmo) .canc-anel{animation:canc-anel .6s .05s ease-out both}
.canc-feito:not(.canc-calmo) .canc-x1{animation:canc-x .26s .55s ease-out both}
.canc-feito:not(.canc-calmo) .canc-x2{animation:canc-x .26s .72s ease-out both}
@keyframes canc-anel{from{stroke-dashoffset:170}}
@keyframes canc-x{from{stroke-dashoffset:26}}
.canc-titulo-feito{margin:0 0 4px;font-size:19px}
.canc-feito .canc-doc-nome{margin:0 0 8px;color:var(--muted)}
.canc-resultado{margin:0 auto;max-width:400px;font-size:13.5px;line-height:1.5}
.canc-acoes-feito{justify-content:center;padding-top:18px}

/* ------------------------------------------------------------ menu da linha */
.canc-menu-caixa{position:relative;display:inline-block}
.canc-menu-botao svg{fill:currentColor}
.canc-menu-botao.on{background:var(--accent-soft,var(--neutral-soft));color:var(--accent)}
.canc-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:224px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-lg);
  transform-origin:top right;animation:canc-menu .2s cubic-bezier(.2,1.2,.4,1) both;text-align:left}
@keyframes canc-menu{from{opacity:0;transform:scale(.92) translateY(-4px)}}
.canc-menu button{display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:13px;color:var(--ink);
  background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left;white-space:nowrap;
  transition:background .14s,padding-left .14s}
.canc-menu button:hover{background:var(--neutral-soft);padding-left:13px}
.canc-menu button.canc-menu-perigo{color:var(--crit)}
.canc-menu button.canc-menu-perigo:hover{background:var(--crit-soft)}
.canc-menu-linha{height:1px;background:var(--line);margin:5px 4px}
.tbl td .canc-menu-caixa{margin-left:4px;vertical-align:middle}

@media (max-width:560px){
  .canc-overlay{align-items:flex-end;padding:0}
  .canc-modal{border-radius:16px 16px 0 0;max-width:none}
  .canc-acoes{justify-content:stretch}
  .canc-acoes .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .canc-overlay *,.canc-overlay,.canc-menu{animation:none !important;transition:none !important}
}
/* ===== BLUEJUS: FIM DO CSS DO CANCELAR ENVIO ===== */
/* ===== BLUEJUS: CSS DO ENVIO APRIMORADO ===== */
/* Prioridade em trilho deslizante, modelos em cartões, reconhecimento de
   conta com radar enquanto consulta e selo quando a conta é validada, e o
   voo do documento enquanto o servidor trabalha.                        */

/* ---------------------------------------------------------- prioridade */
.envx-prio-caixa{display:flex;flex-direction:column;gap:6px}
.envx-prio{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:11px;
  background:var(--surface2,var(--neutral-soft));border:1px solid var(--line);isolation:isolate}
.envx-prio-trilho{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);
  border-radius:8px;background:var(--surface);box-shadow:0 2px 8px -3px rgba(12,22,32,.3);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .38s cubic-bezier(.3,1.35,.45,1),background .3s}
.envx-prio[data-nivel="alta"] .envx-prio-trilho{background:color-mix(in srgb,var(--warn,#C98A12) 14%,var(--surface))}
.envx-prio[data-nivel="urgente"] .envx-prio-trilho{background:color-mix(in srgb,var(--crit) 14%,var(--surface))}
.envx-prio-op{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;border-radius:8px;padding:7px 6px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .2s}
.envx-prio-op.on{color:var(--ink);font-weight:600}
.envx-prio-ponto{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.envx-prio-ponto.p-normal{background:var(--ok)}
.envx-prio-ponto.p-alta{background:var(--warn,#C98A12)}
.envx-prio-ponto.p-urgente{background:var(--crit)}
.envx-prio-op.on .envx-prio-ponto.p-urgente{animation:envx-pulso 1.4s ease-in-out infinite}
@keyframes envx-pulso{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--crit) 55%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--crit) 0%,transparent)}}
.envx-prio-nota{min-height:2.4em}

/* -------------------------------------------------------------- modelos */
.envx-modelos{display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface) 60%)}
.envx-modelos-topo{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.envx-modelos-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--accent-soft);color:var(--accent)}
.envx-modelos-tit{flex:1;min-width:180px;display:flex;flex-direction:column;gap:1px}
.envx-salvar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;animation:envx-surgir .3s ease-out both}
.envx-salvar .input{flex:1;min-width:220px}
.envx-salvar-nota{flex-basis:100%}
.envx-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.envx-modelo{position:relative;display:flex;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  overflow:hidden;animation:envx-surgir .34s calc(var(--n,0) * 45ms) ease-out both;transition:border-color .16s,translate .18s,box-shadow .18s}
.envx-modelo:hover{border-color:var(--accent);translate:0 -2px;box-shadow:0 8px 18px -12px rgba(12,22,32,.45)}
.envx-modelo-usar{flex:1;text-align:left;font:inherit;color:var(--ink);background:none;border:0;padding:9px 11px;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.envx-modelo-usar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envx-modelo-x{flex:none;width:30px;background:none;border:0;border-left:1px solid var(--line);color:var(--muted);cursor:pointer;
  display:grid;place-items:center;transition:color .15s,background .15s}
.envx-modelo-x:hover{color:var(--crit);background:var(--crit-soft)}
.envx-vazio{margin:0}
.envx-recado{animation:envx-surgir .3s ease-out both}
@keyframes envx-surgir{from{opacity:0;transform:translateY(6px)}}

/* Partes chegando depois de aplicar um modelo. */
.env-parte.envx-chegou{animation:envx-chegou .55s calc(var(--n,0) * 70ms) cubic-bezier(.2,1.2,.4,1) both}
@keyframes envx-chegou{0%{opacity:0;transform:translateX(-14px)}
  60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}100%{opacity:1;transform:none}}

/* -------------------------------------------------- reconhecer contas */
.envx-conta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px;padding:8px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface2,var(--neutral-soft));animation:envx-surgir .28s ease-out both}
.envx-conta-ic{display:grid;place-items:center;color:var(--muted)}
.envx-conta-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.envx-tem{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.envx-validada{background:linear-gradient(100deg,color-mix(in srgb,var(--info) 10%,var(--surface)),var(--surface));
  border-color:color-mix(in srgb,var(--info) 45%,var(--line));position:relative;overflow:hidden}
.envx-validada::after{content:"";position:absolute;inset:0 auto 0 -40%;width:35%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);
  animation:envx-brilho 1.1s .15s ease-in-out both}
@keyframes envx-brilho{to{left:120%}}
.envx-selo-rot{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--info);
  padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--info) 14%,transparent)}
.envx-selo-mini{display:inline-grid;vertical-align:-2px;margin-left:4px}
.envx-ex{font-size:10.5px}
.envx-radar{position:relative;width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.envx-radar::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);
  animation:canc-girar-envx .8s linear infinite}
@keyframes canc-girar-envx{to{transform:rotate(360deg)}}

/* --------------------------------------------------------- o voo */
.envx-voo{padding:22px 20px 16px;display:flex;flex-direction:column;gap:16px;animation:envx-surgir .3s ease-out both}
.envx-voo-cena{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;min-height:92px}
.envx-voo-doc{position:relative;width:52px;height:62px;display:grid;place-items:center;border-radius:10px;overflow:hidden;
  background:var(--accent-soft);color:var(--accent)}
.envx-voo-doc svg{width:34px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.envx-voo-lin{stroke-dasharray:60;animation:envx-linhas 1.2s ease-in-out infinite alternate}
@keyframes envx-linhas{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.envx-voo-scan{position:absolute;left:0;right:0;height:3px;top:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 10px var(--accent);animation:envx-scan 1.3s ease-in-out infinite}
@keyframes envx-scan{0%{top:6%}50%{top:90%}100%{top:6%}}
.envx-voo-rota{position:relative;height:70px}
.envx-voo-rota svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.envx-voo-trilha{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:2;stroke-dasharray:5 6;
  animation:envx-trilha 1s linear infinite}
@keyframes envx-trilha{to{stroke-dashoffset:-22}}
.envx-voo-aviao{position:absolute;left:0;top:0;width:26px;height:26px;color:var(--accent);
  offset-path:path("M4 50 C 60 -10, 140 -10, 196 30");offset-rotate:auto;animation:envx-voar 1.6s cubic-bezier(.45,.05,.4,1) infinite}
.envx-voo-aviao svg{width:100%;height:100%;fill:color-mix(in srgb,var(--accent) 18%,var(--surface));stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
@keyframes envx-voar{0%{offset-distance:0%;opacity:0;scale:.6}12%{opacity:1;scale:1}88%{opacity:1}100%{offset-distance:100%;opacity:0;scale:.7}}
@supports not (offset-path:path("M0 0")){
  .envx-voo-aviao{top:22px;animation:envx-voar-reto 1.6s ease-in-out infinite}
  @keyframes envx-voar-reto{from{left:0;opacity:0}20%{opacity:1}to{left:calc(100% - 26px);opacity:0}}
}
.envx-voo-partes{display:flex;flex-direction:column;gap:6px}
.envx-voo-parte{display:flex;align-items:center;gap:7px;animation:envx-surgir .3s calc(var(--n) * 90ms) ease-out both}
.envx-voo-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  background:var(--neutral-soft);color:var(--muted);border:2px solid var(--line);
  animation:envx-acender 1.6s calc(.9s + var(--n) * 220ms) ease-in-out infinite}
@keyframes envx-acender{0%,100%{background:var(--neutral-soft);border-color:var(--line);color:var(--muted)}
  30%,60%{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}}
.envx-voo-etapas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.envx-voo-etapas li{font-size:13px;display:flex;align-items:center;gap:8px;opacity:.35;
  animation:envx-etapa .45s calc(.25s + var(--n) * 520ms) ease-out forwards}
.envx-voo-etapas li::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;border:2px solid var(--line);
  animation:envx-etapa-bola .45s calc(.25s + var(--n) * 520ms) ease-out forwards}
@keyframes envx-etapa{to{opacity:1}}
@keyframes envx-etapa-bola{to{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface)}}
.envx-voo-nota{margin:0;text-align:center}

@media (max-width:560px){
  .envx-voo-cena{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  .envx-voo-partes{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .envx-voo *,.envx-modelo,.envx-conta,.envx-validada::after,.env-parte.envx-chegou,.envx-prio-trilho,.envx-salvar,.envx-recado{animation:none !important;transition:none !important}
  .envx-voo-etapas li{opacity:1}
}
/* ===== BLUEJUS: FIM DO CSS DO ENVIO APRIMORADO ===== */
/* ===== BLUEJUS: CSS DA FICHA CADASTRAL ===== */
.fic{display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.fic::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent))}
.fic.fic-ok::before{background:linear-gradient(180deg,var(--ok),color-mix(in srgb,var(--ok) 20%,transparent))}
.fic-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fic-topo-txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.fic-ic{position:relative;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;overflow:hidden;
  background:var(--accent-soft);color:var(--accent)}
.fic-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fic-scan{position:absolute;left:4px;right:4px;height:2px;top:8px;background:var(--accent);box-shadow:0 0 8px var(--accent);
  opacity:.8;animation:fic-scan 2.4s ease-in-out infinite}
@keyframes fic-scan{0%,100%{top:8px;opacity:0}15%{opacity:.85}50%{top:32px;opacity:.85}85%{opacity:0}}
.fic-grupo{display:flex;flex-direction:column;gap:8px}
.fic-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fic-campo{display:grid;grid-template-rows:1fr auto;gap:5px;min-width:0}
.fic-l2{grid-column:span 2}
.fic-rot{align-self:end;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap}
.fic-origem{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:99px;letter-spacing:.02em}
.o-doc{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.o-resid{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.o-conta{background:var(--neutral-soft);color:var(--muted)}
.o-dig{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.fic-campo .input{width:100%;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background .4s}
.fic-lido .input{animation:fic-lido 1.2s ease-out both}
@keyframes fic-lido{0%{background:color-mix(in srgb,var(--info) 22%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--info) 25%,transparent)}
  100%{background:var(--surface);box-shadow:none}}
.fic-erro .input{border-color:var(--crit);box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 16%,transparent)}
.fic-nota{margin:0}
.fic-acoes{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.fic-recado{animation:fic-surgir .3s ease-out both}
@keyframes fic-surgir{from{opacity:0;transform:translateY(6px)}}
@media (max-width:420px){ .fic-grade{grid-template-columns:1fr} .fic-l2{grid-column:auto} }
@media (prefers-reduced-motion:reduce){ .fic *{animation:none !important} }
/* ===== BLUEJUS: FIM DO CSS DA FICHA CADASTRAL ===== */
/* ===== BLUEJUS: CSS DOS ATOS DA ADVOCACIA ===== */
.adv-linha{margin-top:8px;padding:10px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));animation:adv-surgir .3s ease-out both}
.adv-oab .xs{margin-top:4px;display:block;font-weight:400}
.adv-invalida .input{border-color:var(--warn,#C98A12)}
.adv-erro{color:var(--warn,#C98A12)}
.adv-rep{display:block}
@keyframes adv-surgir{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){ .adv-linha{animation:none} }
/* ===== BLUEJUS: FIM DO CSS DOS ATOS DA ADVOCACIA ===== */
/* ===== BLUEJUS: CSS DAS PASTAS NA LISTA DE COFRES ===== */
.cof-corpo.cof-corpo-cheio{grid-template-columns:minmax(0,1fr)}
.cof-seta{flex:none;width:14px;display:inline-grid;place-items:center;color:var(--muted);font-size:11px;
  transition:transform .22s cubic-bezier(.3,1.3,.5,1)}
.cof-seta.on{transform:rotate(90deg);color:var(--accent)}
.cof-sub{margin:2px 8px 8px 22px;padding:4px 0 4px 8px;border-left:2px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  display:flex;flex-direction:column;gap:1px;animation:cof-abrir .26s ease-out both;transform-origin:top}
.cof-sub .cof-pasta{font-size:13px}
.cof-sub-item{animation:cof-ramo .3s calc(var(--n,0) * 40ms) ease-out both}
.cof-sub-vazio{padding:6px 8px;margin:0}
@keyframes cof-abrir{from{opacity:0;transform:scaleY(.85)}}
@keyframes cof-ramo{from{opacity:0;transform:translateX(-6px)}}
@media (prefers-reduced-motion:reduce){ .cof-sub,.cof-sub-item{animation:none} .cof-seta{transition:none} }
/* ===== BLUEJUS: FIM DO CSS DAS PASTAS NA LISTA DE COFRES ===== */
/* ===== BLUEJUS: CSS DO APOIO QUE ALTERNA ===== */
/* O texto do botão de apoio alterna, devagar, entre "Apoie o BlueJus" e
   "Advogado". Os dois ocupam a mesma célula, e a largura é a do mais longo:
   o botão não muda de tamanho a cada troca, e nada ao lado dele se mexe. */
.ab-troca{display:inline-grid;align-items:center}
.ab-troca > span{grid-area:1 / 1;white-space:nowrap;text-align:center;will-change:opacity,transform}
.ab-troca .ab-t1{animation:ab-t1 12s ease-in-out infinite}
.ab-troca .ab-t2{opacity:0;animation:ab-t2 12s ease-in-out infinite}
@keyframes ab-t1{0%,40%{opacity:1;transform:none;filter:none}
  48%,92%{opacity:0;transform:translateY(-3px);filter:blur(1.5px)}
  100%{opacity:1;transform:none;filter:none}}
@keyframes ab-t2{0%,44%{opacity:0;transform:translateY(3px);filter:blur(1.5px)}
  52%,86%{opacity:1;transform:none;filter:none}
  94%,100%{opacity:0;transform:translateY(-3px);filter:blur(1.5px)}}
.ab-apoio:hover .ab-troca > span,.ab-apoio:focus-visible .ab-troca > span{animation-play-state:paused}
.ab-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .ab-troca .ab-t1{animation:none;opacity:1}
  .ab-troca .ab-t2{animation:none;opacity:0}
}
/* ===== BLUEJUS: FIM DO CSS DO APOIO QUE ALTERNA ===== */
/* ===== BLUEJUS: CSS DO PERFIL EM CARTAO ===== */
.pfv{position:relative;container-type:inline-size;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;
  animation:pfv-entra .45s cubic-bezier(.2,1,.3,1) both}
@keyframes pfv-entra{from{opacity:0;transform:translateY(10px)}}

/* Capa: a faixa de cor do sistema, com painéis inclinados em tons de azul e
   um brilho que atravessa uma vez, na abertura.                          */
.pfv-capa{position:relative;height:118px;overflow:hidden;isolation:isolate;
  background:linear-gradient(115deg,#143A5E 0%,#1d4f86 55%,#2a6fb8 100%)}
.pfv-capa-faixa{position:absolute;top:-20%;bottom:-20%;transform:skewX(-14deg);z-index:0}
.pfv-capa-faixa.f1{right:22%;width:20%;background:rgba(255,255,255,.06);animation:pfv-faixa 1s .1s cubic-bezier(.2,1,.3,1) both}
.pfv-capa-faixa.f2{right:4%;width:17%;background:rgba(255,255,255,.1);animation:pfv-faixa 1s .22s cubic-bezier(.2,1,.3,1) both}
.pfv-capa-faixa.f3{right:-6%;width:12%;background:rgba(143,203,236,.22);animation:pfv-faixa 1s .34s cubic-bezier(.2,1,.3,1) both}
@keyframes pfv-faixa{from{opacity:0;translate:60px 0}}
.pfv-capa-brilho{position:absolute;inset:0 auto 0 -45%;width:35%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);
  animation:pfv-brilho 1.6s .5s ease-in-out both}
@keyframes pfv-brilho{to{left:130%}}
.pfv:hover .pfv-capa-faixa.f3{background:rgba(143,203,236,.3);transition:background .5s}

/* Cabeça: a foto sobre a capa, o nome, a linha de cargo e cidade. */
.pfv-cabeca{display:flex;align-items:flex-end;gap:6px 16px;padding:0 22px;position:relative;z-index:2;flex-wrap:wrap}
.pfv-foto{position:relative;width:96px;height:96px;flex:none;margin-top:-48px;border-radius:50%;padding:4px;background:var(--surface);
  box-shadow:0 8px 22px -10px rgba(12,22,32,.55);animation:pfv-foto .6s .15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pfv-foto{from{opacity:0;transform:scale(.7)}}
.pfv-foto img,.pfv-iniciais{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.pfv-iniciais{background:linear-gradient(135deg,var(--accent),#143A5E);color:#fff;font-size:30px;font-weight:700;letter-spacing:.02em}
.pfv-foto-trocar{position:absolute;inset:4px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(12,22,32,.5);opacity:0;transition:opacity .2s}
.pfv-foto:hover .pfv-foto-trocar,.pfv-foto-trocar:focus-within{opacity:1}
.pfv-selo{position:absolute;right:0;bottom:4px;width:28px;height:28px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(12,22,32,.25);animation:pfv-selo .5s .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pfv-selo{from{opacity:0;transform:scale(0) rotate(-40deg)}}
.pfv-giro{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:pfv-gira .8s linear infinite}
@keyframes pfv-gira{to{transform:rotate(360deg)}}
.pfv-id{flex:1;min-width:180px;padding-top:10px}
.pfv-nome{margin:0;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:.01em;text-transform:uppercase;animation:pfv-sobe .45s .2s ease-out both}
.pfv-sub{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:5px;font-size:13px;color:var(--muted);animation:pfv-sobe .45s .28s ease-out both}
.pfv-sub > span{display:inline-flex;align-items:center;gap:5px}
.pfv-selo-rot{font-size:11px;font-weight:600;padding:1px 8px;border-radius:99px;background:var(--neutral-soft)}
.pfv-selo-rot.s-identidade{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.pfv-selo-rot.s-contato{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.pfv-selo-rot.s-parcial{background:color-mix(in srgb,var(--warn,#C98A12) 14%,transparent);color:var(--warn,#C98A12)}
@keyframes pfv-sobe{from{opacity:0;transform:translateY(8px)}}
.pfv-editar{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;border-color:var(--accent);color:var(--accent);
  transition:background .2s,translate .2s}
.pfv-editar:hover{background:var(--accent-soft);translate:0 -1px}

.pfv-frase{display:flex;align-items:flex-start;gap:9px;margin:14px 22px 0;padding:10px 14px;border-radius:10px;font-size:14px;
  background:linear-gradient(90deg,var(--accent-soft),transparent);color:var(--ink);font-style:italic;animation:pfv-sobe .45s .34s ease-out both}
.pfv-frase .pfv-ic{flex:none;color:var(--accent);margin-top:2px}
.pfv-frase.vazia{font-style:normal}
.pfv-link{font:inherit;font-size:13px;text-align:left;background:none;border:0;padding:0;color:var(--accent);cursor:pointer}
.pfv-link:hover{text-decoration:underline}

/* Dados em duas colunas, cada um entrando em sequência. */
.pfv-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;margin:16px 22px 0;padding-top:14px;
  border-top:1px solid var(--line)}
.pfv-dado{display:grid;grid-template-columns:22px 104px minmax(0,1fr);align-items:center;gap:6px;padding:7px 8px;border-radius:8px;
  font-size:13px;animation:pfv-sobe .4s calc(.38s + var(--n) * 45ms) ease-out both;transition:background .18s}
.pfv-dado:hover{background:var(--surface2,var(--neutral-soft))}
.pfv-dado-ic{color:var(--accent);display:grid;place-items:center}
.pfv-dado-rot{font-weight:600}
.pfv-dado-val{min-width:0;display:flex;align-items:center;gap:6px}
.pfv-dado-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfv-dado-val .pf-tag{flex:none}

/* Quadros da OAB e de segurança. */
.pfv-quadro{margin:16px 22px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  animation:pfv-sobe .45s calc(.6s + var(--n) * 90ms) ease-out both;transition:box-shadow .25s,translate .25s,border-color .25s}
.pfv-quadro:last-child{margin-bottom:22px}
.pfv-quadro:hover{box-shadow:0 10px 26px -18px rgba(12,22,32,.5);translate:0 -2px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.pfv-quadro-topo{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--surface2,var(--neutral-soft));border-bottom:1px solid var(--line)}
.pfv-quadro-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(135deg,#2E8FB3,#143A5E);box-shadow:0 4px 10px -4px rgba(20,58,94,.6)}
.pfv-quadro-tit{flex:1;display:flex;flex-direction:column;font-size:14px}
.pfv-quadro-tit span{font-size:11.5px;color:var(--muted)}
.pfv-quadro-corpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px}
.pfv-quadro-corpo p{margin:0}
.pfv-acoes{display:flex;gap:8px;flex-wrap:wrap}
.pfv-acoes .btn{display:inline-flex;align-items:center;gap:6px}
.pfv-oab-num{font-size:26px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pfv-oab-num span{font-size:15px;font-weight:500;color:var(--muted)}
.pfv-estado{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;
  background:var(--neutral-soft);color:var(--muted);border:1px solid transparent}
.pfv-estado i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pfv-estado.e-ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.pfv-estado.e-ok i{animation:pfv-pulso 2s ease-in-out infinite}
.pfv-estado.e-info{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)}
.pfv-estado.e-alerta{background:color-mix(in srgb,var(--warn,#C98A12) 14%,transparent);color:var(--warn,#C98A12)}
@keyframes pfv-pulso{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}}
.pfv-voltar{display:inline-flex;align-items:center;gap:6px;align-self:flex-start}

/* O cartão mora num painel cuja largura muda com a tela: a quebra olha a
   largura do próprio cartão, e não a da janela.                         */
@container (max-width:640px){
  .pfv-dados{grid-template-columns:1fr}
  .pfv-dado{grid-template-columns:22px 96px minmax(0,1fr)}
}
@container (max-width:460px){
  .pfv-cabeca{padding:0 16px}
  .pfv-frase,.pfv-dados,.pfv-quadro{margin-left:16px;margin-right:16px}
  .pfv-editar{order:3}
  .pfv-oab-num{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .pfv,.pfv *{animation:none !important;transition:none !important}
}
/* ===== BLUEJUS: FIM DO CSS DO PERFIL EM CARTAO ===== */
/* ===== BLUEJUS: CSS DO GRATUITO PARA ADVOGADOS ===== */
/* Texto com brilho que corre devagar, em dourado sobre azul e em azul sobre
   claro. A frase é o destaque; o resto fica quieto em volta dela.      */
.gpa-brilho{background-image:linear-gradient(100deg,var(--gpa-a) 0%,var(--gpa-a) 38%,var(--gpa-b) 50%,var(--gpa-a) 62%,var(--gpa-a) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gpa-brilho 4.8s ease-in-out infinite}
@keyframes gpa-brilho{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.gpa-ic{width:100%;height:100%}
.gpa-prato-e,.gpa-prato-d{transform-box:fill-box;transform-origin:50% 0}
.gpa-ic{animation:gpa-balanca 5s ease-in-out infinite;transform-origin:50% 18%}
@keyframes gpa-balanca{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(0)}}

/* ---------------------------------------------------------------- selo */
.gpa-selo{--gpa-a:#fff;--gpa-b:#FFD27A;display:inline-flex;align-items:center;gap:11px;margin-bottom:14px;padding:8px 14px 8px 8px;
  border-radius:99px;text-decoration:none;color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(90deg,rgba(255,210,122,.22),rgba(255,255,255,.08));border:1px solid rgba(255,210,122,.55);
  box-shadow:0 8px 24px -14px rgba(255,190,90,.7);transition:translate .25s,box-shadow .25s,border-color .25s}
.gpa-selo::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);
  animation:gpa-varre 4.8s 1s ease-in-out infinite}
@keyframes gpa-varre{0%{left:-40%}35%,100%{left:130%}}
.gpa-selo:hover{translate:0 -2px;border-color:#FFD27A;box-shadow:0 12px 28px -12px rgba(255,190,90,.85)}
.gpa-selo-ic{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;padding:7px;
  background:linear-gradient(135deg,#FFD27A,#E8A93A);color:#143A5E;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.gpa-selo-txt{display:flex;flex-direction:column;line-height:1.2}
.gpa-selo-txt b{font-size:15px;letter-spacing:.01em}
.gpa-selo-txt span{font-size:11.5px;color:#CFE6F7}
.gpa-seta{font-size:15px;color:#FFD27A;transition:transform .25s}
.gpa-selo:hover .gpa-seta{transform:translateX(3px)}
.gpa-login{margin-bottom:18px}

/* ------------------------------------------------------ destaque de preço */
#planos .ent-larg{position:relative}
.gpa-destaque{--gpa-a:var(--ink);--gpa-b:var(--accent);position:absolute;right:22px;top:0;max-width:44%;
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;text-align:left;
  animation:gpa-entra .7s .15s cubic-bezier(.2,1.2,.4,1) both}
@keyframes gpa-entra{from{opacity:0;transform:translateY(12px) scale(.97)}}
.gpa-destaque-ic{grid-row:span 2;width:58px;height:58px;padding:12px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,#2E8FB3,#143A5E);box-shadow:0 12px 26px -14px rgba(20,58,94,.8)}
.gpa-destaque-txt{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.01em;line-height:1.05}
.gpa-destaque-sub{font-size:13px;color:var(--muted)}
@media (max-width:980px){
  .gpa-destaque{position:static;max-width:none;margin:0 0 18px}
}

/* --------------------------------------------------- convite na entrada */
.gpa-convite{--gpa-a:var(--accent);--gpa-b:#E8A93A;display:flex;align-items:center;gap:11px;margin-top:16px;padding:11px 13px;
  border-radius:12px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));
  transition:translate .2s,box-shadow .2s,border-color .2s}
.gpa-convite:hover{translate:0 -2px;border-color:var(--accent);box-shadow:0 10px 22px -16px rgba(20,58,94,.7)}
.gpa-convite-ic{width:34px;height:34px;flex:none;padding:7px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#2E8FB3,#143A5E)}
.gpa-convite-txt{flex:1;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.35}
.gpa-convite-txt span{color:var(--muted);font-size:12.5px}
.gpa-convite-txt em{font-style:normal;font-weight:700;background-image:linear-gradient(100deg,var(--gpa-a) 0%,var(--gpa-a) 38%,var(--gpa-b) 50%,var(--gpa-a) 62%,var(--gpa-a) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gpa-brilho 4.8s ease-in-out infinite}
.gpa-convite-cta{flex:none;font-size:12.5px;font-weight:700;color:#fff;background:var(--accent);padding:6px 11px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .gpa-brilho,.gpa-convite-txt em{animation:none;background:none;color:var(--gpa-a)}
  .gpa-ic,.gpa-selo::after,.gpa-destaque{animation:none}
}
/* ===== BLUEJUS: FIM DO CSS DO GRATUITO PARA ADVOGADOS ===== */
/* ===== BLUEJUS: CSS DAS ACOES POR USUARIO ===== */
.usr-aviso{margin:12px 12px 0}
/* As linhas entram uma vez, quando a lista chega. A tela é redesenhada a
   cada clique, e sem a marca usr-calma elas voltariam a esmaecer. */
.usr-card:not(.usr-calma) .usr-linha{animation:usr-linha .35s calc(var(--n,0) * 35ms) ease-out both}
.usr-linha{transition:background .15s}
.usr-linha.on{background:var(--surface2,var(--neutral-soft))}
@keyframes usr-linha{from{opacity:0}}
/* A linha com o menu aberto fica acima das seguintes: sem isso, as linhas
   de baixo, desenhadas depois, cobririam o menu. */
.usr-linha.on{position:relative;z-index:30}
.usr-linha.on td{position:relative;z-index:30}
.usr-nome{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.usr-nome:hover b{color:var(--accent);text-decoration:underline}
.usr-av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#2E8FB3,#143A5E)}
.usr-av.grande{width:48px;height:48px;font-size:16px;box-shadow:0 6px 16px -8px rgba(20,58,94,.7)}
.usr-td-menu{text-align:right}
.usr-menu{min-width:236px}
.usr-menu-nota{margin:4px 8px 6px;font-size:11.5px;color:var(--muted);max-width:220px;white-space:normal;line-height:1.4}

.usr-overlay{align-items:center;background:rgba(14,24,34,.44);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.usr-overlay:not(.usr-calmo){animation:canc-fundo .3s ease-out both}
.usr-modal{max-width:640px;border-radius:14px}
.usr-overlay:not(.usr-calmo) .usr-modal{animation:canc-subir .5s cubic-bezier(.2,1.25,.35,1) both}
.usr-topo{display:flex;align-items:center;gap:13px;padding:18px 20px 10px}
.usr-topo-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.usr-topo-txt h3{margin:1px 0 0;font-size:17px}
.usr-abas{padding:0 20px}
.usr-corpo{padding:14px 20px 20px;display:flex;flex-direction:column;gap:12px;max-height:68vh;overflow:auto}
.usr-recado{animation:canc-passo .3s ease-out both}
.usr-prov{display:inline-block;margin:0 4px;padding:1px 7px;border-radius:6px;background:var(--surface);border:1px solid var(--line);font-weight:700;letter-spacing:.04em}

/* Números de uso: cartões que entram em sequência, e o número sobe de zero. */
.usr-num{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.usr-num-item{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:11px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface),var(--surface2,var(--neutral-soft)));position:relative;overflow:hidden;
  transition:translate .2s,box-shadow .2s}
.usr-overlay:not(.usr-calmo) .usr-num-item{animation:canc-passo .4s calc(var(--n) * 55ms) ease-out both}
.usr-num-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.usr-num-item.k-assin::before{background:var(--ok)}
.usr-num-item.k-cert::before{background:#8a6b1f}
.usr-num-item.k-espaco::before{background:#6c5ce7}
.usr-num-item.k-entrada::before{background:var(--info)}
.usr-num-item:hover{translate:0 -2px;box-shadow:0 8px 18px -14px rgba(12,22,32,.6)}
.usr-num-v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.usr-fases{display:flex;flex-direction:column;gap:7px}
.usr-fases-tit{display:flex;justify-content:space-between;align-items:baseline}
.usr-barra{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--neutral-soft)}
.usr-barra i{display:block;height:100%;width:var(--l)}
.usr-overlay:not(.usr-calmo) .usr-barra i{animation:usr-encher .9s .3s cubic-bezier(.3,.9,.3,1) both}
@keyframes usr-encher{from{width:0}}
.f-ok{background:var(--ok)} .f-and{background:var(--info)} .f-can{background:var(--muted)}
.usr-legenda{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted)}
.usr-legenda span{display:inline-flex;align-items:center;gap:5px}
.usr-legenda i{width:9px;height:9px;border-radius:3px;display:inline-block}
.usr-kv{margin:0}

.usr-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.usr-f2{grid-column:span 2}
.usr-acoes{display:flex;justify-content:flex-end}

.usr-acesso{display:flex;flex-direction:column;gap:12px}
.usr-estado{display:flex;align-items:center;gap:10px;font-size:13px}
.usr-grade-acoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.usr-acao-card{display:flex;flex-direction:column;gap:7px;align-items:flex-start;padding:12px;border-radius:11px;border:1px solid var(--line);
  transition:border-color .2s,box-shadow .2s}
.usr-overlay:not(.usr-calmo) .usr-acao-card{animation:canc-passo .38s calc(var(--n) * 60ms) ease-out both}
.usr-acao-card.alvo{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
  animation:usr-alvo 1.4s ease-out both}
@keyframes usr-alvo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}}
.usr-acao-card.perigo{border-color:color-mix(in srgb,var(--crit) 30%,var(--line));background:color-mix(in srgb,var(--crit-soft) 40%,var(--surface))}
.usr-acao-card.perigo.alvo{border-color:var(--crit);box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 16%,transparent)}
.usr-btn-perigo{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,var(--line))}
.usr-chip{font:inherit;font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.usr-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}

@media (max-width:640px){
  .usr-num{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usr-form,.usr-grade-acoes{grid-template-columns:1fr}
  .usr-f2{grid-column:auto}
  .usr-overlay{align-items:flex-end;padding:0}
  .usr-modal{border-radius:16px 16px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .usr-linha,.usr-overlay,.usr-modal,.usr-num-item,.usr-barra i,.usr-acao-card,.usr-recado{animation:none !important}
}
/* ===== BLUEJUS: FIM DO CSS DAS ACOES POR USUARIO ===== */
/* ===== BLUEJUS: CSS DA MATRIZ DE PERMISSOES ===== */
.mat-head{display:flex;align-items:center;gap:8px}
.mat-nota{margin-left:auto}
/* A engrenagem: pequena, sem moldura, e só ganha cor ao passar o cursor. */
.mat-engrenagem{width:26px;height:26px;display:inline-grid;place-items:center;border:0;border-radius:7px;background:none;
  color:var(--muted);cursor:pointer;opacity:.55;transition:opacity .2s,color .2s,background .2s}
.mat-engrenagem svg{transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.mat-engrenagem:hover,.mat-engrenagem:focus-visible{opacity:1;color:var(--accent);background:var(--accent-soft)}
.mat-engrenagem:hover svg{transform:rotate(90deg)}
.mat-engrenagem.on{opacity:1;color:var(--accent);background:var(--accent-soft)}
.mat-engrenagem.on svg{transform:rotate(180deg)}
.mat-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));animation:mat-desce .3s ease-out both}
.mat-barra-txt{margin-right:auto}
@keyframes mat-desce{from{opacity:0;transform:translateY(-6px)}}
.mat-aviso{margin:8px 16px 0}
.mat-recado{margin:8px 16px 0}
.mat-td{text-align:center;padding:6px 4px !important}
.mat-cel{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;
  color:#fff;font-size:13px;font-weight:700;line-height:1;display:inline-grid;place-items:center;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .2s}
.mat-cel:hover:not([disabled]){border-color:var(--accent);transform:scale(1.08)}
.mat-cel.on{background:var(--ok);border-color:var(--ok)}
.mat-cel.mudou{box-shadow:0 0 0 3px color-mix(in srgb,var(--warn,#C98A12) 45%,transparent)}
.mat-cel.pulso{animation:mat-pulso .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes mat-pulso{0%{transform:scale(.7)}100%{transform:scale(1)}}
.mat-cel[disabled]{cursor:not-allowed;opacity:.75}
.mat-trava{font-size:11px}
@media (prefers-reduced-motion:reduce){ .mat-barra,.mat-cel.pulso{animation:none} .mat-engrenagem svg{transition:none} }
/* ===== BLUEJUS: FIM DO CSS DA MATRIZ DE PERMISSOES ===== */
/* ===== BLUEJUS: CSS DO EXPERIMENTAR ASSINATURA ===== */
.exp{background:var(--surface);min-height:100vh}
.exp-larg{max-width:760px;margin:0 auto;width:100%;padding:34px 20px 70px}
.exp-cabeca{text-align:center;margin-bottom:22px;animation:exp-sobe .5s ease-out both}
.exp-h1{font-size:clamp(23px,3.2vw,31px);line-height:1.15;margin:6px 0 10px}
.exp-lead{color:var(--muted);font-size:14.5px;max-width:52ch;margin:0 auto}
@keyframes exp-sobe{from{opacity:0;transform:translateY(12px)}}

/* Trilha dos passos: a bolinha do passo atual pulsa devagar. */
.exp-trilha{display:flex;align-items:center;justify-content:center;gap:10px;list-style:none;margin:0 0 18px;padding:0;flex-wrap:wrap}
.exp-trilha li{display:flex;align-items:center;gap:7px;color:var(--muted);animation:exp-sobe .4s calc(.1s + var(--n) * 70ms) ease-out both}
.exp-trilha li + li::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--line);margin-right:4px}
.exp-bolinha{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--neutral-soft);color:var(--muted);border:2px solid transparent;transition:background .25s,color .25s,border-color .25s}
.exp-trilha li.agora{color:var(--ink);font-weight:600}
.exp-trilha li.agora .exp-bolinha{background:var(--accent);color:#fff;animation:exp-pulso 2.2s ease-in-out infinite}
.exp-trilha li.feito .exp-bolinha{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);border-color:var(--ok)}
@keyframes exp-pulso{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}60%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}}

.exp-cartao{animation:exp-entra .45s cubic-bezier(.2,1,.3,1) both}
@keyframes exp-entra{from{opacity:0;transform:translateY(14px) scale(.99)}}
.exp-h2{display:flex;align-items:center;gap:9px;font-size:17px;margin:0 0 12px;color:var(--ink)}
.exp-h2 svg{color:var(--accent)}
.exp-solta{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;padding:24px 18px;
  border:2px dashed color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 4%,var(--surface));
  transition:border-color .2s,background .2s,transform .2s}
.exp-solta:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));transform:translateY(-2px)}
.exp-solta-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.exp-solta.com{border-style:solid;padding:14px}
.exp-arq{display:flex;align-items:center;gap:11px;width:100%;text-align:left}
.exp-arq-ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.exp-arq span{display:block}
.exp-troca{margin-left:auto;font-size:12px;color:var(--accent);font-weight:600}
.exp-ou{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:12px}
.exp-ou::before,.exp-ou::after{content:"";flex:1;height:1px;background:var(--line)}
.exp-exemplo{display:inline-flex;align-items:center;gap:7px}
.exp-mt{margin-top:12px}
.exp-acoes{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.exp-acoes-centro{justify-content:center}
.exp-enviar{display:inline-flex;align-items:center;gap:8px}

.exp-partes{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.exp-parte{display:grid;grid-template-columns:26px 1fr 1fr auto;align-items:end;gap:9px;
  animation:exp-sobe .35s calc(var(--n) * 60ms) ease-out both}
.exp-parte-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--accent-soft);color:var(--accent);margin-bottom:7px}

.exp-fluxo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:16px;border-radius:12px;
  background:var(--surface2,var(--neutral-soft))}
.exp-no{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:var(--accent);min-width:110px}
.exp-no b,.exp-no span{color:var(--ink)}
.exp-no-meio{flex:1;min-width:160px}
.exp-seta{color:var(--muted)}
.exp-lista{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.exp-lista li{display:flex;gap:9px;align-items:flex-start;color:var(--ok);animation:exp-sobe .4s calc(.1s + var(--n) * 80ms) ease-out both}
.exp-lista li span{color:var(--ink)}

.exp-fim{text-align:center}
.exp-selo,.exp-festa-selo{width:88px;height:88px;margin:4px auto 10px}
.exp-selo svg,.exp-festa-selo svg{width:100%;height:100%;fill:none;stroke:var(--ok);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.exp-anel{stroke-dasharray:170;animation:exp-anel .7s ease-out both}
.exp-tique{stroke-dasharray:44;animation:exp-tique .4s .55s ease-out both}
@keyframes exp-anel{from{stroke-dashoffset:170}to{stroke-dashoffset:0}}
@keyframes exp-tique{from{stroke-dashoffset:44}to{stroke-dashoffset:0}}
.exp-h2-fim{font-size:20px;margin:0 0 8px}
.exp-fim-txt{color:var(--muted);font-size:14px;max-width:52ch;margin:0 auto}

/* A porta: o pedido de desculpas, com o envelope que ganha um cadeado. */
.exp-overlay{align-items:center;background:rgba(14,24,34,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.exp-overlay:not(.exp-calmo){animation:canc-fundo .3s ease-out both}
.exp-modal{max-width:460px;border-radius:14px}
.exp-overlay:not(.exp-calmo) .exp-modal{animation:canc-subir .55s cubic-bezier(.2,1.25,.35,1) both}
.exp-porta-topo{display:flex;align-items:center;gap:13px;padding:18px 20px 8px}
.exp-porta-topo h3{margin:1px 0 0;font-size:17px}
.exp-porta-ic{width:52px;height:52px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.exp-porta-ic svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.exp-env,.exp-env-aba{animation:exp-env-bal 3s ease-in-out infinite}
@keyframes exp-env-bal{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.exp-cad{color:var(--warn,#C98A12);stroke:currentColor;animation:exp-cad .5s .25s cubic-bezier(.2,1.5,.4,1) both;transform-origin:50% 60%}
@keyframes exp-cad{from{opacity:0;transform:scale(.4) translateY(-6px)}}
.exp-porta-corpo{padding:6px 20px 20px;display:flex;flex-direction:column;gap:11px;max-height:70vh;overflow:auto}
.exp-porta-txt{margin:0;line-height:1.55}
.exp-porta-acoes{display:flex;gap:9px;flex-wrap:wrap}
.exp-porta-acoes .btn{flex:1;justify-content:center;display:inline-flex;align-items:center;gap:7px}
.exp-porta-rodape{justify-content:space-between}

/* A festa: confete leve e o selo que se desenha. */
.exp-festa{max-width:430px;text-align:center;padding:26px 24px 24px;position:relative;overflow:hidden;border-radius:16px;
  animation:exp-festa .55s cubic-bezier(.2,1.35,.4,1) both}
@keyframes exp-festa{from{opacity:0;transform:scale(.9)}}
.exp-festa h3{margin:2px 0 8px;font-size:20px;line-height:1.2}
.exp-festa-txt{color:var(--muted);font-size:14px;margin:0 0 14px}
.exp-festa .btn{margin-top:6px}
.exp-confete{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.exp-confete i{position:absolute;top:-12px;left:var(--x);width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0;
  animation:exp-cai 2.4s calc(var(--n) * 90ms) cubic-bezier(.3,.6,.4,1) both}
@keyframes exp-cai{0%{opacity:0;transform:translateY(-10px) rotate(0)}
  12%{opacity:1}100%{opacity:0;transform:translateY(420px) rotate(520deg)}}

@media (max-width:620px){
  .exp-parte{grid-template-columns:1fr;gap:6px}
  .exp-parte-n{margin-bottom:0}
  .exp-acoes .btn{flex:1;justify-content:center}
  .exp-overlay{align-items:flex-end;padding:0}
  .exp-modal,.exp-festa{border-radius:16px 16px 0 0;max-width:none;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .exp *,.exp-overlay,.exp-modal,.exp-festa,.exp-confete i{animation:none !important;transition:none !important}
  .exp-anel,.exp-tique{stroke-dashoffset:0}
}
/* ===== BLUEJUS: FIM DO CSS DO EXPERIMENTAR ASSINATURA ===== */

/* ===== BLUEJUS: ALCANCE DA TELA ===== */
/* Rolagem lateral e alvo de toque, medidos pela auditoria automática.
   ------------------------------------------------------------------------
   A rolagem lateral no celular vinha de um detalhe do CSS de grade: o filho
   de uma grade ou de uma linha flexível não encolhe abaixo do conteúdo,
   porque o mínimo dele é o próprio conteúdo. A tabela larga já morava numa
   caixa com rolagem própria (.tbl-wrap), mas essa caixa não podia encolher,
   então empurrava a página inteira para o lado em vez de rolar por dentro.
   Uma linha por nível de grade resolve: o mínimo passa a ser zero, a caixa
   encolhe até a largura da tela e a tabela rola onde devia rolar.

   O alvo de toque é a outra metade: a caixa de seleção continua do tamanho
   que era, e é o rótulo em volta dela que passa a ter 24 pixels. Nada muda
   de lugar na tela; muda o que responde ao dedo.                        */

.split > *, .split-3 > *, .stack > *, .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.content > .card, .card, .card-pad, .card-head, .tbl-wrap{ min-width:0 }
.tbl-wrap{ max-width:100% }

/* O cabeçalho do cartão põe título e observação na mesma linha. No celular,
   a observação é o que estoura: ela desce para a linha de baixo em vez de
   empurrar a página.                                                    */
@media (max-width:760px){
  .card-head{ flex-wrap:wrap; row-gap:4px }
  .card-head > .card-note{ flex:1 1 100%; }
  .row{ min-width:0 }
  .row > *{ min-width:0 }
}

/* A área que responde ao toque, sem mexer no desenho da caixa. */
.ac-toque{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:25px; min-height:25px; cursor:pointer;
  margin:-3px; /* a folga cresce para fora, então a linha da tabela não muda de altura */
}
.tbl td > .ac-toque, .tbl th > .ac-toque{ margin:-3px 0 }

/* Alvos pequenos que a auditoria apontou por nome. O texto continua do
   mesmo tamanho: o que cresce é a folga clicável em volta dele, que não
   altera a altura da linha porque é aplicada em elemento de linha.      */
.btn-tag{ min-height:24px; padding-block:5px }
.card-note[href], a.card-note{ display:inline-flex; align-items:center; min-height:24px }
.ent-foot a, .ent-rodape a, .pub-foot a{ display:inline-block; padding-block:4px }
.cof-expandir, [data-a="cof-expandir"]{ display:inline-flex; align-items:center; justify-content:center }

/* Os pontos do carrossel da página de entrada são uma barra de 4 pixels de
   propósito: é um indicador, não um botão de texto. A barra continua com 4
   pixels; a borda transparente em volta leva a área de toque a 24, que é o
   que o dedo precisa para acertar.                                      */
.ent-demo-pontos button{
  box-sizing:content-box; height:4px;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  border-left:3px solid transparent; border-right:3px solid transparent;
  background-clip:padding-box;
}
/* O atalho `background` do ponto ativo reescreve o recorte junto com a cor,
   e sem esta linha o ponto aceso pintava a moldura inteira de branco.   */
.ent-demo-pontos button.ativo{ background-clip:padding-box }

/* A caixa de selecao com o texto ao lado: a area que responde ao toque e o
   rotulo inteiro, e ele media 19 pixels de altura. Sobem cinco, e o texto
   continua exatamente onde estava, porque a linha ja era centrada.      */
label.row:has(> input[type="checkbox"]),
label.row:has(> input[type="radio"]){ min-height:24px }

/* Um pixel faltando e alvo pequeno igual. */
.cof-expandir, [data-a="cof-expandir"]{ box-sizing:border-box; min-height:26px; min-width:26px }

/* Os links do rodape da pagina publica ficam numa fileira, nao no meio de
   uma frase: cabe folga em volta deles. Os que estao dentro de frase ficam
   como estao, porque aumentar a area ali quebraria a linha do texto e a
   propria norma abre essa excecao.                                      */
.row > a.sm{ display:inline-block; padding-block:4px }

/* Onde o teclado chega agora, precisa aparecer que chegou. Sem contorno
   visível, a parada de foco existe e ninguém a vê.                      */
.tbl tbody tr[tabindex="0"]:focus-visible,
[data-a][tabindex="0"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px;
}
.tbl tbody tr[tabindex="0"]:focus-visible{ background:var(--accent-soft) }
/* ===== BLUEJUS: FIM DO ALCANCE DA TELA ===== */

/* ===== BLUEJUS: CAIXAS DE PREENCHIMENTO ===== */
/* Um desenho só para todo campo do sistema.
   ------------------------------------------------------------------------
   O que havia antes: a maior parte dos campos usava a classe .input e ficava
   certa; dezenove campos, espalhados por quatro telas, não usavam classe
   nenhuma e caíam no desenho padrão do navegador. Esse padrão não é neutro:
   ele segue o tema do sistema operacional, e num computador em modo escuro
   vira uma caixa preta de texto branco no meio de uma tela clara. Era o que
   estava acontecendo na busca do cofre.

   Havia também seis alturas diferentes convivendo: 26, 32, 38, 39, 41 e 42
   pixels. Nenhuma estava errada sozinha; juntas, faziam a tela parecer
   montada por pessoas que não se falaram.

   A correção não depende de ninguém lembrar de pôr a classe certa: o
   desenho é aplicado ao ELEMENTO, não à classe. Campo novo escrito daqui em
   diante já nasce igual aos outros, mesmo que quem o escreva esqueça a
   classe. As classes existentes continuam valendo e continuam ganhando de
   qualquer regra daqui, porque classe pesa mais que elemento: onde alguém
   quis um campo diferente de propósito, ele segue diferente.

   Sobre o tom: nada de cor forte. O campo em repouso é superfície e um
   traço fino; o foco acende o traço na cor do sistema e abre um halo suave
   em volta, do mesmo azul rebaixado que já serve de fundo aos avisos. Cor
   saturada em campo de formulário cansa quem passa o dia preenchendo, e
   rouba o destaque de quem precisa dele, que é o erro.                   */

/* A raiz declara os dois temas. Sem isto, o navegador escolhe o tema do
   sistema para os controles nativos e desenha caixa escura em tela clara. */
:root{ color-scheme:light }
:root[data-theme="dark"]{ color-scheme:dark }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark } }

:root{
  --campo-alt:38px;
  --campo-raio:8px;
  --campo-borda:var(--line2);
  --campo-fundo:var(--surface);
  --campo-halo:0 0 0 3px var(--accent-soft);
}

/* O :where() zera o peso desta regra na disputa do CSS, e isso e essencial:
   ela e o CHAO, nao um concorrente. Escrita sem ele, a fila de :not() somava
   peso e passava a ganhar de qualquer classe -- foi o que aconteceu na
   primeira tentativa, e a lupa da busca ficou por cima do texto porque o
   recuo da classe perdeu para o recuo do chao. Com peso zero, qualquer
   classe existente continua mandando no campo dela.                      */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
select,
textarea){
  font:inherit;
  font-size:13.5px;
  line-height:1.4;
  color:var(--ink);
  background:var(--campo-fundo);
  border:1px solid var(--campo-borda);
  border-radius:var(--campo-raio);
  padding:8px 12px;
  min-height:var(--campo-alt);
  max-width:100%;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
:where(textarea){ min-height:76px; resize:vertical }

:where(input, textarea)::placeholder{ color:var(--muted2); opacity:1 }

:where(input, select, textarea):hover:not(:disabled):not([readonly]){ border-color:var(--muted2) }

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--campo-halo);
}
/* Quem chega pelo teclado precisa enxergar onde está. O contorno do sistema
   fica, sem somar com o halo, que junto viraria uma borda dupla.        */
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none }

input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly]{
  background:var(--surface2); color:var(--muted); cursor:not-allowed; border-style:dashed;
}
input[readonly], textarea[readonly]{ cursor:text }

/* O preenchimento automático do navegador pinta a caixa de amarelo forte.
   Aqui ele passa a usar a mesma superfície do resto.                    */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px var(--campo-fundo) inset;
  caret-color:var(--ink);
}

/* Caixa de seleção e botão de opção na cor do sistema, em vez do azul
   fixo do navegador, que não acompanha o tema escuro.                   */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--accent) }

/* As classes que já existiam adotam a mesma forma, para que a tela inteira
   tenha um raio só e um foco só. O que elas já definiam de particular
   (largura, alinhamento, cor de erro) continua valendo.                 */
.input, .select, textarea.input, .pg-input{
  border-radius:var(--campo-raio);
  min-height:var(--campo-alt);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.input:focus, .select:focus, textarea.input:focus, .pg-input:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--campo-halo);
}
.select{ min-height:var(--campo-alt) }

/* ------------------------- campo de busca ------------------------------ */
/* A lupa mora dentro do campo, e não ao lado dele. É o desenho que já
   existia na barra lateral; passa a valer em toda caixa de busca, porque a
   do cofre estava com a lupa solta à esquerda e o campo sem forma.      */
.qbox{ position:relative; display:flex; align-items:center }
.qbox > svg{ position:absolute; left:12px; color:var(--muted2); pointer-events:none; flex:none }
.qbox > input{ width:100%; padding-left:36px }
.qbox > input:focus ~ svg, .qbox:focus-within > svg{ color:var(--accent) }

/* A busca do cofre usava altura própria, menor que a do resto. Some, e ela
   passa a ter a medida do sistema.                                      */
.cof-busca > input, [data-a="cof-busca"], [data-a="cof-busca-interna"]{ min-height:var(--campo-alt) }

/* ------------------------- campo com rótulo ---------------------------- */
/* O rótulo acima do campo, com a mesma distância em toda tela. */
.field > label, .pf-campo > label, .fic-campo > label{
  display:block; font-size:12px; font-weight:500; color:var(--ink2); margin-bottom:6px;
}
.field{ min-width:0 }
.field > input, .field > select, .field > textarea{ width:100% }

/* O campo em erro: traço e halo na cor do problema, sem pintar o fundo.
   Fundo colorido em campo de formulário empurra o olho para o lugar errado,
   que é a caixa, e não a frase que diz o que corrigir.                  */
.field.pr-erro > input, .campo-erro, input[aria-invalid="true"], select[aria-invalid="true"]{
  border-color:var(--crit);
}
.field.pr-erro > input:focus, .campo-erro:focus, input[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px var(--crit-soft);
}

/* ------------------------------ no celular ----------------------------- */
/* Letra abaixo de 16 pixels faz o navegador do telefone dar zoom sozinho ao
   tocar no campo, e a tela salta. Sobe para 16 só no toque, e o desenho
   fica igual no computador.                                             */
@media (max-width:760px){
  /* Aqui o peso alto e proposital: esta regra existe para vencer o repouso,
     e dentro da consulta de midia ela nao disputa recuo com ninguem, so
     tamanho de letra e altura.                                          */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  select, textarea, .input, .select, .pg-input, textarea.input{ font-size:16px; min-height:42px }
}
/* ===== BLUEJUS: FIM DAS CAIXAS DE PREENCHIMENTO ===== */

/* ===== BLUEJUS: A BARRA DO TOPO EM QUALQUER LARGURA ===== */
/* A varredura de abertura mediu 260 telas em cinco aparelhos. Vinte e cinco
   delas rolavam para o lado, e todas no mesmo aparelho: o tablet deitado,
   1024 pixels.
   ------------------------------------------------------------------------
   A causa era uma só, e não estava no conteúdo da tela: era a barra do topo.
   Ela reúne organização, aviso de termos, apoio, notificações, modo simples,
   idioma, tema e o nome de quem está usando. Somados, passam de 1024, e o
   que passa empurra a página inteira.

   Já existia a regra certa para o telefone: abaixo de 900 pixels o nome da
   pessoa e o nome do módulo somem, e sobra o essencial. O que faltava era a
   faixa entre 900 e 1200, onde o tablet deitado e o notebook pequeno vivem:
   ali tudo continuava à mostra, e estourava.

   A correção sobe o limite dessa mesma regra e acrescenta o que faltava
   para a barra encolher em vez de empurrar: caixa que pode diminuir abaixo
   do conteúdo, e nome do módulo que corta com reticências em vez de exigir
   a largura inteira. Nada é removido de onde já cabia: acima de 1200 a
   barra continua exatamente como está hoje.                              */

.appbar{ min-width:0 }
.brand{ min-width:0; flex:0 1 auto }
.brand-mod{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ab-right{ min-width:0; flex:0 1 auto }
/* O botao da pessoa NAO encolhe. Ele foi deixado encolhivel numa primeira
   tentativa, e no telefone virou uma caixa de oito pixels com o avatar
   escorrendo para fora da tela: quem some ali e a unica marca de qual
   sessao esta aberta. Quem cede espaco e o nome do modulo, ao lado da
   marca, que e texto e pode ser cortado sem perda.                     */
.ab-user{ flex:0 0 auto }
.ab-user b{ overflow:hidden; text-overflow:ellipsis }
.avatar{ flex:0 0 auto }

/* A faixa do tablet deitado e do notebook pequeno. O avatar fica, porque é
   ele que diz de quem é a sessão; o nome escrito por extenso é o que sai,
   e ele continua no título do botão, ao repouso do ponteiro.            */
@media (max-width:1200px){
  .ab-user b{ display:none }
  .brand-mod{ display:none }
  .brand-div{ display:none }
}

/* Entre 1200 e 1400 a barra ainda fica apertada quando o aviso de termos
   está na tela. O nome do módulo encolhe antes de empurrar.             */
@media (min-width:1201px) and (max-width:1400px){
  .brand-mod{ max-width:22vw }
  .ab-user b{ max-width:16vw }
}
/* No telefone, a barra reune sete controles em 390 pixels. A conta nao
   fecha por trinta pixels, e trinta pixels e exatamente o que sobra entre
   as folgas: o vao entre os controles e a margem das pontas encolhem, e
   nenhum controle precisa sair. Abaixo de 520 pixels ninguem sente a
   diferenca de seis pixels de vao; todo mundo sente a pagina deslizando
   para o lado.                                                          */
@media (max-width:520px){
  .appbar{ padding:0 10px; gap:8px }
  .ab-right{ gap:3px }
  .appbar .ab-btn{ width:28px; height:28px }
  /* A marca nao encolhe abaixo do proprio texto: encolhida, ela cortava no
     meio da palavra e a barra passava a exibir "BlueJus Sig". Quem cede
     espaco sao os controles da direita, que sao icones e continuam
     reconheciveis dois pixels menores.                                  */
  .brand{ flex:0 0 auto }
  .brand-name{ white-space:nowrap }
  .ab-apoio{ padding:0 7px }
  .s-barra .bar-chip, .appbar .bar-chip{ padding:0 5px }
  /* A marca continua escrita, um pouco menor: apagar o nome do produto da
     barra para ganhar espaco seria pagar caro demais por trinta pixels. */
  .brand-name{ font-size:15px }
  .brand-mark{ width:26px; height:26px; flex-basis:26px }
  .ab-user{ padding:2px 2px }
}

/* ===== BLUEJUS: FIM DA BARRA DO TOPO EM QUALQUER LARGURA ===== */

/* ===== BLUEJUS: BUSCA NA RELAÇÃO DE USUÁRIOS ===== */
.usr-barra{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line) }
.usr-qbox{ flex:1 1 260px; min-width:0; max-width:380px }
.usr-conta{ margin-left:auto; text-align:right; min-width:0 }
@media (max-width:760px){
  .usr-barra{ padding:10px 12px }
  .usr-conta{ margin-left:0; flex-basis:100%; text-align:left }
}
/* ===== BLUEJUS: FIM DA BUSCA NA RELAÇÃO DE USUÁRIOS ===== */