/* CANAGRAF Design System — Sprint 0
   Extiende el baseline visual de canagraf(1).zip sin sustituirlo. */
:root{
  --radius-sm:9px; --radius-md:12px; --radius-lg:18px;
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --space-6:32px;
  --focus:0 0 0 3px rgba(0,184,255,.22);
}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;color:#050910;padding:10px 14px;border-radius:8px}
.system-page{min-height:100vh}
.system-main{padding:34px 0 60px}
.system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.system-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}
.system-card h2,.system-card h3{margin-top:0}
.system-card p{color:var(--muted)}
.status-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #26394e;border-radius:999px;padding:7px 11px;color:#dbe5ef;font-size:12px;font-weight:800}
.status-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 16px rgba(0,213,198,.6)}
.system-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.codebox{background:#03070d;border:1px solid var(--line);border-radius:12px;padding:14px;overflow:auto;color:#cbd7e5;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.notice{border-left:3px solid var(--cyan);background:rgba(0,184,255,.07);padding:13px 15px;border-radius:0 10px 10px 0;color:#dce7f2}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:none;box-shadow:var(--focus)}
@media(max-width:900px){.system-grid{grid-template-columns:1fr}}