/* Bootcamp Skilland · styles/views/s4.css — sesión 4 (constructor E). Prefijo s4-. */

/* ================= F4.0 · funnel ================= */
.s4-funnel{min-width:0}
.s4-funnel__barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-3)}
.s4-funnel__pista{display:flex;align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 2px var(--sp-4);
  scroll-snap-type:x proximity;scrollbar-width:thin}
.s4-etapa-item{display:flex;align-items:flex-start;flex:none;scroll-snap-align:start}
.s4-etapa{width:224px;flex:none;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--rule-strong);
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3) var(--sp-3);transition:border-color .15s,width .2s}
.s4-etapa:hover{border-color:var(--accent)}
.s4-etapa--abierta{width:340px;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.s4-etapa__cab{display:flex;align-items:center;gap:4px}
.s4-etapa__cab .handle{margin-left:-6px}
.s4-etapa__num{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;margin-right:auto}
.s4-etapa__nombre.input{font-weight:600;color:var(--ink);font-size:var(--fs-md);min-height:36px;padding:6px 10px;border-color:transparent;background:var(--card-2)}
.s4-etapa__nombre.input:hover{border-color:var(--rule-strong)}
.s4-etapa__resumen{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);color:var(--muted)}
.s4-etapa__dato{font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.s4-etapa__activos{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.s4-etapa__activos .tag{text-transform:none;letter-spacing:0;font-weight:500;white-space:normal;text-align:left}
.s4-etapa__toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:8px 2px 0;border-top:1px solid var(--rule);
  font-size:var(--fs-sm);font-weight:600;color:var(--accent-text)}
.s4-etapa__toggle:hover{color:var(--ink)}
.s4-etapa__cuerpo:empty{display:none}
.s4-etapa__cuerpo{display:flex;flex-direction:column;gap:var(--sp-3)}
.s4-preg{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px}
.s4-preg__n{font-size:var(--fs-xs);font-weight:600;color:var(--accent-text);padding-top:2px;font-variant-numeric:tabular-nums}
.s4-preg__ed{min-width:0}
.s4-preg__label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:6px}
.s4-preg .textarea,.s4-preg .input{font-size:var(--fs-sm)}
.s4-preg .lista-editor .fila{gap:4px}
.s4-preg .input--num{max-width:120px}

/* flecha de conversión (pertenece a la caja de la izquierda) */
.s4-flecha{flex:none;width:72px;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:52px;color:var(--accent)}
.s4-flecha__linea{display:inline-flex}
.s4-flecha__linea .icon{width:30px;height:30px}
.s4-flecha__pct{font-size:var(--fs-sm);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.s4-etapa-item:last-child .s4-flecha{display:none}
.s4-etapa-item.sortable-chosen,.s4-etapa-item.sortable-drag{box-shadow:none!important}
.s4-etapa-item.sortable-chosen .s4-etapa,.s4-etapa-item.sortable-drag .s4-etapa{box-shadow:var(--shadow-drag)}

@media (max-width:640px){
  .s4-funnel__pista{flex-direction:column;align-items:stretch;overflow-x:visible;padding:0}
  .s4-etapa-item{flex-direction:column;align-items:stretch}
  .s4-etapa,.s4-etapa--abierta{width:100%}
  .s4-flecha{width:auto;padding:6px 0;flex-direction:row;justify-content:center;gap:8px}
  .s4-flecha__linea{transform:rotate(90deg)}
  .s4-flecha__linea .icon{width:24px;height:24px}
}

/* ================= F4.1 · plantilla ================= */
.s4-plantilla{position:relative;display:grid;gap:var(--sp-5)}
.s4-plantilla__medidor{position:absolute;visibility:hidden;white-space:pre;left:0;top:0;pointer-events:none;
  font-size:var(--fs-lg);font-weight:600;letter-spacing:0;padding:0}
.s4-plantilla__edicion{display:grid;gap:var(--sp-3)}
.s4-plantilla__linea{font-size:var(--fs-lg);line-height:2.3;color:var(--text);overflow-wrap:anywhere}
.s4-hueco{display:inline-block;vertical-align:baseline;max-width:100%;min-width:72px;height:36px;margin:0 1px;padding:2px 8px;
  border:0;border-bottom:2px solid var(--accent);border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--card-2);
  font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.2}
