/* ─── Design system ─────────────────────────────────────────────── */
/* Tokens do DESIGN.md (raiz do repo). Componente só lê variável: trocar a cor
   aqui troca o app inteiro, e o tema escuro é só redefinir este bloco.
   Nada de color-mix()/oklch()/CSS aninhado: o build do Windows 7 roda no
   Chrome 109 e no Firefox ESR 115. */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('plex-sans.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('plex-mono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  color-scheme: light;
  /* Papel e tinta */
  --papel:          #f0efe8;
  --papel-2:        #e7e5dc;
  --papel-3:        #dedbcf;
  --ficha:          #ffffff;
  --ficha-doc:      #fbfaf6;
  --linha:          #e3e0d5;
  --linha-campo:    #8f8a7a;
  --tinta:          #1f1d18;
  --tinta-2:        #46443b;
  --tinta-3:        #6a675c;
  --tinta-4:        #9c9784;
  /* Laranja: a ação. Texto em cima dele é tinta, nunca branco. */
  --laranja:              #f97316;
  --laranja-hover:        #fb8a3c;
  --laranja-pressionado:  #ea580c;
  --sobre-laranja:        #1f1d18;
  --laranja-tinta:        #b13e0a;
  --laranja-nevoa:        #fdebd9;
  /* Graxa: topo, toast, faixas escuras (iguais nos dois temas) */
  --graxa:          #1f1d18;
  --graxa-2:        #2a2822;
  --sobre-graxa:    #f0efe8;
  --sobre-graxa-2:  #b8b3a2;
  /* Status da OS: tinta / fundo */
  --st-orcamento:          #55534a; --st-orcamento-fundo:       #e7e5dc;
  --st-aprovado:           #1d4ed8; --st-aprovado-fundo:        #dfe9f7;
  --st-em-servico:         #8a5a00; --st-em-servico-fundo:      #fbefd2;
  --st-aguardando-peca:    #6b3fa0; --st-aguardando-peca-fundo: #ece0f3;
  --st-pronto:             #1a6b47; --st-pronto-fundo:          #dbeee2;
  --st-entregue:           #6a675c; --st-entregue-fundo:        #f0efe8;
  /* Semânticas */
  --sucesso:        #1a6b47;
  --sucesso-fundo:  #dbeee2;
  --sucesso-linha:  #a9d3b9;
  --perigo:         #b91c1c;
  --perigo-fundo:   #fbe0dd;
  --perigo-linha:   #f1b3ab;
  --aviso-tinta:    #8a5a00;
  --aviso-fundo:    #fbefd2;
  --aviso-linha:    #ecd08f;
  --info:           #1d4ed8;
  --info-fundo:     #dfe9f7;
  --info-linha:     #b3c9ec;
  --whatsapp:       #15803d;
  --sobre-whatsapp: #ffffff;
  --foco:           #1d4ed8;
  --veu:            rgba(31, 29, 24, .5);
  /* Visor de fotos: sempre escuro, nos dois temas */
  --visor-fundo:    #0f0e0a;
  --visor-tinta:    #ffffff;
  --visor-tinta-2:  #d6d3c6;
  --visor-tinta-3:  #b8b3a2;
  --visor-botao:    rgba(255, 255, 255, .15);
  --visor-contorno: rgba(255, 255, 255, .35);
  --visor-seta:     rgba(15, 14, 10, .55);
  /* Tipografia */
  --fonte:          'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-placa:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --texto-corpo:    16px;
  --texto-apoio:    14px;
  --texto-legenda:  13px;
  --texto-rotulo:   12px;
  --texto-h1:       22px;
  --texto-h2:       18px;
  --texto-valor:    28px;
  /* Forma */
  --raio-xs:        2px;
  --raio-sm:        4px;
  --raio:           6px;
  --raio-lg:        8px;
  --raio-pilula:    999px;
  --alvo:           44px;
  --sombra:         none;
  --sombra-dialogo: 0 1px 2px rgba(31, 29, 24, .08), 0 12px 32px -8px rgba(31, 29, 24, .22);
}
/* Tema escuro: segue o aparelho. Só troca variável; graxa, laranja e as
   cores do visor de fotos ficam iguais. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --papel:          #17160f;
    --papel-2:        #22211b;
    --papel-3:        #2c2a23;
    --ficha:          #1f1d18;
    --ficha-doc:      #1f1d18;
    --linha:          #3a382f;
    --linha-campo:    #6f6a5a;
    --tinta:          #ece9de;
    --tinta-2:        #c9c4b3;
    --tinta-3:        #a8a392;
    --tinta-4:        #6f6a5a;
    --laranja-tinta:  #fdba74;
    --laranja-nevoa:  #3a2a1c;
    --graxa:          #0f0e0a;
    --graxa-2:        #22211b;
    --st-orcamento:          #c9c4b3; --st-orcamento-fundo:       #2c2a23;
    --st-aprovado:           #9cbcf5; --st-aprovado-fundo:        #1a2740;
    --st-em-servico:         #f1c56b; --st-em-servico-fundo:      #352a12;
    --st-aguardando-peca:    #cfb0f0; --st-aguardando-peca-fundo: #2e2240;
    --st-pronto:             #8fd1ad; --st-pronto-fundo:          #16301f;
    --st-entregue:           #a8a392; --st-entregue-fundo:        #22211b;
    --sucesso:        #8fd1ad;
    --sucesso-fundo:  #16301f;
    --sucesso-linha:  #2b5a3f;
    --perigo:         #f5a39a;
    --perigo-fundo:   #3a1a17;
    --perigo-linha:   #6b2d27;
    --aviso-tinta:    #f1c56b;
    --aviso-fundo:    #352a12;
    --aviso-linha:    #65511f;
    --info:           #9cbcf5;
    --info-fundo:     #1a2740;
    --info-linha:     #2f4772;
    --foco:           #9cbcf5;
    --veu:            rgba(0, 0, 0, .6);
  }
}
/* Trava a largura na tela do aparelho. No atalho do celular (modo app) não há
   barra do navegador, então um estouro de largura deixava a tela deslizando
   para o lado sem jeito de voltar ao lugar. Fica no html (e não no body) para
   não quebrar o topo grudado — position: sticky. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--fonte);
  font-size: var(--texto-corpo);
  line-height: 1.45;
  background: var(--papel);
  color: var(--tinta);
  padding-bottom: 76px;
}
svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ─── Topo escuro: identidade da oficina ────────────────────────── */
.topo {
  background: var(--graxa);
  padding: 0 16px;
  height: 54px;
  display: flex; align-items: center;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 3px solid var(--laranja);
}
.marca { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--sobre-graxa); }
.marca svg {
  width: 30px; height: 30px; padding: 6px;
  color: var(--sobre-laranja); background: var(--laranja);
  border-radius: var(--raio); box-sizing: border-box;
}

