/* Layout del editor. Colores, tipografías, radios y alturas salen de los tokens
   de css/system.css (FLUYO-018.13): aquí solo se decide dónde va cada cosa. */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--surface); color:var(--ink);
  font:var(--ui-font);
  display:flex; flex-direction:column; overflow:hidden;
}
.spacer{flex:1;}
main{flex:1; display:flex; min-height:0;}

/* ===================== Cabecera: tres zonas (FLUYO-018.14b) =====================
   marca · historial | modo ············ Lienzo ▾ | Exportar · Compartir · PRESENTAR · Más
   Los grupos se separan con filetes (.hdrDiv), no con cajas. El orden es el del DOM; placeChrome (ui.js) solo saca
   Exportar a «Más» y Presentar a la barra inferior en móvil, y los devuelve a su sitio. */
body > header{
  display:flex; align-items:center; gap:4px; min-height:var(--hdr-h);
  padding:0 10px 0 16px; background:var(--surface); border-bottom:1px solid var(--rule-2);
  flex-wrap:nowrap; position:relative; z-index:40;
}
body > header .logo{
  font-family:var(--font-serif); font-weight:400; font-size:var(--fs-display); line-height:1; letter-spacing:-.01em;
  color:var(--ink); margin-right:8px; display:flex; align-items:center; gap:calc(8em / 21); flex:none;
}
body > header > .hdrDiv{height:22px; align-self:center; margin:0 6px; background:var(--rule-2);}
.hdrHistory{display:flex; gap:2px; flex:none;}
.hdrSpacer{flex:1; min-width:8px;}
.modeSwitch{flex:none; margin-left:2px;}
/* «Lienzo ▾»: fantasma con cheurón; abierto, se queda marcado. */
#btnCanvas .icChev{width:12px; height:12px; color:var(--ink-3); margin-left:-2px;}
#btnCanvas[aria-expanded="true"]{background:var(--active-veil); color:var(--ink);}
/* Jerarquía de salida: Presentar (primaria) > Compartir (secundaria, con borde) > Exportar (fantasma). */
body > header > #btnExport{color:var(--ink-2);}
body > header > #btnPresent{margin-left:2px; padding:0 14px;}
.hdrDanger:hover{color:var(--attention);}
#btnBgClear{width:28px; min-width:28px; min-height:28px; height:28px; font-size:0; color:var(--ink-3);}
#btnBgClear::before{content:""; width:12px; height:12px; background:currentColor; -webkit-mask:var(--mask-x) center/contain no-repeat; mask:var(--mask-x) center/contain no-repeat;}

/* ===================== Rail de herramientas ===================== */
/* FLUYO-018.14b (B7): solo icono. El nombre es texto accesible (.lbl oculto) y tooltip a la derecha (data-tip).
   Sin la columna de texto diminuto el rail adelgaza y el lienzo gana 8 px. */
.rail{
  width:56px; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:var(--frame-inset) 0; overflow:visible;
}
.rail button{
  width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex-shrink:0;
  padding:0; background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  font:500 var(--fs-label)/1 var(--font-mono); letter-spacing:.02em; color:var(--ink-3);
}
.rail button .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.rail button:hover{background:var(--hover-veil); border-color:transparent; color:var(--ink);}
.rail button:active{background:var(--press-veil);}
.rail button svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:var(--ic-stroke); stroke-linecap:round; stroke-linejoin:round;}
/* la herramienta activa: pieza levantada y filete oliva hacia el lienzo */
.rail button.toggled{background:var(--surface-raised); border-color:var(--rule-2); color:var(--ink); box-shadow:inset -2px 0 0 var(--active);}
.rail button.toggled svg{color:var(--active);}
.rail hr{width:24px; border:none; border-top:1px solid var(--rule); margin:5px 0; flex-shrink:0;}

/* ===================== Lienzo: superficie de trabajo enmarcada =====================
   El tema del lienzo es del documento (oscuro, crema, claro) y no se toca. El chrome
   lo contiene: marco de tinta, esquinas suaves, un aire de papel alrededor y una
   sombra interior mínima para que se lea como una pantalla dentro del instrumento. */
.stage{flex:1; min-width:0; display:flex; position:relative; background:var(--surface); padding:var(--frame-inset) var(--frame-inset) var(--frame-inset) 0; overflow:hidden;}
#wrap{position:relative; width:100%; height:100%; overflow:hidden; border-radius:var(--r-md); box-shadow:var(--shadow-frame); background:var(--surface-sunken);}
#wrap::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 10px 22px -18px rgba(0,0,0,.55);}
#cv{width:100%; height:100%; display:block; cursor:default; touch-action:none;}
/* Edición in-situ: el textarea se coloca ENCIMA del texto del lienzo y no se ve.
   Todo lo que aquí se pone a cero —fondo, borde, relleno, sombra— es lo que antes
   convertía la caja de edición en un recuadro opaco que tapaba el diagrama.

   La tipografía NO se declara aquí: familia, tamaño, interlineado, peso,
   alineación y color los escribe syncEditBox() desde labelLayout(), que es la
   misma maquetación con la que se pinta el texto. Fijar cualquiera de esos seis
   valores en el CSS sería una segunda fuente de verdad, y el descuadre volvería.

   `white-space:pre` porque el lienzo todavía no reparte líneas: hasta que exista
   el reflow, el textarea tampoco debe repartirlas o editar y ver dejarían de
   coincidir. Cuando llegue A2, esta línea es lo único que hay que quitar. */
#editBox{
  position:absolute; display:none; z-index:5;
  background:transparent; border:none; outline:none; box-shadow:none;
  padding:0; margin:0; box-sizing:border-box; resize:none; min-height:0;
  white-space:pre; overflow:hidden; scrollbar-width:none;
}
#editBox:focus{box-shadow:none; border:none;}
#editBox::-webkit-scrollbar{ display:none; }
/* La selección sí se ve: es la única señal de que estás dentro del texto y no
   mirando el diagrama. */
#editBox::selection{ background:rgba(195,205,164,.38); }

/* ---- Cajones de iconos y GIFs ---- */
#iconDrawer, #animDrawer{
  position:absolute; left:8px; top:calc(var(--frame-inset) + 8px); bottom:calc(var(--frame-inset) + 8px); width:244px; z-index:20;
  background:var(--surface-raised); border:1px solid var(--rule-2); border-radius:var(--r-md);
  padding:12px; overflow-y:auto; display:none; box-shadow:var(--shadow-menu);
}
#iconDrawer h4, #animDrawer h4{font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-3); margin:14px 0 6px;}
#iconDrawer h4:first-child, #animDrawer h4:first-child{margin-top:0;}
.iconGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.iconGrid button{display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 2px; font-size:9px; line-height:1.15; color:var(--ink-3); height:auto; background:transparent; border-color:transparent; overflow-wrap:anywhere;}
.iconGrid button:hover{background:var(--hover-veil); border-color:transparent; color:var(--ink);}
.iconGrid img{width:28px; height:28px;}

/* Papelera flotante para táctil. Oculta por defecto en TODOS los tamaños: la
   enciende js/ui.js con body.touchSel, que exige puntero táctil y selección.
   No basta con una media query de ancho — un portátil con pantalla estrecha
   tiene teclado y no la necesita, y una tableta ancha sí. */
#btnDelTouch{
  position:absolute; right:calc(var(--frame-inset) + 14px); bottom:calc(var(--frame-inset) + 14px); z-index:30; display:none;
  width:52px; height:52px; padding:0; border-radius:50%;
  align-items:center; justify-content:center;
  background:var(--surface-raised); border:1px solid var(--attention-rule); color:var(--attention);
  box-shadow:var(--shadow-float);
}
#btnDelTouch .ic{width:22px; height:22px;}
#btnDelTouch:active{background:var(--attention-veil);}
body.touchSel #btnDelTouch{display:flex;}
/* Presentando no se edita nada, así que tampoco se borra. */
body.presenting #btnDelTouch{display:none;}

/* ===================== Panel de propiedades: instrumento de edición =====================
   Título serif por sección, rótulos mono por grupo (data-group), etiquetas mono
   pequeñas a la izquierda y el control a la derecha. Los grupos se separan con un
   filete y aire, no con cajas. */
aside{
  width:288px; flex:none; background:var(--surface);
  padding:6px 16px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin;
}
aside section{position:relative;}
aside h3{font:400 var(--fs-title)/1.2 var(--font-serif); color:var(--ink); margin:0 0 12px; letter-spacing:0; text-transform:none;}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; min-height:28px;}
.row[data-stack]{flex-direction:column; align-items:stretch; gap:5px; margin-bottom:6px;}
.row label{color:var(--ink-2); font:400 var(--fs-field)/1.35 var(--font-mono);}
/* Grupos del panel (FLUYO-018.14b): <details class="pgroup"> (css/system.css). Un grupo sin filas visibles se oculta (ui.js). */
#panelProperties .pgroup[hidden]{display:none;}
.rowLabel{margin-bottom:6px;}
/* Campos del panel a tamaño de objetivo: color 32×28 con ratón (40×36 con dedo, más abajo), deslizadores de 28. */
#panelProperties input[type=color]{width:32px; height:28px;}
#panelProperties input[type=range]{height:28px;}
/* La fila entera es el objetivo de su interruptor (la etiqueta lleva for=…). */
#panelProperties .row:not([data-stack]) label[for]{cursor:pointer; flex:1; align-self:stretch; display:flex; align-items:center;}
.row input[type=range]{width:112px;}
.row input[type=number]{width:72px; text-align:right; font-variant-numeric:tabular-nums;}
#panelProperties .row select{width:132px; min-width:0;}
textarea#lblEdit{width:100%; resize:vertical; min-height:40px; font-size:var(--fs-body);}
textarea#kwEdit{width:100%; resize:vertical;}
/* Color de una fila (FLUYO-018.23, D4): una fila de muestras de --sw-size (24 con ratón, 32 con dedo) y «⋯», que despliega en el
   sitio la rejilla entera con «Personalizado» y «Cuentagotas». La muestra del valor actual se adelanta si no cabe (.pinned). */
.swatches{display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--sw-size), 1fr)); grid-auto-rows:var(--sw-size); align-content:start; gap:4px; max-height:calc(var(--sw-size) + 6px); overflow:hidden; padding:3px; margin:-3px 0 -3px -3px;}
.swatches.expanded{max-height:calc((var(--sw-size) + 4px) * 6 + 6px); overflow-y:auto;}
.swatch.pinned{order:-1;}
.swatch{min-width:var(--sw-size); height:100%; border-radius:var(--r-xs); border:0; cursor:pointer; box-shadow:inset 0 0 0 1px var(--swatch-edge);}
.swatch:hover{box-shadow:inset 0 0 0 1px var(--swatch-edge), 0 0 0 1px var(--rule-2);}
.colorRow .swRow{display:flex; align-items:flex-start; gap:4px; min-width:0;}
.colorRow .swatches{flex:1 1 auto; min-width:0;}
#panelProperties button.swMore{flex:none; width:var(--sw-size); height:var(--sw-size); min-height:0; padding:0; border:1px solid var(--rule-2); background:transparent; color:var(--ink-2); font:500 15px/1 var(--font-mono); letter-spacing:0;}
#panelProperties button.swMore[aria-expanded="true"]{background:var(--active-veil); border-color:var(--active); color:var(--ink);}
.colorRow .colorTools{display:none;}
.colorRow.swOpen .colorTools{display:flex;}
/* Pozo «Personalizado» sin color propio (FLUYO-018.23, P3): la marca de automático del sistema, nunca un color rancio ni negro. */
#panelProperties input[type=color][data-auto]::-webkit-color-swatch{background:repeating-linear-gradient(45deg,var(--sw-a) 0 4px,var(--sw-b) 4px 8px) !important;}
#panelProperties input[type=color][data-auto]::-moz-color-swatch{background:repeating-linear-gradient(45deg,var(--sw-a) 0 4px,var(--sw-b) 4px 8px) !important;}
/* los swatches son <div>, así que la regla de :focus-visible de los controles no
   los alcanza: sin esto la navegación con flechas sería invisible e inservible */
.swatch:focus-visible{outline:var(--focus); outline-offset:2px;}
/* FLUYO-018.23 (D8): la muestra elegida es un estado del control: anillo oliva, separado del color por un aire del panel. */
.swatch.sel{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--active);}
.swatch.special{box-shadow:inset 0 0 0 1px var(--rule-2);}
.swatch.special.sel{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--active);}
.colorTools{display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap;}
.pickLbl{display:flex; align-items:center; gap:7px; font:400 var(--fs-label)/1 var(--font-mono); color:var(--ink-3); cursor:pointer;}
#panelProperties button.mini{padding:0 8px; font-size:var(--fs-label); gap:5px;}
#panelProperties button.mini .ic{width:14px; height:14px;}
.hint{color:var(--ink-3); font-size:var(--fs-label); line-height:1.55;}
.wfull{width:100%; margin-top:8px;}
.btnGrid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:4px;}
.btnGrid button{justify-content:flex-start; padding:0 9px;}
.btnGrid button .ic{width:14px; height:14px; color:var(--ink-3);}
.multiCount{font-size:var(--fs-ui); color:var(--ink);}
#btnPlay{white-space:nowrap; flex-shrink:0; gap:6px;}
#btnPlay .ic{width:14px; height:14px;}
#btnPlay .icPlay{display:none;}
#btnPlay:not(.toggled) .icPause{display:none;}
#btnPlay:not(.toggled) .icPlay{display:inline;}
/* Vacío: una frase de título y la ayuda como lista corta, no un muro de texto. */
.emptySel .emptyTitle{font:400 15px/1.3 var(--font-serif); color:var(--ink); margin:0 0 6px;}
.emptySel .emptyLead{font-size:var(--fs-field); line-height:1.55; color:var(--ink-3); margin:0 0 10px;}
/* ---- Cabecera de la selección (FLUYO-018.23): la misma en columna y en hoja. Nombre en serif, tipo e id en mono; Orden,
   Eliminar y plegar (columna) o cerrar (hoja). Pegada arriba mientras el panel se desplaza. ---- */
