/*!
 * Track Limits — plataforma de registro de track limits
 * © 2026 Carlos Caldas e Nadielle Caldas. Todos os direitos reservados.
 * Desenvolvido por Carlos Caldas e Nadielle Caldas · hmcaldas.carlos@gmail.com · WhatsApp (61) 98445-0011
 */
/* Track Limits — identidade visual (vermelho/preto, faixas inclinadas)
   Roxo = marca e seleção · Amarelo = pendente/ação · Verde = confirmado · Vermelho = alerta */
:root {
  --bg: #0c0c0d;
  --bg-2: #18181b;
  --bg-3: #26262b;
  --line: #3b3b42;
  --purple: #d5001c;
  --purple-2: #ff2b40;
  --lilac: #d4d4d8;
  --yellow: #f4f4f5;
  --green: #22b35a;
  --green-d: #17863f;
  --red: #ff3347;
  --red-d: #a80016;
  --plate: #f7f7f7;
  --plate-ink: #111113;
  --text: #f4f4f5;
  --muted: #a8a8b0;
  --head: 'Saira', 'Arial Black', 'Segoe UI Black', system-ui, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1120px;
  --footer-h: 0px;
  --radius: 10px;
  --stripes: repeating-linear-gradient(115deg, var(--purple) 0 4px, transparent 4px 9px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: 16px/1.4 var(--body);
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
}
body[data-view="op"] { --footer-h: 150px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }

/* Fundo: véu roxo no topo e rastros de velocidade discretos à direita */
.bg-livery {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(213, 0, 28, .16), transparent 65%),
    radial-gradient(700px 500px at -5% 30%, rgba(255, 255, 255, .035), transparent 70%),
    linear-gradient(118deg, transparent 0 70%, rgba(255, 255, 255, .04) 70% 71%, transparent 71% 74%,
      rgba(213, 0, 28, .07) 74% 77%, transparent 77% 80%, rgba(255, 255, 255, .03) 80% 81%, transparent 81%),
    var(--bg);
}

