:root {
  color-scheme: light;
  --fundo: #f5f7fb;
  --cartao: #ffffff;
  --controle: #ffffff;
  --bloco: #f8fafc;
  --texto: #172033;
  --texto-suave: #667085;
  --linha: #e4e7ec;
  --borda-cartao: rgba(15, 23, 42, 0.04);
  --primaria: #2563eb;
  --primaria-escura: #1d4ed8;
  --primaria-suave: #eef2ff;
  --primaria-borda: rgba(37, 99, 235, 0.42);
  --primaria-foco: rgba(37, 99, 235, 0.10);
  --sucesso: #127a4a;
  --erro: #b42318;
  --sombra: 0 18px 40px rgba(15, 23, 42, 0.08);
  --sombra-modal: 0 28px 70px rgba(15, 23, 42, 0.22);
  --raio: 22px;
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0f172a;
  --cartao: #111827;
  --controle: #0b1220;
  --bloco: #182235;
  --texto: #e5e7eb;
  --texto-suave: #a7b0c0;
  --linha: #273244;
  --borda-cartao: rgba(148, 163, 184, 0.18);
  --primaria: #60a5fa;
  --primaria-escura: #3b82f6;
  --primaria-suave: rgba(37, 99, 235, 0.18);
  --primaria-borda: rgba(96, 165, 250, 0.46);
  --primaria-foco: rgba(96, 165, 250, 0.16);
  --sucesso: #34d399;
  --erro: #f87171;
  --sombra: 0 18px 42px rgba(0, 0, 0, 0.32);
  --sombra-modal: 0 28px 80px rgba(0, 0, 0, 0.48);
}

:root[data-cor-principal="azul"] {
  --primaria: #2563eb;
  --primaria-escura: #1d4ed8;
  --primaria-suave: #eef2ff;
  --primaria-borda: rgba(37, 99, 235, 0.42);
  --primaria-foco: rgba(37, 99, 235, 0.10);
}

:root[data-cor-principal="azul_escuro"] {
  --primaria: #1e3a8a;
  --primaria-escura: #172554;
  --primaria-suave: rgba(30, 58, 138, 0.12);
  --primaria-borda: rgba(30, 58, 138, 0.42);
  --primaria-foco: rgba(30, 58, 138, 0.11);
}

:root[data-cor-principal="roxo"] {
  --primaria: #7c3aed;
  --primaria-escura: #6d28d9;
  --primaria-suave: rgba(124, 58, 237, 0.13);
  --primaria-borda: rgba(124, 58, 237, 0.44);
  --primaria-foco: rgba(124, 58, 237, 0.12);
}

:root[data-cor-principal="rosa"] {
  --primaria: #db2777;
  --primaria-escura: #be185d;
  --primaria-suave: rgba(219, 39, 119, 0.12);
  --primaria-borda: rgba(219, 39, 119, 0.42);
  --primaria-foco: rgba(219, 39, 119, 0.11);
}

:root[data-cor-principal="preto"] {
  --primaria: #111827;
  --primaria-escura: #030712;
  --primaria-suave: rgba(17, 24, 39, 0.10);
  --primaria-borda: rgba(17, 24, 39, 0.34);
  --primaria-foco: rgba(17, 24, 39, 0.10);
}

:root[data-tema="escuro"][data-cor-principal="azul"] {
  --primaria: #60a5fa;
  --primaria-escura: #3b82f6;
  --primaria-suave: rgba(37, 99, 235, 0.18);
  --primaria-borda: rgba(96, 165, 250, 0.46);
  --primaria-foco: rgba(96, 165, 250, 0.16);
}

:root[data-tema="escuro"][data-cor-principal="azul_escuro"] {
  --primaria: #93c5fd;
  --primaria-escura: #60a5fa;
  --primaria-suave: rgba(59, 130, 246, 0.18);
  --primaria-borda: rgba(147, 197, 253, 0.42);
  --primaria-foco: rgba(147, 197, 253, 0.14);
}