.sheetHead.selHead{display:flex; align-items:center; gap:2px; position:sticky; top:-6px; z-index:3; margin:0 -4px 0; padding:4px 0 6px 4px; background:var(--surface); border-bottom:1px solid var(--rule);}
body.storyMode .sheetHead.selHead{display:none;}
.selHeadText{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px;}
.selHead .sheetTitle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.selHead .selMeta{font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.selHead .selMeta[hidden]{display:none;}
.selHead .iconBtn{color:var(--ink-3);}
.selHead .iconBtn:hover{color:var(--ink);}
.selHead #btnDel:hover{color:var(--attention); background:var(--attention-veil);}
.selHead .icClose{display:none;}
.orderWrap{position:relative; display:inline-flex;}
.orderWrap[hidden]{display:none;}
.orderMenu{position:absolute; z-index:80; top:calc(100% + 4px); right:0; width:200px; padding:4px; display:flex; flex-direction:column; gap:1px;}
.orderMenu[hidden]{display:none;}
#panelProperties .row .lblText, .selBody .lblText{color:var(--ink-2); font:400 var(--fs-field)/1.35 var(--font-mono);}
.row .lblText{color:var(--ink-2); font:400 var(--fs-field)/1.35 var(--font-mono);}
.segValue{color:var(--ink-3); margin-left:6px;}
.rowNote{margin:-2px 0 8px; font-size:var(--fs-label); line-height:1.45;}
/* Segmentados del panel (FLUYO-018.23): a todo el ancho, opciones iguales; el texto parte en dos líneas antes que superponerse
   (P1: la regla de los botones del panel ponía nowrap y ganaba a la de .flowSeg). */
#panelProperties .pseg{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); width:100%;}
#panelProperties .seg > .segBtn{white-space:normal; overflow-wrap:anywhere; text-align:center; line-height:1.2; min-width:0; padding:3px 4px; min-height:calc(var(--ctl-h) - 2px); font-size:var(--fs-label);}
#panelProperties .seg > .segBtn .ic{width:16px; height:16px;}
/* SCENARIOS-SEMANTICS-001: Conexión · Flujo · Requisito son palabras enteras; en la columna estrecha (216 px) pasan a otra fila
   en vez de partirse («Conexió/n»). */
#panelProperties #kindSeg{display:flex; flex-wrap:wrap;}
#panelProperties #kindSeg > .segBtn{flex:1 1 auto; overflow-wrap:normal;}
/* Segmentados cortos en línea con su etiqueta (Ruta, Puntas, Línea del borde); en la columna estrecha se apilan (@container). */
#panelProperties .row.inlineSeg > .pseg{width:auto; flex:0 1 176px;}
#panelProperties .row.inlineSeg > .lblText{flex:1 1 auto; min-width:0;}
.lineSample{display:block; width:22px; height:0; border-top:2px solid currentColor;}
.lineSample.dashed{border-top-style:dashed;}
.lineSample.dotted{border-top-style:dotted;}
/* Tipografía, tamaño y negrita en una fila; «N» es la casilla #boldChk con aspecto de botón conmutado. */
.typoRow{justify-content:flex-start; gap:6px;}
#panelProperties .typoRow select{flex:1 1 auto; width:auto; min-width:0;}
.typoRow .typoFs{flex:none; display:inline-flex;}
#panelProperties .typoRow input[type=number]{width:64px;}
.boldTog{position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--ctl-h); height:var(--ctl-h); border:1px solid var(--rule-2); border-radius:var(--r-sm); background:var(--surface-raised); color:var(--ink-2); font:500 13px/1 var(--font-mono); cursor:pointer;}
.boldTog:hover{border-color:var(--rule-hover); background:var(--surface-hover);}
.row .boldTog input[type=checkbox]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; border:0; border-radius:var(--r-sm); background:none; cursor:pointer;}
.row .boldTog input[type=checkbox]::before{display:none;}
.boldTog:has(input:checked){background:var(--active-veil); border-color:var(--active); color:var(--ink);}
.boldTog:has(input:focus-visible){outline:var(--focus); outline-offset:2px;}
/* Sale por · Entra por en una fila. */
.endsRow{align-items:stretch; gap:8px;}
.endsRow .endsCol{flex:1 1 0; min-width:0; flex-direction:column; align-items:stretch; gap:4px;}
#panelProperties .endsRow .endsCol select{width:100%; min-width:0;}
/* En la columna estrecha (216 px) la tipografía ocupa su fila y tamaño + «N» bajan: el nombre de la fuente no se corta. */
#panelProperties{container-type:inline-size;}
@container (max-width:240px){ #panelProperties .typoRow, #panelProperties .row.inlineSeg{flex-wrap:wrap;} #panelProperties .typoRow select, #panelProperties .row.inlineSeg > .pseg{flex:1 1 100%;} #panelProperties .row.inlineSeg{gap:5px;} }
textarea#lblEdit.codeEdit{font:400 var(--fs-ui)/1.5 var(--font-mono); min-height:96px; white-space:pre; overflow-wrap:normal; overflow-x:auto;}
.emptyHelp{margin-top:-4px;}
.helpList{list-style:none; display:flex; flex-direction:column; gap:7px; padding:0; margin:0;}
.helpList li{position:relative; padding-left:12px; font-size:var(--fs-label); line-height:1.55; color:var(--ink-3);}
.helpList li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background:var(--ink-off);}
.helpList b{font-weight:500; color:var(--ink-2);}

/* ===================== Páginas =====================
   Nombres en serif (son significado), índice en mono (es metadato). La activa es
   una pieza levantada; su índice pasa a oliva. Los glifos ✕ ▾ ＋ siguen en el DOM
   (texto accesible y de los tests) pero se pintan con el trazo del sistema. */
#bottomBar{
  display:flex; align-items:stretch; gap:8px; min-height:44px;
  background:var(--surface); border-top:1px solid var(--rule-2);
}
#bottomBar > footer{flex:1; min-width:0;}
footer{
  display:flex; align-items:center; gap:2px; padding:0 8px 0 56px;
  background:var(--surface); overflow-x:auto; scrollbar-width:thin; counter-reset:pg;
}
footer .tab{
  display:flex; align-items:center; gap:8px; height:30px; padding:0 8px 0 10px; flex-shrink:0;
  border-radius:var(--r-sm); border:1px solid transparent; color:var(--ink-3);
  font:400 14px/1 var(--font-serif); cursor:pointer; white-space:nowrap; counter-increment:pg;
}
footer .tab::before{content:counter(pg, decimal-leading-zero); font:500 var(--fs-micro)/1 var(--font-mono); letter-spacing:.04em; color:var(--ink-off);}
footer .tab:hover{background:var(--hover-veil); color:var(--ink);}
footer .tab.active{background:var(--surface-raised); border-color:var(--rule-2); color:var(--ink);}
footer .tab.active::before{color:var(--active);}
footer .tab .x, footer .tab .pgMore{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none;
  font-size:0; border-radius:var(--r-xs); color:var(--ink-3); opacity:.7; cursor:pointer;
}
footer .tab .x::before, footer .tab .pgMore::before, #pagesBar > .pgAdd::before{content:""; width:12px; height:12px; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;}
footer .tab .x{--m:var(--mask-x);}
footer .tab .pgMore{--m:var(--mask-chevron); width:28px; height:28px;}   /* 018.18: también con ratón; ≥ 28 px (40 con dedo, más abajo) */
footer .tab .x:hover{opacity:1; color:var(--attention); background:var(--attention-veil);}
/* FLUYO-018.18 (D11): nombres acotados (el completo en el title) y «＋» fijo a la derecha aunque las pestañas desborden. */
footer .tab{max-width:220px;}
footer .tab > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis;}
#pagesBar > .pgAdd{--m:var(--mask-plus); width:30px; min-width:30px; padding:0; font-size:0; margin-left:4px; flex-shrink:0; position:sticky; right:0; background:var(--surface);}
/* El selector de página es del teléfono (≤ 700 px). */
#pagesBar > .pgSelect{display:none;}
#pagesBar > .pgAdd::before{width:14px; height:14px;}
/* Lectura y control del zoom, a la derecha de las páginas (solo >700 px). */
.viewCtl{display:flex; align-items:center; gap:1px; padding:0 8px 0 4px; flex-shrink:0;}
#bottomBar .viewCtl .zoomPct{min-width:54px; padding:0 4px; font:500 var(--fs-label)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink-2);}
#bottomBar .viewCtl .iconBtn{width:28px; min-width:28px;}

/* ===================== Modales ===================== */
.overlay{
  position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:50;
}
.card{background:var(--surface); color:var(--ink); border:1px solid var(--rule-2); border-radius:var(--r-lg); padding:24px 28px; min-width:320px; max-width:min(460px, calc(100vw - 32px)); box-shadow:var(--shadow-menu);}
.card .row{margin-bottom:10px;}
.card .row select{min-height:var(--ctl-h); min-width:160px;}
.card .row input[type=number]{width:84px;}
.card h2{font:400 21px/1.25 var(--font-serif); color:var(--ink); margin-bottom:14px;}
.card .row label{font-size:var(--fs-ui);}
#bar{width:100%; height:4px; background:var(--surface-sunken); border-radius:2px; overflow:hidden; margin-top:14px;}
#barFill{height:100%; width:0%; background:var(--active); transition:width .15s;}
@media (prefers-reduced-motion: reduce){ #barFill{transition:none;} }
.card .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}
.card .actions button{min-height:var(--ctl-h);}
#shareDialog{width:min(480px, calc(100vw - 32px)); min-width:0; margin:auto;}
#shareDialog::backdrop{background:var(--scrim); backdrop-filter:blur(2px);}
#shareDialog p{font-size:var(--fs-body); line-height:1.65; margin:12px 0; color:var(--ink-2);}
#shareDialog .shareKind{border:0; padding:0; margin:12px 0 0;}
#shareDialog .shareKind legend{font-size:var(--fs-body); padding:0; margin-bottom:6px;}
#shareDialog .shareKind label{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--rule-2); border-radius:var(--r-md); margin-bottom:6px; cursor:pointer; font-size:var(--fs-body); background:var(--surface-raised);}
#shareDialog .shareKind label:has(input:checked){border-color:var(--active); background:var(--active-veil);}
#shareDialog .shareKind input{accent-color:var(--active); margin-top:2px;}
#shareDialog .shareKind small{display:block; color:var(--ink-3); margin-top:2px; overflow-wrap:anywhere;}
#shareDialog .shareKind[hidden]{display:none;}
/* FLUYO-STORIES-2.0 S2a: la casilla de las otras formas cuelga de «Compartir historia»; con «sólo el diagrama» no aplica */
#shareDialog .shareKind label.shareOthers{margin:-2px 0 8px 28px; padding:6px 10px; background:none; border-style:dashed;}
#shareDialog .shareKind label.shareOthers:has(input:checked){border-color:var(--rule-2); background:none;}
#shareDialog .shareKind label.shareOthers[hidden]{display:none;}
#shareDialog .shareKind:has(#shareKindDiagram:checked) label.shareOthers{opacity:.45; pointer-events:none;}
#shareLink{display:block; box-sizing:border-box; width:100%; margin-top:8px; padding:10px; resize:vertical;}
/* Tres salidas con etiquetas que dicen lo que hacen no caben en una fila sin
   quedar ilegibles en móvil. En columna cada una se lee entera, que es el
   requisito cuando la elección es irreversible. */
.card .actions.stack{flex-direction:column; align-items:stretch;}
#incomingModal .card{max-width:min(420px, calc(100vw - 32px));}

/* ---- modo presentación ----
   El diagrama se queda solo en pantalla: fuera cabecera, rail, panel y pestañas.
   El mando (material inverso, .inverse) se aparta visualmente (opacidad baja)
   para no salir en la foto, pero sigue ahí y se recupera al acercar el puntero o
   al enfocarlo con el teclado. */
/* ⚙ Propiedades: en la hoja abre/cierra (solo con selección, M2); en columna pliega/despliega el panel (FLUYO-018.23, D2). En
   modo Historia no hay Propiedades. */
