:root {
  /* paleta de Felipe Pantone: negro, blanco, una rampa fria y una calida */
  --indigo: #3a00b8; --azul: #0033ff; --celeste: #00c8ff; --hielo: #8ffffc;
  --amarillo: #ffe100; --naranja: #ff5500; --bordo: #94004c;
  --fondo: #000000;
  --panel: #07071a;
  --tinta: #ffffff;
  --suave: #9ea6d6;
  --linea: #1c1c40;
  --linea-fuerte: #34346e;
  --acento: var(--celeste);
  --gene: var(--celeste);
  --disease: var(--naranja);
  --drug: var(--amarillo);
  --ok: var(--hielo);
  --mal: #ff3d73;
  --memoria: var(--amarillo);
  --resalte: var(--indigo);
  /* la misma rampa en escalones, sin degradado suave */
  --franja: linear-gradient(90deg, var(--indigo) 0 14.3%, var(--azul) 0 28.6%, var(--celeste) 0 42.9%,
    var(--hielo) 0 57.1%, var(--amarillo) 0 71.4%, var(--naranja) 0 85.7%, var(--bordo) 0);
  /* los titulos, incluido el nombre del sitio, en Syne. la interfaz en Inter */
  --titulos: "Syne", var(--texto);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* lo que escribe una persona o un modelo (la pregunta, los reportes) va en serif; la interfaz, en sans */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--tinta); font: 14px/1.5 var(--texto); }