/* Suporte: sempre à mão no topo; o ponto laranja avisa que houve erro recente */
.topo-suporte {
  margin-left: auto; position: relative;
  display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px;
  background: transparent; color: var(--sobre-graxa);
  border: 1px solid var(--sobre-graxa-2); border-radius: var(--raio);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.topo-suporte svg { width: 17px; height: 17px; }
.topo-suporte:hover { border-color: var(--sobre-graxa); }
.topo-suporte.com-erro::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--laranja); border: 2px solid var(--graxa);
}

main { padding: 16px; max-width: 860px; margin: 0 auto; }

/* ─── Navegação inferior ────────────────────────────────────────── */
.abas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex;
  background: var(--ficha);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}
.abas button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 7px;
  border: none; background: none; cursor: pointer;
  font-size: 11px; font-weight: 500; font-family: inherit;
  color: var(--tinta-3);
}
.abas button svg { width: 22px; height: 22px; }
/* Ativa: texto em laranja-tinta e um friso laranja no topo do botão */
.abas button { position: relative; }
.abas button.ativa { color: var(--laranja-tinta); font-weight: 600; }
.abas button.ativa::before { content: ''; position: absolute; left: 20%; right: 20%; top: 0; height: 3px; background: var(--laranja); }

/* ─── Cabeçalho de seção ────────────────────────────────────────── */
.secao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
  flex-wrap: wrap; /* só age quando os botões de ação não cabem ao lado do título */
}
.secao h1 { font-size: var(--texto-h1); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.secao .sub { color: var(--tinta-2); font-size: var(--texto-apoio); margin-top: 2px; }

h2 { font-size: var(--texto-corpo); font-weight: 600; color: var(--tinta); letter-spacing: -.005em; margin: 24px 0 10px; }

/* ─── Botões ────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--laranja); color: var(--sobre-laranja);
  border: none; border-radius: var(--raio);
  min-height: var(--alvo); padding: 10px 18px;
  font-size: 15px; font-weight: 700; font-family: inherit; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background .12s;
}
.botao:hover { background: var(--laranja-hover); }
.botao:active { background: var(--laranja-pressionado); }
.botao svg { width: 17px; height: 17px; }
.botao.claro { background: var(--papel-2); color: var(--tinta); border: 1px solid var(--linha-campo); }
.botao.claro:hover { background: var(--papel-3); }
.botao.perigo { background: var(--ficha); color: var(--perigo); border: 1px solid var(--linha); }
.botao.perigo:hover { background: var(--perigo-fundo); border-color: var(--perigo-linha); }
.botao.largo { width: 100%; }
.botao.pequeno { padding: 8px 14px; font-size: 14px; }
/* WhatsApp: verde escuro (contraste ~5:1 com o branco, como .etapa.feita) no
   lugar do #25d366 antigo, que sumia o texto branco. */
.botao.zap { background: var(--whatsapp); color: var(--sobre-whatsapp); }
.botao.zap:hover, .botao.zap:active { background: var(--whatsapp); filter: brightness(1.08); }

.voltar {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--tinta-2); font-size: 14px; font-weight: 500;
  padding: 0; margin-bottom: 14px;
}
.voltar:hover { color: var(--tinta); }
.voltar svg { width: 17px; height: 17px; }

