/* ══════════════════════════════════════════════════════════════
   CONECTANDO · PEI vivo — aplicativo funcional
   ══════════════════════════════════════════════════════════════ */
:root{
  --navy:#0C1A30; --gold:#C0AA7E; --gold-deep:#A57C2F; --gold-lite:#E4D6B4;
  --bg-0:#050A14; --bg-1:#0A1526; --bg-2:#0E1B31;
  --surf-1:rgba(255,255,255,.05); --surf-2:rgba(255,255,255,.085); --surf-3:rgba(255,255,255,.13);
  --surf-in:rgba(0,0,0,.3);
  --line:rgba(192,170,126,.2); --line-s:rgba(255,255,255,.09);
  --glass:rgba(14,27,49,.78); --glass-hi:rgba(20,36,63,.9);
  --t-hi:#F4F1EA; --t-mid:rgba(244,241,234,.7); --t-low:rgba(244,241,234,.44);
  --on-gold:#0C1A30;
  --ok:#7FC9A4; --warn:#E5B263; --crit:#E0796F; --info:#8FB4DE;
  --ok-b:rgba(127,201,164,.15); --warn-b:rgba(229,178,99,.15);
  --crit-b:rgba(224,121,111,.15); --info-b:rgba(143,180,222,.15);
  --d-com:#7FB8DE; --d-cog:#B39BD4; --d-soc:#F0A38C;
  --d-mot:#7FC9A4; --d-aut:#E5C273; --d-sen:#8AD2CE; --d-out:#A8B4C4;
  --r-s:12px; --r-m:18px; --r-l:24px; --r-xl:30px; --r-f:999px;
  --pad:18px;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.42,.5,1);
  --sh-1:0 2px 12px rgba(0,0,0,.34); --sh-2:0 14px 40px rgba(0,0,0,.46); --sh-3:0 26px 70px rgba(0,0,0,.55);
  --sh-g:0 10px 30px rgba(192,170,126,.24);
  --fs:1;
}
html[data-theme="light"]{
  --bg-0:#EFE9DF; --bg-1:#FBF8F3; --bg-2:#FFFFFF;
  --surf-1:rgba(12,26,48,.04); --surf-2:rgba(12,26,48,.07); --surf-3:rgba(12,26,48,.1);
  --surf-in:rgba(12,26,48,.05);
  --line:rgba(165,124,47,.26); --line-s:rgba(12,26,48,.11);
  --glass:rgba(255,255,255,.84); --glass-hi:rgba(255,255,255,.95);
  --t-hi:#152239; --t-mid:rgba(21,34,57,.68); --t-low:rgba(21,34,57,.45);
  --ok:#3E9970; --warn:#B8862F; --crit:#C25A50; --info:#41719F;
  --ok-b:rgba(62,153,112,.13); --warn-b:rgba(184,134,47,.14);
  --crit-b:rgba(194,90,80,.13); --info-b:rgba(65,113,159,.13);
  --d-com:#4A8CBD; --d-cog:#8567AE; --d-soc:#D9714F;
  --d-mot:#3E9970; --d-aut:#B8862F; --d-sen:#3E9E9A; --d-out:#5D6B7D;
  --sh-1:0 2px 10px rgba(12,26,48,.07); --sh-2:0 14px 36px rgba(12,26,48,.11);
  --sh-3:0 26px 64px rgba(12,26,48,.16); --sh-g:0 10px 28px rgba(165,124,47,.2);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-0);color:var(--t-hi);font-size:calc(15px*var(--fs));
  -webkit-font-smoothing:antialiased;overflow:hidden;
  transition:background .45s var(--ease),color .45s var(--ease);
}
h1,h2,h3,h4,.serif{font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none;width:100%}
.hidden{display:none!important}
::-webkit-scrollbar{width:0;height:0}
:where(svg){fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::selection{background:rgba(192,170,126,.3)}

/* ═══ moldura ═══ */
.stage{position:fixed;inset:0;display:flex;justify-content:center;background:var(--bg-0)}
.device{position:relative;width:100%;max-width:470px;height:100dvh;background:var(--bg-1);overflow:hidden}
@media(min-width:500px){.device{box-shadow:0 0 0 1px var(--line-s),0 0 90px rgba(0,0,0,.5)}}
.vp{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5;display:block}
.aurora i:nth-child(1){width:300px;height:300px;background:#1F3E72;top:-110px;left:-80px;animation:d1 24s ease-in-out infinite}
.aurora i:nth-child(2){width:260px;height:260px;background:#5C4A2A;bottom:-90px;right:-100px;animation:d2 29s ease-in-out infinite}
html[data-theme="light"] .aurora i{opacity:.4}
html[data-theme="light"] .aurora i:nth-child(1){background:#CFE0F2}
html[data-theme="light"] .aurora i:nth-child(2){background:#F0E2C4}
@keyframes d1{0%,100%{transform:translate(0,0)}50%{transform:translate(45px,60px) scale(1.15)}}
@keyframes d2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-45px) scale(1.12)}}

/* ═══ telas ═══ */
.screens{position:absolute;inset:0;z-index:1}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;
  transform:translateX(18px);transition:opacity .3s var(--ease),transform .38s var(--ease)}
.scr.on{opacity:1;pointer-events:auto;transform:none}
.sb{height:calc(30px + env(safe-area-inset-top,0px));flex:none;display:flex;align-items:flex-end;
  justify-content:space-between;padding:0 22px 4px;font-size:12px;font-weight:700;opacity:.75}
.bar{flex:none;padding:6px var(--pad) 12px;display:flex;align-items:center;gap:11px;z-index:20}
.bar.solid{background:var(--glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--line-s)}
.bt{flex:1;min-width:0}
.bt h2{font-size:19px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt p{font-size:10.5px;color:var(--t-low);letter-spacing:.09em;text-transform:uppercase;font-weight:800;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:38px;height:38px;flex:none;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--surf-1);border:1px solid var(--line-s);transition:.22s var(--ease);position:relative}
.ib svg{width:18px;height:18px;stroke:var(--t-hi)}
.ib:active{transform:scale(.9)}
.ib.gold{background:rgba(192,170,126,.16);border-color:var(--line)}
.ib.gold svg{stroke:var(--gold)}
.ib .dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--crit);border:2px solid var(--bg-1)}
.sc{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 var(--pad) 120px;-webkit-overflow-scrolling:touch}
.sc.flush{padding-left:0;padding-right:0}

