/* EXG Control Lab — testador multimarcas. All measurements are populated at runtime. */
:root, [data-bs-theme="light"] {
  color-scheme: light;
  --exg-accent: #ff7a1a;
  --exg-accent-ink: #a63d00;
  --exg-ground: #f5f4f1;
  --exg-surface: #ffffff;
  --exg-surface-alt: #eeede9;
  --exg-ink: #181b1e;
  --exg-muted: #5b6269;
  --exg-line: #d4d4ce;
  --exg-positive: #16713f;
  --exg-accent-soft: #fff0e4;
  --exg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --exg-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
[data-bs-theme="dark"] {
  color-scheme: dark;
  --exg-accent-ink: #ff934b;
  --exg-ground: #101214;
  --exg-surface: #191c1f;
  --exg-surface-alt: #202428;
  --exg-ink: #f2f3f4;
  --exg-muted: #b0b6bd;
  --exg-line: #353b41;
  --exg-positive: #71d79b;
  --exg-accent-soft: #372518;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--exg-ink); background: var(--exg-ground); font-family: var(--exg-font); line-height: 1.6; }
button, input, select { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
a { color: var(--exg-accent-ink); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button { cursor: pointer; }
button:disabled, select:disabled { cursor: not-allowed; opacity: .58; }
:focus-visible { outline: 3px solid var(--exg-accent); outline-offset: 4px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.25; }
p:last-child { margin-bottom: 0; }
.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; left: 1rem; top: -100px; padding: .65rem 1rem; color: #181b1e; background: var(--exg-accent); }
.skip-link:focus { top: .6rem; }
.site-header { border-bottom: 1px solid var(--exg-line); }
.header-inner { min-height: 86px; display: flex; align-items: center; gap: 1.5rem; padding-block: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--exg-ink); text-decoration: none; flex-shrink: 0; }
.brand img { display: block; flex-shrink: 0; }
.brand strong { display: block; font-size: 1.12rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.3; }
.brand small { display: block; margin-top: .25rem; color: var(--exg-muted); font-size: .6rem; letter-spacing: .18em; font-weight: 650; }
.page-nav { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; margin-left: auto; }
.page-nav a { padding-block: .5rem; color: var(--exg-muted); font-size: .82rem; text-decoration: none; }
.page-nav a:hover { color: var(--exg-ink); }
.theme-button { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 0 .65rem 1.25rem; border: 0; border-left: 1px solid var(--exg-line); background: transparent; color: var(--exg-muted); font-size: .78rem; min-height: 44px; flex-shrink: 0; }
.theme-button:hover { color: var(--exg-ink); }
.intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .75fr); align-items: end; gap: 4rem; padding-block: 3rem 2.3rem; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 .8rem; color: var(--exg-accent-ink); font-size: .62rem; font-weight: 750; letter-spacing: .16em; }
.eyebrow > span { width: 1.6rem; height: 2px; background: currentColor; }
.eyebrow > .choice-label { width: auto; height: auto; background: none; }
h1 { margin-bottom: 1.1rem; font-size: clamp(2.25rem, 3.85vw, 3.25rem); letter-spacing: -.055em; font-weight: 750; line-height: 1.12; }
h1 em { font-style: normal; color: var(--exg-accent-ink); }
.lead { max-width: 36rem; margin: 0; color: var(--exg-muted); font-size: .98rem; }
.intro-note { margin: 0 0 .2rem; padding-left: 1.4rem; border-left: 1px solid var(--exg-line); color: var(--exg-muted); font-size: .84rem; line-height: 1.7; }
.controller-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.controller-choices a { display: flex; min-width: 0; flex-direction: column; gap: .12rem; min-height: 76px; padding: .85rem 1rem; border: 1px solid var(--exg-line); border-radius: .4rem; color: var(--exg-ink); background: var(--exg-surface); text-decoration: none; }
.controller-choices a:hover { border-color: var(--exg-accent-ink); }
.controller-choices a[aria-current="page"] { border-color: var(--exg-accent-ink); box-shadow: inset 0 0 0 1px var(--exg-accent-ink); background: var(--exg-accent-soft); }
.controller-choices strong { font-size: .94rem; }
.controller-choices span { color: var(--exg-muted); font-size: .75rem; }
.testing-purpose { color: var(--exg-muted); margin: .85rem 0 1.6rem; font-size: .78rem; }
.connection-section { padding: 1.5rem 1.75rem; background: var(--exg-surface); border: 1px solid var(--exg-line); border-top: 3px solid var(--exg-accent); border-radius: .5rem; }
.connection-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.connection-heading .eyebrow { font-size: .57rem; margin-bottom: .35rem; }
.connection-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.connection-status { max-width: 30rem; margin: 0; padding-left: 1rem; border-left: 2px solid var(--exg-accent-ink); font-size: .78rem; color: var(--exg-muted); }
.connection-controls { display: flex; align-items: flex-end; gap: 1rem; }
.device-field { flex: 1; min-width: 0; }
label { display: block; font-size: .72rem; font-weight: 600; color: var(--exg-muted); margin-bottom: .35rem; }
select { display: block; max-width: 100%; width: 100%; min-height: 46px; padding: .65rem 2rem .65rem .75rem; border: 1px solid var(--exg-line); border-radius: .3rem; color: var(--exg-ink); background: var(--exg-ground); font-size: .82rem; text-overflow: ellipsis; }
.action-group { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .65rem 1.05rem; border: 1px solid transparent; border-radius: .3rem; font-size: .81rem; line-height: 1.5; font-weight: 700; text-align: center; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; }
.button:hover { text-decoration: none; }
.button-primary { background: var(--exg-accent); border-color: var(--exg-accent); color: #1a1109; }
.button-primary:hover:enabled { background: #ff9548; border-color: #ff9548; }
.button-secondary { background: transparent; border-color: var(--exg-line); color: var(--exg-ink); }
.button-secondary:hover:enabled { background: var(--exg-surface-alt); border-color: var(--exg-muted); }
.button-small { min-height: 42px; font-size: .75rem; padding: .45rem .8rem; }
.device-meta { margin: .8rem 0 0; font-family: var(--exg-mono); font-size: .68rem; color: var(--exg-muted); overflow-wrap: anywhere; }
.help-text { margin: .8rem 0 0; font-size: .78rem; color: var(--exg-muted); max-width: 64rem; line-height: 1.7; }
.empty-state { display: grid; grid-template-columns: .6fr 1fr; align-items: center; gap: 3rem; padding: 2.75rem 2rem; border-bottom: 1px solid var(--exg-line); }
.empty-illustration { color: var(--exg-accent-ink); justify-self: center; width: min(210px, 100%); }
.empty-illustration svg { width: 100%; display: block; }
.empty-copy h2 { margin-bottom: 1.35rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -.035em; }
.setup-steps { list-style: none; padding: 0; margin: 0; }
.setup-steps li { display: flex; align-items: flex-start; gap: 1rem; }
.setup-steps li + li { margin-top: 1rem; }
.step-number { font-family: var(--exg-mono); color: var(--exg-accent-ink); font-size: .74rem; flex: 0 0 1.4rem; margin-top: .14rem; }
.setup-steps strong { font-size: .83rem; font-weight: 650; }
.setup-steps p { font-size: .76rem; color: var(--exg-muted); margin: .15rem 0 0; }
.test-panel { margin-top: 2.25rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-heading > div:first-child { display: flex; align-items: baseline; gap: .85rem; }
.section-heading-main > div:first-child { display: block; }
.section-heading-main .eyebrow { margin-bottom: .5rem; }
.section-heading h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.035em; }
.section-heading h3 { font-size: 1.06rem; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.section-number { font-family: var(--exg-mono); font-size: .7rem; color: var(--exg-accent-ink); }
.section-note { color: var(--exg-muted); font-size: .73rem; margin: 0; }
.mapping-note { margin: 1rem 0 0; font-size: .78rem; color: var(--exg-muted); padding-left: 1rem; border-left: 2px solid var(--exg-line); }
.test-section { margin-top: 1.6rem; padding-block: 1.7rem 0; border-top: 1px solid var(--exg-line); }
.buttons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .65rem; margin-top: 1.15rem; }
.input-button { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: .3rem; padding: .85rem; background: var(--exg-surface); border: 1px solid var(--exg-line); border-radius: .35rem; }
.input-button::before { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: var(--button-fill, 0%); background: var(--exg-accent-soft); }
.button-index { display: block; color: var(--exg-muted); font-family: var(--exg-mono); font-size: .63rem; }
.input-name { font-size: .78rem; font-weight: 650; overflow-wrap: anywhere; }
.input-value { font-family: var(--exg-mono); font-size: .83rem; font-weight: 650; }
.input-button.was-seen { border-bottom: 3px solid var(--exg-positive); }
.input-button.is-pressed { background: var(--exg-accent-soft); border-color: var(--exg-accent-ink); box-shadow: inset 0 0 0 1px var(--exg-accent-ink); }
.input-button.is-pressed .input-name, .input-button.is-pressed .input-value { color: var(--exg-accent-ink); }
.checkbox-label { display: inline-flex; gap: .5rem; align-items: center; margin: 0; font-size: .73rem; cursor: pointer; min-height: 42px; }
input[type="checkbox"] { accent-color: var(--exg-accent-ink); width: 17px; height: 17px; margin: 0; }
.sticks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.15rem; }
.stick-card { min-width: 0; padding: 1.25rem 1.4rem; background: var(--exg-surface); border: 1px solid var(--exg-line); border-radius: .45rem; }
.stick-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.stick-heading h4 { font-size: .88rem; font-weight: 650; margin: 0; }
.stick-heading > span { font-family: var(--exg-mono); color: var(--exg-muted); font-size: .65rem; }
.axis-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.axis-selectors > div { min-width: 0; }
.axis-selectors select { min-height: 42px; font-size: .76rem; padding-block: .5rem; }
.axis-selectors label { font-size: .66rem; }
canvas { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 1; margin: 1.1rem auto .75rem; }
.stick-values { text-align: center; font-family: var(--exg-mono); font-size: .71rem; color: var(--exg-muted); min-height: 1.6em; overflow-wrap: anywhere; }
.measurement-status { margin: 1rem 0 0; padding: .65rem .85rem; background: var(--exg-surface-alt); font-size: .77rem; border-left: 2px solid var(--exg-accent-ink); }
.rest-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1rem; }
.rest-results:empty { display: none; }
.rest-result { min-width: 0; padding: 1rem 1.2rem; background: var(--exg-surface); border: 1px solid var(--exg-line); border-radius: .35rem; }
.rest-result h4, .rest-result h3 { font-size: .85rem; margin-bottom: .8rem; }
.rest-result p { margin-bottom: .5rem; font-size: .76rem; color: var(--exg-muted); }
.result-label { display: block; color: var(--exg-muted); font-size: .72rem; }
.result-value { display: block; font-family: var(--exg-mono); font-size: 1.15rem; color: var(--exg-ink); font-weight: 650; margin-top: .2rem; }
.axes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem; margin-top: 1rem; }
.axis-row { display: grid; grid-template-columns: minmax(65px, auto) minmax(0, 1fr) minmax(65px, auto); gap: .45rem .7rem; align-items: center; min-width: 0; padding: .8rem 0; border-bottom: 1px solid var(--exg-line); }
.axis-label { font-size: .74rem; font-weight: 600; }
.axis-track { position: relative; height: 8px; background: var(--exg-surface-alt); border-radius: 1px; }
.axis-track::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 50%; width: 1px; background: var(--exg-muted); }
.axis-fill { position: absolute; height: 100%; left: var(--axis-start, 50%); width: var(--axis-width, 0%); background: var(--exg-accent-ink); }
.axis-value { font-family: var(--exg-mono); font-size: .74rem; text-align: right; }
.axis-extents { grid-column: 1 / -1; font-family: var(--exg-mono); font-size: .65rem; color: var(--exg-muted); }
.vibration-section { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-bottom: 1.7rem; border-bottom: 1px solid var(--exg-line); }
.vibration-section > div { min-width: 0; }
.vibration-section > button { flex-shrink: 0; }
.is-warning { color: var(--exg-accent-ink); }
.scope-note { padding: 1.3rem 0 0 1.1rem; margin: 1.7rem 0; border-left: 2px solid var(--exg-line); }
.scope-note h2 { margin-bottom: .4rem; font-size: .83rem; font-weight: 650; }
.scope-note p { font-size: .75rem; color: var(--exg-muted); max-width: 65rem; line-height: 1.75; }
.drift-help { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1.8rem 0 2.4rem; padding: 1.5rem 1.75rem; background: var(--exg-surface); border: 1px solid var(--exg-line); border-left: 3px solid var(--exg-accent); border-radius: .5rem; }
.drift-help > div { min-width: 0; }
.drift-help h2 { font-size: 1.23rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: .5rem; }
.drift-help p { font-size: .83rem; color: var(--exg-muted); max-width: 39rem; margin: 0; }
.whatsapp-button { background: #25d366; border-color: #25d366; color: #092b16; gap: .65rem; min-height: 48px; flex: 0 0 auto; }
.whatsapp-button:hover { background: #20bd5a; border-color: #20bd5a; }
.whatsapp-button .fa-whatsapp { font-size: 1.25rem; }
.site-footer { background: var(--exg-surface); border-top: 1px solid var(--exg-line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.55rem; }
.footer-inner strong { font-size: .85rem; }
.footer-inner p { color: var(--exg-muted); font-size: .7rem; margin: .18rem 0 0; }
.footer-meta { text-align: right; }
.footer-meta a { color: inherit; }
.noscript-note { padding: 1rem; border: 1px solid var(--exg-accent-ink); color: var(--exg-accent-ink); }
@media (max-width: 991.98px) {
  .header-inner { gap: 1rem; }
  .page-nav { gap: 1rem; }
  .theme-button { padding-left: 1rem; }
  .theme-button span { display: none; }
  .intro { gap: 2rem; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); }
  .intro h1 { font-size: 2.6rem; }
  .connection-controls { flex-wrap: wrap; }
  .connection-controls > .action-group { flex-shrink: 0; }
  .device-field { min-width: 220px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .section-heading .compact { margin-left: auto; }
}
@media (max-width: 767.98px) {
  .shell { width: calc(100% - 32px); }
  .header-inner { flex-wrap: wrap; gap: .9rem 1rem; padding-block: .9rem; }
  .brand { margin-right: auto; }
  .page-nav { width: 100%; order: 3; justify-content: flex-start; flex-wrap: wrap; border-top: 1px solid var(--exg-line); padding-top: .55rem; margin-left: 0; gap: .3rem 1.2rem; }
  .page-nav a { font-size: .76rem; }
  .theme-button { margin-left: auto; }
  .intro { grid-template-columns: 1fr; gap: 1.4rem; padding-block: 2rem 1.65rem; }
  .intro h1 { font-size: clamp(2.05rem, 6.8vw, 2.8rem); }
  .intro-note { padding-left: .9rem; max-width: 36rem; font-size: .79rem; }
  .controller-choices { grid-template-columns: 1fr; gap: .55rem; }
  .controller-choices a { min-height: 64px; padding: .65rem .9rem; }
  .lead { font-size: .91rem; }
  .connection-section { padding: 1.25rem; }
  .connection-heading { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .connection-status { font-size: .74rem; }
  .connection-controls { display: block; }
  .device-field { min-width: 0; }
  .connection-controls > .action-group { margin-top: .8rem; }
  .connection-controls .button { flex: 1 1 auto; }
  .empty-state { grid-template-columns: 1fr; gap: 1.7rem; padding: 2.25rem .5rem; }
  .empty-illustration { width: 135px; }
  .empty-copy h2 { font-size: 1.25rem; }
  .setup-steps li + li { margin-top: 1.1rem; }
  .test-panel { margin-top: 1.8rem; }
  .section-heading-main { align-items: center; }
  .section-heading-main .button { font-size: .74rem; }
  .section-heading h2 { font-size: 1.4rem; }
  .section-heading h3 { font-size: 1rem; }
  .section-heading .compact { margin-left: 0; }
  .sticks-grid { grid-template-columns: 1fr; }
  .stick-card { padding: 1.1rem; }
  .buttons-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; }
  .input-button { padding: .7rem; min-height: 100px; }
  .axes-grid { grid-template-columns: 1fr; gap: .2rem; }
  .rest-results { grid-template-columns: 1fr; }
  .vibration-section { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .drift-help { align-items: stretch; flex-direction: column; gap: 1.1rem; padding: 1.25rem; }
  .whatsapp-button { width: 100%; }
  .drift-help h2 { font-size: 1.17rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .footer-meta { text-align: left; }
}
@media (max-width: 399.98px) {
  .shell { width: calc(100% - 24px); }
  .brand { gap: .55rem; }
  .brand img { width: 43px; height: auto; }
  .brand strong { font-size: .98rem; }
  .brand small { font-size: .52rem; }
  .theme-button { padding-left: .8rem; }
  .intro h1 { font-size: 2.05rem; }
  .connection-section { padding: 1rem; }
  .connection-controls .button { width: 100%; }
  .buttons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .input-name { font-size: .72rem; }
  .input-button { padding: .6rem; }
  .section-heading-main { align-items: flex-start; }
  .section-heading-main .button { width: 100%; }
  .drift-help { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}