/* Reforma visual API_OS / HPR mobile
   Camada de apresentação: não altera regras, rotas ou origem dos dados. */
:root {
  --fundo-gradiente-1: rgba(37, 99, 235, 0.12);
  --fundo-gradiente-2: rgba(14, 165, 233, 0.10);
  --vidro: rgba(255, 255, 255, 0.76);
  --aviso: #b45309;
  --aviso-suave: rgba(245, 158, 11, 0.14);
  --sucesso-suave: rgba(16, 185, 129, 0.14);
  --erro-suave: rgba(239, 68, 68, 0.14);
}

:root[data-tema="escuro"] {
  --fundo-gradiente-1: rgba(96, 165, 250, 0.13);
  --fundo-gradiente-2: rgba(124, 58, 237, 0.12);
  --vidro: rgba(15, 23, 42, 0.74);
  --aviso: #fbbf24;
  --aviso-suave: rgba(251, 191, 36, 0.14);
  --sucesso-suave: rgba(52, 211, 153, 0.14);
  --erro-suave: rgba(248, 113, 113, 0.14);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--fundo-gradiente-1), transparent 34rem),
    radial-gradient(circle at top right, var(--fundo-gradiente-2), transparent 30rem),
    var(--fundo);
}

.marca-topo {
  display: grid;
  gap: 2px;
}

.marca-produto {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--primaria-borda);
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--primaria-suave);
  color: var(--primaria);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.topo-descricao {
  max-width: 520px;
  margin-top: 3px !important;
  font-size: 0.92rem;
}

.topo-app {
  align-items: center;
}

.topo-app h1 {
  letter-spacing: -0.04em;
}

.botao,
.botao-icone,
.botao-menu,
.menu-item,
.botao-tema,
.botao-filtro-produto,
.item-resultado,
.item-os-criada,
.item-consulta-produto {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.botao:hover,
.botao-icone:hover,
.botao-menu:hover,
.menu-item:hover,
.botao-tema:hover,
.item-resultado:hover,
.item-os-criada:hover,
.item-consulta-produto-clicavel:hover {
  transform: translateY(-1px);
}

.botao-primario {
  background: linear-gradient(135deg, var(--primaria), var(--primaria-escura));
  box-shadow: 0 14px 30px var(--primaria-foco);
}

.botao-secundario {
  border: 1px solid var(--primaria-borda);
}

.cartao,
.caixa-modal,
.caixa-modal-cadastro,
.menu-lateral {
  backdrop-filter: blur(14px);
}

.menu-lateral {
  overflow: hidden;
}

.menu-lateral::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--primaria), transparent);
}

.menu-lateral-topo {
  padding-top: 6px;
}

.menu-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
}

.menu-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: var(--bloco);
  color: var(--primaria);
  font-weight: 900;
  font-size: 1rem;
}

.menu-item.menu-item-ativo .menu-icone {
  background: var(--primaria);
  color: #fff;
}

.cartao-nova-os {
  padding: clamp(14px, 2vw, 24px);
  overflow: visible;
}

.hero-campo-os {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--primaria-borda);
  border-radius: calc(var(--raio) + 6px);
  padding: clamp(18px, 3vw, 30px);
  background:
    linear-gradient(135deg, var(--vidro), var(--cartao)),
    radial-gradient(circle at top right, var(--primaria-suave), transparent 18rem);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10);
}

.hero-campo-os::after {
  content: "";
  position: absolute;
  right: -76px;
  top: -92px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 38px solid var(--primaria-suave);
  opacity: 0.8;
}

.hero-campo-conteudo,
.hero-campo-status {
  position: relative;
  z-index: 1;
}

.hero-campo-conteudo h2 {
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 3rem);
  letter-spacing: -0.055em;
}

.hero-campo-conteudo p {
  max-width: 680px;
  line-height: 1.5;
}

.hero-campo-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.hero-campo-status article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 14px;
  background: var(--controle);
}

