/* Lodestar v2 · escena "sistemas": de código a panel. Prefijo .sx-, todo bajo #lp.
   Frío (editor, trabajo a mano) -> cálido (panel, las cosas pasan solas).
   El panel va en flujo y define el alto de la escena; el editor y las pastillas van encima en absoluto. */

#lp [data-escena="sistemas"] { min-height: 420px; container-type: inline-size }
@media (min-width: 560px) { #lp [data-escena="sistemas"] { min-height: 500px } }

#lp .sx { position: relative; display: flex; flex-direction: column; min-height: inherit; font-family: var(--f-texto); color: var(--txt) }
#lp .sx p { margin: 0 }
#lp .sx-fondo { position: absolute; inset: 0; pointer-events: none }
#lp .sx-frio { background: radial-gradient(ellipse 75% 55% at 15% 0%, rgba(125, 147, 173, .13), transparent 70%) }
#lp .sx-calor { background: radial-gradient(ellipse 85% 60% at 50% 0%, rgba(232, 180, 100, .14), transparent 70%); opacity: 0 }

/* ---------- Barra superior: el mismo archivo pasa de "sin ejecutar" a "en marcha" ---------- */
#lp .sx-barra {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  border-bottom: 1px solid var(--filo); background: rgba(9, 11, 17, .6);
  font-family: var(--f-mono); font-size: 12px; color: var(--txt-3);
}
#lp .sx-arch { display: inline-flex; align-items: center; gap: 9px; color: var(--txt-2) }
#lp .sx-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--frio-2); transition: background .5s, box-shadow .5s }
#lp .sx-estado { color: var(--frio); transition: color .4s }
#lp .sx-barra.sx-e1 .sx-punto { background: var(--oro-3) }
#lp .sx-barra.sx-e1 .sx-estado { color: var(--oro-3) }
#lp .sx-barra.sx-e2 .sx-punto { background: var(--oro); box-shadow: 0 0 10px rgba(232, 180, 100, .85) }
#lp .sx-barra.sx-e2 .sx-estado { color: var(--oro) }

/* ---------- Editor (frío) ---------- */
#lp .sx-editor {
  position: absolute; left: 0; right: 0; top: 44px; bottom: 0; z-index: 1; overflow: hidden;
  padding: 16px 16px 16px 0;
  font-family: var(--f-mono); font-size: 12px; line-height: 24px; color: var(--txt-2);
  will-change: transform, opacity;
}
#lp .sx-ln { position: relative; display: flex; align-items: stretch }
#lp .sx-ln.sx-activa { background: linear-gradient(90deg, rgba(255, 240, 215, .035), transparent 80%) }
#lp .sx-num { flex: none; width: 44px; padding-right: 14px; text-align: right; color: var(--txt-3); opacity: .5 }
#lp .sx-cod { display: inline-block; white-space: pre; clip-path: inset(-2px 100% -2px 0) }
#lp .sx-c, #lp .sx-p { color: var(--txt-3) }
#lp .sx-k, #lp .sx-h { color: var(--frio) }
#lp .sx-o { color: var(--txt-2) }
#lp .sx-f { color: var(--txt) }
#lp .sx-s { color: var(--oro-3) }
#lp .sx-cur { position: absolute; left: 44px; top: 4px; bottom: 4px; width: 2px; background: var(--oro-2); opacity: 0 }
#lp .sx-ln.sx-activa .sx-cur { animation: sx-parpadeo 1.1s linear infinite }
@keyframes sx-parpadeo { 0%, 46% { opacity: 1 } 52%, 100% { opacity: 0 } }
#lp .sx-barrido {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--oro-2) 25%, var(--oro-2) 75%, transparent);
  box-shadow: 0 0 18px 2px rgba(232, 180, 100, .35);
  will-change: transform, opacity;
}

/* ---------- Pastillas: cada proceso viaja del código a su fila del registro ---------- */
#lp .sx-pils { position: absolute; inset: 0; z-index: 4; pointer-events: none }
#lp .sx-pil {
  position: absolute; left: 0; top: 0; height: 28px; opacity: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 10px;
  border-radius: 999px; border: 1px solid rgba(232, 180, 100, .5); background: rgba(13, 15, 22, .94);
  color: var(--oro-2); font-size: 12px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 0 22px -4px rgba(232, 180, 100, .45);
  transform-origin: left center; will-change: transform, opacity;
}
#lp .sx-pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 8px rgba(232, 180, 100, .9) }

/* ---------- Panel (cálido) ---------- */
#lp .sx-panel {
  position: relative; z-index: 2; flex: 1; margin-top: 44px; opacity: 0;
  display: grid; gap: 10px; padding: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "resumen" "reg" "graf";
  transform-origin: 50% 30%; will-change: transform, opacity;
}
@container (min-width: 480px) {
  #lp .sx-panel {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); grid-template-rows: auto 1fr;
    grid-template-areas: "resumen reg" "graf graf";
    gap: 12px; padding: 14px;
  }
}
#lp .sx-tar { min-width: 0; display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--filo); border-radius: var(--radio-s); background: rgba(255, 240, 215, .025) }
#lp .sx-resumen { grid-area: resumen; border-color: rgba(232, 180, 100, .22); background: linear-gradient(180deg, rgba(232, 180, 100, .06), rgba(232, 180, 100, .015)) }
#lp .sx-reg { grid-area: reg }
#lp .sx-graf { grid-area: graf }
#lp .sx-et { font-size: 13px; line-height: 1.35; color: var(--txt-3) }
#lp .sx-cif { margin-top: 4px; font-family: var(--f-titulo); font-weight: 300; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; color: var(--oro-2); font-variant-numeric: tabular-nums }
#lp .sx-cif .sx-u { font-size: 15px; color: var(--oro); margin-left: 4px }
#lp .sx-antes { margin-top: 6px; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--frio) }
#lp .sx-sub { margin-top: 4px; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--txt-3) }

