/* Bootcamp Skilland · styles/views/s3.css — sesión 3 (constructor D).
   Resumen go / no-go, tablero MoSCoW (F3.3), go o no-go con semáforo (F3.4), roadmap por meses (F3.5). */

/* ---------- semáforo: puntos y colores de decisión ---------- */
.s3-punto{width:12px;height:12px;border-radius:50%;flex:none;border:1.5px solid var(--rule-strong);background:transparent}
.s3-punto--go{background:var(--ok);border-color:var(--ok)}
.s3-punto--aplazar{background:var(--accent);border-color:var(--accent)}
.s3-punto--nogo{background:var(--danger);border-color:var(--danger)}
.s3-dec--go{color:var(--ok)}
.s3-dec--aplazar{color:var(--accent-text)}
.s3-dec--nogo{color:var(--danger)}
.s3-dec--nada{color:var(--muted)}

/* ---------- vista de sesión: resumen go / no-go ---------- */
.s3-go{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-6);align-items:start}
.s3-go__cifras{display:grid;gap:var(--sp-3)}
.s3-go__cifra{display:flex;align-items:baseline;gap:12px;padding-bottom:var(--sp-3);border-bottom:1px solid var(--rule)}
.s3-go__num{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;min-width:1.2em}
.s3-go__lista{border-top:1px solid var(--rule)}
.s3-go__fila{display:grid;grid-template-columns:12px minmax(0,1fr) 110px auto 16px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--rule);color:inherit}
.s3-go__fila:hover{text-decoration:none}
.s3-go__fila:hover .s3-go__nombre{color:var(--accent-text)}
.s3-go__nombre{font-weight:600;color:var(--ink)}
.s3-go__dec{font-size:var(--fs-sm);font-weight:600}
.s3-go__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.s3-go__ir{color:var(--muted)}
@media (max-width:640px){
  .s3-go{grid-template-columns:1fr;gap:var(--sp-4)}
  .s3-go__cifras{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s3-go__cifra{flex-direction:column;gap:4px}
  .s3-go__fila{grid-template-columns:12px minmax(0,1fr) auto;row-gap:6px}
  .s3-go__meta{grid-column:2 / -1;justify-content:flex-start}
  .s3-go__ir{display:none!important}
}

/* ---------- columnas y tarjetas (comunes a MoSCoW y roadmap) ---------- */
.s3-tablero{overflow-x:auto;overscroll-behavior-x:contain;margin:0 -4px;padding:0 4px 6px}
.s3-tablero__in{display:grid;grid-template-columns:repeat(4,minmax(176px,1fr));gap:var(--sp-3);min-width:0}
.s3-col{display:flex;flex-direction:column;min-width:0;background:var(--card-2);border:1px solid var(--rule);border-radius:var(--r-md)}
.s3-col__cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 12px 10px;border-bottom:1px solid var(--rule)}
.s3-col__titulo{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.s3-col__n{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.s3-col__lista{display:flex;flex-direction:column;gap:8px;padding:10px;min-height:72px;flex:1}
.s3-col__lista--vacia{background:transparent;outline:1px dashed var(--rule-strong);outline-offset:-10px;border-radius:var(--r-md)}
.s3-col__pie{padding:0 12px 8px}

.s3-col--imp{border-top:3px solid var(--accent)}
.s3-col--imp .s3-col__n{color:var(--accent-text)}
.s3-col--no{border-style:dashed}
.s3-col--no .s3-col__titulo{color:var(--muted)}
.s3-col--no .s3-tarj__nombre{text-decoration:line-through;text-decoration-color:var(--rule-strong)}

.s3-tarj{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px 6px 8px 2px;min-width:0}
.s3-tarj:hover{border-color:var(--rule-strong)}
.s3-tarj__top{display:flex;align-items:flex-start;gap:2px}
.s3-tarj__handle{height:30px;width:22px}
.s3-tarj__del{width:28px;height:28px;margin-top:1px}
.s3-moscow .textarea.s3-tarj__nombre,.s3-roadmap .textarea.s3-tarj__nombre{flex:1;min-width:0;min-height:30px;padding:5px 6px;border-color:transparent;background:transparent;
  font-size:var(--fs-sm);font-weight:600;line-height:1.35;color:var(--ink)}
.s3-moscow .textarea.s3-tarj__nombre:hover,.s3-roadmap .textarea.s3-tarj__nombre:hover{border-color:var(--rule-strong)}
.s3-moscow .textarea.s3-tarj__nombre:focus,.s3-roadmap .textarea.s3-tarj__nombre:focus{border-color:var(--accent);background:var(--card)}
.s3-tarj__props{display:flex;flex-wrap:wrap;gap:4px;padding-left:24px}

/* selector compacto en píldora */
.s3-moscow .select.s3-sel{width:auto;max-width:100%;min-height:26px;padding:2px 6px 2px 8px;border-radius:var(--r-pill);font-size:12px;font-weight:500;line-height:1.3;cursor:pointer}
.s3-moscow .s3-sel--vacio{color:var(--muted);border-style:dashed}
.s3-moscow .s3-sel[data-v="Hecho"]{border-color:var(--ok);color:var(--ok)}
.s3-moscow .s3-sel[data-v="Parcial"]{border-color:var(--accent);color:var(--accent-text)}
.s3-moscow .s3-sel[data-v="No existe"]{border-color:var(--danger);color:var(--danger)}
.s3-moscow .s3-sel option{color:var(--text);background:var(--card)}

/* ---------- F3.3 · MoSCoW ---------- */
.s3-moscow{display:grid;gap:var(--sp-4);min-width:0}
.s3-moscow__aviso{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.s3-bandeja .s3-col__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-content:start}
.s3-bandeja{background:transparent;border-style:dashed}
.s3-moscow__resumen{color:var(--muted);padding-left:var(--sp-3);border-left:3px solid var(--accent)}
.s3-moscow__resumen strong{color:var(--ink)}

/* ---------- F3.5 · roadmap ---------- */
.s3-roadmap{min-width:0}
.s3-col--hito{border-top:3px solid var(--accent)}
.s3-hito{display:flex;align-items:center;gap:6px;margin:10px 10px 0;padding:6px 10px;border-radius:var(--r-sm);
  background:var(--invert-bg);color:var(--invert-text);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.s3-hito .icon{color:var(--accent)}
.s3-rm__campos{display:grid;gap:6px;padding-left:24px;padding-right:4px;margin-top:2px}
.s3-rm__campo{display:grid;gap:2px}
.s3-rm__etq{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.s3-roadmap .input.s3-rm__input,.s3-roadmap .textarea.s3-rm__input{min-height:30px;padding:5px 8px;font-size:var(--fs-sm);border-color:var(--rule)}

/* ---------- F3.4 · go o no-go ---------- */
.s3-reqs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);border-bottom:1px solid var(--rule)}
.s3-req{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px 4px 10px;border-radius:var(--r-pill);border:1px solid var(--rule-strong);
  font-size:12px;font-weight:500;color:var(--text);background:var(--card)}
.s3-req:hover{text-decoration:none;border-color:var(--accent)}
.s3-req--on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);font-weight:600}
.s3-req .s3-punto{width:10px;height:10px}

