:root{
  --bg:#0b0f14;
  --navy:#0b1f3a;
  --card:#163a6b88; /* azul transparente */
  --text:#e8eef7;

  --inprogress:#9b5cff; /* azul brillante */
  --regular:#f2c94c;    /* amarillo */
  --approved:#27ae60;   /* verde */

  --locked:#2a2f38;
  --border:#2a466b;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid #1a2431;
}

h1{font-size:18px;margin:0}

.btn{
  cursor:pointer;
  border:1px solid #2b3c55;
  background:#121a24;
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
}
.btn.secondary{opacity:.9}

.grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap:14px;
  padding:14px;
}

.year{
  border:1px solid #1b2a3f;
  border-radius:14px;
  overflow:hidden;
  background:#0c121b;
}

.year-title{
  background:var(--navy);
  padding:10px 12px;
  font-weight:700;
  border-bottom:1px solid #162236;
}

.subjects{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.subject{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .05s ease;
}
.subject:active{transform:scale(.99)}

.subject .code{
  font-weight:800;
  display:block;
}
.subject .name{
  font-size:13px;
  opacity:.95;
}
.subject .meta{
  font-size:12px;
  opacity:.75;
  margin-top:6px;
}

.subject.locked{
  background:var(--locked);
  border-color:#333a46;
  color:#b8c2d1;
  cursor:not-allowed;
  opacity:.65;
}

.subject.in_progress{ background: color-mix(in srgb, var(--inprogress) 30%, var(--bg)); border-color: var(--inprogress); }
.subject.regularized{ background: color-mix(in srgb, var(--regular) 28%, var(--bg)); border-color: var(--regular); color:#111; }
.subject.approved{ background: color-mix(in srgb, var(--approved) 28%, var(--bg)); border-color: var(--approved); }

@media (max-width: 1100px){
  .grid{grid-template-columns: repeat(2, minmax(220px, 1fr));}
}
@media (max-width: 560px){
  .grid{grid-template-columns: 1fr;}
}