/* Formação Taxi-Link — folha de estilo única.
   Desenhada para telemóvel em primeiro lugar; em ecrãs largos a coluna
   centra-se e não passa dos 560 px, para a medida de leitura se manter. */

:root{
  --fundo:#EDEEF0; --sup:#FFFFFF; --sup2:#F4F6F8; --sup3:#E9EDF1;
  --linha:#DBE1E8; --linha2:#C2CCD7;
  --tinta:#16202B; --tinta2:#4E5D6E; --tinta3:#7A8A9A;
  --azul:#17365D; --azul2:#E3EAF3; --sobre-azul:#FFFFFF;
  --ambar:#9A6C08; --ambar2:#FBF1D9; --ambar-linha:#E6CE95;
  --verde:#3C6B24; --verde2:#E6F0DD;
  --barro:#9E2A0B; --barro2:#FAE5DD;
  --arte-fundo:#E7E2D4; --arte-chao:#D3CDBC; --arte-ceu:#DCE6EC; --arte-tinta:#22303E;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --seguro-baixo:env(safe-area-inset-bottom,0px);
  --seguro-cima:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fundo:#0C1219; --sup:#161F2A; --sup2:#1D2733; --sup3:#26313E;
    --linha:#2B3745; --linha2:#3D4C5C;
    --tinta:#E7ECF2; --tinta2:#A4B2C2; --tinta3:#7F8FA0;
    --azul:#8FB4E2; --azul2:#1A2A3D; --sobre-azul:#0C1219;
    --ambar:#E0AC4E; --ambar2:#2A2213; --ambar-linha:#4E4025;
    --verde:#8CC062; --verde2:#1C2A16;
    --barro:#E68C6F; --barro2:#2D1811;
    --arte-fundo:#212D3B; --arte-chao:#2C3A4A; --arte-ceu:#1B2734; --arte-tinta:#D9E3ED;
  }
}
:root[data-tema="escuro"]{
  --fundo:#0C1219; --sup:#161F2A; --sup2:#1D2733; --sup3:#26313E;
  --linha:#2B3745; --linha2:#3D4C5C;
  --tinta:#E7ECF2; --tinta2:#A4B2C2; --tinta3:#7F8FA0;
  --azul:#8FB4E2; --azul2:#1A2A3D; --sobre-azul:#0C1219;
  --ambar:#E0AC4E; --ambar2:#2A2213; --ambar-linha:#4E4025;
  --verde:#8CC062; --verde2:#1C2A16;
  --barro:#E68C6F; --barro2:#2D1811;
  --arte-fundo:#212D3B; --arte-chao:#2C3A4A; --arte-ceu:#1B2734; --arte-tinta:#D9E3ED;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:var(--ui); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

/* Estrutura: topo fixo, corpo que rola, rodapé fixo ao alcance do polegar. */
.ecra{
  display:flex; flex-direction:column; min-height:100dvh; max-width:560px; margin:0 auto;
  background:var(--sup);
}
@media (min-width:600px){
  .ecra{min-height:100dvh; box-shadow:0 0 0 1px var(--linha)}
}

.topo{
  position:sticky; top:0; z-index:20; background:var(--sup);
  border-bottom:1px solid var(--linha); padding-top:var(--seguro-cima);
}
.topo-linha{display:flex; align-items:center; gap:6px; padding:10px 12px}
.topo h1{
  font-size:15px; font-weight:660; margin:0; flex:1; letter-spacing:-.01em; line-height:1.3;
  min-width:0;
}
.icone{
  background:none; border:0; color:var(--tinta2); font-size:22px; line-height:1; cursor:pointer;
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none;
  font-family:var(--ui);
}
.icone:hover{background:var(--sup2); color:var(--tinta)}
.atomos{display:flex; gap:3px; padding:0 12px 8px}
.atomos i{height:3px; border-radius:2px; background:var(--sup3); flex:1; display:block}
.atomos i.feito{background:var(--azul); opacity:.42}
.atomos i.agora{background:var(--azul)}

.corpo{flex:1; padding:16px 16px 24px; display:flex; flex-direction:column; gap:16px}

.rodape{
  position:sticky; bottom:0; z-index:20; background:var(--sup);
  border-top:1px solid var(--linha);
  padding:10px 16px calc(12px + var(--seguro-baixo));
  display:flex; flex-direction:column; gap:9px;
}

/* --- tipografia de conteúdo --- */
.texto{font-size:16.5px; line-height:1.62; color:var(--tinta2)}
.texto .seg{
  border-radius:4px; cursor:pointer; transition:color .18s, background-color .18s;
}
.texto .seg.ativo{
  color:var(--tinta); background:var(--ambar2); box-shadow:0 0 0 3px var(--ambar2);
}
.destaque{font-size:17px; font-weight:620; line-height:1.5; color:var(--tinta); margin:0}
.legenda{font-size:12.5px; color:var(--tinta3); margin:0; line-height:1.5}
.rotulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta3); margin:4px 0 -6px;
}

