:root{
  --bg:#0e1117;
  --surface:#151a23;
  --border:rgba(255,255,255,.1);
  --ink:#f3f5f7;
  --muted:#a6aab6;

  --bob:#3ea0ff;      /* azul más vivo */
  --alice:#ffa24a;    /* naranja */
  --charlie:#b0b6c3;  /* gris */

  --souls:#b782ff;
  --trust:#6ee7a8;
  --deal:#ffa7c4;

  --radius:18px;
  --shadow:0 16px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);
  background:
    radial-gradient(1400px 900px at 10% -10%, #1a2130 0%, transparent 55%),
    radial-gradient(1000px 800px at 110% 120%, #0b0f15 0%, #0e1117 65%);
  font:16px/1.45 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}

/* header */
.topbar{max-width:1100px;margin:36px auto 12px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.topbar h1{font-size:clamp(22px,3.6vw,36px);letter-spacing:.03em;text-transform:uppercase;border-bottom:2px solid var(--ink);display:inline-block;margin:0}
.actions{display:flex;gap:12px;align-items:center}
.iconbtn{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:#e8ecff; font-weight:900; text-decoration:none;
}
.iconbtn:hover{box-shadow:0 0 0 3px rgba(134,183,255,.18)}
.see-more{
  padding:8px 14px; border-radius:999px; cursor:pointer; user-select:none;
  border:1px solid var(--border); color:#e8ecff; font-weight:800; letter-spacing:.05em;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.see-more:hover{box-shadow:0 0 0 3px rgba(200,200,200,.15)}

/* layout base */
.container{max-width:1100px;margin:0 auto;padding:8px 16px 48px;display:grid;gap:24px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

/* heads: por defecto 2 columnas; con See more, 3 columnas */
.heads{
  display:grid; gap:14px 16px; padding:16px 18px; border-bottom:1px solid var(--border); align-items:end;
  grid-template-columns:260px 1fr 1fr; /* default BOB|ALICE */
}
#add-user:checked ~ .container .heads{
  grid-template-columns:260px 1fr 1fr 1fr; /* + CHARLIE */
}
.colhead{font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:transparent;-webkit-text-stroke:2px var(--border)}
.stroke-bob{-webkit-text-stroke:2px var(--bob); text-shadow:0 0 18px color-mix(in oklab, var(--bob) 30%, transparent)}
.stroke-alice{-webkit-text-stroke:2px var(--alice); text-shadow:0 0 18px color-mix(in oklab, var(--alice) 30%, transparent)}
.stroke-charlie{display:none; -webkit-text-stroke:2px var(--charlie); text-shadow:0 0 18px color-mix(in oklab, var(--charlie) 30%, transparent)}
#add-user:checked ~ .container .stroke-charlie{display:block}
.spacer{height:1px}

/* offers: por defecto 2 columnas; 3 con See more */
.offers{
  display:grid; gap:14px 16px; padding:16px 18px; border-bottom:1px dashed var(--border);
  grid-template-columns:260px 1fr 1fr; /* default */
}
#add-user:checked ~ .container .offers{
  grid-template-columns:260px 1fr 1fr 1fr; /* + CHARLIE */
}
.offers .offer{grid-column:span 1; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:12px;padding:14px}
.offers .offer:first-child{grid-column:2}
.offers .offer:nth-child(2){grid-column:3}
.offers .offer.charlie{display:none; grid-column:4}
#add-user:checked ~ .container .offers .offer.charlie{display:block}

.task-head{display:flex;gap:10px;align-items:center}
.task-head h2{margin:0;font-size:18px}
.emoji{font-size:24px}
.muted{color:var(--muted)}
.dot{opacity:.6;margin:0 .4rem}

/* details (More + métricas) */
.morebox{margin-top:10px;border:1px dashed var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
.morebox > summary{cursor:pointer;padding:10px 14px;font-weight:800;letter-spacing:.04em;list-style:none}
.morebox[open] > summary{background:rgba(255,255,255,.04)}
.morecontent{padding:0 14px 12px;color:var(--muted)}
.morebox.sub{margin-top:10px}
.list{margin:6px 0 0 0;padding-left:18px}

/* métricas + escala única */
.rows.single-scale{display:grid;grid-template-columns:260px 1fr;gap:14px 16px;padding:18px}

/* Metric “link-like” summary despliega contenido */
.metric{border:1px solid transparent;border-radius:12px}
.metric[open]{border-color:var(--border);background:rgba(255,255,255,.02)}
.metric-summary{display:flex;align-items:center;gap:12px;cursor:pointer}
.metric-summary::-webkit-details-marker{display:none}
.metric-summary .metriclink{color:#dfe6ff;text-decoration:underline dotted 2px; text-underline-offset:3px; font-weight:800; letter-spacing:.03em}
.metric-summary .metriclink:hover{color:#fff}
.metric small{display:block;color:var(--muted)}
.iconic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;border:1px solid var(--border);background:#1a1f2a}
.iconic.souls{box-shadow:0 0 0 3px rgba(183,130,255,.15)}
.iconic.trust{box-shadow:0 0 0 3px rgba(110,231,168,.15)}
.iconic.deal{box-shadow:0 0 0 3px rgba(255,167,196,.15)}
.metric-body{padding:10px 12px 12px}
.knowmore{display:inline-block;margin-top:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;text-decoration:none}
.knowmore:hover{box-shadow:0 0 0 3px rgba(134,183,255,.18)}

/* Escala (sin números debajo) */
.scale.shared{position:relative;height:100px;border-radius:14px;background:#0f1522;border:1px solid var(--border);padding:0 14px}
.scale.shared .axis{
  position:absolute; left:14px; right:14px; top:52px; height:8px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}

/* Contenedor de marcadores = ancho útil de la pista */
.scale.shared .pair{position:absolute; left:14px; right:14px; width:calc(100% - 28px); top:52px; height:0}

/* Marcadores: botón-burbuja del color del usuario */
.marker{
  position:absolute; top:0; left:var(--pos);
  transform:translate(-50%,-160%);
  font-weight:900; font-size:16px; padding:6px 10px; border-radius:999px;
  text-decoration:none; background:rgba(255,255,255,.02);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.marker span{display:inline-block; min-width:2ch; text-align:center}
.marker:focus-visible{outline:2px dashed currentColor; outline-offset:4px}

/* Colores por usuario: texto, borde, ring y tooltip */
.marker.bob{ color:var(--bob); border:2px solid var(--bob); box-shadow:0 0 0 3px color-mix(in oklab, var(--bob) 25%, transparent), 0 8px 24px rgba(0,0,0,.35) }
.marker.alice{ color:var(--alice); border:2px solid var(--alice); box-shadow:0 0 0 3px color-mix(in oklab, var(--alice) 25%, transparent), 0 8px 24px rgba(0,0,0,.35) }
.marker.charlie{ color:var(--charlie); border:2px solid var(--charlie); box-shadow:0 0 0 3px color-mix(in oklab, var(--charlie) 25%, transparent), 0 8px 24px rgba(0,0,0,.35); display:none }

#add-user:checked ~ .container .marker.charlie{ display:inline-block }

/* Tooltips coloreados por usuario (borde y brillo) */
.marker .tt{
  position:absolute; left:50%; bottom:100%; transform:translate(-50%,-10px);
  width:max(220px, 28ch);
  background:#0b101a; border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  color:var(--ink); font-size:13px; line-height:1.35; box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:.18s ease;
}
.marker .tt::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:#0b101a; border:1px solid var(--border); border-top:none; border-left:none;
}
.marker:hover .tt, .marker:focus .tt{opacity:1; pointer-events:auto}
.marker .tt b{display:block; margin-bottom:6px; opacity:.9}
.marker .tt ul{margin:0; padding-left:16px}

/* Bordes/sombras de tooltip por usuario */
.marker.bob .tt{ border-color: color-mix(in oklab, var(--bob) 65%, var(--border)); box-shadow:0 12px 30px color-mix(in oklab, var(--bob) 22%, transparent) }
.marker.alice .tt{ border-color: color-mix(in oklab, var(--alice) 65%, var(--border)); box-shadow:0 12px 30px color-mix(in oklab, var(--alice) 22%, transparent) }
.marker.charlie .tt{ border-color: color-mix(in oklab, var(--charlie) 65%, var(--border)); box-shadow:0 12px 30px color-mix(in oklab, var(--charlie) 22%, transparent) }
.marker.bob .tt::after{ border-right-color: color-mix(in oklab, var(--bob) 65%, var(--border)); border-bottom-color: color-mix(in oklab, var(--bob) 65%, var(--border)) }
.marker.alice .tt::after{ border-right-color: color-mix(in oklab, var(--alice) 65%, var(--border)); border-bottom-color: color-mix(in oklab, var(--alice) 65%, var(--border)) }
.marker.charlie .tt::after{ border-right-color: color-mix(in oklab, var(--charlie) 65%, var(--border)); border-bottom-color: color-mix(in oklab, var(--charlie) 65%, var(--border)) }

/* Filas: las 3 columnas ya no afectan aquí (escala única) */

/* Responsive */
@media (max-width:720px){
  .heads{grid-template-columns:1fr}
  #add-user:checked ~ .container .heads{grid-template-columns:1fr}
  .offers{grid-template-columns:1fr}
  #add-user:checked ~ .container .offers{grid-template-columns:1fr}
  .offers .offer:first-child,.offers .offer:nth-child(2),.offers .offer.charlie{grid-column:auto}
  .rows.single-scale{grid-template-columns:1fr}
  .colhead{display:none}
}

