/* =====================================================================
   VexOS — estilo

   Segue o visual do Vextron desktop, não o do site institucional: o
   cliente entra aqui com a mesma conta do app, e reconhecer o produto
   vale mais do que combinar com a página de vendas.
   ===================================================================== */

:root{
  --laranja:#ff7a00; --laranja-claro:#ff9633; --laranja-fundo:#2a1a0d;
  --fundo:#0f0f12; --cartao:#17171b; --cartao-claro:#1e1e24;
  --borda:#2a2a31; --texto:#f2f2f2; --texto-sec:#9a9aa4;
  --sucesso:#34d399; --sucesso-fundo:#0f2a1c;
  --alerta:#fbbf24; --alerta-fundo:#2a220d;
  --erro:#f87171; --erro-fundo:#2a1414;
  --r:9px; --r-lg:14px;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--fundo); color:var(--texto);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.6;
}
a{color:var(--laranja); text-decoration:none;}
button{font-family:inherit;}

/* ---- topo ---- */
.topo{
  background:var(--cartao); border-bottom:1px solid var(--borda);
  position:sticky; top:0; z-index:40;
  /* isolation cria um contexto próprio de empilhamento: sem isso, um
     cartão com sombra ou transform pode acabar por cima da barra ao
     rolar a página */
  isolation:isolate;
}
.topo-inner{
  max-width:1180px; margin:0 auto; padding:0 20px; height:58px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
/* Marca: barra laranja + nome com o subtítulo embaixo.
   O subtítulo existe porque "VexOS" sozinho não diz o que o produto é —
   e a marca ainda é nova para o cliente. */
.marca{
  display:flex; align-items:center; gap:11px; color:var(--texto);
}
.marca-barra{
  width:4px; height:28px; border-radius:2px;
  background:var(--laranja); flex:none;
}
.marca-nome{
  font-weight:800; font-size:18px; letter-spacing:.3px; line-height:1.05;
}
.marca-nome b{color:var(--laranja);}
.marca-sub{
  display:block; font-size:8.5px; color:var(--texto-sec);
  font-weight:600; letter-spacing:1.4px; margin-top:1px;
}
/* No celular o subtítulo sai: a barra do topo já é apertada, e o nome
   sozinho basta para quem já está dentro do sistema. */
@media (max-width:600px){ .marca-sub{display:none;} .marca-barra{height:22px;} }
.topo-nav{display:flex; gap:4px; align-items:center;}
.topo-nav a{
  color:var(--texto-sec); padding:7px 13px; border-radius:8px;
  font-size:13.5px; font-weight:600;
}
.topo-nav a:hover{background:var(--cartao-claro); color:var(--texto);}
.topo-nav a.ativo{background:var(--laranja-fundo); color:var(--laranja);}
/* ---- conta no topo ----
   Antes eram dois textos soltos: o nome da oficina com cor de link e um
   "sair" sublinhado ao lado. Parecia que os dois eram clicáveis, e só
   um era. Agora é um botão só, que abre o menu. */
.topo-conta{position:relative;}

.conta-botao{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:10px;
  padding:5px 9px 5px 6px; font-family:inherit;
}
.conta-botao:hover{background:var(--cartao-claro); border-color:var(--borda);}
.conta-botao.aberto{background:var(--cartao-claro); border-color:var(--borda);}

.conta-inicial{
  width:29px; height:29px; border-radius:9px; flex:none;
  background:var(--laranja-fundo); color:var(--laranja);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}
.conta-nome{
  font-size:13px; font-weight:600; color:var(--texto);
  max-width:150px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:left;
}
.conta-seta{
  width:13px; height:13px; stroke:var(--texto-sec); fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .15s; flex:none;
}
.conta-botao.aberto .conta-seta{transform:rotate(180deg);}

.conta-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:12px; min-width:224px; padding:6px;
  box-shadow:0 16px 44px rgba(0,0,0,.55); display:none;
}
.conta-menu.aberto{display:block;}
.conta-cabeca{
  padding:11px 12px 12px; border-bottom:1px solid var(--borda);
  margin-bottom:6px;
}
.conta-cabeca b{
  display:block; font-size:13.5px; color:var(--texto); margin-bottom:2px;
}
.conta-cabeca span{
  display:block; font-size:11.5px; color:var(--texto-sec);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.conta-papel{
  /* inline-flex + width:max-content: dentro de um bloco, o
     inline-block herdava a largura toda e o selo virava uma faixa */
  display:inline-flex; width:max-content;
  margin-top:7px; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:20px; letter-spacing:.4px;
  background:var(--laranja-fundo); color:var(--laranja-claro);
  text-transform:uppercase;
}
.conta-item{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; border-radius:8px; cursor:pointer;
  padding:9px 12px; font-size:13px; color:var(--texto);
  font-family:inherit; text-align:left;
}
.conta-item:hover{background:var(--cartao-claro);}
/* o item de Assinatura é um <a>, não um <button>: o sublinhado e a cor
   de link padrão vazariam por cima do estilo do menu */
a.conta-item{text-decoration:none; box-sizing:border-box;}

/* Código de consulta da peça: monoespaçado para os dígitos alinharem
   entre as linhas — é assim que o olho encontra um número numa lista. */
.cod-peca{
  font-family:Consolas,"SF Mono",monospace; font-size:12.5px;
  color:var(--texto-sec); letter-spacing:.5px; white-space:nowrap;
}
/* O saldo vem grudado na unidade ("5 un"); sem peso diferente, "0 5"
   e "5 un" se confundem de relance. */
.selo b{font-weight:800; font-size:13px;}

/* Setinhas do input[type=number]: somem.
   Num campo de quantidade elas ocupam a ponta direita, roubam o clique
   de quem ia posicionar o cursor, e mudam o valor no scroll do mouse —
   dá para alterar um estoque sem perceber, só rolando a página. */
/* Tabela de itens da nota: campos dentro das células precisam ocupar a
   largura toda, senão a coluna fica com sobra à direita e o clique no
   espaço vazio não foca o campo. */
.tabela-itens input, .tabela-itens select{
  width:100%; background:var(--fundo); color:var(--texto);
  border:1px solid var(--borda); border-radius:var(--r);
  padding:7px 9px; font-size:13px; font-family:inherit;
}
.tabela-itens input:focus{outline:none; border-color:var(--laranja);}
.tabela-itens input:disabled{opacity:.7; cursor:default;}
.tabela-itens td{vertical-align:middle;}

.nota-total{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--borda);
  font-size:14px; color:var(--texto-sec);
}
.nota-total b{font-size:19px; font-weight:800; color:var(--texto);}