:root[data-tema="escuro"][data-cor-principal="roxo"] {
  --primaria: #c4b5fd;
  --primaria-escura: #a78bfa;
  --primaria-suave: rgba(124, 58, 237, 0.20);
  --primaria-borda: rgba(196, 181, 253, 0.42);
  --primaria-foco: rgba(196, 181, 253, 0.14);
}

:root[data-tema="escuro"][data-cor-principal="rosa"] {
  --primaria: #f9a8d4;
  --primaria-escura: #f472b6;
  --primaria-suave: rgba(219, 39, 119, 0.20);
  --primaria-borda: rgba(249, 168, 212, 0.42);
  --primaria-foco: rgba(249, 168, 212, 0.14);
}

:root[data-tema="escuro"][data-cor-principal="preto"] {
  --primaria: #64748b;
  --primaria-escura: #475569;
  --primaria-suave: rgba(148, 163, 184, 0.16);
  --primaria-borda: rgba(148, 163, 184, 0.38);
  --primaria-foco: rgba(148, 163, 184, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); }
html { transition: background-color 0.18s ease, color 0.18s ease; }
body { padding: 18px 14px 28px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.topo-app {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.topo-app-esquerda {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.topo-app h1,
.cabecalho-cartao h2,
.cabecalho-modal h3 { margin: 0; }
.topo-app p,
.cabecalho-cartao p,
#resumo-sessao { margin: 6px 0 0; color: var(--texto-suave); }
.etiqueta {
  margin: 0 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primaria);
  font-weight: 700;
}

.cartao,
.caixa-modal,
.caixa-modal-cadastro,
.menu-lateral {
  background: var(--cartao);
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.cartao { padding: 18px; }

.conteudo-principal,
.formulario-bloco,
.acoes-coluna,
.conteudo-aplicativo {
  display: grid;
  gap: 14px;
}

.layout-aplicativo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.menu-lateral {
  position: fixed;
  inset: 14px auto 14px 14px;
  width: min(84vw, 280px);
  padding: 18px;
  transform: translateX(calc(-100% - 24px));
  transition: transform 0.22s ease;
  z-index: 40;
}

.menu-lateral.menu-lateral-aberto {
  transform: translateX(0);
}

.menu-lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.menu-lateral-conteudo {
  display: grid;
  gap: 10px;
}

.menu-item {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--controle);
  color: var(--texto);
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
}

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

.fundo-menu {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(2px);
  z-index: 35;
}

.botao-menu,
.botao,
.botao-icone {
  border: none;
  border-radius: 16px;
}

.botao-menu {
  width: 46px;
  height: 46px;
  background: var(--controle);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
  font-size: 1.25rem;
}

.campo,
.campo-selecao label {
  display: grid;
  gap: 8px;
}

.campo span,
.campo-selecao span {
  font-size: 0.92rem;
  font-weight: 600;
}

.campo small,
.campo-selecao small {
  color: var(--texto-suave);
  font-weight: 500;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--linha);
  background: var(--controle);
  border-radius: 16px;
  padding: 14px 15px;
  color: var(--texto);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primaria-borda);
  box-shadow: 0 0 0 4px var(--primaria-foco);
}

textarea {
  resize: vertical;
  min-height: 128px;
}

.botao {
  padding: 14px 18px;
  font-weight: 700;
}

.botao-primario {
  background: var(--primaria);
  color: #fff;
}

.botao-primario:hover { background: var(--primaria-escura); }

.botao-secundario {
  background: var(--primaria-suave);
  color: var(--primaria);
}

.botao-icone {
  width: 42px;
  height: 42px;
  border: 1px solid var(--linha);
  background: var(--controle);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--texto);
}

.botao-limpar { color: var(--texto-suave); }

.grade-dupla,
.grade-detalhe-os {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.campo-selecao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.acoes-selecao {
  display: flex;
  gap: 8px;
}

.selo-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--primaria-suave);
  color: var(--primaria);
  font-size: 0.82rem;
  font-weight: 700;
}

.modal-busca,
.modal-cadastro {
  width: min(100%, 680px);
  border: none;
  padding: 0;
  background: transparent;
}

