:root { color-scheme: dark; --bg:#0f1115; --card:#171a21; --fg:#e8eaf0; --mut:#9aa3b2; --line:#272c36; --acc:#6ea8fe; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, sans-serif; }
.top { display:flex; gap:16px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); }
.top form { margin-left:auto; }
.layout { display:flex; min-height:calc(100vh - 50px); }
.side { width:220px; padding:16px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.side a { color:var(--mut); text-decoration:none; } .side a[aria-current] { color:var(--fg); font-weight:600; }
main { flex:1; padding:16px; min-width:0; }
h1 { margin:0 0 12px; font-size:22px; }
.btn, button { background:var(--card); color:var(--fg); border:1px solid var(--line); padding:8px 12px; border-radius:8px; cursor:pointer; font:inherit; }
.mp-frame { width:100%; min-height:420px; border:1px solid var(--line); border-radius:12px; background:var(--card); display:block; }
@media (max-width: 720px) { .layout { flex-direction:column; } .side { width:auto; flex-direction:row; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; } main { padding:12px 16px; } }

.ensayo{margin:0;padding:6px 16px;background:#3a2f12;color:#f5b83d;font-size:13px;border-bottom:1px solid #5b4a1a}