/* Saldo no formulário de edição: parece campo, mas é leitura — a
   quantidade só muda pela contagem ou por nota, nunca digitada aqui. */
.saldo-fixo{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; background:var(--fundo); border:1px solid var(--borda);
  border-radius:var(--r); padding:7px 9px 7px 12px; min-height:40px;
}
.saldo-fixo b{font-weight:800;}

/* Título de bloco dentro de modal: separa grupos de campos sem o peso
   de um cartão aninhado, que empurraria o formulário para fora da tela. */
.sub-secao{
  font-size:11px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--texto-sec);
  padding-top:14px; margin-bottom:12px;
  border-top:1px solid var(--borda);
}

input[type=number]{-moz-appearance:textfield; appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.conta-item svg{
  width:15px; height:15px; stroke:var(--texto-sec); fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none;
}
.conta-item.sair:hover{color:var(--erro);}
.conta-item.sair:hover svg{stroke:var(--erro);}

@media (max-width:600px){
  .conta-nome{display:none;}
  .conta-menu{right:0; min-width:210px;}
}

.pagina{max-width:1180px; margin:0 auto; padding:26px 20px 60px;}

/* ---- cabeçalho de tela ---- */
.cabeca{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; margin-bottom:22px; flex-wrap:wrap;
}
h1{font-size:24px; font-weight:800; letter-spacing:-.3px;}
.sub{color:var(--texto-sec); font-size:13.5px; margin-top:3px;}

/* ---- botões ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--laranja); color:#151515; border:0; border-radius:var(--r);
  padding:10px 18px; font-size:14px; font-weight:700;
}
.btn:hover{background:var(--laranja-claro);}
.btn:disabled{opacity:.55; cursor:default;}
.btn-linha{
  background:transparent; color:var(--texto); border:1px solid var(--borda);
}
.btn-linha:hover{background:var(--cartao-claro); border-color:var(--laranja);}
.btn-mini{
  background:var(--cartao-claro); color:var(--texto);
  border:1px solid var(--borda); border-radius:8px;
  padding:6px 12px; font-size:12.5px; cursor:pointer; font-weight:600;
}
.btn-mini:hover{border-color:var(--laranja); color:var(--laranja);}
/* Ação destrutiva precisa da cor ANTES do clique, não no hover: quem
   passa o mouse já decidiu clicar.
   A regra dupla .btn.btn-perigo é necessária para vencer o fundo laranja
   de .btn — sem ela sobra laranja com texto vermelho, ilegível. */
.btn-perigo{border-color:rgba(248,113,113,.45); color:var(--erro);}
.btn-perigo:hover{
  background:var(--erro-fundo); border-color:var(--erro); color:var(--erro);
}
.btn.btn-perigo{
  background:var(--erro-fundo); border-color:rgba(248,113,113,.5);
  color:var(--erro); font-weight:700;
}
.btn.btn-perigo:hover{
  background:#3a1717; border-color:var(--erro); color:#ffb4b4;
}
.btn.btn-perigo:disabled{opacity:.55;}

/* WhatsApp: a cor da marca identifica o canal de longe, e o botão fica
   distinto dos outros sem virar mais um laranja disputando atenção.
   #25D366 é o verde oficial. */
.btn-whats{
  border-color:rgba(37,211,102,.45); color:#25D366;
}
.btn-whats:hover{
  background:rgba(37,211,102,.12); border-color:#25D366; color:#4ce887;
}
.btn-whats .ic{stroke:currentColor;}

/* ---- ícones ----
   Lucide (lucide.dev), ISC. currentColor faz o ícone seguir a cor do
   texto do botão — inclusive no hover e no .btn-perigo. */
.ic{
  width:16px; height:16px; flex:none;
  vertical-align:-3px; stroke:currentColor;
}
.btn .ic, .btn-linha .ic{margin-right:7px;}
.btn-mini .ic{margin-right:6px;}
.btn-mini{display:inline-flex; align-items:center;}

/* Botão de ação em tabela: no celular sobra o ícone, que é onde a
   largura aperta. O texto continua no HTML para leitor de tela. */
.btn-acao{
  display:inline-flex; align-items:center; justify-content:center;
}
@media (max-width:720px){
  .btn-acao .rotulo{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .btn-acao .ic{margin-right:0;}
  .btn-acao{padding-left:11px; padding-right:11px;}
}

/* ---- campos ---- */
.campo{margin-bottom:14px;}
.campo label{
  display:block; font-size:11.5px; color:var(--texto-sec);
  margin-bottom:5px; font-weight:600; letter-spacing:.3px;
}
.campo input, .campo select, .campo textarea{
  width:100%; background:var(--fundo); color:var(--texto);
  border:1px solid var(--borda); border-radius:var(--r);
  padding:10px 13px; font-size:14px; font-family:inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--laranja);
}
.campo textarea{resize:vertical; min-height:80px;}
.linha-campos{display:grid; gap:0 14px;}
.c2{grid-template-columns:1fr 1fr;}
.c3{grid-template-columns:1fr 1fr 1fr;}
.c4{grid-template-columns:repeat(4,1fr);}

/* ---- cartões e listas ---- */
.cartao{
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-lg); padding:20px;
}
.cartao + .cartao{margin-top:16px;}
.cartao-titulo{
  font-size:11.5px; font-weight:700; color:var(--texto-sec);
  letter-spacing:.8px; text-transform:uppercase; margin-bottom:14px;
}