#btnPanel{display:inline-flex; align-items:center; justify-content:center;}
body.storyMode > header > #btnPanel{display:none;}
@media (min-width:701px){
  :root[data-props="folded"] body:not(.storyMode):not(.sideSheet) > main > aside{display:none;}
}
#presentBar{
  display:none; position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  align-items:center; gap:6px; z-index:60;
  background:rgba(22,21,15,.86); border:1px solid var(--rule-2); border-radius:var(--r-pill);
  padding:6px 8px; opacity:.35; transition:opacity .2s; box-shadow:var(--shadow-float);
}
#presentBar:hover, #presentBar:focus-within{opacity:1;}
#presentBar button{min-width:44px; height:38px; border-radius:var(--r-pill); font-size:var(--fs-ui); display:inline-flex; align-items:center; justify-content:center; padding:0 12px;}
#presentBar #prPos{color:var(--ink-3); font:500 var(--fs-label)/1 var(--font-mono); font-variant-numeric:tabular-nums; padding:0 6px; min-width:70px; text-align:center;}
body.presenting header,
body.presenting .rail,
body.presenting aside,
body.presenting #bottomBar,
body.presenting #iconDrawer,
body.presenting #animDrawer{display:none !important;}
body.presenting .stage{padding:0;}
body.presenting #wrap{border-radius:0; box-shadow:none;}
body.presenting #wrap::after{display:none;}
body.presenting #presentBar{display:flex;}
@media (prefers-reduced-motion: reduce){ #presentBar{transition:none;} }

/* ---- Present con Historia (FLUYO-013) ----
   El Canvas es el protagonista: el encabezado es un velo pequeño arriba y la
   barra sigue siendo mínima. Fuera de la reproducción la barra se ve entera
   (es la invitación a empezar); durante ella vuelve a apartarse. */
#presentBar[hidden], #presentBar button[hidden], #presentStory[hidden]{display:none !important;}
/* left:50% limita el ancho «shrink-to-fit» a media pantalla: sin max-content la barra se parte en filas en móvil */
#presentBar{width:max-content; max-width:calc(100vw - 16px); flex-wrap:wrap; justify-content:center; row-gap:6px;}
#presentBar.psAttention{opacity:1;}
/* FLUYO-018.18 (D7, D8): la Historia y las páginas son dos grupos que nunca se parten (si no caben, cada uno en su fila) y
   la salida es una. Sin «▶» para la página siguiente: chevrons; ▶ es solo Reproducir. */
#presentBar .prGroup{display:flex; align-items:center; gap:6px; flex-wrap:nowrap;}
#presentBar .prGroup[hidden]{display:none;}
#presentBar{column-gap:16px;}
/* FLUYO-019-PRSKIN: el material inverso (system.css) no redefine --active, --active-rule ni --focus, y con la interfaz clara
   «Construido» heredaba el oliva hondo de :root (texto 1,74:1, foco 2,49:1 sobre la barra). Los valores de la interfaz oscura,
   solo en este botón: el resto del mando no cambia. */
#presentBar #prSkin{--active:var(--c-oliva-palido); --active-rule:rgba(195,205,164,.42); --focus:2px solid var(--c-oliva-palido);}
#presentBar .iconBtn{width:44px; min-width:44px; padding:0;}
#presentBar .iconBtn .ic, #presentBar #prExit .ic{width:16px; height:16px;}
#presentBar #psPlay{background:var(--attention); color:#F2EDE3; border-color:transparent; font-weight:500; padding:0 18px; gap:8px;}
#presentBar #prExit, #presentBar #psStop, #presentBar #psPause{padding:0 14px; gap:8px;}
@media (pointer:coarse){ #presentBar button{height:var(--ctl-h-touch); min-width:var(--ctl-h-touch);} }
/* Con el dedo no hay hover que devuelva el mando: no se aparta (un toque en el lienzo ya no hace nada). */
@media (hover:none){ #presentBar{opacity:1;} }
#presentStory{
  display:none; position:fixed; left:50%; top:14px; transform:translateX(-50%);
  width:max-content; max-width:min(92vw, 640px); text-align:center; z-index:59; pointer-events:none;
  flex-direction:column; align-items:center; gap:4px;
  background:rgba(22,21,15,.72); border:1px solid var(--rule-2); border-radius:var(--r-lg); padding:8px 18px;
}
body.presenting #presentStory:not([hidden]){display:flex;}
#presentStory .psTitle{font:400 17px/1.25 var(--font-serif); overflow-wrap:anywhere;}
/* FLUYO-STORIES-2.0 S2a: el sistema (o la Historia, reproduciendo) encima del título, y «Otras formas» al terminar. El encabezado no
   recibe el puntero; los botones de las otras formas, sí. */
#presentStory .psKicker{font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:.02em; color:var(--ink-3); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#presentStory .psKicker:empty{display:none;}
#presentStory .psOthers{display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:4px; padding-top:6px; border-top:1px solid var(--rule-2); width:100%;}
#presentStory .psOthers[hidden]{display:none;}
#presentStory .psOthersHead{font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:.02em; color:var(--ink-3);}
#presentStory .psOthersList{display:flex; flex-wrap:wrap; justify-content:center; gap:6px;}
#presentStory .psOther{pointer-events:auto; display:inline-flex; align-items:baseline; gap:8px; max-width:100%; min-height:32px; padding:4px 12px; cursor:pointer; color:var(--ink); background:transparent; border:1px solid var(--rule-2); border-radius:var(--r-pill);}
#presentStory .psOther:hover, #presentStory .psOther:focus-visible{border-color:var(--ink-3); background:var(--active-veil);}
#presentStory .psOtherName{font:400 15px/1.25 var(--font-serif); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#presentStory .psOtherOutcome{font:500 var(--fs-label)/1.3 var(--font-mono); color:var(--ink-3); white-space:nowrap;}
@media (pointer:coarse){ #presentStory .psOther{min-height:var(--ctl-h-touch);} }
/* en un teléfono apaisado el encabezado de Present no da para más filas sin tapar el diagrama o el mando (018.29 R1): el sistema y
   «Otras formas» se omiten ahí (el Viewer los sigue mostrando) */
@media (orientation:landscape) and (max-height:500px){ #presentStory .psKicker, #presentStory .psOthers{display:none !important;} }
#presentStory .psTitleReady{color:var(--ink-3);}
#presentStory .psDots{display:flex; gap:6px; align-items:center; color:var(--ink-3); font-size:var(--fs-label);}
#presentStory .psDot{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink-3); box-sizing:border-box;}
#presentStory .psDot.done{background:var(--ink-3);}
#presentStory .psDot.now{background:var(--ink); border-color:var(--ink); transform:scale(1.25);}
#presentStory .psCaption{font-size:var(--fs-body); min-height:0; overflow-wrap:anywhere;}
#presentStory .psCaption:empty, #presentStory .psOutcome:empty, #presentStory .psSummary:empty{display:none;}
#presentStory .psOutcome{font-size:var(--fs-body); font-weight:600;}
#presentStory .psSummary{font-size:var(--fs-label); color:var(--ink-3);}
/* SCENARIOS-SEMANTICS-001 FASE 5 (D8, decisión 246): la línea de estado de la ruta observada, en el rótulo (la fila de controles no
   cambia). Solo el borde dice el estado de la RUTA (oliva pálido / terracota clara, los de la interfaz oscura: el rótulo es material
   inverso); «Sin ruta de flujo» es neutra. Mismo estilo que #stFlow del Viewer (share.css). */
#presentStory .psFlow{font:500 var(--fs-label)/1.3 var(--font-mono); color:var(--ink-2); padding:1px 0 1px 8px; border-left:3px solid var(--rule-2); overflow-wrap:anywhere;}
#presentStory .psFlow[hidden]{display:none;}
#presentStory .psFlow.isAVAILABLE{border-left-color:var(--c-oliva-palido);}
#presentStory .psFlow.isUNAVAILABLE{border-left-color:#DE8B71;}
@media (max-width: 480px){
  #presentStory{top:8px; padding:6px 12px;}
  #presentStory .psTitle{font-size:15px;}
  #presentBar{bottom:10px; gap:6px; padding:5px 8px;}
}
@media (prefers-reduced-motion: reduce){ #presentStory .psDot{transform:none !important;} }

/* ============ Responsive ============ */
@media (max-width: 700px) {
  /* La cabecera móvil (una fila, controles de 40 px) está al final del archivo, en FLUYO-018.12/13.
     «Limpiar página» ya no se oculta aquí: vive en el menú «Más», donde sí cabe. */
  body > header .logo { font-size: 19px; }

  main { flex-direction: column; }

  .rail {
    width: 100%; height: auto;
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 6px; gap: 2px;
    border-bottom: 1px solid var(--rule-2);
  }
  .rail button {
    width: auto; min-width: 40px; height: 36px;
    flex-direction: row; gap: 5px;
    font-size: 9.5px; flex-shrink: 0; padding: 4px 8px;
  }
  .rail button svg { width: 16px; height: 16px; }
  .rail button.toggled { box-shadow: inset 0 -2px 0 var(--active); }
  .rail hr {
    width: 1px; height: 22px;
    border-top: none; border-left: 1px solid var(--rule);
    margin: 0 2px; flex-shrink: 0;
  }

  /* Lienzo a sangre: en móvil cada píxel es lienzo. El marco lo ponen los filetes del rail y de la barra inferior. */
  .stage { padding: 0; }
  #wrap { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
  #wrap::after { box-shadow: inset 0 8px 16px -14px rgba(0,0,0,.5); }

  /* El panel de propiedades no se oculta en móvil: es la única vía a los
     colores, la tipografía y el resto de ajustes de la selección. Antes era un
     cajón lateral de altura completa que tapaba a su propio botón ⚙ y no tenía
     otra salida (FLUYO-018.11, P0-1). Desde FLUYO-018.12 es una hoja inferior:
     ver la sección del final del archivo. */
  #btnPanel { display: inline-flex; align-items: center; justify-content: center; }

  #iconDrawer, #animDrawer {
    left: 6px; right: 6px; width: auto;
    top: auto; bottom: 8px; max-height: 60%;
  }
  #btnDelTouch { right: 14px; bottom: 14px; }
}

@media (min-width: 701px) and (max-width: 1024px) {
  /* tableta: el ancho de siempre (018.14b solo ensancha el escritorio); Historias, 280 */
  aside { width: 216px; padding-left: 12px; padding-right: 12px; }
  .row input[type=range] { width: 92px; }
  #panelProperties .row select { width: 104px; }
}

/* ===================== Panel Scenarios ===================== */

.traceLog{max-height:220px; overflow-y:auto; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:6px; font-size:12px;}
.scLogLine{padding:4px 0; border-bottom:1px solid var(--line); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.scLogLine:last-child{border-bottom:none;}
.scLogLine .scLogMark{display:inline-block; width:1.2em; text-align:center; margin-right:4px;}
.scLogLine.success .scLogMark{color:var(--active);}
.scLogLine.fail .scLogMark{color:var(--attention);}
.scLogLine.success .scLogResult{color:var(--active);}
.scLogLine.fail .scLogResult{color:var(--attention);}

#panelScenarios section h3{margin-top:0;}
#panelScenarios .hint{margin-top:6px;}


/* FLUYO-011 — Eventos → Canvas → Historia. */
[hidden]{display:none!important;}
aside.scenariosOpen{box-sizing:border-box;width:320px;flex:0 0 320px;overflow:hidden;gap:12px;container-type:inline-size;}
#panelScenarios{flex:1;min-height:0;flex-direction:column;gap:16px;}
.scHeader{flex:none;min-width:0;}
.scHeaderRow,.scPlaybackControls,.scSectionHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.scHeaderRow{margin-bottom:10px;}
#scScenarioTitle{min-height:var(--ctl-h);min-width:0;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:400 var(--fs-title)/1.25 var(--font-serif);border-color:transparent;background:transparent;padding-left:2px;}
#scScenarioMenu,#scStoryAdd{flex:none;}
#scRun:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.3);}
#scRun:disabled:hover{filter:saturate(.3);}
.scStoriesLabel{font:500 var(--fs-micro)/1.3 var(--font-mono);letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);margin:0 0 4px;}
.scPlaybackControls{justify-content:flex-start;flex-wrap:wrap;}
#scStatus:empty{display:none;}
#scStatus{font-size:12px;color:var(--muted);margin:8px 0 0;}
#scErrors{color:var(--attention);font-size:13px;}
/* SCENARIOS-SEMANTICS-001 FASE 3: ruta observada. Una línea de selección y una de estado; el color solo marca el
   estado de la RUTA (disponible / no disponible). «Sin ruta de flujo» y los estados de la herramienta son neutros. */
.scFlow{margin:8px 0 0; padding:6px 8px; border:1px solid var(--rule); border-left:3px solid var(--rule-2); border-radius:var(--r-xs, 6px); min-width:0; container:scflow / inline-size;}
.scFlow[hidden]{display:none;}
.scFlow[data-state="AVAILABLE"]{border-left-color:var(--active);}
.scFlow[data-state="UNAVAILABLE"]{border-left-color:var(--attention);}
.scFlowHead{display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap;}
.scFlowKicker{flex:0 0 100%; font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--muted);}
.scFlowPick{flex:1 1 0; min-width:0; display:flex;}
.scFlowPick select{width:100%; min-width:0; text-overflow:ellipsis;}
.scFlowArrow{flex:none; color:var(--muted);}
/* FASE 6 (decisión 252): «Automática · nombre» entero. Si la herramienta no da para dos selectores de ~250 px, origen y destino
   se apilan, cada uno a todo el ancho, y la flecha pasa a vertical entre ellos (el mismo orden, el mismo marcado y la misma
   interacción). Con espacio, la fila de siempre. Se mide la herramienta, no la ventana: el panel mide 320 px en escritorio. */
@container scflow (max-width: 539px){
  .scFlowPick{flex:1 1 100%;}
  .scFlowArrow{flex:0 0 100%; font-size:0; line-height:1; text-align:center;}
  .scFlowArrow::before{content:"↓"; font-size:12px;}
}
.scFlowState{margin:6px 0 0; font-size:13px; color:var(--ink);}
#scFlowWhy{color:var(--muted);}
/* SCENARIOS-SEMANTICS-001 FASE 4: línea de tiempo derivada de la ruta (D6) y filas (§ 3.1). Oliva = disponible,
   terracota = no disponible; frontera = barra, cambio de un nodo de la ruta = punto; el cursor solo reproduciendo. */
.scFlowTrack{position:relative; display:block; height:16px; margin:6px 0 2px;}
.scFlowTrack[hidden], .scFlowEnds[hidden], .scFlowRows[hidden], .scFlowCursor[hidden]{display:none;}
.scFlowSegs{position:absolute; left:0; right:0; top:6px; height:5px; border-radius:3px; overflow:hidden; background:var(--rule);}
.scFlowSeg{position:absolute; top:0; bottom:0;}
.scFlowSeg[data-state="AVAILABLE"]{background:var(--active); opacity:.8;}
.scFlowSeg[data-state="UNAVAILABLE"]{background:var(--attention); opacity:.85;}
.scFlowMarks{position:absolute; inset:0;}
.scFlowMark{position:absolute; top:13px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--ink-3);}
.scFlowMark.scFlowFrontier{top:3px; width:1.5px; height:11px; margin-left:-.75px; border-radius:1px; background:var(--ink-2);}
.scFlowCursor{position:absolute; top:2px; width:2px; height:14px; margin-left:-1px; border-radius:1px; background:var(--ink);}
.scFlowCursor::before{content:""; position:absolute; left:50%; top:-3px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 2px var(--surface);}
.scFlowEnds{display:flex; justify-content:space-between; gap:8px; margin:0; font:500 11px/1.25 var(--font-mono); color:var(--ink);}
.scFlowEnds div{display:flex; flex-direction:column; flex:none;}
.scFlowEnds div:nth-child(2){flex:1 1 auto; min-width:0;}   /* solo la etiqueta del centro se parte; los valores nunca */
.scFlowEnds div:nth-child(2){text-align:center;}
.scFlowEnds div:nth-child(3){text-align:right;}
.scFlowEnds dt{font:500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--muted);}
.scFlowEnds dd{margin:0; white-space:nowrap;}
.scFlowRows{list-style:none; margin:6px 0 0; padding:4px 0 0; border-top:1px solid var(--rule); font:400 11px/1.35 var(--font-mono); color:var(--ink-2);}
.scFlowRow{display:flex; align-items:baseline; gap:6px; min-width:0; overflow-wrap:anywhere;}
.scFlowRow[data-state]::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; align-self:center; background:var(--rule-2);}
.scFlowRow[data-state="AVAILABLE"]::before{background:var(--active);}
.scFlowRow[data-state="UNAVAILABLE"]::before{background:var(--attention);}
.scFlowMore{color:var(--muted); padding-left:13px;}
.scSectionHeader h3,.scStorySection>h3{margin:0;font:500 var(--fs-micro)/1.3 var(--font-mono);letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);}
.scSectionHeader>button{font-size:12px;border:0;background:transparent;white-space:nowrap;min-height:var(--ctl-h);}
.scEventLibrarySection{display:flex;flex-direction:column;gap:6px;flex:0 1 204px;min-height:110px;border-bottom:1px solid var(--line);padding-bottom:12px;}
.scEventLibrary{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;}
.scEventRow{display:flex;align-items:center;min-height:38px;border-radius:7px;}
.scEventRow:hover,.scEventRow.new{background:var(--active-veil);}
.scEventPlace{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align:left;cursor:grab;border:0;background:transparent;padding:8px;touch-action:none;}
.scEventPlace:active{cursor:grabbing;}
.scEventPlace span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scEventSymbol{font-size:18px;flex:none;width:22px;text-align:center;}
.scMore{border:0;background:transparent;flex:none;min-width:30px;min-height:32px;}
.scLibraryHint{font-size:11px;margin:0;color:var(--muted);}
.scStorySection{display:flex;flex-direction:column;flex:1;min-height:100px;gap:8px;}
.scStoryboardSection{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;}
.scEmptyState{padding:14px 4px;color:var(--muted);font-size:13px;line-height:1.6;}
.scEmptyState strong{display:block;color:var(--text);margin-bottom:8px;}
.scEmptyState button{margin-top:8px;}
.scStoryGroup{border-left:1px solid var(--line);margin-left:9px;padding-left:12px;padding-bottom:8px;}
.scDelay{border:0;background:transparent;color:var(--muted);padding:6px 4px;font-size:12px;min-height:28px;text-align:left;}
.scDelay:hover{color:var(--text);text-decoration:underline;}
.scTogether{font-size:11px;color:var(--muted);padding:4px 0 6px;}
/* FLUYO-018.21: el momento espera una llegada («No empieza hasta que llegue …»): una línea, en el oliva del estado activo */
.scWaits{font-size:11px;line-height:1.4;color:var(--active);padding:2px 0 6px;overflow-wrap:anywhere;}
.scStoryRow{position:relative;display:flex;align-items:flex-start;gap:6px;min-height:36px;border-radius:6px;padding:3px 0;}
.scStoryRow .scStatusMark{position:absolute;left:-20px;top:11px;background:var(--panel);font-size:11px;width:14px;text-align:center;}
.scStoryText{flex:1;min-width:0;}
.scStorySentence{border:0;background:transparent;padding:5px 4px;text-align:left;width:100%;line-height:1.5;font-size:13px;overflow-wrap:anywhere;}
.scStoryRow:hover,.scStoryRow.selected{background:var(--hover-veil);}
.scStoryRow.scStatus_active{background:var(--active-veil);}
.scStoryRow.scStatus_failed,.scStoryRow.missing{background:var(--attention-veil);}
.scStatus_completed .scStatusMark,.scStatus_success .scStatusMark{color:var(--active);}
.scStatus_failed .scStatusMark,.scStepDetail{color:var(--attention);}
.scStepDetail{font-size:12px;padding:0 4px 5px;line-height:1.4;}
.scStepSecondary{color:var(--muted);font-size:12px;padding:0 4px 4px;line-height:1.4;}
/* FLUYO-MCP-STEP-MESSAGE-001: el mensaje propio del paso (su globo), bajo la frase; entero, sin recortar. */
.scStepMessage{color:var(--text);font-size:12px;font-style:italic;padding:0 4px 4px;line-height:1.4;overflow-wrap:anywhere;}
/* FLUYO-STORIES-2.0 S1a: la frase del paso se escribe en su fila */
.scStepMessage[title]{cursor:text;}
.scStepMessageInput{display:block;box-sizing:border-box;width:calc(100% - 8px);margin:2px 4px 4px;padding:6px 8px;font:inherit;font-size:13px;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:6px;}
.scStepMessageInput::placeholder{color:var(--ink-3);font-style:italic;}
/* FLUYO-STORIES-2.0 S1b: el desenlace del motor bajo el último momento */
.scOutcome{margin:8px 4px 2px;padding:6px 8px;border-radius:6px;border:1px solid var(--line);font-weight:600;font-size:12px;}
.scOutcome.failed{border-color:var(--attention);color:var(--attention);background:var(--attention-veil);}
.scPopover input.scMessageInput{display:block;width:100%;margin-top:4px;}
.scStoryRepair{font-size:11px;padding:3px 5px;margin:3px;}
.scGroupWarning{font-size:11px;line-height:1.4;color:var(--muted);margin:5px 0;}
#scPaletteToggle{display:none;width:100%;text-align:left;margin-top:8px;}
.scCompact #scPaletteToggle,.scPlaying #scPaletteToggle{display:block;}
.scCompact #scLibrarySection:not(.scFloating),.scPlaying #scLibrarySection{display:none;}
#scLibrarySection.scFloating{position:fixed;z-index:190;width:300px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 100px);height:350px;min-height:0;background:var(--panel);border:1px solid var(--line);padding:12px;border-radius:12px;box-shadow:var(--shadow-menu);}
#scPlacementBar{position:fixed;z-index:180;left:50%;bottom:62px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 40px);padding:12px 16px;background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r-md);box-shadow:var(--shadow-float);box-sizing:border-box;}
#scPlacementText{font-size:13px;white-space:pre-line;min-width:0;}
#scPlacementBar button{flex:none; min-height:var(--ctl-h); padding:0 14px;}
#scNotice{position:fixed;z-index:260;bottom:65px;left:84px;background:var(--panel);padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);max-width:calc(100vw - 120px);font-size:13px;box-shadow:var(--shadow-menu);}
.scDragGhost{position:fixed;z-index:210;pointer-events:none;padding:10px 14px;background:var(--panel);color:var(--text);border:1px solid var(--active);border-radius:var(--r-md);box-shadow:var(--shadow-float);font-size:13px;white-space:pre-line;max-width:300px;}
.scPopover{position:fixed;z-index:250;box-sizing:border-box;min-width:230px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:6px;box-shadow:var(--shadow-menu);}
.scPopover>button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:9px 10px;white-space:normal;}
.scPopover>button:hover{border-color:transparent;}
.scPopover>button:hover{background:var(--hover-veil);}
.scPopover>button:disabled{opacity:.4;cursor:default;}
.scPopover>button:disabled:hover{background:transparent;}
.scMenuHead{font-weight:600;padding:6px 10px 0;overflow-wrap:anywhere;}
.scMenuSub{font-size:12px;color:var(--muted);padding:1px 10px 6px;overflow-wrap:anywhere;}
.scMenuSep{height:1px;background:var(--line);margin:6px 2px;}
.scMenuHint{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;font-weight:400;}
.scMenuChevron{float:right;color:var(--muted);}
.scPopover>button.scMenuBack{color:var(--muted);font-size:12px;}
.scPopover>button.scMenuDanger{color:var(--attention);}
.scPopover p{font-size:12px;color:var(--muted);max-width:270px;}
.scPopover label{display:block;margin:8px 0;}
.scPopover input,.scPopover select{box-sizing:border-box;max-width:100%;}
/* ---- Scenario dialogs ---- */
.scDialog{padding:0;width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-menu);}
.scDialog[open]{display:flex;flex-direction:column;overflow:hidden;}
.scDialog::backdrop{background:var(--scrim);backdrop-filter:blur(3px);}
.scDialog>header,.scDialog>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:18px 24px;}
.scDialog>header{border-bottom:1px solid var(--line);}
.scDialog h2{font:400 21px/1.25 var(--font-serif);margin:0;}
.scDialog header p{font-size:12px;color:var(--muted);margin:6px 0 0;}
.scDialog>footer{justify-content:flex-end;border-top:1px solid var(--line);}
/* position:relative: los inputs ocultos (position:absolute) quedan contenidos en el body que scrollea,
   no en el <dialog>; si no, el foco de un radio scrollea el dialog entero y rompe header/footer. */