.modal-cadastro {
  width: min(100%, 760px);
}

.modal-busca::backdrop,
.modal-cadastro::backdrop {
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(3px);
}

.caixa-modal,
.caixa-modal-cadastro {
  padding: 18px;
}

.cabecalho-modal,
.cabecalho-cartao {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cabecalho-cadastro,
.cabecalho-lista-os {
  margin-bottom: 12px;
}

.acoes-modal-busca {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 0;
}

.lista-resultados,
.lista-os-criadas {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.lista-resultados {
  max-height: 48vh;
  overflow: auto;
}

.item-resultado,
.item-os-criada {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--controle);
  padding: 14px;
  text-align: left;
}

.item-resultado strong,
.item-os-topo strong {
  display: block;
  margin-bottom: 4px;
}

.item-resultado span,
.item-os-subtitulo,
.item-os-servico,
.item-os-metas {
  display: block;
  color: var(--texto-suave);
  font-size: 0.92rem;
}

.item-os-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.item-os-subtitulo {
  color: var(--texto);
  font-weight: 600;
  margin-bottom: 6px;
}

.item-os-servico {
  margin-bottom: 10px;
}

.item-os-metas {
  font-size: 0.85rem;
}

.aviso-modal {
  border-radius: 14px;
  background: var(--bloco);
  color: var(--texto-suave);
  padding: 12px 14px;
}

.cadastro-iframe {
  width: 100%;
  height: min(82vh, 720px);
  border: none;
  border-radius: 18px;
  background: var(--controle);
}

.bloco-detalhe-os {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: var(--bloco);
}

.bloco-detalhe-os-amplo {
  grid-column: 1 / -1;
}

.rotulo-detalhe-os {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 520px);
  background: #101828;
  color: #fff;
  padding: 14px 16px;
  border-radius: 18px;
  box-shadow: var(--sombra);
  z-index: 9999;
}

.toast.sucesso { background: var(--sucesso); }
.toast.erro { background: var(--erro); }

.escondido { display: none !important; }

@media (min-width: 900px) {
  body { padding-top: 32px; }

  .layout-aplicativo {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
  }

  .menu-lateral {
    position: sticky;
    inset: 0;
    width: 100%;
    transform: none;
    z-index: 1;
  }

  #botao-fechar-menu,
  .fundo-menu,
  .botao-menu {
    display: none !important;
  }

  .cartao,
  .caixa-modal,
  .caixa-modal-cadastro,
  .menu-lateral { padding: 24px; }
}

@media (max-width: 640px) {
  .grade-dupla,
  .grade-detalhe-os {
    grid-template-columns: 1fr;
  }

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

.tela-consulta-produtos {
  display: grid;
  gap: 14px;
}

.formulario-consulta-produtos {
  display: grid;
  gap: 12px;
}

.filtros-consulta-produtos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.botao-filtro-produto {
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--controle);
  color: var(--texto-suave);
  padding: 9px 12px;
  font-size: 0.9rem;
  font-weight: 800;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.botao-filtro-produto:hover {
  border-color: var(--primaria-borda);
  color: var(--primaria);
}

.botao-filtro-produto.ativo {
  border-color: var(--primaria-borda);
  background: var(--primaria-suave);
  color: var(--primaria);
}

.lista-consulta-produtos {
  display: grid;
  gap: 10px;
}

.item-consulta-produto {
  display: grid;
  gap: 12px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--controle);
  padding: 14px;
}

