/* estilo.css - tela de campo do Fabio Bianchi.
   Autoria: Claude (Opus 5), 01/08/2026.

   Regra que manda em tudo aqui: ele esta de pe, com o celular numa mao, o cliente
   apontando parede. Por isso:
   - acao principal SEMPRE no rodape, onde o polegar alcanca sem trocar a mao
   - alvo de toque nunca abaixo de 48px
   - o total fica fixo na tela o tempo todo, nunca precisa rolar pra ver
   - fonte de 16px pra cima nos campos, senao o iPhone da zoom sozinho ao focar */

:root {
  color-scheme: light dark;
  --verde: #0b3d2e;
  --verde-claro: #14664a;
  --fundo: #ffffff;
  --superficie: #f4f6f5;
  --borda: #d9dedc;
  --texto: #14201b;
  --fraco: #5d6b65;
  --perigo: #b3261e;
  --toque: 48px;
  --raio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121714;
    --superficie: #1c231f;
    --borda: #2e3833;
    --texto: #e8ede9;
    --fraco: #9aa8a1;
    --verde: #1d7a5a;
    --verde-claro: #249168;
    --perigo: #f2b8b5;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Cada "tela" ocupa a altura toda: topo fixo, miolo rolando, rodape fixo. */
.tela {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.tela[hidden] { display: none; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: max(.6rem, env(safe-area-inset-top)) .75rem .6rem;
  background: var(--verde);
  color: #fff;
  min-height: var(--toque);
}
.topo strong { font-size: 1rem; }
.topo .texto { color: #fff; }

.rolagem {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .75rem;
}

.rodape {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}
.rodape .principal { flex: 1; }

/* O total. Fica fixo no rodape porque e a informacao que o cliente pergunta a cada
   item adicionado: "e agora, quanto ficou?". Rolar pra descobrir seria falha. */
.rodape-total { justify-content: space-between; }
.total { display: flex; flex-direction: column; line-height: 1.15; }
.total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

button {
  font: inherit;
  min-height: var(--toque);
  border-radius: var(--raio);
  border: 1px solid transparent;
  padding: 0 1rem;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.principal { background: var(--verde); color: #fff; font-weight: 600; }
.principal:active { background: var(--verde-claro); }
.grande { width: 100%; font-size: 1.05rem; }
.secundario { background: var(--superficie); border-color: var(--borda); }
.texto { padding: 0 .5rem; min-height: var(--toque); }
.perigo { color: var(--perigo); }
.pequeno-btn { min-height: 40px; font-size: .9rem; }

input, select, textarea {
  font: inherit;
  font-size: 16px;
  width: 100%;
  min-height: var(--toque);
  padding: .6rem .7rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  color: var(--texto);
}
textarea { min-height: 4.5rem; }
label { display: block; font-size: .85rem; color: var(--fraco); margin: .8rem 0 .25rem; }
.obrigatorio { color: var(--perigo); }

.formulario { padding-bottom: 1rem; }
.bloco { border-top: 1px solid var(--borda); margin-top: 1rem; padding-top: .25rem; }
.linha { display: flex; gap: .5rem; align-items: flex-end; }
.linha.fim { justify-content: flex-end; margin-top: 1.2rem; }
.metade { flex: 1; }
.terco { flex: 0 0 5.5rem; }

/* Estados que o campos.js marca sozinho enquanto a pessoa digita. Campo vazio nao
   reprova: so fica vermelho o que foi preenchido e nao fecha (CEP curto, telefone
   incompleto, UF que nao existe). */
input.invalido, select.invalido { border-color: var(--perigo); }
input.valido { border-color: var(--verde); }
.linha label { margin-top: 0; }

.centro { margin: auto; padding: 1.5rem; width: 100%; max-width: 26rem; }
.centro h1 { margin: 0 0 .1rem; font-size: 1.4rem; }
.centro button { width: 100%; margin-top: 1rem; }

.fraco { color: var(--fraco); }
.pequeno { font-size: .82rem; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erro { color: var(--perigo); font-size: .9rem; margin: .6rem 0 0; }
.vazio { text-align: center; color: var(--fraco); padding: 3rem 1rem; line-height: 1.7; }

.barra-ambiente, .barra-busca { padding: .6rem .75rem 0; }
.barra-busca { display: flex; gap: .5rem; padding-bottom: .6rem; }
.barra-busca input { flex: 1; }
.barra-busca button { white-space: nowrap; padding: 0 .75rem; }
.barra-ambiente label { margin-top: 0; }
.barra-ambiente .linha button { width: var(--toque); padding: 0; font-size: 1.4rem; }

/* Chips de grupo: navegar por toque em vez de digitar. Digitar e o ultimo recurso. */
.chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: 0 .75rem .6rem;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 .85rem;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  font-size: .9rem;
  white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--verde); color: #fff; border-color: var(--verde); }

/* Subcategoria: visualmente mais leve que a categoria, pra ficar claro que e o segundo
   nivel e nao mais uma fila de opcoes do mesmo peso. */
.chips-sub { padding-top: 0; }
.chips-sub .chip { min-height: 34px; font-size: .82rem; background: transparent; }
.chips-sub .chip[aria-pressed="true"] { background: var(--verde-claro); border-color: var(--verde-claro); color: #fff; }
.chips[hidden] { display: none; }

.catalogo { padding-top: 0; }

/* Linha do catalogo: o alvo de toque e a linha INTEIRA, nao so o botao +.
   Errar o toque na frente do cliente e o tipo de atrito que mata a confianca. */
.item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  text-align: left;
  min-height: 60px;
  padding: .6rem .75rem;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  color: inherit;
}
.item:active { background: var(--superficie); }
.item-texto { flex: 1; min-width: 0; }
.item-nome { display: block; line-height: 1.3; }
.item-meta { display: block; font-size: .8rem; color: var(--fraco); margin-top: .15rem; }
.item-preco { font-variant-numeric: tabular-nums; white-space: nowrap; }
.contador {
  min-width: 28px; height: 28px; padding: 0 .4rem;
  border-radius: 999px; background: var(--verde); color: #fff;
  font-size: .85rem; font-weight: 600;
  display: grid; place-items: center;
}

.grupo-titulo {
  position: sticky; top: 0; z-index: 1;
  background: var(--fundo);
  padding: .8rem .75rem .3rem;
  font-size: .8rem; font-weight: 700;
  color: var(--fraco); text-transform: uppercase; letter-spacing: .04em;
}

/* Revisao */
.ambiente-bloco { margin-bottom: 1.2rem; }
.ambiente-nome { font-size: .8rem; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .04em; color: var(--fraco); margin: 0 0 .3rem; }
.rev-item { display: flex; align-items: center; gap: .5rem; padding: .5rem 0;
            border-bottom: 1px solid var(--borda); }
.rev-texto { flex: 1; min-width: 0; }
.rev-nome { display: block; line-height: 1.3; }
.rev-conta { display: block; font-size: .8rem; color: var(--fraco); margin-top: .15rem; }
.rev-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
.passo { width: 40px; min-height: 40px; padding: 0; border: 1px solid var(--borda);
         border-radius: var(--raio); background: var(--superficie); font-size: 1.2rem; }

.totais { margin-top: 1rem; border-top: 1px solid var(--borda); padding-top: .6rem; }
.totais div { display: flex; justify-content: space-between; padding: .25rem 0;
              font-variant-numeric: tabular-nums; }
.totais .destaque { font-size: 1.25rem; font-weight: 700; border-top: 1px solid var(--borda);
                    margin-top: .3rem; padding-top: .5rem; }

/* Cartao da lista de orcamentos */
.cartao {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie);
  padding: .75rem; margin-bottom: .6rem; min-height: var(--toque);
}
.cartao-topo { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.cartao-total { font-variant-numeric: tabular-nums; font-weight: 700; }
.cartao-meta { font-size: .82rem; color: var(--fraco); margin-top: .2rem; }

.etiqueta {
  display: inline-block; font-size: .72rem; padding: .1rem .45rem;
  border-radius: 999px; background: #0003; margin-left: .4rem;
}
.etiqueta.pendente { background: #b3261e; color: #fff; }

dialog {
  width: min(30rem, calc(100vw - 1.5rem));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  color: var(--texto);
  padding: 1rem;
}
dialog::backdrop { background: #0008; }
dialog h2 { margin: 0 0 .3rem; font-size: 1.1rem; }

/* Aviso curto (salvou, sem sinal, subiu). Nao usa alert(): alert trava a tela e
   exige um toque extra pra fechar, com o cliente esperando na frente. */
.aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 50;
  background: var(--texto); color: var(--fundo);
  padding: .6rem 1rem; border-radius: 999px;
  font-size: .9rem; max-width: calc(100vw - 2rem); text-align: center;
}
.aviso[hidden] { display: none; }

@media (min-width: 720px) {
  .tela { max-width: 44rem; margin: 0 auto; border-inline: 1px solid var(--borda); }
}