/* Identidade visual reaproveitada do site institucional do LIEV/UFPB
   (ccs.ufpb.br/liev): fundo branco, texto cinza-escuro, IBM Plex Sans,
   verde institucional #00420C como única cor de destaque. */

:root{
  --verde: #00420C;
  --verde-escuro: #002E08;
  --verde-suave: #E7F0E9;
  --fundo: #FFFFFF;
  --superficie: #F7F8F7;
  --texto: #1A1A1A;
  --texto-suave: #5C6560;
  --borda: #DDE3DE;
  --amarelo: #8A5A12;
  --amarelo-suave: #F5E9D4;
  --vermelho: #A3271E;
  --vermelho-suave: #F6E3E1;
  --sombra: 0 1px 2px rgba(0,0,0,0.05), 0 6px 18px rgba(0,0,0,0.06);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--fundo);
  color:var(--texto);
  font-family:"IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:560px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:24px 20px 40px;
}

.marca{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:20px;
  margin-bottom:24px;
  border-bottom:1px solid var(--borda);
}
.marca .selo-verde{
  width:8px;height:8px;border-radius:50%;background:var(--verde);flex-shrink:0;
}
.marca-texto{display:flex;flex-direction:column;line-height:1.25;}
.marca-texto b{font-size:13.5px;color:var(--texto);}
.marca-texto span{font-size:11.5px;color:var(--texto-suave);letter-spacing:.02em;}

h1{font-size:22px;font-weight:600;margin:0 0 8px;color:var(--texto);}
h2{font-size:17px;font-weight:600;margin:0 0 6px;color:var(--texto);}
p{margin:0 0 14px;color:var(--texto-suave);}
p.forte{color:var(--texto);}

.cartao{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:12px;
  padding:20px;
  margin-bottom:16px;
}

.btn{
  appearance:none;
  border:none;
  border-radius:8px;
  padding:13px 20px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  background:var(--verde);
  color:#fff;
  transition:background .15s ease;
}
.btn:hover{background:var(--verde-escuro);}
.btn:disabled{background:#B9C2BC;cursor:not-allowed;}
.btn.secundario{
  background:transparent;
  color:var(--verde);
  border:1.5px solid var(--verde);
}
.btn.secundario:hover{background:var(--verde-suave);}
.btn.perigo{background:var(--vermelho);}
.btn.bloco{width:100%;}

.linha-botoes{display:flex;gap:10px;margin-top:16px;}
.linha-botoes .btn{flex:1;}

.selo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
}
.selo.verde{background:var(--verde-suave);color:var(--verde);}
.selo.amarelo{background:var(--amarelo-suave);color:var(--amarelo);}
.selo.vermelho{background:var(--vermelho-suave);color:var(--vermelho);}
.selo .ponto{width:7px;height:7px;border-radius:50%;background:currentColor;}

.passo-indicador{
  display:flex;
  gap:6px;
  margin-bottom:22px;
}
.passo-indicador span{
  flex:1;
  height:4px;
  border-radius:2px;
  background:var(--borda);
}
.passo-indicador span.ativo{background:var(--verde);}
.passo-indicador span.feito{background:var(--verde);opacity:.5;}

.medidor{
  height:64px;
  border-radius:8px;
  background:var(--fundo);
  border:1px solid var(--borda);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 10px;
  overflow:hidden;
}
.medidor .barra{
  flex:1;
  max-width:6px;
  background:var(--verde);
  border-radius:999px;
  height:6%;
  min-height:3px;
  transition:height .09s ease-out;
}

.timer{
  font-variant-numeric:tabular-nums;
  font-size:32px;
  font-weight:600;
  text-align:center;
  color:var(--texto);
  margin:14px 0;
}

.rotulo{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--texto-suave);
  margin-bottom:6px;
  display:block;
}

audio{width:100%;margin-top:10px;}

.rodape-app{
  margin-top:auto;
  padding-top:24px;
  text-align:center;
  font-size:11.5px;
  color:var(--texto-suave);
}

.aviso{
  background:var(--amarelo-suave);
  color:var(--amarelo);
  border-radius:8px;
  padding:12px 14px;
  font-size:13.5px;
  margin-bottom:14px;
}
.aviso.erro{background:var(--vermelho-suave);color:var(--vermelho);}

input[type="checkbox"]{width:16px;height:16px;accent-color:var(--verde);}
label.consentimento{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--texto);}

textarea, input[type="text"]{
  width:100%;
  font-family:inherit;
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--borda);
  border-radius:8px;
  background:#fff;
  color:var(--texto);
}

.oculto{display:none !important;}