/* Resumen: el anillo de tiempo devuelto se llena de luz y una chispa (la estrella) recorre el arco */
#lp .sx-anillo { display: flex; align-items: center; gap: 16px; flex: 1 }
#lp .sx-anillo-txt { min-width: 0 }
#lp .sx-aro { width: 84px; height: 84px; flex: none; overflow: visible }
#lp .sx-aro-f { fill: none; stroke: var(--filo-2); stroke-width: 3.5 }
#lp .sx-aro-l { fill: none; stroke: var(--oro); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(232, 180, 100, .55)) }
#lp .sx-chispa { color: #fff6e4; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 4px rgba(247, 217, 162, .95)) }
#lp .sx-resumen.sx-activo .sx-chispa { opacity: 1 }
#lp .sx-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filo) }
#lp .sx-mini { min-width: 0 }
#lp .sx-mini .sx-cif { margin-top: 0; font-size: 22px }
#lp .sx-mini .sx-cif .sx-u { font-size: 13px }
#lp .sx-mini .sx-et { margin-top: 2px; font-size: 12px }

/* Gráfica: las horas manuales bajan, de frío a cálido */
#lp .sx-graf-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
#lp .sx-delta { font-family: var(--f-mono); font-size: 12px; color: var(--oro); white-space: nowrap }
#lp .sx-graf-area { position: relative; flex: 1; min-height: 72px; margin-top: 12px }
#lp .sx-graf-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
#lp .sx-y { position: absolute; font-family: var(--f-mono); font-size: 12px; line-height: 1 }
#lp .sx-y1 { left: 2px; color: var(--frio) }
#lp .sx-y2 { right: 0; color: var(--oro-2) }
#lp .sx-g1 { stop-color: var(--frio) }
#lp .sx-g2 { stop-color: var(--oro) }
#lp .sx-a1 { stop-color: var(--frio); stop-opacity: .16 }
#lp .sx-a2 { stop-color: var(--oro); stop-opacity: .2 }
#lp .sx-area { fill: url(#sx-ga); opacity: 0; transition: opacity 1.4s var(--ease) .5s }
#lp .sx-linea { fill: none; stroke: url(#sx-gl); stroke-width: 1.6; stroke-dasharray: var(--L, 1000); stroke-dashoffset: var(--L, 1000); transition: stroke-dashoffset 1.7s var(--ease) }
#lp .sx-graf.sx-dibuja .sx-linea { stroke-dashoffset: 0 }
#lp .sx-graf.sx-dibuja .sx-area { opacity: 1 }
#lp .sx-fin { position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff6e4; box-shadow: 0 0 10px 2px rgba(247, 217, 162, .8); opacity: 0; transform: scale(.4); transition: opacity .4s, transform .5s var(--ease) }
#lp .sx-graf.sx-fin-ok .sx-fin { opacity: 1; transform: none }
#lp .sx-x { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--txt-3) }

/* Registro: las tareas se marcan solas */
#lp .sx-reg-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px }
#lp .sx-vivo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 12px; color: var(--verde); white-space: nowrap }
#lp .sx-vivo i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--verde) }
#lp .sx-vivo i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--verde); opacity: 0; animation: sx-pulso 2.2s var(--ease) infinite }
@keyframes sx-pulso { 0% { transform: scale(.5); opacity: .9 } 70%, 100% { transform: scale(1.9); opacity: 0 } }
#lp .sx-filas { flex: 1; display: grid; align-content: space-evenly; gap: 2px; margin-top: 8px }
#lp .sx-fila { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 34px; font-size: 13px; color: var(--txt-2); opacity: 0; will-change: opacity, transform }
#lp .sx-chk { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--filo-2); display: grid; place-items: center; transition: background .45s var(--ease), border-color .45s, box-shadow .6s }
#lp .sx-chk svg { width: 10px; height: 10px; fill: none; stroke: #1a1206; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .4s var(--ease) .1s }
#lp .sx-fila.sx-hecho .sx-chk { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 12px rgba(232, 180, 100, .55) }
#lp .sx-fila.sx-hecho .sx-chk svg { stroke-dashoffset: 0 }
#lp .sx-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .4s }
#lp .sx-fila.sx-hecho .sx-txt { color: var(--txt) }
#lp .sx-hora { font-family: var(--f-mono); font-size: 12px; color: var(--txt-3) }

@container (min-width: 480px) {
  #lp .sx-editor { font-size: 13px; line-height: 26px; padding-top: 20px }
  #lp .sx-graf-area { min-height: 96px }
}