/* Central v2: pretos neutros em camadas (R = G = B), duas camadas (conteúdo opaco, navegação em vidro), verde Palmeiras só para clicável, selecionado e não lido. */
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-var.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --ui:-apple-system,BlinkMacSystemFont,"Inter","Geist",system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","Adwaita Mono","SF Mono",ui-monospace,Menlo,monospace;
  /* escuro: base, elevado, terciário (o sistema da Apple no escuro) */
  --fundo:#000000; --elev:#1c1c1c; --terc:#2c2c2c; --quart:#3a3a3a;
  --borda:rgba(255,255,255,.09); --sep:rgba(255,255,255,.13); --sep-forte:rgba(255,255,255,.26);
  --texto:#f5f5f5; --mute:#a3a3a3; --dim:#959595;
  --verde:#3fcf8e; --verde-solido:#0f7a4d; --verde-fundo:rgba(63,207,142,.15);
  --laranja:#ff9f0a; --laranja-fundo:rgba(255,159,10,.16);
  --verm:#ff6b63; --verm-fundo:rgba(255,107,99,.16); --verm-solido:#c9302a;
  --sobre-solido:#ffffff;
  --vidro:rgba(28,28,28,.74); --vidro-borda:rgba(255,255,255,.16);
  --sombra:0 10px 34px rgba(0,0,0,.55);
  --sombra-vidro:0 8px 30px rgba(0,0,0,.5);
  --scrim:rgba(0,0,0,.55);
  --hover:rgba(255,255,255,.06); --press:rgba(255,255,255,.1);
  --seg-on:#636363;
  --r-cartao:16px; --r-campo:10px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