/* ─── Cards de lista ────────────────────────────────────────────── */
.cartao {
  display: flex; align-items: center; gap: 12px;
  background: var(--ficha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 13px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: border-color .12s;
}
.cartao:hover { border-color: var(--linha-campo); }
.cartao.estatico { cursor: default; }
.cartao .meio { flex: 1; min-width: 0; }
.cartao .titulo { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cartao .detalhe { color: var(--tinta-2); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Na lista de OS o nome do cliente quebra em vez de sumir no "..." */
.cartao .detalhe.quebra { white-space: normal; }
.cartao .fim { text-align: right; }
.cartao .fim .valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao .fim .apoio { color: var(--tinta-3); font-size: 12px; margin-top: 2px; }
.cartao > svg.seta { color: var(--tinta-3); width: 17px; height: 17px; }

/* Card de retorno em coluna: dados em cima, WhatsApp + "Avisado" embaixo,
   dividindo a linha. Ocupa menos altura que a versão em linha. */
.cartao.retorno { flex-direction: column; align-items: stretch; gap: 8px; }
.acoes-retorno { display: flex; gap: 8px; }
.acoes-retorno .botao { flex: 1; }

.placa {
  font-family: var(--fonte-placa);
  font-size: 13px; font-weight: 600; line-height: 1.5;
  background: var(--ficha); color: var(--tinta);
  border: 1px solid var(--tinta);
  border-radius: var(--raio-xs); padding: 0 6px;
  white-space: nowrap;
}

/* ─── Etiquetas de status (ponto colorido + fundo tintado) ──────── */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--raio-pilula);
  white-space: nowrap;
}
.etiqueta::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-orcamento       { color: var(--st-orcamento); background: var(--st-orcamento-fundo); }
.st-aprovado        { color: var(--st-aprovado); background: var(--st-aprovado-fundo); }
.st-em_servico      { color: var(--st-em-servico); background: var(--st-em-servico-fundo); }
.st-aguardando_peca { color: var(--st-aguardando-peca); background: var(--st-aguardando-peca-fundo); }
.st-pronto          { color: var(--st-pronto); background: var(--st-pronto-fundo); }
.st-entregue        { color: var(--st-entregue); background: var(--st-entregue-fundo); }

/* ─── Quadro da Oficina ─────────────────────────────────────────── */
/* Cada etapa: um rótulo com o ponto da cor do status e uma fila — uma ficha
   só, com as OS divididas por linha (não um card solto por carro). */
.grupo-status { margin-top: 20px; }
.grupo-status h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--texto-apoio); font-weight: 600; color: var(--tinta);
  margin: 0 0 8px; min-height: 24px;
}
.grupo-status h3::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tinta-4);
}
.grupo-status[data-grupo="orcamento"] h3::before       { background: var(--st-orcamento); }
.grupo-status[data-grupo="aprovado"] h3::before        { background: var(--st-aprovado); }
.grupo-status[data-grupo="em_servico"] h3::before      { background: var(--st-em-servico); }
.grupo-status[data-grupo="aguardando_peca"] h3::before { background: var(--st-aguardando-peca); }
.grupo-status[data-grupo="pronto"] h3::before          { background: var(--st-pronto); }
.grupo-status[data-grupo="retornos"] h3::before        { background: var(--whatsapp); }
.grupo-status[data-grupo="agendados"] h3::before       { background: var(--info); }
.grupo-status h3 .contagem { color: var(--tinta-3); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Cabeçalho de "Últimos entregues", que abre/fecha o histórico num toque */
.grupo-status h3.alternavel { cursor: pointer; }
.alterna { color: var(--tinta-3); font-size: 12px; }

.fila {
  background: var(--ficha);
  border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
.linha-os {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 14px;
  cursor: pointer;
  transition: background .12s;
}
.linha-os + .linha-os { border-top: 1px solid var(--linha); }
.linha-os:hover { background: var(--papel-2); }
.linha-os .placa { flex: none; font-size: 13px; }
.linha-os .meio { flex: 1; min-width: 0; }
.linha-os .modelo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-os .detalhe { color: var(--tinta-2); font-size: var(--texto-apoio); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-os .fim { text-align: right; flex: none; }
.linha-os .fim .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-os .fim .apoio { margin-top: 3px; }
.linha-os > svg.seta { color: var(--tinta-3); width: 17px; height: 17px; flex: none; }
/* Retorno: dados em cima; WhatsApp e "Avisado" dividindo a linha embaixo */
.linha-os.retorno { flex-direction: column; align-items: stretch; gap: 10px; }
.linha-os.retorno .meio { width: 100%; }
@media (min-width: 700px) {
  .acoes-retorno .botao { flex: 0 1 200px; }
}
/* No celular estreito a placa sobe para a linha do modelo: o nome do carro
   não pode virar reticência antes do resto */
@media (max-width: 420px) {
  #of-lista .linha-os:not(.retorno) { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "placa modelo valor seta" "detalhe detalhe detalhe seta"; column-gap: 10px; row-gap: 2px; }
  #of-lista .linha-os:not(.retorno) .placa { grid-area: placa; align-self: center; }
  #of-lista .linha-os:not(.retorno) .meio { display: contents; }
  #of-lista .linha-os:not(.retorno) .modelo { grid-area: modelo; align-self: center; white-space: normal; line-height: 1.25; }
  #of-lista .linha-os:not(.retorno) .detalhe { grid-area: detalhe; }
  #of-lista .linha-os:not(.retorno) .fim { grid-area: valor; }
  #of-lista .linha-os:not(.retorno) > svg.seta { grid-area: seta; align-self: center; }
}

/* Computador largo: o quadro vira colunas, uma por etapa, como o quadro
   branco da oficina. Precisa de :has() para alargar o main só nesta tela; o
   Firefox do Windows 7 (ESR 115) não tem, e fica com a lista empilhada. */
@supports selector(main:has(> div)) {
  @media (min-width: 1100px) {
    main:has(> #of-lista) { max-width: 1400px; padding-left: 24px; padding-right: 24px; }
    /* Os avisos do topo acompanham a largura do quadro */
    body:has(main > #of-lista) .banner-atualizacao { max-width: 1352px; }
    main:has(> #of-lista) .chips-oficina { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
    .quadro-colunas {
      display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
      gap: 12px; align-items: start;
    }
    .quadro-colunas .grupo-status { margin-top: 12px; }
    .quadro-colunas .linha-os {
      display: grid; grid-template-columns: auto 1fr; grid-template-areas: "placa valor" "modelo modelo" "detalhe detalhe";
      row-gap: 4px; column-gap: 12px; align-items: center;
    }
    .quadro-colunas .linha-os .meio { display: contents; }
    .quadro-colunas .linha-os .placa { grid-area: placa; justify-self: start; font-size: 12px; padding: 0 4px; }
    .quadro-colunas .linha-os .modelo { grid-area: modelo; margin-top: 4px; }
    .quadro-colunas .linha-os .detalhe { grid-area: detalhe; }
    .quadro-colunas .linha-os .fim { grid-area: valor; min-width: 0; justify-self: end; }
    /* Coluna estreita: data do agendamento e nome do cliente quebram linha
       em vez de vazar ou virar reticência */
    .quadro-colunas .linha-os .fim .valor { white-space: normal; }
    .quadro-colunas .linha-os .detalhe { white-space: normal; }
    .quadro-colunas .linha-os > svg.seta { display: none; }
  }
}

/* ─── Formulários ───────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 500; color: var(--tinta-2); margin-bottom: 5px; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio);
  font-size: 16px; font-family: inherit; color: var(--tinta); /* 16px: abaixo disso o iPhone dá zoom no campo */
  background: var(--ficha);
  margin-bottom: 14px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--foco);
  box-shadow: 0 0 0 1px var(--foco);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a675c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}

.busca { position: relative; margin-bottom: 12px; }
.busca svg {
  position: absolute; left: 12px; top: 12px;
  width: 18px; height: 18px; color: var(--tinta-3);
  pointer-events: none;
}
.busca input { padding-left: 40px; margin-bottom: 0; }

/* No celular as duas colunas passam a empilhar em vez de espremer: sem isto o
   bloco "Lembrete de retorno" (data + os três botões de prazo) estourava a
   largura da tela em 25px e a página inteira arrastava para o lado. */
.duas-colunas { display: flex; flex-wrap: wrap; gap: 12px; }
.duas-colunas > div { flex: 1 1 200px; min-width: 0; }

/* ─── Itens da OS ───────────────────────────────────────────────── */
.item-os {
  display: flex; align-items: center; gap: 10px;
  background: var(--ficha);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; margin-bottom: 6px;
}
.item-os .desc { flex: 1; min-width: 0; }
.item-os .desc .nome { font-weight: 500; font-size: 14px; }
.item-os .desc .apoio { color: var(--tinta-2); font-size: 12px; }
.item-os .valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
.item-os .remover {
  background: none; border: none; cursor: pointer;
  color: var(--tinta-3); padding: 6px; border-radius: var(--raio); display: flex;
}
.item-os .remover:hover { color: var(--perigo); background: var(--perigo-fundo); }
.item-os .remover svg { width: 16px; height: 16px; }

.totais-os {
  background: var(--ficha);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 16px; margin-top: 12px;
}
.totais-os .linha { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; color: var(--tinta-2); font-size: 14px; }
.totais-os .linha input { width: 110px; margin: 0; text-align: right; padding: 6px 10px; font-size: 16px; }
.totais-os .total {
  display: flex; justify-content: space-between;
  font-weight: 700; font-size: 17px; color: var(--tinta);
  border-top: 1px solid var(--linha); margin-top: 8px; padding-top: 10px;
  font-variant-numeric: tabular-nums;
}

/* ─── Trilha de etapas da OS ────────────────────────────────────── */
.etapas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-bottom: 10px;
}
.etapa {
  display: inline-flex; align-items: center;
  gap: 5px; min-height: 36px; padding: 5px 12px;
  border-radius: var(--raio-pilula); border: 1px solid var(--linha);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  background: var(--ficha); color: var(--tinta-3);
  cursor: pointer; white-space: nowrap;
}
.etapa.feita { color: var(--sucesso); background: var(--sucesso-fundo); border-color: var(--sucesso-linha); }
.etapa.atual { border: 2px solid currentColor; cursor: default; font-weight: 700; }
.etapa.futura:hover { border-color: var(--laranja); color: var(--laranja-tinta); }
.etapa-seta { color: var(--tinta-3); font-size: 13px; user-select: none; }
.etapa svg { width: 14px; height: 14px; }
.etapa-encerrada {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; padding: 10px;
  color: var(--sucesso); font-weight: 600; font-size: 14px;
  background: var(--sucesso-fundo); border: 1px solid var(--sucesso-linha); border-radius: var(--raio);
}

/* ─── Checklist de entrada ──────────────────────────────────────── */
.check-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
  color: var(--tinta-2); font-size: 13px; font-weight: 500;
}
.check-item {
  background: var(--ficha);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; margin-bottom: 6px;
}
.check-item .check-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.check-item .check-nome { font-weight: 500; font-size: 14px; }
.check-item .check-camera {
  background: none; border: none; cursor: pointer;
  color: var(--tinta-3); padding: 6px; border-radius: var(--raio); display: flex;
}
.check-item .check-camera:hover { color: var(--laranja-tinta); background: var(--papel-2); }
.check-item .check-camera svg { width: 18px; height: 18px; }
.segmentado { display: flex; gap: 6px; }
.segmentado button {
  flex: 1; min-height: 40px;
  background: var(--papel-2); color: var(--tinta-2);
  border: 1px solid var(--linha); border-radius: var(--raio);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.segmentado button.ativo.ok       { color: var(--sucesso); background: var(--sucesso-fundo); border-color: var(--sucesso-linha); }
.segmentado button.ativo.atencao  { color: var(--aviso-tinta); background: var(--aviso-fundo); border-color: var(--aviso-linha); }
.segmentado button.ativo.problema { color: var(--perigo); background: var(--perigo-fundo); border-color: var(--perigo-linha); }
.check-item .check-obs { margin: 8px 0 0; padding: 8px 10px; font-size: 14px; }
.check-item .check-fotos {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.check-item .check-fotos .foto { width: 56px; height: 56px; aspect-ratio: auto; border-radius: var(--raio); }
.check-item .check-fotos .foto button { top: 2px; right: 2px; padding: 3px; }
.check-item .check-fotos .foto button svg { width: 10px; height: 10px; }
.check-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--tinta); font-weight: 500;
  background: var(--ficha);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; margin-top: 8px; cursor: pointer;
}
.check-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--laranja); }
.check-dica { color: var(--tinta-3); font-size: 12px; margin-top: 6px; }

