/* Elevaí sobre o Padrão R Fabric. Marca: azul-grafite de oficina e o âmbar do elevador de carro (ideia da Geovanna Feitoza).
   O âmbar aparece em três lugares só: a marca, o item ativo do menu e a ação principal da tela. */
:root{--brand:#14212B;--brand-2:#1E2F3C;--accent:#F2A900}

/* ---------- casca: menu lateral no computador, barra de baixo no celular ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;background:var(--brand);color:var(--brand-ink);display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:4px 8px 0;text-decoration:none;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
.marca svg{width:26px;height:26px;flex:none}
.marca b{font-size:var(--t-lg);font-weight:700;letter-spacing:-.01em}
.oficina-nome{padding:6px 8px 18px;margin-left:36px;font-size:var(--t-sm);color:var(--brand-muted);line-height:1.3}
.menu{display:flex;flex-direction:column;gap:2px}
.menu button{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--brand-muted);
  font-size:var(--t-base);font-weight:500;cursor:pointer;text-align:left;transition:background var(--d-fast),color var(--d-fast)}
.menu button:hover{background:var(--brand-2);color:var(--brand-ink)}
.menu button[aria-current="page"]{background:var(--brand-2);color:var(--brand-ink)}
.menu button[aria-current="page"] .ic{color:var(--accent)}
.menu .conta{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:600;display:grid;place-items:center}
.lateral-pe{margin-top:auto;padding-top:12px;border-top:1px solid var(--brand-2);display:flex;flex-direction:column;gap:2px}
.quem{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--brand-ink);cursor:pointer;text-align:left}
.quem:hover{background:var(--brand-2)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-2);color:var(--brand-ink);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;letter-spacing:.02em}
.quem .t-xs{color:var(--brand-muted)}
.conteudo{min-width:0;display:flex;flex-direction:column}
main{width:100%;max-width:1240px;margin:0 auto;padding:28px 32px 56px;min-width:0}
.topo-cel,.abas-cel{display:none}
.demo-faixa{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:7px 16px;background:var(--accent-soft);color:var(--ink);font-size:var(--t-sm)}
.demo-faixa .ponto{width:7px;height:7px;border-radius:50%;background:var(--accent)}
body.solo .lateral,body.solo .topo-cel,body.solo .abas-cel,body.solo .demo-faixa{display:none!important}
body.solo .app{display:block}
body.solo main{max-width:none;padding:0}
@media (max-width:1023px){
  .app{grid-template-columns:1fr}
  .lateral{display:none}
  .topo-cel{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;height:56px;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
    background:var(--brand);color:var(--brand-ink)}
  .topo-cel .marca{padding:0}
  .topo-cel .oficina{font-size:var(--t-sm);color:var(--brand-muted);min-width:0}
  .topo-cel .quem{width:auto;padding:4px}
  .abas-cel{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .abas-cel button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 9px;border:0;background:none;color:var(--muted);font-size:11px;font-weight:500;cursor:pointer;position:relative}
  .abas-cel button .ic{width:22px;height:22px}
  .abas-cel button[aria-current="page"]{color:var(--ink)}
  .abas-cel .conta{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:600;display:grid;place-items:center}
  main{padding:20px max(16px,env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
}

/* ---------- cabeçalho de página ---------- */
.cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cabeca p{margin-top:4px;color:var(--muted)}
.cabeca .row{flex-wrap:nowrap}
.barra-ferramentas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.barra-ferramentas .input-icon{flex:1 1 260px;max-width:380px}
.secao{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.secao>h2{font-size:var(--t-md);font-weight:600;display:flex;align-items:center;gap:8px}
.secao>h2 .t-muted{font-weight:400}

/* ---------- placa Mercosul: o objeto real, com as cores reais em qualquer tema ---------- */
.placa{display:inline-flex;align-items:flex-end;justify-content:center;flex:none;width:82px;height:29px;padding-bottom:4px;border:1.5px solid #20262D;border-radius:4px;background:#FFFFFF;
  color:#111418;font:600 13px/1 var(--mono);letter-spacing:.07em;position:relative;overflow:hidden}
.placa::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:#1B4C9C}
.placa.g{width:150px;height:48px;font-size:24px;padding-bottom:5px;border-width:2px;border-radius:6px}
.placa.g::before{content:"BRASIL";height:13px;color:#FFFFFF;font:600 8px/13px var(--font);letter-spacing:.24em;text-align:center}

/* ---------- etapas da OS ---------- */
.etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:e}
.etapas li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--muted);text-align:center;counter-increment:e}
.etapas li::before{content:counter(e);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);background:var(--surface);
  font-size:11px;font-weight:600;color:var(--muted);position:relative;z-index:1}
.etapas li:not(:first-child)::after{content:"";position:absolute;top:11px;right:50%;width:100%;height:1.5px;background:var(--line-2)}
.etapas li.feita{color:var(--ink-2)}
.etapas li.feita::before{content:"";background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--ink)}
.etapas li.feita::after,.etapas li.agora::after{background:var(--ink)}
.etapas li.agora{color:var(--ink);font-weight:600}
.etapas li.agora::before{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}

