/* ============================================================
   Fio — sistema de design
   Poucas cores, muito espaço, sombras discretas, sem degradês.
   ============================================================ */

:root {
  /* superfícies */
  --fundo:        #FAF9F8;
  --superficie:   #FFFFFF;
  --elevado:      #FFFFFF;
  --bege:         #F5F0E9;
  --cinza:        #F3F1F0;

  /* texto */
  --tinta:        #171415;
  --tinta-media:  #6C6469;
  --tinta-fraca:  #A49BA0;

  /* traços */
  --linha:        #ECE7E9;
  --linha-forte:  #DFD8DB;

  /* acento — um só, usado com parcimônia.
     --acento vale sobre branco (4.6:1). Sobre o rosa claro, texto pequeno
     usa --acento-escuro (5.1:1), senão não passa no contraste mínimo. */
  --acento:        #D6336C;
  --acento-escuro: #BE2A5D;
  --acento-toque:  #FDEFF4;
  --acento-linha:  #F7D3E0;

  /* estados */
  --verde:        #2E7355;
  --verde-toque:  #EDF4F0;
  --ambar:        #8A6524;
  --ambar-toque:  #FAF3E6;

  /* medidas */
  --r-p:  10px;
  --r-m:  16px;
  --r-g:  22px;
  --sombra:      0 1px 2px rgba(23, 20, 21, .04), 0 4px 16px rgba(23, 20, 21, .045);
  --sombra-alta: 0 2px 6px rgba(23, 20, 21, .06), 0 18px 44px rgba(23, 20, 21, .13);
  --barra: 74px;   /* altura da barra de abas */
}

*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden precisa vencer as classes que definem display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }

.ico {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-p { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   Moldura
   ------------------------------------------------------------ */
.aplicativo {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fundo);
  position: relative;
}
@media (min-width: 900px) {
  body { background: #F0EDEC; }
  .aplicativo { box-shadow: 0 0 0 1px var(--linha), 0 24px 70px rgba(23,20,21,.08); }
}

.conteudo {
  padding: 0 20px calc(var(--barra) + 28px);
}

/* ------------------------------------------------------------
   Cabeçalho das telas internas
   ------------------------------------------------------------ */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 0 8px;
  margin-bottom: 4px;
  background: rgba(250, 249, 248, .85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
.cabecalho.rolou { border-bottom-color: var(--linha); }
.cabecalho-voltar {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: none;
  color: var(--tinta);
}
.cabecalho-voltar:active { background: var(--cinza); }
.cabecalho-titulo {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.cabecalho-fim { min-width: 40px; display: flex; justify-content: flex-end; }

/* ------------------------------------------------------------
   Telas
   ------------------------------------------------------------ */
.tela { display: none; }
.tela.ativa { display: block; animation: surge .26s cubic-bezier(.2, .7, .3, 1); }
@keyframes surge {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tela.ativa { animation: none; }
}

.topo-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 22px;
}
.saudacao, .titulo-pagina {
  margin: 0;
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -0.028em;
  line-height: 1.15;
}
.saudacao-sub, .subtitulo-pagina {
  margin: 5px 0 0;
  font-size: 15px;
  color: var(--tinta-media);
}

.secao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 30px 0 12px;
}
.secao-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   Indicadores do painel
   ------------------------------------------------------------ */
.indicadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 18px 4px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
}
.indicador {
  text-align: center;
  padding: 0 6px;
  border-right: 1px solid var(--linha);
}
.indicador:last-child { border-right: none; }
.indicador-numero {
  display: block;
  font-size: 24px;
  font-weight: 660;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.indicador-rotulo {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--tinta-media);
}

/* ------------------------------------------------------------
   Filtros
   ------------------------------------------------------------ */
.filtros {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -20px 16px;
  padding: 2px 20px;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 520;
  color: var(--tinta-media);
  background: none;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.filtro.ativo {
  color: var(--superficie);
  background: var(--tinta);
  border-color: var(--tinta);
}

/* ------------------------------------------------------------
   Lista de produtos
   ------------------------------------------------------------ */
.item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
}
.item:active { transform: scale(.985); box-shadow: var(--sombra); }

.miniatura {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 13px;
  object-fit: cover;
  background: var(--bege);
  display: grid; place-items: center;
  color: var(--tinta-fraca);
}
.miniatura .ico { width: 22px; height: 22px; stroke-width: 1.4; }

.item-meio { flex: 1; min-width: 0; }
.item-nome {
  font-size: 15.5px;
  font-weight: 580;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--tinta-media);
}
.item-preco { font-weight: 580; color: var(--acento); font-variant-numeric: tabular-nums; }
.item-custo { font-weight: 560; color: var(--tinta); font-variant-numeric: tabular-nums; }
.item-fim { flex: none; display: flex; align-items: center; gap: 6px; color: var(--tinta-fraca); }