.lista{display:flex; flex-direction:column; gap:8px}
.lista .seg{
  display:flex; gap:10px; padding:11px 12px; background:var(--sup2);
  border:1px solid var(--linha); border-radius:10px; font-size:15.5px; line-height:1.45;
  color:var(--tinta2); cursor:pointer;
}
.lista .seg.ativo{
  border-color:var(--ambar-linha); background:var(--ambar2); color:var(--tinta); box-shadow:none;
}
.lista .seg > span{
  color:var(--tinta3); font-family:var(--mono); font-size:11.5px; flex:none; padding-top:3px;
}

.arte{background:var(--arte-fundo); border-radius:12px; overflow:hidden; border:1px solid var(--linha)}
.arte svg{display:block; width:100%; height:auto}

.aviso{background:var(--ambar2); border:1px solid var(--ambar-linha); border-radius:11px; padding:12px 14px}
.aviso .lbl{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ambar); display:block; margin-bottom:5px;
}
.aviso p{margin:0; font-size:14.5px; line-height:1.45}
.aviso code{
  font-family:var(--mono); font-size:.86em; background:var(--sup); border:1px solid var(--linha);
  border-radius:4px; padding:1px 4px; white-space:nowrap;
}

/* --- leitor de áudio --- */
.leitor{
  display:flex; align-items:center; gap:12px; background:var(--sup2);
  border:1px solid var(--linha); border-radius:12px; padding:10px 12px;
}
.tocar{
  width:46px; height:46px; border-radius:50%; border:0; background:var(--azul);
  color:var(--sobre-azul); display:grid; place-items:center; cursor:pointer; flex:none;
  font-size:17px; font-family:var(--ui);
}
.tocar:disabled{opacity:.45; cursor:default}
.leitor .info{flex:1; min-width:0}
.leitor .info .t{font-size:13px; font-weight:620; line-height:1.3}
.leitor .info .s{
  font-size:11px; color:var(--tinta3); font-family:var(--mono);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trilho{height:5px; background:var(--sup3); border-radius:3px; margin-top:7px; overflow:hidden; cursor:pointer}
.trilho i{display:block; height:100%; background:var(--azul); width:0}
.veloc{
  background:var(--sup); border:1px solid var(--linha2); border-radius:8px; color:var(--tinta2);
  font-family:var(--mono); font-size:11.5px; padding:8px 8px; cursor:pointer; flex:none;
}

/* --- botões --- */
.accao{
  width:100%; border:0; border-radius:12px; background:var(--azul); color:var(--sobre-azul);
  padding:15px; font-size:15.5px; font-weight:660; cursor:pointer; font-family:var(--ui);
  letter-spacing:-.01em; min-height:52px;
}
.accao:disabled{opacity:.4; cursor:default}
.accao.vazia{background:transparent; border:1px solid var(--linha2); color:var(--tinta)}

/* --- fichas --- */
.fichas{display:flex; flex-direction:column; gap:10px}
.ficha{
  background:var(--sup2); border:1px solid var(--linha); border-radius:12px; padding:14px;
  cursor:pointer; text-align:left; width:100%; font-family:var(--ui); color:var(--tinta);
}
.ficha .k{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ambar); margin-bottom:6px;
}
.ficha .f{display:block; font-size:15px; line-height:1.5}
.ficha .b[hidden]{display:none}
.ficha .b{
  display:block; font-size:14.5px; line-height:1.5; color:var(--tinta2); margin-top:11px;
  padding-top:11px; border-top:1px dashed var(--linha2);
}
.ficha .toque{
  display:block; font-size:11.5px; color:var(--tinta3); margin-top:9px; font-family:var(--mono);
}
.ficha .toque:empty{display:none}

/* --- cenário --- */
.situacao{
  background:var(--barro2); border:1px solid var(--barro); border-radius:12px 12px 12px 4px;
  padding:13px 14px; font-size:15.5px; line-height:1.5;
}
.situacao .quem{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--barro); margin-bottom:6px;
}
.opcoes{display:flex; flex-direction:column; gap:10px}
.opcao{
  border:1px solid var(--linha2); border-radius:12px; padding:14px; font-size:15px;
  line-height:1.48; background:var(--sup); cursor:pointer; text-align:left; width:100%;
  font-family:var(--ui); color:var(--tinta); min-height:52px;
}
.opcao:hover{border-color:var(--azul)}
.opcao[disabled]{cursor:default; opacity:.5}
.opcao.escolhida{border-color:var(--azul); border-width:2px; padding:13px; background:var(--azul2); opacity:1}
.opcao.certa{border-color:var(--verde); border-width:2px; padding:13px; background:var(--verde2); opacity:1}
.opcao.errada{border-color:var(--barro); border-width:2px; padding:13px; background:var(--barro2); opacity:1}