.tabela{width:100%; border-collapse:collapse;}
.tabela th{
  text-align:left; font-size:11.5px; color:var(--texto-sec);
  font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:0 12px 10px; border-bottom:1px solid var(--borda);
}
.tabela td{padding:13px 12px; border-bottom:1px solid var(--borda);}
.tabela tr:last-child td{border-bottom:0;}
.tabela tbody tr{cursor:pointer;}
.tabela tbody tr:hover{background:var(--cartao-claro);}
.tabela .num{
  font-family:Consolas,monospace; color:var(--laranja); font-weight:700;
}

/* ---- etiquetas de situação ---- */
.selo{
  display:inline-block; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px; letter-spacing:.3px;
  /* sem isto, "Em andamento" quebra em duas linhas e o selo vira
     um bloco desalinhado no meio da tabela */
  white-space:nowrap;
}
.selo.aberta{background:var(--laranja-fundo); color:var(--laranja-claro);}
.selo.andamento{background:var(--alerta-fundo); color:var(--alerta);}
/* Orçamento é proposta, não compromisso: cor neutra, sem o peso visual
   de uma ordem que já está ocupando a oficina. */
.selo.orcamento{
  background:transparent; color:var(--texto-sec);
  border:1px dashed var(--borda);
}
.selo.concluida{background:var(--sucesso-fundo); color:var(--sucesso);}
.selo.cancelada{background:var(--cartao-claro); color:var(--texto-sec);}

