/* ==========================================================================
   BuuPi — estilo base
   Mobile-first. Sem dependências externas (a CSP não permite).
   ========================================================================== */

:root{
  --fundo:#f7f6f3;
  --superficie:#ffffff;
  --tinta:#1c1f24;
  --tinta-suave:#5f6672;
  --linha:#e3e0d9;
  --acento:#2f6b57;
  --acento-tinta:#ffffff;
  --acento-fundo:#e9f2ee;
  --erro:#9e3b3b;
  --erro-fundo:#fbeceb;
  --aviso-fundo:#fdf5e3;
  --aviso-linha:#e0a93c;
  --raio:14px;
}

@media (prefers-color-scheme: dark){
  :root{
    --fundo:#14161a;
    --superficie:#1c1f24;
    --tinta:#e9eaec;
    --tinta-suave:#9aa1ad;
    --linha:#2b2f36;
    --acento:#6cc0a0;
    --acento-tinta:#0e1a15;
    --acento-fundo:#1b2b25;
    --erro:#f0a3a0;
    --erro-fundo:#2c1a1a;
    --aviso-fundo:#2a2418;
    --aviso-linha:#8a6a22;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* Sem isto, o `display:flex` dos ecrãs vence o [hidden] do navegador
   e aparecem todos empilhados. */
[hidden]{display:none !important}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--fundo);
  color:var(--tinta);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--acento)}

/* -------------------------------------------------------------- ecrãs */

.ecra{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:24px;
  text-align:center;
}

/* O ecrã principal encosta ao topo em vez de centrar */
.ecra--app{
  justify-content:flex-start;
  text-align:left;
  padding:0;
}

.marca{
  font-size:38px;
  font-weight:600;
  letter-spacing:-0.02em;
}

.marca--pequena{font-size:20px;line-height:1.2}

.lema{
  color:var(--tinta-suave);
  font-size:15px;
  margin:0 0 22px;
}

.cartao{
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:20px 22px;
  width:100%;
  max-width:380px;
  text-align:left;
}

.cartao p{margin:0 0 10px}
.cartao p:last-child{margin:0}

.pequeno{font-size:13.5px;color:var(--tinta-suave);line-height:1.5}

/* ------------------------------------------------------------ formulários */

label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--tinta-suave);
  margin:14px 0 6px;
}

input[type=email],
input[type=text]{
  width:100%;
  font:inherit;
  color:var(--tinta);
  background:var(--fundo);
  border:1px solid var(--linha);
  border-radius:10px;
  padding:12px 14px;
  /* 16px evita que o iOS faça zoom ao focar o campo */
  font-size:16px;
}

input:focus{
  outline:2px solid var(--acento);
  outline-offset:1px;
  border-color:transparent;
}

.campo-codigo{
  text-align:center;
  font-size:28px !important;
  letter-spacing:10px;
  padding:14px 0 14px 10px;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------- botões */

.botao{
  display:block;
  width:100%;
  font:inherit;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  border:1px solid var(--linha);
  border-radius:11px;
  background:var(--superficie);
  color:var(--tinta);
  padding:13px 16px;
  margin-top:10px;
  /* alvo confortável para o polegar */
  min-height:48px;
}

.botao:hover{border-color:var(--tinta-suave)}
.botao:active{transform:translateY(1px)}
.botao:disabled{opacity:.55;cursor:default;transform:none}

.botao--principal{
  background:var(--acento);
  color:var(--acento-tinta);
  border-color:transparent;
}

.botao--discreto{
  background:transparent;
  border-color:transparent;
  color:var(--tinta-suave);
  font-weight:500;
  min-height:40px;
  padding:8px 12px;
}
.botao--discreto:hover{color:var(--tinta);border-color:transparent}

/* --------------------------------------------------------------- avisos */

.aviso{
  border-radius:10px;
  padding:10px 13px;
  font-size:14px;
  margin:0 0 12px !important;
  background:var(--erro-fundo);
  color:var(--erro);
  border:1px solid transparent;
}

.aviso--ok{
  background:var(--acento-fundo);
  color:var(--acento);
}

/* ------------------------------------------------------- ecrã principal */

.topo{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom,0));
  background:var(--superficie);
  border-bottom:1px solid var(--linha);
}
.topo .botao{width:auto;margin:0}

.conteudo{
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:20px 18px 60px;
}

.conteudo h2{
  font-size:17px;
  margin:26px 0 10px;
}
.conteudo > .cartao{max-width:none}
.conteudo > .cartao h2{margin:0 0 8px}

.lista{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  overflow:hidden;
}

.linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--linha);
}
.linha:last-child{border-bottom:0}
.linha .botao{width:auto;margin:0;flex:none}

.etiqueta{
  display:inline-block;
  margin-left:8px;
  padding:1px 8px;
  border-radius:99px;
  font-size:11.5px;
  font-weight:600;
  background:var(--acento-fundo);
  color:var(--acento);
  vertical-align:middle;
}

/* ------------------------------------------------------------- documentos */

.doc{
  max-width:720px;
  margin:0 auto;
  padding:28px 18px 64px;
}

.doc h1{
  font-size:26px;
  letter-spacing:-0.02em;
  margin:0 0 4px;
}

.doc h2{
  font-size:18px;
  margin:30px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--linha);
}

.meta{
  color:var(--tinta-suave);
  font-size:14px;
  margin:0 0 20px;
}

.destaque{
  background:var(--acento-fundo);
  border-left:4px solid var(--acento);
  border-radius:8px;
  padding:12px 16px;
  margin:0 0 24px;
}
.destaque p{margin:0;font-size:15px}

.doc ul{padding-left:20px}
.doc li{margin:5px 0}

hr{
  border:0;
  border-top:1px solid var(--linha);
  margin:34px 0 16px;
}

.rodape{
  color:var(--tinta-suave);
  font-size:14px;
  text-align:center;
  margin-top:22px;
}

/* ------------------------------------------------------------- utilitários */

.esconder{display:none !important}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .botao:active{transform:none}
}