.scDialogBody{position:relative;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;min-height:0;padding:24px;}
.scEventColumns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;}
.scEventFields{display:flex;flex-direction:column;gap:14px;min-width:0;}
.scDialog label,.scDialog legend{font-size:13px;}
.scDialog input:not([type=radio]):not([type=checkbox]),.scPopover input,.scPopover select,#scEventSearch{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:9px;color:var(--text);font:inherit;box-sizing:border-box;min-width:0;}
.scDialog fieldset{border:0;padding:0;margin:0;min-width:0;}
.scDialog legend{margin-bottom:8px;font-weight:600;}
.scFieldGroup{display:flex;flex-direction:column;gap:8px;min-width:0;}
.scFieldGroup>label{font-weight:600;}

/* Segmented controls */
.scSegmented{display:flex;gap:6px;flex-wrap:wrap;}
.scSegmented label{display:flex;align-items:center;cursor:pointer;}
.scSegmented input{position:absolute;opacity:0;width:0;height:0;}
.scSegmented span{display:block;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:13px;transition:background .08s,border-color .08s;}
.scSegmented input:checked+span{border-color:var(--accent);background:rgba(58,167,232,.13);color:var(--text);}
.scSegmented input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px;}
.scSegmented span:hover{background:var(--panel);}
.scSegmented input:disabled+span{opacity:.5;cursor:not-allowed;}

/* Choice cards */
.scChoice{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px;margin:0;cursor:pointer;transition:border-color .08s,background .08s;}
.scChoice:has(input:checked){border-color:var(--accent);background:rgba(58,167,232,.07);}
.scChoice input{position:absolute;opacity:0;width:0;height:0;}
.scChoice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.scChoice strong{font-size:13px;font-weight:500;}
.scChoice small{display:block;color:var(--muted);line-height:1.4;margin-top:4px;}
.scChoiceStack{display:flex;flex-direction:column;gap:8px;}

.scScope{padding:12px;border-radius:8px;background:var(--panel2);font-size:12px;line-height:1.6;margin:0;}
.scPhrase{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px;border:1px solid var(--line);border-radius:8px;margin-top:0;background:var(--panel2);}
.scPhrase input.scPhraseText{padding:5px 2px;border:0;background:transparent;min-width:18px;max-width:100%;color:var(--text);font:inherit;}
.scPhraseChip{background:rgba(58,167,232,.13);color:var(--text);border:1px solid rgba(58,167,232,.3);border-radius:5px;padding:5px;font-size:12px;}
.scPhraseInsert{display:flex;gap:4px;flex-wrap:wrap;margin-top:0;}
.scPhraseInsert button{font-size:11px;padding:4px 6px;}
#scVisualPicker{display:flex;flex-wrap:wrap;gap:5px;margin-top:0;}
#scVisualPicker button{min-width:40px;min-height:40px;font-size:19px;padding:0;display:flex;align-items:center;justify-content:center;}
#scVisualPicker button[aria-pressed=true]{border-color:var(--accent);background:rgba(58,167,232,.15);}
#scVisualPicker button:last-child{font-size:12px;min-width:auto;padding:0 10px;}
#scCustomVisual{margin-top:8px;}
#scCustomVisual input{width:100%;margin:6px 0;}
#scCustomVisual small{color:var(--muted);}

/* Accordions */
.scAccordion{border:1px solid var(--line);border-radius:10px;background:var(--panel2);overflow:hidden;}
.scAccordion summary{display:flex;flex-direction:column;gap:2px;padding:12px 14px;cursor:pointer;list-style:none;font-size:13px;}
.scAccordion summary::-webkit-details-marker{display:none;}
.scAccordion summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.scAccordionTitle{font-weight:600;}
.scAccordionSummary{font-weight:400;color:var(--muted);font-size:12px;}
.scAccordion[open] summary{padding-bottom:10px;border-bottom:1px solid var(--line);}
.scAccordionBody{padding:14px;display:flex;flex-direction:column;gap:14px;}
.scSectionLead{font-size:13px;color:var(--muted);margin:0;}

/* Effect chips */
.scEffectGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.scEffectChip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:10px;padding:10px 4px;min-height:66px;background:var(--panel);cursor:pointer;transition:border-color .08s,background .08s;}
.scEffectChip input{position:absolute;opacity:0;width:0;height:0;}
.scEffectChip input:checked+span{border-color:var(--accent);background:rgba(58,167,232,.13);}
.scEffectChip:has(input:checked){border-color:var(--accent);background:rgba(58,167,232,.07);}
.scEffectChip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.scEffectChip:hover{background:var(--panel2);}
.scEffectIcon{font-size:20px;line-height:1;}
.scEffectLabel{font-size:11px;color:var(--muted);}
.scEffectChip:has(input:checked) .scEffectLabel{color:var(--text);}

/* Effect inline config */
.scEffectConfig{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);}
.scEffectConfig>label{font-weight:600;}

/* Icon picker inside effect */
.scEffectIconPicker{display:flex;flex-wrap:wrap;gap:5px;}
.scEffectIconPicker button{min-width:38px;min-height:38px;font-size:18px;padding:0;display:flex;align-items:center;justify-content:center;}
.scEffectIconPicker button[aria-pressed=true]{border-color:var(--accent);background:rgba(58,167,232,.15);}