/* ---------- pátio: os carros por etapa (quadro no computador, grupos no celular) ---------- */
.inicio-grade{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:20px}
@media (max-width:1279px){.inicio-grade{grid-template-columns:1fr}}
.patio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:1100px){.patio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.patio{grid-template-columns:1fr}}
.coluna{background:var(--surface-3);border-radius:var(--r-md);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.coluna-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 4px 4px}
.coluna-topo b{font-size:var(--t-sm);font-weight:600}
.coluna-topo span{font-size:var(--t-xs);color:var(--muted)}
.coluna .vazia{font-size:var(--t-sm);color:var(--faint);padding:10px 4px}
.carro{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;text-align:left;color:inherit;cursor:pointer;width:100%;
  transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.carro:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.carro .topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.carro .modelo{font-weight:500;line-height:1.3}
.carro .rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t-xs);color:var(--muted)}
.carro .rodape b{font-size:var(--t-sm);color:var(--ink);font-weight:600}
.carro .alerta-mini{font-size:var(--t-xs);color:var(--warn);font-weight:500;display:flex;align-items:center;gap:4px}

/* ---------- precisa de atenção ---------- */
.atencao .item-l{align-items:flex-start}
.atencao .sinal{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-2)}
.atencao .sinal.ok{background:var(--ok-soft);color:var(--ok)}.atencao .sinal.danger{background:var(--danger-soft);color:var(--danger)}
.atencao .sinal.warn{background:var(--warn-soft);color:var(--warn)}.atencao .sinal.info{background:var(--info-soft);color:var(--info)}

/* ---------- veículo na tabela ---------- */
.veiculo{display:flex;align-items:center;gap:12px;min-width:0}
.veiculo .grow b{display:block;font-weight:500}
.osn{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted)}