.hero-campo-status span,
.grade-revisao-os span,
.mini-resumo-orcamento span,
.barra-acao-os span,
.card-meta-os span {
  color: var(--texto-suave);
  font-size: 0.82rem;
  font-weight: 800;
}

.hero-campo-status strong {
  font-size: 1.02rem;
}

.hero-campo-status small {
  color: var(--texto-suave);
}

.etapas-os-nav {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--linha);
  border-radius: 22px;
  padding: 8px;
  background: color-mix(in srgb, var(--cartao) 86%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

.etapa-os-atalho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 10px 11px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 0.88rem;
  font-weight: 900;
  white-space: nowrap;
}

.etapa-os-atalho span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bloco);
  color: var(--texto-suave);
  font-size: 0.78rem;
}

.etapa-os-atalho.ativo,
.etapa-os-atalho:hover {
  border-color: var(--primaria-borda);
  background: var(--primaria-suave);
  color: var(--primaria);
}

.etapa-os-atalho.ativo span,
.etapa-os-atalho:hover span {
  background: var(--primaria);
  color: #fff;
}

.formulario-os-campo {
  padding-bottom: 92px;
}

.fluxo-os-campo {
  display: grid;
  gap: 16px;
}

.etapa-form-os {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--linha);
  border-radius: calc(var(--raio) + 2px);
  padding: clamp(15px, 2vw, 22px);
  background: linear-gradient(180deg, var(--cartao), var(--bloco));
  scroll-margin-top: 96px;
}

.etapa-form-os::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 70px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--primaria);
}

.etapa-form-os-compacta {
  background: var(--cartao);
}

.cabecalho-etapa-os {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}

.cabecalho-etapa-os h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: -0.035em;
}

.cabecalho-etapa-os span {
  display: block;
  margin-top: 4px;
  color: var(--texto-suave);
  line-height: 1.45;
}

.selo-etapa-os {
  white-space: nowrap;
  border: 1px solid var(--primaria-borda);
  border-radius: 999px;
  padding: 8px 11px;
  background: var(--primaria-suave);
  color: var(--primaria);
  font-size: 0.78rem;
}

.campo-servico-destaque textarea {
  min-height: 170px;
  font-size: 1rem;
  line-height: 1.55;
}

.campo-selecao {
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 10px;
  background: var(--controle);
}

.campo-selecao label input,
.etapa-form-os input,
.etapa-form-os textarea,
.etapa-form-os select {
  border-radius: 14px;
}

.bloco-orcamento-formulario-os {
  background:
    linear-gradient(180deg, var(--cartao), var(--bloco));
  border-radius: calc(var(--raio) + 2px);
}

.bloco-orcamento-formulario-os::before,
.etapa-evidencias-os::before,
.etapa-revisao-os::before {
  background: linear-gradient(90deg, var(--primaria), var(--primaria-escura));
}

.mini-resumo-orcamento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--primaria-borda);
  border-radius: 18px;
  padding: 14px;
  background: var(--primaria-suave);
}

.mini-resumo-orcamento strong {
  color: var(--primaria);
  font-size: 1.22rem;
}

.etapa-evidencias-os {
  background:
    radial-gradient(circle at top left, var(--primaria-suave), transparent 22rem),
    linear-gradient(180deg, var(--cartao), var(--bloco));
}

