:root{
  --accent:#0f6e63; --accent2:#0b4e46; --gold:#b7791f; --goldbg:#faf3e3;
  --soft:#eaf4f2; --softbd:#cfe6e1; --ink:#20262e; --gray:#6b7280;
  --line:#e3e9ee; --bg:#f4f6f8; --white:#fff; --danger:#c0392b; --azul:#2b3a8c;
  --radius:12px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink);
  background:var(--bg); font-size:15px; line-height:1.5; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ line-height:1.2; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--white); border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:18px; padding:10px 22px; position:sticky; top:0; z-index:20; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand-logo{ height:42px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size:18px; color:var(--accent2); letter-spacing:.5px; }
.brand-text small{ font-size:11px; color:var(--gray); }
.mainnav{ display:flex; gap:6px; margin-left:8px; }
.mainnav a{ padding:8px 14px; border-radius:8px; color:var(--ink); font-weight:600; font-size:14px; }
.mainnav a:hover{ background:var(--soft); text-decoration:none; }
.mainnav a.on{ background:var(--accent); color:#fff; }
.usermenu{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.uname{ display:flex; flex-direction:column; text-align:right; line-height:1.1; }
.uname small{ color:var(--gray); font-size:11px; }

/* ---------- Layout ---------- */
.wrap{ max-width:1080px; margin:26px auto; padding:0 20px; }
.sitefoot{ max-width:1080px; margin:30px auto; padding:16px 20px; color:var(--gray); font-size:12.5px;
  display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.btn{ display:inline-block; background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; text-align:center; }
.btn:hover{ background:var(--accent2); text-decoration:none; color:#fff; }
.btn-sm{ padding:7px 13px; font-size:13px; }
.btn-ghost{ background:transparent; color:var(--accent); border:1px solid var(--softbd); }
.btn-ghost:hover{ background:var(--soft); color:var(--accent2); }
.btn-gold{ background:var(--gold); } .btn-gold:hover{ background:#96631a; }
.btn-danger{ background:var(--danger); } .btn-danger:hover{ background:#8e2a20; }
.btn-block{ display:block; width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Cards ---------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:820px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.pagehead h1{ margin:0; font-size:26px; }
.pagehead .sub{ color:var(--gray); margin:4px 0 0; }
.crumbs{ color:var(--gray); font-size:13px; margin-bottom:8px; }
.crumbs a{ color:var(--gray); }

/* subject card */
.subject{ display:block; color:var(--ink); border-top:5px solid var(--accent); }
.subject:hover{ text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.07); transform:translateY(-2px); transition:.15s; }
.subject h3{ margin:2px 0 6px; font-size:19px; }
.subject .code{ font-size:12px; color:var(--gray); font-weight:600; letter-spacing:.4px; }

/* progress */
.progress{ height:12px; background:var(--soft); border-radius:8px; overflow:hidden; margin:10px 0 6px; }
.progress > i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.progress-label{ font-size:12.5px; color:var(--gray); display:flex; justify-content:space-between; }

/* ---------- Tables ---------- */
table.tbl{ width:100%; border-collapse:collapse; background:var(--white); border-radius:10px; overflow:hidden; }
table.tbl th{ background:var(--accent); color:#fff; text-align:left; font-size:13px; padding:10px 12px; font-weight:600; }
table.tbl td{ border-bottom:1px solid var(--line); padding:10px 12px; vertical-align:middle; font-size:14px; }
table.tbl tr:last-child td{ border-bottom:none; }
table.tbl tr:hover td{ background:#fafcfb; }
.tbl .num{ text-align:center; font-variant-numeric:tabular-nums; }

/* ---------- Badges ---------- */
.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.badge-verde{ background:var(--soft); color:var(--accent2); border:1px solid var(--softbd); }
.badge-azul{ background:#e9ecfb; color:var(--azul); border:1px solid #d4d9f4; }
.badge-gris{ background:#eef1f4; color:var(--gray); border:1px solid #e3e9ee; }
.badge-gold{ background:var(--goldbg); color:var(--gold); border:1px solid #eadfc4; }

.pill{ font-size:12px; font-weight:700; color:var(--accent2); background:var(--soft); border:1px solid var(--softbd);
  border-radius:20px; padding:3px 11px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:15px; }
.field label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:5px; }
.field .hint{ font-size:12px; color:var(--gray); margin-top:4px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--softbd); border-radius:9px; font-size:14px; font-family:inherit;
  background:#fff; color:var(--ink); }
textarea{ min-height:130px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,110,99,.12); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:640px){ .row2{ grid-template-columns:1fr; } }

/* ---------- Flash ---------- */
.flash{ padding:12px 16px; border-radius:10px; margin-bottom:18px; font-weight:600; font-size:14px; }
.flash-ok{ background:var(--soft); color:var(--accent2); border:1px solid var(--softbd); }
.flash-error{ background:#fdecea; color:var(--danger); border:1px solid #f5c6c0; }
.flash-info{ background:#e9ecfb; color:var(--azul); border:1px solid #d4d9f4; }

/* ---------- Auth ---------- */
.auth{ min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:24px; }
.authcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 30px; width:100%; max-width:400px;
  box-shadow:0 10px 40px rgba(0,0,0,.06); }
.authcard .logo{ text-align:center; margin-bottom:8px; }
.authcard .logo img{ height:88px; }
.authcard h1{ text-align:center; font-size:20px; margin:6px 0 2px; color:var(--accent2); }
.authcard .tag{ text-align:center; color:var(--gray); font-size:13px; margin-bottom:20px; }

/* ---------- Misc ---------- */
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat .big{ font-size:30px; font-weight:800; color:var(--accent2); font-variant-numeric:tabular-nums; }
.stat .lbl{ font-size:12.5px; color:var(--gray); }
.muted{ color:var(--gray); }
.mt{ margin-top:16px; } .mb{ margin-bottom:16px; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.note{ background:var(--goldbg); border:1px solid #eadfc4; border-left:4px solid var(--gold); border-radius:8px;
  padding:10px 14px; font-size:13.5px; }
.section-title{ font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--gray); font-weight:700;
  margin:24px 0 10px; border-bottom:1px solid var(--line); padding-bottom:6px; }
.filetag{ display:inline-flex; align-items:center; gap:6px; font-size:13px; background:var(--soft); border:1px solid var(--softbd);
  border-radius:8px; padding:5px 10px; color:var(--accent2); font-weight:600; }
.empty{ text-align:center; color:var(--gray); padding:40px 20px; }