/* css/componentes.css */
/* ============================================================
   COMPONENTES — partes reutilizadas em todas as telas
   ============================================================ */

/* Topo ---------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  height: var(--altura-topo);
  padding: 0 var(--espaco-4);
  background: var(--cor-fundo);
}

.topo__marca { display: flex; align-items: center; flex: none; }
.topo__simbolo { height: 32px; width: auto; }

.topo__obra {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 7px var(--espaco-3);
  border-radius: var(--raio-redondo);
  background: var(--cor-papel);
  box-shadow: var(--sombra);
  color: var(--cor-texto-claro);
}

.topo__obra-texto { flex: 1; min-width: 0; text-align: left; }
.topo__obra-texto .rotulo { font-size: 10px; letter-spacing: 0.08em; }

.topo__obra-nome {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto);
  line-height: 1.2;
}

.topo__acoes { display: flex; align-items: center; gap: var(--espaco-2); flex: none; }

.topo__botao {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-redondo);
  background: var(--cor-papel);
  color: var(--cor-primaria);
  box-shadow: var(--sombra);
}

.topo__botao--extra { display: none; }

.topo__nova {
  min-height: 42px;
  padding: 0 var(--espaco-3);
  border-radius: var(--raio-redondo);
  box-shadow: var(--sombra-marca);
}

.topo__nova span { display: none; }

/* Menu lateral (computador) ------------------------------ */

.lateral { display: none; }

.lateral__marca {
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 var(--espaco-5);
}

.lateral__marca img { height: 32px; width: auto; }

.lateral__destaque { padding: 0 var(--espaco-4) var(--espaco-2); }

.lateral__grupo { padding: var(--espaco-4) var(--espaco-4) 0; }

.lateral__titulo-grupo {
  padding: 0 var(--espaco-3) var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-mini);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.lateral__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  padding: 12px var(--espaco-3);
  border-radius: var(--raio-pequeno);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-align: left;
  transition: background var(--transicao), color var(--transicao);
}

.lateral__item:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.lateral__item[aria-current="page"] { background: #fff; color: var(--cor-primaria); }
.lateral__item[aria-current="page"] .icone { color: var(--cor-secundaria); }

.lateral__rodape {
  margin-top: auto;
  padding: var(--espaco-5) var(--espaco-4);
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--texto-mini);
}

/* Barra inferior flutuante (celular) --------------------- */

.barra-inferior {
  position: fixed;
  left: var(--espaco-3);
  right: var(--espaco-3);
  bottom: calc(var(--espaco-3) + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  height: var(--altura-barra-inferior);
  padding: 0 var(--espaco-2);
  background: var(--cor-primaria);
  border-radius: var(--raio-redondo);
  box-shadow: var(--sombra-alta);
}

.barra-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--fonte-titulo);
  font-size: 11px;
  font-weight: 700;
}

.barra-inferior__item[aria-current="page"] { color: #fff; }

.barra-inferior__item[aria-current="page"] .icone {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--raio-redondo);
  padding: 3px;
  box-sizing: content-box;
}

.barra-inferior__central {
  flex: none;
  width: 58px; height: 58px;
  margin: 0 var(--espaco-1);
  display: grid;
  place-items: center;
  border-radius: var(--raio-redondo);
  background: var(--cor-secundaria);
  color: #fff;
  box-shadow: var(--sombra-marca);
}

.barra-inferior__central .icone { width: 26px; height: 26px; stroke-width: 2.4; }

/* Ícones -------------------------------------------------- */

.icone {
  width: 22px; height: 22px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone--pequeno { width: 18px; height: 18px; }
.icone--grande { width: 26px; height: 26px; }

/* Quadradinho de ícone ----------------------------------- */

.ficha-icone {
  width: 48px; height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-pequeno);
  background: var(--tom-azul-fundo);
  color: var(--tom-azul-frente);
}

.ficha-icone--laranja { background: var(--tom-laranja-fundo); color: var(--tom-laranja-frente); }
.ficha-icone--verde { background: var(--tom-verde-fundo); color: var(--tom-verde-frente); }
.ficha-icone--amarelo { background: var(--tom-amarelo-fundo); color: var(--tom-amarelo-frente); }
.ficha-icone--roxo { background: var(--tom-roxo-fundo); color: var(--tom-roxo-frente); }

