/* Sakigan · flujo guiado. SOLO tokens del sistema (--ns-*): sin colores literales ni forzados de prioridad (scripts/diseno/verificar_flujo.js lo comprueba).
   Se apoya en ui/sistema/componentes.css; aquí solo hay maquetación propia del flujo (prefijo fj-). */

.fj { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-s-5); max-width: var(--ns-ancho-contenido); margin: 0 auto; padding: 0 0 var(--ns-s-7); min-width: 0; }
.fj > * { min-width: 0; }
.fj h1, .fj h2, .fj h3, .fj p, .fj ol, .fj ul, .fj dl, .fj dd { margin: 0; }
.fj button { width: auto; margin: 0; box-shadow: none; font-family: inherit; }
.fj label { margin: 0; text-transform: none; letter-spacing: normal; }
.fj .ns-etiqueta { margin: 0 0 var(--ns-s-1); }
.fj :focus-visible { outline: 2px solid var(--ns-foco); outline-offset: 2px; }
.fj input[type="date"]::-webkit-calendar-picker-indicator:focus-visible { outline: 2px solid var(--ns-foco); outline-offset: 2px; }
.fj h1:focus, .fj h1:focus-visible { outline: none; }
.fj input, .fj select { max-width: 100%; }
.fj .ns-t-3, .fj .ns-t-4 { font-family: var(--ns-fuente-titulo); }
.fj .ns-t-4 { font-family: var(--ns-fuente-ui); }

/* ---- Cabecera de pantalla ---- */
.fj-eyebrow { font-size: var(--ns-tam-xs); font-weight: var(--ns-peso-seminegrita); letter-spacing: .06em; text-transform: uppercase; color: var(--ns-texto-2); }
.fj-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-s-3); }
.fj-cab__fila { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ns-s-3) var(--ns-s-5); }
.fj-cab__fila h1 { flex: 1 1 320px; }
.fj-cab__acciones { display: flex; flex-wrap: wrap; gap: var(--ns-s-2); align-items: center; }
.fj-contexto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-s-2) var(--ns-s-4); padding: var(--ns-s-2) var(--ns-s-3); border: 1px solid var(--ns-borde); border-radius: var(--ns-r-tarjeta); background: var(--ns-superficie); }
.fj-contexto__item { display: inline-flex; align-items: baseline; gap: var(--ns-s-2); min-width: 0; overflow-wrap: anywhere; }
.fj-contexto__et { font-size: var(--ns-tam-xs); color: var(--ns-texto-2); text-transform: uppercase; letter-spacing: .06em; }

/* ---- Selector de objetivo ---- */
.fj-familia { display: grid; gap: var(--ns-s-3); }
.fj-familia__nota { font-family: var(--ns-fuente-ui); font-size: var(--ns-tam-sm); font-weight: var(--ns-peso-normal); color: var(--ns-texto-2); }
.fj-metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--ns-s-3); }
.fj-audiencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--ns-s-3); }
.fj-meta { display: grid; align-content: start; justify-items: start; gap: var(--ns-s-2); min-height: var(--ns-h-alto); padding: var(--ns-s-4); text-align: left; color: var(--ns-texto); background: var(--ns-superficie); border: 1px solid var(--ns-borde-control); border-radius: var(--ns-r-tarjeta); font-size: var(--ns-tam-base); line-height: var(--ns-lh-ajustada); cursor: pointer; transition: background var(--ns-t-normal) var(--ns-t-curva), border-color var(--ns-t-normal) var(--ns-t-curva); }
.fj-meta strong { font-size: var(--ns-tam-md); font-weight: var(--ns-peso-seminegrita); }
.fj-meta__texto { color: var(--ns-texto-2); font-size: var(--ns-tam-sm); }
.fj-meta:hover { background: var(--ns-superficie-2); }
.fj-meta[aria-checked="true"] { background: var(--ns-acento-suave); border-color: var(--ns-acento); box-shadow: inset 0 0 0 1px var(--ns-acento); }
.fj-meta--prox { cursor: default; border-style: dashed; border-color: var(--ns-borde); background: var(--ns-superficie-2); }
.fj-meta--prox:hover { background: var(--ns-superficie-2); }
.fj-meta__pie { display: flex; flex-wrap: wrap; gap: var(--ns-s-2); }
.fj-libre__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ns-s-2); }
.fj-libre__res { margin-top: var(--ns-s-3); }
.fj-libre__res:empty { margin: 0; }
.fj-continuar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ns-s-3); }
.fj-continuar__t { overflow-wrap: anywhere; }
.fj-pie-accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ns-s-3); padding-top: var(--ns-s-4); border-top: 1px solid var(--ns-borde); }
.fj-pie-accion .ns-ayuda { margin: 0; max-width: var(--ns-ancho-lectura); }

