/* ==================================================================
   Casa do Mac · Gestão

   A régua visual: off-white de papel, preto forte na tipografia e UM
   acento — o verde-limão — gasto só onde importa. Nada de azul em
   tudo: azul em tudo é o que dá cara de sistema genérico.

   O limão nunca é texto sobre branco (não lê). Ele é FUNDO, com
   preto por cima: botão principal, item ativo do menu, a barra que
   está em foco, o número que você veio olhar.

   As cores de estado — atrasado, em dia, aviso — são outra família,
   de propósito. Se o limão fosse "ok", ele brigaria com o verde.
   ================================================================== */
:root{
  /* papel e tinta */
  /* superfícies suaves: fundo de aviso, de destaque, de bloco citado.
     São token porque no escuro precisam virar escuro — hex fixo aqui foi
     a causa de todo texto sumido no tema escuro. */
  --fundo:#efefec; --papel:#ffffff; --papel-2:#fafafa;
  /* Paleta da referencia: BLACK #000000 / White #FFFFFF. O preto e preto. */
  --tinta:#000000; --tinta-2:#5a5a56; --tinta-3:#9a9a94;
  --borda:#e5e5e0; --borda-forte:#d2d2cb;
  --suave:#f4f4f1; --suave-2:#ededea; --trilho:#ececE7; --barra-vazia:#e2e2dd;

  /* ---- família de tons ----
     Cada etapa do ciclo do aparelho ganha um tom, e o tom é sempre o mesmo
     em toda a tela: o cartão do painel, a coluna do kanban e a faixa da
     agenda falam a mesma cor. Não é enfeite — é como o olho acha a coisa
     sem ler. Os tons são claros de propósito: o número por cima é preto,
     e o preto é que carrega a informação. */
  --t-lima:#e1f2ae;   --t-lima-f:#3f5206;
  --t-ceu:#dceaf6;    --t-ceu-f:#1f5578;
  --t-menta:#d9f0e2;  --t-menta-f:#166b46;
  --t-pessego:#fbe3d2; --t-pessego-f:#8a4718;
  --t-lilas:#e6e1f7;  --t-lilas-f:#4a3a8c;
  --t-areia:#f3ecdb;  --t-areia-f:#79601f;
  --t-rosa:#fadfe4;   --t-rosa-f:#8f2740;

  /* O acento, gasto com parcimônia. Trocável em Configurações — cada cor
     traz junto a tinta que se lê por cima dela: limão pede preto, azul
     pede branco. Sem esse par, o botão principal fica ilegível. */
  /* Lime Green #C7F33C e Pale Lime #E1F2AE, os dois da paleta, sem aproximacao.
     O forte e o mesmo lime escurecido, so para o estado de pressionado. */
  --acento:#c7f33c; --acento-forte:#b2e019; --acento-tenue:#e1f2ae; --acento-tinta:#000000;

  /* segunda voz, para o que é contexto e não ação */
  --brim:#8ab0d9; --brim-tenue:#eaf1f9;

  /* estados: família própria, mais sóbria que o acento */
  --verde:#2f8f63; --verde-tenue:#e8f4ee;
  --vermelho:#cf4040; --vermelho-tenue:#fceded;
  --ambar:#d18b1f; --ambar-tenue:#fdf4e3;

  /* o azul some do sistema; fica só onde o navegador exige um link */
  --azul:#2f6fd0; --azul-escuro:#1f55a8; --azul-tenue:#e8f0fb;

  --sombra:0 1px 2px rgba(16,16,16,.04), 0 8px 24px -12px rgba(16,16,16,.14);
  --sombra-alta:0 16px 48px -16px rgba(16,16,16,.28);
  --raio:12px; --raio-p:8px;

  --ui:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  /* Uma familia so para interface. Titulo em Outfit e corpo em Jakarta tinham
     metricas diferentes: a linha de base mudava de um para o outro, e era isso
     que fazia a tela parecer desalinhada. O mono continua, de proposito, para
     codigo e numero de serie. */
  --display:var(--ui);
  --dado:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box}
/* v92: o aperto negativo entre letras era afinacao da Inter. A Source Sans
   ja nasce estreita; com o mesmo aperto ela fecha e fica suja. Volta a zero. */
body{margin:0;font:14px/1.5 var(--ui);letter-spacing:0;
  color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--borda-forte)}
a:hover{border-bottom-color:var(--tinta)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.num,td.num,th.num{font-variant-numeric:tabular-nums}

/* ---- login ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--fundo)}
.login form{background:var(--papel);padding:36px;border-radius:18px;width:100%;max-width:390px;
  border:1px solid var(--borda);box-shadow:var(--sombra-alta)}
.login h1{margin:0 0 4px;font-size:24px;font-weight:600}
.login p{margin:0 0 26px;color:var(--tinta-3)}

/* ---- layout ----
   A barra lateral é clara, como o resto. Barra escura corta a tela em dois
   ambientes e a loja passa o dia inteiro olhando para ela. O que marca onde
   você está é o limão, não o contraste de fundo. */
/* minmax(0,1fr) deixa a coluna de conteúdo ENCOLHER quando algo dentro é largo,
   em vez de empurrar a página e gerar barra horizontal. max-width/overflow seguram
   o resto — tabelas largas continuam rolando dentro do próprio .rolagem. */
.layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;max-width:100%;overflow-x:hidden}
.lateral{background:var(--papel);color:var(--tinta-2);padding:20px 12px;
  display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--borda);
  height:100vh;position:sticky;top:0;overflow:hidden}
.marca{color:var(--tinta);font-family:var(--display);font-weight:600;font-size:17px;
  padding:4px 10px 18px;letter-spacing:-.02em}
.marca small{display:block;font-family:var(--ui);font-weight:600;color:var(--tinta-3);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.lateral a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--raio-p);
  color:var(--tinta-2);font-weight:500;font-size:13.5px;white-space:nowrap;border:0;
  transition:background .12s,color .12s}
.lateral a:hover{background:var(--fundo);color:var(--tinta)}
/* o item ativo é o único limão da barra — é onde você está */
.lateral a.ativo{background:var(--acento);color:var(--acento-tinta);font-weight:600}
.lateral .rodape{margin-top:auto;border-top:1px solid var(--borda);padding-top:14px;
  font-size:12px;color:var(--tinta-3)}
/* min-width:0 é o que segura a tabela larga dentro do .rolagem — sem isso
   a coluna 1fr da grade cresce com o conteúdo e a página inteira rola. */
.conteudo{padding:26px 30px 70px;max-width:1440px;min-width:0;overflow-x:hidden}

.topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.topo h1{margin:0;font-size:26px;font-weight:600;flex:1;letter-spacing:-.025em}

/* ---- componentes ---- */
.cartao{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
.cartao .cab{padding:14px 18px;border-bottom:1px solid var(--borda);font-weight:600;
  display:flex;gap:10px;align-items:center;font-size:14px}
.cartao .corpo{padding:18px}
.grade{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.indicador{padding:18px 20px}
.indicador b{display:block;font-family:var(--display);font-size:34px;font-weight:500;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.indicador span{display:block;color:var(--tinta-3);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:600;margin-top:8px}
.indicador em{font-style:normal;font-size:12px;color:var(--vermelho);font-weight:600}

table{width:100%;border-collapse:collapse;background:var(--papel)}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-3);
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--borda);white-space:nowrap;background:var(--papel-2)}
td{padding:12px 14px;border-bottom:1px solid var(--borda);vertical-align:middle}
tbody tr:hover{background:var(--acento-tenue);cursor:pointer}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.vazio{padding:36px;text-align:center;color:var(--tinta-3)}

/* Etiqueta de estado: retângulo de canto suave, como as pílulas da referência.
   Redonda demais vira balãozinho e some no meio da tabela. */
.etiqueta{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;
  font-size:11.5px;font-weight:600;letter-spacing:-.005em;
  background:var(--suave-2);color:var(--tinta-2);white-space:nowrap}
.ponto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

label{display:block;font-size:11px;font-weight:700;color:var(--tinta-2);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.07em}
.campo{margin-bottom:14px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--borda-forte);
  border-radius:var(--raio-p);background:var(--papel)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:0;border-color:var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
textarea{min-height:72px;resize:vertical}
.linha{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* O botão principal é limão com texto preto — é o único lugar da tela
   que grita, e por isso só pode haver um por área. */
.botao{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--raio-p);
  border:1px solid transparent;background:var(--acento);color:var(--acento-tinta);
  font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .12s,transform .06s}