/* Color swatches */
.scSwatches{display:flex;flex-wrap:wrap;gap:6px;}
.scSwatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25);transition:transform .08s,border-color .08s;}
.scSwatch:hover{transform:scale(1.1);}
.scSwatch.sel{border-color:var(--text);box-shadow:0 0 0 1px var(--panel),0 0 0 3px var(--accent);}
.scSwatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* El input nativo solo se abre desde el botón «+» de los swatches: no es UI principal. */
.scColorNative{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;padding:0;border:0;overflow:hidden;}
.scColorNative::-webkit-color-swatch-wrapper{padding:0;}
.scColorNative::-webkit-color-swatch{border:2px solid var(--line);border-radius:50%;}
.scColorNative::-moz-color-swatch{border:2px solid var(--line);border-radius:50%;}
.scColorNative:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.scColorAdd{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px dashed var(--line);color:var(--muted);font-size:16px;background:transparent;cursor:pointer;}
.scColorAdd:hover{border-color:var(--accent);color:var(--accent);}
.scColorAdd:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.scEventPreview{align-self:start;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;min-width:0;position:sticky;top:0;}
.scEventPreview h3{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-top:0;}
#scPreviewDiagram{display:flex;align-items:center;justify-content:center;min-height:110px;gap:4px;position:relative;}
.scPreviewNode{border:1px solid var(--line);padding:12px 8px;border-radius:8px;font-size:12px;display:flex;flex-direction:column;align-items:center;}
.scPreviewPath{position:relative;flex:1;min-width:45px;border-bottom:1px solid var(--muted);}
.scPreviewToken{font-size:23px;display:inline-block;}
.scPreviewPath .scPreviewToken{position:absolute;left:30%;top:-16px;background:var(--panel2);}
.scPreviewPath.animate .scPreviewToken{animation:scTravel 1.1s ease-in-out;}
.scPreviewPath.animate.fast .scPreviewToken{animation-duration:.5s;}
.scPreviewPath.animate.normal .scPreviewToken{animation-duration:1.1s;}
.scPreviewPath.animate.slow .scPreviewToken{animation-duration:1.8s;}
.scPreviewNode.animate{animation:scAppear 1.1s ease-in-out;}
.scPreviewNode.animate.fast{animation-duration:.5s;}
.scPreviewNode.animate.normal{animation-duration:1.1s;}
.scPreviewNode.animate.slow{animation-duration:1.8s;}
.scPreviewNode.unavailable{border-style:dashed;opacity:.55;}
.scPreviewNode.highlight{box-shadow:0 0 0 3px var(--active);}   /* FLUYO-018.15: el mismo oliva que «Resaltar» en el lienzo */
.scPreviewNode.dim{opacity:.45;}
.scPreviewNode.fillColor{background:var(--effect-color,rgba(58,167,232,.18));}
.scPreviewStack{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;}
.scPreviewMessage{display:block;max-width:180px;padding:3px 8px;border-radius:5px;background:var(--message-color,#d0576a);color:#fff;text-align:center;overflow-wrap:anywhere;}
.scPreviewMessage.center{margin-top:6px;}
.scPreviewCanvas{display:block;width:100%;height:110px;border-radius:8px;border:1px solid var(--line);}
.scFlowLook{border:0;padding:0;min-width:0;}
.scFlowLead{margin:0 0 4px;font-size:13px;font-weight:600;}
.scFlowField{border:0;padding:0;margin:10px 0 0;min-width:0;}
.scFlowField legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:5px;}
.scVisualSeg span{display:flex;align-items:center;gap:6px;}
.scVisualSeg .scSizeDot{font-style:normal;line-height:1;color:var(--muted);}
.scVisualSeg .s1{font-size:9px;}.scVisualSeg .s2{font-size:13px;}.scVisualSeg .s3{font-size:18px;}
.scVisualSeg input:checked+span .scSizeDot,.scVisualSeg input:checked+span .scMiniCurve{color:var(--accent);}
.scMiniCurve{width:28px;height:12px;flex:none;color:var(--muted);}
.scFlowMore{margin-top:10px;}
.scFlowMore>summary{cursor:pointer;font-size:12px;color:var(--muted);padding:4px 0;}
.scFlowMore>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.scMsgField{border:0;padding:0;margin:8px 0 0;min-width:0;}
.scMsgField legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:4px;}
.scSymbolUse{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.scSymbolUseValue{font-size:22px;line-height:1;}
.scLinkBtn{background:none;border:0;color:var(--accent);padding:4px 2px;cursor:pointer;text-decoration:underline;font-size:12px;}
#scEventPreview{font-size:14px;line-height:1.6;overflow-wrap:anywhere;}
#scEventError{color:var(--attention);font-size:13px;padding-top:4px;}

.scDetailsDialog{width:min(580px,calc(100vw - 32px));}
.scBehaviorRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;}
.scBehaviorRow span{min-width:0;overflow-wrap:anywhere;}
.scDialog .hint{font-size:12px;color:var(--muted);line-height:1.5;}
.scUse{display:block;width:100%;text-align:left;margin-bottom:6px;}
#panelScenarios button:focus-visible,.scDialog button:focus-visible,.scPopover button:focus-visible,.scPhrase input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@keyframes scTravel{from{left:0;opacity:.3;}to{left:80%;opacity:1;}}
@keyframes scAppear{0%{transform:scale(.95);opacity:.3;}60%{transform:scale(1.05);}100%{transform:scale(1);opacity:1;}}
@media(min-width:1600px){aside.scenariosOpen{width:352px;flex-basis:352px;}.scEventLibrarySection{flex-basis:268px;}}
@media(max-height:650px){#panelScenarios{gap:10px;}.scEventLibrarySection{flex-basis:142px;min-height:84px;}.scLibraryHint{display:none;}.scDialog>header,.scDialog>footer{padding:12px 20px;}}
@media(max-width:720px){
  .scEventColumns{grid-template-columns:1fr;}
  .scEventPreview{position:sticky;top:0;z-index:3;order:-1;min-height:auto;padding:8px 10px;box-shadow:0 6px 10px -6px rgba(0,0,0,.35);}
  .scEventPreview h3,.scEventPreview .hint,#scEventPreview{display:none;}
  .scEventPreview #scPreviewPlay{margin-top:6px;padding:4px 10px;font-size:12px;}
  #scPreviewDiagram{min-height:80px;}
  .scPreviewCanvas{height:76px;}
  .scDialogBody{padding:16px;}
  .scDialog>header,.scDialog>footer{padding:12px 16px;}
  #scPlacementBar{flex-wrap:wrap;}
  aside.scenariosOpen{width:280px;flex-basis:280px;}
}
@media(max-width:420px){
  .scEffectGrid{grid-template-columns:repeat(2,1fr);}
  .scSegmented{gap:4px;}
  .scSegmented span{padding:7px 10px;font-size:12px;}
}
@media(prefers-reduced-motion:reduce){.scPreviewPath.animate .scPreviewToken,.scPreviewNode.animate{animation:none;}}
.scHeader{display:block;padding:0;border:0;background:transparent;}
.scDialog{margin:auto;}
.scHeaderRow{width:100%;}

.scTogether{position:relative;}
.scTogether::before{content:"●";position:absolute;left:-20px;top:4px;width:14px;text-align:center;background:var(--panel);color:var(--text);font-size:11px;}

/* Mobile fullscreen sheet */
@media(max-width:560px), (max-height:500px){
  .scEventDialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0;}
  .scEventDialog[open]{display:flex;}
  .scEventDialog::backdrop{background:var(--scrim);}
}

/* ===== FLUYO-012: Historia manipulable, duración visual, transiciones ===== */
#scStoryboard{position:relative;}
.scHandle{flex:none;align-self:flex-start;width:28px;min-width:28px;height:32px;margin-top:4px;padding:0;border:0;background:transparent;color:var(--muted);opacity:.35;cursor:grab;touch-action:none;border-radius:4px;transition:opacity .15s ease;}
.scHandle::before{content:"";display:block;width:8px;height:14px;margin:0 auto;background:radial-gradient(circle,currentColor 1.1px,transparent 1.5px) 0 0/4px 5px;}
.scStoryRow:hover .scHandle,.scHandle:focus-visible{opacity:.85;}
.scHandle:active{cursor:grabbing;}
.scStoryRow.scDragSource{opacity:.4;}
.scDragging,.scDragging *{cursor:grabbing;user-select:none;}
.scStoryGhost{padding:6px 12px;opacity:.95;}
.scDropLine{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--accent);pointer-events:none;z-index:5;transform:translateY(-1px);}
.scDropLine span{position:absolute;right:4px;top:-9px;padding:0 6px;font-size:10px;line-height:16px;background:var(--panel);color:var(--accent);border-radius:8px;}
.scDropLine[data-kind="join"]{border-top-style:dashed;margin-left:12px;}
.scStoryRow{transition:background-color .25s ease,opacity .15s ease;}
.scStatusMark{transition:color .25s ease;}
.scStepDetail{animation:scFadeIn .25s ease;}
@keyframes scFadeIn{from{opacity:0}to{opacity:1}}
.scDurationCustom{display:flex;align-items:center;gap:8px;margin-top:8px;}
.scDurationCustom input{width:84px;}
.scDurationField .hint{margin:6px 0 0;}

@media (prefers-reduced-motion:reduce){
  .scStoryRow,.scStatusMark,.scHandle{transition:none;}
  .scStepDetail{animation:none;}
}

/* ===================== FLUYO-018.12/13/14b — Chrome adaptable =====================
   Va al final a propósito: estas reglas tienen que ganar a las de tamaño de las secciones anteriores sin !important.
   018.12 decidió DÓNDE vive cada control por anchura (placeChrome, js/ui.js); 018.13 le dio el aspecto del sistema;
   018.14b separa cabecera, modo Historia, panel por grupos y hojas móviles. */
:root{ --bb-h:52px; }

/* ---- Hoja: su cabecera solo existe donde el panel es una hoja (≤700 px) ---- */
.sheetHead{display:none;}
.sheetTitle{font:400 var(--fs-title)/1.2 var(--font-serif); color:var(--ink);}

/* ---- Menús de la cabecera: «Lienzo» (documento) y «Más» (archivo, interfaz, proyecto) ----
   Superficie de menú del sistema, por secciones con rótulo. Lo destructivo (Limpiar página) va último y en terracota. */
.moreMenu{
  position:fixed; z-index:70; right:8px; top:56px;
  width:min(300px, calc(100vw - 16px)); max-height:calc(100dvh - 72px); overflow:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; padding:4px 6px 6px;
}
.canvasMenu{width:min(296px, calc(100vw - 16px));}
.moreTools{display:flex; flex-direction:column; align-items:stretch; gap:1px; padding:4px 0 8px; border-bottom:1px solid var(--rule);}
.hdrTools, .canvasTools{display:flex; flex-direction:column; align-items:stretch; gap:1px;}
.canvasTools{padding:2px 0 4px;}
.moreTools > .canvasTools{margin-top:6px; padding-top:6px; border-top:1px solid var(--rule);}
.moreMenu .hdrTools > button, .moreMenu .moreTools > button{
  justify-content:flex-start; width:100%; min-height:36px; padding:0 10px; gap:10px;
  background:transparent; border-color:transparent; color:var(--ink); font-weight:400;
}
.moreMenu .hdrTools > button:hover, .moreMenu .moreTools > button:hover{background:var(--hover-veil); border-color:transparent;}
.moreMenu .hdrTools > button .ic, .moreMenu .moreTools > button .ic{color:var(--ink-3);}
.moreMenu .hdrTools > button .menuHint{margin-left:auto; border:0; padding:0; color:var(--ink-3); font-weight:400;}
.moreTools #btnExport, .moreTools #btnExport:hover{color:var(--ink);}
.moreTools #btnClear, .moreTools #btnClear .ic{color:var(--attention);}
.moreTools #btnClear:hover{background:var(--attention-veil);}
.fieldRow{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:0 4px 0 10px; color:var(--ink); font:400 var(--fs-ui)/1.2 var(--font-mono);}
.fieldRow select{width:168px; min-height:34px;}
.moreMenu .hdrOpt{display:flex; align-items:center; gap:10px; min-height:38px; padding:0 10px; border-radius:var(--r-sm); color:var(--ink); cursor:pointer; font:400 var(--fs-ui)/1.2 var(--font-mono);}
.moreMenu .hdrOpt:hover{background:var(--hover-veil);}
.moreMenu .hdrOpt .ic{color:var(--ink-3);}
.moreMenu .hdrOpt .lbl{margin-right:auto;}
.moreMenu .hdrOpt:has(input:focus-visible){outline:var(--focus); outline-offset:-2px;}
.moreMenu #lblBg input[type=color]{width:30px; height:24px;}
.uiSection{padding-bottom:6px; border-bottom:1px solid var(--rule);}
.moreLinks{padding-top:4px;}
#siteLinks{display:grid; grid-template-columns:1fr 1fr; gap:1px;}
#socialLinks{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;}
.moreLinks .ossLink{align-items:flex-start;}
.moreLinks .ossLink .ic{margin-top:2px;}
.moreLinks .ossText{display:flex; flex-direction:column; gap:2px; min-width:0;}
.moreLinks .ossText b{font-weight:500;}
.moreLinks .ossOut{margin-left:auto; width:14px; height:14px;}
.moreNote{padding:6px 10px 4px; margin:0;}

/* ---- Barra táctil de la selección: pieza flotante sobre el lienzo ---- */
.touchBar{
  position:absolute; top:calc(var(--frame-inset) + 10px); left:50%; transform:translateX(-50%); z-index:31;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px;
  width:max-content; max-width:calc(100% - 16px);
  background:var(--surface-raised); border:1px solid var(--rule-2); border-radius:var(--r-md); padding:4px;
  box-shadow:var(--shadow-float);
}
.touchBar button{min-height:var(--ctl-h-touch); padding:0 12px;}
.touchBar button.btnGhost .ic{color:var(--ink-3);}
.tbMsg{font:500 var(--fs-label)/1.2 var(--font-mono); color:var(--ink-2); padding:0 10px;}
.tbMsg:empty{display:none;}
body.presenting .touchBar, body.presenting .moreMenu, body.presenting .pageMenu{display:none !important;}