/* ─── Modal ─────────────────────────────────────────────────────── */
.modal-fundo {
  position: fixed; inset: 0; z-index: 20;
  background: var(--veu);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--ficha);
  width: 100%; max-width: 480px;
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  padding: 20px;
  max-height: 88vh; overflow-y: auto;
  animation: subir .18s ease-out;
}
@keyframes subir { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-titulo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.modal-titulo h2 { font-size: 17px; font-weight: 700; color: var(--tinta); text-transform: none; letter-spacing: -.01em; margin: 0; }
.modal-titulo .fechar {
  background: var(--papel-2); border: none; cursor: pointer;
  color: var(--tinta-2); border-radius: var(--raio-pilula); padding: 7px; display: flex;
}
.modal-titulo .fechar svg { width: 16px; height: 16px; }
.escondido { display: none !important; }

.sugestoes {
  border: 1px solid var(--linha); border-radius: var(--raio);
  margin: 8px 0 14px; background: var(--ficha);
  max-height: 220px; overflow-y: auto;
  box-shadow: var(--sombra-dialogo);
}
.sugestoes div { padding: 11px 14px; border-bottom: 1px solid var(--papel-2); cursor: pointer; font-size: 14px; }
.sugestoes div:last-child { border-bottom: none; }
.sugestoes div:hover { background: var(--papel-2); }
.sugestoes .nada { color: var(--tinta-2); cursor: default; }

.separador { display: flex; align-items: center; gap: 10px; color: var(--tinta-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 14px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--linha); }

/* ─── Fotos da OS ───────────────────────────────────────────────── */
.fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--ficha);
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto button {
  position: absolute; top: 4px; right: 4px;
  background: var(--visor-seta); color: var(--visor-tinta);
  border: none; border-radius: var(--raio-pilula); padding: 4px;
  cursor: pointer; display: flex;
}
.foto button svg { width: 12px; height: 12px; }
.foto.adicionar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--linha); color: var(--tinta-2);
  font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.foto.adicionar:hover { border-color: var(--laranja); color: var(--laranja-tinta); }
.foto.adicionar svg { width: 20px; height: 20px; }

/* ─── Visor de fotos (tela cheia, com zoom) ─────────────────────── */
.visor {
  position: fixed; inset: 0; z-index: 30;
  background: var(--visor-fundo); /* opaco: a tela de trás não atrapalha a leitura da foto */
  display: flex; flex-direction: column;
}
.visor-topo {
  display: flex; align-items: flex-start; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  color: var(--visor-tinta);
}
.visor-info { flex: 1; min-width: 0; }
.visor-info .titulo { font-size: 15px; font-weight: 600; }
/* Data/hora do registro: é o que dá à foto valor de vistoria de entrada */
.visor-info .quando { font-size: 12.5px; color: var(--visor-tinta-2); margin-top: 2px; }
.visor-fechar {
  background: var(--visor-botao); color: var(--visor-tinta);
  border: none; border-radius: var(--raio-pilula); padding: 9px;
  display: flex; cursor: pointer; flex-shrink: 0;
}
/* touch-action: none entrega os dois dedos para o nosso zoom, em vez de o
   navegador tentar dar zoom na página inteira por baixo do visor */