/* ---- Asistente ---- */
.fj .ns-chip[aria-checked="true"] { background: var(--ns-acento-suave); border-color: var(--ns-acento); color: var(--ns-acento-texto); }
.fj-pasos { flex-wrap: wrap; overflow-x: visible; }
.fj-pasos .ns-paso { flex: 1 1 140px; }
.fj-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ns-s-4); align-items: start; }
.fj-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fj-cols > * { min-width: 0; }
@media (max-width: 900px) { .fj-cols, .fj-cols--2 { grid-template-columns: minmax(0, 1fr); } }
.fj-campos { margin: 0; padding: 0; border: 0; display: grid; gap: var(--ns-s-1); min-width: 0; }
.fj-campos legend { padding: 0; }
.fj-campos2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-s-3) var(--ns-s-4); }
@media (max-width: 600px) { .fj-campos2 { grid-template-columns: minmax(0, 1fr); } }
.fj-material { align-items: flex-start; padding: var(--ns-s-1) 0; }
.fj-material input { margin-top: var(--ns-s-2); }
.fj-derechos { margin-top: var(--ns-s-2); }
.fj-visto { display: grid; gap: var(--ns-s-2); }
.fj-chips { list-style: none; padding: 0; }
.fj-dato { display: grid; gap: 2px; padding: var(--ns-s-2) var(--ns-s-3); border: 1px solid var(--ns-borde); border-radius: var(--ns-r-chip); background: var(--ns-superficie-2); font-size: var(--ns-tam-sm); font-weight: var(--ns-peso-medio); }
.fj-dato__et { font-size: var(--ns-tam-xs); color: var(--ns-texto-2); font-weight: var(--ns-peso-normal); }
.fj-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--ns-s-3); border: 1px solid var(--ns-borde-control); border-radius: var(--ns-r-chip); background: var(--ns-superficie-2); font-size: var(--ns-tam-sm); font-weight: var(--ns-peso-medio); overflow-wrap: anywhere; }
.fj-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ns-s-2) var(--ns-s-4); align-items: center; }
.fj-dl dt { font-size: var(--ns-tam-sm); color: var(--ns-texto-2); }
.fj-dl dd { display: flex; flex-wrap: wrap; gap: var(--ns-s-2); min-width: 0; overflow-wrap: anywhere; }
.fj-dl--datos dd { display: block; }
.fj-pregunta { margin: 0; padding: var(--ns-s-3) 0 0; border: 0; border-top: 1px solid var(--ns-borde); display: grid; gap: var(--ns-s-2); min-width: 0; }
.fj-pregunta legend { padding: 0; float: left; width: 100%; margin-bottom: var(--ns-s-2); }
.fj-pregunta legend + * { clear: both; }
.fj-techo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-s-2); }
.fj-techo .ns-etiqueta { margin: 0; }
.fj-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ns-s-3); }
#fj-error-paso:empty, #fj-error-real:empty, #fj-error-logo:empty { display: none; }
.ns-btn[aria-disabled="true"] { opacity: 1; background: var(--ns-superficie-3); color: var(--ns-texto-2); border-color: var(--ns-borde-control); cursor: not-allowed; }

