:root {
  --azul: #12324E;
  --azul-claro: #1B4468;
  --azul-suave: #E7EDF3;
  --ambar: #D99A3C;
  --ambar-suave: #FBF1E0;
  --verde: #2E7D5B;
  --vermelho: #B4453C;
  --fundo: #F5F7F9;
  --carta: #FFFFFF;
  --texto: #1D2A35;
  --texto-fraco: #5F7285;
  --borda: #DDE4EA;
  --raio: 14px;
  --sombra: 0 1px 3px rgba(18, 50, 78, .08), 0 6px 18px rgba(18, 50, 78, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
}

#topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top)) 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--azul-claro), var(--azul));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}

#topo .marca { width: 30px; height: 30px; border-radius: 8px; }
#topo h1 { font-size: 1.05rem; margin: 0; font-weight: 600; letter-spacing: .3px; }

.marca-offline {
  margin-left: auto;
  font-size: .72rem;
  background: rgba(255, 255, 255, .18);
  padding: 4px 9px;
  border-radius: 999px;
}

#conteudo {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 90px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#conteudo > * { flex: 0 0 auto; }

#navegacao {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--carta);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 6;
}

.aba {
  flex: 1;
  padding: 9px 2px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--texto-fraco);
  font-size: .68rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aba .icone { font-size: 1.15rem; line-height: 1.1; }
.aba.ativa { color: var(--azul); font-weight: 600; }

/* cartões */

.cartao {
  background: var(--carta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.cartao-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borda);
  background: #FBFCFD;
}

.cartao-cabeca h2 { margin: 0; font-size: .88rem; text-transform: uppercase; letter-spacing: .7px; color: var(--texto-fraco); }
.cartao-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

h1 { font-size: 1.3rem; margin: 0 0 2px; }
p { margin: 0; line-height: 1.45; }
.sub { color: var(--texto-fraco); font-size: .86rem; }
.dica { color: var(--texto-fraco); font-size: .84rem; font-style: italic; }
.destaque { font-size: 1.05rem; font-weight: 600; }
.vazio { color: var(--texto-fraco); font-size: .88rem; padding: 6px 0; }
.alerta { color: var(--vermelho); font-size: .88rem; font-weight: 500; }
.dispensa { color: var(--texto-fraco); font-size: .82rem; }

/* listas */

.lista { display: flex; flex-direction: column; gap: 8px; }

.linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--carta);
  border: 1px solid var(--borda);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  text-align: left;
  font: inherit;
  width: 100%;
  cursor: pointer;
}

.linha:active { background: var(--azul-suave); }
.linha.completo { border-color: #BFE0CE; background: #F4FBF7; }
.linha-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.linha-texto strong { font-weight: 600; font-size: .95rem; }
.linha-texto small { color: var(--texto-fraco); font-size: .78rem; }
.linha-barra { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; width: 96px; }
.linha-barra small { color: var(--texto-fraco); font-size: .72rem; }
.seta { color: var(--texto-fraco); font-size: 1.2rem; }
.ordem {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--azul); color: #fff;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 600; flex: none;
}
.acoes-linha { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--azul-suave); color: var(--azul);
  display: grid; place-items: center;
  font-weight: 600; font-size: .82rem; flex: none;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.grande { width: 64px; height: 64px; font-size: 1.1rem; }

.cabeca-ficha { display: flex; gap: 12px; align-items: flex-start; }
.cabeca-ficha > div:nth-child(2) { flex: 1; min-width: 0; }
.etiquetas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }

/* elementos */