.visor-palco {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.visor-palco img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
/* Setas nos cantos: longe do × lá em cima e dos botões de zoom lá embaixo, o
   polegar não troca de foto sem querer */
.visor-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: var(--raio-pilula);
  /* Fundo escuro (e não claro): a seta fica legível tanto sobre foto clara
     quanto sobre foto escura, já que ela cai por cima da imagem */
  /* O contorno claro segura a leitura quando a seta cai no fundo preto do
     visor; o miolo escuro segura quando ela cai por cima de foto clara */
  border: 1px solid var(--visor-contorno); background: var(--visor-seta); color: var(--visor-tinta);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 6px var(--visor-seta);
}
.visor-seta.esquerda { left: 10px; }
.visor-seta.direita { right: 10px; }
/* Foto ampliada: o dedo na lateral é para arrastar a foto, não para trocar */
.visor.com-zoom .visor-seta { display: none; }
.visor-contagem { font-size: 12.5px; color: var(--visor-tinta-2); padding-top: 2px; white-space: nowrap; }

.visor-zoom {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  color: var(--visor-tinta);
}
.visor-zoom button {
  width: 46px; height: 46px; border-radius: var(--raio-pilula);
  border: none; background: var(--visor-botao); color: var(--visor-tinta);
  font-size: 24px; font-family: inherit; line-height: 1; cursor: pointer;
}
.visor-zoom .nivel { font-size: 13px; min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; color: var(--visor-tinta-2); }
.visor-dica { text-align: center; font-size: 12px; color: var(--visor-tinta-3); padding: 0 14px 6px; }
/* No computador o zoom é pelos botões — a dica de dedos só serve no toque */
@media (hover: hover) and (pointer: fine) { .visor-dica { display: none; } }
/* Enquanto o visor está aberto a página de trás não rola junto */
body.sem-rolagem { overflow: hidden; }

/* ─── Financeiro ────────────────────────────────────────────────── */
/* ─── Envio de vários orçamentos ────────────────────────────────── */
/* Espaço para a lista não terminar embaixo da barra fixa de ações */
.tela-envio { padding-bottom: 120px; }

.acoes-cabecalho { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Quadro da Oficina cortado no teto: diz o que ficou de fora em vez de sumir */
.aviso-corte {
  background: var(--papel-2); border: 1px dashed var(--linha); color: var(--tinta-2);
  border-radius: var(--raio); padding: 10px 14px; margin: 16px 0 12px;
  font-size: 13px; line-height: 1.4;
}

.aviso-envio {
  background: var(--perigo-fundo); border: 1px solid var(--perigo-linha); color: var(--perigo);
  border-radius: var(--raio); padding: 10px 14px; margin-bottom: 12px;
  font-size: 13px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chips button {
  min-height: var(--alvo); padding: 8px 14px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); background: var(--ficha);
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--tinta-2);
  cursor: pointer; white-space: nowrap;
}
.chips button:hover { border-color: var(--linha-campo); }
.chips button.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 600; }

/* Chips de visão rápida da Oficina: uma linha só, rolagem lateral, grudados sob
   o topo (54px). Diferente dos .chips da aba Ordens: aqui é atalho de visão. */
.chips-oficina {
  position: sticky; top: 54px; z-index: 5;      /* abaixo do .topo (10) e das .abas do desktop (11) */
  display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
  margin: 0 -16px 4px; padding: 8px 16px;       /* sangra o padding do main para grudar de borda a borda */
  background: var(--papel);                        /* cor do body: cobre os cards ao rolar por baixo */
  scrollbar-width: none;
}
.chips-oficina::-webkit-scrollbar { display: none; }
.chips-oficina button {
  min-height: var(--alvo); padding: 8px 14px;   /* alvo de toque de 44px (só aqui; a aba Ordens fica intacta) */
  border-radius: var(--raio-sm); border: 1px solid var(--linha);
  background: var(--ficha); color: var(--tinta-2);
  font: inherit; font-size: 13px; font-weight: 500;
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
}
.chips-oficina button.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 600; }

.linha-selecao { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.linha-selecao span { flex: 1; min-width: 0; font-size: 13px; color: var(--tinta-2); }

/* O cartão inteiro é <label>: clicar em qualquer lugar marca (alvo grande) */
.cartao.selecionavel { font-size: 15px; font-weight: 400; color: var(--tinta); }
.cartao.selecionavel input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin: 0;
  accent-color: var(--laranja); cursor: pointer;
}
.cartao.selecionavel.marcado { border-color: var(--laranja); background: var(--laranja-nevoa); }

/* Selo de "já passei este orçamento para o cliente" */
.tag-enviado {
  font-size: 11px; font-weight: 600;
  color: var(--info); background: var(--info-fundo); border: 1px solid var(--info-linha);
  border-radius: var(--raio-pilula); padding: 1px 8px;
}
.linha-enviado {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--ficha); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 10px 14px; margin-top: 16px;
  box-shadow: var(--sombra);
  font-size: 13px; color: var(--tinta-2);
}
.linha-enviado span { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.linha-enviado svg { width: 16px; height: 16px; color: var(--tinta-3); }
.linha-enviado b { color: var(--tinta); }

/* Barra fixa com o total do que está marcado. Fica ATRÁS das abas (z-index
   menor): o excesso de padding embaixo some sob elas, sem fresta nem sobreposição. */
.barra-envio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  background: var(--ficha);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -1px 0 var(--linha);
  padding: 10px 16px calc(61px + env(safe-area-inset-bottom));
}
.barra-envio-caixa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 860px; margin: 0 auto;
}
.barra-envio .resumo { flex: 1; min-width: 130px; }
.barra-envio .resumo .contagem { font-size: 13px; color: var(--tinta-2); }
.barra-envio .resumo .valor { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.barra-envio .resumo .pergunta { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--tinta); }
.barra-envio .acoes { display: flex; gap: 8px; flex: 1; min-width: 210px; }
.barra-envio .acoes .botao { flex: 1; }

.botao:disabled { opacity: .45; cursor: default; filter: none; }
.botao:disabled:hover { background: var(--laranja); }

/* ─── Banner de atualização disponível ──────────────────────────── */
.banner-atualizacao {
  display: flex; align-items: center; gap: 10px;
  background: var(--info-fundo); border: 1px solid var(--info-linha); color: var(--info);
  border-radius: var(--raio); padding: 10px 14px;
  margin: 14px 16px 0; max-width: 828px;
  font-size: 14px; font-weight: 500;
}
.banner-atualizacao a { color: var(--info); font-weight: 700; }
.banner-atualizacao button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--info); display: flex; padding: 4px;
}
@media (min-width: 860px) { .banner-atualizacao { margin-left: auto; margin-right: auto; } }

