/* =====================================================================
   OK Legis — wireframes animados das funcionalidades
   Animações disparam quando .wire recebe a classe .in-view (wireframes.js)
   ===================================================================== */

.wire { display: flex; flex-direction: column; }
.wire .wtop .wbar { background: rgba(255,255,255,.18); }

/* ---------- VOTING ---------- */
.w-voting { display: flex; gap: 12px; height: 100%; align-items: center; }
.w-voting__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; }
.w-seat { aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,.16); transition: background .35s; }
.in-view .w-seat { animation: seatVote .5s forwards; }
.in-view .w-seat:nth-child(3n) { animation-delay: .15s; background: #ff6b7d; }
.in-view .w-seat:nth-child(4n) { animation-delay: .3s; }
@keyframes seatVote { to { background: #4cd99a; } }
.in-view .w-seat:nth-child(3n) { animation: none; background: #ff6b7d; }
.w-voting__bars { width: 78px; display: flex; flex-direction: column; gap: 6px; }
.w-vb { font-size: 8px; font-weight: 700; }
.w-vb b { display: block; margin-bottom: 2px; opacity: .85; }
.w-vb__fill { display: block; height: 7px; border-radius: 4px; width: 0; transition: width 1s ease .2s; }
.w-vb.sim .w-vb__fill { background: #4cd99a; }
.w-vb.nao .w-vb__fill { background: #ff6b7d; }
.w-vb.abs .w-vb__fill { background: #ffce5a; }
.in-view .w-vb.sim .w-vb__fill { width: 70%; }
.in-view .w-vb.nao .w-vb__fill { width: 25%; }
.in-view .w-vb.abs .w-vb__fill { width: 12%; }

/* ---------- TERMINAL (biometria) ---------- */
.w-terminal { align-items: center; text-align: center; gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-face { position: relative; width: 70px; height: 70px; border-radius: 14px; border: 2px solid rgba(95,224,236,.5); display: grid; place-items: center; overflow: hidden; }
.w-face i { font-size: 2.4rem; color: rgba(255,255,255,.6); }
.w-scanline { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #5fe0ec, transparent); box-shadow: 0 0 8px #5fe0ec; }
.in-view .w-scanline { animation: scan 1.4s ease-in-out infinite; }
@keyframes scan { 0%,100% { top: 2px; } 50% { top: 64px; } }
.w-check { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; color: #4cd99a; opacity: 0; }
.in-view .w-check { animation: fadeUp .4s forwards 1.2s; }
.w-pill { display: none; }
.w-vote-btns { display: flex; gap: 6px; }
.w-vbtn { font-size: 8px; font-weight: 800; padding: 3px 10px; border-radius: 5px; opacity: .5; }
.w-vbtn.sim { background: #4cd99a; } .w-vbtn.nao { background: #ff6b7d; }
.in-view .w-vbtn.sim { animation: pressBtn .5s forwards 1.5s; }
@keyframes pressBtn { 0%{opacity:.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.12);} 100%{opacity:1;transform:scale(1);} }

/* ---------- MIC ---------- */
.w-mic { align-items: center; text-align: center; gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-mic__icon { font-size: 2rem; color: #5fe0ec; }
.in-view .w-mic__icon { animation: micglow 1.6s ease-in-out infinite; }
@keyframes micglow { 0%,100%{ text-shadow: 0 0 0 rgba(95,224,236,0);} 50%{ text-shadow: 0 0 16px rgba(95,224,236,.9);} }
.w-eq { display: flex; gap: 3px; align-items: flex-end; height: 26px; }
.w-eq span { width: 4px; background: #5fe0ec; border-radius: 2px; height: 6px; }
.in-view .w-eq span { animation: eq .9s ease-in-out infinite; }
.in-view .w-eq span:nth-child(2){animation-delay:.1s}.in-view .w-eq span:nth-child(3){animation-delay:.2s}
.in-view .w-eq span:nth-child(4){animation-delay:.3s}.in-view .w-eq span:nth-child(5){animation-delay:.15s}
.in-view .w-eq span:nth-child(6){animation-delay:.25s}.in-view .w-eq span:nth-child(7){animation-delay:.05s}
@keyframes eq { 0%,100%{height:6px;} 50%{height:24px;} }
.w-mic small { color: rgba(255,255,255,.6); font-size: 9px; }

/* ---------- toggle reutilizável ---------- */
.w-toggle { width: 34px; height: 18px; border-radius: 100px; background: rgba(255,255,255,.2); position: relative; display: inline-block; }
.w-toggle__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .4s, background .4s; }
.in-view .w-toggle { background: rgba(76,217,154,.5); }
.in-view .w-toggle__knob { left: 18px; background: #4cd99a; }

/* ---------- CAMERA ---------- */
.w-camera { gap: 8px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.w-cam__view { position: relative; height: 60px; border-radius: 8px; background: repeating-linear-gradient(45deg,#16284d,#16284d 8px,#13223f 8px,#13223f 16px); display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #ff6b7d; }
.w-cam__view i { position: absolute; font-size: 1.6rem; color: rgba(255,255,255,.5); }
.w-rec { width: 7px; height: 7px; border-radius: 50%; background: #ff6b7d; position: absolute; top: 8px; right: 24px; }
.in-view .w-rec { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.w-cam__presets { display: flex; gap: 6px; }
.w-preset { flex: 1; height: 10px; border-radius: 4px; background: rgba(255,255,255,.16); }
.in-view .w-preset.active { animation: presetSwitch 3s steps(1) infinite; }
@keyframes presetSwitch { 0%{background:#5fe0ec;} 33%{background:rgba(255,255,255,.16);} }

/* ---------- SIGNATURE ---------- */
.w-sign { gap: 10px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.w-doc { position: relative; background: rgba(255,255,255,.06); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.w-doc .wbar { background: rgba(255,255,255,.16); }
.w-sign__svg { position: absolute; bottom: 6px; right: 10px; width: 110px; height: 38px; }
.w-sign__svg path { stroke-dasharray: 400; stroke-dashoffset: 400; }
.in-view .w-sign__svg path { animation: draw 1.8s ease forwards .3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.w-cert { font-size: 9px; color: #4cd99a; display: inline-flex; align-items: center; gap: 4px; opacity: 0; }
.in-view .w-cert { animation: fadeUp .4s forwards 1.8s; }

/* ---------- PROTOCOL ---------- */
.w-protocol { gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-proto__row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); padding: 7px 9px; border-radius: 7px; }
.w-proto__row i { color: #5fe0ec; }
.w-proto__row .wbar { flex: 1; background: rgba(255,255,255,.16); }
.w-num { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.7); }
.w-proto__row.is-new { opacity: 0; }
.in-view .w-proto__row.is-new { animation: slideIn .5s forwards .6s; }
.in-view .w-proto__row.is-new .w-num { color: #4cd99a; }

/* ---------- PORTAL ---------- */
.w-portal { gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-portal__head { display: flex; align-items: center; gap: 8px; } .w-portal__head i { color: #5fe0ec; }
.w-portal__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.w-portal__grid span { aspect-ratio: 1; border-radius: 6px; background: rgba(255,255,255,.1); }
.in-view .w-portal__grid span { animation: popIn .4s backwards; }
.in-view .w-portal__grid span:nth-child(2){animation-delay:.1s}.in-view .w-portal__grid span:nth-child(3){animation-delay:.2s}.in-view .w-portal__grid span:nth-child(4){animation-delay:.3s}
.w-portal__list { display: flex; flex-direction: column; gap: 5px; }
.w-portal__list .wbar { background: rgba(255,255,255,.14); }

/* ---------- API ---------- */
.w-api { gap: 10px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-code { background: rgba(0,0,0,.3); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 9px; font-family: monospace; }
.w-code .w-line { color: #cfe0ff; opacity: 0; white-space: nowrap; }
.w-code .w-line b { color: #5fe0ec; } .w-code .w-line.ok { color: #4cd99a; }
.in-view .w-code .w-line { animation: typeLine .3s forwards; }
.in-view .w-code .w-line:nth-child(1){animation-delay:.2s}.in-view .w-code .w-line:nth-child(2){animation-delay:.7s}.in-view .w-code .w-line:nth-child(3){animation-delay:1.1s}
.w-api__nodes { display: flex; gap: 14px; justify-content: center; }
.w-api__nodes span { width: 12px; height: 12px; border-radius: 50%; background: #5fe0ec; position: relative; }
.w-api__nodes span:not(:last-child)::after { content:""; position:absolute; left:12px; top:5px; width:14px; height:2px; background: rgba(95,224,236,.4); }
.in-view .w-api__nodes span { animation: popIn .4s backwards 1.2s; }

/* ---------- AUDIT ---------- */
.w-audit { gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-audit__row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); padding: 7px 9px; border-radius: 7px; }
.w-audit__row i { color: #5fe0ec; } .w-audit__row .wbar { flex: 1; background: rgba(255,255,255,.16); }
.w-tick { width: 14px; height: 14px; border-radius: 50%; background: #4cd99a; position: relative; opacity: 0; }
.w-tick::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:9px; color:#06281c; }
.in-view .w-tick { animation: popIn .4s forwards; }
.in-view .w-audit__row:nth-child(3) .w-tick { animation-delay: .3s; }
.w-lgpd { font-size: 8px; font-weight: 800; background: #1aa179; padding: 2px 6px; border-radius: 4px; }

/* ---------- NOTIFICATIONS ---------- */
.w-notif { position: relative; gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-notif__card { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); padding: 9px; border-radius: 8px; opacity: 0; }
.w-notif__card i { color: #5fe0ec; } .w-notif__card:last-of-type i { color: #4cd99a; }
.w-notif__card .wbar { flex: 1; background: rgba(255,255,255,.16); }
.in-view .w-notif__card { animation: slideIn .5s forwards; }
.in-view .w-notif__card:nth-of-type(2) { animation-delay: .4s; }
.w-notif__badge { position: absolute; top: 4px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: #ff6b7d; color:#fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; transform: scale(0); }
.in-view .w-notif__badge { animation: popIn .4s forwards .8s; }

/* ---------- DARKMODE ---------- */
.w-dark { gap: 12px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-dark__switch { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; color: rgba(255,255,255,.7); }
.w-dark__panel { background: rgba(255,255,255,.06); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; transition: background .5s; }
.w-dark__panel .wbar { background: rgba(255,255,255,.16); }
.in-view .w-dark__panel { background: rgba(0,0,0,.35); }

/* ---------- REPORTS ---------- */
.w-reports { display: grid; place-items: center; height: 100%; }
.w-chart { display: flex; gap: 8px; align-items: flex-end; height: 80px; }
.w-chart span { width: 16px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg,#5fe0ec,#1763d6); height: 0; }
.in-view .w-chart span { animation: barUp .9s ease forwards; height: var(--h); }
.in-view .w-chart span:nth-child(2){animation-delay:.1s}.in-view .w-chart span:nth-child(3){animation-delay:.2s}
.in-view .w-chart span:nth-child(4){animation-delay:.3s}.in-view .w-chart span:nth-child(5){animation-delay:.4s}
@keyframes barUp { from { height: 0; } }

/* ---------- USERS ---------- */
.w-users { gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-user { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); padding: 7px 9px; border-radius: 7px; opacity: 0; }
.w-ava { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(120deg,#7a5cff,#18c7d6); }
.w-user .wbar { flex: 1; background: rgba(255,255,255,.16); }
.w-role { font-size: 8px; font-weight: 700; color: #5fe0ec; background: rgba(95,224,236,.12); padding: 2px 6px; border-radius: 4px; }
.in-view .w-user { animation: slideIn .5s forwards; }
.in-view .w-user:nth-child(2){animation-delay:.15s}.in-view .w-user:nth-child(3){animation-delay:.3s}

/* ---------- PROCESS (timeline) ---------- */
.w-process { gap: 14px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-timeline { display: flex; align-items: center; }
.w-tl-dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.18); flex: 0 0 auto; position: relative; }
.w-tl-dot.done { background: #4cd99a; } .w-tl-dot.active { background: #5fe0ec; }
.in-view .w-tl-dot.active { animation: pulse 1.3s ease-in-out infinite; }
.w-tl-line { height: 3px; flex: 1; background: rgba(255,255,255,.16); }
.in-view .w-tl-line { background: linear-gradient(90deg,#4cd99a,rgba(255,255,255,.16)); }
.w-doc-pdf { align-self: center; font-size: 10px; font-weight: 700; color: #ff8a8a; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.06); padding: 5px 12px; border-radius: 6px; }
.w-doc-pdf i { font-size: 1rem; }

/* ---------- GENERIC ---------- */
.w-generic { gap: 8px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.w-generic .wbar { background: rgba(255,255,255,.16); height: 10px; }
.in-view .w-generic .wbar { animation: slideIn .5s backwards; }
.in-view .w-generic .wbar:nth-child(2){animation-delay:.1s}.in-view .w-generic .wbar:nth-child(3){animation-delay:.2s}.in-view .w-generic .wbar:nth-child(4){animation-delay:.3s}

/* ---------- keyframes compartilhados ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px);} to { opacity: 1; transform: translateX(0);} }
@keyframes popIn { from { opacity: 0; transform: scale(.4);} to { opacity: 1; transform: scale(1);} }
@keyframes typeLine { from { opacity: 0; transform: translateX(-6px);} to { opacity: 1; transform: translateX(0);} }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(95,224,236,.6);} 50%{ box-shadow: 0 0 0 7px rgba(95,224,236,0);} }

/* ===== Feature: Painel de Votação (fotos votando) ===== */
.fv { position: absolute; inset: 0; padding: 12px 14px; display: flex; flex-direction: column; color: #eaf1fb; }
.fv-head { font-size: 9px; font-weight: 700; color: #cfe0ff; display: flex; gap: 5px; align-items: center; margin-bottom: 8px; }
.fv-head i { color: #5fe0ec; }
.fv-ap { margin-left: auto; font-size: 8px; font-weight: 800; color: #4cd99a; background: rgba(34,197,94,.16); padding: 1px 7px; border-radius: 999px; opacity: 0; }
.in-view .fv-ap { animation: fvApIn .4s forwards 1.5s; }
@keyframes fvApIn { to { opacity: 1; } }
.fv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; flex: 1; }
.fv-seat { position: relative; border-radius: 5px; overflow: hidden; background: #16306e; }
.fv-seat img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.fv-seat::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 5px; transition: border-color .3s; }
.fv-v { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 7px; opacity: 0; transform: scale(.3); }
.fv-seat.sim .fv-v { background: #22c55e; } .fv-seat.nao .fv-v { background: #ff6b7d; } .fv-seat.abs .fv-v { background: #fcd34d; color: #1a1300; }
.in-view .fv-v { animation: fvPop .45s forwards; animation-delay: calc(var(--k) * .12s); }
.in-view .fv-seat.sim::after { animation: fvRingS .4s forwards; animation-delay: calc(var(--k) * .12s); }
.in-view .fv-seat.nao::after { animation: fvRingN .4s forwards; animation-delay: calc(var(--k) * .12s); }
@keyframes fvPop { to { opacity: 1; transform: scale(1); } }
@keyframes fvRingS { to { border-color: rgba(34,197,94,.8); } }
@keyframes fvRingN { to { border-color: rgba(255,107,125,.8); } }
.fv-tally { display: flex; gap: 10px; margin-top: 8px; font-size: 9px; font-weight: 700; }
.fv-t b { margin-right: 3px; } .fv-t.sim { color: #4cd99a; } .fv-t.nao { color: #ff8a98; } .fv-t.abs { color: #fcd34d; }

/* ===== Feature: Terminal + biometria facial ===== */
.ft { position: absolute; inset: 0; overflow: hidden; }
.ft-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ft::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,13,29,.25), rgba(6,13,29,.78)); }
.ft-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.ft-base { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 2; }
.ft-tick { stroke: rgba(34,197,94,.35); stroke-width: 4; stroke-linecap: round; }
.in-view .ft-tick { animation: ftSweep 3s linear infinite; }
@keyframes ftSweep { 0%,100% { stroke: rgba(34,197,94,.35); filter: none; } 10% { stroke: #4ade80; filter: drop-shadow(0 0 4px #22c55e); } 20% { stroke: rgba(34,197,94,.35); filter: none; } }
.ft-check { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%) scale(.3); z-index: 3; width: 34px; height: 34px; border-radius: 50%; background: rgba(34,197,94,.96); color: #fff; display: grid; place-items: center; font-size: 1.1rem; opacity: 0; box-shadow: 0 0 0 5px rgba(34,197,94,.25); }
.in-view .ft-check { animation: ftCheck 3.4s ease-in-out infinite; }
@keyframes ftCheck { 0%,60% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 72%,90% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.9); } }
.ft-cap { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; text-align: center; }
.ft-cap img { height: 15px; display: block; margin: 0 auto 4px; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); }
.ft-cap span { font-size: 8px; font-weight: 800; color: #4ade80; }

/* ===== Mocks FIÉIS à cena dentro dos cards de funcionalidade =====
   Desenhados na proporção 16:10 do card e escalados via JS (scaleFill) para
   preencher 100% do card em qualquer largura de coluna. */
.feat-mock { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, #0a1428, #0c1a37); }
.feat-mock > * { position: absolute; left: 50%; top: 50%; transform-origin: center; transform: translate(-50%, -50%) scale(.36); }
.feat-vp .okc__vp { width: 980px; height: 613px; min-height: 0; }
.feat-term .okc__term-tablet { width: 900px; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.feat-term .okc__term-cam { display: none; }

/* ===== Terminal: tela inicial (docs a votar + tempos de fala) + swal "VOTAÇÃO INICIADA" ===== */
.okc__th { position: absolute; inset: 0; z-index: 5; background: #fff; display: flex; flex-direction: column; color: #0f172a; transition: opacity .4s ease; }
.okc__term-tablet.is-vote .okc__th { opacity: 0; pointer-events: none; }
.okc__th-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: linear-gradient(135deg, #1763d6, #0f2f7a); color: #fff; }
.okc__th-logo { height: 22px; width: auto; }
.okc__th-meta { font-size: .78rem; opacity: .9; }
.okc__th-acts { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 1.05rem; opacity: .92; }
.okc__th-sair { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; background: rgba(255,255,255,.16); padding: 5px 12px; border-radius: 8px; }
.okc__th-body { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; min-height: 0; }
.okc__th-col { padding: 16px 18px; overflow: hidden; }
.okc__th-col:first-child { border-right: 1px solid #e6e9f0; }
.okc__th-tit { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #475569; display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.okc__th-tit i { color: #1763d6; }
.okc__th-doc { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid #e6e9f0; border-radius: 9px; margin-bottom: 9px; }
.okc__th-doc:first-of-type { border-color: #1763d6; box-shadow: 0 0 0 2px rgba(23,99,214,.12); }
.okc__th-dn { font-weight: 700; font-size: .9rem; }
.okc__th-dt { font-size: .76rem; color: #64748b; }
.okc__th-fala { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: .86rem; }
.okc__th-fala .okc__th-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #1763d6, #18c7d6); flex: 0 0 24px; }
.okc__th-fala b { font-weight: 600; }
.okc__th-fala em { margin-left: auto; font-style: normal; font-weight: 800; color: #1763d6; font-variant-numeric: tabular-nums; }
.okc__term-swal { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; background: rgba(3,8,22,.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.okc__term-swal.is-on { opacity: 1; }
.okc__term-swal-card { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; background: #fff; color: #0f172a; font-weight: 800; font-size: 2.9rem; letter-spacing: .06em; text-align: center; padding: 44px 64px; border-radius: 24px; box-shadow: 0 28px 70px rgba(0,0,0,.5); transform: scale(.8); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.okc__term-swal.is-on .okc__term-swal-card { transform: none; }
.okc__term-swal-card i { font-size: 3.6rem; color: #1763d6; }

/* ===== Feature: Portal da Produção Legislativa (biografia + frequência) ===== */
.fp-mock { background: linear-gradient(160deg, #0a1428, #0c1a37); }
.fp { width: 540px; height: 338px; background: #fff; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; color: #0f172a; }
.fp-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e9edf5; }
.fp-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.fp-bar > span:nth-child(1){background:#fca5a5} .fp-bar > span:nth-child(2){background:#fcd34d} .fp-bar > span:nth-child(3){background:#86efac}
.fp-url { margin-left: 8px; font-size: .72rem; color: #64748b; background: #fff; border: 1px solid #dbe2ec; border-radius: 6px; padding: 3px 10px; display: flex; align-items: center; gap: 5px; }
.fp-url i { color: #16a34a; font-size: .64rem; }
.fp-tabs { display: flex; gap: 6px; padding: 10px 14px 0; border-bottom: 1px solid #e6e9f0; }
.fp-tabs span { font-size: .76rem; font-weight: 700; color: #64748b; padding: 7px 12px; border-radius: 8px 8px 0 0; display: flex; align-items: center; gap: 6px; transition: all .3s; }
.fp-tabs span.on { color: #1763d6; background: #eef4ff; box-shadow: inset 0 -2px 0 #1763d6; }
/* layout com sidebar (foto) + conteúdo */
.fp-shell { display: flex; flex: 1; min-height: 0; }
.fp-side { flex: 0 0 132px; padding: 14px 12px; border-right: 1px solid #e6e9f0; background: #f6f8fc; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fp-photo { width: 94px; height: 108px; border-radius: 9px; overflow: hidden; box-shadow: 0 6px 16px rgba(15,23,42,.18); }
.fp-photo img { width: 100%; height: 100%; object-fit: cover; }
.fp-side b { font-size: .92rem; color: #0f9488; margin-top: 9px; }
.fp-side small { font-size: .72rem; color: #64748b; }
.fp-side-tag { margin-top: 6px; font-size: .64rem; font-weight: 700; color: #1763d6; background: #eef4ff; padding: 2px 9px; border-radius: 999px; }
.fp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-views { position: relative; flex: 1; }
.fp-view { position: absolute; inset: 0; padding: 14px 16px; opacity: 0; pointer-events: none; transition: opacity .4s ease; overflow: hidden; }
.fp-view.is-on { opacity: 1; pointer-events: auto; }
.fp-biohead { font-size: .82rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.fp-biohead i { color: #0f9488; }
.fp-line { height: 7px; border-radius: 4px; background: #e6e9f0; margin-bottom: 7px; }
.fp-line.w90 { width: 90%; } .fp-line.w80 { width: 80%; }
.fp-sub { font-size: .78rem; font-weight: 800; color: #1763d6; display: flex; align-items: center; gap: 6px; margin: 14px 0 10px; }
/* scroll infinito de proposições (cards menores com foto) */
.fp-marquee { overflow: hidden; }
.fp-track { display: flex; gap: 9px; width: max-content; }
.is-on .fp-track { animation: fpScroll 18s linear infinite; }
@keyframes fpScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fp-card { flex: 0 0 170px; display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e6e9f0; border-radius: 9px; padding: 8px 10px; }
.fp-card-av { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; overflow: hidden; }
.fp-card-av img { width: 100%; height: 100%; object-fit: cover; }
.fp-card-c { display: flex; flex-direction: column; min-width: 0; }
.fp-card-d { font-size: .62rem; font-weight: 700; color: #0ea5a0; }
.fp-card-t { font-size: .72rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 122px; }
/* barras de frequência */
.fp-fr { margin-bottom: 16px; }
.fp-fr-top { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; margin-bottom: 6px; }
.fp-fr-top span { font-weight: 600; color: #334155; } .fp-fr-top b { font-weight: 800; color: #16a34a; }
.fp-fr-track { height: 14px; border-radius: 8px; background: #eef2f8; overflow: hidden; }
.fp-fill { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #16a34a, #22c55e); transition: width 1.1s cubic-bezier(.4,0,.2,1); }
.fp-freq.is-on .fp-fill { width: var(--w); }

/* ===== Feature: Processo Legislativo Eletrônico (3 opções) ===== */
.fpe { display: flex; gap: 8px; flex: 1; align-items: stretch; padding-top: 6px; }
.fpe-card { flex: 1; min-width: 0; background: #fff; border-radius: 11px; padding: 11px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #0f172a; box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: transform .4s ease, box-shadow .4s ease; }
.fpe-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 7px; }
.fpe-card.nato .fpe-ic { background: #1763d6; color: #fff; }
.fpe-card.dig .fpe-ic { background: #d6f3e3; color: #16a34a; }
.fpe-card.anx .fpe-ic { background: #d9ecff; color: #1763d6; }
.fpe-card b { font-size: .76rem; font-weight: 800; color: #0f6aa8; margin-bottom: 6px; letter-spacing: .02em; }
.fpe-lines { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; width: 100%; padding: 0 6px; }
.fpe-lines i { display: block; height: 7px; border-radius: 4px; background: #e6e9f0; width: 90%; }
.fpe-lines i:nth-child(2) { width: 80%; }
.fpe-lines i:nth-child(3) { width: 60%; }
.fpe-badge { margin-top: 8px; font-size: .56rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: #94a3b8; color: #fff; }
.in-view .fpe-card { animation: fpeUp 6s ease-in-out infinite; }
.in-view .fpe-card.dig { animation-delay: 2s; }
.in-view .fpe-card.anx { animation-delay: 4s; }
@keyframes fpeUp { 0%,8%,40%,100% { transform: translateY(0); box-shadow: 0 4px 14px rgba(0,0,0,.14); } 16%,32% { transform: translateY(-8px); box-shadow: 0 16px 38px rgba(0,0,0,.3); } }

/* ===== Feature: Assinatura Eletrônica (posicionar + assinar) ===== */
.fsig { width: 980px; height: 613px; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); color: #0f172a; }
.fsig-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; border-bottom: 1px solid #e6e9f0; }
.fsig-top b { font-size: 1.35rem; font-weight: 800; color: #1f2d3d; }
.fsig-close { background: #e5476a; color: #fff; font-weight: 700; font-size: .8rem; padding: 8px 18px; border-radius: 6px; }
.fsig-pag { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #f4f6f9; border-bottom: 1px solid #e6e9f0; }
.fsig-pag span { background: #7b8794; color: #fff; font-size: .78rem; font-weight: 700; padding: 9px 16px; border-radius: 6px; white-space: nowrap; }
.fsig-pag em { flex: 1; text-align: center; font-style: normal; font-weight: 700; color: #475569; font-size: .92rem; }
.fsig-body { position: relative; flex: 1; display: flex; min-height: 0; }
.fsig-docwrap { flex: 1; min-width: 0; padding: 22px 38px; overflow: hidden; background: #fbfcfe; }
.fsig-doc { background: #fff; border: 1px solid #e6e9f0; box-shadow: 0 1px 5px rgba(0,0,0,.06); height: 100%; padding: 26px 36px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.fsig-l { height: 9px; border-radius: 3px; background: #e9edf2; display: block; }
.fsig-side { width: 300px; flex: 0 0 300px; border-left: 1px solid #e6e9f0; padding: 20px 24px; display: flex; flex-direction: column; gap: 13px; overflow: hidden; }
.fsig-side-tit { font-size: 1.5rem; font-weight: 400; color: #475569; margin: 0; border-bottom: 1px solid #e6e9f0; padding-bottom: 12px; }
.fsig-sign { background: #1f9d57; color: #fff; border: 0; font-weight: 800; font-size: .95rem; padding: 15px; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.fsig-sign.is-press { transform: scale(.96); background: #15803d; box-shadow: 0 0 0 5px rgba(31,157,87,.25); }
.fsig-as b { display: block; font-size: .95rem; color: #1f2d3d; }
.fsig-as span { font-size: .85rem; color: #475569; }
.fsig-lbl { font-size: .95rem; font-weight: 800; color: #1f2d3d; }
.fsig-cert { display: flex; align-items: center; gap: 12px; border: 1px solid #bfe6cf; background: #e9f8ef; border-radius: 8px; padding: 12px; }
.fsig-cert-badge { font-size: .5rem; font-weight: 800; text-align: center; line-height: 1.15; border: 2px solid #1f2d3d; border-radius: 6px; padding: 7px 5px; color: #1f2d3d; white-space: nowrap; }
.fsig-cert-name { color: #16a34a; font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.fsig-pers { border: 1px solid #e6e9f0; border-radius: 8px; padding: 12px; display: grid; place-items: center; }
.fsig-pers-sig { font-family: "Segoe Script", "Brush Script MT", cursive; font-style: italic; font-size: 1.2rem; color: #1f3a8a; }
.fsig-edit { background: #7b8794; color: #fff; border: 0; font-size: .78rem; font-weight: 700; padding: 11px; border-radius: 6px; }
.fsig-safe { margin-top: auto; background: #dff5e6; color: #15803d; font-weight: 600; font-size: .8rem; padding: 12px 14px; border-radius: 7px; display: flex; align-items: center; gap: 8px; }
/* caixa de assinatura arrastável */
.fsig-sigbox { position: absolute; left: 230px; top: 120px; width: 214px; height: 80px; border: 2px dashed #f0a44e; background: rgba(255,237,213,.7); border-radius: 6px; display: grid; place-items: center; text-align: center; z-index: 4; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), border-color .4s, background .4s; }
.fsig-sig-ph { display: flex; flex-direction: column; padding: 6px; }
.fsig-sig-ph b { font-size: .84rem; color: #7c5a1e; } .fsig-sig-ph small { font-size: .62rem; color: #9a7b46; line-height: 1.25; }
.fsig-sig-ok { display: none; flex-direction: column; align-items: center; gap: 1px; }
.fsig-sig-ok i { color: #16a34a; font-size: 1rem; }
.fsig-sig-ok b { font-family: "Segoe Script", "Brush Script MT", cursive; font-style: italic; font-size: 1.25rem; color: #1f3a8a; line-height: 1; }
.fsig-sig-ok small { font-size: .6rem; color: #16a34a; font-weight: 700; }
.fsig-sig-check { display: none; position: absolute; top: -13px; right: -13px; width: 32px; height: 32px; border-radius: 50%; background: #16a34a; color: #fff; place-items: center; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(22,163,74,.5); }
.fsig-sigbox.signed { border-style: solid; border-color: #16a34a; background: rgba(220,252,231,.9); }
.fsig-sigbox.signed .fsig-sig-ph { display: none; }
.fsig-sigbox.signed .fsig-sig-ok { display: flex; }
.fsig-sigbox.signed .fsig-sig-check { display: grid; }
/* cursor do mouse */
.fsig-cursor { position: absolute; left: 440px; top: 240px; color: #1f2d3d; font-size: 1.6rem; z-index: 6; transform: rotate(-12deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1); }
.fsig-cursor.grab { color: #1763d6; }
/* overlay documento assinado */
.fsig-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 8; }
.fsig-done.is-on { opacity: 1; }
.fsig-done-card { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #16a34a; font-weight: 800; font-size: 1.7rem; padding: 26px 46px; border-radius: 16px; box-shadow: 0 26px 60px rgba(0,0,0,.45); transform: scale(.85); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.fsig-done.is-on .fsig-done-card { transform: none; }
.fsig-done-card i { font-size: 2.2rem; }

/* ===== Feature: Mesa de Trabalho (processos eletrônicos · lista ↔ kanban) ===== */
.mesa { width: 980px; height: 613px; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); color: #0f172a; }
.mesa-top { display: flex; align-items: center; gap: 14px; padding: 9px 18px; background: #0a0e14; color: #fff; }
.mesa-logo { height: 22px; width: auto; }
.mesa-title { font-size: .92rem; font-weight: 600; letter-spacing: .02em; color: #cfd6e0; }
.mesa-title b { color: #fff; font-weight: 800; }
.mesa-user { margin-left: auto; font-size: .78rem; color: #cfd6e0; display: flex; align-items: center; gap: 6px; }
.mesa-close { background: #e5476a; color: #fff; font-weight: 700; font-size: .72rem; padding: 6px 12px; border-radius: 5px; }
.mesa-tabs { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: #2b3442; }
.mesa-tabs > span { font-size: .76rem; font-weight: 700; color: #fff; background: #4a5564; padding: 9px 14px; border-radius: 6px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mesa-tabs > span.on { background: #2d6cdf; }
.mesa-views { margin-left: auto; background: transparent !important; padding: 0 !important; gap: 6px; }
.mesa-views .mv { font-size: .85rem; color: #fff; background: #4a5564; padding: 7px 8px; border-radius: 6px; transition: background .3s; }
.mesa-views .mv.on { background: #2d6cdf; }
.mesa-tagsrow { display: flex; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #e6e9f0; }
.mtag { font-size: .64rem; font-weight: 800; letter-spacing: .03em; color: #fff; padding: 4px 11px; border-radius: 999px; }
.mtag.y { background: #eab308; } .mtag.b { background: #2d6cdf; } .mtag.c { background: #14b8c4; } .mtag.r { background: #e5476a; }
.mesa-stage { position: relative; flex: 1; min-height: 0; }
.mesa-view { position: absolute; inset: 0; padding: 12px 16px; opacity: 0; pointer-events: none; transition: opacity .45s ease; overflow: hidden; }
.mesa-view.is-on { opacity: 1; pointer-events: auto; }
/* lista (barrinhas) */
.ml-row { display: flex; align-items: center; gap: 16px; padding: 15px 8px; border-bottom: 1px solid #eef1f5; }
.ml-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #cbd5e1; }
.ml-dot.y { background: #eab308; } .ml-dot.b { background: #2d6cdf; } .ml-dot.c { background: #14b8c4; } .ml-dot.r { background: #e5476a; }
.mlb { height: 9px; border-radius: 4px; background: #e6e9f0; display: block; }
.mlb-when { width: 84px; flex: 0 0 84px; }
.mlb-from { width: 130px; flex: 0 0 130px; }
.ml-proc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mlb-t { width: 78%; height: 10px; background: #d7dce4; }
.mlb-s { width: 50%; }
.ml-act { width: 96px; flex: 0 0 96px; height: 26px; border-radius: 6px; background: #2d6cdf; opacity: .85; }
/* kanban */
.mvw-kanban { position: relative; display: flex; gap: 12px; align-items: stretch; }
.mk-col { flex: 1; background: #f6f8fb; border-radius: 10px; padding: 0 10px 10px; display: flex; flex-direction: column; overflow: visible; border-top: 4px solid #cbd5e1; }
.mk-col.y { border-top-color: #eab308; } .mk-col.b { border-top-color: #2d6cdf; } .mk-col.c { border-top-color: #14b8c4; } .mk-col.r { border-top-color: #e5476a; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px; }
.mk-tagbar { height: 10px; border-radius: 5px; width: 70%; background: #cbd5e1; }
.mk-tagbar.y { background: #eab308; } .mk-tagbar.b { background: #2d6cdf; } .mk-tagbar.c { background: #14b8c4; } .mk-tagbar.r { background: #e5476a; }
.mk-head b { background: #64748b; color: #fff; min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; transition: background .3s, transform .3s; }
.mk-head b.bump { transform: scale(1.25); background: #16a34a; }
.mk-card { background: #fff; border: 1px solid #e6e9f0; border-radius: 8px; padding: 12px 11px; box-shadow: 0 4px 12px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 8px; }
.mkb { height: 9px; border-radius: 4px; background: #e6e9f0; display: block; }
.mkb-t { width: 85%; height: 10px; background: #d7dce4; } .mkb-s { width: 55%; }
/* card que se move entre colunas */
.mk-mover { position: absolute; left: 24px; top: 60px; width: 198px; background: #fff; border: 1px solid #cdd6e4; border-radius: 8px; padding: 12px 11px; box-shadow: 0 10px 26px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 8px; z-index: 5; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), transform .3s ease, box-shadow .3s ease; }
.mk-mover.drag { transform: rotate(-3deg) scale(1.04); box-shadow: 0 18px 40px rgba(0,0,0,.3); }

/* ===== Feature: Automação de Microfones (controle de áudio) ===== */
.mic { position: relative; width: 980px; height: 613px; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); color: #0f172a; padding: 18px 20px; }
.mic-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.mic-brand { display: flex; flex-direction: column; gap: 4px; }
.mic-logo { height: 30px; width: auto; align-self: flex-start; }
.mic-title { font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: #1f2d3d; white-space: nowrap; }
.mic-btns { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.mic-b { background: #2d6cdf; color: #fff; font-size: .76rem; font-weight: 700; padding: 9px 15px; border-radius: 6px; white-space: nowrap; }
.mic-time { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #cdd6e4; border-radius: 6px; padding: 6px 6px 6px 14px; font-weight: 700; color: #475569; font-size: .82rem; }
.mic-time i { background: #2d6cdf; color: #fff; padding: 5px 7px; border-radius: 5px; font-size: .8rem; }
.mic-sair { margin-left: auto; background: #2d6cdf; color: #fff; font-weight: 700; font-size: .78rem; padding: 9px 18px; border-radius: 6px; }
.mic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; align-content: start; }
.mic-card { position: relative; display: flex; align-items: center; gap: 12px; background: #f3f5f8; border: 1px solid #e2e7ef; border-radius: 9px; padding: 13px 14px; }
.mic-card.off { opacity: .5; }
.mic-num { font-size: 1.1rem; font-weight: 800; color: #334155; min-width: 26px; }
.mic-ava { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; overflow: hidden; background: #d7dce4; display: grid; place-items: center; color: #94a3b8; font-size: 1.5rem; }
.mic-ava img { width: 100%; height: 100%; object-fit: cover; }
.mic-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mic-name i { display: block; height: 8px; border-radius: 4px; background: #d7dce4; }
.mic-name i:first-child { width: 82%; } .mic-name i:last-child { width: 52%; }
.mic-play, .mic-add { border: 1px solid #cdd6e4; background: #fff; border-radius: 6px; width: 42px; height: 40px; display: grid; place-items: center; font-size: 1.05rem; color: #2d6cdf; flex: 0 0 auto; transition: background .25s, color .25s, border-color .25s; }
.mic-play { background: #2d6cdf; color: #fff; border-color: #2d6cdf; }
.mic-add { color: #475569; }
.mic-card.off .mic-play { background: #cfd6e0; border-color: #cfd6e0; }
.mic-play .ic-stop { display: none; }
.mic-play.is-stop { background: #e5476a; border-color: #e5476a; }
.mic-play.is-stop .ic-play { display: none; }
.mic-play.is-stop .ic-stop { display: inline; }
/* cursor único que percorre os microfones */
.mic-cursor { position: absolute; left: 200px; top: 120px; color: #1f2d3d; font-size: 1.5rem; z-index: 6; transform: rotate(-12deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: left .8s cubic-bezier(.4,0,.2,1), top .8s cubic-bezier(.4,0,.2,1), transform .18s ease; }
.mic-cursor.tap { transform: rotate(-12deg) scale(.78) translate(2px, 2px); }

/* ===== Feature: Automação de Câmeras (fundo = telão do painel; controle por cima) ===== */
.cam-mock { background: #05080f; }
.cam { position: relative; width: 980px; height: 613px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.cam .okc__vp { width: 100%; height: 100%; min-height: 0; border-radius: 0; }
/* área central do painel: no lugar dos parlamentares, o vídeo (telão) */
.cam-screen { position: relative; flex: 1; margin: 4px 0 2px; border-radius: 10px; overflow: hidden; background: #000; }
.cam-video { width: 100%; height: 100%; object-fit: cover; }
.cam-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,13,29,.12), rgba(6,13,29,.42)); pointer-events: none; }
.cam-live { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: rgba(220,38,38,.92); color: #fff; font-size: .76rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.cam-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.cut { animation: camCut .4s ease; }
@keyframes camCut { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } }
/* controle de câmeras (por cima do vídeo, menor) */
.cam-ctrl { position: absolute; left: 473px; bottom: -40px; z-index: 4; width: 540px; background: rgba(255,255,255,.97); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.45); padding: 14px 16px; }
.cam-ctrl-top { font-size: .82rem; font-weight: 800; color: #1f2d3d; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cam-ctrl-top i { color: #2d6cdf; }
.cam-ctrl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cam-item { position: relative; display: flex; align-items: center; gap: 11px; background: #f3f5f8; border: 1px solid #e2e7ef; border-radius: 9px; padding: 9px 11px; transition: border-color .25s, box-shadow .25s; }
.cam-item.active { border-color: #2d6cdf; box-shadow: 0 0 0 2px rgba(45,108,223,.18); }
.cam-num { font-size: .95rem; font-weight: 800; color: #334155; min-width: 22px; }
.cam-ava { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; overflow: hidden; background: #d7dce4; }
.cam-ava img { width: 100%; height: 100%; object-fit: cover; }
.cam-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cam-name i { display: block; height: 8px; border-radius: 4px; background: #d7dce4; }
.cam-name i:first-child { width: 80%; } .cam-name i:last-child { width: 52%; }
.cam-go { border: 1px solid #cdd6e4; background: #fff; border-radius: 6px; width: 42px; height: 38px; display: grid; place-items: center; font-size: 1rem; color: #2d6cdf; flex: 0 0 auto; transition: background .25s, color .25s, border-color .25s; }
.cam-item.active .cam-go { background: #2d6cdf; color: #fff; border-color: #2d6cdf; }
.cam-cursor { position: absolute; left: 480px; top: 470px; z-index: 6; color: #fff; font-size: 1.5rem; transform: rotate(-12deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); transition: left .8s cubic-bezier(.4,0,.2,1), top .8s cubic-bezier(.4,0,.2,1), transform .18s ease; }
.cam-cursor.tap { transform: rotate(-12deg) scale(.78) translate(2px, 2px); }

/* ===== Tema CLARO/clean para os wireframes simples (w-*) ===== */
/* API */
.wire .w-code { background: #f1f5f9; }
.wire .w-code .w-line { color: #334155; }
.wire .w-code .w-line b { color: #2d6cdf; }
.wire .w-code .w-line.ok { color: #16a34a; }
.wire .w-api__nodes span { background: #2d6cdf; }
.wire .w-api__nodes span:not(:last-child)::after { background: rgba(45,108,223,.4); }
/* AUDIT */
.wire .w-audit__row { background: #f1f5f9; border: 1px solid #e6e9f0; }
.wire .w-audit__row i { color: #2d6cdf; }
.wire .w-audit__row .wbar { background: #dbe2ec; }
/* NOTIFICATIONS */
.wire .w-notif__card { background: #f1f5f9; border: 1px solid #e6e9f0; }
.wire .w-notif__card i { color: #2d6cdf; }
.wire .w-notif__card:last-of-type i { color: #1aa179; }
.wire .w-notif__card .wbar { background: #dbe2ec; }
/* DARKMODE — alterna o wireframe inteiro entre claro e escuro (JS: classe .is-dark) */
.wire { transition: background .5s ease, color .5s ease; }
.wire .wtop, .wire .w-dark__panel, .wire .w-toggle, .wire .w-toggle__knob { transition: background .5s ease, left .35s ease, border-color .5s ease; }
.wire .w-dark__switch { color: #64748b; }
.wire .w-dark__switch .bi-sun-fill { color: #f59e0b; }
.wire .w-dark__switch .bi-moon-stars-fill { color: #94a3b8; }
.wire .w-dark__panel { background: #eef2f8; }
.wire .w-dark__panel .wbar { background: #d4dbe6; }
.wire .w-dark .w-toggle { background: #cdd6e2; }
.wire .w-dark .w-toggle__knob { left: 2px; background: #fff; }
/* estado escuro */
.wire.is-dark { background: linear-gradient(160deg, #0e1d3a, #0a1428); color: #cfe0ff; }
.wire.is-dark .wtop { background: #0e1b34; border-bottom-color: #1c2c4d; }
.wire.is-dark .wtop .wbar { background: #28395a; }
.wire.is-dark .w-dark__panel { background: #0b1428; }
.wire.is-dark .w-dark__panel .wbar { background: rgba(255,255,255,.22); }
.wire.is-dark .w-dark .w-toggle { background: #2d6cdf; }
.wire.is-dark .w-dark .w-toggle__knob { left: 18px; background: #fff; }
.wire.is-dark .w-dark__switch .bi-sun-fill { color: #64748b; }
.wire.is-dark .w-dark__switch .bi-moon-stars-fill { color: #fcd34d; }
/* USERS */
.wire .w-user { background: #f1f5f9; border: 1px solid #e6e9f0; }
.wire .w-user .wbar { background: #dbe2ec; }
.wire .w-role { color: #2d6cdf; background: rgba(45,108,223,.12); }
/* PROTOCOL */
.wire .w-proto__row { background: #f1f5f9; border: 1px solid #e6e9f0; }
.wire .w-proto__row i { color: #2d6cdf; }
.wire .w-proto__row .wbar { background: #dbe2ec; }
.wire .w-num { color: #64748b; }
.in-view .w-proto__row.is-new .w-num { color: #16a34a; }
/* GENERIC */
.wire .w-generic .wbar { background: #dbe2ec; }

/* ===== Componentes okc__ reutilizados pelos mocks (painel de votação, terminal, biometria) =====
   Copiados de comofunciona.php para ficarem disponíveis nas páginas de detalhe /funcionalidade. ===== */
.okc__node--plenario { width: 980px; color: #eaf1fb; }
/* troca de cards: terminal (1º) ↔ painel (2º) */
.okc__pl-view--term { display: flex; justify-content: center; }
.okc__pl-view--panel { display: none; }
.okc__node--plenario.show-panel .okc__pl-view--term { display: none; }
.okc__node--plenario.show-panel .okc__pl-view--panel { display: block; }
.okc__vp { position: relative; display: grid; grid-template-columns: 1fr 220px; grid-template-rows: 1fr auto; grid-template-areas: "main side" "foot foot";
    min-height: 560px;
    border-radius: 14px; overflow: hidden; box-shadow: 0 34px 90px rgba(0,0,0,.6); border: 1px solid rgba(23,99,214,.4);
    background: radial-gradient(120% 100% at 80% 0%, #12409e 0%, #0a1f5e 55%, #081643 100%); }
.okc__vp-main { grid-area: main; padding: 16px 18px; min-width: 0; position: relative; display: flex; flex-direction: column; }
/* cena de transmissão (vídeo) que cobre os parlamentares após a aprovação */
.okc__vp-cine { position: absolute; inset: 0; z-index: 6; background: #000; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.okc__vp-cine.is-on { opacity: 1; }
.okc__vp-cine-video { width: 100%; height: 100%; object-fit: cover; }
.okc__vp-cine-tag { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 7px; background: rgba(220,38,38,.9); color: #fff; font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.okc__vp-cine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,13,29,.15), rgba(6,13,29,.5)); pointer-events: none; }
/* terminal de votação (tablet horizontal) que cobre o painel antes da votação */
.okc__term-tablet { position: relative; width: 100%; max-width: 980px; aspect-ratio: 16 / 10; background: #05080f; border: 12px solid #05080f; border-radius: 24px; box-shadow: 0 34px 80px rgba(0,0,0,.6); overflow: hidden; }
.okc__term-cam { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #22304a; z-index: 4; }
.okc__term-screen { display: grid; grid-template-columns: 1.3fr 1fr; height: 100%; background: #ffffff; color: #0f172a; }
.okc__term-left { padding: 22px 24px; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #e6e9f0; }
.okc__term-tag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #dc2626; padding: 4px 11px; border-radius: 999px; }
.okc__term-mat { margin: 16px 0 auto; font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: #0f172a; }
.okc__term-voter { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.okc__term-face { width: 66px; height: 66px; flex: 0 0 66px; border-radius: 14px; overflow: hidden; border: 2px solid #e2e8f0; }
.okc__term-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.okc__term-voter b { display: block; font-size: .98rem; color: #0f172a; } .okc__term-voter small { color: #64748b; font-size: .78rem; }
.okc__term-right { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #f4f6fb; justify-content: center; }
.okc__term-btn { position: relative; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 14px; padding: 15px 18px; font-size: 1.15rem; font-weight: 800; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: transform .15s, filter .15s, box-shadow .15s; }
.okc__term-btn .n { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: .8rem; }
.okc__term-btn i { font-size: 1.2rem; margin-left: auto; }
.okc__term-btn.sim { background: linear-gradient(135deg,#1faa4b,#1faa4b); }
.okc__term-btn.nao { background: linear-gradient(135deg,#d33,#d33); }
.okc__term-btn.abs { background: linear-gradient(135deg,#ffc71f,#ffc71f); color: #1a1300; }
.okc__term-btn.is-press { transform: scale(1.04); filter: brightness(1.12); box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.4); }
/* modal estilo SweetAlert */
.okc__term-modal { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(3,8,22,.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.okc__term-modal.is-on { opacity: 1; }
.okc__term-modal-card { width: 76%; max-width: 340px; background: #fff; color: #0f172a; border-radius: 18px; padding: 24px 22px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.5); transform: scale(.85); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.okc__term-modal.is-on .okc__term-modal-card { transform: none; }
.okc__term-modal-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; }
.okc__term-modal-ic.q { background: #fef3c7; color: #d97706; border: 3px solid #fcd34d; }
.okc__term-modal-ic.ok { background: #dcfce7; color: #16a34a; border: 3px solid #86efac; display: none; }
.okc__term-modal.success .okc__term-modal-ic.q { display: none; }
.okc__term-modal.success .okc__term-modal-ic.ok { display: grid; }
.okc__term-modal-card h4 { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
.okc__term-modal-card p { font-size: .9rem; color: #475569; margin: 0 0 16px; }
.okc__sim-tx { color: #16a34a; }
.okc__term-modal-btns { display: flex; gap: 10px; justify-content: center; }
.okc__term-modal-btns span { padding: 9px 20px; border-radius: 10px; font-weight: 700; font-size: .9rem; }
.okc__term-modal-btns .cancel { background: #f1f5f9; color: #475569; }
.okc__term-modal-btns .confirm { background: #16a34a; color: #fff; transition: transform .12s, filter .12s; }
.okc__term-modal-btns .confirm.is-press { transform: scale(.95); filter: brightness(.9); }
.okc__term-modal.success .okc__term-modal-btns { display: none; }
/* leitor de biometria facial (Face ID) dentro do tablet */
.okc__face { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(3,8,22,.62); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.okc__face.is-on { opacity: 1; }
.okc__face-card { position: relative; height: 92%; aspect-ratio: 30 / 46; max-width: 94%; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); transform: scale(.9); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.okc__face.is-on .okc__face-card { transform: none; }
.okc__face-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.okc__face-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.okc__face-base { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2.5; }
.okc__face-tick { stroke: rgba(34,197,94,.35); stroke-width: 5; stroke-linecap: round; animation: okcFaceSweep 3s linear infinite; }
@keyframes okcFaceSweep { 0%,100% { stroke: rgba(34,197,94,.35); filter: none; } 8% { stroke: #4ade80; filter: drop-shadow(0 0 8px #22c55e); } 16% { stroke: rgba(34,197,94,.35); filter: none; } }
.okc__face.ok .okc__face-tick { stroke: #22c55e !important; filter: drop-shadow(0 0 10px #22c55e); animation: none; }
.okc__face-top { position: absolute; top: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.88); font-size: .8rem; font-weight: 600; }
.okc__face-top i { color: #4ade80; margin-right: 6px; }
.okc__face-bottom { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; padding: 0 16px; }
.okc__face-logo { display: block; margin: 0 auto 10px; height: 30px; width: auto; filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); }
.okc__face-status { display: inline-flex; align-items: center; gap: 7px; color: #dbe7f5; font-size: .85rem; font-weight: 600; }
.okc__face-badge { display: none; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 24px; background: rgba(34,197,94,.22); color: #4ade80; font-weight: 700; font-size: .9rem; border: 1px solid rgba(34,197,94,.45); backdrop-filter: blur(6px); }
.okc__face.ok .okc__face-status { display: none; }
.okc__face-badge { display: none !important; } /* substituído pelo check no oval */
/* check verde central (aparece no reconhecimento) */
.okc__face-check { position: absolute; left: 50%; top: 41.7%; transform: translate(-50%,-50%) scale(.3); width: 96px; height: 96px; border-radius: 50%; background: rgba(34,197,94,.96); color: #fff; display: grid; place-items: center; font-size: 3.1rem; opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 0 8px rgba(34,197,94,.25), 0 0 34px rgba(34,197,94,.6); z-index: 3; }
.okc__face.ok .okc__face-check { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.okc__face-bottom small { display: block; font-size: .68rem; margin-top: 8px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.okc__vp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.okc__vp-tit { font-size: 1.05rem; font-weight: 800; color: #fff; }
.okc__vp-pres { display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; color: #cfe0ff; }
.okc__vp-pres em { font-style: normal; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.okc__vp-pres b { color: #fff; }
.okc__vp-pres-ava { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#1763d6,#18c7d6); display: grid; place-items: center; color: #fff; font-size: .8rem; }
.okc__vp-cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: 11px; margin: auto 0; }
.okc__vp-card { position: relative; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 7px 7px 9px; text-align: center; overflow: hidden; }
.okc__vp-party { position: absolute; top: 0; left: 0; z-index: 3; background: rgba(0,0,0,.45); color: #cfe0ff; font-size: .52rem; font-weight: 800; letter-spacing: .03em; padding: 2px 6px; border-radius: 0 0 6px 0; }
.okc__vp-ava { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 5; border-radius: 7px; background: linear-gradient(150deg, #2a4a8f, #16306e); color: #aec5ff; font-weight: 800; font-size: 1.45rem; overflow: hidden; }
.okc__vp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.okc__vp-name { display: block; margin-top: 6px; font-size: .62rem; font-weight: 600; color: #dce8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okc__vp-corner { position: absolute; top: 0; right: 0; width: 50px; height: 50px; z-index: 2; clip-path: polygon(100% 0, 0 0, 100% 100%); opacity: 0; transform: scale(.5); transform-origin: top right; transition: opacity .3s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.okc__vp-vlabel { position: absolute; top: 5px; right: 5px; color: #fff; font-size: .5rem; font-weight: 800; }
.okc__vp-corner i { position: absolute; top: 18px; right: 6px; font-size: .62rem; color: #fff; }
.okc__vp-card.voted .okc__vp-corner { opacity: 1; transform: none; }
.okc__vp-card.voted[data-vote="sim"] .okc__vp-corner { background: #1faa4b; }
.okc__vp-card.voted[data-vote="nao"] .okc__vp-corner { background: #d33; }
.okc__vp-card.voted[data-vote="abs"] .okc__vp-corner { background: #e0a400; }
.okc__vp-card.voted[data-vote="sim"] { box-shadow: inset 0 0 0 1px rgba(34,197,94,.5); }
.okc__vp-card.voted[data-vote="nao"] { box-shadow: inset 0 0 0 1px rgba(220,51,51,.5); }

/* sidebar */
.okc__vp-side { grid-area: side; background: rgba(4,12,38,.45); border-left: 1px solid rgba(255,255,255,.1); padding: 14px 14px 12px; display: flex; flex-direction: column; }
.okc__vp-od b { display: block; font-size: .92rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.okc__vp-od span { display: block; font-size: .66rem; color: #aec5ff; }
.okc__vp-status { margin: 10px 0; text-align: center; font-weight: 800; font-size: .92rem; letter-spacing: .04em; padding: 5px; border-radius: 6px; background: rgba(245,158,11,.18); color: #fcd34d; transition: all .4s; }
.okc__vp-status.aprovado { background: rgba(34,197,94,.2); color: #4ade80; }
.okc__vp-counts { display: flex; flex-direction: column; gap: 6px; }
.okc__vp-c { display: flex; align-items: center; justify-content: space-between; }
.okc__vp-c span { font-weight: 800; font-size: 1rem; }
.okc__vp-c b { min-width: 44px; text-align: center; padding: 3px 0; border-radius: 5px; font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
.okc__vp-c.sim span { color: #4ade80; } .okc__vp-c.sim b { background: #1faa4b; color: #fff; }
.okc__vp-c.nao span { color: #ff8a98; } .okc__vp-c.nao b { background: #d33; color: #fff; }
.okc__vp-c.abs span { color: #fcd34d; } .okc__vp-c.abs b { background: #caa204; color: #1a1300; }
.okc__vp-c.pres span { color: #cfe0ff; } .okc__vp-c.pres b { background: rgba(255,255,255,.14); color: #fff; }
.okc__vp-c.ause span { color: #cfe0ff; } .okc__vp-c.ause b { background: rgba(255,255,255,.14); color: #fff; }
.okc__vp-timers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px; }
.okc__vp-timers div { background: rgba(255,255,255,.08); border-radius: 7px; padding: 7px 4px; text-align: center; }
.okc__vp-timers small { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: #aec5ff; }
.okc__vp-timers b { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* rodapé */
.okc__vp-foot { grid-area: foot; display: flex; align-items: center; gap: 14px; padding: 9px 16px; background: rgba(4,12,38,.6); border-top: 1px solid rgba(255,255,255,.1); }
.okc__vp-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; color: #fff; background: rgba(220,38,38,.9); padding: 3px 10px; border-radius: 999px; }
.okc__vp-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: block; animation: okcBlink 1.2s infinite; }
.okc__vp-mat { font-size: .72rem; color: #cfe0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes okcBlink { 50%{opacity:.3} }

/* ===== Feature: Legis Office (editor avançado) ===== */
.oed { position: relative; width: 980px; height: 613px; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); color: #0f172a; }
.oed-top { display: flex; align-items: center; gap: 14px; padding: 11px 18px; background: #0a0e14; color: #fff; }
.oed-logo { height: 22px; width: auto; }
.oed-file { font-size: .86rem; color: #cfd6e0; }
.oed-ai-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 800; color: #fff; background: linear-gradient(120deg, #7a5cff, #18c7d6); padding: 8px 14px; border-radius: 8px; transition: filter .2s, transform .15s; }
.oed-ai-btn.is-press { transform: scale(1.05); filter: brightness(1.12); box-shadow: 0 0 0 4px rgba(122,92,255,.3); }
.oed-done { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 800; color: #fff; background: #1f9d57; padding: 8px 14px; border-radius: 8px; }
/* abas (ribbon) */
.oed-tabs { display: flex; align-items: center; gap: 22px; padding: 9px 18px 0; background: #fff; border-bottom: 1px solid #e6e9f0; }
.oed-tabs span { font-size: .82rem; color: #64748b; padding-bottom: 9px; position: relative; white-space: nowrap; }
.oed-tabs span.on { color: #2d6cdf; font-weight: 700; }
.oed-tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2d6cdf; border-radius: 2px; }
/* barra de ferramentas */
.oed-tools { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-bottom: 1px solid #e6e9f0; background: #f6f8fb; color: #475569; }
.oed-font { min-width: 96px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid #d6deea; border-radius: 7px; padding: 7px 10px; font-size: .82rem; font-weight: 600; }
.oed-size { width: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; background: #fff; border: 1px solid #d6deea; border-radius: 7px; padding: 7px 8px; font-size: .82rem; font-weight: 600; }
.oed-font i, .oed-size i { font-size: .58rem; opacity: .6; }
.oed-sep { width: 1px; height: 24px; background: #d6deea; margin: 0 3px; flex: 0 0 1px; }
.oed-ic { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 7px; font-size: 1rem; color: #475569; }
.oed-ic.hl { color: #e0a400; } .oed-ic.clr { color: #2d6cdf; }
.oed-param { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; color: #fff; background: #2d6cdf; padding: 8px 13px; border-radius: 8px; white-space: nowrap; flex: 0 0 auto; }
.oed-doc { flex: 1; padding: 34px 56px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.oed-title { text-align: center; font-size: 1.05rem; font-weight: 800; color: #1f2d3d; margin-bottom: 8px; }
.oed-doc .ln { height: 11px; border-radius: 5px; background: #e9edf3; display: block; }
.oed-doc .ln.w95 { width: 95%; } .oed-doc .ln.w90 { width: 90%; } .oed-doc .ln.w85 { width: 85%; } .oed-doc .ln.w80 { width: 80%; } .oed-doc .ln.w70 { width: 70%; }
.oed-params { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0; }
.oed-params span { font-family: monospace; font-size: .9rem; font-weight: 700; color: #7a5cff; background: rgba(122,92,255,.1); border: 1px solid rgba(122,92,255,.3); padding: 4px 10px; border-radius: 7px; }
/* cursor */
.oed-cursor { position: absolute; left: 760px; top: 40px; z-index: 6; color: #1f2d3d; font-size: 1.5rem; transform: rotate(-12deg); filter: drop-shadow(0 2px 3px rgba(255,255,255,.6)); transition: left .8s cubic-bezier(.4,0,.2,1), top .8s cubic-bezier(.4,0,.2,1), transform .18s ease; }
.oed-cursor.tap { transform: rotate(-12deg) scale(.78) translate(2px,2px); }
/* popover Ações com IA */
.oed-aipop { position: absolute; right: 24px; top: 96px; width: 420px; z-index: 5; background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 26px 60px -18px rgba(10,20,40,.5); padding: 16px; display: grid; gap: 12px; opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.oed-aipop.is-on { opacity: 1; transform: none; }
.oed-aipop-head { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #7a5cff; }
.oed-aiopt { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 11px; background: #2d8fd6; color: #fff; transition: transform .2s, box-shadow .2s; }
.oed-aiopt.a2 { background: #2d8fd6; }
.oed-aiopt.is-hot { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(45,143,214,.35); }
.oed-aiopt-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 1.1rem; }
.oed-aiopt b { display: block; font-size: .95rem; } .oed-aiopt small { font-size: .76rem; opacity: .9; }