:root[data-tema="claro"]{
  color-scheme:light;
  --fundo:#f2f2f2; --elev:#ffffff; --terc:#ebebeb; --quart:#dcdcdc;
  --borda:rgba(0,0,0,.08); --sep:rgba(0,0,0,.11); --sep-forte:rgba(0,0,0,.24);
  --texto:#111111; --mute:#555555; --dim:#656565;
  --verde:#0a6b44; --verde-solido:#0e7a50; --verde-fundo:rgba(14,122,80,.11);
  --laranja:#a35a00; --laranja-fundo:rgba(214,120,0,.14);
  --verm:#c0261b; --verm-fundo:rgba(192,38,27,.1); --verm-solido:#c0261b;
  --vidro:rgba(255,255,255,.78); --vidro-borda:rgba(0,0,0,.1);
  --sombra:0 10px 30px rgba(0,0,0,.14);
  --sombra-vidro:0 8px 26px rgba(0,0,0,.14);
  --scrim:rgba(0,0,0,.32);
  --hover:rgba(0,0,0,.045); --press:rgba(0,0,0,.08);
  --seg-on:#ffffff;
}
@media (prefers-reduced-transparency:reduce){
  :root{--vidro:#1c1c1c}
  :root[data-tema="claro"]{--vidro:#ffffff}
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--fundo);color:var(--texto);font:14px/1.5 var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i .d{fill:currentColor;stroke:none;opacity:.2}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-user-select:none;user-select:none}
input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:6px}
::selection{background:var(--verde-fundo);color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--quart);border-radius:8px;border:3px solid transparent;background-clip:content-box}
.mono{font-family:var(--mono)}
.mute{color:var(--mute)}.dim{color:var(--dim)}
.sem-js{padding:24px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- estrutura ---------- */
.app{position:relative;display:grid;grid-template-columns:minmax(0,1fr);height:100dvh}
.principal{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;position:relative;scroll-padding-top:70px}
.palco{min-height:100%}
.pagina{padding:calc(var(--safe-t) + 18px) 16px calc(112px + var(--safe-b));max-width:760px;margin:0 auto}
.pagina.larga{max-width:1100px}
.cab{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cab .tit{min-width:0;flex:1 1 150px}
.cab h1{font-size:34px;font-weight:700;letter-spacing:-.6px;line-height:1.1}
.cab .sub{color:var(--mute);font-size:14px;margin-top:4px}
.cab .acoes{display:flex;gap:6px;align-items:center;margin-left:auto}

/* navegação em vidro: barra de abas flutuante (celular) e barra lateral (notebook) */
.vidro{background:var(--vidro);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--vidro-borda);box-shadow:var(--sombra-vidro)}
.abas{position:fixed;left:50%;bottom:calc(10px + var(--safe-b));width:min(calc(100% - 24px),520px);transform:translateX(-50%);height:66px;border-radius:33px;display:grid;grid-template-columns:repeat(5,1fr);padding:5px;z-index:40;view-transition-name:abas}
.aba{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:28px;color:var(--mute);font-size:12px;font-weight:500;min-width:0}
.aba svg.i{width:25px;height:25px}
.aba.on{color:var(--verde);background:var(--press)}
.aba .n,.nav-item .n{background:var(--verm-solido);color:#fff;font:600 12px/18px var(--ui);min-width:18px;height:18px;border-radius:9px;text-align:center;padding:0 5px}
.aba .n{position:absolute;top:4px;left:calc(50% + 6px)}
.topo{position:fixed;left:0;right:0;top:0;height:calc(var(--safe-t) + 48px);padding-top:var(--safe-t);display:flex;align-items:center;justify-content:center;z-index:35;opacity:0;pointer-events:none;transition:opacity .2s ease;border:0;border-bottom:1px solid var(--vidro-borda);box-shadow:none;view-transition-name:topo}
.topo .tt{font-size:17px;font-weight:600}
.rolou .topo{opacity:1}
.lateral{display:none}
.faixa-rede{position:sticky;top:0;z-index:30;background:var(--laranja-fundo);color:var(--laranja);padding:8px 16px;font-size:13px;font-weight:500;text-align:center}

/* ---------- cartões, grupos, listas ---------- */
.cartao{background:var(--elev);border:1px solid var(--borda);border-radius:var(--r-cartao);padding:16px;min-width:0}
.cartao.destaque{border-color:var(--verde)}
.cartao.atencao{border-color:var(--laranja)}
.cartao.ruim{border-color:var(--verm)}
.sec-t{display:flex;align-items:center;gap:8px;margin:0 4px 8px;color:var(--mute);font-size:13px;font-weight:600;letter-spacing:.1px}
.sec-t h2{font-size:13px;font-weight:600;color:inherit}
.sec-t .n{margin-left:auto;font:500 12px var(--mono);color:var(--dim)}
.sec-t a.mais{margin-left:auto;color:var(--verde);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:2px}
.bloco{margin-bottom:24px;min-width:0}
.grupo{background:var(--elev);border:1px solid var(--borda);border-radius:var(--r-cartao);overflow:hidden}
.li{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;min-width:0;width:100%;text-align:left;background:var(--elev);min-height:52px}
.li+.li::before{content:"";position:absolute;top:0;left:58px;right:0;height:1px;background:var(--sep)}
.li.sem-q+.li::before,.li.sem-q::before{left:14px}
a.li:hover,button.li:hover,.li.clic:hover{background:var(--terc)}
a.li:active,button.li:active{background:var(--terc)}
.li .q{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--terc);color:var(--mute)}
.li .q svg.i{width:20px;height:20px}
.li .q.verde{background:var(--verde-fundo);color:var(--verde)}
.li .q.laranja{background:var(--laranja-fundo);color:var(--laranja)}
.li .q.verm{background:var(--verm-fundo);color:var(--verm)}
.li .meio{flex:1;min-width:0}
.li .t{font-size:15px;font-weight:500;overflow-wrap:anywhere;line-height:1.35}
.li .d{color:var(--mute);font-size:13px;overflow-wrap:anywhere;line-height:1.4;margin-top:1px}
.li .fim{color:var(--dim);font-size:12px;white-space:nowrap;flex:none}
.li .seta{color:var(--dim);flex:none;margin-right:-4px}
.li .seta svg.i{width:18px;height:18px}
.vazio{color:var(--mute);padding:20px 8px;font-size:15px;text-align:center}
.vazio b{display:block;color:var(--texto);font-weight:600;font-size:16px;margin-bottom:4px}
.vazio .btn{margin-top:12px}
.num{font:700 26px/1.1 var(--ui);letter-spacing:-.4px}
.num small{display:block;font:500 12px var(--ui);color:var(--mute);letter-spacing:0;margin-top:4px}
.num.sem{font-size:15px;font-weight:600;color:var(--dim);letter-spacing:0;padding-top:6px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grade{display:grid;gap:16px}

/* aviso de página: erro, atenção e informação com o que houve e o que fazer */
.aviso-pag{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-cartao);border:1px solid var(--borda);background:var(--elev);margin-bottom:16px}
.aviso-pag .ic{flex:none;margin-top:1px}
.aviso-pag .tx{flex:1;min-width:0}
.aviso-pag b{display:block;font-size:15px;font-weight:600;line-height:1.35}
.aviso-pag p{color:var(--mute);font-size:14px;margin-top:2px;overflow-wrap:anywhere}
.aviso-pag .btn{margin-top:10px}
.aviso-pag.erro{border-color:var(--verm);background:var(--verm-fundo)}
.aviso-pag.erro .ic{color:var(--verm)}
.aviso-pag.atencao{border-color:var(--laranja);background:var(--laranja-fundo)}
.aviso-pag.atencao .ic{color:var(--laranja)}
.aviso-pag.info .ic{color:var(--mute)}
.nota-erro{color:var(--verm);font-size:13px}

/* esqueleto: forma da tela, respira por opacidade */
.esq{display:grid;gap:12px;padding:2px 0}
.esq i{display:block;height:64px;border-radius:var(--r-cartao);background:var(--elev);animation:respira 1.3s ease-in-out infinite}
.esq i:nth-child(2){animation-delay:.15s}.esq i:nth-child(3){animation-delay:.3s}.esq i:nth-child(4){animation-delay:.45s}
.esq i.alto{height:120px}
@keyframes respira{50%{opacity:.45}}

/* ---------- botões, campos, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 16px;border-radius:18px;font-size:14px;font-weight:600;color:var(--texto);background:var(--terc);white-space:nowrap;transition:transform .15s ease,background-color .15s ease}
.btn:hover{background:var(--quart)}
.btn:active{transform:scale(.97)}
.btn.primario{background:var(--verde-solido);color:var(--sobre-solido)}
.btn.primario:hover{filter:brightness(1.12)}
.btn.perigo{background:var(--verm-fundo);color:var(--verm)}
.btn.seco{background:none;color:var(--verde)}
.btn.seco:hover{background:var(--hover)}
.btn.peq{height:32px;padding:0 13px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.ib{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;color:var(--mute);flex:none;transition:transform .15s ease,background-color .15s ease}
.ib:hover{background:var(--hover);color:var(--texto)}
.ib:active{transform:scale(.92)}
.ib.on{color:var(--verde)}
.ib.cap{background:var(--terc);color:var(--texto)}
.ib[disabled]{opacity:.35;cursor:default}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>span{font-size:12px;color:var(--mute);font-weight:600}
.entrada{width:100%;height:42px;padding:0 14px;border-radius:var(--r-campo);background:var(--terc);color:var(--texto);font-size:16px;border:1px solid transparent}
:root[data-tema="claro"] .entrada{background:var(--terc)}
textarea.entrada{height:auto;padding:10px 14px;resize:none;line-height:1.45}
.entrada:focus{border-color:var(--verde)}
.entrada::placeholder{color:var(--mute);opacity:.9}
select.entrada{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 19px) 18px,calc(100% - 14px) 18px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=datetime-local].entrada,input[type=date].entrada{color-scheme:dark}
:root[data-tema="claro"] input[type=datetime-local].entrada,:root[data-tema="claro"] input[type=date].entrada{color-scheme:light}
.busca{position:relative;flex:1;min-width:0}
.busca svg.i{position:absolute;left:12px;top:11px;color:var(--mute);width:20px;height:20px;pointer-events:none}
.busca .entrada{padding-left:40px;border-radius:21px}

.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;background:var(--terc);font-size:12px;font-weight:500;color:var(--mute);white-space:nowrap;line-height:1}
.chip svg.i{width:14px;height:14px}
.chip.verde{color:var(--verde);background:var(--verde-fundo)}
.chip.laranja{color:var(--laranja);background:var(--laranja-fundo)}
.chip.verm{color:var(--verm);background:var(--verm-fundo)}
.chip.mono{font-family:var(--mono)}
button.chip{cursor:pointer;height:32px;padding:0 14px;font-size:13px}
button.chip:hover{background:var(--quart)}
button.chip.on{color:var(--verde);background:var(--verde-fundo)}
.grupo-chips{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--terc);border-radius:10px;padding:2px;gap:2px}
.seg button{height:32px;padding:0 14px;color:var(--mute);font-size:13px;font-weight:600;border-radius:8px;transition:background-color .15s ease}
.seg button.on{background:var(--seg-on);color:var(--texto);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--quart);flex:none;display:inline-block}
.dot.ok{background:var(--verde)}.dot.att{background:var(--laranja)}.dot.bad{background:var(--verm)}
.dot.pulsa{animation:pulsa 1.6s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.35}}
.barra{height:6px;border-radius:3px;background:var(--quart);overflow:hidden}
.barra i{display:block;height:100%;border-radius:3px;background:var(--verde);transform-origin:left;transition:transform .35s ease}
.barra.att i{background:var(--laranja)}.barra.bad i{background:var(--verm)}
.med{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center;padding:7px 0}
.med .r{color:var(--mute);font-size:13px}
.med .v{font:500 13px var(--mono);min-width:96px;text-align:right}
.med .v.att{color:var(--laranja)}.med .v.bad{color:var(--verm)}

/* tabela leve */
.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th{text-align:left;font-weight:600;color:var(--mute);font-size:12px;padding:6px 8px 8px 0}
.tab td{padding:9px 8px 9px 0;border-top:1px solid var(--sep);vertical-align:middle}
.tab .d{text-align:right;font-family:var(--mono);font-size:13px;color:var(--mute);white-space:nowrap}
.tab th.d{font-family:var(--ui)}

/* ---------- Hoje ---------- */
.manchete{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.2px;margin:2px 0 16px}
.anotar{display:flex;gap:8px;align-items:center;margin-bottom:22px}
.anotar .entrada{border-radius:22px;height:44px}
.anotar .btn{height:44px;width:44px;padding:0;flex:none;border-radius:50%}
.hoje-grade{display:grid;gap:0}
.radar-card{display:block;padding:16px;border-radius:var(--r-cartao);background:var(--elev);border:1px solid var(--borda);transition:transform .15s ease}
.radar-card:active{transform:scale(.985)}
.radar-card.afeta{border-color:var(--laranja)}
.radar-card .topo-rc{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.radar-card .topo-rc svg.i{width:18px;height:18px;color:var(--verde)}
.radar-card .mch{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.15px}
.radar-card .rod{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.mini-prog{flex:1;min-width:80px;height:5px;border-radius:3px;background:var(--quart);overflow:hidden}
.mini-prog i{display:block;height:100%;background:var(--verde);border-radius:3px}

/* ---------- Notas ---------- */
.ferramentas{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.desliza{position:relative;overflow:hidden;border-radius:var(--r-cartao);margin-bottom:8px;background:var(--elev)}
.desliza-fundo{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-size:14px;font-weight:600;color:#fff}
.desliza-fundo .lado{display:flex;align-items:center;gap:8px;opacity:0}
.desliza-fundo.dir{background:var(--verde-solido)}
.desliza-fundo.esq{background:#636363}
.desliza-frente{position:relative;background:var(--elev);touch-action:pan-y;will-change:transform;border-radius:var(--r-cartao)}
.desliza.arrasta .desliza-frente{transition:none}
.desliza-frente.volta{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.desliza.sai{transition:transform .26s ease,opacity .26s ease,max-height .26s ease .12s,margin .26s ease .12s;opacity:0;max-height:0!important;margin-bottom:0}
.nota{display:flex;gap:12px;padding:14px;align-items:flex-start;border:1px solid var(--borda);border-radius:var(--r-cartao);background:var(--elev);cursor:pointer;width:100%;text-align:left}
.nota.fixada{border-color:var(--verde)}
.nota.atrasada{border-color:var(--laranja)}
.nota.destaca{animation:destaca 3s ease both}
@keyframes destaca{0%,60%{box-shadow:0 0 0 3px var(--verde)}100%{box-shadow:0 0 0 3px transparent}}
.nota .ck{width:26px;height:26px;border-radius:50%;border:2px solid var(--sep-forte);display:grid;place-items:center;flex:none;margin-top:0;color:transparent;transition:background-color .15s ease,border-color .15s ease}
.nota .ck:hover{border-color:var(--verde)}
.nota.feita .ck{background:var(--verde-solido);border-color:var(--verde-solido);color:#fff}
.nota .ck svg.i{width:15px;height:15px;stroke-width:2.6}
.nota.feita .tx{color:var(--mute);text-decoration:line-through}
.nota .corpo{flex:1;min-width:0}
.nota .tx{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.4}
.nota .meta{display:flex;gap:6px 8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.nota .ck-area{margin:-9px;padding:9px;display:grid;place-items:center;flex:none}
.cab-nova{display:flex;gap:8px}
.compor-extra{display:grid;gap:14px;margin-top:6px}
.folha-acoes{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.folha-acoes .btn{flex:1 1 130px}

/* ---------- Mais, ajustes ---------- */
.opcao{display:flex;align-items:center;gap:14px;padding:14px;min-height:56px;position:relative}
.opcao+.opcao::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--sep)}
.opcao .tx{flex:1;min-width:0}
.opcao .tx b{display:block;font-weight:600;font-size:15px}
.opcao .tx span{color:var(--mute);font-size:13px}
.li .badge{background:var(--verm-solido);color:#fff;font:600 12px/20px var(--ui);min-width:20px;height:20px;border-radius:10px;text-align:center;padding:0 6px}

/* acessos */
.acesso .nome{font-weight:600;font-size:15px}
.acesso .onde{color:var(--mute);overflow-wrap:anywhere;font-size:13px}
.acesso .onde a{color:var(--verde);text-decoration:underline;text-underline-offset:2px}
.acesso .obs{color:var(--mute);font-size:13px;margin-top:3px}
.form-grade{display:grid;gap:14px}

/* notificações */
.notif{display:flex;gap:12px;padding:14px;align-items:flex-start;cursor:pointer;width:100%;text-align:left;position:relative;background:var(--elev)}
.notif+.notif::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--sep)}
.notif:hover{background:var(--terc)}
.notif .meio{flex:1;min-width:0}
.notif .t{font-weight:600;font-size:15px}
.notif.lida .t{font-weight:500;color:var(--mute)}
.notif .c{color:var(--mute);margin-top:1px;overflow-wrap:anywhere;font-size:14px}
.notif .m{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center;font-size:12px;color:var(--dim)}
.notif .dot-n{margin-top:6px}

/* ---------- folha (sobe de baixo no celular, diálogo no notebook) ---------- */
.folha-raiz{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .25s ease}
.folha{position:relative;width:min(100%,640px);max-height:min(92dvh,900px);background:var(--elev);border:1px solid var(--borda);border-bottom:0;border-radius:22px 22px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.85,.25,1);box-shadow:var(--sombra);outline:0;padding-bottom:var(--safe-b)}
.folha-raiz.aberta .scrim{opacity:1}
.folha-raiz.aberta .folha{transform:none}
.folha.arrastando{transition:none}
.folha-cab{flex:none;padding:8px 8px 4px 20px;touch-action:none;cursor:grab}
.folha-cab .grab{width:38px;height:5px;border-radius:3px;background:var(--sep-forte);margin:0 auto 6px}
.folha-linha{display:flex;align-items:center;gap:6px;min-height:40px}
.folha-linha h2{flex:1;min-width:0;font-size:17px;font-weight:600;line-height:1.3}
.folha-corpo{flex:1;min-height:0;overflow:auto;padding:8px 20px 22px;overscroll-behavior:contain}
.lider{font:600 12px var(--ui)}

/* avisos (toasts) */
#avisos{position:fixed;left:0;right:0;bottom:calc(92px + var(--safe-b));z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.aviso{pointer-events:auto;background:var(--terc);color:var(--texto);border-radius:14px;padding:11px 16px;box-shadow:var(--sombra);font-size:14px;font-weight:500;max-width:min(460px,100%);display:flex;align-items:center;gap:12px;animation:sobe .24s ease both}
.aviso.sai{animation:desce .2s ease both}
.aviso.ruim{box-shadow:inset 0 0 0 1px var(--verm),var(--sombra)}
.aviso.bom{box-shadow:inset 0 0 0 1px var(--verde),var(--sombra)}
.aviso button{color:var(--verde);font-weight:700;margin-left:auto;padding:4px 2px}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}}
@keyframes desce{to{opacity:0;transform:translateY(8px)}}

/* login */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:20px;overflow:auto}
.entrar-caixa{width:min(400px,100%);background:var(--elev);border:1px solid var(--borda);border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.entrar-caixa .marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.entrar-caixa .marca img{width:32px;height:32px;border-radius:8px}
.entrar-caixa h1{font-size:28px;font-weight:700;letter-spacing:-.4px}
.entrar-caixa .entrada{height:48px}
.entrar-caixa .btn{height:48px;font-size:16px;border-radius:24px}
.codigo{font:500 22px var(--mono)!important;letter-spacing:.35em;text-align:center}

/* puxar para atualizar */
.ptr{position:absolute;left:50%;top:calc(var(--safe-t) + 6px);width:36px;height:36px;margin-left:-18px;border-radius:50%;background:var(--terc);display:grid;place-items:center;color:var(--mute);opacity:0;pointer-events:none;z-index:20}
.ptr.gira svg{animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* transição entre telas */
::view-transition-old(root){animation:vt-sai .12s ease both}
::view-transition-new(root){animation:vt-entra .22s ease both}
::view-transition-group(abas),::view-transition-group(topo){animation:none}
@keyframes vt-sai{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(8px)}}

/* ---------- notebook: barra lateral de vidro; Hoje cabe em 1366x650 ---------- */
@media (min-width:821px){
  .app{grid-template-columns:minmax(0,1fr)}
  .principal{margin-left:244px;scroll-padding-top:20px}
  .lateral{display:flex;flex-direction:column;position:fixed;left:10px;top:10px;bottom:10px;width:224px;border-radius:20px;padding:12px 10px 10px;gap:2px;z-index:40;view-transition-name:lateral}
  .marca{display:flex;align-items:center;gap:10px;padding:4px 10px 14px;font-weight:700;font-size:16px}
  .marca img{width:26px;height:26px;border-radius:7px}
  .nav-item{position:relative;display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;border-radius:12px;color:var(--mute);font-size:14px;font-weight:500;width:100%;text-align:left}
  .nav-item:hover{background:var(--hover);color:var(--texto)}
  .nav-item.on{background:var(--press);color:var(--texto)}
  .nav-item.on svg.i{color:var(--verde)}
  .nav-item .n{margin-left:auto}
  .lateral .vao{flex:1}
  .lateral .sep{height:1px;background:var(--sep);margin:8px 6px}
  .abas,.topo{display:none}
  .pagina{padding:24px 28px 32px;max-width:1180px}
  .cab h1{font-size:28px;letter-spacing:-.4px}
  .cab{margin-bottom:14px}
  #avisos{bottom:22px}
  .folha-raiz{align-items:center}
  .folha{border-radius:22px;border-bottom:1px solid var(--borda);max-height:88dvh;transform:translateY(24px) scale(.98);opacity:0;transition:transform .25s ease,opacity .2s ease}
  .folha-raiz.aberta .folha{opacity:1;transform:none}
  .btn{height:34px}
  .btn.peq{height:30px}
  .ib{width:34px;height:34px}
  .entrada{height:38px;font-size:14px}
  .anotar .entrada{height:38px}.anotar .btn{height:38px;width:38px}
  .li{min-height:46px;padding:10px 14px}
  .li .t{font-size:14px}
  .nota .tx{font-size:15px}
  /* Hoje numa tela só */
  .pagina.hoje{display:flex;flex-direction:column;height:100dvh;max-width:1260px;padding:20px 28px 20px}
  .hoje .cab{flex:none;margin-bottom:8px;align-items:center}
  .hoje .cab h1{font-size:26px}
  .hoje .manchete{font-size:16px;margin:0}
  .hoje .anotar{margin:0;width:340px}
  .hoje-corpo{flex:1;min-height:0;display:flex;flex-direction:column}
  .hoje-grade{flex:1;min-height:0;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
  .hoje-col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
  .hoje-col .bloco{margin-bottom:0}
  .hoje-col .bloco.cresce{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  .hoje-col .bloco.cresce .grupo{flex:1;min-height:0;overflow:auto}
  .hoje-col .sec-t{margin-bottom:6px}
  .hoje .li{min-height:42px;padding:7px 14px}
  .hoje .li .q{width:28px;height:28px}
  .hoje .radar-card{padding:12px 14px}
  .hoje .radar-card .rod{margin-top:8px}
  .hoje .num{font-size:22px}
}
@media (max-width:820px){
  .hoje-grade{display:flex;flex-direction:column}
  .hoje-col{display:contents}
  .btn,.seg button,.nav-item{min-height:44px}
  .btn{height:44px;font-size:15px}
  .btn.peq{height:38px}
  .ib{width:44px;height:44px}
  .nota .ck-area{margin:-9px}
  .cab .acoes{margin-left:auto}
  .li{min-height:56px}
}
@media (pointer:coarse){
  .btn{min-height:44px}
  .ib{min-width:44px;min-height:44px}
  button.chip{min-height:36px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

.nota-erro-bloco{color:var(--laranja);font-size:13px;padding:9px 12px;border-radius:10px;background:var(--laranja-fundo);margin-bottom:10px}
.li.foco{background:var(--verde-fundo)}
.grupo>.desliza{margin:0;border-radius:0}
.grupo>.desliza+.desliza{border-top:1px solid var(--sep)}
@media (max-width:820px){.seg button{min-height:40px}}
@media (max-width:820px){.ferramentas .busca{flex:1 1 100%}.ferramentas .seg{width:100%}.ferramentas .seg button{flex:1}}
@media (max-width:820px){.cab .anotar{flex:1 1 100%}}

@media (max-width:820px),(pointer:coarse){
  .sec-t a.mais{min-height:44px;padding:0 6px;margin:-14px -6px -14px 0}
  .seg button{min-height:44px}
  .rd-fontes summary{min-height:44px;display:flex;align-items:center}
}