/* Estoque: zerado e negativo são coisas diferentes. Zerado é normal, só
   acabou. Negativo é erro de lançamento — saiu peça que nunca entrou — e
   por isso pede a cor mais forte da paleta.
   O texto acompanha a cor de propósito: cerca de 8% dos homens não
   distinguem bem vermelho de verde, e "sem estoque" escrito funciona
   para todo mundo. */
.selo.esgotado{
  background:var(--cartao-claro); color:var(--texto-sec);
  border:1px solid var(--borda);
}
.selo.negativo{background:var(--erro-fundo); color:var(--erro); font-weight:700;}

.placa{
  font-family:Consolas,monospace; font-weight:700; letter-spacing:1px;
}

/* ---- avisos ---- */
.aviso{
  border-radius:var(--r); padding:11px 15px; font-size:13px;
  margin-bottom:16px; display:none; line-height:1.6;
}
.aviso.erro{background:var(--erro-fundo); color:var(--erro);}
.aviso.ok{background:var(--sucesso-fundo); color:var(--sucesso);}
.aviso.info{background:var(--laranja-fundo); color:var(--laranja-claro);}

.vazio{
  text-align:center; color:var(--texto-sec); padding:44px 20px;
  font-size:14px;
}
.carregando{
  text-align:center; color:var(--texto-sec); padding:34px; font-size:13.5px;
}

/* ---- login ---- */
.login-tela{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(255,122,0,.10), transparent 70%),
    var(--fundo);
}
.login-caixa{
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:18px; padding:38px 34px; width:min(400px,100%);
  box-shadow:0 24px 70px rgba(0,0,0,.55); text-align:center;
}
.login-caixa::before{
  content:""; display:block; width:52px; height:3px; border-radius:2px;
  background:var(--laranja); margin:0 auto 22px;
}
/* No login a marca é maior e centralizada, com a barra em cima em vez
   de ao lado — deitada, ela fica desequilibrada num bloco centralizado. */
.login-marca{
  font-size:30px; font-weight:800; letter-spacing:.5px; margin-bottom:5px;
  line-height:1.1;
}
.login-marca b{color:var(--laranja);}
.login-sub{font-size:12.5px; color:var(--texto-sec); margin-bottom:26px;}
.login-caixa .campo{text-align:left;}
.login-rodape{
  font-size:11.5px; color:var(--texto-sec); margin-top:20px;
  padding-top:16px; border-top:1px solid var(--borda); line-height:1.7;
}

