/* ENXPLAN: kit do painel (classes ex-*). Nenhuma cor literal aqui: só tokens. */
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}
:focus-visible{outline:2px solid var(--ex-focus);outline-offset:3px;border-radius:8px}
.ex-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* rótulos */
.ex-caps{font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ex-ink-3)}
.ex-kicker{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ex-ink)}
.ex-mono{font-family:var(--ex-mono);font-size:.92em;letter-spacing:-.01em}
.ex-num{font-variant-numeric:tabular-nums}

/* cartão: sombra no lugar de borda */
.ex-card{background-color:var(--ex-card);background-image:var(--ex-sheen);border-radius:var(--ex-r-card);box-shadow:var(--ex-shadow-1);padding:20px;min-width:0}
.ex-card-2{background:var(--ex-card-2);border-radius:var(--ex-r-group);padding:16px;min-width:0}

/* botões */
.ex-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:0;border-radius:var(--ex-r-pill);font:600 13px/1 var(--ex-font);letter-spacing:.02em;cursor:pointer;transition:transform .2s var(--ex-spring),background-color .2s var(--ex-ease)}
.ex-btn:active{transform:scale(.97)}
.ex-btn-primary{position:relative;overflow:hidden;color:var(--ex-on-accent);background:linear-gradient(180deg,var(--ex-accent-top),var(--ex-accent-bot))}
.ex-btn-primary::after{content:"";position:absolute;inset:0 auto 0 -60%;width:40%;background:linear-gradient(90deg,transparent,var(--ex-ico-gloss),transparent);transform:skewX(-20deg);opacity:0;transition:left .6s var(--ex-ease-out),opacity .2s}
.ex-btn-primary:hover::after{left:120%;opacity:.7}
.ex-btn-plain{color:var(--ex-ink);background:var(--ex-fill-2)}
.ex-btn-plain:hover{background:var(--ex-fill-3)}

/* controle segmentado com marcador que desliza */
.ex-seg{position:relative;display:inline-flex;padding:3px;border-radius:var(--ex-r-pill);background:var(--ex-fill-2);max-width:100%}
.ex-seg-mark{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:var(--ex-r-pill);background:var(--ex-elev);box-shadow:var(--ex-shadow-1);transition:transform .32s var(--ex-spring),width .32s var(--ex-spring)}
.ex-seg button{position:relative;z-index:1;min-height:32px;padding:0 14px;border:0;border-radius:var(--ex-r-pill);background:transparent;color:var(--ex-ink-3);font:600 12.5px/1 var(--ex-font);white-space:nowrap;cursor:pointer;transition:color .2s var(--ex-ease)}
.ex-seg button:hover{color:var(--ex-ink-2)}
.ex-seg button[aria-pressed="true"]{color:var(--ex-ink)}

/* etiqueta de status: cor sempre acompanhada de texto */
.ex-tag{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 9px;border-radius:var(--ex-r-pill);font:600 11.5px/1 var(--ex-font);white-space:nowrap;color:var(--ex-ink-2);background:var(--ex-neutral-wash)}
.ex-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ex-ink-3);flex:none}
.ex-tag-ok{background:var(--ex-ok-wash)}
.ex-tag-ok::before{background:var(--ex-ok)}
.ex-tag-warn{background:var(--ex-warn-wash)}
.ex-tag-warn::before{background:var(--ex-warn)}
.ex-tag-accent{background:var(--ex-accent-wash)}
.ex-tag-accent::before{background:var(--ex-accent)}
.ex-tag-plain::before{display:none}

/* alerta */
.ex-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--ex-r-group);background:var(--ex-warn-wash);color:var(--ex-ink-2);font-size:13.5px;line-height:1.5}
.ex-alert strong{color:var(--ex-ink);font-weight:700}
.ex-alert-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--ex-warn)}

/* medidor fino: trilho é um degrau claro do mesmo matiz */
.ex-meter{height:8px;border-radius:var(--ex-r-pill);background:var(--ex-data-track);overflow:hidden}
.ex-meter i{display:block;height:100%;border-radius:var(--ex-r-pill);background:var(--ex-data-1);transition:width .6s var(--ex-ease-out)}

/* tabela */
.ex-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ex-table th{padding:0 0 10px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ex-ink-3)}
.ex-table td{padding:11px 0;border-top:1px solid var(--ex-sep);color:var(--ex-ink-2);vertical-align:top}
.ex-table td:first-child{color:var(--ex-ink);padding-right:12px;overflow-wrap:break-word}
.ex-table td.ex-mono{overflow-wrap:anywhere}
.ex-table .r{text-align:right;white-space:nowrap;padding-left:14px;font-variant-numeric:tabular-nums}

/* ícone 3D em ladrilho de aço */
.ex-ico{display:block;width:44px;height:44px;flex:none}
.ex-ico-g{transition:transform .35s var(--ex-spring);transform-origin:50% 60%}
.ex-ico-gl{opacity:.55;transition:opacity .3s var(--ex-ease)}
.ex-hov:hover .ex-ico-g,.ex-hov:focus-within .ex-ico-g{transform:translateY(-1.5px) scale(1.04)}
.ex-hov:hover .ex-ico-gl,.ex-hov:focus-within .ex-ico-gl{opacity:.9}

/* dica do gráfico */
.ex-tip{position:absolute;z-index:5;pointer-events:none;min-width:120px;padding:8px 10px;border-radius:var(--ex-r-ctl);background:var(--ex-elev);box-shadow:var(--ex-shadow-pop);font-size:12px;line-height:1.35;color:var(--ex-ink-2);opacity:0;transform:translateY(4px);transition:opacity .15s var(--ex-ease),transform .15s var(--ex-ease)}
.ex-tip.on{opacity:1;transform:none}
.ex-tip b{display:block;color:var(--ex-ink);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* marca tingida por token (o logo entra como máscara) */
.ex-logo{display:block;aspect-ratio:1024/156;background:var(--ex-ink);-webkit-mask:var(--ex-logo-src) center/contain no-repeat;mask:var(--ex-logo-src) center/contain no-repeat}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}