.item-consulta-produto-clicavel {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.item-consulta-produto-clicavel:hover,
.item-consulta-produto-clicavel:focus {
  border-color: var(--primaria-borda);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  outline: none;
}

.item-consulta-produto-clicavel:focus-visible {
  box-shadow: 0 0 0 4px var(--primaria-foco);
}

.item-consulta-produto-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.item-consulta-produto-topo strong {
  display: block;
  margin-bottom: 4px;
}

.item-consulta-produto-topo span,
.grade-info-consulta-produto span,
.item-detalhe-produto span,
.resumo-detalhe-produto p {
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.item-consulta-produto-destaque {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.preco-consulta-produto {
  color: var(--primaria) !important;
  font-weight: 800;
  white-space: nowrap;
}

.selo-consulta-produto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.selo-consulta-produto.ok {
  background: rgba(16, 185, 129, 0.14);
  color: var(--sucesso);
}

.selo-consulta-produto.baixo {
  background: rgba(251, 146, 60, 0.14);
  color: #c2410c;
}

.selo-consulta-produto.zero {
  background: rgba(239, 68, 68, 0.14);
  color: var(--erro);
}

.selo-consulta-produto.inativo {
  background: rgba(148, 163, 184, 0.18);
  color: var(--texto-suave);
}

.grade-info-consulta-produto,
.grade-detalhe-produto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.grade-info-consulta-produto div,
.item-detalhe-produto {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bloco);
}

.item-detalhe-produto-destaque {
  grid-column: 1 / -1;
}

.modal-detalhe-produto {
  width: min(100%, 720px);
}

.caixa-modal-detalhe-produto,
.conteudo-detalhe-produto {
  display: grid;
  gap: 14px;
}

.resumo-detalhe-produto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--controle);
}

.resumo-detalhe-produto p {
  margin: 8px 0 0;
}

.resumo-detalhe-produto strong {
  color: var(--primaria);
  font-size: 1.25rem;
  white-space: nowrap;
}

.botao:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

