:root {
  --azul: #233D73;
  --azul-2: #2F4C8C;
  --azul-claro: #AFC4E6;
  --verde: #D6DD3F;
  --fundo: #F5F7FB;
  --texto: #102033;
  --muted: #5B6778;
  --borda: #DDE4F0;
  --ok: #16803C;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}

.topo {
  padding: 24px clamp(18px, 4vw, 52px);
  background: var(--azul);
  color: white;
  border-bottom: 6px solid var(--verde);
}

.marca {
  display: flex;
  gap: 18px;
  align-items: center;
}

.marca img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 8px;
  border-radius: 22px;
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

h1, h2, p { margin-top: 0; }

.marca h1 {
  margin-bottom: 6px;
  font-size: clamp(28px, 4vw, 42px);
}

.marca p { margin-bottom: 0; opacity: 0.9; font-size: 18px; }

main {
  width: min(1380px, calc(100% - 32px));
  margin: 32px auto;
}

.painel {
  padding: 24px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.entrada {
  max-width: 520px;
  margin: 80px auto 0;
  text-align: center;
}

.entrada-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.entrada-logo img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  padding: 12px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
}

.entrada h2 {
  color: var(--azul);
  font-size: 32px;
  margin-bottom: 8px;
}

.entrada-subtexto {
  margin-top: 18px;
  color: var(--muted);
}

.status-entrada {
  margin-top: 12px;
  color: #B42318;
  font-weight: 700;
  line-height: 1.4;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--texto);
  font-weight: 700;
}

input, select, button {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 16px;
}

button {
  margin-top: 12px;
  border: 0;
  color: white;
  background: var(--azul);
  font-weight: 700;
  cursor: pointer;
}

button.secundario {
  width: auto;
  margin: 0;
  color: var(--azul);
  background: #E9EFF9;
  border: 1px solid var(--borda);
}

button.compacto {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
}

.oculto { display: none !important; }

.app {
  display: grid;
  gap: 20px;
}

.painel-aluno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.configuracao-turma {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 18px;
  align-items: end;
}

.configuracao-turma strong {
  display: block;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #F8FAFE;
  color: var(--azul);
}

.rotulo {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.painel-aluno h2 { margin-bottom: 0; }

.metricas {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}

.metrica {
  min-height: 126px;
  padding: 20px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.metrica span {
  display: block;
  color: var(--muted);
  font-weight: 700;
}

.metrica strong {
  display: block;
  margin-top: 8px;
  color: var(--azul);
  font-size: 34px;
}

.barra {
  height: 12px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #E8EDF6;
}

.barra div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--verde);
  transition: width 0.2s ease;
}

