/* ══════════════════════════════════════════════════════════════════════════
   Musubi · núcleo compartido de los PROTOTIPOS de landing
   7 temas visuales + componentes base + capa A11y. Idéntico al del sistema real
   (consistencia y estándares · Nielsen #4). Cada prototipo añade solo su layout.
   ══════════════════════════════════════════════════════════════════════════ */
:root, html[data-theme="noche"]{--bg:#0d1117;--panel:#161b22;--panel2:#1c2330;--line:#2a3140;--txt:#e6edf3;--mut:#8b98a8;--accent:#7c5cff;--accent2:#4ea1ff;--ok:#3fb950;--warn:#d29922;--bad:#f85149;--arch:#f0a73f;--font:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
html[data-theme="dia"]{--bg:#f6f8fa;--panel:#fff;--panel2:#eef1f5;--line:#d0d7de;--txt:#1f2328;--mut:#636c76;--accent:#8250df;--accent2:#0969da;--ok:#1a7f37;--warn:#9a6700;--bad:#cf222e;--arch:#bc4c00;--font:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
html[data-theme="contraste"]{--bg:#000;--panel:#000;--panel2:#0a0a0a;--line:#fff;--txt:#fff;--mut:#ffe000;--accent:#ffff00;--accent2:#00e5ff;--ok:#00ff5e;--warn:#ffb000;--bad:#ff5e5e;--arch:#ffd000;--font:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
html[data-theme="sepia"]{--bg:#ece0c8;--panel:#f6eeda;--panel2:#efe4cb;--line:#cdbd98;--txt:#433422;--mut:#7a6a4f;--accent:#9a5b2d;--accent2:#3f6f6a;--ok:#5a7a2a;--warn:#9a6a1a;--bad:#a23b2a;--arch:#8a5a1a;--font:Georgia,'Times New Roman',serif;}
html[data-theme="daltonico"]{--bg:#0f1115;--panel:#181b21;--panel2:#20242c;--line:#343a44;--txt:#f0f2f5;--mut:#9aa3ad;--accent:#e69f00;--accent2:#56b4e9;--ok:#0072b2;--warn:#e69f00;--bad:#d55e00;--arch:#cc79a7;--font:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
html[data-theme="matrix"]{--bg:#000700;--panel:#02160a;--panel2:#031f0e;--line:#0a3a1a;--txt:#36ff7a;--mut:#1f9a4e;--accent:#00ff9c;--accent2:#7dff4d;--ok:#00ff5e;--warn:#c8ff00;--bad:#ff4d4d;--arch:#aaff00;--font:'SFMono-Regular',Consolas,Menlo,monospace;}
html[data-theme="profesional"]{--bg:#f1f5f9;--panel:#fff;--panel2:#f8fafc;--line:#e2e8f0;--txt:#0f172a;--mut:#64748b;--accent:#2563eb;--accent2:#0ea5e9;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--arch:#7c3aed;--font:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);line-height:1.6}
a{color:var(--accent2);text-decoration:none}
h1,h2,h3{margin:0}

/* ── A11y base ── */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:8px 14px;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ── Selector de 7 temas (reutilizable) ── */
.themes{display:flex;gap:5px;flex-wrap:wrap}
.themes button{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;position:relative}
.themes button[aria-pressed="true"]{border-color:var(--accent);transform:scale(1.12)}
.themes button:hover::after,.themes button:focus-visible::after{content:attr(data-label);position:absolute;top:28px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;background:var(--panel2);color:var(--txt);border:1px solid var(--line);padding:2px 7px;border-radius:5px;z-index:5}
.sw-noche{background:#0d1117}.sw-dia{background:#fff}.sw-contraste{background:linear-gradient(135deg,#000 50%,#ff0 50%)}.sw-sepia{background:#e0cda0}.sw-daltonico{background:linear-gradient(135deg,#56b4e9 50%,#e69f00 50%)}.sw-matrix{background:#001a00;box-shadow:inset 0 0 4px #00ff66}.sw-profesional{background:#2563eb}

/* ── Barra de usuario (modelo multiusuario/roles) ── */
.userbar{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.userbar .un{font-size:13px;font-weight:700;line-height:1.1}
.userbar .ur{font-size:11px;color:var(--mut)}
.rolepick{font-size:11.5px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:8px;padding:4px 8px;cursor:pointer}

/* ── Botones ── */
.btn{font-size:13.5px;font-weight:600;border:1px solid var(--line);border-radius:9px;padding:8px 14px;color:var(--txt);background:var(--panel2);cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.btn.sm{padding:5px 10px;font-size:12.5px}

/* ── Chips / badges ── */
.chip{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:2px 9px;color:var(--mut)}
.chip.ok{color:var(--ok);border-color:var(--ok)}
.chip.warn{color:var(--warn);border-color:var(--warn)}
.chip.acc{color:var(--accent);border-color:var(--accent)}

/* ── Tarjeta de curso ── */
.course{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;transition:.15s;color:var(--txt)}
.course:hover,.course:focus-within{border-color:var(--accent);transform:translateY(-2px)}
.course .ch{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.course .cic{font-size:24px;width:44px;height:44px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;flex:none}
.course .code{font-size:11.5px;color:var(--mut);font-weight:600;letter-spacing:.03em}
.course h3{font-size:16px}
.course p{margin:8px 0 12px;font-size:13px;color:var(--mut);flex:1}
.course .pbar{height:7px;background:var(--bg);border-radius:6px;overflow:hidden;margin:2px 0 10px}
.course .pbar>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;transition:.5s}
.course .metarow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.course .actions{display:flex;gap:8px}

/* ── Ítems de novedades ── */
.item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;border-left:4px solid var(--accent)}
.item.hito{border-left-color:var(--ok)}
.item.road{border-left-color:var(--warn)}
.item.act{border-left-color:var(--accent2)}
.item .tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--mut)}
.item time{font-size:11.5px;color:var(--mut);font-weight:600}
.item h3{margin:5px 0 4px;font-size:14.5px}
.item p{margin:0;font-size:12.5px;color:var(--mut)}

/* ── Rejillas utilitarias ── */
.grid-c{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.grid-n{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

/* ── Encabezado de sección ── */
.h2{font-size:18px;margin:30px 0 13px;display:flex;align-items:center;gap:9px}
.h2 .ln{flex:1;height:1px;background:var(--line)}
.h2 .ic{font-size:17px}

/* ── Nota de ayuda ── */
.note{font-size:12.5px;color:var(--mut);background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-top:26px}
.note code{background:var(--bg);padding:1px 6px;border-radius:5px}.note b{color:var(--txt)}