/* Variantes do banner para a licença: aviso (vencendo) e bloqueio (modo consulta) */
.banner-atualizacao.alerta { background: var(--aviso-fundo); border-color: var(--aviso-linha); color: var(--aviso-tinta); }
.banner-atualizacao.alerta a, .banner-atualizacao.alerta button { color: var(--aviso-tinta); }
.banner-atualizacao.bloqueio { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--perigo); }
.banner-atualizacao.bloqueio a, .banner-atualizacao.bloqueio button { color: var(--perigo); }

/* ─── Estados vazios e feedback ─────────────────────────────────── */
.vazio {
  text-align: center; padding: 36px 20px;
  color: var(--tinta-2);
  background: var(--ficha);
  border: 1px dashed var(--linha); border-radius: var(--raio);
  margin-bottom: 8px;
}
.vazio svg { width: 34px; height: 34px; color: var(--tinta-3); margin-bottom: 8px; }
.vazio .principal { font-weight: 600; color: var(--tinta); font-size: 14px; }
.vazio .apoio { font-size: 13px; margin-top: 3px; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(16px);
  background: var(--graxa); color: var(--sobre-graxa);
  padding: 10px 18px; border-radius: var(--raio-pilula);
  font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 30; white-space: nowrap;
}
.toast.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }

.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.acoes-linha .botao { flex: 1; }

/* ─── Crédito do desenvolvedor ──────────────────────────────────── */
.credito {
  text-align: center;
  font-size: 11.5px;
  color: var(--tinta-3);
  padding: 8px 16px 16px;
  max-width: 860px; margin: 0 auto;
}
.credito a { color: var(--tinta-2); }

/* ─── Desktop: navegação vira menu no próprio topo escuro ───────── */
@media (min-width: 700px) {
  body { padding-bottom: 24px; }
  .abas {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    height: 54px;
    background: transparent; border: none;
    justify-content: center; align-items: center; gap: 6px;
    pointer-events: none;
    z-index: 11;
  }
  .abas button {
    pointer-events: auto;
    flex: none; flex-direction: row; gap: 8px;
    align-self: stretch; padding: 0 16px; font-size: 15px; font-weight: 500;
    border-radius: 0;
    color: var(--sobre-graxa-2);
    transition: background .12s, color .12s;
  }
  .abas button:hover { background: var(--graxa-2); color: var(--sobre-graxa); }
  .abas button svg { width: 18px; height: 18px; }
  /* Ativa: mais clara que o topo e com o friso laranja engrossando embaixo dela */
  .abas button.ativa { background: var(--graxa-2); color: var(--sobre-graxa); font-weight: 600; }
  .abas button.ativa::before { left: 0; right: 0; top: auto; bottom: 0; height: 6px; }
  .modal-fundo { align-items: center; padding: 20px; }
  .modal { border-radius: var(--raio-lg); }
  .toast { bottom: 32px; }
  .barra-envio { padding-bottom: 12px; }
  .tela-envio { padding-bottom: 96px; }
}

/* Em larguras intermediárias o menu central pode encostar na marca: esconde os ícones */
@media (min-width: 700px) and (max-width: 860px) {
  .abas button svg { display: none; }
}

/* ─── Tela da OS ────────────────────────────────────────────────── */
/* Cada assunto numa ficha (.bloco) com título em caixa normal. No celular é
   uma coluna só, na ordem do trabalho; no computador largo a coluna da direita
   junta documento, carro, fotos e notas. */
.bloco {
  background: var(--ficha);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px;
}
.bloco > h2, .bloco-topo h2 { margin: 0 0 12px; }
.bloco h2 label { display: inline; font: inherit; color: inherit; margin: 0; }
.bloco > :last-child { margin-bottom: 0; }
.bloco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bloco-topo .contagem { color: var(--tinta-3); font-size: var(--texto-apoio); font-variant-numeric: tabular-nums; }
/* A fila encosta nas bordas da ficha: uma moldura só, não caixa dentro de caixa */
.bloco .fila { margin: 0 -16px 12px; border-left: 0; border-right: 0; border-radius: 0; }
.bloco .acoes-linha { margin-top: 12px; }
.bloco .acoes-linha .botao { flex: 1 1 auto; }

.os-topo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.os-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.os-titulo h1 { font-size: var(--texto-h1); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.os-titulo .placa { font-size: 14px; }
.os-id .sub { color: var(--tinta-2); font-size: var(--texto-apoio); margin-top: 4px; }
.os-total { text-align: right; margin-left: auto; }
.os-total .rotulo { color: var(--tinta-3); font-size: var(--texto-legenda); }
.os-total .valor {
  font-size: var(--texto-valor); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .os-total { text-align: left; margin-left: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .os-total .rotulo { width: 100%; }
}
.pag-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--texto-apoio); font-weight: 600; margin-top: 2px; }
.pag-status svg { width: 15px; height: 15px; }
.pag-status.ok { color: var(--sucesso); }
.pag-status.parcial { color: var(--aviso-tinta); }
.pag-status.nada { color: var(--tinta-2); }
.pag-status.grande { display: flex; font-size: var(--texto-corpo); margin: 0 0 12px; }

.os-etapa { margin-bottom: 12px; }
.os-etapa .etapas { margin-bottom: 12px; }
.etapa-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.etapa-acoes .botao { flex: 1 1 260px; }

/* Itens e pagamentos dentro de uma fila: linhas divididas, sem card por item */
.fila .item-os { border: 0; border-radius: 0; margin: 0; padding: 10px 8px 10px 14px; min-height: 56px; background: none; }
.fila .item-os + .item-os { border-top: 1px solid var(--linha); }
.fila .item-os:hover { background: var(--papel-2); }
.item-os .desc .nome { font-size: var(--texto-corpo); }
.item-os .desc .apoio { font-size: var(--texto-legenda); }
.item-os .valor { font-size: var(--texto-corpo); }
.item-os .remover, .linha-hist .remover {
  width: 40px; height: 40px; padding: 0; justify-content: center; align-items: center;
  background: none; border: none; cursor: pointer; color: var(--tinta-3); border-radius: var(--raio); display: flex;
}
.linha-hist .remover:hover { color: var(--perigo); background: var(--perigo-fundo); }
.bloco .totais-os { border: 0; border-radius: 0; padding: 12px 0 0; margin-top: 12px; background: none; }
.totais-os .linha label { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.totais-os .linha input { width: 120px; height: 40px; }
.totais-os .total { font-size: 18px; }
.linha-hist {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 4px 4px 14px; min-height: 48px; font-size: var(--texto-apoio);
}
.linha-hist + .linha-hist { border-top: 1px solid var(--linha); }
.linha-hist-fim { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }

/* Checklist: cada item numa linha da fila; no celular o segmentado desce */
.check-restantes { margin-bottom: 12px; }
.fila .check-item { border: 0; border-radius: 0; margin: 0; padding: 12px 14px; background: none; }
.fila .check-item + .check-item { border-top: 1px solid var(--linha); }
.check-item .check-nome { font-size: var(--texto-corpo); }
.check-item .check-camera { width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; }
.segmentado button { min-height: var(--alvo); font-size: var(--texto-apoio); }
@media (min-width: 640px) {
  .fila .check-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 16px; align-items: center; }
  .check-item .check-topo { margin-bottom: 0; }
  .check-item .check-obs, .check-item .check-fotos { grid-column: 1 / -1; }
}