.bloco-fotos-os,
.bloco-video-os,
.bloco-video-orcamento,
.bloco-item-orcamento {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.grade-revisao-os {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.grade-revisao-os article {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 14px;
  background: var(--controle);
}

.grade-revisao-os strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.revisao-ampla {
  grid-column: span 2;
}

.timeline-revisao-os,
.timeline-card-os {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.timeline-revisao-os span,
.timeline-card-os span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--controle);
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.timeline-revisao-os span.ativo,
.timeline-card-os span.ativo {
  border-color: var(--primaria-borda);
  background: var(--primaria-suave);
  color: var(--primaria);
}

.barra-acao-os {
  position: sticky;
  bottom: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: -76px;
  border: 1px solid var(--primaria-borda);
  border-radius: 22px;
  padding: 12px;
  background: color-mix(in srgb, var(--cartao) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.16);
}

.barra-acao-os > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.barra-acao-os strong,
.barra-acao-os span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-acao-os .botao {
  flex: 0 0 auto;
  min-width: 118px;
}

/* Lista de OS com cara de painel operacional */
#area-os-criadas {
  background:
    radial-gradient(circle at top right, var(--primaria-suave), transparent 24rem),
    var(--cartao);
}

.item-os-criada {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: var(--controle);
}

.item-os-criada:hover {
  border-color: var(--primaria-borda);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
}

.item-os-criada.item-os-pendente {
  border-left: 5px solid var(--aviso);
}

.item-os-criada.item-os-sincronizada {
  border-left: 5px solid var(--sucesso);
}

.item-os-criada.item-os-bloqueada {
  border-left: 5px solid var(--texto-suave);
}

.item-os-topo strong {
  margin-bottom: 0;
  font-size: 1.05rem;
}

.card-meta-os {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.card-meta-os div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 10px;
  background: var(--bloco);
}

.card-meta-os strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.selo-status-bloqueada {
  background: rgba(148, 163, 184, 0.16);
  color: var(--texto-suave);
}

.selo-status-pendente {
  background: var(--aviso-suave);
  color: var(--aviso);
}

.selo-status-sincronizada {
  background: var(--sucesso-suave);
  color: var(--sucesso);
}

@media (max-width: 1080px) {
  .hero-campo-os {
    grid-template-columns: 1fr;
  }

  .hero-campo-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .etapas-os-nav {
    overflow-x: auto;
    grid-template-columns: repeat(5, max-content);
    justify-content: start;
  }

  .grade-revisao-os {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    padding: 12px 10px 20px;
  }

  .topo-app {
    align-items: flex-start;
  }

  .topo-descricao {
    display: none;
  }

  .hero-campo-os {
    padding: 17px;
    border-radius: 22px;
  }

  .hero-campo-status {
    grid-template-columns: 1fr;
  }

  .etapas-os-nav {
    top: 6px;
    border-radius: 18px;
  }

  .etapa-os-atalho {
    padding: 9px 10px;
    font-size: 0.82rem;
  }

  .cabecalho-etapa-os {
    align-items: stretch;
    flex-direction: column;
  }

  .selo-etapa-os {
    width: fit-content;
  }

  .grade-revisao-os,
  .timeline-revisao-os,
  .timeline-card-os,
  .card-meta-os {
    grid-template-columns: 1fr;
  }

  .revisao-ampla {
    grid-column: auto;
  }

  .barra-acao-os {
    align-items: stretch;
    flex-direction: column;
    margin-top: -70px;
  }

  .barra-acao-os .botao {
    width: 100%;
  }

  .formulario-os-campo {
    padding-bottom: 132px;
  }

  .acoes-form-os .botao {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .marca-produto {
    display: none;
  }

  .hero-campo-conteudo h2 {
    font-size: 1.7rem;
  }

  .cartao-nova-os {
    padding: 10px;
  }

  .etapa-form-os {
    padding: 14px;
    border-radius: 18px;
  }
}


/* Patch responsivo v2: fluxo guiado + mobile de verdade */
:root {
  --altura-topo-mobile: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primaria) 10%, transparent), transparent 28rem),
    radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--primaria-escura) 8%, transparent), transparent 30rem),
    var(--fundo);
}

.mobile-app-nav {
  display: none;
}

.cartao-nova-os {
  overflow: visible;
}

.workspace-os-campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: 18px;
  align-items: start;
}

.fluxo-os-campo {
  min-width: 0;
}

.painel-contexto-os {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  min-width: 0;
  align-self: start;
}

.painel-contexto-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--linha);
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--cartao) 86%, var(--bloco));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.painel-contexto-principal {
  background:
    radial-gradient(circle at top right, var(--primaria-suave), transparent 16rem),
    linear-gradient(180deg, var(--cartao), var(--bloco));
  border-color: var(--primaria-borda);
}