/* Cabeçalho de tela -------------------------------------- */

.cabecalho-tela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin: var(--espaco-2) 0 var(--espaco-4);
}

.cabecalho-tela__texto { min-width: 0; }
.cabecalho-tela h1 { font-size: var(--texto-titulo); }
.cabecalho-tela p { margin: 2px 0 0; color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }

/* Cartões ------------------------------------------------- */

.cartao {
  background: var(--cor-papel);
  border-radius: var(--raio);
  padding: var(--espaco-4);
  margin-bottom: var(--espaco-3);
  box-shadow: var(--sombra);
}

.cartao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}

.cartao__topo h3 { font-size: var(--texto-medio); }

.cartao__acao {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--cor-secundaria-escura);
}

/* Grade de números --------------------------------------- */

.grade-numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}

.numero {
  background: var(--cor-papel);
  border-radius: var(--raio);
  padding: var(--espaco-4);
  box-shadow: var(--sombra);
}

.numero__valor {
  display: block;
  margin-top: var(--espaco-1);
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-grande);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.numero__nota { font-size: var(--texto-mini); color: var(--cor-texto-claro); font-weight: 600; }

/* Barra de progresso ------------------------------------- */

.progresso {
  height: 10px;
  border-radius: var(--raio-redondo);
  background: var(--cor-linha);
  overflow: hidden;
}

.progresso__preenchido {
  height: 100%;
  border-radius: var(--raio-redondo);
  background: var(--cor-secundaria);
  transition: width var(--transicao);
}

.progresso--claro { background: rgba(255, 255, 255, 0.2); }

/* Etiquetas ---------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--raio-redondo);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-mini);
  font-weight: 700;
  white-space: nowrap;
}

.etiqueta--sucesso { background: var(--cor-sucesso-clara); color: #0c7d52; }
.etiqueta--alerta { background: var(--cor-alerta-clara); color: #b06a0c; }
.etiqueta--erro { background: var(--cor-erro-clara); color: #b53434; }
.etiqueta--info { background: var(--cor-info-clara); color: #24568f; }
.etiqueta--neutra { background: var(--cor-primaria-clara); color: var(--cor-primaria); }

/* Botões -------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 52px;
  padding: 0 var(--espaco-5);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel);
  color: var(--cor-primaria);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-base);
  font-weight: 800;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), background var(--transicao);
}

.botao:active { transform: scale(0.97); }

.botao--principal { background: var(--cor-primaria); color: #fff; }
.botao--principal:hover { background: var(--cor-primaria-escura); }

.botao--marca { background: var(--cor-secundaria); color: #fff; box-shadow: var(--sombra-marca); }
.botao--marca:hover { background: var(--cor-secundaria-escura); }

.botao--fantasma { background: transparent; box-shadow: none; color: var(--cor-texto-suave); }
.botao--fantasma:hover { background: var(--cor-papel); }

.botao--perigo { background: var(--cor-erro-clara); color: var(--cor-erro); box-shadow: none; }

.botao--largo { width: 100%; }
.botao--pequeno { min-height: 42px; padding: 0 var(--espaco-4); font-size: var(--texto-pequeno); }

/* Filtros ------------------------------------------------- */

.filtros {
  display: flex;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}

.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: none;
  padding: 10px var(--espaco-4);
  border-radius: var(--raio-redondo);
  background: var(--cor-papel);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  box-shadow: var(--sombra);
}

.filtro[aria-pressed="true"] { background: var(--cor-primaria); color: #fff; }

/* Busca --------------------------------------------------- */

.busca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: 0 var(--espaco-4);
  height: 52px;
  margin-bottom: var(--espaco-3);
  background: var(--cor-papel);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
  color: var(--cor-texto-claro);
}

.busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; }

/* Listas de registros ------------------------------------ */

.lista { display: flex; flex-direction: column; gap: var(--espaco-3); }

.registro {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-align: left;
  transition: transform var(--transicao);
}

.registro:active { transform: scale(0.99); }