/* ═══ tabbar / fab ═══ */
.tabs{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));height:64px;z-index:40;
  background:var(--glass-hi);backdrop-filter:blur(24px);border:1px solid var(--line-s);border-radius:24px;
  box-shadow:var(--sh-2);display:flex;align-items:center;padding:0 6px;transition:.4s var(--spring)}
.tabs.off{transform:translateY(120px);opacity:0;pointer-events:none}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;color:var(--t-low);
  position:relative;transition:.22s;text-align:center}
.tab svg{width:20px;height:20px;transition:.3s var(--spring)}
.tab span{font-size:9.5px;font-weight:800}
.tab.on{color:var(--gold)}
html[data-theme="light"] .tab.on{color:var(--gold-deep)}
.tab.on svg{transform:translateY(-2px) scale(1.08)}
.tab.on::before{content:'';position:absolute;top:1px;width:24px;height:3px;border-radius:9px;background:currentColor}
.tab i.n{position:absolute;top:4px;right:calc(50% - 16px);min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--crit);color:#fff;font-size:9px;font-weight:900;display:grid;place-items:center;font-style:normal}
.fab{position:absolute;right:18px;bottom:calc(92px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:20px;z-index:41;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold) 50%,var(--gold-deep));box-shadow:var(--sh-g),0 6px 20px rgba(0,0,0,.35);
  display:grid;place-items:center;transition:.32s var(--spring)}
.fab svg{width:24px;height:24px;stroke:var(--on-gold);stroke-width:2.2}
.fab:active{transform:scale(.88)}
.fab.off{transform:translateY(140px) scale(.5);opacity:0;pointer-events:none}
.fab.low{bottom:calc(24px + env(safe-area-inset-bottom,0px))}

/* ═══ blocos ═══ */
.card{background:var(--surf-1);border:1px solid var(--line-s);border-radius:var(--r-m);padding:15px;
  position:relative;overflow:hidden;transition:.26s var(--ease);width:100%}
