/* Painéis de exemplo na página principal (mesmos do Estúdio) + brilho no botão e meteoros */
/* ---- dashboards ---- */
.dashes{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:1.1rem;align-items:start}
.dash{background:#fff;border:1px solid var(--linha);border-radius:18px;padding:1.2rem;min-width:0;font-size:.9rem}
.dash header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.dash header b{font:800 1.1rem var(--display)}
.dash header small{font-weight:600;font-size:.74rem;color:var(--azul);background:#1F5BF014;padding:.15rem .55rem;border-radius:999px;white-space:nowrap}
.dash .k{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.6rem;margin-bottom:1rem}
.dash .k div{background:#F4F6FA;border-radius:12px;padding:.6rem .7rem;min-width:0}
.dash .k span{display:block;font-size:.72rem;color:var(--cinza)}
.dash .k b{display:block;font:800 1.3rem var(--display);font-variant-numeric:tabular-nums}
.dash .k em{font-style:normal;font-size:.72rem;font-weight:700}
.sobe{color:#0B8A4B}.cai{color:#C8311F}
.barras{display:flex;align-items:flex-end;gap:.5rem;height:7rem;margin-bottom:1.6rem}
.barras i{position:relative;flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(#22D3EE,#1F5BF0);transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--h) * 5ms)}
.vivo .barras i{transform:none}
.barras span{position:absolute;left:0;right:0;bottom:-1.3rem;text-align:center;font-size:.7rem;font-style:normal;color:var(--cinza)}
.lin{list-style:none;margin:0;padding:0}
.lin li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-top:1px solid #07111F12}
.lin b{font-variant-numeric:tabular-nums}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.kanban div{background:#F4F6FA;border-radius:12px;padding:.5rem;min-width:0}
.kanban b{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:.4rem}
.kanban b i{font-style:normal;background:#07111F14;border-radius:999px;padding:0 .4rem}
.kanban span{display:block;background:#fff;border-radius:8px;padding:.4rem .45rem;margin-top:.35rem;font-size:.74rem;font-weight:600;border-left:3px solid #1F5BF0;box-shadow:0 1px 3px #0001}
.kanban span.a{border-left-color:#F59E0B}.kanban span.v{border-left-color:#12B76A}
.agenda{list-style:none;margin:0 0 1rem;padding:0}
.agenda li{display:grid;grid-template-columns:3rem 1fr;gap:.6rem;align-items:center;margin-bottom:.35rem}
.agenda time{font:500 .74rem 'JetBrains Mono',monospace;color:var(--cinza)}
.agenda span{padding:.45rem .7rem;border-radius:9px;font-weight:600;font-size:.82rem;background:color-mix(in srgb,var(--c) 14%,#fff);border-left:3px solid var(--c)}
.agenda .livre{background:none;border:1.5px dashed #07111F33;color:var(--cinza)}
.linha{display:block;width:100%;height:6rem;margin-bottom:1rem}
.linha .tr{fill:none;stroke:#1F5BF0;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1)}
.linha .area{fill:#1F5BF01c;opacity:0;transition:opacity 1s .8s}
.vivo .linha .tr{stroke-dashoffset:0}.vivo .linha .area{opacity:1}
.origem{list-style:none;margin:0;padding:0}
.origem li{display:grid;grid-template-columns:5.5rem 1fr;gap:.6rem;align-items:center;margin:.35rem 0;font-size:.82rem}
.origem i{height:.5rem;border-radius:9px;background:#22D3EE;width:0;transition:width 1s cubic-bezier(.16,1,.3,1) .3s}
.vivo .origem i{width:var(--w)}
.fin{display:grid;grid-template-columns:8rem 1fr;gap:1rem;align-items:center}
@property --pct{syntax:"<percentage>";inherits:false;initial-value:0%}
.rosca{aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(#fff 56%,transparent 57%),conic-gradient(#1F5BF0 var(--pct),#E9EEF7 0);transition:--pct 1.4s cubic-bezier(.16,1,.3,1)}
.vivo .rosca{--pct:62%}
.rosca b{font:800 1.5rem var(--display)}.rosca span{font-size:.7rem;color:var(--cinza)}
.chatlog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.chatlog li{max-width:82%;padding:.4rem .7rem;border-radius:12px;font-size:.82rem}
.chatlog .c{background:#F4F6FA;align-self:flex-start}.chatlog .b{background:#1F5BF0;color:#fff;align-self:flex-end}
.dash.escuro{background:#0B1626;color:#E6EDF7;border-color:#0B1626}
.dash.escuro header small{color:#22D3EE;background:#22D3EE1f}
.dash.escuro .k div{background:#ffffff0f}.dash.escuro .k span{color:#9fb3c8}
.dash.escuro .lin li{border-color:#ffffff1a}
.dash.escuro .sobe{color:#4ADE80}.dash.escuro .cai{color:#FF8A80}
.dev code,.dev pre{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem}
.up span{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.4rem}
.up div{display:flex;gap:2px;margin-bottom:1rem}
.up i{flex:1;height:1.6rem;border-radius:2px;background:#4ADE80;opacity:0;transition:opacity .3s}
.up i.f{background:#F59E0B}
.vivo .up i{opacity:1}
.deploys{list-style:none;margin:0 0 1rem;padding:0}
.deploys li{display:grid;grid-template-columns:auto auto 1fr auto;gap:.5rem;align-items:center;padding:.35rem 0;border-top:1px solid #ffffff1a;font-size:.8rem}
.deploys i{width:.55rem;height:.55rem;border-radius:50%}.deploys .ok{background:#4ADE80}.deploys .er{background:#FF6B6B}
.deploys span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deploys time{color:#9fb3c8;font-size:.72rem}
.dev pre{margin:0;padding:.7rem;border-radius:10px;background:#07111F;color:#9fb3c8;overflow:auto;line-height:1.5}
.dev pre b{color:#4ADE80}
.calor{display:grid;grid-template-columns:repeat(21,1fr);gap:2px;margin-bottom:1rem}
.calor i{aspect-ratio:1;border-radius:2px;background:#22D3EE;opacity:calc(.12 + var(--o) * .88)}

/* central de avisos */
.av-abas{display:flex;gap:.3rem;padding:.25rem;border-radius:999px;background:#F4F6FA;margin-bottom:.8rem;flex-wrap:wrap}
.av-abas button{border:0;background:none;font:inherit;font-weight:700;font-size:.78rem;padding:.4rem .7rem;border-radius:999px;cursor:pointer;color:var(--noite)}
.av-abas button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px #0002}
.av-abas i{font-style:normal;font-size:.7rem;background:#07111F14;border-radius:999px;padding:0 .35rem;margin-left:.2rem}
.av-lista{list-style:none;margin:0;padding:0}
.av-lista li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;padding:.5rem 0;border-top:1px solid #07111F12;animation:g-entra .35s cubic-bezier(.16,1,.3,1) both}
.av-lista li[hidden]{display:none}
.av-lista li > i{width:.6rem;height:.6rem;border-radius:50%;background:var(--c)}
.av-lista span{font-size:.76rem;color:var(--cinza);min-width:0}
.av-lista span b{display:block;font-size:.86rem;color:var(--noite)}
.av-lista em{font-style:normal;font-weight:700;font-size:.74rem;color:var(--azul)}

.paineis-sec .dashes{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.paineis-sec .dash{box-shadow:0 20px 50px #0B162614}
.paineis-sec .duvida{margin-top:2rem}
/* brilho que atravessa o botão principal */
.botao.brilha{position:relative;overflow:hidden}
.botao.brilha::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff55 50%,transparent 65%);transform:translateX(-100%);animation:brilho-botao 3.2s ease-in-out infinite;pointer-events:none}
@keyframes brilho-botao{55%,100%{transform:translateX(100%)}}
/* meteoros discretos no fundo dos planos */
#planos{position:relative;overflow:hidden}
#planos > .miolo{position:relative}
.meteoros{position:absolute;inset:0;pointer-events:none;opacity:.5}
.meteoros i{position:absolute;top:-8%;left:var(--l);width:1.5px;height:80px;background:linear-gradient(transparent,#fff);animation:meteoro var(--t) linear infinite;animation-delay:var(--a);opacity:0}
@keyframes meteoro{0%{transform:translate(0,0) rotate(35deg);opacity:1}70%{opacity:1}100%{transform:translate(-320px,460px) rotate(35deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.botao.brilha::after,.meteoros i{animation:none}.meteoros{display:none}}
@keyframes g-entra{from{opacity:0;transform:translateY(-10px)}}
/* estado "pressionado": o botão responde ao toque */
.botao:active{transform:translateY(1px) scale(.97)}