:root{
  --bg:#0b0b0f; --panel:#12121a; --ink:#eaeaf0; --muted:#a0a3ad;
  --stroke:#1f1f2b; --a:#00ff88;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif}

.tree-form{max-width:900px;margin:28px auto;padding:16px;background:var(--panel);border:1px solid var(--stroke);border-radius:16px}
h1{margin:.25rem 0 10px;color:var(--a);font-size:1.2rem}

.name-row{
  display:flex;gap:.6rem;align-items:center;margin:0 0 10px 0;
}
.name-row input{
  flex:1;min-width:200px;
  background:#1a1a25;border:1px solid #2a2a3a;color:var(--ink);
  border-radius:10px;padding:.55rem .7rem
}
.name-row input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 2px #00ff8830}

details{margin:.3rem 0 .3rem 1rem;padding-left:.75rem;border-left:1px dashed #2a2a3a}
summary{list-style:none}
summary::-webkit-details-marker{display:none}

/* Hacemos el summary un renglón con checkbox + texto (clicables) */
summary.node{
  display:flex;align-items:center;gap:.55rem;
  padding:.3rem .45rem;border-radius:8px;
}
summary.node:hover{background:#171722}
summary.node input[type="checkbox"]{
  width:1rem;height:1rem;accent-color:var(--a);
}

/* Hojas */
label.leaf{
  display:flex;align-items:center;gap:.55rem;
  padding:.25rem .45rem;margin:.15rem 0 0 1rem;border-radius:8px;cursor:pointer;
}
label.leaf:hover{background:#171722}
label.leaf input{width:1rem;height:1rem;accent-color:var(--a)}

/* Línea de resumen */
.summary-line{
  margin-top:14px;padding:.6rem .8rem;border-top:1px solid #2a2a3a;color:var(--muted)
}
.summary-line strong{color:var(--ink);margin-right:.3rem}