/* ---- janela "Sobre" ---- */
.sobre-marca{
  display:flex; align-items:center; justify-content:center; gap:11px;
  margin-bottom:4px;
}
.sobre-barra{
  width:4px; height:30px; border-radius:2px; background:var(--laranja);
}
.sobre-nome{font-size:26px; font-weight:800; letter-spacing:.4px;}
.sobre-nome b{color:var(--laranja);}
.sobre-versao{
  font-size:12px; color:var(--texto-sec); margin-bottom:18px;
}
.sobre-texto{
  font-size:13.5px; color:var(--texto-sec); line-height:1.7;
  margin-bottom:20px;
}
.sobre-ficha{
  background:var(--fundo); border:1px solid var(--borda);
  border-radius:var(--r); padding:4px 14px; margin-bottom:22px;
  text-align:left;
}
.sobre-ficha div{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--borda); font-size:13px;
}
.sobre-ficha div:last-child{border-bottom:0;}
.sobre-ficha span{color:var(--texto-sec);}
.sobre-ficha b{color:var(--texto); text-align:right;}

/* ---- janela ---- */
.modal-fundo{
  position:fixed; inset:0; background:rgba(8,8,10,.86); z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px);
}
.modal{
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-lg); padding:26px 28px;
  width:min(560px,100%); max-height:90vh; overflow-y:auto;
}
.modal h2{font-size:18px; font-weight:800; margin-bottom:4px;}
.modal .sub{margin-bottom:20px;}
.modal-acoes{
  display:flex; gap:10px; justify-content:flex-end; margin-top:20px;
}

/* ---- busca ---- */
.busca{position:relative; min-width:230px;}
.busca input{
  width:100%; background:var(--cartao); color:var(--texto);
  border:1px solid var(--borda); border-radius:var(--r);
  padding:9px 13px; font-size:13.5px; font-family:inherit;
}
.busca input:focus{outline:none; border-color:var(--laranja);}

.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}

/* ---- bloqueio do módulo ---- */
.bloqueio{
  max-width:520px; margin:60px auto; text-align:center;
  background:var(--cartao); border:1px solid var(--laranja);
  border-radius:18px; padding:38px 32px;
}
.bloqueio svg{
  width:44px; height:44px; stroke:var(--laranja); fill:none;
  stroke-width:1.8; margin-bottom:16px;
}
.bloqueio h2{font-size:19px; font-weight:800; margin-bottom:10px;}
.bloqueio p{color:var(--texto-sec); margin-bottom:22px; line-height:1.7;}

@media (max-width:760px){
  .c2,.c3,.c4{grid-template-columns:1fr;}
  .topo-inner{height:auto; padding:12px 16px; flex-wrap:wrap;}
  .topo-nav{order:3; width:100%; overflow-x:auto;}
  .pagina{padding:20px 16px 50px;}
  .esconde-cel{display:none;}
}

/* =====================================================================
   Tela de dados da oficina
   ===================================================================== */
.logo-area{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;}
.logo-caixa{
  width:180px; height:110px; flex:none;
  background:var(--fundo); border:1px dashed var(--borda);
  border-radius:var(--r); display:flex; align-items:center;
  justify-content:center; overflow:hidden; padding:10px;
}
.logo-caixa img{max-width:100%; max-height:100%; object-fit:contain;}
.logo-vazio{color:var(--texto-sec); font-size:12.5px;}
.logo-controles{flex:1; min-width:240px;}

/* =====================================================================
   Via impressa da ordem de serviço

   Escondida na tela; no papel ela é a única coisa que sai. Cores
   próprias, claras: a interface é escura, e imprimir fundo escuro
   gasta tinta e sai ilegível na maioria das impressoras.
   ===================================================================== */
#impressao{display:none;}

