/* Estilos próprios do sistema (base visual, bloco 7).
   Origem: telas/assets/telas.css (telas de 13/10). Estrutura e espaçamento são Tailwind
   (static/css/tailwind.css, carregado antes deste). Aqui fica só o que não é utilitário. */

/* --cor-primaria = cor da emissora padrão, escrita no base.html só se for #RRGGBB válido (passo 10.5).
   Uso SÓ decorativo: barra do item ativo do menu e fio de 3 px na base do cabeçalho. Botões, links e anel de
   foco ficam na cor neutra (laranja sobre branco ≈ 2,6:1 reprovaria o contraste de componente). */
:root { --cor-primaria: #0f172a; --cor-sobre-primaria: #ffffff; }
body { font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif; }

.btn-primario { background: #0f172a; color: #ffffff; text-decoration: none; }
.btn-primario:hover { filter: brightness(0.95); }
.menu-ativo { background: #fff; color: #000; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cor-primaria), 0 1px 2px rgb(0 0 0 / 0.06); }
.cabecalho-sistema.com-cor-emissora { box-shadow: inset 0 -3px 0 var(--cor-primaria); }
img.logo-cabecalho { height: 2rem; } /* ~32 px */
.menu-grupo { color: #64748b; }
.menu-indisponivel { cursor: default; color: #94a3b8; }
.cartao { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; }
.cartao-titulo { margin-bottom: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #334155; }
.pilha > * + * { margin-top: 1rem; }
.rotulo { display: block; font-size: 0.75rem; color: #64748b; }

/* formulários de cadastro (03b): erro em texto e borda, nunca só na cor */
.erro-campo { color: #be123c; }
[aria-invalid="true"] { border-color: #e11d48; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* passo 13.2e: código e data não quebram nas listas ("PC-2026-" / "0100" partia no hífen quando a tabela apertava).
   Só em valor curto: nº de PC, OS, ORC e cotação, TAG, data, R$, quantidade com unidade, situação. Nunca em texto
   livre (fornecedor, cliente, descrição, material, observação): é ele que quebra. .par: no cartão do celular, rótulo e
   valor juntos ("coleta prevista —"); a linha só quebra entre pares, no "·". */
.codigo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.par { white-space: nowrap; }
/* passo 15.2a: selo do pedido / OS da área (ordens/_selo_pedido.html) — nº e data em .codigo; o selo quebra entre as
   partes e não passa da largura do pai (nº de 40 caracteres em 390 px) */
.selo-pedido { max-width: 100%; }
.link-botao { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; font: inherit; }
img.logo { background: #fff; }
/* "↻ Atualizar" (passo 12.6a v2): em tela de toque ou no modo app, porque o iPhone não recarrega ao puxar para
   baixo; escondido no computador com mouse */
.botao-atualizar { display: none; }
@media (hover: none) and (pointer: coarse), (display-mode: standalone) {
  .botao-atualizar {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.25em; min-height: 44px; min-width: 44px;
    padding: 0 0.5rem; border: 1px solid #cbd5e1; border-radius: 0.375rem; color: #334155; text-decoration: none;
    background: none; font: inherit; cursor: pointer; white-space: nowrap;
  }
}
/* cabeçalho numa linha só (passo 12.6b): a logo e o "Sair" nunca encolhem; o nome do usuário encurta com
   reticências; abaixo de 420 px o botão mostra só o "↻" */
img.logo-cabecalho { width: auto; flex-shrink: 0; }
.cabecalho-sistema .marca:has(img.logo-cabecalho) { flex-shrink: 0; }
.cabecalho-sistema .usuario { min-width: 0; white-space: nowrap; }
.cabecalho-sistema .usuario > * { flex-shrink: 0; }
.cabecalho-sistema .usuario > .usuario-nome { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 419.98px) { .botao-atualizar-texto { display: none; } }
/* passo 12.6c (D): o "↻" sozinho ficava miúdo no botão de 44 px (Android, 01/11) */
@media (max-width: 419.98px) { .botao-atualizar > [aria-hidden="true"] { font-size: 1.375rem; line-height: 1; } }

/* menu do celular (<details>, sem JavaScript): "☰ Menu" como nas telas de 13/10, sem o triângulo padrão */
.menu-movel > summary { list-style: none; cursor: pointer; }
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel[open] > summary { margin-bottom: 0.75rem; }

/* listas de cadastro (passo 10.5): no celular (< 640 px) a linha empilhada, inteira um link de ≥ 44 px;
   em ≥ 640 px a tabela da 03a. CSS próprio (não Tailwind) para valer sem recompilar o tailwind.css. */
.lista-movel { list-style: none; margin: 0; padding: 0; }
.linha-movel { display: block; min-height: 44px; padding: 0.625rem 0.75rem; text-decoration: none; }
.linha-movel:active { background: #f8fafc; }
.tabela-larga { display: none; }
.paginacao { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
.botao-pagina { display: flex; align-items: center; justify-content: center; min-height: 44px;
  color: #334155; text-decoration: none; }
.botao-pagina:hover { background: #f8fafc; }
@media (min-width: 40rem) {
  .lista-movel { display: none; }
  .tabela-larga { display: block; }
  .paginacao { flex-direction: row; align-items: center; gap: 0.75rem; }
  .botao-pagina { display: inline-flex; }
}

/* tabela de contrato, linhas (tela 18b, passo 12.0a): cartões até 768 px (não 640), tabela de verdade a partir dele,
   sem rolagem lateral. Vem depois das regras da lista para valer sobre elas. */
.lista-contrato ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) {
  .lista-movel.lista-contrato { display: block; }
  .tabela-larga.tabela-contrato { display: none; }
}
@media (min-width: 48rem) {
  .lista-movel.lista-contrato { display: none; }
  .tabela-larga.tabela-contrato { display: block; }
}
/* levantamento de material da OS (tela 09, passo 12.2): a mesma troca em 768 px da tabela de contrato */
@media (min-width: 40rem) {
  .lista-movel.lista-levantamento { display: block; }
  .tabela-larga.tabela-levantamento { display: none; }
}
@media (min-width: 48rem) {
  .lista-movel.lista-levantamento { display: none; }
  .tabela-larga.tabela-levantamento { display: block; }
}
/* mapa comparativo e pedidos de compra (tela 11, passo 13.1): a mesma troca em 768 px */
@media (min-width: 40rem) {
  .lista-movel.lista-768 { display: block; }
  .tabela-larga.tabela-768 { display: none; }
}
@media (min-width: 48rem) {
  .lista-movel.lista-768 { display: none; }
  .tabela-larga.tabela-768 { display: block; }
}
/* blocos que abrem e fecham (tela 18b, passo 12.0b): <details>/<summary> sem JavaScript; o título é o alvo de toque
   (≥ 44 px), com a seta à esquerda (para a direita fechado, para baixo aberto), sem o triângulo padrão. */
.bloco-contrato { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
.bloco-contrato + .bloco-contrato { margin-top: 0.5rem; }
.bloco-contrato > summary { list-style: none; display: flex; align-items: center; gap: 0.625rem; min-height: 44px;
  padding: 0.5rem 0.75rem; cursor: pointer; font-size: 1rem; font-weight: 600; color: #334155; }
.bloco-contrato > summary::-webkit-details-marker { display: none; }
.bloco-contrato > summary::before { content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(-45deg); }
.bloco-contrato[open] > summary::before { transform: rotate(45deg); }
.bloco-contrato > summary:focus-visible { outline: 2px solid #0f172a; outline-offset: -2px; border-radius: 0.5rem; }
.bloco-contrato > .lista-contrato, .bloco-contrato > .tabela-contrato { border-top: 1px solid #e2e8f0; }
.subblocos-contrato { padding: 0 0.5rem 0.5rem; }
.sub-bloco > summary { font-size: 0.9375rem; }
@media (min-width: 48rem) { .bloco-contrato > summary { font-size: 0.875rem; } }
.link-situacao { margin-top: 1rem; }
.link-situacao a { display: inline-flex; align-items: center; min-height: 44px; }

.mensagem-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.mensagem-success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.mensagem-warning { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.mensagem-error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

/* tela 06 (passo 11.0): rádios do equipamento com ≥ 44 px de toque; o bloco "Novo equipamento" só aparece com o
   rádio "novo" marcado (:has, sem JavaScript). */
.linha-sec { display: block; font-size: 0.75rem; color: #64748b; }
.opcao-equipamento { display: flex; gap: 0.5rem; align-items: flex-start; min-height: 44px; padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0; border-radius: 0.375rem; background: #fff; cursor: pointer; }
.opcao-equipamento input { margin-top: 0.2rem; }
.opcao-equipamento:has(input:checked) { border-color: #0f172a; background: #f8fafc; }
.opcao-prioridade { min-height: 44px; }
.bloco-novo-equipamento { display: none; }
.form-abertura:has(input[name="equipamento"][value="novo"]:checked) .bloco-novo-equipamento { display: block; }
/* passo 15.3 (A1): cada linha a mais da lista de TAGs tem o seu bloco "novo", aberto pelo rádio da própria linha */
.bloco-novo-linha { display: none; }
.linha-tag:has(input[type="radio"][value="novo"]:checked) .bloco-novo-linha { display: block; }
/* passo 15.2 (A2): origem "Contrato" marcada na 06 — o RC some e o anexo do pedido vira "OS da área / e-mail do
   comprador" (:has, sem JavaScript; o servidor grava o RC vazio). */
.rotulo-contrato { display: none; }
.form-abertura:has(input[name="origem"][value="CONTRATO"]:checked) .so-portal,
.form-abertura:has(input[name="origem"][value="CONTRATO"]:checked) .rotulo-portal { display: none; }
.form-abertura:has(input[name="origem"][value="CONTRATO"]:checked) .rotulo-contrato { display: inline; }

/* tela 07 (passo 11.1): abas como links (sem JavaScript) e botões de situação com ≥ 44 px de toque.
   Passo 12.6c (DECISOES 01/11): .abas é uma grade que quebra linha — nenhuma aba escondida atrás de rolagem ou
   menu. Celular: 3 colunas iguais; a partir de 640 px, todas na mesma linha. O texto da aba não quebra. */
.abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; font-size: 0.875rem; }
@media (min-width: 640px) { .abas { display: flex; flex-wrap: wrap; } }
.aba {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0.5rem;
  border: 1px solid #cbd5e1; border-radius: 0.375rem; background: #fff; color: #475569;
  text-decoration: none; white-space: nowrap;
}
@media (min-width: 640px) { .aba { padding: 0 0.875rem; } }
.aba-ativa { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-primaria);
  font-weight: 600; }

/* Painel das abas da 07 (passo 12.6d, E): tom próprio, diferente do fundo da página e do branco dos cartões, para
   se ver que se está noutra parte da OS. Texto secundário direto no painel em slate-600 (6,7:1; o slate-500 daria
   4,2:1 sobre este fundo). B: o conteúdo da aba tem no mínimo a altura da tela, para a barra chegar ao topo com
   #abas também com conteúdo curto. F: a faixa da OS (sistema.js) e o recuo de #abas para não ficar embaixo dela. */
:root {
  --painel-abas-fundo: #eef2f7; --painel-abas-borda: #cbd5e1; --painel-abas-texto: #1e293b;
  --painel-abas-texto-sec: #475569; --faixa-os-altura: 2.5rem;
}
.painel-abas { padding: 0.5rem; border: 1px solid var(--painel-abas-borda); border-radius: 0.5rem;
  background: var(--painel-abas-fundo); color: var(--painel-abas-texto); }
@media (min-width: 640px) { .painel-abas { padding: 0.75rem; } }
.painel-abas .text-slate-500, .painel-abas .linha-sec { color: var(--painel-abas-texto-sec); }
.conteudo-aba { min-height: 100vh; min-height: 100dvh; }
#abas { scroll-margin-top: var(--faixa-os-altura); }
.faixa-os {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.5rem;
  height: var(--faixa-os-altura); margin: 0 -1rem calc(-1 * var(--faixa-os-altura)); padding: 0 1rem;
  border-bottom: 1px solid #e2e8f0; background: #fff; color: #1e293b; font-size: 0.875rem;
  text-decoration: none; white-space: nowrap; visibility: hidden;
}
.faixa-os.visivel { visibility: visible; }
.faixa-os > * { flex-shrink: 0; }
.faixa-os-numero { font-weight: 600; }
.faixa-os-cliente { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #475569; }
.aba-indisponivel { display: inline-flex; align-items: center; min-height: 44px; color: #94a3b8; cursor: default; }
.acao-situacao button, .min-h-11 { min-height: 44px; }
.cartao-os { color: inherit; }

/* passo 11.1a (B1): nada passa da largura da tela no iPhone. O <input type=date> do Safari tem largura
   própria e ignorava o w-full; o item da grade (min-width: auto) crescia junto com o texto longo da filial. */
input[type="date"] { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  -webkit-appearance: none; appearance: none; min-height: 44px; background-color: #fff; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input, select, textarea { max-width: 100%; }
.cartao, .cartao .grid > *, .form-abertura .grid > * { min-width: 0; }

/* passo 11.1a (B3): o <input type=file> nativo vira um botão de ≥ 44 px; o campo fica por baixo, invisível
   mas tocável (o iPhone oferece Fototeca / Tirar Foto / Escolher Arquivos). */
.botao-arquivo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0.5rem 0.75rem; border: 1px solid #0f172a; border-radius: 0.375rem; background: #fff; color: #0f172a;
  font-weight: 500; cursor: pointer; text-align: center; }
.botao-arquivo:focus-within { outline: 2px solid #0f172a; outline-offset: 2px; }
.campo-arquivo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* passo 11.4b: "Tirar foto" (câmera) e "Galeria ou arquivo" lado a lado, também no celular. */
.botoes-arquivo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* passo 11.4b: durante o envio (redução das fotos e subida), a página não aceita outro toque. */
html.pagina-enviando body { pointer-events: none; cursor: progress; }

/* passo 11.1b: "Remover" do anexo (07) com cara de botão e ≥ 44 px, como o botão de arquivo — não
   depende de a classe do Tailwind estar no CSS gerado. */
.botao-remover { min-height: 44px; min-width: 44px; }

/* passo 11.2 (DECISOES 26/10, nº 9): abaixo de 640 px, campo com 16 px. Com fonte menor o Safari do iPhone
   amplia a página ao focar o campo e ela fica deslocada depois (visto na 07, ao digitar o motivo). */
@media (max-width: 39.99rem) {
  input, select, textarea { font-size: 16px; }
}

/* passo 11.2b: aviso só no celular (ex.: "Arraste a tabela para o lado…" no histórico de preço da 05) */
@media (min-width: 40rem) {
  .so-celular { display: none; }
}

/* tela 08 (passo 11.3): ação do item em rádios-botão com ≥ 44 px de toque (como os rádios da 06); a escolhida em
   destaque por :has, sem JavaScript. Botões da 08 com ≥ 44 px sem depender do CSS gerado do Tailwind. */
.opcao-acao { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1; border-radius: 0.375rem; background: #fff; cursor: pointer; }
.opcao-acao:has(input:checked) { border-color: #0f172a; background: #0f172a; color: #fff; font-weight: 600; }
.opcao-acao:has(input:disabled) { cursor: default; }
.nova-medicao > summary { list-style: none; }
.nova-medicao > summary::-webkit-details-marker { display: none; }
.cartao-medicao .botao-remover, .cartao-medicao .botao-editar-medicao { min-height: 44px; }

/* passo 13.1b (A): tipo de material nas telas de compra (10, 11 e pedido) — faixa lateral colorida + rótulo com
   texto (a cor nunca vai sozinha). Faixa ≥ 3:1 sobre o branco (componente gráfico); rótulo com texto ≥ 7:1 sobre o
   fundo claro dele. Verde fica para o "Melhor preço" e vermelho para "Vencida": nenhum tipo usa essas cores. */
:root {
  --tipo-barra: #1d4ed8; --tipo-barra-fundo: #dbeafe; --tipo-barra-texto: #1e3a8a;
  --tipo-tubo: #6d28d9; --tipo-tubo-fundo: #ede9fe; --tipo-tubo-texto: #4c1d95;
  --tipo-chapa: #c2410c; --tipo-chapa-fundo: #ffedd5; --tipo-chapa-texto: #7c2d12;
  --tipo-perfil: #0e7490; --tipo-perfil-fundo: #cffafe; --tipo-perfil-texto: #164e63;
  --tipo-peca: #475569; --tipo-peca-fundo: #e2e8f0; --tipo-peca-texto: #1e293b;
}
.tipo-barra { --tipo-cor: var(--tipo-barra); --tipo-fundo: var(--tipo-barra-fundo); --tipo-texto: var(--tipo-barra-texto); }
.tipo-tubo { --tipo-cor: var(--tipo-tubo); --tipo-fundo: var(--tipo-tubo-fundo); --tipo-texto: var(--tipo-tubo-texto); }
.tipo-chapa { --tipo-cor: var(--tipo-chapa); --tipo-fundo: var(--tipo-chapa-fundo); --tipo-texto: var(--tipo-chapa-texto); }
.tipo-perfil { --tipo-cor: var(--tipo-perfil); --tipo-fundo: var(--tipo-perfil-fundo); --tipo-texto: var(--tipo-perfil-texto); }
.tipo-peca { --tipo-cor: var(--tipo-peca); --tipo-fundo: var(--tipo-peca-fundo); --tipo-texto: var(--tipo-peca-texto); }
.faixa-tipo { border-left: 6px solid var(--tipo-cor, #94a3b8); padding-left: 0.75rem; }
.cartao.faixa-tipo { padding-left: 0.875rem; }
.rotulo-tipo { display: inline-block; padding: 0 0.5rem; border-radius: 9999px; background: var(--tipo-fundo);
  color: var(--tipo-texto); font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; }
.legenda-tipos { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; font-size: 0.75rem; color: #475569; }
.legenda-tipos .rotulo-tipo { border-left: 4px solid var(--tipo-cor); }

/* passo 13.1b (A2): "Resumo por fornecedor" do mapa — seção com fundo próprio, como o painel das abas da 07. Cartões
   com linhas rotuladas em duas colunas (celular) e, a partir de 768 px, tabela fornecedores × informações. */
.secao-resumo { padding: 0.75rem; border: 1px solid var(--painel-abas-borda); border-radius: 0.5rem;
  background: var(--painel-abas-fundo); color: var(--painel-abas-texto); }
.secao-resumo .text-slate-500, .secao-resumo .linha-sec { color: var(--painel-abas-texto-sec); }
.resumo-cartoes { list-style: none; margin: 0; padding: 0; }
.resumo-cartoes > li + li { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--painel-abas-borda); }
.resumo-linhas { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 1rem; }
.resumo-linhas dt { color: var(--painel-abas-texto-sec); }
.resumo-linhas dd { text-align: right; font-variant-numeric: tabular-nums; }
.selo { display: inline-block; padding: 0 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
  line-height: 1.25rem; white-space: nowrap; }
.selo-menor-total { background: #047857; color: #fff; }
.selo-menor-prazo { background: #0369a1; color: #fff; }
.selo-vencida { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* tela 12 — orçamento (passo 14.0): selo da categoria, caixa "Na proposta" e revisão escolhida, como na tela aprovada */
.tela-orcamento .cat { display: inline-block; border-radius: 4px; padding: 0 0.35rem; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
/* passo 15.1 (A3): "Na proposta" e os totais do item sempre abaixo das linhas, largura total */
.tela-orcamento .na-proposta { width: 100%; border: 1px solid #e2e8f0; border-radius: 0.375rem;
  background: #f8fafc; padding: 0.5rem 0.75rem; font-size: 0.8rem; }
.tela-orcamento .na-proposta div { display: flex; justify-content: space-between; gap: 1rem; }
.tela-orcamento .revisao-ativa { border-color: #0f172a; box-shadow: inset 0 -3px 0 #0f172a; }
.linhas-orcamento th, .linhas-orcamento td { padding: 0.4rem 0.5rem; vertical-align: top; }
.linhas-orcamento td.desc { min-width: 12rem; }
/* passo 15.1 (A1/A2): composição da tela 12 — cartão por linha abaixo de 1280 px, tabela de 6 colunas a partir dele,
   sem rolagem lateral. Os números não quebram (.codigo); quem cede é a descrição. */
@media (min-width: 40rem) {
  .lista-movel.lista-1280 { display: block; }
  .tabela-larga.tabela-1280 { display: none; }
}
@media (min-width: 80rem) {
  .lista-movel.lista-1280 { display: none; }
  .tabela-larga.tabela-1280 { display: block; }
}
.lista-1280 ul { list-style: none; margin: 0; padding: 0; }
.linhas-orcamento td.num { white-space: nowrap; }
.tela-orcamento .fim-composicao { border-top: 2px solid #cbd5e1; }