/* Interfaz local de CodeCondor. */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap");

:root,
:root[data-theme="theme-1"] { --ink:#23231f; --muted:#65635a; --paper:#f8f6f0; --line:#d3b99b; --brand:#47999d; --success:#48837c; --red:#a84f47; --yellow:#b59c2b; --gray:#a8a395; }
:root[data-theme="theme-2"] { --ink:#202430; --muted:#696b7a; --paper:#f2f0f7; --line:#d9d5e3; --brand:#6b5cce; --success:#28796d; --red:#c44f63; --yellow:#b8872f; --gray:#9896a5; }
:root[data-theme="theme-3"] { --ink:#173141; --muted:#60737b; --paper:#edf4f2; --line:#cdded9; --brand:#d88a2d; --success:#287568; --red:#c75149; --yellow:#bd812c; --gray:#91a19f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(#9fa89e 0.7px,transparent .7px); background-size:17px 17px; }
.shell { position:relative; max-width:1180px; margin:auto; padding:56px 28px 80px; }
.hero { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; padding-bottom:48px; border-bottom:1px solid var(--line); }
.eyebrow, code, .number { font-family:"DM Mono", monospace; }
.eyebrow { color:var(--brand); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:500; }
.brand-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:17px; font-weight:800; letter-spacing:-.02em; }
.brand:hover { text-decoration:none; }
.brand-mark { width:42px; height:42px; display:block; background:var(--brand); mask:url("/static/assets/codecondor-mark.svg") center/contain no-repeat; -webkit-mask:url("/static/assets/codecondor-mark.svg") center/contain no-repeat; }
.theme-control { display:flex; align-items:center; gap:8px; color:var(--muted); font:500 11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.theme-control select { padding:7px 28px 7px 9px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.55); color:var(--ink); font:600 11px Manrope,sans-serif; }
h1 { margin:16px 0; font-size:clamp(44px,7vw,82px); line-height:.98; letter-spacing:-.055em; }
h1 span { color:var(--brand); }
.intro { max-width:570px; color:var(--muted); font-size:16px; }
code { padding:3px 7px; background:#e7e8df; border-radius:5px; font-size:13px; }
.score { min-width:285px; display:flex; align-items:center; gap:18px; padding:19px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.42); }
.score-ring { --progress:0deg; width:72px; height:72px; flex:none; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--brand) var(--progress),#ded8cf 0); position:relative; }
.score-ring::after { content:""; width:55px; height:55px; position:absolute; border-radius:50%; background:#f7f6f0; }
.score-ring strong { z-index:1; font-size:14px; }
.score div:last-child { display:flex; flex-direction:column; gap:5px; }
.score span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.filters { display:flex; gap:8px; flex-wrap:wrap; padding:26px 0 4px; }
button { border:1px solid var(--line); background:rgba(255,255,255,.45); color:var(--muted); padding:9px 13px; border-radius:999px; font:600 12px Manrope,sans-serif; cursor:pointer; }
button:hover,button:focus-visible { border-color:#97a19b; color:var(--ink); }
button.active { color:white; background:var(--ink); border-color:var(--ink); }
button:disabled { cursor:wait; opacity:.55; }
.dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:currentColor; }
.gray { color:var(--gray); }.red { color:var(--red); }.yellow { color:var(--yellow); }.green { color:var(--success); }
.level { margin-top:42px; }
h2 { display:flex; align-items:center; gap:14px; margin:0 0 16px; }
h2 span { font-size:19px; }
h2 small { color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { --accent:var(--gray); min-height:214px; display:flex; flex-direction:column; padding:18px; background:rgba(255,255,255,.58); border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:13px; box-shadow:0 8px 20px rgba(45,56,49,.035); transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(45,56,49,.08); }
.card.failing { --accent:var(--red); }.card.partial { --accent:var(--yellow); }.card.completed { --accent:var(--success); }
.card-top,.card-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.number { color:var(--muted); font-size:12px; }
.status { color:var(--accent); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; }
.status .dot { margin-right:5px; }
h3 { margin:28px 0 auto; font-size:17px; line-height:1.25; }
.bar { height:5px; margin:20px 0 12px; overflow:hidden; background:#e0e2dc; border-radius:4px; }
.bar span { display:block; height:100%; background:var(--accent); border-radius:4px; }
.card-bottom { color:var(--muted); font-size:11px; }
.card-bottom strong { color:var(--ink); }
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.card-actions button { border-radius:8px; padding-inline:8px; }
.check-button { border-color:var(--accent); color:var(--accent); }
.check-button:hover,.check-button:focus-visible { background:var(--accent); border-color:var(--accent); color:white; }
.instructions-button { color:var(--ink); }
.workspace { margin-top:30px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.72); }
.workspace-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:22px; border-bottom:1px solid var(--line); }
.workspace-heading .eyebrow { margin:0 0 7px; }
.workspace-heading h2 { margin:0; }
.workspace-grid { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); min-height:520px; }
.instructions-pane { padding:22px; overflow:auto; border-right:1px solid var(--line); }
.instructions-pane h3 { margin:0 0 18px; }
.markdown-content { color:var(--muted); font-size:13px; line-height:1.65; }
.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6 { margin:24px 0 9px; color:var(--ink); }
.markdown-content h3:first-child,.markdown-content h4:first-child { margin-top:0; }
.markdown-content p { margin:0 0 14px; }
.markdown-content ul { margin:0 0 16px; padding-left:20px; }
.markdown-content code { padding:2px 5px; background:#e7e8df; color:var(--ink); border-radius:4px; }
.markdown-content pre { margin:12px 0 18px; padding:14px; overflow:auto; border-radius:8px; background:var(--ink); }
.markdown-content pre code { padding:0; background:none; color:#eaf1ec; font:12px/1.6 "DM Mono",monospace; white-space:pre; }
.editor-pane { display:flex; min-width:0; flex-direction:column; background:#fff; }
.editor-toolbar { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.editor-toolbar select { padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:white; }
#save-status { margin-left:auto; }
.CodeMirror { flex:1; height:430px; font:14px/1.6 "DM Mono",monospace; }
.editor-actions { display:flex; justify-content:flex-end; gap:9px; padding:12px 14px; border-top:1px solid var(--line); }
.primary-action { border-color:var(--brand); background:var(--brand); color:white; }
.coming-soon { margin-top:18px; color:var(--muted); font-size:10px; font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.06em; }
.checker-result { margin-top:30px; padding:22px; border:1px solid var(--line); border-left:5px solid var(--yellow); border-radius:13px; background:rgba(255,255,255,.7); }
.checker-result[data-state="passed"] { border-left-color:var(--success); }
.checker-result[data-state="failed"] { border-left-color:var(--red); }
.checker-result[data-state="instructions"] { border-left-color:var(--brand); }
.result-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.result-heading .eyebrow { margin:0 0 7px; }
.result-heading h2 { margin:0; }
.checker-result pre { max-height:360px; margin:20px 0 0; padding:16px; overflow:auto; border-radius:9px; background:var(--ink); color:#eaf1ec; font:12px/1.6 "DM Mono",monospace; white-space:pre-wrap; }
a { color:var(--brand); font-weight:700; text-decoration:none; }
a:hover { text-decoration:underline; }
.error,.empty { margin-top:30px; padding:16px; border-radius:9px; background:#f9dfda; color:#8b302b; }
@media (max-width:900px) { .grid{grid-template-columns:repeat(2,1fr)} .hero{align-items:flex-start;flex-direction:column}.score{width:100%}.workspace-grid{grid-template-columns:1fr}.instructions-pane{max-height:280px;border-right:0;border-bottom:1px solid var(--line)} }
@media (max-width:540px) { .shell{padding:34px 18px 60px}.grid{grid-template-columns:1fr}.hero{padding-bottom:30px}.brand-row{align-items:flex-start;flex-direction:column}.theme-control{align-self:flex-end;margin-top:-44px}h1{font-size:46px}.filters{flex-wrap:nowrap;overflow:auto;padding-bottom:8px}button{flex:none} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} }