.veredicto{border-radius:12px; padding:14px; font-size:14.5px; line-height:1.55}
.veredicto .h{display:block; font-weight:680; margin-bottom:5px}
.veredicto.bom{background:var(--verde2); border:1px solid var(--verde)}
.veredicto.bom .h{color:var(--verde)}
.veredicto.mau{background:var(--barro2); border:1px solid var(--barro)}
.veredicto.mau .h{color:var(--barro)}
.veredicto.meio{background:var(--ambar2); border:1px solid var(--ambar-linha)}
.veredicto.meio .h{color:var(--ambar)}

/* --- checklist --- */
.check{display:flex; flex-direction:column; gap:9px}
.risco{
  display:flex; gap:11px; align-items:flex-start; background:var(--sup2);
  border:1px solid var(--linha); border-radius:11px; padding:13px; cursor:pointer;
  text-align:left; width:100%; font-family:var(--ui); font-size:15px; line-height:1.45;
  color:var(--tinta); min-height:52px;
}
.risco .caixa{
  width:20px; height:20px; border-radius:6px; border:1.5px solid var(--linha2); flex:none;
  margin-top:1px; display:grid; place-items:center; font-size:12px; color:transparent;
}
.risco.on .caixa{background:var(--verde); border-color:var(--verde); color:var(--sup)}
.risco.on{border-color:var(--verde)}

/* --- indicadores --- */
.dado{
  display:flex; justify-content:space-between; align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--linha); font-size:14.5px;
}
.dado:last-of-type{border-bottom:0}
.dado .k{color:var(--tinta2)}
.dado .v{font-family:var(--mono); font-weight:620; font-variant-numeric:tabular-nums}
.barra{height:6px; border-radius:3px; background:var(--sup3); overflow:hidden}
.barra i{display:block; height:100%; background:var(--azul)}

.relogio{
  display:flex; justify-content:space-between; align-items:center; font-family:var(--mono);
  font-size:11px; color:var(--tinta3); letter-spacing:.03em;
}
.relogio b{color:var(--tinta2); font-weight:600}
.relogio .pt{
  width:7px; height:7px; border-radius:50%; background:var(--verde); display:inline-block;
  margin-right:6px;
}
.relogio .pt.off{background:var(--tinta3)}

/* --- casa do módulo --- */
.progresso{display:flex; align-items:center; gap:16px}
.anel{width:76px; height:76px; border-radius:50%; flex:none; display:grid; place-items:center}
.anel .buraco{
  width:58px; height:58px; border-radius:50%; background:var(--sup); display:grid;
  place-items:center; font-size:15px; font-weight:730; font-variant-numeric:tabular-nums;
}
.progresso .t{font-size:14.5px; color:var(--tinta2); line-height:1.45; min-width:0}
.progresso .t b{
  display:block; color:var(--tinta); font-size:18px; font-weight:720;
  letter-spacing:-.015em; line-height:1.28; text-wrap:balance;
}
.progresso .t .horas{
  display:block; margin-top:5px; font-family:var(--mono); font-size:12.5px;
  font-variant-numeric:tabular-nums; color:var(--tinta3); letter-spacing:.01em;
}
.unidades{display:flex; flex-direction:column; gap:9px}
.unidade{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--sup2); border:1px solid var(--linha); border-radius:12px; padding:13px;
  font-family:var(--ui); color:var(--tinta); font-size:14.5px; min-height:56px;
}
.unidade:hover{border-color:var(--linha2)}
.unidade.porfazer{background:var(--sup); border-style:dashed}
.unidade.porfazer .nm b{color:var(--tinta2); font-weight:600}
.unidade.atual{border-color:var(--azul); background:var(--azul2)}
.unidade .sinal{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--sup3); color:var(--tinta2); font-family:var(--mono); font-size:12px;
  font-weight:600;
}
.unidade.feita .sinal{background:var(--verde2); color:var(--verde)}
.unidade.atual .sinal{background:var(--azul); color:var(--sobre-azul)}
.unidade .nm{flex:1; line-height:1.35; min-width:0}
.unidade .nm b{display:block; font-weight:640}
.unidade .nm em{font-style:normal; color:var(--tinta3); font-size:12px}
.unidade .dur{
  font-family:var(--mono); font-size:11px; color:var(--tinta3); flex:none;
  font-variant-numeric:tabular-nums;
}

a{color:var(--azul)}
button:focus-visible, .seg:focus-visible{outline:2px solid var(--ambar); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }