/* ===============================
   DEFINERS — Formulario Progresivo
   Only HTML + CSS (sin JS)
   =============================== */
:root{
  --bg:#0b0b0f; --panel:#11131a; --ink:#e9eaf2; --muted:#a3a7b4;
  --line:#1e2133; --fx:#161827; --accent:#7b5cff; --accent2:#00ffa0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:
    radial-gradient(1000px 700px at 110% -10%, rgba(123,92,255,.12), transparent 60%),
    radial-gradient(800px 600px at -10% 120%, rgba(0,255,160,.10), transparent 50%),
    var(--bg);
  font-family:'Outfit',system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  letter-spacing:.2px;
}
.top{max-width:1100px;margin:1.1rem auto .5rem;padding:0 1rem}
h1{margin:.2rem 0 .2rem}
.lede{color:var(--muted)}

.depth{max-width:1100px;margin:0 auto;padding:0 1rem}
.h{position:absolute;left:-9999px}
.depth__controls{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  border:1px dashed var(--line); border-radius:12px; padding:.6rem;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
.depth__controls legend{padding:0 .4rem; color:var(--muted)}
.depth__controls input{position:absolute;left:-9999px}
.depth__controls label{
  border:1px solid var(--line); border-radius:999px; padding:.35rem .7rem;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  cursor:pointer;
}
/* Glow en el seleccionado */
#lvl1:checked + label, #lvl2:checked + label, #lvl3:checked + label,
#lvl4:checked + label, #lvl5:checked + label{
  border-color:var(--accent); box-shadow:0 0 12px rgba(123,92,255,.45);
}

/* Layout general de packs */
.shell{max-width:1100px; margin: .8rem auto 2rem; padding:0 1rem; display:grid; gap:1rem}
.pack{
  border:1px solid var(--line); border-radius:16px; padding:1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  display:none;
  animation:fade .25s ease both;
}
@keyframes fade{from{opacity:.0; transform:translateY(.25rem)} to{opacity:1; transform:none}}
.pack h3{margin:.1rem 0 .6rem; color:var(--accent2)}

/* Progresión por niveles; muestra acumulativo */
#lvl1:checked ~ .shell .pack--1{display:block}
#lvl2:checked ~ .shell .pack--1,
#lvl2:checked ~ .shell .pack--2{display:block}
#lvl3:checked ~ .shell .pack--1,
#lvl3:checked ~ .shell .pack--2,
#lvl3:checked ~ .shell .pack--3{display:block}
#lvl4:checked ~ .shell .pack--1,
#lvl4:checked ~ .shell .pack--2,
#lvl4:checked ~ .shell .pack--3,
#lvl4:checked ~ .shell .pack--4{display:block}
#lvl5:checked ~ .shell .pack--1,
#lvl5:checked ~ .shell .pack--2,
#lvl5:checked ~ .shell .pack--3,
#lvl5:checked ~ .shell .pack--4,
#lvl5:checked ~ .shell .pack--5{display:block}

/* Campos */
.field{display:block}
.lbl{display:block; font-weight:600; font-size:.95rem; margin-bottom:.25rem}
input[type=text], textarea, select{
  width:100%; background:#13162a; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:.6rem .7rem;
}
textarea{resize:vertical}
.grid{display:grid; gap:.7rem}
.grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:880px){ .grid--two, .grid--three{grid-template-columns:1fr} }
.chips{display:flex; gap:.4rem; flex-wrap:wrap}
.chips label{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .55rem; border-radius:999px;
  background:#171a2e; border:1px solid var(--line);
  cursor:pointer;
}
.chips input{accent-color:var(--accent)}

/* Barras/continuos estilo sketch */
.bar{border:1px dashed var(--line); border-radius:12px; padding:.6rem; background:rgba(255,255,255,.02)}
.bar__rail{height:6px; background:linear-gradient(90deg, rgba(123,92,255,.6), rgba(0,255,160,.6)); border-radius:99px; margin:.4rem 0}
.bar__choices{display:flex; gap:.6rem; flex-wrap:wrap}
.bar__choices label{display:inline-flex; align-items:center; gap:.35rem; background:#15182b; border:1px solid var(--line); padding:.2rem .55rem; border-radius:999px; cursor:pointer}
.bar__scale{display:flex; justify-content:space-between; color:var(--muted); font-size:.85rem; margin-bottom:.25rem}

/* Inline categorizing */
.inline-cat{margin-top:.5rem}
.inline-cat summary{cursor:pointer}

/* Funnel (embudo) */
.funnel{display:grid; gap:.6rem}
.funnel__band{
  background:conic-gradient(from -45deg at 15% 50%, rgba(123,92,255,.12), transparent 30%) , #15182b;
  border:1px solid var(--line); border-radius:12px; padding:.6rem .7rem;
}
.funnel .tag{
  display:inline-block; font-weight:700; color:var(--accent);
  background:#0f1120; border:1px solid var(--line); border-radius:999px; padding:.2rem .6rem; margin-bottom:.35rem;
}
.evidence{border:1px dashed var(--line); border-radius:12px; padding:.7rem; background:#13162a}
.evidence h4{margin:.1rem 0 .4rem}

/* WYSIWYG */
.output summary{cursor:pointer}
.output__box{border:1px solid var(--line); border-radius:12px; padding:.7rem; background:#111426}

/* Footer */
.foot{max-width:1100px; margin:1rem auto 2.5rem; padding:0 1rem; color:var(--muted); text-align:center}