/* Estilo extraído do protótipo Claude Design aprovado (prototipo/*.dc.html) */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f8fafc;
  color: #0f172a;
}

#app { min-height: 100dvh; display: flex; flex-direction: column; }

.card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eef1f5;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.tela { flex: 1; overflow-y: auto; padding: 16px 20px; padding-bottom: 84px; }

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: #fff; border-bottom: 1px solid #eef1f5;
  flex-shrink: 0;
}
.topo h1 { font-size: 16px; font-weight: 700; margin: 0; }
/* O ícone continua com 20px, mas a área de toque vai a 44 — é o alvo
   mais usado do app e ficava menor que a ponta do polegar. O margin
   negativo tira o espaço extra do layout, mantendo o alinhamento. */
.topo .voltar {
  background: none; border: none; display: flex; cursor: pointer;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: -12px 0 -12px -12px;
}

.campo-label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; display: block; }
.campo {
  width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid #e2e8f0;
  background: #fff; font-size: 16px; color: #0f172a; padding: 0 14px;
  box-sizing: border-box; font-family: inherit;
}
textarea.campo { height: 88px; padding-top: 12px; resize: none; }
select.campo { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
select.campo:disabled { background-color: #f8fafc; color: #94a3b8; }
.espaco-abaixo { margin-bottom: 18px; }
.dica-campo { font-size: 12px; color: #94a3b8; margin: 8px 2px 0; line-height: 1.4; }
/* Confirma por extenso o dia escolhido — o <input type="date"> exibe no
   formato do idioma do navegador, que o app não controla. */
.confirmacao-data {
  font-size: 13px; font-weight: 600; color: #475569;
  margin: 8px 2px 18px; line-height: 1.4;
}
.confirmacao-data:empty { margin: 0; }

.linha-campo-com-acao { display: flex; gap: 8px; margin-bottom: 18px; }
.linha-campo-com-acao .campo { flex: 1; }
.botao-icone {
  width: 48px; height: 48px; border-radius: 12px; border: none; background: #2563eb;
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
.linha-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }

/* Switch — o checkbox nativo destoa do resto e some em tela pequena */
.linha-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 14px; font-size: 14px; color: #334155; font-weight: 500;
  cursor: pointer; min-height: 48px; box-sizing: border-box;
}
.switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-trilho {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  transition: background 0.15s ease; pointer-events: none;
}
.switch-trilho::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 999px; background: #fff;
  transition: transform 0.15s ease;
}
.switch input:checked + .switch-trilho { background: #2563eb; }
.switch input:checked + .switch-trilho::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-trilho { outline: 2px solid #2563eb; outline-offset: 2px; }

.botao {
  height: 50px; border-radius: 12px; border: none; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  width: 100%;
}
.botao-primario { background: #2563eb; color: #fff; }
.botao-secundario { background: #fff; color: #334155; border: 1.5px solid #e2e8f0; }
.botao-perigo { background: #fff; color: #dc2626; border: 1.5px solid #fecaca; }
.botao-sucesso { background: #16a34a; color: #fff; }
.botao:disabled { opacity: 0.6; cursor: default; }
/* `.botao` também é usado em <a> (link do WhatsApp, atalhos de navegação),
   que por padrão vem sublinhado — daí o text-decoration aqui e não só no rodapé. */
a.botao { text-decoration: none; }
.botao svg, .voltar svg, .nav-item svg { flex-shrink: 0; }
.botao svg { width: 17px; height: 17px; }

/* Rodapé de ação fixo — some com o teclado do celular em foco (skill
   app-mobile-first). Só campos de TEXTO abrem teclado — checkbox e radio
   ficam de fora do seletor, senão marcar um checkbox esconde o botão de
   salvar até o usuário tocar em outro lugar (bug real encontrado em teste). */
.rodape-acao {
  display: flex; gap: 10px; padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #eef1f5;
  position: fixed; left: 0; right: 0; bottom: 64px; z-index: 5;
}
.rodape-acao .botao { flex: 1; text-decoration: none; }
/* Sem isso o rodapé fixo tampa o último item da lista — dá pra rolar
   até o fim e ainda achar que acabou antes. */
body:has(.rodape-acao) .tela { padding-bottom: 152px; }
/* O rodapé NUNCA muda de posição em resposta a foco.
   Duas tentativas anteriores falharam por mexer nele: escondê-lo
   (`display:none`) deixava quem acabou de digitar o motivo sem como
   salvar; trocá-lo pra `position:static` movia o botão entre o mousedown
   e o mouseup — o clique se perdia e nada acontecia, sem nem uma
   mensagem de erro.
   O `100dvh` do #app já resolve o caso que a regra da skill combatia: no
   iOS a dvh acompanha o teclado, então o rodapé encosta nele em vez de
   flutuar no meio da tela. */

.nav-inferior {
  display: flex; height: 64px; background: #fff; border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}
/* A nav some com o teclado aberto pra devolver espaço de tela — mas só
   nas telas SEM rodapé de ação. Onde existe um botão de salvar, sumir a
   nav faria o rodapé descer 64px no exato momento em que o campo perde o
   foco, ou seja, entre o mousedown e o mouseup do próprio botão: o
   clique se perderia. Nenhum elemento se move durante um toque.
   Checkbox e radio ficam de fora do seletor: não abrem teclado. */
body:not(:has(.rodape-acao)):has(input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus) .nav-inferior { display: none; }
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: #94a3b8; text-decoration: none; font-size: 10.5px; font-weight: 400;
}
.nav-item.ativo { color: #2563eb; font-weight: 600; }
.nav-item svg { width: 21px; height: 21px; }

.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

.busca-campo { position: relative; margin-bottom: 12px; }
.busca-campo svg { position: absolute; left: 14px; top: 15px; }
.busca-campo input {
  width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; font-size: 16px; padding: 0 14px 0 40px; box-sizing: border-box;
}

.avatar {
  border-radius: 999px; background: #e0e7ff; color: #4338ca;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}

.erro-inline {
  background: #fef2f2; color: #b91c1c; border-radius: 10px; padding: 10px 12px;
  font-size: 13px; margin-bottom: 12px;
}

.estado-vazio { text-align: center; color: #94a3b8; font-size: 14px; padding: 40px 20px; }
.estado-vazio-icone { margin-bottom: 12px; display: flex; justify-content: center; }
.estado-vazio p { margin: 0; }

/* ---------------------------------------------------------- Agenda */

.topo-marca { padding-top: 14px; padding-bottom: 12px; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca-icone {
  width: 30px; height: 30px; border-radius: 9px; background: #2563eb;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.marca-nome { font-size: 16px; font-weight: 700; }

.cabecalho-agenda {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.titulo-tela { font-size: 19px; font-weight: 700; margin: 0; }
/* Sem `capitalize`: ele subiria também o "de" de "15 de setembro".
   A capitalização das partes certas é feita no JS. */
.subtitulo-tela { font-size: 13px; color: #64748b; margin-top: 2px; }
.pilula-hoje {
  background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; flex-shrink: 0;
}

.linha-contadores { display: flex; gap: 10px; margin-bottom: 20px; }
.contador { flex: 1; padding: 14px; }
.contador-numero { font-size: 22px; font-weight: 700; line-height: 1.1; }
.contador-rotulo { font-size: 12px; color: #64748b; margin-top: 3px; }

.titulo-secao {
  font-size: 13px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.03em;
  margin: 22px 0 10px;
}

.cartao-agenda {
  display: flex; align-items: stretch; gap: 12px; padding: 12px 14px;
  margin-bottom: 10px; text-decoration: none; color: inherit;
}
.cartao-agenda-hora {
  font-size: 14px; font-weight: 700; color: #2563eb;
  min-width: 44px; padding-top: 1px; flex-shrink: 0;
}
.cartao-agenda-corpo { flex: 1; min-width: 0; border-left: 1px solid #eef1f5; padding-left: 12px; }
.cartao-agenda-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-agenda-cliente {
  font-size: 14.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cartao-agenda-carro { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.cartao-agenda-motivo {
  font-size: 12.5px; color: #94a3b8; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.link-tentar {
  background: none; border: none; color: #b91c1c; font-weight: 600;
  text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0;
}

/* ----------------------------------------------------- Finalização */

.resumo-orcamento {
  display: flex; align-items: center; justify-content: space-between;
  background: #eff6ff; border-radius: 12px; padding: 14px 16px;
  margin-bottom: 18px; font-size: 13.5px; color: #1e40af;
}
.resumo-orcamento strong { font-size: 18px; font-weight: 700; }

.aviso-inline {
  background: #fffbeb; color: #92400e; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; margin-bottom: 18px;
}

.campo-dinheiro { position: relative; }
.campo-dinheiro-prefixo {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: #64748b; font-weight: 500; pointer-events: none;
}
.campo-dinheiro .campo { padding-left: 42px; font-weight: 700; font-size: 18px; }

.espaco-acima { margin-top: 18px; }

/* --------------------------------------------- Listas com busca */

.topo-com-busca { flex-direction: column; align-items: stretch; gap: 12px; }
.topo-com-busca .titulo-tela { margin: 0; }

.linha-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.linha-chips::-webkit-scrollbar { display: none; }
.chip {
  font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0; border: none; cursor: pointer;
  background: #f1f5f9; color: #64748b; min-height: 44px;
}
.chip-ativo { background: #2563eb; color: #fff; }

.cartao-servico {
  display: flex; gap: 12px; padding: 14px; margin-bottom: 10px;
  text-decoration: none; color: inherit;
}
.cartao-servico-avatar { width: 44px; height: 44px; border-radius: 11px; font-size: 15px; }
.cartao-servico-corpo { flex: 1; min-width: 0; }
.cartao-servico-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 3px;
}
.cartao-servico-numero { font-size: 13.5px; font-weight: 700; }
.cartao-servico-cliente {
  font-size: 14px; font-weight: 600; color: #334155;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cartao-servico-carro { font-size: 12.5px; color: #64748b; margin-top: 1px; }
.cartao-servico-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 5px;
}
.cartao-servico-motivo {
  font-size: 12.5px; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cartao-servico-data { font-size: 12px; color: #94a3b8; font-weight: 500; flex-shrink: 0; }

.cartao-cliente {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  margin-bottom: 10px; text-decoration: none; color: inherit;
}
.cartao-cliente-avatar { width: 44px; height: 44px; font-size: 15px; }
.cartao-cliente-corpo { flex: 1; min-width: 0; }
/* O nome é o dado que o Ismael procura na lista — quebra em até duas
   linhas em vez de cortar. Já a lista de carros abaixo continua numa
   linha só: é secundária e um cliente com vários carros esticaria o
   card inteiro. */
.cartao-cliente-nome {
  font-size: 15px; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word;
}
.cartao-cliente-telefone { font-size: 13px; color: #64748b; margin-top: 1px; }
.cartao-cliente-carros {
  font-size: 12.5px; color: #94a3b8; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------ Ordem de Serviço */

.bloco-os { padding: 14px; margin-bottom: 14px; }
.divisor { height: 1px; background: #eef1f5; margin: 12px 0; }

.linha-pessoa { display: flex; align-items: center; gap: 12px; }
.linha-pessoa-dados { flex: 1; min-width: 0; }
.linha-pessoa-nome { font-size: 15px; font-weight: 700; overflow-wrap: break-word; }
.linha-pessoa-detalhe { font-size: 13px; color: #64748b; margin-top: 1px; }

.avatar-md { width: 44px; height: 44px; font-size: 15px; }
.caixa-icone {
  width: 44px; height: 44px; border-radius: 11px; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; flex-shrink: 0;
}
.botao-whatsapp {
  width: 44px; height: 44px; border-radius: 999px; background: #dcfce7;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  text-decoration: none;
}

.rotulo-bloco {
  font-size: 12.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px;
}
.rotulo-stepper { margin-bottom: 18px; }
.texto-bloco { font-size: 14px; color: #334155; margin: 0; line-height: 1.5; }

.linha-acoes { display: flex; gap: 8px; margin-bottom: 14px; }
.acao-voltar { flex: 1; }
.acao-avancar { flex: 2; }

.linha-navegavel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px; margin-bottom: 10px;
  text-decoration: none; color: inherit;
}
.linha-navegavel-texto { font-size: 14px; font-weight: 600; }
.linha-navegavel-direita { display: flex; align-items: center; gap: 10px; }
.valor-destaque { font-size: 15px; font-weight: 700; color: #2563eb; }
.linha-pago { background: #f0fdf4; border-color: #dcfce7; }
.linha-pago .linha-navegavel-texto { color: #15803d; }
.valor-pago { color: #15803d; }

/* ------------------------------------------------------- Orçamento */

.cabecalho-orcamento {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.pilula-versao {
  background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 700;
  padding: 8px 12px; border-radius: 10px;
}
.status-rascunho { background: #f1f5f9; color: #64748b; }
.status-aprovado { background: #dcfce7; color: #15803d; }
.status-recusado { background: #fee2e2; color: #b91c1c; }
.status-substituida { background: #f1f5f9; color: #94a3b8; }

.linha-orcamento {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.linha-orcamento:last-of-type { border-bottom: none; }
.linha-orcamento-texto { flex: 1; min-width: 0; }
.linha-orcamento-descricao { font-size: 14px; color: #0f172a; font-weight: 500; display: block; }
.linha-orcamento-detalhe { font-size: 12px; color: #94a3b8; }
.linha-orcamento-valor { font-size: 14px; font-weight: 600; white-space: nowrap; }
.vazio-bloco { font-size: 13px; color: #94a3b8; margin: 4px 0 0; }

/* Descrição e valor em linhas separadas: lado a lado em 375px o campo de
   valor fica estreito demais e corta o número — e valor errado custa caro. */
.form-linha {
  display: grid; grid-template-columns: 1fr 44px; gap: 8px;
  margin-top: 12px; align-items: center;
}
.campo-descricao { grid-column: 1 / -1; height: 44px; }
.campo-valor-linha { min-width: 0; }
.campo-valor-linha .campo { height: 44px; font-size: 15px; font-weight: 600; padding-left: 38px; }
.campo-dinheiro-prefixo-sm { font-size: 13px; left: 12px; }
.botao-icone-sm { width: 44px; height: 44px; }

.bloco-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; margin-bottom: 14px;
}
.bloco-total-rotulo { font-size: 15px; font-weight: 700; }
.bloco-total-valor { font-size: 20px; font-weight: 700; color: #2563eb; }

.botao-texto { background: none; color: #2563eb; }

/* --------------------------------------------------------- Cliente */

.avatar-lg { width: 56px; height: 56px; font-size: 19px; }
.nome-cliente { font-size: 17px; font-weight: 700; overflow-wrap: break-word; line-height: 1.25; }

.aviso-servico-ativo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 14px;
  background: #fffbeb; border-color: #fde68a; color: #92400e;
  font-size: 13.5px; font-weight: 500;
}

.vazio-secao { padding: 4px 2px 8px; }

.linha-carro { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; }
.linha-carro-modelo { font-size: 14.5px; font-weight: 600; }

.cartao-historico {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; margin-bottom: 10px; text-decoration: none; color: inherit;
}
.cartao-historico-corpo { flex: 1; min-width: 0; }
.cartao-historico-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }

/* ---------------------------------------------------------------------
   Desktop (≥768px) — o MESMO componente, só que com espaço.
   O Ismael usa o celular no balcão e o notebook no escritório; a regra
   da skill app-mobile-first é que o desktop GANHA (sidebar, coluna com
   largura de leitura), nunca vira outra tela.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  #app {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    min-height: 100dvh;
  }

  /* A navegação vira sidebar à esquerda, ocupando as duas linhas. */
  .nav-inferior {
    position: static; grid-column: 1; grid-row: 1 / -1;
    flex-direction: column; height: auto; align-items: stretch;
    border-top: none; border-right: 1px solid #e5e7eb; box-shadow: none;
    padding: 20px 12px; gap: 4px;
  }
  .nav-item {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px;
    font-weight: 600;
  }
  .nav-item.ativo { background: #eff6ff; }
  /* No desktop o teclado não cobre nada — a sidebar nunca some. */
  body:has(input:focus, textarea:focus, select:focus) .nav-inferior { display: flex; }

  .topo { grid-column: 2; grid-row: 1; padding: 22px 32px; }
  .topo h1, .topo .titulo-tela { font-size: 20px; }

  .tela {
    grid-column: 2; grid-row: 2;
    padding: 24px 32px; padding-bottom: 32px;
    background: #f8fafc;
  }
  /* A ação principal sai do rodapé fixo e volta pro fluxo: no mouse não
     existe polegar pra alcançar o rodapé. */
  .rodape-acao {
    position: static; grid-column: 2; grid-row: 3;
    border-top: 1px solid #eef1f5; padding: 16px 32px;
  }
  .rodape-acao .botao { flex: 0 1 280px; }
  body:has(.rodape-acao) #app { grid-template-rows: auto 1fr auto; }
  body:has(.rodape-acao) .tela { padding-bottom: 32px; }
  body:has(input:focus, textarea:focus, select:focus) .rodape-acao { display: flex; }

  /* Formulário em duas colunas: campo de largura inteira fica ridículo
     num monitor. */
  .campo, .linha-campo-com-acao, .linha-dupla,
  .confirmacao-data, .dica-campo, .linha-switch { max-width: 520px; }
}

/* ------------------------------ tela de entrada ------------------------ */
.tela-entrar {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px; background: #f8fafc;
}
.entrar-caixa { width: 100%; max-width: 360px; }
.entrar-marca { text-align: center; margin-bottom: 28px; }
.entrar-logo {
  width: 60px; height: 60px; border-radius: 16px; background: #2563eb;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.entrar-logo svg { width: 30px; height: 30px; stroke: #fff; }
.entrar-titulo { font-size: 24px; font-weight: 700; margin: 0; }
.entrar-subtitulo { font-size: 14px; color: #64748b; margin: 4px 0 0; }
.botao-largo { width: 100%; }

/* Sair fica no rodapé da navegação, longe dos botões de ação — ninguém
   quer deslogar sem querer no meio de um orçamento. */
.nav-sair {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: #94a3b8; font-size: 10.5px; font-weight: 400;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; flex: 1;
}
@media (min-width: 768px) {
  .nav-sair {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px;
    font-weight: 600; margin-top: auto;
  }
}