:root { --fg:#1a1a1a; --muted:#666; --bg:#f7f7f5; --card:#fff; --border:#e2e2dc; --accent:#2f6f3e; }
* { box-sizing: border-box; }
body { font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; color:var(--fg); background:var(--bg); margin:0; padding:2rem 1rem 4rem; }
main { max-width:960px; margin:0 auto; }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
h1 { margin:0 0 .25rem; font-size:1.6rem; }
.lede { color:var(--muted); margin:0 0 1.5rem; }
.btn { display:inline-block; padding:.5rem 1rem; border-radius:6px; background:var(--accent); color:#fff; text-decoration:none; font-size:.95rem; white-space:nowrap; }
.btn.sec { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.controls { margin:0 0 1rem; }
.controls input { width:100%; padding:.55rem .75rem; font-size:1rem; border:1px solid var(--border); border-radius:6px; background:var(--card); }
.producer { background:var(--card); border:1px solid var(--border); border-radius:8px; margin-bottom:.5rem; overflow:hidden; }
.producer > summary { list-style:none; cursor:pointer; padding:.9rem 1rem; display:block; text-align:left; }
.producer > summary::-webkit-details-marker { display:none; }
.producer > summary::before { content:"▸"; color:var(--muted); margin-right:.5rem; transition:transform .15s ease; display:inline-block; }
.producer[open] > summary::before { transform:rotate(90deg); }
.name { font-weight:600; display:inline; }
.fields { margin-top:.4rem; margin-left:1.2rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.25rem 1rem; font-size:.88rem; }
.field { display:flex; gap:.35rem; min-width:0; }
.field .label { color:var(--muted); flex-shrink:0; }
.field .value { overflow:hidden; text-overflow:ellipsis; }
.field a { color:var(--accent); text-decoration:none; }
.field a:hover { text-decoration:underline; }
.body { padding:0 1rem 1rem; border-top:1px solid var(--border); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:var(--bg); font-weight:600; }
.empty { color:var(--muted); font-style:italic; padding:.75rem 0; }
@media (max-width:600px) { .fields { grid-template-columns:1fr; } header { flex-direction:column; } }
.acciones { display:flex; gap:.5rem; }