/* Página Plano de 30 dias / Trilha de 7 dias (assets/js/pages/plano.js). */

.plano__semana-titulo {
  margin-top: var(--esp-7);
  margin-bottom: var(--esp-3);
  font-size: var(--texto-lg);
  font-weight: 700;
}
.plano__semana-titulo:first-of-type { margin-top: var(--esp-5); }

.plano__dias { display: flex; flex-direction: column; gap: var(--esp-3); }

/* Cartão de um dia */
.dia-estudo {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  overflow: hidden;
}
.dia-estudo--feito { border-color: var(--cor-primaria); }

.dia-estudo__cabecalho { display: flex; align-items: stretch; }

.dia-estudo__check {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--cor-borda);
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  transition: background var(--transicao), color var(--transicao);
}
.dia-estudo__check:hover { color: var(--cor-primaria); }
.dia-estudo--feito .dia-estudo__check { background: var(--cor-primaria); color: #fff; }
.tema-escuro .dia-estudo--feito .dia-estudo__check { color: #06201c; }

.dia-estudo__gatilho {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  text-align: left;
  color: var(--cor-texto);
}
.dia-estudo__gatilho:hover { background: var(--cor-superficie-2); }
.dia-estudo__numero {
  flex-shrink: 0;
  min-width: 4.5rem;
  font-size: var(--texto-xs);
  font-weight: 700;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dia-estudo__tema { flex: 1; font-weight: 600; font-size: var(--texto-sm); }
.dia-estudo__gatilho svg { flex-shrink: 0; color: var(--cor-texto-suave); transition: transform var(--transicao); }
.dia-estudo--aberto .dia-estudo__gatilho svg { transform: rotate(180deg); }

.dia-estudo__corpo {
  display: none;
  flex-direction: column;
  gap: var(--esp-5);
  padding: var(--esp-5);
  border-top: 1px solid var(--cor-borda);
}
.dia-estudo--aberto .dia-estudo__corpo { display: flex; }

.dia-estudo__conceitos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.dia-estudo__bloco h4 { font-size: var(--texto-sm); font-weight: 700; margin-bottom: var(--esp-2); }

.dia-estudo__criterios {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  background: var(--cor-superficie-2);
  padding: var(--esp-4);
  border-radius: var(--raio-sm);
}

.dia-estudo__tempos { display: flex; flex-direction: column; gap: var(--esp-2); }
.dia-estudo__tempo-linha { display: flex; gap: var(--esp-3); font-size: var(--texto-sm); }
.dia-estudo__tempo-rotulo { flex-shrink: 0; min-width: 4rem; font-weight: 700; color: var(--cor-primaria); }

.dia-estudo__aulas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.dia-estudo__aulalink {
  display: inline-flex;
  align-items: center;
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--cor-primaria);
  background: var(--cor-primaria-tint);
}
.dia-estudo__aulalink:hover { border-color: var(--cor-primaria); text-decoration: none; }
.dia-estudo__aulalink--inativo { color: var(--cor-texto-suave); background: var(--cor-superficie-2); }

@media (max-width: 560px) {
  .dia-estudo__gatilho { flex-wrap: wrap; gap: var(--esp-2); }
  .dia-estudo__numero { min-width: auto; }
}