:root{
  --bg:#0c0c12; --ink:#e9e9f1; --muted:#a6a7b6;
  --panel:#141422; --stroke:#222237; --accent:#65f7b0; --accent2:#7a7aff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,Segoe UI,Roboto,Arial}

.app{max-width:1100px;margin:auto;padding:1rem}
header h1{margin:.2rem 0 .2rem;font-size:1.6rem}
header .muted{color:var(--muted);margin:0 0 .8rem}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:1rem;
  align-items:start;
}

/* Panel (cada rol) */
.panel{
  border:1px solid var(--stroke);
  background:var(--panel);
  border-radius:14px;
  padding:.8rem;
}
.role{margin:.2rem 0 .6rem; font-size:1.1rem; color:var(--accent)}

/* Lista de opciones */
.list{display:flex; flex-direction:column; gap:.5rem}
.option{position:relative; border:1px solid var(--stroke); border-radius:10px; background:#1a1a2a; padding:.45rem .55rem}
.option input[type=checkbox]{position:absolute; inset:0; opacity:0; pointer-events:none}
.option label{display:flex; gap:.5rem; align-items:center; cursor:pointer}
.option .badge{display:inline-block; font-size:.72rem; color:#0c0d12; background:var(--accent); padding:.1rem .4rem; border-radius:8px}
.option .txt{flex:1}

/* Estado checked */
.option:has(> input:checked){
  outline:2px solid color-mix(in oklab, var(--accent) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent) inset;
}

/* Resumen limpio (chips) */
.summary{margin-top:1.2rem; border:1px solid var(--stroke); border-radius:14px; background:linear-gradient(180deg,#111325,#13142a); padding:.6rem .8rem}
.summary h3{margin:.1rem 0 .5rem; color:var(--accent2)}

.chips{display:flex; flex-wrap:wrap; gap:.4rem; min-height:2.2rem}
.chip{display:none; padding:.35rem .6rem; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0b0b10; font-weight:700; border:1px solid #0003; white-space:nowrap}

/* Mostrar chips de las opciones marcadas */
.option:has(> input:checked) .chip{display:inline-flex}

/* En móviles: apilar todo */
@media (max-width: 720px){
  .grid{grid-template-columns: 1fr}
}