.etiqueta {
  font-size: .72rem; padding: 3px 8px; border-radius: 999px;
  background: var(--azul-suave); color: var(--azul);
}
.etiqueta.verde { background: #E4F3EB; color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-suave); color: #8A5B14; }
.etiqueta.azul { background: var(--azul-suave); color: var(--azul); }
.etiqueta.cinza { background: #ECEFF2; color: var(--texto-fraco); }

.botao {
  border: none;
  border-radius: 11px;
  padding: 11px 15px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  background: var(--azul);
  color: #fff;
  cursor: pointer;
}
.botao.neutro { background: var(--azul-suave); color: var(--azul); }
.botao.ambar { background: var(--ambar); color: #26170A; }
.botao.pequeno { padding: 7px 10px; font-size: .78rem; border-radius: 9px; }
.botao:active { filter: brightness(.94); }

.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes .botao { flex: 1; min-width: 130px; }

.topo-acoes { display: flex; gap: 8px; align-items: center; }
.topo-acoes.coluna { flex-direction: column; align-items: stretch; }
.topo-acoes .botao { flex: none; }

.busca, input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: var(--carta);
  color: var(--texto);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); outline-offset: 1px; }

.formulario { display: flex; flex-direction: column; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: .78rem; color: var(--texto-fraco); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

.arquivo { padding: 8px; }
.foto-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.barra { height: 7px; background: var(--azul-suave); border-radius: 999px; overflow: hidden; width: 100%; }
.barra-preenchida { height: 100%; background: linear-gradient(90deg, var(--azul-claro), var(--ambar)); }

.metrica { display: flex; flex-direction: column; }
.metrica strong { font-size: 1.6rem; line-height: 1.1; color: var(--azul); }
.metrica small { color: var(--texto-fraco); font-size: .8rem; }
.metrica.pequena strong { font-size: 1.15rem; }
.grade-metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.regra { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-top: 1px solid var(--borda); }
.regra-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; }
.regra-num { color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.previsao { font-size: .86rem; color: var(--azul); background: var(--azul-suave); padding: 8px 10px; border-radius: 10px; }
.previsao.ok { color: var(--verde); background: #E4F3EB; }
.previsao.atencao { color: #8A5B14; background: var(--ambar-suave); }

.chips, .chips-req, .chips-filtro { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { font-size: .74rem; background: var(--azul-suave); color: var(--azul); padding: 3px 7px; border-radius: 7px; }
.chip-req {
  font-size: .66rem; padding: 3px 6px; border-radius: 6px;
  background: #ECEFF2; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .3px;
}
.chip-req.em_estudo { background: var(--ambar-suave); color: #8A5B14; }
.chip-req.concluido { background: #E4F3EB; color: var(--verde); }
.chip-req.revisar { background: #FBE9E7; color: var(--vermelho); }

.chip-filtro {
  font: inherit; font-size: .82rem; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--carta); color: var(--texto-fraco); cursor: pointer;
}
.chip-filtro.ativo { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }

.linha-req { display: grid; grid-template-columns: 1fr 1.1fr .6fr; gap: 6px; align-items: center; }
.nome-req { font-size: .82rem; color: var(--texto-fraco); }

.tabela { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabela th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-fraco); padding: 6px 4px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 7px 4px; border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: none; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.timeline li { display: flex; justify-content: space-between; font-size: .88rem; border-left: 3px solid var(--ambar); padding-left: 9px; }
.timeline small { color: var(--texto-fraco); }

.aviso-linha {
  display: flex; align-items: center; gap: 9px;
  font-size: .89rem; text-decoration: none; color: inherit;
  padding: 8px 0; border-bottom: 1px solid var(--borda);
}
.aviso-linha:last-child { border-bottom: none; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-fraco); flex: none; }
.ponto.verde { background: var(--verde); }
.ponto.ambar { background: var(--ambar); }
.ponto.vermelho { background: var(--vermelho); }

details summary { font-size: .82rem; color: var(--azul); cursor: pointer; padding: 4px 0; }

.caixas { display: flex; flex-direction: column; gap: 7px; }
.caixa { display: flex; align-items: center; gap: 9px; font-size: .9rem; }
.caixa input { width: 20px; height: 20px; flex: none; }

.marca-login { display: flex; justify-content: center; padding: 18px 0 6px; }
.marca-login img { width: 100%; max-width: 320px; height: auto; }

.identidade {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; font-size: .74rem;
  background: rgba(255, 255, 255, .16); padding: 4px 10px; border-radius: 999px;
  color: #fff; text-decoration: none;
}
.identidade small { opacity: .75; }

.fita-trava {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--ambar-suave); color: #8A5B14;
  border: 1px solid #EAD3A6; border-radius: 12px; padding: 9px 12px; font-size: .86rem;
}
.fita-trava.minha { background: #E4F3EB; color: var(--verde); border-color: #BFE0CE; }
.fita-trava .botao { padding: 6px 10px; font-size: .78rem; }

/* folha deslizante */

.folha-fundo {
  position: fixed; inset: 0; background: rgba(18, 50, 78, .45);
  display: flex; align-items: flex-end; z-index: 20;
}
.folha {
  background: var(--fundo); width: 100%; max-height: 92vh;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
  animation: subir .18s ease-out;
}
@keyframes subir { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } }
.folha-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--borda); background: var(--carta);
  border-radius: 18px 18px 0 0;
}
.folha-cabeca h2 { margin: 0; font-size: 1rem; }
.folha-cabeca .fechar { border: none; background: none; font-size: 1.1rem; color: var(--texto-fraco); cursor: pointer; }
.folha-corpo {
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}
.resumo { font-family: ui-monospace, monospace; font-size: .8rem; }

/* aviso flutuante */

.aviso {
  position: fixed; left: 50%; bottom: 78px; transform: translate(-50%, 20px);
  background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: .86rem; opacity: 0; pointer-events: none; transition: .18s; z-index: 40;
  max-width: 90vw; text-align: center;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }
.aviso.erro { background: var(--vermelho); }

@media (min-width: 720px) {
  #conteudo { max-width: 760px; margin: 0 auto; width: 100%; }
  #navegacao { max-width: 760px; margin: 0 auto; border-radius: 16px 16px 0 0; }
  .grade-metricas { grid-template-columns: repeat(4, 1fr); }
}