/* Controles de orden propios; no cambian el tamaño de las miniaturas. */
/* 9-oct-2026: el asa queda solo para teclado (flechas, Inicio/Fin y el panel
   «← Antes · Después →»); con el ratón o el dedo se arrastra la miniatura. */
#attrow .ref-orden-handle{position:absolute;z-index:4;top:3px;left:3px;display:grid;place-items:center;width:24px;height:24px;min-height:0;padding:5px;border:1px solid #ffffff24;border-radius:7px;background:#111e;color:#f5f5f5;opacity:0;pointer-events:none;user-select:none}
#attrow .ref-orden-handle:focus-visible{opacity:1}
#attrow .ref-orden-handle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;pointer-events:none}
#attrow .ref-orden-handle:focus-visible,#attrow .ref-orden-acciones button:focus-visible{outline:2px solid var(--studio-accent,#b8f36b);outline-offset:2px}
#attrow .ref-orden-handle.ref-orden-drag{cursor:grabbing;background:#26381c;color:#c7f78d}
#attrow .ref-orden-destino{outline:2px solid var(--studio-accent,#b8f36b);outline-offset:2px}
#attrow .ref-orden-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#attrow .ref-orden-acciones{flex:0 0 100%;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;padding:6px 0;color:var(--text,#f5f5f5);font-size:11px}
#attrow .ref-orden-acciones span{margin-right:4px}
#attrow .ref-orden-acciones button{min-height:40px;padding:7px 9px;border:1px solid var(--border2,#ffffff24);border-radius:8px;background:var(--surface2,#181818);color:inherit;font:inherit;cursor:pointer}
#attrow .ref-orden-acciones button:disabled{opacity:.4;cursor:default}
@media(pointer:coarse){#attrow .ref-orden-acciones button{min-height:44px}}
#attrow .attchip.ref-orden-drag{opacity:.4;cursor:grabbing}
#attrow .attchip.ref-orden-levantada{transform:scale(1.06);box-shadow:0 8px 22px #000a}
.ref-orden-fantasma{position:fixed;z-index:700;width:56px;height:56px;margin:-28px 0 0 -28px;border:2px solid var(--verde-cocuyo,#aff33e);border-radius:10px;overflow:hidden;background:#111;box-shadow:0 12px 30px #000c;pointer-events:none;transform:rotate(-4deg)}
.ref-orden-fantasma :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
body:has(.ref-orden-fantasma){cursor:grabbing}

/* Referencias como Higgsfield (8-oct-2026): subidas con % y ×, fichas que el
   modelo no admite, avisos con acción y selector numerado. */
#attrow .attchip.att-subiendo{display:grid;place-items:center;outline-offset:2px}
#attrow .attchip.att-subiendo:focus-visible{outline:2px solid var(--studio-accent,#b8f36b)}
#attrow .att-anillo{width:min(40px,64%);height:auto;aspect-ratio:1;transform:rotate(-90deg)}
#attrow .att-anillo circle{fill:none;stroke-width:3}
#attrow .att-anillo-pista{stroke:#ffffff1f}
#attrow .att-anillo-avance{stroke:var(--verde-cocuyo,#aff33e);stroke-linecap:round;transition:stroke-dasharray .2s ease}
#attrow .att-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:650;color:var(--text,#f5f5f5);font-variant-numeric:tabular-nums;pointer-events:none}
#attrow .att-cancelar{position:absolute;top:2px;right:2px;z-index:3;display:grid;place-items:center;width:20px;height:20px;min-height:0;padding:0;border:0;border-radius:50%;background:#000000b3;color:var(--text,#f5f5f5);cursor:pointer}
#attrow .att-cancelar .ic{width:12px;height:12px}
#attrow .att-cancelar:hover{background:#b91c1c}
#attrow .att-cancelar:focus-visible{outline:2px solid var(--studio-accent,#b8f36b);outline-offset:1px}
@media(pointer:coarse){#attrow .att-cancelar{width:28px;height:28px}}
#attrow .attchip.sobra img,#attrow .attchip.sobra video,#attrow .attchip.sobra .attico,.ref-frame-slot.sobra img{opacity:.38;filter:grayscale(.7)}
#attrow .attchip.sobra{border-color:color-mix(in srgb,#f59e0b 55%,transparent)}
.att-sobra{position:absolute;left:3px;right:3px;bottom:3px;z-index:2;padding:2px 2px;border-radius:6px;background:#000000c7;color:#fbbf24;font-size:9px;font-weight:650;letter-spacing:-.01em;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ref-frame-slot.sobra{position:relative}
.ref-frame-slot.sobra .att-sobra{bottom:auto;top:4px}
/* Aviso de referencias con acción («Ajustar a …», «Deshacer»). */
#genstatus .genstatus-acciones{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:auto}
#genstatus .genstatus-accion{min-height:34px;padding:6px 12px;border:1px solid var(--verde-cocuyo,#aff33e);border-radius:999px;background:transparent;color:var(--verde-cocuyo,#aff33e);font:600 12.5px var(--fuente,var(--font,sans-serif));white-space:nowrap;cursor:pointer}
#genstatus .genstatus-accion:hover{background:var(--verde-cocuyo,#aff33e);color:var(--negro-abismo,#050505)}
#genstatus .genstatus-accion:focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
@media(pointer:coarse){#genstatus .genstatus-accion{min-height:44px}}
/* Audio: las referencias de Imagen/Video se guardan, no cuentan aquí. */
.ref-audio-nota{margin:6px 2px 0;font-size:12px;line-height:1.45;color:var(--dim,#a1a1a1)}
.ref-audio-nota[hidden]{display:none}
/* Selector «Tu biblioteca»: número de orden y aviso propio. */
.bibpieza .bibnum{font-size:12px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
.bibpieza.bibno[aria-disabled="true"]{cursor:not-allowed}
.bibpieza.bibno[aria-disabled="true"]:hover{transform:none}
.bibaviso{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.4;color:#fbbf24}
.bibaviso[hidden]{display:none}
.bibpieza.bibno .bibno-txt{left:7px;right:auto;max-width:calc(100% - 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bibpieza.bibno[aria-disabled="true"] .bibmarca{display:none}

/* Soltar en toda la zona de crear (9-oct-2026, estudio-referencias-soltar.js):
   contorno discontinuo sobre lienzo y compositor, rótulo en el centro del
   lienzo y compositor con contorno lima de 2 px. No recibe eventos: los
   huecos de debajo se resaltan y reciben lo soltado. */
.ref-soltar-capa{position:fixed;z-index:460;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--verde-cocuyo,#aff33e) 70%,transparent);border-radius:18px;background:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 4%,transparent);pointer-events:none}
.ref-soltar-capa[hidden]{display:none}
.ref-soltar-aviso{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;max-width:min(420px,calc(100% - 32px));padding:18px 24px;border:1px solid color-mix(in srgb,var(--verde-cocuyo,#aff33e) 45%,transparent);border-radius:16px;background:var(--negro-abismo,#050505);box-shadow:0 18px 50px #000b;text-align:center;color:var(--text,#f5f5f5)}
.ref-soltar-aviso svg{width:26px;height:26px;fill:none;stroke:var(--verde-cocuyo,#aff33e);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ref-soltar-aviso b{font:650 15px/1.35 var(--font,sans-serif);color:var(--verde-cocuyo,#aff33e)}
.ref-soltar-aviso span{font:500 12px/1.45 var(--font,sans-serif);color:var(--dim,#a1a1a1)}
.ref-soltar-aviso span:empty{display:none}
#mesa .composer.ref-soltar-zona{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
/* Huecos Inicio/Final: destino resaltado, ⇄ entre los dos y «Pasar a Primer fotograma». */
#mesa #refgrid .ref-frame-slot.ref-frame-destino :is(.ref-add-compact,.ref-frame-ver){border:2px solid var(--verde-cocuyo,#aff33e)!important;background:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 10%,var(--surface2,#181818))!important}
#mesa #refgrid .ref-frame-slots{align-items:center}
#mesa #refgrid .ref-frame-slots>.ref-frame-slot{flex:1 1 0;min-width:0}
/* 10-oct-2026: el ⇄ flota sobre el hueco entre los dos fotogramas y no les
   quita ancho: «Primer fotograma» y «Último fotograma» conservan el tamaño de
   antes y su nombre en una línea (a 1001–1080 px se partía en dos y quedaba a
   la izquierda). El orden de teclado sigue siendo Primer · ⇄ · Último. */
#mesa #refgrid .ref-frame-slots:has(>.ref-frame-intercambiar){position:relative}
#mesa #refgrid .ref-frame-slots>.ref-frame-intercambiar{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--surface,#111)}
#mesa #refgrid .ref-frame-slot .ref-add-compact .ref-add-label{text-align:center}
#mesa #refgrid .ref-frame-intercambiar{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;border:1px solid var(--border2,#ffffff24);border-radius:50%;background:var(--surface2,#181818);color:var(--text,#f5f5f5);cursor:pointer}
#mesa #refgrid .ref-frame-intercambiar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mesa #refgrid .ref-frame-intercambiar:not(:disabled):hover{border-color:var(--verde-cocuyo,#aff33e);color:var(--verde-cocuyo,#aff33e)}
#mesa #refgrid .ref-frame-intercambiar:disabled{color:color-mix(in srgb,var(--text,#f5f5f5) 35%,transparent);cursor:default}
#mesa #refgrid .ref-frame-intercambiar:focus-visible,#mesa #refgrid .ref-frame-pasar:focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
#mesa #refgrid .ref-frame-pasar{flex:1 0 100%;justify-self:start;margin:2px 0 0;padding:6px 0;border:0;background:none;color:var(--verde-cocuyo,#aff33e);font:600 12px/1.4 var(--font,sans-serif);text-align:left;cursor:pointer}
#mesa #refgrid .ref-frame-pasar:hover{text-decoration:underline}
#mesa #refgrid button.ref-frame-ver[draggable="true"]{cursor:grab}
@media(pointer:coarse){#mesa #refgrid .ref-frame-intercambiar{width:36px;height:36px}#mesa #refgrid .ref-frame-pasar{min-height:44px}}
/* «Tu biblioteca»: límites del modelo en la cabecera, «Subir» primero y
   casilla a la vista al pasar el ratón (como el selector de Higgsfield). */
.bibtitulo{display:grid;gap:2px;min-width:0}
/* 9-oct-2026: los límites se leen enteros (hasta dos líneas, sin «…») y con
   contraste AA sobre el fondo del selector (#a1a1a1 sobre #121212: 7,4:1). */
.biblimites{font-size:11.5px;font-weight:500;line-height:1.35;color:#a1a1a1;white-space:normal;overflow-wrap:anywhere;max-width:min(560px,100%)}
.bibsubir{position:relative;aspect-ratio:1/1;align-self:start;min-width:0}
.bibsubir-boton{display:grid;place-content:center;justify-items:center;gap:6px;width:100%;height:100%;padding:10px;border:1px dashed var(--border2,#ffffff24);border-radius:13px;background:var(--surface,#111);color:var(--text,#f5f5f5);font-family:inherit;text-align:center;cursor:pointer;transition:.14s}
.bibsubir-boton .ic{width:24px;height:24px;color:var(--verde-cocuyo,#aff33e)}
.bibsubir-boton b{font-size:12.5px;font-weight:600;line-height:1.3}
.bibsubir-boton span{font-size:11px;line-height:1.35;color:#a1a1a1}
.bibsubir-boton:hover{border-color:var(--verde-cocuyo,#aff33e);background:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 6%,var(--surface,#111))}
.bibsubir-boton:focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
.bibcaja.bib-soltar{border-color:var(--verde-cocuyo,#aff33e);box-shadow:0 0 0 2px var(--verde-cocuyo,#aff33e),0 34px 90px -28px #000d}
.bibpieza:focus-visible .bibmarca{opacity:1}
@media(hover:none){.bibmarca{opacity:1}}
@media(max-width:640px){.biblimites{max-width:none;white-space:normal}}
#bibmodal .bibcuenta{color:#a1a1a1}
#bibmodal .bibtitulo{flex:1 1 auto}
/* Avisos de error de referencias (9-oct-2026): en rojo y con icono, como en el
   móvil; los avisos con «Deshacer» o de progreso siguen neutros. */
body.studio-workbench #genstatus:is([data-aviso-refs="rechazo"],[data-aviso-refs="validacion"]){border-color:color-mix(in srgb,#ff5a52 45%,transparent)!important;background:color-mix(in srgb,#ff5a52 10%,#141414)!important;color:#ffc9c4!important}
body.studio-workbench #genstatus:is([data-aviso-refs="rechazo"],[data-aviso-refs="validacion"])::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#ff5a52;color:#140605;font:800 12px/18px var(--font,sans-serif);text-align:center}