@media print{
  /* Some com a interface inteira e mostra só a via. Esconder por
     seletor de tela (em vez de montar outra página) mantém uma fonte
     de verdade: o que está no formulário é o que sai impresso. */
  .topo, .pagina{display:none !important;}

  html, body{
    background:#fff !important; color:#111 !important;
    font-size:11.5pt; line-height:1.45;
  }
  #impressao{display:block; padding:0;}

  @page{margin:14mm 12mm;}

  .via-cabeca{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:20px; padding-bottom:12px; border-bottom:2px solid #111;
  }
  .via-empresa{display:flex; gap:14px; align-items:flex-start;}
  /* Com logo, o nome da oficina sai do cabeçalho: a maioria das logos
     já traz o nome escrito, e repetir fica redundante no papel. Por
     isso a logo cresce um pouco — ela passa a ser a identificação. */
  .via-logo{max-width:190px; max-height:70px; object-fit:contain;}
  .via-nome{font-size:15pt; font-weight:800; line-height:1.2;}
  .via-linha{font-size:9pt; color:#444;}

  .via-os{text-align:right; flex:none;}
  .via-os span{font-size:8pt; letter-spacing:1.2px; color:#444; display:block;}
  .via-os b{font-size:22pt; line-height:1; display:block;}

  .via-fichas{
    display:grid; grid-template-columns:1fr 1fr; gap:0 22px; margin-top:14px;
  }
  .via-ficha h3, .via-bloco h3{
    font-size:8.5pt; letter-spacing:1px; text-transform:uppercase;
    color:#444; margin-bottom:5px; font-weight:700;
  }
  .via-campo{display:flex; gap:8px; font-size:10pt; line-height:1.6;}
  .via-campo span{color:#555; min-width:62px;}
  .via-campo b{font-weight:600;}

  .via-bloco{margin-top:14px;}
  /* break-inside evita que um diagnóstico longo seja cortado no meio
     na virada da folha */
  .via-bloco, .via-ficha, .via-assinaturas{break-inside:avoid;}
  .via-bloco p{font-size:10pt; white-space:pre-wrap;}

  .via-tabela{width:100%; border-collapse:collapse; margin-top:16px;}
  .via-tabela th{
    text-align:left; font-size:8.5pt; letter-spacing:.8px;
    text-transform:uppercase; color:#444; border-bottom:1px solid #111;
    padding:0 6px 5px;
  }
  .via-tabela td{
    padding:6px; font-size:10pt; border-bottom:1px solid #ddd;
  }
  .via-tabela .num{text-align:right; white-space:nowrap;}
  .via-total{
    text-align:right; margin-top:8px; font-size:11pt;
  }
  .via-total b{font-size:13pt;}

  .via-rodape-texto{
    margin-top:18px; padding:9px 11px; border:1px solid #bbb;
    border-radius:4px; font-size:9pt; color:#333; white-space:pre-wrap;
  }

  /* ---- orçamento ----
     Documento de venda: o cliente ainda vai decidir. Peças e serviços
     em blocos separados com subtotal, total em destaque e as condições
     por escrito — é o que ele compara com o da oficina da esquina. */
  .orc-selo span{letter-spacing:.14em;}

  .orc-tabela{margin-top:14px;}
  .orc-tabela thead th{
    background:#f0f0f0; border-bottom:1.5pt solid #333;
    font-size:9.5pt; text-transform:none; letter-spacing:0;
  }
  .orc-tabela thead th:first-child{font-weight:700; font-size:10.5pt;}
  .orc-tabela tfoot td{
    border-top:1pt solid #999; padding-top:5px;
    font-size:10pt; color:#333;
  }

  .orc-total{
    margin-top:16px; border:1.5pt solid #333; border-radius:4px;
    padding:10px 14px; break-inside:avoid;
  }
  .orc-total-linhas{
    display:flex; justify-content:flex-end; gap:26px;
    font-size:10pt; color:#444; margin-bottom:6px;
  }
  .orc-total-linhas span{margin-right:7px;}
  .orc-total-geral{
    display:flex; justify-content:space-between; align-items:baseline;
    border-top:1pt solid #ccc; padding-top:7px;
  }
  .orc-total-geral span{font-size:11pt; font-weight:700;}
  .orc-total-geral b{font-size:17pt;}

  .orc-condicoes{
    margin-top:18px; font-size:9pt; color:#333; break-inside:avoid;
  }
  .orc-condicoes h3{
    font-size:9.5pt; text-transform:uppercase; letter-spacing:.06em;
    color:#555; margin:0 0 6px;
  }
  .orc-condicoes ul{margin:0; padding-left:16px;}
  .orc-condicoes li{margin-bottom:3px; line-height:1.45;}
  .orc-rodape-oficina{
    margin-top:8px; white-space:pre-wrap; color:#444;
  }

  /* Assinatura de APROVAÇÃO, não de recebimento: é o que transforma o
     papel em autorização de serviço. Emoldurado para não passar
     despercebido no meio da página. */
  .orc-aprovacao{
    margin-top:20px; border:1pt solid #333; border-radius:4px;
    padding:12px 14px; break-inside:avoid;
  }
  .orc-aprovacao h3{
    font-size:9.5pt; text-transform:uppercase; letter-spacing:.06em;
    color:#555; margin:0 0 16px;
  }
  .orc-aprovacao-campos{display:flex; gap:32px;}
  .orc-aprovacao-campos div{
    flex:1; font-size:8.5pt; color:#555; text-align:center;
  }
  .orc-aprovacao-campos div:last-child{flex:0 0 150px;}
  .orc-aprovacao-campos span{
    display:block; border-bottom:.75pt solid #333; margin-bottom:4px; height:30px;
  }
  .orc-aprovacao p{
    margin:12px 0 0; font-size:8.5pt; color:#555; line-height:1.45;
  }

  .via-assinaturas{
    display:grid; grid-template-columns:1fr 1fr; gap:34px;
    margin-top:34px; font-size:9pt; text-align:center; color:#333;
  }
  .via-assinaturas span{
    display:block; border-top:1px solid #111; margin-bottom:5px;
  }

  .via-pe{
    margin-top:20px; padding-top:8px; border-top:1px solid #ddd;
    font-size:8pt; color:#666; text-align:center;
  }
}

/* =====================================================================
   Tela de assinatura
   ===================================================================== */
.assin-linha{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:13px 0; border-bottom:1px solid var(--borda);
}
.assin-linha:last-child{border-bottom:0;}

.planos-grade{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.plano{
  background:var(--fundo); border:1px solid var(--borda);
  border-radius:var(--r-lg); padding:20px; display:flex;
  flex-direction:column; gap:10px;
}
/* O plano contratado ganha a borda laranja: o cliente precisa achar
   o dele de relance, sem ler os três. */
.plano-atual{border-color:var(--laranja); background:var(--laranja-fundo);}
.plano-nome{font-weight:700; font-size:15px;}
.plano-preco{font-size:26px; font-weight:800; line-height:1;}
.plano-preco span{font-size:12.5px; font-weight:500; color:var(--texto-sec);}
.plano-desc{font-size:13px; color:var(--texto-sec); flex:1;}
.plano-obs{font-size:12.5px; color:var(--laranja-claro);}
.plano .btn, .plano .btn-linha{width:100%;}

.pix-qr{
  width:200px; height:200px; margin:14px auto 12px; display:block;
  /* fundo branco fixo: o QR vem com transparência e some no tema
     escuro — o cliente aponta a câmera para um quadrado preto */
  background:#fff; padding:8px; border-radius:8px;
}
.pix-codigo{
  font-family:Consolas,monospace; font-size:11px; word-break:break-all;
  background:var(--fundo); border:1px solid var(--borda);
  border-radius:var(--r); padding:10px; margin-bottom:10px;
  max-height:90px; overflow-y:auto; text-align:left; user-select:all;
}

@media (max-width:760px){
  .planos-grade{grid-template-columns:1fr;}
}