/* chart-card.css — componente compartilhado de card de dados (FIPE, guia, glossário) */
.gx{--gx-bg:#15151d;--gx-bg2:#1c1c27;--gx-line:#2b2b3a;--gx-txt:#f3f3f8;--gx-mut:#9d9db3;background:radial-gradient(120% 120% at 0% 0%,#1d1a2e 0%,#141419 55%);border:1px solid var(--gx-line);border-radius:16px;padding:20px;margin:0 0 24px;color:var(--gx-txt);box-shadow:0 14px 34px rgba(10,10,20,.28)}
.gx *{box-sizing:border-box}
.gx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.gx-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gx-mut)}
.gx-title{font-size:17px;font-weight:800;margin:5px 0 0;color:var(--gx-txt);line-height:1.3}
.gx-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:#87ecc7;background:#12231d;border:1px solid #275245;border-radius:999px;padding:4px 10px;white-space:nowrap}
.gx-dot{width:6px;height:6px;border-radius:50%;background:#41e0a3;animation:gxPulse 2s infinite}
.gx-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
.gx-kpi{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gx-big{font-size:33px;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.gx-delta{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;white-space:nowrap}
.gx-delta.up{color:#8ff0c6;background:#12281f;border:1px solid #245142}
.gx-delta.down{color:#ffb7a8;background:#2a1714;border:1px solid #5a2c24}
.gx-delta.flat{color:#c9c9dd;background:#1d1d2b;border:1px solid #34344a}
.gx-sub{font-size:11.5px;color:var(--gx-mut);margin-top:5px}
.gx-chart-wrap{margin-top:18px;padding:24px 0 22px;border-bottom:1px solid var(--gx-line);position:relative}
.gx-chart{display:flex;align-items:flex-end;gap:7px;height:150px}
.gx-bar{position:relative;flex:1 1 0;height:100%;border:0;background:none;padding:0;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;outline:none}
.gx-bar:focus-visible{outline:2px solid #3dd6ff;outline-offset:3px;border-radius:6px}
.gx-fill{width:100%;max-width:34px;height:calc(var(--h) * 1%);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#9b7dff,#6547e8);opacity:.55;box-shadow:0 8px 18px rgba(124,92,255,.22);transition:height .75s cubic-bezier(.22,.61,.36,1),opacity .2s,background .2s}
.gx-bar:hover .gx-fill,.gx-bar.active .gx-fill{opacity:1}
.gx-bar.active .gx-fill{background:linear-gradient(180deg,#84e9ff,#25c4f2);box-shadow:0 8px 20px rgba(61,214,255,.32)}
.gx-x{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--gx-mut);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gx-tip{position:absolute;left:50%;bottom:calc(var(--h) * 1% + 9px);transform:translateX(-50%);background:#242434;border:1px solid #3a3a52;color:#fff;font-size:10.5px;padding:4px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
.gx-bar:hover .gx-tip,.gx-bar:focus-visible .gx-tip{opacity:1}
.gx-toggle{display:flex;gap:6px;margin-top:14px}
.gx-toggle button{border:1px solid var(--gx-line);background:#1a1a24;color:var(--gx-mut);font-size:11px;font-weight:700;padding:5px 11px;border-radius:8px;cursor:pointer;transition:.2s}
.gx-toggle button.on{background:#2a2350;border-color:#4c3aa9;color:#cdc2ff}
.gx-side{background:var(--gx-bg2);border:1px solid var(--gx-line);border-radius:12px;padding:14px;align-self:start}
.gx-side-title{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-mut);margin-bottom:11px}
.gx-rank{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gx-rank li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:8px;row-gap:5px;align-items:center;font-size:11.5px}
.gx-rank .pos{width:20px;height:20px;border-radius:6px;background:#242434;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#b9b9ce}
.gx-rank .nm{color:#dcdce8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-rank .vl{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.gx-rank-bar{grid-column:1/-1;height:3px;border-radius:2px;background:#262634;overflow:hidden}
.gx-rank-bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#6b4ef0,#31cdf7);border-radius:2px}
.gx-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.gx-foot.single{grid-template-columns:1fr}
.gx-panel{background:var(--gx-bg2);border:1px solid var(--gx-line);border-radius:12px;padding:14px}
.gx-prog{margin-bottom:11px}
.gx-prog-top{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:#cfcfe1;margin-bottom:5px}
.gx-prog-top b{color:#fff;font-variant-numeric:tabular-nums}
.gx-track{height:6px;border-radius:99px;background:#262634;overflow:hidden}
.gx-track span{display:block;height:100%;width:var(--p);border-radius:99px;background:linear-gradient(90deg,#7c5cff,#3dd6ff)}
.gx-mini{display:grid;gap:9px}
.gx-mini-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;color:var(--gx-mut)}
.gx-mini-row b{color:#fff;font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}
.gx-note{font-size:10px;color:#71718a;margin-top:10px;line-height:1.5}
.gx.gx-js .gx-fill{height:0}
.gx.gx-js.in .gx-fill{height:calc(var(--h) * 1%)}
.gx.gx-js .gx-track span{width:0;transition:width .9s ease}
.gx.gx-js.in .gx-track span{width:var(--p)}
.gx.gx-js .gx-rank-bar i{width:0;transition:width .9s ease}
.gx.gx-js.in .gx-rank-bar i{width:var(--w)}
.gx-src{font-size:10px;color:#71718a;margin:12px 0 0;line-height:1.55}
@media(max-width:720px){.gx-grid,.gx-foot{grid-template-columns:1fr}.gx-big{font-size:27px}.gx-chart{gap:5px;height:130px}.gx{padding:16px}.gx-head{flex-wrap:wrap}.gx-head>div{flex:1 1 100%}.gx-live{order:2;margin-left:auto}}
@media(prefers-reduced-motion:reduce){.gx-fill,.gx-track span,.gx-rank-bar i{transition:none!important}}
@keyframes gxPulse{0%,100%{opacity:1}50%{opacity:.3}}