button, textarea, select { font: inherit; color: inherit; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.barra { display: flex; align-items: center; gap: 24px; padding: 12px 24px; border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; }
.titulo { font-weight: 600; letter-spacing: -0.01em; }
.subtitulo { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enlace-acerca { font-size: 13px; }

.lienzo { display: grid; grid-template-columns: 360px 1fr; height: calc(100% - 49px); }
.lateral { border-right: 1px solid var(--linea); padding: 20px; overflow-y: auto; }
.escenario { position: relative; overflow-y: auto; padding: 24px 32px; }
.rotulo { font-size: 12px; color: var(--suave); margin-bottom: 6px; display: block; }

.pregunta textarea { width: 100%; resize: vertical; border: 1px solid var(--linea-fuerte); background: var(--panel);
  border-radius: 6px; padding: 10px 12px; outline: none; }
.pregunta textarea:focus { border-color: var(--acento); }
.acciones { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
button { border: 1px solid var(--linea-fuerte); background: var(--panel); border-radius: 6px; padding: 6px 14px;
  cursor: pointer; }
button:hover { border-color: var(--tinta); }
button:disabled { opacity: .45; cursor: default; }
#boton { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.aviso { font-size: 12px; color: var(--suave); }

.grabadas { margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linea); cursor: pointer;
  background: transparent; color: var(--suave); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chip:hover { color: var(--tinta); border-color: var(--linea-fuerte); }

.pasos { list-style: none; padding: 0; margin: 20px 0 22px; }
.paso { padding: 7px 0 7px 26px; cursor: default; position: relative; }
.paso .nombre { font-weight: 500; color: var(--suave); }
.paso .n { position: absolute; left: 0; font-family: var(--mono); font-size: 12px; color: var(--linea-fuerte); top: 9px; }
.paso .narra { color: var(--suave); font-size: 13px; margin-top: 2px; }
.paso .detalle { font-size: 12px; color: var(--hielo); margin-top: 3px; font-family: var(--mono); }
.paso.corriendo .nombre, .paso.listo .nombre { color: var(--tinta); }
.paso.corriendo .n { color: var(--amarillo); }
.paso.listo { cursor: pointer; }
.paso.listo .n { color: var(--celeste); }
.paso.fallo .n, .paso.fallo .detalle { color: var(--mal); }
.paso.activo .nombre { color: var(--amarillo); }
.paso.listo:hover .nombre { text-decoration: underline; }
@keyframes latido { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 18%, transparent); } }

.vacio { max-width: 560px; margin: 12vh auto 0; color: var(--suave); }
.vacio .grande { font-size: 18px; color: var(--tinta); }
.vista h2 { font-size: 24px; font-weight: 600; color: var(--tinta); letter-spacing: -0.015em; margin: 0 0 16px;
  line-height: 1.2; }
.vista h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.seccion { margin-bottom: 28px; }
.nota { color: var(--suave); font-size: 13px; }
.aparece { animation: aparecer .45s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* entidades */
.frase { font-size: 22px; line-height: 1.55; letter-spacing: -0.01em; max-width: 900px; }
.marca-m { border-radius: 4px; padding: 0 3px; transition: background .4s; }
.marca-m.Gene { background: color-mix(in srgb, var(--gene) 16%, transparent); box-shadow: inset 0 -2px var(--gene); }
.marca-m.Disease { background: color-mix(in srgb, var(--disease) 16%, transparent); box-shadow: inset 0 -2px var(--disease); }
.marca-m.Drug { background: color-mix(in srgb, var(--drug) 16%, transparent); box-shadow: inset 0 -2px var(--drug); }
pre.json { font: 12px/1.5 var(--mono); background: var(--panel); border: 1px solid var(--linea); border-radius: 6px;
  padding: 12px 14px; overflow-x: auto; max-height: 220px; margin: 0; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: 14px 16px; }
.tipo { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  margin-right: 8px; }
.tipo.Gene { color: var(--gene); } .tipo.Disease { color: var(--disease); } .tipo.Drug { color: var(--drug); }
.rastro { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.rastro li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--linea); }
.rastro .que { color: var(--suave); font-size: 12px; }
.rastro code { font-family: var(--mono); font-size: 12px; background: color-mix(in srgb, var(--tinta) 6%, transparent);
  padding: 1px 5px; border-radius: 3px; }
.si-c { color: var(--ok); font-weight: 500; } .no-c { color: var(--suave); }
.nodo-final { margin-top: 10px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--linea-fuerte);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.nodo-final .id { font-family: var(--mono); font-size: 11px; color: var(--suave); }
.votos { font-size: 12px; color: var(--suave); margin-top: 3px; }

/* grafo */
.grafo-marco { position: relative; background: var(--panel); border: 1px solid var(--linea); border-radius: 8px;
  height: min(64vh, 640px); overflow: hidden; }
.grafo-marco svg { width: 100%; height: 100%; display: block; cursor: grab; }
.grafo-marco svg:active { cursor: grabbing; }
.arista { stroke: var(--tinta); stroke-opacity: .09; stroke-width: .6; transition: stroke-opacity .5s; }
.arista.fuerte { stroke-opacity: .32; }
.nodo { transition: opacity .6s, r .4s; stroke: var(--panel); stroke-width: 1; cursor: pointer; }
.nodo.Gene { fill: var(--gene); } .nodo.Disease { fill: var(--disease); } .nodo.Drug { fill: var(--drug); }
.nodo.bert { stroke: var(--disease); stroke-dasharray: 2 1.5; fill: var(--panel); stroke-width: 1.4; }
.nodo.entidad { stroke: var(--tinta); stroke-width: 2.2; }
.nodo.nuevo { animation: pulso 1.2s ease; }
.nodo.atenuado { opacity: .12; }
@keyframes pulso { 0% { stroke: var(--acento); stroke-width: 6; } 100% { stroke-width: 1; } }
.etiqueta { font-size: 11px; fill: var(--tinta); pointer-events: none; paint-order: stroke; stroke: var(--panel);
  stroke-width: 3px; stroke-linejoin: round; }
.etiqueta.entidad { font-weight: 600; font-size: 12.5px; }
.capas { display: flex; gap: 0; margin: 0 0 12px; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
  background: var(--panel); }
.capa { flex: 1; padding: 8px 12px; border-right: 1px solid var(--linea); cursor: pointer; opacity: .45;
  transition: opacity .3s, background .3s; }
.capa:last-child { border-right: 0; }
.capa.on { opacity: 1; }
.capa.actual { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.capa .n { font-family: var(--mono); font-size: 18px; }
.capa .t { font-size: 12px; color: var(--suave); }
.leyenda { display: flex; gap: 16px; font-size: 12px; color: var(--suave); margin-top: 8px; flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.ficha { position: absolute; right: 12px; top: 12px; width: 280px; background: var(--panel); border: 1px solid var(--linea);
  border-radius: 8px; padding: 12px 14px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.ficha .cerrar { position: absolute; right: 8px; top: 4px; border: 0; background: none; color: var(--suave); padding: 2px 6px; }
.ficha ul { padding-left: 16px; margin: 6px 0 0; }
.globo { position: fixed; pointer-events: none; background: var(--tinta); color: var(--fondo); font-size: 12px;
  padding: 5px 8px; border-radius: 5px; max-width: 320px; z-index: 10; }
.zoom { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 4px; }
.zoom button { padding: 2px 9px; font-size: 13px; }

/* reportes */
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 20px; align-items: start; }
.reportes { display: flex; flex-direction: column; gap: 8px; max-height: min(72vh, 700px); overflow-y: auto; padding-right: 4px; }
.reporte { background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid var(--c, var(--linea-fuerte));
  border-radius: 6px; padding: 10px 12px; cursor: pointer; }
.reporte:hover { border-color: var(--linea-fuerte); border-left-color: var(--c); }
.reporte.sel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); }
.reporte .cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.reporte .tit { font-weight: 500; }
.reporte .meta { font-size: 11px; color: var(--suave); font-family: var(--mono); white-space: nowrap; }
.reporte .res { font-size: 13px; color: var(--suave); margin-top: 4px; }
.reporte .cuerpo { margin-top: 8px; font-size: 13px; }
.reporte .cuerpo h4 { font-size: 13px; margin: 10px 0 2px; }
.reporte .cuerpo p { margin: 0; }
.insignia { display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor;
  color: var(--acento); margin-left: 6px; vertical-align: 1px; }
.esperando { color: var(--suave); font-style: italic; font-size: 13px; }
.barra-prog { height: 3px; background: var(--linea); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.barra-prog > div { height: 100%; background: var(--acento); transition: width .6s; }
select { border: 1px solid var(--linea-fuerte); background: var(--panel); border-radius: 6px; padding: 3px 8px; }
.selector { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); margin-bottom: 12px; }

/* respuesta */
.map { display: flex; flex-direction: column; gap: 6px; }
.punto-map { display: grid; grid-template-columns: 54px 1fr; gap: 10px; font-size: 13px; align-items: start; }
.punto-map .puntaje { font-family: var(--mono); font-size: 12px; }
.punto-map .puntaje .b { height: 4px; background: var(--acento); border-radius: 2px; margin-top: 4px; }
.punto-map.cero { color: var(--suave); }
.punto-map.cero .b { background: var(--linea-fuerte); }
.respuesta { font-size: 16.5px; line-height: 1.7; max-width: 860px; background: var(--panel); border: 1px solid var(--linea);
  border-radius: 8px; padding: 18px 22px; }
.cita { font-size: 12px; font-family: var(--mono); color: var(--acento); cursor: pointer; white-space: nowrap; }
.cita:hover { text-decoration: underline; }
.cita-falsa { color: var(--suave); text-decoration: line-through dotted; cursor: help; }
.memoria { color: var(--memoria); font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.ent { border-bottom: 1px dotted var(--suave); cursor: help; }
.ent.Gene { border-bottom-color: var(--gene); } .ent.Disease { border-bottom-color: var(--disease); } .ent.Drug { border-bottom-color: var(--drug); }
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.caja { background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: 12px 16px; font-size: 13.5px; }
.cifras { display: flex; gap: 24px; font-size: 12px; color: var(--suave); margin: 10px 0 0; flex-wrap: wrap; }
.cifras b { color: var(--tinta); font-family: var(--mono); font-weight: 500; }
.error { color: var(--mal); background: color-mix(in srgb, var(--mal) 8%, transparent); border-radius: 6px; padding: 10px 12px; }

/* lo que esta haciendo GraphRAG, debajo del grafo del subgrafo */
.grafo-marco.con-proceso { height: min(46vh, 460px); transition: height .5s ease; }
.proceso { margin-top: 18px; max-width: 980px; }
.proceso-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.proceso h3 { font-size: 13px; font-weight: 500; margin: 0 0 8px; }
.colorear { font-size: 12px; color: var(--suave); display: flex; gap: 4px; align-items: center; }
.colorear button { padding: 1px 9px; font-size: 12px; border-radius: 999px; color: var(--suave); }
.colorear button.on { color: var(--tinta); border-color: var(--tinta); }
.bitacora { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.bitacora li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0 5px 22px; position: relative;
  border-bottom: 1px dashed var(--linea); }
.bitacora li::before { content: "✓"; position: absolute; left: 2px; top: 5px; font-size: 12px; color: var(--ok); }
.bitacora li.corriendo::before { content: "›"; color: var(--amarillo); font-weight: 700; }
.bitacora li.corriendo { color: var(--tinta); }
.bitacora li.listo { color: var(--suave); }
.bitacora li.fallo::before { content: "!"; color: var(--mal); font-weight: 600; }
.bitacora li > span:first-child { flex: 1; }
.bitacora .reloj { font-family: var(--mono); font-size: 11.5px; color: var(--suave); white-space: nowrap; }
.bitacora .barra-prog { max-width: 420px; }
.bitacora.solo-actual:empty { display: none; }
.bitacora.solo-actual { max-width: 860px; background: var(--panel); border: 1px solid var(--linea); border-radius: 8px;
  padding: 2px 12px; }
.bitacora.solo-actual li { border: 0; }
@keyframes girar { to { transform: rotate(360deg); } }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 340px;
  overflow-y: auto; padding-right: 4px; }
.vivo { background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.vivo:hover { border-color: var(--linea-fuerte); }
.vivo:first-child { border-color: var(--acento); }
.vivo .cab { display: flex; flex-direction: column; gap: 1px; }
.vivo .tit { font-weight: 500; }
.vivo .meta { font-size: 11px; color: var(--suave); font-family: var(--mono); }
.vivo .res { color: var(--suave); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.vivo .menciona { margin-top: 6px; font-size: 12px; color: var(--suave); }

@media (max-width: 900px) {
  .lienzo { grid-template-columns: 1fr; height: auto; }
  .lateral { border-right: 0; border-bottom: 1px solid var(--linea); }
  .escenario { padding: 16px; }
  .dos, .comparar { grid-template-columns: 1fr; }
  .subtitulo { display: none; }
}

/* contenido en serif: la pregunta y los reportes */
.pregunta textarea, .frase { font-family: var(--serif); }
.pregunta textarea { font-size: 16px; line-height: 1.45; }
.reporte .tit, .reporte .res, .reporte .cuerpo, .vivo .tit, .vivo .res { font-family: var(--serif); }
.reporte .tit, .vivo .tit { font-size: 15px; font-weight: 600; }
.reporte .res, .vivo .res { font-size: 14px; }
.reporte .cuerpo { font-size: 14px; }

/* parametros de la pregunta */
.parametros { border: 0; padding: 0; margin: 10px 0 4px; display: grid; gap: 6px; font-size: 12.5px; color: var(--suave); }
.parametros .fila { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.parametros .fila .rotulo { margin: 0; width: 100%; }
.parametros label { display: inline-flex; align-items: center; gap: 4px; }
.parametros input, .parametros select { font: 12.5px var(--mono); color: var(--tinta); background: var(--panel);
  border: 1px solid var(--linea-fuerte); border-radius: 5px; padding: 2px 4px; }
.parametros input { width: 46px; }
.parametros input:focus, .parametros select:focus { outline: none; border-color: var(--acento); }
.parametros .nota-param { margin: 0; font-size: 11.5px; line-height: 1.45; }
.parametros:disabled { opacity: .55; }
/* sin servidor (GitHub Pages) la pagina solo repite preguntas ya respondidas */
.solo-sin-servidor { display: none; }
body.sin-servidor .solo-sin-servidor { display: block; }
body.sin-servidor .solo-con-servidor { display: none; }
.aviso-publico { font-size: 13px; line-height: 1.5; color: var(--tinta); margin: 0 0 10px; padding-left: 10px;
  border-left: 2px solid var(--amarillo); }
body.sin-servidor #entrada { opacity: .5; }
.en-curso { font-family: var(--mono); font-size: 12px; color: var(--amarillo); white-space: nowrap; }
.ajustes { margin: 8px 0 2px; font-size: 12.5px; color: var(--suave); }
.ajustes summary { cursor: pointer; width: max-content; }
.ajustes summary:hover { color: var(--tinta); }
.ajustes[open] summary { margin-bottom: 6px; }

/* estetica 8-bit: esquinas rectas y la franja de la paleta; los titulos en una sans geometrica */
*, *::before, *::after { border-radius: 0 !important; }
.barra { position: relative; border-bottom: 0; }
.barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--franja); }
.lienzo { margin-top: 4px; height: calc(100% - 53px); }
.titulo { font-family: var(--titulos); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.vista h2, .capa .n, .proceso h3, .vista h3, .paso .nombre { font-family: var(--titulos); }
.vista h3, .proceso h3 { font-weight: 600; }
.vista h3 { color: var(--tinta); }
#boton { background: var(--amarillo); border-color: var(--amarillo); color: #000; font-weight: 600; }
#boton:hover { background: var(--tinta); border-color: var(--tinta); }
button:hover { border-color: var(--celeste); }
.chip:hover { color: var(--celeste); border-color: var(--celeste); }
.capa.actual { background: color-mix(in srgb, var(--azul) 35%, transparent); }
/* la franja escalonada ocupa el largo de cada barra: una barra llena muestra la paleta entera */
.barra-prog > div, .punto-map .puntaje .b { background: var(--franja); }
.reporte.sel { box-shadow: 0 0 0 2px var(--c); }
.vivo:first-child { border-color: var(--amarillo); }
.insignia { color: var(--amarillo); }
.globo { background: var(--tinta); color: #000; }
.respuesta { border: 0; border-left: 3px solid var(--celeste); background: transparent; padding: 4px 0 4px 22px;
  font-size: 18px; }
.marca-m.Gene { background: color-mix(in srgb, var(--gene) 22%, transparent); }
.marca-m.Disease { background: color-mix(in srgb, var(--disease) 22%, transparent); }
.marca-m.Drug { background: color-mix(in srgb, var(--drug) 22%, transparent); }
.nodo.bert { fill: var(--fondo); }
::selection { background: var(--azul); color: var(--tinta); }
.reporte .cuerpo .cita { white-space: normal; overflow-wrap: anywhere; }
.reporte { overflow-wrap: anywhere; }

/* tokens por pregunta: total, barra en escala logaritmica y el desglose por etapa */
.costos { display: grid; gap: 10px; max-width: 980px; margin-bottom: 10px; }
.costo { display: grid; grid-template-columns: 240px 110px 1fr; grid-template-rows: auto auto; gap: 2px 14px;
  align-items: center; padding: 8px 12px; background: var(--panel); border: 1px solid var(--linea); }
.costo .nombre { font-family: var(--titulos); font-weight: 600; }
.costo .total { font-family: var(--mono); font-size: 16px; text-align: right; }
.costo .pista { height: 12px; background: var(--linea); display: flex; }
.costo .tramo { height: 100%; min-width: 2px; transition: width .8s; }
.costo .partes { grid-column: 2 / 4; font-size: 12px; color: var(--suave); text-align: left; padding-left: 124px; }
.costo .partes b { color: var(--tinta); font-family: var(--mono); font-weight: 500; }
.costo .partes i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: 0; }
.costo .aparte { white-space: normal; }
@media (max-width: 900px) {
  .costo { grid-template-columns: 1fr auto; }
  .costo .pista { grid-column: 1 / 3; }
  .costo .partes { grid-column: 1 / 3; padding-left: 0; }
}

/* tres puntos que laten de a uno, en amarillo, para lo que esta en curso */
.puntos { color: var(--amarillo); font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.puntos i { font-style: normal; animation: latir-punto 1.2s infinite both; }
.puntos i:nth-child(2) { animation-delay: .2s; }
.puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes latir-punto { 0%, 80%, 100% { opacity: .15; } 40% { opacity: 1; } }
.esperando .puntos { font-style: normal; }
.bitacora li.fallo .puntos, .bitacora li.listo .puntos { display: none; }

/* corridas grabadas: el conjunto, un filtro y la lista de preguntas */
.conjuntos { display: flex; gap: 0; margin: 4px 0 6px; }
.conjuntos button { flex: 1; padding: 5px 8px; font-size: 12.5px; color: var(--suave); border-right-width: 0; }
.conjuntos button:last-child { border-right-width: 1px; }
.conjuntos button span { font-family: var(--mono); font-size: 11px; margin-left: 4px; color: var(--suave); }
.conjuntos button.on { color: #000; background: var(--celeste); border-color: var(--celeste); }
.conjuntos button.on span { color: #000; }
#conjunto-desc { margin: 0 0 8px; }
.filtro-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
#filtro { flex: 1; min-width: 0; font: 12.5px var(--texto); color: var(--tinta); background: var(--panel);
  border: 1px solid var(--linea-fuerte); padding: 4px 8px; outline: none; }
#filtro:focus { border-color: var(--celeste); }
#cuantas { white-space: nowrap; margin: 0; }
.lista-grabadas { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.grabada { text-align: left; font-family: var(--serif); font-size: 13.5px; padding: 5px 9px; color: var(--suave);
  background: transparent; border: 1px solid var(--linea); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0; }
.grabada:hover { color: var(--tinta); border-color: var(--celeste); }
.exacta { margin: 0; padding-left: 18px; }
.exacta li { margin: 2px 0; }
.aviso-version { border-left: 3px solid var(--amarillo); padding-left: 10px; max-width: 860px; }

/* estado del pipeline en vivo, en una frase debajo del boton */
.estado-vivo { font-size: 12px; color: var(--suave); margin: 8px 0 0; }
.estado-vivo.falta { color: var(--suave); }
/* cuanto pesa cada reporte en la respuesta, en texto y no en una pastilla */
.reporte .uso { font-size: 12px; color: var(--amarillo); margin-top: 3px; }
#conjunto-desc, #cuantas, .lista-grabadas .nota-param { font-size: 12px; color: var(--suave); line-height: 1.45; }

/* autor en la barra de arriba */
.autor { font-size: 12.5px; color: var(--suave); white-space: nowrap; }

/* celular: la barra en dos lineas, los pasos como una fila fija arriba y el escenario antes de la lista de preguntas.
   la columna lateral se disuelve (display: contents) para poder ordenar sus partes alrededor del escenario */
.tarjetas { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
@media (max-width: 900px) {
  html, body { height: auto; }
  .barra { flex-wrap: wrap; gap: 4px 14px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px
    max(16px, env(safe-area-inset-left, 0px)); }
  .marca { flex: 1 1 100%; }
  .autor { white-space: normal; flex: 1 1 auto; min-width: 0; }
  .lienzo { display: flex; flex-direction: column; height: auto; }
  .lateral { display: contents; }
  .lateral > * { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .pregunta { order: 1; padding-top: 16px; }
  .pasos { order: 2; position: sticky; top: 0; z-index: 5; background: var(--fondo); margin: 12px 0 0;
    display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--linea); padding-block: 6px;
    scrollbar-width: none; }
  .pasos::-webkit-scrollbar { display: none; }
  .paso { flex: 0 0 auto; padding: 4px 10px 4px 22px; }
  .paso .n { top: 6px; left: 6px; }
  .paso .narra, .paso .detalle { display: none; }
  .escenario { order: 3; overflow: visible; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 24px
    max(16px, env(safe-area-inset-left, 0px)); scroll-margin-top: 52px; }
  .grabadas { order: 4; margin: 0; padding-block: 16px 32px; border-top: 1px solid var(--linea); }
  .vista h2 { font-size: 20px; }
  .frase { font-size: 19px; }
  .respuesta { font-size: 16px; padding-left: 14px; }
  .grafo-marco { height: min(58vh, 460px); }
  .capas { flex-wrap: wrap; }
  .capa { flex: 1 1 30%; min-width: 0; border-bottom: 1px solid var(--linea); }
  .ficha { left: 8px; right: 8px; width: auto; }
  .lista-grabadas { max-height: none; }
}

.narra-movil { display: none; }
@media (max-width: 900px) {
  .narra-movil:not(:empty) { display: block; margin: 0 0 14px; font-size: 13px; color: var(--suave);
    padding-left: 10px; border-left: 2px solid var(--amarillo); }
}
#otra { white-space: nowrap; }

/* ajustes de diseño: foco visible, numeros alineados, ancho de lectura y menos movimiento si se pide */
:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.paso:focus-visible { outline-offset: 0; }
.vista h2, .vista h3 { text-wrap: balance; }
.costo .total, .capa .n, .cifras b, .costo .partes b, .reporte .meta, .punto-map .puntaje, #cuantas,
  .paso .detalle { font-variant-numeric: tabular-nums; }
.vista { max-width: 1240px; }
.respuesta { max-width: 72ch; }
.seccion > .nota { max-width: 72ch; }
@media (min-width: 901px) {
  .lateral { display: flex; flex-direction: column; }
  .pasos { margin: 18px 0 20px; }
}
/* sin servidor la pregunta no se puede editar: el cuadro se achica al texto y el boton para ver otra pasa a ser el principal */
body.sin-servidor #entrada { resize: none; min-height: 0; height: auto; field-sizing: content; }
body.sin-servidor #otra { background: var(--amarillo); border-color: var(--amarillo); color: #000; font-weight: 600; }
body.sin-servidor #otra:hover { background: var(--tinta); border-color: var(--tinta); }
.grabada { transition: color .15s, border-color .15s; }
.reporte, .capa, button { transition: border-color .15s, background .15s, color .15s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 900px) {
  .selector { flex-wrap: wrap; gap: 4px 8px; }
}

/* que es esto, en una linea, arriba del escenario */
.intro { max-width: 72ch; margin: 0 0 18px; font-size: 13px; color: var(--suave); }
/* bloque de tokens: lo que se paga una vez va aparte y sin barra */
.subtitulo-costos { font-size: 13px; margin: 16px 0 8px; }
.costo.una-vez .partes { grid-column: 3 / 4; padding-left: 0; }
.costo.una-vez { grid-template-rows: auto; }
.sin-revisar { margin: 6px 0 0; font-size: 12px; }
@media (max-width: 900px) {
  .subtitulo { display: block; white-space: normal; flex: 1 1 100%; font-size: 12.5px; }
  .marca { flex-wrap: wrap; row-gap: 2px; }
  .costo.una-vez .partes { grid-column: 1 / 3; }
}
.costo.sin-barra .partes { grid-column: 3 / 4; padding-left: 0; }
@media (max-width: 900px) { .costo.sin-barra .partes { grid-column: 1 / 3; } }

/* menos cajas y menos acentos: filas de tokens como lineas, reportes con un filo fino, el peso en gris */
.costo { border: 0; background: none; border-top: 1px solid var(--linea); padding: 10px 0; }
.costos { gap: 0; }
.punto-map .puntaje .b { display: none; }
.reporte { border: 0; border-left: 2px solid var(--c, var(--linea-fuerte)); }
.reporte:hover { border-left-color: var(--c); background: color-mix(in srgb, var(--tinta) 4%, var(--panel)); }
.reporte .uso { color: var(--suave); }
.aviso-publico { border-left: 0; padding-left: 0; color: var(--suave); }
@media (max-width: 900px) {
  .barra .autor { font-size: 12px; }
  .barra .subtitulo { font-size: 12px; }
}
@media (max-width: 900px) {
  .cifras, .leyenda { gap: 2px 12px; }
  .cifras span, .leyenda > span { white-space: nowrap; }
  .leyenda > span:first-child { white-space: normal; flex: 1 1 100%; }
}
/* celular: los cinco pasos en dos lineas, sin desplazamiento lateral, asi siempre se ven todos */
@media (max-width: 900px) {
  .pasos { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  .paso { padding: 3px 8px 3px 20px; font-size: 13px; }
  .paso .n { top: 5px; left: 4px; }
}

/* el nombre del sitio en la barra */
.titulo { font-family: var(--titulos); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }

/* panel de preguntas grabadas: encima de la pagina, desde la derecha en escritorio y a pantalla completa en el celular */
.panel-preguntas { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--fondo) 70%, transparent);
  display: flex; justify-content: flex-end; }
.panel-preguntas[hidden] { display: none; }
.panel-preguntas .grabadas { order: 0; margin: 0; width: min(460px, 100%); height: 100%; background: var(--fondo);
  border-left: 1px solid var(--linea); display: flex; flex-direction: column;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px)) 20px; }
.cab-panel { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.cab-panel .rotulo { margin: 0; font-family: var(--titulos); font-size: 15px; color: var(--tinta); }
.cerrar-panel { border: 0; background: none; font-size: 24px; line-height: 1; padding: 2px 8px; color: var(--suave); }
.cerrar-panel:hover { color: var(--tinta); }
.panel-preguntas .lista-grabadas { flex: 1; max-height: none; min-height: 0; }
.panel-preguntas .grabada { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; padding: 8px 10px; }
body.con-panel { overflow: hidden; }
.acciones { flex-wrap: wrap; }
@media (max-width: 900px) {
  .panel-preguntas .grabadas { width: 100%; border-left: 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .lateral > .panel-preguntas { padding: 0; }
}
@media (max-width: 900px) { .panel-preguntas .grabadas { border-top: 0; } }

/* secciones plegables debajo de la respuesta: el titulo es el que abre y cierra */
.plegable > summary { font-family: var(--titulos); font-weight: 600; font-size: 15px; color: var(--tinta); cursor: pointer;
  list-style: none; display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: "+"; font-family: var(--mono); color: var(--suave); font-weight: 400; }
.plegable[open] > summary::after { content: "−"; }
.plegable > summary:hover::after { color: var(--celeste); }
/* el bloque de reportes ya trae su titulo, que aca lo pone el summary */
.plegable #bloque-reportes > h3 { display: none; }

/* celular: menos cosas arriba de la respuesta y debajo solo lo que se lee */
@media (max-width: 900px) {
  .barra .subtitulo { display: none; }
  body.sin-servidor label[for="entrada"], body.sin-servidor #aviso { display: none; }
  .pregunta { padding-top: 12px; }
  .aviso-publico { margin-bottom: 8px; }
  .narra-movil:not(:empty) { border-left: 0; padding-left: 0; margin-bottom: 10px; }
  .intro { margin-bottom: 8px; }
  .cifras { display: none; }
  .leyenda > span:not(:first-child) { display: none; }
  .plegable { margin-bottom: 4px; border-top: 1px solid var(--linea); padding-top: 12px; }
  .plegable > summary { margin-bottom: 0; padding-bottom: 12px; }
}
.plegable > summary { justify-content: space-between; max-width: 980px; }

/* ---------- ajustes segun criterios de la literatura de diseño web ----------
   escala tipografica de cinco pasos (12, 14, 16, 18, 24) en lugar de doce tamaños sueltos, para bajar la complejidad
   visual (Reinecke y otros 2013, Tuch y otros 2012); contraste de texto de al menos 4,5:1 (WCAG 2.1); zonas tactiles de
   44 px en el celular (Parhi y otros 2006, guias de Apple); lineas de lectura de hasta unos 75 caracteres */
:root { --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 18px; --t-xl: 24px; --aire: 40px; }

/* 12: datos y rotulos chicos */
.conjuntos button span, .etiqueta, .nodo-final .id, .reporte .meta, .tipo, .vivo .meta, .insignia, .bitacora .reloj,
.parametros .nota-param, .barra .autor, .aviso, .capa .t, .chip, .cifras, .cita, .colorear, .colorear button,
#conjunto-desc, #cuantas, .lista-grabadas .nota-param, .costo .partes, .en-curso, .estado-vivo, .globo, .leyenda,
.memoria, .paso .detalle, .paso .n, .punto-map .puntaje, .rastro code, .rastro .que, .reporte .uso, .sin-revisar,
.etiqueta.entidad, .rotulo, .votos { font-size: var(--t-xs); }
/* 14: texto secundario */
.aviso-publico, .bitacora, .enlace-acerca, .esperando, .intro, .nota, .paso, .paso .narra, .proceso h3, .punto-map,
.rastro, .reporte .cuerpo, .reporte .cuerpo h4, .reporte .res, .vivo .res, .subtitulo-costos, .vivo, .zoom button,
.caja, .grabada, .subtitulo, .ajustes, .conjuntos button, .parametros, .narra-movil:not(:empty), .selector,
#filtro { font-size: var(--t-s); }
/* 16: titulos de seccion, la pregunta y los totales */
.cab-panel .rotulo, .plegable > summary, .reporte .tit, .vivo .tit, .vista h3, .pregunta textarea, .costo .total,
.titulo { font-size: var(--t-m); }
.titulo { font-size: var(--t-l); }
/* 18: la respuesta, la pregunta destacada y los numeros de capa */
.respuesta, .capa .n, .vacio .grande { font-size: var(--t-l); }
/* 24: el titulo de cada vista y la pregunta marcada */
.vista h2, .frase { font-size: var(--t-xl); }

/* contraste: el numero de un paso pendiente estaba en 1,9:1 */
.paso .n { color: var(--suave); }

/* aire entre secciones y lineas de lectura acotadas */
.seccion { margin-bottom: var(--aire); }
.map, .vista p.nota { max-width: 75ch; }

/* sin servidor la pregunta no se edita: se muestra como texto y no como un campo vacio */
body.sin-servidor #entrada { border: 0; background: none; padding: 0; opacity: 1; color: var(--tinta); }

@media (max-width: 900px) {
  /* zonas tactiles de 44 px */
  button, .grabada { min-height: 44px; min-width: 44px; }
  .zoom button { min-height: 44px; min-width: 44px; }
  .paso { min-height: 44px; display: flex; align-items: center; }
  .paso .n { top: 50%; transform: translateY(-50%); }
  .barra a, .reporte a, .leyenda a { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .plegable > summary { min-height: 44px; align-items: center; }
  .vista h2 { font-size: 22px; }
  .frase { font-size: var(--t-l); }
  .seccion { margin-bottom: 24px; }
}

/* ---------- jerarquia: la pregunta es el titulo del escenario y cada vista lleva un rotulo chico ----------
   lo mas importante arriba a la izquierda y distinguible de un vistazo (lectura en F, Nielsen 2006) */
.pregunta-vista { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.3; color: var(--tinta);
  margin: 0 0 22px; max-width: 34ch; text-wrap: balance; }
.pregunta-vista:empty { display: none; }
.vista h2 { font-family: var(--titulos); font-size: var(--t-s); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--celeste); margin: 0 0 14px; }
/* en la version online la pregunta ya encabeza el escenario: la columna no la repite */
body.sin-servidor #entrada, body.sin-servidor label[for="entrada"] { display: none; }
body.sin-servidor .aviso-publico { margin-bottom: 14px; }

/* los pasos como una linea de tiempo: una linea continua une los numeros (continuidad, Gestalt) */
@media (min-width: 901px) {
  .pasos { position: relative; }
  .paso { padding-left: 32px; }
  .paso::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--linea-fuerte); }
  .paso:first-child::before { top: 16px; }
  .paso:last-child::before { bottom: auto; height: 16px; }
  .paso .n { left: 0; width: 11px; text-align: center; background: var(--fondo); line-height: 1.2; top: 9px; }
  .paso.listo::before { background: color-mix(in srgb, var(--celeste) 45%, var(--linea-fuerte)); }
}
@media (max-width: 900px) {
  .pregunta-vista { font-size: 22px; margin-bottom: 16px; }
  .vista h2 { font-size: var(--t-xs); margin-bottom: 10px; }
}
.pregunta-vista { max-width: 52ch; text-wrap: pretty; }
body.sin-servidor #aviso { display: none; }

/* celular: los pasos como cinco cuadrados numerados en una sola fila; el nombre del paso va en la linea de explicacion */
@media (max-width: 900px) {
  .pasos { flex-wrap: nowrap; gap: 8px; padding-block: 8px; }
  .paso { flex: 0 0 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center;
    border: 1px solid var(--linea-fuerte); }
  .paso .nombre { font-size: 0; }
  .paso .n { position: static; transform: none; font-size: var(--t-s); color: var(--suave); }
  .paso.listo .n { color: var(--tinta); }
  .paso.activo { border-color: var(--amarillo); }
  .paso.activo .n { color: var(--amarillo); }
  .narra-movil b { color: var(--tinta); font-weight: 600; }
  .selector > span { display: none; }
}
@media (max-width: 900px) {
  .paso { border: 0; border-bottom: 2px solid transparent; }
  .paso.activo { border-bottom-color: var(--amarillo); }
  .pasos { border-bottom: 0; }
}