.registro__marca {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

.registro__corpo { flex: 1; min-width: 0; }

.registro__titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.3;
}

.registro__nota {
  display: block;
  margin-top: 2px;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-suave);
}

.registro__lado { text-align: right; flex: none; }

.registro__valor {
  display: block;
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Caixa de marcar ---------------------------------------- */

.caixa {
  width: 28px; height: 28px;
  flex: none;
  border: 2px solid var(--cor-linha-forte);
  border-radius: 10px;
  background: var(--cor-papel);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background var(--transicao), border-color var(--transicao);
}

.caixa[aria-checked="true"] {
  background: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
  color: #fff;
}

/* Formulários -------------------------------------------- */

.campo { margin-bottom: var(--espaco-4); }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--cor-texto);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px var(--espaco-4);
  border: 2px solid var(--cor-linha);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel-suave);
  outline: none;
  transition: border-color var(--transicao), background var(--transicao);
}

.campo textarea { min-height: 100px; resize: vertical; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--cor-secundaria);
  background: var(--cor-papel);
}

.campo__dica { margin-top: 6px; font-size: var(--texto-mini); color: var(--cor-texto-claro); }

.campo--duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-3); }

/* Modal --------------------------------------------------- */

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 26, 38, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: surgir 160ms ease;
}

.modal {
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--cor-papel);
  border-radius: 28px 28px 0 0;
  padding: var(--espaco-4) var(--espaco-4) calc(var(--espaco-5) + env(safe-area-inset-bottom));
  animation: subir 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.modal__puxador {
  width: 48px; height: 5px;
  margin: 0 auto var(--espaco-4);
  border-radius: var(--raio-redondo);
  background: var(--cor-linha-forte);
}

.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
}

.modal__topo h2 { font-size: var(--texto-grande); }

.modal__acoes { display: flex; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.modal__acoes .botao { flex: 1; }

@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(28px); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .modal-fundo, .modal { animation: none; }
}

/* Notificações -------------------------------------------- */

.notificacoes {
  position: fixed;
  left: var(--espaco-4);
  right: var(--espaco-4);
  bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom) + var(--espaco-4));
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  pointer-events: none;
}

.notificacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria);
  color: #fff;
  font-size: var(--texto-pequeno);
  font-weight: 600;
  box-shadow: var(--sombra-alta);
  animation: subir 200ms ease;
}

.notificacao--sucesso { background: #0f8d5e; }
.notificacao--erro { background: #b53434; }
.notificacao--alerta { background: #b06a0c; }

/* Estado vazio -------------------------------------------- */

.estado-vazio {
  padding: var(--espaco-6) var(--espaco-4);
  text-align: center;
  background: var(--cor-papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.estado-vazio .ficha-icone { margin: 0 auto var(--espaco-3); width: 60px; height: 60px; }
.estado-vazio p { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.estado-vazio .botao { margin-top: var(--espaco-4); }

/* ============================================================
   ACRÉSCIMOS — classes que substituíram estilos escritos
   direto no HTML das telas.
   ============================================================ */

/* Registro sem sombra, para listas dentro de um cartão ----- */

.registro--plano {
  box-shadow: none;
  background: var(--cor-papel-suave);
}

/* Registro em coluna: cabeçalho em cima, dados embaixo ----- */

.registro--coluna {
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco-2);
}

.registro__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
}

.registro__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
}

.registro__titulo--feito {
  text-decoration: line-through;
  color: var(--cor-texto-claro);
}

/* Aviso curto em uma linha -------------------------------- */

.aviso-linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-pequeno);
  background: var(--cor-alerta-clara);
  color: var(--cor-alerta);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.aviso-linha .icone { flex: none; }

/* Nota abaixo do resumo da capa --------------------------- */

.capa__nota {
  margin: var(--espaco-3) 0 0;
  font-size: var(--texto-pequeno);
  color: rgba(255, 255, 255, 0.72);
}

/* Campo só de leitura ------------------------------------- */

.campo__leitura {
  margin: 0;
  min-height: 52px;
  padding: 12px var(--espaco-4);
  border: 2px dashed var(--cor-linha);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel-suave);
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--cor-texto-suave);
}

/* Campo de dinheiro, com o R$ fixo dentro ----------------- */

