/* BrickVox — Portal do Aluno · Jornada (29/09/2026)
   Termômetro da aula, avisos, fila de reposição, jornada e material. */

:root {
  --termo-1: #3F7FC4; --termo-2: #4FAFCF; --termo-3: #D9A62E;
  --termo-4: #E0702F; --termo-5: #D0402C;
}

/* ---- sino de avisos no topo ---- */
.pt-sino { position: relative; margin-left: auto; background: rgba(255,255,255,.12); border: 0;
  color: #fff; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; }
.pt-sino svg.ic { width: 18px; height: 18px; }
.pt-sino .n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--am); color: var(--am-ink, #1b1b1b); font-size: .62rem;
  font-weight: 800; display: grid; place-items: center; }
.pt-sino + .sair { margin-left: 8px; }

.pt-aviso { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 11px 0; cursor: pointer;
  color: inherit; font: inherit; }
.pt-aviso:last-child { border-bottom: 0; }
.pt-aviso .t { font-size: .87rem; font-weight: 700; }
.pt-aviso .m { font-size: .78rem; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.pt-aviso .q { font-size: .68rem; color: var(--ink-3); margin-top: 3px; }
.pt-aviso.novo .t::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); margin-left: 6px; vertical-align: middle; }
.pt-aviso .grow { min-width: 0; flex: 1; }

/* ---- termômetro da aula ---- */
.pt-termo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 10px; }
.termo-b { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 7px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer;
  color: var(--ink-2); font: inherit; font-size: .64rem; font-weight: 600; line-height: 1.15;
  min-height: 78px; transition: transform .12s, border-color .12s; }
.termo-b:active { transform: scale(.96); }
.termo-b span { text-align: center; }
.mini-termo .tubo { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; }
.mini-termo .liq, .mini-termo .bulbo { fill: var(--line-2); }
.termo-b.on { border-width: 2px; color: var(--ink); }
.termo-b.t1.on, .termo-b.t1.cheio .liq, .termo-b.t1.cheio .bulbo { border-color: var(--termo-1); fill: var(--termo-1); }
.termo-b.t2.on, .termo-b.t2.cheio .liq, .termo-b.t2.cheio .bulbo { border-color: var(--termo-2); fill: var(--termo-2); }
.termo-b.t3.on, .termo-b.t3.cheio .liq, .termo-b.t3.cheio .bulbo { border-color: var(--termo-3); fill: var(--termo-3); }
.termo-b.t4.on, .termo-b.t4.cheio .liq, .termo-b.t4.cheio .bulbo { border-color: var(--termo-4); fill: var(--termo-4); }
.termo-b.t5.on, .termo-b.t5.cheio .liq, .termo-b.t5.cheio .bulbo { border-color: var(--termo-5); fill: var(--termo-5); }

/* ---- aquecimento da próxima aula ---- */
.pt-aquecimento { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  cursor: pointer; font: inherit; color: inherit; border-color: var(--brand-soft);
  background: var(--brand-wash); }
.pt-aquecimento .t { font-size: .9rem; font-weight: 700; }
.pt-aquecimento .m { font-size: .76rem; color: var(--ink-2); margin-top: 2px; }
.pt-aquecimento .grow { flex: 1; min-width: 0; }
.pt-aquecimento .dir svg.ic { width: 18px; height: 18px; color: var(--brand-txt); }

/* ---- fila de reposição ---- */
.pt-fila-urgente { border-color: var(--warn); }
.pt-fila-urgente h2 { display: flex; align-items: center; gap: 6px; }
.pt-fila-urgente h2 svg.ic { width: 17px; height: 17px; color: var(--warn); }
.pt-opcoes.col { flex-direction: column; align-items: stretch; }
.pt-opcoes.col .btn { justify-content: flex-start; text-align: left; white-space: normal; height: auto;
  min-height: 36px; padding-top: 7px; padding-bottom: 7px; line-height: 1.3; }
.pt-aviso-fila { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r);
  font-size: .78rem; margin-bottom: 8px; background: var(--surface-2); }
.pt-aviso-fila.bad { background: var(--bad-wash); color: var(--ink); }
.pt-aviso-fila svg.ic { width: 16px; height: 16px; flex: none; color: var(--bad); margin-top: 1px; }
.pt-linha .t .pill { margin-left: 4px; vertical-align: 1px; }

