/* Orô — visual pensado para celular primeiro: alvo grande, texto grande,
   pouca coisa na tela de cada vez. */
:root{
  --verde:#13463c; --verde-claro:#1d7a63; --area:#f4f6f1; --cartao:#fff;
  --linha:#dce5dd; --texto:#17332c; --suave:#5d7169; --erro:#a3341f; --ok:#1d7a63;
  --raio:16px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}  /* display:flex dos blocos não pode vencer o hidden */
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--area); color:var(--texto); font-size:17px; line-height:1.55;
  padding-bottom:84px;
}
header{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  background:var(--verde); color:#fff; padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top));
}
header h1{font-size:19px; margin:0; flex:1; font-weight:600}
.icone{
  background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:50%;
  width:40px; height:40px; font-size:20px; cursor:pointer;
}
/* Botão escrito em vez de símbolo: alguns Android não têm o desenho na fonte. */
.texto{
  background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:20px;
  padding:8px 16px; font:inherit; font-size:15px; cursor:pointer;
}
main{max-width:720px; margin:0 auto; padding:16px}
.carregando{color:var(--suave)}

h2{font-size:22px; margin:4px 0 14px}
h3{font-size:16px; margin:22px 0 8px; color:var(--suave); text-transform:uppercase; letter-spacing:.06em}
p.ajuda{color:var(--suave); font-size:15px; margin:6px 0 16px}

.cartao{background:var(--cartao); border:1px solid var(--linha); border-radius:var(--raio); padding:18px; margin-bottom:14px}

button.grande, a.grande{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--verde-claro); color:#fff; border:0; border-radius:var(--raio);
  padding:16px; font-size:18px; font-weight:600; cursor:pointer; margin:10px 0;
}
button.calma{background:#e7efe9; color:var(--verde)}
button.grande:disabled{opacity:.55}

/* lista de cursos e lições: alvos altos, fáceis de acertar com o dedo */
.item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--cartao); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px; margin-bottom:10px; font:inherit; color:inherit; cursor:pointer;
}
.item .num{
  flex:0 0 42px; height:42px; border-radius:50%; background:#eef3ee; color:var(--verde);
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.item.feita .num{background:var(--verde-claro); color:#fff}
.item b{display:block; font-size:17px}
.item small{color:var(--suave)}

.barra{height:10px; border-radius:6px; background:#e4eae4; overflow:hidden; margin:10px 0 4px}
.barra i{display:block; height:100%; background:var(--verde-claro)}

/* falas: toque para ver a tradução */
.fala{
  background:var(--cartao); border:1px solid var(--linha); border-left:5px solid var(--verde-claro);
  border-radius:12px; padding:14px 16px; margin-bottom:10px; cursor:pointer;
}
.fala .alvo{font-size:19px; font-weight:600}
.fala .pt{color:var(--suave); margin-top:8px; display:none}
.fala.aberta .pt{display:block}
.fala .toque{font-size:13px; color:var(--verde-claro); margin-top:8px}
.fala.aberta .toque{display:none}
.som{background:none; border:0; font-size:20px; cursor:pointer; float:right; padding:0 0 0 10px}

audio{width:100%; margin:6px 0 14px}

details{background:var(--cartao); border:1px solid var(--linha); border-radius:var(--raio); padding:14px 16px; margin-bottom:12px}
details summary{cursor:pointer; font-weight:600}
details p{margin:10px 0 0}

input,select,textarea{
  width:100%; padding:14px; font:inherit; border:1px solid #c3d0c8;
  border-radius:12px; background:#fff;
}
label{display:block; font-size:15px; margin:14px 0 6px; font-weight:600}

.certo{color:var(--ok); font-weight:600}
.errado{color:var(--erro); font-weight:600}
.selo{display:inline-block; font-size:12px; background:#fdf3d7; color:#7a5a12; border-radius:20px; padding:2px 10px; margin-left:6px}

/* menu de baixo, estilo aplicativo */
nav{
  position:fixed; left:0; right:0; bottom:0; display:flex; background:#fff;
  border-top:1px solid var(--linha); padding-bottom:env(safe-area-inset-bottom); z-index:5;
}
nav button{
  flex:1; background:none; border:0; padding:10px 4px; font:inherit; font-size:13px;
  color:var(--suave); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
}
nav button span{font-size:22px}
nav button.ativo{color:var(--verde-claro); font-weight:600}

#aviso{
  position:fixed; left:12px; right:12px; bottom:92px; background:var(--verde); color:#fff;
  padding:12px 16px; border-radius:12px; z-index:9; text-align:center;
}

.codigo{font-size:30px; letter-spacing:.18em; text-align:center; font-weight:700; color:var(--verde)}
table{width:100%; border-collapse:collapse; font-size:15px}
td,th{text-align:left; padding:8px 4px; border-bottom:1px solid var(--linha)}

@media(min-width:760px){
  body{font-size:18px; padding-bottom:20px}
  nav{position:static; border:0; background:none; max-width:720px; margin:0 auto; padding:8px 16px}
  nav button{flex:0 0 auto; flex-direction:row; gap:8px; font-size:16px; padding:10px 18px}
}