.s3-gonogo__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--sp-6);align-items:start}
.s3-gonogo__lado{display:grid;gap:var(--sp-4)}
.s3-pregs{display:grid;gap:0}
.s3-pregs__par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);border-top:1px solid var(--rule)}
.s3-preg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--sp-2);align-items:start}
.s3-preg+.s3-preg,.s3-pregs__par+.s3-preg{border-top:1px solid var(--rule)}
.s3-pregs__par .s3-preg{border-top:0}
.s3-preg__n{font-size:var(--fs-sm);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums;padding-top:calc(var(--sp-5) + 1px)}
.s3-pregs > .s3-preg:first-child .s3-preg__n{padding-top:1px}
.s3-preg .campo{border-top:0}
.s3-pregs > .s3-preg:first-child .campo{padding-top:0}

.s3-decision{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--rule-strong);border-radius:var(--r-lg);background:var(--card-2)}
.s3-semaforo{display:grid;gap:10px;padding:10px;border-radius:var(--r-pill);background:var(--invert-bg);align-self:start}
.s3-luz{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:transparent;transition:background .15s,border-color .15s}
.s3-luz--go.s3-luz--on{background:var(--ok);border-color:var(--ok)}
.s3-luz--aplazar.s3-luz--on{background:var(--gold);border-color:var(--gold)}
.s3-luz--nogo.s3-luz--on{background:var(--danger);border-color:var(--danger)}
.s3-decision__cuerpo{min-width:0;display:flex;flex-direction:column;gap:6px}
.s3-decision__req{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.3}
.s3-decision__palabra{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.04em;line-height:1}
.s3-decision .campo{padding:var(--sp-3) 0 0;border-top:0}
.s3-decision .campo__cab{display:none}
.s3-decision .seg button{min-height:32px;padding:4px 12px}
.s3-gob .campo{padding:var(--sp-3) 0;border-top:1px solid var(--rule)}
.s3-gob .campo:first-child{border-top:0;padding-top:0}
.s3-gob .input--fecha{max-width:none}

@media (max-width:1180px){
  .s3-gonogo__cuerpo{grid-template-columns:1fr}
  .s3-gonogo__lado{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}

/* ---------- móvil ---------- */
@media (max-width:760px){
  .s3-tablero{overflow-x:visible;margin:0;padding:0}
  .s3-tablero__in{grid-template-columns:1fr}
  .s3-bandeja .s3-col__lista{grid-template-columns:1fr}
  .s3-gonogo__lado{grid-template-columns:1fr}
  .s3-pregs__par{grid-template-columns:1fr;gap:0}
  .s3-pregs__par .s3-preg+.s3-preg{border-top:1px solid var(--rule)}
}

/* bandeja con scroll interno para que las columnas queden a mano al arrastrar */
.s3-bandeja .s3-col__lista{max-height:420px;overflow-y:auto;overscroll-behavior:contain}
.s3-col__pie .btn-add{font-size:12px;white-space:nowrap}
@media (max-width:760px){.s3-bandeja .s3-col__lista{max-height:360px}}
.s3-reqs__etq{flex-basis:100%;margin-bottom:2px}
.s3-decision__palabra{font-size:var(--fs-xl)}

/* tarjetas estrechas (columnas de escritorio): el nombre ocupa todo el ancho */
.s3-tarj{container-type:inline-size}
@container (max-width:200px){
  .s3-tarj__top{display:grid;grid-template-columns:22px minmax(0,1fr) 28px;grid-template-areas:"h . d" "n n n"}
  .s3-tarj__top>.handle{grid-area:h;height:22px}
  .s3-tarj__top>.s3-tarj__del{grid-area:d;height:22px}
  .s3-tarj__top>.textarea{grid-area:n;margin-left:4px}
  .s3-tarj__props,.s3-rm__campos{padding-left:6px}
}