.campo__caixa { position: relative; }

.campo__prefixo {
  position: absolute;
  left: var(--espaco-4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--cor-texto-claro);
  pointer-events: none;
}

.campo--moeda input {
  padding-left: 46px;
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.campo--moeda input:focus + .campo__prefixo,
.campo--moeda .campo__caixa:focus-within .campo__prefixo {
  color: var(--cor-secundaria);
}

/* Botão de remover dentro de uma linha -------------------- */

.topo__botao--perigo { color: var(--cor-erro); }

.topo__botao--perigo:hover,
.topo__botao--perigo:focus-visible { background: var(--cor-erro-clara); }

/* ============================================================
   QUADROS — blocos de resumo que se reorganizam sozinhos
   conforme a largura da tela. No celular ficam dois por linha;
   no computador, quantos couberem.
   ============================================================ */

.quadros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
}

.quadro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaco-1);
  min-height: 104px;
  padding: var(--espaco-4);
  border-radius: var(--raio);
  background: var(--cor-papel);
  box-shadow: var(--sombra);
  text-align: left;
}

.quadro__valor {
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--texto-grande);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.quadro__nota {
  font-size: var(--texto-mini);
  color: var(--cor-texto-claro);
}

/* Ocupa duas colunas — usado no custo total e na simulação */
.quadro--largo { grid-column: span 2; }

/* O número principal, em azul da marca */
.quadro--destaque {
  background: linear-gradient(150deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
  color: #fff;
}

.quadro--destaque .rotulo { color: rgba(255, 255, 255, 0.62); }
.quadro--destaque .quadro__valor { font-size: var(--texto-titulo); }
.quadro--destaque .quadro__nota { color: rgba(255, 255, 255, 0.72); }

/* O quadro que troca de simulação */
.quadro--simulacao {
  flex-direction: row;
  align-items: center;
  gap: var(--espaco-3);
  transition: transform var(--transicao);
}

.quadro--simulacao:active { transform: scale(0.99); }

.quadro__abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.quadro__nome {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: var(--texto-medio);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Telas bem estreitas: um quadro por linha */
@media (max-width: 359px) {
  .quadros { grid-template-columns: 1fr; }
  .quadro--largo { grid-column: span 1; }
}

/* Botão de chamar no WhatsApp ---------------------------- */

.topo__botao--zap { color: var(--cor-sucesso); }

.topo__botao--zap:hover,
.topo__botao--zap:focus-visible { background: var(--cor-sucesso-clara); }

/* Segunda linha da ficha de arquivo (nome da pessoa) ------ */

.galeria__item .texto-mini {
  display: block;
  margin-top: 2px;
  font-size: var(--texto-mini);
  opacity: 0.85;
}

/* ============================================================
   DOCUMENTOS — quadrinhos da tela de documentos
   ============================================================ */

.documentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--espaco-3);
  margin-top: var(--espaco-4);
}

.documento {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--cor-papel);
  box-shadow: var(--sombra);
  text-align: left;
  transition: transform var(--transicao);
}

.documento:active { transform: scale(0.98); }

.documento__capa {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background-color: var(--cor-papel-suave);
  background-size: cover;
  background-position: center;
}

.documento__corpo {
  display: block;
  padding: var(--espaco-3);
}

.documento__nome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--texto-pequeno);
  line-height: 1.3;
  word-break: break-word;
}

.documento__nota {
  display: block;
  margin-top: 4px;
  font-size: var(--texto-mini);
  color: var(--cor-texto-suave);
}

/* Selo no canto: onde o arquivo está guardado */
.documento__marca {
  position: absolute;
  top: var(--espaco-2);
  right: var(--espaco-2);
  z-index: 1;
  padding: 3px 9px;
  border-radius: var(--raio-redondo);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-mini);
  font-weight: 700;
}

.documento__marca--link {
  background: var(--tom-verde-fundo);
  color: var(--tom-verde-frente);
}

.documento__marca--aqui {
  background: var(--cor-alerta-clara);
  color: var(--cor-alerta);
}

/* Aviso menos gritante quando ainda há espaço de sobra */
.aviso-linha--calma {
  background: var(--cor-papel);
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-linha);
}