html[data-theme="light"] .card{background:var(--bg-2);box-shadow:var(--sh-1)}
.card.gold{border-color:var(--line);background:linear-gradient(150deg,rgba(192,170,126,.13),rgba(192,170,126,.03))}
.card.tap:active{transform:scale(.98)}
.sect{display:flex;align-items:center;gap:9px;margin:20px 2px 10px}
.sect h3{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t-low);font-family:'Mulish'}
.sect .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sect button{font-size:11.5px;color:var(--gold);font-weight:800;flex:none}
.g{display:grid;gap:9px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.row{display:flex;align-items:center;gap:9px}
.row .sp{flex:1}
.mut{color:var(--t-mid)}
.sm{font-size:12px}
.xs{font-size:10.5px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-f);
  font-size:11px;font-weight:800;background:var(--surf-2);color:var(--t-mid);border:1px solid transparent;white-space:nowrap;transition:.2s}
.chip svg{width:12px;height:12px}
.chip.on{background:rgba(192,170,126,.18);border-color:var(--line);color:var(--gold)}
html[data-theme="light"] .chip.on{color:var(--gold-deep)}
.chip.ok{background:var(--ok-b);color:var(--ok)}
.chip.warn{background:var(--warn-b);color:var(--warn)}
.chip.crit{background:var(--crit-b);color:var(--crit)}
.chip.info{background:var(--info-b);color:var(--info)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips.x{flex-wrap:nowrap;overflow-x:auto;padding:2px var(--pad);margin:0 calc(-1*var(--pad))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:var(--r-s);
  font-size:14px;font-weight:800;transition:.24s var(--spring);border:1px solid transparent}
.btn svg{width:17px;height:17px;stroke-width:2.1}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn.pri{background:linear-gradient(140deg,var(--gold-lite),var(--gold) 50%,var(--gold-deep));color:var(--on-gold);box-shadow:var(--sh-g)}
.btn.pri svg{stroke:var(--on-gold)}
.btn.sec{background:var(--surf-2);border-color:var(--line-s)}
.btn.ghost{border-color:var(--line);color:var(--gold)} .btn.ghost svg{stroke:var(--gold)}
.btn.danger{background:var(--crit-b);color:var(--crit)} .btn.danger svg{stroke:var(--crit)}
.btn.full{width:100%}
.btn.s{padding:9px 13px;font-size:12.5px;border-radius:10px}
.btns{display:flex;gap:9px}

.av{width:44px;height:44px;border-radius:15px;flex:none;display:grid;place-items:center;font-weight:800;
  font-size:15px;font-family:'Playfair Display',serif;overflow:hidden;position:relative;background-size:cover;background-position:center}
.av.s{width:32px;height:32px;border-radius:11px;font-size:12px}
.av.l{width:64px;height:64px;border-radius:22px;font-size:22px}
.av.xl{width:82px;height:82px;border-radius:28px;font-size:29px}

.seg{display:flex;background:var(--surf-1);border:1px solid var(--line-s);border-radius:var(--r-f);padding:3px;position:relative;overflow:hidden}
.seg button{flex:1;padding:8px 4px;font-size:12px;font-weight:800;color:var(--t-low);border-radius:var(--r-f);
  position:relative;z-index:2;transition:color .28s;text-align:center}
.seg button.on{color:var(--on-gold)}
.seg .gl{position:absolute;top:3px;bottom:3px;border-radius:var(--r-f);
  background:linear-gradient(140deg,var(--gold-lite),var(--gold));transition:.4s var(--spring);z-index:1}

.pb{height:7px;border-radius:9px;background:var(--surf-2);overflow:hidden}
.pb i{display:block;height:100%;border-radius:9px;background:var(--gold);width:0;transition:width 1s var(--ease)}
.ring{position:relative;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-linecap:round}
.ring .v{transition:stroke-dashoffset 1.2s var(--ease)}
.ring .l{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800}

.kv{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-s)}
.kv:last-child{border:0}
.kv dt{font-size:12.5px;color:var(--t-low);flex:none}
.kv dd{font-size:13px;font-weight:700;text-align:right}

.li{display:flex;align-items:center;gap:12px;padding:13px;border-radius:var(--r-m);background:var(--surf-1);
  border:1px solid var(--line-s);margin-bottom:9px;width:100%;transition:.24s var(--ease)}
html[data-theme="light"] .li{background:var(--bg-2);box-shadow:var(--sh-1)}
.li:active{transform:scale(.98)}
.li .in{flex:1;min-width:0}
.li .in b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .in span{font-size:11.5px;color:var(--t-low);display:block;margin-top:2px}
.li .cv{width:16px;height:16px;stroke:var(--t-low);flex:none}