/* ---------- Cabeçalho ---------- */
.top {
  position: sticky; top: 0; z-index: 15;
  background: linear-gradient(180deg, rgba(0, 0, 0, .94), rgba(10, 10, 11, .94));
  backdrop-filter: blur(6px);
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.top-in {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px;
  padding: 10px 14px;
}
.brand { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-kicker { font: italic 800 .74rem/1 var(--head); letter-spacing: .34em; text-transform: uppercase; color: var(--lilac); }
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-title {
  font: italic 900 1.95rem/1 var(--head); text-transform: uppercase; letter-spacing: -.01em;
  background: linear-gradient(180deg, #ffffff 30%, var(--lilac) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-tag {
  position: relative; display: inline-block; padding: 5px 12px;
  background: var(--purple); transform: skewX(-14deg);
}
.brand-tag > span { display: inline-block; transform: skewX(14deg); font: italic 800 .78rem/1 var(--head); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.speedline {
  height: 4px;
  background: linear-gradient(90deg, var(--purple) 0, var(--purple-2) 45%, var(--lilac) 70%, transparent 100%);
}

.tabs { display: none; gap: 8px; }
body[data-view="op"] .tabs, body[data-view="panel"] .tabs { display: flex; }
.tabs button[hidden] { display: none; }
.tabs button {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-2); color: var(--muted);
  transform: skewX(-14deg); cursor: pointer;
}
.tabs button span { display: inline-block; transform: skewX(14deg); font: italic 800 .95rem/1 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.tabs button[aria-pressed="true"] { background: var(--purple); border-color: var(--purple-2); color: #fff; box-shadow: 0 6px 18px rgba(213, 0, 28, .45); }

/* ---------- Estrutura ---------- */
main { max-width: var(--wrap); margin: 0 auto; padding: 18px 14px; overflow-x: clip; }
.view { display: none; }
body[data-view="login"] #view-login,
body[data-view="op"] #view-op,
body[data-view="panel"] #view-panel,
body[data-view="senha"] #view-senha,
body[data-view="esqueci"] #view-esqueci,
body[data-view="redefinir"] #view-redefinir,
body[data-view="vazio"] #view-vazio { display: block; }

.banner {
  max-width: calc(var(--wrap) - 28px); margin: 12px auto 0; padding: 12px 16px;
  border-radius: 8px; background: #2a0a0e; border-left: 6px solid var(--red); font-weight: 600;
}

/* Faixa inclinada (assinatura do banner) com riscos de velocidade na ponta */
.ribbon, .sec-title > span, .op-prompt {
  position: relative;
  display: inline-block;
  background: var(--purple); color: #fff;
  transform: skewX(-14deg);
}
.sec-title > span::after, .op-prompt::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 46px; margin-left: 6px;
  background: var(--stripes);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  border: 0; border-radius: 4px;
  transform: skewX(-14deg); cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .08s;
}
.btn > span { display: inline-block; transform: skewX(14deg); font: italic 800 1rem/1 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: skewX(-14deg) scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.btn-primary { background: var(--yellow); color: var(--plate-ink); }
.btn-accent { background: var(--purple); color: #fff; }
.btn-ghost { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); }
.btn-invalidar { background: transparent; color: var(--red); border: 2px solid var(--red); }
.btn-invalidar:hover { background: rgba(227, 0, 27, .12); }
.btn-sm { min-height: 38px; padding: 0 14px; }
.btn-sm > span { font-size: .85rem; }
.btn-lg { min-height: 56px; padding: 0 28px; }
.btn-lg > span { font-size: 1.15rem; }

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, label, .curvas-label, .chip-label, .com-chip-label {
  font: 700 .78rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
input[type="text"], input[type="password"], input[type="search"], input:not([type]) {
  width: 100%; min-height: 48px; padding: 8px 14px;
  border: 2px solid var(--line); border-radius: 8px;
  background: #141416; font-size: 1.05rem;
}
input::placeholder { color: #707078; }
input:focus { border-color: var(--purple-2); outline: none; box-shadow: 0 0 0 3px rgba(213, 0, 28, .3); }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 100px #141416 inset; transition: background-color 9999s;
}
.hint { color: var(--muted); font-size: .92rem; margin: 6px 0 12px; }
.msg-err { color: var(--red); font-weight: 600; min-height: 1.4em; margin: 0; }
.kicker { font: italic 800 .78rem/1 var(--head); letter-spacing: .3em; text-transform: uppercase; color: var(--lilac); }

.card, .op-setup, .panel-head, .box, .login-box {
  background: linear-gradient(160deg, rgba(36, 36, 40, .9), rgba(24, 24, 27, .92));
  border: 1px solid var(--line); border-radius: var(--radius);
}

/* ---------- Acesso ---------- */
.login-box {
  max-width: 400px; margin: 9vh auto 0; padding: 30px 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  position: relative; overflow: hidden;
}
.login-box::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--purple), var(--lilac));
}
.login-box h1 {
  margin: 0; font: italic 900 2.1rem/1 var(--head); text-transform: uppercase;
  background: linear-gradient(180deg, #fff 35%, var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-box p { margin: 0 0 6px; color: var(--muted); }
.login-box .btn { margin-top: 6px; }

/* ---------- Operador ---------- */
.op-chip { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.op-chip[hidden] { display: none; }
.chip-nome {
  min-width: 0; padding: 7px 16px; border-radius: 4px; transform: skewX(-14deg);
  background: var(--bg-3); border: 1px solid var(--line);
  font: italic 800 1rem/1 var(--head); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-chip .btn { margin-left: auto; }

.op-setup { display: grid; gap: 16px; padding: 20px; margin-bottom: 16px; border-left: 6px solid var(--yellow); }
.op-setup[hidden] { display: none; }
.setup-title { font: italic 900 1.4rem/1 var(--head); text-transform: uppercase; }
.op-setup .btn { justify-self: start; }

.curvas-bar { margin-bottom: 16px; }
.curvas-label { display: block; margin-bottom: 8px; }
.curvas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.curvas.alerta { animation: piscar .5s 2; border-radius: 10px; }
@keyframes piscar { 50% { box-shadow: 0 0 0 4px var(--yellow); } }
.curva {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 70px; padding: 8px 4px 9px;
  border: 2px solid var(--line); border-radius: 8px;
  background: linear-gradient(160deg, #222226, #18181b); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .07s, box-shadow .15s;
}
.curva:active { transform: scale(.95); }
.curva img { display: block; width: auto; height: 76px; margin-bottom: 4px; pointer-events: none; user-select: none; }
.cv-txt { display: inline-flex; align-items: baseline; gap: 5px; }
.curva b { font: italic 900 1.7rem/1 var(--head); }
.curva small { font: italic 800 .72rem/1 var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.curva[aria-pressed="true"] {
  background: linear-gradient(160deg, var(--purple-2), var(--purple)); border-color: var(--lilac); color: #fff;
  box-shadow: 0 10px 24px rgba(213, 0, 28, .5);
}
.curva[aria-pressed="true"] small { color: #fff; }

.op-prompt {
  margin: 0 0 16px 6px; padding: 9px 18px;
  font: italic 800 1rem/1.2 var(--head); text-transform: uppercase;
}
.op-prompt.bloqueado { background: var(--yellow); color: var(--plate-ink); }
.op-prompt.bloqueado::after { background: repeating-linear-gradient(115deg, var(--yellow) 0 4px, transparent 4px 9px); }

/* Placas de número */
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.car-grid.bloqueado { opacity: .3; }
.car {
  position: relative; height: 78px; padding-bottom: 5px;
  border: 0; border-radius: 8px;
  background: linear-gradient(135deg, var(--purple) 0 14%, transparent 14.5%), var(--plate);
  color: var(--plate-ink);
  font: 800 2.35rem/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -7px 0 var(--purple), 0 8px 18px rgba(0, 0, 0, .45);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .07s, box-shadow .15s;
}
.car:hover { box-shadow: inset 0 -7px 0 var(--purple), 0 0 0 3px var(--lilac), 0 10px 22px rgba(0, 0, 0, .5); }
.car:active { transform: scale(.93); }
.car.d3 { font-size: 2rem; letter-spacing: -.01em; }
.car.pending { box-shadow: inset 0 -7px 0 var(--yellow), 0 0 0 4px var(--yellow); }
.car.wait { background: linear-gradient(135deg, var(--plate) 0 14%, transparent 14.5%), var(--yellow); }
.car.ok {
  background: linear-gradient(135deg, var(--plate) 0 14%, transparent 14.5%), var(--green); color: #fff;
  box-shadow: inset 0 -7px 0 var(--green-d), 0 0 0 4px rgba(34, 179, 90, .45);
}
.car.ok::after { content: '✓'; position: absolute; top: 6px; right: 9px; font: 900 1.1rem/1 var(--body); }
.car.err { background: var(--red); color: #fff; box-shadow: inset 0 -7px 0 var(--red-d); }
.empty { color: var(--muted); grid-column: 1 / -1; }
.op-status { margin: 16px 0 0; color: var(--muted); font-size: .85rem; }
.op-status .pend { color: var(--yellow); font-weight: 700; }

/* Rodapé fixo do operador */
.op-footer {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #141416, #0c0c0d);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .55);
}
.op-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--purple), var(--purple-2) 50%, var(--lilac));
}
body[data-view="op"] .op-footer { display: block; }
.op-footer-in { max-width: calc(var(--wrap) - 28px); margin: 0 auto; }
.op-footer-row { display: flex; gap: 10px; }
.op-footer input { min-height: 60px; text-align: center; font: 800 2rem/1 var(--display); letter-spacing: .06em; }
.op-footer .btn { min-width: 130px; min-height: 60px; }
.op-footer.sent::before { background: var(--green); }
.op-feedback { margin: 0 0 8px; min-height: 1.5em; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-feedback.ok { color: #4be38a; }
.op-feedback.err { color: var(--red); }
.op-feedback.warn, .op-feedback.pending { color: var(--yellow); }

/* ---------- Painel ---------- */
.panel-head { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 18px; padding: 16px; margin-bottom: 20px; }
.stat-box {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 18px;
  background: var(--yellow); color: var(--plate-ink); transform: skewX(-14deg); border-radius: 4px;
}
.stat-box > * { transform: skewX(14deg); }
.stat-box.zero { background: var(--bg-3); color: var(--muted); }
.stat-num { font: italic 900 2.3rem/1 var(--head); }
.stat-label { font: italic 800 .9rem/1 var(--head); text-transform: uppercase; }
.com-setup { display: flex; align-items: end; gap: 10px; flex: 1 1 320px; max-width: 520px; }
.com-setup[hidden], .com-chip[hidden] { display: none; }
.com-field { flex: 1; }
.com-chip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.com-chip strong {
  padding: 8px 16px; border-radius: 4px; transform: skewX(-14deg);
  background: var(--purple); color: #fff; font: italic 800 1.05rem/1 var(--head); text-transform: uppercase;
}
.panel-upd { color: var(--muted); font-size: .85rem; margin-left: auto; padding-bottom: 12px; }

.sec-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 64px; margin: 4px 0 14px 6px; }
.sec-title > span { padding: 7px 16px; font: italic 900 1.1rem/1 var(--head); text-transform: uppercase; letter-spacing: .01em; }
.sec-title small { font: 600 .85rem/1 var(--body); color: var(--muted); }
.grupo-titulo {
  margin: 12px 0 2px; padding-top: 14px; border-top: 1px dashed var(--line);
  font: italic 800 .95rem/1 var(--head); text-transform: uppercase; color: var(--lilac);
}

/* Resumo por carro */
.resumo-sec { margin-bottom: 24px; }
.resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rcard {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: var(--radius);
  background: linear-gradient(160deg, #232327, #19191c); border: 1px solid var(--line);
}
.rcard .rnum {
  display: grid; place-items: center; min-width: 60px; height: 48px; padding: 0 8px; border-radius: 6px;
  background: linear-gradient(135deg, var(--purple) 0 16%, transparent 16.5%), var(--plate);
  box-shadow: inset 0 -4px 0 var(--purple);
  color: var(--plate-ink); font: 800 1.6rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.rcard .rtot { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.rcard .rtot b { font: italic 900 2.2rem/1 var(--head); font-variant-numeric: tabular-nums; }
.rcard .rtot small { margin-top: 3px; color: var(--muted); font: 700 .72rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; }
.rcard.alerta { background: linear-gradient(160deg, #e3001b, #8f0012); border-color: #ff5a6b; box-shadow: 0 10px 26px rgba(227, 0, 27, .4); }
.rcard.alerta .rtot small { color: #ffe5e8; }
.rcard.alerta .rnum { background: linear-gradient(135deg, var(--red-d) 0 16%, transparent 16.5%), #fff; box-shadow: inset 0 -4px 0 var(--red-d); }
.resumo .vazio { grid-column: 1 / -1; padding: 16px; }
.rcard { cursor: pointer; transition: transform .1s, box-shadow .15s; }
.rcard:hover, .rcard:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); outline: none; border-color: var(--lilac); }

/* Quadrado de cor da categoria */
.cat { display: inline-flex; align-items: center; gap: 6px; }
.cat-sq { display: inline-block; width: 12px; height: 12px; flex: none; border: 1px solid rgba(0, 0, 0, .45); border-radius: 1px; }
.cat-branco { background: #ffffff; border-color: #3a3a3a; }
.cat-azul { background: #3a9ad9; }
.cat-verde { background: #5cc04a; }
.cat-vermelho { background: #e8202a; }

/* Caixa de informações do carro */
.info-carro {
  position: fixed; z-index: 40; width: 250px; max-width: calc(100vw - 16px);
  padding: 12px 14px; border-radius: 10px;
  background: #f7f4ff; color: var(--plate-ink);
  border-top: 5px solid var(--purple);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.info-carro[hidden] { display: none; }
.info-carro .tip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.info-carro .tip-num { font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.info-carro .tip-tot {
  padding: 4px 10px; transform: skewX(-14deg); background: var(--purple); color: #fff;
  font: italic 800 .8rem/1 var(--head); text-transform: uppercase;
}
.info-carro .tip-lbl { margin-top: 6px; font: 700 .68rem/1 var(--body); text-transform: uppercase; letter-spacing: .1em; color: #77777f; }
.info-carro .tip-nome { margin-top: 3px; font: 700 1.05rem/1.25 var(--body); }
.info-carro .tip-cat { margin-top: 3px; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.info-carro .tip-obs { margin-top: 8px; font-size: .78rem; color: #b0001a; }

/* Avisos */
.avisos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.aviso {
  display: grid; grid-template-columns: 86px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(160deg, #232327, #19191c);
  border: 1px solid var(--line); border-left: 6px solid var(--yellow);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.aviso .num {
  display: grid; place-items: center; height: 66px; border-radius: 8px;
  background: linear-gradient(135deg, var(--purple) 0 15%, transparent 15.5%), var(--plate);
  box-shadow: inset 0 -5px 0 var(--purple);
  color: var(--plate-ink); font: 800 2.2rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.aviso .l1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aviso .piloto { font: 700 1.15rem/1.2 var(--body); }
.tag { padding: 3px 9px; border-radius: 3px; font: italic 800 .72rem/1 var(--head); text-transform: uppercase; letter-spacing: .04em; }
.tag-novo { background: var(--yellow); color: var(--plate-ink); }
.tag-inv { background: var(--red); color: #fff; }
.aviso .det { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; color: var(--muted); font-size: .92rem; }
.aviso .curva-tag {
  display: inline-block; padding: 3px 10px; transform: skewX(-14deg);
  background: var(--purple); color: #fff; font: italic 800 .8rem/1.3 var(--head); text-transform: uppercase;
}
.aviso .hora { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.aviso .ack { display: flex; gap: 8px; justify-content: flex-end; }
.aviso .ack .btn { min-width: 124px; }
.aviso .ack-ok { color: #4be38a; font-size: .9rem; text-align: right; font-weight: 700; }
.aviso .ack-inv { color: var(--red); font-size: .9rem; text-align: right; font-weight: 700; }
.aviso-aguarda { color: var(--yellow); font-size: .85rem; font-weight: 600; text-align: right; }
.aviso.ciente { border-left-color: var(--green); background: rgba(20, 20, 22, .7); box-shadow: none; }
.aviso.ciente .num { background: #c9c9ce; box-shadow: none; }
.aviso.ciente .piloto { color: var(--muted); }
.aviso.invalido { border-left-color: var(--red); background: rgba(20, 20, 22, .6); box-shadow: none; opacity: .8; }
.aviso.invalido .num { background: #6b6b72; color: #2a2a2e; box-shadow: none; text-decoration: line-through; text-decoration-thickness: 3px; }
.aviso.invalido .piloto { color: var(--muted); text-decoration: line-through; }
.aviso.chegou { animation: chegou 1.4s ease-out; }
@keyframes chegou { from { background: #33333a; } }
.vazio { padding: 26px; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--radius); }

/* Caixas recolhíveis */
.box { margin-bottom: 14px; padding: 14px 16px; }
.box summary { cursor: pointer; min-height: 34px; display: flex; align-items: center; gap: 10px; list-style: none; }
.box summary::-webkit-details-marker { display: none; }
.box summary::before { content: '▸'; color: var(--purple-2); transition: transform .15s; }
.box[open] summary::before { transform: rotate(90deg); }
.sum-title { font: italic 900 1.1rem/1 var(--head); text-transform: uppercase; }
.sum-count { color: var(--lilac); font: 800 1.1rem/1 var(--display); }
.box-csv { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.box-csv .hint { margin: 6px 0 0; }
.report-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pil-add { display: grid; grid-template-columns: 90px 1fr 1fr auto; gap: 10px; margin: 14px 0; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th { text-align: left; padding: 8px; color: var(--muted); font: 700 .76rem/1 var(--body); text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid var(--line); }
.tbl td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:hover td { background: rgba(213, 0, 28, .1); }
.tbl td.n { font: 800 1.4rem/1 var(--display); width: 70px; }
.tbl td.acts { white-space: nowrap; text-align: right; }
.tbl td.acts .btn { margin-left: 6px; }
.tbl td input { min-height: 40px; }
.tbl tr.row-err td { background: #2a0a0e; }
.tbl tr.row-warn td.n { color: var(--yellow); }
.tbl .erro { color: var(--red); font-weight: 700; }
.tbl .okcell { color: #4be38a; font-weight: 700; }

.file-btn { display: block; margin: 4px 0 12px; text-transform: none; letter-spacing: 0; }
#xlsx-file { max-width: 100%; color: var(--muted); }
#xlsx-file::file-selector-button {
  margin-right: 12px; padding: 10px 16px; border: 0; border-radius: 4px;
  background: var(--purple); color: #fff; font: italic 800 .9rem/1 var(--head); text-transform: uppercase; cursor: pointer;
}
.alert { padding: 10px 14px; border-radius: 8px; margin: 8px 0; }
.alert-err { background: #2a0a0e; border-left: 5px solid var(--red); }
.alert-warn { background: #2a2a2e; border-left: 5px solid var(--yellow); }
.alert-ok { background: #0d3a24; border-left: 5px solid var(--green); }
.import-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Limpar avisos */
.btn-danger { background: var(--red); color: #fff; }
.box-limpar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-color: rgba(227, 0, 27, .45); }
.box-limpar > div:first-child { flex: 1 1 320px; }
.box-limpar .hint { margin: 6px 0 0; }
.limpar-row { display: flex; gap: 10px; align-items: center; flex: 0 1 420px; }
.limpar-row input { min-height: 46px; }

/* On-line agora */
.online-sec { margin-bottom: 24px; }
.online { display: flex; flex-wrap: wrap; gap: 8px; }
.on-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px;
  border-radius: 8px; background: rgba(36, 36, 40, .9); border: 1px solid var(--line);
}
.on-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #4be38a; box-shadow: 0 0 0 3px rgba(75, 227, 138, .25); flex: none; }
.on-chip .dot.morno { background: var(--yellow); box-shadow: 0 0 0 3px rgba(160, 160, 168, .25); }
.on-chip b { font-weight: 700; }
.on-chip .aparelho { display: inline-flex; color: var(--lilac); flex: none; }
.on-chip small { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
.on-chip.com { border-color: var(--purple-2); }
.on-chip .voce { color: var(--lilac); font-weight: 600; font-size: .78rem; }

/* Rodapé de copyright */
.site-foot {
  margin-top: 28px; padding: 16px 0 6px; border-top: 1px solid var(--line);
  text-align: center; color: var(--muted); font-size: .8rem; line-height: 1.6;
}
.site-foot p { margin: 0; }
.site-foot a { color: var(--lilac); text-decoration: none; border-bottom: 1px dotted var(--lilac); white-space: nowrap; }
.site-foot a:hover { color: #fff; }
.site-foot strong { color: var(--text); }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translateX(-50%);
  max-width: calc(100% - 28px); padding: 12px 18px; border-radius: 8px;
  background: var(--bg-3); font-weight: 700; box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
.toast.err { background: #8a0014; }
.toast.ok { background: #145c34; }
.toast.warn { background: #3a3a3f; }

/* Telas maiores */
@media (min-width: 900px) {
  .car-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
  .car { height: 100px; font-size: 3rem; }
  .car.d3 { font-size: 2.45rem; }
  .brand-title { font-size: 2.2rem; }
}

/* Celular */
@media (max-width: 640px) {
  .top-in { padding: 8px 12px; }
  .brand-title { font-size: 1.5rem; }
  .brand-tag { padding: 4px 9px; }
  .brand-tag > span { font-size: .66rem; }
  .tabs { width: 100%; }
  .tabs button { flex: 1; padding: 0 8px; }
  .tabs button span { font-size: .8rem; }
  main { padding: 14px 10px; }
  .car-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .car { height: 76px; font-size: 2.2rem; }
  .car.d3 { font-size: 1.7rem; }
  .curvas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .curva { min-height: 62px; padding: 6px 2px 7px; }
  .curva img { height: 62px; margin-bottom: 3px; }
  .curva b { font-size: 1.45rem; }
  .curva small { font-size: .62rem; }
  .op-prompt { font-size: .85rem; }
  .op-setup .btn { justify-self: stretch; }
  /* espaço para o selo "Powered by Netlify" não cobrir o botão Enviar */
  body[data-view="op"] { --footer-h: 190px; }
  .op-footer { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .op-footer .btn { min-width: 104px; }
  .op-footer input::placeholder { font-size: 1.3rem; letter-spacing: 0; }
  .panel-upd { margin-left: 0; padding: 0; }
  .com-setup { flex-basis: 100%; }
  .sec-title small { display: none; }
  .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aviso { grid-template-columns: 68px 1fr; }
  .aviso .num { height: 58px; font-size: 1.9rem; }
  .aviso .ack { grid-column: 1 / -1; justify-content: stretch; }
  .aviso .ack .btn { flex: 1; min-width: 0; }
  .aviso .ack-ok, .aviso .ack-inv, .aviso-aguarda { text-align: left; }
  .pil-add { grid-template-columns: 80px 1fr; }
  .pil-add .btn { grid-column: 1 / -1; }
  .limpar-row { flex-basis: 100%; }
}
@media (max-width: 360px) {
  .car-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .car, .btn, .curva, .aviso.chegou, .curvas.alerta { transition: none; animation: none; }
}


/* ---------- Consulta dos pilotos (página pública) ---------- */
.pub-modo { display: inline-block; padding: 8px 16px; background: var(--bg-3); border: 1px solid var(--line); transform: skewX(-14deg); border-radius: 4px; }
.pub-modo > span { display: inline-block; transform: skewX(14deg); font: italic 800 .9rem/1 var(--head); text-transform: uppercase; color: var(--lilac); }
.pub-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.pub-intro p { margin: 0; color: var(--muted); }
.pub-intro strong { color: var(--text); }
.pub-intro .panel-upd { margin: 0; padding: 0; }
.pub-busca { max-width: 420px; margin-bottom: 20px; }
.pub-mapa { margin-bottom: 20px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(36, 36, 40, .9), rgba(24, 24, 27, .92)); border: 1px solid var(--line); }
.pub-mapa summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; min-height: 32px; }
.pub-mapa summary::-webkit-details-marker { display: none; }
.pub-mapa summary::before { content: '▸'; color: var(--purple-2); transition: transform .15s; }
.pub-mapa[open] summary::before { transform: rotate(90deg); }
.pub-mapa summary small { color: #ff9a4d; font-weight: 700; font-size: .85rem; }
.pub-mapa-img { display: block; max-width: 680px; margin-top: 12px; padding: 8px; background: #fff; border-radius: 8px; }
.pub-mapa-img img { display: block; width: 100%; height: auto; max-width: 900px; margin: 0 auto; }
.pub-mapa .hint { margin: 8px 0 0; font-size: .82rem; }
.pub-lista { display: flex; flex-direction: column; gap: 10px; }
.pub-carro { border-radius: var(--radius); background: linear-gradient(160deg, #232327, #19191c); border: 1px solid var(--line); overflow: hidden; }
.pub-cab {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; background: none; border: 0; text-align: left; cursor: pointer;
}
.pub-cab .rnum {
  display: grid; place-items: center; min-width: 64px; height: 52px; padding: 0 8px; border-radius: 6px;
  background: linear-gradient(135deg, var(--purple) 0 16%, transparent 16.5%), var(--plate);
  box-shadow: inset 0 -4px 0 var(--purple);
  color: var(--plate-ink); font: 800 1.8rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.pub-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pub-info b { font: 700 1.1rem/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; }
.pub-info .cat { color: var(--muted); font-size: .9rem; }
.pub-cab .rtot { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.pub-cab .rtot b { font: italic 900 2.1rem/1 var(--head); }
.pub-cab .rtot small { margin-top: 3px; color: var(--muted); font: 700 .7rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; }
.pub-seta { color: var(--lilac); font-size: 1.1rem; transition: transform .15s; }
.pub-carro.aberto .pub-seta { transform: rotate(180deg); }
.pub-carro.alerta { background: linear-gradient(160deg, #e3001b, #8f0012); border-color: #ff5a6b; }
.pub-carro.alerta .rnum { background: linear-gradient(135deg, var(--red-d) 0 16%, transparent 16.5%), #fff; box-shadow: inset 0 -4px 0 var(--red-d); }
.pub-carro.alerta .pub-info .cat, .pub-carro.alerta .rtot small, .pub-carro.alerta .pub-seta { color: #ffe5e8; }
.pub-avisos { list-style: none; margin: 0; padding: 4px 14px 12px; border-top: 1px solid rgba(255, 255, 255, .15); }
.pub-avisos li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.pub-avisos li:last-child { border-bottom: 0; }
.pub-ord { min-width: 30px; color: var(--muted); font: 800 .95rem/1 var(--display); }
.pub-avisos .curva-tag {
  display: inline-block; padding: 3px 10px; transform: skewX(-14deg);
  background: var(--purple); color: #fff; font: italic 800 .8rem/1.3 var(--head); text-transform: uppercase;
}
.pub-avisos .hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-carro.alerta .pub-avisos .curva-tag { background: #fff; color: var(--red-d); }
.pub-carro.alerta .pub-ord { color: #ffe5e8; }
@media (max-width: 640px) {
  .pub-modo { width: 100%; text-align: center; }
  .pub-cab { gap: 10px; grid-template-columns: auto 1fr auto; }
  .pub-seta { display: none; }
  .pub-cab .rnum { min-width: 56px; height: 46px; font-size: 1.55rem; }
}


/* ======================================================================
   Tema Porsche Cup — preto, vermelho e cinza
   Vermelho = marca e seleção · Branco = ação/pendente · Cinza = superfícies
   Verde = confirmado (exceção funcional) · Vermelho cheio = alerta
   ====================================================================== */
.brand-kicker { color: var(--purple-2); }
.brand-title { background: linear-gradient(180deg, #ffffff 40%, #c9c9ce 100%); -webkit-background-clip: text; background-clip: text; }
.top { border-bottom: 0; }
.speedline { height: 3px; background: linear-gradient(90deg, var(--purple) 0 55%, #8f0012 75%, transparent 100%); }
.btn-primary:hover { filter: none; background: #ffffff; }
.btn-accent { background: var(--purple); }
.btn-invalidar { color: #d4d4d8; border-color: #55555c; }
.btn-invalidar:hover { color: #fff; border-color: var(--purple-2); background: rgba(213, 0, 28, .15); }
.btn-danger { background: var(--purple); }
.tag-inv { background: #55555c; color: #fff; }
.aviso.invalido { border-left-color: #55555c; }
.aviso .ack-inv { color: var(--muted); }
.curva[aria-pressed="true"] {
  background: linear-gradient(180deg, #2c2c31, #1b1b1f); border-color: var(--purple); color: #fff;
  box-shadow: inset 0 4px 0 var(--purple), 0 10px 26px rgba(213, 0, 28, .35);
}
.curva[aria-pressed="true"] small { color: var(--purple-2); }
.car.wait { background: repeating-linear-gradient(135deg, #e4e4e7 0 8px, #c9c9ce 8px 16px); }
.on-chip .dot.morno { background: #8a8a92; }
.com-chip strong, .chip-nome { border-color: var(--line); }
.aviso.chegou { animation-name: chegou; }
.login-box::before { background: var(--purple); }
.op-footer::before { background: var(--purple); }
.pub-modo > span { color: var(--text); }

/* Diagnóstico da integração Audace */
.box-diag { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.box-diag > div { flex: 1 1 320px; min-width: 0; }
.box-diag .hint { margin: 6px 0 0; }
.diag-saida { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #0c0c0d; border: 1px solid var(--line); color: var(--text); font: 600 .82rem/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }


/* ---------- v46: conta, evento, campos extras ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.conta-bar { border-top: 1px solid var(--line); background: rgba(20, 20, 22, .92); }
.conta-bar[hidden] { display: none; }
.conta-in { max-width: var(--wrap); margin: 0 auto; padding: 4px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; font-size: .92rem; }
.conta-user { margin-right: auto; min-width: 0; }
.conta-user b { font-weight: 700; }
.conta-user small { color: var(--muted); margin-left: 4px; }
.conta-acoes { display: flex; flex-wrap: wrap; gap: 0 16px; }
.conta-link { background: none; border: 0; padding: 6px 0; min-height: 34px; color: var(--lilac); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.conta-link:hover { color: #fff; }
.conta-evento select { max-width: 100%; }
select, input[type="email"], input[type="number"], input[type="date"], textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 2px solid var(--line); border-radius: 8px; background: #141416; color: var(--text); font: inherit; font-size: 1rem;
}
.conta-evento select { min-height: 36px; padding: 4px 10px; font-size: .92rem; width: auto; }
textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
select:focus, textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus { border-color: var(--purple-2); outline: none; box-shadow: 0 0 0 3px rgba(213, 0, 28, .3); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--purple-2); flex: none; }

.brand-tag[hidden] { display: none; }

/* Elementos com o atributo hidden nunca aparecem, mesmo que a classe defina display. */
[hidden] { display: none !important; }

#link-esqueci, #esqueci-voltar, #redef-voltar { margin-top: 10px; align-self: flex-start; }
.msg-ok { color: var(--ok, #2e9e5b); margin: 10px 0 0; min-height: 1.2em; }

.op-sessao { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--yellow, #e0a100); background: rgba(255,255,255,.05); font-size: .85rem; }