/* MIX TEC · tema Mix do ADM (aprovado em 22/10/2026): Poppins, azul/amarelo/verde da marca, cartões com linha de luz,
   fundo espacial no escuro. Escuro é o padrão; claro por data-theme="light" no <html> (public/tema.js).
   Feito primeiro para o celular do técnico (375 px); no computador o conteúdo fica centralizado até 1100 px. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Cores ---------- */
:root {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --marca-azul: #00aff5;     --marca-azul-rgb: 0, 175, 245;
  --marca-amarelo: #ffbb00;  --marca-amarelo-rgb: 255, 187, 0;
  --marca-verde: #b3df27;    --marca-verde-rgb: 179, 223, 39;
  --botao: linear-gradient(135deg, #14bbff, #0a84ff 55%, #2158ff);
  --raio: 14px;
  color-scheme: dark;
  --fundo: #060a10;
  --topo-fundo: rgba(8, 13, 21, .9);
  --superficie: #0d1520;
  --superficie-2: #111b28;
  --borda: #1d2a3a;
  --controle: #111b28;
  --controle-hover: #182638;
  --texto: #dfe8f3;
  --titulo: #f4f8fb;
  --suave: #a6b5c6;
  --apagado: #8697ab;
  --destaque: #4fcaf8;
  --bom: #8fd14f;     --bom-fundo: rgba(143, 209, 79, .14);
  --atencao: #ffc56c; --atencao-fundo: rgba(255, 197, 108, .14);
  --ruim: #fa8c9f;    --ruim-fundo: rgba(250, 140, 159, .14);
  --texto-degrade: linear-gradient(100deg, #ffffff 40%, #a6e9f5 78%, #c9ea7e);
  --sombra: 0 14px 30px rgba(0, 0, 0, .28);
  --carro-lataria: #16273a;
  --carro-traco: #8fb6dc;
  --carro-vidro: #24435f;
}
:root[data-theme="light"] {
  color-scheme: light;
  --fundo: #eef4fb;
  --topo-fundo: rgba(255, 255, 255, .94);
  --superficie: #ffffff;
  --superficie-2: #f6f9fd;
  --borda: #dce5f1;
  --controle: #f3f6fc;
  --controle-hover: #e7eefe;
  --texto: #243c5b;
  --titulo: #10213e;
  --suave: #617591;
  --apagado: #657993;
  --destaque: #0779c2;
  --bom: #3f7a08;     --bom-fundo: rgba(63, 122, 8, .1);
  --atencao: #9b6000; --atencao-fundo: rgba(155, 96, 0, .1);
  --ruim: #bf3450;    --ruim-fundo: rgba(191, 52, 80, .09);
  --texto-degrade: linear-gradient(100deg, #0b1f3a 45%, #0a6fb8 85%, #3d8f1f);
  --sombra: 0 8px 22px rgba(16, 48, 90, .07);
  --carro-lataria: #e9f1fb;
  --carro-traco: #47698f;
  --carro-vidro: #c5daf0;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--texto); background: var(--fundo); line-height: 1.35; }
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(1px 1px at 30px 40px, rgba(255, 255, 255, .25) 50%, transparent 55%) 0 0 / 173px 173px,
    radial-gradient(900px 520px at 100% 0%, rgba(var(--marca-azul-rgb), .10), transparent 62%),
    radial-gradient(700px 420px at 0% 100%, rgba(var(--marca-verde-rgb), .05), transparent 60%),
    var(--fundo);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--destaque); }
:focus-visible { outline: 2px solid #7ce8ff; outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--titulo); line-height: 1.2; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--titulo); }
h3 { font-size: 15px; font-weight: 600; color: var(--titulo); }
p { color: var(--suave); line-height: 1.5; }
small { color: var(--apagado); }
[hidden] { display: none !important; }
.centro { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.produto { display: flex; align-items: baseline; justify-content: center; gap: 7px; white-space: nowrap; }
.produto strong {
  font-size: 21px; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(100deg, #ffffff 30%, #a6e9f5 70%, #c9ea7e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.produto span { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9fc3e6; }
.produto.pequeno strong { font-size: 16px; }
:root[data-theme="light"] .topo .produto strong { background: linear-gradient(100deg, #0b1f3a 30%, #0a6fb8 80%); -webkit-background-clip: text; background-clip: text; }
.regua-marca { height: 1px; background: linear-gradient(90deg, rgba(var(--marca-azul-rgb), .55), rgba(var(--marca-amarelo-rgb), .4) 50%, rgba(var(--marca-verde-rgb), .55)); }

/* ---------- Login e convite (sempre escuros) ---------- */
.tela-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background:
    radial-gradient(1px 1px at 30px 40px, rgba(255, 255, 255, .32) 50%, transparent 55%) 0 0 / 173px 173px,
    radial-gradient(1px 1px at 110px 90px, rgba(140, 215, 255, .30) 50%, transparent 55%) 0 0 / 239px 239px,
    radial-gradient(900px 520px at 100% 0%, rgba(var(--marca-azul-rgb), .14), transparent 62%),
    radial-gradient(700px 420px at 0% 100%, rgba(var(--marca-verde-rgb), .07), transparent 60%),
    #060a10;
  color-scheme: dark; color: #dfe8f3;
}
.cartao-login {
  width: min(400px, 100%); display: grid; gap: 14px; padding: 28px 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(17, 27, 40, .94), rgba(10, 16, 25, .96)); border: 1px solid #1d2a3a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cartao-login h1 { color: #f4f8fb; text-align: center; font-size: 22px; }
.cartao-login p { color: #a6b5c6; text-align: center; }
.cartao-login label { color: #a6b5c6; }
.cartao-login input { background: #0b131d; border-color: #24364b; color: #eef4fb; }
.logo-login { display: block; margin: 0 auto; width: 180px; height: auto; }
.rodape-login { text-align: center; color: #8697ab; font-size: 12px; }
.erro { color: var(--ruim); min-height: 1.2em; font-size: 14px; text-align: center; }
.cartao-login .erro { color: #fa8c9f; }

/* ---------- Campos e botões ---------- */
label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--suave); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--borda);
  background: var(--controle); color: var(--texto); font-size: 16px;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca-azul); box-shadow: 0 0 0 3px rgba(var(--marca-azul-rgb), .18); }
.primario, .secundario, .perigo, .discreto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none;
}
.primario { background: var(--botao); color: #fff; box-shadow: 0 8px 20px rgba(10, 132, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .25); }
.secundario { background: var(--controle); border: 1px solid var(--borda); color: var(--texto); }
.secundario:hover { background: var(--controle-hover); }
.perigo { background: var(--ruim-fundo); color: var(--ruim); border: 1px solid rgba(250, 140, 159, .3); }
.discreto { color: var(--destaque); min-height: 40px; padding: 0 10px; }
.largo { width: 100%; }
.voltar { justify-self: start; padding: 0; min-height: 32px; }
.caixa { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: var(--titulo); font-size: 14px; }
.caixa input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--marca-azul); flex-shrink: 0; }
.caixa small { display: block; font-weight: 400; margin-top: 2px; }
.flexivel { flex: 1; min-width: 0; }
.botao-icone { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 11px; color: var(--suave); font-size: 22px; }
.botao-icone:hover { background: var(--controle-hover); color: var(--titulo); }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.linha-botoes > * { flex: 1 1 140px; }

/* ---------- Estrutura ---------- */
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top)); background: var(--topo-fundo); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(var(--marca-azul-rgb), .6), rgba(var(--marca-amarelo-rgb), .45), rgba(var(--marca-verde-rgb), .6)); }
.marca { display: flex; align-items: center; gap: 8px; }
.logo-topo { width: 74px; height: auto; }
:root[data-theme="light"] .logo-topo, :root[data-theme="light"] .cartao .logo-claro { content: url("/assets/logo-mix-claro.png?v=0.1.5"); }
.abas { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.abas button { padding: 8px 12px; border-radius: 10px; color: var(--suave); font-weight: 500; font-size: 14px; white-space: nowrap; }
.abas button[aria-current="page"] { color: var(--titulo); background: rgba(var(--marca-azul-rgb), .14); box-shadow: inset 0 -2px 0 var(--marca-azul); }
.topo-direita { display: flex; align-items: center; gap: 6px; }
.abas:empty + .topo-direita { margin-left: auto; }
/* No celular, as abas da gestão descem para uma segunda linha do topo. */
@media (max-width: 560px) {
  .topo { flex-wrap: wrap; row-gap: 8px; }
  .topo-direita { margin-left: auto; }
  .abas { order: 3; width: 100%; margin-left: 0; }
  .abas:empty { display: none; }
  .abas button { flex: 1; }
}
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #14bbff, #2158ff); }
.embutido .topo, .embutido .rodape { display: none; }
main { width: min(1100px, 100%); margin: 0 auto; padding: 18px 14px 120px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* Colunas nunca mais largas que a tela: a fileira das vistas rola sozinha em vez de empurrar a página. */
.cartao, .formulario, .grade, .cabecalho, #janela-corpo { grid-template-columns: minmax(0, 1fr); }
.rodape { text-align: center; color: var(--apagado); font-size: 12px; padding: 0 14px 28px; }
.rodape span { margin: 0 4px; }
.versao { opacity: .7; }
.faixa-demo, .faixa-envios {
  margin: 10px 14px 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.faixa-demo { background: rgba(var(--marca-amarelo-rgb), .1); border: 1px solid rgba(var(--marca-amarelo-rgb), .3); color: var(--atencao); }
.faixa-demo a { color: inherit; font-weight: 600; }
.faixa-envios { background: rgba(var(--marca-azul-rgb), .1); border: 1px solid rgba(var(--marca-azul-rgb), .3); color: var(--texto); }

.cabecalho { display: grid; gap: 4px; }
.olho { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.titulo-degrade { background: var(--texto-degrade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.cartao {
  position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cartao::before { content: ""; position: absolute; inset: 0 16px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--marca-azul-rgb), .55), transparent); }
.cartao.clicavel { cursor: pointer; text-align: left; width: 100%; color: inherit; }
.cartao.clicavel:hover { border-color: rgba(var(--marca-azul-rgb), .45); }
.grade { display: grid; gap: 14px; }
@media (min-width: 720px) { .grade.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#janela-corpo .grade.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .numeros { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.numero { padding: 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); }
.numero strong { display: block; font-size: 26px; font-weight: 700; color: var(--titulo); letter-spacing: -.03em; }
.numero span { font-size: 12px; color: var(--suave); }
.numero.bom strong { color: var(--bom); } .numero.atencao strong { color: var(--atencao); } .numero.ruim strong { color: var(--ruim); }

.placa {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 7px; font-weight: 700; letter-spacing: .08em;
  font-size: 17px; color: #10213e; background: #f4f8fb; border: 2px solid #27466e; border-top-width: 6px; border-top-color: #1b4fb4;
}
.carro-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dados { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--suave); }
.dados b { color: var(--titulo); font-weight: 600; }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.selo.bom { color: var(--bom); background: var(--bom-fundo); }
.selo.atencao { color: var(--atencao); background: var(--atencao-fundo); }
.selo.ruim { color: var(--ruim); background: var(--ruim-fundo); }
.selo.neutro { color: var(--suave); background: var(--controle); }
.selos { display: flex; flex-wrap: wrap; gap: 6px; }
.lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lista li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 11px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 14px; }
.lista li.clicavel { cursor: pointer; }
.lista li .sub { display: block; font-size: 12px; color: var(--apagado); }
.vazio { padding: 18px; text-align: center; color: var(--apagado); border: 1px dashed var(--borda); border-radius: 12px; }
.miniatura { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; background: var(--controle); flex-shrink: 0; }

/* ---------- Checklist ---------- */
.formulario { display: grid; gap: 14px; }
.secao h3 { display: flex; align-items: center; gap: 8px; }
.secao h3 .contador { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--apagado); }
.item { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--borda); }
.item:first-of-type { border-top: 0; }
.item-rotulo { font-size: 14px; font-weight: 500; color: var(--titulo); }
.item-rotulo small { display: block; font-weight: 400; }
.item.faltando .item-rotulo { color: var(--ruim); }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opcoes button {
  flex: 1 1 auto; min-height: 44px; min-width: 64px; padding: 6px 12px; border-radius: 11px; font-size: 14px; font-weight: 500;
  background: var(--controle); border: 1px solid var(--borda); color: var(--texto);
}
.opcoes button[aria-pressed="true"] { background: rgba(var(--marca-azul-rgb), .18); border-color: var(--marca-azul); color: var(--titulo); font-weight: 600; }
.opcoes button.ruim[aria-pressed="true"] { background: var(--ruim-fundo); border-color: var(--ruim); color: var(--ruim); }
.combustivel button { min-width: 0; padding: 6px 4px; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.foto-vaga {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; border: 1.5px dashed var(--borda); background: var(--superficie-2);
  display: grid; place-items: center; text-align: center; padding: 6px; font-size: 12px; color: var(--suave); overflow: hidden; cursor: pointer;
}
.foto-vaga.feita { border-style: solid; border-color: rgba(var(--marca-verde-rgb), .6); padding: 0; }
.foto-vaga.faltando { border-color: var(--ruim); color: var(--ruim); }
.foto-vaga img { width: 100%; height: 100%; object-fit: cover; }
.foto-vaga .rotulo-foto { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.foto-vaga .icone-camera { font-size: 24px; display: block; margin-bottom: 4px; }
.foto-vaga input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.barra-enviar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--topo-fundo); backdrop-filter: blur(14px); border-top: 1px solid var(--borda); display: flex; gap: 10px; justify-content: center;
}
.barra-enviar > * { flex: 1; max-width: 520px; }
.progresso { font-size: 13px; color: var(--suave); text-align: center; }

/* ---------- Desenho do carro e avarias ---------- */
.vistas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.vistas button { padding: 7px 12px; border-radius: 999px; font-size: 13px; background: var(--controle); border: 1px solid var(--borda); white-space: nowrap; color: var(--suave); }
.vistas button[aria-pressed="true"] { border-color: var(--marca-azul); color: var(--titulo); background: rgba(var(--marca-azul-rgb), .16); }
.vistas button .qtd { margin-left: 4px; font-weight: 700; color: var(--atencao); }
.area-desenho { border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); padding: 8px; touch-action: manipulation; }
.desenho-carro { width: 100%; height: auto; display: block; color: var(--carro-traco); cursor: crosshair; user-select: none; }
.desenho-carro .lataria { fill: var(--carro-lataria); stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.desenho-carro .vidro { fill: var(--carro-vidro); stroke: currentColor; stroke-width: 1.4; }
.desenho-carro .linha { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .7; }
.desenho-carro .roda { fill: #1a1f27; stroke: currentColor; stroke-width: 1.6; }
.desenho-carro .cubo { fill: #59687a; }
.desenho-carro .farol { fill: #fff6c4; stroke: currentColor; stroke-width: 1.2; }
.desenho-carro .lanterna { fill: #e0566d; stroke: currentColor; stroke-width: 1.2; }
.desenho-carro .grade { fill: #1a1f27; stroke: currentColor; stroke-width: 1.2; }
.desenho-carro .placa { fill: #f4f8fb; stroke: currentColor; stroke-width: 1.2; }
.desenho-carro .espelho { fill: var(--carro-lataria); stroke: currentColor; stroke-width: 1.4; }
.desenho-carro .legenda-vista { font-size: 10px; fill: currentColor; opacity: .7; }
.desenho-carro .forro { fill: var(--carro-vidro); opacity: .45; }
.desenho-carro .forro-escuro { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.desenho-carro .painel { fill: #1a1f27; stroke: currentColor; stroke-width: 1.4; }
.desenho-carro .saida { fill: #8697ab; }
.desenho-carro .volante { fill: none; stroke: currentColor; stroke-width: 3; }
.desenho-carro .banco { fill: var(--carro-lataria); stroke: currentColor; stroke-width: 1.4; }
.desenho-carro .cambio { fill: currentColor; }
.marca circle { stroke: #fff; stroke-width: 2; }
.marca text { font-size: 11px; font-weight: 700; text-anchor: middle; fill: #10213e; }
.marca.existente circle { fill: #a6b5c6; }
.marca.nova circle { fill: var(--marca-amarelo); }
.marca.escolhida circle { fill: var(--marca-azul); }
.dica { font-size: 13px; color: var(--apagado); }

/* ---------- Assinatura ---------- */
.assinatura { display: grid; gap: 8px; }
.assinatura canvas { width: 100%; height: 170px; border-radius: 12px; background: #fff; border: 1px solid var(--borda); touch-action: none; }
.assinatura.faltando canvas { border-color: var(--ruim); box-shadow: 0 0 0 2px var(--ruim-fundo); }
.assinatura .rodape-assinatura { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--apagado); }

/* ---------- Janela e aviso ---------- */
dialog {
  width: min(560px, calc(100% - 20px)); max-height: calc(100vh - 30px); padding: 0; border-radius: 18px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
dialog::backdrop { background: rgba(3, 7, 12, .66); backdrop-filter: blur(3px); }
.janela-topo { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: var(--superficie); border-bottom: 1px solid var(--borda); }
#janela-corpo { padding: 16px; display: grid; gap: 14px; }
#aviso {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 28px); padding: 12px 16px; border-radius: 12px;
  background: #10213e; color: #fff; font-size: 14px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
#aviso.ruim { background: #7a1d2f; }
.foto-grande { width: 100%; border-radius: 12px; display: block; }
.menu-conta { display: grid; gap: 8px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela td { padding: 8px 4px; border-top: 1px solid var(--borda); vertical-align: top; }
.tabela td:last-child { text-align: right; font-weight: 600; color: var(--titulo); }
.tabela tr.ruim td:last-child { color: var(--ruim); }
.link-convite { word-break: break-all; font-size: 13px; padding: 10px; border-radius: 10px; background: var(--controle); border: 1px solid var(--borda); }