.disciplinas {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.insights h2 {
  margin-bottom: 12px;
  color: var(--azul);
}

.insights-lista {
  display: grid;
  gap: 10px;
}

.insight {
  padding: 14px 16px;
  border: 1px solid #E1E8F3;
  border-left: 6px solid var(--verde);
  border-radius: 8px;
  background: #F8FAFE;
  line-height: 1.45;
  font-weight: 700;
}

.insight strong {
  color: var(--azul);
}

.cabecalho-secao {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.cabecalho-secao h2 {
  margin-bottom: 14px;
  color: var(--azul);
}

.cabecalho-secao p {
  margin: -6px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.cronograma-grid {
  display: grid;
  gap: 8px;
}

.cronograma.recolhido #cronogramaTurma {
  display: none;
}

.etapa-cronograma {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 220px 130px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #F8FAFE;
}

.etapa-cronograma.atual {
  border-color: var(--verde);
  box-shadow: inset 6px 0 0 var(--verde);
}

.etapa-cronograma.concluida {
  opacity: 0.72;
}

.codigo-cronograma {
  color: var(--azul);
  font-weight: 800;
}

.nome-cronograma {
  font-weight: 800;
}

.periodo-cronograma,
.status-cronograma {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.status-cronograma {
  text-align: right;
}

.rota .cabecalho-secao button {
  width: auto;
  min-width: 180px;
  margin-top: 0;
}

.controles-rota {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.rota-aluno {
  display: grid;
  gap: 12px;
}

.rota-resumo {
  padding: 14px 16px;
  border-radius: 8px;
  background: #F8FAFE;
  border-left: 6px solid var(--verde);
  line-height: 1.45;
  font-weight: 700;
}

.calendario-rota {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.dia-rota {
  min-height: 124px;
  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: white;
}

.dia-rota.concluido {
  border-color: var(--verde);
  box-shadow: inset 4px 0 0 var(--verde);
}

.dia-rota.vazio {
  opacity: 0.45;
  background: #F3F5F9;
}

.dia-rota-cabecalho {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.dia-rota-cabecalho small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.check-dia-rota {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--azul);
  font-weight: 800;
}

.check-dia-rota input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.dia-rota strong {
  display: block;
  margin-bottom: 6px;
  color: var(--azul);
}

.dia-rota ul {
  margin: 0;
  padding-left: 18px;
  color: var(--texto);
  font-size: 13px;
  line-height: 1.3;
}

.dia-rota li + li {
  margin-top: 4px;
}

.dia-rota li.semana-rota {
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #EEF4FF;
  color: var(--azul);
  font-weight: 800;
}

.disciplina {
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: white;
  cursor: pointer;
}

.disciplina.ativa {
  color: white;
  background: var(--azul);
  border-color: var(--azul);
}

.disciplina.sem-aulas {
  color: #667085;
  background: #F3F5F9;
}

.disciplina.sem-aulas.ativa {
  color: white;
  background: #667085;
  border-color: #667085;
}

.disciplina strong { display: block; font-size: 18px; }
.disciplina span { display: block; margin-top: 6px; font-size: 13px; opacity: 0.85; }

.filtros {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 14px;
}

.lista-aulas {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 6px;
}

.lista-aulas::-webkit-scrollbar {
  width: 10px;
}

.lista-aulas::-webkit-scrollbar-track {
  background: #EEF2F8;
  border-radius: 999px;
}

.lista-aulas::-webkit-scrollbar-thumb {
  background: var(--azul-claro);
  border-radius: 999px;
}

.aula {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-left: 6px solid var(--verde);
  border-radius: 8px;
  background: white;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.aula input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin-top: 2px;
  accent-color: var(--ok);
}

.aula h3 {
  margin: 0 0 7px;
  color: var(--azul);
  font-size: 18px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #F1F4F9;
}

.aula.concluida {
  border-left-color: var(--ok);
}

.aula.concluida h3 {
  text-decoration: line-through;
  color: #667085;
}

.aula.semana {
  border-left-color: var(--azul);
  background: linear-gradient(90deg, #F4F8FF, #FFFFFF);
}

.mensagem-semana {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #EEF4FF;
  color: var(--azul);
  font-weight: 800;
  line-height: 1.35;
}

.data-conclusao {
  min-width: 138px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.vazio {
  padding: 22px;
  border-radius: 8px;
  background: white;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 900px) {
  .metricas,
  .disciplinas,
  .filtros,
  .controles-rota,
  .configuracao-turma,
  .etapa-cronograma,
  .cabecalho-secao {
    grid-template-columns: 1fr;
  }

  .cabecalho-secao {
    display: grid;
  }

  .rota .cabecalho-secao button {
    width: 100%;
  }

  .calendario-rota {
    grid-template-columns: 1fr;
  }

  .dia-rota.vazio {
    display: none;
  }

  .painel-aluno,
  .aula {
    grid-template-columns: 1fr;
  }

  .painel-aluno {
    align-items: stretch;
    flex-direction: column;
  }

  button.secundario { width: 100%; }

  .data-conclusao { text-align: left; }
  .status-cronograma { text-align: left; }
}

.progresso-semana {
  border-top: 8px solid #F2D75C;
  background: #FFF9DF;
}

.semana-atual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.semana-atual strong {
  display: block;
  color: var(--azul);
  font-size: 20px;
  line-height: 1.35;
}

.semana-atual small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}

.semana-atual.vazia {
  color: var(--muted);
  font-weight: 700;
}

.semana-atual button {
  flex: 0 0 auto;
}

.semana-barra {
  max-width: 520px;
}

.filtros {
  grid-template-columns: 1fr 260px 240px;
}

.acoes-aulas button {
  margin-top: 0;
  min-height: 48px;
}

.separador-semana {
  padding: 14px 18px;
  border-radius: 8px;
  background: #F2D75C;
  color: #233D73;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.separador-semana strong {
  display: block;
  font-size: 18px;
}

.separador-semana span {
  display: block;
  margin-top: 4px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .semana-atual {
    display: grid;
  }
}

.item-rota label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  color: var(--texto);
}

.item-rota input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin-top: 2px;
  padding: 0;
  flex: 0 0 auto;
}

.item-rota.concluida span {
  text-decoration: line-through;
  opacity: 0.62;
}

.dia-rota-cabecalho strong {
  color: var(--azul);
  font-size: 18px;
}


@media (max-width: 700px) {
  .marca img { width: 60px; height: 60px; }
  .entrada-logo img { width: 96px; height: 96px; }
}

/* V8 - Painel inicial mais intuitivo */
.topo {
  padding: 18px clamp(18px, 4vw, 52px);
}

.topo .marca img {
  width: 64px;
  height: 64px;
}

.painel-aluno-compacto {
  padding: 14px 18px;
  box-shadow: none;
  border: 1px solid var(--borda);
}

.painel-aluno-compacto h2 {
  font-size: 20px;
}

.dashboard-aluno {
  overflow: hidden;
  position: relative;
  padding: 0;
  border: 1px solid #E4EAF4;
  background: linear-gradient(135deg, #FFFFFF 0%, #F7FAFF 55%, #EEF4FF 100%);
}

.dashboard-aluno::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--verde);
}

.dashboard-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  gap: 22px;
  align-items: stretch;
  padding: 28px 28px 28px 34px;
}

.dashboard-texto h2 {
  margin: 6px 0 18px;
  color: var(--azul);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.linha-estudo {
  margin: 7px 0;
  font-size: 17px;
  line-height: 1.45;
}

.mensagem-status {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #E4EAF4;
  background: white;
  font-weight: 800;
  line-height: 1.45;
}

.mensagem-status.completo { border-color: #BFE8CC; background: #F1FBF4; color: #126B32; }
.mensagem-status.bom { border-color: #C7D9F8; background: #F2F6FE; color: var(--azul); }
.mensagem-status.atencao { border-color: #ECEF9F; background: #FEFCE8; color: #665800; }
.mensagem-status.baixo { border-color: #F3C8C4; background: #FFF5F4; color: #9A2A20; }

.card-meta-semana {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 22px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
  border: 1px solid #E4EAF4;
}

.card-meta-semana strong {
  display: block;
  margin: 8px 0 8px;
  color: var(--azul);
  font-size: 28px;
}

.card-meta-semana p {
  margin: 12px 0 6px;
  color: var(--azul);
  font-size: 20px;
  font-weight: 900;
}

.card-meta-semana small {
  color: var(--muted);
  line-height: 1.4;
  font-weight: 700;
}

.barra-meta {
  height: 16px;
  background: #E8EDF6;
}

.card-meta-semana.baixo .barra-meta div,
.barra-fixa-conteudo.baixo .barra-mini div { background: #D92D20; }
.card-meta-semana.atencao .barra-meta div,
.barra-fixa-conteudo.atencao .barra-mini div { background: var(--verde); }
.card-meta-semana.bom .barra-meta div,
.barra-fixa-conteudo.bom .barra-mini div { background: var(--azul-claro); }
.card-meta-semana.completo .barra-meta div,
.barra-fixa-conteudo.completo .barra-mini div { background: var(--ok); }

.barra-semana-fixa {
  position: sticky;
  top: 0;
  z-index: 10;
}

.barra-fixa-conteudo {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(10px);
}

.barra-fixa-conteudo strong,
.barra-fixa-conteudo span {
  color: var(--azul);
  font-weight: 900;
  white-space: nowrap;
}

.barra-mini {
  height: 10px;
  margin: 0;
}

.painel-progresso-curso .cabecalho-secao h2 {
  margin-bottom: 8px;
}

.metricas-v8 {
  grid-template-columns: 1.4fr 1fr .8fr;
}

.metricas-v8 .metrica {
  border: 1px solid #E4EAF4;
  box-shadow: none;
}

.destaque-progresso {
  background: #F8FAFE;
}

.metrica-discreta {
  opacity: .78;
}

.rota .cabecalho-secao h2,
.cronograma .cabecalho-secao h2 {
  font-size: 28px;
}

.item-rota label {
  cursor: pointer;
}

.item-rota.concluida span {
  text-decoration: line-through;
  opacity: .65;
}

.aula.concluida h3 {
  text-decoration: line-through;
}

@media (max-width: 900px) {
  .dashboard-conteudo {
    grid-template-columns: 1fr;
  }

  .barra-fixa-conteudo {
    grid-template-columns: 1fr;
    border-radius: 14px;
    gap: 8px;
  }

  .barra-fixa-conteudo strong,
  .barra-fixa-conteudo span {
    white-space: normal;
  }

  .metricas-v8 {
    grid-template-columns: 1fr;
  }
}

.prazo-curso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.prazo-item {
  padding: 12px 14px;
  border: 1px solid #E1E8F3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.prazo-item.destaque {
  border-color: #D6DD3F;
  background: #FEFCE8;
}

.prazo-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.prazo-item strong {
  display: block;
  margin: 5px 0;
  color: var(--azul);
  font-size: 22px;
}

.prazo-item small {
  display: block;
  color: var(--texto);
  line-height: 1.35;
  font-weight: 700;
}

.prazo-curso.concluido {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  background: #F1FBF4;
  border: 1px solid #BFE8CC;
  color: #126B32;
  font-weight: 800;
}

.rota-resumo-novo {
  font-size: 17px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .prazo-curso { grid-template-columns: 1fr; }
}

.acoes-cabecalho-rota {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.acoes-cabecalho-rota button {
  width: auto;
  margin-top: 0;
}

.rota.recolhida {
  padding-bottom: 18px;
}

.botoes-acoes-aulas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.botoes-acoes-aulas button {
  width: auto;
}

.aula.destacada {
  outline: 3px solid var(--verde);
  box-shadow: 0 0 0 6px rgba(214, 221, 63, 0.22), 0 10px 28px rgba(15, 23, 42, 0.10);
}

@media (max-width: 760px) {
  .acoes-cabecalho-rota {
    width: 100%;
    justify-content: stretch;
  }

  .acoes-cabecalho-rota button,
  .botoes-acoes-aulas button {
    width: 100%;
  }
}