/* ---- Pestañas de página: menú de la activa ----
   FLUYO-018.18 (D11): el ▾ de la activa se ve con cualquier puntero: es la puerta a «Renombrar…» y «Eliminar página» (ya no
   hay ✕ en las pestañas). El doble clic con ratón abre el mismo renombrado en línea. */
footer .tab .pgMore{display:none;}
footer .tab.active .pgMore{display:inline-flex;}
footer .tab .pgMore:focus-visible{outline:var(--focus); outline-offset:2px;}
.pageMenu{min-width:240px; padding:6px;}
.pageMenu .scMenuHead{font:400 15px/1.3 var(--font-serif); padding:6px 10px 4px;}
.pageMenu label{display:flex; flex-direction:column; gap:6px; margin:6px 4px; font-size:var(--fs-label); color:var(--ink-3);}
.pageMenu input{width:100%;}
.pageMenu #pageNameSave{margin:4px 4px 2px; width:calc(100% - 8px); justify-content:center; background:var(--surface-raised); border:1px solid var(--rule-2);}
.pageMenu .pmError{color:var(--attention); font-size:var(--fs-label); margin:4px 10px 0;}
/* Lista de páginas del selector móvil (FLUYO-018.18, D10): índice mono + nombre serif; la activa en oliva. */
.pageMenu.pageList{max-height:min(70dvh, 520px); overflow:auto; min-width:260px;}
.pageMenu .pgItem{display:flex; align-items:center; gap:10px; min-height:var(--row-h-touch, 40px); width:100%; text-align:left;}
.pageMenu .pgItem .pgIdx{font:500 var(--fs-micro)/1 var(--font-mono); letter-spacing:.04em; color:var(--ink-off); flex:none;}
.pageMenu .pgItem .pgName{font:400 15px/1.25 var(--font-serif); color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pageMenu .pgItem.active{background:var(--active-veil);}
.pageMenu .pgItem.active .pgIdx{color:var(--active);}
.pageMenu .pgItem.active .pgName{color:var(--ink);}
.pageMenu .pgNew{color:var(--ink-2);}

/* ---- Barra de modos (Historias, Presentar): solo ≤700 px ---- */
.modeBar{display:none;}
.sheetClose{display:none;}

/* ===================== Modo Historia (FLUYO-018.14b, B1) =====================
   Un modo de toda la interfaz, no una pestaña: el rail se va (se narra, no se construye), la superficie lateral
   pasa a ser la de la Historia y la cabecera marca «Historias» en el conmutador. La salida es «Volver a editar». */
body.storyMode .rail{display:none;}
body.storyMode .stage{padding-left:var(--frame-inset);}
body.storyMode #bottomBar > footer{padding-left:8px;}
#btnStoryExpand{display:none;}
.storyBar{display:flex; align-items:center; gap:6px; min-height:40px; margin:0 0 8px; padding:0 0 8px; border-bottom:1px solid var(--rule);}
.storyKicker{display:inline-flex; align-items:center; gap:7px; margin-right:auto; font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--active);}
.storyKicker .ic{width:14px; height:14px;}
#panelScenarios .storyBar button{min-height:var(--ctl-h);}
#btnStoryExit{display:inline-flex; align-items:center; gap:7px; padding:0 10px; color:var(--ink); font-weight:500; border-color:var(--rule-2); background:var(--surface-raised);}
#btnStoryExit:hover{background:var(--surface-hover); border-color:var(--rule-hover);}
#btnStoryExit .ic{width:14px; height:14px;}
/* Encabezado de la Historia: nombre en serif, botones del sistema a tamaño de control. */
#panelScenarios #scStoryAdd, #panelScenarios #scScenarioMenu{width:var(--ctl-h); min-width:var(--ctl-h); min-height:var(--ctl-h); padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:0; color:var(--ink-2);}
#panelScenarios #scStoryAdd::before, #panelScenarios #scScenarioMenu::before{content:""; width:14px; height:14px; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;}
#scStoryAdd{--m:var(--mask-plus);}
#scScenarioMenu{--m:var(--mask-more);}
/* Transporte: Reproducir es la acción primaria del modo; Detener/Terminar, secundaria. Los glifos ▶ ■ ↻ ▾ siguen en
   el texto (lo leen los tests y el lector de pantalla) y se pintan con el trazo del sistema (.glyph). */
.glyph{display:inline-block; width:12px; height:12px; flex:none; font-size:0; line-height:0; vertical-align:middle; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;}
.g-play{--m:var(--mask-play);}
.g-stop{--m:var(--mask-stop);}
.g-replay{--m:var(--mask-replay);}
.g-chev{--m:var(--mask-chevron); color:var(--ink-3);}
#scScenarioTitle .glyph{margin-left:6px;}
/* FLUYO-STORIES-2.0 S2b: el nombre de la Historia en línea ocupa el sitio del título (que se oculta mientras se edita) */
#scScenarioTitle[hidden]{display:none !important;}
#scStoryNameInput{flex:1;min-width:0;min-height:var(--ctl-h);box-sizing:border-box;padding:2px 8px;font:400 var(--fs-title)/1.25 var(--font-serif);color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:6px;}
.glyphText{white-space:nowrap;}
/* FLUYO-018.18: el transporte. Reproducir (primaria) · Pausar/Reanudar · momento anterior/siguiente · Detener a la derecha. */
.scTransport{display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap;}   /* en la columna de tableta (dedo, 44 px) Detener baja a otra fila: nunca se sale */
.scPlaybackControls{gap:6px; flex-wrap:nowrap;}
#scRun, #scReset, #scPause{min-height:var(--ctl-h); display:inline-flex; align-items:center; gap:8px; font-weight:500;}
#scRun{padding:0 16px;}
#scReset{padding:0 12px; margin-left:auto;}
#scPause{padding:0 12px; min-width:104px; justify-content:center;}
#scPause .ic, #psPause .ic{width:14px; height:14px;}
#scPrev, #scNext{width:var(--ctl-h); min-width:var(--ctl-h); min-height:var(--ctl-h); padding:0; display:inline-flex; align-items:center; justify-content:center;}
#scPrev .ic, #scNext .ic{width:16px; height:16px;}
#scPrev[hidden], #scNext[hidden], #scPause[hidden], #scReset[hidden]{display:none;}
/* durante la reproducción la línea de estado («Reproduciendo · 1.5 s») sobra: el momento se lee sobre el lienzo */
body.scPlaybackOn #scStatus{display:none;}
/* FLUYO-018.18 (D4): el momento activo, sobre el lienzo y en UNA línea de alto fijo (no crece con el texto). Material
   inverso, como el encabezado de Present: rótulo de estado en mono, momento en serif, progreso en mono. Lo coloca
   scPlaceNow (arriba de la zona libre o, si el destino del momento queda debajo, al pie). No recibe el puntero. */
