:root{
  --bg:#0b1020;
  --bg2:#17224a;

  --surface: rgba(255,255,255,.08);
  --surface2: rgba(255,255,255,.11);

  --card: rgba(18,26,47,.88);
  --card2: rgba(18,26,47,.94);

  --text:#eaf0ff;
  --muted:#b2bddf;

  --accent:#4f8cff;
  --line:rgba(170,190,255,.14);

  --danger:#ff4f6d;
}

*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}

body{
  margin:0;
  background:radial-gradient(1200px 600px at 20% 0%, var(--bg2) 0%, var(--bg) 60%);
  color:var(--text);
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(10,14,28,.65);
  backdrop-filter:blur(10px);
  position:sticky;top:0;
  z-index:10;
}
.brand{font-weight:900;letter-spacing:.2px}
.small{font-size:12px;color:var(--muted)}

/* Layout containers */
.container{max-width:1100px;margin:22px auto;padding:0 16px}
.page{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
}

/* Cards */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.card.tight{padding:14px}

h1,h2,h3{margin:0 0 10px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:14px 0}

.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns: 1.2fr .8fr}
@media (max-width: 900px){ .grid.cols-2{grid-template-columns:1fr} }

/* Buttons */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.btn,.btn-secondary{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid var(--line);
  font-weight:900;
}
.btn{background:var(--accent);color:#071022;border-color:transparent}
.btn:hover{opacity:.92;text-decoration:none}
.btn-secondary{background:transparent;color:var(--text)}
.btn-secondary:hover{background:rgba(255,255,255,.08);text-decoration:none}

/* Forms */
input,select,button{font:inherit}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px;font-weight:800}

input[type="text"], input[type="email"], input[type="password"], select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.10);
  color:var(--text);
  outline:none;
}
input::placeholder{color:rgba(234,240,255,.55)}
input:focus,select:focus{
  border-color:rgba(79,140,255,.75);
  box-shadow:0 0 0 4px rgba(79,140,255,.14);
  background: rgba(255,255,255,.12);
}

button{
  padding:10px 14px;
  border-radius:12px;
  border:none;
  background:var(--accent);
  color:#071022;
  font-weight:900;
  cursor:pointer;
}
button:hover{opacity:.92}

.notice{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.08);
}
.error{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,79,109,.55);
  background:rgba(255,79,109,.14);
}

/* ===== Auth pages ===== */
.auth-wrap{
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 16px 46px;
}
.auth-card{
  width:min(960px, 100%);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  padding:22px;
  background: var(--card2);
  border:1px solid var(--line);
  border-radius:22px;
}
@media (max-width: 900px){ .auth-card{grid-template-columns:1fr} }

.auth-title{
  font-size:40px;
  letter-spacing:.2px;
  margin:0 0 6px;
}
.auth-sub{color:var(--muted);margin:0 0 14px}

.auth-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.login-help{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.08);
  color:var(--text);
  font-size:13px;
  line-height:1.55;
}
.login-help b{color:#ffffff}
code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.10)}


/* Tables */
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:900;background:rgba(255,255,255,.04)}
.table tr:hover td{background:rgba(255,255,255,.03)}

.alert{padding:12px 14px;border-radius:14px;border:1px solid rgba(79,140,255,.40);background:rgba(79,140,255,.12);margin:12px 0}

/* Badges / chips */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:700;
  font-size:.85rem;
}

/* Mejor legibilidad de opciones en selects (Chrome/Edge) */
select{color:#0b1020; background:#f2f5ff;}
select option{color:#0b1020; background:#ffffff;}

/* Dark-mode-friendly wrapper (por si algún select está dentro de card dark) */
.card select, .panel select, .box select{color:#0b1020; background:#f2f5ff;}


/* Dashboard KPIs */
.card.mini{padding:12px;border-radius:16px}
.kpi{font-size:28px;font-weight:900;line-height:1}

/* Docente: tabla clickeable */
.table tbody tr.clickable{cursor:pointer}
.table tbody tr.clickable:hover{background:rgba(255,255,255,.04)}