/* css/app.css */
:root { --mx: max(16px, 3vw); }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b1020; color:#eef2ff; margin:0; }
.wrap { max-width: 980px; margin: 0 auto; padding: 32px 20px 60px; }
.card { background:#121a33; border:1px solid #1f2a4c; border-radius:16px; padding:24px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);}
h1 { margin:0 0 10px; font-weight:700; letter-spacing:.3px; }
p.muted { color:#b8c1ec; margin-top:4px; }
form { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:20px; }
label { font-size:14px; color:#c7d2fe; display:block; margin-bottom:6px; }
input, select { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a3a6b; background:#0f1630; color:#e6eaff; outline:none; }
input:focus { border-color:#5b8cff; box-shadow:0 0 0 4px rgba(91,140,255,.15); }
.row-span { grid-column: 1 / -1; }
.btn { display:inline-block; padding:12px 16px; border-radius:12px; background:#5b8cff; color:white; border:none; cursor:pointer; font-weight:600; }
.btn:active { transform: translateY(1px); }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.metric { background:#0f1630; border:1px solid #2a3a6b; border-radius:12px; padding:16px; }
.metric h3 { margin:0 0 6px; font-size:14px; color:#a5b4fc; font-weight:600; }
.metric .val { font-size:20px; font-weight:700; }
.warn { background:#2b1831; border:1px solid #7b1b43; color:#ffd6e7; border-radius:12px; padding:16px; }
.errors { background:#3b1a1a; border:1px solid #9b2c2c; color:#ffe3e3; border-radius:12px; padding:16px; }
.foot { color:#a5b4fc; font-size:13px; margin-top:22px; line-height:1.5; }
code { background:#0b122a; border:1px solid #1b2b56; padding:2px 6px; border-radius:6px; }
/* Lienzo de simulación */
.canvas-wrap {
  background:#0f1630; border:1px solid #2a3a6b; border-radius:12px; padding:12px;
}
canvas { width: 100%; height: 360px; display:block; }