.empty{text-align:center;padding:44px 20px;color:var(--t-low)}
.empty svg{width:40px;height:40px;stroke:var(--t-low);opacity:.5;margin-bottom:14px}
.empty b{display:block;font-size:15px;color:var(--t-mid);margin-bottom:6px;font-family:'Playfair Display',serif}
.empty p{font-size:12.5px;line-height:1.6;max-width:250px;margin:0 auto}

/* ═══ formulários ═══ */
.f{background:var(--surf-in);border:1px solid var(--line-s);border-radius:14px;padding:11px 13px;margin-bottom:10px;transition:.2s}
.f:focus-within{border-color:var(--gold)}
.f label{display:block;font-size:9.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--t-low);margin-bottom:5px}
.f input,.f textarea,.f select{font-size:14px;font-weight:600;line-height:1.45}
.f textarea{resize:vertical;min-height:62px}
.f select{appearance:none;background:transparent}
.f select option{background:var(--bg-2);color:var(--t-hi)}
.f .sel{position:relative}
.f .sel svg{position:absolute;right:0;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--t-low);pointer-events:none}
.f.err{border-color:var(--crit)}
.f .hint{font-size:10.5px;color:var(--t-low);margin-top:5px;line-height:1.45}
.f.err .hint{color:var(--crit)}
.opt{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;border:1.5px solid var(--line-s);
  background:var(--surf-1);width:100%;margin-bottom:8px;transition:.2s}
.opt i.d{width:11px;height:11px;border-radius:50%;flex:none;background:var(--oc,var(--t-low))}
.opt b{font-size:13px;flex:1}
.opt span{font-size:10.5px;color:var(--t-low)}
.opt.on{border-color:var(--oc,var(--gold));background:color-mix(in srgb,var(--oc,var(--gold)) 12%,transparent)}

/* ═══ sheet / modal ═══ */
.scrim{position:absolute;inset:0;background:rgba(3,7,14,.62);backdrop-filter:blur(3px);z-index:70;opacity:0;
  pointer-events:none;transition:.3s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:71;max-height:92%;background:var(--glass-hi);
  backdrop-filter:blur(28px);border-radius:28px 28px 0 0;border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .44s var(--spring);display:flex;flex-direction:column;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.sheet.on{transform:none}
.grab{width:40px;height:4px;border-radius:9px;background:var(--surf-3);margin:10px auto 2px;flex:none}
.sh-h{display:flex;align-items:center;gap:10px;padding:6px 18px 10px;flex:none}
.sh-h h3{font-size:18px;flex:1}
.sh-b{overflow-y:auto;padding:0 18px calc(26px + env(safe-area-inset-bottom,0px))}

.toast{position:absolute;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:90;background:var(--glass-hi);backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;display:flex;gap:11px;align-items:center;
  box-shadow:var(--sh-2);transform:translateY(160%);opacity:0;transition:.45s var(--spring)}
.toast.on{transform:none;opacity:1}
.toast svg{width:19px;height:19px;flex:none;stroke:var(--gold)}
.toast b{font-size:13px;display:block}
.toast span{font-size:11.5px;color:var(--t-low)}
.conf{position:absolute;inset:0;pointer-events:none;z-index:95;overflow:hidden}
.conf i{position:absolute;width:7px;height:11px;border-radius:2px;opacity:0;animation:cf 2.3s var(--ease) forwards}
@keyframes cf{0%{opacity:1;transform:translateY(-20px) rotate(0)}100%{opacity:0;transform:translateY(105vh) rotate(650deg)}}

.rise>*{opacity:0;transform:translateY(12px);animation:rz .45s var(--ease) forwards}
@keyframes rz{to{opacity:1;transform:none}}
.rise>*:nth-child(1){animation-delay:.03s}.rise>*:nth-child(2){animation-delay:.07s}
.rise>*:nth-child(3){animation-delay:.11s}.rise>*:nth-child(4){animation-delay:.15s}
.rise>*:nth-child(5){animation-delay:.19s}.rise>*:nth-child(6){animation-delay:.23s}
.rise>*:nth-child(7){animation-delay:.27s}.rise>*:nth-child(n+8){animation-delay:.3s}
html[data-motion="calm"] *{animation-duration:.001s!important;transition-duration:.08s!important}
html[data-contrast="high"]{--line-s:rgba(255,255,255,.3);--t-mid:rgba(244,241,234,.92);--t-low:rgba(244,241,234,.72)}
html[data-contrast="high"][data-theme="light"]{--line-s:rgba(12,26,48,.34);--t-mid:rgba(21,34,57,.92);--t-low:rgba(21,34,57,.74)}

/* ═══ conversa ═══ */
.msg{display:flex;gap:9px;margin-bottom:14px;align-items:flex-end}
.msg.me{flex-direction:row-reverse}
.msg .bb{max-width:80%;padding:11px 13px;border-radius:19px;background:var(--surf-2);border:1px solid var(--line-s);
  font-size:13.5px;line-height:1.55;word-break:break-word}
html[data-theme="light"] .msg .bb{background:var(--bg-2);box-shadow:var(--sh-1)}
.msg.me .bb{background:linear-gradient(145deg,rgba(192,170,126,.22),rgba(192,170,126,.1));border-color:var(--line)}
.msg .who{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;color:var(--wc,var(--t-low))}
.msg .tm{font-size:9.5px;color:var(--t-low);margin-top:6px;text-align:right;font-weight:700}
.day{text-align:center;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--t-low);margin:8px 0 14px}
.comp{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:42;
  background:var(--glass-hi);backdrop-filter:blur(24px);border:1px solid var(--line-s);border-radius:24px;
  box-shadow:var(--sh-2);padding:8px 9px;display:flex;align-items:center;gap:7px}
