:root { --bg:#0f1720; --panel:#17212d; --line:#263444; --txt:#e6edf3; --mut:#8b9bab; --acc:#3aa6d8; --err:#ef6b6b; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--txt); }
#app { display:flex; min-height:100vh; }
aside { width:210px; background:var(--panel); border-right:1px solid var(--line); padding:20px 16px; display:flex; flex-direction:column; }
aside h2 { margin:0 0 20px; }
nav a { display:block; padding:8px 10px; border-radius:6px; color:var(--txt); text-decoration:none; }
nav a.active { background:var(--line); }
nav a.soon { color:var(--mut); pointer-events:none; }
.user { margin-top:auto; color:var(--mut); font-size:13px; }
main { flex:1; padding:28px 36px; max-width:960px; }
h1 { margin:0 0 16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; }
#login { display:grid; place-items:center; min-height:100vh; }
#login form { width:320px; display:flex; flex-direction:column; gap:10px; }
input, textarea, select { background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:9px 10px; font:inherit; width:100%; }
button { background:var(--acc); color:#04141d; border:0; border-radius:6px; padding:9px 14px; font:inherit; font-weight:600; cursor:pointer; }
button.link { background:none; color:var(--acc); padding:0; font-weight:400; }
.muted { color:var(--mut); } .error { color:var(--err); min-height:1.2em; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
th { color:var(--mut); font-weight:500; font-size:13px; }
tr.click { cursor:pointer; } tr.click:hover { background:var(--panel); }
.tag { display:inline-block; padding:1px 8px; border-radius:99px; background:var(--line); font-size:12px; }
.row { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.drop { border:2px dashed var(--line); border-radius:10px; padding:26px; text-align:center; color:var(--mut); margin-bottom:16px; }
.drop.over { border-color:var(--acc); color:var(--txt); }
form.stack { display:flex; flex-direction:column; gap:12px; max-width:520px; }
.checks label { display:inline-flex; gap:6px; margin-right:14px; align-items:center; }
.checks input { width:auto; }
[hidden] { display: none !important; }
a { color: var(--acc); }
.ia { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; cursor:pointer; } .ia input { width:auto; margin-top:4px; }
.nota { margin-bottom:12px; } .nota audio { width:100%; margin:8px 0; } .nota h4 { margin:10px 0 4px; } .nota ul { margin:6px 0; padding-left:18px; } h2 { margin:20px 0 10px; font-size:18px; }
.dictado { margin: 6px 0 12px; } .dictado .mic { background: var(--line); color: var(--txt); } .entendido { margin-top:8px; padding:10px 12px; border-left:3px solid var(--acc); background: var(--bg); border-radius:6px; font-size:14px; }