.aviso-linha--calma .icone { color: var(--cor-alerta); }

/* ============================================================
   ARRASTAR PARA REORDENAR
   ============================================================ */

/* O punho: o dedo arrasta sem rolar a página */
.etapa__ordem--punho {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.etapa__ordem--punho:active { cursor: grabbing; }

/* O número já é redondo; aqui só ganha um contorno ao focar */
.etapa__ordem--punho { position: relative; }

.etapa__ordem--punho:focus-visible {
  outline: 3px solid var(--cor-secundaria);
  outline-offset: 2px;
}

/* O item enquanto está sendo movido */
.arrastando {
  opacity: 0.9;
  box-shadow: var(--sombra-alta);
  transform: scale(1.01);
  position: relative;
  z-index: 5;
}

/* Enquanto arrasta, nada mais é selecionado sem querer */
body.arrastando-algo {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* Prazo previsto da etapa ---------------------------------- */

.etapa__prazo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: var(--espaco-3) 0 0;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-suave);
}

.etapa__prazo .icone { flex: none; }

/* ============================================================
   ORÇAMENTOS — comparação de preços
   ============================================================ */

.orcamento {
  margin-bottom: var(--espaco-3);
  border-radius: var(--raio);
  background: var(--cor-papel);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.orcamento--comprado { opacity: 0.86; }

/* A faixa que abre e fecha ------------------------------- */

.orcamento__topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Some com a setinha padrão do navegador */
.orcamento__topo::-webkit-details-marker { display: none; }
.orcamento__topo::marker { content: ""; }

.orcamento__topo:hover { background: var(--cor-papel-suave); }

.orcamento__topo:focus-visible {
  outline: 3px solid var(--cor-secundaria);
  outline-offset: -3px;
}

.orcamento__nome {
  flex: 1;
  min-width: 0;
}

/* O que aparece com o item fechado */
.orcamento__resumo {
  flex: none;
  text-align: right;
  max-width: 46%;
}

.orcamento__preco {
  display: block;
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--texto-medio);
  letter-spacing: -0.02em;
}

.orcamento__seta {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--cor-texto-claro);
  transition: transform var(--transicao);
}

.orcamento[open] .orcamento__seta { transform: rotate(180deg); }

/* Com o item aberto, o resumo do topo vira repetição */
.orcamento[open] .orcamento__resumo { display: none; }

.orcamento__corpo {
  padding: 0 var(--espaco-4) var(--espaco-4);
}

.orcamento__economia {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-pequeno);
  background: var(--cor-sucesso-clara);
  color: var(--cor-sucesso);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.orcamento__economia .icone { flex: none; }

/* Celular: o resumo desce para a linha de baixo */
@media (max-width: 599px) {
  .orcamento__topo { flex-wrap: wrap; }
  .orcamento__nome { flex: 1 1 60%; }
  .orcamento__resumo { flex: 1 1 100%; order: 3; text-align: left; max-width: none; }
}

/* Lista de preços ---------------------------------------- */

.cotacoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.cotacao {
  padding: var(--espaco-3);
  border: 2px solid var(--cor-linha);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel-suave);
}

/* O mais barato ganha destaque verde */
.cotacao--melhor {
  border-color: var(--cor-sucesso);
  background: var(--cor-sucesso-clara);
}

.cotacao--escolhida {
  border-color: var(--cor-sucesso);
  background: var(--cor-papel);
}

.cotacao__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: 2px;
}

.cotacao__valor {
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--texto-medio);
  letter-spacing: -0.02em;
}

.cotacao--melhor .cotacao__valor { color: var(--cor-sucesso); }

.cotacao__loja {
  display: block;
  width: 100%;
  text-align: left;
}

.cotacao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}

/* No computador, valor e ações na mesma linha */
@media (min-width: 700px) {
  .cotacao {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "valor acoes" "loja acoes";
    align-items: center;
    column-gap: var(--espaco-4);
  }

  .cotacao__linha { grid-area: valor; margin: 0; }
  .cotacao__loja { grid-area: loja; }
  .cotacao__acoes { grid-area: acoes; margin: 0; justify-content: flex-end; }
}