.botao:hover{background:var(--acento-forte)}
.botao:active{transform:translateY(1px)}
.botao.claro{background:var(--papel);color:var(--tinta);border-color:var(--borda-forte)}
.botao.claro:hover{background:var(--papel-2);border-color:var(--tinta-3)}
.botao.verde{background:var(--verde);color:#fff}
.botao.vermelho,.botao.perigo{background:var(--vermelho);color:#fff}
.botao:disabled{opacity:.45;cursor:not-allowed}
.botao.pequeno{padding:5px 11px;font-size:12px}

.barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.barra input,.barra select{width:auto;min-width:150px}

.modal{position:fixed;inset:0;background:rgba(16,16,16,.5);display:grid;place-items:start center;
  padding:40px 16px;overflow:auto;z-index:50;backdrop-filter:blur(2px)}
.modal .caixa{background:var(--papel);border-radius:16px;width:100%;max-width:920px;box-shadow:var(--sombra-alta)}
.modal .cab{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--borda)}
.modal .cab h2{margin:0;font-size:19px;font-weight:600;flex:1}
.modal .corpo{padding:22px}
.modal .pe{padding:15px 22px;border-top:1px solid var(--borda);display:flex;gap:8px;
  justify-content:flex-end;background:var(--papel-2);border-radius:0 0 16px 16px}
.fechar{background:none;border:none;font-size:22px;cursor:pointer;color:var(--tinta-3);line-height:1}

.aviso{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-weight:500}
.aviso.erro{background:var(--vermelho-tenue);color:#8f2626;border:1px solid #f2cfcf}
.aviso.ok{background:var(--verde-tenue);color:#1f6b49;border:1px solid #c9e6d7}

.recado{position:fixed;right:20px;bottom:20px;background:var(--tinta);color:#fff;padding:13px 18px;
  border-radius:var(--raio-p);box-shadow:var(--sombra-alta);z-index:100;max-width:420px;font-weight:500}
.recado.erro{background:var(--vermelho)}

.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin-bottom:16px;overflow:auto}
.abas button{background:none;border:none;padding:10px 15px;border-bottom:2px solid transparent;cursor:pointer;
  font-weight:600;font-size:13.5px;color:var(--tinta-3);white-space:nowrap}
.abas button:hover{color:var(--tinta-2)}
.abas button.ativo,.abas button.ativa{color:var(--tinta);border-color:var(--acento);border-bottom-width:3px}

.historico{list-style:none;padding:0;margin:0}
.historico li{padding:8px 0 8px 18px;border-left:2px solid var(--borda);position:relative}
.historico li::before{content:"";position:absolute;left:-5px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--tinta-3)}
.historico small{color:var(--tinta-3)}

.pdv{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media(max-width:900px){ .pdv{grid-template-columns:1fr} }
.rolagem{overflow-x:auto}

/* Coluna de Ações (ver/editar/excluir/compartilhar) fica GRUDADA na direita.
   Em telas menores (1280 e afins) a tabela é mais larga que a área e rolava
   pro lado, escondendo as ações — o usuário achava que os botões tinham
   sumido. Fixa (sticky) a coluna à direita pra ela nunca ser cortada. */
td.acoes-td, th.acoes-th{position:sticky;right:0;z-index:2;background:var(--papel);
  box-shadow:-9px 0 9px -9px rgba(0,0,0,.22)}
th.acoes-th{z-index:3}
tr:hover td.acoes-td{background:var(--papel)}

/* abas da tela de configurações */
.abas button.ativa{color:var(--azul);border-color:var(--azul)}

/* ações na linha da listagem */
.acoes-linha{display:flex;gap:4px;align-items:center}
.acao{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
  font-size:13px;line-height:1;cursor:pointer;padding:0;border:1px solid transparent}
/* Repouso: cada ação já vem colorida, mas em tom SUAVE (não vira parede de
   confete com trinta linhas). No hover vira sólido, para dar retorno de clique.
   Tudo em token -tenue para o tema escuro não apagar os ícones. */
/* Botões de ação SÓLIDOS e coloridos, igual sistema anterior (🔍 azul · ✎ âmbar ·
   ✕ vermelho · ▾ verde), sempre visíveis. No hover só clareiam um pouco. */
.acao.azul{background:var(--azul);color:#fff}
.acao.laranja{background:var(--ambar);color:#fff}
.acao.vermelho{background:var(--vermelho);color:#fff}
.acao.verde{background:var(--verde);color:#fff}
.acao:hover{filter:brightness(1.08)}
.botao.perigo:hover{background:#b03434}

/* ------------------------------------------------------------------
   Lista (OS / vendas / etc.): a tabela tem que CABER na largura, sem
   barra de rolagem horizontal e sem coluna espremida. As colunas de
   texto largo truncam ou quebram em vez de empurrar a tabela; a coluna
   de Ações fica fixa à direita. No celular (≤700px) a tabela vira
   cartões — regra .empilha lá embaixo.
   Vale só para a tabela da LISTA (tem a coluna .acoes-th), não mexe nas
   tabelas de dentro da ficha/impressão.
   ------------------------------------------------------------------ */
/* sistema anterior: mostrar o DADO COMPLETO — nada de reticências. As colunas de
   texto longo (Cliente, Equipamentos, Situação, Loja) QUEBRAM em várias linhas
   e a tabela se ajusta à largura (layout automático dá as proporções naturais).
   overflow-wrap:anywhere garante que série/telefone longos quebrem quando a
   coluna aperta, em vez de empurrar barra de rolagem horizontal. */
.rolagem > table:has(.acoes-th){width:100%}
.rolagem > table:has(.acoes-th) td,
.rolagem > table:has(.acoes-th) th{white-space:normal;vertical-align:top}
/* SÓ as colunas de texto longo podem quebrar palavra (série/telefone/handle).
   Os números NÃO: sem isto o Nº virava "202/58", a data "19/09/202/6" e o
   Valor "1.950,0/0". */
.rolagem > table:has(.acoes-th) td[data-rotulo="Cliente"],
.rolagem > table:has(.acoes-th) td[data-rotulo="Equipamentos"],
.rolagem > table:has(.acoes-th) td[data-rotulo="Loja"]{overflow-wrap:anywhere}
/* Loja vem com white-space:nowrap inline — libera pra quebrar também. */
.rolagem > table:has(.acoes-th) td[data-rotulo="Loja"] span{white-space:normal !important}
/* Cliente e Equipamentos: a produção fixa INLINE max-width:170/190px +
   white-space:nowrap + overflow:hidden + ellipsis nos <div>/<small> internos,
   então o nome do cliente e o MODELO do aparelho apareciam CORTADOS ("...").
   Pedido do Gilson: ler o dado COMPLETO, igual sistema anterior. Sobrescrevo o
   nowrap/overflow/ellipsis internos pra o texto QUEBRAR em linhas e aparecer
   inteiro; mantenho uma largura-teto (a coluna cresce em ALTURA, não empurra
   barra horizontal). O telefone (small do Cliente) segue numa linha só. */
.rolagem > table:has(.acoes-th) td[data-rotulo="Cliente"] > div{max-width:210px !important}
.rolagem > table:has(.acoes-th) td[data-rotulo="Equipamentos"] > div{max-width:230px !important}
.rolagem > table:has(.acoes-th) td[data-rotulo="Cliente"] > div > div,
.rolagem > table:has(.acoes-th) td[data-rotulo="Equipamentos"] > div > div,
.rolagem > table:has(.acoes-th) td[data-rotulo="Equipamentos"] > div > small{
  white-space:normal !important;overflow:visible !important;text-overflow:clip !important;
  overflow-wrap:break-word;word-break:break-word}
/* Valor não quebra no meio do número. */
.rolagem > table:has(.acoes-th) td.num{white-space:nowrap}
/* Situação: NUNCA pode sumir. A produção fixa, INLINE na etiqueta,
   max-width:175px + white-space:nowrap + overflow:hidden + ellipsis.
   O bug que o Gilson viu: com overflow-wrap:anywhere a coluna Situação podia
   encolher até 1 letra, então ela absorvia TODO o aperto da tabela e o
   overflow:hidden do pill CORTAVA o texto (o "some/escondido"). Correção:
   (1) tirar o overflow-wrap:anywhere da Situação -> a coluna passa a ter
       largura mínima natural (a maior palavra), não colapsa mais;
   (2) min-width na coluna -> piso de largura mesmo com a tabela cheia;
   (3) sobrescrever overflow:hidden/ellipsis/nowrap do pill -> o texto QUEBRA
       em linhas e aparece INTEIRO, no estilo compacto do sistema anterior. */
.rolagem > table:has(.acoes-th) td[data-rotulo="Situação"]{
  min-width:118px;overflow-wrap:normal;word-break:normal}
.rolagem > table:has(.acoes-th) td[data-rotulo="Situação"] .etiqueta{
  white-space:normal !important;max-width:100% !important;
  overflow:visible !important;text-overflow:clip !important;
  overflow-wrap:normal;word-break:normal;
  font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1.22;
  padding:2px 6px;border-radius:3px;gap:4px}
.rolagem > table:has(.acoes-th) td[data-rotulo="Situação"] .etiqueta .ponto{width:5px;height:5px;flex:none}

/* menu suspenso das ações */
.menu{position:fixed;z-index:120;background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra-alta);padding:6px;max-height:80vh;overflow:auto}
.menu-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;
  padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--tinta)}
.menu-item:hover{background:var(--acento-tenue)}
.menu-item.perigo{color:var(--vermelho)}
.menu-icone{width:16px;display:inline-flex;justify-content:center;flex:0 0 16px;font-size:13px}
.menu-seta{color:var(--tinta-3);font-size:12px}
.menu-linha{height:1px;background:var(--borda);margin:4px 6px}
.menu-sub .menu-item{padding-left:30px;font-size:13px;color:var(--tinta-2,#475569)}
.menu-sub .menu-item::before{content:"»";position:absolute;margin-left:-16px;color:var(--tinta-3)}
.menu-sub .menu-item{position:relative}

/* ---- central de alertas ---- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;align-items:start}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kanban{grid-template-columns:1fr}}

.coluna-alertas{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);display:flex;flex-direction:column;
  max-height:calc(100vh - 200px);min-height:150px}
.coluna-cab{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--borda);
  font-weight:600;font-size:13px}
.coluna-cab .ponto{width:9px;height:9px}
.coluna-corpo{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}

.alerta{border:1px solid var(--borda);border-left:3px solid var(--tinta-3);border-radius:10px;
  padding:12px 13px;background:var(--papel);transition:box-shadow .12s,border-color .12s}
.alerta:hover{box-shadow:var(--sombra);border-color:var(--borda-forte)}
.alerta.lido{opacity:.62}
.alerta-topo{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.alerta-tipo{font-size:11.5px;font-weight:600;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.3px}
.alerta-titulo{font-weight:600;font-size:13.5px;line-height:1.35}
.alerta-detalhe{font-size:12.5px;color:var(--tinta-2);margin-top:3px;line-height:1.45}
.alerta-mensagem{margin-top:7px;padding:7px 9px;background:var(--verde-tenue);
  color:var(--tinta);border-radius:7px;
  font-size:12.5px;white-space:pre-wrap;line-height:1.45}
.alerta-pe{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:8px}
.alerta-acoes{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;padding-top:8px;border-top:1px solid var(--borda)}

.feed{max-height:420px;overflow-y:auto}
.feed-item{padding:11px 16px;border-bottom:1px solid var(--borda)}
.feed-item:last-child{border-bottom:0}
.feed-topo{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px}
.feed-msg{margin-top:4px;font-size:13px;color:var(--tinta-2);white-space:pre-wrap;line-height:1.45}

/* ---------- painel A receber / Fiado (na Central) ---------- */
.lista-fiado{max-height:460px;overflow-y:auto}
.fiado-item{padding:11px 16px;border-bottom:1px solid var(--borda);border-left:3px solid transparent}
.fiado-item:last-child{border-bottom:0}
.fiado-item.vencido{border-left-color:var(--vermelho);background:var(--vermelho-tenue)}
.fiado-topo{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-size:14px}
.fiado-titulos{margin:6px 0 8px}
.fiado-titulo{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;font-size:12.5px;padding:3px 0}
.fiado-pe{display:flex;align-items:center}

/* ---------- kanban da lista de ordens de serviço ----------
   Uma coluna por situação, com o total de cada uma no alto.
   Rola na horizontal quando há muitas situações, que é o normal
   aqui: a Casa do Mac trabalha com 23 delas.                   */
.kanban-os{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.coluna-os{flex:0 0 280px;background:var(--papel);border:1px solid var(--borda);
  border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
.coluna-os-cab{padding:12px 14px;background:var(--papel-2);border-bottom:2px solid var(--borda)}
.coluna-os-corpo{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.cartao-os{background:var(--papel);border:1px solid var(--borda);border-radius:10px;padding:11px 13px;
  cursor:pointer;transition:box-shadow .12s,transform .12s,border-color .12s}
.cartao-os:hover{box-shadow:var(--sombra);transform:translateY(-1px);border-color:var(--borda-forte)}

/* fichinhas de filtro ativo */
.etiqueta button:hover{opacity:.6}

@media (max-width:760px){
  .coluna-os{flex-basis:86vw}
}

/* ---------- painel das ordens de serviço ---------- */
.grade-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px}
/* Cartão de número: fundo claro e uma faixa fina na cor do estado.
   Cinco blocos sólidos coloridos lado a lado viram semáforo de posto. */
.cartao-numero{border-radius:10px;padding:16px 18px;position:relative;overflow:hidden;
  background:var(--papel)!important;color:var(--tinta);border:1px solid var(--borda);
  transition:transform .12s,box-shadow .12s}
.cartao-numero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor}
.cartao-numero:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
/* O número é preto sempre. Cinco números coloridos lado a lado viram
   semáforo; a cor do estado fica só na faixa da lateral. */
.cartao-numero-valor{font-family:var(--display);font-size:36px;font-weight:500;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.cartao-numero-rotulo{font-size:11px;margin-top:8px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-2)}
.cartao-numero-detalhe{font-size:11.5px;margin-top:3px;color:var(--tinta-3)}

.barra-empilhada{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--trilho)}
.legenda-situacoes{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.legenda-item{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;padding:2px 0}
.legenda-item:hover{text-decoration:underline}

.grafico-barras{display:flex;gap:10px;align-items:flex-end;height:190px;position:relative;padding-top:18px}
.linha-media{position:absolute;left:0;right:0;border-top:1px dashed #94a3b8;z-index:1}
.barra-mes{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
/* Barras cinza, e a maior em limão — é o mês que você veio olhar. */
.barra-corpo{width:100%;max-width:56px;background:var(--barra-vazia);border-radius:5px 5px 0 0;z-index:2;
  transition:background .12s}
.barra-mes:hover .barra-corpo,.barra-mes.maior .barra-corpo{background:var(--acento)}
.barra-valor{font-size:10px;color:var(--tinta-3);margin-bottom:4px;white-space:nowrap}
.barra-rotulo{font-size:11px;color:var(--tinta-3);margin-top:6px;white-space:nowrap}

.linha-tecnico{display:flex;align-items:center;gap:10px;padding:5px 0}
.nome-tecnico{flex:0 0 116px;font-size:12px;text-align:right;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trilho-tecnico{flex:1;background:#ececE7;border-radius:999px;height:16px;overflow:hidden}
.barra-tecnico{height:100%;background:var(--acento);border-radius:999px}
.valor-tecnico{flex:0 0 96px;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .nome-tecnico{flex-basis:80px}
  .valor-tecnico{flex-basis:78px}
}


/* ---------- acabamento ---------- */
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
::selection{background:var(--acento);color:var(--acento-tinta)}
.feed-item,.alerta{border-radius:10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- ajustes de densidade ----------
   A barra de cima da lista tem muita coisa; apertar um pouco evita que o
   botão principal caia sozinho para a linha de baixo. */
.barra .botao{padding:8px 13px}
.barra input,.barra select{min-width:130px;padding:8px 11px}
.barra .botao.claro{font-weight:500}

/* Ícones de ação já vêm coloridos em tom suave (bloco .acao mais acima) —
   sem grayscale, para ficarem fáceis de achar como no sistema anterior. */

/* Colunas que não devem quebrar */
th{white-space:nowrap}


/* ==================================================================
   Temas — escolhidos em Configurações, guardados no navegador de quem
   escolheu. Cada pessoa da loja vê do jeito que prefere.

   Regra de cada acento: a cor e a tinta que se lê por cima dela andam
   juntas. Limão e âmbar são claros, então pedem preto; azul, roxo,
   verde e vinho são escuros e pedem branco.
   ================================================================== */
:root[data-cor="limao"]{--acento:#c7f33c;--acento-forte:#b2e019;--acento-tenue:#e1f2ae;--acento-tinta:#000000}
:root[data-cor="azul"]{--acento:#2f6fd0;--acento-forte:#2459ac;--acento-tenue:#e7eefb;--acento-tinta:#fff}
:root[data-cor="verde"]{--acento:#1f8a5c;--acento-forte:#176e49;--acento-tenue:#e5f3ec;--acento-tinta:#fff}
:root[data-cor="ambar"]{--acento:#f0a92b;--acento-forte:#d8941c;--acento-tenue:#fdf3e0;--acento-tinta:#101010}
:root[data-cor="roxo"]{--acento:#6d4ad9;--acento-forte:#5a3ab8;--acento-tenue:#eeeafb;--acento-tinta:#fff}
:root[data-cor="vinho"]{--acento:#a6283f;--acento-forte:#871f33;--acento-tenue:#f8e8eb;--acento-tinta:#fff}
:root[data-cor="grafite"]{--acento:#2e2e2c;--acento-forte:#151514;--acento-tenue:#ebebe7;--acento-tinta:#fff}

/* ---- modo escuro ---- */
:root[data-tema="escuro"]{
  /* O acento-tenue nasce da cor escolhida misturada com o fundo escuro.
     Sem isto ele ficava claro (vem do bloco data-cor) e o texto claro por
     cima sumia — foi o que deixou a última notícia e o balão do WhatsApp
     ilegíveis no escuro. */
  --acento-tenue:color-mix(in srgb, var(--acento) 20%, #121312);
  --fundo:#121312; --papel:#1b1c1a; --papel-2:#212220;
  --tinta:#ecece8; --tinta-2:#a9a9a2; --tinta-3:#75756e;
  --borda:#2c2d2a; --borda-forte:#3d3e3a;
  --suave:#202120; --suave-2:#262724; --trilho:#262724; --barra-vazia:#2e2f2c;
  --t-lima:#242a12;   --t-lima-f:#b9d45c;
  --t-ceu:#15222c;    --t-ceu-f:#7fb4d8;
  --t-menta:#132620;  --t-menta-f:#63c095;
  --t-pessego:#2b1c12; --t-pessego-f:#dc9a6a;
  --t-lilas:#1e1a2e;  --t-lilas-f:#a294dd;
  --t-areia:#262117;  --t-areia-f:#c9ae62;
  --t-rosa:#2a161b;   --t-rosa-f:#dd8a9d;
  --brim-tenue:#1a2028;
  --verde-tenue:#16251d; --vermelho-tenue:#2a1719; --ambar-tenue:#2a2113;
  --verde:#4caa7d; --vermelho:#e06464; --ambar:#e0a144;
  --azul:#6a9be8; --azul-tenue:#182430;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --sombra-alta:0 16px 48px -16px rgba(0,0,0,.8);
}
:root[data-tema="escuro"] .lateral{background:#0e0f0e;border-right-color:#242522}
:root[data-tema="escuro"] .login{background:#0e0f0e}
/* ...mas a barra em destaque continua sendo a do acento, no claro e no escuro */
:root[data-tema="escuro"] .barra-mes.maior .barra-corpo,
:root[data-tema="escuro"] .barra-mes:hover .barra-corpo{background:var(--acento)}
:root[data-tema="escuro"] .modal{background:rgba(0,0,0,.66)}
:root[data-tema="escuro"] tbody tr:hover{background:#212220}
:root[data-tema="escuro"] .recado{background:var(--papel);border:1px solid var(--borda-forte)}
:root[data-tema="escuro"] img{opacity:.92}

/* ==================================================================
   Barra lateral: os itens agrupados pelo ciclo do aparelho.
   O título do grupo é pequeno e cinza — ele orienta, não compete.
   ================================================================== */
.lateral .links{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0}
.grupo-menu{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.grupo-titulo{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);padding:4px 12px 4px}

/* claro/escuro: um botão só, no pé da lateral */
.lateral .tema{padding:10px 4px 4px;margin:0;display:block}
.troca-tema{background:none;border:1px solid var(--borda-forte);border-radius:var(--raio-p);
  width:100%;padding:8px 12px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--tinta-2);
  display:inline-flex;align-items:center;gap:8px;justify-content:flex-start}
.troca-tema:hover{border-color:var(--tinta-3);color:var(--tinta);background:var(--fundo)}
/* meia-lua desenhada, não glifo: ◐ não existe em toda fonte e vira quadradinho */
.meia-lua{width:13px;height:13px;border-radius:50%;flex:none;border:1.5px solid currentColor;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.meia-lua.cheia{background:linear-gradient(90deg,transparent 50%,currentColor 50%)}
.botao .meia-lua{border-color:currentColor}

/* paleta, em Configurações › Temas */
.paleta{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.carta-cor{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;
  background:var(--papel);border:1px solid var(--borda-forte);border-radius:var(--raio-p);
  font-weight:600;font-size:13.5px;color:var(--tinta);text-align:left}
.carta-cor:hover{border-color:var(--tinta-3)}
.carta-cor.escolhida{border-color:var(--tinta);border-width:2px;padding:10px 12px}
.amostra{width:22px;height:22px;border-radius:6px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

/* ==================================================================
   Celular. Aqui nada fica na horizontal: a barra lateral vira gaveta
   que entra pela esquerda, empilhada, com os mesmos grupos do ciclo.
   O que fica fixo no alto é só o que se usa o tempo todo — o botão do
   menu, onde você está, e a loja.
   ================================================================== */
.barra-celular{display:none}
.veu{display:none}
.seletor-loja{width:auto}
.loja-na-gaveta{display:none}

@media(max-width:900px){
  .layout{grid-template-columns:1fr;display:block}

  .barra-celular{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
    background:var(--papel);border-bottom:1px solid var(--borda);padding:9px 12px;
    box-shadow:0 1px 0 rgba(16,16,16,.03)}
  .titulo-celular{flex:1;font-family:var(--display);font-weight:600;font-size:16px;
    letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seletor-loja.compacto{max-width:42vw;padding:7px 9px;font-size:12.5px;font-weight:600;
    border-radius:var(--raio-p)}
  .seletor-loja.no-topo{display:none}

  .hamburguer{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;
    width:38px;height:38px;padding:0 9px;background:var(--papel);cursor:pointer;
    border:1px solid var(--borda-forte);border-radius:var(--raio-p)}
  .hamburguer span{display:block;height:2px;background:var(--tinta);border-radius:2px}
  .hamburguer:active{background:var(--fundo)}

  /* a gaveta */
  .lateral{
    position:fixed;top:0;left:0;bottom:0;width:270px;max-width:84vw;z-index:60;
    flex-direction:column;overflow-y:auto;padding:18px 12px 20px;
    border-right:1px solid var(--borda);box-shadow:var(--sombra-alta);
    transform:translateX(-102%);transition:transform .2s ease}
  :root.gaveta-aberta .lateral{transform:translateX(0)}
  .lateral .marca,.lateral .rodape{display:block}
  /* no celular a gaveta rola inteira; nada de duas rolagens embutidas */
  .lateral .links{overflow:visible;flex:0 0 auto;min-height:auto}
  .lateral .rodape{margin-top:18px}
  .lateral a{padding:11px 12px;font-size:14.5px}
  .grupo-menu{margin-bottom:14px}

  .loja-na-gaveta{display:block;margin:0 0 16px;padding:0 2px}
  .loja-na-gaveta label{margin-bottom:5px}
  .seletor-loja.cheio{width:100%}

  .veu{display:block;position:fixed;inset:0;z-index:50;background:rgba(16,16,16,.45);
    opacity:0;pointer-events:none;transition:opacity .2s}
  :root.gaveta-aberta .veu{opacity:1;pointer-events:auto}
  :root.gaveta-aberta{overflow:hidden}

  .conteudo{padding:16px 14px 80px;max-width:none}
  /* no celular o título já está na barra de cima */
  .topo h1{display:none}
  .topo{margin-bottom:14px;gap:8px}

  /* nada de rolagem lateral de menu: tudo empilha */
  .barra{gap:7px}
  .barra input,.barra select{min-width:0;flex:1 1 140px}
  .barra .botao{flex:1 1 auto;justify-content:center}
  .grade{gap:10px}
  .g4,.g5{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .indicador{padding:14px 15px}
  .indicador b{font-size:27px}
  .modal{padding:0}
  .modal .caixa{border-radius:0;min-height:100vh}
  .modal .pe{border-radius:0;position:sticky;bottom:0}
  .cartao .corpo{padding:14px}
  .linha{grid-template-columns:1fr}
  .kanban-os{gap:10px}
  .coluna-os{flex-basis:82vw;max-height:none}
  .grade-numeros{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;padding:10px}
  .cartao-numero-valor{font-size:28px}
  table{font-size:13px}
  td,th{padding:10px 11px}
}

/* ------------------------------------------------------------------
   Tabela no celular: cada linha vira um cartão empilhado, com o nome
   da coluna ao lado do valor. Ninguém arrasta tabela de doze colunas
   para o lado num telefone — some tudo o que importa.
   ------------------------------------------------------------------ */
@media(max-width:700px){
  table.empilha thead{display:none}
  table.empilha,table.empilha tbody,table.empilha tr,table.empilha td{display:block;width:100%}
  table.empilha tr{background:var(--papel);border:1px solid var(--borda);border-radius:11px;
    margin-bottom:9px;padding:6px 2px;box-shadow:var(--sombra)}
  table.empilha tr:hover{background:var(--papel)}
  table.empilha td{border:0;padding:3px 13px;display:flex;gap:10px;align-items:baseline;
    text-align:left;white-space:normal}
  table.empilha td[data-rotulo]::before{content:attr(data-rotulo);flex:0 0 31%;
    font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--tinta-3);line-height:1.5}
  /* Numero e valor nao precisam de rotulo: o proprio dado ja diz o que e.
     Tirar esses dois corta duas linhas de rotulo em cada cartao. */
  table.empilha td[data-rotulo="Nº"]::before,
  table.empilha td[data-rotulo="Valor"]::before{display:none}
  table.empilha td[data-rotulo="Nº"]{font-weight:700;font-size:15px;padding-top:6px}
  table.empilha td[data-rotulo="Valor"]{font-weight:700}
  table.empilha td.num{text-align:left}
  /* o valor pode ser longo (nome de situação, equipamento): quebra em vez
     de empurrar a página para o lado */
  table.empilha td>*{min-width:0}
  table.empilha td{overflow-wrap:anywhere}
  table.empilha .etiqueta{white-space:normal;text-align:left}
  table.empilha td.acoes-td{padding-top:9px;margin-top:5px;border-top:1px solid var(--borda);
    position:static;box-shadow:none;background:none}
  table.empilha .acoes-linha{flex-wrap:wrap}
  /* o cartão-mãe some: quem é cartão agora é cada linha */
  .cartao.rolagem:has(table.empilha){border:0;background:none;box-shadow:none;overflow:visible}
}

/* telas bem estreitas: o essencial continua legível */
@media(max-width:420px){
  .titulo-celular{font-size:15px}
  .seletor-loja.compacto{max-width:36vw}
  .grade-numeros{grid-template-columns:1fr 1fr}
}


/* ==================================================================
   Componentes novos — a régua veio das referências que o Gilson mandou
   (Education Hub e LearnHub), traduzida para a nossa paleta.

   O que foi aproveitado: cartão em tom suave com o número grande e preto
   por cima, distintivo redondo com o ícone, pílula de alternância, e a
   grade de horas da agenda com a linha do agora.

   O que NÃO foi aproveitado: a paleta pastel inteira como decoração. Ali
   a cor é enfeite; aqui cada tom significa uma etapa do ciclo, e é sempre
   o mesmo tom para a mesma etapa em toda a tela.
   ================================================================== */

/* ---- cartão de número, no estilo da referência ---- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tile{position:relative;border-radius:18px;padding:18px 20px 16px;background:var(--papel);
  border:1px solid var(--borda);overflow:hidden;display:flex;flex-direction:column;gap:2px;
  min-height:128px;transition:transform .14s,box-shadow .14s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.tile.clicavel{cursor:pointer}
.tile .selo-topo{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:8px}
.tile .valor{font-family:var(--display);font-size:40px;font-weight:500;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.tile .nome{font-weight:600;font-size:14.5px;line-height:1.25;margin-top:7px;color:var(--tinta)}
.tile .pe{margin-top:auto;padding-top:9px;font-size:12px;color:var(--tinta-2);display:flex;
  align-items:center;gap:5px}
/* o distintivo redondo do canto, como nos cartões da referência */
.tile .marca-tile{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.55)}
:root[data-tema="escuro"] .tile .marca-tile{background:rgba(255,255,255,.08)}

.tile.lima{background:var(--t-lima);border-color:transparent}
.tile.ceu{background:var(--t-ceu);border-color:transparent}
.tile.menta{background:var(--t-menta);border-color:transparent}
.tile.pessego{background:var(--t-pessego);border-color:transparent}
.tile.lilas{background:var(--t-lilas);border-color:transparent}
.tile.areia{background:var(--t-areia);border-color:transparent}
.tile.rosa{background:var(--t-rosa);border-color:transparent}
.tile.lima .pe{color:var(--t-lima-f)}
.tile.ceu .pe{color:var(--t-ceu-f)}
.tile.menta .pe{color:var(--t-menta-f)}
.tile.pessego .pe{color:var(--t-pessego-f)}
.tile.lilas .pe{color:var(--t-lilas-f)}
.tile.areia .pe{color:var(--t-areia-f)}
.tile.rosa .pe{color:var(--t-rosa-f)}
/* o tile escuro, para o resumo do dia — um só por tela */
.tile.tinta{background:var(--tinta);border-color:transparent}
.tile.tinta .valor,.tile.tinta .nome{color:var(--papel)}
.tile.tinta .selo-topo,.tile.tinta .pe{color:color-mix(in srgb,var(--papel) 66%,transparent)}
.tile.tinta .marca-tile{background:rgba(255,255,255,.12)}

/* barra de progresso dentro do tile escuro, como o "8/12" da referência */
.progresso{height:9px;border-radius:999px;background:color-mix(in srgb,var(--papel) 22%,transparent);
  overflow:hidden;margin-top:10px}
.progresso i{display:block;height:100%;border-radius:999px;background:var(--acento)}

/* ---- pílula de alternância (Dia | Semana) ---- */
.pilulas{display:inline-flex;background:var(--suave-2);border-radius:999px;padding:3px;gap:2px}
.pilulas button{border:0;background:none;padding:7px 15px;border-radius:999px;cursor:pointer;
  font-weight:600;font-size:13px;color:var(--tinta-2);white-space:nowrap}
.pilulas button:hover{color:var(--tinta)}
.pilulas button.ativa{background:var(--tinta);color:var(--papel)}

/* ---- agenda: grade de horas ----
   Uma coluna de horas à esquerda e as OS como cartões com faixa colorida.
   A linha vermelha fina é agora. */
.agenda{display:grid;grid-template-columns:58px 1fr;background:var(--papel);
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.agenda-horas{border-right:1px solid var(--borda);background:var(--papel-2)}
.agenda-hora{height:64px;padding:0 10px;font-size:11px;color:var(--tinta-3);text-align:right;
  font-variant-numeric:tabular-nums;position:relative;top:-7px}
.agenda-pista{position:relative}
.agenda-linha{height:64px;border-bottom:1px solid var(--borda)}
.agenda-linha:nth-child(odd){background:var(--papel-2)}
.agora{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--vermelho);z-index:3}
.agora::before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--vermelho)}
.agora span{position:absolute;right:8px;top:-9px;background:var(--vermelho);color:#fff;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px}

.evento{position:absolute;left:8px;right:10px;border-radius:10px;padding:7px 11px 7px 13px;
  background:var(--papel);border:1px solid var(--borda);cursor:pointer;overflow:hidden;
  box-shadow:var(--sombra);transition:transform .1s}
.evento:hover{transform:translateX(2px)}
.evento::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor}
.evento .quando{font-size:10.5px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.evento .quem{font-weight:600;font-size:13.5px;color:var(--tinta);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evento .oque{font-size:12px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evento.lima{background:var(--t-lima);border-color:transparent;color:var(--t-lima-f)}
.evento.ceu{background:var(--t-ceu);border-color:transparent;color:var(--t-ceu-f)}
.evento.menta{background:var(--t-menta);border-color:transparent;color:var(--t-menta-f)}
.evento.pessego{background:var(--t-pessego);border-color:transparent;color:var(--t-pessego-f)}
.evento.lilas{background:var(--t-lilas);border-color:transparent;color:var(--t-lilas-f)}
.evento.rosa{background:var(--t-rosa);border-color:transparent;color:var(--t-rosa-f)}

/* semana: sete colunas de dia */
.semana{display:grid;grid-template-columns:52px repeat(var(--dias,7),minmax(0,1fr));
  background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.dia-cab{padding:11px 8px;text-align:center;border-bottom:1px solid var(--borda);
  border-left:1px solid var(--borda);background:var(--papel-2)}
.dia-cab b{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1}
.dia-cab span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.dia-cab.hoje{background:var(--acento)}
.dia-cab.hoje b,.dia-cab.hoje span{color:var(--acento-tinta)}
.dia-coluna{border-left:1px solid var(--borda);min-height:120px;padding:8px 6px;
  display:flex;flex-direction:column;gap:6px}
.dia-coluna.fds{background:var(--papel-2)}
.ficha{border-radius:9px;padding:7px 9px;cursor:pointer;font-size:12px;border-left:3px solid currentColor}
.ficha b{display:block;font-size:12.5px;color:var(--tinta);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha small{color:var(--tinta-2);font-size:11px}
.ficha.lima{background:var(--t-lima);color:var(--t-lima-f)}
.ficha.ceu{background:var(--t-ceu);color:var(--t-ceu-f)}
.ficha.menta{background:var(--t-menta);color:var(--t-menta-f)}
.ficha.pessego{background:var(--t-pessego);color:var(--t-pessego-f)}
.ficha.lilas{background:var(--t-lilas);color:var(--t-lilas-f)}
.ficha.rosa{background:var(--t-rosa);color:var(--t-rosa-f)}

/* ---- linha do tempo da bancada ---- */
.trilha{display:flex;flex-direction:column;gap:10px}
.parada{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.parada-quando{text-align:right;padding-top:14px}
.parada-quando b{display:block;font-family:var(--display);font-size:20px;font-weight:600;
  line-height:1;letter-spacing:-.03em}
.parada-quando span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.parada-cartao{border-radius:16px;padding:15px 17px;border:1px solid var(--borda);
  background:var(--papel);border-left:4px solid currentColor;color:var(--tinta-3)}
.parada-cartao.no-prazo{color:var(--verde)}
.parada-cartao.apertado{color:var(--ambar)}
.parada-cartao.estourado{color:var(--vermelho)}

/* ---- distintivo redondo com ícone (linha de KPI da referência) ---- */
.distintivo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:16px;background:var(--suave-2)}

/* ---- anel de progresso ---- */
.anel{--pct:0;width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--acento) calc(var(--pct)*1%),var(--trilho) 0)}
.anel i{width:32px;height:32px;border-radius:50%;background:var(--papel);display:grid;
  place-items:center;font-style:normal;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .tile{min-height:112px;padding:15px 16px 14px}
  .tile .valor{font-size:32px}
  .agenda{grid-template-columns:46px 1fr}
  .semana{grid-template-columns:42px repeat(var(--dias,7),minmax(64px,1fr));overflow-x:auto}
  .parada{grid-template-columns:1fr;gap:4px}
  .parada-quando{text-align:left;padding-top:0;display:flex;gap:8px;align-items:baseline}
}

/* A etiqueta de situação pode ser longa ("PEÇA DISPONÍVEL, AGUARDANDO
   CLIENTE"). Dentro do cartão estreito do alerta ela precisa quebrar,
   senão vaza por cima da coluna vizinha. */
.alerta .etiqueta,.coluna-alertas .etiqueta{white-space:normal;text-align:left;line-height:1.3}
/* Não deixar o flexbox da coluna esmagar o cartão quando há muitos: cada cartão
   mantém a altura natural (OS · nome · detalhe · ações) e a coluna rola. */
.alerta{overflow:hidden;flex-shrink:0}


/* ==================================================================
   v81 — responsividade da lista (OS, vendas, etc.)
   1) "Só em aberto" herdava min-width:130px do .barra input e virava
      uma caixa gigante: a barra de filtros ficava desalinhada e quebrava.
   2) Entre ~700 e ~1150px a tabela passava da largura e rolava para o
      lado; a coluna Ações (fixa) cobria Situação e Valor. Agora ela
      compacta o espaçamento até ~1280px e, abaixo de 1100px, vira
      cartões (o mesmo que já acontecia no celular).
   ================================================================== */
.barra input[type="checkbox"]{min-width:0;width:auto;padding:0;flex:none}

@media(max-width:1280px){
 .rolagem > table:has(.acoes-th) td,
 .rolagem > table:has(.acoes-th) th{padding-left:8px;padding-right:8px}
}

@media(max-width:1100px) and (min-width:701px){
 .rolagem > table.empilha:has(.acoes-th) thead{display:none}
 .rolagem > table.empilha:has(.acoes-th),
 .rolagem > table.empilha:has(.acoes-th) tbody,
 .rolagem > table.empilha:has(.acoes-th) tr,
 .rolagem > table.empilha:has(.acoes-th) td{display:block;width:100%}
 .rolagem > table.empilha:has(.acoes-th) tr{background:var(--papel);border:1px solid var(--borda);
  border-radius:11px;margin-bottom:9px;padding:6px 2px;box-shadow:var(--sombra)}
 .rolagem > table.empilha:has(.acoes-th) tr:hover{background:var(--papel)}
 .rolagem > table.empilha:has(.acoes-th) td{border:0;padding:5px 13px;display:flex;gap:12px;
  align-items:baseline;text-align:left;white-space:normal}
 .rolagem > table.empilha:has(.acoes-th) td[data-rotulo]::before{content:attr(data-rotulo);flex:0 0 22%;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);line-height:1.6}
 .rolagem > table.empilha:has(.acoes-th) td.num{text-align:left}
 .rolagem > table.empilha:has(.acoes-th) td>*{min-width:0}
 .rolagem > table.empilha:has(.acoes-th) td.acoes-td{padding-top:9px;margin-top:5px;border-top:1px solid var(--borda);
  position:static;box-shadow:none;background:none}
 .rolagem > table.empilha:has(.acoes-th) .acoes-linha{flex-wrap:wrap}
 .cartao.rolagem:has(table.empilha .acoes-th){border:0;background:none;box-shadow:none;overflow:visible}

 /* TABLET EM DUAS COLUNAS (29/09/2026)
    O cartao empilhado continua — desempilhar traria de volta a coluna Ações
    fixa cobrindo Situação e Valor, que foi o motivo deste bloco existir.
    O que muda: num iPad em pé sobrava metade da largura vazia e cada OS
    ocupava 418px, ou seja 2 OS por tela. Agora os campos vão em duas colunas
    e a OS cabe em ~250px. Equipamentos e a barra de ações continuam na
    largura inteira, porque são os dois que realmente precisam de espaço. */
 .rolagem > table.empilha:has(.acoes-th) tr{
  display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start;padding:8px 4px}
 .rolagem > table.empilha:has(.acoes-th) td[data-rotulo="Equipamentos"],
 .rolagem > table.empilha:has(.acoes-th) td.acoes-td,
 .rolagem > table.empilha:has(.acoes-th) td:not([data-rotulo]){grid-column:1 / -1}
 .rolagem > table.empilha:has(.acoes-th) td{padding:3px 10px}
 /* número e valor falam por si: sem rótulo, e em destaque */
 .rolagem > table.empilha:has(.acoes-th) td[data-rotulo="Nº"]::before,
 .rolagem > table.empilha:has(.acoes-th) td[data-rotulo="Valor"]::before{display:none}
 .rolagem > table.empilha:has(.acoes-th) td[data-rotulo="Nº"]{font-weight:700;font-size:16px}
 .rolagem > table.empilha:has(.acoes-th) td[data-rotulo="Valor"]{font-weight:700;justify-content:flex-end}
 .rolagem > table.empilha:has(.acoes-th) td[data-rotulo]::before{flex:0 0 40%}
}


/* ==================================================================
   v85 — ficha da OS mais curta: janela mais larga e espaçamentos menores.
   O que se usa pouco fica recolhido (<details>) no próprio JS.
   ================================================================== */
.caixa.ficha-larga{max-width:1120px}
.ficha-compacta .cartao{margin-bottom:10px !important}
.ficha-compacta .cartao .cab{padding:9px 14px;font-size:13.5px}
.ficha-compacta .cartao .corpo{padding:12px 14px}
.ficha-compacta .cartao.recolhido{padding:0}
.ficha-compacta .cartao.recolhido > summary:hover{background:var(--suave)}
.ficha-compacta .modal .corpo, .ficha-compacta > .corpo{padding:16px 20px}
.ficha-compacta .campo{margin-bottom:10px}
.ficha-compacta .linha{gap:10px}

/* ---- v87 · lista de OS compacta (proposta) ----
   Nome e modelo continuam COMPLETOS (nada de "..."): em tela larga ganham mais
   largura para caber numa linha; em tela estreita quebram como hoje. */
.rolagem > table:has(.acoes-th) td{padding-top:6px !important;padding-bottom:6px !important;vertical-align:middle}
.rolagem > table:has(.acoes-th) th{padding-top:8px;padding-bottom:8px;font-size:11px;vertical-align:middle}
@media (min-width:1360px){
  .rolagem > table:has(.acoes-th) td[data-rotulo="Cliente"] > div{max-width:360px !important;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  .rolagem > table:has(.acoes-th) td[data-rotulo="Equipamentos"] > div{max-width:460px !important}
  .rolagem > table:has(.acoes-th) td[data-rotulo="Equipamentos"] > div > small{display:inline !important;margin-left:6px}
}
.rolagem > table:has(.acoes-th) td[data-rotulo="Cliente"] small{font-size:11px}
.rolagem > table:has(.acoes-th) td[data-rotulo="Entrada"] > div{display:flex;gap:6px;align-items:baseline}
.rolagem > table:has(.acoes-th) td[data-rotulo="Entrada"] small{font-size:11px}
/* etiquetas de situação sólidas, como no sistema anterior */
.rolagem > table:has(.acoes-th) td[data-rotulo="Situação"] .etiqueta{
  background:var(--cor) !important;color:#fff !important;font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.18);padding:3px 8px}
.rolagem > table:has(.acoes-th) td[data-rotulo="Situação"] .etiqueta .ponto{display:none}
/* botões de ação menores */
.rolagem .acoes-linha{gap:4px}
.rolagem .acoes-linha .acao{width:26px;height:26px;min-width:0;padding:0;font-size:12px;border-radius:6px;line-height:1}
.rolagem > table:has(.acoes-th) th.acoes-th{width:122px !important}
/* etiqueta amarela: texto escuro (branco não lê sobre amarelo) */
.rolagem > table:has(.acoes-th) td[data-rotulo="Situação"] .etiqueta[style*="#eab308"]{color:#2b2100 !important;text-shadow:none}


/* ---------------------------------------------------------------------------
   POST-IT DA LISTA DE OS
   Antes isto era uma etiqueta de 90px cortada com reticencias: "qual laud...",
   "procurar t...". Recado que nao da para ler nao serve para nada. Agora e um
   papel amarelo de verdade, pregado logo abaixo do numero da OS, com o texto
   quebrando em ate 3 linhas. Nota longa continua inteira no title, ao passar
   o mouse (o campo aceita 280 caracteres).
   --------------------------------------------------------------------------- */
.postit{position:relative;display:inline-block;vertical-align:top;
  width:138px;margin:9px 2px 4px 0;padding:9px 9px 10px;
  background:linear-gradient(165deg,#fff9bd 0%,#ffef7a 62%,#f6de58 100%);
  color:#4a3d00;font-size:11px;line-height:1.32;text-align:left;font-weight:500;
  border-radius:2px;transform:rotate(-1.4deg);
  box-shadow:0 1px 2px rgba(0,0,0,.16),0 8px 13px -8px rgba(0,0,0,.35)}
.postit .txt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;overflow-wrap:anywhere}
/* o alfinete */
.postit::before{content:"";position:absolute;top:-6px;left:50%;margin-left:-6px;
  width:12px;height:12px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 34% 30%,#ff9a9a 0%,#e02b2b 62%,#a80f0f 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.4)}
/* a pontinha dobrada do papel */
.postit::after{content:"";position:absolute;right:0;bottom:0;width:15px;height:15px;
  background:#efd64b;clip-path:polygon(100% 0,100% 100%,0 100%);
  box-shadow:-1px -1px 2px rgba(0,0,0,.12) inset}
.postit.vermelho{background:linear-gradient(165deg,#ffdede 0%,#ffbcbc 62%,#f7a2a2 100%);
  color:#6d1220}
.postit.vermelho::after{background:#f09e9e}
/* No celular, lista empilhada: o papel ocupa a largura toda e fica reto. */
table.empilha .postit{width:100%;transform:none;margin-left:0}
:root[data-tema="escuro"] .postit{box-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 14px -8px rgba(0,0,0,.7)}


/* ===========================================================================
   REFINO VISUAL
   Passe de acabamento: so tipografia, ritmo, raio, sombra e alinhamento de
   numero. Nenhuma funcao, nenhuma tela e nenhuma regra de negocio muda aqui.
   =========================================================================== */
:root{
  --raio-g:16px;
  --sombra:0 1px 2px rgba(16,16,16,.03), 0 10px 30px -18px rgba(16,16,16,.16);
  --sombra-alta:0 20px 56px -20px rgba(16,16,16,.26);
  --borda:#eaeae5; --borda-forte:#dcdcd5;
}
/* ESCALA DA REFERENCIA: Heading 34 / Title 28 / Body 16.
   O corpo sobe de 14 para 16. A tabela fica em 14: sao 9 colunas e ate 46
   linhas por tela, e a 16 a lista deixaria de caber. Se voce preferir 16
   tambem na lista, e uma linha. */
body{font-size:16px;line-height:1.5;letter-spacing:0;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.024em}
.topo h1{font-size:34px;letter-spacing:-.028em;line-height:1.1}
.modal .cab h2{font-size:28px;letter-spacing:-.024em}
h2{font-size:28px}
h3{font-size:21px}
table{font-size:14px}
label{font-size:11.5px}

/* RAIO da referencia: cartao bem arredondado, controle macio, etiqueta em pilula. */
:root{--raio-p:10px; --raio:14px; --raio-g:20px}

/* NUMERO EM GRADE.
   Cada digito com a mesma largura. E isto, mais do que qualquer outra coisa,
   que endireita a coluna de valor, de data e de quantidade. */
.num, td.num, .indicador b, .dado,
table td.num, table th.num{font-variant-numeric:tabular-nums}

/* O numero grande do cartao: 34px, o Heading da referencia. */
.indicador b{font-family:var(--ui);font-size:34px;font-weight:600;
  letter-spacing:-.03em;line-height:1.05}
.indicador span{letter-spacing:.085em;font-weight:600;margin-top:10px}

/* RAIO EM TRES DEGRAUS: 8 para controle, 12 para bloco, 16 para cartao,
   pilula para etiqueta. Antes eram doze valores diferentes. */
.cartao{border-radius:var(--raio-g)}
.botao, input, select, textarea{border-radius:var(--raio-p)}
.etiqueta{border-radius:999px;padding:4px 10px;line-height:1.3;
  font-weight:600;letter-spacing:.01em}

/* ALTURA UNICA DE CONTROLE: botao, campo e select na mesma linha param de
   desencontrar. So min-height, para nao mexer no comportamento de nenhum. */
.botao{min-height:34px}
.botao.pequeno{min-height:28px}
input, select{min-height:34px}

/* cabecalho de tabela mais calmo */
th{font-size:11px;letter-spacing:.085em;font-weight:600}

/* ---------------------------------------------------------------------------
   OCULTAR VALORES  (o olho do topo)
   Discricao de balcao: o cliente do outro lado do monitor nao precisa ver o
   faturamento. NAO e seguranca — a tranca de verdade continua sendo a senha
   master. Por isso passar o mouse revela um valor de cada vez: o atendente
   continua trabalhando com o cliente na frente.
   --------------------------------------------------------------------------- */
body.ocultar-valores .indicador b,
body.ocultar-valores td.num,
body.ocultar-valores .valor-sensivel{
  filter:blur(7px);transition:filter .12s ease;user-select:none}
body.ocultar-valores .indicador b:hover,
body.ocultar-valores td.num:hover,
body.ocultar-valores .valor-sensivel:hover{filter:none}
@media print{ body.ocultar-valores .indicador b,
  body.ocultar-valores td.num,
  body.ocultar-valores .valor-sensivel{filter:none} }


/* ===========================================================================
   SUPERFICIES DA PALETA
   Na referencia o preto e uma superficie, nao so a cor do texto: o cartao em
   destaque e preto, e o lime marca o que esta selecionado. Ficam disponiveis
   como classe, sem mudar nenhuma tela por conta propria.
   =========================================================================== */
.cartao.preto, .indicador.preto{background:#000;color:#fff;border-color:#000}
.cartao.preto .indicador span, .indicador.preto span{color:rgba(255,255,255,.62)}
.cartao.lime, .indicador.lime{background:var(--acento);color:#000;border-color:var(--acento)}
.cartao.lime-claro, .indicador.lime-claro{background:var(--acento-tenue);color:#000;
  border-color:#d3e79a}
.botao.preto{background:#000;color:#fff;border-color:#000}
.botao.preto:hover{background:#1a1a1a}

/* A linha selecionada da lista usa o Pale Lime — e o mesmo gesto da referencia. */
tr.marcada > td{background:var(--acento-tenue)}

/* ===========================================================================
   CELULAR — a escala da referencia nao cabe numa tela de 390px
   O bloco REFINO VISUAL acima vem DEPOIS de todas as @media do arquivo, entao
   por ordem da cascata ele vencia os pontos de quebra: o numero do cartao
   ficava com 34px tambem no celular e "R$ 31.534,00" quebrava em duas linhas
   dentro de um cartao de meia tela. Aqui a escala volta ao tamanho do aparelho.
   Nada de funcao muda: e so tamanho e raio.
   =========================================================================== */
/* O corte e 900px, nao 760: e em 900 que o layout ja vira celular (barra de
   cima, menu em gaveta). Com 760 o tablet de 768 ficava de fora e voltava a
   pegar os 34px. */
@media(max-width:900px){
  .topo h1{font-size:24px;letter-spacing:-.022em}
  h2, .modal .cab h2{font-size:21px}
  h3{font-size:18px}
  /* O cartao vinha com 140px de largura minima. Nenhum valor em reais cabe em
     140px, em fonte nenhuma — por isso "R$ 31.534,00" quebrava em duas linhas.
     Alargar o cartao resolve mais do que encolher a letra. */
  .g4,.g5{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
  .indicador b{font-size:20px;letter-spacing:-.018em}
  .indicador span{font-size:10px;letter-spacing:.07em;margin-top:6px}
  .indicador{padding:14px 15px}
  .tile .valor{font-size:28px}
  .tile{min-height:104px}
  /* raio de cartao grande so funciona em cartao grande */
  .cartao{border-radius:14px}
  .tile{border-radius:14px}
  table{font-size:14px}
}
@media(max-width:420px){
  .topo h1{font-size:22px}
  .indicador b{font-size:18px}
  .indicador span{font-size:9.5px}
  .tile .valor{font-size:24px}
}


/* ===========================================================================
   MODO CELULAR FORCADO
   Um celular com "Site para computador" ligado no Chrome mente sobre a largura:
   diz ter ~980px e ignora a meta viewport. Com isso o sistema mostrava o menu
   lateral de computador espremendo o conteudo num aparelho de 6 polegadas.
   Aqui o gatilho nao e so a largura: exige tambem dedo no lugar de mouse
   (pointer:coarse) e tela em pe. Monitor de computador tem ponteiro fino e
   nao entra; tablet deitado tambem nao.
   As regras abaixo sao as MESMAS ja usadas no celular, repetidas sob esse
   gatilho — nada novo, nada removido.
   =========================================================================== */
@media (pointer:coarse) and (max-width:1100px) and (orientation:portrait){
 .pdv{grid-template-columns:1fr}

  .layout{grid-template-columns:1fr;display:block}

  .barra-celular{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
    background:var(--papel);border-bottom:1px solid var(--borda);padding:9px 12px;
    box-shadow:0 1px 0 rgba(16,16,16,.03)}
  .titulo-celular{flex:1;font-family:var(--display);font-weight:600;font-size:16px;
    letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seletor-loja.compacto{max-width:42vw;padding:7px 9px;font-size:12.5px;font-weight:600;
    border-radius:var(--raio-p)}
  .seletor-loja.no-topo{display:none}

  .hamburguer{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;
    width:38px;height:38px;padding:0 9px;background:var(--papel);cursor:pointer;
    border:1px solid var(--borda-forte);border-radius:var(--raio-p)}
  .hamburguer span{display:block;height:2px;background:var(--tinta);border-radius:2px}
  .hamburguer:active{background:var(--fundo)}

  /* a gaveta */
  .lateral{
    position:fixed;top:0;left:0;bottom:0;width:270px;max-width:84vw;z-index:60;
    flex-direction:column;overflow-y:auto;padding:18px 12px 20px;
    border-right:1px solid var(--borda);box-shadow:var(--sombra-alta);
    transform:translateX(-102%);transition:transform .2s ease}
  :root.gaveta-aberta .lateral{transform:translateX(0)}
  .lateral .marca,.lateral .rodape{display:block}
  /* no celular a gaveta rola inteira; nada de duas rolagens embutidas */
  .lateral .links{overflow:visible;flex:0 0 auto;min-height:auto}
  .lateral .rodape{margin-top:18px}
  .lateral a{padding:11px 12px;font-size:14.5px}
  .grupo-menu{margin-bottom:14px}

  .loja-na-gaveta{display:block;margin:0 0 16px;padding:0 2px}
  .loja-na-gaveta label{margin-bottom:5px}
  .seletor-loja.cheio{width:100%}

  .veu{display:block;position:fixed;inset:0;z-index:50;background:rgba(16,16,16,.45);
    opacity:0;pointer-events:none;transition:opacity .2s}
  :root.gaveta-aberta .veu{opacity:1;pointer-events:auto}
  :root.gaveta-aberta{overflow:hidden}

  .conteudo{padding:16px 14px 80px;max-width:none}
  /* no celular o título já está na barra de cima */
  .topo h1{display:none}
  .topo{margin-bottom:14px;gap:8px}

  /* nada de rolagem lateral de menu: tudo empilha */
  .barra{gap:7px}
  .barra input,.barra select{min-width:0;flex:1 1 140px}
  .barra .botao{flex:1 1 auto;justify-content:center}
  .grade{gap:10px}
  .g4,.g5{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .indicador{padding:14px 15px}
  .indicador b{font-size:27px}
  .modal{padding:0}
  .modal .caixa{border-radius:0;min-height:100vh}
  .modal .pe{border-radius:0;position:sticky;bottom:0}
  .cartao .corpo{padding:14px}
  .linha{grid-template-columns:1fr}
  .kanban-os{gap:10px}
  .coluna-os{flex-basis:82vw;max-height:none}
  .grade-numeros{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;padding:10px}
  .cartao-numero-valor{font-size:28px}
  table{font-size:13px}
  td,th{padding:10px 11px}

  .topo h1{font-size:24px;letter-spacing:-.022em}
  h2, .modal .cab h2{font-size:21px}
  h3{font-size:18px}
  /* O cartao vinha com 140px de largura minima. Nenhum valor em reais cabe em
     140px, em fonte nenhuma — por isso "R$ 31.534,00" quebrava em duas linhas.
     Alargar o cartao resolve mais do que encolher a letra. */
  .g4,.g5{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
  .indicador b{font-size:20px;letter-spacing:-.018em}
  .indicador span{font-size:10px;letter-spacing:.07em;margin-top:6px}
  .indicador{padding:14px 15px}
  .tile .valor{font-size:28px}
  .tile{min-height:104px}
  /* raio de cartao grande so funciona em cartao grande */
  .cartao{border-radius:14px}
  .tile{border-radius:14px}
  table{font-size:14px}

  /* CORRECAO TABLET (29/09/2026)
     Aqui ficava uma copia do bloco que empilha a tabela. Isso fazia o iPad em
     pe (768px, toque, retrato) mostrar o layout de celular: cada OS virava 9
     linhas empilhadas de ~418px, ou seja 2 OS por tela numa tela de 1024px de
     altura, com metade da largura sobrando. Quem empilha agora e so o
     @media(max-width:700px), que e telefone de verdade. No tablet a tabela
     volta a ter colunas (e continua rolando de lado dentro de .rolagem se
     precisar). O menu de gaveta e o cabecalho de celular seguem iguais. */
}

/* ===================================================================
   MODO CELULAR — a OS tem que caber na tela (01/10/2026)

   Reclamacao do Gilson no video modo celular: abrindo a OS no Samsung,
   nao dava para mexer em nada — era preciso arrastar a pagina inteira de
   lado para alcancar qualquer campo.

   A causa: a ficha abre num .modal, que e position:fixed e portanto fica
   FORA do .conteudo (o unico lugar que tinha overflow-x:hidden). Bastava
   uma tabela de itens, um numero de serie comprido ou a fila de botoes com
   nowrap para o modal ficar mais largo que o telefone. E quando o filho
   estoura, quem rola de lado e a pagina toda, nao o pedaco largo.

   A regra aqui e simples: NADA sai da largura da tela. O que for
   genuinamente largo (tabela de pecas) rola dentro da propria caixa.
   =================================================================== */
@media(max-width:700px){
  /* 1. a caixa nunca passa da tela */
  .modal{overflow-x:hidden}
  .modal .caixa{max-width:100vw;overflow-x:hidden}

  /* 2. menos margem: no telefone cada pixel de largura e campo util */
  .modal .corpo{padding:14px 13px;overflow-x:hidden}
  .modal .cab{padding:14px 13px}
  .modal .cab h2{font-size:17px;letter-spacing:-.01em}
  .modal .pe{padding:12px 13px}

  /* 3. texto comprido quebra em vez de empurrar: numero de serie, laudo
        colado, link, e-mail */
  .modal .corpo,.modal .corpo td,.modal .corpo div,.modal .corpo span{overflow-wrap:anywhere}

  /* 4. tabela larga rola DENTRO do seu proprio quadro */
  .modal .rolagem{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .modal table{max-width:100%}

  /* 5. toda fila de botoes quebra linha; nenhuma fila empurra a tela */
  .modal .pe,.modal .corpo>div[style*="display:flex"]{flex-wrap:wrap}
  .modal .botao{white-space:normal}

  /* 6. os campos ficam um embaixo do outro e com altura de dedo —
        no toque, campo baixo demais e campo errado */
  .modal .linha{grid-template-columns:1fr}
  .modal input,.modal select,.modal textarea{font-size:16px;min-height:44px}
  /* 16px tambem impede o iPhone de dar zoom sozinho ao focar o campo,
     que era outra forma de a tela fugir do lugar */
  .modal .botao{min-height:42px}

  /* 7. o rodape de acoes fica colado embaixo e sempre alcancavel */
  .modal .pe{position:sticky;bottom:0;background:var(--papel);z-index:3}

  /* 8. o cabecalho da ficha (cliente, loja, total) empilha */
  .modal .cartao .corpo[style*="display:flex"]{flex-direction:column;align-items:stretch;gap:10px}
}

/* Barra de atalhos da ficha da OS — so no telefone.
   No computador rolar nao doi; no celular a ficha tem 4.300px e a assinatura
   fica a cinco telas das fotos. Aqui ela gruda no topo do modal e leva direto. */
.atalhos-celular{display:none}
@media(max-width:700px){
  .atalhos-celular{
    display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    position:sticky;top:0;z-index:4;margin:-14px -13px 12px;padding:9px 13px;
    background:var(--papel);border-bottom:1px solid var(--borda);
    scrollbar-width:none}
  .atalhos-celular::-webkit-scrollbar{display:none}
  .atalhos-celular .botao{flex:0 0 auto;white-space:nowrap;min-height:36px;font-size:12.5px}
}


/* === v91 CARTOES DE SITUACAO E LISTA COMPACTA === */
/* Os seis cartoes no topo da lista de OS. Mesma informacao das faixas antigas,
   so que legivel de longe: numero grande, nome embaixo, bolha com a cor da
   situacao. Continua sendo botao de filtro. */
.cartoes-situacao{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin:0 0 14px;
}
.cartao-situacao{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; text-align:left;
  background:#fff; border:1px solid var(--linha); border-radius:12px;
  cursor:pointer; font:inherit; color:inherit;
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.cartao-situacao:hover{ border-color:var(--cor-situacao,#c9c9c9); transform:translateY(-1px); }
.cartao-situacao.ativo{
  border-color:var(--cor-situacao,#333);
  box-shadow:inset 0 0 0 1px var(--cor-situacao,#333);
}
.cartao-situacao .bolha{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:color-mix(in srgb, var(--cor-situacao,#999) 16%, #fff);
}
.cartao-situacao .texto{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.cartao-situacao .texto b{
  font-size:24px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--cor-situacao,var(--tinta));
}
.cartao-situacao .texto small{
  font-size:12.5px; color:var(--tinta-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:700px){
  .cartoes-situacao{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .cartao-situacao{ padding:10px; gap:9px; }
  .cartao-situacao .bolha{ width:32px; height:32px; font-size:15px; }
  .cartao-situacao .texto b{ font-size:19px; }
}

/* Linha da lista: estava com 98px de altura porque o nome do aparelho quebrava
   em quatro linhas. Agora cada celula cabe em duas alturas de texto e cabe mais
   OS na tela — era a queixa de quem passa o dia nesta lista. */
table.lista-os td{ padding-top:9px; padding-bottom:9px; vertical-align:middle; }
table.lista-os td, table.lista-os th{ font-size:13px; }
table.lista-os th{ font-size:11.5px; }


/* === v91b DENSIDADE DA LISTA E AJUSTE DOS CARTOES === */
/* O rotulo do cartao pode usar duas linhas — "Aguardando aprovacao" nao cabe numa. */
.cartoes-situacao{ grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); align-items:stretch; }
.cartao-situacao .texto small{ white-space:normal; line-height:1.18; text-overflow:clip; }
.cartoes-situacao > .botao{ border-radius:12px; justify-content:center; }

/* Linha COMPACTA: uma altura de texto por celula, o resto no titulo (passar o mouse).
   E o layout do desenho novo. O modo "Linhas inteiras" devolve o texto quebrado. */
.rolagem > table.lista-os.compacta td{ padding-top:7px !important; padding-bottom:7px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div{ max-width:185px !important; display:block !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div{ max-width:205px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div > div,
.rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div > small,
.rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div > div,
.rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div > small,
.rolagem > table.lista-os.compacta td[data-rotulo="Defeito resumido"] > div{
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  overflow-wrap:normal !important; word-break:normal !important; display:block !important;
}
/* o post-it de nota rapida nao pode esticar a linha */
.rolagem > table.lista-os.compacta .postit{ max-width:130px; }
.rolagem > table.lista-os.compacta .postit .txt{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* a etiqueta de situacao volta a caber numa linha so no modo compacto */
.rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  max-width:168px !important;
}


/* === v91c LARGURAS PARA A LISTA CABER NA TELA === */
/* Com 10 colunas a tabela passava de 1766px numa tela de 1368px, e a coluna
   Acoes (que e fixa na direita) cobria Situacao, Parada ha e Valor. Agora cada
   coluna tem um teto e tudo cabe sem rolar de lado. */
.rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div{ max-width:150px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div{ max-width:165px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Defeito resumido"] > div{ max-width:160px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Situação"]{ min-width:104px; }
.rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{ max-width:134px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Técnico"]{ max-width:92px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* a nota rapida vira uma tarja fina ao lado do numero, sem esticar a linha */
.rolagem > table.lista-os.compacta .postit{
  max-width:96px; font-size:10px; padding:1px 5px; margin-top:2px; transform:none; box-shadow:none;
}
/* hora da entrada na mesma linha da data */
.rolagem > table.lista-os.compacta td[data-rotulo="Entrada"] > div{ white-space:nowrap; }
.rolagem > table.lista-os.compacta td[data-rotulo="Entrada"] small{ font-size:10.5px; }


/* === v91d APERTO FINAL DAS COLUNAS === */
.rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{ max-width:150px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Defeito resumido"] > div{ max-width:175px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div{ max-width:160px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div{ max-width:175px !important; }
.rolagem > table.lista-os.compacta .acoes-linha{ gap:3px; }
.rolagem > table.lista-os.compacta .acoes-linha .acao{ width:26px; height:26px; font-size:12px; }
.rolagem > table.lista-os.compacta td[data-rotulo="Entrada"] > div{ line-height:1.2; }


/* === v91e CABER NA TELA SEM ROLAR DE LADO === */
/* A soma das colunas dava 1557px numa area de 1368px: Valor sumia atras da
   coluna de acoes, que e fixa na direita. O que mais pesava nao era o texto,
   eram as margens internas de cada celula (14px de cada lado, vezes 11
   colunas). Aqui elas caem para 8px e as colunas largas ganham um teto menor. */
.rolagem > table.lista-os.compacta td,
.rolagem > table.lista-os.compacta th{ padding-left:8px !important; padding-right:8px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div{ max-width:140px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div{ max-width:155px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Defeito resumido"] > div{ max-width:155px !important; }
.rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{ max-width:140px !important; }
/* data em cima, dias parados embaixo — em linha unica a celula ficava com 149px */
.rolagem > table.lista-os.compacta td[data-rotulo="Entrada"] > div{
  display:block !important; white-space:nowrap;
}
.rolagem > table.lista-os.compacta td[data-rotulo="Entrada"] small{ display:block; }


/* === v91f AS REGRAS COMPACTAS VALEM SO NO DESKTOP === */
/* No celular a lista vira cartao empilhado (.empilha): cada campo numa linha,
   com o rotulo ao lado. As larguras fixas e o nowrap do modo compacto sao
   desenhados para a TABELA do desktop — no telefone eles cortariam o nome do
   cliente e o aparelho em tres letras. Abaixo de 1000px tudo volta a quebrar. */
@media (max-width:999px){
  .rolagem > table.lista-os.compacta td,
  .rolagem > table.lista-os.compacta th{ padding-left:12px !important; padding-right:12px !important; }
  .rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div,
  .rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div,
  .rolagem > table.lista-os.compacta td[data-rotulo="Defeito resumido"] > div{
    max-width:100% !important;
  }
  .rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div > div,
  .rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div > small,
  .rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div > div,
  .rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div > small,
  .rolagem > table.lista-os.compacta td[data-rotulo="Defeito resumido"] > div{
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
    overflow-wrap:anywhere !important;
  }
  .rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{
    white-space:normal !important; max-width:100% !important; overflow:visible !important;
  }
  .rolagem > table.lista-os.compacta td[data-rotulo="Técnico"]{
    max-width:none; white-space:normal; overflow:visible;
  }
  .rolagem > table.lista-os.compacta .postit{ max-width:100%; font-size:11px; }
  .rolagem > table.lista-os.compacta .acoes-linha .acao{ width:34px; height:34px; font-size:14px; }
}


/* === v92 LIMPEZA DA LISTA DE OS === */
/* O que estava errado na lista que eu publiquei: cor demais. Seis cartoes
   coloridos com emoji, cinco botoes coloridos por linha, cabecalho em maiuscula
   cinza-claro. Numa tela de doze linhas davam mais de setenta manchas de cor, e
   a pilula de situacao — a unica coisa que PRECISA saltar — se perdia no meio.
   Aqui a tela volta a ter uma cor so: a da situacao. */

/* 1 · Cabecalho da tabela: escuro, caixa mista, do tamanho do corpo.
   Em maiuscula cinza-claro ele apagava em vez de guiar. */
.rolagem > table.lista-os th{
  text-transform:none !important; letter-spacing:0 !important;
  font-size:13px !important; font-weight:600 !important; color:var(--tinta) !important;
}

/* 2 · Botoes de acao neutros: fundo branco, borda fina, icone escuro.
   Eram cinco quadradinhos coloridos por linha. */
.rolagem > table.lista-os .acoes-linha .acao,
.rolagem > table.lista-os .acoes-linha .acao.azul,
.rolagem > table.lista-os .acoes-linha .acao.verde,
.rolagem > table.lista-os .acoes-linha .acao.laranja,
.rolagem > table.lista-os .acoes-linha .acao.cinza,
.rolagem > table.lista-os .acoes-linha .acao.vermelho{
  background:#fff; color:var(--tinta-2); border:1px solid var(--borda-forte);
  border-radius:4px; filter:none;
}
.rolagem > table.lista-os .acoes-linha .acao:hover{
  background:var(--suave); color:var(--tinta); border-color:var(--tinta-3); filter:none;
}

/* 3 · Cartoes de situacao sobrios: sem bolha pastel, sem emoji. Um ponto da cor
   da situacao, o numero em preto, o nome em cinza. */
.cartoes-situacao{ gap:8px; }
.cartao-situacao{
  border-radius:6px; padding:10px 12px; gap:9px; align-items:center;
}
.cartao-situacao .bolha{
  width:8px; height:8px; border-radius:50%; font-size:0; background:var(--cor-situacao,#999);
}
.cartao-situacao .texto b{ font-size:20px; font-weight:600; color:var(--tinta); }
.cartao-situacao .texto small{ font-size:12px; color:var(--tinta-2); }
.cartao-situacao.ativo{ box-shadow:none; border-color:var(--tinta); }
.cartao-situacao:hover{ transform:none; border-color:var(--tinta-3); }
.cartoes-situacao > .botao{ border-radius:6px; }

/* 4 · Pilula de situacao: a unica cor da tela, com canto quase reto. */
.rolagem > table.lista-os td[data-rotulo="Situação"] .etiqueta{ border-radius:3px; }

/* 5 · Nome do cliente sublinhado — avisa que da para clicar, como no sistema anterior. */
.rolagem > table.lista-os td[data-rotulo="Cliente"] > div > div{
  text-decoration:underline; text-decoration-color:var(--borda-forte); text-underline-offset:2px;
}

/* 6 · Linha inteira acende ao passar o mouse. */
.rolagem > table.lista-os tbody tr:hover > td{ background:var(--papel-2); }

/* 7 · Com os botoes neutros e menores, sobra largura: as colunas param de
   cortar tudo com reticencias. Coluna que nao da para ler e pior do que
   coluna que nao existe. */
@media (min-width:1000px){
  .rolagem > table.lista-os.compacta td[data-rotulo="Cliente"] > div{ max-width:185px !important; }
  .rolagem > table.lista-os.compacta td[data-rotulo="Equipamentos"] > div{ max-width:215px !important; }
  .rolagem > table.lista-os.compacta td[data-rotulo="Defeito resumido"] > div{ max-width:200px !important; }
  .rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{ max-width:160px !important; }
}


/* === v92b TIRANDO O RESTO DA COR === */
/* Os icones dos botoes sao emoji — 💬 🔍 🖨 ✅ nascem coloridos, entao os botoes
   continuavam manchando a linha mesmo com fundo branco. Em cinza eles viram
   icone de verdade; a cor volta so quando o mouse passa em cima. */
.rolagem > table.lista-os .acoes-linha .acao{ filter:grayscale(1); opacity:.8; }
.rolagem > table.lista-os .acoes-linha .acao:hover{ filter:none; opacity:1; }

/* A nota rapida era um papelzinho com alfinete vermelho e sombra dentro da
   celula do numero: desalinhava a linha e puxava o olho para o lugar errado.
   Na lista ela vira uma tarja fina; o recado inteiro continua no tooltip. */
.rolagem > table.lista-os .postit{
  box-shadow:none; transform:none; border-radius:3px; margin-top:3px;
  font-size:10.5px; line-height:1.3; padding:1px 6px;
  background:var(--t-areia); color:var(--t-areia-f);
}
.rolagem > table.lista-os .postit::before,
.rolagem > table.lista-os .postit::after{ display:none; }
.rolagem > table.lista-os .postit.vermelho{
  background:var(--t-rosa); color:var(--t-rosa-f);
}


/* === v92c O CINZA PRECISA GANHAR DA REGRA DE CIMA === */
/* O bloco v92 zera o filtro em seletores com a classe de cor (.acao.verde),
   que pesam mais que o .acao do v92b — por isso o cinza nao pegava. Aqui as
   duas regras tem o mesmo peso e esta vem depois, entao vale. */
.rolagem > table.lista-os .acoes-linha .acao,
.rolagem > table.lista-os .acoes-linha .acao.azul,
.rolagem > table.lista-os .acoes-linha .acao.verde,
.rolagem > table.lista-os .acoes-linha .acao.laranja,
.rolagem > table.lista-os .acoes-linha .acao.cinza,
.rolagem > table.lista-os .acoes-linha .acao.vermelho{
  filter:grayscale(1); opacity:.78;
}
.rolagem > table.lista-os .acoes-linha .acao:hover,
.rolagem > table.lista-os .acoes-linha .acao.azul:hover,
.rolagem > table.lista-os .acoes-linha .acao.verde:hover,
.rolagem > table.lista-os .acoes-linha .acao.laranja:hover,
.rolagem > table.lista-os .acoes-linha .acao.cinza:hover,
.rolagem > table.lista-os .acoes-linha .acao.vermelho:hover{
  filter:none; opacity:1; background:var(--suave); border-color:var(--tinta-3);
}
/* o visto de encerrar, agora texto, fica com um peso maior para nao sumir */
.rolagem > table.lista-os .acoes-linha .acao.verde{ font-weight:700; }


/* === v93 ABAS DA FICHA DA OS === */
/* A barra de abas da ficha. Rola de lado no celular em vez de quebrar em
   quatro linhas e empurrar o conteudo para baixo da dobra. */
.abas-ficha{
  display:flex; gap:2px; overflow-x:auto; margin:0 0 16px;
  border-bottom:1px solid var(--linha); scrollbar-width:thin;
}
.abas-ficha::-webkit-scrollbar{height:4px}
.abas-ficha::-webkit-scrollbar-thumb{background:var(--borda-forte);border-radius:3px}
.aba-ficha{
  background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px;
  padding:11px 15px; font:inherit; font-size:14px; font-weight:600; color:var(--tinta-2);
  white-space:nowrap; cursor:pointer; border-radius:0;
}
.aba-ficha:hover{color:var(--tinta);background:var(--suave)}
.aba-ficha.at{color:var(--azul);border-bottom-color:var(--azul)}

/* Cartoes da aba "Visão geral" — quatro colunas no desktop, duas no tablet,
   uma no celular. */
.grade-visao{
  display:grid; gap:14px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.grade-visao > .cartao{margin-bottom:0}
.grade-visao .corpo{padding-top:4px}
.grade-visao .cab{font-size:14px}

/* No celular a barra de abas substitui a antiga barra de atalhos: as duas
   juntas seriam duas fileiras de botao fazendo a mesma coisa. */
@media (max-width:700px){
  .modal .atalhos-celular{display:none}
  .aba-ficha{padding:10px 12px;font-size:13.5px}
  .grade-visao{grid-template-columns:1fr}
}


/* === v96 CARTOES DE DESFECHO === */
.grade-desfecho{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.cartao-desfecho{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  padding:14px 16px;background:var(--papel);border:1px solid var(--linha);
  border-radius:11px;font:inherit;color:inherit;cursor:pointer;
}
.cartao-desfecho:hover{border-color:var(--borda-forte);background:var(--suave)}
.cartao-desfecho.at{border-color:var(--verde);background:var(--verde-tenue)}
.cartao-desfecho .ic{font-size:19px;line-height:1.2;flex:none;filter:grayscale(.25)}
.cartao-desfecho .tx{flex:1;min-width:0}
.cartao-desfecho .tx b{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
.cartao-desfecho .tx small{display:block;font-size:12.5px;color:var(--tinta-2);margin-top:2px}
.cartao-desfecho .bolinha{
  width:19px;height:19px;border-radius:50%;border:2px solid var(--borda-forte);flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--tinta-3);
}
.cartao-desfecho.at .bolinha{border-color:var(--verde);background:var(--verde);color:#fff}
.cartao-desfecho.at .bolinha::after{content:"✓";color:#fff;font-size:11px;font-weight:700}
.cartao-desfecho.mais{margin-top:10px;background:var(--suave)}
@media (max-width:700px){.grade-desfecho{grid-template-columns:1fr}}


/* =====================================================================
   v100 · CASCA DAS TELAS APROVADAS (02/10/2026) — etapa 1
   Inter, azul como cor de acao, icones coloridos, cantos maiores, topbar
   escura com busca global, loja, sino e avatar, e breadcrumb. Nada de
   funcao muda aqui: e so a roupa. Vem no fim do arquivo de proposito,
   para vencer as regras antigas sem ter de apagar nenhuma.
   ===================================================================== */
:root{
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --raio:12px; --raio-p:10px; --raio-g:14px;
  --fundo:#f5f7fb; --papel:#ffffff; --papel-2:#fafbfd;
  --tinta:#0f172a; --tinta-2:#475569; --tinta-3:#94a3b8;
  --borda:#e5e7eb; --borda-forte:#cbd5e1;
  --suave:#f1f5f9; --suave-2:#e9eef5; --trilho:#e9eef5; --barra-vazia:#e2e8f0;
  --azul:#2563eb; --azul-forte:#1d4ed8; --azul-tenue:#e8effd;
  --verde:#16a34a; --verde-tenue:#e7f7ec;
  --vermelho:#dc2626; --vermelho-tenue:#fdecec;
  --ambar:#d97706; --ambar-tenue:#fdf3e1;
  --topbar:#0f172a; --topbar-tinta:#e2e8f0;
}
/* a cor de acao padrao passa a ser o azul das telas */
:root[data-cor="azul"]{--acento:#2563eb;--acento-forte:#1d4ed8;--acento-tenue:#e8effd;--acento-tinta:#fff}
:root[data-cor="limao"]{--acento:#2563eb;--acento-forte:#1d4ed8;--acento-tenue:#e8effd;--acento-tinta:#fff}
:root[data-tema="escuro"]{
  --fundo:#0b1220; --papel:#111a2e; --papel-2:#162038;
  --tinta:#e5e9f2; --tinta-2:#a9b4c8; --tinta-3:#6b7a94;
  --borda:#22304a; --borda-forte:#33425e; --suave:#162038; --suave-2:#1b2740;
  --topbar:#070d1a; --azul-tenue:color-mix(in srgb,#2563eb 22%,#111a2e);
}
body{font:14px/1.5 var(--ui);letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3,.cab,.marca{letter-spacing:-.02em}

/* ---- icones voltam a ter cor (as telas aprovadas usam cor) ---- */
.rolagem > table.lista-os .acoes-linha .acao,
.acao, .cartao-desfecho .ic, .lateral a .ic, .ic{filter:none !important;opacity:1 !important}

/* ---- cantos e superficies ---- */
.cartao{border-radius:var(--raio-g);box-shadow:0 1px 2px rgba(15,23,42,.04)}
input,select,textarea{border-radius:var(--raio-p);border-color:var(--borda-forte);background:var(--papel)}
input:focus,select:focus,textarea:focus{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-tenue);outline:0}
.botao{border-radius:var(--raio-p);font-weight:600}
.botao:not(.claro):not(.perigo):not(.verde){background:var(--azul);color:#fff;border-color:var(--azul)}
.botao:not(.claro):not(.perigo):not(.verde):hover{background:var(--azul-forte);border-color:var(--azul-forte)}
.botao.claro{background:var(--papel);color:var(--tinta);border:1px solid var(--borda-forte)}
.botao.claro:hover{background:var(--suave)}
.botao.verde{background:var(--verde);color:#fff;border-color:var(--verde)}
.lateral a.ativo{background:var(--azul-tenue);color:var(--azul);font-weight:600}
.lateral a:hover{background:var(--suave)}
.modal .caixa{border-radius:var(--raio-g)}

/* ---- topbar ---- */
.layout{grid-template-rows:60px minmax(0,1fr)}
.topbar{grid-column:1 / -1;height:60px;background:var(--topbar);color:var(--topbar-tinta);
  display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:60}
.topbar .marca-topo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px;
  letter-spacing:-.02em;white-space:nowrap;text-decoration:none}
.topbar .marca-topo .logo{width:30px;height:30px;border-radius:9px;background:var(--azul);display:inline-flex;
  align-items:center;justify-content:center;font-size:17px}
.topbar .marca-topo small{display:block;font-weight:500;font-size:11px;color:var(--tinta-3);line-height:1}
.topbar .recolher{background:none;border:0;color:var(--topbar-tinta);font-size:20px;cursor:pointer;padding:6px 8px;
  border-radius:8px;line-height:1}
.topbar .recolher:hover{background:rgba(255,255,255,.08)}
.topbar .busca-global{flex:1;max-width:520px;position:relative}
.topbar .busca-global input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#fff;padding:9px 12px 9px 36px;border-radius:10px;font-size:13px}
.topbar .busca-global input::placeholder{color:#8a97ad}
.topbar .busca-global input:focus{background:rgba(255,255,255,.12);border-color:var(--azul);box-shadow:none}
.topbar .busca-global .lupa{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8a97ad;font-size:14px}
.topbar .espaco{flex:1}
.topbar .loja-topo{display:flex;flex-direction:column;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:5px 10px;min-width:150px}
.topbar .loja-topo label{font-size:10px;color:#8a97ad;line-height:1;margin:0 0 2px}
.topbar .loja-topo select{background:transparent;border:0;color:#fff;padding:0;font-weight:600;font-size:13px;
  width:auto;appearance:auto}
.topbar .sino{position:relative;background:none;border:0;color:var(--topbar-tinta);font-size:19px;cursor:pointer;
  padding:6px 8px;border-radius:8px;line-height:1}
.topbar .sino:hover{background:rgba(255,255,255,.08)}
.topbar .sino .conta{position:absolute;top:0;right:0;min-width:17px;height:17px;border-radius:9px;background:var(--vermelho);
  color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.topbar .pessoa{display:flex;align-items:center;gap:9px;color:#fff;cursor:pointer;padding:4px 6px;border-radius:10px}
.topbar .pessoa:hover{background:rgba(255,255,255,.08)}
.topbar .avatar{width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;font-weight:700;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center}
.topbar .pessoa .nome{font-weight:600;font-size:13px;line-height:1.15}
.topbar .pessoa .papel{font-size:11px;color:#8a97ad;line-height:1.15}
/* a marca antiga do menu lateral sai de cena: agora ela mora na topbar */
.lateral .marca{display:none}
.topo .seletor-loja.no-topo{display:none}
/* o seletor de loja e o olho continuam existindo; so o visual muda */

/* ---- breadcrumb ---- */
.migalha{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta-3);margin:0 0 10px;flex-wrap:wrap}
.migalha a{color:var(--tinta-3);text-decoration:none}
.migalha a:hover{color:var(--tinta)}
.migalha .sep{color:var(--borda-forte)}
.migalha .atual{color:var(--tinta);font-weight:500}
.topo{flex-wrap:wrap}
.topo .cabeca{flex:1 1 100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- lateral ---- */
.lateral{padding-top:14px}
.grupo-titulo{color:var(--tinta-3);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:900px){
  .layout{grid-template-rows:auto minmax(0,1fr)}
  .topbar{position:static;height:auto;padding:8px 12px;flex-wrap:wrap}
  .topbar .busca-global{order:9;flex:1 1 100%;max-width:none}
  .topbar .pessoa .nome,.topbar .pessoa .papel{display:none}
  .topbar .loja-topo{min-width:0}
}

/* v100b · a topbar fica FIXA no topo; o grid volta a uma linha e ganha o
   espaco dela em cima. Sticky dentro de uma linha de 60px nao tinha onde
   grudar — por isso ela sumia ao rolar. */
.layout{grid-template-rows:minmax(0,1fr);padding-top:60px}
.topbar{position:fixed;top:0;left:0;right:0;z-index:60}
.lateral{height:calc(100vh - 60px);top:60px}
@media (max-width:900px){
  .layout{padding-top:0}
  .topbar{position:static}
  .lateral{height:auto;top:0}
}


/* v101 · ETAPA 2 — Nova OS com o visual das telas aprovadas */
.nova-os-grade{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.modal .caixa:has(.nova-os-grade){width:min(1380px,96vw)}
.cab-bloco{display:flex;align-items:center;gap:12px}
.cab-bloco .ic-bloco{width:44px;height:44px;border-radius:12px;background:var(--suave);display:inline-flex;
  align-items:center;justify-content:center;font-size:22px;flex:none}
.cab-bloco .titulo-bloco{font-size:19px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.cab-bloco .titulo-bloco .num{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--azul);color:#fff;
  font-size:11px;font-weight:700;align-items:center;justify-content:center}
.cab-bloco .sub-bloco{font-size:13px;color:var(--tinta-2);margin-top:1px}
.cartao > .cab:has(.cab-bloco){padding:14px 16px;font-size:inherit}

.grade-tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:4px 0 10px}
.tile-tipo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;background:var(--papel);
  border:1px solid var(--borda-forte);border-radius:12px;cursor:pointer;font:inherit;color:var(--tinta-2)}
.tile-tipo .ic{font-size:22px;line-height:1}
.tile-tipo .tx{font-size:12px;font-weight:600;text-align:center;line-height:1.2}
.tile-tipo:hover{border-color:var(--azul);background:var(--azul-tenue)}
.tile-tipo.at{border-color:var(--azul);background:var(--azul-tenue);color:var(--azul);box-shadow:0 0 0 2px var(--azul-tenue)}

.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.chips .rotulo-chips{flex:1 1 100%;font-size:11.5px;color:var(--tinta-3)}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--borda-forte);background:var(--papel);font:inherit;
  font-size:12.5px;font-weight:500;cursor:pointer;color:var(--tinta)}
.chip:hover{border-color:var(--azul);color:var(--azul);background:var(--azul-tenue)}

.linha-entrada{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:14px;margin-bottom:12px}
.lado-entrada .campo{margin-bottom:8px}
.lado-entrada select,.lado-entrada input{width:100%;min-width:0}

.caixas-acessorio{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px 12px;margin-bottom:8px}
.caixa-acessorio{display:flex;align-items:center;gap:8px;font-size:13px;margin:0;cursor:pointer;padding:4px 0}
.caixa-acessorio input{width:16px;height:16px;margin:0;accent-color:var(--azul)}
.caixa-acessorio.at{color:var(--azul);font-weight:600}

.contador-chk{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.contador-chk .cx{display:inline-flex;flex-direction:column;align-items:center;min-width:72px;padding:8px 10px;border-radius:10px;
  font-size:11px;color:var(--tinta-2);background:var(--suave)}
.contador-chk .cx b{font-size:18px;line-height:1.1}
.contador-chk .cx.ok{background:var(--verde-tenue);color:var(--verde)}
.contador-chk .cx.def{background:var(--vermelho-tenue);color:var(--vermelho)}
.contador-chk .cx.nt{background:var(--suave-2);color:var(--tinta-2)}
.contador-chk .cx.falta{background:var(--ambar-tenue);color:var(--ambar)}

.resumo-lateral{position:sticky;top:8px;background:var(--papel);border:1px solid var(--borda);border-radius:14px;padding:14px 16px;
  font-size:13px}
.resumo-lateral .tit{font-weight:700;font-size:13.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.resumo-lateral .tit small{font-weight:500;color:var(--tinta-3);margin-left:auto}
.resumo-lateral .ap{display:flex;gap:10px;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--borda)}
.resumo-lateral .ap-ic{width:46px;height:46px;border-radius:10px;background:var(--suave);display:inline-flex;align-items:center;
  justify-content:center;font-size:22px;flex:none}
.resumo-lateral .mini{font-size:11.5px;color:var(--tinta-3)}
.resumo-lateral .vazio-res{color:var(--tinta-3);padding:6px 0 10px}
.resumo-lateral .lr{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--borda)}
.resumo-lateral .lr .k{color:var(--tinta-3);flex:none}
.resumo-lateral .lr .v{text-align:right;min-width:0;word-break:break-word}
.resumo-lateral .etq{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--ambar-tenue);color:var(--ambar);
  font-size:11.5px;font-weight:600}
.resumo-lateral .fotos-res{display:flex;gap:6px;flex-wrap:wrap}
.resumo-lateral .fotos-res img,.resumo-lateral .fotos-res .f{width:54px;height:54px;border-radius:8px;object-fit:cover;background:var(--suave);
  display:inline-flex;align-items:center;justify-content:center}

@media (max-width:1100px){
  .nova-os-grade{grid-template-columns:1fr}
  .resumo-lateral{position:static;order:-1}
  .resumo-lateral .fotos-res,.resumo-lateral .lr:nth-child(n+6){display:none}
}
@media (max-width:700px){
  .linha-entrada{grid-template-columns:1fr}
  .grade-tipos{grid-template-columns:repeat(3,1fr)}
}

/* =====================================================================
   v102 · RESPONSIVO DE VERDADE (02/10/2026, telas do Gilson no celular e
   no painel do app). Tres faixas: telefone (<=700), tablet / painel
   (701-1099) e mesa (>=1100). O que estava errado: a ficha so se
   adaptava abaixo de 700 e a lista empilhada no tablet era uma coluna
   de rotulos soltos.
   ===================================================================== */

/* ---------- a ficha da OS e qualquer modal largo ---------- */
@media (max-width:1099px){
  .modal .caixa,.modal .caixa.ficha-larga{width:100vw;max-width:100vw;min-width:0;border-radius:0;
    height:100dvh;max-height:100dvh;display:flex;flex-direction:column}
  .modal .caixa > .corpo{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-width:0}
  .modal .cab{flex:none}
  .modal .pe{flex:none;flex-wrap:wrap;gap:8px;position:sticky;bottom:0;background:var(--papel);z-index:3}
  .modal .pe > span[style*="flex:1"]{display:none}
  .modal .pe .botao{flex:1 1 auto;justify-content:center;min-height:42px}
  .modal .pe > div[style*="display:flex"]{flex:1 1 auto;display:flex}
  .modal .pe > div[style*="display:flex"] .botao{flex:1 1 auto}
  /* cabecalho da ficha: as caixinhas quebram, o seletor ocupa a linha */
  .modal .corpo [data-cabecalho-ficha],.modal .corpo .cabecalho-ficha{flex-wrap:wrap}
  .modal .corpo select[name="situacao"],.modal .corpo .seletor-situacao{width:100% !important;max-width:100% !important}
  .modal .corpo .acoes-rapidas,.modal .corpo [data-acoes-rapidas]{flex-wrap:wrap;gap:6px}
  .modal .corpo .acoes-rapidas .botao{flex:1 1 auto;justify-content:center}
  /* abas: rolam de lado, nunca empurram a pagina */
  .abas-ficha{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;margin-left:-13px;margin-right:-13px;padding:0 13px}
  .aba-ficha{flex:none;scroll-snap-align:start}
  /* visao geral: cartoes empilhados */
  /* qualquer grade de 3 dentro da ficha vira 1 */
  .modal .corpo table{display:block;overflow-x:auto;max-width:100%}
  .modal .corpo .cartao{min-width:0}
  .modal .corpo img,.modal .corpo video{max-width:100%;height:auto}
  /* o tutorial/atalhos de secao no tablet nao precisa */
  .modal .atalhos-celular{display:none}
}
@media (max-width:700px){
  .modal .cab h2{font-size:16px}
  .aba-ficha{padding:10px 11px;font-size:13px}
  .cab-bloco .titulo-bloco{font-size:16px}
  .cab-bloco .ic-bloco{width:36px;height:36px;font-size:18px}
  .resumo-lateral{padding:12px}
}

/* ---------- topo das paginas no telefone ---------- */
@media (max-width:700px){
  .topo .cabeca{gap:8px}
  .topo h1{font-size:22px}
  .migalha{font-size:12px}
  .conteudo{padding:14px 12px 90px}
}


/* =====================================================================
   v103 · MOBILE = DESKTOP, so que menor (02/10/2026)
   A lista de OS nunca vira cartao. Em qualquer largura ela e a mesma
   tabela do computador, rolando de lado dentro do proprio cartao.
   ===================================================================== */
table.lista-os,table.lista-os.empilha{display:table !important;width:100% !important;min-width:1120px}
table.lista-os thead{display:table-header-group !important}
table.lista-os tbody{display:table-row-group !important}
table.lista-os tr{display:table-row !important;background:none;border:0;border-radius:0;margin:0;padding:0;box-shadow:none;position:static}
table.lista-os td,table.lista-os th{display:table-cell !important;width:auto;flex:none}
table.lista-os td[data-rotulo]::before{content:none !important;display:none !important}
table.lista-os td.acoes-td{position:sticky;right:0;background:var(--papel);box-shadow:-8px 0 12px -10px rgba(15,23,42,.25)}
.cartao.rolagem:has(table.lista-os){border:1px solid var(--borda);background:var(--papel);overflow-x:auto;
  -webkit-overflow-scrolling:touch;border-radius:var(--raio-g)}
/* cartoes de situacao e filtros: uma linha so, rolando de lado como no computador */
.cartoes-situacao{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:8px;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cartoes-situacao > *{flex:0 0 auto}
.filtros-os,.barra-filtros,.topo .cabeca{flex-wrap:nowrap}
@media (max-width:1099px){
  .barra:has(> .pilulas),.topo + .barra,.conteudo .barra{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;padding-bottom:4px}
  .conteudo .barra > *{flex:0 0 auto}
  .topo .cabeca{flex-wrap:wrap}
  .conteudo{padding:16px 14px 90px}
}
/* na ficha, as grades mantem as colunas ate 640px; abaixo disso viram uma */
@media (max-width:640px){
  .grade-visao{grid-template-columns:1fr !important}
  .modal .corpo .linha{grid-template-columns:1fr !important}
}
/* tabelas dentro da ficha: mesma regra, rolam de lado */
.modal .corpo .rolagem{overflow-x:auto}

/* v103b · no telefone a topbar substitui a barra antiga (estava saindo duas) */
@media (max-width:900px){
  .barra-celular{display:none !important}
  .layout{padding-top:0}
  .topbar{position:sticky;top:0;display:grid;grid-template-columns:auto auto 1fr auto auto;grid-template-areas:'marca menu . sino pessoa' 'busca busca busca busca busca';
    gap:6px 10px;padding:8px 12px;align-items:center}
  .topbar .marca-topo{grid-area:marca}
  .topbar .recolher{grid-area:menu}
  .topbar .busca-global{grid-area:busca;max-width:none}
  .topbar .espaco{display:none}
  .topbar .loja-topo{display:none}
  .topbar .sino{grid-area:sino}
  .topbar .pessoa{grid-area:pessoa}
  .topbar .pessoa .nome,.topbar .pessoa .papel{display:none}
  /* a loja volta a aparecer no topo da pagina, ao lado do titulo */
  .topo .seletor-loja.no-topo{display:inline-block;width:auto;max-width:46vw}
  /* o menu lateral vira gaveta: o botao da topbar abre */
  .lateral{position:fixed;left:0;top:0;bottom:0;height:100vh;width:260px;z-index:70;transform:translateX(-100%);transition:transform .2s}
  html.gaveta-aberta .lateral{transform:none}
  .veu{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:65}
  html.gaveta-aberta .veu{display:block}
  .layout{grid-template-columns:minmax(0,1fr)}
}

/* v103c · colunas com a MESMA largura do desktop em qualquer tela.
   Sem isto o navegador encolhia Cliente ate uma palavra por linha. */
.rolagem > table.lista-os td,.rolagem > table.lista-os th{white-space:nowrap !important}
.rolagem > table.lista-os td[data-rotulo=Nº]{width:96px}
.rolagem > table.lista-os td[data-rotulo=Cliente] > div{max-width:185px !important;min-width:150px;white-space:normal !important}
.rolagem > table.lista-os td[data-rotulo=Equipamentos] > div{max-width:215px !important;min-width:170px;white-space:normal !important}
.rolagem > table.lista-os td[data-rotulo=Defeito resumido] > div{max-width:200px !important;min-width:160px;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis}
.rolagem > table.lista-os td[data-rotulo=Cliente] > div > div,
.rolagem > table.lista-os td[data-rotulo=Equipamentos] > div > div{white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis}
.rolagem > table.lista-os td[data-rotulo=Cliente] > div > small,
.rolagem > table.lista-os td[data-rotulo=Equipamentos] > div > small{white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;display:block}
.rolagem > table.lista-os td[data-rotulo=Situação] .etiqueta{max-width:160px !important;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis}
.rolagem > table.lista-os td[data-rotulo=Técnico]{max-width:110px;overflow:hidden;text-overflow:ellipsis}
.rolagem > table.lista-os .acoes-linha{flex-wrap:nowrap}

/* v103d · as mesmas regras vencendo a variante .compacta; e no telefone a
   coluna Acoes deixa de ser grudada (ela cobria o Cliente) */
.rolagem > table.lista-os.compacta td[data-rotulo=Defeito resumido] > div{white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;max-width:200px !important}
.rolagem > table.lista-os.compacta td[data-rotulo=Cliente] > div > div,
.rolagem > table.lista-os.compacta td[data-rotulo=Equipamentos] > div > div,
.rolagem > table.lista-os.compacta td[data-rotulo=Cliente] > div > small,
.rolagem > table.lista-os.compacta td[data-rotulo=Equipamentos] > div > small{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.rolagem > table.lista-os.compacta td[data-rotulo=Situação] .etiqueta{white-space:nowrap !important;overflow:hidden !important;max-width:160px !important}
.rolagem > table.lista-os.compacta td[data-rotulo=Técnico]{white-space:nowrap !important;overflow:hidden !important}
@media (max-width:760px){
  .rolagem > table.lista-os td.acoes-td{position:static !important;box-shadow:none}
  .rolagem > table.lista-os .acoes-linha .acao{width:32px;height:32px;font-size:13px}
}

/* v103e · larguras fixas por coluna (as do desktop) e a coluna Acoes larga
   o bastante para os 5 botoes ficarem numa linha. Antes a coluna tinha 64px,
   os botoes empilhavam e a linha ia a 197px. */
.rolagem > table.lista-os{min-width:1380px;table-layout:fixed}
.rolagem > table.lista-os th:first-child,.rolagem > table.lista-os td:first-child{width:40px}
.rolagem > table.lista-os th:nth-child(2),.rolagem > table.lista-os td[data-rotulo=Nº]{width:96px}
.rolagem > table.lista-os th:nth-child(3),.rolagem > table.lista-os td[data-rotulo=Cliente]{width:200px}
.rolagem > table.lista-os th:nth-child(4),.rolagem > table.lista-os td[data-rotulo=Equipamentos]{width:230px}
.rolagem > table.lista-os th:nth-child(5),.rolagem > table.lista-os td[data-rotulo=Defeito resumido]{width:210px}
.rolagem > table.lista-os td[data-rotulo=Entrada]{width:100px}
.rolagem > table.lista-os td[data-rotulo=Previsão]{width:96px}
.rolagem > table.lista-os td[data-rotulo=Técnico]{width:110px}
.rolagem > table.lista-os td[data-rotulo=Situação]{width:172px}
.rolagem > table.lista-os td[data-rotulo=Valor]{width:104px}
.rolagem > table.lista-os th.acoes-th,.rolagem > table.lista-os td.acoes-td{width:196px;min-width:196px}
.rolagem > table.lista-os td[data-rotulo=Defeito resumido] > *{display:block;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;max-width:100% !important}
.rolagem > table.lista-os td > div{overflow:hidden}
.rolagem > table.lista-os .acoes-linha{display:flex;flex-wrap:nowrap;gap:4px}
@media (max-width:760px){ .rolagem > table.lista-os th.acoes-th{position:static !important} }

/* v103f · com table-layout:fixed quem manda e o cabecalho: largura em TODOS os th */
.rolagem > table.lista-os th:nth-child(6){width:100px}
.rolagem > table.lista-os th:nth-child(7){width:96px}
.rolagem > table.lista-os th:nth-child(8){width:110px}
.rolagem > table.lista-os th:nth-child(9){width:172px}
.rolagem > table.lista-os th:nth-child(10){width:104px}
.rolagem > table.lista-os th:nth-child(11),.rolagem > table.lista-os th.acoes-th{width:200px}
.rolagem > table.lista-os.compacta td[data-rotulo=Defeito resumido] > div,
.rolagem > table.lista-os.compacta td[data-rotulo=Defeito resumido] > div > *{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block;max-width:100% !important}
.rolagem > table.lista-os td.acoes-td .acoes-linha{flex-wrap:nowrap !important;width:max-content}
/* v103g · a soma das colunas e 1558px: a tabela precisa dessa largura minima */
.rolagem > table.lista-os{min-width:1560px}
@media (min-width:1600px){ .rolagem > table.lista-os{min-width:0} }

/* v103h · ficha no telefone: nenhuma fileira de botoes empurra a tela de lado */
@media (max-width:760px){
  .modal .corpo{overflow-x:hidden !important}
  .modal .corpo div[style*="display:flex"]:not(.acoes-linha):not(.cartoes-situacao){flex-wrap:wrap !important}
  .modal .corpo select,.modal .corpo input:not([type=checkbox]):not([type=radio]){max-width:100% !important;min-width:0 !important}
  .modal .corpo .botao{max-width:100%}
  .modal .corpo [style*="grid-template-columns"]{grid-template-columns:1fr !important}
}
/* v103i · no telefone, o bloco de acoes do cabecalho da ficha ocupa a linha inteira e quebra */
@media (max-width:760px){
  .modal .corpo .cartao > .corpo > div{min-width:0;max-width:100%;flex:1 1 100%}
  .modal .corpo .cartao > .corpo > div > select{width:100% !important;min-width:0 !important;flex:1 1 100%}
  .modal .corpo .cartao > .corpo > div > .botao{flex:1 1 auto}
}
/* v103j · a grade da Nova OS nunca passa da largura da tela */
.nova-os-grade > *{min-width:0;max-width:100%}
.nova-os-grade .cartao,.nova-os-grade .corpo{min-width:0;max-width:100%}
@media (max-width:1100px){ .nova-os-grade{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){
  .cab-bloco .titulo-bloco{font-size:15px}
  .cab-bloco .sub-bloco{display:none}
  .grade-tipos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* v103k · no telefone o resumo da entrada vai para o fim, nao na frente do formulario */
@media (max-width:1100px){ .resumo-lateral{order:99} }

/* v104 · aba Equipamento da ficha */
.cartao-aparelho{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--borda);border-radius:12px;background:var(--papel);margin-bottom:10px}
.cartao-aparelho .ap-ic{width:52px;height:52px;border-radius:12px;background:var(--suave);display:inline-flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.cartao-aparelho .ap-nome{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cartao-aparelho .ap-tipo{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--azul-tenue);color:var(--azul)}
.cartao-aparelho .ap-sub{font-size:12.5px;color:var(--tinta-3);margin-top:2px}
.cartao-campos{border:1px solid var(--borda);border-radius:12px;padding:0 14px}
.cartao-campos > summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:13.5px;list-style:none}
.cartao-campos > summary::before{content:'\25B8';display:inline-block;margin-right:6px;color:var(--tinta-3)}
.cartao-campos[open] > summary::before{content:'\25BE'}
.bloco-defeito{border:1px solid var(--azul);border-radius:12px;padding:10px 12px;background:var(--azul-tenue);margin-bottom:10px}
.bloco-defeito textarea{background:var(--papel)}

.grade-chk{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));column-gap:22px}
.linha-chk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;border-bottom:1px solid var(--borda)}
.nome-chk{font-size:13.5px}
.seg-grupo{display:inline-flex;gap:4px;flex:none}
.seg-chk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--borda);
  background:var(--papel);color:var(--tinta-3);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;min-width:74px;justify-content:center}
.seg-chk .bola{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.seg-chk:hover{border-color:var(--borda-forte);color:var(--tinta)}
.seg-chk.ok.at{background:var(--verde-tenue);border-color:var(--verde);color:var(--verde);font-weight:700}
.seg-chk.def.at{background:var(--vermelho-tenue);border-color:var(--vermelho);color:var(--vermelho);font-weight:700}
.seg-chk.nt.at{background:#334155;border-color:#334155;color:#fff;font-weight:700}
.seg-chk.at .bola{background:currentColor}
.seg-chk.nt.at .bola{background:#fff;border-color:#fff}
.legenda-chk{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--tinta-2);margin-top:8px}
.legenda-chk i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.legenda-chk i.ok{background:var(--verde)} .legenda-chk i.def{background:var(--vermelho)} .legenda-chk i.nt{border:1.5px solid var(--tinta-3)}
.cartao-garantia .corpo{font-size:13px}
@media (max-width:760px){
  .grade-chk{grid-template-columns:1fr}
  .seg-chk{min-width:0;padding:0 8px}
  .cartao-aparelho{flex-wrap:wrap}
  .cartao-aparelho > .botao{flex:1 1 100%}
}
/* v105 · gravar audio/video no envio ao cliente */
.btn-gravar.gravando{background:var(--vermelho) !important;color:#fff !important;border-color:var(--vermelho) !important;animation:pulsa 1s infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}

/* v106 · desktop e tablet deitado (>=1100px): a lista cabe INTEIRA na tela, sem
   rolagem lateral. Com min-width:1560px a coluna Acoes (grudada a direita) cobria
   Situacao e Valor e, no Mac, a barra de rolagem nao aparece: "sumiu a Situacao".
   Abaixo de 1100px continua a regra mobile = desktop (rola de lado). */
@media (min-width:1100px){
  .rolagem > table.lista-os{min-width:0 !important;width:100%;table-layout:fixed}
  .rolagem > table.lista-os th:first-child,.rolagem > table.lista-os td:first-child{width:32px}
  .rolagem > table.lista-os th:nth-child(2),.rolagem > table.lista-os td[data-rotulo=Nº]{width:74px}
  .rolagem > table.lista-os th:nth-child(3),.rolagem > table.lista-os td[data-rotulo=Cliente]{width:auto}
  .rolagem > table.lista-os th:nth-child(4),.rolagem > table.lista-os td[data-rotulo=Equipamentos]{width:auto}
  .rolagem > table.lista-os th:nth-child(5),.rolagem > table.lista-os td[data-rotulo=Defeito resumido]{width:auto}
  .rolagem > table.lista-os th:nth-child(6),.rolagem > table.lista-os td[data-rotulo=Entrada]{width:88px}
  .rolagem > table.lista-os th:nth-child(7),.rolagem > table.lista-os td[data-rotulo=Previsão]{width:94px}
  .rolagem > table.lista-os th:nth-child(8),.rolagem > table.lista-os td[data-rotulo=Técnico]{width:96px}
  .rolagem > table.lista-os th:nth-child(9),.rolagem > table.lista-os td[data-rotulo=Situação]{width:150px}
  .rolagem > table.lista-os th:nth-child(10),.rolagem > table.lista-os td[data-rotulo=Valor]{width:100px}
  .rolagem > table.lista-os th:nth-child(11),.rolagem > table.lista-os th.acoes-th,.rolagem > table.lista-os td.acoes-td{width:144px;min-width:0}
  .rolagem > table.lista-os td[data-rotulo=Cliente] > div,
  .rolagem > table.lista-os td[data-rotulo=Equipamentos] > div,
  .rolagem > table.lista-os td[data-rotulo=Defeito resumido] > div{min-width:0 !important;max-width:100% !important}
  .rolagem > table.lista-os td[data-rotulo=Situação] .etiqueta{max-width:100% !important}
  .rolagem > table.lista-os td.acoes-td{position:static !important;box-shadow:none}
  .rolagem > table.lista-os th.acoes-th{position:static !important}
  .rolagem > table.lista-os .acoes-linha .acao{width:30px;height:30px}
  .rolagem > table.lista-os .acoes-linha{gap:3px}
  .rolagem > table.lista-os td[data-rotulo=Previsão],.rolagem > table.lista-os td[data-rotulo=Entrada],.rolagem > table.lista-os td[data-rotulo=Valor]{text-overflow:clip;padding-left:6px;padding-right:6px}
  .rolagem > table.lista-os td,.rolagem > table.lista-os th{overflow:hidden;text-overflow:ellipsis}
  .rolagem > table.lista-os td[data-rotulo=Cliente] > div > div,
  .rolagem > table.lista-os td[data-rotulo=Equipamentos] > div > div{max-width:100% !important;display:block}
  .rolagem > table.lista-os td[data-rotulo=Cliente] > div,
  .rolagem > table.lista-os td[data-rotulo=Equipamentos] > div{width:100%}
}

/* v107 · colunas ajustaveis: alca na borda direita de cada titulo */
.rolagem > table.lista-os th{position:relative}
.rolagem > table.lista-os th.acoes-th{position:sticky}
@media (min-width:1100px){ .rolagem > table.lista-os th.acoes-th{position:relative !important} }
.alca-col{position:absolute;right:-4px;top:0;bottom:0;width:9px;cursor:col-resize;z-index:3;touch-action:none}
.alca-col::after{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--borda)}
.alca-col:hover::after,body.redimensionando .alca-col::after{background:var(--azul);width:2px}
body.redimensionando{cursor:col-resize;user-select:none}
body.redimensionando .rolagem > table.lista-os td{pointer-events:none}

/* v108 · rotulos como nas telas novas: frase normal, 13px, medio (eram CAIXA ALTA 11px espacada) */
label{text-transform:none !important;letter-spacing:0 !important;font-size:13px;font-weight:600;color:var(--tinta-2)}
/* cartao do cliente na ficha (mesmo desenho do cartao do aparelho) */
.cartao-cliente{background:var(--papel)}
.cartao-cliente .ap-ic{background:var(--azul-tenue);letter-spacing:.02em}
.cartao-cliente .ap-acoes .botao{white-space:nowrap}
.cartao-cliente .ap-tipo{background:var(--verde-tenue);color:var(--verde)}
@media (max-width:760px){ .cartao-cliente{flex-wrap:wrap} .cartao-cliente .ap-acoes{width:100%;justify-content:flex-start !important} }

/* v109 · conversa com o cliente (gravacao interna) no bloco do defeito */
.conv-bloco{margin-top:10px;padding-top:10px;border-top:1px dashed var(--borda)}
.conv-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.conv-cab .tit{font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.conv-cab .nota{font-size:11.5px;color:var(--tinta-3)}
.conv-botoes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.conv-item{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--borda);border-radius:10px;background:var(--papel);margin-bottom:6px}
.conv-item .conv-ic{width:34px;height:34px;border-radius:9px;background:var(--suave);display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.conv-item .conv-tit{font-size:13px;font-weight:600}
.conv-item .conv-trans{font-size:12.5px;color:var(--tinta-2);white-space:pre-wrap;margin-top:3px;max-height:96px;overflow:auto}
.conv-item .conv-trans.vazio{color:var(--tinta-3);font-style:italic}
.conv-item .conv-imp{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--tinta-2);margin-top:6px;text-transform:none;letter-spacing:0;font-weight:500}
.conv-item .conv-imp input{width:auto;margin:0}
.conv-item .conv-acoes{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.conv-item .conv-acoes .botao{padding:4px 8px;font-size:12px}
.conv-item audio,.conv-item video{width:100%;margin-top:6px;border-radius:8px;background:#000}
.conv-item audio{background:transparent;height:36px}
.gravador-caixa{display:flex;flex-direction:column;gap:10px}
.gravador-caixa .relogio{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.gravador-caixa .relogio.on{color:var(--vermelho)}
.gravador-caixa .pulso{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--vermelho);margin-right:8px;animation:pulsar 1s infinite}
@keyframes pulsar{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
.gravador-caixa video{width:100%;max-height:260px;border-radius:10px;background:#000}
.gravador-caixa .ao-vivo{min-height:64px;max-height:160px;overflow:auto;padding:8px 10px;border:1px solid var(--borda);border-radius:10px;background:var(--suave);font-size:13px;white-space:pre-wrap}
.gravador-caixa .ao-vivo .parcial{color:var(--tinta-3)}
@media (max-width:760px){ .conv-item{flex-wrap:wrap} .conv-item .conv-acoes{width:100%;justify-content:flex-start} }

/* v110 · foto no cartao do aparelho */
.cartao-aparelho .ap-ic.com-foto{background:#fff;overflow:hidden;padding:0;width:64px;height:64px;border:1px solid var(--borda)}
.cartao-aparelho .ap-ic img{width:100%;height:100%;object-fit:cover;display:block}
.cartao-aparelho .ap-acoes .botao{white-space:nowrap}
@media (max-width:760px){ .cartao-aparelho{flex-wrap:wrap} .cartao-aparelho .ap-acoes{width:100%;justify-content:flex-start !important} }

/* v112 · monitor de orçamentos */
.orc-lista{display:flex;flex-direction:column;gap:8px}
.orc-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--borda);border-radius:12px;background:var(--papel)}
.orc-item.respondeu{border-color:var(--azul);background:var(--azul-tenue)}
.orc-ic{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none;background:var(--suave)}
.orc-tit{font-size:13.5px}
.orc-sub{font-size:12.5px;color:var(--tinta-3);margin-top:2px}
.orc-resp{font-size:13px;margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--papel);border:1px dashed var(--borda)}
.orc-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.tile.ativo{outline:2px solid var(--azul);outline-offset:1px}
@media (max-width:760px){ .orc-item{flex-wrap:wrap} .orc-acoes{width:100%;justify-content:flex-start} }

/* v114 */
.orc-item.aprovado{border-color:var(--verde);background:var(--verde-tenue)}
.orc-item.recusado{border-color:var(--vermelho);background:var(--vermelho-tenue)}

/* v118 · peça = compra */
.compra-peca{min-width:320px;text-align:left}
.compra-peca .linha-compra{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.compra-peca .linha-compra + .linha-compra{margin-top:6px}
.compra-peca select{font-size:12.5px;padding:6px 8px;min-width:150px;width:auto;max-width:230px;margin:0}.compra-peca input{font-size:12.5px;padding:6px 8px;width:auto;margin:0}.compra-peca input[type=number]{width:90px;text-align:right}
.compra-peca input[type=date]{width:138px}
@media (max-width:900px){.compra-peca{min-width:280px}.compra-peca select{min-width:130px;max-width:100%}}


/* === p89 · O POST-IT VOLTA A SER POST-IT (Gilson, 03/10: "o post-it tem que
   parecer post-it"). Os blocos v91c/v92b tinham achatado a nota numa tarja
   fina cortada com reticências. Volta o papel amarelo com alfinete, até 3
   linhas de texto, largura fixa para não esticar a coluna do número. === */
.rolagem > table.lista-os .postit,
.rolagem > table.lista-os.compacta .postit{
  display:block; width:128px; max-width:128px; margin:9px 0 3px; padding:8px 9px 10px;
  background:linear-gradient(165deg,#fff9bd 0%,#ffef7a 62%,#f6de58 100%) !important;
  color:#4a3d00 !important; font-size:11px; line-height:1.3; font-weight:500;
  border-radius:2px; transform:rotate(-1.4deg);
  box-shadow:0 1px 2px rgba(0,0,0,.16),0 8px 13px -8px rgba(0,0,0,.35);
}
.rolagem > table.lista-os .postit .txt,
.rolagem > table.lista-os.compacta .postit .txt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; text-overflow:clip; overflow-wrap:anywhere;
}
.rolagem > table.lista-os .postit::before,
.rolagem > table.lista-os .postit::after{ display:block; }
.rolagem > table.lista-os .postit.vermelho,
.rolagem > table.lista-os.compacta .postit.vermelho{
  background:linear-gradient(165deg,#ffdede 0%,#ffbcbc 62%,#f7a2a2 100%) !important; color:#6d1220 !important;
}
.rolagem > table.lista-os .postit.vermelho::after{ background:#f09e9e; }
@media (max-width:700px){
  .rolagem > table.lista-os .postit, .rolagem > table.lista-os.compacta .postit{ width:100%; max-width:100%; transform:none; }
}

/* p89 · faixa de promessas/tarefas no cabeçalho da ficha */
.faixa-promessas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;margin-top:6px}
.faixa-promessas .prom{display:inline-flex;gap:6px;align-items:center;border-radius:8px;padding:4px 9px;background:#fff8dc;border:1px solid #f1dd8a;color:#5b4a00;cursor:pointer;max-width:100%}
.faixa-promessas .prom.vencida{background:#fdecea;border-color:#f5c2c0;color:#8a1c17}
.faixa-promessas .prom b{white-space:nowrap}
.faixa-promessas .prom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
@media (max-width:700px){ .faixa-promessas .prom span{white-space:normal} }

/* === p90 · POST-IT PEQUENO AO LADO DO NÚMERO (Gilson, 04/10: "melhorar essa
   aparência, já tínhamos deixado parecido com sistema anterior"). A linha volta a
   ser compacta como no sistema anterior: ao lado do nº da OS fica um post-it
   pequeno (papel amarelo com alfinete e canto dobrado). Passando o mouse
   (ou tocando) ele abre no tamanho normal com o recado inteiro. No celular
   (lista empilhada) o recado já vem aberto. === */
.rolagem > table.lista-os td[data-rotulo="Nº"] > div{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.rolagem > table.lista-os .postit,
.rolagem > table.lista-os.compacta .postit{
  display:inline-block; width:30px; max-width:30px; height:26px; margin:0; padding:0;
  transform:rotate(-7deg); border-radius:2px; cursor:pointer; vertical-align:middle;
  background:linear-gradient(165deg,#fff9bd 0%,#ffef7a 62%,#f6de58 100%) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 8px -5px rgba(0,0,0,.35);
  position:relative; overflow:visible; flex:none;
}
.rolagem > table.lista-os .postit::before{ display:block; top:-4px; width:8px; height:8px; margin-left:-4px; }
.rolagem > table.lista-os .postit::after{ display:block; width:9px; height:9px; }
.rolagem > table.lista-os .postit.vermelho,
.rolagem > table.lista-os.compacta .postit.vermelho{ background:linear-gradient(165deg,#ffdede 0%,#ffbcbc 62%,#f7a2a2 100%) !important; }
/* o recado fica guardado; abre ao passar o mouse / tocar */
.rolagem > table.lista-os .postit .txt,
.rolagem > table.lista-os.compacta .postit .txt{
  display:none; position:absolute; left:38px; top:-10px; z-index:40; width:240px;
  padding:10px 12px 14px; transform:rotate(1.5deg);
  background:linear-gradient(165deg,#fff9bd 0%,#ffef7a 62%,#f6de58 100%); color:#4a3d00;
  font-size:12.5px; line-height:1.35; font-weight:500; text-align:left; border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 18px -8px rgba(0,0,0,.45);
  white-space:normal; overflow:visible; overflow-wrap:break-word; hyphens:auto; -webkit-line-clamp:unset; text-overflow:clip;
}
.rolagem > table.lista-os .postit.vermelho .txt{ background:linear-gradient(165deg,#ffdede 0%,#ffbcbc 62%,#f7a2a2 100%); color:#6d1220; }
.rolagem > table.lista-os .postit:hover .txt,
.rolagem > table.lista-os .postit:active .txt,
.rolagem > table.lista-os .postit:focus-within .txt{ display:block; }
.rolagem > table.lista-os td[data-rotulo="Nº"]{ overflow:visible; position:relative; }
/* celular / lista empilhada: o recado já vem aberto, no tamanho de sempre */
@media (max-width:700px){
  .rolagem > table.lista-os td[data-rotulo="Nº"] > div{ flex-wrap:wrap; }
  .rolagem > table.lista-os .postit, .rolagem > table.lista-os.compacta .postit{
    display:block; width:100%; max-width:100%; height:auto; padding:8px 9px 10px; margin:6px 0 2px; transform:none; }
  .rolagem > table.lista-os .postit .txt, .rolagem > table.lista-os.compacta .postit .txt{
    display:block; position:static; width:auto; padding:0; transform:none; background:none; box-shadow:none; font-size:11.5px; }
  .rolagem > table.lista-os .postit::before{ top:-6px; width:12px; height:12px; margin-left:-6px; }
}
/* a coluna Nº precisa de espaço para o número + o post-it, e não pode cortar o recado aberto */
.rolagem > table.lista-os th:nth-child(2),.rolagem > table.lista-os td[data-rotulo=Nº]{width:118px}
@media (min-width:1100px){ .rolagem > table.lista-os th:nth-child(2),.rolagem > table.lista-os td[data-rotulo=Nº]{width:112px} }
.rolagem > table.lista-os td[data-rotulo=Nº],.rolagem > table.lista-os td[data-rotulo=Nº] > div{overflow:visible !important}
@media (max-width:700px){
  .rolagem > table.empilha:has(.acoes-th) td[data-rotulo="Nº"]:has(.postit){grid-column:1 / -1}
  .rolagem > table.lista-os td[data-rotulo="Nº"] > div{display:block}
  .rolagem > table.lista-os .postit, .rolagem > table.lista-os.compacta .postit{width:calc(100% - 8px);max-width:calc(100% - 8px);margin:8px 4px 2px;transform:rotate(-.6deg)}
}

/* === p91 · LISTA DE OS NO VISUAL DO sistema anterior (Gilson, 04/10: "confere o
   sistema anterior"). Print de referência: fonte 12px, linha de ~44px, número sem
   negrito, cliente como link, situação em pílula BRANCA com borda e bolinha
   na cor (não bloco colorido), valor discreto, 3 botões pequenos de ação,
   bordas cinza-claro. Só no computador (≥1000px); o celular continua. === */
@media (min-width:1000px){
  .rolagem > table.lista-os td, .rolagem > table.lista-os th{ font-size:12px !important; }
  .rolagem > table.lista-os th{ font-weight:700 !important; color:#333 !important; padding:9px 8px !important; background:#fff !important; border-bottom:1px solid #e3e3e3 !important; }
  .rolagem > table.lista-os td, .rolagem > table.lista-os.compacta td{ padding-top:5px !important; padding-bottom:5px !important; line-height:1.3; border-bottom:1px solid #ececec !important; color:#222; }
  .rolagem > table.lista-os tbody tr:hover > td{ background:#f6f8fa !important; }
  .rolagem > table.lista-os td small, .rolagem > table.lista-os td .sub{ font-size:10.5px !important; color:#8a94a6 !important; }
  /* número: sem negrito pesado */
  .rolagem > table.lista-os td[data-rotulo="Nº"] b{ font-weight:600; font-size:12px; color:#222; }
  /* cliente como link azul do sistema anterior */
  .rolagem > table.lista-os td[data-rotulo="Cliente"] > div > div{ color:#1f5fbf !important; text-decoration:underline; text-decoration-color:#1f5fbf; text-underline-offset:2px; font-weight:500; font-size:12px; }
  /* situação: pílula branca, borda e texto na cor, bolinha, nome inteiro */
  .rolagem > table.lista-os td[data-rotulo="Situação"] .etiqueta,
  .rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{
    background:#fff !important; color:var(--cor,#555) !important; border:1px solid var(--cor,#999);
    border-radius:4px; font-size:9.5px !important; font-weight:700; letter-spacing:.01em; text-transform:uppercase;
    padding:2px 7px 2px 6px; gap:5px; max-width:none !important; overflow:visible !important; text-overflow:clip !important; line-height:1.5;
  }
  .rolagem > table.lista-os td[data-rotulo="Situação"] .etiqueta .ponto{ width:6px; height:6px; background:var(--cor,#999); }
  .rolagem > table.lista-os td[data-rotulo="Situação"]{ overflow:visible !important; }
  .rolagem > table.lista-os td[data-rotulo="Cliente"] > div > small, .rolagem > table.lista-os td[data-rotulo="Equipamentos"] > div > small{ line-height:1.2; display:block; }
  /* valor discreto */
  .rolagem > table.lista-os td[data-rotulo="Valor"]{ font-weight:500 !important; color:#222; }
  /* ações: botões pequenos, borda fina, ícone cinza */
  .rolagem > table.lista-os .acoes-linha .acao{ width:24px !important; height:24px !important; font-size:11px !important; border:1px solid #cfd4dc !important; border-radius:3px !important; background:#fff !important; color:#444 !important; }
  .rolagem > table.lista-os .acoes-linha{ gap:4px !important; }
  .rolagem > table.lista-os td:first-child input[type=checkbox]{ transform:scale(.9); }
  /* post-it pequeno acompanha a fonte menor */
  .rolagem > table.lista-os .postit{ width:26px; max-width:26px; height:22px; }
}
@media (min-width:1100px){
  .rolagem > table.lista-os th:nth-child(9),.rolagem > table.lista-os td[data-rotulo=Situação]{width:205px}
  .rolagem > table.lista-os th:nth-child(11),.rolagem > table.lista-os th.acoes-th,.rolagem > table.lista-os td.acoes-td{width:124px}
}

/* === p92 · LISTA DE OS: O QUE O GILSON PEDIU DE FATO (04/10) ===
   "cores na situação da OS, linhas de separação horizontal e vertical imitando
   Excel, tamanho da fonte, fonte usada, os nossos botões rápidos antes eram
   coloridos, o botão de acionar WhatsApp mudar cor para a do WhatsApp".
   Desfaz a pílula branca e os botões cinza do p91. Fonte Source Sans 3 (a do
   sistema anterior) agora é carregada de verdade no index.html. */
@media (min-width:1000px){
  /* grade estilo Excel: linha horizontal E vertical em toda célula */
  .rolagem > table.lista-os{ border-collapse:collapse !important; border:1px solid #d9dee5; }
  .rolagem > table.lista-os td, .rolagem > table.lista-os th{
    border:1px solid #dfe4ea !important; font-size:13px !important; font-family:var(--ui);
  }
  .rolagem > table.lista-os th{ background:#f2f4f7 !important; color:#2b3440 !important; font-weight:700 !important; }
  .rolagem > table.lista-os tbody tr:nth-child(even) > td{ background:#fbfcfd; }
  .rolagem > table.lista-os tbody tr:hover > td{ background:#eef4fb !important; }
  .rolagem > table.lista-os td small, .rolagem > table.lista-os td .sub{ font-size:11px !important; }
  .rolagem > table.lista-os td[data-rotulo="Nº"] b{ font-weight:700; font-size:13px; }
  .rolagem > table.lista-os td[data-rotulo="Cliente"] > div > div{ font-size:13px; }
  /* situação COLORIDA de novo (fundo na cor, texto escuro na cor, nome inteiro) */
  .rolagem > table.lista-os td[data-rotulo="Situação"] .etiqueta,
  .rolagem > table.lista-os.compacta td[data-rotulo="Situação"] .etiqueta{
    background:color-mix(in srgb, var(--cor,#999) 22%, #fff) !important;
    color:color-mix(in srgb, var(--cor,#555) 78%, #000) !important;
    border:1px solid color-mix(in srgb, var(--cor,#999) 55%, #fff);
    border-radius:4px; font-size:10px !important; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
    padding:3px 8px 3px 7px; max-width:none !important; overflow:visible !important; text-overflow:clip !important;
  }
  .rolagem > table.lista-os td[data-rotulo="Situação"] .etiqueta .ponto{ width:7px; height:7px; background:var(--cor,#999); }
  /* botões rápidos coloridos de novo (26px) */
  .rolagem > table.lista-os .acoes-linha .acao{ width:27px !important; height:27px !important; font-size:12.5px !important; border-radius:5px !important; filter:none !important; opacity:1 !important; }
  .rolagem > table.lista-os .acoes-linha .acao.azul{ background:#e8f0fe !important; color:#1d4ed8 !important; border:1px solid #bfd3fb !important; }
  .rolagem > table.lista-os .acoes-linha .acao.verde{ background:#e6f6ed !important; color:#128a4b !important; border:1px solid #b7e2c7 !important; }
  .rolagem > table.lista-os .acoes-linha .acao.cinza{ background:#f1f3f5 !important; color:#475569 !important; border:1px solid #d5dbe2 !important; }
  .rolagem > table.lista-os .acoes-linha .acao.laranja{ background:#fff1e0 !important; color:#c2410c !important; border:1px solid #fbd0a6 !important; }
  .rolagem > table.lista-os .acoes-linha .acao.vermelho{ background:#fdecea !important; color:#b42318 !important; border:1px solid #f5c2c0 !important; }
  .rolagem > table.lista-os .acoes-linha .acao:hover{ filter:brightness(.96) !important; }
  .rolagem > table.lista-os .acoes-linha .acao.azul:hover{ background:#dbe7fd !important; }
  .rolagem > table.lista-os .acoes-linha .acao.verde:hover{ background:#d4f0e0 !important; }
}
/* WhatsApp: verde do WhatsApp (#25D366), ícone branco — em qualquer largura */
.rolagem > table.lista-os .acoes-linha .acao.whats,
.rolagem > table.lista-os .acoes-linha .acao.whats.verde{
  background:#25d366 !important; color:#fff !important; border:1px solid #1ebe5d !important;
}
.rolagem > table.lista-os .acoes-linha .acao.whats:hover{ background:#1ebe5d !important; }
.rolagem > table.lista-os .acoes-linha .acao.whats svg{ width:15px; height:15px; display:block; }

/* p98 · kanban arrastável */
.cartao-os{cursor:grab}
.cartao-os.arrastando{opacity:.45;cursor:grabbing}
.coluna-os-corpo.solta-aqui{outline:2px dashed var(--acento,#2563eb);outline-offset:-4px;background:var(--suave)}

/* === p101 · #92 post-it pequeno mostra uma prévia do recado (não fica "vazio");
   passar o mouse abre o recado inteiro como antes === */
.rolagem > table.lista-os .postit, .rolagem > table.lista-os.compacta .postit{ width:76px; max-width:76px; height:30px; }
.rolagem > table.lista-os .postit .previa{
  display:block; font-size:8.5px; line-height:1.15; padding:3px 5px 2px; color:#4a3d00; font-weight:600;
  max-height:26px; overflow:hidden; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.rolagem > table.lista-os .postit.vermelho .previa{ color:#6d1220; }
.rolagem > table.lista-os .postit .txt{ left:84px; }
@media (max-width:700px){ .rolagem > table.lista-os .postit .previa{ display:none; } }

/* === p101 · #93 TEMA ESCURO na lista de OS: as cores fixas (claras) da grade
   deixavam linha escura com texto escuro. No escuro a grade usa as variáveis. === */
@media (min-width:1000px){
  :root[data-tema="escuro"] .rolagem > table.lista-os{ border-color:var(--borda) !important; }
  :root[data-tema="escuro"] .rolagem > table.lista-os td, :root[data-tema="escuro"] .rolagem > table.lista-os th{ border-color:var(--borda) !important; color:var(--tinta); }
  :root[data-tema="escuro"] .rolagem > table.lista-os th{ background:var(--suave) !important; color:var(--tinta-2) !important; }
  :root[data-tema="escuro"] .rolagem > table.lista-os tbody tr > td{ background:var(--papel); }
  :root[data-tema="escuro"] .rolagem > table.lista-os tbody tr:nth-child(even) > td{ background:var(--papel-2); }
  :root[data-tema="escuro"] .rolagem > table.lista-os tbody tr:hover > td{ background:var(--suave-2) !important; }
  :root[data-tema="escuro"] .rolagem > table.lista-os td b, :root[data-tema="escuro"] .rolagem > table.lista-os td a{ color:var(--tinta); }
  :root[data-tema="escuro"] .rolagem > table.lista-os td small{ color:var(--tinta-3); }
  :root[data-tema="escuro"] .rolagem > table.lista-os td[data-rotulo="Situação"] .etiqueta{
    background:color-mix(in srgb, var(--cor,#999) 28%, #1b1c1a) !important;
    color:color-mix(in srgb, var(--cor,#ccc) 70%, #fff) !important;
    border-color:color-mix(in srgb, var(--cor,#999) 45%, #1b1c1a); }
}
:root[data-tema="escuro"] .cartao-numero{ background:var(--papel); border-color:var(--borda); color:var(--tinta); }
/* p101 · tema escuro: cartões de contagem por situação (eram brancos fixos) */
:root[data-tema="escuro"] .cartao-situacao{ background:var(--papel); border-color:var(--borda); }
:root[data-tema="escuro"] .cartao-situacao .bolha{ background:color-mix(in srgb, var(--cor-situacao,#999) 30%, #1b1c1a); }
:root[data-tema="escuro"] .cartao-situacao .texto b{ color:var(--tinta); }
:root[data-tema="escuro"] .cartao-situacao.ativo{ border-color:var(--cor-situacao,#ccc); }
:root[data-tema="escuro"] .cartao-situacao:hover{ border-color:var(--cor-situacao,#ccc); }

/* p103 · botão ⭐ Solicitar avaliação na linha */
.acoes-linha .acao.ambar{ background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.acoes-linha .acao.ambar:hover{ background:#fde68a; }
:root[data-tema="escuro"] .acoes-linha .acao.ambar{ background:#3a2a0e; color:#fbbf24; border-color:#5a4216; }

/* p105 · ⭐✓ = link já enviado (ainda sem avaliação) */
.acoes-linha .acao.ambar.enviado{ background:#fef9c3; color:#854d0e; border-color:#fde047; font-size:10px; letter-spacing:-1px; }

/* p107 · ícone colorido dos grupos do menu */
.grupo-menu > .grupo-titulo{ gap:10px !important; }
.grupo-menu > .grupo-titulo > .ic-grupo{ flex:none; width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25); filter:none !important; opacity:1 !important; }
.grupo-menu > .grupo-titulo > .nome-grupo{ flex:1; }
.grupo-menu > .lista-menu{ padding-left:36px !important; }
:root[data-tema="escuro"] .grupo-menu > .grupo-titulo > .ic-grupo{ box-shadow:0 1px 2px rgba(0,0,0,.5); }

/* p108 · Windows: a lista do seletor de loja herdava o branco da barra (branco no branco) */
.topbar .loja-topo select option, select.seletor-loja option{ background:#fff !important; color:#0f172a !important; }
:root[data-tema="escuro"] .topbar .loja-topo select option, :root[data-tema="escuro"] select.seletor-loja option{ background:#1e293b !important; color:#f1f5f9 !important; }

/* p109 · ícone do módulo ao lado do título da tela */
.topo .cabeca > .ic-grupo.ic-titulo{ flex:none; width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.25); }
@media (max-width:900px){ .topo .cabeca > .ic-grupo.ic-titulo{ width:32px; height:32px; border-radius:9px; } .topo .cabeca > .ic-grupo.ic-titulo svg{ width:18px; height:18px; } }

/* p109b · no celular o título some, então o ícone do título também */
@media (max-width:900px){ .topo .cabeca > .ic-grupo.ic-titulo{ display:none !important; } }

/* p110 · organizar o menu */
.lateral .organizar-menu{ padding:8px 12px 0; }
.lateral .organizar-menu .dica-organizar{ font-size:11.5px; color:var(--tinta-3); margin:0 2px 7px; line-height:1.3; }
.grupo-menu.editando > .grupo-titulo, .grupo-menu.editando > .lista-menu > a{ cursor:grab; outline:1px dashed var(--borda-forte); outline-offset:-2px; border-radius:9px; }
.grupo-menu.editando > .lista-menu > a{ display:flex !important; align-items:center; gap:6px; margin:3px 0; }
.grupo-menu.editando > .lista-menu > a > .nome-item{ flex:1; min-width:0; }
.setas-menu{ display:inline-flex; gap:4px; flex:none; margin-left:auto; }
.seta-menu{ width:28px; height:28px; border-radius:7px; border:1px solid var(--borda-forte); background:var(--papel,#fff); color:var(--tinta-2,#334155); font-size:10px; line-height:1; cursor:pointer; padding:0; }
.seta-menu:hover{ background:#2563eb; color:#fff; border-color:#2563eb; }
.grupo-menu .arrastando{ opacity:.45; }
.grupo-menu .alvo-menu{ outline:2px solid #2563eb !important; background:rgba(37,99,235,.10); }
@media (max-width:900px){ .seta-menu{ width:36px; height:36px; font-size:12px; } }

/* p111 · ícone no título da coluna */
th[data-ic]::before{ content:attr(data-ic); margin-right:5px; font-size:13px; letter-spacing:0; font-weight:400; opacity:.95; }
@media print{ th[data-ic]::before{ content:none; } }
/* p110b · nome comprido no modo organizar não passa por baixo das setas */
.grupo-menu.editando > .lista-menu > a > .nome-item{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grupo-menu.editando > .grupo-titulo > .nome-grupo{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* p111b · coluna de valor: selo R$ */
th[data-ic="R$"]::before{ background:#16a34a; color:#fff; border-radius:5px; padding:1px 5px; font-size:10px; font-weight:800; letter-spacing:0; opacity:1; }

/* p112 · ícone do submenu */
.grupo-menu > .lista-menu > a{ display:flex !important; align-items:center; gap:9px; }
.grupo-menu > .lista-menu > a > .ic-item{ flex:none; width:20px; text-align:center; font-size:15px; line-height:1; }
.grupo-menu > .lista-menu > a > .nome-item{ flex:1; min-width:0; }
.grupo-menu > .lista-menu{ padding-left:26px !important; }

/* p112b · nome comprido do submenu quebra a linha em vez de cortar */
.grupo-menu:not(.editando) > .lista-menu > a > .nome-item{ white-space:normal; overflow:visible; line-height:1.25; }
.grupo-menu > .lista-menu{ padding-left:20px !important; }

/* p113 · linha pontilhada ligando o grupo aos seus submenus (como no sistema anterior) */
.grupo-menu > .lista-menu{ margin-left:25px !important; padding-left:0 !important; border-left:2px dotted var(--borda-forte,#cbd5e1); }
.grupo-menu > .lista-menu > a{ position:relative; margin-left:16px !important; }
.grupo-menu > .lista-menu > a::before{ content:""; position:absolute; left:-16px; top:50%; width:12px; border-top:2px dotted var(--borda-forte,#cbd5e1); }

/* p113b · submenu mais junto da linha */
.grupo-menu > .lista-menu > a{ padding-left:8px !important; }

/* p114 · ícone nos cartões de resumo e nos botões */
.indicador > span[data-ic]{ display:flex !important; align-items:center; gap:9px; margin-top:0 !important; margin-bottom:8px; }
.indicador > span[data-ic]::before{ content:attr(data-ic); flex:none; width:30px; height:30px; border-radius:8px; background:var(--ic-fundo,#e2e8f0);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; letter-spacing:0; }
.indicador b{ font-size:clamp(20px,2.1vw,30px) !important; white-space:nowrap; }
.botao[data-ic]::before, .lateral .rodape a[data-ic]::before{ content:attr(data-ic); margin-right:6px; font-weight:400; }
@media print{ .botao[data-ic]::before{ content:none; } }

/* p115 · logo do sistema na barra */
.topbar .logo.logo-sistema{ background:none !important; padding:0 !important; box-shadow:0 0 10px rgba(99,102,241,.55); border-radius:9px; overflow:hidden; display:inline-flex; }
.topbar .logo.logo-sistema img{ display:block; width:34px; height:34px; }

/* p116 · faixa "só o financeiro desta OS" */
.faixa-filtro-os{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fef9c3; border:1px solid #fde047; color:#713f12; border-radius:10px; padding:9px 12px; margin:0 0 12px; font-size:13.5px; }
.faixa-filtro-os[hidden]{ display:none; }
.faixa-filtro-os > span{ flex:1; min-width:200px; }
:root[data-tema="escuro"] .faixa-filtro-os{ background:#422006; border-color:#854d0e; color:#fef08a; }

/* p117 · Nova OS — passo do cliente */
input.busca-cliente-os{ padding-left:42px !important; background-repeat:no-repeat; background-position:13px center; background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.600-3.600'/%3E%3C/svg%3E"); }
.rotulo-achados{ font-size:13px; font-weight:700; color:var(--tinta-2,#334155); margin:4px 0 0; }
.cliente-achado{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; cursor:pointer;
  background:#f0fdf4; border:1px solid #bbf7d0; flex-wrap:wrap; }
.cliente-achado:hover, .cliente-achado:focus{ border-color:#16a34a; outline:none; box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.cliente-achado .avatar-achado{ flex:none; width:46px; height:46px; border-radius:50%; background:#bbf7d0; color:#15803d; font-weight:800; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; }
.cliente-achado .dados-achado{ flex:1 1 220px; min-width:0; }
.cliente-achado .dados-achado > b{ font-size:15.5px; color:var(--tinta,#0f172a); }
.cliente-achado .contatos-achado{ display:flex; gap:4px 16px; flex-wrap:wrap; font-size:13px; color:var(--tinta-2,#475569); margin-top:3px; }
.cliente-achado .contatos-achado .falta{ color:#b45309; }
.cliente-achado .selos-achado{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.cliente-achado .selo{ font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:20px; }
.cliente-achado .selo.verde{ background:#dcfce7; color:#166534; } .cliente-achado .selo.azul{ background:#dbeafe; color:#1e40af; } .cliente-achado .selo.vermelho{ background:#fee2e2; color:#b91c1c; }
.cliente-achado .selecionar-achado{ flex:none; background:#16a34a !important; color:#fff !important; min-height:42px; padding:0 18px; }
.botao.opcao-origem{ min-height:42px; padding:0 14px; display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.botao.opcao-origem .ic-origem{ font-size:16px; line-height:1; }
.botao.opcao-origem.marcada{ background:#eff6ff !important; color:#1d4ed8 !important; border:2px solid #2563eb !important; }
:root[data-tema="escuro"] .cliente-achado{ background:#052e16; border-color:#166534; }
:root[data-tema="escuro"] .cliente-achado .avatar-achado{ background:#166534; color:#bbf7d0; }
:root[data-tema="escuro"] .botao.opcao-origem.marcada{ background:#1e3a8a !important; color:#dbeafe !important; }
@media (max-width:600px){ .cliente-achado .selecionar-achado{ width:100%; } }

/* p117b · campo de seleção não estoura a largura do cartão */
.modal select{ max-width:100%; min-width:0; }

/* p118 · Nova OS — barra de passos e sub-blocos numerados */
.passos-os{ position:sticky; top:0; z-index:5; display:flex; align-items:flex-start; justify-content:center; gap:0; padding:10px 8px 12px; margin:-4px 0 12px;
  background:var(--papel,#fff); border-bottom:1px solid var(--borda,#e2e8f0); }
.passos-os .passo{ background:none; border:0; padding:0 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:74px; color:var(--tinta-3,#64748b); font:inherit; }
.passos-os .passo .bola{ width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
  background:var(--suave,#f1f5f9); color:var(--tinta-3,#64748b); border:2px solid transparent; }
.passos-os .passo .nome{ font-size:12.5px; font-weight:500; }
.passos-os .passo.atual .bola{ background:#2563eb; color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.18); }
.passos-os .passo.atual .nome{ color:#2563eb; font-weight:700; }
.passos-os .passo.feito .bola{ background:#dcfce7; color:#15803d; border-color:#86efac; }
.passos-os .passo.feito .nome{ color:var(--tinta,#0f172a); }
.passos-os .fio{ flex:1 1 40px; max-width:110px; height:2px; background:var(--borda-forte,#cbd5e1); margin-top:16px; }
.passos-os .fio.feito{ background:#22c55e; }
.tit-sub{ display:inline-flex; align-items:center; gap:8px; }
.tit-sub .num-sub{ width:22px; height:22px; border-radius:50%; background:#0f172a; color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.tit-sub .ic-sub{ font-size:15px; }
.cab-sub{ font-weight:600; font-size:13.5px; margin:0 0 10px; }
:root[data-tema="escuro"] .tit-sub .num-sub{ background:#e2e8f0; color:#0f172a; }
/* "Situação inicial" passava da borda do cartão */
.linha-entrada > *{ min-width:0; }
.lado-entrada select, .lado-entrada input{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
@media (max-width:600px){ .passos-os .passo{ min-width:56px; } .passos-os .passo .nome{ font-size:11px; } .passos-os .fio{ flex-basis:14px; } }

/* p119 · Início: grade de 12 passos, janela com tamanho próprio e puxador de canto */
@media (min-width:901px){
  .inicio-grade{ grid-template-columns:repeat(12,minmax(0,1fr)) !important; }
  .inicio-grade > .janela{ grid-column:span var(--colunas,4) !important; }
  .inicio-grade > .inicio-vazio{ grid-column:1 / -1 !important; }
}
.janela > .corpo-janela{ overflow:auto; }
.janela .puxador-janela{ position:absolute; right:3px; bottom:2px; width:22px; height:22px; align-items:center; justify-content:center; font-size:14px; line-height:1;
  color:#2563eb; cursor:nwse-resize; user-select:none; touch-action:none; z-index:3; }
.inicio-grade.organizando > .janela{ outline:1px dashed var(--borda-forte,#cbd5e1); }
.inicio-grade > .janela.redimensionando{ outline:2px solid #2563eb; user-select:none; }
.inicio-grade.organizando{ min-height:60vh; padding-bottom:80px; }
@media (max-width:900px){ .janela .puxador-janela{ display:none !important; } .janela > .corpo-janela{ height:auto !important; } }

/* p120 · central de pendências na Agenda */
.centro-pendencias{ margin:0 0 14px; }
.centro-pendencias > .cab{ font-weight:700; }
.centro-pendencias .conta-centro{ background:#dc2626; color:#fff; border-radius:20px; padding:1px 9px; font-size:12px; font-weight:700; }
.centro-pendencias .grupos-centro{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px 4px; }
.centro-pendencias .grupo-centro{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--borda-forte,#cbd5e1); background:var(--papel,#fff); color:var(--tinta,#0f172a);
  border-radius:10px; padding:7px 10px; font:inherit; font-size:13px; cursor:pointer; }
.centro-pendencias .grupo-centro b{ background:var(--suave,#f1f5f9); border-radius:20px; padding:0 8px; font-size:12px; }
.centro-pendencias .grupo-centro.aberto{ border-color:#2563eb; background:rgba(37,99,235,.10); color:#1d4ed8; font-weight:600; }
.centro-pendencias .grupo-centro.aberto b{ background:#2563eb; color:#fff; }
.centro-pendencias .itens-centro{ padding:8px 14px 14px; max-height:340px; overflow:auto; }
.centro-pendencias .item-centro{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--borda,#e2e8f0); }
.centro-pendencias .item-centro:last-child{ border-bottom:0; }
.centro-pendencias .item-centro .txt{ flex:1; min-width:0; font-size:13.5px; }
.centro-pendencias .item-centro .det{ color:var(--tinta-3,#64748b); font-size:12.5px; margin-top:2px; }
:root[data-tema="escuro"] .centro-pendencias .grupo-centro.aberto{ color:#bfdbfe; }
@media (max-width:600px){ .centro-pendencias .item-centro{ flex-wrap:wrap; } .centro-pendencias .item-centro .botao{ width:100%; } }

/* p121 · Central: filtros numa linha + "Ver mais opções" (não passam mais do layout) */
.barra.barra-central{ flex-wrap:wrap; align-items:flex-start; }
.pilulas.pilulas-central{ display:flex; flex-wrap:wrap; gap:4px; flex:1 1 100%; min-width:0; max-width:100%; max-height:44px; overflow:hidden; }
.pilulas.pilulas-central.abertas{ max-height:none; }
.pilulas.pilulas-central > button{ white-space:nowrap; }
.barra-central .mais-pilulas{ white-space:nowrap; }

/* p122 · layout fluido de verdade: o conteúdo ocupa toda a largura da janela (antes parava em 1440px) */
.conteudo{ max-width:none !important; }
html, body{ max-width:100%; overflow-x:clip; }
.conteudo img, .conteudo video, .modal img, .modal video{ max-width:100%; height:auto; }
/* telas muito grandes (TV / 4K): aumenta tudo para ler de longe */
@media (min-width:2400px){ html{ zoom:1.25; } }
@media (min-width:3200px){ html{ zoom:1.6; } }
/* Central: a primeira pílula não encosta na borda arredondada */
.pilulas.pilulas-central{ padding-left:6px; }

/* p124 · compra de peça na ficha da OS */
.compra-peca.registrada{ min-width:300px; font-size:12.5px; }
.compra-peca .forn-compra{ margin-bottom:5px; color:var(--tinta-2,#334155); }
.compra-peca .etapa-compra{ display:flex; gap:7px; align-items:flex-start; padding:2px 0; color:var(--tinta-3,#64748b); }
.compra-peca .etapa-compra .ic{ flex:none; width:18px; text-align:center; }
.compra-peca .etapa-compra.feita{ color:#15803d; } .compra-peca .etapa-compra.feita .ic{ font-weight:800; }
.compra-peca .etapa-compra.alerta{ color:#b45309; font-weight:600; }
.pedido-peca .cab-pedido{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--suave,#f1f5f9); }
.pedido-peca .cab-pedido .ic{ font-size:26px; } .pedido-peca .cab-pedido small{ display:block; color:var(--tinta-3,#64748b); }
.resumo-pedido{ background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.25); border-radius:10px; padding:9px 12px; font-size:13px; line-height:1.55; margin:6px 0 8px; }
.opcoes-pagou{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; }
.op-pagou{ display:flex; gap:10px; align-items:center; text-align:left; padding:10px 12px; border-radius:11px; cursor:pointer; font:inherit;
  border:1px solid var(--borda-forte,#cbd5e1); background:var(--papel,#fff); color:var(--tinta,#0f172a); }
.op-pagou .ic{ font-size:20px; } .op-pagou b{ display:block; font-size:13.5px; } .op-pagou small{ display:block; color:var(--tinta-3,#64748b); font-size:11.5px; line-height:1.3; margin-top:1px; }
.op-pagou.marcada{ border:2px solid #2563eb; background:rgba(37,99,235,.08); padding:9px 11px; }
:root[data-tema="escuro"] .compra-peca .etapa-compra.feita{ color:#86efac; }
:root[data-tema="escuro"] .compra-peca .etapa-compra.alerta{ color:#fcd34d; }

/* p125 · Agenda: quadro da semana em post-its + calendário do mês */
.legenda-agenda{ display:flex; gap:8px 14px; flex-wrap:wrap; margin:0 0 12px; font-size:12.5px; color:var(--tinta-2,#334155); }
.leg-agenda{ display:inline-flex; align-items:center; gap:6px; }
.leg-agenda i{ width:12px; height:12px; border-radius:3px; background:var(--cor-postit,#fde68a); display:inline-block; }
.leg-agenda b{ background:var(--suave,#f1f5f9); border-radius:20px; padding:0 7px; font-size:11.5px; }
.p-entrega{ --cor-postit:#fde68a; --tinta-postit:#713f12; }
.p-terceirizado{ --cor-postit:#bfdbfe; --tinta-postit:#1e3a8a; }
.p-promessa{ --cor-postit:#e9d5ff; --tinta-postit:#581c87; }
.p-peca{ --cor-postit:#bbf7d0; --tinta-postit:#14532d; }
.leg-agenda.atrasado{ --cor-postit:#fca5a5; }
.quadro-semana{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.dia-quadro{ background:var(--papel,#fff); border:1px solid var(--borda,#e2e8f0); border-radius:16px; padding:10px 10px 12px; min-height:210px; display:flex; flex-direction:column; min-width:0; }
.dia-quadro.fds{ background:var(--suave,#f8fafc); }
.dia-quadro.passado{ opacity:.82; }
.dia-quadro.hoje{ border:2px solid #2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.cab-dia-quadro{ all:unset; cursor:pointer; display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:0 8px; padding:2px 4px 8px; border-bottom:1px dashed var(--borda-forte,#cbd5e1); margin-bottom:10px; }
.cab-dia-quadro .nome-dia{ font-weight:700; font-size:15px; color:var(--tinta,#0f172a); }
.cab-dia-quadro .num-dia{ font-size:22px; font-weight:700; color:var(--tinta,#0f172a); line-height:1; }
.dia-quadro.hoje .num-dia{ background:#2563eb; color:#fff; border-radius:50%; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; }
.cab-dia-quadro small{ grid-column:1 / -1; color:var(--tinta-3,#64748b); font-size:11.5px; margin-top:2px; }
.pilha-postits{ display:flex; flex-direction:column; gap:9px; }
.nota-ag{ position:relative; text-align:left; font:inherit; cursor:pointer; border:0; border-radius:3px 3px 12px 3px; padding:9px 10px 10px; min-width:0;
  background:var(--cor-postit,#fde68a); color:var(--tinta-postit,#422006); display:flex; flex-direction:column; gap:2px;
  box-shadow:0 1px 1px rgba(0,0,0,.08), 0 6px 10px -4px rgba(0,0,0,.22); border-left:4px solid rgba(0,0,0,.14); transition:transform .12s ease, box-shadow .12s ease; }
.nota-ag.torto-a{ transform:rotate(-.7deg); } .nota-ag.torto-b{ transform:rotate(.6deg); }
.nota-ag:hover, .nota-ag:focus-visible{ transform:rotate(0) translateY(-2px); box-shadow:0 2px 2px rgba(0,0,0,.1), 0 12px 16px -6px rgba(0,0,0,.3); outline:none; z-index:2; }
.nota-ag .topo-postit{ display:flex; justify-content:space-between; gap:6px; font-size:11px; font-weight:600; opacity:.85; }
.nota-ag b{ font-size:13px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.nota-ag .oque-postit{ font-size:11.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:26px; }
.nota-ag .quem-postit{ position:absolute; right:7px; bottom:7px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.75); color:var(--tinta-postit); font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.nota-ag.atrasado{ border-left-color:#dc2626; }
.nota-ag .selo-atraso{ background:#dc2626; color:#fff; border-radius:20px; padding:0 7px; font-size:10px; }
.dia-quadro.proxima{ align-items:center; justify-content:center; gap:6px; cursor:pointer; border-style:dashed; color:var(--tinta-3,#64748b); font:inherit; background:transparent; }
.dia-quadro.proxima .nome-dia{ font-weight:700; font-size:15px; color:var(--tinta-2,#334155); } .dia-quadro.proxima .seta-prox{ font-size:22px; }
.dia-quadro.proxima:hover{ border-color:#2563eb; color:#2563eb; }
.barra input.ir-para-data{ min-width:0; width:150px; }
.calendario-mes{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
.calendario-mes .cab-mes{ text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3,#64748b); padding:4px 0; }
.dia-mes{ background:var(--papel,#fff); border:1px solid var(--borda,#e2e8f0); border-radius:12px; min-height:112px; padding:6px; display:flex; flex-direction:column; gap:4px; cursor:pointer; min-width:0; }
.dia-mes:hover{ border-color:#2563eb; }
.dia-mes.fora{ opacity:.45; }
.dia-mes .num-mes{ font-weight:700; font-size:13px; align-self:flex-end; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.dia-mes.hoje{ border:2px solid #2563eb; } .dia-mes.hoje .num-mes{ background:#2563eb; color:#fff; }
.nota-ag.compacto{ padding:3px 6px; border-radius:3px 3px 7px 3px; box-shadow:0 1px 2px rgba(0,0,0,.15); transform:none !important; flex-direction:row; align-items:center; gap:6px; }
.nota-ag.compacto .topo-postit{ font-size:10px; flex:none; } .nota-ag.compacto b{ font-size:11px; -webkit-line-clamp:1; }
.nota-ag.compacto .selo-atraso{ display:none; }
.dia-mes .mais-mes{ color:var(--tinta-3,#64748b); font-size:11px; }
:root[data-tema="escuro"] .p-entrega{ --cor-postit:#a16207; --tinta-postit:#fefce8; }
:root[data-tema="escuro"] .p-terceirizado{ --cor-postit:#1d4ed8; --tinta-postit:#eff6ff; }
:root[data-tema="escuro"] .p-promessa{ --cor-postit:#7e22ce; --tinta-postit:#faf5ff; }
:root[data-tema="escuro"] .p-peca{ --cor-postit:#15803d; --tinta-postit:#f0fdf4; }
:root[data-tema="escuro"] .nota-ag .quem-postit{ background:rgba(0,0,0,.35); }
@media (max-width:1200px){ .quadro-semana{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){
  .quadro-semana{ grid-template-columns:1fr; gap:8px; }
  .dia-quadro{ min-height:0; flex-direction:row; gap:10px; padding:10px; }
  .cab-dia-quadro{ display:flex; flex-direction:column; align-items:center; border-bottom:0; border-right:1px dashed var(--borda-forte,#cbd5e1); margin:0; padding:0 10px 0 0; width:64px; flex:none; text-align:center; }
  .cab-dia-quadro .nome-dia{ font-size:12px; } .cab-dia-quadro small{ font-size:10px; }
  .pilha-postits{ flex:1; min-width:0; } .nota-ag{ transform:none !important; }
  .dia-quadro.proxima{ flex-direction:row; padding:14px; }
  .calendario-mes{ gap:3px; } .dia-mes{ min-height:66px; padding:3px; border-radius:8px; }
  .nota-ag.compacto b{ display:none; } .nota-ag.compacto{ justify-content:center; padding:2px; } .nota-ag.compacto .topo-postit{ font-size:9px; }
  .barra input.ir-para-data{ width:100%; }
}

/* p126 · IMPRESSÃO da lista (Ctrl+P ou "apenas seleção"): as colunas se ajustam ao papel em vez de sumir.
   Na tela a tabela tem larguras fixas; no papel estreito as colunas flexíveis (Cliente, Equipamentos, Defeito) iam a zero. */
@media print{
  .topbar, #lateral, .barra-celular, .veu, .passos-os, .organizar-menu{ display:none !important; }
  .layout{ display:block !important; } .conteudo{ padding:0 !important; margin:0 !important; overflow:visible !important; }
  .rolagem{ overflow:visible !important; max-height:none !important; }
  :root:root:root:root table.lista-os.lista-os, :root:root:root:root .rolagem > table{ table-layout:auto !important; width:100% !important; min-width:0 !important; }
  :root:root:root:root table.lista-os.lista-os th, :root:root:root:root table.lista-os.lista-os td, :root:root:root:root .rolagem > table th, :root:root:root:root .rolagem > table td{
    width:auto !important; min-width:0 !important; max-width:none !important; padding:4px 6px !important; font-size:9.5px !important; line-height:1.25 !important;
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important; vertical-align:top !important; }
  :root:root:root:root table.lista-os.lista-os td > div, :root:root:root:root table.lista-os.lista-os td > div > div, :root:root:root:root table.lista-os.lista-os td > div > small, :root:root:root:root table.lista-os.lista-os td .etiqueta{
    max-width:none !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; display:block !important; -webkit-line-clamp:unset !important; }
  :root:root:root:root table.lista-os.lista-os th:first-child, :root:root:root:root table.lista-os.lista-os td:first-child, :root:root:root:root table.lista-os.lista-os .acoes-th, :root:root:root:root table.lista-os.lista-os .acoes-td{ display:none !important; }
  :root:root:root:root table.lista-os.lista-os td[data-rotulo="Nº"], :root:root:root:root table.lista-os.lista-os td[data-rotulo="Entrada"], :root:root:root:root table.lista-os.lista-os td[data-rotulo="Previsão"], :root:root:root:root table.lista-os.lista-os td[data-rotulo="Valor"]{ white-space:nowrap !important; }
  :root:root:root:root table.lista-os.lista-os tr, :root:root:root:root .rolagem > table tr{ break-inside:avoid; page-break-inside:avoid; }
  :root:root:root:root table.lista-os.lista-os thead{ display:table-header-group; }
  :root:root:root:root table.lista-os.lista-os .postit{ display:none !important; }
}
/* p126b · no papel nada é cortado com "…": o texto quebra a linha; botões e filtros não saem */
@media print{
  :root:root:root:root table.lista-os.lista-os td *, :root:root:root:root .rolagem > table td *{ white-space:normal !important; max-width:none !important; overflow:visible !important; text-overflow:clip !important; -webkit-line-clamp:unset !important; }
  :root:root:root:root table.lista-os.lista-os td .etiqueta{ display:inline-block !important; padding:1px 5px !important; font-size:8.5px !important; }
  :root:root:root:root table.lista-os.lista-os td[data-rotulo="Nº"] *, :root:root:root:root table.lista-os.lista-os td[data-rotulo="Entrada"] *, :root:root:root:root table.lista-os.lista-os td[data-rotulo="Previsão"] *, :root:root:root:root table.lista-os.lista-os td[data-rotulo="Valor"] *{ white-space:nowrap !important; }
  main.conteudo button, main.conteudo .botao, main.conteudo input, main.conteudo select, main.conteudo .pilulas, main.conteudo label:has(input[type=checkbox]){ display:none !important; }
  .topo .cabeca h1{ font-size:18px !important; } .ic-titulo{ display:none !important; }
}

/* p128 · tela "Peça para a OS" */
.pedido-peca .opcoes-pagou{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
/* p128b · lista de OS no celular não passa mais 4px da tela */
@media (max-width:900px){ main.conteudo{ overflow-x:clip; } main.conteudo > *{ max-width:100%; } }

/* p129 · painel de peças */
.painel-pecas{ margin:0 0 16px; } .painel-pecas > .cab{ font-weight:700; }
.painel-pecas.na-janela{ border:0; box-shadow:none; margin:0; } .painel-pecas.na-janela > .cab{ padding:0 0 10px; }
.cols-pecas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px 14px 14px; }
.painel-pecas.na-janela .cols-pecas{ padding:0; }
.col-pecas{ border:1px solid var(--borda,#e2e8f0); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-width:0; border-top:4px solid var(--cor-col,#94a3b8); }
.col-pecas.comprar{ --cor-col:#f59e0b; } .col-pecas.pedidas{ --cor-col:#3b82f6; } .col-pecas.pagar{ --cor-col:#ef4444; } .col-pecas.reembolso{ --cor-col:#a855f7; }
.cab-col-pecas{ display:flex; align-items:center; gap:8px; padding:9px 10px; background:var(--suave,#f8fafc); }
.cab-col-pecas .ic{ font-size:18px; } .cab-col-pecas b{ display:block; font-size:13px; } .cab-col-pecas small{ display:block; color:var(--tinta-3,#64748b); font-size:11px; }
.cab-col-pecas .qtd{ margin-left:auto; background:var(--cor-col); color:#fff; border-radius:20px; padding:1px 9px; font-weight:800; font-size:12.5px; }
.itens-col-pecas{ padding:8px; display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; }
.item-peca{ all:unset; cursor:pointer; display:flex; gap:9px; padding:7px 8px; border-radius:9px; border:1px solid var(--borda,#e2e8f0); background:var(--papel,#fff); box-sizing:border-box; width:100%; }
.item-peca:hover{ border-color:var(--cor-col); } .item-peca.alerta{ border-left:3px solid var(--cor-col); }
.item-peca .os-peca{ flex:none; font-weight:800; font-size:11.5px; color:var(--tinta-2,#334155); width:62px; } .item-peca .os-peca small{ display:block; font-weight:500; color:var(--tinta-3,#64748b); font-size:10px; }
.item-peca .txt-peca{ min-width:0; font-size:12.5px; } .item-peca .txt-peca > b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-peca .txt-peca small{ display:block; color:var(--tinta-3,#64748b); font-size:11px; line-height:1.35; }
.vazio-pecas{ color:var(--tinta-3,#64748b); font-size:12px; padding:10px 4px; text-align:center; }
@media (max-width:1200px){ .cols-pecas{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .cols-pecas{ grid-template-columns:1fr; } .itens-col-pecas{ max-height:none; } }

/* p131 · integrações */
.linha-integracao{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--borda,#e2e8f0); flex-wrap:wrap; }
.linha-integracao:last-child{ border-bottom:0; } .linha-integracao .ic{ font-size:20px; }
.linha-integracao small{ display:block; color:var(--tinta-3,#64748b); font-size:12px; }

/* p132 · Início: janela começa na coluna onde foi solta */
@media (min-width:901px){ .inicio-grade > .janela{ grid-column:var(--inicio, auto) / span var(--colunas,4) !important; } }

/* p133 · origem da peça e coluna de conciliação */
.cols-pecas{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.col-pecas.conciliar{ --cor-col:#64748b; }
.compra-peca.registrada.interna .forn-compra{ color:var(--tinta,#0f172a); }
@media (max-width:1500px){ .cols-pecas{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1000px){ .cols-pecas{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .cols-pecas{ grid-template-columns:1fr; } }

/* p135 · pergunta grande "salvar antes de sair" + salvar por parte */
.modal.modal-guarda{ z-index:100000; }
.modal.modal-guarda > .caixa{ max-width:560px; width:calc(100vw - 24px); }
.guarda-salvar{ display:flex; flex-direction:column; gap:14px; text-align:center; }
.guarda-salvar .gs-icone{ font-size:44px; line-height:1; }
.guarda-salvar .gs-texto{ font-size:16.5px; font-weight:600; line-height:1.4; }
.guarda-salvar .gs-lista{ text-align:left; margin:0 auto; padding-left:20px; font-size:13.5px; color:var(--tinta-2,#475569); }
.guarda-salvar .gs-salvar{ width:100%; font-size:21px; font-weight:800; padding:22px 18px; border-radius:16px; background:#16a34a; border-color:#16a34a; color:#fff; box-shadow:0 8px 22px rgba(22,163,74,.35); white-space:normal; line-height:1.25; }
.guarda-salvar .gs-salvar:hover{ filter:brightness(1.06); }
.guarda-salvar .gs-linha{ display:flex; gap:10px; flex-wrap:wrap; }
.guarda-salvar .gs-linha .botao{ flex:1 1 200px; padding:14px 12px; font-size:15px; font-weight:700; white-space:normal; }
.guarda-salvar .gs-sair{ color:#b91c1c; border-color:#fecaca; background:#fff5f5; }
.linha-salvar-parte{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--linha,#e2e8f0); }
.linha-salvar-parte .botao{ font-weight:700; }
.st-parte{ font-size:12.5px; color:var(--tinta-3,#94a3b8); }
.st-parte.ok{ color:#15803d; font-weight:700; }
.st-parte.erro{ color:#b91c1c; font-weight:700; }
.andamentos-gravados{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.andamento-gravado{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; border-radius:10px; padding:9px 12px; font-size:13.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.andamento-gravado span{ flex:1 1 200px; color:#064e3b; }
[data-theme=escuro] .andamento-gravado, .escuro .andamento-gravado{ background:#052e22; border-color:#065f46; color:#a7f3d0; }
[data-theme=escuro] .andamento-gravado span, .escuro .andamento-gravado span{ color:#d1fae5; }
.guarda-salvar .botao.gs-salvar{ background:#16a34a !important; border-color:#16a34a !important; color:#fff !important; justify-content:center; text-align:center; display:flex; }
.guarda-salvar .gs-linha .botao{ justify-content:center; text-align:center; }

/* ============ p137 · CELULAR NO MESMO PADRÃO DO COMPUTADOR (só até 900px) ============ */
@media (max-width:900px){
  /* título da tela com o ícone colorido do módulo, como no computador */
  .topo .cabeca{ flex-wrap:wrap !important; gap:8px 10px !important; align-items:center; }
  .topo h1, .topo .cabeca h1{ display:block !important; font-size:23px !important; line-height:1.15; flex:1 1 auto; min-width:0; order:0; margin:0; }
  .topo .cabeca > .ic-grupo.ic-titulo, .ic-titulo{ display:inline-flex !important; width:36px !important; height:36px !important; border-radius:10px; order:-1; flex:none; }
  .topo .cabeca > .ic-grupo.ic-titulo svg{ width:20px; height:20px; }
  /* loja: a mesma pílula escura da barra do topo */
  .topo .seletor-loja.no-topo{ background:#0f172a !important; color:#fff !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:10px;
    font-weight:700; font-size:12.5px; padding:8px 28px 8px 11px; max-width:44vw; text-transform:uppercase; letter-spacing:.02em; }
  /* barras de botões e filtros: nada escondido para o lado — quebra em linhas e mostra tudo */
  .barra:has(> .pilulas), .topo + .barra, .conteudo .barra{ overflow-x:visible !important; flex-wrap:wrap !important; padding-bottom:0 !important; }
  .conteudo .barra > *{ flex:1 1 auto !important; min-width:0; max-width:100%; }
  .conteudo .barra > input:not([type=checkbox]):not([type=radio]), .conteudo .barra > select{ flex:1 1 140px !important; }
  .conteudo .barra > .pilulas{ flex:1 1 100% !important; flex-wrap:wrap !important; overflow:visible !important; }
  .conteudo .barra > label, .conteudo .barra > small, .conteudo .barra > b, .conteudo .barra > span:not(.pilulas){ flex:0 1 auto !important; }
  .conteudo .barra > span[style*="flex:1"]{ display:none; }
  .conteudo .barra .botao{ justify-content:center; white-space:nowrap; }
  .pilulas-central, .conteudo .pilulas{ flex-wrap:wrap !important; overflow:visible !important; white-space:normal !important; }
  /* cartões de situação: grade de 2, todos à vista (antes rolavam para o lado) */
  .cartoes-situacao{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; overflow:visible !important; gap:8px !important; }
  .cartoes-situacao > *{ min-width:0; width:auto !important; }
  /* abas: todas à vista, em linhas */
  .abas, .abas-ficha{ flex-wrap:wrap !important; overflow:visible !important; white-space:normal !important; gap:2px 4px; }
  .abas button, .abas-ficha .aba-ficha{ flex:0 0 auto; padding:9px 11px; }
  /* cartões de lista: rótulo com o mesmo ícone da coluna */
  table.empilha td[data-ic-rotulo]::before{ content:attr(data-ic-rotulo) "  " attr(data-rotulo) !important; }
  /* Início: o botão de janela fica na barra, como no computador, e a barra de período ocupa a linha */
  .inicio-topo{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .inicio-topo > *{ flex:0 1 auto; }
}

/* ============ p138 · celular / tablet não ficam mais travados ============ */
.so-toque{ display:none !important; }
/* ☰ no computador e no tablet deitado: esconde/mostra o menu da esquerda */
@media (min-width:901px){
  :root.menu-recolhido .layout{ grid-template-columns:0 minmax(0,1fr) !important; }
  :root.menu-recolhido .lateral{ display:none !important; }
}
@media (max-width:1100px), (pointer:coarse){
  /* a janela (OS, cadastro, pagamento…) passa por cima da barra do topo: o × deixa de ficar escondido atrás dela */
  .modal{ z-index:95 !important; }
  .modal.modal-guarda{ z-index:100000 !important; }
  .modal > .caixa > .cab{ position:sticky; top:0; z-index:6; background:var(--papel,#fff); border-radius:16px 16px 0 0; }
  .modal > .caixa > .cab .fechar{ min-width:46px; min-height:46px; font-size:28px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
    background:var(--fundo,#f1f5f9); border:1px solid var(--borda,#e2e8f0); border-radius:12px; color:var(--tinta,#0f172a); flex:none; }
  .so-toque{ display:inline-flex !important; }
  /* lista de OS: sempre rola para o lado com o dedo (entre 701 e 1100px ela ficava cortada, sem rolagem) */
  .cartao.rolagem:has(table.lista-os), .cartao.rolagem:has(> table){ overflow-x:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  /* linhas entre as OS (horizontais) e entre as colunas (verticais), como no computador */
  .rolagem > table.lista-os tbody td{ border-bottom:1px solid var(--linha,#e2e8f0) !important; border-right:1px solid var(--linha,#eef2f7) !important; }
  .rolagem > table.lista-os thead th{ border-right:1px solid var(--linha,#e2e8f0) !important; border-bottom:2px solid var(--borda,#cbd5e1) !important; }
}

/* p139 · foto e modelo da peça na linha da OS */
.extra-peca{ display:flex; gap:8px; align-items:flex-start; margin-top:6px; flex-wrap:wrap; }
.extra-peca .foto-peca{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--borda,#e2e8f0); cursor:zoom-in; flex:none; background:#f1f5f9; }
.extra-peca-campos{ display:flex; flex-direction:column; gap:6px; flex:1 1 150px; min-width:0; align-items:flex-start; }
.extra-peca-campos input{ width:100%; font-size:12.5px; padding:6px 9px; }

/* p139 · foto e modelo da peça na linha da OS */
.extra-peca{ display:flex; gap:8px; align-items:flex-start; margin-top:6px; flex-wrap:wrap; }
.extra-peca .foto-peca{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--borda,#e2e8f0); cursor:zoom-in; flex:none; background:#f1f5f9; }
.extra-peca-campos{ display:flex; flex-direction:column; gap:6px; flex:1 1 150px; min-width:0; align-items:flex-start; }
.extra-peca-campos input{ width:100%; font-size:12.5px; padding:6px 9px; }

/* p140 · alfinete "fixar no topo" ao lado do número da OS */
.fixar-os{ border:0; background:transparent; cursor:pointer; font-size:14px; line-height:1; padding:3px 4px; margin-left:4px; border-radius:6px; opacity:.28; filter:grayscale(1); vertical-align:middle; }
.fixar-os:hover{ opacity:.8; background:var(--fundo,#f1f5f9); }
.fixar-os.fixada{ opacity:1; filter:none; background:#fef3c7; }
tr:has(.fixar-os.fixada) > td{ background:#fffbeb !important; }
:root[data-tema="escuro"] tr:has(.fixar-os.fixada) > td{ background:#3a2f0b !important; }
@media (max-width:1100px), (pointer:coarse){ .fixar-os{ font-size:16px; padding:6px 7px; opacity:.4; } }
/* p140b · o alfinete é discreto quando solto e amarelo quando fixado (regras da lista ganhavam do estilo) */
:root:root .rolagem table td button.fixar-os{ border:0 !important; background:transparent !important; box-shadow:none !important; min-width:0 !important; width:auto !important; height:auto !important; padding:3px 4px !important; opacity:.25 !important; filter:grayscale(1) !important; }
:root:root .rolagem table td button.fixar-os:hover{ opacity:.85 !important; }
:root:root .rolagem table td button.fixar-os.fixada{ opacity:1 !important; filter:none !important; background:#fde68a !important; border-radius:7px !important; }
:root:root .rolagem table tbody tr:has(button.fixar-os.fixada) > td{ background:#fffbeb !important; }
:root:root .rolagem table tbody tr:has(button.fixar-os.fixada) > td:first-child{ box-shadow:inset 4px 0 0 #f59e0b; }
:root:root[data-tema="escuro"] .rolagem table tbody tr:has(button.fixar-os.fixada) > td{ background:#3a2f0b !important; }
/* p140c · marca discreta de OS fixada + linha destacada */
.marca-fixada{ display:inline-block; margin-left:5px; font-size:13px; vertical-align:middle; }
:root:root .rolagem table tbody tr:has(.marca-fixada) > td{ background:#fffbeb !important; }
:root:root .rolagem table tbody tr:has(.marca-fixada) > td:first-child{ box-shadow:inset 4px 0 0 #f59e0b; }
:root:root[data-tema="escuro"] .rolagem table tbody tr:has(.marca-fixada) > td{ background:#3a2f0b !important; }

/* === p141 · POST-IT EMBAIXO DO NÚMERO (Gilson, 05/10: "a linha onde entra o
   post-it deve automaticamente ser ajustada na altura para caber abaixo do
   número da OS, pois está cobrindo o nome do cliente"). O recado deixa de ficar
   ao lado e passa para baixo do número; a linha cresce sozinha. === */
@media (min-width:701px){
  .rolagem > table.lista-os td[data-rotulo="Nº"] > div{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; flex-wrap:nowrap; }
  .rolagem > table.lista-os tr:has(.postit) > td{ height:auto !important; max-height:none !important; }
  .rolagem > table.lista-os .postit,
  .rolagem > table.lista-os.compacta .postit{
    display:block; box-sizing:border-box; width:100%; max-width:100%; height:auto; min-height:26px;
    margin:3px 0 5px; padding:0; transform:rotate(-2deg); flex:none; }
  .rolagem > table.lista-os .postit .previa{
    max-height:none; font-size:9.5px; line-height:1.2; padding:0; margin:5px 6px 7px;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .rolagem > table.lista-os .postit .txt{ left:calc(100% + 8px); top:-6px; }
}

/* p157 · Ajuda: manuais como páginas do sistema */
.aj-grade{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.aj-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.aj-titulo{font-size:20px;margin:0 0 12px}
.aj-linha{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--borda,#e4e8ee);padding:12px 6px;cursor:pointer;color:inherit;font:inherit}
.aj-linha:last-child{border-bottom:0}
.aj-linha:hover{background:rgba(37,99,235,.06)}
.aj-n{flex:none;width:34px;height:34px;border-radius:50%;background:#e11d48;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.aj-t{flex:1;min-width:0}
.aj-t b{display:block;font-size:15px}
.aj-t small{display:block;color:var(--tinta-3,#7b8698);font-size:12.5px}
.aj-q{flex:none;color:var(--tinta-3,#7b8698);font-size:12.5px;white-space:nowrap}
.aj-abre{border-left:6px solid #e11d48;padding:4px 0 4px 14px;margin:4px 0 16px}
.aj-abre small{color:#e11d48;font-weight:700;letter-spacing:.03em}
.aj-abre h2{margin:2px 0;font-size:24px;line-height:1.15}
.aj-abre p{margin:0;color:var(--tinta-2,#465061)}
.aj-destaque{background:#e11d48;color:#fff;border-radius:14px;padding:18px 16px;text-align:center;margin-bottom:18px}
.aj-destaque b{display:block;font-size:24px;line-height:1.15}
.aj-destaque span{display:block;margin-top:6px;font-size:15px}
.aj-passo{margin:0 0 22px;max-width:980px}
.aj-cab{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.aj-cab h3{margin:2px 0 2px;font-size:17px;line-height:1.25}
.aj-cab p{margin:0;font-size:14.5px;color:var(--tinta-2,#465061)}
.aj-passo img{display:block;max-width:100%;height:auto;border:1px solid var(--borda,#cbd5e1);border-radius:10px;cursor:zoom-in;background:#fff}
.aj-nota{background:#fff7ed;border-left:4px solid #f59e0b;padding:8px 10px;font-size:13.5px;margin-top:8px;border-radius:6px;color:#7a5200}
.aj-regras{border:1.5px solid var(--tinta,#0f172a);border-radius:12px;padding:12px 16px;max-width:980px}
.aj-regras ul{margin:8px 0 0;padding-left:20px}
.aj-regras li{margin-bottom:6px;font-size:14.5px}
@media (max-width:700px){.aj-abre h2{font-size:20px}.aj-q{display:none}.aj-destaque b{font-size:20px}}

/* =====================================================================
   p170 · Nova Ordem de Serviço — página única (cabeçalho azul-marinho,
   4 etapas, 3 cartões + resumo, checklist e fotos). Tudo dentro de .os-v2.
   ===================================================================== */
.modal.os-v2{--os-navy:#17263d;--os-blue:#2563eb;--os-blue-hover:#1d4ed8;--os-blue-soft:#eff6ff;--os-page:#f5f8fc;--os-card:#fff;--os-text:#0f172a;--os-muted:#64748b;--os-subtle:#94a3b8;--os-border:#e2e8f0;--os-green:#10b981;--os-green-soft:#ecfdf5;--os-amber:#f59e0b;--os-amber-soft:#fff7ed;--os-orange-text:#c66a00;--os-red:#ef4444;--os-red-soft:#fef2f2;--os-radius:12px;--os-shadow:0 2px 10px rgb(15 23 42 / 3%);--os-focus:0 0 0 3px rgb(37 99 235 / 16%);
  padding:0;inset:0;z-index:1200;background:var(--os-page);display:block;overflow-y:auto;overflow-x:hidden}
.modal.os-v2 .caixa{max-width:none;width:100%;min-height:100vh;border-radius:0;box-shadow:none;background:var(--os-page);color:var(--os-text);display:flex;flex-direction:column;
  font-family:Inter,"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.modal.os-v2 .caixa > .cab{background:var(--os-navy);color:#fff;border:0;padding:0 max(20px,calc((100% - 1536px)/2));min-height:68px}
.modal.os-v2 .caixa > .cab h2{font:inherit;margin:0;flex:1;letter-spacing:0}
.modal.os-v2 .caixa > .cab .fechar{width:40px;height:40px;border-radius:999px;border:0;color:#cbd5e1;background:transparent;font-size:24px;cursor:pointer}
.modal.os-v2 .caixa > .cab .fechar:hover{color:#fff;background:rgb(255 255 255 / 10%)}
.modal.os-v2 .caixa > .corpo{padding:0;flex:1;overflow:visible}
.modal.os-v2 .caixa > .pe{position:sticky;bottom:0;z-index:20;margin:0;border-radius:0;border-top:1px solid var(--os-border);background:rgb(255 255 255 / 94%);box-shadow:0 -4px 16px rgb(15 23 42 / 4%);backdrop-filter:blur(10px);
  padding:12px max(20px,calc((100% - 1536px)/2));display:flex;align-items:center;gap:8px;justify-content:flex-start;flex-wrap:nowrap}
.os-v2 .os-espaco{flex:1}
.os-v2 *{box-sizing:border-box}
.os-v2 :focus-visible{outline:none;box-shadow:var(--os-focus)}
.os-v2 .os-shell{width:min(100% - 40px,1536px);margin:0 auto}
.os-v2 .os-page{padding-bottom:24px}
.os-v2 .os-brand{display:flex;align-items:center;gap:14px;min-width:0}
.os-v2 .os-brand__icon{display:grid;width:40px;height:40px;flex:0 0 auto;place-items:center;border-radius:9px;background:#3b82f6;font-size:20px}
.os-v2 .os-brand__title{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;color:#fff}
.os-v2 .os-brand__subtitle{display:block;margin-top:3px;color:#cbd5e1;font-size:13px;font-weight:400}
/* etapas */
.os-v2 .os-stepper{position:sticky;top:0;z-index:15;border-bottom:1px solid var(--os-border);background:#fff}
.os-v2 .os-stepper__inner{display:flex;align-items:center;gap:20px;min-height:64px;overflow-x:auto;scrollbar-width:none}
.os-v2 .os-step{display:flex;flex:1 0 150px;align-items:center;gap:12px;min-width:0}
.os-v2 .os-step:last-child{flex:0 0 auto}
.os-v2 .os-step__button{display:flex;align-items:center;gap:12px;min-width:0;border:0;padding:0;text-align:left;color:var(--os-text);background:transparent;cursor:pointer;font:inherit}
.os-v2 .os-step__circle{display:grid;width:36px;height:36px;flex:0 0 auto;place-items:center;border-radius:50%;color:#475569;background:#f1f5f9;font-size:14px;font-weight:600}
.os-v2 .os-step.is-active .os-step__circle{color:#fff;background:var(--os-blue);box-shadow:0 4px 12px rgb(37 99 235 / 25%)}
.os-v2 .os-step.is-done .os-step__circle{color:var(--os-blue);background:var(--os-blue-soft)}
.os-v2 .os-step__label{display:block;font-size:13px;font-weight:600;white-space:nowrap}
.os-v2 .os-step.is-active .os-step__label{color:#1d4ed8}
.os-v2 .os-step__hint{display:block;margin-top:2px;color:var(--os-muted);font-size:11px;white-space:nowrap}
.os-v2 .os-step__line{height:1px;flex:1;background:var(--os-border)}
.os-v2 .os-step.is-done .os-step__line{background:#93c5fd}
/* corpo */
.os-v2 .os-main{display:grid;grid-template-columns:minmax(0,1fr) 440px;align-items:start;gap:16px;padding-top:16px}
.os-v2 .os-form-column,.os-v2 .os-summary-column{min-width:0;display:grid;gap:12px}
.os-v2 .os-summary-column{position:sticky;top:80px}
.os-v2 .os-card{border:1px solid var(--os-border);border-radius:var(--os-radius);padding:16px;background:var(--os-card);box-shadow:var(--os-shadow);margin:0}
.os-v2 .os-card.is-active{border-color:#60a5fa;box-shadow:0 0 0 1px rgb(96 165 250 / 20%),var(--os-shadow)}
.os-v2 .os-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.os-v2 .os-section-heading{display:flex;align-items:flex-start;gap:12px;min-width:0}
.os-v2 .os-section-heading__icon{display:grid;width:36px;height:36px;flex:0 0 auto;place-items:center;border-radius:50%;background:var(--os-blue-soft);font-size:17px}
.os-v2 .os-section-heading__number{display:inline-grid;width:24px;height:24px;margin-right:8px;place-items:center;border-radius:50%;color:#fff;background:var(--os-blue);font-size:12px;font-weight:600;vertical-align:2px}
.os-v2 .os-section-heading__title{margin:0;color:var(--os-text);font-weight:600;font-size:17px;line-height:1.3;font-family:inherit;letter-spacing:-.02em}
.os-v2 .os-section-heading__description{margin:2px 0 0;color:var(--os-muted);font-size:12px;line-height:1.5}
/* botões */
.os-v2 .os-button{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:8px;padding:0 15px;color:var(--os-text);background:#fff;font-weight:500;font-size:13px;line-height:1;font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color .18s,background .18s,transform .18s}
.os-v2 .os-button:active{transform:scale(.98)}
.os-v2 .os-button--primary{color:#fff;border-color:var(--os-blue);background:var(--os-blue)}
.os-v2 .os-button--primary:hover{border-color:var(--os-blue-hover);background:var(--os-blue-hover)}
.os-v2 .os-button--primary.is-gravando{background:#dc2626;border-color:#dc2626}
.os-v2 .os-button--outline{border-color:var(--os-border)}
.os-v2 .os-button--outline:hover{border-color:#93c5fd;background:var(--os-blue-soft)}
.os-v2 .os-button--ghost{color:var(--os-muted);background:transparent}
.os-v2 .os-button:disabled{cursor:not-allowed;opacity:.5}
.os-v2 .os-so-icone{padding:0;width:40px}
.os-v2 .os-cta{min-width:132px;font-weight:600;font-size:14px}
.os-v2 .os-link{border:0;background:transparent;color:var(--os-blue);font-weight:500;font-size:12.5px;line-height:1.4;font-family:inherit;cursor:pointer;padding:6px 0;white-space:nowrap}
.os-v2 .os-link:hover{text-decoration:underline}
/* campos (inclusive os que já existiam e vieram para dentro do desenho novo) */
.os-v2 .os-main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),.os-v2 .os-main select{width:100%;height:44px;min-height:44px;padding:0 12px;border:1px solid var(--os-border);border-radius:8px;color:var(--os-text);background:#fff;font-weight:400;font-size:14px;line-height:1.2;font-family:inherit;outline:none}
.os-v2 .os-main textarea{width:100%;min-height:88px;padding:12px;border:1px solid var(--os-border);border-radius:8px;color:var(--os-text);background:#fff;font-weight:400;font-size:14px;line-height:1.45;font-family:inherit;resize:vertical;outline:none}
.os-v2 .os-main input::placeholder,.os-v2 .os-main textarea::placeholder{color:var(--os-subtle)}
.os-v2 .os-main input:focus,.os-v2 .os-main select:focus,.os-v2 .os-main textarea:focus{border-color:var(--os-blue);box-shadow:var(--os-focus)}
.os-v2 .os-main input[type=checkbox]{width:16px;height:16px;accent-color:var(--os-blue);margin:0}
.os-v2 .os-label{display:block;color:var(--os-text);font-size:13px;font-weight:500}
.os-v2 .os-label__required{color:var(--os-red)}
.os-v2 .os-label__control{display:block;margin-top:6px}
.os-v2 .os-campo{margin-bottom:12px}
.os-v2 .os-main .campo > label,.os-v2 .os-main .campo > span:first-child{font-size:13px;font-weight:500;color:var(--os-text)}
.os-v2 .os-search{position:relative}
.os-v2 .os-search__icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);font-size:16px;opacity:.6;pointer-events:none}
.os-v2 .os-main .os-search input{height:48px;padding-left:44px;border-color:#60a5fa}
/* origem */
.os-v2 [data-origem]{margin-top:14px}
.os-v2 [data-origem] > div:first-child{margin:0 0 8px!important;color:var(--os-text)!important;font-size:13px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0}
.os-v2 .opcao-origem{display:inline-flex;min-height:36px;align-items:center;gap:8px;border:1px solid var(--os-border);border-radius:8px;padding:0 12px;color:var(--os-text);background:#fff;font-weight:400;font-size:13px;line-height:1;font-family:inherit;box-shadow:none}
.os-v2 .opcao-origem:hover,.os-v2 .opcao-origem.marcada{border-color:#60a5fa;color:#1d4ed8;background:var(--os-blue-soft)}
/* gravação */
.os-v2 .os-recording{display:flex;align-items:center;gap:14px;margin-top:14px;border:1px solid #dbeafe;border-radius:8px;padding:12px;background:#f0f7ff}
.os-v2 .os-recording__icon{display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;border-radius:50%;background:#dbeafe;font-size:20px}
.os-v2 .os-recording__body{min-width:0;flex:1}
.os-v2 .os-recording__title{margin:0;font-size:14px;font-weight:600}
.os-v2 .os-recording__hint{margin:3px 0 0;color:var(--os-muted);font-size:12px;line-height:1.4}
.os-v2 .os-recording__actions{display:flex;align-items:center;gap:8px}
/* bloco 3 */
.os-v2 .os-entry-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);gap:20px}
.os-v2 .os-character-count{display:block;margin-top:3px;color:var(--os-subtle);font-size:11px;text-align:right}
.os-v2 .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.os-v2 .chips .rotulo-chips{flex:0 0 100%;margin:0 0 2px;color:var(--os-muted);font-size:12px;text-transform:none;letter-spacing:0;font-weight:400}
.os-v2 .chips .chip{min-height:28px;border:1px solid var(--os-border);border-radius:999px;padding:0 10px;color:#475569;background:#fff;font-weight:400;font-size:11.5px;line-height:1;font-family:inherit;cursor:pointer}
.os-v2 .chips .chip:hover{border-color:#60a5fa;color:#1d4ed8;background:var(--os-blue-soft)}
.os-v2 .os-checkbox{display:flex;align-items:center;gap:8px;margin-top:10px;color:#334155;font-size:12.5px;cursor:pointer}
.os-v2 .os-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.os-v2 .os-subcard{border:1px solid var(--os-border);border-radius:8px;padding:12px;min-width:0}
.os-v2 .os-subcard__title{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px;font-weight:500}
.os-v2 .caixas-acessorio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;margin-bottom:10px}
.os-v2 .caixa-acessorio{display:flex;align-items:center;gap:6px;color:#475569;font-size:11.5px;border:0;background:transparent;padding:0;margin:0;cursor:pointer;min-height:0}
.os-v2 .caixa-acessorio.at{color:#1d4ed8;font-weight:500}
.os-v2 .os-main .os-subcard input:not([type=checkbox]){height:36px;min-height:36px;font-size:12.5px}
.os-v2 .os-helper{margin:6px 0 0;color:var(--os-subtle);font-size:10.5px}
.os-v2 .os-prazo{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.os-v2 .os-main .os-prazo input[type=date]{flex:1 1 150px;width:auto}
.os-v2 .os-prazo > div{margin:0!important;display:flex;gap:6px}
.os-v2 .os-prazo .botao{min-height:40px;border:1px solid var(--os-border);border-radius:8px;background:#fff;color:var(--os-text);padding:0 10px;font-size:12.5px;box-shadow:none}
.os-v2 .os-prazo .botao:hover{border-color:#93c5fd;background:var(--os-blue-soft)}
.os-v2 .os-mais{margin-top:10px;border:1px solid var(--os-border);border-radius:8px;background:#fff}
.os-v2 .os-mais > summary{cursor:pointer;padding:10px 12px;font-size:13px;font-weight:500;color:#334155}
.os-v2 .os-mais > div{padding:0 12px 12px}
/* coluna da direita */
.os-v2 .os-summary-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.os-v2 .os-summary-title__left{display:flex;align-items:center;gap:8px;min-width:0}
.os-v2 .os-summary-title h2{margin:0;font-weight:600;font-size:16px;line-height:1.3;font-family:inherit;letter-spacing:-.01em;color:var(--os-text)}
.os-v2 .os-step-badge{border-radius:999px;padding:6px 10px;color:var(--os-muted);background:#f1f5f9;font-size:11px;white-space:nowrap}
.os-v2 .os-summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-bottom:1px solid #f1f5f9}
.os-v2 .os-summary-row:last-child{border-bottom:0}
.os-v2 .os-summary-row__label{color:var(--os-muted);font-size:12px;flex:0 0 auto}
.os-v2 .os-summary-row__value{max-width:68%;overflow:hidden;color:#334155;font-size:12px;font-weight:500;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.os-v2 .os-summary-row__value.is-status{border-radius:999px;padding:6px 10px;color:var(--os-orange-text);background:var(--os-amber-soft);font-size:10px;text-transform:uppercase;font-weight:600}
.os-v2 .contador-chk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 8px}
.os-v2 .contador-chk .cx{display:block;border-radius:8px;padding:9px 3px;text-align:center;font-size:10px;border:0;line-height:1.2}
.os-v2 .contador-chk .cx b{display:block;font-size:18px;line-height:1.1;margin-bottom:3px}
.os-v2 .contador-chk .cx.ok{color:#047857;background:var(--os-green-soft)}
.os-v2 .contador-chk .cx.def{color:#dc2626;background:var(--os-red-soft)}
.os-v2 .contador-chk .cx.nt{color:#475569;background:#f1f5f9}
.os-v2 .contador-chk .cx.falta{color:var(--os-orange-text);background:var(--os-amber-soft)}
.os-v2 [data-card-checklist] .grade-chk{display:block}
.os-v2 [data-card-checklist] .linha-chk{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;border:0;border-bottom:1px solid #f1f5f9;padding:0;background:transparent;border-radius:0}
.os-v2 [data-card-checklist] .linha-chk:last-child{border-bottom:0}
.os-v2 [data-card-checklist] .nome-chk{color:#334155;font-size:12px;min-width:0}
.os-v2 [data-card-checklist] .seg-grupo{display:flex;flex:0 0 auto;gap:4px;background:transparent;padding:0;border:0}
.os-v2 [data-card-checklist] .seg-chk{min-height:26px;border:1px solid var(--os-border);border-radius:999px;padding:0 8px;color:var(--os-muted);background:#fff;font-weight:400;font-size:10.5px;line-height:1;font-family:inherit;display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.os-v2 [data-card-checklist] .seg-chk .bola{width:6px;height:6px;border-radius:50%;border:1px solid currentColor;background:transparent;display:inline-block}
.os-v2 [data-card-checklist] .seg-chk.at .bola{background:currentColor}
.os-v2 [data-card-checklist] .seg-chk.ok.at{border-color:#a7f3d0;color:#047857;background:var(--os-green-soft)}
.os-v2 [data-card-checklist] .seg-chk.def.at{border-color:#fecaca;color:#dc2626;background:var(--os-red-soft)}
.os-v2 [data-card-checklist] .seg-chk.nt.at{border-color:#94a3b8;color:#334155;background:#f1f5f9}
.os-v2 [data-card-checklist] .legenda-chk{display:none}
.os-v2 [data-card-checklist] [data-preencher-rapido]{min-height:30px;border:1px solid var(--os-border);border-radius:999px;background:#fff;color:var(--os-muted);font-size:11px;padding:0 10px;box-shadow:none;white-space:nowrap}
.os-v2 .os-upload{display:flex;width:100%;min-height:92px;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:1px dashed #cbd5e1;border-radius:8px;color:var(--os-muted);background:#fff;font-weight:400;font-size:12px;line-height:1.4;font-family:inherit;text-align:center;cursor:pointer}
.os-v2 .os-upload:hover,.os-v2 .os-fotos.is-sobre .os-upload{border-color:#60a5fa;background:var(--os-blue-soft)}
.os-v2 .os-upload__ic{font-size:20px;line-height:1}
.os-v2 .os-upload small{color:var(--os-subtle);font-size:11px}
.os-v2 .os-media-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.os-v2 .os-media-actions .os-button{min-width:0;padding:0 6px;font-size:11.5px}
.os-v2 .os-media-actions input[type=file]{display:none}
.os-v2 .os-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.os-v2 .os-thumb{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:#000}
.os-v2 .os-thumb img,.os-v2 .os-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.os-v2 .os-thumb__x{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;background:rgb(0 0 0 / 62%);color:#fff;font-size:11px;cursor:pointer;padding:0}
.os-v2 .os-thumb__v{position:absolute;left:4px;bottom:3px;font-size:12px}
/* responsivo */
@media (max-width:1199px){.os-v2 .os-main{grid-template-columns:minmax(0,1fr) 360px}.os-v2 .os-entry-grid{grid-template-columns:1fr}}
@media (max-width:1023px){.os-v2 .os-main{grid-template-columns:1fr}.os-v2 .os-summary-column{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.os-v2 .os-summary-column .os-card:last-child{grid-column:1/-1}}
@media (max-width:767px){
  .os-v2 .os-shell{width:min(100% - 24px,640px)}
  .modal.os-v2 .caixa > .cab{min-height:64px;padding:0 12px}
  .os-v2 .os-brand__title{font-size:16px}
  .os-v2 .os-brand__subtitle{max-width:230px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
  .os-v2 .os-stepper__inner{gap:12px;min-height:60px}
  .os-v2 .os-step{flex-basis:142px}.os-v2 .os-step__line{display:none}
  .os-v2 .os-main{padding-top:12px}.os-v2 .os-card{padding:13px}
  .os-v2 .os-card__header{flex-wrap:wrap;gap:8px}
  .os-v2 .os-recording{align-items:flex-start;flex-direction:column}
  .os-v2 .os-recording__actions{width:100%;flex-wrap:wrap}.os-v2 .os-recording__actions .os-button--primary{flex:1}
  .os-v2 .os-detail-grid{grid-template-columns:1fr}
  .os-v2 .os-summary-column{grid-template-columns:1fr}.os-v2 .os-summary-column .os-card:last-child{grid-column:auto}
  .os-v2 .caixas-acessorio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal.os-v2 .caixa > .pe{flex-wrap:wrap;padding:8px 12px}
  .modal.os-v2 .caixa > .pe > [data-classico]{flex:1 0 100%}
  .os-v2 .os-espaco{display:none}
  .modal.os-v2 .caixa > .pe > [data-cancelar-os],.modal.os-v2 .caixa > .pe > .os-cta{flex:1}
  .os-v2 .os-button{min-height:44px}
}

.os-v2 .os-card h2,.os-v2 .os-summary-title h2{font-family:inherit}
.os-v2 .os-main .os-card h2.os-section-heading__title{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.os-v2 .os-summary-column .os-summary-title h2{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.os-v2 [data-testados]{font-size:11px;border-radius:999px;padding:4px 9px}
.os-v2 [data-card-checklist] > div:last-child > div:first-child > span:first-child{display:none}
.os-v2 [data-cliente-escolhido],.os-v2 [data-aparelho-escolhido]{font-size:14px}
.os-v2 .os-main .botao.claro.pequeno,.os-v2 .os-main .botao.pequeno{border-radius:8px;font-family:inherit}
/* p170b · janelas e avisos abertos POR CIMA da Nova OS (antes ficavam escondidos atrás dela e o fluxo parecia travado) */
.modal.os-v2 ~ .modal{z-index:1300!important}
.modal.os-v2 ~ .modal.modal-guarda{z-index:100000!important}
.recado{z-index:100001!important}
.os-v2 .os-falta{outline:3px solid #dc2626!important;outline-offset:2px;border-color:#dc2626!important;box-shadow:0 0 0 6px rgb(220 38 38 / 15%)!important;border-radius:10px}
/* p175 · campos de preenchimento da Nova OS na cor creme (como a caixa de notas) */
.modal.os-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]),.modal.os-v2 textarea,.modal.os-v2 select{background:#fef9e3!important;border:1.5px solid #f0d483!important;border-radius:12px!important;color:#1f2937!important}
.modal.os-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,.modal.os-v2 textarea:focus,.modal.os-v2 select:focus{border-color:#d4a72c!important;box-shadow:0 0 0 4px rgb(212 167 44/18%)!important;outline:none!important;background:#fffbea!important}
.modal.os-v2 input::placeholder,.modal.os-v2 textarea::placeholder{color:#8a8064!important}
.modal.os-v2 .os-falta{border-color:#dc2626!important;background:#fff5f5!important}
.os-v2 .os-imprime-senha{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;color:#334155;cursor:pointer}
.os-v2 .os-imprime-senha input{width:18px;height:18px;margin:0;flex:none}
/* p176 · cor creme em TODOS os formulários das janelas (cadastro de cliente, editar OS, encerramento, pagamentos…) — pedido do Gilson 08/10 */
.modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=button]):not([type=submit]),.modal textarea,.modal select{background:#fef9e3;border:1.5px solid #f0d483;border-radius:10px;color:#1f2937}
.modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):focus,.modal textarea:focus,.modal select:focus{border-color:#d4a72c;box-shadow:0 0 0 4px rgb(212 167 44/18%);outline:none;background:#fffbea}
.modal input::placeholder,.modal textarea::placeholder{color:#8a8064}
.modal input:disabled,.modal textarea:disabled,.modal select:disabled{background:#f3f4f6;border-color:#e5e7eb;color:#6b7280}
/* p179 · gravar relato junto do defeito, em uma faixa compacta */
.os-v2 .os-recording.os-recording--junto{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:6px 0 10px;padding:10px 12px;grid-template-columns:none!important}
.os-v2 .os-recording--junto .os-recording__icon,.os-v2 .os-recording--junto .os-recording__hint{display:none!important}
.os-v2 .os-recording--junto .os-recording__body{flex:1 1 auto;min-width:0}
.os-v2 .os-recording--junto .os-recording__title{margin:0!important;font-size:14px!important;white-space:nowrap}
.os-v2 .os-recording--junto .os-recording__actions{display:flex;flex-wrap:wrap;gap:8px;margin:0!important}
/* p180 */
.os-cad-incompleto{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:10px;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:10px;padding:8px 12px;font-size:14px;color:#78350f}
.os-cad-incompleto small{color:#92400e;opacity:.8}
.mic-ajuda p{font-size:15px;margin:0 0 10px}.mic-passos{font-size:16px;line-height:1.5;padding-left:22px;margin:0 0 12px}.mic-passos li{margin:6px 0}.mic-obs{color:var(--tinta-3);font-size:13.5px!important}
/* p181 */
.conv-midia{margin-top:6px}
.item-foto{display:flex;gap:12px;align-items:center}
.item-foto-prev{width:84px;height:84px;border:1px dashed #cbd5e1;border-radius:10px;display:grid;place-items:center;overflow:hidden;color:#94a3b8;font-size:12px;flex:none;background:#f8fafc}
.item-foto-prev img{width:100%;height:100%;object-fit:cover}
.eq-aces-senha{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;margin:10px 0}

/* =====================================================================
   p182 · ficha da OS — modelo blocado / completo (estilo Apple)
   ===================================================================== */
.caixa.fm-os{--fm-fundo:#f5f5f7;--fm-linha:#e5e5ea;--fm-cinza:#6e6e73;--fm-azul:#0071e3;--fm-verm:#d70015;--fm-verde:#248a3d}
@media (min-width:1100px){.modal .caixa.fm-os.ficha-larga{max-width:1320px}}
.caixa.fm-os > .corpo{background:var(--fm-fundo)}
.caixa.fm-os > .cab{background:rgba(255,255,255,.92);backdrop-filter:blur(18px)}
.fm-cabtit{flex:1;min-width:0}
.fm-cabtit h2{margin:0;font-size:24px !important;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.fm-subtit{color:var(--fm-cinza);font-size:15px;margin-top:2px}
.fm-os [data-aviso-cadastro]{display:none !important}
.fm-os .atalhos-celular{display:none !important}
.fm-os .grade-visao{display:none}
/* topo */
.fm-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fm-topo select{width:auto;max-width:340px;border-radius:999px !important;padding:9px 16px !important;font-weight:600;font-size:15px}
.fm-topo .botao{border-radius:999px;font-size:15px;padding:10px 18px;min-height:42px}
.fm-topo [data-btn-encerrar]{font-size:15.5px !important}
.fm-esp{flex:1}
.fm-modelo{font-size:14px;color:var(--fm-cinza);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fm-modelo b{color:#1d1d1f}
.fm-alterar{border:0;background:none;color:var(--fm-azul);font:inherit;font-weight:600;cursor:pointer;padding:6px 4px;font-size:15px}
.fm-bmais.at{background:#e8f1fd;color:var(--fm-azul)}
.fm-mais{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--fm-linha)}
.fm-mais[hidden]{display:none}
.fm-mais .botao{border-radius:999px}
/* pendências */
.fm-pend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 2px 16px;font-size:14.5px;color:var(--fm-cinza)}
.fm-pend-l{display:inline-flex;gap:6px;flex-wrap:wrap}
.fm-chip{background:#fff;border:1px solid #ffd2cf;color:var(--fm-verm);border-radius:999px;padding:5px 12px;font-weight:600;font-size:13.5px;cursor:pointer}
.fm-chip:hover{background:#fff5f4}
.fm-ok{color:var(--fm-verde);font-weight:600}
.fm-salvo{color:var(--fm-verde);font-weight:600;font-size:14px}
.fm-salvo.erro{color:var(--fm-verm);cursor:pointer;text-decoration:underline dotted}
/* lista de blocos */
.fm-gt{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--fm-cinza);margin:18px 16px 7px;font-weight:500}
.fm-gt:first-child{margin-top:0}
.fm-grp{background:#fff;border-radius:14px;overflow:hidden}
.fm-row{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:56px;position:relative;cursor:pointer;font-size:16px;color:#1d1d1f}
.fm-row + .fm-row::before{content:"";position:absolute;top:0;left:58px;right:0;border-top:1px solid var(--fm-linha)}
.fm-row:hover{background:#f7f7f9}
.fm-row.on{background:#e8f1fd}
.fm-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.fm-ic svg{width:17px;height:17px}
.fm-l{flex:1;min-width:0}
.fm-l small{display:block;color:var(--fm-cinza);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-v{color:var(--fm-cinza);font-size:15px;text-align:right;white-space:nowrap}
.fm-v.r{color:var(--fm-verm);font-weight:600}.fm-v.g{color:var(--fm-verde);font-weight:600}
.fm-ch{color:#c7c7cc;font-size:22px;line-height:1}
/* painéis */
.fm-tit{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.fm-tit h3{margin:0;font-size:22px;letter-spacing:-.02em}
.fm-voltar{display:none;border:0;background:none;color:var(--fm-azul);font:inherit;font-size:16px;font-weight:500;cursor:pointer;padding:6px 6px 6px 0}
.fm-os .fm-painel .cartao{border-radius:16px;border-color:transparent;box-shadow:none}
.fm-os .fm-painel > .cartao, .fm-os .fm-painel > div > .cartao{margin-bottom:14px}
/* blocado */
.fm-blocado .fm-secoes{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;align-items:start}
.fm-blocado .fm-lista{position:sticky;top:0}
.fm-blocado .abas-ficha, .fm-blocado .fm-resumo{display:none !important}
/* completo */
.fm-completo .fm-secoes{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.fm-completo .fm-lista{display:none}
.fm-completo .fm-centro{grid-column:1;grid-row:1}
.fm-completo .fm-resumo{grid-column:2;grid-row:1;position:sticky;top:0}
.fm-completo .abas-ficha{position:sticky;top:0;z-index:4;background:var(--fm-fundo);padding-top:6px;margin-bottom:12px}
.fm-completo .fm-painel{margin-bottom:26px;scroll-margin-top:60px}
.fm-card{background:#fff;border-radius:16px;padding:16px 18px;margin-bottom:14px}
.fm-rot{font-size:13px;color:var(--fm-cinza);margin-bottom:4px}
.fm-total{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.fm-lin{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #f0f0f3;font-size:15px}
.fm-lin:last-of-type{border-bottom:0}
.fm-lin span{color:var(--fm-cinza)}.fm-lin b.r{color:var(--fm-verm)}.fm-lin b.g{color:var(--fm-verde)}
.fm-bpag{width:100%;justify-content:center;margin-top:10px;border-radius:999px}
.fm-bolha{background:#f2f2f7;border-radius:14px;padding:9px 12px;font-size:14.5px}
.fm-link{border:0;background:none;color:var(--fm-azul);font:inherit;font-weight:600;cursor:pointer;padding:8px 0 0}
/* rodapé: Encerrar e Imprimir ficam no topo no computador */
@media (min-width:801px){
  .fm-os > .pe [data-btn-encerrar-rodape], .fm-os > .pe .fm-imp-rodape{display:none !important}
}
/* celular */
@media (max-width:800px){
  .fm-cabtit h2{font-size:20px !important}
  .fm-subtit{font-size:13.5px}
  .fm-topo [data-btn-encerrar], .fm-topo [data-menu-imprimir]{display:none !important}
  .fm-topo select{max-width:none;flex:1 1 100%}
  .fm-blocado .fm-secoes, .fm-completo .fm-secoes{display:block}
  .fm-blocado .fm-centro{display:none}
  .fm-blocado.fm-aberto .fm-centro{display:block}
  .fm-blocado.fm-aberto .fm-lista{display:none}
  .fm-blocado .fm-voltar{display:inline-block}
  .fm-completo .fm-resumo{position:static;margin-top:10px}
  .fm-completo .abas-ficha{top:-14px}
  .fm-pend{margin:0 0 12px}
}
/* escolha do modelo */
.fm-escolha > p{color:var(--fm-cinza,#6e6e73);text-align:center;margin:0 0 16px;font-size:15px}
.fm-opcs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fm-opc{border:2px solid #e5e5ea;border-radius:20px;padding:16px;background:#fff;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;font:inherit}
.fm-opc.on{border-color:#0071e3;box-shadow:0 0 0 4px rgb(0 113 227/12%)}
.fm-opc b{font-size:19px;margin-top:6px}
.fm-opc span{color:#6e6e73;font-size:14.5px}
.fm-mini{background:#f5f5f7;border-radius:12px;padding:10px;height:150px;overflow:hidden}
.fm-mini i{display:block;background:#fff;border-radius:6px;height:18px;margin-bottom:7px}
.fm-mini i.s{width:55%;height:12px}
.fm-mini-g{display:grid;grid-template-columns:1fr 60px;gap:8px}
.fm-mini i.bx{height:38px}.fm-mini i.lado{height:90px}
.fm-escolha-nota{font-size:13.5px !important;margin-top:16px !important}
@media (max-width:700px){.fm-opcs{grid-template-columns:1fr}}
/* Tela 7 · botão e painel lateral */
.fm-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1.5px dashed #9cc3f5;background:#f4f9ff;color:var(--fm-azul,#0071e3);border-radius:14px;padding:14px;font:inherit;font-size:16.5px;font-weight:600;cursor:pointer;margin-bottom:14px}
.fm-add:hover{background:#e8f1fd}
.fm-gaveta-fundo{position:fixed;inset:0;background:rgba(16,16,16,.32);z-index:1250;display:flex;justify-content:flex-end}
.fm-gaveta{width:min(460px,100vw);height:100%;background:#fff;overflow:auto;padding:20px 20px 28px;box-shadow:-10px 0 40px rgb(0 0 0/18%);display:flex;flex-direction:column;gap:10px}
.fm-g-cab{display:flex;align-items:flex-start;gap:10px}
.fm-g-cab > div{flex:1}
.fm-g-cab h3{margin:0;font-size:21px;letter-spacing:-.01em}
.fm-g-cab small{color:#6e6e73;font-size:14px}
.fm-g-fechar{border:0;background:none;color:#0071e3;font:inherit;font-weight:600;cursor:pointer;font-size:15px}
.fm-g-busca{border-radius:12px !important;padding:12px 14px !important;font-size:16px !important;background:#f5f5f7 !important;border:1px solid transparent !important}
.fm-g-rot{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:#6e6e73;margin-top:8px}
.fm-g-lista{display:flex;flex-direction:column}
.fm-g-item{display:flex;align-items:center;gap:10px;border:0;border-bottom:1px solid #f0f0f3;background:none;text-align:left;padding:11px 6px;font:inherit;font-size:15.5px;cursor:pointer;border-radius:8px}
.fm-g-item:hover{background:#f4f9ff}
.fm-g-t{flex:1;min-width:0}
.fm-g-t small{display:block;color:#6e6e73;font-size:13px}
.fm-g-v{font-weight:700;white-space:nowrap}
.fm-g-mais{color:#0071e3;font-weight:700;font-size:20px;width:22px;text-align:center}
.fm-g-vazio{color:#6e6e73;font-size:14px;padding:8px 2px}
.fm-g-botoes{display:flex;gap:8px;flex-wrap:wrap}
.fm-g-botoes .botao{border-radius:999px}
.fm-g-feitos{color:#248a3d;font-weight:600;font-size:14.5px}
.fm-g-pronto{margin-top:auto;justify-content:center;min-height:48px;font-size:16px;border-radius:14px}
/* Tela 8 · conversa e histórico */
.cv-cab{flex-wrap:wrap;gap:8px}
.cv-filtros{display:flex;gap:6px;flex-wrap:wrap}
.cv-f{border:1px solid #d2d2d7;background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.cv-f small{color:#8e8e93;font-weight:500}
.cv-f.on{border-color:#0071e3;background:#e8f1fd;color:#0071e3}
.cv-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f0f0f3}
.cv-av{width:28px;height:28px;border-radius:50%;background:#e5e5ea;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.cv-c{min-width:0;flex:1}
.cv-bolha{display:inline-block;max-width:100%;border-radius:14px;padding:8px 12px;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.cv-cli .cv-bolha{background:#f2f2f7}
.cv-loja .cv-bolha{background:#dcf8e3}
.cv-int .cv-bolha{background:#fff6d1}
.cv-sis .cv-bolha{background:#f5f5f7;color:#3a3a3c;font-size:14px}
.cv-meta{font-size:12.5px;color:#8e8e93;margin-top:3px}
.cv-vazio{color:#8e8e93;padding:10px 0}
.cv-tudo{margin-top:10px}
.cv-escrever{margin-top:12px;border:1px dashed #c7c7cc;border-radius:14px;padding:10px}
.cv-escrever textarea{width:100%;border:0 !important;background:transparent !important;font-size:15px;resize:vertical;box-shadow:none !important}
.cv-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cv-modo{border:1px solid #d2d2d7;background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.cv-modo.on{border-color:#0071e3;background:#e8f1fd;color:#0071e3;font-weight:600}
.cv-nota{display:block;color:#8e8e93;margin-top:6px}
.fm-os .fm-painel .cartao{overflow-x:auto}
@media (max-width:800px){
  .fm-completo .abas-ficha{flex-wrap:nowrap !important;overflow-x:auto;top:-14px;white-space:nowrap}
  .fm-completo .abas-ficha .aba-ficha{flex:none}
}

/* p186 */
.fm-chip.fm-chip-link{border-color:#bfdbfe;color:#0071e3;background:#f4f9ff}

/* p190 · Aparelhos usados (seminovos) */
.sn-topo{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.sn-topo h1{font-size:26px;margin:0;letter-spacing:-.02em}.sn-topo p{margin:4px 0 0;color:var(--tinta-3);font-size:15px}
.sn-topo .sn-cta{margin-left:auto;min-height:46px;font-size:16px;border-radius:12px;padding:0 18px}
.sn-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.sn-kpi{background:var(--cartao,#fff);border:1px solid var(--borda);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.sn-kpi small{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);font-weight:600}.sn-kpi b{font-size:26px;letter-spacing:-.02em}.sn-kpi span{font-size:13px;color:var(--tinta-3)}
.sn-filtros{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.sn-busca{min-height:44px;font-size:15px;border-radius:12px}
.sn-chips{display:flex;gap:6px;flex-wrap:wrap}.sn-chip{border:1px solid var(--borda);background:var(--cartao,#fff);border-radius:999px;padding:7px 14px;font-size:14px;cursor:pointer;min-height:38px}
.sn-chip.on{background:#111827;color:#fff;border-color:#111827}
.sn-lista{display:flex;flex-direction:column;gap:10px}
.sn-card{display:grid;grid-template-columns:64px 1fr auto auto;gap:14px;align-items:center;background:var(--cartao,#fff);border:1px solid var(--borda);border-radius:16px;padding:12px 14px}
.sn-foto{width:64px;height:64px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden}.sn-foto img{width:100%;height:100%;object-fit:cover}
.sn-l1{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:16px}.sn-l2{font-size:13px;color:var(--tinta-3);margin-top:2px}
.sn-pill{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.sn-valores{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.sn-valores small{font-size:11px;color:var(--tinta-3)}.sn-valores b{font-size:18px;color:#15803d}.sn-venda{font-size:12px;color:var(--tinta-3)}
.sn-acoes{display:flex;gap:6px}
.sn-vazio{text-align:center;padding:40px 16px;border:1px dashed var(--borda);border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.sn-vazio p{max-width:460px;color:var(--tinta-3)}
.sn-modal .caixa{max-width:860px}
.sn-passos{display:flex;gap:8px;margin-bottom:14px}.sn-passo{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tinta-3);border-bottom:3px solid var(--borda);padding-bottom:8px}
.sn-passo span{width:24px;height:24px;border-radius:50%;background:#e5e7eb;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.sn-passo.on{color:var(--tinta);font-weight:700;border-color:#2563eb}.sn-passo.on span{background:#2563eb;color:#fff}.sn-passo.feito span{background:#16a34a;color:#fff}
.sn-wiz h3{font-size:15px;margin:16px 0 8px}.sn-wiz input,.sn-wiz select,.sn-wiz textarea{min-height:44px;font-size:15px}
.sn-sug{display:flex;flex-direction:column;gap:4px;margin-top:6px}.sn-sug-i{text-align:left;border:1px solid var(--borda);background:var(--cartao,#fff);border-radius:10px;padding:8px 12px;cursor:pointer;display:flex;flex-direction:column}
.sn-sug-i small{color:var(--tinta-3)}.sn-sug-novo{color:#2563eb;font-weight:600}
.sn-vend-ok{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding:10px 12px;border-radius:12px;background:#ecfdf5;border:1px solid #a7f3d0}
.sn-destinos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.sn-dest{text-align:left;border:1.5px solid var(--borda);border-radius:14px;padding:12px;background:var(--cartao,#fff);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.sn-dest small{color:var(--tinta-3)}.sn-dest.on{border-color:#2563eb;background:#eff6ff}
.sn-alerta{margin-top:8px;padding:10px 12px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;font-size:13.5px}
.sn-check{display:flex;flex-direction:column;gap:6px}.sn-check-l{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--borda);padding-bottom:6px}
.sn-check-l .sn-chip{padding:5px 12px;min-height:34px;font-size:13px}
.sn-dica{font-size:13px;color:var(--tinta-3);margin:0 0 6px}.sn-arq-lista{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.sn-arq{font-size:12.5px;background:#f1f5f9;border-radius:8px;padding:4px 8px}
.sn-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;background:#f8fafc;border:1px solid var(--borda);border-radius:14px;padding:12px}
.sn-resumo small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-3)}.sn-resumo b{font-size:15px}
.sn-ficha-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.sn-ficha-topo h3{margin:0;font-size:19px}
.sn-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sn-fl{display:flex;flex-direction:column;margin-bottom:8px}.sn-fl small{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-3)}
.sn-chk-res{display:flex;gap:4px;flex-wrap:wrap}.sn-chk{font-size:12px;border:1px solid var(--borda);border-radius:999px;padding:2px 8px}.sn-chk.ok{color:#15803d}.sn-chk.defeito{color:#b91c1c}
.sn-midias{display:flex;gap:10px;flex-wrap:wrap}.sn-mid{width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:inherit}
.sn-mid img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--borda)}.sn-mid small{font-size:11.5px;color:var(--tinta-3)}
@media (max-width:760px){
  .sn-topo .sn-cta{width:100%;margin-left:0}.sn-kpis{grid-template-columns:1fr 1fr}
  .sn-card{grid-template-columns:56px 1fr;grid-template-areas:"f i" "v v" "a a"}.sn-foto{grid-area:f;width:56px;height:56px}.sn-info{grid-area:i}
  .sn-valores{grid-area:v;flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start}.sn-acoes{grid-area:a}.sn-acoes .botao{flex:1;min-height:42px}
  .sn-grade{grid-template-columns:1fr}.sn-passo{font-size:12px}.sn-wiz .linha{flex-direction:column}
}
.sn-sub{margin:0;color:var(--tinta-3);font-size:15px;align-self:center}

/* p205 · miniatura + visor de foto com zoom */
.mini-foto{object-fit:cover;border-radius:8px;border:1px solid var(--borda,#e2e8f0);background:#f1f5f9;cursor:zoom-in;flex:none;display:block;transition:transform .12s}
.mini-foto:hover{transform:scale(1.08);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.mini-foto.vazia{display:grid;place-items:center;color:#94a3b8;font-size:18px;cursor:default;border-style:dashed}
.mini-foto.vazia:hover{transform:none;box-shadow:none}
td .mini-foto{margin:-4px 0}
.visor-foto{position:fixed;inset:0;z-index:9999;background:rgba(8,10,14,.94);display:flex;flex-direction:column;animation:vf-entra .15s ease-out;touch-action:none}
@keyframes vf-entra{from{opacity:0}to{opacity:1}}
.vf-topo{display:flex;align-items:center;gap:6px;padding:10px 14px;color:#fff;background:rgba(0,0,0,.35);flex:none}
.vf-titulo{font-weight:700;font-size:15px;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vf-zoom{min-width:48px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;opacity:.9}
.vf-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;min-width:34px;height:34px;padding:0 10px;font-size:16px;cursor:pointer;display:inline-grid;place-items:center;text-decoration:none;font-family:inherit}
.vf-btn:hover{background:rgba(255,255,255,.24)}
.vf-fechar{font-size:18px;margin-left:6px}
.vf-palco{flex:1;display:grid;place-items:center;overflow:hidden;cursor:zoom-in;min-height:0}
.vf-palco img{max-width:96vw;max-height:calc(100vh - 110px);object-fit:contain;transform-origin:center;transition:transform .08s;user-select:none;-webkit-user-drag:none;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.vf-palco img.ampliada{cursor:grab}
.vf-dica{text-align:center;color:rgba(255,255,255,.6);font-size:12px;padding:8px;flex:none}
@media (max-width:700px){.vf-topo{padding:8px 8px;gap:4px}.vf-titulo{max-width:34vw;font-size:13px}.vf-btn{min-width:30px;height:30px;padding:0 7px;font-size:14px}.vf-zoom{min-width:40px;font-size:12px}.vf-nova{display:none}.vf-dica{display:none}.vf-palco img{max-height:calc(100vh - 60px)}}

/* p240 · peças e serviços da OS no celular: cada linha vira um cartão (antes a tabela cortava as colunas) */
@media (max-width: 800px) {
  .tabela-itens-os thead { display: none; }
  .tabela-itens-os, .tabela-itens-os tbody { display: block; width: 100%; }
  .tabela-itens-os tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .tabela-itens-os td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; text-align: left !important; }
  .tabela-itens-os td:first-child { grid-column: 1 / -1; }
  .tabela-itens-os td[data-rot]::before { content: attr(data-rot); display: block; font-size: 11px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 3px; }
  .tabela-itens-os td:first-child::before, .tabela-itens-os td:last-child::before { content: none; }
  .tabela-itens-os td input, .tabela-itens-os td select, .tabela-itens-os td textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .tabela-itens-os td .botao { white-space: normal; }
}

/* p240b · celular: resumo da aba de peças em 2 colunas e nada vazando para a direita */
@media (max-width: 800px) {
  [data-resumo-aba] .corpo { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px !important; }
  [data-resumo-aba] .corpo > span[style*="width:1px"], [data-resumo-aba] .corpo > span[style*="flex:1"] { display: none !important; }
  [data-resumo-aba] .corpo > div, [data-resumo-aba] .corpo .valor-interno > div { min-width: 0 !important; }
  [data-resumo-aba] .corpo .etiqueta { grid-column: 1 / -1; }
  [data-parcelamento] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fm-painel, .fm-centro { min-width: 0; max-width: 100%; }
}

/* p240b · tablet em pé (até 1024px): itens da OS em cartões, a tabela não cabe ao lado do painel */
@media (min-width: 801px) and (max-width: 1024px) {
  .tabela-itens-os thead { display: none; }
  .tabela-itens-os, .tabela-itens-os tbody { display: block; width: 100%; }
  .tabela-itens-os tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .tabela-itens-os td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; text-align: left !important; }
  .tabela-itens-os td:first-child { grid-column: 1 / -1; }
  .tabela-itens-os td[data-rot]::before { content: attr(data-rot); display: block; font-size: 11px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 3px; }
  .tabela-itens-os td:first-child::before, .tabela-itens-os td:last-child::before { content: none; }
  .tabela-itens-os td input, .tabela-itens-os td select, .tabela-itens-os td textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .tabela-itens-os td .botao { white-space: normal; }
}

/* =====================================================================
   p245 · Nova OS v2.3 (aprovada 14/10/2026) — 5 passos, campos de lista,
   gravação no topo, "Estado na chegada" com seletor ok · defeito · não testa.
   Tudo dentro de .osw-modal (não mexe em outras telas).
   ===================================================================== */
.osw-modal [hidden]{display:none !important}
.osw-modal .osw{padding-bottom:0}
.osw-modal .osw-h{position:sticky;top:0;z-index:16;display:flex;align-items:center;gap:22px;background:#fff;border-bottom:1px solid #e2e8f0;padding:12px max(20px,calc((100% - 1536px)/2))}
.osw-modal .osw-b{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;width:min(100% - 40px,1536px);margin:20px auto 28px;align-items:start}
.osw-modal .osw-main{min-width:0}
.osw-modal .osw-side{position:sticky;top:86px;display:flex;flex-direction:column;gap:12px;min-width:0}
.osw-modal .osw-passo{display:flex;flex-direction:column;gap:14px;min-width:0}
.osw-modal .osw-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px;box-shadow:0 1px 2px rgb(15 23 42 / 4%)}
.osw-modal .osw-q h2{font-size:24px;font-weight:800;margin:0;letter-spacing:-.01em;color:#0f172a}
.osw-modal .osw-q p{margin:3px 0 0;color:#5b6b80;font-size:13.5px}
.osw-modal .osw-q-l{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}

/* stepper */
.osw-modal .osw-stp{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.osw-modal .osw-st{display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 2px;font:inherit;font-size:13.5px;color:#64748b;cursor:pointer;white-space:nowrap;min-height:40px}
.osw-modal .osw-st i{font-style:normal;width:28px;height:28px;border-radius:50%;border:2px solid #8b95a7;display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:none}
.osw-modal .osw-st.ok{color:#334155}.osw-modal .osw-st.ok i{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.osw-modal .osw-st.on{color:#1d4ed8;font-weight:800}.osw-modal .osw-st.on i{background:#2563eb;border-color:#2563eb;color:#fff}
.osw-modal .osw-ln{flex:1;min-width:12px;border-top:2px solid #e2e8f0}.osw-modal .osw-ln.ok{border-color:#93c5fd}

/* gravação */
.osw-modal .osw-rec{display:inline-flex;align-items:center;gap:8px;border-radius:24px;padding:8px 14px;font-size:13.5px;font-weight:800;white-space:nowrap;min-height:40px}
.osw-modal button.osw-rec.idle{background:#fff;color:#b91c1c;border:2px solid #b91c1c;cursor:pointer;font-family:inherit}
.osw-modal .osw-rec .dot,.osw-modal .osw-rec-agora .dot{width:10px;height:10px;border-radius:50%;background:#b91c1c;flex:none}
.osw-modal .osw-rec.on{background:#b91c1c;color:#fff}
.osw-modal .osw-rec.on .dot{background:#fff;box-shadow:0 0 0 4px rgb(255 255 255 / 30%);animation:osw-pulsa 1.2s infinite}
.osw-modal .osw-rec.on.pausado{background:#7f1d1d}.osw-modal .osw-rec.on.pausado .dot{animation:none;opacity:.6}
.osw-modal .osw-rec.feito{background:#f0fdf4;color:#166534;border:1px solid #86efac}
.osw-modal .osw-rec .ctl{display:inline-flex;gap:4px;border-left:1px solid rgb(255 255 255 / 40%);padding-left:8px;margin-left:2px}
.osw-modal .osw-rec.feito .ctl{border-left-color:#86efac}
.osw-modal .osw-rec .ctl button{border:0;background:rgb(255 255 255 / 16%);color:inherit;font:inherit;font-size:12.5px;font-weight:700;border-radius:14px;padding:4px 10px;cursor:pointer;min-height:30px}
.osw-modal .osw-rec.feito .ctl button{background:#dcfce7}
.osw-modal .osw-tempo{font-variant-numeric:tabular-nums}
@keyframes osw-pulsa{50%{box-shadow:0 0 0 7px rgb(255 255 255 / 10%)}}
.osw-modal .osw-recbox{display:flex;align-items:center;gap:14px;background:#fef2f2;border:1px solid #fecaca;border-radius:14px;padding:14px 16px}
.osw-modal .osw-recbox-ic{font-size:26px}
.osw-modal .osw-recbox b{font-size:15.5px;color:#7f1d1d}.osw-modal .osw-recbox p{margin:2px 0 0;font-size:13px;color:#7f1d1d}
.osw-modal .osw-recbox > div{flex:1;min-width:0}
.osw-modal .osw-rec-agora{display:inline-flex;align-items:center;gap:8px;background:#b91c1c;color:#fff;border:0;border-radius:24px;padding:10px 18px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;min-height:44px;white-space:nowrap}
.osw-modal .osw-rec-agora .dot{background:#fff}

/* campo de lista (select nativo por dentro) */
.osw-modal .osw-sel{position:relative;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #8b95a7;border-radius:12px;min-height:56px;padding:0 48px 0 12px;cursor:pointer;margin:0;box-shadow:0 1px 2px rgb(15 23 42 / 5%)}
.osw-modal .osw-sel:focus-within,.osw-modal details[open] > .osw-sel{border-color:#2563eb;box-shadow:0 0 0 3px rgb(37 99 235 / 18%)}
.osw-modal .osw-sel.os-falta{border-color:#b91c1c;box-shadow:0 0 0 3px rgb(185 28 28 / 18%)}
.osw-modal .osw-ic{width:32px;height:32px;border-radius:9px;background:#eff6ff;color:#1d4ed8;display:grid;place-items:center;font-size:16px;flex:none}
.osw-modal .osw-ic.av{border-radius:50%;background:#dbeafe;color:#1e40af;font-size:12px;font-weight:800}
.osw-modal .osw-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.osw-modal .osw-tx small{font-size:11.5px;font-weight:700;color:#475569}
.osw-modal .osw-tx select.osw-ctrl,.osw-modal .osw-tx .osw-val{appearance:none;-webkit-appearance:none;border:0 !important;background:transparent !important;padding:0 !important;margin:0;font:inherit;font-size:15px !important;font-weight:700;color:#0f172a;width:100%;min-height:24px !important;height:auto;cursor:pointer;outline:none;box-shadow:none !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border-radius:0}
.osw-modal .osw-cv{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:8px;background:#f1f5f9;display:grid;place-items:center;color:#334155;pointer-events:none}
.osw-modal details[open] > .osw-sel .osw-cv{background:#dbeafe;color:#1d4ed8;transform:translateY(-50%) rotate(180deg)}
.osw-modal .osw-multi{position:relative;min-width:0}
.osw-modal .osw-multi > summary{list-style:none}.osw-modal .osw-multi > summary::-webkit-details-marker{display:none}
.osw-modal .osw-pop{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #cbd5e1;border-radius:12px;box-shadow:0 18px 40px rgb(15 23 42 / 20%);padding:12px;display:flex;flex-direction:column;gap:10px}
.osw-modal .osw-dica{font-size:12px;color:#5b6b80;margin-top:4px}
.osw-modal .osw-data{margin-top:8px}

/* passo 1 */
.osw-modal .osw-p1{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.osw-modal .osw-p1-busca{min-width:0;display:flex;flex-direction:column;gap:8px}
.osw-modal .osw-p1-busca .os-search input{min-height:54px;font-size:15.5px;border:2px solid #2563eb;border-radius:12px}
.osw-modal .osw-p1-busca > .os-button{align-self:flex-start}

/* passo 2 */
.osw-modal .osw-p2 [data-dispositivo]{min-height:52px;border-radius:12px !important;border:1px solid #cbd5e1 !important;background:#fff !important;margin-bottom:8px;font-size:14px}
.osw-modal .osw-p2 [data-dispositivo]:hover{border-color:#2563eb !important;background:#eff6ff !important}

/* passo 3 */
.osw-modal .osw-p3{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start}
.osw-modal .osw-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.osw-modal .osw-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.osw-modal .osw-lb{font-size:12.5px;color:#334155;font-weight:700;display:flex;align-items:center;gap:6px}
.osw-modal .osw-lb em{color:#b91c1c;font-style:normal}.osw-modal .osw-lb .r{margin-left:auto;font-weight:500;color:#5b6b80;font-size:12px}
.osw-modal .osw-f textarea{width:100%;min-height:100px;border:1px solid #8b95a7;border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.5;background:#fff}
.osw-modal .osw-src{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#1d4ed8;background:#eff6ff;border-radius:7px;padding:4px 9px}
.osw-modal [data-atalhos-problema]{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.osw-modal [data-atalhos-problema] .rotulo-chips{font-size:12px;color:#5b6b80;font-weight:600;margin-right:2px;text-transform:none;letter-spacing:0}
.osw-modal [data-atalhos-problema] .chip{background:#e8edf4;border:0;color:#334155;border-radius:8px;padding:7px 11px;font-size:12.5px;min-height:32px;cursor:pointer}
.osw-modal [data-atalhos-problema] .chip:hover{background:#dbeafe;color:#1e40af}
.osw-modal .osw-apagado{font-size:13px;color:#334155}
.osw-modal .osw-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.osw-modal .osw-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}
.osw-modal .osw-senha{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px}
.osw-modal .osw-senha > div > div:first-child{display:none}
.osw-modal .osw-mais{background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.osw-modal .osw-mais > summary{cursor:pointer;padding:11px 14px;font-size:13px;font-weight:700;color:#1d4ed8}
.osw-modal .osw-mais[open] > summary{border-bottom:1px solid #eef2f7}
.osw-modal .osw-mais > textarea{display:block;width:calc(100% - 24px);margin:12px;min-height:110px;border:1px solid #8b95a7;border-radius:10px;padding:10px 12px}
.osw-modal .os-fotos{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px}
/* estado na chegada */
.osw-modal .osw-est{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;min-width:0}
.osw-modal .osw-est-h{display:flex;align-items:center;gap:10px;padding:14px 14px 10px}
.osw-modal .osw-est-h b{font-size:15px;display:block}.osw-modal .osw-est-h small{display:block;font-size:12px;color:#5b6b80}
.osw-modal .osw-tudo-ok{margin-left:auto;border:1px solid #15803d;color:#15803d;border-radius:9px;padding:8px 12px;font:inherit;font-size:13px;font-weight:800;background:#fff;white-space:nowrap;cursor:pointer;min-height:40px}
.osw-modal .osw-tudo-ok:hover{background:#f0fdf4}
.osw-modal .osw-chk > div:first-child,.osw-modal .osw-chk .legenda-chk{display:none !important}
.osw-modal .osw-chk > div:last-child{font-size:11.5px;color:#5b6b80;padding:8px 14px 10px;margin:0 !important}
.osw-modal .osw-chk .grade-chk{display:flex !important;flex-direction:column;gap:0 !important}
.osw-modal .osw-chk .linha-chk{display:flex !important;align-items:center;gap:10px;padding:7px 14px;border-top:1px solid #f1f5f9;border-radius:0;background:none;margin:0}
.osw-modal .osw-chk .linha-chk:has(.seg-chk.def.at){background:#fef2f2}
.osw-modal .osw-chk .nome-chk{flex:1;min-width:0;font-size:13.5px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osw-modal .osw-chk .seg-grupo{display:inline-flex !important;border:1px solid #64748b;border-radius:9px;overflow:hidden;flex:none;gap:0 !important;background:#fff}
.osw-modal .osw-chk .seg-chk{height:36px !important;border:0 !important;border-left:1px solid #64748b !important;border-radius:0 !important;background:#fff;color:#334155;font-size:12.5px;font-weight:600;padding:0 9px !important;justify-content:center;white-space:nowrap;cursor:pointer}
.osw-modal .osw-chk .seg-chk:first-child{border-left:0 !important;width:58px}
.osw-modal .osw-chk .seg-chk:nth-child(2){width:76px}.osw-modal .osw-chk .seg-chk:nth-child(3){width:84px}
.osw-modal .osw-chk .seg-chk .bola{display:none}
.osw-modal .osw-chk .seg-chk.ok.at{background:#15803d !important;color:#fff !important;font-weight:800}
.osw-modal .osw-chk .seg-chk.def.at{background:#b91c1c !important;color:#fff !important;font-weight:800}
.osw-modal .osw-chk .seg-chk.nt.at{background:#475569 !important;color:#fff !important;font-weight:800}
.osw-modal .osw-chk .seg-chk:focus-visible{outline:3px solid #2563eb;outline-offset:-3px}
.osw-modal .osw-est .contador-chk{border-top:1px solid #e2e8f0;background:#f8fafc;padding:8px 14px;margin:0}

/* passo 4 · orçamento */
.osw-modal .osw-busca-item{position:relative}
.osw-modal .osw-busca-item input{width:100%;min-height:54px;font-size:15px;border:2px solid #2563eb;border-radius:12px;padding-left:44px}
.osw-modal .osw-busca-item .os-search__icon{position:absolute;left:14px;top:17px;pointer-events:none}
.osw-modal .osw-dd{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid #cbd5e1;border-radius:12px;box-shadow:0 18px 40px rgb(15 23 42 / 18%);overflow:hidden}
.osw-modal .osw-dd-op{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px solid #f1f5f9;background:#fff;padding:11px 14px;font:inherit;font-size:13.5px;color:#0f172a;cursor:pointer;min-height:44px;align-items:center}
.osw-modal .osw-dd-op:hover,.osw-modal .osw-dd-op:focus-visible{background:#eff6ff}
.osw-modal .osw-dd-op small{color:#5b6b80;white-space:nowrap}
.osw-modal .osw-dd-op.nv{color:#1d4ed8;font-weight:700;background:#f8fbff}
.osw-modal .osw-itens{display:flex;flex-direction:column;gap:8px}
.osw-modal .osw-it{display:grid;grid-template-columns:minmax(0,1fr) 76px 120px 120px 40px;gap:10px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:11px;padding:10px 12px}
.osw-modal .osw-it-h{background:transparent;border:0;padding:0 12px;font-size:11px;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.osw-modal .osw-it-n{min-width:0}.osw-modal .osw-it-n b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.osw-modal .osw-it-n small{display:block;font-size:11.5px;color:#5b6b80;margin-top:2px}
.osw-modal .osw-n{min-height:40px;text-align:right;border:1px solid #8b95a7;border-radius:8px;padding:6px 9px;width:100%}
.osw-modal .osw-x{width:40px;height:40px;border:1px solid #e2e8f0;background:#fff;border-radius:9px;cursor:pointer;color:#b91c1c;font-size:15px}
.osw-modal .osw-vazio{background:#fff;border:1px dashed #94a3b8;border-radius:12px;padding:18px;color:#475569;font-size:13.5px;text-align:center}
.osw-modal .osw-tot{background:#0f172a;color:#fff;border-radius:14px;padding:16px}
.osw-modal .osw-tot .t{font-size:12px;color:#cbd5e1}.osw-modal .osw-tot .v{font-size:28px;font-weight:800;margin:2px 0 8px}
.osw-modal .osw-tot .g{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;color:#cbd5e1}.osw-modal .osw-tot .g b{display:block;font-size:16px}
.osw-modal .osw-tot .o{color:#fbbf24}.osw-modal .osw-tot .gr{color:#4ade80}
.osw-modal .osw-tot .g2{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid rgb(255 255 255 / 15%);font-size:12px;color:#cbd5e1}

/* passo 5 · conferir */
.osw-modal .osw-conf{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.osw-modal .osw-cc{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px 16px}
.osw-modal .osw-cc-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:14px}
.osw-modal .osw-link{border:0;background:none;color:#1d4ed8;font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:6px 4px;min-height:32px}
.osw-modal .osw-l{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid #f1f5f9}
.osw-modal .osw-l:last-child{border-bottom:0}
.osw-modal .osw-l span{color:#5b6b80;flex:none}.osw-modal .osw-l b{text-align:right;min-width:0;overflow-wrap:anywhere}.osw-modal .osw-l b.gr{color:#15803d}
.osw-modal .osw-pend > div{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.osw-modal .osw-pend > div.ok{background:#f0fdf4;border-color:#86efac;color:#166534}
.osw-modal .osw-resumo h3{font-size:15px;margin:0 0 6px}

/* rodapé */
.osw-modal .caixa > .pe{gap:10px;flex-wrap:wrap}
.osw-modal .caixa > .pe .os-button{min-height:46px}
.osw-modal .os-button.osw-verde{background:#15803d !important;border-color:#15803d !important}

/* tablet */
@media (max-width:1180px){
  .osw-modal .osw-b{grid-template-columns:minmax(0,1fr) 270px;gap:16px}
  .osw-modal .osw-p3{grid-template-columns:minmax(0,1fr)}
  .osw-modal .osw-g3{grid-template-columns:1fr 1fr}
  .osw-modal .osw-st span{display:none}.osw-modal .osw-st.on span{display:inline}
}
/* celular */
@media (max-width:860px){
  .osw-modal .osw-h{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .osw-modal .osw-b{grid-template-columns:minmax(0,1fr);width:calc(100% - 24px);margin:14px auto 20px}
  .osw-modal .osw-side{position:static}
  .osw-modal .osw-p1,.osw-modal .osw-g2,.osw-modal .osw-g3,.osw-modal .osw-conf{grid-template-columns:minmax(0,1fr)}
  .osw-modal .osw-stp{order:2;flex-basis:100%}
  .osw-modal .osw-recbox{flex-wrap:wrap}
  .osw-modal .osw-q h2{font-size:21px}
  .osw-modal .osw-it{grid-template-columns:1fr 1fr 1fr 40px}
  .osw-modal .osw-it-n{grid-column:1 / -1}
  .osw-modal .osw-it-h{display:none}
  .osw-modal .osw-chk .nome-chk{white-space:normal}
  .osw-modal .caixa > .pe .os-espaco{display:none}
  .osw-modal .caixa > .pe .os-button{flex:1 1 auto}
}

@media (max-width:860px){
  .osw-modal .osw-h{position:static}
  .osw-modal .osw-recbox{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px}
  .osw-modal .osw-recbox .osw-rec-agora{grid-column:1 / -1;justify-content:center}
  .osw-modal .osw-it-h{display:grid;padding:0 12px;grid-template-columns:1fr 1fr 1fr 40px}
  .osw-modal .osw-it-h span:first-child{display:none}
  .osw-modal .caixa > .pe [data-cancelar-os]{display:none}
  .osw-modal .osw-st i{width:26px;height:26px}
}

/* ===== p249 · Nova OS página completa (padrão), como chegou em botões, observação do defeito no checklist ===== */
.osw-modal .osw-origem{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.osw-modal .osw-origem-t{font-size:12.5px;font-weight:700;color:#334155;margin-right:4px}
.osw-modal .osw-chip-or{display:inline-flex;align-items:center;gap:6px;border:1px solid #8b95a7;background:#fff;border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;color:#0f172a;cursor:pointer;min-height:40px}
.osw-modal .osw-chip-or:hover{border-color:#2563eb}
.osw-modal .osw-chip-or.on{background:#2563eb;border-color:#2563eb;color:#fff}
.osw-modal .osw-modo{display:flex;align-items:center;gap:0;font-size:12.5px;color:#475569;flex:none}
.osw-modal .osw-modo > span{margin-right:6px}
.osw-modal .osw-modo button{border:1px solid #64748b;background:#fff;color:#334155;font:inherit;font-size:12.5px;font-weight:700;padding:7px 11px;cursor:pointer;min-height:36px;white-space:nowrap}
.osw-modal .osw-modo button:first-of-type{border-radius:9px 0 0 9px}.osw-modal .osw-modo button:last-of-type{border-radius:0 9px 9px 0;border-left:0}
.osw-modal .osw-modo button.on{background:#0f172a;color:#fff;border-color:#0f172a}
.osw-modal .osw-pagina .osw-main{counter-reset:pw;display:flex;flex-direction:column;gap:16px}
.osw-modal .osw-pagina .osw-passo{counter-increment:pw;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgb(15 23 42 / 4%);scroll-margin-top:96px}
.osw-modal .osw-pagina .osw-passo .osw-q h2{font-size:20px}
.osw-modal .osw-pagina .osw-passo .osw-q h2::before{content:counter(pw);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#2563eb;color:#fff;font-size:14px;margin-right:10px;vertical-align:2px}
.osw-modal .osw-pagina [data-conferir]{display:none}
.osw-modal .osw-pagina .osw-p2{border:0;box-shadow:none;padding:0}
.linha-chk{flex-wrap:wrap}
.obs-chk{flex-basis:100%;width:100%;min-height:36px;border-radius:8px;padding:6px 10px;font-size:13px;margin:2px 0 6px}
.osw-modal .osw-chk .linha-chk:has(.obs-chk){padding-bottom:4px}
@media (max-width:860px){ .osw-modal .osw-modo{order:3;flex-basis:100%} .osw-modal .osw-pagina .osw-passo{padding:14px 12px} }

/* ===== p249 · Tema da Nova OS a partir do template "Prognos" (Behance, Apple Academy) =====
   Fonte Bai Jamjuree (Google Fonts, licença OFL, servida pelo próprio ERP em /fonts)
   Paleta: #CDE9AC verde claro · #ADDA7C verde limão · #578927 verde · #212121 grafite · #343434 grafite 2
   Texto verde pequeno usa #3f6b1a (contraste 6,3:1); #578927 só em título grande, borda e fundo. Só dentro da Nova OS. */
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(fonts/bai-jamjuree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(fonts/bai-jamjuree-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(fonts/bai-jamjuree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(fonts/bai-jamjuree-latin-700-normal.woff2) format('woff2')}
.modal.os-v2.osw-modal{--pg-cl:#CDE9AC;--pg-lm:#ADDA7C;--pg-vd:#578927;--pg-tx:#3f6b1a;--pg-gf:#212121;--pg-gf2:#343434;--pg-fd:#ECECE8;--pg-bd:#d9d9d2;
  --os-navy:#212121;--os-blue:#578927;--os-blue-hover:#3f6b1a;--os-blue-soft:#f1f7e8;--os-page:#ECECE8;--os-text:#212121;--os-border:#d9d9d2}
.modal.os-v2.osw-modal{--ui:'Bai Jamjuree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;--display:var(--ui)}
.modal.os-v2.osw-modal .caixa,.modal.os-v2.osw-modal .caixa *{font-family:'Bai Jamjuree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.osw-modal .caixa input,.osw-modal .caixa select,.osw-modal .caixa textarea,.osw-modal .caixa button{font-family:inherit}
.modal.os-v2.osw-modal .caixa > .cab h2{font-weight:600}
/* barra de cima: grafite, etapas e modo em verde limão */
.osw-modal .osw-h{background:var(--pg-gf2);border-bottom:0;color:#fff}
.osw-modal .osw-st{color:#d6d6cf}
.osw-modal .osw-st i{border-color:#8f8f88;color:#e5e5e0}
.osw-modal .osw-st.ok{color:#e9e9e4}.osw-modal .osw-st.ok i{background:transparent;border-color:var(--pg-lm);color:var(--pg-lm)}
.osw-modal .osw-st.on{color:var(--pg-lm)}.osw-modal .osw-st.on i{background:var(--pg-lm);border-color:var(--pg-lm);color:var(--pg-gf)}
.osw-modal .osw-ln{border-color:#55554f}.osw-modal .osw-ln.ok{border-color:var(--pg-lm)}
.osw-modal .osw-st:focus-visible,.osw-modal .osw-modo button:focus-visible{outline:3px solid var(--pg-lm);outline-offset:2px}
.osw-modal .osw-modo > span{color:#d6d6cf}
.osw-modal .osw-modo button{background:transparent;border-color:#8f8f88;color:#fff}
.osw-modal .osw-modo button.on{background:var(--pg-lm);border-color:var(--pg-lm);color:var(--pg-gf)}
/* blocos */
.osw-modal .osw-card,.osw-modal .osw-cc,.osw-modal .osw-est,.osw-modal .osw-senha,.osw-modal .osw-mais,.osw-modal .os-fotos{border-color:var(--pg-bd);border-radius:18px}
.osw-modal .osw-pagina .osw-passo{border-color:var(--pg-bd);border-radius:22px;padding:20px 22px;box-shadow:0 1px 2px rgb(33 33 33 / 5%)}
.osw-modal .osw-pagina .osw-passo .osw-q h2::before{background:var(--pg-lm);color:var(--pg-gf);font-weight:700}
.osw-modal .osw-q h2{color:var(--pg-gf);font-weight:600;letter-spacing:0}
.osw-modal .osw-q p{color:#5c5c56}
/* campos */
.osw-modal .osw-sel{border-color:#9a9a92;border-radius:14px}
.osw-modal .osw-sel:focus-within,.osw-modal details[open] > .osw-sel{border-color:var(--pg-vd);box-shadow:0 0 0 3px rgb(87 137 39 / 22%)}
.osw-modal .osw-ic,.osw-modal .osw-ic.av{background:var(--pg-cl);color:var(--pg-gf)}
.osw-modal .osw-cv{background:#f0f0ec;color:var(--pg-gf)}
.osw-modal details[open] > .osw-sel .osw-cv{background:var(--pg-cl);color:var(--pg-gf)}
.osw-modal .osw-p1-busca .os-search input,.osw-modal .osw-busca-item input{border-color:var(--pg-vd);border-radius:14px}
.osw-modal input:focus-visible,.osw-modal textarea:focus-visible,.osw-modal select:focus-visible{outline:2px solid var(--pg-vd);outline-offset:1px}
.osw-modal .osw-f textarea{border-color:#9a9a92;border-radius:14px}
/* como chegou */
.osw-modal .osw-chip-or{border-color:#9a9a92;border-radius:999px;padding:8px 14px}
.osw-modal .osw-chip-or:hover{border-color:var(--pg-vd);background:#f6faef}
.osw-modal .osw-chip-or.on{background:var(--pg-lm);border-color:var(--pg-vd);color:var(--pg-gf)}
.osw-modal .osw-chip-or:focus-visible{outline:3px solid var(--pg-vd);outline-offset:2px}
/* atalhos, etiquetas e links */
.osw-modal .osw-src{background:var(--pg-cl);color:var(--pg-tx)}
.osw-modal [data-atalhos-problema] .chip{background:#e7ebe0;color:var(--pg-gf);border-radius:999px}
.osw-modal [data-atalhos-problema] .chip:hover{background:var(--pg-cl);color:var(--pg-gf)}
.osw-modal .osw-mais > summary,.osw-modal .osw-link{color:var(--pg-tx)}
.osw-modal .osw-tudo-ok{border-color:var(--pg-tx);color:var(--pg-tx);border-radius:999px}
.osw-modal .osw-tudo-ok:hover{background:var(--pg-cl)}
/* estado na chegada: ok em verde do tema, defeito continua vermelho (aviso), observação em amarelo */
.osw-modal .osw-chk .seg-chk.ok.at{background:var(--pg-tx) !important}
.osw-modal .osw-chk .seg-chk:focus-visible{outline-color:var(--pg-vd)}
.osw-modal .obs-chk{border:1px solid #b45309 !important;background:#fffbeb !important;color:#212121}
/* orçamento */
.osw-modal .osw-dd-op:hover,.osw-modal .osw-dd-op:focus-visible{background:#f1f7e8}
.osw-modal .osw-dd-op.nv{color:var(--pg-tx);background:#f6faef}
.osw-modal .osw-tot{background:var(--pg-gf);border-radius:18px}
.osw-modal .osw-tot .v{color:var(--pg-lm)}.osw-modal .osw-tot .gr{color:var(--pg-lm)}
/* resumo ao lado: cartão grafite como as telas do app */
.osw-modal .osw-resumo{background:var(--pg-gf);border-color:var(--pg-gf);color:#f2f2ee}
.osw-modal .osw-resumo h3{color:var(--pg-lm)}
.osw-modal .osw-resumo .osw-l{border-bottom-color:#3d3d3d}
.osw-modal .osw-resumo .osw-l span{color:#c4c4bd}.osw-modal .osw-resumo .osw-l b{color:#fff}.osw-modal .osw-resumo .osw-l b.gr{color:var(--pg-lm)}
.osw-modal .osw-resumo .osw-link{color:var(--pg-lm)}
/* rodapé: botões em pílula; Abrir OS em verde limão com texto grafite */
.osw-modal .os-button{border-radius:999px}
.osw-modal .os-button--primary,.osw-modal .os-button.osw-verde{background:var(--pg-lm) !important;border-color:var(--pg-vd) !important;color:var(--pg-gf) !important;font-weight:700}
.osw-modal .os-button--primary:hover,.osw-modal .os-button.osw-verde:hover{background:#9ccd66 !important}
.osw-modal .os-button--outline{border-color:#8f8f88;color:var(--pg-gf)}
.osw-modal .os-button--outline:hover{border-color:var(--pg-vd);background:#f6faef}

/* ===== p249c · página completa no desenho da 2ª imagem ===== */
.osw-modal .osw-pagina .osw-side{position:static;gap:16px}
.osw-modal .osw-pagina .osw-side > .osw-est,.osw-modal .osw-pagina .osw-side > .osw-fotos-lado{border:1px solid var(--pg-bd,#e2e8f0);border-radius:18px;background:#fff}
.osw-modal .osw-pagina .osw-fotos-lado{padding:14px 16px}
.osw-modal .osw-pagina .osw-side .osw-chk .seg-chk:first-child{width:46px}.osw-modal .osw-pagina .osw-side .osw-chk .seg-chk:nth-child(2){width:66px}.osw-modal .osw-pagina .osw-side .osw-chk .seg-chk:nth-child(3){width:74px}
.osw-modal .osw-pagina .osw-side .osw-chk .linha-chk{padding:6px 12px;gap:8px}
.osw-modal .osw-pagina .osw-side .osw-chk .nome-chk{white-space:normal;font-size:13px}
.osw-modal .osw-pagina .osw-cfg .osw-g3,.osw-modal .osw-pagina .osw-cfg .osw-g2{grid-template-columns:minmax(0,1fr)}
.osw-modal .osw-pagina .osw-p3{grid-template-columns:minmax(0,1fr) 360px}
.osw-modal .osw-pagina [data-passo-w="1"] > .osw-q{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start}
.osw-modal .osw-pagina [data-passo-w="1"] > .osw-q > [data-novo-cliente]{grid-column:2;grid-row:1 / span 2;margin-top:0 !important;align-self:center;background:var(--pg-lm,#2563eb) !important;border:1px solid var(--pg-vd,#2563eb) !important;color:var(--pg-gf,#fff) !important;border-radius:999px;font-weight:700;min-height:42px;padding:0 18px}
.osw-modal .osw-pagina .osw-st[data-passo="5"],.osw-modal .osw-pagina .osw-ln:has(+ .osw-st[data-passo="5"]){display:none}
@media (max-width:1180px){ .osw-modal .osw-pagina .osw-p3{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){ .osw-modal .osw-pagina [data-passo-w="1"] > .osw-q{grid-template-columns:minmax(0,1fr)} .osw-modal .osw-pagina [data-passo-w="1"] > .osw-q > [data-novo-cliente]{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px !important} }

/* ===== p250 · IA no "Enviar aviso ao cliente" ===== */
.aviso-ia{display:flex;flex-direction:column;gap:8px;margin:8px 0 6px;padding:10px 12px;border:1px solid var(--borda,#e2e8f0);border-radius:12px;background:var(--suave,#f8fafc)}
.aviso-ia-l{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aviso-ia-b{min-height:40px;font-weight:600}
.aviso-ia-b[data-sugerir-ia]{background:#ADDA7C !important;border-color:#578927 !important;color:#212121 !important}
.aviso-ia-b.gravando{background:#b91c1c !important;border-color:#b91c1c !important;color:#fff !important}
.aviso-ia-selo{font-size:12.5px;font-weight:600;color:#3f6b1a}
.aviso-ia-estado{font-size:12.5px;color:var(--tinta-3,#475569)}
.aviso-ia-anexo{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:600;cursor:pointer}

/* ===== p249d · sem barra de botões por cima; Salvar OS no fim da página ===== */
.modal.osw-modal .caixa:has(.osw-pagina) > .pe{display:none !important}
.osw-modal .osw-fim{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--pg-bd,#e2e8f0);border-radius:22px;padding:16px 20px;margin-top:4px}
.osw-modal .osw-fim-tx{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#5c5c56}
.osw-modal .osw-fim-tx b{font-size:17px;color:var(--pg-gf,#0f172a)}
.osw-modal .osw-fim .os-button{min-height:48px;padding:0 22px;font-size:15px}
.osw-modal .osw-fim .osw-salvar{min-width:200px}
@media (max-width:860px){ .osw-modal .osw-fim{flex-direction:column;align-items:stretch} .osw-modal .osw-fim .os-button{width:100%} .osw-modal .osw-fim-tx{order:-1} .osw-modal .osw-fim .osw-salvar{order:1} }

@media (max-width:860px){ .osw-modal .osw-b > .osw-fim{grid-column:1 / -1} }

/* ===== p251 · peça só no orçamento ===== */
.so-orc-tag{background:#fef3c7;color:#92400e;font-weight:600}
.aviso-pend-pecas{display:flex;flex-direction:column;gap:3px;background:#fffbeb;border:1px solid #f59e0b;border-radius:12px;padding:10px 14px;margin:0 0 10px;font-size:13px;color:#78350f}
.aviso-pend-pecas b{font-size:14px}.aviso-pend-pecas small{color:#92400e}
[data-peca-rapida]{background:#ADDA7C !important;border-color:#578927 !important;color:#212121 !important;font-weight:700}

/* ===== p252 · tela "OS aberta" (4 ações grandes + prévia da mensagem) ===== */
.osa-modal .caixa{max-width:860px}
.osa-cab{text-align:center;margin:4px 0 16px}
.osa-cab .osa-ok{font-size:40px;line-height:1}
.osa-cab h3{font-size:24px;margin:6px 0 2px;font-weight:800}
.osa-cab .osa-sub{font-size:13px;color:var(--tinta-3,#475569)}
.osa-acoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.osa-acao{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--borda,#e2e8f0);background:#fff;border-radius:14px;padding:18px 10px;cursor:pointer;font:inherit;text-align:center;min-height:132px;justify-content:center}
.osa-acao .ic{font-size:30px;line-height:1}.osa-acao b{font-size:15px;color:var(--tinta,#0f172a)}.osa-acao small{font-size:12px;color:var(--tinta-3,#475569)}
.osa-acao:hover{border-color:#578927;box-shadow:0 2px 10px rgb(15 23 42 / 8%)}
.osa-acao.verde{border:2px solid #15803d;background:#f0fdf4}
.osa-acao:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.osa-previa{white-space:pre-wrap;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:12px 14px;font-size:13px;max-height:220px;overflow:auto;color:#14532d}
.osa-mais{margin-top:12px}.osa-mais > summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--tinta-2,#334155)}
.osa-mais > div{margin-top:10px}
@media (max-width:760px){.osa-acoes{grid-template-columns:1fr 1fr}.osa-acao{min-height:110px}}

.aviso-ia-anexo[hidden],.aviso-ia [hidden]{display:none !important}

/* ===== p254 · ficha da OS: sinal ao lado do pagamento, campos sem cortar, aviso escondido de verdade ===== */
.fm-bsinal{width:100%;justify-content:center;margin-top:8px;border-radius:999px;min-height:42px;font-weight:700}
.aviso-pend-pecas[hidden]{display:none !important}
.fm-os .linha{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fm-encerrar-fin b{font-size:15px}

/* p254b · conversa recolhida: só abre ao clicar em "Mostrar conversa" */
.cv-mostrar{margin:12px 0;padding:0;overflow:hidden}
.cv-mostrar>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;min-height:48px;padding:12px 16px;font-weight:700;font-size:14px;color:var(--azul,#0a84ff)}
.cv-mostrar>summary::-webkit-details-marker{display:none}
.cv-mostrar>summary::after{content:'▾';margin-left:auto;transition:transform .15s}
.cv-mostrar[open]>summary::after{transform:rotate(180deg)}
.cv-mostrar>summary:focus-visible{outline:2px solid var(--azul,#0a84ff);outline-offset:-2px}
.cv-mostrar-qtd{font-weight:500;color:var(--tinta-3,#64748b)}
.cv-mostrar>.cv-cartao{margin:0;border:0;border-top:1px solid var(--linha,#e2e8f0);border-radius:0;box-shadow:none}

/* ===== p255 · Nova OS: a seta abre a lista (o select cobre o cartão) · ficha: termo recolhido, próximo passo ===== */
.osw-modal label.osw-sel-lista{position:relative}
.osw-modal label.osw-sel-lista > select.osw-ctrl{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;appearance:auto;-webkit-appearance:auto;font-size:16px}
.osw-modal label.osw-sel-lista .osw-espelho{pointer-events:none}
.osw-modal label.osw-sel-lista:has(> select:focus-visible){outline:3px solid #2563eb;outline-offset:2px}
.osw-modal label.osw-sel-lista .osw-cv{pointer-events:none;z-index:1}
.termo-det>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px;padding:12px 14px;min-height:48px}
.termo-det>summary::-webkit-details-marker{display:none}
.termo-det>summary b{font-size:13.5px}
.termo-det>summary .termo-resumo{font-size:12.5px;color:var(--tinta-3,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.termo-det>summary::after{content:'ver / editar ▾';font-size:12px;font-weight:700;color:var(--azul,#0a84ff)}
.termo-det[open]>summary::after{content:'fechar ▴'}
.fm-prox-c{display:flex;flex-direction:column;gap:4px;padding:10px 12px;margin:6px 0 10px;border-radius:12px;background:#eff6ff;border:1px solid #bfdbfe}
.fm-prox-c b{font-size:15px;color:#0f172a}
.fm-prox-c small{font-size:12.5px;color:#475569;line-height:1.35}
.fm-prox-b{margin-top:6px;width:100%;justify-content:center;border-radius:999px;min-height:42px;font-weight:700}

/* ===================== p256 · tema Casa do Mac (verde-limão + grafite) — tokens globais ===================== */
:root{--cm-cl:#CDE9AC;--cm-lm:#ADDA7C;--cm-lm2:#9ccc66;--cm-vd:#578927;--cm-tx:#3f6b1a;--cm-gf:#212121;--cm-gf2:#343434;--cm-bd:#d9d9d2;--cm-suave:#F3F9EA;
  --cm-fonte-t:'Bai Jamjuree',Inter,system-ui,-apple-system,sans-serif}

/* ficha da OS */
.fm-blocado .fm-tit h3,.fm-completo .fm-tit h3,.fm-cabtit h2,.fm-total,.fm-gt{font-family:var(--cm-fonte-t)}
.fm-blocado .fm-tit h3,.fm-completo .fm-tit h3{font-weight:600}
.fm-row.on{background:var(--cm-cl) !important;box-shadow:inset 3px 0 0 var(--cm-vd)}
.fm-row.on .fm-l{color:var(--cm-gf)}
.fm-row:focus-visible{outline:3px solid var(--cm-vd);outline-offset:-3px}
.fm-completo .abas-ficha button.at,.fm-completo .abas-ficha button[aria-current="true"]{color:var(--cm-gf) !important;border-bottom-color:var(--cm-vd) !important;font-weight:700}
.fm-card:has(.fm-total){background:var(--cm-cl);border:1px solid var(--cm-lm)}
.fm-card:has(.fm-total) .fm-rot,.fm-card:has(.fm-total) .fm-lin span{color:#33402a}
.fm-card:has(.fm-total) .fm-lin{border-color:rgb(33 33 33 / 12%)}
.fm-total{font-size:34px !important;font-weight:700;letter-spacing:-.01em;color:var(--cm-gf)}
.fm-bpag{background:var(--cm-lm) !important;border-color:var(--cm-lm) !important;color:var(--cm-gf) !important;font-weight:700;min-height:44px}
.fm-bpag:hover{background:var(--cm-lm2) !important}
.fm-bsinal{background:#fff !important;border:1.5px solid var(--cm-gf) !important;color:var(--cm-gf) !important}
.fm-prox-c{background:var(--cm-suave);border-color:var(--cm-lm)}
.fm-prox-b{background:var(--cm-gf) !important;border-color:var(--cm-gf) !important;color:#fff !important}
.fm-prox-b:hover{background:var(--cm-gf2) !important}
.fm-blocado .botao:focus-visible,.fm-completo .botao:focus-visible{outline:3px solid var(--cm-vd);outline-offset:2px}

/* Nova OS: cartões de seleção com ✓ (tipo de aparelho e defeitos) */
.osw-modal .tile-tipo{position:relative;border:1.5px solid var(--cm-bd);border-radius:14px;min-height:72px;background:#fff;color:var(--cm-gf)}
.osw-modal .tile-tipo:hover{border-color:var(--cm-gf);background:#fff}
.osw-modal .tile-tipo.at{background:var(--cm-cl);border-color:var(--cm-gf);color:var(--cm-gf);box-shadow:none}
.osw-modal .tile-tipo.at::after,.osw-modal .chip-sel.on::after{content:'✓';position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--cm-gf);color:var(--cm-lm);font-size:12px;font-weight:800;display:grid;place-items:center;line-height:1}
.osw-modal .tile-tipo:focus-visible,.osw-modal .chip-sel:focus-visible{outline:3px solid var(--cm-vd);outline-offset:2px}
.osw-modal .chip-sel{position:relative;min-height:44px;padding:8px 34px 8px 14px;border-radius:12px;border:1.5px solid var(--cm-bd);background:#fff;color:var(--cm-gf);font-weight:600}
.osw-modal .chip-sel:hover{border-color:var(--cm-gf)}
.osw-modal .chip-sel.on{background:var(--cm-cl);border-color:var(--cm-gf)}
.osw-modal .chip-sel.on::after{top:50%;right:8px;transform:translateY(-50%)}

/* lista de OS: filtros numa moldura só + medidor nos cartões de situação */
.barra-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px;border:1.5px solid var(--cm-lm);border-radius:14px;background:#fff;flex:1 1 560px;min-width:0}
.barra-filtro > input[type="search"]{flex:1 1 220px;min-width:160px;border-color:transparent !important;background:var(--cm-suave) !important}
.barra-filtro:focus-within{border-color:var(--cm-vd);box-shadow:0 0 0 3px rgb(87 137 39 / 18%)}
.cartao-situacao{position:relative;overflow:hidden}
.cartao-situacao .medidor{position:absolute;left:0;bottom:0;height:4px;width:var(--pct,0%);background:var(--cor-situacao,#999);opacity:.85;border-radius:0 3px 0 0}
.cartao-situacao .texto b{font-family:var(--cm-fonte-t);font-size:22px}
.cartao-situacao:focus-visible{outline:3px solid var(--cm-vd);outline-offset:2px}

/* telas de resultado (encerrar, sinal) */
.res-ok .res-selo{width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--cm-lm);color:var(--cm-gf);display:grid;place-items:center;font-size:34px !important;font-weight:800}
.res-ok .osa-cab h3{font-family:var(--cm-fonte-t);font-weight:700}
.res-ok .osa-cab h3:focus{outline:none}

/* peças e serviços em cartões (celular e tablet em pé): faixa verde com nome e preço */
@media (max-width: 1024px) {
  .tabela-itens-os tr{background:#fff;border:1px solid var(--cm-bd) !important;border-radius:16px;overflow:hidden;padding:0 14px 14px !important;margin:0 0 12px}
  .tabela-itens-os td:first-child{background:var(--cm-cl);margin:0 -14px 2px;padding:12px 14px !important;border-bottom:1px solid var(--cm-lm) !important}
  .tabela-itens-os td:first-child input{background:#fff !important;font-weight:700}
  .tabela-itens-os td[data-rot="Subtotal"]{font-family:var(--cm-fonte-t);font-size:18px;font-weight:700;color:var(--cm-gf)}
}

/* p257 · ficha da OS: como foi recebido */
.receb-os{margin:10px 0 4px;border:1px solid var(--cm-bd,#d9d9d2);border-radius:14px;overflow:hidden}
.receb-tit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--cm-suave,#F3F9EA);border-bottom:1px solid var(--cm-bd,#d9d9d2)}
.receb-tab{width:100%;font-size:13px}
.receb-tab th{font-size:11.5px;color:var(--tinta-3);text-align:left;padding:8px 10px}
.receb-tab td{padding:8px 10px;border-top:1px solid var(--linha)}
.receb-tab td small{color:var(--tinta-3)}
.receb-tab tr.estornado td{color:var(--tinta-3);text-decoration:line-through}
.receb-tab tr.estornado td .etiqueta{text-decoration:none}
@media (max-width: 700px){.receb-tab thead{display:none}.receb-tab,.receb-tab tbody{display:block}.receb-tab tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:10px 12px;border-top:1px solid var(--linha)}.receb-tab td{border:0;padding:0}.receb-tab td[data-rot]::before{content:attr(data-rot);display:block;font-size:10.5px;color:var(--tinta-3);font-weight:700;text-transform:uppercase}}

/* p256b · moldura de filtros: busca larga, opções na mesma linha quando cabe */
.barra-filtro{flex:1 1 760px}
.barra-filtro > input[type="search"]{flex:2 1 300px}
.barra-filtro label{white-space:nowrap}

/* ===== p258 · painel da OS (estilo cartões) + glossário das situações ===== */
.cartao-numero{background:#fff;border:1px solid var(--cm-bd,#d9d9d2);border-radius:16px}
.cartao-numero-valor{font-family:var(--cm-fonte-t);font-weight:700}
.cartao-numero-rotulo{color:#33402a !important}
.cartao-numero:focus-visible{outline:3px solid var(--cm-vd);outline-offset:2px}
.barra-empilhada{height:14px}
.pn-cartao .cab{font-family:var(--cm-fonte-t);font-weight:600}
.pn-agenda{display:flex;flex-direction:column;gap:8px;padding:12px}
.pn-ag-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;text-align:left;background:#fff;border:1px solid var(--cm-bd,#d9d9d2);border-radius:14px;padding:10px 12px;min-height:56px;cursor:pointer;color:var(--cm-gf,#212121);font:inherit}
.pn-ag-item:hover{border-color:var(--cm-gf,#212121)}
.pn-ag-item:focus-visible{outline:3px solid var(--cm-vd);outline-offset:2px}
.pn-ag-quando{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:var(--cm-cl,#CDE9AC);padding:6px 4px;line-height:1.1}
.pn-ag-quando b{font-family:var(--cm-fonte-t);font-size:18px}
.pn-ag-quando small{font-size:11px;color:#33402a}
.pn-ag-item.atrasada .pn-ag-quando{background:#fee2e2}
.pn-ag-item.atrasada .pn-ag-quando b,.pn-ag-item.atrasada .pn-ag-quando small{color:#991b1b}
.pn-ag-txt{display:flex;flex-direction:column;min-width:0}
.pn-ag-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-ag-txt small{font-size:12.5px;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-ag-sit{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;border:1.5px solid var(--cor-situacao,#999);color:var(--cm-gf,#212121);white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.pn-idade{display:flex;flex-direction:column;gap:6px;padding:12px}
.pn-id-linha{display:grid;grid-template-columns:110px 1fr 44px;gap:10px;align-items:center;background:none;border:0;padding:6px 4px;border-radius:10px;cursor:pointer;font:inherit;color:var(--cm-gf,#212121);min-height:40px}
.pn-id-linha:hover{background:var(--cm-suave,#F3F9EA)}
.pn-id-linha:focus-visible{outline:3px solid var(--cm-vd);outline-offset:1px}
.pn-id-rot{font-size:13px;text-align:left}
.pn-id-trilho{height:14px;border-radius:999px;background:#eef0ea;overflow:hidden}
.pn-id-barra{display:block;height:100%;border-radius:999px;background:var(--cm-lm,#ADDA7C);min-width:2px}
.pn-id-linha.velha .pn-id-barra{background:#ef4444}
.pn-id-n{font-family:var(--cm-fonte-t);font-size:16px;text-align:right}
.pn-resumo-txt{padding:0 16px 14px;font-size:13px;color:#33402a}
@media (max-width: 700px){.pn-ag-item{grid-template-columns:56px 1fr}.pn-ag-sit{grid-column:2;justify-self:start}.pn-id-linha{grid-template-columns:86px 1fr 36px}}
.gl-botao{align-self:center}
.glossario .gl-intro{font-size:13.5px;color:#33402a;margin:0 0 10px}
.glossario h3{font-family:var(--cm-fonte-t);font-size:15px;margin:14px 0 8px}
.gl-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gl-item{border:1px solid var(--cm-bd,#d9d9d2);border-radius:14px;overflow:hidden;background:#fff}
.gl-tit{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--cm-cl,#CDE9AC);color:var(--cm-gf,#212121);font-size:13px}
.gl-ponto{width:10px;height:10px;border-radius:50%;background:var(--cor-situacao,#999);border:1.5px solid #212121;flex:none}
.gl-item p{margin:0;padding:10px 12px 4px;font-size:13px;line-height:1.4;color:var(--cm-gf,#212121)}
.gl-tags{display:flex;gap:6px;flex-wrap:wrap;padding:4px 12px 12px}
.gl-tag{font-size:11.5px;padding:3px 8px;border-radius:999px;background:#f1f1ee;color:#33402a}
.gl-tag.aberta{background:var(--cm-suave,#F3F9EA)}

/* p258b · ✓ do defeito não cobre o texto */
.modal.osw-modal button.chip.chip-sel{padding-right:34px !important;position:relative}

/* ===================== p259 · login dividido, ícone, caixa/financeiro, faturamento por loja ===================== */
.login.login-dividido{display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(360px,1fr);padding:0;place-items:stretch;background:#fff}
.login-lado{background:radial-gradient(120% 90% at 20% 15%,#343434 0%,#212121 55%,#171717 100%);color:#fff;display:flex;align-items:center;justify-content:center;padding:48px}
.login-lado-in{max-width:420px}
.login-icone{width:88px;height:88px;border-radius:22px;display:block;margin-bottom:26px;box-shadow:0 10px 30px rgb(0 0 0 / 35%)}
.login-nome{font-family:var(--cm-fonte-t);font-size:44px;font-weight:700;line-height:1.05;color:var(--cm-lm,#ADDA7C)}
.login-sub{font-size:17px;color:#e5e7eb;margin:10px 0 26px}
.login-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.login-lista li{display:flex;gap:10px;align-items:center;font-size:15px;color:#f1f5f9}
.login-lista li::before{content:'✓';width:22px;height:22px;border-radius:50%;background:var(--cm-lm,#ADDA7C);color:#212121;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.login-form-lado{display:flex;align-items:center;justify-content:center;padding:32px 24px;background:#f6f7f2}
.login.login-dividido form{box-shadow:0 1px 3px rgb(0 0 0 / 6%);border-color:#e3e5dc}
.login.login-dividido h1{font-family:var(--cm-fonte-t);font-size:28px}
.login-marca-form{display:none;border-radius:12px;margin-bottom:14px}
.login-entrar{background:var(--cm-gf,#212121) !important;border-color:var(--cm-gf,#212121) !important;color:#fff !important;min-height:48px;font-weight:700;font-size:16px}
.login-entrar:hover{background:var(--cm-gf2,#343434) !important}
.login.login-dividido input:focus-visible,.login-entrar:focus-visible{outline:3px solid var(--cm-vd,#578927);outline-offset:2px}
@media (max-width: 800px){
  .login.login-dividido{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login-lado{padding:28px 24px 26px}
  .login-icone{width:60px;height:60px;border-radius:16px;margin-bottom:14px}
  .login-nome{font-size:32px}.login-sub{margin:6px 0 0;font-size:15px}.login-lista{display:none}
}
:root[data-tema="escuro"] .login-form-lado{background:#0e0f0e}

/* indicadores (caixa e financeiro): número grande, o principal em destaque */
.indicadores-cm .cartao.indicador{border-radius:16px;border:1px solid var(--cm-bd,#d9d9d2)}
.indicadores-cm .cartao.indicador b{font-family:var(--cm-fonte-t) !important;font-weight:700}
.indicadores-cm .cartao.indicador.destaque{background:var(--cm-cl,#CDE9AC);border-color:var(--cm-lm,#ADDA7C)}
.indicadores-cm .cartao.indicador.destaque span{color:#33402a;font-weight:600}
.indicadores-cm .cartao.indicador.destaque b{color:var(--cm-gf,#212121) !important;font-size:38px}
@media (min-width: 900px){.indicadores-cm > .destaque{grid-column:span 2}}
.formas-barra .barra-empilhada{height:14px}
.barra-filtro .bf-rot{font-size:13px;color:#33402a}
.barra-filtro input[type="date"]{width:auto;min-height:40px}

/* faturamento por loja × meta */
.fl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.fl-card{border:1px solid var(--cm-bd,#d9d9d2);border-radius:16px;padding:14px 16px;background:#fff;border-top:5px solid var(--cor-loja)}
.fl-tit{display:flex;align-items:center;gap:8px;font-size:14px}
.fl-ponto{width:12px;height:12px;border-radius:50%;background:var(--cor-loja)}
.fl-valor{font-family:var(--cm-fonte-t);font-size:30px;font-weight:700;margin-top:6px;color:var(--cm-gf,#212121)}
.fl-card small{color:var(--tinta-3);font-size:12px}
.fl-meta{margin-top:10px}
.fl-trilho{height:12px;border-radius:999px;background:#eef0ea;overflow:hidden}
.fl-trilho span{display:block;height:100%;border-radius:999px;background:var(--cor-loja)}
.fl-linha{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;margin-top:6px;color:#33402a}
.fl-linha.ok b{color:#15803d}.fl-linha.r b{color:#b91c1c}
.fl-linha.cinza{color:var(--tinta-3);border-top:1px dashed var(--cm-bd,#d9d9d2);padding-top:6px;margin-top:8px}
.fl-legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;margin:4px 0 6px;color:#33402a}
.fl-leg{display:inline-flex;align-items:center;gap:6px}
.fl-leg i{width:14px;height:10px;border-radius:3px;display:inline-block}
.fl-leg i.tracejado{height:0;border-top:2px dashed #33402a;border-radius:0}
.fl-leg i.contorno{border:1.5px dashed #33402a;background:transparent}
.fl-graf{display:block;max-width:100%;height:auto}
.fl-nota{font-size:12px;color:var(--tinta-3);margin:8px 0 0}
@media (max-width: 800px){.login-form-lado{align-items:flex-start;padding-top:22px}.barra-filtro .bf-rot{display:none}}

/* ===== p262 · cartão do Jarvis no menu ===== */
.jarvis-menu{margin:10px 12px 8px;padding:12px;border-radius:16px;background:var(--cm-gf,#212121);color:#f1f5f9;box-shadow:0 4px 14px rgb(0 0 0 / 18%)}
.jm-cab{display:flex;align-items:center;gap:6px;font-size:13px}
.jm-cab b{font-family:var(--cm-fonte-t);color:var(--cm-lm,#ADDA7C);letter-spacing:.02em}
.jm-ico{font-size:15px}
.jm-n{margin-left:auto;font-size:11.5px;color:#cbd5e1}
.jm-setas{display:inline-flex;gap:4px}
.jm-setas button{width:28px;height:28px;border-radius:8px;border:1px solid #4b5563;background:transparent;color:#f1f5f9;font-size:16px;line-height:1;cursor:pointer;padding:0;min-height:0}
.jm-setas button:hover{border-color:var(--cm-lm,#ADDA7C)}
.jm-alerta{margin:10px 0;padding-left:10px;border-left:3px solid var(--cm-lm,#ADDA7C)}
.jm-alerta.jm-r{border-left-color:#f87171}.jm-alerta.jm-a{border-left-color:#fbbf24}
.jm-tit{font-weight:700;font-size:13.5px;line-height:1.3}
.jm-txt{font-size:12.5px;color:#cbd5e1;margin-top:4px;line-height:1.35}
.jm-ok{font-size:13px;color:#d9f99d;margin-top:8px}
.jm-ver{width:100%;min-height:38px;border-radius:999px;border:0;background:var(--cm-lm,#ADDA7C);color:#212121;font-weight:700;font-size:13px;cursor:pointer}
.jm-ver:hover{background:var(--cm-lm2,#9ccc66)}
.jarvis-menu button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.jm-lista{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.jm-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--cm-bd,#d9d9d2);border-radius:12px;background:#fff;cursor:pointer;font:inherit;color:var(--cm-gf,#212121);min-height:48px}
.jm-item:hover{border-color:var(--cm-gf,#212121);background:var(--cm-suave,#F3F9EA)}
.jm-item small{color:var(--tinta-3);font-size:12px}

/* p264 · ☰ no computador: com o menu recolhido o conteúdo ficava espremido numa coluna de 60px
   (a lateral some, e o <main> caía na coluna de largura zero). Agora o conteúdo ocupa a tela toda. */
@media (min-width:901px){
  :root.menu-recolhido .layout > main.conteudo{ grid-column:2; width:auto; }
}

/* ===== p264 · ficha da OS em tela cheia, responsiva ===== */
.modal:has(> .caixa.fm-os){padding:0;place-items:stretch;overflow:hidden}
.modal .caixa.fm-os,.modal .caixa.fm-os.ficha-larga{width:100vw;max-width:100vw;min-width:0;height:100dvh;max-height:100dvh;border-radius:0;margin:0;display:flex;flex-direction:column;box-shadow:none}
.caixa.fm-os > .cab,.caixa.fm-os > .pe{flex:none}
.caixa.fm-os > .corpo{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-width:0}
@media (min-width:1100px){
  .caixa.fm-os > .cab{padding-left:clamp(16px,2.5vw,40px);padding-right:clamp(16px,2.5vw,40px)}
  .caixa.fm-os > .corpo{padding-left:clamp(16px,2.5vw,40px);padding-right:clamp(16px,2.5vw,40px)}
}
.fm-completo .fm-secoes{grid-template-columns:minmax(0,1fr) clamp(280px,24vw,360px)}
/* abas: quebram de linha em vez de rolar de lado (no computador e no tablet) */
@media (min-width:801px){
  .fm-completo .abas-ficha{flex-wrap:wrap !important;overflow:visible !important;white-space:normal !important;gap:2px 6px;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .fm-completo .abas-ficha .aba-ficha{flex:0 0 auto;min-height:40px}
}
/* ações sempre à vista, em botões iguais */
.fm-mais{align-items:center}
.fm-mais-rot{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);margin-right:2px}
.fm-mais .botao{min-height:38px;font-size:13.5px;padding:7px 14px;background:#fff;border:1.5px solid var(--cm-bd,#d9d9d2);color:var(--cm-gf,#212121)}
.fm-mais .botao:hover{border-color:var(--cm-gf,#212121)}
.fm-mais .botao:focus-visible,.fm-tsinal:focus-visible{outline:3px solid var(--cm-vd,#578927);outline-offset:2px}
.fm-tsinal{background:#fff !important;border:1.5px solid var(--cm-gf,#212121) !important;color:var(--cm-gf,#212121) !important;font-weight:700}
@media (max-width:800px){
  .fm-mais{gap:6px}
  .fm-mais .botao{flex:1 1 calc(50% - 6px);justify-content:center;min-height:44px}
  .fm-mais-rot{flex:1 1 100%}
  .fm-tsinal{flex:1 1 100%;justify-content:center;min-height:44px}
}

/* p264b · ficha em tela cheia fica por cima da barra do topo também no computador
   (antes só até 1100px); as janelas abertas a partir dela continuam por cima, pela ordem */
@media (min-width:1101px) and (pointer:fine){
  .modal{z-index:95}
  .modal.modal-guarda{z-index:100000}
}
/* p264b · celular: as abas rolam de lado (antes ficavam cortadas e o "Financeiro" não aparecia) */
@media (max-width:800px){
  .fm-completo .abas-ficha{overflow-x:auto !important;overscroll-behavior-x:contain;scrollbar-width:none;max-width:100%}
  .fm-completo .abas-ficha::-webkit-scrollbar{display:none}
  .fm-completo .abas-ficha .aba-ficha{flex:0 0 auto}
  .fm-mais .botao{min-height:44px;padding:6px 10px;font-size:14px}
}
/* p264b · a faixa das abas, presa no topo, cobre a fresta de cima (o conteúdo aparecia por trás) */
.caixa.fm-os .fm-completo .abas-ficha,.caixa.fm-os.fm-completo .abas-ficha{box-shadow:0 -28px 0 var(--fm-fundo,#f4f4f1)}

/* ===================== p267 · ficha da OS: trilha de etapas, ação principal, grupos ===================== */
.fm-topo{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.fm-trilha{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fm-et{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;border:1.5px solid var(--cm-bd,#d9d9d2);color:#5a5a56;background:#fff;line-height:1.2}
.fm-et.feito{background:var(--cm-cl,#CDE9AC);border-color:var(--cm-lm,#ADDA7C);color:var(--cm-gf,#212121)}
.fm-et.atual{background:var(--cm-gf,#212121);border-color:var(--cm-gf,#212121);color:#fff}
.fm-acao{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fm-acao:empty{display:none}
.fm-prim{background:var(--cm-gf,#212121) !important;border-color:var(--cm-gf,#212121) !important;color:#fff !important;min-height:48px;padding:0 22px !important;font-size:16px !important;font-weight:700;border-radius:14px !important}
.fm-prim:hover{background:var(--cm-gf2,#343434) !important}
.fm-prim:focus-visible,.fm-sec:focus-visible,.fm-grp .botao:focus-visible{outline:3px solid var(--cm-vd,#578927);outline-offset:2px}
.fm-sec{min-height:44px;font-weight:600}
.fm-dica{font-size:13.5px;color:var(--cm-tx,#3f6b1a);background:var(--cm-suave,#F3F9EA);border:1px solid var(--cm-lm,#ADDA7C);border-radius:12px;padding:8px 12px;max-width:640px}
.fm-topo-l2{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fm-sit-rot{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5a5a56}
.fm-sit-rot select{text-transform:none;letter-spacing:0;min-height:40px;font-size:14px}
.fm-mais{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.fm-grp{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.fm-grp-rot{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5a5a56;min-width:64px}
.fm-grp .botao{min-height:38px;font-size:13.5px;padding:7px 14px;background:#fff !important;border:1.5px solid var(--cm-bd,#d9d9d2) !important;color:var(--cm-gf,#212121) !important;font-weight:600}
.fm-grp .botao:hover{border-color:var(--cm-gf,#212121) !important}
.fm-grp:has(> .fm-grp-rot:only-child){display:none}
.fm-selos{display:flex;flex-wrap:wrap;gap:6px}
.fm-selos:empty{display:none}
.fm-oculto{display:none !important}
.fm-prim-pe{display:none}
/* contraste: verde com texto branco passa a ser o verde escuro do tema (6,3:1) */
.botao.verde{background:var(--cm-tx,#3f6b1a);border-color:var(--cm-tx,#3f6b1a);color:#fff}
.botao.verde:hover{background:#345a15}
/* salvar por bloco: só aparece quando o bloco mudou */
.caixa.fm-salvar-mudou [data-salvar-parte]:not(.mudou){display:none}
.caixa.fm-salvar-mudou [data-salvar-parte].mudou{background:var(--cm-gf,#212121) !important;color:#fff !important;border-color:var(--cm-gf,#212121) !important;min-height:36px;font-weight:700}
/* checklist da ficha igual ao da Nova OS: alvo maior, contraste, ✓ ✕ */
.caixa.fm-os .seg-grupo{display:inline-flex;border:1.5px solid #64748b;border-radius:10px;overflow:hidden;background:#fff;gap:0}
.caixa.fm-os .seg-chk{height:36px;min-height:36px;border:0 !important;border-left:1px solid #64748b !important;border-radius:0 !important;background:#fff !important;color:#334155 !important;font-size:12.5px !important;font-weight:600 !important;padding:0 10px !important;justify-content:center}
.caixa.fm-os .seg-chk:first-child{border-left:0 !important}
.caixa.fm-os .seg-chk .bola{display:none !important}
.caixa.fm-os .seg-chk.ok.at{background:var(--cm-tx,#3f6b1a) !important;color:#fff !important;font-weight:800 !important}
.caixa.fm-os .seg-chk.def.at{background:#b91c1c !important;color:#fff !important;font-weight:800 !important}
.caixa.fm-os .seg-chk.nt.at{background:#475569 !important;color:#fff !important;font-weight:800 !important}
.caixa.fm-os .seg-chk.ok.at::before{content:'✓ '}
.caixa.fm-os .seg-chk.def.at::before{content:'✕ '}
.caixa.fm-os .seg-chk:focus-visible{outline:3px solid var(--cm-vd,#578927);outline-offset:-3px}
.caixa.fm-os .linha-chk:has(.seg-chk.def.at){background:#fef2f2}
@media (max-width:800px){
  .fm-trilha{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .fm-trilha::-webkit-scrollbar{display:none}
  .fm-et{flex:0 0 auto}
  .fm-et:not(.atual):not(:has(+ .atual)):not(.atual + .fm-et){display:none}
  .fm-acao .fm-prim{display:none}
  .fm-acao .fm-sec{flex:1 1 100%}
  .fm-grp .botao{flex:1 1 calc(50% - 8px);justify-content:center;min-height:44px}
  .fm-grp-rot{flex:1 1 100%}
  .caixa.fm-os > .pe .fm-prim-pe{display:flex;flex:1 1 100%;justify-content:center;order:-1}
  .caixa.fm-os > .pe [data-btn-encerrar-rodape]{display:none !important}
  .caixa.fm-os .seg-chk{height:44px;min-height:44px}
}
.fm-grp .botao{font-size:13.5px !important;min-height:38px !important;padding:7px 14px !important}
.fm-topo-l2:empty{display:none}
@media (max-width:800px){.fm-grp .botao{min-height:44px !important}}
/* p267 · faixa das abas: a sombra que cobre a fresta só cobre a própria margem (não esconde a linha "Para encerrar falta") */
.caixa.fm-os .fm-completo .abas-ficha,.caixa.fm-os.fm-completo .abas-ficha{margin-top:20px;box-shadow:0 -20px 0 var(--fm-fundo,#f4f4f1)}
.fm-topo,.fm-topo > *,.fm-mais{min-width:0;max-width:100%}
@media (max-width:800px){
  .fm-dica{max-width:100%;flex:1 1 100%;white-space:normal}
  .fm-topo-l2{flex-direction:column;align-items:stretch;gap:8px}
  .fm-sit-rot{flex-direction:column;align-items:stretch;gap:4px}
  .fm-sit-rot select{width:100%;max-width:100%}
  .fm-topo-l2 .fm-esp{display:none}
}
.fm-sit-rot select{min-width:0 !important;max-width:100% !important}
@media (max-width:800px){.fm-sit-rot select{width:100% !important}}
.fm-grp{overflow:visible !important}
.fm-grp-rot{padding-left:1px}

/* ===== p273 · ficha por etapa (paleta Casa do Mac: --cm-*) ===== */
.fm-chips-topo{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.fm-ctopo{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;border-radius:999px;border:1.5px solid var(--cm-bd,#d9d9d2);background:#fff;font-size:13.5px;font-weight:600;color:var(--cm-gf,#212121);white-space:nowrap}
.fm-ctopo.alerta{background:var(--ambar-tenue,#fdf3e1);border-color:var(--ambar,#d97706);color:#7c3d06}
.fm-mais-wrap{position:relative;display:inline-flex}
.fm-bmais2[aria-expanded="true"]{border-color:var(--cm-gf,#212121) !important;background:var(--cm-suave,#F3F9EA) !important}
.fm-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:70;background:#fff;border:1.5px solid var(--cm-bd,#d9d9d2);border-radius:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.28);padding:14px;width:min(600px,92vw);display:flex;flex-direction:column;gap:12px}
.fm-pop[hidden]{display:none !important}
.fm-pop .fm-grp{align-items:flex-start}
.fm-sep{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5a5a56;margin:4px 4px 10px}
.fm-sep-agora{color:var(--cm-tx,#3f6b1a)}
.fm-sep:not(.fm-sep-agora){margin-top:22px}
.fm-blocado .fm-sep{display:none}
.fm-completo .fm-painel.fm-rec > :not(.fm-tit){display:none !important}
.fm-completo .fm-painel.fm-rec{background:#fff;border-radius:14px;padding:10px 16px;margin-bottom:10px !important;border:1.5px solid transparent}
.fm-completo .fm-painel.fm-rec:hover{border-color:var(--cm-bd,#d9d9d2)}
.fm-completo .fm-painel.fm-rec > .fm-tit{margin:0;cursor:pointer;min-height:44px}
.fm-completo .fm-painel.fm-rec > .fm-tit h3{font-size:16px;white-space:nowrap}
.fm-completo .fm-painel > .fm-tit[role="button"]{cursor:pointer}
.fm-completo .fm-painel > .fm-tit[role="button"]:focus-visible{outline:3px solid var(--cm-vd,#578927);outline-offset:2px;border-radius:10px}
.fm-rec-res{flex:1;min-width:0;color:#5a5a56;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-rec-v{font-weight:700;font-size:14px;white-space:nowrap;color:#5a5a56}.fm-rec-v.r{color:var(--fm-verm,#d70015)}.fm-rec-v.g{color:var(--cm-tx,#3f6b1a)}
.fm-rec-ab{color:var(--cm-tx,#3f6b1a);font-weight:700;font-size:13.5px;white-space:nowrap}
.fm-completo .fm-painel:not(.fm-rec) .fm-rec-res,.fm-completo .fm-painel:not(.fm-rec) .fm-rec-v{display:none}
.fm-blocado .fm-rec-res,.fm-blocado .fm-rec-v,.fm-blocado .fm-rec-ab{display:none}
.fm-pend-card .fm-rot{display:block;margin-bottom:8px}
.fm-pend-card .fm-pend-l{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.fm-pend-card .fm-chip{text-align:left;width:100%}
.fm-pend-card .fm-selos{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.fm-nao-salvo{font-weight:700;color:#7c3d06;font-size:14px;margin-right:auto}
.fm-nao-salvo:empty{display:none}
.caixa.fm-os > .pe .fm-salvo{margin-right:auto;align-self:center}
.caixa.fm-os > .pe:has(.fm-nao-salvo:not(:empty)) .fm-salvo{display:none}
.fm-completo .fm-painel.fm-sujo{outline:2px solid var(--ambar,#d97706);outline-offset:4px;border-radius:16px}
.fm-gt-agora{color:var(--cm-tx,#3f6b1a) !important;font-weight:700 !important}
@media (max-width:800px){
  .fm-pop{position:fixed;left:8px;right:8px;top:auto;bottom:84px;width:auto;max-height:70vh;overflow:auto}
  .fm-chips-topo{width:100%}
  .fm-mais-wrap{flex:1 1 100%}.fm-mais-wrap .fm-bmais2{width:100%;justify-content:center}
  .fm-nao-salvo{flex:1 1 100%;font-size:13px}
  .caixa.fm-os > .pe .fm-salvo{display:none}
}
.fm-p273 .abas-ficha .aba-ficha{padding-left:11px !important;padding-right:11px !important}
.fm-pend-card .fm-selos > *{max-width:100%;white-space:normal;box-sizing:border-box}

/* ===== p276 · página única da OS (modelo GestãoClick) — mesma paleta --cm-* ===== */
.fm-p276.fm-completo .fm-sep,.fm-p276.fm-completo .fm-rec-res,.fm-p276.fm-completo .fm-rec-v,.fm-p276.fm-completo .fm-rec-ab{display:none !important}
.fm-p276.fm-completo .fm-painel > .fm-tit{cursor:default}
.fm-p276.fm-completo .fm-painel > .fm-tit h3{font-size:18px}
.fm-p276.fm-completo .fm-resumo .fm-bpag,.fm-p276.fm-completo .fm-resumo .fm-bsinal{display:none}
.p276-gaveta{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--papel,#fff);border-left:1px solid var(--borda,#e5e5e0);
  box-shadow:-14px 0 34px rgba(0,0,0,.16);z-index:60;overflow:auto;padding:0 16px 28px}
.p276-gaveta[hidden]{display:none}
.p276-gaveta .fm-painel{display:block !important;margin:0}
.p276-gaveta .fm-painel > .fm-tit{display:none}
.p276-gav-cab{position:sticky;top:0;z-index:2;background:var(--papel,#fff);display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--borda,#e5e5e0);margin-bottom:10px}
.p276-gav-cab h3{margin:0;flex:1;font-size:18px}
.p276-gav-cab .botao{min-height:44px}
.p276-pag{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;padding:14px 16px;border:1px solid var(--cm-bd,#d9d9d2);border-radius:12px;margin:0 0 14px;background:var(--cm-suave,#F3F9EA)}
.p276-pag-v small{display:block;font-size:12px;color:var(--tinta-2,#5a5a56)}
.p276-pag-v b{font-size:26px;font-family:var(--cm-fonte-t,inherit);line-height:1.1}
.p276-pag-r{font-size:14px}.p276-pag-r .g{color:var(--cm-tx,#3f6b1a)}
.p276-pag .botao{min-height:44px}
.p276-pag [data-p276-receber]{background:var(--cm-gf,#212121);color:#fff;border-color:var(--cm-gf,#212121)}
.p276-pe-tot{margin-left:auto;text-align:right;line-height:1.1;padding:0 6px}
.p276-pe-tot small{display:block;font-size:12px;color:var(--tinta-2,#5a5a56)}
.p276-pe-tot b{font-size:20px;font-family:var(--cm-fonte-t,inherit);white-space:nowrap}
@media (max-width:800px){.p276-pag-v b{font-size:22px}.p276-pag .botao{flex:1 1 140px;justify-content:center}.p276-pe-tot b{font-size:17px}.p276-pe-tot small{font-size:11px}}
.p276-ass{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 4px;padding:12px 14px;border:1px dashed var(--cm-bd,#d9d9d2);border-radius:12px;font-size:14px}
.p276-ass .botao{min-height:44px}
.fm-blocado .p276-pe-enc,.fm-blocado .p276-pe-tot{display:none}
.p276-pe-enc{min-height:44px}

/* p277 · nada se perde: erro com Corrigir, sessão, fechar, rascunho */
.recado.p277-erro{display:flex;flex-direction:column;gap:10px;max-width:440px;padding:14px 16px;transition:bottom .2s}
.p277-txt{line-height:1.4}
.p277-bts{display:flex;gap:8px;justify-content:flex-end}
.p277-corrigir{background:#fff;color:#000;border:0;border-radius:10px;padding:0 16px;min-height:40px;font-weight:700;cursor:pointer}
.p277-x{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:10px;min-width:40px;min-height:40px;font-size:18px;cursor:pointer}
.p277-alvo{outline:3px solid var(--cm-lm,#ADDA7C)!important;outline-offset:3px;border-radius:8px;box-shadow:0 0 0 6px rgba(173,218,124,.35)!important;transition:outline .2s}
.p277-relogin,.p277-conf{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100002;display:grid;place-items:center;padding:16px}
.p277-rl-caixa,.p277-conf-caixa{background:var(--papel,#fff);color:var(--tinta,#000);border-radius:14px;padding:20px 22px;width:min(420px,100%);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.p277-rl-caixa h2{margin:0 0 6px;font-size:20px}
.p277-rl-caixa p,.p277-conf-caixa p{margin:6px 0 12px;color:var(--tinta-2,#5a5a56);font-size:14px}
.p277-conf-caixa b{font-size:17px}
.p277-rl-msg{color:var(--vermelho,#b42318);font-size:13px;min-height:18px}
.p277-rl-bts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.p277-rl-bts .botao{min-height:44px}
.p277-rasc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--cm-suave,#F3F9EA);border:1px solid var(--cm-lm,#ADDA7C);border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:14px}
.p277-rasc span{flex:1;min-width:200px}

/* ===== p294 · 17/10/2026 · ficha da OS centralizada e responsiva (pedido do Gilson) =====
   1) A tela usa zoom em monitor grande (html zoom 1.25 a partir de 2400 px e 1.6 a partir de 3200 px).
      Com zoom, 100vw/100dvh ficam MULTIPLICADOS: a ficha passava da tela pela direita e por baixo
      e a rolagem não chegava ao fim ("não consigo rolar no modo blocado"). --z desfaz isso.
   2) Volta a ficha "no meio", como era: largura adaptativa até 1600 px (1268 a 1920 na prática),
      altura da tela, cantos arredondados. Celular e tablet (até 900 px) continuam tela cheia.
   3) Lista de blocos: o texto de baixo (defeito, equipamento, conversa) não invade mais o painel
      da direita: corta com "…" dentro da própria linha. */
:root{--z:1}
@media (min-width:2400px){:root{--z:1.25}}
@media (min-width:3200px){:root{--z:1.6}}
@media (min-width:901px){
  .modal:has(> .caixa.fm-os){padding:calc(16px / var(--z)) 0 !important;place-items:center !important;overflow:hidden !important}
  .modal .caixa.fm-os,.modal .caixa.fm-os.ficha-larga{
    width:min(1600px, calc(100vw / var(--z) - 48px)) !important;max-width:none !important;min-width:0 !important;
    height:calc(100dvh / var(--z) - 32px) !important;max-height:calc(100dvh / var(--z) - 32px) !important;
    border-radius:16px !important;margin:0 auto !important;box-shadow:var(--sombra-alta) !important;overflow:hidden !important}
  .caixa.fm-os > .corpo{min-height:0 !important}
  .fm-blocado .fm-secoes{grid-template-columns:320px minmax(0,1fr) !important}
}
@media (max-width:900px){
  .modal .caixa.fm-os,.modal .caixa.fm-os.ficha-larga{height:100dvh !important;max-height:100dvh !important}
}
.fm-lista,.fm-grp{min-width:0;max-width:100%;overflow:hidden}
.fm-row{min-width:0;max-width:100%}
.fm-l{min-width:0 !important;overflow:hidden}
.fm-l small{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100%}
.fm-centro{min-width:0}

/* p325 · celular: só a janela de cima aparece (a ficha não vaza por cima do aviso) e sem o desfoque que pisca no Android */
@media (max-width:1100px), (pointer:coarse){
  body > .modal.modal-por-baixo, body > .modal.modal-por-baixo *{ visibility:hidden !important; }
  .modal{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* p338 · Mequinho (assistente de IA) — usa as cores do sistema, sem paleta nova */
.meq-bolha{position:fixed;right:14px;bottom:112px;z-index:100005;width:58px;height:58px;border-radius:50%;padding:0;border:2px solid var(--acento);
  background:var(--papel,#fff);box-shadow:0 6px 18px rgb(0 0 0 / 22%);cursor:pointer;display:grid;place-items:center;transition:transform .12s}
.meq-bolha:hover{transform:scale(1.06)}
.meq-bolha:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.meq-bolha[hidden],.mequinho-painel[hidden]{display:none!important}
.meq-avatar{border-radius:50%;object-fit:contain;background:#fff;display:block}
.meq-selo{position:absolute;right:-4px;top:-4px;background:var(--acento);color:var(--acento-tinta);font:700 10.5px/1 system-ui;padding:3px 5px;border-radius:8px;border:1.5px solid var(--papel,#fff)}
.mequinho-painel{position:fixed;right:14px;bottom:14px;z-index:100006;width:min(420px,calc(100vw - 28px));height:min(640px,calc(100vh - 28px));
  background:var(--papel,#fff);color:var(--tinta);border:1px solid var(--borda-forte,#ccc);border-radius:18px;box-shadow:0 18px 50px rgb(0 0 0 / 30%);
  display:flex;flex-direction:column;overflow:hidden}
.meq-cab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--borda,#e5e5e5);background:var(--cm-gf,#212121);color:#f8fafc}
.meq-tit{flex:1;display:flex;flex-direction:column;line-height:1.15}
.meq-tit b{font-size:16px}.meq-tit small{font-size:12px;opacity:.8}
.meq-fechar{background:transparent;border:0;color:inherit;font-size:20px;cursor:pointer;width:40px;height:40px;border-radius:10px}
.meq-fechar:hover{background:rgb(255 255 255 / 12%)}
.meq-lista{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.meq-msg-linha{display:flex;gap:8px;align-items:flex-end}
.meq-l-eu{justify-content:flex-end}
.meq-msg{max-width:86%;padding:10px 12px;border-radius:14px;font-size:14.5px;line-height:1.45;word-wrap:break-word}
.meq-l-ia .meq-msg{background:var(--fundo,#f3f4f6);border:1px solid var(--borda,#e5e5e5);border-bottom-left-radius:4px}
.meq-l-eu .meq-msg{background:var(--acento);color:var(--acento-tinta);border-bottom-right-radius:4px}
.meq-pensando{opacity:.75;font-style:italic}
.meq-pensando::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:meq-pontos 1.2s steps(4) infinite}
@keyframes meq-pontos{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.meq-chips,.meq-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.meq-chip,.meq-acao{border:1px solid var(--borda-forte,#ccc);background:var(--papel,#fff);color:var(--tinta);border-radius:999px;padding:8px 12px;font-size:13px;cursor:pointer;min-height:36px}
.meq-chip:hover,.meq-acao:hover{border-color:var(--tinta)}
.meq-acao-forte{background:var(--tinta);color:var(--papel,#fff);border-color:var(--tinta)}
.meq-pe{border-top:1px solid var(--borda,#e5e5e5);padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.meq-ctx{font-size:12px;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meq-linha{display:flex;gap:8px;align-items:flex-end}
.meq-campo{flex:1;resize:none;min-height:44px;max-height:140px;font-size:14.5px;border-radius:12px;padding:10px}
.meq-enviar{min-height:44px}
.meq-chamado{margin-top:10px}.meq-chamado .meq-campo{width:100%;box-sizing:border-box}
.meq-ok{margin-top:8px;font-weight:600}
.meq-link{align-self:flex-start;background:none;border:0;color:var(--tinta-2,#444);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:4px 0}
@media (max-width:700px){
  .meq-bolha{right:10px;bottom:84px;width:52px;height:52px}
  .mequinho-painel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}
}
@media print{.meq-bolha,.mequinho-painel{display:none!important}}

/* p354 · lista de OS: os botões de ação nunca ficam escondidos (se a coluna estreitar, quebram para a linha de baixo) */
.rolagem > table.lista-os .acoes-linha{flex-wrap:wrap;row-gap:4px}
/* p354 · Mequinho no canto inferior ESQUERDO: no direito cobria os botões da lista e o "Salvar" das fichas */
.meq-bolha{right:auto;left:14px;bottom:14px}
.mequinho-painel{right:auto;left:14px}
@media (max-width:700px){ .meq-bolha{left:10px;right:auto;bottom:14px} .mequinho-painel{left:0} }

/* p354b · a regra antiga "th.acoes-th{width:122px !important}" vencia tudo e escondia o ▾ */
@media (min-width:761px){
  .rolagem > table.lista-os.lista-os th.acoes-th, .rolagem > table.lista-os.lista-os td.acoes-td{width:176px !important;min-width:176px !important;max-width:none !important}
}

/* p393 · celular: quantidade compacta (1 · 2 · 3 · outra) e a compra da peça na linha inteira */
@media (max-width:760px){
  .tabela-itens-os td[data-rot="Compra"], .tabela-itens-os td.compra-peca{grid-column:1 / -1}
  .tabela-itens-os .so-orc-tag{white-space:normal !important;display:inline-block;max-width:100%;line-height:1.3}
  .tabela-itens-os .linha-compra{flex-wrap:wrap;gap:6px}
  .tabela-itens-os td[data-rot="Qtd"] .bd-qtd{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
  .tabela-itens-os td[data-rot="Qtd"] .bd-qtd input{width:56px !important;min-width:56px !important;flex:0 0 56px;text-align:center !important;padding:8px 4px !important}
  .bd-qtd button{flex:0 0 auto;min-width:36px;height:38px;border:1px solid var(--borda, #cbd5e1);background:#fff;border-radius:10px;font:600 14px system-ui,sans-serif;color:#334155;cursor:pointer;padding:0 8px}
  .bd-qtd button.on{background:var(--acento, #4f46e5);border-color:var(--acento, #4f46e5);color:#fff}
}