/* Casca comum de todas as telas (docs/UX-FLUXO.md §7, §8 e §9.2): barra de 48 px, passos do projeto,
   rodapé de ação fixo, quebras em 640 e 1024 px, safe-area, alvos de toque de 44 px e anel de foco.
   Botão principal: fundo coralTexto com texto branco (5,9:1). Nunca texto branco sobre o coral #E8481F (3,9:1). */

[hidden] { display: none !important; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1 0 auto;
  width: 100%;
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
}

/* Foco: anel coralTexto de 2 px em tudo que recebe foco pelo teclado. */
:focus-visible {
  outline: 2px solid var(--fabia-coral-texto);
  outline-offset: 2px;
}

.pular {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--fabia-tinta);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 64px));
}

.pular:focus { transform: none; }

/* Alvos de toque e campos: 44 × 44 px no mínimo; campo com 16 px para o celular não dar zoom. */
button, select, .botao {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

button, .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #E6E1DA;
  border-radius: 10px;
  background: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

button:hover, .botao:hover { border-color: rgb(26 21 18 / 0.32); }

button:disabled { cursor: not-allowed; opacity: 0.56; }

.botao-principal {
  border-color: var(--fabia-coral-texto);
  background: var(--fabia-coral-texto);
  color: #FFFFFF;
  font-weight: var(--fabia-peso-titulo);
}

.botao-principal:hover { border-color: var(--fabia-selo-texto); background: var(--fabia-selo-texto); }

/* Barra superior: 48 px (mais a área segura do topo), presa no alto. */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(48px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid #E6E1DA;
  background: var(--fabia-papel);
  font-size: 0.875rem;
  line-height: 1.2;
}

.barra > img { display: block; flex: none; width: 28px; height: 28px; }

.barra .voltar, .barra .ajuda {
  flex: none;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
}

.barra .voltar:hover, .barra .ajuda:hover { background: #EFECE6; }

.barra .nome {
  flex: 0 1 auto;
  min-width: 3ch;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: var(--fabia-peso-titulo);
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-projeto {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 8px;
}

.selo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fabia-selo-fundo);
  color: var(--fabia-selo-texto);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.selo.atencao { background: var(--fabia-ambar); color: var(--fabia-tinta); }

.passos { margin-inline: auto; }

.passos ol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passos li { display: flex; align-items: center; gap: 8px; }

/* Conversa → Especificação → Fabricação → Prévia: o traço entre os passos só cabe com todos os nomes à mostra. */
@media (min-width: 1280px) {
  .passos li + li::before { content: ''; width: 16px; height: 1px; background: #E6E1DA; }
}

.passo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgb(26 21 18 / 0.64);
  font-weight: 500;
  white-space: nowrap;
}

button.passo:hover { background: #EFECE6; }

.passo-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #E6E1DA;
  border-radius: 50%;
  background: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.passo-feito { color: var(--fabia-tinta); }

.passo-feito .passo-num { border-color: var(--fabia-tinta); }

.passo[aria-current="step"] { color: var(--fabia-coral-texto); font-weight: 600; }

.passo[aria-current="step"] .passo-num { border-color: var(--fabia-coral-texto); background: var(--fabia-coral-texto); color: #FFFFFF; }

.passo[aria-disabled="true"] { cursor: default; }

.passos select { display: none; }

.barra-fim {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cota {
  padding: 3px 8px;
  border: 1px solid #E6E1DA;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.assinatura {
  color: rgb(26 21 18 / 0.64);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Rodapé da ação principal (Conversa, Especificação e Prévia): sempre visível, sem caçar o botão no fim da página. */
.rodape-acao {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid #E6E1DA;
  background: var(--fabia-papel);
}

.passo-rotulo { margin-left: 6px; }

/* Rótulos que saem da tela quando falta largura continuam para o leitor de tela.
   Abaixo de 1280 px: passos com número (o atual mantém o nome), "←" sem "Projetos" e cota sem "no mês". */
@media (max-width: 1279.98px) {
  .rotulo-largo,
  .passo:not([aria-current="step"]) .passo-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Janela padrão do BaitaOS (640–1023 px, inclui ~900×600): passos só com o número (o selo diz o estado)
   e, com um projeto aberto, a assinatura cede o lugar ao nome do projeto (volta na tela de Projetos). */
@media (max-width: 1023.98px) {
  .passo[aria-current="step"] .passo-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .barra:has(.barra-projeto:not([hidden])) .assinatura { display: none; }
}

/* Janela estreita e celular (< 640 px): uma coluna; selo e seletor de passos descem para uma segunda linha. */
@media (max-width: 639.98px) {
  .barra { flex-wrap: wrap; row-gap: 0; }

  .barra .nome { flex: 1 1 0; }

  .barra-projeto {
    order: 1;
    flex: 1 0 100%;
    padding-bottom: 4px;
  }

  .assinatura { display: none; }

  .passos { flex: 1 1 auto; min-width: 0; margin-inline: 0; }

  .passos ol { display: none; }

  .passos select {
    display: block;
    width: 100%;
    padding: 0 12px;
    border: 1px solid #E6E1DA;
    border-radius: 10px;
    background: #FFFFFF;
    font-weight: 600;
  }

  .rodape-acao > * { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}