/* ============================================================
   MENU LATERAL — respiro da marca e barra de rolagem discreta
   ============================================================ */

/* A marca precisa de ar em volta, não de uma altura fixa que
   a espreme contra o topo. */
.lateral__marca {
  display: flex;
  align-items: center;
  height: auto;
  padding: var(--espaco-5) var(--espaco-5) var(--espaco-4);
  margin-bottom: var(--espaco-2);
}

.lateral__marca img {
  height: 34px;
  width: auto;
}

/* Barra de rolagem do menu: quase invisível parada, um pouco
   mais visível quando o ponteiro está por perto. */
.lateral {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.lateral::-webkit-scrollbar { width: 6px; }

.lateral::-webkit-scrollbar-track { background: transparent; }

.lateral::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-redondo);
}

.lateral:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); }

/* Mesma discrição na rolagem da página e das janelas */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--cor-linha-forte) transparent;
}

.conteudo::-webkit-scrollbar,
.modal__corpo::-webkit-scrollbar,
.previa::-webkit-scrollbar { width: 6px; }

.conteudo::-webkit-scrollbar-track,
.modal__corpo::-webkit-scrollbar-track,
.previa::-webkit-scrollbar-track { background: transparent; }

.conteudo::-webkit-scrollbar-thumb,
.modal__corpo::-webkit-scrollbar-thumb,
.previa::-webkit-scrollbar-thumb {
  background: var(--cor-linha-forte);
  border-radius: var(--raio-redondo);
}

/* ============================================================
   SETUP — "O que você deseja fazer?"
   Quadrinhos que se reorganizam conforme a largura da tela.
   ============================================================ */

.setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--espaco-3);
}

.setup__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-3);
  min-height: 128px;
  padding: var(--espaco-4);
  border: 2px solid var(--cor-linha);
  border-radius: var(--raio);
  background: var(--cor-papel);
  text-align: left;
  transition: border-color var(--transicao), transform var(--transicao);
}

.setup__item:hover,
.setup__item:focus-visible {
  border-color: var(--cor-secundaria);
  transform: translateY(-2px);
}

.setup__item:active { transform: scale(0.98); }

.setup__texto {
  display: block;
  min-width: 0;
}

.setup__nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: var(--texto-pequeno);
  line-height: 1.25;
}

.setup__nota {
  display: block;
  margin-top: 3px;
  font-size: var(--texto-mini);
  color: var(--cor-texto-suave);
  line-height: 1.35;
}

/* Celular estreito: ícone e texto lado a lado, ocupando a linha */
@media (max-width: 379px) {
  .setup { grid-template-columns: 1fr; }

  .setup__item {
    flex-direction: row;
    align-items: center;
    min-height: 0;
  }
}
/* ============================================================
   TELA DE ATIVAÇÃO
   A única coisa que aparece enquanto a licença não é confirmada.
   ============================================================ */

/* O seletor precisa do id junto da classe: o CSS base define
   #aplicativo como coluna flexível, e sem o id aqui aquela regra
   venceria esta por ter mais peso. */
#aplicativo.tela-ativacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--espaco-5) var(--espaco-4);
  background: linear-gradient(160deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
  overflow-y: auto;
}

/* Garante que nada do aplicativo apareça por trás, inclusive nos
   tamanhos de tela em que o menu fica fixo. */
#aplicativo.tela-ativacao .lateral,
#aplicativo.tela-ativacao .barra-inferior,
#aplicativo.tela-ativacao .topo,
#aplicativo.tela-ativacao .painel-principal { display: none; }

.ativacao {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: var(--espaco-6) var(--espaco-5);
  border-radius: var(--raio-grande);
  background: var(--cor-papel);
  box-shadow: var(--sombra-alta);
  text-align: center;
}

.ativacao__marca {
  height: 40px;
  width: auto;
  margin-bottom: var(--espaco-5);
}

.ativacao h1 {
  margin: 0 0 var(--espaco-2);
  font-size: var(--texto-titulo);
  letter-spacing: -0.03em;
}

.ativacao__texto {
  margin: 0 0 var(--espaco-5);
  color: var(--cor-texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.5;
}

.ativacao__rotulo {
  display: block;
  margin-bottom: var(--espaco-2);
  text-align: left;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--texto-pequeno);
}

