:root { --bg:#f7f7f2; --fg:#1f2421; --muted:#68706b; --card:#fff; --line:#e3e5df; --ok:#2f9e44; --ko:#e03131; --unsure:#f59f00; --accent:#1c7ed6; --radius:16px; }
* { box-sizing: border-box; }
body { margin:0; font:17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); }
main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }
a { color: var(--accent); }
h1 { font-size: 1.4rem; line-height: 1.3; margin: .2em 0 .5em; }
h2 { font-size: 1.1rem; }
.top { position: sticky; top: 0; z-index: 2; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; text-decoration:none; color:var(--fg); }
.stats { display:flex; gap:12px; font-weight:700; }
.goal.met { color: var(--ok); }
.menu { display:flex; gap:14px; align-items:center; font-size:.95rem; }
.menu form { margin:0; }
button.link { background:none; border:0; color:var(--accent); font:inherit; padding:0; cursor:pointer; text-decoration:underline; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:14px 0; }
.muted { color: var(--muted); font-size: .92rem; }
.crumbs { font-size:.9rem; color:var(--muted); margin: 4px 0; }
.flash { background:#e6fcf5; border:1px solid #96f2d7; border-radius:12px; padding:10px 14px; }
.error { background:#fff5f5; border:1px solid #ffc9c9; color:#c92a2a; border-radius:12px; padding:10px 14px; }
label { display:block; margin: 12px 0; font-weight:600; }
input, textarea, select { display:block; width:100%; margin-top:6px; font:inherit; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
button, .button { display:inline-block; font:inherit; font-weight:700; padding:12px 18px; border-radius:14px; border:2px solid var(--line); background:#fff; color:var(--fg); cursor:pointer; text-decoration:none; }
.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.bar { height:12px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0; }
.bar span { display:block; height:100%; background:var(--ok); }
.path { list-style:none; padding:0; margin: 24px 0; display:flex; flex-direction:column; gap:18px; }
.node a { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--fg); width: 60%; }
.node.left a { margin-right:auto; } .node.right a { margin-left:auto; }
.ring { --p:0; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line) 0); }
.ring span { width:66px; height:66px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-weight:800; }
.node.new .ring span { color: var(--muted); }
.node.done .ring span { background: var(--ok); color:#fff; }
.node-name { font-weight:700; margin-top:6px; }
.node-meta { font-size:.85rem; color:var(--muted); }
.lessons { list-style:none; padding:0; }
.lesson-head { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.tag { font-size:.75rem; background:#e7f5ff; color:#1864ab; padding:2px 8px; border-radius:99px; }
.dots { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; text-decoration:none; color:#fff; background:var(--line); }
.dot.conforme { background:var(--ok); } .dot.no-conforme { background:var(--ko); } .dot.duda { background:var(--unsure); }
.dot.changed { background:#fff; border:2px dashed var(--unsure); }
.narrative { background:var(--bg); border-radius:12px; padding:10px 12px; font-size:.95rem; }
.code { display:inline-block; font-size:.85rem; background:var(--fg); color:#fff; padding:2px 8px; border-radius:8px; vertical-align:middle; }
.steps { list-style:none; padding:0; margin: 14px 0; }
.steps li { padding:8px 0; border-bottom:1px solid var(--line); }
.kw { font-weight:800; margin-right:4px; }
.kw-dado { color:#5f3dc4; } .kw-cuando { color:#1864ab; } .kw-entonces { color:#2b8a3e; } .kw-y, .kw-pero { color:var(--muted); }
.question { font-weight:800; font-size:1.1rem; margin-top:18px; }
.previous { font-size:.92rem; background:#fff9db; border-radius:12px; padding:8px 12px; }
.answers { display:grid; gap:10px; }
.answer { width:100%; padding:16px; font-size:1.05rem; border-width:2px; border-bottom-width:5px; }
.answer.ok { border-color:var(--ok); color:var(--ok); } .answer.ko { border-color:var(--ko); color:var(--ko); } .answer.unsure { border-color:var(--unsure); color:#b06f00; }
.js .comment[hidden] { display:none; }
.shots { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.shots img { width:100%; border-radius:10px; border:1px solid var(--line); }
.shots figcaption { font-size:.8rem; color:var(--muted); }
.evidence-title { font-size:.95rem; margin: 16px 0 8px; color: var(--muted); }
.upload { margin-bottom: 14px; }
details summary { cursor:pointer; font-weight:600; }
.summary { white-space:pre-wrap; background:var(--bg); padding:12px; border-radius:12px; font-size:.85rem; }
.login { max-width: 420px; margin: 10vh auto; }
.inline label { display:inline-block; } .inline select { display:inline-block; width:auto; }
@media (min-width: 900px) {
  main { max-width: 960px; }
  .answers { grid-template-columns: repeat(3, 1fr); }
  .answers .comment { grid-column: 1 / -1; }
  .node a { width: 40%; }
}