/* ---- Resultado ---- */
.fj-ejemplo { margin: 0; }
.fj-estados { display: grid; gap: var(--ns-s-2); margin-top: var(--ns-s-3); }
.fj-estados .ns-etiqueta { margin: 0; }
.fj-panel-tab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-s-4); }
.fj-panel-tab[hidden] { display: none; }
.fj-grande { font-family: var(--ns-fuente-titulo); font-weight: var(--ns-peso-titulo); font-size: var(--ns-tam-xl); line-height: 1.25; max-width: 40ch; color: var(--ns-texto); }
.fj-veredicto .ns-intervalo { max-width: 560px; margin-bottom: var(--ns-s-3); }
.fj-conf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-s-2) var(--ns-s-3); }
.fj-conf .ns-etiqueta { margin: 0; }
.fj-pips { display: inline-flex; gap: 3px; }
.fj-pips i { width: 14px; height: 8px; border-radius: 2px; border: 1px solid var(--ns-borde-control); background: transparent; }
.fj-pips i.on { background: var(--ns-acento-texto); border-color: var(--ns-acento-texto); }
.fj-motivos { padding-left: var(--ns-s-5); color: var(--ns-texto-2); font-size: var(--ns-tam-sm); display: grid; gap: var(--ns-s-1); }
.fj-versiones, .fj-lista, .fj-medidas, .fj-hitos { list-style: none; padding: 0; display: grid; gap: var(--ns-s-4); }
.fj-version, .fj-medida { display: grid; gap: var(--ns-s-1); min-width: 0; }
.fj-version__cab, .fj-medida__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-s-2) var(--ns-s-3); overflow-wrap: anywhere; }
.fj-cmp { max-width: var(--ns-ancho-lectura); }
.fj-lista { counter-reset: fj-n; }
.fj-lista li { display: grid; gap: var(--ns-s-1); position: relative; padding-left: var(--ns-s-6); counter-increment: fj-n; }
.fj-lista li::before { content: counter(fj-n); position: absolute; left: 0; top: 0; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ns-r-completo); border: 1px solid var(--ns-borde-control); font-size: var(--ns-tam-xs); font-weight: var(--ns-peso-seminegrita); color: var(--ns-texto-2); }
.fj-lista li > b { font-weight: var(--ns-peso-seminegrita); }
.fj-impacto { font-weight: var(--ns-peso-seminegrita); color: var(--ns-ok-texto); }
.fj-alertas { display: grid; gap: var(--ns-s-2); }
.fj-tec { color: var(--ns-texto-3); }
.fj-cerebro { position: relative; min-height: 380px; border: 1px solid var(--ns-borde); border-radius: var(--ns-r-tarjeta); background: var(--ns-superficie-2); overflow: hidden; }
.fj-cerebro.nb3d { height: 420px; }
.fj-cerebro .nb3d-tools button { background: var(--ns-superficie); color: var(--ns-texto); border-color: var(--ns-borde-control); }
.fj-cerebro .nb3d-tools button[aria-pressed="true"] { background: var(--ns-acento-suave); color: var(--ns-acento-texto); border-color: var(--ns-acento); }
.fj-cerebro__falta { padding: var(--ns-s-5); color: var(--ns-texto-2); }
@media (max-width: 600px) { .fj-cerebro, .fj-cerebro.nb3d { min-height: 460px; height: 460px; } }
.fj-zonas:empty { display: none; }
.fj-linea { display: grid; gap: var(--ns-s-3); }
.fj-linea__eje { position: relative; height: 12px; margin: 0 6px; }
.fj-linea__eje::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 2px; background: var(--ns-superficie-3); }
.fj-marca { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: var(--ns-r-completo); background: var(--ns-acento); box-shadow: 0 0 0 2px var(--ns-superficie); }
.fj-linea__lista { list-style: none; padding: 0; display: grid; gap: var(--ns-s-3); }
.fj-linea__lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ns-s-2) var(--ns-s-3); }
.fj-linea__lista .ns-texto { flex: 1 1 260px; }