/* ---- minha turma / meus dados ---- */
.pt-turma-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 4px; }
.pt-turma-info > div { min-width: 0; }
.pt-turma-info span { display: block; font-size: .66rem; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; }
.pt-turma-info b { display: block; font-size: .86rem; font-weight: 600; margin-top: 2px;
  overflow-wrap: anywhere; }

/* ---- jornada (trilha de aulas) ---- */
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.pt-chips .chip { cursor: default; font-size: .72rem; padding: 4px 9px; border-radius: 99px; }
.pt-chips .chip.ok { border-color: var(--ok); color: var(--ok); }
.pt-chips .chip.bad { border-color: var(--bad); color: var(--bad); }
.pt-trilha { list-style: none; margin: 0; padding: 0; position: relative; }
.pt-trilha::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px;
  background: var(--line); }
.pt-trilha .no { position: relative; }
.pt-trilha .no button { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; padding: 7px 4px 7px 0; cursor: pointer; font: inherit; color: inherit;
  border-radius: var(--r); }
.pt-trilha .no button:active { background: var(--surface-2); }
.pt-trilha .bola { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--surface);
  border: 2px solid var(--line-2); color: var(--ink-3); }
.pt-trilha .no.ok .bola { background: var(--ok); border-color: var(--ok); color: #fff; }
.pt-trilha .no.bad .bola { background: var(--bad-wash); border-color: var(--bad); color: var(--bad); }
.pt-trilha .no.futura .bola { border-style: dashed; }
.pt-trilha .no.proxima .bola { background: var(--brand); border-color: var(--brand); color: var(--brand-ink, #fff);
  box-shadow: 0 0 0 4px var(--brand-wash); }
.pt-trilha .txt { min-width: 0; flex: 1; display: flex; flex-direction: column; padding-top: 2px; }
.pt-trilha .t { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.pt-trilha .m { font-size: .73rem; color: var(--ink-3); margin-top: 2px; }
.pt-trilha .no.bad .m { color: var(--bad); }
.pt-trilha .selos { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.selo-m { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 700;
  color: var(--brand-txt); background: var(--brand-wash); border-radius: 99px; padding: 2px 8px; }
.selo-m svg.ic { width: 11px; height: 11px; }

/* ---- material ---- */
.pt-linha-b { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left;
  font: inherit; color: inherit; cursor: pointer; }
.pt-linha-b .grow { flex: 1; min-width: 0; }
.pt-mat { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pt-mat:last-child { border-bottom: 0; }
.pt-mat .t { font-size: .87rem; font-weight: 700; }
.pt-mat .m { font-size: .8rem; color: var(--ink-2); margin: 4px 0 8px; line-height: 1.45; }
.pt-mat .btn { margin-top: 4px; }
.pt-aula-det .linha { display: flex; gap: 8px; align-items: center; font-size: .84rem; margin-bottom: 6px; }
.pt-aula-det .linha svg.ic { width: 16px; height: 16px; color: var(--ink-3); }
.pt-mat-bloco { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.pt-mat-bloco h4 { margin: 0 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand-txt); }

@media (max-width: 380px) {
  .termo-b { font-size: .58rem; }
  .pt-turma-info { grid-template-columns: 1fr; }
}

/* ===== Início: identidade, indicadores, assistente no centro (30/09) ===== */
.pt-id { max-width: 560px; margin: 16px auto 0; position: relative; z-index: 1; }
.pt-id-topo { display: flex; gap: 12px; align-items: center; }
.pt-id-av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--am); color: #3A2A00; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.pt-id .ola { font-size: .8rem; color: var(--tb-ink-2); }
.pt-id h1 { margin: 1px 0 0; font-size: 1.3rem; line-height: 1.2; font-weight: 700; color: #fff;
  letter-spacing: -0.02em; font-family: var(--font-tt); overflow-wrap: anywhere; }
.pt-id-info { display: grid; gap: 8px; margin-top: 14px; }
.pt-id-info .item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.pt-id-info .item.turma { background: rgba(0,167,166,.28); border-color: rgba(0,167,166,.5); }
.pt-id-info .item svg.ic { flex: none; width: 20px; height: 20px; color: var(--am); }
.pt-id-info span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tb-ink-2); font-weight: 700; }
.pt-id-info b { display: block; color: #fff; font-size: .96rem; font-weight: 700; margin-top: 1px; }
.pt-id-info i { display: block; font-style: normal; color: var(--tb-ink-2); font-size: .74rem; }

.pt-inds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: -26px 0 14px;
  position: relative; z-index: 2; }
.pt-inds.n2 { grid-template-columns: repeat(2, 1fr); }
.pt-ind { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 11px;
  border-radius: 18px; border: 0; font: inherit; color: #fff; min-width: 0;
  box-shadow: 0 10px 24px -14px rgba(5,85,92,.55); }
button.pt-ind { cursor: pointer; }
button.pt-ind:active { transform: scale(.98); }
.pt-ind .rot { display: flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; opacity: .92; }
.pt-ind .rot svg.ic { width: 14px; height: 14px; flex: none; }
.pt-ind .num { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.pt-ind .num b { font-size: 1.7rem; font-weight: 800; line-height: 1; font-family: var(--font-tt); }
.pt-ind .num span { font-size: .72rem; opacity: .9; }
.pt-ind .det { font-size: .7rem; opacity: .9; }
.pt-ind .acao { margin-top: auto; display: flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; }
.pt-ind .acao svg.ic { width: 12px; height: 12px; flex: none; }
.pt-ind .barra { background: rgba(255,255,255,.25); }
.pt-ind .barra i { background: #fff; }
.pt-ind.presenca { background: linear-gradient(150deg, #00A7A6, #05555C); align-items: center; text-align: center; }
.pt-ind.presenca .rot { align-self: stretch; justify-content: center; }
.pt-ind .anel { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--am) calc(var(--p) * 1%), rgba(255,255,255,.22) 0); }
.pt-ind .anel b { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #0A5E63; font-size: 1.05rem; font-weight: 800; font-family: var(--font-tt); }
.pt-ind.presenca.bad .anel { background: conic-gradient(#FF8A7A calc(var(--p) * 1%), rgba(255,255,255,.22) 0); }
.pt-ind.concluidas { background: linear-gradient(150deg, #2B6CB0, #1B3F73); }
.pt-ind.repor { background: linear-gradient(150deg, #FBBB21, #E08A00); color: #3A2A00; }
.pt-ind.repor .barra { background: rgba(0,0,0,.12); }
.pt-ind.repor.zero { background: linear-gradient(150deg, #3DBB7A, #1F7A4D); color: #fff; }
@media (max-width: 380px) {
  .pt-inds { grid-template-columns: 1fr 1fr; }
  .pt-inds .pt-ind.presenca { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; }
}

/* em breve */
.pt-breves { display: grid; gap: 8px; margin-bottom: 14px; }
.pt-breve-item { display: flex; gap: 11px; align-items: center; padding: 11px 13px; border-radius: 16px;
  background: var(--surface-2); border: 1px dashed var(--line-2); }
.pt-breve-item .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--am-wash); color: var(--am-txt); }
.pt-breve-item .ic svg.ic { width: 18px; height: 18px; }
.pt-breve-item .grow { min-width: 0; flex: 1; }
.pt-breve-item .t { font-size: .86rem; font-weight: 700; }
.pt-breve-item .m { font-size: .74rem; color: var(--ink-3); margin-top: 1px; }
.pt-breve-item .selo, .selo-breve { display: inline-block; font-size: .56rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 6px; border-radius: 99px; background: var(--am); color: #3A2A00;
  font-style: normal; vertical-align: 2px; }

/* rodapé: assistente no centro */
.pt-abas button.centro { position: relative; color: var(--brand-txt); }
.pt-abas button.centro .bolha { width: 58px; height: 58px; margin-top: -30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #00A7A6, #05555C);
  box-shadow: 0 0 0 4px var(--surface), 0 8px 18px -6px rgba(5,85,92,.6); }
.pt-abas button.centro .bolha svg.ic { width: 26px; height: 26px; color: #fff; }
.pt-abas button.centro.ativo .bolha { background: linear-gradient(150deg, #FBBB21, #E08A00); }
.pt-abas button.centro.ativo .bolha svg.ic { color: #3A2A00; }
.pt-abas button.centro span:last-child { font-weight: 800; }
.pt-abas button.breve { opacity: .6; position: relative; }
.pt-abas button.breve .selo-breve { position: absolute; top: 2px; left: 50%; margin-left: 6px; font-size: .48rem;
  padding: 1px 5px; white-space: nowrap; }

/* um pouco mais de cor nos cartões */
.pt-card > h2 svg.ic { color: var(--brand); }
.pt-card.pt-estrela-pendente { border-top: 4px solid var(--am); }
#ptReposicao .pt-card { border-top: 4px solid #FBBB21; }
.pt-aquecimento { border-left: 4px solid var(--brand); }
.pt-aquecimento .m b { color: var(--brand-txt); }