.s4-hueco::placeholder{color:var(--accent-text);font-weight:500;opacity:.85}
.s4-hueco:hover{background:var(--data-soft)}
.s4-hueco:focus{outline:none;background:var(--card);box-shadow:0 0 0 3px rgba(213,167,73,.22)}
.es-borrador .s4-hueco{border-bottom-style:dashed}
.s4-plantilla__salida{border-left:3px solid var(--accent);padding:var(--sp-2) 0 var(--sp-2) var(--sp-5)}
.s4-plantilla__final{margin-top:var(--sp-3);font-size:clamp(20px,2.6vw,30px);font-weight:600;line-height:1.3;letter-spacing:-.018em;color:var(--ink);max-width:40ch;overflow-wrap:anywhere}
.s4-final__lleno{color:var(--ink)}
.s4-final__vacio{color:var(--muted);font-weight:400;border-bottom:1px dashed var(--rule-strong)}
.s4-final__vacio::before{content:"["}
.s4-final__vacio::after{content:"]"}
.s4-plantilla__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-4)}
.s4-plantilla__estado{color:var(--muted)}
.s4-plantilla__estado--ok{color:var(--ok);font-weight:600}
@media (max-width:640px){
  .s4-plantilla__linea,.s4-hueco{font-size:var(--fs-md)}
  .s4-plantilla__medidor{font-size:var(--fs-md)}
  .s4-plantilla__salida{padding-left:var(--sp-4)}
}