.painel-contexto-card h3,
.painel-contexto-card p {
  margin: 0;
}

.painel-contexto-card p {
  color: var(--texto-suave);
  line-height: 1.45;
}

.painel-contexto-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.resumo-lateral-os {
  display: grid;
  gap: 9px;
  margin: 0;
}

.resumo-lateral-os div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 10px;
  background: var(--controle);
}

.resumo-lateral-os dt {
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.resumo-lateral-os dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
  line-height: 1.25;
}

.lista-pendencias-os {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-pendencias-os li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-suave);
  font-size: 0.92rem;
}

.lista-pendencias-os li::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--aviso, #b45309);
}

.lista-pendencias-os li.concluido {
  color: var(--sucesso);
}

.lista-pendencias-os li.concluido::before {
  background: var(--sucesso);
}

.chips-evidencias-os {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips-evidencias-os span {
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 8px 10px;
  background: var(--controle);
  color: var(--texto-suave);
  font-size: 0.82rem;
  font-weight: 900;
}

.medidor-prontidao-os {
  display: grid;
  gap: 8px;
}

.medidor-prontidao-os strong {
  color: var(--primaria);
  font-size: 1.5rem;
  line-height: 1;
}

.medidor-prontidao-os div,
.trilho-progresso-etapas-os {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bloco);
}

.medidor-prontidao-os i,
.trilho-progresso-etapas-os i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primaria), var(--primaria-escura));
  transition: width 0.22s ease;
}

.progresso-etapas-os {
  display: none;
}

.etapa-os-atalho.concluido span {
  background: var(--sucesso);
  color: #fff;
}

.etapa-os-atalho.concluido:not(.ativo) {
  color: var(--sucesso);
}

.etapa-form-os {
  isolation: isolate;
}

.etapa-form-os::after {
  content: attr(data-titulo-mobile);
  display: none;
}

