/* ============================================================================
   PORTAL NOVO · sistema visual "fluido"
   Neofuturismo paramétrico, claro e orgânico: fundo pérola, vidro translúcido,
   curvas suaves e as cores da AMETRA (marinho #1B2A4A + âmbar #C9A84C) clareadas.
   Carregado por último: redefine as variáveis de estilo.css/portal.css e dá
   forma às peças novas (início, tarefas, agenda, assinaturas, Lidiane).
   ========================================================================== */
:root,.papel,.cofre{
  --f-display:"Playfair Display", Georgia, serif;
  --f-ui:"Manrope", "Segoe UI", system-ui, sans-serif;
  --navy:#1B2A4A; --navy-2:#2E4677; --amber:#C9A84C; --amber-2:#E2C266;
  --bg:#F5F3EE; --bg-2:#EFECE5; --surface:rgba(255,255,255,.72); --surface-2:rgba(240,237,229,.7); --solido:#FFFFFF;
  --line:rgba(27,42,74,.09); --line-2:rgba(27,42,74,.16);
  --ink:#121A2E; --ink-2:#3D465C; --muted:#6E768A;
  --gold:#C9A84C; --gold-2:#C9A84C; --gold-ink:#8C6C1E; --gold-soft:rgba(201,168,76,.14);
  --ok:#2D7A57; --ok-soft:rgba(45,122,87,.11); --warn:#A06A12; --warn-soft:rgba(224,174,87,.18); --crit:#B23A35; --crit-soft:rgba(178,58,53,.10);
  --chart:#2E4677;
  --r:12px; --r-sm:8px; --r-lg:16px; --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sombra:0 1px 1px rgba(27,42,74,.04), 0 10px 30px -12px rgba(27,42,74,.18);
  --sombra-alta:0 2px 4px rgba(27,42,74,.05), 0 24px 60px -24px rgba(27,42,74,.32);
  --vidro:saturate(140%) blur(12px);
  --curva:cubic-bezier(.22,.8,.2,1);
  color-scheme:light;
}
html{background:var(--bg)}
body{background:
  radial-gradient(60vw 60vw at 100% -10%, rgba(201,168,76,.16), transparent 60%),
  radial-gradient(70vw 70vw at -10% 110%, rgba(46,70,119,.14), transparent 60%),
  linear-gradient(180deg,#F8F6F1,#F2EFE8); background-attachment:fixed; color:var(--ink)}
#fundo3d{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.95}
#root{position:relative; z-index:1}
::selection{background:rgba(201,168,76,.32)}
:focus-visible{outline:2px solid var(--navy-2); outline-offset:3px; border-radius:8px}

/* ---------- tipografia ---------- */
h1,h2,h3{color:var(--ink); letter-spacing:-.005em}
.eyebrow{color:var(--gold-ink); letter-spacing:.2em; font-weight:700}
.head h1{font-size:clamp(34px,3.6vw,52px); font-weight:500; letter-spacing:-.02em}
.head p{font-family:var(--f-ui); font-weight:400; font-size:15.5px; color:var(--ink-2); line-height:1.6}
.panel-h h2{font-size:22px; font-weight:500}

/* ---------- botões, campos, pílulas ---------- */
.btn{height:42px; border-radius:999px; padding:0 20px; border:1px solid var(--line-2); background:rgba(255,255,255,.6); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro);
  letter-spacing:.02em; font-size:13px; color:var(--ink); transition:transform .25s var(--curva), box-shadow .25s var(--curva), background .25s, border-color .25s}
.btn:hover{border-color:rgba(27,42,74,.32); transform:translateY(-1px); box-shadow:var(--sombra)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-gold,.papel .btn-gold{background:linear-gradient(135deg,#22345C 0%,#1B2A4A 55%,#2E4677 100%); border-color:transparent; color:#FBF5E3; box-shadow:0 8px 22px -10px rgba(27,42,74,.6), inset 0 1px 0 rgba(255,255,255,.14)}
.btn-gold:hover,.papel .btn-gold:hover{background:linear-gradient(135deg,#2A3F6D,#1B2A4A 55%,#3A5486); box-shadow:0 14px 30px -12px rgba(27,42,74,.7)}
.btn-gold svg{stroke:#E8C96A}
.btn-sm{height:32px; padding:0 14px; font-size:12px}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.box{height:44px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:rgba(255,255,255,.8); transition:border-color .2s, box-shadow .2s}
.box:focus{outline:none; border-color:var(--navy-2); box-shadow:0 0 0 4px rgba(46,70,119,.12)}
textarea.box{font-family:var(--f-ui); font-size:14.5px}
.input{border-bottom-color:var(--line-2)}
.input:focus{border-bottom-color:var(--navy-2)}
.pill{border-radius:999px; padding:4px 11px}
.p-neutral{background:rgba(27,42,74,.06)}
.chip{border-radius:999px; background:rgba(255,255,255,.55); border-color:var(--line-2); transition:all .2s var(--curva)}
.chip:hover{border-color:rgba(27,42,74,.3)}
.chip[aria-pressed="true"]{background:var(--navy); color:#FBF5E3; border-color:var(--navy)}
.seg{background:rgba(255,255,255,.6); border-color:var(--line-2); backdrop-filter:var(--vidro)}
.seg button[aria-pressed="true"],.papel .seg button[aria-pressed="true"]{background:var(--navy); color:#FBF5E3}
.tabs button[aria-selected="true"]::after{height:2px; border-radius:2px; background:linear-gradient(90deg,var(--navy-2),var(--amber))}
.otp input{border-radius:14px; background:rgba(255,255,255,.85)}

/* ---------- casca ---------- */
.app{grid-template-columns:276px minmax(0,1fr); background:transparent}
.side{background:rgba(255,255,255,.55); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro); border-right:0; color:var(--ink-2);
  margin:14px 0 14px 14px; height:calc(100vh - 28px); top:14px; border-radius:var(--r-lg); box-shadow:var(--sombra-alta), inset 0 0 0 1px rgba(255,255,255,.7); gap:26px; padding:26px 16px 20px}
.marca{display:flex; gap:12px; align-items:center; padding:0 6px}
.orbe{width:42px; height:42px; flex:none; filter:drop-shadow(0 6px 12px rgba(27,42,74,.35))}
.marca-nome{font-family:var(--f-display); font-size:17px; font-weight:600; color:var(--navy); letter-spacing:.06em}
.marca-nome em{font-style:normal; color:var(--amber)}
.marca-sub{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600}
.nav{gap:3px; overflow-y:auto; margin-right:-6px; padding-right:6px; padding-top:8px}
.nav-label{line-height:1.8; min-height:18px; flex:none}
.nav-label{color:var(--muted); margin:0 12px 8px; letter-spacing:.22em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav button{color:var(--ink-2); border-radius:14px; padding:10px 12px; font-size:13.5px; font-weight:500; transition:background .25s var(--curva), color .2s, transform .25s var(--curva)}
.nav button:hover{color:var(--ink); background:rgba(27,42,74,.05); transform:translateX(2px)}
.nav button[aria-current="page"]{color:#FBF5E3; background:linear-gradient(135deg,#22345C,#1B2A4A 60%,#2E4677); box-shadow:0 10px 24px -12px rgba(27,42,74,.7)}
.nav button[aria-current="page"]::before{content:""; position:absolute; left:auto; right:12px; top:50%; bottom:auto; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--amber-2); box-shadow:0 0 0 4px rgba(226,194,102,.18)}
.nav button[aria-current="page"] .count{display:none}
.nav svg{stroke-width:1.6}
.nav .count{color:var(--gold-ink); border:0; background:var(--gold-soft); padding:1px 8px}
.who{border-top:1px solid var(--line)}
.who b{color:var(--ink)}
.mono-av{color:#FBF5E3; border:0; background:radial-gradient(circle at 30% 25%,#3A5486,#1B2A4A); box-shadow:0 6px 14px -6px rgba(27,42,74,.6)}
.secure{color:var(--muted)}
.btn-sair{background:transparent}
.main,.main.papel,.main.cofre{background:transparent}
.top{background:rgba(245,243,238,.6); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro); border-bottom:1px solid var(--line); padding-left:40px}
.crumb b{color:var(--navy)}
.content{padding-left:40px; max-width:1320px; gap:30px}
.content > *{min-width:0}

/* demonstração: troca de ponto de vista */
.demo-troca{display:flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:rgba(201,168,76,.16); border:1px solid rgba(201,168,76,.4); font-size:12px}
.demo-troca span{padding:0 10px; font-weight:700; color:var(--gold-ink); letter-spacing:.08em; text-transform:uppercase; font-size:10px}
.demo-troca a{padding:5px 12px; border-radius:999px; color:var(--ink-2); text-decoration:none; font-weight:600}
.demo-troca a[aria-current="true"]{background:var(--navy); color:#FBF5E3}

/* ---------- painéis de vidro ---------- */
.panel{background:var(--surface); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro); border:1px solid rgba(255,255,255,.75); border-radius:var(--r-lg);
  box-shadow:var(--sombra), inset 0 1px 0 rgba(255,255,255,.8); padding:26px 28px}
.vidro-forte{background:linear-gradient(140deg,rgba(255,255,255,.88),rgba(255,255,255,.55)); position:relative; overflow:hidden}
.vidro-forte::before{content:""; position:absolute; inset:-40% -20% auto auto; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.22),transparent 65%); pointer-events:none}
.janela{border:1px solid rgba(46,70,119,.25)}
.vazio{border-radius:var(--r); background:rgba(255,255,255,.5)}
.notice{border-top:0; text-align:center}
.aviso-ensaio{border-radius:var(--r); border:1px solid rgba(201,168,76,.4); background:rgba(251,243,220,.75)}
.li{border-bottom:1px solid var(--line); border-radius:0}
.li[role="button"],.li[data-escola]{cursor:pointer; transition:background .2s, padding .25s var(--curva); border-radius:14px; padding-left:8px; padding-right:8px; margin:0 -8px}
.li[role="button"]:hover,.li[data-escola]:hover{background:rgba(27,42,74,.04)}
.figures{border:0; gap:14px}
.fig,.fig + .fig{border:0; padding:22px 24px; background:var(--surface); border-radius:var(--r); box-shadow:var(--sombra); backdrop-filter:var(--vidro)}
.fig .v{font-weight:500}
.hero{background:linear-gradient(135deg,#1B2A4A 0%,#2E4677 70%,#5B6E9A 100%); border-radius:var(--r-lg); box-shadow:var(--sombra-alta)}
.hero::after{background:linear-gradient(90deg,var(--amber-2),transparent)}
.bar{height:6px; border-radius:6px; background:rgba(27,42,74,.08); overflow:visible}
.bar i{border-radius:6px; background:linear-gradient(90deg,var(--navy-2),var(--amber))}
.legal{border-radius:var(--r-lg); border:0; box-shadow:var(--sombra); background:var(--surface); backdrop-filter:var(--vidro)}
.legal-h{background:linear-gradient(135deg,#1B2A4A,#2E4677); border-bottom:2px solid var(--amber)}
.proc-row{border-radius:14px; padding-left:10px; padding-right:10px; margin:0 -10px; transition:background .2s}
.proc-row:hover{background:rgba(201,168,76,.08)}
.doc{border-radius:var(--r); background:var(--surface); box-shadow:var(--sombra); border:1px solid rgba(255,255,255,.8)}
.doc::before{display:none}
.drop{border-radius:var(--r); background:rgba(255,255,255,.5)}
.cartao-escola{border-radius:var(--r-lg) !important; background:var(--surface) !important; box-shadow:var(--sombra); border:1px solid rgba(255,255,255,.8) !important; transition:transform .3s var(--curva), box-shadow .3s}
.cartao-escola:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)}
.cal{border-radius:12px; border-color:var(--line-2); background:rgba(255,255,255,.8); flex:none}
.cal span{background:var(--navy); color:var(--amber-2)}
.dossie{border-radius:var(--r-lg); overflow:hidden; background:#FFFFFF}
.dossie-h{background:linear-gradient(135deg,#1B2A4A,#2E4677)}
.toast{left:50%; right:auto; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom,0px)); border-radius:18px; background:rgba(18,26,46,.92); backdrop-filter:var(--vidro); color:#F6F1E3; box-shadow:var(--sombra-alta)}
.carregando{color:var(--muted)}

/* ---------- login ---------- */
.login{background:transparent; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.login-brand{background:transparent; border-right:0}
.claim h1{color:var(--navy); font-weight:500; letter-spacing:-.02em}
.claim h1 em{color:var(--amber); font-style:normal; background:linear-gradient(90deg,#B8902F,#E2C266); -webkit-background-clip:text; background-clip:text; color:transparent}
.claim p{font-family:var(--f-ui); font-weight:400; font-size:16px; color:var(--ink-2)}
.counter b{color:var(--navy); font-weight:500}
.login-form{background:transparent; gap:18px; align-content:center}
.login-form .vidro{background:rgba(255,255,255,.66); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro); border-radius:32px; padding:38px 34px; box-shadow:var(--sombra-alta), inset 0 0 0 1px rgba(255,255,255,.8); width:100%; max-width:420px}
.login-card h2{color:var(--navy)}
.login-demo{display:grid; gap:8px; justify-items:center; max-width:420px; width:100%}
.login-demo .row{justify-content:center}

/* ---------- movimento de entrada (só quando a tela muda) ---------- */
@keyframes sobe{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes anel{from{stroke-dashoffset:var(--c)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes flutua{0%,100%{transform:rotateX(14deg) rotateY(-10deg) translateY(0)}50%{transform:rotateX(10deg) rotateY(-4deg) translateY(-6px)}}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.45), var(--sombra-alta)}50%{box-shadow:0 0 0 10px rgba(201,168,76,0), var(--sombra-alta)}}
@keyframes ponto{0%,80%,100%{transform:scale(.6); opacity:.4}40%{transform:scale(1); opacity:1}}
.anima > *{animation:sobe .7s var(--curva) both}
.anima > *:nth-child(2){animation-delay:.05s} .anima > *:nth-child(3){animation-delay:.1s} .anima > *:nth-child(4){animation-delay:.15s} .anima > *:nth-child(5){animation-delay:.2s} .anima > *:nth-child(n+6){animation-delay:.25s}
.anima .tile{animation:sobe .7s var(--curva) both}
.anima .tile:nth-child(2){animation-delay:.06s} .anima .tile:nth-child(3){animation-delay:.12s} .anima .tile:nth-child(4){animation-delay:.18s} .anima .tile:nth-child(5){animation-delay:.24s}
.anima .anel-arco,.anima .anel-brilho{animation:anel 1.8s var(--curva) both .15s}
.anima .lt-i{animation:sobe .6s var(--curva) both; animation-delay:calc(.25s + var(--i) * .04s)}

/* ---------- início ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px}
.tile{all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:4px; padding:18px 20px 16px; border-radius:22px; background:var(--surface); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--sombra); position:relative; overflow:hidden; transition:transform .3s var(--curva), box-shadow .3s var(--curva)}
.tile::after{content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle,rgba(46,70,119,.12),transparent 70%); transition:transform .5s var(--curva)}
.tile:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)}
.tile:hover::after{transform:scale(1.4)}
.tile:focus-visible{outline:2px solid var(--navy-2)}
.tile[disabled]{cursor:default}
.tile-l{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.tile-v b{font-family:var(--f-display); font-size:44px; font-weight:500; line-height:1.05; color:var(--navy)}
.tile-d{font-size:12.5px; color:var(--ink-2)}
.tile.t-crit::after{background:radial-gradient(circle,rgba(178,58,53,.16),transparent 70%)} .tile.t-crit .tile-v b{color:var(--crit)}
.tile.t-warn::after{background:radial-gradient(circle,rgba(201,168,76,.26),transparent 70%)}
.g-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:22px}
.g-side{gap:22px}
.pilha{display:grid; gap:22px; align-content:start; min-width:0}
.hero-nota{display:grid; gap:10px; justify-items:center; text-align:center}
.hero-nota .panel-h{width:100%; text-align:left}
.hero-rodape{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; flex-wrap:wrap; font-size:13px; color:var(--ink-2); text-align:left}
.hero-rodape b{font-family:var(--f-display); font-size:18px}
.up{color:var(--ok)}
.anel3d{position:relative; width:min(250px,70vw); aspect-ratio:1; perspective:900px; display:grid; place-items:center}
.anel3d svg{position:absolute; inset:0; width:100%; height:100%; transform-style:preserve-3d; animation:flutua 9s ease-in-out infinite; overflow:visible}
.anel-orbe{position:absolute; inset:16%; border-radius:50%; background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,#F2EEE3 35%,#D9DDEA 70%,#AEB7CF 100%);
  box-shadow:inset -12px -16px 30px rgba(27,42,74,.18), inset 10px 12px 24px rgba(255,255,255,.9), 0 22px 40px -18px rgba(27,42,74,.45)}
.anel-trilho{fill:none; stroke:rgba(27,42,74,.08); stroke-width:12}
.anel-arco{fill:none; stroke-width:12; stroke-linecap:round}
.anel-brilho{fill:none; stroke-width:16; stroke-linecap:round; opacity:.45}
.anel-centro{position:relative; display:grid; justify-items:center; line-height:1}
.anel-centro b{font-family:var(--f-display); font-size:clamp(52px,6vw,72px); font-weight:500; color:var(--navy); letter-spacing:-.03em}
.anel-centro span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px; font-weight:700}
.evo{width:100%; height:auto; display:block; overflow:visible}
.evo-grade{stroke:rgba(27,42,74,.08); stroke-dasharray:3 5}
.evo-eixo{font-size:10.5px; fill:var(--muted); font-weight:600}
.evo-area{fill:url(#evoA)}
.evo-linha{fill:none; stroke:url(#evoL); stroke-width:3.5; stroke-linecap:round}
.evo-ponto{fill:#fff; stroke:var(--navy-2); stroke-width:2}
.evo-ponto.ult{fill:var(--amber); stroke:#fff; stroke-width:3; filter:drop-shadow(0 4px 8px rgba(201,168,76,.6))}
.evo-tag rect{fill:var(--navy)} .evo-tag text{fill:#FBF5E3; font-size:12px; font-weight:700}
.evo-txt{margin:14px 0 0; font-size:14px; color:var(--ink-2); line-height:1.6}
.evo-vazia{padding:40px 0; text-align:center}
.hero-avulso{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center}
.hero-avulso h2{font-size:clamp(26px,3vw,36px); margin:8px 0 6px; color:var(--navy)}
.hero-avulso p{margin:0; color:var(--ink-2); max-width:44ch}
.hero-nums{display:flex; gap:28px; flex-wrap:wrap}
.hero-nums div{display:grid; gap:2px}
.hero-nums b{font-family:var(--f-display); font-size:46px; font-weight:500; color:var(--navy); line-height:1}
.hero-nums span{font-size:11.5px; color:var(--muted); max-width:12ch}
.ltempo{list-style:none; margin:0; padding:0; display:grid; position:relative}
.ltempo::before{content:""; position:absolute; left:19px; top:10px; bottom:10px; width:2px; border-radius:2px; background:linear-gradient(180deg,rgba(46,70,119,.25),rgba(201,168,76,.25),transparent)}
.lt-i{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 8px 10px 0; border-radius:16px; position:relative}
.lt-i[role="button"]{cursor:pointer}
.lt-i[role="button"]:hover{background:rgba(27,42,74,.04)}
.lt-ic{width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:#fff; box-shadow:var(--sombra); position:relative; z-index:1}
.lt-ic svg{width:18px; height:18px; fill:none; stroke:var(--navy-2); stroke-width:1.7}
.t-pub .lt-ic{background:linear-gradient(135deg,#22345C,#2E4677)} .t-pub .lt-ic svg{stroke:#E8C96A}
.t-doc .lt-ic{background:linear-gradient(135deg,#FBF3DC,#F1E2B2)} .t-doc .lt-ic svg{stroke:#8C6C1E}
.t-tarefa .lt-ic svg{stroke:var(--ok)}
.t-assin .lt-ic{background:linear-gradient(135deg,#EEF1F8,#DCE2F0)}
.lt-c{min-width:0} .lt-c .t{font-weight:600; font-size:14px; overflow-wrap:anywhere} .lt-c .s{font-size:12px; color:var(--muted)}
.lt-q{font-size:11.5px; color:var(--muted); white-space:nowrap; font-weight:600}
.reuniao-prox{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start}
.reuniao-prox .t{font-weight:600} .reuniao-prox .s{font-size:12.5px; color:var(--muted); margin:2px 0 10px}

/* ---------- tarefas ---------- */
.kanban{display:grid; grid-template-columns:repeat(4,minmax(240px,1fr)); gap:16px; overflow-x:auto; padding-bottom:8px; align-items:start}
.tcol{background:rgba(255,255,255,.4); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro); border-radius:24px; padding:14px; border:1px solid rgba(255,255,255,.7); min-height:220px; transition:background .25s, box-shadow .25s}
.tcol.sobre{background:rgba(201,168,76,.14); box-shadow:inset 0 0 0 2px rgba(201,168,76,.5)}
.tcol header{display:flex; justify-content:space-between; align-items:center; padding:4px 6px 12px}
.tcol h3{font-family:var(--f-ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-weight:700}
.tcol header span{font-size:12px; font-weight:700; color:var(--navy); background:rgba(27,42,74,.08); border-radius:999px; padding:1px 9px}
.tcol-b{display:grid; gap:10px}
.tcol-vazia{text-align:center; padding:24px 6px; border:1.5px dashed var(--line-2); border-radius:16px}
.tcard{background:#fff; border-radius:18px; padding:14px 14px 12px; box-shadow:var(--sombra); display:grid; gap:8px; cursor:grab; border:1px solid rgba(27,42,74,.05); transition:transform .25s var(--curva), box-shadow .25s}
.tcard:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta)}
.tcard.arrastando{opacity:.45; transform:rotate(2deg) scale(.98)}
.tcard.feita{opacity:.78}
.tcard.feita .t{text-decoration:line-through; text-decoration-color:rgba(27,42,74,.3)}
.tcard-h{display:flex; justify-content:space-between; align-items:center; gap:8px}
.tcard-emp{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tcard-olho svg{width:15px; height:15px; stroke:var(--navy-2); fill:none; stroke-width:1.6}
.tcard .t{font-weight:600; font-size:14px; line-height:1.35}
.tcard-p{display:flex; flex-wrap:wrap; gap:6px}
.tcard-f{display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid var(--line); padding-top:8px}
.tcard-f .box{height:30px; font-size:12px; padding:0 8px; border-radius:10px; max-width:140px}

/* ---------- relatório mensal ---------- */
.mensal-ctrl{align-items:flex-end}
.mensal-ctrl .field{min-width:220px}
.rm{max-width:900px}
.rm-faixa{background:linear-gradient(135deg,#1B2A4A,#2E4677); color:#F6F1E3; padding:26px 44px; display:flex; gap:16px; align-items:center}
.rm-faixa .marca-nome{color:#F6F1E3}
.rm-faixa .mono{margin-left:auto; color:#E8C96A; letter-spacing:.14em; text-transform:uppercase}
.rm-orbe{width:46px; height:46px; flex:none}
.rm-fio{height:3px; background:linear-gradient(90deg,#C9A84C,#E8C96A,#C9A84C)}
.rm .dfig{grid-template-columns:repeat(4,minmax(0,1fr))}
.rm-t{width:100%; border-collapse:collapse; font-size:13px}
.rm-t th{font-size:9.5px; letter-spacing:.2em; color:var(--muted); padding:0 10px 8px 0; border-bottom:1px solid var(--line-2)}
.rm-t td{padding:10px 10px 10px 0; border-bottom:1px solid var(--line); vertical-align:top}
.rm-vazio{font-size:13px; color:var(--muted) !important}
.rm-pe{background:linear-gradient(135deg,#1B2A4A,#2E4677); border-top:3px solid #C9A84C; padding:14px; display:grid; place-items:center}
.rm-orbe-pe{width:40px; height:40px}

/* ---------- agenda ---------- */
.regras{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; position:relative}
.regras div{display:flex; gap:12px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.regras svg{width:34px; height:34px; padding:8px; border-radius:12px; background:rgba(27,42,74,.06); stroke:var(--navy-2); fill:none; stroke-width:1.6; flex:none}
.regras b{color:var(--navy)}
.dias{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.dia{border-radius:20px; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8); box-shadow:var(--sombra); padding:14px; display:grid; gap:10px}
.dia.cheio{opacity:.45}
.dia-h{display:flex; align-items:baseline; gap:6px; font-size:12px; color:var(--muted); text-transform:capitalize}
.dia-h b{font-family:var(--f-display); font-size:26px; color:var(--navy); font-weight:500}
.horas{display:flex; gap:6px; flex-wrap:wrap}
.hora{all:unset; cursor:pointer; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:700; color:var(--navy); background:rgba(27,42,74,.06); transition:all .2s var(--curva)}
.hora:hover{background:rgba(27,42,74,.12)}
.hora[aria-pressed="true"]{background:linear-gradient(135deg,#C9A84C,#E2C266); color:#1B2A4A; box-shadow:0 8px 18px -8px rgba(201,168,76,.9)}
.hora:focus-visible{outline:2px solid var(--navy-2)}
.hora[disabled]{cursor:not-allowed; opacity:.5}
.escolhido{display:grid; gap:2px; padding:16px 18px; border-radius:18px; background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.35); text-transform:none}
.escolhido b{font-family:var(--f-display); font-size:20px; color:var(--navy); font-weight:500}
.escolhido span{font-size:13px; color:var(--ink-2)}
.carregando-mini{display:flex; gap:6px; align-items:center; padding:30px 0; color:var(--muted); font-size:13px}
.carregando-mini i{width:8px; height:8px; border-radius:50%; background:var(--navy-2); animation:ponto 1.2s infinite}
.carregando-mini i:nth-child(2){animation-delay:.15s} .carregando-mini i:nth-child(3){animation-delay:.3s}
.carregando-mini span{margin-left:8px}

/* ---------- assinaturas ---------- */
.assins{display:grid; gap:14px}
.assin{background:var(--surface); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro); border-radius:24px; padding:20px 22px; box-shadow:var(--sombra); border:1px solid rgba(255,255,255,.8); display:grid; gap:12px}
.assin-h{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.assin .t{font-family:var(--f-display); font-size:19px; margin:4px 0 2px; color:var(--ink)}
.assin-barra{height:6px; border-radius:6px; background:rgba(27,42,74,.08); overflow:hidden}
.assin-barra i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--navy-2),var(--amber)); transition:width 1s var(--curva)}
.assin-sig{display:flex; gap:8px; flex-wrap:wrap}
.sig{display:inline-flex; gap:6px; align-items:center; font-size:12px; padding:5px 11px; border-radius:999px; background:rgba(27,42,74,.05); color:var(--ink-2)}
.sig svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2}
.sig em{font-style:normal; color:var(--muted)}
.sig.ok{background:var(--ok-soft); color:var(--ok)}
.sig-linha{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); gap:8px; margin-bottom:8px}
.form .box,.form .field{min-width:0} .form .box{width:100%}

/* ---------- Lidiane ---------- */
.lid{position:fixed; right:max(22px, env(safe-area-inset-right,0px)); bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:40; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.lid-bolha{all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; padding:7px 18px 7px 7px; border-radius:999px; background:rgba(255,255,255,.82); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro);
  box-shadow:var(--sombra-alta); animation:pulsa 3.2s ease-in-out infinite; order:2; transition:transform .3s var(--curva)}
.lid-bolha:hover{transform:translateY(-2px) scale(1.02)}
.lid-bolha:focus-visible{outline:2px solid var(--navy-2)}
.lid-orbe{width:40px; height:40px; flex:none}
.lid-bolha .lid-orbe{animation:gira 24s linear infinite}
.lid-nome{font-weight:700; color:var(--navy); font-size:14px}
.lid-teaser{all:unset; cursor:pointer; order:1; max-width:260px; font-size:13px; line-height:1.45; padding:12px 16px; border-radius:18px 18px 4px 18px; background:var(--navy); color:#FBF5E3; box-shadow:var(--sombra-alta); animation:sobe .6s var(--curva) both .8s}
.lid-painel{width:min(390px, calc(100vw - 32px)); height:min(580px, calc(100vh - 120px)); display:grid; grid-template-rows:auto minmax(0,1fr) auto auto auto; border-radius:30px; overflow:hidden;
  background:rgba(250,248,243,.86); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px); box-shadow:0 30px 80px -24px rgba(27,42,74,.5), inset 0 0 0 1px rgba(255,255,255,.8); animation:sobe .45s var(--curva) both}
.lid-painel header{display:flex; gap:12px; align-items:center; padding:16px 16px 14px 18px; background:linear-gradient(135deg,#1B2A4A,#2E4677); color:#FBF5E3}
.lid-painel header b{display:block; font-size:15px}
.lid-painel header span{font-size:11.5px; color:#E8C96A}
.lid-x{all:unset; cursor:pointer; margin-left:auto; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1)}
.lid-x svg{width:16px; height:16px; stroke:#FBF5E3; fill:none; stroke-width:2}
.lid-x:focus-visible{outline:2px solid #E8C96A}
.lid-msgs{overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth}
.lm{max-width:86%; padding:11px 14px; border-radius:18px; font-size:14px; line-height:1.5; animation:sobe .35s var(--curva) both}
.lm.ela{align-self:flex-start; background:#fff; color:var(--ink); border-bottom-left-radius:6px; box-shadow:var(--sombra)}
.lm.eu{align-self:flex-end; background:linear-gradient(135deg,#22345C,#2E4677); color:#FBF5E3; border-bottom-right-radius:6px}
.lm.digitando{display:flex; gap:5px; padding:14px 16px}
.lm.digitando i{width:7px; height:7px; border-radius:50%; background:var(--navy-2); animation:ponto 1.2s infinite}
.lm.digitando i:nth-child(2){animation-delay:.15s} .lm.digitando i:nth-child(3){animation-delay:.3s}
.lid-sug{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 10px}
.lid-sug .chip{font-size:12px; padding:6px 12px; background:#fff}
.lid-form{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 12px; border-top:1px solid var(--line)}
.lid-form .box{border-radius:999px; height:44px}
.lid-form .btn{width:44px; height:44px; padding:0; border-radius:50%}
.lid-aviso{margin:0; padding:0 16px 12px; font-size:10.5px; color:var(--muted); text-align:center}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .g-hero{grid-template-columns:minmax(0,1fr)}
  .regras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kanban{grid-template-columns:repeat(4,minmax(240px,82vw))}
}
@media (max-width:820px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login-brand{border-bottom:0}
  .app{grid-template-columns:minmax(0,1fr)}
  .mobile-nav{background:rgba(255,255,255,.72); backdrop-filter:var(--vidro); -webkit-backdrop-filter:var(--vidro); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:6}
  .mobile-nav button{color:var(--ink-2); border-radius:999px; font-weight:600}
  .mobile-nav button[aria-current="page"]{color:#FBF5E3; background:var(--navy); box-shadow:none}
  .top{position:static; padding-left:16px}
  .content{padding-left:16px}
  .panel{border-radius:24px; padding:20px 16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tile{padding:14px 14px 12px; border-radius:18px}
  .tile-v b{font-size:34px}
  .hero-avulso{grid-template-columns:minmax(0,1fr)}
  .hero-nums b{font-size:36px}
  .regras{grid-template-columns:minmax(0,1fr)}
  .rm .dfig{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rm-faixa{padding:20px 22px; flex-wrap:wrap}
  .rm-faixa .mono{margin-left:0}
  .sig-linha{grid-template-columns:minmax(0,1fr)}
  .demo-troca{flex-wrap:wrap; border-radius:18px}
  .lt-i{grid-template-columns:40px minmax(0,1fr)}
  .lt-q{grid-column:2; margin-top:-6px}
  .lid{right:12px; bottom:12px}
  .lid-painel{height:min(560px, calc(100vh - 90px))}
  .lid-teaser{max-width:220px}
}
@media print{
  #fundo3d,.lid,.side,.mobile-nav,.top,.no-print,.toast{display:none !important}
  body{background:#fff !important}
  .panel{box-shadow:none; backdrop-filter:none}
  .rm{border-radius:0; box-shadow:none !important; max-width:none}
  .rm-faixa,.rm-pe,.rm-fio{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
@media (prefers-reduced-motion: reduce){
  .anel3d svg,.lid-bolha,.lid-bolha .lid-orbe{animation:none !important}
}


/* ============================================================================
   RODADA 2 · aerodinâmico + orgânico + tecnológico + limpo
   Menos "líquido": raios precisos, fios finos, marcas de régua, micro-rótulos em mono,
   grade de linha fina ao fundo. Interatividade: luz que segue o cursor, inclinação,
   botões magnéticos, anel com detalhe, transição "acessando".
   ========================================================================== */
#fundo3d{opacity:1}
/* grade de fio de cabelo, só perto do topo, apagando para baixo */
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(27,42,74,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,74,.045) 1px,transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(120% 80% at 70% 0%,#000 0%,transparent 70%); mask-image:radial-gradient(120% 80% at 70% 0%,#000 0%,transparent 70%)}

/* micro-rótulos em mono */
.eyebrow,.tile-l,.nav-label,.micro,.marca-sub,th,.tcol h3,.lt-q,.demo-troca span,.panel-h .sub,.anel-centro span,.evo-eixo,.rm-t th{font-family:var(--f-mono); letter-spacing:.12em}
.eyebrow{font-size:10.5px; font-weight:500}
.eyebrow::before{content:""; display:inline-block; width:18px; height:1px; background:var(--amber); vertical-align:middle; margin-right:10px}
.panel-h .sub{font-size:10.5px; letter-spacing:.04em; text-transform:none}
.micro{font-size:9.5px; text-transform:uppercase; color:var(--muted); font-weight:500}

/* formas mais firmes */
.btn{border-radius:10px; transform:translate(var(--tx,0),var(--ty,0)); transition:transform .35s cubic-bezier(.2,.9,.25,1.2), box-shadow .25s, background .25s, border-color .25s}
.btn:hover{transform:translate(var(--tx,0),calc(var(--ty,0px) - 1px))}
.btn:active{transform:translate(var(--tx,0),var(--ty,0)) scale(.97)}
.btn-sm{border-radius:8px}
.chip,.pill,.hora{border-radius:8px}
.seg{border-radius:10px} .seg button{border-radius:7px}
.box{border-radius:8px}
.nav button{border-radius:10px}
.nav button[aria-current="page"]{background:linear-gradient(100deg,#1B2A4A 0%,#22345C 70%,#2E4677 100%)}
.nav button[aria-current="page"]::after{content:""; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--amber-2)}
.side{border-radius:18px; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(27,42,74,.07), 0 20px 50px -30px rgba(27,42,74,.35)}

/* painéis: fio fino, marcas de canto (régua), luz que segue o cursor */
.panel,.tile,.fig,.assin,.dia,.tcol,.doc,.cartao-escola{border:1px solid rgba(27,42,74,.08) !important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 12px 32px -22px rgba(27,42,74,.35)}
.panel,.tile,.fig{position:relative}
.panel::after,.tile::before{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(var(--amber),var(--amber)) top left/10px 1px no-repeat,
    linear-gradient(var(--amber),var(--amber)) top left/1px 10px no-repeat,
    linear-gradient(rgba(27,42,74,.35),rgba(27,42,74,.35)) bottom right/10px 1px no-repeat,
    linear-gradient(rgba(27,42,74,.35),rgba(27,42,74,.35)) bottom right/1px 10px no-repeat; opacity:.75}
.luz{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),transparent 45%) !important}
.panel.luz{background-image:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),transparent 40%) !important}
.tile,.tcard,.assin,.dia,.doc,.cartao-escola{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.tile:hover,.tcard:hover,.assin:hover,.dia:hover,.doc:hover,.cartao-escola:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-2px); transition:transform .12s linear, box-shadow .3s}
.tile::after{display:none}
.tile{border-radius:14px}
.tile-v b{font-weight:400; letter-spacing:-.02em}
.tile-l{font-size:9.5px}
.tile .tile-d{font-size:12px}
.tile:hover .tile-l{color:var(--navy)}
.tile.t-crit{border-left:2px solid var(--crit) !important}
.tile.t-warn{border-left:2px solid var(--amber) !important}
.vidro-forte::before{inset:auto -10% -60% auto; width:60%; background:radial-gradient(circle,rgba(201,168,76,.14),transparent 65%)}

/* linha do tempo: hover com régua e seta */
.ltempo::before{width:1px; left:19.5px; background:linear-gradient(180deg,rgba(46,70,119,.3),rgba(201,168,76,.3),transparent)}
.lt-i{grid-template-columns:40px minmax(0,1fr) auto 14px; border-radius:10px; transition:background .2s, transform .3s cubic-bezier(.2,.8,.2,1)}
.lt-i > svg.chev{opacity:0; transform:translateX(-6px); transition:all .25s}
.lt-i[role="button"]:hover{background:rgba(27,42,74,.035); transform:translateX(4px)}
.lt-i[role="button"]:hover > svg.chev{opacity:1; transform:none}
.lt-i[role="button"]:hover .lt-ic{transform:scale(1.08); box-shadow:0 0 0 4px rgba(201,168,76,.18), var(--sombra)}
.lt-ic{border-radius:10px; transition:transform .3s, box-shadow .3s}
.lt-i:focus-visible{outline:1.5px solid var(--navy-2)}

/* anel: régua em volta, detalhe por eixo ao passar o mouse */
.anel3d svg{animation:none; transform:none}
.anel-orbe{inset:17%; background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,#F4F1EA 45%,#DDE2EE 100%); box-shadow:inset -8px -10px 20px rgba(27,42,74,.12), inset 6px 8px 16px rgba(255,255,255,.9), 0 16px 30px -18px rgba(27,42,74,.45)}
.anel-marca{stroke:rgba(27,42,74,.25); stroke-width:.8}
.anel-marca.longa{stroke:var(--amber); stroke-width:1.2}
.anel-trilho{stroke-width:6; stroke:rgba(27,42,74,.07)}
.anel-arco{stroke-width:6}
.anel3d.interativo{cursor:help; outline:none}
.anel-dica{display:block; margin-top:8px; font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); opacity:.8}
.anel-detalhe{position:absolute; inset:19%; border-radius:50%; display:grid; align-content:center; gap:4px; padding:0 18%; background:rgba(255,255,255,.95); backdrop-filter:blur(6px);
  opacity:0; transform:scale(.92); transition:opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.anel3d.interativo:hover .anel-detalhe,.anel3d.interativo:focus-visible .anel-detalhe{opacity:1; transform:none}
.anel3d.interativo:hover .anel-centro,.anel3d.interativo:focus-visible .anel-centro{opacity:0}
.anel-centro{transition:opacity .25s}
.anel-detalhe .micro{text-align:center; margin-bottom:2px}
.ad{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 6px; align-items:center; font-size:10.5px; color:var(--ink-2)}
.ad i{grid-column:1/-1}
.ad span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ad i{height:3px; background:rgba(27,42,74,.1); border-radius:3px; overflow:hidden}
.ad b{display:block; height:100%; background:linear-gradient(90deg,var(--navy-2),var(--amber))}
.ad em{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--navy); text-align:right}

/* gráfico de evolução: pontos interativos */
.evo-linha{stroke-width:2.5}
.evo-ponto{transform-box:fill-box; transform-origin:center; transition:transform .2s; cursor:pointer}
.evo-ponto:hover{transform:scale(1.6)}
.evo-grade{stroke-dasharray:1 4}

/* quadro de tarefas mais preciso */
.tcol{border-radius:14px; background:rgba(255,255,255,.35)}
.tcard{border-radius:10px}
.tcol header span{border-radius:6px; font-family:var(--f-mono); font-weight:500}

/* ---------- TRANSIÇÃO "ACESSANDO" ---------- */
.content.saindo > *{transition:opacity .24s ease-in, filter .24s ease-in, transform .26s ease-in; opacity:0; filter:blur(8px); transform:scale(.985) translateY(-4px)}
.content.saindo{pointer-events:none}
@keyframes monta{from{opacity:0; filter:blur(6px); transform:translateY(10px) scale(.992)}to{opacity:1; filter:none; transform:none}}
.anima > *{animation:monta .5s cubic-bezier(.2,.8,.2,1) both !important}
.anima > *:nth-child(1){animation-delay:.04s !important} .anima > *:nth-child(2){animation-delay:.09s !important} .anima > *:nth-child(3){animation-delay:.14s !important}
.anima > *:nth-child(4){animation-delay:.19s !important} .anima > *:nth-child(5){animation-delay:.24s !important} .anima > *:nth-child(n+6){animation-delay:.28s !important}
.anima .tile{animation:monta .45s cubic-bezier(.2,.8,.2,1) both}
.anima .tile:nth-child(1){animation-delay:.12s} .anima .tile:nth-child(2){animation-delay:.16s} .anima .tile:nth-child(3){animation-delay:.2s} .anima .tile:nth-child(4){animation-delay:.24s} .anima .tile:nth-child(5){animation-delay:.28s}
.anima .lt-i{animation:monta .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.3s + var(--i) * .03s)}
.anima .anel-arco{animation:anel 1.4s cubic-bezier(.22,.8,.2,1) both .2s}
/* fio âmbar que varre a tela ao entrar */
.varredura{position:fixed; left:0; right:0; top:0; height:1px; z-index:5; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(201,168,76,0) 10%,rgba(226,194,102,.95) 50%,rgba(201,168,76,0) 90%,transparent 100%);
  box-shadow:0 0 18px 2px rgba(226,194,102,.45), 0 0 2px rgba(226,194,102,.9); animation:varre .62s cubic-bezier(.5,0,.3,1) forwards}
.varredura::after{content:""; position:absolute; left:0; right:0; bottom:1px; height:90px; background:linear-gradient(0deg,rgba(226,194,102,.10),transparent)}
@keyframes varre{0%{transform:translateY(0); opacity:0}12%{opacity:1}85%{opacity:.9}100%{transform:translateY(100vh); opacity:0}}
@media (min-width:821px){.varredura{left:290px}}

@media (max-width:820px){
  body::before{background-size:40px 40px}
  .lt-i{grid-template-columns:40px minmax(0,1fr) 14px}
  .lt-i > svg.chev{grid-column:3; grid-row:1}
  .lt-q{grid-column:2}
}
@media (prefers-reduced-motion: reduce){
  .content.saindo > *{transition:none; opacity:1; filter:none; transform:none}
  .tile,.tcard,.assin,.dia,.doc,.cartao-escola{transform:none !important}
  .varredura{display:none}
}


/* ============================================================================
   RODADA 3 · escultura viva
   A cena WebGL (escultura branca com aberturas e luz quente + filamento) fica atrás de tudo.
   Os painéis viram volumes de vidro esculpidos sobre ela; a barra lateral é uma parede moldada;
   o topo é um átrio aberto para a cena. Cursor próprio, poeira na troca de tela, som.
   ========================================================================== */
#cena3d{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block}
.com-cena body{background:#F2EEE7}
.com-cena body::before{opacity:.55}
.com-cena #fundo3d{display:none}

/* abertura: a escultura se forma primeiro, depois a interface aparece */
#root{transition:opacity .9s ease, transform 1.2s cubic-bezier(.2,.8,.2,1), filter .9s ease}
.abertura #root{opacity:0; transform:translateY(16px) scale(.99); filter:blur(10px)}

/* ---------- vidro esculpido ---------- */
.panel,.tile,.fig,.assin,.dia,.tcol,.doc,.cartao-escola,.legal,.dossie:not(.rm){
  background:linear-gradient(160deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.52) 55%,rgba(250,247,241,.6) 100%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(175%); backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(27,42,74,.05), inset 1px 0 0 rgba(255,255,255,.5),
    0 1px 2px rgba(27,42,74,.06), 0 10px 24px -14px rgba(27,42,74,.22), 0 48px 90px -48px rgba(27,42,74,.38) !important}
.panel{border-radius:26px}
.tile{border-radius:22px}

/* painéis com recortes orgânicos: raios grandes e assimétricos */
.vidro-forte{border-radius:40px 110px 40px 84px / 40px 72px 40px 64px !important}
.tl-panel{border-radius:28px 28px 96px 28px / 28px 28px 70px 28px}
.g-hero > .panel:nth-child(2){border-radius:28px 28px 28px 104px / 28px 28px 28px 72px}
.g-side > .pilha > .panel:first-child{border-radius:64px 28px 28px 28px / 48px 28px 28px 28px}
.kanban .tcol:first-child{border-radius:36px 16px 16px 16px} .kanban .tcol:last-child{border-radius:16px 36px 16px 16px}

/* janelas ovais esculpidas no painel da nota, com luz quente por dentro */
.hero-nota{
  -webkit-mask:radial-gradient(26px 40px at 9% 56%,#0000 97%,#000 100%),radial-gradient(18px 28px at 91% 46%,#0000 97%,#000 100%);
  -webkit-mask-composite:source-in; mask:radial-gradient(26px 40px at 9% 56%,#0000 97%,#000 100%) intersect,radial-gradient(18px 28px at 91% 46%,#0000 97%,#000 100%)}
.hero-nota::before{content:""; background:none; inset:auto; position:absolute; left:9%; top:56%; width:52px; height:80px; translate:-50% -50%; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.9), inset 0 0 18px 4px rgba(244,190,96,.55), 0 0 22px 2px rgba(244,190,96,.35), 0 0 0 7px rgba(255,255,255,.35)}
.hero-nota .janela2{position:absolute; left:91%; top:46%; width:36px; height:56px; translate:-50% -50%; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.9), inset 0 0 12px 3px rgba(244,190,96,.5), 0 0 16px 2px rgba(244,190,96,.3), 0 0 0 6px rgba(255,255,255,.3)}
@media (max-width:820px){.hero-nota{-webkit-mask:none; mask:none}.hero-nota::before,.hero-nota .janela2{display:none}}

/* ---------- barra lateral: parede moldada, borda curva ---------- */
/* Borda direita em onda contínua e suave (máscara SVG esticada na altura): parece moldada de uma peça,
   nunca "cortada". O fio de luz segue exatamente a mesma onda. */
.side{border-radius:30px !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H95C99 120 88 250 92 400S100 650 93 800S95 960 95 1000H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H95C99 120 88 250 92 400S100 650 93 800S95 960 95 1000H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  background:linear-gradient(100deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.62) 70%,rgba(245,241,233,.7) 100%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(170%); backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 18px 0 30px -24px rgba(255,255,255,.9) !important;
  padding-right:26px}
.side::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4BE60' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23F4BE60' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23F4BE60' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M92 30C96 140 85 250 89 400S97 650 90 800S92 950 92 970' fill='none' stroke='url(%23g)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  filter:drop-shadow(0 0 6px rgba(244,190,96,.55))}

/* ---------- topo: átrio aberto para a cena ---------- */
.top{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0}
.content > .head:first-child{padding:5vh 0 2vh; min-height:24vh; align-items:flex-end; position:relative}
.content[data-tela="inicio"] > .head:first-child{min-height:34vh}
.head h1{font-size:clamp(40px,4.6vw,68px); text-shadow:0 1px 0 rgba(255,255,255,.6)}
.head p{max-width:34rem; background:linear-gradient(90deg,rgba(242,238,231,.75),rgba(242,238,231,0)); padding:4px 0}
/* camadas sobrepostas: os números sobem um pouco sobre o átrio */
.tiles{position:relative; z-index:2; margin-top:-10px}
.g-hero{position:relative; z-index:1}

/* ---------- poeira da transição ---------- */
#poeira{position:fixed; inset:0; width:100vw; height:100vh; z-index:45; pointer-events:none; display:none}
#poeira.ativo{display:block}
.content.pulverizada{opacity:0 !important; transition:none !important}
.content.pulverizada > *{animation:none !important}
.content.materializa{animation:materializa .35s ease both}
@keyframes materializa{from{opacity:0; filter:blur(3px)}to{opacity:1; filter:none}}

/* ---------- cursor próprio ---------- */
html.cursor-proprio,html.cursor-proprio *{cursor:none !important}
html.cursor-proprio input,html.cursor-proprio textarea{cursor:text !important}
#cursor,#cursor-ponto{position:fixed; left:0; top:0; z-index:100; pointer-events:none}
#cursor{width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1px solid rgba(27,42,74,.45);
  transition:width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), margin .3s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s, opacity .3s}
#cursor.sobre{width:58px; height:58px; margin:-29px 0 0 -29px; border-color:rgba(201,168,76,.9); background:rgba(226,194,102,.12); box-shadow:0 0 18px rgba(226,194,102,.35)}
#cursor.texto{width:4px; height:26px; margin:-13px 0 0 -2px; border-radius:2px; background:rgba(27,42,74,.5); border-color:transparent}
#cursor.aperta{width:26px; height:26px; margin:-13px 0 0 -13px}
#cursor.fora,#cursor.fora + #cursor-ponto{opacity:0}
#cursor-ponto{width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--navy)}

/* ---------- botão de som ---------- */
.som{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:999px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(27,42,74,.1)}
.som svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.som.on{color:var(--navy)} .som.on .onda{stroke:var(--amber); animation:onda 1.8s ease-in-out infinite}
@keyframes onda{50%{opacity:.35}}
.som:focus-visible{outline:2px solid var(--navy-2)}

@media (max-width:820px){
  .content > .head:first-child,.content[data-tela="inicio"] > .head:first-child{min-height:0; padding-top:20vh}
  .som span{display:none}
  .side{border-radius:26px}
}
@media (prefers-reduced-motion: reduce){
  .abertura #root{opacity:1; transform:none; filter:none}
  .som.on .onda{animation:none}
}

/* faixa de números da mesa e chips sobre a cena: sempre com vidro por trás (contraste AA) */
.abas{gap:12px !important; border:0 !important}
.aba{border-radius:20px !important; background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.62)) !important;
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px -14px rgba(27,42,74,.25) !important; border:1px solid rgba(255,255,255,.75) !important}
.chip{background:rgba(255,255,255,.78) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.chip[aria-pressed="true"]{background:var(--navy) !important}

/* ---------- RODADA 4 · brilho de vidro que SOBE nos botões e chips ----------
   Ao passar o mouse, uma lâmina de vidro desliza de baixo para cima, com um fio especular na borda
   de cima varrendo para o alto, e o botão se ergue de leve. Igual em botões, chips, horários e no Som. */
.btn,.chip,.hora,.som,.seg button,.demo-troca a{position:relative; overflow:hidden; isolation:isolate}
.btn::after,.chip::after,.hora::after,.som::after,.seg button::after,.demo-troca a::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(201,168,76,.85) 0,rgba(201,168,76,.85) 1.5px,rgba(201,168,76,0) 2px) top/100% 100% no-repeat,
    linear-gradient(180deg,rgba(226,194,102,.30) 0%,rgba(226,194,102,.12) 40%,rgba(46,70,119,.05) 100%);
  transform:translateY(102%); opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease}
.btn:hover::after,.chip:hover::after,.hora:hover::after,.som:hover::after,.seg button:hover::after,.demo-troca a:hover::after,
.btn:focus-visible::after,.chip:focus-visible::after{transform:translateY(0); opacity:1}
/* nos escuros (marinho), a lâmina é mais discreta e o fio, âmbar */
.btn-gold::after,.chip[aria-pressed="true"]::after,.seg button[aria-pressed="true"]::after,.demo-troca a[aria-current="true"]::after{
  background:
    linear-gradient(180deg,rgba(244,205,120,1) 0,rgba(244,205,120,1) 1.5px,rgba(244,205,120,0) 2px) top/100% 100% no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 45%,rgba(255,255,255,.02) 100%)}
/* erguida */
.btn:hover{transform:translate(var(--tx,0),calc(var(--ty,0px) - 2px)); box-shadow:0 10px 22px -12px rgba(27,42,74,.45), inset 0 1px 0 rgba(255,255,255,.7)}
.chip,.hora,.som,.demo-troca a{transition:transform .35s cubic-bezier(.2,.9,.25,1.2), box-shadow .3s, background .25s, border-color .25s}
.chip:hover,.hora:not([disabled]):hover,.som:hover{transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(27,42,74,.4)}
.btn[disabled]::after,.hora[disabled]::after{display:none}
@media (prefers-reduced-motion: reduce){
  .btn::after,.chip::after,.hora::after,.som::after,.seg button::after,.demo-troca a::after{transition:opacity .2s; transform:none}
  .btn:hover,.chip:hover,.hora:hover,.som:hover{transform:none}
}

/* RODADA 5 · véu perolado atrás da saudação e do subtítulo: nenhum ponto de luz da cena
   pode ficar atrás do texto do átrio (contraste garantido sobre qualquer região da escultura). */
.content > .head:first-child::before{content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-60px; top:10%; width:min(900px,78vw); bottom:-12px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(244,240,233,.86) 0%,rgba(244,240,233,.7) 55%,rgba(244,240,233,0) 100%);
  filter:blur(6px)}
.content > .head:first-child{isolation:isolate}
.head p{background:none}

/* ---------- RODADA 5 · registrar ato processual ---------- */
.ato{border:1px solid rgba(201,168,76,.45) !important}
.ato-tipos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.ato-tipo{all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:10px; align-items:center; padding:11px 12px; border-radius:12px; font-size:12.5px; font-weight:600; line-height:1.25; color:var(--ink-2);
  background:rgba(255,255,255,.7); border:1px solid rgba(27,42,74,.1); transition:transform .3s cubic-bezier(.2,.9,.25,1.2), border-color .2s, background .2s; position:relative; overflow:hidden; isolation:isolate}
.ato-tipo svg{width:20px; height:20px; flex:none; fill:none; stroke:var(--navy-2); stroke-width:1.6}
.ato-tipo:hover{transform:translateY(-2px); border-color:rgba(201,168,76,.6)}
.ato-tipo[aria-pressed="true"]{background:linear-gradient(135deg,#22345C,#1B2A4A); color:#FBF5E3; border-color:transparent; box-shadow:0 10px 22px -12px rgba(27,42,74,.6)}
.ato-tipo[aria-pressed="true"] svg{stroke:#E8C96A}
.ato-tipo:focus-visible{outline:2px solid var(--navy-2)}
.drop-sm{padding:14px 16px !important; gap:4px}
.oferta-ato{display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:14px 18px; border-radius:16px;
  background:rgba(251,243,220,.9); border:1px solid rgba(201,168,76,.5); box-shadow:0 12px 28px -18px rgba(27,42,74,.4); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.oferta-ato b{display:block; color:var(--navy)}

/* ---------- RODADA 5 · fluxo do processo: tribunal × nossos atos ---------- */
.fluxo-leg{display:flex; gap:18px; flex-wrap:wrap; margin:-6px 0 18px; font-size:12px; color:var(--muted)}
.fluxo-leg .lg{display:inline-flex; gap:8px; align-items:center}
.fluxo-leg svg{width:22px; height:22px; padding:4px; border-radius:50%; fill:none; stroke-width:1.6}
.fluxo-leg .trib svg{background:var(--navy); stroke:#E8C96A} .fluxo-leg .nos svg{background:rgba(201,168,76,.2); stroke:var(--gold-ink)}
.fluxo .tl-item.nos .tl-body{background:linear-gradient(90deg,rgba(251,243,220,.75),rgba(251,243,220,.25)); border:1px solid rgba(201,168,76,.28); border-radius:14px; padding:12px 14px}
.fluxo .tl-item.trib .tl-body{padding:2px 0 0}
.fluxo .tl-item{scroll-margin-top:90px}
.fluxo .tl-item:target .tl-body{box-shadow:0 0 0 2px rgba(201,168,76,.7); border-radius:14px}
.respondida,.em-resposta{display:inline-flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ok); text-decoration:none; border-radius:10px; padding:6px 10px; background:var(--ok-soft); width:max-content; max-width:100%}
.respondida svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none}
.em-resposta{color:var(--navy-2); background:rgba(46,70,119,.08)}
.respondida:hover,.em-resposta:hover{filter:brightness(.96)}
.ato-valor{font-family:var(--f-mono); font-size:12.5px; font-weight:500; color:var(--navy); padding:4px 10px; border-radius:8px; background:rgba(27,42,74,.06)}
.pill svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7}

/* cabeçalho fixo: vidro por trás, para o conteúdo que rola não colidir com os botões do topo */
.top{background:linear-gradient(180deg,rgba(244,240,233,.86),rgba(244,240,233,.62)) !important; -webkit-backdrop-filter:blur(16px) saturate(150%) !important; backdrop-filter:blur(16px) saturate(150%) !important;
  border-bottom:1px solid rgba(27,42,74,.06) !important; z-index:20}

/* ---------- RODADA 6 · todos os processos ---------- */
.abas{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important}
.cart-ctrl{display:grid; grid-template-columns:minmax(0,1fr) 220px 220px; gap:10px; margin-bottom:12px}
.cart-lista{display:grid}
.cart-linha{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) 120px minmax(0,1.1fr) auto 14px; gap:16px; align-items:center; padding:14px 10px; margin:0 -10px;
  border-bottom:1px solid var(--line); border-radius:12px; cursor:pointer; transition:background .2s}
.cart-linha:last-child{border-bottom:0}
.cart-linha:hover{background:rgba(201,168,76,.08)}
.cart-linha:focus-visible{outline:2px solid var(--navy-2)}
.cart-linha .nm{font-family:var(--f-display); font-size:16.5px; line-height:1.3; color:var(--ink)}
.cart-linha .num{font-size:11px; margin-top:2px}
.cl-data small{display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cl-data b{font-size:13px; font-weight:600}
.cl-pend{display:flex; gap:6px; flex-wrap:wrap}
.cl-ato{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; gap:6px; align-items:center; height:32px; padding:0 10px; border-radius:9px; font-size:12px; font-weight:600; color:var(--navy);
  background:rgba(255,255,255,.75); border:1px solid rgba(27,42,74,.12); position:relative; overflow:hidden; isolation:isolate; transition:transform .3s cubic-bezier(.2,.9,.25,1.2), border-color .2s}
.cl-ato svg{width:16px; height:16px; fill:none; stroke:var(--gold-ink); stroke-width:1.7}
.cl-ato:hover{transform:translateY(-2px); border-color:rgba(201,168,76,.7); background:rgba(251,243,220,.95)}
.cl-ato:focus-visible{outline:2px solid var(--navy-2)}
@media (max-width:1100px){ .cart-linha{grid-template-columns:minmax(0,1fr) 110px auto 14px} .cl-emp,.cl-pend{grid-column:1} .cl-emp{grid-row:2} .cl-pend{grid-row:3} .cl-ato{grid-column:3; grid-row:1} }
@media (max-width:820px){ .cart-ctrl{grid-template-columns:minmax(0,1fr)} .cart-linha{grid-template-columns:minmax(0,1fr) auto} .cl-data,.cl-emp,.cl-pend{grid-column:1} .cl-ato{grid-column:2; grid-row:1 / span 2; padding:0 9px} .cl-ato span{display:none} .cart-linha > svg.chev{display:none} }

/* ---------- RODADA 6 · registrar ato de qualquer lugar ---------- */
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7}
.modal-ato{position:fixed; inset:0; z-index:60; display:grid; place-items:start center; padding:6vh 16px; overflow-y:auto}
.modal-fundo{position:fixed; inset:0; background:rgba(27,42,74,.22); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:sobe .25s ease both}
.modal-caixa{position:relative; width:min(860px,100%); border-radius:26px; padding:22px 26px 24px; display:grid; gap:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(250,247,241,.9)); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.85); box-shadow:0 40px 90px -30px rgba(27,42,74,.55), inset 0 1px 0 #fff; animation:monta .4s cubic-bezier(.2,.8,.2,1) both}
.modal-caixa > header{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-right:44px}
.modal-caixa > header h2{font-size:26px}
.modal-caixa > header .lid-x{position:absolute; right:18px; top:16px; background:rgba(27,42,74,.08)}
.modal-caixa > header .lid-x svg{stroke:var(--navy)}
.ato-lista{display:grid; gap:6px; max-height:46vh; overflow-y:auto}
.ato-op{all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:2px; padding:11px 14px; border-radius:12px; background:rgba(255,255,255,.75); border:1px solid rgba(27,42,74,.08); transition:background .2s, border-color .2s, transform .25s}
.ato-op .nm{font-family:var(--f-display); font-size:16px; color:var(--ink)}
.ato-op:hover,.ato-op:focus-visible{background:rgba(251,243,220,.95); border-color:rgba(201,168,76,.6); outline:none; transform:translateX(3px)}
.ato-op.primeiro{border-color:rgba(201,168,76,.55); box-shadow:inset 3px 0 0 var(--amber)}
.ato-escolhido{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 16px; border-radius:14px; background:rgba(251,243,220,.85); border:1px solid rgba(201,168,76,.45)}
.ato-escolhido .nm{font-family:var(--f-display); font-size:18px; color:var(--ink)}
.ato-no-modal{display:block}
.vira-ato{display:flex; gap:14px; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:12px 14px; margin-bottom:6px; border-radius:12px; background:rgba(251,243,220,.8); border:1px solid rgba(201,168,76,.4); font-size:13px}
@media (max-width:820px){ .modal-ato{padding:12px 8px} .modal-caixa{padding:18px 14px 20px; border-radius:20px} }
/* Processos é tela de trabalho: cabeçalho compacto, para a lista aparecer logo */
.content[data-tela="processos"] > .head:first-child{min-height:0 !important; padding:1vh 0 0 !important}
.content[data-tela="processos"] .head h1{font-size:clamp(34px,3.4vw,48px)}
.content[data-tela="processos"] .abas{margin-bottom:10px}
.content[data-tela="processos"] .aba{padding:14px 18px !important}
.content[data-tela="processos"] .aba .v{font-size:30px}
@media (max-width:820px){ .content[data-tela="processos"] > .head:first-child{padding-top:3vh !important} }

/* ---------- recursos desligados: "em breve" para o cliente, o que falta para o escritório ---------- */
.em-breve{text-align:center; padding:40px 28px !important; display:grid; gap:10px; justify-items:center}
.em-breve .micro{color:var(--gold-ink); padding:4px 10px; border-radius:999px; background:rgba(201,168,76,.14)}
.em-breve h2{font-size:26px}
.em-breve p{margin:0; max-width:44ch; color:var(--ink-2); font-size:14px}
.aviso-recurso{font-size:13px; padding:12px 16px; border-radius:14px; background:rgba(46,70,119,.07); border:1px dashed rgba(46,70,119,.3); color:var(--ink-2)}
.aviso-recurso b{color:var(--navy)}

/* Lidiane fora do Início: só o orbe, no canto, sem cobrir os botões das linhas; e espaço no fim da página */
.lid:not(.com-nome):not(.aberta) .lid-bolha{padding:6px; gap:0}
.lid:not(.com-nome):not(.aberta) .lid-nome{display:none}
.content{padding-bottom:max(120px, calc(96px + env(safe-area-inset-bottom,0px))) !important}
.filtro-emp{gap:10px; margin-bottom:6px} .filtro-emp .box{min-width:280px; max-width:100%}

/* ---------- gestão de usuários ---------- */
.usr-sit{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.usr-acoes{display:grid; gap:10px; border-top:1px solid var(--line); padding-top:14px}
.usr-acoes > div{display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.6); border:1px solid rgba(27,42,74,.07)}
.usr-acoes > div > b{color:var(--navy)}
.usr-acoes > div > .box{grid-column:1 / -1}
.usr-acoes .perigo{background:rgba(178,58,53,.05); border-color:rgba(178,58,53,.25)}
.btn-perigo{color:var(--crit) !important; border-color:rgba(178,58,53,.4) !important}
.btn-perigo:hover{background:rgba(178,58,53,.08) !important}
.senha-uma-vez{border:1px solid rgba(178,58,53,.35) !important}
.senha-uma-vez .senha-temp{font-family:var(--f-mono); font-size:20px; letter-spacing:.06em; padding:10px 14px; border-radius:10px; background:#fff; border:1px dashed rgba(27,42,74,.25)}
@media (max-width:820px){ .usr-acoes > div{grid-template-columns:minmax(0,1fr)} }