/* ================= F4.2 · cálculo ================= */
.s4-f42{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);align-items:start;padding-bottom:var(--sp-5)}
.s4-f42__datos>.campo:first-child{padding-top:0}
.s4-f42__calc>.campo{padding-top:0;border-top:0}
.s4-f42+.campo{border-top:1px solid var(--rule)}
@media (max-width:1180px){.s4-f42{grid-template-columns:1fr}.s4-f42__calc>.campo{border-top:1px solid var(--rule);padding-top:var(--sp-5)}}
.s4-calc{background:var(--invert-bg);color:var(--invert-text-2);border-radius:var(--r-lg);padding:var(--sp-5)}
.s4-calc .eyebrow{color:var(--invert-label)}
.s4-calc__formula{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--invert-text-2)}
.s4-calc__sust{margin-top:4px;font-size:var(--fs-sm);color:var(--invert-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.s4-calc__res{display:flex;align-items:flex-end;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-4);flex-wrap:wrap}
.s4-calc__num{font-size:clamp(64px,9vw,104px);font-weight:700;line-height:.82;letter-spacing:-.06em;color:var(--gold);font-variant-numeric:tabular-nums}
.s4-calc__num--vacio{color:var(--invert-text-2);opacity:.5}
.s4-calc__unidad{font-size:var(--fs-md);font-weight:600;color:var(--invert-text);line-height:1.3;padding-bottom:4px}
.s4-calc__nota{font-size:var(--fs-xs);font-weight:500;color:var(--invert-text-2)}
.s4-calc__falta{margin-top:var(--sp-4)}
.s4-calc__falta p+p{margin-top:var(--sp-3);color:var(--invert-text)}
.s4-calc__tabla{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.s4-calc__tabla th,.s4-calc__tabla td{padding:8px 0;border-top:1px solid rgba(255,255,255,.14);text-align:right}
.s4-calc__tabla thead th{border-top:0;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--invert-label);font-weight:600}
.s4-calc__tabla tbody th{text-align:left;font-weight:500;color:var(--invert-text-2)}
.s4-calc__tabla td{color:var(--invert-text);font-weight:600;padding-left:var(--sp-3)}
.s4-calc__tabla tbody tr:last-child td{color:var(--gold)}
.s4-calc__aviso{margin-top:var(--sp-3);color:var(--gold)}

/* ================= F4.3 · diana ================= */
.s4-diana__ayuda{margin-bottom:var(--sp-4)}
.s4-diana__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);align-items:start}
@media (max-width:1180px){.s4-diana__rejilla{grid-template-columns:1fr}}
.s4-diana__lienzo{max-width:420px;width:100%;margin:0 auto}
.s4-diana__svg{width:100%;height:auto;overflow:visible}
.s4-anillo{stroke-width:1.5;transition:fill .15s,stroke .15s}
.s4-anillo--posibles{fill:var(--card-2);stroke:var(--rule-strong)}
.s4-anillo--probamos{fill:var(--data-soft);stroke:var(--data)}
.s4-anillo--principal{fill:var(--gold);stroke:var(--gold)}
.s4-anillo--sobre{stroke:var(--accent);stroke-width:4}
.s4-anillo--posibles.s4-anillo--sobre{fill:var(--card)}
.s4-diana__punto{fill:var(--muted);opacity:.55}
.s4-diana__etq{font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.16em;fill:var(--muted);text-anchor:middle}
.s4-diana__etq--medio{fill:var(--data)}
.s4-diana__canal{font-family:var(--font);font-size:11px;font-weight:600;fill:var(--ink);text-anchor:middle}
.s4-diana__canal--vacio{fill:var(--muted);font-weight:400}
.s4-diana__centro{font-family:var(--font);font-size:12px;font-weight:700;fill:var(--navy);text-anchor:middle}
.s4-diana__centro--vacio{font-weight:600;letter-spacing:.06em}
.s4-diana__listas{display:grid;gap:var(--sp-3);min-width:0}
.s4-anillo-lista{border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4) var(--sp-4);background:var(--card)}
.s4-anillo-lista--principal{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.s4-anillo-lista--probamos{border-color:var(--data)}
.s4-anillo-lista__cab{display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-3)}
.s4-anillo-lista__marca{width:12px;height:12px;border-radius:50%;flex:none;border:1.5px solid var(--rule-strong);background:var(--card-2)}
.s4-anillo-lista--probamos .s4-anillo-lista__marca{background:var(--data-soft);border-color:var(--data)}
.s4-anillo-lista--principal .s4-anillo-lista__marca{background:var(--gold);border-color:var(--gold)}
.s4-anillo-lista__nombre{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.s4-anillo-lista__n{margin-left:auto;font-size:var(--fs-sm);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.s4-anillo-lista__chips{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;align-content:flex-start;border-radius:var(--r-md)}
.s4-anillo-lista__vacia{font-size:var(--fs-sm);color:var(--muted);padding:6px 2px;flex-basis:100%}
.s4-chip{cursor:grab;user-select:none;-webkit-user-select:none;max-width:100%;touch-action:manipulation}
.s4-chip:active{cursor:grabbing}
.s4-chip__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.s4-chip--probamos{border-color:var(--data);color:var(--ink)}
.s4-chip--principal{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;min-height:38px;padding:7px 16px;font-size:var(--fs-md)}
.s4-chip.sortable-chosen,.s4-chip.sortable-drag{background:var(--card)}
.s4-diana__add{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.s4-diana__add .input{min-height:34px;padding:6px 12px;font-size:var(--fs-sm)}
@media (max-width:640px){.s4-diana__lienzo{max-width:300px}}

/* ================= F4.5 · prerequisitos ================= */
.s4-f45 .campo__cab{align-items:center}
.s4-f45__contadores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:var(--sp-2)}
.s4-f45__cont{display:flex;flex-direction:column;gap:6px;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0}
.s4-f45__cont+.s4-f45__cont{border-left:1px solid var(--rule);padding-left:var(--sp-4)}
.s4-f45__num{font-size:var(--fs-2xl);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.s4-f45__cont--hecho .s4-f45__num{color:var(--ok)}
.s4-f45__cont--curso .s4-f45__num{color:var(--accent-text)}
.s4-f45__cont--total .s4-f45__num{color:var(--muted)}
.s4-f45__info{margin-bottom:var(--sp-3)}
.s4-f45__etapa{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--muted);margin-top:4px}
.s4-f45__fuera{margin-top:6px;border-color:var(--danger);color:var(--danger);letter-spacing:.04em;white-space:normal}
.s4-f45__fila--fuera .celda-fija>span:first-child{text-decoration:line-through;text-decoration-color:var(--rule-strong)}
.s4-f45__vacia{padding:var(--sp-5)!important;color:var(--muted);font-size:var(--fs-sm);text-align:center}
.s4-f45 .tabla__pie{justify-content:space-between}
.s4-f45__enlaces{color:var(--muted)}
@media (max-width:640px){
  .s4-f45__contadores{grid-template-columns:1fr 1fr}
  .s4-f45__cont:nth-child(3){border-left:0;padding-left:0}
  .s4-f45__cont:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ================= vista de sesión · de un vistazo ================= */
.s4-vist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-4)}
.s4-vist__seg{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.s4-vist__cab{display:grid;gap:6px}
.s4-vist__titulo{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-lg);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.s4-vist__cadena{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.s4-vist__cadena li{display:inline-flex;align-items:center}
.s4-vist__etapa{font-size:var(--fs-sm);font-weight:500;color:var(--ink);padding:3px 9px;border:1px solid var(--rule-strong);border-radius:var(--r-pill)}
.s4-vist__pct{font-size:var(--fs-xs);font-weight:600;color:var(--accent-text);padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.s4-vist__pct::before{content:"→"}
.s4-vist__pct:not(:empty)::before{content:"→ "}
.s4-vist__frase{font-size:var(--fs-md);line-height:1.45;color:var(--ink);font-weight:500;border-left:3px solid var(--accent);padding-left:var(--sp-3)}
.s4-vist__frase.muted{color:var(--muted);font-weight:400}
.s4-vist__dato{display:flex;align-items:baseline;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--rule);color:inherit}
.s4-vist__dato:hover{text-decoration:none}
.s4-vist__num{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent-text);font-variant-numeric:tabular-nums}
.s4-vist__lado{display:grid;gap:var(--sp-5);align-content:start}
.s4-vist__bloque{display:grid;gap:6px;color:inherit}
.s4-vist__bloque:hover{text-decoration:none}
.s4-vist__bloque+.s4-vist__bloque{padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.14)}
.s4-vist__principal{font-size:var(--fs-xl);font-weight:600;line-height:1.2;color:var(--invert-text);letter-spacing:-.015em}
.s4-vist__lista{font-size:var(--fs-sm);color:var(--invert-text-2)}
.s4-vist__flojo{font-size:var(--fs-sm);color:var(--invert-text-2)}
.s4-f45__tabla th{letter-spacing:.05em;overflow-wrap:anywhere}
.s4-f45__tabla .input--fecha{padding-left:6px;padding-right:4px}