.bloco .linha-enviado { border: 0; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--linha); border-radius: 0; background: none; }
.km-aviso { white-space: normal; margin: -8px 0 14px; color: var(--tinta-2); font-size: var(--texto-legenda); }
.km-aviso:empty { display: none; }
.prazos .botao { flex: 1 1 0; }
.os-excluir { display: flex; }

.os-grade { display: flex; flex-direction: column; gap: 12px; }
.os-principal, .os-lateral { display: contents; }
.os-itens     { order: 1; }
.os-cliente   { order: 2; }
.os-pagamento { order: 3; }
.os-veiculo   { order: 4; }
.os-checklist { order: 5; }
.os-retorno   { order: 6; }
.os-fotos     { order: 7; }
.os-obs       { order: 8; }
.os-excluir   { order: 9; }

@supports selector(main:has(> div)) {
  @media (min-width: 1100px) {
    main:has(> .os-grade) { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
    body:has(main > .os-grade) .banner-atualizacao { max-width: 1152px; }
    .os-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
    .os-principal, .os-lateral { display: flex; flex-direction: column; gap: 16px; }
  }
}

/* ─── Ordens (histórico) ───────────────────────────────────────── */
/* Fileiras de chips rolam de lado no celular: a lista começa mais cedo */
@media (max-width: 1099px) {
  .chips.rolagem {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 0 16px;
  }
  .chips.rolagem::-webkit-scrollbar { display: none; }
  .chips.rolagem button { flex-shrink: 0; }
}
.resumo-ordens {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 8px 0 4px;
}
.resumo-ordens dl { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.resumo-ordens dt { color: var(--tinta-3); font-size: var(--texto-legenda); }
.resumo-ordens dd { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.resumo-ordens .a-receber dd { color: var(--perigo); }
.grupo-mes h3::before { display: none; }
.linha-os .detalhe.quebra { white-space: normal; }
.linha-os .detalhe.itens { color: var(--tinta-3); font-size: var(--texto-legenda); }
.linha-os .fim .apoio.pago { display: inline-flex; align-items: center; gap: 3px; color: var(--sucesso); font-size: var(--texto-legenda); font-weight: 600; }
.linha-os .fim .apoio.pago svg { width: 13px; height: 13px; }
.linha-os .fim .apoio.a-receber { color: var(--perigo); font-size: var(--texto-legenda); font-weight: 600; }
.mais-ordens { margin-top: 12px; }
/* Celular: placa e valor na primeira linha, o resto embaixo em largura cheia */
@media (max-width: 600px) {
  #os-lista .linha-os, .caixa-grade .linha-os {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "placa . fim" "modelo modelo fim" "detalhe detalhe detalhe" "itens itens itens";
    column-gap: 10px; row-gap: 2px; align-items: start;
  }
  #os-lista .linha-os .placa, .caixa-grade .linha-os .placa { grid-area: placa; justify-self: start; }
  #os-lista .linha-os .meio, .caixa-grade .linha-os .meio { display: contents; }
  #os-lista .linha-os .modelo, .caixa-grade .linha-os .modelo { grid-area: modelo; margin-top: 4px; white-space: normal; }
  #os-lista .linha-os .detalhe.quebra, .caixa-grade .linha-os .detalhe { grid-area: detalhe; white-space: normal; }
  #os-lista .linha-os .detalhe.itens { grid-area: itens; }
  #os-lista .linha-os .fim, .caixa-grade .linha-os .fim { grid-area: fim; }
  #os-lista .linha-os > svg.seta { display: none; }
}
/* Computador largo: filtros numa coluna à esquerda, busca e lista à direita */
@supports selector(main:has(> div)) {
  @media (min-width: 1100px) {
    main:has(> .ordens-grade) { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
    body:has(main > .ordens-grade) .banner-atualizacao { max-width: 1152px; }
    .ordens-grade {
      display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 24px;
      grid-template-areas: "filtros busca" "filtros lista"; align-items: start;
    }
    #os-busca { grid-area: busca; }
    #os-filtros { grid-area: filtros; position: sticky; top: 70px; }
    #os-lista { grid-area: lista; }
    #os-filtros .duas-colunas { flex-direction: column; gap: 0; }
    #os-filtros .duas-colunas > div { flex: none; }
  }
}
/* Pagamento e Ordenar lado a lado também no celular: a lista sobe */
#os-filtros .duas-colunas > div { flex: 1 1 140px; }
#os-filtros select { margin-bottom: 8px; }

/* ─── Caixa ─────────────────────────────────────────────────────── */
/* Celular primeiro: os dois números do mês, de onde veio o dinheiro, quem
   falta pagar, o que entrou. No computador (dia de fechamento) as duas
   listas ficam lado a lado. */
.caixa-mes { display: flex; align-items: center; gap: 8px; }
.caixa-mes label { margin: 0; }
.caixa-mes input { width: auto; margin: 0; height: var(--alvo); }
.caixa-grade { display: flex; flex-direction: column; gap: 4px; }
.caixa-grade > section:not(.bloco) > h2 { margin-top: 20px; }
.caixa-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.caixa-numeros .negativo { border-left: 1px solid var(--linha); padding-left: 16px; }
.caixa-numeros .rotulo { color: var(--tinta-2); font-size: var(--texto-apoio); font-weight: 500; }
.caixa-numeros .valor {
  font-size: var(--texto-valor); font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.caixa-numeros .positivo .valor { color: var(--sucesso); }
.caixa-numeros .negativo .valor { color: var(--perigo); }
.caixa-numeros .apoio { color: var(--tinta-3); font-size: var(--texto-legenda); margin-top: 2px; }
@media (max-width: 400px) { .caixa-numeros .valor { font-size: 22px; } }
.por-forma {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linha);
}
.por-forma dt { color: var(--tinta-3); font-size: var(--texto-legenda); }
.por-forma dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.texto-apoio { color: var(--tinta-2); font-size: var(--texto-apoio); line-height: 1.5; }
.status-backup { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--texto-apoio); font-weight: 600; }
.status-backup svg { width: 16px; height: 16px; }
.status-backup.em-dia { color: var(--sucesso); }
.status-backup.atrasado { color: var(--perigo); }
.caixa-backup, .caixa-suporte { margin-top: 20px; }
.guia-backup { margin: 8px 0 12px; padding-left: 18px; font-size: var(--texto-apoio); line-height: 1.5; color: var(--tinta-2); }
.guia-backup li + li { margin-top: 6px; }

@supports selector(main:has(> div)) {
  @media (min-width: 1100px) {
    main:has(> .caixa-grade) { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
    body:has(main > .caixa-grade) .banner-atualizacao { max-width: 1152px; }
    .caixa-grade { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
    .caixa-grade .resumo-caixa { grid-column: 1 / -1; }
  }
}

/* ─── Clientes ──────────────────────────────────────────────────── */
.acoes-cliente { display: flex; gap: 8px; }
.contagem-veic { color: var(--tinta-3); font-size: var(--texto-legenda); white-space: nowrap; }
.linha-os .remover {
  width: 40px; height: 40px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--raio); cursor: pointer; color: var(--tinta-3);
}
.linha-os .remover:hover { background: var(--papel-3); color: var(--tinta); }
.linha-os .remover.perigo:hover { background: var(--perigo-fundo); color: var(--perigo); }
.linha-os .remover svg { width: 18px; height: 18px; }
.linha-os.veiculo { gap: 8px; }
.linha-os.veiculo .modelo { white-space: normal; line-height: 1.25; }
.linha-os.atalho > svg:first-child { color: var(--tinta-3); }
.linha-os.atalho .detalhe.quebra { white-space: normal; }
.cliente-atalhos { margin-top: 12px; }
.cliente-veiculos .fila + .botao, .cliente-veiculos .vazio + .botao { margin-top: 0; }

/* ─── Celular: polegar ──────────────────────────────────────────── */
/* O app é usado sobretudo no celular (PC só no fechamento). Tudo que se toca
   tem 44px; a ação principal da tela (Nova OS, Novo cliente) flutua acima das
   abas, onde o polegar alcança. */
.voltar { min-height: var(--alvo); margin-bottom: 4px; }
.modal-titulo .fechar { width: var(--alvo); height: var(--alvo); padding: 0; align-items: center; justify-content: center; }
@media (max-width: 699px) {
  body { padding-bottom: 148px; }
  .secao .botao.principal {
    position: fixed; right: 16px; z-index: 9;
    bottom: calc(72px + env(safe-area-inset-bottom));
    min-height: 52px; padding: 0 20px; border-radius: var(--raio-pilula);
    box-shadow: var(--sombra-dialogo);
  }
  .toast { bottom: calc(136px + env(safe-area-inset-bottom)); }
  .etapa { min-height: var(--alvo); }
  .item-os .remover, .linha-hist .remover, .linha-os .remover, .check-item .check-camera { width: var(--alvo); height: var(--alvo); }
  /* Na OS, o avanço de etapa é a ação principal: fica fixo acima das abas,
     em largura cheia, mesmo rolando até o checklist */
  .os-etapa .etapa-acoes > .botao:not(.claro) {
    position: fixed; left: 16px; right: 16px; z-index: 9;
    bottom: calc(72px + env(safe-area-inset-bottom));
    min-height: 52px; box-shadow: var(--sombra-dialogo);
  }
  .foto button { width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center; }
  .foto button svg { width: 16px; height: 16px; }
  /* Tocar na linha já abre a edição do item: o lápis só ocupava espaço */
  .item-os .editar-item { display: none; }
}

/* ─── Preços e ajustes ──────────────────────────────────────────── */
.linha-os .modelo.quebra { white-space: normal; line-height: 1.3; }
.ajustes { margin-top: 24px; }

/* ─── Acessibilidade e toque ────────────────────────────────────── */
/* Foco visível em tudo que se alcança pelo teclado (o clique não mostra) */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.linha-os:focus-visible, .item-os:focus-visible { outline-offset: -2px; }
.topo :focus-visible, .abas :focus-visible { outline-color: var(--laranja); }
/* Toque: sem a espera do toque duplo e sem o clarão cinza do iOS (o estado
   de pressionado já é desenhado por cada botão) */
button, a, [role="button"], summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.modal { overscroll-behavior: contain; }
.pular {
  position: absolute; left: 8px; top: -60px; z-index: 40;
  background: var(--ficha); color: var(--tinta); padding: 10px 16px; border-radius: var(--raio);
  font-weight: 600;
}
.pular:focus { top: 8px; }
main:focus { outline: none; }
.grupo-status h3 .alternavel {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo);
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
}

/* Novidades da versão (depois de atualizar e em Caixa → O que há de novo) */
.novidades { max-height: 60vh; overflow-y: auto; }
.resumo-aceite {
  background: var(--papel-2); border-left: 3px solid var(--info); border-radius: var(--raio-sm);
  padding: 10px 12px; margin: 8px 0 12px; font-size: 14px; line-height: 1.5;
}
.novidade-versao + .novidade-versao { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); }
.novidade-versao h3 { margin: 0 0 8px; font-size: 1rem; }
.novidade-versao h3 small { color: var(--tinta-2); font-weight: 400; margin-left: 6px; }
.novidade-versao h4 { margin: 12px 0 4px; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.novidade-versao ul { margin: 0; padding-left: 20px; line-height: 1.5; }
.novidade-versao li + li { margin-top: 4px; }

/* Código de recuperação dos backups: 8 grupos de 8, em 2 colunas (cabe em 375px
   sem quebrar grupo ao meio). O textarea só serve para o copiar antigo
   (execCommand) e fica fora da vista; 16px evita o zoom do iPhone no foco. */
.codigo-recuperacao {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px;
  margin: 4px 0 12px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-2); font-family: var(--fonte-placa); font-size: 18px; font-weight: 600;
  color: var(--tinta); text-align: center; letter-spacing: .04em; -webkit-user-select: all; user-select: all;
}
.campo-codigo {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  font-size: 16px; border: 0; padding: 0; resize: none;
}