.comp input{flex:1;font-size:13.5px;padding:6px 4px}
.cb{width:38px;height:38px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--surf-2);transition:.22s var(--spring)}
.cb svg{width:18px;height:18px;stroke:var(--t-mid)}
.cb:active{transform:scale(.88)}
.cb.g{background:linear-gradient(140deg,var(--gold-lite),var(--gold-deep))} .cb.g svg{stroke:var(--on-gold)}
.cb.r{background:var(--crit-b)} .cb.r svg{stroke:var(--crit)}

/* ═══ mídia ═══ */
.aud{display:flex;align-items:center;gap:10px;min-width:180px}
.aud .pl{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gold)}
.aud .pl svg{width:14px;height:14px;stroke:var(--on-gold);fill:var(--on-gold)}
.wv{display:flex;align-items:center;gap:2.5px;height:26px;flex:1}
.wv i{width:2.5px;border-radius:9px;background:var(--t-low);transition:.2s}
.wv i.p{background:var(--gold)}
.aud .dr{font-size:10.5px;color:var(--t-low);font-weight:800;flex:none}
.thumb{width:100%;border-radius:14px;display:block;max-height:230px;object-fit:cover;background:var(--surf-2)}
.thumb.sq{width:56px;height:56px;border-radius:13px;flex:none}
.rec{display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 0}
.rbt{width:96px;height:96px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:linear-gradient(140deg,#E0796F,#B5453B);box-shadow:0 12px 40px rgba(224,121,111,.4)}
.rbt svg{width:32px;height:32px;stroke:#fff}
.rbt.go::before,.rbt.go::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(224,121,111,.6);animation:rr 2.2s var(--ease) infinite}
.rbt.go::after{animation-delay:1.1s}
@keyframes rr{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.rtm{font-family:'Playfair Display',serif;font-size:30px;font-weight:600}
.wvl{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:52px;width:100%}
.wvl i{width:3px;border-radius:9px;background:var(--gold);height:5px;transition:height .09s linear}

/* ═══ gráficos ═══ */
.ch{height:150px;position:relative;margin:8px 0}
.ch svg{width:100%;height:100%;overflow:visible}
.ch .gl{stroke:var(--line-s);stroke-width:1;stroke-dasharray:3 4}
.ch .ln{fill:none;stroke-width:2.4;stroke-dasharray:1200;stroke-dashoffset:1200;animation:dl 1.4s var(--ease) forwards}
@keyframes dl{to{stroke-dashoffset:0}}
.ch .xl{font-size:9px;fill:var(--t-low);font-weight:800;stroke:none}
.ch .ar{opacity:0;animation:fi .8s .5s forwards;stroke:none}
@keyframes fi{to{opacity:1}}
.bars{display:flex;align-items:flex-end;gap:7px;height:120px;padding-top:6px}
.bars .bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .bv{width:100%;border-radius:7px 7px 3px 3px;height:0;transition:height 1s var(--ease);min-height:3px}
.bars .bc span{font-size:9px;font-weight:800;color:var(--t-low)}
.heat{display:grid;grid-template-columns:auto repeat(7,1fr);gap:4px;align-items:center}
.heat .hl{font-size:8.5px;font-weight:800;color:var(--t-low);text-align:right;padding-right:4px}
.heat .hd{font-size:8.5px;font-weight:900;color:var(--t-low);text-align:center}
.heat .hc{aspect-ratio:1;border-radius:5px;background:var(--surf-2)}
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line-s)}
.ti{position:relative;padding-bottom:16px}
.ti::before{content:'';position:absolute;left:-22px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--bg-1);border:2.5px solid var(--gold)}
.ti.s::before{border-color:var(--t-low)}
.ti .tt{font-size:9.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--t-low);margin-bottom:3px}
.ti .tb{font-size:12.5px;line-height:1.5;color:var(--t-mid)}
.ti .tb b{color:var(--t-hi)}
.why{border-left:2px solid var(--gold);padding:8px 0 8px 12px;font-size:12.5px;line-height:1.6;color:var(--t-mid);
  font-style:italic;font-family:'Playfair Display',serif;margin:12px 0}