.selo {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: .002em;
  border-radius: 7px;
  white-space: nowrap;
}
.selo-fabricado  { color: var(--ambar); background: var(--ambar-toque); }
.selo-disponivel { color: var(--acento-escuro); background: var(--acento-toque); }
.selo-vendido    { color: var(--verde); background: var(--verde-toque); }

/* ------------------------------------------------------------
   Formulário
   ------------------------------------------------------------ */
.grupo {
  padding: 18px;
  margin-bottom: 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
}
.grupo-titulo {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.opcional {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-fraca);
}

.campo { display: block; margin-bottom: 14px; }
.campo:last-child { margin-bottom: 0; }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 540;
  color: var(--tinta-media);
}
.ajuda-campo {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

input[type="text"], input[type="date"], select, textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  font-size: 16px;
  background: var(--cinza);
  border: 1.5px solid transparent;
  border-radius: var(--r-p);
  outline: none;
  transition: background .15s, border-color .15s;
}
textarea { height: auto; min-height: 92px; padding: 13px 14px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  background: var(--superficie);
  border-color: var(--tinta);
}
input::placeholder, textarea::placeholder { color: var(--tinta-fraca); }

.selecao { position: relative; }
.selecao select { appearance: none; padding-right: 44px; }
.selecao-seta {
  position: absolute;
  right: 13px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--tinta-media);
  width: 20px; height: 20px;
}

.campo-unidade {
  display: flex;
  align-items: center;
  background: var(--cinza);
  border: 1.5px solid transparent;
  border-radius: var(--r-p);
  transition: background .15s, border-color .15s;
}
.campo-unidade:focus-within { background: var(--superficie); border-color: var(--tinta); }
.campo-unidade input { background: none; border: none; }
.campo-unidade input:focus { background: none; }
.unidade {
  padding: 0 14px 0 2px;
  font-size: 15px;
  color: var(--tinta-fraca);
}
.campo-unidade-antes .unidade { padding: 0 2px 0 14px; }
.campo-unidade-antes input { padding-left: 6px; }

.previa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 14px;
  color: var(--tinta-media);
}
.previa strong {
  font-size: 15.5px;
  font-weight: 620;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* atalhos (chips selecionáveis) */
.atalhos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.atalho {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 520;
  color: var(--tinta-media);
  background: var(--cinza);
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.atalho.ativo {
  color: var(--acento-escuro);
  background: var(--acento-toque);
  border-color: var(--acento-linha);
}

.lista-custos { display: grid; gap: 9px; }
.custo-linha { display: grid; grid-template-columns: 1fr 104px 38px; gap: 8px; align-items: center; }
.custo-linha input { height: 46px; font-size: 15px; }
.custo-x {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: none;
  color: var(--tinta-fraca);
}
.custo-x:active { background: var(--cinza); }

.foto-previa {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-m);
  margin-bottom: 10px;
  background: var(--bege);
}
.foto-acoes { display: flex; gap: 8px; align-items: center; }
.foto-acoes .botao-secundario { flex: 1; }

/* ------------------------------------------------------------
   Botões
   ------------------------------------------------------------ */
.botao-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFF;
  background: var(--tinta);
  border: none;
  border-radius: 14px;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), opacity .15s;
}
.botao-principal:active { transform: scale(.985); opacity: .9; }
.botao-principal.perigo { background: #A8323F; }

.botao-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 560;
  color: var(--tinta);
  background: var(--cinza);
  border: none;
  border-radius: 13px;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), background .15s;
}
.botao-secundario:active { transform: scale(.985); background: var(--linha); }
.botao-arquivo { cursor: pointer; }