.scNow{position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:6; pointer-events:none;
  display:flex; align-items:center; gap:10px; max-width:min(calc(100% - 24px), 560px); min-height:36px; padding:0 14px;
  background:rgba(22,21,15,.86); color:#F2EDE3; border:1px solid rgba(242,237,227,.16); border-radius:var(--r-pill); box-shadow:var(--shadow-float);}
.scNow[hidden]{display:none;}
body.presenting .scNow{display:none;}
.scNowKicker{display:flex; align-items:center; gap:7px; flex:none; font:500 var(--fs-micro)/1 var(--font-mono); letter-spacing:var(--track-micro); text-transform:uppercase; color:#C9D2AE;}
.scLive{display:inline-block; width:7px; height:7px; border-radius:50%; background:#C9D2AE; animation:scLive 1.4s ease-in-out infinite;}
.scNow.done .scLive, .scNow.paused .scLive{animation:none; opacity:.55;}
.scNowCaption{font:400 15px/1.2 var(--font-serif); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* PRODUCT-NARRATION-001 (decisión 258, D-PO-2): si el momento lleva una frase del autor (.narrated, editor-scenarios.js), no se corta:
   pasa a otra línea (lo que cabe sigue midiendo 36 px) y el rótulo mide lo que su contenido (width:max-content, como #presentStory:
   con left:50% el ajuste al contenido solo tendría medio lienzo). Sin frase, el rótulo de siempre (una línea, «…»). */
.scNow:has(.scNowCaption.narrated){width:max-content;}
.scNowCaption.narrated{overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; padding:6px 0;}
.scNowCaption:empty{display:none;}
.scNowProgress{flex:none; font:500 var(--fs-label)/1 var(--font-mono); color:rgba(242,237,227,.62); letter-spacing:.04em; font-variant-numeric:tabular-nums;}
.scNowProgress:empty{display:none;}
/* FLUYO-GROWTH-FOUNDATION-001 — La entrada del primer minuto (js/entry.js). Una tarjeta de papel en el centro del lienzo vacío,
   del mismo material que los modales (.card) pero sin velo ni bloqueo: el lienzo sigue a la vista y tocarlo la cierra. Dos
   salidas apiladas, cada una con su línea de qué pasa al elegirla; la de «ver en marcha» es la destacada (button.primary). */
.entryCard{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:7; box-sizing:border-box;
  width:min(400px, calc(100% - 32px)); padding:22px 22px 20px; background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:var(--r-lg); box-shadow:var(--shadow-menu);}
.entryCard[hidden]{display:none;}
.entryTitle{font:400 21px/1.25 var(--font-serif); color:var(--ink); margin:0 0 16px;}
.entryActions{display:flex; flex-direction:column; gap:8px;}
.entryOpt{display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; height:auto; min-height:var(--ctl-h-touch, 44px);
  padding:10px 14px; text-align:left; white-space:normal;}
.entryLbl{font:500 var(--fs-ui)/1.25 var(--font-mono);}
.entrySub{font:400 var(--fs-label)/1.4 var(--font-mono); opacity:.78;}
.entryOpt:not(.primary) .entrySub{color:var(--ink-3); opacity:1;}
body.presenting .entryCard{display:none;}
/* en el teléfono el momento manda: el estado queda como el punto (vivo / quieto en pausa; el botón ya dice Pausar o Reanudar)
   y su texto, para lectores de pantalla */
@media (max-width:480px){ #scNowLabel{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;} }
/* Reproduciendo, una fila de la línea de tiempo es un salto a su momento (D6). */
.scStoryRow.scSeekable{cursor:pointer;}
.scStoryRow.scSeekable:hover{background:var(--hover-veil);}
@keyframes scLive{0%,100%{opacity:1;} 50%{opacity:.3;}}
/* Mientras se reproduce, el marco del lienzo lo dice (filete oliva); los colores de la reproducción no cambian (D3). */
body.scPlaybackOn #wrap::after{box-shadow:inset 0 0 0 2px var(--active), inset 0 10px 22px -18px rgba(0,0,0,.55);}
/* Marcas de la línea de tiempo: trazo del sistema en vez de glifos (○ ▶ ✓ ✕ ● ├ └). */
.scStoryRow .scStatusMark{width:14px; height:14px; top:11px; font-size:0; display:flex; align-items:center; justify-content:center;}
.scStatusMark::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3);}
.scStatusMark[data-mark="pending"]::before{background:transparent; box-shadow:inset 0 0 0 1.4px var(--ink-3); width:8px; height:8px;}
.scStatusMark[data-mark="active"]::before{background:var(--active); width:8px; height:8px; box-shadow:0 0 0 3px var(--active-veil);}
.scStatusMark[data-mark="completed"]::before, .scStatusMark[data-mark="success"]::before{border-radius:0; width:11px; height:11px; background:var(--active); -webkit-mask:var(--mask-check) center/contain no-repeat; mask:var(--mask-check) center/contain no-repeat;}
.scStatusMark[data-mark="failed"]::before{border-radius:0; width:10px; height:10px; background:var(--attention); -webkit-mask:var(--mask-x) center/contain no-repeat; mask:var(--mask-x) center/contain no-repeat;}
.scStatusMark[data-mark="branch"]::before, .scStatusMark[data-mark="branchEnd"]::before{border-radius:0; width:8px; height:1.4px; background:var(--rule-hover); margin-left:6px;}
.scTogether::before{content:""; top:9px; left:-16px; width:6px; height:6px; border-radius:50%; background:var(--ink-3);}
/* Nombres de evento en serif (son conceptos); frases, tiempos y estados siguen en mono. */
.scEventPlace span:last-child, .scStoryRow .scStepPrimary{font-family:var(--font-serif); font-size:14px;}
.scStoryRow .scStepPrimary{line-height:1.35;}
/* FLUYO-018.18 (D12): «Dirección» dentro de Trazo — puntas y sentido de los puntos. Tres opciones a todo el ancho. */
.pgSub{margin:10px 0 2px; font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:var(--track-micro); text-transform:uppercase; color:var(--ink-3);}
#rowFlow .lblText{font:400 var(--fs-label)/1.3 var(--font-mono); color:var(--ink-2);}
.flowSeg{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); width:100%;}
.flowSeg > .segBtn{white-space:normal; text-align:center; line-height:1.2; padding:4px 6px; min-height:var(--ctl-h);}
.scMore{font-size:0; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-3); border-radius:var(--r-sm);}
.scMore::before{content:""; width:14px; height:14px; background:currentColor; -webkit-mask:var(--mask-more) center/contain no-repeat; mask:var(--mask-more) center/contain no-repeat;}
.scMore:hover{background:var(--hover-veil); color:var(--ink);}

/* ---- Puntero grueso (tabletas y móviles): objetivos de 40 px como mínimo ----
   Se decide por el tipo de puntero, no por el ancho: una tableta de 768 px se usa con el dedo y un portátil estrecho,
   con ratón. --ctl-h ya vale 40 px aquí (css/system.css); esto cubre lo que no es un control del sistema. */
@media (pointer:coarse){
  footer .tab{min-height:38px; height:auto;}
  #pagesBar > button{min-width:40px; min-height:40px;}
  .moreMenu .hdrTools > button, .moreMenu .moreTools > button, .moreMenu .hdrOpt, .fieldRow{min-height:var(--ctl-h-touch);}
  .moreMenu select{min-height:var(--ctl-h-touch);}
  footer .tab .x, footer .tab .pgMore{width:40px; height:40px;}
  footer .tab{min-height:40px;}
  #pagesBar > .pgAdd{width:var(--ctl-h); min-width:var(--ctl-h);}   /* 018.17: «＋» es acción, 44 con dedo */
  #panelProperties input[type=color]{width:44px; height:var(--ctl-h-touch);}
  #panelProperties input[type=range]{height:40px;}
  #panelProperties .row{min-height:var(--ctl-h-touch);}
  #panelProperties .row:not([data-stack]) > label[for]{min-height:var(--ctl-h-touch);}
  #panelProperties button.swMore{width:var(--ctl-h-touch); height:var(--ctl-h-touch); min-height:var(--ctl-h-touch);}
  #panelProperties .pseg{grid-auto-flow:row; grid-template-columns:repeat(auto-fit, minmax(var(--ctl-h-touch), 1fr));}
  #panelProperties .seg > .segBtn{min-height:var(--ctl-h-touch);}
  #panelProperties .row.inlineSeg > .pseg{flex:0 0 auto; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(var(--ctl-h-touch), auto);}
  .boldTog{width:var(--ctl-h-touch); height:var(--ctl-h-touch);}
  #panelProperties .typoRow input[type=number]{width:76px;}
  .orderMenu .menuItem{min-height:var(--ctl-h-touch);}
  .seg > .segBtn{min-height:var(--ctl-h);}
  input[type=color]{width:40px; height:34px;}
  .moreMenu #lblBg input[type=color]{width:40px; height:32px;}
  #btnBgClear{width:var(--ctl-h-touch); height:var(--ctl-h-touch);}
  #bottomBar .viewCtl .iconBtn{width:40px; min-width:40px;}
  /* Historias con el dedo: menús, esperas, asas, eventos y frases a 40 px (018.11, P2-7). */
  .scMore{min-width:40px; min-height:40px;}
  .scDelay{min-height:40px;}
  .scHandle{width:40px; min-width:40px; height:40px; margin-top:0; opacity:.7;}
  .scEventPlace{min-height:44px;}
  .scStorySentence{min-height:40px;}
  .scStoryRepair{min-height:var(--row-h-touch); padding:0 10px;}
  #scEventNew, #scPaletteToggle{min-height:40px;}
  .scStoryRow .scStatusMark{top:13px;}
}

/* ---- Tableta y portátil estrecho (≤1100 px): una fila ----
   «Lienzo» y Exportar se quedan en icono (aria-label y tooltip dicen qué son). */
@media (max-width:1100px){
  body > header > #btnCanvas .lbl, body > header > #btnCanvas .icChev, body > header > #btnExport .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  body > header > #btnCanvas, body > header > #btnExport{width:var(--ctl-h); min-width:var(--ctl-h); padding:0;}
  body > header > .hdrDivD{display:none;}
}
@media (min-width:701px) and (max-width:860px){
  body > header > #btnShare .lbl, .modeSwitch .segBtn .ic{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  body > header > #btnShare{width:var(--ctl-h); min-width:var(--ctl-h); padding:0;}
  body > header .logo{font-size:19px;}   /* FLUYO-BRAND-RUTA-001: el par Ruta a la escala del teléfono; a 768 px táctil no cabía (8 px) */
  body > header .logo .still{display:inline;} body > header .logo :is(.loop, .loop *){display:none; animation:none;}   /* donde iban sin puntos: el símbolo fijo */
}
/* FLUYO-BRAND-RUTA-001: tableta vertical táctil por debajo de 768 px (iPad mini, 744). El par Ruta mide 25 px más que «fluyo» y la
   cabecera ya no cabía (la base ya desbordaba por debajo de 744). Sin filetes, como en el teléfono (34 px); por debajo de 744,
   Presentar se queda además en icono (su nombre sigue en el texto oculto y el title), como Compartir en esta franja. «Más» siempre a la vista. */
@media (min-width:701px) and (max-width:767px) and (pointer:coarse){
  body > header > .hdrDiv{display:none;}
}
@media (min-width:701px) and (max-width:743px) and (pointer:coarse){
  body > header > #btnPresent .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  body > header > #btnPresent{width:var(--ctl-h); min-width:var(--ctl-h); padding:0;}
}

/* ---- Móvil (≤700 px) ---- */
/* FLUYO-018.19: también el teléfono en apaisado (táctil y ≤ 500 px de alto): la misma gramática del teléfono. Lo que cambia en
   apaisado (hojas a la derecha, sin barra inferior, rail vertical) está al final del archivo. */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  body > header{gap:4px; padding:0 6px 0 12px; min-height:52px;}
  body > header .logo .still{display:inline;} body > header .logo :is(.loop, .loop *){display:none; animation:none;}
  body > header > .hdrDiv, .modeSwitch, body > header > #btnCanvas{display:none;}
  .hdrHistory{gap:2px;}
  footer{padding-left:8px;}
  .viewCtl{display:none;}
  /* Rail en fila: solo iconos, a 40 px. */
  .rail button{width:40px; min-width:40px; height:40px; padding:0;}
  .rail button svg{width:18px; height:18px;}

  /* Barra inferior: páginas a la izquierda, modos a la derecha, altura fija porque la hoja se apoya en ella. */
  #bottomBar{height:var(--bb-h); gap:4px;}
  #bottomBar > footer{padding:0 6px; align-items:center;}
  footer .tab{min-height:40px; padding:0 0 0 10px;}
  #pagesBar > button{min-width:40px; min-height:40px;}
  .modeBar{display:flex; align-items:center; gap:2px; padding:0 6px 0 0; flex-shrink:0;}
  .modeBar button{min-height:var(--ctl-h); padding:0 10px;}
  .modeBar button .ic{width:14px; height:14px;}
  #btnStories[aria-expanded="true"]{background:var(--active-veil); border-color:var(--active-rule); color:var(--active);}
  /* En modo Historia la barra inferior lleva el modo y Presentar; ⚙ (Propiedades) no tiene sentido mientras se narra. */
  body.storyMode > header > #btnPanel{display:none;}

  /* El panel como hoja inferior entre la cabecera y la barra de páginas: deja ver el lienzo por encima y no tapa a
     quien la abre (⚙ arriba, Historias abajo); lleva su propio cierre y se cierra tocando el vacío del lienzo (B8). */
  aside, aside.scenariosOpen{
    display:flex; position:fixed; left:0; right:0; top:auto; bottom:var(--bb-h);
    width:auto; flex-basis:auto; height:clamp(220px, 40dvh, 360px); z-index:45;
    border-top:1px solid var(--rule-2); border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:10px 16px 16px; box-shadow:var(--shadow-sheet);
    transform:translateY(calc(100% + var(--bb-h) + 12px)); visibility:hidden;
    transition:transform .2s ease, height .2s ease, visibility 0s linear .2s;
  }
  /* asa de la hoja: indica que es una pieza que sube y baja */
  aside::before{content:""; position:absolute; top:5px; left:50%; width:36px; height:3px; margin-left:-18px; border-radius:2px; background:var(--rule-2);}
  body.panelOpen aside{transform:none; visibility:visible; transition:transform .2s ease, height .2s ease;}
  /* Cabecera de la hoja de Propiedades: título y cerrar, pegada arriba mientras se desplaza. */
  body:not(.storyMode) .sheetHead{display:flex; top:-10px; margin:-2px -4px 2px; padding:4px 0 6px 4px;}
  .sheetHead .sheetClose{display:inline-flex; min-width:var(--ctl-h-touch); color:var(--ink);}
  .selHead .icClose{display:inline;}
  .selHead .icFold{display:none;}

  /* ===== Hoja de Historias (FLUYO-018.17, D2/D3): cuatro estados, body[data-story] = compact | expanded | playing =====
     La hoja mide lo que mide su contenido (height:auto). El tope no es un porcentaje elegido: es lo que el lienzo necesita
     para seguir siendo útil (ver entero y legible el destino del paso seleccionado, con margen para el dedo, y poder
     desplazarlo): --canvas-useful. Compacta = mando (dos filas); ampliada = taller (fichas de eventos y la línea de tiempo,
     ÚNICO desplazable); reproduciendo = transporte + momento en curso. Nada se encoge para ganar lienzo. */
  :root{ --canvas-useful:max(300px, 40dvh); }
  aside.scenariosOpen{height:auto; max-height:calc(100dvh - 52px - var(--bb-h) - var(--canvas-useful)); padding-top:12px; overflow:hidden; gap:10px;}
  body.panelOpen.scPlaybackOn aside.scenariosOpen{height:auto;}
  /* La cabecera de la hoja es una rejilla de dos filas: A = Historia ▾ · ⋯ · Ampliar (reproduciendo: el momento en curso);
     B = Reproducir/Detener/Repetir · «Volver a editar». Las envolturas pasan a display:contents: mismos nodos, mismos ids. */
  body.storyMode .scHeader{display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"title menu expand" "run exit exit"; gap:8px 6px; align-items:center;}
  body.storyMode .storyBar, body.storyMode .scHeaderRow, body.storyMode .scTransport{display:contents;}
  /* FLUYO-018.18: reproduciendo (o en pausa, o terminada), la fila A es el transporte (anterior · Pausar/Reanudar/Repetir ·
     siguiente) y la B, Detener · «Volver a editar». Mismo alto que la compacta: el momento se lee sobre el lienzo. */
  body.storyMode .scPlaybackControls{grid-area:run; display:flex; align-items:center; gap:6px; min-width:0;}
  body[data-story="playing"] .scHeader{grid-template-areas:"ctl ctl expand" "stop exit exit";}
  body[data-story="playing"] .scPlaybackControls{grid-area:ctl;}
  body[data-story="playing"] #scReset{grid-area:stop; justify-self:start; margin:0;}
  body.storyMode .storyKicker, body.storyMode #panelScenarios #scStoryAdd, body.storyMode #scStoriesLabel, body.storyMode #scStatus, body.storyMode #scPaletteToggle{display:none;}
  #scScenarioTitle, #scStoryNameInput{grid-area:title; margin:0;}
  #scScenarioMenu{grid-area:menu; justify-self:end;}
  #btnStoryExpand{display:inline-flex; grid-area:expand; justify-self:end;}
  body.storyExpanded #btnStoryExpand .ic{transform:rotate(180deg);}
  #scReset{grid-area:run; justify-self:start;}
  #btnStoryExit{grid-area:exit; justify-self:end;}
  #scErrors, #scUnsupported, #scFlow{grid-column:1 / -1; margin:0;}
  .scRunHint{font:400 var(--fs-body)/1.4 var(--font-mono); color:var(--ink-3); padding:0 2px;}
  /* Reproduciendo, la fila A es el transporte; «Volver a editar» sigue en la fila B en todos los estados. Terminada también
     hay «Detener» (D5: una sola palabra; «Terminar» ya no existe). */
  body.scPlaybackOn #panelScenarios .scHeaderRow{display:none;}
  /* Qué se ve en cada estado. Reproduciendo no se colocan eventos: las fichas no se pintan. */
  body[data-story="compact"] #scLibrarySection, body[data-story="compact"] .scStorySection,
  body[data-story="playing"] #scLibrarySection, body[data-story="playing"]:not(.storyExpanded) .scStorySection{display:none;}
  #panelScenarios{gap:8px; min-height:0;}
  /* dentro de la hoja de Historias el rótulo «HISTORIA» sobra (la hoja ES la Historia): esos 19 px van a la línea de tiempo */
  .scStorySection > h3{display:none;}
  /* Ampliada: los eventos son fichas en un carril horizontal (los mismos nodos de la biblioteca), con «+ Crear evento» delante
     y su ⋯ dentro; la paleta flotante no se usa en la hoja. */
  #scLibrarySection{flex:none; display:flex; flex-direction:row; align-items:center; gap:8px; min-height:0; padding:0 0 6px; border-bottom:1px solid var(--rule); overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
  #scLibrarySection::-webkit-scrollbar{display:none;}
  #scLibrarySection .scSectionHeader{display:contents;}
  #scLibrarySection h3{flex:none; margin:0 4px 0 0;}
  #scLibrarySection .scLibraryHint, #scEventSearch{display:none;}
  #scEventNew{flex:none; min-height:var(--ctl-h); border:1px dashed var(--rule-2); border-radius:var(--r-pill); padding:0 12px; font-size:var(--fs-ui); color:var(--ink-2);}
  #scEventLibrary{display:flex; flex:none; gap:8px; overflow:visible; min-height:0;}
  #scEventLibrary .scEmptyState{padding:4px 0; font-size:12px; line-height:1.4; max-width:280px; white-space:normal;}
  #scEventLibrary .scEmptyState strong{display:inline; margin:0 4px 0 0;}
  #scEventLibrary > .hint{margin:0; white-space:nowrap;}
  .scEventRow{flex:none; min-height:var(--ctl-h); border:1px solid var(--rule-2); border-radius:var(--r-pill); background:var(--surface-raised); padding:0 2px 0 0;}
  .scEventRow:hover, .scEventRow.new{background:var(--active-veil); border-color:var(--active-rule);}
  .scEventPlace{padding:0 6px 0 12px; min-height:var(--ctl-h); gap:8px;}
  .scEventPlace span:last-child{max-width:150px;}
  .scEventRow .scMore{min-width:var(--ctl-h); min-height:var(--ctl-h); border-radius:var(--r-pill);}
  /* La línea de tiempo recibe el resto de la hoja y es lo único que se desplaza (la hoja tiene overflow:hidden). */
  .scStorySection{min-height:0; gap:6px;}
  .scStoryboardSection{min-height:0; flex:1; overflow:auto;}
  /* Barra de páginas: la activa con nombre (recortado) y ▾; las demás solo con su índice; «＋» fijo a la derecha aunque las
     pestañas se desplacen. Eliminar vive en el menú de la página. */
  footer .tab:not(.active) > span:first-child, footer .tab .x{display:none;}
  footer .tab.active{flex:1 1 auto; min-width:64px; max-width:200px; gap:6px;}
  footer .tab.active > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis;}
  /* Con menos de 200 px para las páginas (390/375 con Historias y Presentar al lado) el nombre no cabe con dignidad: la
     activa queda como «01 ▾» (su nombre se lee en el menú de la página) y las demás como índice. */
  #pagesBar{container-type:inline-size;}
  footer .tab:not(.active){min-width:40px; justify-content:center; padding:0 6px;}
  @container (max-width:200px){ footer{padding:0 2px; gap:2px;} footer .tab.active > span:first-child{display:none;} footer .tab.active{flex:0 0 auto; min-width:0; padding:0 0 0 6px; gap:2px;} }
  #pagesBar > .pgAdd{position:sticky; right:0; width:var(--ctl-h); min-width:var(--ctl-h); background:var(--surface); margin-left:2px;}
  /* FLUYO-018.18 (D10): en el teléfono las páginas son UN selector («03 Nombre ▾») que abre la lista con «＋ Nueva página».
     La tira de pestañas y su «＋» no se pintan: desbordaban y la activa podía quedar oculta (auditoría 018.18, § 3.5). */
  #pagesBar > .tab, #pagesBar > .pgAdd{display:none;}
  #pagesBar > .pgSelect{display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; min-height:var(--ctl-h); padding:0 10px; border:1px solid var(--rule-2); border-radius:var(--r-sm); background:var(--surface-raised); color:var(--ink);}
  #pagesBar > .pgSelect .pgIdx{flex:none; font:500 var(--fs-micro)/1 var(--font-mono); letter-spacing:.04em; color:var(--active);}
  #pagesBar > .pgSelect .pgName{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 15px/1.2 var(--font-serif);}
  #pagesBar > .pgSelect::after{content:""; flex:none; width:12px; height:12px; background:currentColor; opacity:.7; -webkit-mask:var(--mask-chevron) center/contain no-repeat; mask:var(--mask-chevron) center/contain no-repeat;}
  /* Colocando un evento: el objetivo está en el lienzo, así que la hoja se aparta mientras dure; la barra de
     colocación (con Cancelar) queda a la vista. */
  body.panelOpen.scPlacing aside{transform:translateY(calc(100% + var(--bb-h) + 12px)); visibility:hidden;}

  .touchBar{top:10px;}
  #scNotice{left:12px; right:12px; bottom:calc(var(--bb-h) + 12px); max-width:none;}
  #scPlacementBar{bottom:calc(var(--bb-h) + 10px);}
  .moreMenu{top:58px;}
  .moreMenu .fieldRow select{width:150px;}
}
/* A 375–420 px Compartir se queda en icono: la fila de la cabecera tiene que caber entera. */
@media (max-width:420px){
  body > header > #btnShare{width:var(--ctl-h); min-width:var(--ctl-h); padding:0;}
  body > header > #btnShare .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce), (orientation:landscape) and (max-height:500px) and (pointer:coarse) and (prefers-reduced-motion:reduce){ aside, body.panelOpen aside{transition:none;} }
@media (prefers-reduced-motion:reduce){ .scLive{animation:none;} }
/* El rótulo «Historias» queda para el nombre accesible del selector (aria-labelledby); a la vista lo dice la barra del modo. */
.scStoriesLabel{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
/* Tableta (701–1024 px): Historias en 300 px, el mínimo con la biblioteca de eventos dentro (por debajo de 300 pasa a
   paleta flotante, editor-scenarios.js). Va al final para ganar a la regla general de 320. */
@media (min-width:701px) and (max-width:1024px){ aside.scenariosOpen{width:300px; flex-basis:300px;} }
/* FLUYO-018.17: con el dedo, los campos a 16 px también donde una regla con id fija el tamaño (Safari iOS hace zoom al enfocar
   un campo más pequeño). La regla general está al final de css/system.css. */
@media (pointer:coarse){ textarea#lblEdit, #panelProperties .row select, #panelProperties .row input:not([type=range]):not([type=checkbox]):not([type=color]), .scPopover input, .pageMenu input, .moreMenu select, .scDialog input:not([type=radio]):not([type=checkbox]):not([type=color]), .scDialog select{font-size:16px;} }

/* ===================== FLUYO-018.19 — Diálogo de evento: lo esencial primero =====================
   Nombre · dónde ocurre · frase · símbolo arriba; «Cómo se ve» plegado con la vista previa dentro (index.html). Una columna,
   44 px con el dedo para lo que cierra, confirma o elige (segmentados, plegables, «Ver ejemplo»), 40 para chips e inserción,
   y nada por debajo de 28 con ratón. Lo seleccionado usa el oliva de activo del sistema, no el cian del editor antiguo. */
@media (min-width:561px) and (min-height:501px){ .scDialog.scEventDialog{width:min(600px, calc(100vw - 32px));} }
.scEventColumns{display:block;}
.scEventPreview{position:static; top:auto; padding:12px; box-shadow:none;}
.scPreviewSlot:empty{display:none;}
#scEventClose{width:var(--ctl-h); min-width:var(--ctl-h); min-height:var(--ctl-h); padding:0; justify-content:center;}
.scDialog .scPhrase input.scPhraseText{border:0; background:transparent; box-shadow:none; padding:5px 2px; min-height:28px; min-width:28px;}
.scDialog .scPhrase input.scPhraseText:focus{box-shadow:inset 0 -1px 0 var(--active);}
.scPhraseChip{display:inline-flex; align-items:center; min-height:28px; background:var(--active-veil); border-color:var(--active-rule);}
.scPhraseInsert button, .scFlowMore>summary, #scPreviewPlay{min-height:28px;}
.scFlowMore>summary{display:flex; align-items:center;}
.scSegmented input:checked+span, #scVisualPicker button[aria-pressed=true]{border-color:var(--active-rule); background:var(--active-veil);}
.scChoice:has(input:checked), .scEffectChip:has(input:checked){border-color:var(--active-rule); background:var(--active-veil);}
#scVisualPicker button:last-child{min-width:40px;}
.scEffectChip{flex-direction:row; min-height:40px; padding:0 8px;}
.scEffectLabel{font-size:12px;}
@media (pointer:coarse){
  #scEventClose{min-width:var(--ctl-h-touch); min-height:var(--ctl-h-touch);}
  .scDialog>footer button{min-height:var(--ctl-h-touch); padding:0 18px;}
  .scSegmented span{min-height:var(--ctl-h-touch); display:flex; align-items:center;}
  .scAccordion summary{min-height:var(--ctl-h-touch); justify-content:center; box-sizing:border-box;}
  .scFlowMore>summary, #scPreviewPlay, .scEffectChip, .scChoice{min-height:var(--ctl-h-touch);}
  .scPhraseChip, .scPhraseInsert button, #scChangeSymbol, .scDialog .scPhrase input.scPhraseText{min-height:var(--row-h-touch);}
  .scDialog .scPhrase input.scPhraseText{min-width:var(--row-h-touch);}
  .scPhraseInsert button{padding:0 12px; font-size:12px;}
  #scVisualPicker button{min-width:var(--row-h-touch);}
}
/* Teléfono (pantalla completa): cabecera de una línea, pie con el área segura. */
@media (max-width:560px), (max-height:500px){
  .scEventDialog > header{padding:4px 8px 4px 16px; min-height:52px;}
  .scEventDialog > footer{padding:8px 16px calc(8px + env(safe-area-inset-bottom));}
  .scEventDialog .scDialogBody{padding:16px;}
}
/* Apaisado corto: el nombre y «¿Dónde ocurre?» comparten fila; lo demás, a lo ancho. */
@media (orientation:landscape) and (max-height:500px){
  .scEventFields{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; row-gap:14px;}
  .scEventFields>*{grid-column:1 / -1;}
  .scEventFields>.scFieldGroup:first-child{grid-column:1;}
  .scEventFields>#scWhere{grid-column:2;}
}

/* ===================== FLUYO-018.19 — Teléfono en apaisado: lienzo + hoja lateral =====================
   Solo con puntero táctil y ≤ 500 px de alto (el escritorio nunca entra). Rige la gramática del teléfono (bloque «Móvil»), con
   estas diferencias: una sola barra superior de 48 px que recibe el selector de página y los modos (placeChrome), sin barra
   inferior, rail vertical que se desplaza (nunca desborda el documento), Propiedades e Historias como hojas a la DERECHA que solo
   aparecen cuando se piden, y reproducir como una franja inferior de una fila (como Present y el Viewer en apaisado). */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  :root{ --bb-h:0px; --side-w:320px; --props-w:min(320px, 44vw); --hdr-h:48px; }
  #bottomBar{display:none;}
  body > header{min-height:var(--hdr-h); height:var(--hdr-h); padding:0 8px 0 12px; gap:4px;}
  body > header > #pagesBar{flex:0 1 240px; min-width:0; display:flex; align-items:center; padding:0 0 0 4px; border:0; background:transparent; overflow:hidden;}
  body > header > #pagesBar > .pgSelect{max-width:100%;}
  body > header > #modeBar{padding:0; gap:4px;}
  body > header > #btnShare{width:var(--ctl-h); min-width:var(--ctl-h); padding:0;}
  body > header > #btnShare .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  #btnPanel{display:inline-flex; align-items:center; justify-content:center;}
  .moreMenu{top:calc(var(--hdr-h) + 6px);}
  /* lienzo a sangre, a lo ancho; el rail a la izquierda, vertical y desplazable */
  main{flex-direction:row;}
  .stage, body.storyMode .stage{padding:0;}
  #wrap{width:100%; height:100%; border-radius:0; box-shadow:none;}
  .rail{width:52px; height:auto; flex-direction:column; flex-wrap:nowrap; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:6px 0; gap:2px; border-bottom:0; border-right:1px solid var(--rule-2);}
  .rail button{flex:none;}
  .rail button.toggled{box-shadow:inset -2px 0 0 var(--active);}
  .rail hr{width:24px; height:auto; border-left:0; border-top:1px solid var(--rule); margin:5px 0;}
  /* las hojas salen por la derecha, entre la cabecera y el borde inferior */
  aside, aside.scenariosOpen{top:var(--hdr-h); bottom:0; left:auto; right:0; width:var(--side-w); flex-basis:auto; height:auto; max-height:none;
    border-top:0; border-left:1px solid var(--rule-2); border-radius:0; padding:10px 16px 12px; transform:translateX(calc(100% + 12px));}
  aside::before{display:none;}
  body.panelOpen.scPlacing aside{transform:translateX(calc(100% + 12px)); visibility:hidden;}
  /* Propiedades, más estrecha en los teléfonos de 667 px (Historias necesita los 320 para su fila de transporte) */
  body:not(.storyMode) aside{width:var(--props-w);}
  body.panelOpen:not(.storyMode) .touchBar{left:calc((100% - var(--props-w)) / 2); max-width:calc(100% - var(--props-w) - 16px);}
  body.panelOpen:not(.storyMode) #btnDelTouch{right:calc(var(--props-w) + 14px);}
  /* Historias en la hoja lateral: con la altura entera, compacta ya es el taller (fichas + línea de tiempo); «Ampliar» solo
     tiene sentido reproduciendo (abre la línea de tiempo desde la franja). */
  body[data-story="compact"] #scLibrarySection{display:flex;}
  body[data-story="compact"] .scStorySection{display:flex;}
  body[data-story="compact"] #btnStoryExpand, body[data-story="expanded"] #btnStoryExpand{display:none;}
  /* Reproduciendo: la hoja se recoge en una franja inferior de una fila (D6); el momento se lee sobre el lienzo (#scNow). */
  body[data-story="playing"]:not(.storyExpanded) aside.scenariosOpen{top:auto; left:0; right:0; width:auto; bottom:0;
    border-left:0; border-top:1px solid var(--rule-2); padding:6px 16px calc(6px + env(safe-area-inset-bottom));}
  body[data-story="playing"]:not(.storyExpanded) .scHeader{grid-template-columns:auto minmax(0,1fr) auto auto auto; grid-template-areas:"ctl . stop expand exit"; gap:6px;}
  body[data-story="playing"]:not(.storyExpanded) #scReset{grid-area:stop;}
  /* el lienzo es bajo y ancho: el rótulo del momento, más corto, cabe a un lado del destino (scPlaceNow prueba los lados) */
  .scNow{max-width:min(calc(60% - 24px), 480px);}
  #scNowLabel{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
}

/* ===================== Escritura por idioma, S4 (FLUYO-I18N-002) =====================
   Solo japonés y chino (español, inglés y francés no cambian). El bloque de tokens de css/system.css sube --fs-micro/--fs-label, pero
   estas reglas escriben el tamaño a mano: un trazo CJK no se lee a 9–11 px. Suelo de 12 px (D-S4-5); los nombres de icono, el pie del
   riel y las marcas de tamaño, a 11. Sin cursiva (ni Yu Gothic UI ni YaHei UI la tienen: el navegador inclinaría los glifos) y sin
   espaciado de letras en las cabeceras en mayúsculas del modal de evento. */
:root:is(:lang(ja), :lang(zh)) :is(.scFlowEnds, .scFlowRows, .scLibraryHint, .scTogether, .scWaits, .scStoryRepair, .scGroupWarning, .scPhraseInsert button, .scEventPreview h3){ font-size:12px; }
:root:is(:lang(ja), :lang(zh)) :is(.rail button, .iconGrid button, .scVisualSeg .s1, .scDropLine span){ font-size:11px; }
:root:is(:lang(ja), :lang(zh)) .scEventPreview h3{ letter-spacing:0; }
:root:is(:lang(ja), :lang(zh)) .scStepMessage{ font-style:normal; }
/* El campo de un segmento de la frase se dimensiona con `size` (nº de caracteres de ≈ 0,6 em): el texto CJK (1 em por carácter) se
   recortaba. Con texto CJK el campo se ajusta al contenido (field-sizing, Chrome ≥ 123; Safari y Firefox conservan `size`). La marca
   data-cjk la pone js/editor-scenarios.js (parche posterior a S2a); sin ella la regla no se activa y nada cambia. */
.scPhrase input.scPhraseText[data-cjk]{ field-sizing:content; }