.why b{font-style:normal;font-family:'Mulish';color:var(--gold);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-bottom:4px;font-weight:900}
.bul{display:flex;gap:9px;padding:7px 0;font-size:12.5px;line-height:1.5;align-items:flex-start;color:var(--t-mid)}
.bul svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--gold)}
.bul.ok svg{stroke:var(--ok)} .bul.w svg{stroke:var(--warn)} .bul.c svg{stroke:var(--crit)}
.bul b{color:var(--t-hi)}

/* ═══ impressão do PEI ═══ */
#print{display:none}
@media print{
  body{overflow:visible!important;background:#fff!important;color:#111!important}
  .stage{position:static!important;display:block!important}
  .device,.vp{max-width:none!important;height:auto!important;overflow:visible!important;background:#fff!important;box-shadow:none!important}
  .screens,.tabs,.fab,.scrim,.sheet,.toast,.aurora,.comp,.conf{display:none!important}
  #print{display:block!important;padding:0;font-family:Georgia,serif;color:#111}
  #print h1{font-size:22pt;margin-bottom:2pt}
  #print h2{font-size:12pt;margin:16pt 0 6pt;border-bottom:1px solid #999;padding-bottom:3pt}
  #print h3{font-size:11pt;margin:10pt 0 3pt}
  #print p,#print li,#print td{font-size:10pt;line-height:1.5}
  #print table{width:100%;border-collapse:collapse;margin:6pt 0}
  #print td,#print th{border:1px solid #bbb;padding:4pt 6pt;text-align:left;vertical-align:top}
  #print .meta{font-size:9pt;color:#555;margin-bottom:10pt}
  #print .sign{margin-top:26pt;display:flex;gap:24pt;flex-wrap:wrap}
  #print .sign div{flex:1;min-width:180pt;border-top:1px solid #333;padding-top:4pt;font-size:9pt}
  @page{margin:16mm}
}

/* ═══ CAA · pictogramas e pranchas ═══ */
.pg{width:100%;height:100%;display:block;--pk:#2C2A35;--pw:#FFFFFF;--pf2:var(--pf)}
/* massas de cor */
.pg .f{fill:var(--pf)} .pg .f2{fill:var(--pf2)} .pg .k{fill:var(--pk)} .pg .w,.pg .wt{fill:#FFFFFF}
.pg .sk{fill:#FBD3B1} .pg .sk2{fill:#EFB88F}
.pg .hr{fill:#4A362E} .pg .hr2{fill:#8A5F45}
.pg .ey{fill:#2C2A35}
.pg .ch{fill:#F58AA0;opacity:.7} .pg .chr{fill:#EE6B6B;opacity:.75} .pg .chb{fill:#7FB6E8;opacity:.6}
.pg .rd{fill:#EF6E6E} .pg .yl{fill:#FBC55C} .pg .gn{fill:#63C695} .pg .bl{fill:#6FA8DC}
.pg .pp{fill:#B49AE0} .pg .br{fill:#B07A50} .pg .gy{fill:#C6CDD6}
.pg .sh{fill:#2C2A35;opacity:.07}
/* traços */
.pg .ln,.pg .lw,.pg .lf,.pg .lk,.pg .lr,.pg .lb,.pg .lyl,.pg .lgy,.pg .brc,.pg .s,.pg .fs
  {fill:none;stroke-linecap:round;stroke-linejoin:round}
.pg .ln{stroke:#2C2A35;stroke-width:4} .pg .lw{stroke:#FFFFFF;stroke-width:4}
.pg .lf{stroke:var(--pf);stroke-width:6} .pg .lk{stroke:#4A5260;stroke-width:7}
.pg .lr{stroke:#EF6E6E;stroke-width:4} .pg .lb{stroke:#6FA8DC;stroke-width:4}
.pg .lyl{stroke:#FBC55C;stroke-width:5} .pg .lgy{stroke:#AEB6C2;stroke-width:4}
.pg .brc{stroke:#FBD3B1;stroke-width:9}
.pg .s{stroke:var(--pk);stroke-width:5.5} .pg .fs{stroke:var(--pf);stroke-width:7}
.pg .lk2{fill:#4A5260}

.cel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:2px;padding:7px 4px 5px;border-radius:16px;background:var(--cb,#fff);border:3px solid var(--cc,#ddd);
  aspect-ratio:1;overflow:hidden;transition:.18s var(--spring);width:100%}
.cel:active{transform:scale(.94)}
.cel .im{flex:1;width:100%;display:grid;place-items:center;min-height:0}
.cel .im img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.cel .lb{font-size:11px;font-weight:900;letter-spacing:-.01em;color:#16202E;text-align:center;
  line-height:1.1;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:lowercase}
.cel.vazia{background:var(--surf-1);border:2px dashed var(--line-s);color:var(--t-low)}
.cel.vazia svg{width:22px;height:22px;stroke:var(--t-low)}
.cel .pasta{position:absolute;top:4px;right:5px;width:15px;height:15px;opacity:.5}
.cel.big .lb{font-size:13px}
.grade{display:grid;gap:8px}

.strip{display:flex;align-items:center;gap:7px;background:var(--glass-hi);border:1px solid var(--line);
  border-radius:20px;padding:8px;min-height:74px;backdrop-filter:blur(20px)}
.strip .itens{flex:1;display:flex;gap:6px;overflow-x:auto;min-height:56px;align-items:center}
.strip .itens .cel{width:56px;flex:none;padding:4px 3px 3px;border-radius:12px;border-width:2px}
.strip .itens .cel .lb{font-size:8.5px}
.strip .vazio{font-size:12px;color:var(--t-low);padding-left:6px}
.strip .bt2{width:46px;height:46px;border-radius:16px;flex:none;display:grid;place-items:center;background:var(--surf-2)}
.strip .bt2 svg{width:20px;height:20px;stroke:var(--t-hi)}
.strip .bt2.g{background:linear-gradient(140deg,var(--gold-lite),var(--gold-deep))}
.strip .bt2.g svg{stroke:var(--on-gold)}

.pkGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pk{border-radius:14px;padding:6px 3px 4px;background:var(--surf-1);border:1px solid var(--line-s);
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:.18s}
.pk:active{transform:scale(.92)}
.pk .im{width:100%;aspect-ratio:1;background:#fff;border-radius:10px;padding:4px;display:grid;place-items:center}
.pk .im img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.pk span{font-size:9px;font-weight:800;color:var(--t-mid);text-align:center;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.pk.on{border-color:var(--gold);background:rgba(192,170,126,.16)}

.falarTop{position:absolute;left:0;right:0;top:0;z-index:30;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  display:flex;gap:8px;align-items:center}
.scr[data-s="falar"]{background:var(--bg-1)}
#v-falar{padding-top:6px}

@media print{
  #print .bd{display:grid;gap:4mm;margin-top:6mm}
  #print .bc{border:1.2mm solid #333;border-radius:4mm;padding:2mm;display:flex;flex-direction:column;
    align-items:center;justify-content:space-between;aspect-ratio:1;page-break-inside:avoid}
  #print .bc svg,#print .bc img{width:100%;flex:1;min-height:0;object-fit:contain}
  #print .bc b{font-size:11pt;text-transform:lowercase;margin-top:1mm}
  #print .cut{color:#888;font-size:8pt;margin-top:3mm}
}






