@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root{--bg:#071026;--card:#0f1724;--muted:#94a3b8;--accent:#06b6d4;--text:#e6eef6}
*{box-sizing:border-box}body{font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;background:var(--bg);color:var(--text);margin:0}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{background:linear-gradient(90deg,#041021,#071026);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.03)}
.logo{font-weight:700;color:var(--accent);display:flex;gap:8px;align-items:center}
.card{background:var(--card);border-radius:10px;padding:18px;box-shadow:0 8px 24px rgba(2,6,23,0.6);}
.btn{background:var(--accent);color:#002; padding:8px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid #14233a;background:#061423;color:var(--text)}
.table{width:100%;border-collapse:collapse}
.table th, .table td{padding:10px;border-bottom:1px solid rgba(255,255,255,0.03);text-align:left}
.small{font-size:13px}
.muted{color:var(--muted)}
.chart-wrap{width:100%;max-width:700px;margin-top:12px}
.toast{position:fixed;right:20px;bottom:20px;background:#06202a;padding:12px;border-radius:8px;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,0.6)}
/* Cuando el usuario escribe "profesor" */
.role-profesor {
    background: #ffffff !important;
    color: #000 !important;
    border-color: #ddd !important;
}

/* Cuando el usuario escribe "administrador" */
.role-admin {
    background: #0ea5e9 !important;  /* azul */
    color: #00121a !important;
    border-color: #38bdf8 !important;
}