:root { --bg:#f5f6f8; --fg:#1d2330; --card:#fff; --line:#dde1e8; --accent:#1f4fd8; --err:#b3261e; --ok:#1b6e3a; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171d; --fg:#e6e9ef; --card:#1d222b; --line:#2d3441; --accent:#6d93ff; --err:#ff8a80; --ok:#7bd89a; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
.bar { display:flex; gap:1.5rem; align-items:center; padding:.75rem 1rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.bar nav { display:flex; gap:1rem; flex:1; }
a { color:var(--accent); }
main { max-width:960px; margin:1.5rem auto; padding:0 1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.25rem; margin-bottom:1rem; overflow-x:auto; }
.narrow { max-width:420px; margin-inline:auto; }
label { display:block; margin:.75rem 0; font-weight:600; }
input, select { display:block; width:100%; padding:.5rem; margin-top:.25rem; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
button { padding:.5rem 1rem; font:inherit; color:#fff; background:var(--accent); border:0; border-radius:6px; cursor:pointer; }
button.link { background:none; color:var(--accent); padding:0 .25rem; }
form.inline { display:flex; gap:.5rem; align-items:center; margin:0; }
form.inline select { width:auto; margin:0; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.muted { color:#7b8494; font-size:.9rem; }
.msg { padding:.6rem .8rem; border-radius:6px; border:1px solid; }
.msg.error { color:var(--err); }
.msg.ok { color:var(--ok); }
.qr { text-align:center; background:#fff; padding:.5rem; border-radius:6px; }
.qr svg { max-width:100%; height:auto; }
code { word-break:break-all; }

/* Fase 2 */
textarea { display:block; width:100%; padding:.5rem; margin-top:.25rem; font:13px/1.45 ui-monospace, monospace; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
.buttons { display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0; }
button.secondary { background:#5b6475; }
button.danger { background:var(--err); color:#fff; }
.check { font-weight:400; }
.check input { display:inline; width:auto; margin-right:.4rem; }
.tag { padding:.1rem .5rem; border-radius:999px; font-size:.8rem; border:1px solid var(--line); }
.tag.publicado { color:var(--ok); border-color:var(--ok); }
.tag.borrador { color:var(--accent); border-color:var(--accent); }
.tag.archivado { color:#7b8494; }
.tag.fallo { color:var(--err); border-color:var(--err); }
.msg.warn { color:#9a6700; }
@media (prefers-color-scheme: dark) { .msg.warn { color:#e3b341; } }
.reply { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:.6rem; }
.checks { list-style:none; padding:0; margin:.25rem 0 1rem; }
.checks .pass { color:var(--ok); } .checks .fail { color:var(--err); }
details { margin:.5rem 0; }
.diff { font:13px/1.45 ui-monospace, monospace; overflow-x:auto; }
.d { white-space:pre-wrap; padding:0 .4rem; }
.d.add { background:rgba(46,160,67,.2); } .d.del { background:rgba(248,81,73,.2); } .d.hdr { color:#7b8494; }