:root { --fondo:#f6f7f9; --panel:#fff; --texto:#1c2430; --suave:#5b6675; --linea:#d9dee5; --acento:#1d4ed8; --error:#b42318; }
@media (prefers-color-scheme: dark) { :root { --fondo:#0f141b; --panel:#171e28; --texto:#e8ecf2; --suave:#9aa6b6; --linea:#2a3441; --acento:#7aa2ff; --error:#ff8a80; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; font:16px/1.45 system-ui, sans-serif; background:var(--fondo); color:var(--texto); }
header { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.6rem 1rem; background:var(--panel); border-bottom:1px solid var(--linea); }
header b { margin-right:auto; }
main { max-width:60rem; margin:0 auto; padding:1rem; }
button, input, select, textarea { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--linea); border-radius:6px; padding:.5rem .7rem; min-height:44px; }
button { cursor:pointer; background:var(--acento); color:#fff; border-color:var(--acento); }
button.sec { background:var(--panel); color:var(--texto); border-color:var(--linea); }
section, form.caja { background:var(--panel); border:1px solid var(--linea); border-radius:8px; padding:1rem; margin:0 0 1rem; }
form.caja { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); align-items:end; }
label { display:grid; gap:.2rem; font-size:.9rem; color:var(--suave); }
table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--linea); white-space:nowrap; }
.error { color:var(--error); } .suave { color:var(--suave); }
.badge { padding:.1rem .5rem; border:1px solid var(--linea); border-radius:99px; font-size:.85rem; }
a.fila { color:var(--acento); cursor:pointer; text-decoration:underline; }
code { word-break:break-all; }
td.envolver { white-space: normal; min-width: 6rem; }