/* ---------- detalhe da OS ---------- */
.os-cabeca{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.os-cabeca h2{font-size:var(--t-xl);font-weight:600;letter-spacing:-.01em}
.os-cabeca .meta{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);margin-top:4px}
.bloco{display:flex;flex-direction:column;gap:10px;padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.bloco>h3{font-size:var(--t-sm);font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.totais{display:flex;flex-direction:column;gap:6px;margin-left:auto;width:min(320px,100%);font-size:var(--t-base)}
.totais .r{display:flex;justify-content:space-between;gap:16px}
.totais .r span:last-child{font-variant-numeric:tabular-nums}
.totais .total{padding-top:8px;border-top:1px solid var(--line);font-size:var(--t-lg);font-weight:600}
.anexos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.anexo{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2);text-decoration:none;color:inherit;cursor:pointer;padding:0;text-align:left}
.anexo img{width:100%;height:84px;object-fit:cover;display:block;background:var(--surface-3)}
.anexo .doc{height:84px;display:grid;place-items:center;color:var(--muted)}
.anexo span{font-size:11px;color:var(--muted);padding:6px 8px;line-height:1.3}
.perigo{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;margin-top:24px;border-top:1px solid var(--line)}

/* ---------- formulário da OS ---------- */
.itens-f{display:flex;flex-direction:column;gap:8px}
.item-f{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 10px;align-items:end;padding:10px 12px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.item-f .c-origem{grid-column:span 2}.item-f .c-nome{grid-column:span 4}.item-f.mao .c-nome{grid-column:span 6}.item-f .c-num{grid-column:span 2}
.item-f .field>label{font-size:var(--t-xs);color:var(--muted)}
.item-f .tipo{font-size:var(--t-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin:-4px -6px 0 0}
.item-f .aviso-l{grid-column:1/-1;font-size:var(--t-xs)}
@media (max-width:520px){.item-f .c-origem,.item-f .c-nome{grid-column:1/-1}.item-f .c-num{grid-column:span 3}}

/* ---------- caixa: gráfico de barras por categoria (uma série, rótulo na ponta, dica ao passar) ---------- */
.barras{display:flex;flex-direction:column;gap:10px}
.barra{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) auto;align-items:center;gap:12px;position:relative;font-size:var(--t-sm);outline:none}
.barra .trilho{height:10px;display:flex;align-items:center}
.barra i{display:block;height:10px;min-width:3px;background:var(--data);border-radius:0 4px 4px 0}
.barra .val{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right;min-width:88px}
.barra .dica{position:absolute;left:min(var(--x,50%),calc(100% - 180px));bottom:calc(100% + 6px);padding:6px 9px;border-radius:6px;background:var(--ink);color:var(--surface);font-size:var(--t-xs);
  white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity var(--d-fast),transform var(--d-fast);z-index:3}
.barra:hover .dica,.barra:focus-visible .dica{opacity:1;transform:none}
.barra:hover i,.barra:focus-visible i{filter:brightness(1.12)}

/* ---------- páginas sem painel: entrar, convite, demonstração ---------- */
.entrar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100vh}
.entrar-marca{background:var(--brand);color:var(--brand-ink);padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.entrar-marca h1{color:var(--brand-ink);font-size:var(--t-3xl);font-weight:600;letter-spacing:-.02em;max-width:15ch;line-height:1.15}
.entrar-marca p{color:var(--brand-muted);max-width:44ch;margin-top:12px}
.entrar-marca .placa{margin-bottom:8px}
.entrar-form{display:flex;align-items:center;justify-content:center;padding:40px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.entrar-form form,.entrar-form .caixa{width:min(380px,100%);display:flex;flex-direction:column;gap:16px}
.entrar-form h2{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.015em}
.assinatura{font-size:var(--t-xs);color:var(--brand-muted)}
@media (max-width:860px){.entrar{grid-template-columns:1fr}.entrar-marca{padding:24px max(16px,env(safe-area-inset-left,0px));gap:12px}.entrar-marca .desc,.entrar-marca .placa{display:none}.entrar-marca h1{font-size:var(--t-xl)}}

.vitrine{max-width:1120px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right,0px)) 56px max(20px,env(safe-area-inset-left,0px))}
.vitrine-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.vitrine-topo .marca{color:var(--ink);padding:0}
.vitrine-heroi{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding:40px 0 56px}
.vitrine-heroi h1{font-size:44px;line-height:1.08;font-weight:600;letter-spacing:-.025em;max-width:14ch}
.vitrine-heroi p{font-size:var(--t-lg);color:var(--ink-2);margin:18px 0 28px;max-width:46ch;line-height:1.55}
.vitrine-heroi .row{gap:16px}
@media (max-width:900px){.vitrine-heroi{grid-template-columns:1fr;gap:32px;padding:16px 0 40px}.vitrine-heroi h1{font-size:32px}}
.amostra{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
.amostra-topo{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--brand);color:var(--brand-ink)}
.amostra-topo b{font-size:var(--t-md)}.amostra-topo span{font-family:var(--mono);font-size:var(--t-xs);color:var(--brand-muted)}
.amostra-corpo{padding:18px;display:flex;flex-direction:column;gap:14px}
.amostra .linha{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm);padding:8px 0;border-bottom:1px solid var(--line)}
.amostra .linha:last-of-type{border-bottom:0}
.amostra .total{display:flex;justify-content:space-between;font-size:var(--t-lg);font-weight:600}
.recursos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.recursos div{padding:24px 24px 0 0;display:flex;flex-direction:column;gap:8px}
.recursos .ic{width:22px;height:22px;color:var(--ink-2)}
.recursos b{font-weight:600}.recursos p{color:var(--muted);font-size:var(--t-sm);line-height:1.55}
@media (max-width:900px){.recursos{grid-template-columns:1fr 1fr;gap:0 20px}}
@media (max-width:520px){.recursos{grid-template-columns:1fr}}
.vitrine-pe{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- página do cliente: um documento de orçamento ---------- */
.doc-cli{max-width:680px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:16px}
.doc-cli .of{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.doc-cli .of h1{font-size:var(--t-xl);font-weight:600}
.doc-cli .of p{font-size:var(--t-sm);color:var(--muted);margin-top:4px}
.doc-cli .numero{text-align:right;flex:none}
.doc-cli .numero b{display:block;font-family:var(--mono);font-size:var(--t-lg);font-weight:600}
.doc-cli .numero span{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.doc-cli .veic{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.doc-cli .veic h2{font-size:var(--t-lg);font-weight:600}
.doc-cli .resposta{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.doc-cli .total-grande{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.doc-cli .total-grande b{font-size:30px;font-weight:600;letter-spacing:-.02em}
.doc-cli .rodape{text-align:center;font-size:var(--t-xs);color:var(--faint);margin-top:8px}

/* ---------- primeiros passos ---------- */
.passos{list-style:none;margin:0;padding:0;counter-reset:p}
.passos li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);counter-increment:p}
.passos li:last-child{border-bottom:0}
.passos li::before{content:counter(p);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;border:1.5px solid var(--line-2);font-size:12px;font-weight:600;color:var(--muted)}
.passos li.feito::before{content:"";border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat}
.passos li.feito b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-2);font-weight:500}
.passos li div{flex:1;min-width:0}
.placa.vazia{align-items:center;padding:0;border-style:dashed;border-color:var(--line-2);background:transparent;color:var(--faint);font:500 11px/1 var(--font);letter-spacing:0}
.placa.vazia::before{display:none}
.placa.vazia.g{font-size:13px}
@media (max-width:900px){.caixa-grade{grid-template-columns:1fr!important}}
details>summary::-webkit-details-marker{display:none}
details[open]>summary .ic{color:var(--accent)}
@media (max-width:760px){.demo-faixa{flex-wrap:nowrap;padding:6px 16px}.demo-faixa .longo{display:none}}
@media (max-width:1279px){.inicio-grade .atencao{order:-1}}
@media (max-width:520px){.os-cabeca{gap:12px}.os-cabeca .placa.g{width:118px;height:40px;font-size:19px}.os-cabeca .placa.g::before{height:11px;font-size:7px;line-height:11px}.os-cabeca h2{font-size:var(--t-lg)}}