.botao-icone {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
  transition: background .15s;
}
.botao-icone:active { background: var(--cinza); }
.botao-icone-forte { color: #FFF; background: var(--tinta); border-color: var(--tinta); }
.botao-icone-forte:active { background: #332C30; }

.botao-texto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  padding: 6px 0;
  font-size: 14.5px;
  font-weight: 560;
  color: var(--acento);
  background: none;
  border: none;
}
.botao-perigo { color: #A8323F; }

.rodape-acao { margin-top: 22px; }

/* ------------------------------------------------------------
   Resultado do cálculo
   ------------------------------------------------------------ */
.destaque {
  padding: 26px 20px 22px;
  margin-bottom: 14px;
  text-align: center;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
}
.destaque-rotulo {
  font-size: 13px;
  font-weight: 560;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.destaque-valor {
  display: block;
  margin: 6px 0 2px;
  font-size: 42px;
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.destaque-nota { font-size: 14px; color: var(--tinta-media); }
.destaque-nota strong { color: var(--verde); font-weight: 600; }

.linhas { display: block; }
.linha-valor {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--linha);
}
.linha-valor:last-child { border-bottom: none; }
.linha-valor > span:first-child { color: var(--tinta-media); }
.linha-valor > span:last-child { font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-detalhe { font-size: 13px; color: var(--tinta-fraca); display: block; margin-top: 1px; }
.linha-filha > span:first-child { padding-left: 14px; font-size: 14px; color: var(--tinta-fraca); }
.linha-total {
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1.5px solid var(--tinta);
  border-bottom: none;
  font-size: 17px;
  font-weight: 620;
}
.linha-total > span:first-child { color: var(--tinta) !important; }
.linha-total > span:last-child { font-weight: 680; }

.opcoes { display: grid; gap: 8px; }
.opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--superficie);
  border: 1.5px solid var(--linha);
  border-radius: var(--r-m);
  transition: border-color .15s, background .15s;
}
.opcao-nome { font-size: 15px; font-weight: 560; }
.opcao-sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--tinta-media); }
.opcao-valor { font-size: 17px; font-weight: 620; color: var(--acento); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opcao.escolhida { border-color: var(--acento); background: var(--acento-toque); }
.opcao-marca {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--acento);
  color: #FFF;
}
.opcao-marca .ico { width: 13px; height: 13px; stroke-width: 2.4; }

/* ------------------------------------------------------------
   Textos do assistente
   ------------------------------------------------------------ */
.sanfona {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  margin-bottom: 10px;
  overflow: hidden;
}
.sanfona-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 17px;
  text-align: left;
  background: none;
  border: none;
}
.sanfona-nome { font-size: 15px; font-weight: 560; letter-spacing: -0.01em; }
.sanfona-dica { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-media); }
.sanfona-topo .ico {
  color: var(--tinta-fraca);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.sanfona.aberta .sanfona-topo .ico { transform: rotate(180deg); }
.sanfona-corpo { display: none; padding: 0 17px 17px; }
.sanfona.aberta .sanfona-corpo { display: block; animation: abre .22s cubic-bezier(.2,.7,.3,1); }
@keyframes abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.texto-gerado {
  padding: 15px 16px;
  background: var(--cinza);
  border-radius: 13px;
  font-size: 15px;
  line-height: 1.62;
  white-space: pre-line;
}
.texto-gerado + .botao-secundario { margin-top: 10px; height: 44px; font-size: 14.5px; }

/* ------------------------------------------------------------
   Barbantes
   ------------------------------------------------------------ */
.bola-cor {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(23, 20, 21, .1);
  background: var(--bege);
}

/* ------------------------------------------------------------
   Estado vazio
   ------------------------------------------------------------ */
.vazio {
  padding: 46px 24px 40px;
  text-align: center;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
}
.vazio-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--bege);
  color: var(--tinta-media);
}
.vazio-titulo { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.vazio-texto { margin: 0 0 20px; font-size: 14.5px; color: var(--tinta-media); }
.vazio .botao-principal { max-width: 240px; margin: 0 auto; height: 48px; font-size: 15px; }

/* ------------------------------------------------------------
   Barra de abas
   ------------------------------------------------------------ */
.abas {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 460px;
  height: calc(var(--barra) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--linha);
}
.aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  font-size: 11px;
  font-weight: 520;
  letter-spacing: -0.002em;
  color: var(--tinta-fraca);
  background: none;
  border: none;
  transition: color .18s;
}
.aba .ico { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.aba.ativa { color: var(--tinta); }
.aba.ativa .ico { transform: translateY(-1px); }
.aba:active .ico { transform: scale(.9); }

/* ------------------------------------------------------------
   Folha deslizante
   ------------------------------------------------------------ */
.folha-fundo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(23, 20, 21, .32);
  animation: escurece .2s ease;
}
@keyframes escurece { from { opacity: 0; } to { opacity: 1; } }
.folha-painel {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--sombra-alta);
  animation: sobe .3s cubic-bezier(.2, .8, .25, 1);
}
@keyframes sobe { from { transform: translateY(24px); } to { transform: none; } }
.folha-alca {
  width: 38px; height: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--linha-forte);
}
.folha-titulo {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.folha-texto { margin: -8px 0 18px; font-size: 15px; color: var(--tinta-media); }
.folha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.folha-acoes .botao-secundario, .folha-acoes .botao-principal { height: 50px; }

@media (min-width: 900px) {
  .folha-fundo { align-items: center; }
  .folha-painel { border-radius: 24px; max-height: 84vh; }
}

/* ------------------------------------------------------------
   Aviso
   ------------------------------------------------------------ */
.nota {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra) + 20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: 88vw;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 520;
  color: #FFF;
  background: var(--tinta);
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  animation: nota-entra .24s cubic-bezier(.2,.8,.25,1);
}
@keyframes nota-entra {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}