.ativacao__campo {
  width: 100%;
  margin-bottom: var(--espaco-3);
  padding: 16px var(--espaco-4);
  border: 2px solid var(--cor-linha);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel-suave);
  font-family: var(--fonte-dados);
  font-size: var(--texto-medio);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.ativacao__campo:focus {
  outline: none;
  border-color: var(--cor-secundaria);
  background: var(--cor-papel);
}

.ativacao__erro {
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-3);
  border-radius: var(--raio-pequeno);
  background: var(--cor-erro-clara);
  color: var(--cor-erro);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

/* Link discreto embaixo do botão principal */
.ativacao__link {
  display: block;
  width: 100%;
  margin-top: var(--espaco-4);
  padding: var(--espaco-2);
  background: none;
  color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ativacao__link:hover,
.ativacao__link:focus-visible { color: var(--cor-secundaria); }

/* Confirmação de que o pedido da chave foi enviado */
.ativacao__aviso {
  margin: 0 0 var(--espaco-3);
  /* Texto mais longo agora: precisa respirar */
  padding: var(--espaco-3);
  border-radius: var(--raio-pequeno);
  background: var(--cor-sucesso-clara);
  color: var(--cor-sucesso);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

.ativacao__aviso strong { display: inline; }

/* O campo de e-mail não é código: sem caixa alta nem espaçamento */
.ativacao__campo--email {
  font-family: var(--fonte-corpo);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

/* A chave mostrada por inteiro, para copiar ou anotar ----- */

.chave-licenca {
  margin: var(--espaco-4) 0 0;
  padding: var(--espaco-4);
  border: 2px dashed var(--cor-linha);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel-suave);
  font-family: var(--fonte-dados);
  font-size: var(--texto-medio);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

/* Celular: menos respiro em volta e campo um pouco menor, para
   a chave inteira caber sem quebrar linha. */
@media (max-width: 419px) {
  #aplicativo.tela-ativacao { padding: var(--espaco-4) var(--espaco-3); }

  .ativacao { padding: var(--espaco-5) var(--espaco-4); }
  .ativacao__marca { height: 34px; margin-bottom: var(--espaco-4); }
  .ativacao h1 { font-size: var(--texto-grande); }
  .ativacao__campo { font-size: var(--texto-pequeno); letter-spacing: 0.04em; }
  .chave-licenca { font-size: var(--texto-pequeno); letter-spacing: 0.04em; }
}

/* Tela baixa e deitada: o cartão rola em vez de ficar cortado */
@media (max-height: 620px) {
  #aplicativo.tela-ativacao {
    justify-content: flex-start;
    padding-top: var(--espaco-5);
    padding-bottom: var(--espaco-5);
  }

  .ativacao__marca { height: 30px; margin-bottom: var(--espaco-3); }
  .ativacao__link { margin-top: var(--espaco-3); }
}

/* ============================================================
   SELO DE BACKUP NO TOPO
   Aparece só quando a última cópia começa a envelhecer.
   ============================================================ */

.selo-backup {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 8px var(--espaco-3);
  border-radius: var(--raio-redondo);
  background: var(--cor-papel-suave);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-mini);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}

.selo-backup:hover,
.selo-backup:focus-visible {
  background: var(--cor-linha);
  color: var(--cor-texto);
}

.selo-backup__ponto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--cor-texto-claro);
}

/* Passou da hora: laranja, o mesmo tom das ações da marca */
.selo-backup--alerta {
  background: var(--cor-alerta-clara);
  color: var(--cor-alerta);
}

.selo-backup--alerta .selo-backup__ponto { background: var(--cor-alerta); }

.selo-backup--alerta:hover,
.selo-backup--alerta:focus-visible {
  background: var(--cor-alerta);
  color: #fff;
}

.selo-backup--alerta:hover .selo-backup__ponto { background: #fff; }

/* No celular o espaço é curto: fica só o pontinho */
@media (max-width: 599px) {
  .selo-backup { padding: 8px; }
  .selo-backup span:not(.selo-backup__ponto) { display: none; }
}