/* ---- Datos científicos ---- */
.ns-modal.fj-panel { width: min(600px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; border-width: 0 0 0 1px; overflow-y: auto; }
.fj-panel .ns-modal__cuerpo { gap: var(--ns-s-4); }
.fj-panel .ns-modal__cab { position: sticky; top: calc(var(--ns-s-5) * -1); z-index: var(--ns-z-pegajoso); margin: calc(var(--ns-s-5) * -1) calc(var(--ns-s-5) * -1) 0; padding: var(--ns-s-4) var(--ns-s-5); background: var(--ns-superficie); border-bottom: 1px solid var(--ns-borde); }
.fj-panel .ns-num, .fj-papel .ns-num { white-space: nowrap; }
.fj-panel h2, .fj-panel h3, .fj-panel p { margin: 0; }
.fj-ciencia-cuerpo { display: grid; gap: var(--ns-s-4); }
.fj-sec { display: grid; gap: var(--ns-s-3); padding-top: var(--ns-s-4); border-top: 1px solid var(--ns-borde); min-width: 0; }
.fj-sec:first-child { border-top: 0; padding-top: 0; }
.fj-sec h3 { font-family: var(--ns-fuente-ui); }
.fj-formula { padding: var(--ns-s-2) var(--ns-s-3); background: var(--ns-superficie-2); border: 1px solid var(--ns-borde); border-radius: var(--ns-r-control); overflow-wrap: anywhere; }
.fj-exportar { display: flex; flex-wrap: wrap; gap: var(--ns-s-2); }
.fj-svg { width: 100%; max-width: 420px; height: auto; }
.fj-svg__marco { fill: none; stroke: var(--ns-borde-control); }
.fj-svg__diag { stroke: var(--ns-texto-3); stroke-dasharray: 4 4; }
.fj-svg__curva { stroke: var(--ns-acento-texto); stroke-width: 2.4; }
.fj-svg__punto { fill: var(--ns-acento-texto); }
.fj-svg__t { fill: var(--ns-texto-2); font-size: var(--ns-tam-xs); font-family: var(--ns-fuente-ui); }
.fj-tabla-det { font-size: var(--ns-tam-sm); }
.fj-tabla-det summary { min-height: var(--ns-h-alto); display: flex; align-items: center; cursor: pointer; color: var(--ns-acento-texto); }
.fj-ciencia-inline .fj-ciencia-cuerpo { display: grid; }

/* ---- Informe para el cliente ---- */
.fj-agencia__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-s-3) var(--ns-s-4); }
@media (max-width: 600px) { .fj-agencia__campos { grid-template-columns: minmax(0, 1fr); } }
.fj-papel { width: 100%; max-width: 860px; margin: 0 auto; padding: var(--ns-s-6); border: 1px solid var(--ns-borde); border-radius: var(--ns-r-tarjeta); display: grid; gap: var(--ns-s-5); box-shadow: var(--ns-sombra-flotante); }
.fj-papel > * { min-width: 0; }
@media (max-width: 600px) { .fj-papel { padding: var(--ns-s-4); } }
.fj-papel__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-s-4); padding-bottom: var(--ns-s-4); border-bottom: 1px solid var(--ns-borde); }
.fj-papel__logo { max-height: 48px; max-width: 160px; object-fit: contain; }
.fj-papel__marca-agua { padding: var(--ns-s-2) var(--ns-s-3); border: 2px dashed var(--ns-aviso-texto); border-radius: var(--ns-r-control); color: var(--ns-aviso-texto); font-weight: var(--ns-peso-seminegrita); text-align: center; }
.fj-papel__pie { padding-top: var(--ns-s-4); border-top: 1px solid var(--ns-borde); }
.fj-anexo { display: grid; gap: var(--ns-s-4); padding-top: var(--ns-s-5); border-top: 2px solid var(--ns-borde); }

/* ---- Aprender ---- */
.fj-hitos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ns-s-2); font-size: var(--ns-tam-sm); }
.fj-hitos li .ns-estado { flex: none; }

/* ---- Vista experta (barra de Analizar) ---- */
.fj-volver { display: inline-flex; align-items: center; min-height: var(--ns-h-alto); padding: 0 var(--ns-s-3); color: var(--ns-acento-texto); text-decoration: none; font-weight: var(--ns-peso-medio); font-size: var(--ns-tam-sm); white-space: nowrap; }
.fj-volver:hover { text-decoration: underline; }
.subtabs .st[data-reco="1"]::after { content: "Recomendado"; margin-left: var(--ns-s-2); padding: 0 var(--ns-s-2); border: 1px solid var(--ns-acento); border-radius: var(--ns-r-chip); font-size: var(--ns-tam-xs); color: var(--ns-acento-texto); }

/* ---- Impresión: solo el informe ---- */
@media print {
  body * { visibility: hidden; }
  .fj-papel, .fj-papel * { visibility: visible; }
  .fj-papel { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .fj-meta { transition: none; } }

/* códigos largos (el registro_hash es un SHA-256 de 64 caracteres): se parten en lugar de ensanchar la página en el móvil */
.ns-datos, .fj-dl dd { overflow-wrap: anywhere; word-break: break-word; }