.campo-selecao,
.bloco-item-orcamento,
.bloco-fotos-os,
.bloco-video-os,
.bloco-video-orcamento,
.grade-revisao-os article,
.item-os-criada,
.item-consulta-produto {
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.campo-selecao:focus-within,
.bloco-item-orcamento:focus-within,
.bloco-fotos-os:focus-within,
.bloco-video-os:focus-within,
.bloco-video-orcamento:focus-within,
.grade-revisao-os article:hover {
  border-color: var(--primaria-borda);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.linha-busca-produto-orcamento {
  align-items: stretch;
}

.linha-busca-produto-orcamento .botao,
#botao-adicionar-item-orcamento,
#botao-remover-video-orcamento,
.acoes-video-os .botao {
  min-height: 48px;
}

@media (min-width: 1260px) {
  .app-shell {
    width: min(100%, 1420px);
  }

  .layout-aplicativo {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .hero-campo-os {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  }
}

@media (max-width: 1180px) {
  .workspace-os-campo {
    grid-template-columns: 1fr;
  }

  .painel-contexto-os {
    position: relative;
    top: auto;
    order: -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .painel-contexto-principal {
    grid-column: 1 / -1;
  }

  .resumo-lateral-os {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .menu-lateral {
    width: min(88vw, 340px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .cartao-nova-os {
    padding: 14px;
  }

  .painel-contexto-os {
    grid-template-columns: 1fr;
  }

  .resumo-lateral-os {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grade-busca-orcamento-formulario,
  .grade-orcamento-itens,
  .totais-orcamento-os,
  .grade-dupla {
    grid-template-columns: 1fr 1fr;
  }

  .grade-orcamento-itens .campo-orcamento-descricao,
  .grade-busca-orcamento-formulario .campo:nth-child(2) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 88px;
  }

  body {
    padding: 10px 8px calc(118px + var(--safe-bottom));
  }

  input,
  textarea,
  select {
    min-height: 48px;
    font-size: 16px;
  }

  textarea {
    min-height: 132px;
  }

  .app-shell {
    width: 100%;
  }

  .topo-app {
    position: sticky;
    top: 0;
    z-index: 22;
    align-items: center;
    margin: -10px -8px 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
    border-bottom: 1px solid var(--linha);
    background: color-mix(in srgb, var(--fundo) 88%, transparent);
    backdrop-filter: blur(18px);
  }

  .topo-app h1 {
    font-size: 1.05rem;
  }

  .topo-app p,
  .marca-produto,
  .topo-descricao {
    display: none;
  }

  #botao-sair {
    min-height: 42px;
    padding: 10px 12px;
  }

  .conteudo-principal,
  .conteudo-aplicativo {
    gap: 10px;
  }

  .cartao,
  .caixa-modal,
  .caixa-modal-cadastro {
    border-radius: 20px;
    padding: 14px;
  }

  .hero-campo-os {
    gap: 12px;
    padding: 16px;
  }

  .hero-campo-conteudo h2 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .hero-campo-status {
    display: none;
  }

  .etapas-os-nav {
    position: sticky;
    top: 67px;
    z-index: 18;
    display: flex;
    gap: 8px;
    margin: 0 -4px;
    padding: 8px 4px;
    overflow-x: auto;
    border: none;
    border-radius: 0;
    background: color-mix(in srgb, var(--fundo) 88%, transparent);
    backdrop-filter: blur(16px);
    scrollbar-width: none;
  }

  .etapas-os-nav::-webkit-scrollbar {
    display: none;
  }

  .etapa-os-atalho {
    min-width: max-content;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--cartao);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  }

  .progresso-etapas-os {
    position: sticky;
    top: 120px;
    z-index: 17;
    display: grid;
    gap: 8px;
    margin: 0 -2px 10px;
    border: 1px solid var(--linha);
    border-radius: 18px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--cartao) 90%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  }

  .progresso-etapas-os > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .progresso-etapas-os span {
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 800;
  }

  .progresso-etapas-os strong {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-os-campo,
  .painel-contexto-os,
  .fluxo-os-campo {
    gap: 12px;
  }

  .painel-contexto-os {
    order: -1;
  }

  .painel-contexto-card:not(.painel-contexto-principal):not(:has(.lista-pendencias-os)) {
    display: none;
  }

  .painel-contexto-principal {
    padding: 12px;
  }

  .painel-contexto-principal h3,
  .painel-contexto-principal p {
    display: none;
  }

  .medidor-prontidao-os {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .medidor-prontidao-os div {
    height: 8px;
  }

  .etapa-form-os {
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    scroll-margin-top: 178px;
  }

  .etapa-form-os::before {
    left: 14px;
    width: 56px;
  }

  .cabecalho-etapa-os {
    gap: 8px;
    padding-bottom: 10px;
  }

  .cabecalho-etapa-os h3 {
    font-size: 1.08rem;
  }

  .cabecalho-etapa-os span {
    font-size: 0.92rem;
  }

  .campo-selecao {
    grid-template-columns: 1fr;
    padding: 9px;
  }

  .acoes-selecao {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .acoes-selecao .botao-icone {
    width: 100%;
    height: 46px;
  }

  .grade-busca-orcamento-formulario,
  .grade-orcamento-itens,
  .totais-orcamento-os,
  .grade-dupla,
  .grade-revisao-os,
  .timeline-revisao-os,
  .timeline-card-os,
  .card-meta-os,
  .grade-detalhe-os {
    grid-template-columns: 1fr;
  }

  .linha-busca-produto-orcamento {
    display: grid;
    grid-template-columns: 1fr;
  }

  .linha-busca-produto-orcamento .botao,
  .acoes-form-os .botao,
  .acoes-detalhe-os .botao,
  #botao-adicionar-item-orcamento,
  #botao-remover-video-orcamento,
  .acoes-video-os .botao {
    width: 100%;
  }

  .titulo-editor-orcamento,
  .cabecalho-bloco-fotos-os,
  .cabecalho-bloco-video-os,
  .cabecalho-cartao,
  .item-os-topo,
  .acoes-detalhe-os {
    align-items: stretch;
    flex-direction: column;
  }

  .item-os-topo .selo-status {
    width: fit-content;
  }

  .mini-resumo-orcamento {
    position: sticky;
    bottom: calc(86px + var(--safe-bottom));
    z-index: 9;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  }

  .barra-acao-os {
    position: fixed;
    right: 8px;
    bottom: calc(72px + var(--safe-bottom));
    left: 8px;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: 0;
    padding: 10px;
    border-radius: 18px;
  }

  .barra-acao-os span {
    white-space: nowrap;
  }

  .barra-acao-os .botao {
    width: auto;
    min-width: 108px;
    min-height: 44px;
    padding: 10px 14px;
  }

  .formulario-os-campo {
    padding-bottom: 88px;
  }

  .mobile-app-nav {
    position: fixed;
    right: 8px;
    bottom: calc(8px + var(--safe-bottom));
    left: 8px;
    z-index: 31;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid var(--linha);
    border-radius: 22px;
    padding: 7px;
    background: color-mix(in srgb, var(--cartao) 90%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  }

  .mobile-nav-item {
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 50px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 900;
  }

  .mobile-nav-item span {
    font-size: 1rem;
    line-height: 1;
  }

  .mobile-nav-item.menu-item-ativo {
    border-color: var(--primaria-borda);
    background: var(--primaria-suave);
    color: var(--primaria);
  }

  .modal-busca,
  .modal-cadastro {
    width: 100dvw;
    max-width: 100dvw;
    max-height: 100dvh;
  }

  .modal-busca[open],
  .modal-cadastro[open] {
    margin: auto 0 0;
  }

  .caixa-modal,
  .caixa-modal-cadastro {
    max-height: calc(100dvh - 16px);
    overflow: auto;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(18px + var(--safe-bottom));
  }

  .lista-resultados {
    max-height: 56dvh;
  }

  .cadastro-iframe {
    height: min(78dvh, 720px);
  }
}

@media (max-width: 480px) {
  body {
    padding-inline: 6px;
  }

  .cartao-nova-os {
    padding: 10px;
  }

  .hero-campo-os {
    border-radius: 18px;
  }

  .etapa-os-atalho {
    font-size: 0.78rem;
  }

  .etapa-os-atalho span {
    width: 22px;
    height: 22px;
  }

  .progresso-etapas-os > div:first-child {
    align-items: start;
    flex-direction: column;
  }

  .barra-acao-os {
    grid-template-columns: 1fr;
  }

  .barra-acao-os .botao {
    width: 100%;
  }

  .mobile-nav-item strong {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@supports not selector(:has(*)) {
  @media (max-width: 760px) {
    .painel-contexto-card:not(.painel-contexto-principal) {
      display: grid;
    }
  }
}

/* Fluxo simplificado da abertura de OS */
.dados-internos-os,
.etapa-inativa-os {
  display: none !important;
}

.cartao-nova-os .hero-campo-os {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 18px 20px;
}

.cartao-nova-os .hero-campo-os::after {
  opacity: 0.35;
}

.etapas-os-nav {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  position: relative;
  top: auto;
  margin-bottom: 10px;
}

.progresso-etapas-os {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--controle);
}

.progresso-etapas-os > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.progresso-etapas-os span {
  color: var(--texto-suave);
  font-size: 0.8rem;
  font-weight: 800;
}

.workspace-os-campo {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
}

.fluxo-os-campo {
  min-height: 420px;
}

.etapa-form-os:not(.etapa-inativa-os) {
  animation: entrada-etapa-os 0.18s ease-out;
}

@keyframes entrada-etapa-os {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.campo-selecao input:disabled,
.etapa-form-os input:disabled,
.etapa-form-os textarea:disabled,
.etapa-form-os select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.campo-invalido-os {
  border-color: var(--erro, #dc2626) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erro, #dc2626) 14%, transparent) !important;
}

.campo-invalido-os input,
.campo-invalido-os textarea,
.campo-invalido-os select {
  border-color: var(--erro, #dc2626) !important;
}

.campo-km-os small,
.campo-servico-destaque small,
.campo-selecao small {
  display: block;
  margin-top: 6px;
  color: var(--texto-suave);
  line-height: 1.35;
}

.painel-contexto-os {
  top: 12px;
}

.painel-contexto-card.painel-contexto-principal {
  gap: 14px;
}

.etapa-revisao-os .acoes-form-os #botao-salvar-os {
  display: none;
}

.barra-acao-os {
  margin-top: -68px;
}

.barra-acao-os-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.barra-acao-os-botoes {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.barra-acao-os-botoes .botao {
  min-width: 108px;
}

body:not([data-modo-formulario-os="edicao"]) .somente-edicao-os {
  display: none !important;
}

@media (max-width: 1180px) {
  .workspace-os-campo {
    grid-template-columns: 1fr;
  }

  .painel-contexto-os {
    order: 1;
  }
}

@media (max-width: 760px) {
  .etapas-os-nav {
    position: sticky;
    top: 67px;
    display: flex;
  }

  .progresso-etapas-os {
    top: 120px;
  }

  .painel-contexto-os {
    order: 1;
  }

  .fluxo-os-campo {
    min-height: auto;
  }

  .barra-acao-os {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .barra-acao-os-botoes {
    gap: 6px;
  }

  .barra-acao-os-botoes .botao {
    min-width: 92px;
    padding-inline: 12px;
  }
}

@media (max-width: 520px) {
  .barra-acao-os {
    grid-template-columns: 1fr;
  }

  .barra-acao-os-texto span {
    white-space: normal;
  }

  .barra-acao-os-botoes {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr);
  }

  .barra-acao-os-botoes .botao {
    width: 100%;
  }
}

/* Fluxo operacional mobile: foco na abertura da OS */
.caixa-modal-os-criada {
  width: min(560px, calc(100vw - 24px));
}

.resumo-os-criada {
  display: grid;
  gap: 4px;
  border: 1px solid var(--primaria-borda);
  border-radius: 18px;
  padding: 16px;
  background: var(--primaria-suave);
}

.resumo-os-criada strong {
  color: var(--primaria);
  font-size: 1.15rem;
}

.resumo-os-criada span,
.texto-ajuda-os-criada {
  color: var(--texto-suave);
  line-height: 1.45;
}

.acoes-os-criada {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

#botao-completar-orcamento-os-criada {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  body[data-area-aplicativo="nova-os"] {
    padding-bottom: calc(86px + var(--safe-bottom));
  }

  body[data-area-aplicativo="nova-os"] .mobile-app-nav {
    display: none;
  }

  body[data-area-aplicativo="nova-os"] .barra-acao-os {
    bottom: calc(8px + var(--safe-bottom));
  }

  body[data-area-aplicativo="nova-os"] .formulario-os-campo {
    padding-bottom: 76px;
  }

  .cartao-nova-os .hero-campo-conteudo #resumo-sessao {
    display: none;
  }

  .cartao-nova-os .etapas-os-nav {
    display: none;
  }

  .cartao-nova-os .progresso-etapas-os {
    top: 67px;
    margin-top: 0;
  }

  .cartao-nova-os .etapa-form-os {
    scroll-margin-top: 128px;
  }

  body[data-area-aplicativo="nova-os"]:not([data-etapa-atual-os="revisao"]) .painel-contexto-os {
    display: none;
  }

  body[data-area-aplicativo="nova-os"][data-etapa-atual-os="revisao"] .painel-contexto-os {
    display: grid;
  }

  .cartao-nova-os .campo-selecao {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .cartao-nova-os .acoes-selecao {
    display: flex;
    align-items: end;
  }

  .cartao-nova-os .acoes-selecao [data-busca] {
    display: none;
  }

  .cartao-nova-os .acoes-selecao [data-limpar] {
    width: 46px;
    min-width: 46px;
  }

  .acoes-os-criada {
    grid-template-columns: 1fr;
  }

  #botao-completar-orcamento-os-criada {
    grid-column: auto;
  }
}

.resumo-sessao-os {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
}