body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 20px; }
h1 { margin: 0 0 10px; }
.controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
select, input[type=search] { padding: 6px 8px; border: 1px solid #ccc; border-radius: 0; }
.section { border: 1px solid #ddd; border-radius: 0; padding: 16px; margin-bottom: 18px; }
.small { font-size: 12px; color: #666; }
.table-wrap { max-height: 460px; overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border: 1px solid #eee; padding: 6px 8px; text-align: left; }
th { background: #fafafa; position: sticky; top: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
canvas { max-width: 100%; height: auto; display:block; }
/* sin redondeos (ya lo dejaste así) */
select, input[type=search], .section, .btn { border-radius: 0; }

/* lista de checks en filas que envuelven */
.checks { display: flex; gap: 10px; flex-wrap: wrap; }
.checks label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ddd; padding: 4px 8px; }
.btn { padding: 6px 10px; border: 1px solid #ccc; background: #f7f7f7; cursor: pointer; }
.btn:active { transform: translateY(1px); }