@media (min-width: 700px) {
  .formulario-consulta-produtos {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (max-width: 640px) {
  .item-consulta-produto-topo,
  .resumo-detalhe-produto {
    align-items: stretch;
    flex-direction: column;
  }

  .item-consulta-produto-destaque {
    justify-items: start;
  }

  .grade-info-consulta-produto,
  .grade-detalhe-produto {
    grid-template-columns: 1fr;
  }
}

.descricao-form-os {
  margin-top: 4px;
}

.acoes-form-os,
.acoes-detalhe-os {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.acoes-detalhe-os {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.campo-selecao input[readonly] {
  cursor: pointer;
}

.campo-selecao input[readonly]:hover {
  border-color: var(--primaria-borda);
}

.botao-icone[disabled],
.botao-limpar[disabled],
.botao-edicao-bloqueada {
  cursor: not-allowed;
  opacity: 0.72;
}

.selo-status-pendente {
  background: #fff7ed;
  color: #9a3412;
}

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

.item-os-sincronizada {
  background: #fbfcfe;
}

.bloco-video-os {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.35);
}

.cabecalho-bloco-video-os {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cabecalho-bloco-video-os h3 {
  margin: 0;
  font-size: 1rem;
}

.cabecalho-bloco-video-os p {
  margin: 0.25rem 0 0;
  color: var(--texto-suave, #94a3b8);
  font-size: 0.85rem;
}

.selo-video-os {
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  background: rgba(148, 163, 184, 0.16);
  color: var(--texto-suave, #cbd5e1);
}

.video-os-existente {
  display: grid;
  gap: 0.4rem;
}

.preview-video-os {
  width: 100%;
  max-height: 280px;
  border-radius: 14px;
  background: #020617;
}

/* Modal de vídeo e tema visual do aplicativo */
.menu-lateral {
  display: flex;
  flex-direction: column;
}

.menu-lateral-rodape {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}

.botao-tema {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--bloco);
  color: var(--texto);
  padding: 12px 14px;
  font-weight: 800;
}

.botao-tema:hover {
  border-color: var(--primaria-borda);
}

.bloco-video-os {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--bloco), var(--cartao));
}

.cabecalho-bloco-video-os {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cabecalho-bloco-video-os h3 {
  margin: 0;
  font-size: 1rem;
}

.cabecalho-bloco-video-os p {
  margin: 0.25rem 0 0;
  color: var(--texto-suave);
  font-size: 0.88rem;
}

.selo-video-os {
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  background: var(--primaria-suave);
  color: var(--primaria);
  font-weight: 800;
}

.acoes-video-os,
.acoes-modal-video-os {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-video-os {
  width: min(100%, 620px);
}

.caixa-modal-video-os {
  box-shadow: var(--sombra-modal);
}

.campo-arquivo-video-os input[type="file"] {
  padding: 12px;
  cursor: pointer;
}

.video-os-existente {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--controle);
}

.preview-video-os {
  width: 100%;
  max-height: 280px;
  border-radius: 14px;
  background: #020617;
}

.item-resultado,
.item-os-criada,
.item-consulta-produto,
.cadastro-iframe {
  background: var(--controle);
}

.bloco-detalhe-os,
.grade-info-consulta-produto div,
.aviso-modal {
  background: var(--bloco);
}

.selo-status-pendente {
  background: rgba(251, 146, 60, 0.14);
  color: #c2410c;
}

.selo-status-sincronizada {
  background: rgba(16, 185, 129, 0.14);
  color: var(--sucesso);
}

.item-os-sincronizada {
  background: var(--bloco);
}

input:disabled,
textarea:disabled,
button:disabled {
  opacity: 0.68;
}


.captura-video-os {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--controle);
}

.cabecalho-captura-video-os {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.cabecalho-captura-video-os strong {
  display: block;
  color: var(--texto);
}

.cabecalho-captura-video-os small,
.ajuda-captura-video-os {
  color: var(--texto-suave);
  line-height: 1.45;
}

.preview-camera-video-os {
  width: 100%;
  max-height: 280px;
  border-radius: 14px;
  background: #020617;
  object-fit: contain;
}

.acoes-captura-video-os {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.acoes-captura-video-os .botao {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .acoes-captura-video-os .botao {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .cabecalho-bloco-video-os,
  .acoes-video-os,
  .acoes-modal-video-os {
    align-items: stretch;
    flex-direction: column;
  }
}



/* Configurações de aparência */
.modal-aparencia {
  width: min(100%, 560px);
}

.caixa-modal-aparencia {
  box-shadow: var(--sombra-modal);
}

.grade-aparencia {
  display: grid;
  gap: 14px;
}

.grupo-aparencia {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--bloco);
}

.grupo-aparencia strong {
  color: var(--texto);
}

.grupo-aparencia p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.45;
}

.opcoes-aparencia {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.botao-opcao-aparencia {
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--controle);
  color: var(--texto);
  padding: 10px 13px;
  font-weight: 800;
}

.botao-opcao-aparencia[aria-pressed="true"] {
  border-color: var(--primaria-borda);
  background: var(--primaria-suave);
  color: var(--primaria);
}

.amostra-cor-aparencia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.amostra-cor-aparencia span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 1px rgba(15,23,42,0.08);
}

[data-amostra-cor="azul"] { background: #2563eb; }
[data-amostra-cor="azul_escuro"] { background: #1e3a8a; }
[data-amostra-cor="roxo"] { background: #7c3aed; }
[data-amostra-cor="rosa"] { background: #db2777; }
[data-amostra-cor="preto"] { background: #111827; }

.botao-tema small {
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Rascunho automático da OS */
.aviso-rascunho-os {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid var(--primaria-borda);
  border-radius: 18px;
  background: var(--primaria-suave);
  color: var(--texto);
}

.aviso-rascunho-os strong {
  display: block;
  margin-bottom: 3px;
  color: var(--primaria);
}

.aviso-rascunho-os span {
  display: block;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

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

.acoes-rascunho-os .botao {
  padding: 10px 13px;
}

/* Últimos usados no modal de busca */
.grupo-resultados-titulo {
  margin: 8px 0 2px;
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.item-resultado-recente {
  border-color: var(--primaria-borda);
  background: var(--primaria-suave);
}

.item-resultado-recente::after {
  content: "Usado recentemente";
  display: inline-flex;
  margin-top: 8px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--controle);
  color: var(--primaria);
  font-size: 0.72rem;
  font-weight: 800;
}

@media (max-width: 640px) {
  .aviso-rascunho-os {
    align-items: stretch;
    flex-direction: column;
  }

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